@vanilla-bean/components 1.1.0 → 2.0.0

package/components/RadioButton/RadioButton.js

@@ -69,38 +69,42 @@ const RadioButtonInput = styled(
  * @returns {RadioButton} RadioButton component instance
  */
 class RadioButton extends Component {
-	static handlers = {
-		options(value) {
-			this.empty();
+	static schema = {
+		options: {
+			set(value) {
+				this.empty();
 
-			if (!value) return;
+				if (!value) return;
 
-			this.append(
-				value.map(
-					option =>
-						new RadioButtonLabel({
-							tag: 'label',
-							append: [
-								new RadioButtonInput({
-									tag: 'input',
-									type: 'radio',
-									value: option?.value || option,
-									name: this.uniqueId,
-									checked: this.options.value === (option?.value || option),
-									onChange: event => {
-										if (event.target.checked) this.options.value = event.target.value;
-									},
-								}),
-								option?.label || option,
-							],
-						}),
-				),
-			);
+				this.append(
+					value.map(
+						option =>
+							new RadioButtonLabel({
+								tag: 'label',
+								append: [
+									new RadioButtonInput({
+										tag: 'input',
+										type: 'radio',
+										value: option?.value || option,
+										name: this.uniqueId,
+										checked: this.options.value === (option?.value || option),
+										onChange: event => {
+											if (event.target.checked) this.options.value = event.target.value;
+										},
+									}),
+									option?.label || option,
+								],
+							}),
+					),
+				);
+			},
 		},
-		value(value) {
-			this.elem.querySelectorAll('input[type="radio"]').forEach(input => {
-				input.checked = input.value === String(value);
-			});
+		value: {
+			set(value) {
+				this.elem.querySelectorAll('input[type="radio"]').forEach(input => {
+					input.checked = input.value === String(value);
+				});
+			},
 		},
 	};
 }

package/components/RadioButton/RadioButton.lld.md

@@ -4,7 +4,7 @@
 
 Radio group from an array of options. The design decision: the HTML `name` coordination that makes radios mutually exclusive is handled automatically; callers pass values and get a working group without managing name attributes.
 
-## All radios in the group share one name — mutual exclusivity is provided by the browser
+## All radios in the group share one name - mutual exclusivity is provided by the browser
 
 - the component generates a shared `name` attribute; the browser enforces that only one radio in the group can be checked at a time
   - does each radio input in the group share the same name attribute?

package/components/Router/README.md

@@ -9,7 +9,7 @@ import { Router, View, Page } from '@vanilla-bean/components';
 
 class HomeView extends View {
 	build() {
-		// render view content here — no Page needed, the shell provides it
+		// render view content here - no Page needed, the shell provides it
 	}
 }
 
@@ -43,20 +43,20 @@ new Router({
 
 | Option | Type | Default | Description |
 | --- | --- | --- | --- |
-| `views` | `object` | — | **Required.** Maps route patterns to component classes. Patterns may contain `:param` segments. |
+| `views` | `object` | - | **Required.** Maps route patterns to component classes. Patterns may contain `:param` segments. |
 | `defaultPath` | `string` | First key of `views` | Route used when the hash is empty and for fallback on unmatched routes. |
-| `notFound` | `typeof Component` | — | Component class rendered when no route matches and `defaultPath` fallback also fails. Receives `{ route }` as an option. |
-| `onRenderView` | `Function` | — | Called with the matched route string whenever a new view is rendered. |
+| `notFound` | `typeof Component` | - | Component class rendered when no route matches and `defaultPath` fallback also fails. Receives `{ route }` as an option. |
+| `onRenderView` | `Function` | - | Called with the matched route string whenever a new view is rendered. |
 | `mode` | `'hash' \| 'history'` | `'hash'` | `'hash'` uses URL fragments (`#/path`). `'history'` uses `pushState` and real pathnames (`/path`). History mode requires the server to serve `index.html` for all routes. |
 
 ## Properties
 
 ```js
-router.path; // string — current URL hash, stripped of '#/', '/', and query strings
+router.path; // string - current URL hash, stripped of '#/', '/', and query strings
 router.path = '/users/42'; // navigate; sets window.location.hash and re-renders
 
-router.route; // string — the matched route pattern for the current path (e.g. '/users/:id')
-router.currentRoute; // string — the last successfully rendered route pattern
+router.route; // string - the matched route pattern for the current path (e.g. '/users/:id')
+router.currentRoute; // string - the last successfully rendered route pattern
 ```
 
 ## Methods
@@ -77,9 +77,9 @@ Routes are matched using exact string equality first, then by replacing `:param`
 
 ```js
 views: {
-  '/users/new':    NewUserView,   // exact match — always wins
-  '/users/:id':    UserView,      // one param — tested before /:section/:id
-  '/:section/:id': SectionView,   // two params — tested last
+  '/users/new':    NewUserView,   // exact match - always wins
+  '/users/:id':    UserView,      // one param - tested before /:section/:id
+  '/:section/:id': SectionView,   // two params - tested last
 }
 ```
 
@@ -121,7 +121,7 @@ class SettingsView extends View {
 }
 ```
 
-## Example — full SPA shell
+## Example - full SPA shell
 
 ```js
 import { Router, View, Nav, NavItem, Page } from '@vanilla-bean/components';
@@ -138,7 +138,7 @@ class ArticleView extends View {
 	}
 }
 
-// Page is the app shell — Router and Nav live inside it, not inside each view
+// Page is the app shell - Router and Nav live inside it, not inside each view
 const page = new Page({ title: 'My App', appendTo: document.body });
 
 const router = new Router({

package/components/Router/Router.js

@@ -16,20 +16,26 @@ import { routeToRegex } from './utils';
  * @returns {Router} Router component instance
  */
 class Router extends Component {
-	constructor(options = {}, ...children) {
-		super(
-			{
-				defaultPath: Object.keys(options.views)[0],
-				...options,
-				style: {
-					display: 'flex',
-					flex: 1,
-					overflow: 'hidden',
-					...options.style,
-				},
+	// Routing config read from this.options by the path getters and renderView()
+	static schema = {
+		views: {},
+		defaultPath: {},
+		notFound: {},
+		onRenderView: {},
+		mode: { default: 'hash', enum: ['hash', 'history'] },
+	};
+
+	static prepareOptions(options) {
+		return {
+			defaultPath: Object.keys(options.views || {})[0],
+			...options,
+			style: {
+				display: 'flex',
+				flex: 1,
+				overflow: 'hidden',
+				...options.style,
 			},
-			...children,
-		);
+		};
 	}
 
 	/**
@@ -102,14 +108,6 @@ class Router extends Component {
 		return parameters;
 	}
 
-	static handlers = {
-		views() {},
-		defaultPath() {},
-		notFound() {},
-		onRenderView() {},
-		mode() {},
-	};
-
 	build() {
 		const reRenderView = () => this.renderView();
 

package/components/Select/README.md

@@ -20,9 +20,9 @@ Select inherits all options from `Input`. Key additions:
 
 | Option | Type | Default | Description |
 | --- | --- | --- | --- |
-| `options` | `Array<string\|object>` | — | List of selectable options. See shape below. Reactive: reassigning `options.options` rebuilds the `<option>` elements |
-| `value` | `any` | — | Currently selected value. Matched against option `value` attributes |
-| `onChange` | `Function` | — | Called with an enhanced event containing `.value` (the selected value string) on change |
+| `options` | `Array<string\|object>` | - | List of selectable options. See shape below. Reactive: reassigning `options.options` rebuilds the `<option>` elements |
+| `value` | `any` | - | Currently selected value. Matched against option `value` attributes |
+| `onChange` | `Function` | - | Called with an enhanced event containing `.value` (the selected value string) on change |
 
 All other `Input` options (`placeholder`, `validations`, `onInput`, etc.) are available but less commonly used with Select.
 
@@ -46,8 +46,8 @@ options: ['plain string', { label: 'Display Text', value: 42 }, { label: 'Unavai
 ## Methods
 
 ```js
-select.value          // getter — returns value, label, or textContent of the selected <option>
-select.value = newVal // setter — sets elem.value directly
+select.value          // getter - returns value, label, or textContent of the selected <option>
+select.value = newVal // setter - sets elem.value directly
 
 // Inherited from Input:
 select.validate({ validations?, value? }): Array | undefined

package/components/Select/Select.js

@@ -1,13 +1,6 @@
 import { Elem } from '../../Elem';
 import { Input } from '../Input';
 
-const defaultOptions = {
-	tag: 'select',
-	get priorityOptions() {
-		return new Set(['textContent', 'content', 'appendTo', 'prependTo', 'options']);
-	},
-};
-
 /**
  * Select dropdown component extending Input with dynamic option management.
  *
@@ -21,33 +14,34 @@ const defaultOptions = {
  * @returns {Select} Select component instance
  */
 class Select extends Input {
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		super({ ...defaultOptions, ...options }, ...children);
-	}
+	static schema = {
+		tag: { default: 'select' },
+		autocomplete: { default: 'off' },
+		options: {
+			set(value) {
+				this.empty();
 
-	static handlers = {
-		options(value) {
-			this.empty();
+				if (!value) return;
 
-			if (!value) return;
-
-			for (const option of value) {
-				// Optgroup: { label: 'Group', options: [...] }
-				if (typeof option === 'object' && Array.isArray(option.options)) {
-					const group = document.createElement('optgroup');
-					if (option.label) group.label = option.label;
-					for (const o of option.options) {
-						group.append(new Elem({ tag: 'option', ...(typeof o === 'object' ? o : { label: o, value: o }) }).elem);
+				for (const option of value) {
+					// Optgroup: { label: 'Group', options: [...] }
+					if (typeof option === 'object' && Array.isArray(option.options)) {
+						const group = document.createElement('optgroup');
+						if (option.label) group.label = option.label;
+						for (const o of option.options) {
+							group.append(new Elem({ tag: 'option', ...(typeof o === 'object' ? o : { label: o, value: o }) }).elem);
+						}
+						this.elem.append(group);
+					} else {
+						this.append(
+							new Elem({ tag: 'option', ...(typeof option === 'object' ? option : { label: option, value: option }) }),
+						);
 					}
-					this.elem.append(group);
-				} else {
-					this.append(
-						new Elem({ tag: 'option', ...(typeof option === 'object' ? option : { label: option, value: option }) }),
-					);
 				}
-			}
+
+				// Re-apply the current value - option elements may not have existed when value was processed
+				if (this.options.value !== undefined) this.elem.value = this.options.value;
+			},
 		},
 	};
 
@@ -56,7 +50,7 @@ class Select extends Input {
 	 * @returns {*} Selected option value, label, or text content
 	 */
 	get value() {
-		// Use elem.options (HTMLOptionsCollection) — works across optgroups
+		// Use elem.options (HTMLOptionsCollection) - works across optgroups
 		const selected = Array.from(this.elem.options).find(({ selected }) => selected);
 
 		return selected?.value ?? selected?.label ?? selected?.textContent ?? this.elem.value;

package/components/Table/README.md

@@ -20,11 +20,11 @@ const table = new Table({
 
 | Option | Type | Default | Description |
 | --- | --- | --- | --- |
-| `data` | `Array<object>` | — | Array of row data objects. Reactive: reassigning `options.data` rebuilds the tbody |
+| `data` | `Array<object>` | - | Array of row data objects. Reactive: reassigning `options.data` rebuilds the tbody |
 | `columns` | `Array<string\|object>` | `[]` | Column definitions; see shape below |
-| `footer` | `Array<string\|object>` | — | Footer row cells, same shape as columns. Strings are capitalized automatically |
-| `sortProperty` | `string` | — | Key of the currently sorted column |
-| `sortDirection` | `string` | — | `'asc'` or `'desc'` |
+| `footer` | `Array<string\|object>` | - | Footer row cells, same shape as columns. Strings are capitalized automatically |
+| `sortProperty` | `string` | - | Key of the currently sorted column |
+| `sortDirection` | `string` | - | `'asc'` or `'desc'` |
 | `onSort` | `Function` | built-in | Called with `(property, direction)` when a sortable column header is clicked. Default sorts `options.data` in place using `orderBy` |
 
 ### `columns` entry shape

package/components/Table/Table.js

@@ -4,8 +4,6 @@ import { Elem } from '../../Elem';
 import { Component } from '../../Component';
 import { Icon } from '../Icon';
 
-const defaultOptions = { tag: 'table' };
-
 /**
  * Data table component with sorting, column configuration, and footer support.
  *
@@ -23,37 +21,55 @@ const defaultOptions = { tag: 'table' };
  * @returns {Table} Table component instance
  */
 class Table extends Component {
-	constructor(options = {}, ...children) {
-		super(
-			{
-				...defaultOptions,
-				onSort: (property, direction) => {
-					this.options.data = this.options.data.sort(orderBy({ property, direction }));
-				},
-				...options,
-				columns: (options.columns || []).map(column =>
-					typeof column === 'string' ? { key: column, content: capitalize(column) } : column,
-				),
-				footer: options.footer?.map(column => (typeof column === 'string' ? { content: capitalize(column) } : column)),
+	static schema = {
+		tag: { default: 'table' },
+		sortDirection: {
+			enum: ['asc', 'desc'],
+			set(value) {
+				if (!this.rendered) return;
+				if (this.options.onSort) this.options.onSort(this.options.sortProperty, value);
+				else
+					this.options.data = this.options.data.sort(
+						orderBy({ property: this.options.sortProperty, direction: value }),
+					);
 			},
-			...children,
-		);
-	}
-
-	static handlers = {
-		sortDirection(value) {
-			if (this.rendered) this.options.onSort(this.options.sortProperty, value);
 		},
-		data() {
-			this._renderTable();
+		data: {
+			set() {
+				this._renderTable();
+			},
 		},
-		selection() {
-			this._renderTable();
+		selection: {
+			set() {
+				this._renderTable();
+			},
 		},
+		columns: {
+			set() {
+				if (this.rendered) this._renderTable();
+			},
+		},
+		footer: {
+			set() {
+				if (this.rendered) this._renderTable();
+			},
+		},
+		// Read from this.options at sort time; sortProperty changes are always followed
+		// by a sortDirection change, which drives the re-render
+		sortProperty: {},
+		onSort: {},
 	};
 
 	_renderTable() {
 		const value = this.options.data;
+		// Columns and footer accept string shorthand - normalized at read time so
+		// construction and reactive assignment take the same path
+		const columns = (this.options.columns || []).map(column =>
+			typeof column === 'string' ? { key: column, content: capitalize(column) } : column,
+		);
+		const footer = this.options.footer?.map(column =>
+			typeof column === 'string' ? { content: capitalize(column) } : column,
+		);
 
 		this._sortSubscribers?.forEach(sub => sub.destroy?.());
 		this._sortSubscribers = null;
@@ -75,19 +91,22 @@ class Table extends Component {
 		this.thead.append(
 			new Component(
 				{ tag: 'tr' },
-				this.options.columns.map(column => {
-					const th = new Component({ tag: 'th', ...column, scope: 'col' });
+				columns.map(column => {
+					// key/sort/dataColumn are column config for the Table itself - keep them off the th elem
+					const { key, sort, ...columnOptions } = column;
+					delete columnOptions.dataColumn;
+					const th = new Component({ tag: 'th', ...columnOptions, scope: 'col' });
 
-					if (column.sort) {
+					if (sort) {
 						const iconSub = this.options.subscriber('sortDirection', () => {
-							if (this.options.sortProperty !== column.key) return 'sort';
+							if (this.options.sortProperty !== key) return 'sort';
 
 							return this.options.sortDirection === 'asc' ? 'sort-down' : 'sort-up';
 						});
 						const styleSub = this.options.subscriber('sortDirection', () => ({
 							display: 'inline',
 							marginLeft: '6px',
-							...(this.options.sortProperty !== column.key
+							...(this.options.sortProperty !== key
 								? { color: theme.colors.dark(theme.colors.gray) }
 								: { color: theme.colors.white }),
 						}));
@@ -96,7 +115,7 @@ class Table extends Component {
 
 						const updateAriaSort = () => {
 							let ariaSort = 'none';
-							if (this.options.sortProperty === column.key) {
+							if (this.options.sortProperty === key) {
 								ariaSort = this.options.sortDirection === 'asc' ? 'ascending' : 'descending';
 							}
 							th.elem.setAttribute('aria-sort', ariaSort);
@@ -121,12 +140,12 @@ class Table extends Component {
 						});
 
 						th.onPointerPress(() => {
-							if (this.options.sortProperty === column.key) {
+							if (this.options.sortProperty === key) {
 								this.options.sortDirection = this.options.sortDirection === 'asc' ? 'desc' : 'asc';
 								return;
 							}
 
-							this.options.sortProperty = column.key;
+							this.options.sortProperty = key;
 							this.options.sortDirection = 'desc';
 						});
 					}
@@ -141,7 +160,7 @@ class Table extends Component {
 				rowData =>
 					new Component(
 						{ tag: 'tr' },
-						this.options.columns.map(
+						columns.map(
 							column =>
 								new Component(
 									{
@@ -157,11 +176,11 @@ class Table extends Component {
 			),
 		);
 
-		if (this.options.footer) {
+		if (footer) {
 			this.tfoot.append(
 				new Component(
 					{ tag: 'tr' },
-					this.options.footer.map(footData => new Component({ tag: 'td', ...footData })),
+					footer.map(footData => new Component({ tag: 'td', ...footData })),
 				),
 			);
 		}

package/components/Table/Table.lld.md

@@ -4,7 +4,7 @@
 
 Sortable data table where sort state is explicit options. The design decision: `sortProperty` and `sortDirection` are readable and writable options; the sort state is in the component's options object, not hidden inside event handlers, so it's readable and settable from outside.
 
-## Sort state lives in options — externally readable and settable
+## Sort state lives in options - externally readable and settable
 
 - clicking a column header updates `sortProperty` and `sortDirection` as regular options; external code can read or set sort state without querying the DOM
   - does clicking a sortable column update sortProperty to that column's key?

package/components/TagList/Tag.js

@@ -52,14 +52,23 @@ const StyledComponent = styled(
 	`,
 );
 
-const defaultOptions = { tag: 'li', readOnly: false };
-
 class Tag extends StyledComponent {
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		super({ tabindex: '0', ...defaultOptions, ...options }, ...children);
-	}
+	static schema = {
+		tag: { default: 'li' },
+		tabIndex: { default: 0 },
+		readOnly: {
+			default: false,
+			set(value) {
+				this.toggleClass('readOnly', !!value);
+			},
+		},
+		textContent: {
+			set(value) {
+				this.elem.setAttribute('data-value', value);
+				this._textSpan.elem.textContent = value;
+			},
+		},
+	};
 
 	build() {
 		this._textSpan = new Elem({ tag: 'span', appendTo: this });
@@ -72,13 +81,6 @@ class Tag extends StyledComponent {
 			});
 		}
 	}
-
-	static handlers = {
-		textContent(value) {
-			this.elem.setAttribute('data-value', value);
-			this._textSpan.elem.textContent = value;
-		},
-	};
 }
 
 export default Tag;

package/components/TagList/TagList.js

@@ -32,8 +32,6 @@ const TagListInput = styled(
 	`,
 );
 
-const defaultOptions = { readOnly: false };
-
 /**
  * Interactive tag list component with add/remove functionality and input support.
  *
@@ -47,11 +45,20 @@ const defaultOptions = { readOnly: false };
  * @returns {TagList} TagList component instance
  */
 class TagList extends StyledComponent {
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		super({ ...options, tag: 'ul' }, ...children);
-	}
+	static schema = {
+		tag: { default: 'ul' },
+		readOnly: {
+			default: false,
+			set(value) {
+				this.toggleClass('readOnly', !!value);
+			},
+		},
+		tags: {
+			get default() {
+				return [];
+			},
+		},
+	};
 
 	_addTag(value) {
 		value = (value || '').trim();
@@ -91,7 +98,7 @@ class TagList extends StyledComponent {
 		}
 
 		this.append([
-			...(this.options.tags || []).map(textContent => new Tag({ readOnly: this.options.readOnly, textContent })),
+			...this.options.tags.map(textContent => new Tag({ readOnly: this.options.readOnly, textContent })),
 			...(this.addTag ? [this.addTag] : []),
 		]);
 	}

package/components/TagList/TagList.lld.md

@@ -10,7 +10,7 @@ Editable tag collection. The key decision: read-only mode removes the editing in
   - does a readOnly TagList contain no input element?
   - does a non-readOnly TagList contain both an input and an add button?
 
-## Duplicate tags are silently rejected — adding them does nothing
+## Duplicate tags are silently rejected - adding them does nothing
 
 **method:** `duplicateRejected`
 

package/components/Tooltip/Tooltip.js

@@ -80,8 +80,6 @@ const StyledPopover = styled(
 	`,
 );
 
-const defaultOptions = { position: 'topRight', autoOpen: false };
-
 const position_enum = Object.freeze([
 	'center',
 	'top',
@@ -108,32 +106,21 @@ const position_enum = Object.freeze([
  * @returns {Tooltip} Tooltip component instance
  */
 class Tooltip extends StyledPopover {
-	position_enum = position_enum;
-	defaultOptions = { ...super.defaultOptions, ...defaultOptions };
-
-	constructor(options = {}, ...children) {
-		super(
-			{
-				...defaultOptions,
-				...options,
-				addClass: ['tooltip'].concat(options.addClass),
+	static schema = {
+		autoOpen: { default: false },
+		position: {
+			default: 'topRight',
+			enum: position_enum,
+			set(value) {
+				this.removeClass(...position_enum);
+				this.addClass(value);
 			},
-			...children,
-		);
-	}
-
-	static handlers = {
-		position(value) {
-			if (!position_enum.includes(value)) {
-				throw new Error(
-					`"${value}" is not a valid position. The position must be one of the following values: ${position_enum.join(', ')}`,
-				);
-			}
-
-			this.removeClass(...position_enum);
-			this.addClass(value);
 		},
 	};
+
+	static prepareOptions(options) {
+		return { ...options, addClass: ['tooltip'].concat(options.addClass) };
+	}
 }
 
 export default Tooltip;