@vanilla-bean/components 1.1.0 → 2.0.0

package/components/Dialog/Dialog.js

@@ -11,19 +11,7 @@ const DialogButton = styled(
 	`,
 );
 
-const size_enum = Object.freeze(['small', 'standard', 'large']);
-const variant_enum = Object.freeze(['info', 'success', 'warning', 'error']);
-
-const defaultOptions = {
-	tag: 'dialog',
-	size: 'small',
-	openOnRender: 16,
-	modal: true,
-	get appendTo() {
-		return document.body;
-	},
-	registeredEvents: new Set(['close']),
-};
+const defaultOpenDelay = 16;
 
 /**
  * Modal and non-modal dialog component with customizable appearance and behavior.
@@ -149,57 +137,70 @@ class Dialog extends styled(
 		}
 	`,
 ) {
-	variant_enum = variant_enum;
-	size_enum = size_enum;
-
-	static handlers = {
-		openOnRender(value) {
-			const delay = typeof value === 'number' ? value : defaultOptions.openOnRender;
-			const openDelay = value ? setTimeout(() => this.open(), delay) : null;
-			this.replaceCleanup('openOnRender', () => openDelay && clearTimeout(openDelay));
+	static schema = {
+		tag: { default: 'dialog' },
+		appendTo: {
+			get default() {
+				return document.body;
+			},
 		},
-		// Claim the key so standard routing doesn't try to call elem.showModal() or set elem.modal.
-		// The value is read directly from this.options.modal in open().
-		modal() {},
-		size(value) {
-			if (value && !size_enum.includes(value)) {
-				throw new Error(
-					`"${value}" is not a valid size. The size must be one of the following values: ${size_enum.join(', ')}`,
-				);
-			}
-
-			this.removeClass(/\bsize-\S+\b/g);
-
-			if (value) this.addClass(`size-${value}`);
+		openOnRender: {
+			default: defaultOpenDelay,
+			set(value) {
+				const delay = typeof value === 'number' ? value : defaultOpenDelay;
+				const openDelay = value ? setTimeout(() => this.open(), delay) : null;
+				this.replaceCleanup('openOnRender', () => openDelay && clearTimeout(openDelay));
+			},
 		},
-		variant(value) {
-			if (value && !variant_enum.includes(value)) {
-				throw new Error(
-					`"${value}" is not a valid variant. The variant must be one of the following values: ${variant_enum.join(', ')}`,
-				);
-			}
-
-			this.removeClass(/\bvariant-\S+\b/g);
+		// Read directly from this.options.modal in open()
+		modal: { default: true },
+		size: {
+			default: 'small',
+			enum: ['small', 'standard', 'large'],
+			set(value) {
+				this.removeClass(/\bsize-\S+\b/g);
+
+				if (value) this.addClass(`size-${value}`);
+			},
+		},
+		variant: {
+			enum: ['info', 'success', 'warning', 'error'],
+			set(value) {
+				this.removeClass(/\bvariant-\S+\b/g);
 
-			if (value) this.addClass(`variant-${value}`);
+				if (value) this.addClass(`variant-${value}`);
+			},
+		},
+		body: {
+			set(value) {
+				this.body?.content(value);
+			},
+		},
+		header: {
+			set(value) {
+				this._header?.content(value);
+			},
 		},
-		body(value) {
-			this.body?.content(value);
+		buttons: {
+			set() {
+				this._refreshFooter();
+			},
 		},
-		header(value) {
-			this._header?.content(value);
+		footer: {
+			set() {
+				this._refreshFooter();
+			},
 		},
+		// Read from this.options at button-press time
+		closeDialog: {},
+		onButtonPress: {},
 	};
 
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		super({ ...defaultOptions, ...options }, ...children);
+	static events = ['close'];
 
+	build() {
 		this.options['aria-labelledby'] = this.uniqueId;
-	}
 
-	build() {
 		this._header = new Elem({
 			tag: 'div',
 			id: this.uniqueId,
@@ -210,29 +211,34 @@ class Dialog extends styled(
 
 		this._body = new Elem({ addClass: ['content'], appendTo: this });
 
-		this._footer = new Elem({
-			addClass: ['footer'],
-			append:
-				this.options.footer ||
-				this.options.buttons?.map(
-					button =>
-						new DialogButton({
-							onPointerPress: event =>
-								this.options.onButtonPress?.({
-									event,
-									button,
-									dialog: this,
-									closeDialog: this.options.closeDialog || (() => this.close()),
-								}),
-							...(typeof button === 'object' ? button : { textContent: button }),
-						}),
-				),
-			appendTo: this,
-		});
+		this._footer = new Elem({ addClass: ['footer'], append: this._footerContent(), appendTo: this });
+	}
+
+	_refreshFooter() {
+		if (this.rendered) this._footer?.content(this._footerContent() || []);
+	}
+
+	_footerContent() {
+		return (
+			this.options.footer ||
+			this.options.buttons?.map(
+				button =>
+					new DialogButton({
+						onPointerPress: event =>
+							this.options.onButtonPress?.({
+								event,
+								button,
+								dialog: this,
+								closeDialog: this.options.closeDialog || (() => this.close()),
+							}),
+						...(typeof button === 'object' ? button : { textContent: button }),
+					}),
+			)
+		);
 	}
 
 	/**
-	 * Content container — primary injection point for subclass and consumer content.
+	 * Content container - primary injection point for subclass and consumer content.
 	 * @returns {Component} The dialog body component
 	 */
 	get body() {

package/components/Dialog/Dialog.lld.md

@@ -14,7 +14,7 @@ Native `<dialog>` element wrapper. The decision to use the native element rather
 - an unrecognized size or variant throws at the point of assignment, not later when layout breaks
   - does an unrecognized size value throw?
 
-## Header, body, and footer are stable references — options update them in place
+## Header, body, and footer are stable references - options update them in place
 
 - the structural elements are created once in `build()` and persist across option updates; assigning a new `header` value changes the header's content, not the dialog's structure
   - does updating the header option change the header's content without replacing the dialog structure?

package/components/Dialog/README.md

@@ -22,25 +22,25 @@ const dialog = new Dialog({
 
 | Option | Type | Default | Description |
 | --- | --- | --- | --- |
-| `header` | `string` | — | Text rendered in the `<h2>` header |
-| `body` | `string\|Component\|Array` | — | Content for the scrollable body section. Reactive: updating `options.body` replaces content |
-| `buttons` | `Array<string\|object>` | — | Shorthand footer buttons. Each entry is a string label or `{ textContent, variant?, onPointerPress?, ...buttonOptions }` |
-| `footer` | `Array<Component>` | — | Fully custom footer components. Takes precedence over `buttons` |
-| `onButtonPress` | `Function` | — | Called when any `buttons` entry is pressed. Receives `{ button, closeDialog, event }` |
+| `header` | `string` | - | Text rendered in the `<h2>` header |
+| `body` | `string\|Component\|Array` | - | Content for the scrollable body section. Reactive: updating `options.body` replaces content |
+| `buttons` | `Array<string\|object>` | - | Shorthand footer buttons. Each entry is a string label or `{ textContent, variant?, onPointerPress?, ...buttonOptions }` |
+| `footer` | `Array<Component>` | - | Fully custom footer components. Takes precedence over `buttons` |
+| `onButtonPress` | `Function` | - | Called when any `buttons` entry is pressed. Receives `{ button, closeDialog, event }` |
 | `openOnRender` | `number\|boolean` | `16` | Auto-open delay in ms after render. Set to `false` to disable auto-open |
 | `modal` | `boolean` | `true` | Open as a modal (with backdrop) vs. non-modal |
 | `size` | `string` | `'small'` | Dialog dimensions: `'small'` (420×210px), `'standard'` (840×420px), `'large'` (90vw×90vh) |
-| `variant` | `string` | — | Color theme: `'info'`, `'success'`, `'warning'`, `'error'` |
-| `closeDialog` | `Function` | — | Override the default close behavior used inside `onButtonPress` |
+| `variant` | `string` | - | Color theme: `'info'`, `'success'`, `'warning'`, `'error'` |
+| `closeDialog` | `Function` | - | Override the default close behavior used inside `onButtonPress` |
 | `appendTo` | `Element` | `document.body` | Where to append the dialog in the DOM |
 
 ### `onButtonPress` callback signature
 
 ```js
 onButtonPress: ({ button, closeDialog, event }) => { ... }
-// button      — the original entry from the buttons array (string or object)
-// closeDialog — function that closes the dialog (calls dialog.close() by default)
-// event       — the pointer event that triggered the press
+// button      - the original entry from the buttons array (string or object)
+// closeDialog - function that closes the dialog (calls dialog.close() by default)
+// event       - the pointer event that triggered the press
 ```
 
 ## Methods

package/components/Form/Form.js

@@ -14,18 +14,18 @@ import { Label } from '../Label';
  * **Field definition:**
  * ```js
  * {
- * key: 'name',                          // required — data key
- * label: 'Full Name',                   // optional — defaults to formatted key
- * InputComponent: Select,               // optional — defaults to Input
- * onChange: event => {},                // optional — called after data update
- * parse: value => value.trim(),         // optional — transform before storing
- * condition: data => data.type === 'x', // optional — hide field when false
- * validate: value => value ? null : 'Required', // optional — field-level validator
+ * key: 'name',                          // required - data key
+ * label: 'Full Name',                   // optional - defaults to formatted key
+ * InputComponent: Select,               // optional - defaults to Input
+ * onChange: event => {},                // optional - called after data update
+ * parse: value => value.trim(),         // optional - transform before storing
+ * condition: data => data.type === 'x', // optional - hide field when false
+ * validate: value => value ? null : 'Required', // optional - field-level validator
  * // ...any other InputComponent options
  * }
  * ```
  *
- * **Group definition** — renders inputs side-by-side in a layout container:
+ * **Group definition** - renders inputs side-by-side in a layout container:
  * ```js
  * {
  * type: 'group',
@@ -65,15 +65,19 @@ export default class Form extends Component {
 	 * Rebuild the form when inputs change without recreating the data store.
 	 * Existing data is preserved; new keys are added with their initial values.
 	 */
-	static handlers = {
-		inputs(value) {
-			if (!this.rendered || !value || !this.options.data) return;
-			this.empty();
-			this._resetState();
-			this._processInputs(value, this);
-			this._wireConditions();
-			this._setupAnnouncer();
+	static schema = {
+		inputs: {
+			set(value) {
+				if (!this.rendered || !value || !this.options.data) return;
+				this.empty();
+				this._resetState();
+				this._processInputs(value, this);
+				this._wireConditions();
+				this._setupAnnouncer();
+			},
 		},
+		// Data store managed by build()
+		data: {},
 	};
 
 	/** @private */
@@ -91,7 +95,7 @@ export default class Form extends Component {
 		if (!this._conditionals.length) return;
 		const evaluate = () => this._evaluateConditions();
 		this.options.data.addEventListener('set', evaluate);
-		// replaceCleanup — safe to call multiple times (inputs handler re-wires on rebuild)
+		// replaceCleanup - safe to call multiple times (inputs handler re-wires on rebuild)
 		this.replaceCleanup('conditions', () => this.options.data.removeEventListener('set', evaluate));
 	}
 

package/components/Form/Form.lld.md

@@ -4,7 +4,7 @@
 
 Declarative form from an array of input configurations. The key design decision is that the form owns data binding. Each input's changes update a shared reactive `data` context, and `hasErrors()` validates the whole form in one call.
 
-## Label text falls back to the field key — no separate label required for obvious fields
+## Label text falls back to the field key - no separate label required for obvious fields
 
 - if an input config omits `label`, the key name becomes the label
   - does an input with no label option display the key name as its label?
@@ -15,7 +15,7 @@ Declarative form from an array of input configurations. The key design decision
   - does hasErrors return false when all inputs are valid?
   - does hasErrors return true when an input's validation fails?
 
-## Form data is live — changes are visible before any submit action
+## Form data is live - changes are visible before any submit action
 
 - each input's value feeds the shared `data` context as it changes
   - does typing in an input field update the form's data context before any submit?

package/components/Form/README.md

@@ -20,7 +20,7 @@ const form = new Form({
 
 | Option   | Type            | Default | Description                                                             |
 | -------- | --------------- | ------- | ----------------------------------------------------------------------- |
-| `inputs` | `Array<object>` | —       | Input configuration array; see shape below                              |
+| `inputs` | `Array<object>` | -       | Input configuration array; see shape below                              |
 | `data`   | `object`        | `{}`    | Initial form data. Replaced with an `Oxject` instance on each `build()` |
 
 ### `inputs` entry shape
@@ -32,8 +32,8 @@ const form = new Form({
 | `InputComponent` | `Component class` | `Input` | Component class to instantiate. Can be `Select`, `ColorPicker`, or any component that accepts `value` and `onChange` |
 | `onChange` | `Function` | `() => {}` | Called after the data context is updated with the new value |
 | `parse` | `Function(value, input)` | `v => v` | Transforms the raw event value before storing it in `options.data` |
-| `validations` | `Array` | — | Passed directly to the `InputComponent` (see Input validation format) |
-| `...inputOptions` | `any` | — | Any additional options forwarded to the `InputComponent` constructor |
+| `validations` | `Array` | - | Passed directly to the `InputComponent` (see Input validation format) |
+| `...inputOptions` | `any` | - | Any additional options forwarded to the `InputComponent` constructor |
 
 ### `data` Oxject lifecycle
 

package/components/Icon/Icon.js

@@ -14,20 +14,28 @@ import { Component } from '../../Component';
  * @returns {Icon} Icon component instance
  */
 export default class Icon extends Component {
-	static handlers = {
-		icon() {
-			this._refreshIcon();
+	static schema = {
+		icon: {
+			set() {
+				this._refreshIcon();
+			},
 		},
-		animation() {
-			this._refreshIcon();
+		animation: {
+			set() {
+				this._refreshIcon();
+			},
 		},
-		content(value, next) {
-			next(value);
-			this._refreshIcon();
+		content: {
+			set(value, next) {
+				next(value);
+				this._refreshIcon();
+			},
 		},
-		textContent(value, next) {
-			next(value);
-			this._refreshIcon();
+		textContent: {
+			set(value, next) {
+				next(value);
+				this._refreshIcon();
+			},
 		},
 	};
 

package/components/Input/Input.js

@@ -26,13 +26,11 @@ const type_enum = Object.freeze([
 	'url',
 	'week',
 ]);
-const defaultOptions = {
-	tag: 'input',
-	value: '',
+// Only meaningful on input/textarea elements - child classes rendering other tags (e.g. ColorPicker's div) must not receive them
+const textInputDefaults = {
 	autocomplete: 'off',
 	autocapitalize: 'off',
 	autocorrect: 'off',
-	height: 'auto',
 	placeholder: '',
 };
 
@@ -59,19 +57,91 @@ const dataTypeToInputType = { number: 'number', boolean: 'checkbox', string: 'te
  * @returns {Input} Input component instance
  */
 export default class Input extends Component {
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-	type_enum = type_enum;
+	static schema = {
+		tag: { default: 'input' },
+		type: { enum: type_enum },
+		height: {
+			default: 'auto',
+			set(value) {
+				if (this.tag !== 'textarea') return;
+
+				if (value === 'auto') {
+					this.__updateAutoHeight = () => {
+						this.elem.style.height = this.options.syntaxHighlighting
+							? `calc(${((this.elem.value?.match(/\n/g) || '').length + 1) * 1.19}em + 10px)`
+							: `calc(${((this.elem.value?.match(/\n/g) || '').length + 1) * 1.25}em + 16px)`;
+					};
+
+					this.__debouncedUpdateAutoHeight =
+						this.__debouncedUpdateAutoHeight ||
+						(() => {
+							clearTimeout(this.__autoHeightTimeout);
+							this.__autoHeightTimeout = setTimeout(this.__updateAutoHeight, 16);
+						});
+
+					this.__updateAutoHeight();
+
+					this.elem.addEventListener('input', this.__debouncedUpdateAutoHeight);
+
+					this.replaceCleanup('autoHeight', () => {
+						clearTimeout(this.__autoHeightTimeout);
+						this.elem.removeEventListener?.('input', this.__debouncedUpdateAutoHeight);
+					});
+				} else {
+					this.elem.removeEventListener('input', this.__debouncedUpdateAutoHeight);
+					clearTimeout(this.__autoHeightTimeout);
 
-	constructor(options = {}, ...children) {
-		const rawValue = options.value?.__isDerived ? options.value.toJSON() : options.value;
-		super(
-			{
-				...((options.tag || 'input') === 'input' ? { type: dataTypeToInputType[typeof rawValue] || 'text' } : {}),
-				...defaultOptions,
-				...options,
+					this.elem.style.height = typeof value === 'number' ? `${value + 1}em` : value;
+				}
+			},
+		},
+		value: {
+			default: '',
+			set(value) {
+				if (this.options.type === 'checkbox') this.elem.checked = value;
+				else this.elem.value = value;
+
+				if (this.rendered && this.options.validations?.length) retry(() => this.validate(), { delay: 500, max: 1 });
+			},
+		},
+		syntaxHighlighting: {
+			set(value) {
+				this[value ? 'addClass' : 'removeClass']('syntax-highlighting');
 			},
-			...children,
-		);
+		},
+		language: {
+			set(value) {
+				if (!this.options.syntaxHighlighting) return;
+				this.removeClass(/\blanguage-\S+\b/g);
+				this.addClass(`language-${value}`);
+			},
+		},
+		autocorrect: {
+			set(value) {
+				this.elem.autocorrect = value;
+			},
+		},
+		// Read by validate() and the value handler
+		validations: {
+			get default() {
+				return [];
+			},
+		},
+	};
+
+	static prepareOptions(options) {
+		const rawValue = options.value?.__isDerived ? options.value.toJSON() : options.value;
+		const tag = options.tag || 'input';
+
+		return {
+			...(tag === 'input' ? { type: dataTypeToInputType[typeof rawValue] || 'text' } : {}),
+			...(tag === 'input' || tag === 'textarea' ? textInputDefaults : {}),
+			...options,
+		};
+	}
+
+	constructor(options = {}, ...children) {
+		super(options, ...children);
 
 		this.initialValue = this.options.value;
 	}
@@ -93,58 +163,6 @@ export default class Input extends Component {
 		}
 	}
 
-	static handlers = {
-		height(value) {
-			if (this.tag !== 'textarea') return;
-
-			if (value === 'auto') {
-				this.__updateAutoHeight = () => {
-					this.elem.style.height = this.options.syntaxHighlighting
-						? `calc(${((this.elem.value?.match(/\n/g) || '').length + 1) * 1.19}em + 10px)`
-						: `calc(${((this.elem.value?.match(/\n/g) || '').length + 1) * 1.25}em + 16px)`;
-				};
-
-				this.__debouncedUpdateAutoHeight =
-					this.__debouncedUpdateAutoHeight ||
-					(() => {
-						clearTimeout(this.__autoHeightTimeout);
-						this.__autoHeightTimeout = setTimeout(this.__updateAutoHeight, 16);
-					});
-
-				this.__updateAutoHeight();
-
-				this.elem.addEventListener('input', this.__debouncedUpdateAutoHeight);
-
-				this.replaceCleanup('autoHeight', () => {
-					clearTimeout(this.__autoHeightTimeout);
-					this.elem.removeEventListener?.('input', this.__debouncedUpdateAutoHeight);
-				});
-			} else {
-				this.elem.removeEventListener('input', this.__debouncedUpdateAutoHeight);
-				clearTimeout(this.__autoHeightTimeout);
-
-				this.elem.style.height = typeof value === 'number' ? `${value + 1}em` : value;
-			}
-		},
-		value(value) {
-			if (this.options.type === 'checkbox') this.elem.checked = value;
-			else this.elem.value = value;
-
-			if (this.rendered && this.options.validations?.length) retry(() => this.validate(), { delay: 500, max: 1 });
-		},
-		syntaxHighlighting(value) {
-			this[value ? 'addClass' : 'removeClass']('syntax-highlighting');
-		},
-		language(value) {
-			if (!this.options.syntaxHighlighting) return;
-			this.removeClass(/\blanguage-\S+\b/g);
-			this.addClass(`language-${value}`);
-		},
-		autocorrect(value) {
-			this.elem.autocorrect = value;
-		},
-	};
-
 	/**
 	 * Checks if the input value has changed from its initial value
 	 * @returns {boolean} True if value is no longer the initial value

package/components/Input/README.md

@@ -27,12 +27,12 @@ const input = new Input({
 | `autocapitalize` | `string` | `'off'` | Native autocapitalize attribute |
 | `autocorrect` | `string` | `'off'` | Native autocorrect attribute |
 | `height` | `string\|number` | `'auto'` | Height for textarea. `'auto'` dynamically sizes to content; a number sets `em` units |
-| `syntaxHighlighting` | `boolean` | — | Adds `syntaxHighlighting` class and Tab key indentation handling (textarea only) |
-| `language` | `string` | — | Adds `language-<value>` class for Prism-compatible highlighting (requires `syntaxHighlighting`) |
-| `validations` | `Array` | — | Validation rules; see Validation section below |
-| `onInput` | `Function` | — | Called on every keystroke with an enhanced event containing `.value` |
-| `onChange` | `Function` | — | Called on change with an enhanced event containing `.value` |
-| `onKeyUp` | `Function` | — | Called on keyup with an enhanced event containing `.value` |
+| `syntaxHighlighting` | `boolean` | - | Adds `syntaxHighlighting` class and Tab key indentation handling (textarea only) |
+| `language` | `string` | - | Adds `language-<value>` class for Prism-compatible highlighting (requires `syntaxHighlighting`) |
+| `validations` | `Array` | - | Validation rules; see Validation section below |
+| `onInput` | `Function` | - | Called on every keystroke with an enhanced event containing `.value` |
+| `onChange` | `Function` | - | Called on change with an enhanced event containing `.value` |
+| `onKeyUp` | `Function` | - | Called on keyup with an enhanced event containing `.value` |
 
 ### Supported `type` values
 
@@ -62,15 +62,13 @@ input.validate({ validations?, value? }): Array | undefined
 // Runs validation rules. Returns array of error messages if invalid, undefined if valid.
 // Calling with no args uses options.validations and options.value.
 
-input.isDirty: boolean  // getter — true if current value differs from the initial value
+input.isDirty: boolean  // getter - true if current value differs from the initial value
 ```
 
 ## Events
 
 Input components emit enhanced native events. All handlers (`onInput`, `onChange`, `onKeyUp`, etc.) receive a standard DOM event augmented with a `.value` property containing the current input value.
 
-The `close` event is registered by default via `registeredEvents`.
-
 ## Example
 
 Textarea with auto-height and syntax highlighting:

package/components/Keyboard/Key.js

@@ -21,17 +21,14 @@ const StyledButton = styled(
 );
 
 class Key extends StyledButton {
-	constructor(options = {}, ...children) {
-		const { key, text, class: keyClass, ...optionsWithoutConfig } = options;
+	static prepareOptions(options) {
+		const { key, text, class: keyClass, ...rest } = options;
 
-		super(
-			{
-				textContent: text ?? key,
-				...optionsWithoutConfig,
-				addClass: [key, keyClass].concat(options.addClass),
-			},
-			...children,
-		);
+		return {
+			textContent: text ?? key,
+			...rest,
+			addClass: [key, keyClass].concat(options.addClass),
+		};
 	}
 }