@ixfx/components 0.14.6 → 0.15.0

package/dist/tree.d.ts

@@ -1,4 +1,4 @@
 import { A as TreeTickleEvent, D as TreeSelectDetail, M as TreeDataModelOptions, O as TreeSelectEvent, T as TreeRevealMode, _ as TreeDropTarget, b as TreeItemClickDetail, c as TreeDragContext, d as TreeDragStartEvent, g as TreeDropPosition, h as TreeDropEvent, i as TreeCollapseEvent, j as TreeDataModel, k as TreeTickleDetail, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, r as TreeCollapseDetail, s as TreeDndMode, t as TreeActivateDetail, u as TreeDragOverEvent, v as TreeExpandDetail, w as TreeNavigateOptions, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-CDsYTBDi.js";
 import { a as TreeItem, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Jky6oNAp.js";
-import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElementEventMap, f as TreeVirtualize, i as TreeDropRowInfo, l as TreeCheckboxState, n as TreeDropControllerConfig, o as TreeController, p as TreeConfig, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeBaseElement } from "./index-DuhzWWTr.js";
+import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElementEventMap, f as TreeVirtualize, i as TreeDropRowInfo, l as TreeCheckboxState, n as TreeDropControllerConfig, o as TreeController, p as TreeConfig, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeBaseElement } from "./index-wUYiXH8c.js";
 export { type LoadChildrenCallback, type TreeActivateDetail, type TreeActivateEvent, TreeBaseElement, TreeBaseElementEventMap, type TreeCheckboxState, type TreeCollapseDetail, type TreeCollapseEvent, type TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, type TreeDataModelOptions, type TreeDndMode, type TreeDragContext, type TreeDragEndEvent, type TreeDragOverEvent, type TreeDragStartEvent, type TreeDropContext, TreeDropController, TreeDropControllerConfig, type TreeDropDetail, type TreeDropEvent, type TreeDropPosition, TreeDropResolvedDrag, TreeDropRowInfo, type TreeDropTarget, TreeDropVisibleRow, type TreeExclusivity, type TreeExpandDetail, type TreeExpandEvent, type TreeFilterPredicate, type TreeItem, type TreeItemClickDetail, type TreeItemClickEvent, TreeListElement, type TreeNavigateOptions, type TreeNode, type TreeRevealMode, type TreeSelectDetail, type TreeSelectEvent, type TreeSelectionFilter, type TreeTickleDetail, type TreeTickleEvent, TreeVirtualize };

package/dist/{vertical-list-ztrdFvyT.d.ts → vertical-list-BYyb2n4x.d.ts}

@@ -1,6 +1,6 @@
 import { B as ListNativeDragStartEvent, I as ListDragPreviewRenderer, L as ListDragPreviewSourceResolver } from "./tree-component-CDsYTBDi.js";
 import { n as ListViewportChangeEvent } from "./list-viewport-types-BRZsLcvp.js";
-import { S as ListSearchController } from "./index-BvoXLnBf.js";
+import { S as ListSearchController } from "./index-ChdhB7RK.js";
 import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-PjKdhF-a.js";
 import "./editable-label-rzXkjf1H.js";
 import { LitElement, PropertyValues } from "lit";

package/dist/vertical-list.d.ts

@@ -1,5 +1,5 @@
 import { B as ListNativeDragStartEvent, F as ListDragPreviewContext, I as ListDragPreviewRenderer, N as ListDragEntry, P as ListDragPreview, R as ListDragSource, z as ListNativeDragStartDetail } from "./tree-component-CDsYTBDi.js";
 import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
 import { a as ListItemClickDetail, c as ListSelectEvent, d as ListTickleEvent, i as ListInteractionMode, l as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail, u as ListTickleDetail } from "./list-selection-types-PjKdhF-a.js";
-import { a as ListContextMenuDetail, c as ListDragLeaveEvent, d as ListDropEvent, f as ListEditCancelDetail, h as ListEditCommitEvent, i as VerticalListElementEventMap, l as ListDragOverEvent, m as ListEditCommitDetail, n as CustomCheckboxOptions, o as ListContextMenuEvent, p as ListEditCancelEvent, r as VerticalListElement, s as ListDragLeaveDetail, t as AddItemOptions, u as ListDropDetail } from "./vertical-list-ztrdFvyT.js";
+import { a as ListContextMenuDetail, c as ListDragLeaveEvent, d as ListDropEvent, f as ListEditCancelDetail, h as ListEditCommitEvent, i as VerticalListElementEventMap, l as ListDragOverEvent, m as ListEditCommitDetail, n as CustomCheckboxOptions, o as ListContextMenuEvent, p as ListEditCancelEvent, r as VerticalListElement, s as ListDragLeaveDetail, t as AddItemOptions, u as ListDropDetail } from "./vertical-list-BYyb2n4x.js";
 export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListContextMenuDetail, type ListContextMenuEvent, type ListDragEntry, type ListDragLeaveDetail, type ListDragLeaveEvent, type ListDragOverEvent, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListDropDetail, type ListDropEvent, type ListEditCancelDetail, type ListEditCancelEvent, type ListEditCommitDetail, type ListEditCommitEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, type ListViewportChangeDetail, type ListViewportChangeEvent, VerticalListElement, VerticalListElementEventMap };

package/docs-user/ac-token.md

@@ -36,6 +36,7 @@ el.addEventListener('ac-token-change', e => {
 |-----------------------|-----------------------------------|-------------|---------------------------------------------------------------------|
 | `completionProvider`  | `AcTokenCompletionProvider \| undefined` | `undefined` | Async or sync function returning suggestions for the current draft token. Takes precedence over `data-tokens`. |
 | `tokenizer`           | `AcTokenizerFn \| undefined`      | `undefined` | Custom function to split text into tokens. Default splits on space, comma, semicolon. |
+| `tokenStyle`          | `AcTokenStyleFn \| undefined`     | `undefined` | Called per committed chip with the `AcTokenItem`; return `{ background?, color?, borderColor? }` (any CSS colour) or undefined for the default look. Not applied while the chip is selected. |
 | `data-tokens`         | `string` (attribute only)         | `''`        | Space/comma/semicolon-separated list of static suggestion labels. Used when no `completionProvider` is set. |
 | `placeholder`         | `string`                          | `''`        | Placeholder shown when no tokens or draft text are present.         |
 | `strict`              | `boolean`                         | `false`     | When true, only suggestions from the popup can be committed. Free-form typed text is ignored. |
@@ -138,6 +139,18 @@ The tokenizer is also used when pasting text to bulk-commit multiple tokens at o
 
 ---
 
+### Per-token styling
+
+```js
+el.tokenStyle = item => item.label.startsWith('#')
+  ? { background: 'teal', color: 'white' }
+  : undefined;
+```
+
+Re-assign `tokenStyle` to re-evaluate chips if the rules change.
+
+---
+
 ### `AcTokenItem` shape
 
 ```ts

package/docs-user/button.md

@@ -27,6 +27,7 @@ Three related button components:
 | `icon`              | string  | —       | Registered icon name **or** raw `<svg>` string     |
 | `hide-icon`         | boolean | `false` | Hides the icon even when `icon` is set             |
 | `hide-label`        | boolean | `false` | Hides the text label (useful for icon-only buttons)|
+| `type`              | `'button' \| 'submit' \| 'reset'` | `'button'` | Inside a `<form>` (including `ixfx-form`), `submit` submits it (after validation) and `reset` resets it. The button is form-associated, so this works even though its inner `<button>` is in a shadow root |
 | `subtle`            | boolean | `false` | Renders the background at 40% opacity, raised to 70% on hover/focus |
 
 ### Slots

package/docs-user/colour-picker.md

@@ -200,6 +200,25 @@ Picker sizes (width × height):
 
 Set the committed colour from any ixfx-compatible format. The swatch updates immediately. The inner picker reflects the new colour the next time the popover opens.
 
+#### `close()`
+
+Close the popover. In confirm mode, uncommitted changes are reverted.
+
+### Slots
+
+| Slot | Description |
+|------|-------------|
+| `action` | Optional button(s) at the bottom-left of the popup, inline with the confirm button. Wire up its click handler yourself and call `close()` to dismiss. |
+
+```html
+<ixfx-colour-picker-popup mode="confirm" id="bg">
+  <button slot="action" id="none">No colour</button>
+</ixfx-colour-picker-popup>
+<script>
+  none.addEventListener('click', () => { /* clear your value */ bg.close(); });
+</script>
+```
+
 ### Limitations
 
 The popover is positioned relative to the swatch using CSS anchor positioning (`anchor-name`/`position-anchor`). Chrome does not resolve anchor positioning for elements inside an SVG `<foreignObject>` — if you embed this component there, the popover will render unanchored at the top-left of the viewport instead of next to the swatch. Workaround: keep the swatch as a plain SVG element and render this component (or just the picker) in a fixed-positioned HTML overlay positioned via `getBoundingClientRect()` on your own swatch element.

package/docs-user/form.md

@@ -6,25 +6,74 @@ Primitives for typical form layout with responsive label positioning and data bi
 
 ## `ixfx-form`
 
-Main container for form sections. Provides `getValues()` and `setValues()` methods for data binding.
+Main container for form sections. It wraps its content in a native `<form>`, so submit, Enter-to-submit, validation, `FormData` and `form.elements` work as they do for any form. It also provides `getValues()` and `setValues()` for data binding.
 
 ```html
 <ixfx-form>
   <ixfx-form-group label="Section A">
     <p>Preamble text for section A...</p>
     <ixfx-form-part label="Some text">
-      <input type="text" name="input1" />
+      <input type="text" name="input1" required />
     </ixfx-form-part>
     <ixfx-form-part label="Some other text">
       <input type="text" name="input2" />
     </ixfx-form-part>
   </ixfx-form-group>
+  <ixfx-button type="submit">Save</ixfx-button>
 </ixfx-form>
 ```
 
+```js
+form.addEventListener('submit', (e) => {
+  console.log(form.getValues({ typed: true }));
+});
+```
+
 ### Properties / attributes
 
-`ixfx-form` has no attributes — it is a pure layout and data-binding container.
+| Attribute / Property | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `label-align` / `labelAlign` | `'left' \| 'right'` | `'right'` | Label justification in the wide layout. Applies to all groups unless a group overrides it |
+| `novalidate` / `noValidate` | boolean | `false` | Skip validation on submit, like `<form novalidate>`. `reportValidity()` still validates |
+
+### Methods and properties
+
+| Member | Returns | Description |
+|--------|---------|-------------|
+| `getValues(options?)` | `Record<string, unknown>` | Collects values from all named controls. Checkboxes give booleans; all other values are strings, including `type=number`. With `{ typed: true }`, `number` and `range` inputs give numbers (`null` when empty) |
+| `setValues(data)` | `void` | Applies values to named inputs. Keys absent from `data` are left untouched. |
+| `requestSubmit()` | `void` | Validates (unless `novalidate`), then fires `submit` |
+| `checkValidity()` | `boolean` | True if every native control is valid |
+| `reportValidity()` | `boolean` | As `checkValidity()`, and shows the browser's message on the first invalid control |
+| `reset()` | `void` | Resets native controls |
+| `form` | `HTMLFormElement` | The native form holding the content |
+| `elements` | `HTMLFormControlsCollection` | The native form's controls |
+
+### Submitting
+
+- `submit` is the standard event: it bubbles, and carries no navigation (`ixfx-form` always cancels the default action, because there is no `action`).
+- Submit with a native `<button type="submit">`, `<ixfx-button type="submit">`, `requestSubmit()`, or Enter in a text field.
+- Validation uses the browser's: `required`, `pattern`, `min`, `max`, `type=email` and so on.
+
+### What is and isn't a native control
+
+Native `<input>`, `<select>` and `<textarea>` take part in validation, `FormData`, `elements` and `reset()`. Components with their own shadow root (ranges, colour pickers and so on) do not: the browser can't see inside them. `getValues()` and `setValues()` still handle them through their `.value`, but validation and `reset()` skip them.
+
+Don't nest an `ixfx-form` inside another `<form>`: nested forms are invalid HTML.
+
+### Styling inside a shadow root
+
+The form components are light DOM, so a global stylesheet can't reach them inside another component's shadow root. They add their own layout styles to the document, or to the shadow root they are in, when they connect. Consumers need no workaround. The styles are placed first, so your own CSS wins ties. The package also exports `@ixfx/components/style.css` for the global theme variables.
+
+### Value collection rules
+
+- Native `<input type=radio>` sharing a `name` → value of the checked one
+- Native/checked-bearing checkbox → boolean
+- `<select multiple>` → array of selected values
+- Everything else with a `.value` property → used as-is
+
+---------------------|------|---------|-------------|
+| `label-align` / `labelAlign` | `'left' \| 'right'` | `'right'` | Label justification in the wide layout. Applies to all groups unless a group overrides it |
 
 ### Methods
 
@@ -62,6 +111,7 @@ A section within the form, backed by a `<fieldset>`/`<legend>` for proper access
 | Attribute / Property | Type   | Default | Description |
 |---------------------|--------|---------|-------------|
 | `label`            | string | `''`    | Section heading text |
+| `label-align` / `labelAlign` | `'left' \| 'right'` | inherited | Overrides the form's label justification for this group |
 
 ---
 
@@ -89,16 +139,59 @@ An `id` is generated for the control if it doesn't already have one.
 
 ---
 
+## `ixfx-form-row`
+
+Lets two or more `ixfx-form-part` elements share a row. Must be a direct child of `ixfx-form-group`.
+
+```html
+<ixfx-form-group label="Address">
+  <ixfx-form-part label="Street"><input name="street" /></ixfx-form-part>
+  <ixfx-form-row>
+    <ixfx-form-part label="City"><input name="city" /></ixfx-form-part>
+    <ixfx-form-part label="Postcode"><input name="postcode" /></ixfx-form-part>
+  </ixfx-form-row>
+</ixfx-form-group>
+```
+
+The group counts the pairs in its widest row (`--ixfx-form-pairs`) and builds a grid of `label | input` columns that many times. Full-width parts span their input across the remaining columns, and all rows (including separate shared-row blocks) line up via subgrid.
+
+- **Wide:** `label1 input1 label2 input2`
+- **Narrow:** labels on one line, inputs below, one column per pair
+
+---
+
+## `ixfx-form-options`
+
+Groups option parts (typically radio buttons sharing a `name`) under one label. Must be a direct child of `ixfx-form-group`.
+
+```html
+<ixfx-form-options label="Contact method">
+  <ixfx-form-part label="Email"><input type="radio" name="contact" value="email" /></ixfx-form-part>
+  <ixfx-form-part label="Phone"><input type="radio" name="contact" value="phone" /></ixfx-form-part>
+</ixfx-form-options>
+```
+
+| Attribute / Property | Type | Default | Description |
+|---------------------|------|---------|-------------|
+| `label` | string | `''` | Group label, shown in the label column (wide) or above the options (narrow) |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Horizontal: each option is the control with its label centred beneath, flowing and wrapping as space runs out. Vertical: control then label, one option per line |
+
+Gap between horizontal options: `--ixfx-form-option-gap` (default `var(--space-l)`). The element has `role="group"` labelled by its `label`.
+
+---
+
 ## Responsive behaviour
 
 The layout switches between two modes based on available width (via CSS container queries):
 
 **Narrow (< 30rem):** Label appears above the input, single-column stacked layout.
 
-**Wide (≥ 30rem):** Label appears to the left of the input, two-column grid. All labels in a group share the width of the widest label (right-justified).
+**Wide (≥ 30rem):** Label appears to the left of the input, two-column grid. All labels in a group share the width of the widest label (right-justified by default; set `label-align="left"` on the form or a group to left-justify).
 
 Resize the container to see the transition.
 
+In the wide layout the gap between a label and its input is `--ixfx-form-label-gap` (default `var(--space-s)`), and the gap between pairs in a shared row is `--ixfx-form-pair-gap` (default `var(--space-l)`).
+
 ---
 
 ## TypeScript types

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.14.6",
-  "generated": "2026-10-16T18:49:43.481Z",
+  "version": "0.15.0",
+  "generated": "2026-10-18T17:51:43.273Z",
   "components": [
     {
       "name": "ac-text",

package/docs-user/tabs.md

@@ -298,6 +298,36 @@ Example — thick text underline instead of a border indicator:
 </ixfx-tab-list>
 ```
 
+### Sliding indicator and view transitions
+
+Each selected item draws an indicator bar (the item's `::after`). It sits on the bottom edge (top with `flip`; right/left for vertical orientations). It and its animation are **off by default** and are controlled with CSS variables, set on `ixfx-tab-list` (or any ancestor):
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--ixfx-tab-indicator-thickness` | `0px` | Indicator thickness. `0px` turns the indicator off |
+| `--ixfx-tab-indicator-colour` | `var(--accent)` | Indicator colour |
+| `--ixfx-tab-indicator-radius` | `0px` | Corner radius |
+| `--ixfx-tab-indicator-inset` | `0px` | Inset from both ends of the tab edge |
+| `--ixfx-tab-indicator-offset` | `0px` | Distance from the tab edge (negative values move it outside) |
+| `--ixfx-tab-transition-duration` | *(unset)* | Animate selection changes with the View Transitions API. Unset or `0ms` turns animation off |
+| `--ixfx-tab-transition-easing` | `cubic-bezier(0.3333, 0, 0.6667, 1)` | Easing for the indicator's movement. The default is a smoothstep curve (3t² − 2t³) |
+
+```html
+<ixfx-tab-list style="
+  --ixfx-selected-tab-border-width: 0;
+  --ixfx-tab-indicator-thickness: 3px;
+  --ixfx-tab-transition-duration: 250ms;
+">
+```
+
+Notes:
+
+- The indicator is drawn in addition to the existing border indicator; set `--ixfx-selected-tab-border-width: 0` to use only the sliding one.
+- Animation applies to user-initiated changes (click, arrow keys). The click selection and the `change` event run inside the same transition, so a panel swapped in a `change` listener animates with the header (a page-wide cross-fade). Programmatic `selectElement()` stays synchronous and instant.
+- Under a view transition the browser applies the `selected` change on the next frame rather than synchronously, so code reading `getSelectedElement()` immediately after a click may see the previous tab; listen for `change` instead.
+- Browsers without `document.startViewTransition`, and users with `prefers-reduced-motion: reduce`, get an instant change.
+- While a transition runs the page is rendered from snapshots, so it is not interactive for the duration. Keep it short.
+
 ### CSS parts
 
 | Part       | Description              |

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.14.6",
+  "version": "0.15.0",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",
   "license": "MIT",
   "keywords": ["web-components", "lit", "ixfx", "ui"],
   "exports": {
+    "./style.css": "./dist/style.css",
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"

package/dist/form-CsXJX15p.js

@@ -1,62 +0,0 @@
-import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { LitElement } from "lit";
-//#region src/form/form-values.ts
-function collectFormValues(root) {
-	const values = {};
-	root.querySelectorAll(`[name]`).forEach((el) => {
-		const name = el.getAttribute(`name`);
-		if (!name) return;
-		if (el instanceof HTMLInputElement) {
-			if (el.type === `radio`) {
-				if (el.checked) values[name] = el.value;
-			} else if (el.type === `checkbox`) values[name] = el.checked;
-			else values[name] = el.value;
-		} else if (el instanceof HTMLSelectElement) {
-			if (el.multiple) values[name] = Array.from(el.selectedOptions).map((opt) => opt.value);
-			else values[name] = el.value;
-		} else if (el instanceof HTMLTextAreaElement) values[name] = el.value;
-		else if (`value` in el) values[name] = el.value;
-	});
-	return values;
-}
-function applyFormValues(root, data) {
-	root.querySelectorAll(`[name]`).forEach((el) => {
-		const name = el.getAttribute(`name`);
-		if (!name || !(name in data)) return;
-		const value = data[name];
-		if (el instanceof HTMLInputElement) {
-			if (el.type === `radio`) el.checked = el.value === value;
-			else if (el.type === `checkbox`) el.checked = Boolean(value);
-			else el.value = String(value ?? ``);
-			el.dispatchEvent(new Event(`input`, { bubbles: true }));
-			el.dispatchEvent(new Event(`change`, { bubbles: true }));
-		} else if (el instanceof HTMLSelectElement) {
-			if (el.multiple && Array.isArray(value)) Array.from(el.options).forEach((opt) => {
-				opt.selected = value.includes(opt.value);
-			});
-			else el.value = String(value ?? ``);
-			el.dispatchEvent(new Event(`input`, { bubbles: true }));
-			el.dispatchEvent(new Event(`change`, { bubbles: true }));
-		} else if (el instanceof HTMLTextAreaElement) {
-			el.value = String(value ?? ``);
-			el.dispatchEvent(new Event(`input`, { bubbles: true }));
-			el.dispatchEvent(new Event(`change`, { bubbles: true }));
-		} else if (`value` in el) el.value = value;
-	});
-}
-//#endregion
-//#region src/form/form.ts
-let FormElement = class FormElement extends LitElement {
-	createRenderRoot() {
-		return this;
-	}
-	getValues() {
-		return collectFormValues(this);
-	}
-	setValues(data) {
-		applyFormValues(this, data);
-	}
-};
-FormElement = __decorate([safeCustomElement(`ixfx-form`)], FormElement);
-//#endregion
-export { FormElement as t };