@fusion.dev/helix-headless 0.157.0 → 0.159.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/element-events.generated.js

@@ -2,7 +2,12 @@ import { registerElementEvents } from '@fusion.dev/helix-core';
 registerElementEvents({
     'helix-headless-accordion-item': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-announcement': ['helix-dismiss'],
-    'helix-headless-app-header': ['helix-scrolled'],
+    'helix-headless-app-header': [
+        'helix-before-close',
+        'helix-before-open',
+        'helix-scrolled',
+        'toggle',
+    ],
     'helix-headless-area-chart': ['helix-reading-change', 'helix-reading-press'],
     'helix-headless-avatar': ['error', 'load'],
     'helix-headless-bar-chart': ['helix-reading-change', 'helix-reading-press'],
@@ -244,6 +249,7 @@ registerElementEvents({
     'helix-headless-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-headless-switch': ['change', 'helix-before-toggle', 'input'],
     'helix-headless-tab': ['helix-dismiss', 'helix-select'],
+    'helix-headless-tab-panel': ['helix-load'],
     'helix-headless-table': [
         'helix-before-reorder',
         'helix-reorder',

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

@@ -11,7 +11,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * Each item is a `group` with the role description `slide`, named by its
  * `label` or, without one, by its place in the set, such as "2 of 5", as the
  * APG carousel pattern names a slide. The lightbox supplies both words, so they
- * are translated on the lightbox.
+ * are translated on the lightbox. A `description`, while there is one,
+ * describes the group, so a screen reader says it with the name.
  *
  * An item that is not current is hidden and stays in the DOM, as a `TabPanel`
  * does. Crawlers can read it, it is in the server-rendered markup, and an
@@ -56,6 +57,11 @@ export declare class HelixHeadlessLightboxItem extends HelixElement {
      * The item's identifier. The root compares its `active` value against it.
      */
     value: string;
+    /** Whether anything is slotted into `description`, which then describes the group. */
+    private described;
+    /** Reads whether the `description` slot holds anything. */
+    private readonly readDescription;
+    protected firstUpdated(changed: PropertyValues): void;
     /**
      * Mirrors the shown state where a stylesheet can select on it.
      *

package/dist/lightbox/item/lightbox-item.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 let HelixHeadlessLightboxItem = class HelixHeadlessLightboxItem extends HelixElement {
     constructor() {
         super(...arguments);
@@ -15,6 +15,15 @@ let HelixHeadlessLightboxItem = class HelixHeadlessLightboxItem extends HelixEle
         this.position = '';
         this.roleLabel = '';
         this.value = '';
+        this.described = false;
+        this.readDescription = () => {
+            const slot = this.renderRoot.querySelector('slot[name="description"]');
+            this.described = (slot?.assignedNodes() ?? []).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? '').trim() !== '');
+        };
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.readDescription();
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -26,10 +35,11 @@ let HelixHeadlessLightboxItem = class HelixHeadlessLightboxItem extends HelixEle
       role="group"
       aria-roledescription=${this.roleLabel || nothing}
       aria-label=${this.label || this.position || nothing}
+      aria-describedby=${this.described ? 'description' : nothing}
       ?hidden=${!this.current}
     >
       <slot></slot>
-      <slot name="description"></slot>
+      <slot id="description" name="description" @slotchange=${this.readDescription}></slot>
     </div>`;
     }
 };
@@ -48,6 +58,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessLightboxItem.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessLightboxItem.prototype, "described", void 0);
 HelixHeadlessLightboxItem = __decorate([
     customElement('helix-headless-lightbox-item')
 ], HelixHeadlessLightboxItem);

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

@@ -1,4 +1,4 @@
-import { CommandController, FocusScopeController, HelixElement, SwipeController } from '@fusion.dev/helix-core';
+import { CommandController, FocusScopeController, HelixElement, OpenPhaseController, SwipeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & typeof HelixElement;
 /**
@@ -25,9 +25,10 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * buttons that send `--previous`, `--next` and `--close`.
  *
  * **Set `max-zoom` to let a reader zoom into the shown item**, such as `3`.
- * Two fingers pinch it, a double click or a double tap zooms all the way in
- * about the point pressed and back out, and once zoomed one pointer drags it
- * about. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.
+ * Two fingers pinch it, and so does a trackpad pinch or the wheel with Ctrl
+ * held, about the point under the pointer. A double click or a double tap
+ * zooms all the way in about the point pressed and back out, and once zoomed
+ * one pointer drags it about and the wheel moves it. `+` and `-` zoom in and out from the keyboard, and `0` puts it back.
  * The scale and the offset are on the `viewport` part as `--lightbox-zoom`,
  * `--lightbox-pan-x` and `--lightbox-pan-y`, written only while zoomed, and a
  * swipe moves to the next item only while the item is at its own size. With
@@ -109,6 +110,8 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @cssproperty --lightbox-pan-y - How far the zoomed item is moved down from the middle of the viewport, in pixels. Written only while zoomed.
  * @cssproperty --lightbox-zoom - The scale the shown item is zoomed to, such as `2`. Written only while zoomed.
  *
+ * @cssstate entering - From the moment the viewer opens until its entrance has finished.
+ * @cssstate exiting - From the moment the viewer closes until its exit has finished.
  * @cssstate fullscreen - While the viewer fills the screen.
  * @cssstate idle - The user has been still long enough for the controls to hide.
  * @cssstate open - While the viewer is open.
@@ -225,6 +228,7 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     private quietZoom;
     protected readonly swipes: SwipeController;
     protected readonly scope: FocusScopeController;
+    protected readonly phases: OpenPhaseController;
     private readonly zoomer;
     /** Writes the zoom on the viewport, and nothing at the item's own size. */
     private drawZoom;

package/dist/lightbox/root/lightbox-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 { auditName, CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FocusScopeController, FullscreenController, formatWords, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { auditName, CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FocusScopeController, FullscreenController, formatWords, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, OpenPhaseController, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight, minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -63,6 +63,14 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             ],
             surface: () => this.dialog,
         });
+        this.phases = new OpenPhaseController(this, {
+            mark: {
+                entering: (on) => this.toggleState('entering', on),
+                exiting: (on) => this.toggleState('exiting', on),
+            },
+            open: () => this.open,
+            surface: () => this.dialog,
+        });
         this.zoomer = new ZoomController(this, {
             max: () => (this.open ? this.maxZoom : 1),
             onChange: (scale, pan) => this.drawZoom(scale, pan),

package/dist/lightbox/zoom-controller.d.ts

@@ -12,10 +12,12 @@ export interface ZoomOptions {
  * Pinch, double press and drag to zoom into the item a viewer shows, and to
  * move about it once zoomed.
  *
- * Two fingers scale the item about the point between them. A double press, a
- * double click or a double tap, zooms all the way in about the point pressed,
- * and back out again. One pointer dragged across a zoomed item moves it, never
- * so far that an edge comes inside the box. What it reports is a scale and an
+ * Two fingers scale the item about the point between them. A trackpad pinch,
+ * which the browser sends as a wheel with Ctrl held, and the wheel with Ctrl
+ * held scale it about the pointer. A double press, a double click or a double
+ * tap, zooms all the way in about the point pressed, and back out again. One
+ * pointer dragged across a zoomed item moves it, never so far that an edge
+ * comes inside the box, and so does the wheel without Ctrl. What it reports is a scale and an
  * offset from the middle of the box; drawing them is the caller's.
  */
 export declare class ZoomController implements ReactiveController {
@@ -58,6 +60,13 @@ export declare class ZoomController implements ReactiveController {
     private readonly handleDown;
     private readonly handleMove;
     private readonly handleUp;
+    /**
+     * A wheel with Ctrl held, which is also how the browser sends a trackpad
+     * pinch, scales the item about the pointer. Without Ctrl, a wheel over a
+     * zoomed item moves it. Over an item at its own size, a plain wheel is left
+     * to the page.
+     */
+    private readonly handleWheel;
     /** A double press zooms all the way in about the point, or back out. */
     private readonly handleDouble;
     private release;

package/dist/lightbox/zoom-controller.js

@@ -48,6 +48,21 @@ export class ZoomController {
             }
             this.begin();
         };
+        this.handleWheel = (event) => {
+            if (this.options.max() <= 1 || !this.inside(event)) {
+                return;
+            }
+            const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 400 : 1;
+            if (event.ctrlKey) {
+                event.preventDefault();
+                this.zoomTo(this.scale * Math.exp((-event.deltaY * unit) / 250), this.offset(event));
+                return;
+            }
+            if (this.scale > 1) {
+                event.preventDefault();
+                this.panBy({ x: -event.deltaX * unit, y: -event.deltaY * unit });
+            }
+        };
         this.handleDouble = (event) => {
             if (this.options.max() <= 1 || !this.inside(event)) {
                 return;
@@ -69,10 +84,12 @@ export class ZoomController {
     hostConnected() {
         this.host.addEventListener('pointerdown', this.handleDown);
         this.host.addEventListener('dblclick', this.handleDouble);
+        this.host.addEventListener('wheel', this.handleWheel, { passive: false });
     }
     hostDisconnected() {
         this.host.removeEventListener('pointerdown', this.handleDown);
         this.host.removeEventListener('dblclick', this.handleDouble);
+        this.host.removeEventListener('wheel', this.handleWheel);
         this.release();
     }
     zoomTo(scale, at = { x: 0, y: 0 }) {

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.