@fusion.dev/helix-headless 0.179.0 → 0.180.0

package/dist/command/root/command-root.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, drawStatus, HelixElement, HelixSelectEvent, MixinControllerOpen, matchesChord, StatusController, words, } from '@fusion.dev/helix-core';
+import { auditChildren, customElement, drawStatus, HelixElement, HelixSelectEvent, MixinControllerOpen, matchesChord, StatusController, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
-import { optionsAmong } from '../../option/root/option-root.js';
+import { optionsAmong } from '../../option/among.js';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
 const says = (element, state) => {
@@ -145,6 +145,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
     }
     connectedCallback() {
         super.connectedCallback();
+        auditChildren(this, 'option', 'option', 'the palette lists no commands');
         this.addEventListener('helix-select', this.swallowOptionSelect);
         this.addEventListener('keydown', this.handleAlternate, { capture: true });
         this.addEventListener('keydown', this.handleBack);

package/dist/data-table/root/data-table-root.d.ts

@@ -1,6 +1,6 @@
 import { type DataRow, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import { type HelixHeadlessTableColumn } from '../../table/column/table-column.js';
+import type { HelixHeadlessTableColumn } from '../../table/column/table-column.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
 declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
@@ -131,6 +131,18 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * Written on `DataTable`, `columns` has no effect, so watch for it when you
  * move a table from `Table` to `DataTable`.
  *
+ * **The columns are an import of their own.** A column is the Table family's
+ * `TableColumn`, which the data table does not register, so a page that writes
+ * one imports the Table entry beside the data table:
+ *
+ * ```js
+ * import '@fusion.dev/helix/data-table'
+ * import '@fusion.dev/helix/table'
+ * ```
+ *
+ * In development, a data table holding a column nobody registered says so once
+ * the page has loaded, with the line to add.
+ *
  * @since 0.1.0
  * @status stable
  * @category data

package/dist/data-table/root/data-table-root.js

@@ -5,14 +5,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { anchorAt, arranged, auditServed, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, format, formatWords, gridMove, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, handedLocale, hostAria, inlineStep, inRowOrder, MixinCollection, markRegion, onAndroid, ordered, pageRows, parse, placeKey, ReorderController, rangeAdd, reportRuntime, requestChange, requestReorder, scrollingAncestor, scrollRoom, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, window_, words, wordsLocale, writtenList, } from '@fusion.dev/helix-core';
+import { anchorAt, arranged, auditChildren, auditServed, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, format, formatWords, gridMove, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, handedLocale, hostAria, inlineStep, inRowOrder, MixinCollection, markRegion, onAndroid, ordered, pageRows, parse, placeKey, ReorderController, rangeAdd, reportRuntime, requestChange, requestReorder, scrollingAncestor, scrollRoom, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, whenHydrated, window_, words, wordsLocale, writtenList, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight, dotsSixVertical } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
-import { edgeOf } from '../../table/column/table-column.js';
+import { edgeOf } from '../../table/edge.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
 import { toggledOpen } from '../keys.js';
@@ -1021,19 +1021,21 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         const shown = this.shownColumns;
         const android = onAndroid();
         for (const column of this.tableColumns) {
-            column.movable = this.reorderable && column.field !== '';
-            column.gridCell = true;
-            column.tabStop = shown.indexOf(column) + offset === stop;
-            column.sorted =
-                current && column.canSort && column.field === current.field
-                    ? current.direction === 'asc'
-                        ? 'ascending'
-                        : 'descending'
-                    : undefined;
-            column.sortWords =
-                android && column.sorted
-                    ? this.sortSaid(column.textContent?.trim() || column.field, column.sorted)
-                    : '';
+            whenHydrated(column, () => {
+                column.movable = this.reorderable && column.field !== '';
+                column.gridCell = true;
+                column.tabStop = shown.indexOf(column) + offset === stop;
+                column.sorted =
+                    current && column.canSort && column.field === current.field
+                        ? current.direction === 'asc'
+                            ? 'ascending'
+                            : 'descending'
+                        : undefined;
+                column.sortWords =
+                    android && column.sorted
+                        ? this.sortSaid(column.textContent?.trim() || column.field, column.sorted)
+                        : '';
+            });
         }
     }
     renderCell(column, row, picked, place, stop, header, id) {
@@ -1276,6 +1278,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     connectedCallback() {
         super.connectedCallback();
+        auditChildren(this, 'table-column', 'table', 'the table draws no columns');
         this.addEventListener('click', this.handleHeadClick);
         this.addEventListener('click', this.handleRowClick);
         this.addEventListener('pointerdown', this.notePress, true);

package/dist/date-input/root/date-input-root.d.ts

@@ -33,6 +33,8 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * digits or the arrow keys. Alt+Down opens the calendar from a segment. A
  * `range` is two rows with a dash between them, the start and the end, as
  * React Aria's DateRangePicker draws them, and `multiple` keeps the text.
+ * A range whose end is before its start reports `rangeUnderflow`, as Date
+ * Picker does, with `range-order-message`.
  *
  * Text that is not a date gives the form an empty value, as a native date
  * field does, and `value` keeps the text so it can be corrected.
@@ -359,6 +361,11 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * for the page's language, then the English.
      */
     rangeLengthMessage: string;
+    /**
+     * The message shown when a range ends before it starts. `{start}` is
+     * replaced with the start, written the way the field writes dates.
+     */
+    rangeOrderMessage: string;
     /**
      * The message shown when a date is after `max`. `{max}` is replaced with
      * `max`, written the way the field writes dates.

package/dist/date-input/root/date-input-root.js

@@ -47,6 +47,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         this.previousYearLabel = 'Previous year';
         this.previousYearsLabel = 'Earlier years';
         this.rangeLengthMessage = 'A range is two dates.';
+        this.rangeOrderMessage = 'Choose an end on or after {start}.';
         this.rangeOverflowMessage = 'Choose a date on or before {max}.';
         this.rangeUnderflowMessage = 'Choose a date on or after {min}.';
         this.removeLabel = 'Remove {name}';
@@ -263,6 +264,13 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         if (this.mode === 'range' && held.length > 2) {
             return this.rangeLengthMessage;
         }
+        const [start, end] = held;
+        if (this.mode === 'range' && start !== undefined && end !== undefined && end < start) {
+            return [
+                'rangeUnderflow',
+                formatWords(this, 'rangeOrderMessage', { start: this.written(start) }),
+            ];
+        }
         return '';
     }
     renderPicker() {
@@ -547,6 +555,10 @@ __decorate([
     words,
     property({ attribute: 'range-length-message' })
 ], HelixHeadlessDateInput.prototype, "rangeLengthMessage", void 0);
+__decorate([
+    words,
+    property({ attribute: 'range-order-message' })
+], HelixHeadlessDateInput.prototype, "rangeOrderMessage", void 0);
 __decorate([
     words,
     property({ attribute: 'range-overflow-message' })

package/dist/date-picker/root/date-picker-root.d.ts

@@ -48,7 +48,8 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * when Previous or Next is pressed. Neither moves past `min` or `max`, and the
  * keys stop at them too. A value outside the bounds, on a barred day, or off
  * `step` reports `rangeUnderflow`, `rangeOverflow`, `badInput` or
- * `stepMismatch`, so a form does not submit it.
+ * `stepMismatch`, so a form does not submit it. A range set from a script
+ * whose end is before its start reports `rangeUnderflow` as well.
  *
  * @since 0.1.0
  * @status stable
@@ -278,6 +279,11 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * Accessible name for the control that moves back a page, in the years.
      */
     previousYearsLabel: string;
+    /**
+     * The validation message for a range that ends before it starts. `{start}`
+     * is replaced with the start, written as a date in `locale`.
+     */
+    rangeOrderMessage: string;
     /**
      * The validation message for a date after `max`. `{max}` is replaced with
      * `max`, written as a date in `locale`.

package/dist/date-picker/root/date-picker-root.js

@@ -44,6 +44,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         this.previousLabel = 'Previous month';
         this.previousYearLabel = 'Previous year';
         this.previousYearsLabel = 'Earlier years';
+        this.rangeOrderMessage = 'Choose an end on or after {start}.';
         this.rangeOverflowMessage = 'Choose a date on or before {max}.';
         this.focused = '';
         this.choosing = false;
@@ -504,6 +505,13 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 return [{ [fault[0]]: true }, fault[1]];
             }
         }
+        const [start, end] = held;
+        if (this.mode === 'range' && start !== undefined && end !== undefined && end < start) {
+            return [
+                { rangeUnderflow: true },
+                formatWords(this, 'rangeOrderMessage', { start: this.spoken(start) }),
+            ];
+        }
         return undefined;
     }
     get failure() {
@@ -855,6 +863,10 @@ __decorate([
     words,
     property({ attribute: 'previous-years-label' })
 ], HelixHeadlessDatePicker.prototype, "previousYearsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'range-order-message' })
+], HelixHeadlessDatePicker.prototype, "rangeOrderMessage", void 0);
 __decorate([
     words,
     property({ attribute: 'range-overflow-message' })

package/dist/drilldown/root/drilldown-root.js

@@ -158,8 +158,17 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
     willUpdate(changed) {
         super.willUpdate(changed);
         if (changed.has('page') && (this.drilldown.page?.value ?? '') !== this.page) {
+            const leaving = this.drilldown.page;
+            const focused = this.contains(document.activeElement);
             this.showPage(this.page);
             this.page = this.drilldown.page?.value ?? '';
+            if (focused) {
+                this.updateComplete.then(() => {
+                    const items = this.items;
+                    const to = leaving && items.includes(leaving) ? leaving : items[0];
+                    to?.focusItem();
+                });
+            }
         }
         hostAria(this.internals, {
             label: this.navigation ? this.label : '',

package/dist/filter-input/root/filter-input-root.d.ts

@@ -128,6 +128,19 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  *   filter goes. Set `chips` and the field adds, updates, and removes those
  *   chips itself, from every `helix-facet` you do not cancel.
  *
+ * **The suggestions you write are an import of their own.** A suggestion is an
+ * option, the Option family's, which the field does not register, so a page
+ * that slots one imports it beside the field:
+ *
+ * ```js
+ * import '@fusion.dev/helix/filter-input'
+ * import '@fusion.dev/helix/option'
+ * ```
+ *
+ * In development, a field holding an option nobody registered says so once the
+ * page has loaded, with the line to add. The options `source` gives are drawn
+ * as this Option too, and need the same import.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms

package/dist/filter-input/root/filter-input-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, countLabel, customElement, DelayController, drawIcon, drawStatus, formatWords, HelixFacetEvent, HelixFormElement, holdCaret, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportRuntime, restoreValue, StatusController, scrollItemIntoView, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditChildren, countLabel, customElement, DelayController, drawIcon, drawStatus, formatWords, HelixFacetEvent, HelixFormElement, holdCaret, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportRuntime, restoreValue, StatusController, scrollItemIntoView, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -552,6 +552,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
     }
     connectedCallback() {
         super.connectedCallback();
+        auditChildren(this, 'option', 'option', 'the field suggests nothing');
         this.addEventListener('helix-dismiss', this.handleDismiss, { capture: true });
         this.addEventListener(HelixFacetEvent.eventName, this.handleFacet);
         this.addEventListener('helix-select', this.handleSourcedSelect);

package/dist/listbox/root/listbox-root.d.ts

@@ -1,6 +1,6 @@
 import { AriaForwardController, type DataOptionItem, DisabledCascadeController, HelixFormElement, UpgradeController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
-import { HelixHeadlessOption } from '../../option/root/option-root.js';
+import type { HelixHeadlessOption } from '../../option/root/option-root.js';
 declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A list of options, from which you choose one or several.
@@ -76,6 +76,19 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  *   filter narrows the list, under `layout="grid"`, or while the list is
  *   disabled.
  *
+ * **The options are an import of their own.** An option you write is the Option
+ * family's, which the list does not register, so a page that writes one imports
+ * it beside the list:
+ *
+ * ```js
+ * import '@fusion.dev/helix/listbox'
+ * import '@fusion.dev/helix/option'
+ * ```
+ *
+ * In development, a list holding an option nobody registered says so once the
+ * page has loaded, with the line to add. The options `items` draws are this
+ * Option too, and need the same import.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -218,7 +231,8 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      *
      * **The list needs a height to scroll in**: the styled tier's
      * `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-     * headless tier. Import the Option family as well, whose elements are drawn.
+     * headless tier. The options drawn are this tier's Option, which the page
+     * imports, as it imports the options it writes.
      * A server sends the list empty, and the options are drawn once it hydrates.
      */
     items: readonly DataOptionItem[] | undefined;

package/dist/listbox/root/listbox-root.js

@@ -4,12 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, filterKeeps, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditChildren, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, filterKeeps, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { magnifyingGlass } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-import { HelixHeadlessOption } from '../../option/root/option-root.js';
+import { isOption } from '../../option/among.js';
 const FIELD_MOVES = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
 const MOVES = new Set([...FIELD_MOVES, 'End', 'Home']);
 const PAGE = 10;
@@ -306,7 +306,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         return this.multiple ? 'select-multiple' : 'select-one';
     }
     get options() {
-        return this.among((node) => node instanceof HelixHeadlessOption, this.children);
+        return this.among(isOption, this.children);
     }
     among(is, nodes) {
         const found = [];
@@ -421,7 +421,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             option.selected = chosen.has(option.value);
         }
         for (const group of this.groups) {
-            const inside = this.among((node) => node instanceof HelixHeadlessOption, group.children);
+            const inside = this.among(isOption, group.children);
             group.hidden = inside.length > 0 && inside.every((option) => option.hidden);
         }
         for (const rule of this.among((node) => node.localName.endsWith('-option-separator'), this.children)) {
@@ -479,6 +479,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         this.addEventListener('helix-select', this.handleSelection);
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('click', this.handleClick, true);
+        auditChildren(this, 'option', 'option', 'the list offers no choices');
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -500,6 +501,9 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         if (this.childrenKnown) {
             this.seedDeclared();
         }
+        if (changed.has('items') && this.items) {
+            auditChildren(this, 'option', 'option', 'the items draw no choices', true);
+        }
         if (this.childrenKnown) {
             this.place();
             this.tell(changed);

package/dist/meter/root/meter-root.js

@@ -83,8 +83,7 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         this.internals.ariaValueMin = String(min);
         this.internals.ariaValueMax = String(max);
         this.internals.ariaValueNow = String(this.reading);
-        this.internals.ariaValueText =
-            this.valueText || this.formatOptions !== undefined || this.beyond ? this.text : null;
+        this.internals.ariaValueText = this.text;
         const band = this.computedBand;
         const beyond = this.beyond;
         this.toggleState('fair', band === 'fair');

package/dist/notifications/notification/notification.js

@@ -31,8 +31,14 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
             event.stopPropagation();
             if (this.dismiss()) {
                 const next = deepContains(this, deepActiveElement()) ? this.neighbor() : null;
+                const holder = this.parentElement;
                 this.remove();
                 next?.focus();
+                if (next && next.getRootNode().activeElement !== next) {
+                    void Promise.resolve()
+                        .then(() => holder?.updateComplete)
+                        .then(() => next.focus());
+                }
             }
         };
     }
@@ -154,7 +160,14 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
             ? feed.items
             : [...(this.parentElement?.children ?? [])].filter((one) => 'isNotification' in one);
         const at = rows.indexOf(this);
-        const order = [...rows.slice(at + 1), ...rows.slice(0, Math.max(at, 0)).reverse()];
+        const group = this.parentElement;
+        const promoted = group && 'isNotificationGroup' in group && this.assignedSlot !== null
+            ? [...group.children].find((one) => one !== this && 'isNotification' in one)
+            : undefined;
+        const drawn = (row) => !('isNotificationGroup' in (row.parentElement ?? {})) ||
+            row.assignedSlot !== null ||
+            row === promoted;
+        const order = [...rows.slice(at + 1), ...rows.slice(0, Math.max(at, 0)).reverse()].filter(drawn);
         for (const row of order) {
             const target = row.shadowRoot?.querySelector('[part="item"]');
             if (target) {

package/dist/option/among.d.ts

@@ -0,0 +1,23 @@
+import type { HelixHeadlessOption } from './root/option-root.js';
+/**
+ * Whether an element is an option, by its shape.
+ *
+ * **Not by `instanceof`.** A tag is defined once, by whichever copy of this
+ * class registered it first, and a second copy in the same document tests
+ * against a class no element on the page has: every option failed it, and a
+ * select said "Choose" over its value. Two copies are a consumer with a
+ * duplicated dependency, or the browser specs, where each family's bundle
+ * carries its own and they share one page. An option nobody registered has no
+ * such shape, and is no option until its entry is imported.
+ */
+export declare const isOption: (element: Element) => element is HelixHeadlessOption;
+/**
+ * The options among some elements, reaching one level into a group.
+ *
+ * What a control holding options reads its words from, off its own children
+ * rather than off the listbox they are slotted into: the slot exists only once a
+ * render has made it, so the listbox has none on a first render, and on a page a
+ * server rendered the `slotchange` that would correct it fires before anything
+ * listens.
+ */
+export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadlessOption[];

package/dist/option/among.js

@@ -0,0 +1,2 @@
+export const isOption = (element) => 'text' in element && 'value' in element && 'selected' in element;
+export const optionsAmong = (elements) => elements.flatMap((element) => isOption(element) ? [element] : [...element.children].filter(isOption));

package/dist/option/root/option-root.d.ts

@@ -1,22 +1,6 @@
 import { HelixElement, type LinkModifiers } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-/**
- * The options among some elements, reaching one level into a group.
- *
- * What a control holding options reads its words from, off its own children
- * rather than off the listbox they are slotted into: the slot exists only once a
- * render has made it, so the listbox has none on a first render, and on a page a
- * server rendered the `slotchange` that would correct it fires before anything
- * listens.
- *
- * **An option by its shape, not by `instanceof`.** A tag is defined once, by
- * whichever copy of this class registered it first, and a second copy in the
- * same document tests against a class no element on the page has: every option
- * failed it, and a select said "Choose" over its value. Two copies are a
- * consumer with a duplicated dependency, or the browser specs, where each
- * family's bundle carries its own and they share one page.
- */
-export declare const optionsAmong: (elements: readonly Element[]) => HelixHeadlessOption[];
+export { isOption, optionsAmong } from '../among.js';
 /**
  * @summary One choice in a listbox.
  *

package/dist/option/root/option-root.js

@@ -7,10 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, followLink, HelixElement, HelixSelectEvent, hostAria, slotFilled, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-export const optionsAmong = (elements) => {
-    const isOption = (element) => 'text' in element && 'value' in element && 'selected' in element;
-    return elements.flatMap((element) => isOption(element) ? [element] : [...element.children].filter(isOption));
-};
+export { isOption, optionsAmong } from '../among.js';
 let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
     constructor() {
         super(...arguments);

package/dist/scatter-chart/root/scatter-chart-root.d.ts

@@ -62,9 +62,10 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  *
  * The plot runs left to right in every text direction, as a number line does.
  * The plot, its axes, and the axis names sit in a `plane` part with
- * `dir="ltr"`. The axis names carry `dir="auto"`, so a name in Arabic or Hebrew
- * reads in its own direction. The summary and the tooltip bubble follow the
- * page's direction.
+ * `dir="ltr"`, and the arrow keys follow the drawing: Right moves to the next
+ * point on a right-to-left page too. The axis names carry `dir="auto"`, so a
+ * name in Arabic or Hebrew reads in its own direction. The summary and the
+ * tooltip bubble follow the page's direction.
  *
  * **A tap shows the reading under it**, and keeps it until a tap lands
  * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
@@ -86,7 +87,7 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  * | Key | What it does |
  * |---|---|
  * | Tab | Moves focus to the plot and shows the first reading. |
- * | Right, Left | Moves to the next or the previous point, left to right across the plot. On a right-to-left page, Left moves to the next. |
+ * | Right, Left | Moves to the next or the previous point, left to right across the plot, on a right-to-left page too. |
  * | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. |
  * | Home, End | Moves to the first or the last point. |
  * | Page Down, Page Up | Moves a tenth of the points on or back. |

package/dist/scatter-chart/root/scatter-chart-root.js

@@ -76,6 +76,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     connectedCallback() {
         super.connectedCallback();
         this.pointer.axis = 'none';
+        this.pointer.drawnLtr = true;
         this.pointer.onReading = (heard, detail) => this.dispatchEvent(heard === 'press'
             ? new HelixReadingPressEvent(detail)
             : new HelixReadingChangeEvent(detail));

package/dist/select/root/select-root.d.ts

@@ -1,8 +1,7 @@
 import { AriaForwardController, type DataOptionItem, HelixFormElement, PopoverController, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import { type HelixHeadlessOption } from '../../option/root/option-root.js';
+import type { HelixHeadlessOption } from '../../option/root/option-root.js';
 import '../../listbox/index.js';
-import '../../option/index.js';
 declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A control that opens a list of options to choose from.
@@ -60,6 +59,18 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * Set `autocomplete` to let a browser's autofill choose, as a native `<select>`
  * with the same attribute would.
  *
+ * **The options are an import of their own.** An option is the Option family's,
+ * which the select does not register, so a page that writes one imports it
+ * beside the select:
+ *
+ * ```js
+ * import '@fusion.dev/helix/select'
+ * import '@fusion.dev/helix/option'
+ * ```
+ *
+ * In development, a select holding an option nobody registered says so once the
+ * page has loaded, with the line to add.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms

package/dist/select/root/select-root.js

@@ -4,15 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, afterLinkFollowed, chosenValues, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, inlineStep, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, auditChildren, chosenValues, customElement, dataOptions, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, inlineStep, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, sideOf, typesCharacter, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
-import { optionsAmong } from '../../option/root/option-root.js';
+import { optionsAmong } from '../../option/among.js';
 import '../../listbox/index.js';
-import '../../option/index.js';
 import { over } from '../align.js';
 let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(MixinControllerValue(MixinField(HelixFormElement))) {
     constructor() {
@@ -210,6 +209,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     connectedCallback() {
         super.connectedCallback();
+        auditChildren(this, 'option', 'option', 'it offers no choices');
         this.addEventListener('helix-select', this.handleLinkFollowed);
         const words = new MutationObserver(() => this.requestUpdate());
         words.observe(this, {

package/dist/table/column/table-column.d.ts

@@ -10,16 +10,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `undefined` falls back to the field.
  */
 export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
-/**
- * The edge a column names, where it names one of the three.
- *
- * **`text-align` is a string anybody can write**, the union on the property being a
- * compile-time claim and nothing else, and both tables put the value straight
- * into CSS: `Table` into a rule in each row's shadow root, `DataTable` into the
- * cell it draws. One guard, here with the property, rather than one in each
- * table and only one of them written.
- */
-export declare const edgeOf: (align: string | undefined) => string | undefined;
+export { edgeOf } from '../edge.js';
 /**
  * @summary One column of a table: its heading, its width, and the field it reads from each row.
  *

package/dist/table/column/table-column.js

@@ -10,8 +10,7 @@ import { dotsSixVertical } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-const EDGES = new Set(['center', 'end', 'start']);
-export const edgeOf = (align) => align && EDGES.has(align) ? align : undefined;
+export { edgeOf } from '../edge.js';
 let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixElement {
     constructor() {
         super(...arguments);

package/dist/table/edge.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The edge a column names, where it names one of the three.
+ *
+ * **`text-align` is a string anybody can write**, the union on the property being a
+ * compile-time claim and nothing else, and both tables put the value straight
+ * into CSS: `Table` into a rule in each row's shadow root, `DataTable` into the
+ * cell it draws. One guard, here with the property, rather than one in each
+ * table and only one of them written.
+ */
+export declare const edgeOf: (align: string | undefined) => string | undefined;

package/dist/table/edge.js

@@ -0,0 +1,2 @@
+const EDGES = new Set(['center', 'end', 'start']);
+export const edgeOf = (align) => align && EDGES.has(align) ? align : undefined;

package/dist/tabs/root/tabs-root.d.ts

@@ -192,6 +192,7 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     private refocus;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     /** Watches the strip's size while `scroll-controls` asks, and reads it. */
     private watchStrip;