@vanilla-bean/components 1.1.0 → 1.1.1

package/Component/Component.js

@@ -139,7 +139,7 @@ class Component extends Elem {
 			if (this.constructor !== Component && this.constructor.prototype.hasOwnProperty('render')) {
 				// eslint-disable-next-line no-console
 				console.warn(
-					`[Component] ${this.constructor.name} overrides render(). Structure belongs in build() — render() is the lifecycle orchestrator.`,
+					`[Component] ${this.constructor.name} overrides render(). Structure belongs in build() - render() is the lifecycle orchestrator.`,
 				);
 			}
 		}
@@ -154,7 +154,7 @@ class Component extends Elem {
 	}
 
 	/**
-	 * Subclass structural hook — override to create child elements and component structure.
+	 * Subclass structural hook - override to create child elements and component structure.
 	 * Called by render() before options are processed, so all structure exists
 	 * before _setOption receives values.
 	 */
@@ -204,7 +204,7 @@ class Component extends Elem {
 	 * Routes option changes through the static handlers chain, then standard routing.
 	 *
 	 * Walks the constructor chain collecting all handlers for the given key (deepest class
-	 * first), then executes them in order. Each handler receives `next(value?)` — call it
+	 * first), then executes them in order. Each handler receives `next(value?)` - call it
 	 * to continue to the next handler in the chain, or to standard routing when the chain
 	 * is exhausted. Handlers that do not call `next` fully own the key.
 	 * @param {string} key - Option property name being changed
@@ -235,7 +235,7 @@ class Component extends Elem {
 	}
 
 	/**
-	 * Standard option routing pipeline — event handlers, special keys, attributes, methods, properties.
+	 * Standard option routing pipeline - event handlers, special keys, attributes, methods, properties.
 	 * Called by _setOption when no handler claims the key, or when a handler calls next() past
 	 * the end of its chain.
 	 * @param {string} key - Option property name
@@ -260,7 +260,7 @@ class Component extends Elem {
 				}
 				return;
 			}
-			// method route — e.g. onPointerPress, onHover
+			// method route - e.g. onPointerPress, onHover
 		}
 
 		if (key === 'uniqueId') this.elem.id = typeof value === 'string' ? value : this.uniqueId;

package/Component/Component.scenarios.js

@@ -1,7 +1,7 @@
 import Component from './Component.js';
 
 export const __lld_api = `
-  destructiveRender() -> boolean | renders a component twice; returns true if child count matches (1) — second render cleared the first
+  destructiveRender() -> boolean | renders a component twice; returns true if child count matches (1) - second render cleared the first
   optionReactionFires() -> number | assigns to option after render; returns how many times _setOption was called (1 = reactive)
   buildBeforeOptions() -> boolean | verifies build() DOM structure exists when _setOption runs (true = ordering is correct)
   priorityRunsFirst() -> boolean | textContent (priority option) runs before style (non-priority); returns true if correct order
@@ -84,5 +84,5 @@ export const replaceCleanupRunsOnce = () => {
 	}); // runs previous = 2, stores latest
 	const countBeforeCleanup = count;
 	comp.processCleanup(); // runs only the latest = 3
-	return count - countBeforeCleanup; // 1 — only latest ran at cleanup time
+	return count - countBeforeCleanup; // 1 - only latest ran at cleanup time
 };

package/Component/Component.test.js

@@ -621,7 +621,7 @@ describe('Component', () => {
 	});
 
 	describe('cleanup system', () => {
-		test('addCleanup chains — both functions run on processCleanup', () => {
+		test('addCleanup chains - both functions run on processCleanup', () => {
 			const comp = new Component({ autoRender: false });
 			const calls = [];
 
@@ -695,7 +695,7 @@ describe('Component', () => {
 			expect(handler).toHaveBeenCalled();
 		});
 
-		test('on* method route — onPointerPress calls the component method', () => {
+		test('on* method route - onPointerPress calls the component method', () => {
 			const handler = mock();
 			component = new Component({ tag: 'button', onPointerPress: handler, appendTo: document.body });
 

package/Component/observeElementConnection.js

@@ -33,7 +33,7 @@ function ensureObserver() {
  * @param {Node} config.target - Target element to watch for add/remove
  * @param {Function} config.onConnected - Called when target is added to the document
  * @param {Function} config.onDisconnected - Called when target is removed from the document
- * @returns {{ disconnect: Function }} Handle — call disconnect() to deregister
+ * @returns {{ disconnect: Function }} Handle - call disconnect() to deregister
  */
 export const observeElementConnection = ({ target, onConnected, onDisconnected }) => {
 	ensureObserver();

package/README.md

@@ -379,7 +379,7 @@ vanilla-bean-components/
 ├── Component/          # Core Component class
 ├── styled/             # Scoped styling system
 ├── theme/              # Design tokens and helpers
-├── demo/               # Component explorer — live option editor, API docs, example apps
+├── demo/               # Component explorer - live option editor, API docs, example apps
 └── docs/               # Additional documentation
 ```
 

package/components/BottomSheet/README.md

@@ -20,7 +20,7 @@ sheet.show();
 | Option     | Type       | Default         | Description                                                       |
 | ---------- | ---------- | --------------- | ----------------------------------------------------------------- |
 | `appendTo` | `Element`  | `document.body` | Where to mount the sheet in the DOM                               |
-| `onClose`  | `Function` | —               | Called when the sheet is dismissed — by drag or explicit `hide()` |
+| `onClose`  | `Function` | -               | Called when the sheet is dismissed - by drag or explicit `hide()` |
 
 All standard `Component` options are supported.
 

package/components/Button/Button.lld.md

@@ -15,7 +15,7 @@ Activatable element that unifies pointer and keyboard interaction under one hand
 - a caller-provided `onKeyUp` runs alongside the built-in keyboard activation; registering both handlers does not suppress either
   - does providing a custom onKeyUp still trigger onPointerPress on Space/Enter?
 
-## Tooltip is automatic — no setup beyond the tooltip option
+## Tooltip is automatic - no setup beyond the tooltip option
 
 - Button extends TooltipWrapper; a `tooltip` option produces tooltip behavior with no additional wiring
   - does a Button with a tooltip option show a tooltip on hover?

package/components/Code/Code.lld.md

@@ -15,7 +15,7 @@ Code display that automatically promotes from inline to block when the content s
 - the `language` option adds a `language-{name}` class; highlighting libraries target this class by convention
   - does the language option add an identifiable class to the code element?
 
-## Copy confirms success visually — clipboard writes can fail silently
+## Copy confirms success visually - clipboard writes can fail silently
 
 - the copy button shows a notification on success so the user knows the copy worked rather than discovering it failed on paste
   - does a successful copy show the user a confirmation?

package/components/ColorPicker/ColorPicker.js

@@ -283,7 +283,7 @@ class ColorPicker extends StyledInput {
 
 		const clamp = (val, min, max) => Math.min(max, Math.max(min, val));
 
-		// HSV: x = saturation, y = (1 - value) — matches the gradient exactly
+		// HSV: x = saturation, y = (1 - value) - matches the gradient exactly
 		const pickerX = clamp((this.sv ?? 0) * pickerW, 0, pickerW);
 		const pickerY = clamp((1 - (this.v ?? 1)) * pickerH, 0, pickerH);
 		this.pickerIndicator.elem.style.transform = `translate3d(${pickerX}px, ${pickerY}px, 0)`;

package/components/Dialog/Dialog.js

@@ -232,7 +232,7 @@ class Dialog extends styled(
 	}
 
 	/**
-	 * 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',
@@ -91,7 +91,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/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,7 +62,7 @@ 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

package/components/Keyboard/Keyboard.lld.md

@@ -4,7 +4,7 @@
 
 On-screen keyboard where layout switching rebuilds the key DOM rather than showing/hiding rows. The decision: a clean rebuild on layout change is safer than managing per-key visibility across layout transitions; no key from one layout can bleed into another.
 
-## Layout switch produces only keys from the new layout — no residual keys remain
+## Layout switch produces only keys from the new layout - no residual keys remain
 
 - changing `layout` removes all existing keys and builds the new set from scratch; a key that exists in layout A but not layout B is definitively absent after the switch
   - does switching layout remove keys from the previous layout?

package/components/Notify/Notify.lld.md

@@ -9,12 +9,12 @@ Transient notification that self-destructs. The design choice is that click-to-d
 - callers pass `type: 'error'` and the component picks the matching icon; a custom `icon` option overrides this only when the standard mapping doesn't fit
   - does a success notification use a visually distinct icon from an error notification?
 
-## Clicking anywhere on the notification dismisses it — the whole surface is the target
+## Clicking anywhere on the notification dismisses it - the whole surface is the target
 
 - notifications are temporary and should be easy to clear; there is no separate close button
   - does clicking the notification body remove it from the page?
 
-## Manual dismiss cancels a pending timeout — no duplicate destroy fires
+## Manual dismiss cancels a pending timeout - no duplicate destroy fires
 
 - when a `timeout` is set and the user dismisses manually before it fires, the timer is cancelled so a second destroy call after the component is already gone cannot happen
   - does manually dismissing a notification before its timeout prevent a second dismiss?

package/components/Page/Page.lld.md

@@ -4,7 +4,7 @@
 
 Top-level layout component that takes ownership of stylesheet loading. The design decision: Page loads FontAwesome and typography as part of mounting; application code does not import or configure these separately.
 
-## Required stylesheets load once — remounting does not re-fetch
+## Required stylesheets load once - remounting does not re-fetch
 
 - Page checks whether each stylesheet is already present before injecting; remounting in a single-page app does not duplicate link elements or re-trigger network requests
   - does mounting a Page a second time leave the stylesheet count unchanged?

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/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

@@ -56,7 +56,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.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/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/TooltipWrapper/TooltipWrapper.lld.md

@@ -9,13 +9,13 @@ Component that adds a tooltip to whatever it wraps. The Tooltip is created durin
 - the Tooltip component is created when the `tooltip` option is processed during render; after construction it exists as `this._tooltip`
   - does the Tooltip component exist after construction with a tooltip option?
 
-## Hover shows after a delay — brief mouse-overs do not trigger the tooltip
+## Hover shows after a delay - brief mouse-overs do not trigger the tooltip
 
 - pointerover registers a 700ms timer; pointerout cancels it and hides immediately; hovering for longer than 700ms shows the tooltip
   - does hovering for longer than 700ms show the tooltip?
   - does leaving before 700ms prevent the tooltip from appearing?
 
-## Cleanup removes the tooltip element — nothing outlives the component
+## Cleanup removes the tooltip element - nothing outlives the component
 
 - when the TooltipWrapper is destroyed, the Tooltip component is also destroyed and removed from the DOM
   - does destroying the wrapper also remove the tooltip from the DOM?

package/components/Whiteboard/Whiteboard.lld.md

@@ -10,7 +10,7 @@ Multi-touch drawing canvas that tracks each pointer independently. The design de
 - the whiteboard tracks each active pointer by its ID
   - does a second finger touching the canvas start a separate line from the first?
 
-## Draw throttle rate adapts to line width — no separate configuration needed
+## Draw throttle rate adapts to line width - no separate configuration needed
 
 - the throttle delay is derived from `lineWidth + 3` (clamped to a range); thicker lines are visually coarser and tolerate a longer delay
 - callers set `lineWidth` and the draw rate adjusts automatically; they do not configure throttle separately

package/index.d.ts

@@ -1,5 +1,5 @@
 // Minimal type declarations for IDE option-name recognition.
-// These are a projection of the source — not a TypeScript implementation.
+// These are a projection of the source - not a TypeScript implementation.
 // VBC is plain JavaScript. These declarations exist so your IDE can suggest
 // option names while you write. They do not constrain what the library can do.
 
@@ -190,7 +190,7 @@ export declare function styled<T extends typeof Elem>(
 export declare function configured<T extends typeof Elem>(Base: T, options: Partial<ComponentOptions>): T;
 
 // ── GENERATED: Built-in components ────────────────────────────────────────────
-// This section is generated by devTools/buildTypes.js — do not edit manually.
+// This section is generated by devTools/buildTypes.js - do not edit manually.
 // Run `bun run build:types` to regenerate from JSDoc annotations.
 
 export interface BottomSheetOptions extends ComponentOptions {
@@ -311,7 +311,7 @@ export interface DialogOptions extends ComponentOptions {
 
 export declare class Dialog extends Component {
 	constructor(options?: DialogOptions, ...children: Array<Elem | HTMLElement | string>);
-	/** Content container — primary injection point for subclass and consumer content. */
+	/** Content container - primary injection point for subclass and consumer content. */
 	readonly body: Component;
 	/** Opens the dialog, either as modal or non-modal */
 	open(): void;

package/package.json

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

package/theme/.test.js

@@ -19,13 +19,13 @@ describe('theme colors', () => {
 		expect(theme.colors.blue.toString()).not.toBe(before);
 	});
 
-	test('white derives from gray — updates when gray is reassigned', () => {
+	test('white derives from gray - updates when gray is reassigned', () => {
 		const before = theme.colors.white.toString();
 		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', () => {
+	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());

package/theme/README.md

@@ -15,10 +15,10 @@ That said, the theme system is layered. You can work at any layer depending on h
 For one-off overrides on a specific component instance, pass `styles` as an option:
 
 ```js
-// Object form — applied as inline styles
+// Object form - applied as inline styles
 new Button({ styles: { backgroundColor: '#your-brand', borderRadius: '4px' } });
 
-// Function form — receives theme, generates scoped CSS
+// Function form - receives theme, generates scoped CSS
 new Dialog({
 	styles: ({ colors }) => `
         border-color: ${colors.purple};
@@ -69,10 +69,10 @@ The theme singleton is imported once and shared across all `styled()` calls. Mut
 import { theme } from '@vanilla-bean/components';
 import { TinyColor } from '@ctrl/tinycolor';
 
-// Replace the accent color — affects every component that uses colors.teal
+// Replace the accent color - affects every component that uses colors.teal
 theme.colors.teal = new TinyColor('#3d7aed');
 
-// Then import and use components as normal — they'll use your teal
+// Then import and use components as normal - they'll use your teal
 import { Button, Dialog } from '@vanilla-bean/components';
 ```
 
@@ -279,10 +279,10 @@ Special utility colors and WCAG compliance helpers:
 ```js
 // Utility colors
 colors.transparent; // Transparent - for overlays, hidden elements
-colors.white; // Pure white - text on dark backgrounds
-colors.black; // Pure black - text on light backgrounds
-colors.superWhite; // #fefefe - slightly warmer white
-colors.vantablack; // #0a0a0a - rich black alternative
+colors.white; // Near-white derived from gray (gray lightened 45%) - text on dark backgrounds
+colors.black; // Near-black derived from gray (gray darkened 35%) - backgrounds, text on light surfaces
+colors.superWhite; // #ffffff - pure white constant, independent of gray
+colors.vantablack; // #000000 - pure black constant, independent of gray
 
 // Semantic accent - the "focused/selected/active" color (focus outlines,
 // ::selection, hover highlights, checked controls, scrollbar thumbs).

package/theme/colors.js

@@ -25,7 +25,7 @@ const colors = {
 		return colors.whiteish();
 	},
 	get black() {
-		return colors.gray.darken(45);
+		return colors.blackish();
 	},
 
 	get selected() {

package/utils/browser.js

@@ -13,7 +13,7 @@ export const isDev = (() => {
 			(import.meta.env?.DEV === true || import.meta.env?.NODE_ENV === 'development')
 		)
 			return true;
-		// Bare browser import with no bundler — treat localhost as dev so warnings surface
+		// Bare browser import with no bundler - treat localhost as dev so warnings surface
 		if (typeof location !== 'undefined' && (location.hostname === 'localhost' || location.hostname === '127.0.0.1'))
 			return true;
 		return false;