@vanilla-bean/components 1.0.2 → 1.1.0

package/components/Menu/Menu.js

@@ -18,12 +18,12 @@ const StyledList = styled(
 			}
 
 			&:hover, &:focus, &:focus-visible, & a:hover, & a:focus, & a:focus-visible  {
-				color: ${colors.light(colors.blue)} !important;
-				border-color: ${colors.light(colors.blue)};
+				color: ${colors.light(colors.selected)} !important;
+				border-color: ${colors.light(colors.selected)};
 			}
 
 			&:focus-visible, & a:focus-visible {
-				outline: 2px solid ${colors.light(colors.blue)};
+				outline: 2px solid ${colors.light(colors.selected)};
 				outline-offset: -2px;
 			}
 		}

package/index.d.ts

@@ -25,6 +25,7 @@ export interface ThemeColors {
 	teal: ThemeColor;
 	white: ThemeColor;
 	black: ThemeColor;
+	selected: ThemeColor;
 	transparent: ThemeColor;
 	superWhite: ThemeColor;
 	vantablack: ThemeColor;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vanilla-bean/components",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"type": "module",
 	"module": "./index.js",
 	"types": "./index.d.ts",

package/theme/.test.js

@@ -2,11 +2,14 @@ import { TinyColor } from '@ctrl/tinycolor';
 import theme from '.';
 
 const ORIGINAL_BLUE = 'hsl(209, 55%, 45%)';
+const ORIGINAL_YELLOW = 'hsl(44, 55%, 45%)';
 const ORIGINAL_GRAY = 'hsl(0, 0%, 45%)';
 
 afterEach(() => {
 	theme.colors.blue = new TinyColor(ORIGINAL_BLUE);
+	theme.colors.yellow = new TinyColor(ORIGINAL_YELLOW);
 	theme.colors.gray = new TinyColor(ORIGINAL_GRAY);
+	theme.colors.selected = undefined;
 });
 
 describe('theme colors', () => {
@@ -21,6 +24,19 @@ describe('theme colors', () => {
 		theme.colors.gray = new TinyColor('hsl(200, 30%, 45%)');
 		expect(theme.colors.white.toString()).not.toBe(before);
 	});
+
+	test('selected follows yellow — updates when yellow is reassigned', () => {
+		const custom = new TinyColor('hsl(120, 55%, 45%)');
+		theme.colors.yellow = custom;
+		expect(theme.colors.selected.toString()).toBe(custom.toString());
+	});
+
+	test('selected can be assigned independently of yellow', () => {
+		const custom = new TinyColor('hsl(280, 55%, 45%)');
+		theme.colors.selected = custom;
+		expect(theme.colors.selected.toString()).toBe(custom.toString());
+		expect(theme.colors.yellow.toString()).toBe(new TinyColor(ORIGINAL_YELLOW).toString());
+	});
 });
 
 describe('theme lazy strings', () => {
@@ -32,19 +48,19 @@ describe('theme lazy strings', () => {
 
 	test('theme.table reflects a color mutation', () => {
 		const before = theme.table;
-		theme.colors.blue = new TinyColor('hsl(120, 55%, 45%)');
+		theme.colors.yellow = new TinyColor('hsl(120, 55%, 45%)');
 		expect(theme.table).not.toBe(before);
 	});
 
 	test('theme.scrollbar reflects a color mutation', () => {
 		const custom = new TinyColor('hsl(120, 55%, 45%)');
-		theme.colors.blue = custom;
+		theme.colors.yellow = custom;
 		expect(theme.scrollbar).toContain(custom.toString());
 	});
 
 	test('theme.input reflects a color mutation', () => {
 		const custom = new TinyColor('hsl(120, 55%, 45%)');
-		theme.colors.blue = custom;
+		theme.colors.yellow = custom;
 		expect(theme.input).toContain(custom.toString());
 	});
 

package/theme/README.md

@@ -284,6 +284,12 @@ colors.black; // Pure black - text on light backgrounds
 colors.superWhite; // #fefefe - slightly warmer white
 colors.vantablack; // #0a0a0a - rich black alternative
 
+// Semantic accent - the "focused/selected/active" color (focus outlines,
+// ::selection, hover highlights, checked controls, scrollbar thumbs).
+// Follows colors.yellow unless assigned its own color:
+colors.selected;
+theme.colors.selected = new TinyColor('#3d7aed'); // decouple from yellow
+
 // Accessibility functions
 colors.mostReadable(baseColor, [colors.white, colors.black]);
 // Returns the highest contrast color for optimal readability
@@ -566,6 +572,7 @@ interface ColorSystem {
 	transparent: TinyColor;
 	white: TinyColor;
 	black: TinyColor;
+	selected: TinyColor;
 	superWhite: TinyColor;
 	vantablack: TinyColor;
 

package/theme/button.js

@@ -6,7 +6,7 @@ export default ({ colors, fonts }) => `
 	text-decoration: none;
 	color: ${colors.white};
 	background-color: ${colors.blue};
-	outline-color: ${colors.lighter(colors.orange)};
+	outline-color: ${colors.lighter(colors.selected)};
 	text-align: center;
 	position: relative;
 	white-space: nowrap;

package/theme/colors.js

@@ -1,12 +1,13 @@
 import { TinyColor, random, readability, isReadable, mostReadable } from '@ctrl/tinycolor';
 
+let selectedOverride;
+
 const colors = {
 	random,
 	readability,
 	isReadable,
 	mostReadable,
 
-	// Base colors — plain writable properties so theme.colors.X = new TinyColor(...) works
 	orange: new TinyColor('hsl(29, 55%, 45%)'),
 	gray: new TinyColor('hsl(0, 0%, 45%)'),
 	yellow: new TinyColor('hsl(44, 55%, 45%)'),
@@ -20,12 +21,18 @@ const colors = {
 	superWhite: new TinyColor('hsl(0, 100%, 100%)'),
 	vantablack: new TinyColor('hsl(0, 0%, 0%)'),
 
-	// Derived — getters so they recompute when gray is reassigned
 	get white() {
 		return colors.whiteish();
 	},
 	get black() {
-		return colors.blackish();
+		return colors.gray.darken(45);
+	},
+
+	get selected() {
+		return selectedOverride ?? colors.yellow;
+	},
+	set selected(color) {
+		selectedOverride = color;
 	},
 
 	whiteish: (color = colors.gray) => color.lighten(45),

package/theme/input.js

@@ -31,7 +31,7 @@ export const checkbox = ({ colors }) => `
 		}
 
 		&:checked:before {
-			box-shadow: inset 1em 1em ${colors.blue};
+			box-shadow: inset 1em 1em ${colors.selected};
 		}
 
 		&:focus {
@@ -47,9 +47,9 @@ export default ({ colors }) => `
 	box-sizing: border-box;
 	width: 100%;
 	color: ${colors.light(colors.red)};
-	accent-color: ${colors.blue};
+	accent-color: ${colors.selected};
 	background-color: ${colors.black};
-	outline-color: ${colors.lighter(colors.orange)};
+	outline-color: ${colors.lighter(colors.selected)};
 	padding: 2px 4px;
 
 	&:disabled {

package/theme/page.js

@@ -9,6 +9,7 @@ import _table from './table';
 export default theme => `
 	html {
 		height: 100%;
+		color-scheme: ${colors.black.isDark() ? 'dark' : 'light'};
 	}
 
 	body {
@@ -25,6 +26,11 @@ export default theme => `
 		margin: 0;
 	}
 
+	::selection {
+		background: ${colors.lighter(colors.selected)};
+		color: ${colors.black};
+	}
+
 	* {
 		touch-action: manipulation;
 		-webkit-text-size-adjust: none;

package/theme/scrollbar.js

@@ -1,4 +1,8 @@
 export default ({ colors }) => `
+	html {
+		scrollbar-color: ${colors.alpha(colors.selected, 0.6)} ${colors.white.setAlpha(0.06)};
+	}
+
 	::-webkit-scrollbar {
 		width: 24px;
 		height: 24px;
@@ -10,15 +14,15 @@ export default ({ colors }) => `
 	}
 	::-webkit-scrollbar-thumb {
 		background: ${colors.white.setAlpha(0.06)};
-		-webkit-box-shadow: inset 0 0 2px 1px ${colors.blue};
+		-webkit-box-shadow: inset 0 0 2px 1px ${colors.selected};
 		border-radius: 12px;
 	}
 	::-webkit-scrollbar-thumb:hover {
 		background: ${colors.white.setAlpha(0.09)};
-		-webkit-box-shadow: inset 0 0 3px 1px ${colors.blue};
+		-webkit-box-shadow: inset 0 0 3px 1px ${colors.selected};
 	}
 	::-webkit-scrollbar-thumb:active {
 		background: ${colors.white.setAlpha(0.12)};
-		-webkit-box-shadow: inset 0 0 4px 2px ${colors.blue};
+		-webkit-box-shadow: inset 0 0 4px 2px ${colors.selected};
 	}
 `;

package/theme/table.js

@@ -42,12 +42,12 @@ export default ({ colors }) => `
 	}
 
 	tr:hover {
-		background-color: ${colors.blackish(colors.blue)};
+		background-color: ${colors.blackish(colors.selected)};
 		color: ${colors.lighter(colors.gray)};
 	}
 
 	td:hover, th:hover {
-		background-color: ${colors.blue.darken(32)};
+		background-color: ${colors.selected.darken(32)};
 		color: ${colors.white};
 	}
 `;

package/Component/README.md

@@ -1,455 +0,0 @@
-# Component
-
-Reactive component class extending Elem with Oxject-backed reactive options, lifecycle management, and automatic cleanup.
-
-## Key Features
-
-- **Reactive options system** - Property changes backed by Oxject emit events and update DOM automatically
-- **Automatic memory management** - Element-level listeners persist through DOM moves, cleaned up on destroy. External resources (timers, subscriptions) cleaned up on disconnect
-- **Flexible render timing** - Immediate, onload, or animationFrame rendering modes
-- **Enhanced event handling** - Input events include `.value` property, DOM connection detection
-- **Integrated styling** - Inline objects or scoped CSS with theme system integration
-- **Lifecycle hooks** - Built-in hover and press handlers with automatic cleanup
-
-```js
-import { Component } from '@vanilla-bean/components';
-```
-
-## Basic Usage
-
-### Simple Components
-
-Every Component extends EventTarget and wraps an HTMLElement with reactive options:
-
-```js
-import { Component } from '@vanilla-bean/components';
-
-const button = new Component({
-	tag: 'button',
-	textContent: 'Click me',
-	className: 'primary-btn',
-	onPointerPress: () => alert('Hello!'),
-	appendTo: document.body,
-});
-```
-
-### Reactive Property Updates
-
-Options are backed by Oxject. Property changes trigger DOM updates automatically:
-
-```js
-const input = new Component({
-	tag: 'input',
-	value: 'Initial text',
-	onChange: ({ value }) => {
-		input.options.value = value; // Updates DOM reactively
-	},
-	appendTo: document.body,
-});
-
-// Display that updates automatically
-new Component({
-	tag: 'p',
-	textContent: input.options.subscriber('value', value => `Current: ${value}`),
-	appendTo: document.body,
-});
-```
-
-### Extended Component Classes
-
-Create reusable component classes with custom behavior:
-
-```js
-class Button extends Component {
-	constructor(options = {}, ...children) {
-		super(
-			{
-				tag: 'button',
-				...options,
-				styles: ({ button }) => `
-				${button}
-				${options.styles?.({ button }) || ''}
-			`,
-			},
-			...children,
-		);
-	}
-
-	_setOption(key, value) {
-		if (key === 'mode') {
-			this.removeClass(/\bmode-\S+/g).addClass(`mode-${value}`);
-		} else {
-			super._setOption(key, value);
-		}
-	}
-}
-```
-
-### With Styled Components
-
-Components integrate seamlessly with the styled system:
-
-```js
-import { styled } from '@vanilla-bean/components';
-
-const StyledComponent = styled(
-	Component,
-	({ colors }) => `
-	background: ${colors.blue};
-	color: ${colors.white};
-	padding: 16px;
-	border-radius: 8px;
-`,
-);
-```
-
-## Reactive Options System
-
-Component options are stored in an Oxject instance (not a plain object like Elem), enabling automatic reactivity:
-
-```js
-const button = new Component({ textContent: 'Click me' });
-
-// Property changes trigger DOM updates
-button.options.textContent = 'Updated'; // Updates DOM reactively
-button.options.addClass = 'active'; // Adds CSS class reactively
-
-// Full Oxject features available
-const subscription = button.options.subscribe({
-	key: 'textContent',
-	callback: value => console.log('Text changed:', value),
-});
-```
-
-### Option Processing Pipeline
-
-Options are routed through `_setOption` based on key and value type:
-
-| Condition                | Routing                    | Example                   |
-| ------------------------ | -------------------------- | ------------------------- |
-| Key starts with 'on'     | Event handler registration | `onPointerPress: handler` |
-| Key in `knownAttributes` | `elem.setAttribute()`      | `id: 'my-id'`             |
-| Component has method     | Method call with value     | `addClass: 'active'`      |
-| HTMLElement has property | Direct elem property       | `textContent: 'hello'`    |
-| Value is function        | Component property         | `customMethod: fn`        |
-| Default                  | Elem property assignment   | `customProp: value`       |
-
-## Event Handling
-
-### Automatic Event Registration
-
-Event handlers are registered automatically when option keys start with 'on':
-
-```js
-new Component({
-	onPointerPress: event => console.log('pressed'),
-	onChange: ({ value }) => console.log('value:', value), // Input events include .value
-	onConnected: () => console.log('added to DOM'),
-	onDisconnected: () => console.log('removed from DOM'),
-});
-```
-
-> **Note:** `click` is not in the supported event set. Use `onPointerPress` for press interactions.
-
-### Enhanced Input Events
-
-Input-related events (`keydown`, `keyup`, `change`, `blur`, `input`, `search`) receive enhanced event objects:
-
-```js
-new Component({
-	tag: 'input',
-	type: 'text',
-	onChange: ({ value, event }) => {
-		console.log('New value:', value); // Extracted from input
-		console.log('Original event:', event);
-	},
-});
-```
-
-### Connection Events
-
-DOM connection/disconnection detected via MutationObserver:
-
-```js
-new Component({
-	onConnected: () => console.log('Component added to DOM'),
-	onDisconnected: () => {
-		console.log('Component removed - cleanup triggered');
-	},
-});
-```
-
-### Specialized Event Handlers
-
-#### Hover with Movement Tracking
-
-```js
-component.onHover(event => {
-	console.log('Mouse position:', event.clientX, event.clientY);
-});
-```
-
-#### Press Detection
-
-Fires on `pointerdown` for immediate, reliable response in all contexts including scroll containers and modal dialogs:
-
-```js
-component.onPointerPress(event => {
-	console.log('Pressed');
-});
-```
-
-## Styling
-
-### Inline Style Objects
-
-Apply styles as JavaScript objects:
-
-```js
-component.styles({
-	color: 'red',
-	padding: '10px',
-	backgroundColor: '#f0f0f0',
-});
-
-// Or as option
-new Component({
-	styles: { color: 'red', padding: '10px' },
-});
-```
-
-### Scoped CSS with Theme Integration
-
-Use theme functions for scoped, processed CSS:
-
-```js
-// Theme function with automatic scoping
-component.styles(
-	({ colors, fonts }) => `
-	background: ${colors.blue};
-	${fonts.kodeMono}
-	padding: 16px;
-	border-radius: 8px;
-
-	&:hover {
-		background: ${colors.darker(colors.blue)};
-	}
-
-	@media (max-width: 768px) {
-		padding: 8px;
-	}
-`,
-);
-```
-
-CSS is scope-wrapped and injected as a scoped <style> tag. No preprocessing.
-
-## Lifecycle Management
-
-### Render Lifecycle
-
-`render()` orchestrates a fixed sequence every time it is called:
-
-```
-render()
-  ├─ if (this.rendered)   ← re-render only: clears children, runs descendant cleanup
-  │     empty()
-  │     this.rendered = false
-  ├─ build()              ← subclass structural hook, runs before options are applied
-  ├─ _processOptions()    ← routes every option through _setOption()
-  │     priority keys first (onConnected, textContent, content, appendTo, prependTo, value)
-  │     then all remaining keys
-  └─ this.rendered = true
-```
-
-**`build()` is the subclass structural hook.** Override `build()`, never `render()`, to create child elements and internal structure. Because `build()` runs before `_processOptions()`, all structure exists by the time `_setOption` receives values.
-
-The preferred way to handle specific options is `static handlers` — a per-class dispatch map that composes across the constructor chain without requiring `super._setOption`:
-
-```js
-class Card extends Component {
-	build() {
-		this.header = new Component({ tag: 'header', appendTo: this });
-		this.body = new Component({ tag: 'section', appendTo: this });
-	}
-
-	static handlers = {
-		title(value) {
-			this.header.options.textContent = value;
-		},
-		variant(value) {
-			this.removeClass(/variant-\S+/).addClass(`variant-${value}`);
-		},
-	};
-}
-```
-
-Handlers that don't call `next(value)` fully own their key. Unhandled keys fall through to standard routing automatically — no `super._setOption` required. Use `_setOption` override only for enum validation or cases that need to intercept before the routing chain.
-
-**`empty()` only runs on re-render.** On the initial render it is skipped. On subsequent `render()` calls it removes all child elements and runs cleanup on all descendant components before the DOM is cleared.
-
-**`async build()` is not supported.** `render()` does not await `build()`'s return value. Asynchronous initialization belongs in `onConnected`.
-
-**Deep hierarchies must chain `super.build()` manually.** If both a parent class and its subclass define `build()`, the subclass must call `super.build()` explicitly. It is not called automatically.
-
-### Rendering Process (summary)
-
-```js
-component.render(); // Re-render: empty → build → _processOptions → rendered = true
-```
-
-Rendering behavior:
-
-1. **Content clearing** - `empty()` removes existing children on re-render only (skipped on first render)
-2. **Structure creation** - `build()` creates sub-elements before options are applied
-3. **Priority processing** - `_processOptions()` applies `priorityOptions` keys first
-4. **Option routing** - Each option processed via `_setOption`
-5. **Completion flag** - Sets `rendered = true`
-
-### Automatic Cleanup System
-
-Components automatically clean up resources when removed from DOM:
-
-```js
-// Manual cleanup registration
-component.addCleanup('unique-id', () => {
-	console.log('Custom cleanup executed');
-});
-
-// Manual cleanup execution (automatic on disconnect)
-component.processCleanup();
-```
-
-**Automatic cleanup includes:**
-
-- Event listener removal
-- Oxject subscription cleanup
-- Style element removal from DOM
-- Recursive child component cleanup
-
-### Render Timing Control
-
-Control when components render with `autoRender` option:
-
-```js
-// Immediate rendering (default)
-new Component({ autoRender: true });
-
-// Render on window load event
-new Component({ autoRender: 'onload' });
-
-// Render on next animation frame
-new Component({ autoRender: 'animationFrame' });
-
-// Manual rendering only
-new Component({ autoRender: false });
-```
-
-## API Reference
-
-### Constructor
-
-```js
-new Component(options?, ...children)
-```
-
-**Parameters:**
-
-- `options` (Object) - Configuration options
-- `children` (...Component|Elem) - Child elements appended to `append` option
-
-### Configuration Options
-
-#### Component-Specific Options
-
-| Option             | Type                                  | Description                                 |
-| ------------------ | ------------------------------------- | ------------------------------------------- |
-| `tag`              | `string`                              | HTML tag name (default: 'div')              |
-| `autoRender`       | `boolean\|'onload'\|'animationFrame'` | Render timing control                       |
-| `registeredEvents` | `Set<string>`                         | Custom event types for on() method          |
-| `knownAttributes`  | `Set<string>`                         | Attribute names for elem.setAttribute()     |
-| `priorityOptions`  | `Set<string>`                         | Option keys processed first during render   |
-| `styles`           | `string\|object\|Function`            | CSS string, style object, or theme function |
-| `uniqueId`         | `string`                              | Override auto-generated unique ID           |
-
-#### Event Handler Options
-
-| Option           | Type       | Description                                  |
-| ---------------- | ---------- | -------------------------------------------- |
-| `onHover`        | `Function` | Hover handler with move tracking             |
-| `onPointerPress` | `Function` | Fires on `pointerdown`                       |
-| ~~`onClick`~~    | —          | Not supported. Use `onPointerPress` instead. |
-| `onChange`       | `Function` | Change event handler (input .value included) |
-| `onConnected`    | `Function` | DOM connection detection                     |
-| `onDisconnected` | `Function` | DOM disconnection detection                  |
-
-All standard Elem options work as reactive Component options.
-
-### Methods
-
-#### Options-Compatible Methods
-
-Can be called directly or used as reactive options:
-
-```js
-component.styles(styleFunction); // Direct call
-component.onHover(callback); // Direct call
-component.addClass('active'); // Direct call
-component.append(child); // Direct call
-
-// Or as reactive options:
-new Component({
-	styles: styleFunction,
-	onHover: callback,
-	addClass: 'active',
-	append: [child],
-});
-```
-
-#### Lifecycle Methods
-
-```js
-component.build(); // Subclass structural hook — override to create child elements
-component.render(); // Re-render: empty → build → _processOptions → rendered = true
-component.addCleanup(id, fn); // Register cleanup function (chains with existing for same id)
-component.replaceCleanup(id, fn); // Replace cleanup, running the previous one immediately
-component.replaceDestroyCleanup(id, fn); // Destroy-only cleanup: survives disconnect, runs on destroy()
-component.processCleanup(); // Execute all cleanup functions
-component.destroy(); // Disconnect observer, run all cleanup, remove from DOM
-```
-
-#### Event Methods
-
-```js
-component.on({ targetEvent, callback, id? }); // Event registration
-component.emit(eventType, detail);             // Event dispatch
-```
-
-#### Utility Methods
-
-```js
-component.ancestry(); // Prototype chain inspection
-```
-
-### Properties
-
-```js
-component.parent; // Parent Component/Elem instance
-component.children; // Child Component/Elem instances
-component.uniqueId; // Frozen unique identifier
-component.options; // Reactive Oxject instance
-component.elem; // Underlying HTMLElement
-component.rendered; // Boolean render status flag
-```
-
-## Memory Management
-
-Components provide comprehensive automatic memory management:
-
-- **Event listeners** - Automatically removed on DOM disconnect
-- **Oxject subscriptions** - Cleaned up when component destroyed
-- **Style elements** - Removed from DOM head on cleanup
-- **Child components** - Recursive cleanup propagation
-- **Custom cleanup** - Manual cleanup function registration
-
-No manual cleanup required for typical usage - components handle resource management automatically.

package/Elem/README.md

@@ -1,373 +0,0 @@
-# Elem
-
-Enhanced DOM element wrapper providing fluent API methods while maintaining direct access to the underlying HTMLElement.
-
-## Basic Usage
-
-### Simple Element Creation
-
-Create DOM elements with enhanced manipulation capabilities:
-
-```js
-import { Elem } from '@vanilla-bean/components';
-
-const button = new Elem({
-	tag: 'button',
-	textContent: 'Click me',
-	className: 'btn btn-primary',
-	onclick: () => alert('Clicked!'),
-	appendTo: document.body,
-});
-```
-
-### Complex Nested Structures
-
-Build complex DOM hierarchies with nested elements:
-
-```js
-const card = new Elem(
-	{
-		tag: 'div',
-		className: 'card',
-		style: { padding: '20px', margin: '10px' },
-	},
-	new Elem({ tag: 'h3', textContent: 'Card Title' }),
-	new Elem({ tag: 'p', textContent: 'Card content goes here.' }),
-);
-```
-
-### Method Chaining
-
-Chain methods for fluent DOM construction:
-
-```js
-const navigation = new Elem({ tag: 'nav' })
-	.addClass('menu', 'horizontal')
-	.setStyle({ display: 'flex', gap: '16px' })
-	.append(
-		new Elem({ tag: 'a', textContent: 'Home', href: '/' }),
-		new Elem({ tag: 'a', textContent: 'About', href: '/about' }),
-		new Elem({ tag: 'a', textContent: 'Contact', href: '/contact' }),
-	)
-	.appendTo(document.body);
-```
-
-### Direct DOM Access
-
-Access the full HTMLElement API when needed:
-
-```js
-const input = new Elem({ tag: 'input', type: 'text' });
-
-// Enhanced methods
-input.addClass('form-control').setStyle({ width: '100%' });
-
-// Direct DOM access
-input.elem.focus();
-input.elem.select();
-input.elem.scrollIntoView({ behavior: 'smooth' });
-```
-
-## Configuration Options
-
-### Constructor Syntax
-
-```js
-new Elem(options?, ...children)
-```
-
-**Parameters:**
-
-- `options` (Object) - Configuration options and HTML properties
-- `children` (...Elem|HTMLElement|string) - Child elements or text content
-
-### Core Options
-
-| Option       | Type                        | Description                        |
-| ------------ | --------------------------- | ---------------------------------- |
-| `tag`        | `string`                    | HTML tag name (default: 'div')     |
-| `style`      | `object`                    | CSS properties as key-value pairs  |
-| `attributes` | `object`                    | HTML attributes as key-value pairs |
-| `content`    | `string\|Elem\|HTMLElement` | Element content                    |
-| `appendTo`   | `Elem\|HTMLElement`         | Parent element to append to        |
-| `prependTo`  | `Elem\|HTMLElement`         | Parent element to prepend to       |
-| `append`     | `Array`                     | Child elements to append           |
-| `prepend`    | `Array`                     | Child elements to prepend          |
-
-### HTML Properties
-
-All standard HTMLElement properties work as options:
-
-```js
-new Elem({
-	// Content properties
-	textContent: 'Button text',
-	innerHTML: '<span>HTML content</span>',
-
-	// Form properties
-	value: 'input value',
-	checked: true,
-	disabled: false,
-
-	// Element properties
-	id: 'unique-id',
-	className: 'btn primary',
-	title: 'Tooltip text',
-
-	// Link properties
-	href: 'https://example.com',
-	target: '_blank',
-
-	// Image properties
-	src: 'image.jpg',
-	alt: 'Image description',
-});
-```
-
-### Event Handler Properties
-
-Event handlers can be assigned directly:
-
-```js
-new Elem({
-	tag: 'button',
-	onclick: event => console.log('clicked'),
-	onmouseover: event => console.log('hover'),
-	onchange: event => console.log('changed'),
-	onfocus: event => console.log('focused'),
-});
-```
-
-## DOM Manipulation
-
-### Content Management
-
-```js
-// Set content (replaces existing)
-elem.content('New text content');
-elem.content(new Elem({ tag: 'span', textContent: 'HTML element' }));
-
-// Clear all content
-elem.empty();
-```
-
-### Child Element Management
-
-```js
-// Add children
-elem.append(child1, child2, 'text content');
-elem.prepend(child1, child2);
-
-// Access children
-const childElements = elem.children; // Array of Elem instances
-const nativeChildren = elem.elem.children; // HTMLCollection
-```
-
-### Hierarchy Management
-
-```js
-// Add to DOM
-elem.appendTo(document.body);
-elem.prependTo(document.querySelector('.container'));
-
-// Navigate hierarchy
-const parentElem = elem.parent; // Parent Elem instance (if exists)
-const nativeParent = elem.parentElem; // Parent HTMLElement
-```
-
-### Style and Attribute Management
-
-```js
-// Set multiple styles
-elem.setStyle({
-	color: 'red',
-	fontSize: '16px',
-	backgroundColor: '#f0f0f0',
-});
-
-// Set multiple attributes
-elem.setAttributes({
-	'data-id': '123',
-	'aria-label': 'Close button',
-	role: 'button',
-});
-```
-
-## Class Management
-
-### Enhanced Class Operations
-
-Elem provides enhanced class manipulation with regular expression support:
-
-```js
-// Check for classes
-elem.hasClass('active'); // Check single class
-elem.hasClass('btn', 'primary'); // Check multiple classes
-elem.hasClass(/^btn-/); // Check with regex pattern
-
-// Add classes
-elem.addClass('new-class');
-elem.addClass('class1', 'class2', 'class3');
-
-// Remove classes
-elem.removeClass('old-class');
-elem.removeClass(/^temp-/); // Remove all classes starting with 'temp-'
-elem.removeClass(/\bmobile-\w+/g); // Remove classes matching pattern
-
-// Toggle class based on a condition (add when true, remove when false)
-elem.toggleClass('active', isActive);
-```
-
-### Class Manipulation Examples
-
-```js
-const button = new Elem({ tag: 'button', className: 'btn btn-primary temp-123' });
-
-// Remove all temporary classes
-button.removeClass(/^temp-/);
-
-// Add state classes
-button.addClass('btn-large', 'btn-rounded');
-
-// Conditional classes
-if (isActive) {
-	button.addClass('active', 'selected');
-}
-
-// Check for button variants
-if (button.hasClass(/^btn-(primary|secondary|danger)$/)) {
-	console.log('Has button variant class');
-}
-```
-
-## Event Handling
-
-### EventTarget Integration
-
-Elem extends EventTarget, providing full event capabilities:
-
-```js
-const button = new Elem({ tag: 'button', textContent: 'Click me' });
-
-// Option-based event handlers
-new Elem({
-	tag: 'input',
-	onchange: event => console.log('Value changed:', event.target.value),
-	onfocus: event => event.target.select(),
-});
-
-// addEventListener method
-button.addEventListener('click', event => {
-	console.log('Button clicked');
-});
-
-// Custom events
-button.addEventListener('customEvent', event => {
-	console.log('Custom event data:', event.detail);
-});
-
-// Dispatch events
-button.dispatchEvent(
-	new CustomEvent('customEvent', {
-		detail: { message: 'Hello' },
-	}),
-);
-```
-
-### Event Handler Options vs Methods
-
-```js
-// Via constructor options (preferred for initial setup)
-const elem = new Elem({
-	tag: 'button',
-	onclick: handleClick,
-	onmouseover: handleHover,
-});
-
-// Via addEventListener (preferred for dynamic binding)
-elem.addEventListener('click', handleClick);
-elem.addEventListener('mouseover', handleHover);
-
-// Via native element
-elem.elem.addEventListener('click', handleClick);
-```
-
-## API Reference
-
-### Constructor
-
-```js
-new Elem(options?, ...children)
-```
-
-### Core Methods
-
-#### Content Methods
-
-```js
-elem.content(content); // Set element content
-elem.empty(); // Remove all child elements
-```
-
-#### Child Management Methods
-
-```js
-elem.append(...children); // Append child elements
-elem.prepend(...children); // Prepend child elements
-elem.appendTo(parent); // Append to parent element
-elem.prependTo(parent); // Prepend to parent element
-```
-
-#### Style and Attribute Methods
-
-```js
-elem.setStyle(styles); // Set CSS properties
-elem.setAttributes(attributes); // Set HTML attributes
-elem.setOptions(options); // Set multiple options at once
-```
-
-#### Class Methods
-
-```js
-elem.hasClass(...classes); // Check for classes (supports regex)
-elem.addClass(...classes); // Add CSS classes
-elem.removeClass(...classes); // Remove CSS classes (supports regex)
-elem.toggleClass(className, condition); // Add when condition is true, remove when false
-```
-
-### Properties
-
-```js
-elem.elem; // Underlying HTMLElement
-elem.parent; // Parent Elem instance (if created by Elem)
-elem.parentElem; // Parent HTMLElement
-elem.children; // Array of child Elem instances
-elem.options; // Configuration options object
-```
-
-### Utility Methods
-
-```js
-elem.toString(); // Returns '[object Elem]'
-```
-
-## Integration with Component
-
-Elem serves as the foundation for the Component class:
-
-```js
-import { Component } from '@vanilla-bean/components';
-
-// Component extends Elem with reactive options
-const component = new Component({
-	tag: 'div',
-	textContent: 'I am reactive!',
-});
-
-// All Elem methods available
-component.addClass('component-class');
-component.setStyle({ padding: '16px' });
-
-// Plus Component-specific features
-component.options.textContent = 'Updated reactively!';
-```

package/styled/README.md

@@ -1,329 +0,0 @@
-# styled
-
-Create Component subclasses with scoped CSS: each `styled()` call generates a unique class, processes the theme, and injects a `<style>` element into `<head>`.
-
-## Basic Usage
-
-### Template Literal Syntax
-
-Create styled components using template literals with theme integration:
-
-```js
-const StyledIcon = styled.Icon`
-	background-color: ${({ colors }) => colors.black};
-	width: 24px;
-	height: 24px;
-
-	&:before {
-		${({ fonts }) => fonts.fontAwesomeSolid}
-		content: "\f015";
-	}
-`;
-```
-
-### Function Syntax with Configuration
-
-Use function syntax when you need to pass component configuration options:
-
-```js
-const ConfiguredComponent = styled(
-	Component,
-	({ colors }) => `
-    background-color: ${colors.black};
-    color: ${colors.lighter(colors.blue)};
-    padding: 12px;
-
-    &:hover {
-      background-color: ${colors.dark(colors.blue)};
-    }
-  `,
-	{
-		tag: 'section',
-		role: 'banner',
-		textContent: 'Default Text',
-	},
-);
-```
-
-### Named Component Shortcuts
-
-All top-level components are available as shorthand methods:
-
-```js
-const StyledButton = styled.Button`
-	background-color: ${({ colors }) => colors.green};
-	border-radius: 8px;
-`;
-
-const StyledInput = styled.Input`
-	${({ fonts }) => fonts.kodeMono}
-	border: 2px solid ${({ colors }) => colors.blue};
-`;
-```
-
-**Note**: Template literal syntax creates components with empty configuration. Use function syntax to pass component options.
-
-## Theme Integration
-
-Style functions receive the complete theme object containing colors, fonts, and component styles:
-
-```js
-const ThemedComponent = styled.Component`
-	${({ button }) => button} /* Apply base button styles */
-  ${({ fonts }) => fonts.kodeMono}
-  background: ${({ colors }) => colors.darker(colors.blue)};
-	color: ${({ colors }) => colors.mostReadable(colors.blue, [colors.white, colors.black])};
-`;
-```
-
-### Runtime Style Override
-
-Override or extend styles when creating component instances:
-
-```js
-const instance = new StyledComponent({
-	styles: ({ colors }) => ({
-		backgroundColor: colors.red,
-		border: `2px solid ${colors.darker(colors.red)}`,
-	}),
-});
-```
-
-Object-based styles apply as inline styles. Function-based styles generate scoped CSS.
-
-## Component Inheritance
-
-### Extending Styled Components
-
-Build component hierarchies by extending existing styled components:
-
-```js
-const BaseButton = styled.Button`
-	padding: 8px 16px;
-	border-radius: 4px;
-`;
-
-const PrimaryButton = styled(BaseButton)`
-	background: ${({ colors }) => colors.blue};
-	color: ${({ colors }) => colors.white};
-`;
-```
-
-### Template Literals with Any Styled Component
-
-Template literal syntax works with any styled component, including those created with function syntax:
-
-```js
-const BaseComponent = styled(Component, () => 'color: red;');
-
-// Extend any styled component with template literals
-const ExtendedComponent = styled(BaseComponent)`
-	background: ${({ colors }) => colors.blue};
-	padding: 16px;
-`;
-
-// Use in class definitions for custom methods
-class MyComponent extends (styled(BaseComponent)`
-	font-weight: bold;
-	border-radius: 4px;
-`) {
-	// Add custom methods here
-}
-```
-
-### Component Functionality Inheritance
-
-Styled components inherit all functionality from their base component:
-
-```js
-const StyledInput = styled.Input`
-	border: 2px solid ${({ colors }) => colors.blue};
-`;
-
-const instance = new StyledInput({
-	value: 'initial value',
-	onChange: event => console.log(event.value),
-	placeholder: 'Enter text...',
-});
-```
-
-## CSS Processing
-
-### Native CSS Nesting
-
-Styles are injected as written, no transformation, no runtime compilation. VBC requires Chrome 112+, Firefox 117+, and Safari 16.5+, all of which support the `&` nesting syntax natively.
-
-```js
-const NestedComponent = styled.Component`
-	padding: 16px;
-
-	& .child {
-		margin: 8px;
-
-		&:hover {
-			background: ${({ colors }) => colors.blue};
-		}
-	}
-
-	@media (max-width: 768px) {
-		padding: 8px;
-	}
-`;
-```
-
-### Automatic Scoping
-
-Each styled component receives a unique class identifier to prevent CSS conflicts:
-
-```js
-const StyledDiv = styled(Component, () => `color: red;`);
-const instance = new StyledDiv();
-
-// Generated CSS: .a1b2c3d4 { color: red; }
-// Component class: "a1b2c3d4"
-```
-
-### Conditional Styles
-
-Apply conditional styles using CSS classes and selectors:
-
-```js
-const ConditionalComponent = styled.Component`
-	padding: 12px;
-	background: ${({ colors }) => colors.white};
-
-	&.active {
-		background: ${({ colors }) => colors.blue};
-		color: ${({ colors }) => colors.white};
-	}
-
-	&.disabled {
-		opacity: 0.5;
-		pointer-events: none;
-	}
-`;
-
-const instance = new ConditionalComponent({
-	addClass: 'active',
-	textContent: 'Active Button',
-});
-```
-
-## Performance
-
-### Processing Pipeline
-
-The styled system processes styles through this pipeline:
-
-1. **Component Creation** - Generates unique class identifier via `classSafeNanoid()`
-2. **Style Processing** - Converts template literals into theme functions
-3. **Theme Application** - Injects complete theme object into style functions
-4. **CSS Processing** - Processes styles through `shimCSS()` pipeline
-5. **DOM Injection** - Injects final CSS via `appendStyles()`
-
-### Load-Time Optimization
-
-Style processing timing depends on document state:
-
-| Document State      | Behavior                                   |
-| ------------------- | ------------------------------------------ |
-| Complete            | Processes and injects immediately          |
-| Loading             | Queues for batch processing on window load |
-| Multiple Components | Batches together for efficiency            |
-
-```js
-// Document loaded - processes immediately
-const StyledComponent = styled(Component, () => 'color: red;');
-
-// Document loading - queued for batch processing
-const AnotherStyled = styled(Component, () => 'color: blue;');
-```
-
-## API Reference
-
-### styled(BaseComponent, styles?, options?)
-
-Creates a styled component class.
-
-**Parameters:**
-
-- `BaseComponent` (Function) - Component class to extend
-- `styles` (Function|String) - Style function or CSS string
-- `options` (Object) - Component configuration options
-
-**Returns:** Extended component class with scoped styling
-
-### configured(BaseComponent, options)
-
-Creates a component with configuration but no styles:
-
-```js
-const ConfiguredComponent = configured(Component, {
-	tag: 'article',
-	role: 'main',
-	textContent: 'Default Content',
-});
-```
-
-### Utility Functions
-
-#### appendStyles(css, id?)
-
-Inject CSS directly into the page:
-
-```js
-appendStyles(
-	`
-  .my-global-class {
-    font-weight: bold;
-    color: red;
-  }
-`,
-	'my-global-styles',
-);
-```
-
-#### themeStyles({ styles, scope })
-
-Generate themed CSS with optional scoping:
-
-```js
-const themedCSS = themeStyles({
-	styles: ({ colors }) => `color: ${colors.white}; background: ${colors.black};`,
-	scope: '.my-component',
-});
-// Returns: ".my-component { color: hsl(0, 0%, 90%); background: hsl(0, 0%, 10%); }"
-```
-
-#### shimCSS(styleConfig)
-
-Complete style processing pipeline:
-
-```js
-shimCSS({
-	styles: ({ colors }) => `
-    display: flex;
-    background: ${colors.blue};
-    & .item { padding: 8px; }
-  `,
-	scope: '.my-scoped-component',
-});
-```
-
-## Development Features
-
-### Debug Class Names
-
-Development mode adds inheritance-based class names for easier debugging:
-
-```js
-// Development classes: "a1b2c3 MyCustomComponent Component Elem"
-class MyCustomComponent extends Component {}
-const StyledCustom = styled(MyCustomComponent, () => 'color: blue;');
-```
-
-### Memory Management
-
-Class-level styles injected by `styled()` persist for the page lifetime. They are scoped to a unique class and do not interfere with other components, but are not removed when instances disconnect.
-
-Per-instance styles set via the `styles` option on a component instance are cleaned up when that component disconnects from the DOM.