diff --git a/.DS_Store b/.DS_Store
index 3771460..1532843 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..3844985
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,5 @@
+dist/
+
+*.html
+*.js
+package-lock.json
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..9e67d6b
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+	"trailingComma": "all",
+	"useTabs": true,
+	"tabWidth": 4
+}
diff --git a/README.md b/README.md
index 9bbd4a3..fa0888e 100644
--- a/README.md
+++ b/README.md
@@ -4,39 +4,78 @@ A UI component set for the web.
 
 ## For developers
 
-Wireframe is delivered as three files:
+Wireframe exists as three files:
+
 - A stylesheet containing all css components
 - A javascript module exporting all web components
 - A json file with template elements for SSR (strings)
 
 All components are RTL (right-to-left) compatible.
 
+## For designers
+
+`Wireframe` is named after the technique of drafting low-fidelity interfaces with pen and paper.
+It's also a reference to the polygon meshes found in graphics programming.
+
+`Wireframe` is an aesthetically concise UI language. Components must differentiate themselves
+from text and each other. Their functionality is telegraphed by their visual accent.
+
+I believe creature comforts like expanding circles are ultimately designed for other designers
+(and consequentially job security). They do nothing of signifigance for the user.
+
+Consider `wireframe` a love letter to my former colleagues at Material Design.
+
 ## CSS components
 
 A single css stylesheet includes the following components:
+
 - button
+    - primary button
+    - destructive button
 - checkbox
 - meter
 - number inputs
-	- number
-	- phone
-	- time
-	- date
-	- datetime-local
+    - number
+    - phone
+    - time
+    - date
+    - datetime-local
 - progress
 - radio
 - slider
 - switch
 - textarea
 - text inputs
-	- text
-	- password
-	- email
-	- url
+    - text
+    - password
+    - email
+    - url
+
+- :focus ring
+
+Components not immediately defined by elements are defined by there role:
+
+```css
+input[type=checkbox][role=switch]
+[tabindex=0]
+```
+
+Components not defined by an element or a role are defined by a `data-wf` attribute.
+
+```html
+<li data-wf="icon-button"></li>
+```
+
+Lastly outline is a special case.
+
+```html
+<li data-wf-outline></li>
+```
 
 ## Web components
 
 The following web components are available:
+
 - inline movement
 
 ## License
diff --git a/bundle/src/mod.ts b/bundle/src/mod.ts
index c2fbb42..fd5a6b0 100644
--- a/bundle/src/mod.ts
+++ b/bundle/src/mod.ts
@@ -2,7 +2,7 @@
 
 import * as fs from "fs";
 import * as path from "path";
-import { bundle } from 'lightningcss';
+import { bundle } from "lightningcss";
 
 let originCssPathInput = process.argv[2];
 let targetCssPathInput = process.argv[3];
@@ -10,15 +10,15 @@ let targetCssPathInput = process.argv[3];
 let cwd = process.cwd();
 
 // odd way of handling this ../../../ for two dirs / and a file
-let originCssPath = path.join(cwd, originCssPathInput);
+let filename = path.join(cwd, originCssPathInput);
 let targetCssPath = path.join(cwd, targetCssPathInput);
 
-let { code, map } = bundle({
-  filename: originCssPath,
+let { code } = bundle({
+	filename,
 });
 
 try {
-  fs.writeFileSync(targetCssPath, code);
+	fs.writeFileSync(targetCssPath, code);
 } catch (err) {
-  console.error(err);
+	console.error(err);
 }
diff --git a/bundle/tsconfig.json b/bundle/tsconfig.json
index 4bd8f1c..2a35468 100644
--- a/bundle/tsconfig.json
+++ b/bundle/tsconfig.json
@@ -1,6 +1,7 @@
 {
 	"extends": "../tsconfig.json",
 	"compilerOptions": {
+		"types": ["node"],
 		"rootDir": "./src",
 		"outDir": "./dist"
 	}
diff --git a/components/README.md b/components/README.md
new file mode 100644
index 0000000..a6dd8bc
--- /dev/null
+++ b/components/README.md
@@ -0,0 +1,36 @@
+## Component ideas
+
+- inline movement
+- block movement
+- password
+- 2d pad
+- Radial pad (2d but circle)
+
+## Aria patterns
+
+- toolbar (inline movement might be built already)
+- breadcrumb
+- combobox
+- tabs
+- grid
+- listbox
+
+Stuff that might need a webcomponent
+
+- chip / on off button
+- tabs
+- radio like selection
+    - could represent a tabs
+    - could use a form value maybe?
+- slider
+
+Designs that fucking suck:
+
+Cards
+Navigation
+Drop down menues
+Anything modal
+
+It's boring to not include them but it's more honest. More effective to use Gestalt.
+No amount of dividers is gonna "declutter" the amount of shit in a UI, it just boxes
+up a ton of shit.
diff --git a/components/src/component_templates.json b/components/src/component_templates.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/components/src/component_templates.json
@@ -0,0 +1 @@
+{}
diff --git a/components/src/inline_movement.ts b/components/src/inline_movement.ts
index e47889a..153555e 100644
--- a/components/src/inline_movement.ts
+++ b/components/src/inline_movement.ts
@@ -1,25 +1,19 @@
 // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#using_tabindex
-
-// correlates to start and end
-
-// get bounding rectangle of first and last child
-// determine directionality
-
-export const shadowDom = `<slot></slot>`;
-export const template = `<template>
-	${shadowDom}
-<template>`;
+// https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
 
 let templateEl = document.createElement("template");
-templateEl.setHTMLUnsafe(shadowDom);
+templateEl.setHTMLUnsafe("<slot></slot>");
+
+// You don't need a DSD template because interactivity needs JS.
+// So a slot will load when the component will load.
+//
 
 export class InlineMovement extends HTMLElement {
+	#slot = getSlotElement(this);
+	#mapped = new WeakSet<EventTarget>(this.#slot?.assignedElements() ?? []);
 	#boundOnSlotChange = this.#onSlotChange.bind(this);
 	#boundOnClick = this.#onClick.bind(this);
 	#boundOnKey = this.#onKey.bind(this);
-	#computedStyle = window.getComputedStyle(this);
-	#slot = getSlotElement(this);
-	#mapped = new WeakSet<EventTarget>(this.#slot?.assignedElements() ?? []);
 
 	connectedCallback() {
 		this.#slot?.addEventListener("slotchange", this.#boundOnSlotChange);
@@ -39,10 +33,18 @@ export class InlineMovement extends HTMLElement {
 
 	#onKey(event: KeyboardEvent) {
 		if (event.defaultPrevented) return;
-		if (event.shiftKey) return;
+		if (event.shiftKey || event.altKey) return;
 
 		if (handleBigJumps(event, this.#slot)) return;
-		if (handleArrows(event, this.#slot, this.#mapped, this.#computedStyle)) return;
+		if (
+			handleArrows(
+				event,
+				this.#slot,
+				this.#mapped,
+				window.getComputedStyle(this),
+			)
+		)
+			return;
 	}
 
 	#onClick(event: PointerEvent) {
@@ -58,19 +60,13 @@ export class InlineMovement extends HTMLElement {
 			setNegativeTabIndices(this.#slot);
 			focusOnElement(node);
 			return;
-		};
+		}
 	}
 }
 
 function getSlotElement(el: HTMLElement): HTMLSlotElement | null {
-	let internals = el.attachInternals();
-	let ssr = null !== internals.shadowRoot;
-	let shadowRoot = internals.shadowRoot
-		? internals.shadowRoot
-		: el.attachShadow({ mode: "closed" });
-
-	if (!ssr)
-		shadowRoot.appendChild(document.importNode(templateEl.content, true));
+	let shadowRoot = el.attachShadow({ mode: "closed" });
+	shadowRoot.appendChild(templateEl.content.cloneNode(true));
 
 	return shadowRoot.querySelector("slot");
 }
@@ -88,20 +84,28 @@ function focusOnElement(sibling: HTMLElement) {
 	sibling.focus();
 }
 
-function handleBigJumps(event: KeyboardEvent, slot: HTMLSlotElement | null): boolean {
+function handleBigJumps(
+	event: KeyboardEvent,
+	slot: HTMLSlotElement | null,
+): boolean {
 	if ("Home" !== event.key && "End" !== event.key) return false;
 
 	let bigJump = getFirstOrLast(event, slot);
 	if (bigJump instanceof HTMLElement) {
-			event.preventDefault();
-			setNegativeTabIndices(slot);
-			focusOnElement(bigJump);
+		event.preventDefault();
+		setNegativeTabIndices(slot);
+		focusOnElement(bigJump);
 	}
 
 	return true;
 }
 
-function handleArrows(event: KeyboardEvent, slot: HTMLSlotElement | null, mapped: WeakSet<EventTarget>, computedStyle: CSSStyleDeclaration) {
+function handleArrows(
+	event: KeyboardEvent,
+	slot: HTMLSlotElement | null,
+	mapped: WeakSet<EventTarget>,
+	computedStyle: CSSStyleDeclaration,
+) {
 	if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return false;
 
 	for (let node of event.composedPath()) {
@@ -120,7 +124,10 @@ function handleArrows(event: KeyboardEvent, slot: HTMLSlotElement | null, mapped
 	return true;
 }
 
-function getFirstOrLast(event: KeyboardEvent, slot: HTMLSlotElement | null): Element | undefined {
+function getFirstOrLast(
+	event: KeyboardEvent,
+	slot: HTMLSlotElement | null,
+): Element | undefined {
 	if (!slot) return;
 
 	let elements = slot.assignedElements();
@@ -128,7 +135,11 @@ function getFirstOrLast(event: KeyboardEvent, slot: HTMLSlotElement | null): Ele
 	if ("End" === event.key) return elements[elements.length - 1];
 }
 
-function getSibling(event: KeyboardEvent, node: EventTarget, computedStyle: CSSStyleDeclaration): Element | null | undefined {
+function getSibling(
+	event: KeyboardEvent,
+	node: EventTarget,
+	computedStyle: CSSStyleDeclaration,
+): Element | null | undefined {
 	if (!(node instanceof HTMLElement)) return;
 
 	let prev = node.previousElementSibling;
diff --git a/components/tsconfig.json b/components/tsconfig.json
index 17cb7c1..4bd8f1c 100644
--- a/components/tsconfig.json
+++ b/components/tsconfig.json
@@ -4,4 +4,4 @@
 		"rootDir": "./src",
 		"outDir": "./dist"
 	}
-}
\ No newline at end of file
+}
diff --git a/demo/baseline.html b/demo/baseline.html
new file mode 100644
index 0000000..e69de29
diff --git a/demo/components.html b/demo/components.html
new file mode 100644
index 0000000..858dd32
--- /dev/null
+++ b/demo/components.html
@@ -0,0 +1,93 @@
+<ul>
+	<li>
+		<h1>Button</h1>
+		<p>A <code>button</code> correlates a tap or press to an action in softare.</p>
+		<section>
+			<button>button</button>
+			<button data-wf="primary-button" data-wf-variant="primary">primary</button>
+			<button data-wf="destructive-button" data-wf-variant="destructive">destructive</button>
+			<button data-wf="icon-button" data-wf-variant="icon">1</button>
+			<button data-wf="primary-icon-button">2</button>
+			<button data-wf="destructive-icon-button">&#xD7</button>
+		</section>
+	</li>
+	<li>
+		<h1>Checkbox</h1>
+		<p>A <code>checkbox</code> marks items in a list of items as selected or unselected</p>
+		<section>
+			<input type="checkbox">
+		</section>
+	</li>
+	<li>
+		<section>
+			<p>Radios mark a single item as selected in a list of items.</p>
+			<input type="radio" name="radio-demo">
+			<input type="radio" name="radio-demo">
+			<input type="radio" name="radio-demo">
+		</section>
+	</li>
+	<li>
+		<section>
+			<p>switch</p>
+			<input type="checkbox" role="switch">
+		</section>
+	</li>
+	<li>
+		<section>
+			<p>range</p>
+			<input type="range">
+			<input type="range" style="direction: rtl; writing-mode: vertical-lr;">
+
+		</section>writing-mode: vertical-lr
+	</li>
+	<li>
+		<section>
+			<p>progress</p>
+			<progress max="100" value="30"></progress>
+		</section>
+	</li>
+	<li>
+		<section>
+			<p>text inputs</p>
+			<input>
+		</section>
+	</li>
+	<li>
+		<section>
+			<p>digit inputs</p>
+			<input type="number">
+			<input type="tel">
+			<input type="time">
+			<input type="datetime-local">
+		</section>
+	</li>
+	<li>
+		<section>
+			<p>textarea</p>
+			<textarea></textarea>
+		</section>
+	</li>
+	<li>
+		<section>
+			<p>color input</p>
+			<input type="color"></input>
+		</section>
+	</li>
+</ul>
+</section>
+
+<section>
+	<h1>Webcomponents</h1>
+	<ul>
+		<li>
+			<p>inline-movement</p>
+			<inline-movement>
+				<button tabindex="0">:#</button>
+				<button tabindex="0">:3</button>
+				<button tabindex="0">:D</button>
+			</inline-movement>
+		</li>
+	</ul>
+</section>
+
+<p>chip</p>
\ No newline at end of file
diff --git a/demo/css_component_demo/index.html b/demo/css_component_demo/index.html
deleted file mode 100644
index 695b56e..0000000
--- a/demo/css_component_demo/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-	<link href="./properties.css" rel="stylesheet">
-	</link>
-	<link href="/dist/wireframe.css" rel="stylesheet">
-	</link>
-	<link href="./mod.css" rel="stylesheet">
-	</link>
-</head>
-
-<body>
-	<main data-wf>
-		<ul>
-			<li>
-				<button data-wf>Click me!</button>
-			</li>
-			<li>
-				<input type="checkbox" data-wf>
-			</li>
-			<li>
-				<input type="checkbox" role="switch" data-wf>
-			</li>
-			<li>
-				<input type="radio" name="radio-demo" data-wf>
-				<input type="radio" name="radio-demo" data-wf>
-				<input type="radio" name="radio-demo" data-wf>
-			</li>
-			<li>
-				<input type="range">
-			</li>
-			<li>
-				<input type="text">
-			</li>
-			<li>
-				<input type="password">
-			</li>
-			<li>
-				<input type="email">
-			</li>
-			<li>
-				<input type="url">
-			</li>
-			<li>
-				<input type="time">
-			</li>
-			<li>
-				<input type="date">
-			</li>
-			<li>
-				<input type="datetime-local">
-			</li>
-			<li>
-				<input type="number">
-			</li>
-			<li>
-				<input type="phone">
-			</li>
-			<li>
-				<progress min="0" max="10" value="1"></progress>
-			</li>
-			<li>
-				<meter min="0" max="10" value="5"></meter>
-			</li>
-			<li>
-				<textarea></textarea>
-			</li>
-			<table>
-				<caption>
-					Animals
-				</caption>
-				<thead>
-					<tr>
-						<th scope="col">Person</th>
-						<th scope="col">Most interest in</th>
-						<th scope="col">Age</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<th scope="row">Chris</th>
-						<td>HTML tables</td>
-						<td>22</td>
-					</tr>
-					<tr>
-						<th scope="row">Dennis</th>
-						<td>Web accessibility</td>
-						<td>45</td>
-					</tr>
-					<tr>
-						<th scope="row">Sarah</th>
-						<td>JavaScript frameworks</td>
-						<td>29</td>
-					</tr>
-					<tr>
-						<th scope="row">Karen</th>
-						<td>Web performance</td>
-						<td>36</td>
-					</tr>
-				</tbody>
-				<tfoot>
-					<tr>
-						<th scope="row" colspan="2">Average age</th>
-						<td>33</td>
-					</tr>
-				</tfoot>
-			</table>
-		</ul>
-	</main>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/demo/css_component_demo/mod.css b/demo/css_component_demo/mod.css
deleted file mode 100644
index 0d9425a..0000000
--- a/demo/css_component_demo/mod.css
+++ /dev/null
@@ -1,11 +0,0 @@
-ul {
-	padding: 0;
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-
-li {
-	list-style: none;
-}
diff --git a/demo/css_component_demo/properties.css b/demo/css_component_demo/properties.css
deleted file mode 100644
index ced5ca3..0000000
--- a/demo/css_component_demo/properties.css
+++ /dev/null
@@ -1,123 +0,0 @@
-:root {
-	color-scheme: light dark;
-
-	--color-wf: light-dark(#3e3e3e, #e9e9e9);
-	--text-color-wf: light-dark(#3e3e3e, #e9e9e9);
-
-	--color-inverted-wf: light-dark(#f9f9f9, #3e3e3e);
-	--font-family-wf: "SF Pro", "San Francisco", "Roboto Flex", "Segoe UI Variable", Helvetica, sans-serif;
-
-
-	/* general */
-	--transition-time: 500ms;
-	--color: var(--color-wf);
-	--line-height: 2rem;
-
-
-	/* BUTTON */
-	--button_border: 2px solid var(--color-wf);
-	--button_border-radius: 1lh;
-	--button_font: 1rem var(--font-family-wf);
-	--button_background: var(--color-inverted-wf);
-	--button_color: 0.5rem;
-	--button_padding-block: 0.5rem;
-	--button_padding-inline: 1rem;
-
-	/* button - optional, fallbacks to above */
-	/* --button_border_hover: 2px solid var(--color-wf);
-	--button_background_hover: var(--color-wf);
-	--button_color_hover: 0.5rem; */
-
-	--button_border_active: 2px solid var(--color-wf);
-	--button_background_active: var(--color-wf);
-	--button_color_active: 0.5rem;
-
-	--button_border_disabled: 2px solid var(--color-wf);
-	--button_background_disabled: var(--color-wf);
-	--button_color_disabled: 0.5rem;
-	--button_opacity_disabled: 0.5;
-
-
-	/* CHECKBOX */
-	--checkbox_block-size: 1.5rem;
-	--checkbox_border: 2px solid var(--color-wf);
-	--checkbox_border-radius: 4px;
-	--checkbox_font: 0.9rem var(--font-family-wf);
-	--checkbox_color: var(--color-inverted-wf);
-
-	--checkbox_background_checked: var(--color-wf);
-	--checkbox_content_checked: '\2714';
-	--checkbox_content_indeterminate: '\2014';
-
-	--checkbox_border_disabled: 2px solid var(--color-wf);
-	--checkbox_background_disabled: var(--color-wf);
-	--checkbox_color_disabled: ;
-
-
-	/* SWITCH / TOGGLE */
-	--switch_inline-size: 3rem;
-	--switch_block-size: 1.75rem;
-	--switch_border-radius: 1.75rem;
-	--switch_border: 2px solid var(--color-wf);
-	--switch_background: none;
-
-	--switch-island_inline-size: 0.5rem;
-	--switch-island_block-size: 0.5rem;
-	--switch-island_color: var(--color-wf);
-	--switch-island_font: 0.9rem var(--font-family-wf);
-	--switch-island_border-radius: 50%;
-	--switch-island_border: 2px solid var(--color-wf);
-	--switch-island_background: none;
-
-	--switch-island_inline-size_checked: 1rem;
-	--switch-island_block-size_checked: 1rem;
-	--switch-island_content_checked: '\2714';
-	--switch-island_border_checked: 2px solid var(--color-wf);
-	--switch-island_color_checked: var(--color-inverted-wf);
-	--switch-island_background_checked: var(--color-wf);
-
-
-	/* RADIO */
-	--radio_border: 2px solid var(--color-wf);
-	--radio_background: none;
-	--radio_block-size: 1.5rem;
-
-	--radio-island_background: none;
-	--radio-island_block-size: 0.9rem;
-	--radio-island_border: none;
-
-	--radio-island_border_checked: none;
-	--radio-island_background_checked: var(--color-wf);
-
-
-	/* TEXT INPUT (general keyboard input) */
-	--text-input_color: var(--color-wf);
-	--text-input_font: 1rem var(--font-family-wf);
-	--text-input_background: light-dark(#efefef, #484848);
-	--text-input_border: none;
-	--text-input_border-radius: 1lh;
-	--text-input_border-block-start: ;
-	/* --text-input_border-block-end: 1px solid light-dark(#2a2a2a, #efefef); */
-	--text-input_border-inlne-start: ;
-	--text-input_border-inlne-end: ;
-	--text-input_border-start-start-radius: ;
-	--text-input_border-start-end-radius: ;
-	--text-input_border-end-start-radius: ;
-	--text-input_border-end-end-radius: ;
-	--text-input_padding-inline: 1lh;
-	--text-input_padding-block: 0.5lh;
-
-
-	/* text disabled */
-	--text-input_background_disabled: ;
-	--text-input_border_disabled: ;
-	--text-input_opacity_disabled: ;
-
-	/* DIGIT INPUT */
-	--number-input_font: 1rem monospace, monospace;
-	--number-input_font: 1rem var(--font-family-wf);
-
-	/* PROGRESS */
-	--progress_border: 2px solid var(--color-wf);
-	--progress_border-radius: 1lh;
-}
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index bffeaea..98b0199 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -2,35 +2,58 @@
 <html>
 
 <head>
-	<link href="../stylesheets/themes/95.css" rel="stylesheet">
-	</link>
 	<link href="../dist/wireframe.css" rel="stylesheet">
-	</link>
-	<link href="./demo.css" rel="stylesheet">
-	</link>
+	<link href="../stylesheets/themes/wireframe.css" rel="stylesheet">
+	<link href="./styles/demo.css" rel="stylesheet">
 
-	<script type="module" src="./scripts/components.js">
-	</script>
+	<script type="module" src="./scripts/components.js"></script>
 </head>
 
 <body>
+	<header data-grid-name="hd">
+		<h1>Wireframe</h1>
+		<p>A project from <a href="https://herebythere.com/">Here By There</a></p>
+	</header>
 	<main>
-		<section>
-			<p>button</p>
-			<p>primary button</p>
-			<p>destructive button</p>
-			<p>cancel button</p>
-			<p>checkbox</p>
-			<p>chip</p>
-			<p>radio</p>
-			<p>switch</p>
-			<p>range</p>
-			<p>progress</p>
-			<p>text inputs</p>
-			<p>digit inputs</p>
-			<p>textarea</p>
+		<section data-grid-name="ls">
+			<h1>About</h1>
+			<ul>
+				<li>Preface</li>
+				<li>Building for the web</li>
+				<li>How to</li>
+			</ul>
+			<h1>Css Components</h1>
+			<ul>
+				<li>Button</li>
+				<li>Checkbox</li>
+				<li>Radio</li>
+				<li>Switch</li>
+				<li>Range</li>
+				<li>Progress</li>
+				<li>Text inputs</li>
+				<li>Digit inputs</li>
+				<li>Textarea</li>
+				<li>Color swatch</li>
+			</ul>
+			<h1>Web Components</h1>
+			<ul>
+				<li>Toolbar</li>
+				<li>Grid</li>
+				<li>Chip</li>
+				<li>Chip</li>
+			</ul>
+		</section>
+		<section data-grid-name="cpmt">
+			<section>
+				<p>color</p>
+				<input type="color">
+
+			</section>
 		</section>
 	</main>
+	<footer data-grid-name="ftr">
+		Hello a footer!
+	</footer>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/demo/scripts/hangar.ts b/demo/scripts/hangar.ts
index 40e7b6a..e3d800f 100644
--- a/demo/scripts/hangar.ts
+++ b/demo/scripts/hangar.ts
@@ -1,7 +1,4 @@
 // Repeat svg with element in the center.
 // Or aligned with text?
 
-export class Hangar extends HTMLElement {
-
-}
-
+export class Hangar extends HTMLElement {}
diff --git a/demo/styles/demo.css b/demo/styles/demo.css
new file mode 100644
index 0000000..f3ff4f8
--- /dev/null
+++ b/demo/styles/demo.css
@@ -0,0 +1,48 @@
+:root {
+	color-scheme: light dark;
+
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+/* Grid */
+
+h1 {
+	padding: 0;
+	margin: 0;
+}
+
+body {
+	display: grid;
+	grid-template-columns: min-content 1fr 1fr;
+	grid-template-areas:
+		"hd  main"
+		"hd  main"
+		"hd  main"
+		"ftr ftr";
+}
+
+[data-grid-name="hd"] {
+	grid-area: hd;
+	writing-mode: vertical-rl;
+
+	& h1 {
+		font-size: 4rem;
+	}
+}
+
+[data-grid-name="ftr"] {
+	grid-area: ftr;
+}
+
+main {
+	display: grid;
+	grid-template-areas: "ls  cmpt";
+}
+
+[data-grid-name="ls"] {
+	grid-area: ls;
+}
+
+[data-grid-name="cmpt"] {
+	grid-area: cmpt;
+}
diff --git a/demo/web_components/index.html b/demo/web_components/index.html
deleted file mode 100644
index bc78766..0000000
--- a/demo/web_components/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-	<link href="/stylesheets/themes/95.css" rel="stylesheet">
-	</link>
-	<link href="/dist/wireframe.css" rel="stylesheet">
-	</link>
-	<link href="./mod.css" rel="stylesheet">
-	</link>
-
-	<script type="module" src="/demo/scripts/components.js">
-	</script>
-</head>
-
-<body>
-	<main>
-		<ul>
-			<li>
-				<inline-movement>
-					<button tabindex="0">:#</button>
-					<button tabindex="0">:3</button>
-					<button tabindex="0">:D</button>
-				</inline-movement>
-			</li>
-		</ul>
-	</main>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/demo/web_components/mod.css b/demo/web_components/mod.css
deleted file mode 100644
index 2eadf02..0000000
--- a/demo/web_components/mod.css
+++ /dev/null
@@ -1,17 +0,0 @@
-ul {
-	padding: 0;
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
-
-li {
-	list-style: none;
-}
-
-inline-movement {
-	display: flex;
-	flex-direction: column;
-	max-inline-size: 360px;
-}
diff --git a/icons/icons.html b/icons/icons.html
new file mode 100644
index 0000000..12a5f90
--- /dev/null
+++ b/icons/icons.html
@@ -0,0 +1,7 @@
+<svg>
+	<title></title>
+	<symbol>
+		<title></title>
+	</symbol>
+	<use></use>
+</svg>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1c1c626..7396fe5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,35 +6,27 @@
 		"": {
 			"name": "@herebythere/wireframe",
 			"devDependencies": {
-				"@types/node": "^25.3.5",
-				"@w-lfpup/superaction": "^0.2.0",
-				"@w-lfpup/wctk": "^0.1.1",
-				"lightningcss": "^1.31.1",
-				"prettier": "^3.8.1",
-				"typescript": "^5.9.3"
+				"@types/node": "^26.0.1",
+				"@w-lfpup/hyperevents": "^0.2.3",
+				"lightningcss": "^1.32.0",
+				"prettier": "^3.9.1",
+				"typescript": "^6.0.3"
 			}
 		},
 		"node_modules/@types/node": {
-			"version": "25.3.5",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.5.tgz",
-			"integrity": "sha512-oX8xrhvpiyRCQkG1MFchB09f+cXftgIXb3a7UUa4Y3wpmZPw5tyZGTLWhlESOLq1Rq6oDlc8npVU2/9xiCuXMA==",
+			"version": "26.0.1",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-26.0.1.tgz",
+			"integrity": "sha512-fc3KiUoBt6kie0N9bIW3E47vZsuaMf0PM2AaUpLCLT0s/LvX1nxAim6Fc049cNxODPpGm6qRAuUOB86SkRuPQw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"undici-types": "~7.18.0"
+				"undici-types": "~8.3.0"
 			}
 		},
-		"node_modules/@w-lfpup/superaction": {
-			"version": "0.2.0",
-			"resolved": "https://registry.npmjs.org/@w-lfpup/superaction/-/superaction-0.2.0.tgz",
-			"integrity": "sha512-gHPtuwgo6CA5HFL2gzz+OjFpCOkVNQZh5kv0oeXEyHH/kFEjSZgs2CWB+CCG3PQ2eKKSGsk+vjX/fQrpAH1RSw==",
-			"dev": true,
-			"license": "BSD-3-Clause"
-		},
-		"node_modules/@w-lfpup/wctk": {
-			"version": "0.1.1",
-			"resolved": "https://registry.npmjs.org/@w-lfpup/wctk/-/wctk-0.1.1.tgz",
-			"integrity": "sha512-6MTonyPSrCDyaHPvgPq5p20R5AfSXQ9L10QyT4joEcJSJAViYZfE9LdfwIx5abe3odqEgug4V01EmPPEghT5iA==",
+		"node_modules/@w-lfpup/hyperevents": {
+			"version": "0.2.3",
+			"resolved": "https://registry.npmjs.org/@w-lfpup/hyperevents/-/hyperevents-0.2.3.tgz",
+			"integrity": "sha512-WlXmycNC4VOHu3/mkcf30+TKJu4znh/BGrbIIuhYWeq2mo8Lw1xVaRiEHCjMsmQaQFsNofjctjAX+NgFFfrLUg==",
 			"dev": true,
 			"license": "BSD-3-Clause"
 		},
@@ -49,9 +41,9 @@
 			}
 		},
 		"node_modules/lightningcss": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
-			"integrity": "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+			"integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
 			"dev": true,
 			"license": "MPL-2.0",
 			"dependencies": {
@@ -65,23 +57,23 @@
 				"url": "https://opencollective.com/parcel"
 			},
 			"optionalDependencies": {
-				"lightningcss-android-arm64": "1.31.1",
-				"lightningcss-darwin-arm64": "1.31.1",
-				"lightningcss-darwin-x64": "1.31.1",
-				"lightningcss-freebsd-x64": "1.31.1",
-				"lightningcss-linux-arm-gnueabihf": "1.31.1",
-				"lightningcss-linux-arm64-gnu": "1.31.1",
-				"lightningcss-linux-arm64-musl": "1.31.1",
-				"lightningcss-linux-x64-gnu": "1.31.1",
-				"lightningcss-linux-x64-musl": "1.31.1",
-				"lightningcss-win32-arm64-msvc": "1.31.1",
-				"lightningcss-win32-x64-msvc": "1.31.1"
+				"lightningcss-android-arm64": "1.32.0",
+				"lightningcss-darwin-arm64": "1.32.0",
+				"lightningcss-darwin-x64": "1.32.0",
+				"lightningcss-freebsd-x64": "1.32.0",
+				"lightningcss-linux-arm-gnueabihf": "1.32.0",
+				"lightningcss-linux-arm64-gnu": "1.32.0",
+				"lightningcss-linux-arm64-musl": "1.32.0",
+				"lightningcss-linux-x64-gnu": "1.32.0",
+				"lightningcss-linux-x64-musl": "1.32.0",
+				"lightningcss-win32-arm64-msvc": "1.32.0",
+				"lightningcss-win32-x64-msvc": "1.32.0"
 			}
 		},
 		"node_modules/lightningcss-android-arm64": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.31.1.tgz",
-			"integrity": "sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+			"integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
 			"cpu": [
 				"arm64"
 			],
@@ -100,9 +92,9 @@
 			}
 		},
 		"node_modules/lightningcss-darwin-arm64": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.31.1.tgz",
-			"integrity": "sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+			"integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
 			"cpu": [
 				"arm64"
 			],
@@ -121,9 +113,9 @@
 			}
 		},
 		"node_modules/lightningcss-darwin-x64": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.31.1.tgz",
-			"integrity": "sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+			"integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
 			"cpu": [
 				"x64"
 			],
@@ -142,9 +134,9 @@
 			}
 		},
 		"node_modules/lightningcss-freebsd-x64": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.31.1.tgz",
-			"integrity": "sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+			"integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
 			"cpu": [
 				"x64"
 			],
@@ -163,9 +155,9 @@
 			}
 		},
 		"node_modules/lightningcss-linux-arm-gnueabihf": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.31.1.tgz",
-			"integrity": "sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+			"integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
 			"cpu": [
 				"arm"
 			],
@@ -184,9 +176,9 @@
 			}
 		},
 		"node_modules/lightningcss-linux-arm64-gnu": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.31.1.tgz",
-			"integrity": "sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+			"integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
 			"cpu": [
 				"arm64"
 			],
@@ -205,9 +197,9 @@
 			}
 		},
 		"node_modules/lightningcss-linux-arm64-musl": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.31.1.tgz",
-			"integrity": "sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+			"integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
 			"cpu": [
 				"arm64"
 			],
@@ -226,9 +218,9 @@
 			}
 		},
 		"node_modules/lightningcss-linux-x64-gnu": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.1.tgz",
-			"integrity": "sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+			"integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
 			"cpu": [
 				"x64"
 			],
@@ -247,9 +239,9 @@
 			}
 		},
 		"node_modules/lightningcss-linux-x64-musl": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.31.1.tgz",
-			"integrity": "sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+			"integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
 			"cpu": [
 				"x64"
 			],
@@ -268,9 +260,9 @@
 			}
 		},
 		"node_modules/lightningcss-win32-arm64-msvc": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.31.1.tgz",
-			"integrity": "sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+			"integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
 			"cpu": [
 				"arm64"
 			],
@@ -289,9 +281,9 @@
 			}
 		},
 		"node_modules/lightningcss-win32-x64-msvc": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.31.1.tgz",
-			"integrity": "sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==",
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+			"integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
 			"cpu": [
 				"x64"
 			],
@@ -310,9 +302,9 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "3.8.1",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
-			"integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+			"version": "3.9.1",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.1.tgz",
+			"integrity": "sha512-ppiDo2CSwexck1eyZUwJHg/N3nf1+6IRCv7W/VJ5vaLnVCmB7+3CdRfMwoCHBBX6xTrREDTksZ4OZl5SSf4zXA==",
 			"dev": true,
 			"license": "MIT",
 			"bin": {
@@ -326,9 +318,9 @@
 			}
 		},
 		"node_modules/typescript": {
-			"version": "5.9.3",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
-			"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+			"integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
 			"dev": true,
 			"license": "Apache-2.0",
 			"bin": {
@@ -340,9 +332,9 @@
 			}
 		},
 		"node_modules/undici-types": {
-			"version": "7.18.2",
-			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
-			"integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
+			"integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
 			"dev": true,
 			"license": "MIT"
 		}
diff --git a/package.json b/package.json
index 0b3ccf6..d455aa5 100644
--- a/package.json
+++ b/package.json
@@ -7,14 +7,14 @@
 		"build:bundle": "npx tsc --project ./bundle/",
 		"build:components": "npx tsc --project ./components/",
 		"build:demo": "npx tsc --project ./demo/",
-		"css:bundle": "node bundle/dist/mod.js ./stylesheets/mod.css ./dist/wireframe.css"
+		"css:bundle": "node bundle/dist/mod.js ./stylesheets/mod.css ./dist/wireframe.css",
+		"format": "prettier --write ./"
 	},
 	"devDependencies": {
-		"@types/node": "^25.3.5",
-		"@w-lfpup/superaction": "^0.2.0",
-		"@w-lfpup/wctk": "^0.1.1",
-		"lightningcss": "^1.31.1",
-		"prettier": "^3.8.1",
-		"typescript": "^5.9.3"
+		"@types/node": "^26.0.1",
+		"@w-lfpup/hyperevents": "^0.2.3",
+		"lightningcss": "^1.32.0",
+		"prettier": "^3.9.1",
+		"typescript": "^6.0.3"
 	}
 }
diff --git a/stylesheets/components/button.css b/stylesheets/components/button.css
index 88c5d47..2ff18ec 100644
--- a/stylesheets/components/button.css
+++ b/stylesheets/components/button.css
@@ -1,78 +1,96 @@
 /* https://developer.apple.com/design/human-interface-guidelines/buttons */
 
-:is(button[data-wf], button[wf], input[type=button][data-wf], input[type=button][wf]) {
-	appearance: none;
+:is(button) {
 	cursor: pointer;
 	display: inline-flex;
-	position: relative;
 
 	background: var(--button_background);
 	border-radius: var(--button_border-radius);
-	border: var(--button_border);
+	border: var(--button_border-width) solid var(--button_border-color);
 	color: var(--button_color);
 	font: var(--button_font);
 	padding-block: var(--button_padding-block);
 	padding-inline: var(--button_padding-inline);
-	transition: var(--button_transition-time);
+	transition: var(--transition-time);
 
 	@media (hover: hover) {
 		&:hover {
-			background: var(--button_background_hover, var(--button_background));
-			border: var(--button_border_hover, var(--button_border));
-			color: var(--button_color_hover, var(--button_color));
+			background: var(--button_background_hover);
+			border: var(--button_border-width) solid
+				var(--button_border-color_hover);
+			color: var(--button_color_hover);
 		}
 	}
 
+	&:focus {
+		background: var(--button_background);
+		border-color: var(--button_border-color);
+		color: var(--button_color);
+	}
+
 	&:active {
-		background: var(--button_background_active, var(--button_background));
-		border: var(--button_border_active, var(--button_border));
-		color: var(--button_color_active, var(--button_color));
+		background: var(--button_background_active);
+		border: var(--button_border-width) solid
+			var(--button_border-color_active);
+		color: var(--button_color_active);
 	}
 
 	&:disabled {
 		cursor: not-allowed;
 
-		background: var(--button_background_disabled, var(--button_background));
-		border: var(--button_border_disabled, var(--button_border));
-		color: var(--button_color_disabled, var(--button_color));
-		opacity: var(--button_opacity_disabled);
+		opacity: var(--opacity_disabled);
 	}
-}
 
-/* all of these should fallback to button stuffs */
-button[data-wf=primary],
-input[type=button][data-wf=primary] {
-	background: var(--primary-button_background);
-	border: var(--primary-button_border);
-	color: var(--primary-button_color);
+	&:is(
+		[data-wf="icon-button"],
+		[data-wf="primary-icon-button"],
+		[data-wf="destructive-icon-button"]
+	) {
+		justify-content: center;
+		align-items: center;
+		border-radius: var(--icon-button_border-radius);
+		padding: var(--icon-button_padding-block);
+		min-block-size: var(--icon-button_block-size);
+		min-inline-size: var(--icon-button_block-size);
+	}
 
-	/* hover */
-	/* active */
-	/* disabled */
-}
+	&:is([data-wf="primary-button"], [data-wf="primary-icon-button"]) {
+		background: var(--primary-button_background);
+		border-color: var(--primary-button_border-color);
+		color: var(--primary-button_color);
 
-button[data-wf=destructive],
-input[type=button][data-wf=destructive] {
-	background: var(--desctructive-button_background);
-	border: var(--desctructive-button_border);
-	color: var(--desctructive-button_color);
+		@media (hover: hover) {
+			&:hover {
+				background: var(--primary-button_background_hover);
+				border-color: var(--primary-button_border-color_hover);
+				color: var(--primary-button_color_hover);
+			}
+		}
 
-	/* hover */
-	/* active */
-	/* disabled */
-}
+		&:active {
+			background: var(--primary-button_background_active);
+			border-color: var(--primary-button_border-color_active);
+			color: var(--primary-button_color_active);
+		}
+	}
 
-button[data-wf=cancel],
-input[type=button][data-wf=cancel] {
-	background: var(--cancel-button_background);
-	border: var(--cancel-button_border);
-	color: var(--cancel-button_color);
+	&:is([data-wf="destructive-button"], [data-wf="destructive-icon-button"]) {
+		background: var(--destructive-button_background);
+		border-color: var(--destructive-button_border-color);
+		color: var(--destructive-button_color);
 
-	/* hover */
-	/* active */
-	/* disabled */
-}
+		@media (hover: hover) {
+			&:hover {
+				background: var(--destructive-button_background_hover);
+				border-color: var(--destructive-button_border-color_hover);
+				color: var(--destructive-button_color_hover);
+			}
+		}
 
-/* system button primary */
-/* system button destructive */
-/* system button cancel */
\ No newline at end of file
+		&:active {
+			background: var(--destructive-button_background_active);
+			border-color: var(--destructive-button_border-color_active);
+			color: var(--destructive-button_color_active);
+		}
+	}
+}
diff --git a/stylesheets/components/checkbox.css b/stylesheets/components/checkbox.css
index 64ff26a..4865ae8 100644
--- a/stylesheets/components/checkbox.css
+++ b/stylesheets/components/checkbox.css
@@ -1,44 +1,43 @@
-:is(input[type=checkbox][data-wf], input[type=checkbox][wf]):not([role=switch]) {
+/* border width and border color is separate */
+
+:is(input[type="checkbox"]):not([role="switch"]) {
 	appearance: none;
-	position: relative;
-	display: inline-flex;
-	justify-content: center;
+
 	align-items: center;
 	color: transparent;
-	opacity: 1;
 	cursor: pointer;
+	display: inline-flex;
+	justify-content: center;
+	position: relative;
 
 	background: var(--checkbox_background);
 	block-size: var(--checkbox_block-size);
-	inline-size: var(--checkbox_block-size);
-	border: var(--checkbox_border);
 	border-radius: var(--checkbox_border-radius);
+	border: var(--checkbox_border-width) solid var(--checkbox_border-color);
 	font: var(--checkbox_font);
+	inline-size: var(--checkbox_block-size);
 	transition: all var(--transition-time);
 
 	&:before {
-		content: var(--checkbox_content_checked, '\2714');
+		content: var(--checkbox_content_checked, "\2714");
 	}
 
 	&:checked {
-		color: var(--checkbox_color);
-		border: var(--checkbox_border_checked, var(--checkbox_border));
-		background: var(--checkbox_background_checked, var(--checkbox_background));
+		background: var(
+			--checkbox_background_checked,
+			var(--checkbox_background)
+		);
+		border-color: var(--checkbox_border-color_checked);
+		color: var(--checkbox_color_checked);
 	}
 
 	&:indeterminate::before {
-		content: var(--checkbox_content_indeterminate, '\2014');
+		content: var(--checkbox_content_indeterminate, "\2014");
 	}
 
 	&:disabled {
 		cursor: not-allowed;
 
-		border: var(--checkbox_border_disabled, var(--checkbox_border));
-		background: var(--checkbox_background_disabled, var(--checkbox_background));
-		opacity: var(--checkbox_opacity_disabled, 1);
-
-		&:checked {
-			color: var(--checkbox_color_disabled, var(--checkbox_color));
-		}
+		opacity: var(--opacity_disabled, 1);
 	}
 }
diff --git a/stylesheets/components/color.css b/stylesheets/components/color.css
new file mode 100644
index 0000000..c07b87a
--- /dev/null
+++ b/stylesheets/components/color.css
@@ -0,0 +1,30 @@
+:is(input[type="color"]) {
+	cursor: pointer;
+	padding: 0;
+	box-sizing: border-box;
+	overflow: hidden;
+
+	border: var(--color_border-width) solid var(--color_border-color);
+	border-radius: var(--color_border-radius);
+	inline-size: var(--color_inline-size);
+	block-size: var(--color_block-size);
+
+	&::-moz-color-swatch {
+		border: none;
+	}
+
+	&::-webkit-color-swatch {
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	&::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+
+		opacity: var(--opacity_disabled, 1);
+	}
+}
diff --git a/stylesheets/components/number_input.css b/stylesheets/components/number_input.css
index 31a05f3..0d37960 100644
--- a/stylesheets/components/number_input.css
+++ b/stylesheets/components/number_input.css
@@ -1,7 +1,13 @@
-input[type=time], input[type=date], input[type=datetime-local], input[type=number], input[type=phone] {
+:is(
+	input[type="time"],
+	input[type="date"],
+	input[type="datetime-local"],
+	input[type="number"],
+	input[type="phone"]
+) {
 	appearance: none;
 	position: relative;
-	display:inline-flex;
+	display: inline-flex;
 	cursor: initial;
 
 	transition: all var(--transition-time);
@@ -13,9 +19,6 @@ input[type=time], input[type=date], input[type=datetime-local], input[type=numbe
 	border-radius: var(--text-input_border-radius);
 	/* line-height: var(--line-height); */
 
-	/* border-end-start-radius: var(--text-input_border-radius-bottom);
-	border-end-end-radius: var(--text-input_border-radius-bottom);
-	border-inline-start: var(--text-input_border); */
 	border-block-end: var(--text-input_border-block-end);
 	padding-inline: var(--text-input_padding-inline);
 	padding-block: var(--text-input_padding-block);
@@ -28,16 +31,16 @@ input[type=time], input[type=date], input[type=datetime-local], input[type=numbe
 		outline: none;
 		cursor: initial;
 	}
-	
+
 	&:disabled {
 		cursor: not-allowed;
 
 		background: var(--text-input_background_disabled);
 		border: var(--text-input_border_disabled);
-		opacity: var(--text-input_opacity_disabled);	
+		opacity: var(--text-input_opacity_disabled);
 	}
 
-		&::placeholder {
+	&::placeholder {
 		/* colors */
 	}
-}
\ No newline at end of file
+}
diff --git a/stylesheets/drafts/outline.css b/stylesheets/components/outline.css
similarity index 81%
rename from stylesheets/drafts/outline.css
rename to stylesheets/components/outline.css
index 835770b..cf33515 100644
--- a/stylesheets/drafts/outline.css
+++ b/stylesheets/components/outline.css
@@ -1,5 +1,7 @@
-.outline {
-    outline: var(--outline);
+/* MAYBE */
+
+:is([data-wf-outline], [tabindex], :not([tabindex="-1"])) {
+	outline: var(--outline);
 	outline-offset: var(--outline-offset);
 
 	@media (hover: hover) {
@@ -7,7 +9,7 @@
 			outline: var(--outline_hover);
 			outline-offset: var(--outline-offset_hover);
 		}
-		
+
 		&:active {
 			outline: var(--outline_active);
 			outline-offset: var(--outline-offset_active);
@@ -21,12 +23,12 @@
 
 	&:disabled {
 		outline: var(--outline);
-		outline-offset: var(--outline-offset);		
+		outline-offset: var(--outline-offset);
 	}
 }
 
 .text-outline {
-    outline: var(--outline);
+	outline: var(--outline);
 	outline-offset: var(--outline-offset);
 
 	@media (hover: hover) {
@@ -48,6 +50,6 @@
 
 	&:disabled {
 		outline: var(--outline);
-		outline-offset: var(--outline-offset);		
+		outline-offset: var(--outline-offset);
 	}
 }
diff --git a/stylesheets/components/progress.css b/stylesheets/components/progress.css
index 3d12ec3..fde1b44 100644
--- a/stylesheets/components/progress.css
+++ b/stylesheets/components/progress.css
@@ -1,25 +1,25 @@
 progress {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  color: none;
-  background: none;
-  border: 2px solid var(--color-wf);
-  height: var(--line-height);
-  margin: 0;
-  overflow: hidden;
-  border-radius: var(--progress_border-radius);
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+
+	border: var(--progress_border-width) solid var(--progress_border-color);
+	block-size: var(--progress_block-size);
+	margin: 0;
+	overflow: hidden;
+	background: var(--progress_background);
+	border-radius: var(--progress_border-radius);
 }
 
 progress::-moz-progress-bar {
-  background: #efefef;
+	background: var(--progress-bar_background);
 }
 
 progress::-webkit-progress-bar {
-  background: none;
-  overflow: hidden;
+	background: var(--progress_background);
+	overflow: hidden;
 }
 
 progress::-webkit-progress-value {
-  background: #efefef;
+	background: var(--progress-bar_background);
 }
diff --git a/stylesheets/components/radio.css b/stylesheets/components/radio.css
index 1fb88e2..867f566 100644
--- a/stylesheets/components/radio.css
+++ b/stylesheets/components/radio.css
@@ -1,24 +1,24 @@
-:is(input[type=radio][data-wf], input[type=radio][wf]) {
+:is(input[type="radio"]) {
 	appearance: none;
-	position: relative;
-	display: inline-flex;
-	justify-content: center;
 	align-items: center;
 	border-radius: 50%;
 	cursor: pointer;
+	display: inline-flex;
+	justify-content: center;
 	opacity: 1;
+	position: relative;
 
-	border: var(--radio_border);
-	background: var(--radio_background);
 	block-size: var(--radio_block-size);
 	inline-size: var(--radio_block-size);
+	background: var(--radio_background);
+	border: var(--radio_border-width) solid var(--radio_border-color);
 	transition: all var(--transition-time);
 
 	/* radio island */
 	&::before {
-		content: '';
+		content: "";
 		border-radius: 50%;
-		
+
 		background: var(--radio-island_background);
 		border: var(--radio-island_border);
 		inline-size: var(--radio-island_block-size);
@@ -28,21 +28,20 @@
 
 	&:checked {
 		&::before {
-			border: var(--radio-island_border_checked, var(--radio-island_border));
-			background: var(--radio-island_background_checked, var(--radio-island_background));
+			border: var(
+				--radio-island_border_checked,
+				var(--radio-island_border)
+			);
+			background: var(
+				--radio-island_background_checked,
+				var(--radio-island_background)
+			);
 		}
 	}
 
 	&:disabled {
 		cursor: not-allowed;
-		opacity: var(--radio_opacity_disabled, 1);
 
-		background: var(--radio_background_disabled, var(--radio_background));
-		border: var(--radio_border_disabled, var(--radio_border));
-		
-		&:checked {
-			background: var(--radio-island_background_disabled, var(--radio_background));
-			border: var(--radio-island_border_disabled, var(--radio_border));
-		}
+		opacity: var(--opacity_disabled, 1);
 	}
 }
diff --git a/stylesheets/components/range.css b/stylesheets/components/range.css
new file mode 100644
index 0000000..62b4b37
--- /dev/null
+++ b/stylesheets/components/range.css
@@ -0,0 +1,69 @@
+:is(input[type="range"]) {
+	-webkit-appearance: none;
+	appearance: none;
+	margin: 0;
+	padding: 0;
+	cursor: pointer;
+	block-size: var(--range_block-size);
+	inline-size: var(--range_inline-size);
+
+	&::-moz-range-track {
+		-webkit-appearance: none;
+		appearance: none;
+
+		background: var(--range_background);
+		background: lightblue;
+
+		block-size: var(--range_block-size);
+		inline-size: var(--range_inline-size);
+	}
+
+	&::-webkit-slider-runnable-track {
+		-webkit-appearance: none;
+		appearance: none;
+
+		background: var(--range_background);
+		background: lightblue;
+		block-size: var(--range_block-size);
+		inline-size: var(--range_inline-size);
+	}
+
+	&::-moz-range-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		display: inline-flex;
+
+		box-sizing: border-box;
+		background: darkgreen;
+		block-size: var(--range-island_block-size);
+		inline-size: var(--range-island_inline-size);
+		border: var(--range-island_border-width) solid
+			var(--range-island_border-color);
+	}
+
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+
+		/* is display block */
+		margin-block-start: calc(
+			(
+				-0.5 *
+					(
+						(
+							var(--range-island_block-size) -
+								var(--range_block-size)
+						)
+					) -
+					(var(--range-island_border-width))
+			)
+		);
+
+		box-sizing: content-box;
+		background: darkgreen;
+		block-size: var(--range-island_block-size);
+		inline-size: var(--range-island_inline-size);
+		border: var(--range-island_border-width) solid
+			var(--range-island_border-color);
+	}
+}
diff --git a/stylesheets/components/slider.css b/stylesheets/components/slider.css
deleted file mode 100644
index 7b92b01..0000000
--- a/stylesheets/components/slider.css
+++ /dev/null
@@ -1,37 +0,0 @@
-input[type=range] {
-	-webkit-appearance: none;
-	appearance: none;
-	background: var(--color-wf);
-	margin: 0;
-	block-size: 2px;
-	min-width: 200px;
-	cursor: pointer;
-}
-
-input[type=range]::-ms-track {
-	width: 100%;
-	margin: 0;
-	cursor: pointer;
-}
-
-input[type=range]::-webkit-slider-thumb {
-	-webkit-appearance: none;
-	border: 2px solid var(--color-wf);
-	position: relative;
-	border-radius: var(--range-thumb_border-radius, 1rem);
-	block-size: 2rem;
-	inline-size: 1rem;
-	background: var(--color-inverted-wf);
-}
-
-input[type=range]::-moz-range-thumb {
-	appearance: none;
-	-moz-appearance: none;
-	border: 2px solid var(--color-wf);
-	border-radius: var(--range-thumb_border-radius, 1rem);
-	position: relative;
-	block-size: 2rem;
-	inline-size: 1rem;
-	cursor: pointer;
-	background: var(--color-inverted-wf);
-}
diff --git a/stylesheets/components/switch.css b/stylesheets/components/switch.css
index be1fc93..5b0f948 100644
--- a/stylesheets/components/switch.css
+++ b/stylesheets/components/switch.css
@@ -1,4 +1,4 @@
-:is(input[type=checkbox][role=switch]) {
+:is(input[type="checkbox"][role="switch"]) {
 	appearance: none;
 	position: relative;
 	display: inline-flex;
@@ -11,32 +11,37 @@
 	inline-size: var(--switch_inline-size);
 	block-size: var(--switch_block-size);
 	border-radius: var(--switch_border-radius);
-	border: var(--switch_border);
+	border: var(--switch_border-width) solid var(--switch_border-color);
 	background: var(--switch_background);
 
 	transition: all var(--transition-time);
 
 	&::before {
 		position: relative;
-		content: '';
+		content: "";
 		transition: all var(--transition-time);
 	}
 
 	/* switch island */
 	&::after {
 		position: relative;
-		content: '';
+		content: "";
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		inline-size: 0.5rem;
-		block-size: 0.5rem;
-		border-radius: 0.5rem;
-		margin-inline: calc(((var(--switch_inline-size) * 0.5) - var(--switch-island_inline-size)) * 0.5 - 2px);
+
+		margin-inline: calc(
+			(
+					(var(--switch_inline-size) * 0.5) -
+						var(--switch-island_inline-size)
+				) *
+				0.5 - (var(--switch-island_border-width) * 2)
+		);
 
 		font: var(--switch-island_font);
 		border-radius: var(--switch-island_border-radius);
-		border: var(--switch-island_border);
+		border: var(--switch-island_border-width) solid
+			var(--switch-island_border-color);
 		background: var(--switch-island_background);
 		inline-size: var(--switch-island_inline-size);
 		block-size: var(--switch-island_block-size);
@@ -45,8 +50,9 @@
 	}
 
 	&:checked {
-		border: var(--switch_border_checked, var(--switch_border));
-		background: var(--switch_background_checked, var(--switch_background));
+		border: var(--switch_border-width) solid
+			var(--switch_border-color_checked);
+		background: var(--switch_background_checked);
 
 		&::before {
 			flex-grow: 1;
@@ -55,25 +61,26 @@
 		&::after {
 			content: var(--switch-island_content_checked);
 
-			margin-inline: calc(((var(--switch_inline-size) * 0.5) - var(--switch-island_inline-size_checked)) * 0.5 - 2px);
-			color: var(--switch-island_color_checked, var(--switch-island_color));
-			inline-size: var(--switch-island_inline-size_checked, var(--switch-island_inline-size));
-			block-size: var(--switch-island_block-size_checked, var(--switch-island_block-size));
-			border: var(--switch-island_border_checked, var(--switch-island_border));
-			background: var(--switch-island_background_checked, var(--switch-island_background));
+			color: var(--switch-island_color_checked);
+			inline-size: var(--switch-island_inline-size_checked);
+			block-size: var(--switch-island_block-size_checked);
+			border: var(--switch-island_border-width) solid
+				var(--switch-island_border-color_checked);
+			background: var(--switch-island_background_checked);
+
+			margin-inline: calc(
+				(
+						(var(--switch_inline-size) * 0.5) -
+							var(--switch-island_inline-size_checked)
+					) *
+					0.5 - (var(--switch-island_border-width) * 2)
+			);
 		}
 	}
 
 	&:disabled {
 		cursor: not-allowed;
 
-		background: var(--switch_background_disabled);
-		border: var(--switch_border_disabled);
-		opacity: var(--switch_opacity_disabled);
-
-		&::after {
-			border: var(--switch-island_border_disabled, var(--switch-island_border));
-			background: var(--switch-island_background_disabled, var(--switch-island_background));
-		}
+		opacity: var(--opacity_disabled);
 	}
 }
diff --git a/stylesheets/components/text_input.css b/stylesheets/components/text_input.css
index fc62f72..918d94b 100644
--- a/stylesheets/components/text_input.css
+++ b/stylesheets/components/text_input.css
@@ -1,25 +1,32 @@
 /* places for fonts and line heights */
-:is(input[type=text], input[type=password], input[type=email], input[type=url]) {
+:is(
+	input:not(
+		[type="checkbox"],
+		[type="radio"],
+		[type="range"],
+		[type="color"]
+	),
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	input[type="url"]
+) {
 	appearance: none;
 	position: relative;
-	display:inline-flex;
-	cursor: initial;
+	display: inline;
 
 	transition: all var(--transition-time);
 
+	border: var(--text-input_border-width) solid var(--text-input_border-color);
+	border-radius: var(--text-input_border-radius);
 	font: var(--text-input_font);
 	color: var(--text-input_color);
 	background: var(--text-input_background);
-	border: var(--text-input_border);
-	border-radius: var(--text-input_border-radius);
 	/* line-height: var(--line-height); */
 
 	cursor: pointer;
 
-	/* border-end-start-radius: var(--text-input_border-radius-bottom);
-	border-end-end-radius: var(--text-input_border-radius-bottom);
-	border-inline-start: var(--text-input_border); */
-	border-block-end: var(--text-input_border-block-end);
+	/* border-block-end: var(--text-input_border-block-end); */
 	padding-inline: var(--text-input_padding-inline);
 	padding-block: var(--text-input_padding-block);
 
@@ -28,18 +35,19 @@
 
 	&:focus {
 		outline: none;
+
+		border: var(--text-input_border-width) solid
+			var(--text-input_border-color);
 		cursor: initial;
 	}
-	
+
 	&:disabled {
 		cursor: not-allowed;
 
-		background: var(--text-input_background_disabled);
-		border: var(--text-input_border_disabled);
-		opacity: var(--text-input_opacity_disabled);	
+		opacity: var(--opacity_disabled);
 	}
 
 	&::placeholder {
 		/* colors */
 	}
-}
\ No newline at end of file
+}
diff --git a/stylesheets/components/textarea.css b/stylesheets/components/textarea.css
index 0c7e17a..ca0b92d 100644
--- a/stylesheets/components/textarea.css
+++ b/stylesheets/components/textarea.css
@@ -3,25 +3,22 @@ textarea {
 	appearance: none;
 	cursor: pointer;
 	min-inline-size: 225px;
-	
 	border-end-end-radius: 0;
 	resize: none;
+	outline: none;
 
 	font: var(--text-input_font);
 	min-block-size: calc(var(--line-height) * 2);
-	background: var(--text-input_background);
+	padding-block: var(--text-input_padding-block);
+	padding-inline: var(--text-input_padding-inline);
 	border: var(--text-input_border);
-	border-inline-start: var(--text-input_border-bottom, var(--text-input_border));
+	border-inline-start: var(
+		--text-input_border-bottom,
+		var(--text-input_border)
+	);
 	border-block-end: var(--text-input_border-bottom, var(--text-input_border));
 	border-radius: var(--text-input_border-radius);
-
-	/* needs to be a parameter */
-	padding-inline: var(--text-input_padding-inline);
-	padding-block: var(--text-input_padding-block);
-
-	outline: none;
-	/* opinionated */
-	field-sizing: content;
+	background: var(--text-input_background);
 
 	transition: all var(--transition-time);
 
@@ -29,17 +26,14 @@ textarea {
 		outline: none;
 		cursor: initial;
 	}
-	
+
 	&:disabled {
 		cursor: not-allowed;
 
-		background: var(--text-input_background_disabled, var(--text-input_background));
-		border: var(--text-input_border_disabled, var(--text-input_border));
-		box-shadow: var(--text-input_box-shadow_disabled, var(--text-input_box-shadow));
-		opacity: var(--text-input_opacity_disabled, var(--text-input_opacity));	
+		opacity: var(--opacity_disabled);
 	}
 
-		&::placeholder {
+	&::placeholder {
 		/* colors */
 	}
 }
diff --git a/stylesheets/drafts/debug.css b/stylesheets/drafts/debug.css
deleted file mode 100644
index 4d4205e..0000000
--- a/stylesheets/drafts/debug.css
+++ /dev/null
@@ -1,8 +0,0 @@
-body {
-	/* background: repeating-linear-gradient(
-		transparent,
-		transparent calc(var(--line-height) - 1px),
-		var(--baseline-grid-color) calc(var(--line-height) - 1px),
-		var(--baseline-grid-color) var(--line-height)
-	); */
-}
diff --git a/stylesheets/drafts/input_colors.css b/stylesheets/drafts/input_colors.css
deleted file mode 100644
index 8173178..0000000
--- a/stylesheets/drafts/input_colors.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/* places for fonts and line heights */
-input[type=color] {
-	appearance: none;
-	border: var(--press_border);
-	border-radius: var(--press_border-radius);
-	padding: none;
-
-	cursor: pointer;
-
-	&:hover {}
-	&:focus {}
-	&:active {}
-	&:disabled {
-		cursor: not-allowed;
-	}
-}
diff --git a/stylesheets/drafts/properties.drafts.css b/stylesheets/drafts/properties.drafts.css
deleted file mode 100644
index 1efc23e..0000000
--- a/stylesheets/drafts/properties.drafts.css
+++ /dev/null
@@ -1,133 +0,0 @@
-:root {
-	color-scheme: light dark;
-
-	/* debug */
-	--baseline-grid-color: light-dark(#cfcfcf, #787878);
-
-	/* Root */
-	--background: light-dark(#f9f9f9, #17181A);
-	--background_inverted: light-dark(#17181A, #efefef);
-
-	/* animation tempo */
-	--transition-time: 250ms;
-
-	/* Typography */
-	--line-height: 2rem;
-	--font-family: "SF Pro", "San Francisco", "Roboto Flex", "Segoe UI Variable", Helvetica, sans-serif;
-	--color: light-dark(#3e3e3e, #f9f9f9);
-	--color_inverted: light-dark(#f9f9f9, #3e3e3e);
-	--font: 400 1rem/var(--line-height) var(--font-family);
-	--h1_font: 700 8rem/8rem var(--font-family);
-	--h1_color: var(--color);
-	--h2_font: 700 6rem/6rem var(--font-family);
-	--h2_color: var(--color);
-	--h3_font: 700 4rem/4rem var(--font-family);
-	--h3_color: var(--color);
-	--h4_font: 700 3rem/3rem var(--font-family);
-	--h4_color: var(--color);
-	--h5_font: 700 2rem/2rem var(--font-family);
-	--h5_color: var(--color);
-	--h6_font: 700 1.5rem/2rem var(--font-family);
-	--h6_color: var(--color);
-	
-	/* Focus & Selection */
-	--selection_background-color: light-dark(cornflowerblue, cornflowerblue);
-	--selection_color: light-dark(white, black);
-
-	--outline: 4px solid transparent;
-	--outline-offset: 8px;
-	--outline_hover: 4px solid hsl(205, 79%, 66%);
-	--outline-offset_hover: 8px;
-	--outline_focus: 4px solid var(--selection_background-color);
-	--outline-offset_focus: 8px;
-	--outline_active: 4px solid var(--selection_background-color);
-	--outline-offset_active: 0px;
-
-	/* Press actions */
-	--press_background: var(--background);
-	--press_color: transparent;
-	--press_border-width: 2px;
-	--press_border: var(--press_border-width) solid light-dark(black, white);
-	--press_border-radius: 0.5lh;
-
-	--press_font: 400 0.9rem/1rem var(--font-family);
-	--press_box-shadow: none;
-
-	--press_content_checked: '\2714';
-	--press_content_indeterminate: '\2014';
-
-	--press_background_hover: var(--background);
-	--press_color_hover: var(--color);
-	--press_border_hover: var(--press_border);
-	--press_box-shadow_hover: none;
-
-	--press_background_active: var(--background);
-	--press_color_active: var(--color);
-	--press_border_active: var(--press_border-width) solid light-dark(black, white);
-	--press_box-shadow_active: none;
-
-	--press_background_checked: light-dark(black, white);
-	--press_color_checked: var(--color);
-	--press_border_checked: var(--press_border-width) solid light-dark(black, white);
-	--press_box-shadow_checked: none;
-
-	--press_background_diabled: light-dark(black, white);
-	--press_color_disabled: var(--color);
-	--press_border_disabled: var(--press_border-width) solid light-dark(black, white);
-	--press_box-shadow_disabled: none;
-
-	/* submit button */
-
-	/* Checkbox */
-	--checkbox_block-size: 1.25rem;
-	--checkbox_color: transparent;
-
-	/* Radio */
-	--radio-island_block-size: 1rem;
-	--radio-island_background: black;
-	--radio-island_color: white;
-	--radio-island_content: '';
-	--radio-island_border: var(--press_border);
-	--radio-island_box-shadow: var(var(--press_box-shadow));
-
-	/* -webkit-text-stroke */
-	/* text-shadow */
-
-
-	/* Buttons */
-	--button_font: 700 0.9rem/0.9rem var(--font-family);
-	--button_color: var(--color);
-	--button_background: transparent;
-	--button_padding-block: 0.75rem;
-
-	--button_bg_checked: light-dark(black, white);
-	--button_color_checked: light-dark(white, black);
-	/* --button_border-radius: calc(var(--button_padding-block) * 2 + var(--line-height)); */
-
-	--button_padding-inline: 1rem;
-
-	/* Text inputs */
-	--text-input_font: 400 1rem/var(--line-height) var(--font-family)
-	--text-input_background: light-dark(white, black);
-	--text-input_border: 2px solid light-dark(black, white);
-
-	--text-input_border-bottom: 2px solid light-dark(black, white);
-	--text-input_padding-inline: 0.5rem;
-	--text-input_padding-block: 0.25rem;
-	--text-input_border-radius: 1px;
-	--text-input_border-radius-bottom: 1px;
-
-
-	/* Number inputs */
-	--number-input_font: 400 1rem/var(--line-height) var(--font-family)
-	--number-input_background: light-dark(white, black);
-	--number-input_border: 2px solid light-dark(black, white);
-	--number-input_border-bottom: 2px solid light-dark(black, white);
-	--number-input_padding-inline: 0.5rem;
-	--number-input_padding-block: 0.25rem;
-	--number-input_border-radius: 1px;
-	--number-input_border-radius-bottom: 1px;
-
-	/* Select */
-
-}
\ No newline at end of file
diff --git a/stylesheets/drafts/tables.css b/stylesheets/drafts/tables.css
deleted file mode 100644
index 30a4673..0000000
--- a/stylesheets/drafts/tables.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* 
-	Table is a candidate for data-table attribute.
-
-	Tables can be used for lots of stuff other than data visualizations
-*/
\ No newline at end of file
diff --git a/stylesheets/mod.css b/stylesheets/mod.css
index 024ef5a..913a797 100644
--- a/stylesheets/mod.css
+++ b/stylesheets/mod.css
@@ -1,11 +1,11 @@
 @import "./components/button.css";
 @import "./components/checkbox.css";
+@import "./components/color.css";
+@import "./components/meter.css";
+@import "./components/number_input.css";
+@import "./components/progress.css";
 @import "./components/radio.css";
+@import "./components/range.css";
 @import "./components/switch.css";
 @import "./components/text_input.css";
 @import "./components/textarea.css";
-@import "./components/number_input.css";
-@import "./components/slider.css";
-@import "./components/progress.css";
-@import "./components/meter.css";
-@import "./components/textarea.css";
diff --git a/stylesheets/themes/95.css b/stylesheets/themes/95.css
deleted file mode 100644
index 3f76541..0000000
--- a/stylesheets/themes/95.css
+++ /dev/null
@@ -1,76 +0,0 @@
-:root {
-	color-scheme: light dark;
-
-	--background-color: light-dark(#f9f9f9, #17181A);
-	--background-color-inverted: light-dark(#545454, #878787);
-
-	--color-wf: light-dark(#3e3e3e, #f9f9f9);
-	--color-inverted-wf: light-dark(#f9f9f9, #3e3e3e);
-	--font-family-wf: "SF Mono", monospace;
-
-	/* general */
-	--transition-time: 150ms;
-	--color: var(--color-wf);
-	--line-height: 2rem;
-
-	/* press (general press-able items) */
-	--press_background: var(--background-color-inverted);
-	--press_border: 1px solid var(--color-wf);
-	--press_color: var(--color-wf);
-	--press_font: 100 0.75rem/1.2rem var(--font-family-wf);
-	--press_border-radius: 1rem;
-	--press_content_checked: '\2714';
-	--press_content_indeterminate: '\2014';
-
-	--press_background_hover: none;
-	--press_border_hover: 1px solid var(--color-wf);
-	--press_color_hover: var(--color-wf);
-
-	--press_background_active: ;
-	--press_border_active: ;
-	--press_color_active: ;
-
-	--press_background_disabled: ;
-	--press_border_disabled: ;
-	--press_color_disabled: ;
-	--press_opacity_disabled: ;
-	
-	/* button */
-	--button_padding-block: 0rem;
-	--button_padding-inline: 0.75rem;
-	--button_min_block-size: ;
-	--button_max_block-size: ;
-
-	/* checkbox */
-	--checkbox_block-size: 1.5rem;
-	--checkbox_check_color: var(--color-inverted-wf);
-	--checkbox_check_background: var(--color-wf);
-
-	/* switch / toggle */
-	--switch_inline-size: ;
-	--switch_island-size: ;
-
-	/* text (general keyboard input) */
-	--text-input_color: var(--color-wf);
-	--text-input_font: var(--font-family-wf);
-	--text-input_background: none;
-	--text-input_border: var(--color-wf);
-	--text-input_border-radius: 0;
-	--text-input_border: 1px solid var(--color-wf);
-	--text-input_border-block-start: ;
-	--text-input_border-block-end: ;
-	--text-input_border-inlne-start: ;
-	--text-input_border-inlne-end: ;
-	--text-input_border-start-start-radius: ;
-	--text-input_border-start-end-radius: ;
-	--text-input_border-end-start-radius: ;
-	--text-input_border-end-end-radius: ;
-
-	--text-input_padding-inline: ;
-	--text-input_padding-block: ;
-
-	/* text disabled */
-	--text-input_background_disabled: ;
-	--text-input_border_disabled: ;
-	--text-input_opacity_disabled: ;
-}
diff --git a/stylesheets/themes/cupertino.css b/stylesheets/themes/cupertino.css
new file mode 100644
index 0000000..e69de29
diff --git a/stylesheets/themes/material.css b/stylesheets/themes/material.css
new file mode 100644
index 0000000..e69de29
diff --git a/stylesheets/themes/spectrum.css b/stylesheets/themes/spectrum.css
new file mode 100644
index 0000000..e69de29
diff --git a/stylesheets/themes/wireframe.css b/stylesheets/themes/wireframe.css
index fb1bc13..b66efe8 100644
--- a/stylesheets/themes/wireframe.css
+++ b/stylesheets/themes/wireframe.css
@@ -1,70 +1,186 @@
+/* 
+
+	First be explicit about properties.
+
+	Then find groupings
+
+*/
+
 :root {
 	color-scheme: light dark;
 
 	--color-wf: light-dark(#3e3e3e, #f9f9f9);
 	--color-inverted-wf: light-dark(#f9f9f9, #3e3e3e);
-	--font-family-wf: "SF Pro", "San Francisco", "Roboto Flex", "Segoe UI Variable", Helvetica, sans-serif;
+	--font-family-wf:
+		"SF Pro", "San Francisco", "Roboto Flex", "Segoe UI Variable",
+		Helvetica, sans-serif;
+
+	--white: #f9f9f9;
+	--blue: light-dark(hsl(209deg, 87%, 62%), hsl(209deg, 83%, 60%));
+	--red: light-dark(hsl(11deg, 100%, 52%), hsl(11deg, 100%, 47%));
 
 	/* general */
 	--transition-time: 150ms;
-	--color: var(--color-wf);
 	--line-height: 2rem;
+	--opacity_disabled: 1;
 
-	/* press (general press-able items) */
-	--press_background: none;
-	--press_border: 4px solid var(--color-wf);
-	--press_color: var(--color-wf);
-	--press_font: var(--font-family-wf);
-	--press_border-radius: 4px;
-	--press_content_checked: '\2714';
-	--press_content_indeterminate: '\2014';
-
-	--press_background_hover: none;
-	--press_border_hover: 4px solid var(--color-wf);
-	--press_color_hover: var(--color-wf);
-
-	--press_background_active: ;
-	--press_border_active: ;
-	--press_color_active: ;
-
-	--press_background_disabled: ;
-	--press_border_disabled: ;
-	--press_color_disabled: ;
-	--press_opacity_disabled: ;
-	
 	/* button */
-	--button_padding-block: 0.5rem;
+	--button_padding-block: 0.25rem;
 	--button_padding-inline: 1rem;
+	--button_border-radius: 1.25rem;
+	--button_border-width: 1px;
+	--button_font: 100 0.9rem sans-serif;
+
+	--button_background: transparent;
+	--button_border-color: var(--color-wf);
+	--button_color: var(--color-wf);
+
+	--button_border-color_hover: var(--color-wf);
+	--button_background_hover: transparent;
+	--button_color_hover: var(--color-wf);
+
+	--button_border-color_active: var(--color-wf);
+	--button_background_active: transparent;
+	--button_color_active: var(--color-wf);
+
+	/* icon button */
+	--icon-button_block-size: 2rem;
+	--icon-button_border-radius: 4px;
+	--icon-button_padding-block: 0.25rem;
+
+	/* primary button */
+	--primary-button_border-color: var(--blue);
+	--primary-button_background: var(--blue);
+	--primary-button_color: var(--white);
+
+	--primary-button_border-color_hover: var(--blue);
+	--primary-button_background_hover: var(--blue);
+	--primary-button_color_hover: var(--white);
+
+	--primary-button_border-color_active: var(--blue);
+	--primary-button_background_active: var(--blue);
+	--primary-button_color_active: var(--white);
+
+	/* desctructive button */
+	--destructive-button_background: var(--red);
+	--destructive-button_border-color: var(--red);
+	--destructive-button_color: var(--white);
+
+	--destructive-button_background_hover: var(--red);
+	--destructive-button_border-color_hover: var(--red);
+	--destructive-button_color_hover: var(--white);
+
+	--destructive-button_background_active: var(--red);
+	--destructive-button_border-color_active: var(--red);
+	--destructive-button_color_active: var(--white);
 
 	/* checkbox */
-	--checkbox_block-size: 1.5rem;
-	--checkbox_check_color: var(--color-inverted-wf);
-	--checkbox_check_background: var(--color-wf);
+	/* structure */
+	--checkbox_block-size: 1.25rem;
+	--checkbox_border-width: 1px;
+	--checkbox_border-radius: 0px;
+	--checkbox_font: 100 var(--checkbox_block-size) sans-serif;
+	--checkbox_content_checked: "\2714";
+	--checkbox_content_indeterminate: "\2014";
+	/* colors */
+	--checkbox_background: transparent;
+	--checkbox_background_checked: transparent;
+	--checkbox_border-color: var(--color-wf);
+	--checkbox_border-color_checked: var(--color-wf);
+	--checkbox_color_checked: var(--color-wf);
+	--checkbox_content_checked: "\2715";
+
+	/* radio */
+	--radio_block-size: 1.25rem;
+	--radio_border-width: 1px;
+	--radio_background: transparent;
+	--radio_border-color: var(--color-wf);
+
+	/* radio island */
+	--radio-island_block-size: 0.5rem;
+	--radio-island_color: transparent;
+	--radio-island_border-color: transparent;
+	--radio-island_background: transparent;
+
+	--radio-island_color_checked: var(--color-inverted-wf);
+	--radio-island_border-color_checked: var(--color-wf);
+	--radio-island_background_checked: var(--color-wf);
 
 	/* switch / toggle */
-	--switch_inline-size: ;
-	--switch_island-size: ;
+	--switch_inline-size: 3rem;
+	--switch_block-size: 1.5rem;
+	--switch_border-raidus: 1.5rem;
+	--switch_border-color: var(--color-wf);
+	--switch_border-width: 1px;
+	--switch_background: transparent;
+	--switch_border-color_checked: var(--color-wf);
+	--switch_background_checked: transparent;
+
+	/* switch island */
+	--switch-island_inline-size: 0.5rem;
+	--switch-island_block-size: 0.5rem;
+	--switch-island_border-width: 1px;
+	--switch-island_border-color: var(--color-wf);
+	--switch-island_background: transparent;
+	--switch-island_color_checked: var(--color-wf);
+	--switch-island_content_checked: "";
+	--switch-island_border-color_checked: var(--color-wf);
+	--switch-island_background_checked: transparent;
+	--switch-island_inline-size_checked: 0.8rem;
+	--switch-island_block-size_checked: 0.8rem;
+
+	/* range */
+	--range_block-size: 0.5rem;
+	--range_inline-size: 128px;
+	--range_background: var(--color-inverted-wf);
+
+	/* range island */
+	--range-island_inline-size: 1rem;
+	--range-island_block-size: 1rem;
+	--range-island_background: var(--color-inverted-wf);
+	--range-island_border-width: 1px;
+	--range-island_border-color: var(--color-wf);
+
+	/* color element */
+	--color_border-radius: 4px;
+	--color_border-width: 1px;
+	--color_border-color: var(--color-inverted-wf);
+	--color_block-size: 36px;
+	--color_inline-size: 36px;
+
+	/* progress */
+	--progress_border-width: 1px;
+	--progress_border-color: var(--color-wf);
+	--progress_block-size: 1rem;
+	--progress_background: var(--color-inverted-wf);
+	--progress_border-radius: 1rem;
+
+	/* progress bar */
+	--progress-bar_background: var(--color-wf);
 
 	/* text (general keyboard input) */
 	--text-input_color: var(--color-wf);
 	--text-input_font: var(--font-family-wf);
 	--text-input_background: none;
-	--text-input_border: 1px solid var(--color-wf);
-	--text-input_border-radius: 0;
-	--text-input_border-block-start: ;
+	--text-input_border-width: 1px;
+	--text-input_border-color: var(--color-wf);
+
+	--text-input_border-radius: 4px;
+	/* --text-input_border-block-start: ;
 	--text-input_border-block-end: ;
 	--text-input_border-inlne-start: ;
 	--text-input_border-inlne-end: ;
 	--text-input_border-start-start-radius: ;
 	--text-input_border-start-end-radius: ;
 	--text-input_border-end-start-radius: ;
-	--text-input_border-end-end-radius: ;
+	--text-input_border-end-end-radius: ; */
 
-	--text-input_padding-inline: ;
-	--text-input_padding-block: ;
+	--text-input_padding-inline: 1rem;
+	--text-input_padding-block: 0.5rem;
 
 	/* text disabled */
-	--text-input_background_disabled: ;
+	/* --text-input_background_disabled: ;
 	--text-input_border_disabled: ;
 	--text-input_opacity_disabled: ;
+	*/
 }
diff --git a/stylesheets/typography/baseline_grid_typography.css b/stylesheets/typography/baseline_grid_typography.css
index 832066d..5a29e83 100644
--- a/stylesheets/typography/baseline_grid_typography.css
+++ b/stylesheets/typography/baseline_grid_typography.css
@@ -3,44 +3,49 @@
 	--baseline_line-height-4x: calc(var(--line-height) * 4);
 }
 
-[data-wf-h1] {
+[data-wf="h1"] {
 	line-height: var(--baseline_line-height-4x);
 	padding-block-start: calc((1lh - 1cap) * 0.5);
 	margin-block-end: calc((1lh - 1cap) * -0.5);
 }
 
-[data-wf-h2] {
+[data-wf="h2"] {
 	line-height: var(--baseline_line-height-4x);
 	padding-block-start: calc((1lh - 1cap) * 0.5);
 	margin-block-end: calc((1lh - 1cap) * -0.5);
 }
 
-[data-wf-h3] {
+[data-wf="h3"] {
 	line-height: var(--baseline_line-height-2x);
 	padding-block-start: calc((1lh - 1cap) * 0.5);
 	margin-block-end: calc((1lh - 1cap) * -0.5);
 }
 
-[data-wf-h4] {
+[data-wf="h4"] {
 	line-height: var(--baseline_line-height-2x);
 	padding-block-start: calc((1lh - 1cap) * 0.5);
 	margin-block-end: calc((1lh - 1cap) * -0.5);
 }
 
-[data-wf-h5] {
+[data-wf="h5"] {
 	line-height: var(--line-height);
 	padding-block-start: calc((1lh - 1cap) * 0.5);
 	margin-block-end: calc((1lh - 1cap) * -0.5);
 }
 
-[data-wf-h6] {
+[data-wf="h6"] {
 	line-height: var(--line-height);
 	padding-block-start: calc((1lh - 1cap) * 0.5);
 	margin-block-end: calc((1lh - 1cap) * -0.5);
 }
 
-[data-wf-p] {
+[data-wf="p"] {
 	line-height: var(--line-height);
 	padding-block-start: calc((1lh - 1cap) * 0.5);
 	margin-block-end: calc((1lh - 1cap) * -0.5);
 }
+
+[data-wf-variant="baseline"] {
+	padding-block-start: calc((1lh - 1cap) * 0.5);
+	margin-block-end: calc((1lh - 1cap) * -0.5);
+}
diff --git a/stylesheets/typography/typography.css b/stylesheets/typography/typography.css
index a651611..5cb7fdf 100644
--- a/stylesheets/typography/typography.css
+++ b/stylesheets/typography/typography.css
@@ -3,32 +3,32 @@
 	color: var(--color);
 }
 
-h1 {
+[data-wf="h1"] {
 	font: var(--h1_font);
 	color: var(--h1_color);
 }
 
-h2 {
+[data-wf="h2"] {
 	font: var(--h2_font);
 	color: var(--h2_color);
 }
 
-h3 {
+[data-wf="h3"] {
 	font: var(--h3_font);
 	color: var(--h3_color);
 }
 
-h4 {
+[data-wf="h4"] {
 	font: var(--h4_font);
 	color: var(--h4_color);
 }
 
-h5 {
+[data-wf="h5"] {
 	font: var(--h5_font);
 	color: var(--h5_color);
 }
 
-h6 {
+[data-wf="h6"] {
 	font: var(--h6_font);
 	color: var(--h6_color);
 }
diff --git a/todo.md b/todo.md
deleted file mode 100644
index e52b588..0000000
--- a/todo.md
+++ /dev/null
@@ -1,75 +0,0 @@
-## CSS Components
-
-TODO:
-- alert
-- dialog
-- disclosure
-- link
-- table
-
-## Typography
-
-Typography is a delicate and varies from product to product.
-
-I do not think any kind of full featured take would meet production expectations.
-
-Worth mulling over. 
-
-Baseline grids are tough and it'd be nice to just know they work.
-
-But visuals are not "semantically" tied to elements. As in `<h1>` works differently
-in main than in does in section and article. They meaning is slightly different.
-
-So a visual correlation does not make sense here.
-
-## Web components
-
-Components that require some extra help.
-
-TODO:
-- block movement
-- inline movement
-- tabs
-
-- password (with visible / stars)
-- tabs
-- nested checkboxes
-- tree / grid navigation
-- 2range 2d axis select, variant circle
-- knobs
-- gamepad? but like why?
-- press indicators (circle -> big circle)
-
-# WARIA
-
-- Accordian
-- Alert (vanilla CSS)
-- Alert and Message Dialogs
-- Breadcrumb
-- ~~Button~~ (vanilla CSS)
-- Carousel
-- ~~Checkbox~~ (vanilla CSS)
-- Combobox
-- Dialog (modal) (vanilla CSS)
-- Disclosure (vanilla CSS)
-- Feed
-- Grid (empty web component)
-- Landmarks
-- Link (vanilla CSS)
-- Listbox
-- Menu and Menubar
-- Menu Button
-- Meter (vanilla CSS)
-- ~~Radio Group~~ (vanilla CSS)
-- Slider (vanilla CSS)
-- Slider (multi-thumb)
-- Spinbutton
-- ~~Switch~~ (vanilla CSS)
-- Table (vanilla CSS)
-- Tabs  (empty web component)
-- Toolbar (empty web component)
-- Tooltip
-- Tree View
-- Treegrid
-- Window Splitter
-
diff --git a/tsconfig.json b/tsconfig.json
index b5d7c6b..d6fed5c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,4 +7,4 @@
 		"declaration": true,
 		"removeComments": true
 	}
-}
\ No newline at end of file
+}