@fusion.dev/helix-headless 0.157.0 → 0.158.0

package/dist/command/root/command-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 { customElement, HelixElement, HelixSelectEvent, MixinControllerOpen, matchesChord, words, } from '@fusion.dev/helix-core';
+import { 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';
@@ -61,6 +61,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             }
             this.requestOpen(false);
         };
+        this.status = new StatusController(this);
         this.handleBack = (event) => {
             if (event.key !== 'Backspace' ||
                 this.page === '' ||
@@ -124,7 +125,12 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         this.trail = trail;
         this.page = page;
         this.listbox?.requestFilter('');
-        void this.updateComplete.then(() => this.searchField?.focus());
+        void this.updateComplete.then(() => {
+            this.searchField?.focus();
+            if (this.listName !== '') {
+                this.status.say(this.listName);
+            }
+        });
     }
     get listName() {
         if (this.page === '') {
@@ -210,7 +216,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             }
         }}
     >
-      ${this.renderListbox()}
+      ${this.renderListbox()}${drawStatus(this.status)}
       <!-- Handed on only while something fills it, as the list's slots are,
            so an empty header draws nothing in the dialog. -->
       <slot
@@ -231,6 +237,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         aria-label=${this.listName}
         empty-text=${this.emptyText}
         filter-delay=${this.filterDelay}
+        .filterMatch=${this.filterMatch}
         filter-label=${this.placeholder}
         load-error=${this.loadError}
         loading-text=${this.loadingText}
@@ -277,7 +284,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
     }
     render() {
         if (this.inline) {
-            return html `<slot name="header"></slot>${this.renderListbox()}${this.renderFooter(nothing)}`;
+            return html `<slot name="header"></slot>${this.renderListbox()}${drawStatus(this.status)}${this.renderFooter(nothing)}`;
         }
         return html `${this.renderDialog()}`;
     }
@@ -289,6 +296,9 @@ __decorate([
 __decorate([
     property({ attribute: 'filter-delay', type: Number })
 ], HelixHeadlessCommand.prototype, "filterDelay", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessCommand.prototype, "filterMatch", void 0);
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "hotkey", void 0);

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

@@ -1015,7 +1015,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                     : '';
         }
     }
-    renderCell(column, row, picked, place, stop, header) {
+    renderCell(column, row, picked, place, stop, header, id) {
         const edge = edgeOf(column.textAlign);
         const placed = header && this.childField ? this.tree().placed.get(row) : undefined;
         const style = [
@@ -1027,6 +1027,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         return html `<span
       part="cell${picked ? ' cell-selected' : ''}${header ? ' cell-header' : ''}"
       role=${header ? 'rowheader' : 'gridcell'}
+      id=${id ?? nothing}
       tabindex=${stop ? '0' : '-1'}
       data-column=${place}
       style=${style || nothing}
@@ -1083,10 +1084,12 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
             const stop = (place) => index === stopRow && place === stopColumn;
             const moveKey = grips ? this.moveKeyOf(row) : '';
             const marked = mark?.key === moveKey ? mark.edge : undefined;
+            const header = named ? `row-header-${index}` : undefined;
             return html `<div
           part="row${held?.key === moveKey ? ' row-dragging' : ''}${marked === 'before' ? ' row-drop-before' : ''}${marked === 'after' ? ' row-drop-after' : ''}"
           role="row"
           aria-rowindex=${this.rowIndex(index)}
+          aria-labelledby=${header ?? nothing}
           aria-selected=${chosen ? String(picked) : nothing}
           aria-level=${placed ? placed.level : nothing}
           aria-posinset=${placed ? placed.position : nothing}
@@ -1103,7 +1106,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                   data-column=${this.selectAt}
                   >${this.renderCheckbox(formatWords(this, 'selectRowLabel', { row: this.rowName(row, key) }), picked, false, (event) => this.toggleRow(key, event))}</span
                 >`
-                : nothing}${columns.map((column, place) => this.renderCell(column, row, picked, place + offset, stop(place + offset), column === named))}
+                : nothing}${columns.map((column, place) => this.renderCell(column, row, picked, place + offset, stop(place + offset), column === named, column === named ? header : undefined))}
         </div>`;
         })}`;
     }

package/dist/list/item/list-item.d.ts

@@ -63,6 +63,7 @@ export type ListItemMove = 'dragging' | 'drop-after' | 'drop-before';
  * @cssstate dragging - The row is being moved, in a `reorderable` list.
  * @cssstate drop-after - The row being moved goes after this one when it is dropped.
  * @cssstate drop-before - The row being moved goes before this one when it is dropped.
+ * @cssstate focus-visible - The row's cell has keyboard focus that the browser shows, in a list with `selection-mode`.
  * @cssstate selected - The row is selected, in a list that selects.
  */
 export declare class HelixHeadlessListItem extends HelixElement {
@@ -78,7 +79,9 @@ export declare class HelixHeadlessListItem extends HelixElement {
     current?: ListItemCurrent;
     /**
      * Takes the row out of reach in a list with `selection-mode`: the arrow keys
-     * pass over it and it cannot be selected or acted on.
+     * pass over it and it cannot be selected or acted on. In a list with
+     * `disabled-behavior="selection"`, it cannot be selected and is reached and
+     * acted on as any row is.
      */
     disabled: boolean;
     /**
@@ -121,6 +124,12 @@ export declare class HelixHeadlessListItem extends HelixElement {
      * selected, which keeps `aria-selected` off a list that does not select.
      */
     selected?: boolean | undefined;
+    /**
+     * Whether `disabled` takes the row out of selection alone, written by a list
+     * with `disabled-behavior="selection"`. No attribute: it is coordination
+     * between elements, as `focusable` is.
+     */
+    selectionOnly: boolean;
     /**
      * Where the link opens. Use it for a row that leaves the site.
      */
@@ -137,6 +146,11 @@ export declare class HelixHeadlessListItem extends HelixElement {
     private get described();
     /** Whether a list with `selection-mode` holds this row, which makes it a row of a grid. */
     private get grouped();
+    /**
+     * Says whether the cell shows keyboard focus, as `:focus-visible` does, so a
+     * sheet outside can draw the ring on the row by the host.
+     */
+    private readonly handleCellFocus;
     /** @internal The cell a list with `selection-mode` moves focus to. */
     get cell(): HTMLElement | null;
     /**

package/dist/list/item/list-item.js

@@ -16,8 +16,19 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
         this.disabled = false;
         this.href = '';
         this.rel = '';
+        this.selectionOnly = false;
         this.target = '';
         this.value = '';
+        this.handleCellFocus = (event) => {
+            const cell = event.currentTarget;
+            let shown = false;
+            try {
+                shown = event.type === 'focus' && cell.matches(':focus-visible');
+            }
+            catch {
+            }
+            this.toggleState('focus-visible', shown);
+        };
     }
     get words() {
         return this.childrenKnown ? slottedWords(this, ['']) : '';
@@ -56,7 +67,8 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
         super.willUpdate(changed);
         hostAria(this.internals, { role: this.grouped ? 'row' : 'listitem' });
         this.internals.ariaSelected = this.selected === undefined ? null : String(this.selected);
-        this.internals.ariaDisabled = this.grouped && this.disabled ? 'true' : null;
+        this.internals.ariaDisabled =
+            this.grouped && this.disabled && !this.selectionOnly ? 'true' : null;
         this.internals.ariaCurrent =
             this.current !== undefined && this.href === '' ? this.current : null;
         this.toggleState('selected', this.selected === true);
@@ -91,6 +103,8 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
           tabindex=${tabindex}
           aria-labelledby=${labelledby}
           aria-describedby=${describedby}
+          @focus=${this.handleCellFocus}
+          @blur=${this.handleCellFocus}
         >${content}<slot name="end"></slot>${this.renderGrip()}</div>`
             : html `<div
           part="row${this.current === undefined ? '' : ' row-current'}"
@@ -98,6 +112,8 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
           tabindex=${tabindex}
           aria-labelledby=${labelledby}
           aria-describedby=${describedby}
+          @focus=${this.handleCellFocus}
+          @blur=${this.handleCellFocus}
         ><a
           part="link"
           href=${this.href}
@@ -137,6 +153,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessListItem.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessListItem.prototype, "selectionOnly", void 0);
 __decorate([
     property()
 ], HelixHeadlessListItem.prototype, "target", void 0);

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

@@ -14,7 +14,9 @@ import { type ListSelectionBehavior, type ListSelectionMode } from '../selection
  * `multiple` any number, and `value` holds the selected rows' values,
  * separated by commas. A change asks with `helix-before-change` and tells
  * with `change`. `none` selects nothing, so a press acts on the row. A
- * `disabled` row is passed over. Each row is named by its label and described
+ * `disabled` row is passed over. With `disabled-behavior="selection"`, a
+ * `disabled` row cannot be selected, and is reached and acted on as any row
+ * is, as React Aria's GridList has it. Each row is named by its label and described
  * by its description, so the words of the controls in `end` are not read as
  * part of its name.
  *
@@ -125,6 +127,15 @@ export declare class HelixHeadlessList extends HelixElement {
      * refused, in a `reorderable` list.
      */
     canceledLabel: string;
+    /**
+     * What `disabled` takes from a row, in a list that selects: `all`, which
+     * passes over the row, or `selection`, which keeps the row out of the
+     * selection and lets the keys reach it and Enter or a press act on it, as
+     * React Aria's GridList takes `disabledBehavior`.
+     *
+     * Absent is `all`.
+     */
+    disabledBehavior?: 'all' | 'selection' | undefined;
     /** What screen readers hear when a row is dropped, in a `reorderable` list. */
     droppedLabel: string;
     /**
@@ -203,6 +214,10 @@ export declare class HelixHeadlessList extends HelixElement {
      * lets the arrow keys carry the selection.
      */
     selectionBehavior: ListSelectionBehavior;
+    /** Whether the row is out of reach of the keys and of actions, past selection. */
+    private blocked;
+    /** The rows a key can land on that can also be selected. */
+    private get selectable();
     /**
      * Makes the list interactive: `single` selects one row, `multiple` any
      * number, and `none` moves and acts without selecting. Unset is a list a
@@ -235,6 +250,8 @@ export declare class HelixHeadlessList extends HelixElement {
     value: string;
     /** The row the reader was last on, which keeps the tab stop. */
     private last;
+    /** The rows in order on the last `sync`, so a removed row's place is known. */
+    private placed;
     /** The value of the row a Shift range runs from: the last row pressed. */
     private anchor;
     /**
@@ -295,6 +312,17 @@ export declare class HelixHeadlessList extends HelixElement {
      * row a server rendered draws its served markup first.
      */
     private sync;
+    /**
+     * Moves the tab stop off a row the page removed, to the next row a key can
+     * reach or, at the end, the one before it, and moves focus there where
+     * removing the row dropped it to the body.
+     *
+     * **Focus went to the body**, and the arrow keys did nothing until the
+     * reader tabbed back into the list. React Aria's GridList moves focus to a
+     * neighbor the same way. Focus anywhere but the body is where you put it,
+     * and is left there.
+     */
+    private followRemoved;
     /** The row a press or a key came from, read off the event's path. */
     private rowOf;
     /**

package/dist/list/root/list-root.js

@@ -27,6 +27,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         this.reversed = false;
         this.selectionBehavior = 'toggle';
         this.value = '';
+        this.placed = [];
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.reachable.map((row) => this.navigable(row)),
             origin: 'focus',
@@ -67,12 +68,12 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         };
         this.handleKeydown = (event) => {
             const row = this.interactive ? this.rowOf(event) : undefined;
-            if (row && !row.disabled && !event.altKey && /^Page(Down|Up)$/.test(event.key)) {
+            if (row && !this.blocked(row) && !event.altKey && /^Page(Down|Up)$/.test(event.key)) {
                 event.preventDefault();
                 this.page(row, event.key === 'PageDown' ? 1 : -1);
             }
             this.moving = undefined;
-            if (!row || row.disabled || event.altKey) {
+            if (!row || this.blocked(row) || event.altKey) {
                 return;
             }
             const toggle = event.ctrlKey || event.metaKey;
@@ -85,7 +86,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             }
             if (selectsAll(event) && this.selectionMode === 'multiple') {
                 event.preventDefault();
-                const every = this.reachable.map((one) => this.valueFor(one)).join(',');
+                const every = this.selectable.map((one) => this.valueFor(one)).join(',');
                 this.choose(every === this.value ? null : every);
             }
             else if (event.key === 'Escape' && this.value !== '' && this.selectionMode !== 'none') {
@@ -111,7 +112,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             if (pressedOwnControl(event, cell && event.composedPath().includes(cell) ? cell : row)) {
                 return;
             }
-            if (this.selectionMode === 'none') {
+            if (this.selectionMode === 'none' || row.disabled) {
                 this.act(row);
             }
             else {
@@ -139,6 +140,12 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         };
     }
     static { this.words = 'helix-list'; }
+    blocked(row) {
+        return row.disabled && this.disabledBehavior !== 'selection';
+    }
+    get selectable() {
+        return this.reachable.filter((row) => !row.disabled);
+    }
     get interactive() {
         return this.selectionMode !== undefined;
     }
@@ -146,11 +153,11 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         return this.knownChildren.filter((child) => child instanceof HelixHeadlessListItem);
     }
     get reachable() {
-        return this.interactive ? this.rows.filter((row) => !row.disabled) : [];
+        return this.interactive ? this.rows.filter((row) => !this.blocked(row)) : [];
     }
     navigable(row) {
         return focusItemOf(row, {
-            disabled: row.disabled,
+            disabled: this.blocked(row),
             focus: () => row.focusItem(),
             words: row.words,
         });
@@ -210,20 +217,41 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         const mode = this.selectionMode;
         const chosen = new Set(commaList(this.value));
         const rows = this.rows;
+        if (mode) {
+            this.followRemoved(rows);
+        }
+        this.placed = rows;
         const holder = mode
             ? rovingStop(rows, this.last, {
-                disabled: (row) => row.disabled,
+                disabled: (row) => this.blocked(row),
                 selected: (row) => chosen.has(this.valueFor(row)),
             })
             : undefined;
         for (const row of rows) {
             whenHydrated(row, () => {
                 row.focusable = mode ? row === holder : undefined;
+                row.selectionOnly = this.disabledBehavior === 'selection';
                 row.selected =
                     mode === undefined || mode === 'none' ? undefined : chosen.has(this.valueFor(row));
             });
         }
     }
+    followRemoved(rows) {
+        const last = this.last;
+        const at = last ? this.placed.indexOf(last) : -1;
+        if (!last || at < 0 || rows.includes(last)) {
+            return;
+        }
+        const present = new Set(rows);
+        const reachable = (row) => present.has(row) && !this.blocked(row);
+        const next = this.placed.slice(at + 1).find(reachable) ??
+            this.placed.slice(0, at).reverse().find(reachable);
+        this.last = next;
+        const active = deepActiveElement();
+        if (next && (active === null || active === document.body)) {
+            whenHydrated(next, () => next.focusItem());
+        }
+    }
     rowOf(event) {
         return event
             .composedPath()
@@ -245,7 +273,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             extend,
             mode: this.selectionMode ?? 'none',
             pressed: this.valueFor(row),
-            shown: this.reachable.map((one) => this.valueFor(one)),
+            shown: this.selectable.map((one) => this.valueFor(one)),
             toggle,
             value: this.value,
         };
@@ -263,7 +291,10 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
     }
     arrive(row, from) {
         const moving = this.moving;
-        if (!moving || this.selectionMode === undefined || this.selectionMode === 'none') {
+        if (!moving ||
+            this.selectionMode === undefined ||
+            this.selectionMode === 'none' ||
+            row.disabled) {
             return;
         }
         if (moving.extend && this.anchor === undefined && from) {
@@ -287,7 +318,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         }
     }
     act(row) {
-        if (row.disabled) {
+        if (this.blocked(row)) {
             return;
         }
         if (row.href !== '') {
@@ -420,6 +451,9 @@ __decorate([
     words,
     property({ attribute: 'canceled-label' })
 ], HelixHeadlessList.prototype, "canceledLabel", void 0);
+__decorate([
+    property({ attribute: 'disabled-behavior' })
+], HelixHeadlessList.prototype, "disabledBehavior", void 0);
 __decorate([
     words,
     property({ attribute: 'dropped-label' })

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

@@ -14,7 +14,9 @@ declare const HelixHeadlessListbox_base: (new (...args: any[]) => import("@fusio
  * With `multiple` set, `value` is a comma-separated string, like
  * `Checkbox.Group`'s, because `MixinControllerValue` holds a string. The form
  * receives one entry per selected option, as a native `<select multiple>` sends
- * it, so your server does not split on commas.
+ * it, so your server does not split on commas. An option's value may hold a
+ * comma: a run of the string that is an option's value is read as that one
+ * value, and the form sends it as one entry.
  *
  * Selected and active are separate. The selected option is the value. The
  * active option is where the keyboard is: the arrow keys move it, and
@@ -185,6 +187,16 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * Placeholder text for the filter field.
      */
     filterLabel: string;
+    /**
+     * Whether an option is kept by the filter: a function given the option's
+     * words and the filter, trimmed, that returns `true` to keep it showing, as
+     * React Aria's `Autocomplete` takes `filter`. For matching that ignores
+     * accents, matches the start of each word, or matches out of order.
+     *
+     * Absent, an option is kept where its words hold the filter, in any case. A
+     * property only, there being no way to write a function in markup.
+     */
+    filterMatch?: ((text: string, filter: string) => boolean) | undefined;
     /**
      * The options as data, for a list too long to draw whole: each a value,
      * which is also its words, or a record with a `value`, a `label` and
@@ -447,7 +459,12 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
     private get elements();
     /** The options a filter has left showing. */
     private get shown();
-    /** The chosen values, as an array whether or not `multiple` is set. */
+    /**
+     * The chosen values, as an array whether or not `multiple` is set.
+     *
+     * Read against the options' values, so an option whose value holds a comma
+     * is one value. See `chosenValues`.
+     */
     get values(): string[];
     /**
      * Applies a choice, announcing first so a listener can refuse it.

package/dist/listbox/root/listbox-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, centerInView, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, centerInView, chosenValues, columnStep, countLabel, customElement, DelayController, DisabledCascadeController, drawAutofill, endInSight, formatWords, HelixFilterEvent, HelixFormElement, HelixLoadMoreEvent, hostAria, inlineStep, MixinCollection, MixinControllerValue, MixinField, markMatches, OptionWindowController, onApple, pageRows, rangeAdd, reportValues, requestChange, scrollItemIntoView, selectsAll, Typeahead, toggleEvery, typesCharacter, 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';
@@ -326,7 +326,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         return this.entries.filter((option) => !option.hidden);
     }
     get values() {
-        return this.value === '' ? [] : this.value.split(',');
+        return chosenValues(this.value, new Set(this.entries.map((option) => option.value)), this.multiple);
     }
     choose(value) {
         const chosen = this.values;
@@ -392,10 +392,14 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     }
     place() {
         this.forgetRemoved();
-        const needle = this.filter.trim().toLowerCase();
+        const typed = this.filter.trim();
+        const needle = typed.toLowerCase();
+        const match = this.filterMatch;
         const chosen = new Set(this.values);
         for (const option of this.entries) {
-            option.hidden = needle !== '' && !option.text.toLowerCase().includes(needle);
+            option.hidden =
+                needle !== '' &&
+                    !(match ? match(option.text, typed) : option.text.toLowerCase().includes(needle));
             option.selected = chosen.has(option.value);
         }
         for (const group of this.groups) {
@@ -425,10 +429,11 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             return;
         }
         const present = new Set(this.entries.map((option) => option.value));
-        const gone = this.values.filter((value) => this.seen.has(value) && !present.has(value));
+        const held = chosenValues(this.value, new Set([...present, ...this.seen]), this.multiple);
+        const gone = held.filter((value) => this.seen.has(value) && !present.has(value));
         this.seen = present;
         if (gone.length > 0) {
-            this.value = this.values.filter((value) => !gone.includes(value)).join(',');
+            this.value = held.filter((value) => !gone.includes(value)).join(',');
         }
     }
     followActive(changed) {
@@ -444,7 +449,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
     }
     sync() {
         if (this.multiple) {
-            reportValues(this.internals, this.name, this.value === '' ? [] : this.value.split(','));
+            reportValues(this.internals, this.name, this.values);
         }
         else {
             this.internals.setFormValue(this.value === '' ? null : this.value);
@@ -498,7 +503,7 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         }
     }
     get currentValue() {
-        return this.activeValue || (this.value.split(',')[0] ?? '');
+        return this.activeValue || (this.values[0] ?? '');
     }
     linkActive() {
         const list = this.renderRoot.querySelector(this.filterable ? '[part="search-field"]' : '[part="items"]');
@@ -666,6 +671,9 @@ __decorate([
     words,
     property({ attribute: 'filter-label' })
 ], HelixHeadlessListbox.prototype, "filterLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessListbox.prototype, "filterMatch", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessListbox.prototype, "items", void 0);

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

@@ -358,6 +358,10 @@ export declare class HelixHeadlessMap extends HelixHeadlessMap_base {
     /**
      * A route or area renamed, or its description changed, which the list says
      * and a slot change does not report.
+     *
+     * Not the map's own `gestures` news, which it sends from `updated` and which
+     * changes nothing it draws: an update asked for there ran every map's
+     * update twice, and Lit's development build warned about it.
      */
     private readonly handlePartChange;
     /**

package/dist/map/root/map-root.js

@@ -90,7 +90,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             }
         };
         this.handlePartChange = (event) => {
-            if (event.detail.kind !== 'place') {
+            if (event.detail.kind !== 'place' && event.detail.kind !== 'gestures') {
                 this.requestUpdate();
             }
         };

package/dist/menu/item/menu-item.js

@@ -104,7 +104,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
     updated(changed) {
         super.updated(changed);
         if (this.partNamed('item')) {
-            auditName(this, () => this.partNamed('item'), 'Give the row words in its default slot, or a label on the icon it holds.');
+            auditName(this, () => this.partNamed('item') ?? undefined, 'Give the row words in its default slot, or a label on the icon it holds.');
         }
     }
     renderDescription() {

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

@@ -42,8 +42,8 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * rows, Home and End go to the first and the last, a typed letter moves to
  * the next row whose name starts with it, Enter and Space choose, Right Arrow
  * opens a row's submenu and Left Arrow goes back, the two swapping on a
- * right-to-left page, and Escape closes the menu and returns focus to the
- * trigger. Tab closes it and moves on.
+ * right-to-left page. Left Arrow on the top page does nothing. Escape closes
+ * the menu and returns focus to the trigger. Tab closes it and moves on.
  *
  * While it is open, the surface carries the trigger's width as
  * `--floating-anchor-inline-size` and the room left below it as
@@ -93,6 +93,10 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * @cssstate drilled - A submenu's page is showing, so content that is not a row can hide with the top page.
  * @cssstate mark - A row on the current page has a checkbox or a link, so every row keeps the trailing column.
  * @cssstate open - While the menu is open.
+ * @cssstate placed-bottom - While the open panel sits below its trigger.
+ * @cssstate placed-left - While the open panel sits to the left of its trigger.
+ * @cssstate placed-right - While the open panel sits to the right of its trigger.
+ * @cssstate placed-top - While the open panel sits above its trigger.
  * @cssstate start - A row on the current page has content in its leading column, so every row keeps that column.
  */
 export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {

package/dist/menu/root/menu-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, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -76,6 +76,13 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             boundary: () => this,
             offset: () => this.offset,
             onDismiss: () => this.hide(),
+            onPlace: (placement) => {
+                const side = sideOf(placement);
+                this.toggleState('placed-bottom', side === 'bottom');
+                this.toggleState('placed-left', side === 'left');
+                this.toggleState('placed-right', side === 'right');
+                this.toggleState('placed-top', side === 'top');
+            },
             open: () => this.open,
             placement: () => this.placement,
             surface: () => this.partNamed('surface'),
@@ -145,7 +152,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 this.enter(items[at]);
             }
             else if (along === -1) {
-                if (this.flies && this.keyPage === null) {
+                if (this.flies ? this.keyPage === null : this.drilldown.atRoot) {
                     return;
                 }
                 this.leave();

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

@@ -25,9 +25,9 @@ declare const HelixHeadlessNumberInput_base: (new (...args: any[]) => import("@f
  * The locale's group separators are read in every field, so `1,234` is a
  * number in `en-US`.
  *
- * The field and its two buttons sit in a `role="group"`, and the field carries
- * `role-label`, "number field" in English, as its `aria-roledescription`, as
- * React Aria's NumberField does. On iOS and iPadOS the field is a plain text
+ * The field and its two buttons sit in a `role="group"` named by the label,
+ * and the field carries `role-label`, "number field" in English, as its
+ * `aria-roledescription`, as React Aria's NumberField does. On iOS and iPadOS the field is a plain text
  * field, with no `role="spinbutton"`, which VoiceOver reads as a slider you
  * cannot type in, and no role description, so VoiceOver says the field is
  * required. React Aria's NumberField does the same.
@@ -492,8 +492,11 @@ export declare class HelixHeadlessNumberInput extends HelixHeadlessNumberInput_b
     protected renderIncrementIcon(): TemplateResult;
     protected render(): TemplateResult;
     /**
-     * The value as a number, or `NaN` while the control is empty.
+     * The value as a number, or `NaN` while the control is empty or does not
+     * hold a number.
      *
+     * Read in the locale and the format, as the form reads it, so `1,5` typed
+     * in a locale with a decimal comma is 1.5 here while the form holds 1.5.
      * `NaN` and not zero, which is the trap the platform already avoids: `Number('')`
      * is zero, so an empty control would report a number it does not hold and a
      * form would submit it.