@fusion.dev/helix-headless 0.162.1 → 0.164.0

package/dist/menu/item/menu-item.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 { ariaChord, auditName, customElement, deepActiveElement, HelixBeforeToggleEvent, HelixElement, HelixSelectEvent, isRtl, onApple, PopoverController, requestChange, slotFilled, } from '@fusion.dev/helix-core';
+import { ariaChord, auditName, customElement, deepActiveElement, HelixBeforeToggleEvent, HelixElement, HelixSelectEvent, isRtl, onApple, onUnlessFalse, PopoverController, requestChange, slotFilled, } from '@fusion.dev/helix-core';
 import { caretRight, check } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -29,6 +29,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         this.target = '';
         this.value = '';
         this.isMenuItem = true;
+        this.keepsOpen = false;
         this.submenu = false;
         this.start = false;
         this.end = false;
@@ -58,8 +59,10 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
             surface: () => (this.flyout ? this.partNamed('surface') : null),
         });
         this.handleClick = () => {
-            this.choose();
+            this.choose(this.spacePressed);
+            this.spacePressed = false;
         };
+        this.spacePressed = false;
         this.handleKeydown = (event) => {
             if (event.key !== 'Enter' && event.key !== ' ') {
                 return;
@@ -70,12 +73,17 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
             }
             event.preventDefault();
             if (link) {
+                this.spacePressed = true;
                 link.click();
+                this.spacePressed = false;
                 return;
             }
-            this.handleClick();
+            this.choose(event.key === ' ');
         };
     }
+    get choice() {
+        return this.checkable || this.checked || this.exclusive;
+    }
     get hasSubmenu() {
         return this.submenu;
     }
@@ -93,9 +101,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         const rows = this.knownChildren.filter((child) => child.slot === 'submenu' && child.isMenuItem);
         this.toggleState('submenu-start', this.flyout && rows.some((row) => row.querySelector(':scope > [slot="start"]') !== null));
         this.toggleState('submenu-mark', this.flyout &&
-            rows.some((row) => row.checkable ||
-                row.checked ||
-                [...row.children].some((child) => child.slot === 'submenu')));
+            rows.some((row) => row.choice || [...row.children].some((child) => child.slot === 'submenu')));
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -152,7 +158,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         return this.active;
     }
     tick() {
-        if (!(this.checkable || this.checked) || this.hasSubmenu) {
+        if (!this.choice || this.hasSubmenu) {
             return;
         }
         const next = this.exclusive ? true : !this.checked;
@@ -188,10 +194,12 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         }
         return peers;
     }
-    choose() {
+    choose(space = false) {
         if (this.disabled) {
             return;
         }
+        const spaceKeeps = space && this.choice && !this.hasSubmenu;
+        this.keepsOpen = this.closeOnSelect === undefined ? spaceKeeps : !this.closeOnSelect;
         this.tick();
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
     }
@@ -221,7 +229,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         }
         const submenu = this.hasSubmenu;
         const linked = this.href !== '' && !this.disabled;
-        const ticks = this.checkable || this.checked;
+        const ticks = this.choice;
         const role = ticks ? (this.exclusive ? 'menuitemradio' : 'menuitemcheckbox') : 'menuitem';
         const checkedState = ticks ? (this.checked ? 'true' : 'false') : nothing;
         const keys = this.shortcut === '' ? nothing : ariaChord(this.shortcut, !this.hydrating && onApple());
@@ -281,6 +289,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessMenuItem.prototype, "checked", void 0);
+__decorate([
+    property({ attribute: 'close-on-select', converter: onUnlessFalse })
+], HelixHeadlessMenuItem.prototype, "closeOnSelect", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessMenuItem.prototype, "disabled", void 0);

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

@@ -40,7 +40,8 @@ declare const HelixHeadlessMenu_base: (new (...args: any[]) => import("@fusion.d
  * Keys: Enter, Space or Down Arrow on the trigger opens the menu on its first
  * row, and Up Arrow on its last. In the menu, Up and Down Arrow move between
  * 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
+ * the next row whose name starts with it, Enter and Space choose (Space on a
+ * choice row changes it and leaves the menu open), Right Arrow
  * opens a row's submenu and Left Arrow goes back, the two swapping on a
  * 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.
@@ -109,6 +110,14 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * The text of the row that returns from a submenu.
      */
     backLabel: string;
+    /**
+     * Whether choosing a row closes the menu.
+     *
+     * On by default, and a Space on a choice row leaves the menu open either way.
+     * Write `close-on-select="false"` to keep the menu open after every choice, as
+     * Ark UI's `closeOnSelect` does. A row's own `close-on-select` wins over this.
+     */
+    closeOnSelect: boolean;
     /**
      * Whether the menu is the trigger's context menu: it opens where the reader
      * asks for one, with a right-click, a long press, Shift+F10 or the menu key.

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, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, onUnlessFalse, 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';
@@ -31,6 +31,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     constructor() {
         super(...arguments);
         this.backLabel = 'Back';
+        this.closeOnSelect = true;
         this.context = false;
         this.label = '';
         this.longPressLabel = 'Long press or press Alt+Down to show the menu';
@@ -119,8 +120,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 this.enter(chosen);
                 return;
             }
+            const keep = chosen.keepsOpen || (chosen.closeOnSelect === undefined && !this.closeOnSelect);
             queueMicrotask(() => {
-                if (!event.defaultPrevented) {
+                if (!(event.defaultPrevented || keep)) {
                     this.hide();
                 }
             });
@@ -538,7 +540,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     markColumns() {
         const rows = this.flies ? this.topRows : this.drilldown.rows;
         this.toggleState('start', rows.some((row) => row.querySelector(':scope > [slot="start"]') !== null));
-        this.toggleState('mark', rows.some((row) => row.checkable || row.checked || this.drilldown.hasPage(row)));
+        this.toggleState('mark', rows.some((row) => row.choice || this.drilldown.hasPage(row)));
     }
     mark(item, onPage) {
         const page = this.drilldown.page;
@@ -608,6 +610,9 @@ __decorate([
     words,
     property({ attribute: 'back-label' })
 ], HelixHeadlessMenu.prototype, "backLabel", void 0);
+__decorate([
+    property({ attribute: 'close-on-select', converter: onUnlessFalse })
+], HelixHeadlessMenu.prototype, "closeOnSelect", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessMenu.prototype, "context", void 0);

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -99,6 +99,8 @@ export type ObjectInspectorRenderer = (value: unknown, entry: ObjectInspectorEnt
  * @aliases JSON viewer, Object viewer, Inspector, Data explorer
  * @documentation https://fusion.dev/helix/components/object-inspector
  *
+ * @slot empty - Shown in the tree while it has no entries to show. Defaults to `empty-label`, or `no-matches-label` while a filter matched none.
+ *
  * @event {HelixActivateEvent} helix-activate - The active row moved, by a key or a click. The detail's `value` is its path.
  * @event {HelixBeforeActivateEvent} helix-before-activate - The active row is about to move, with its new path. Cancelable: cancel it to keep the row where it is.
  * @event {HelixBeforeCloseEvent} helix-before-close - A reader is about to close the active branch. Cancelable: cancel it to keep the branch open.
@@ -128,6 +130,7 @@ export type ObjectInspectorRenderer = (value: unknown, entry: ObjectInspectorEnt
  * @csspart copy-tooltip-right - The tooltip while it is right of the copy button. Set alongside `copy-tooltip`.
  * @csspart copy-tooltip-top - The tooltip while it is above the copy button. Set alongside `copy-tooltip`.
  * @csspart count - The number of entries a branch holds.
+ * @csspart empty - The row shown in the tree while it has no entries to show: no value, or a filter that matched none. It holds the `empty` slot.
  * @csspart frame - The tree and the copy button beside it.
  * @csspart header - The bar that holds the label, when there is one.
  * @csspart key - A property name or an array index.
@@ -146,6 +149,10 @@ export type ObjectInspectorRenderer = (value: unknown, entry: ObjectInspectorEnt
  * @csspart value - What `renderValue` drew for an entry, in place of its own drawing.
  *
  * @cssproperty --object-inspector-level - How deep a row is, from 0 at the root, for indenting it.
+ *
+ * @cssstate empty - While the tree has no entries to show: no value, or a filter that matched none.
+ * @cssstate filtered - While `filter` holds text.
+ * @cssstate matched - While `filter` holds text and matched at least one entry.
  */
 export declare class HelixHeadlessObjectInspector extends HelixElement {
     /**
@@ -183,6 +190,11 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * wall of text this exists to avoid.
      */
     defaultDepth: number;
+    /**
+     * What the tree says while there is no value to show, such as before a
+     * fetch answers. The `empty` slot replaces it.
+     */
+    emptyLabel: string;
     /**
      * The open branches, by path, in no set order.
      *
@@ -254,6 +266,11 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
      * reach a value.
      */
     noCopy: boolean;
+    /**
+     * What the tree says while a filter matched no entry. The `empty` slot
+     * replaces it.
+     */
+    noMatchesLabel: string;
     /**
      * Draws an entry's value your way, given the value and its entry. Set it as
      * a property.
@@ -358,6 +375,12 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private seed;
     /** Opens the branches around each path, where the value has them. */
     private openAround;
+    /**
+     * Whether the tree has no entries to show. Not while a value named by `for`
+     * is still to be read, as on a server and while hydrating what one sent,
+     * where it says nothing yet about the value.
+     */
+    private get blank();
     protected willUpdate(changed: PropertyValues): void;
     /**
      * A count in its plural message, `items-label`, `keys-label` or

package/dist/object-inspector/root/object-inspector-root.js

@@ -32,6 +32,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.copyLabel = 'Copy {name}';
         this.copyValueLabel = 'Copy value';
         this.defaultDepth = 1;
+        this.emptyLabel = 'Nothing to show';
         this.filter = '';
         this.filterable = false;
         this.filterLabel = 'Filter';
@@ -40,6 +41,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         this.keysLabel = '{count, plural, one {# key} other {# keys}}';
         this.label = '';
         this.noCopy = false;
+        this.noMatchesLabel = 'No matches';
         this.resultsLabel = '{count, plural, one {# result} other {# results}}';
         this.treeLabel = 'Value';
         this.value = undefined;
@@ -213,6 +215,9 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     openAround(paths) {
         this.opened = withAncestors(this.opened, this.branches, paths);
     }
+    get blank() {
+        return this.rows.length === 0 && (this.for === '' || this.loadedFor === this.for);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.hadFocus = this.hasFocusedRow();
@@ -248,6 +253,9 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
         if (changed.has('filter') && this.hasUpdated) {
             this.tell();
         }
+        this.toggleState('empty', this.blank);
+        this.toggleState('filtered', this.found !== undefined);
+        this.toggleState('matched', (this.found?.size ?? 0) > 0);
     }
     counted(which, count) {
         const one = this[`${which}Label`];
@@ -526,7 +534,9 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
           @scroll=${() => this.virtualize.measure()}
         >
           ${this.windowed ? html `<div part="before" role="presentation" style="block-size: ${before}px"></div>` : nothing}
-          ${repeat(shown, ([row]) => row.path, ([row, at]) => this.renderRow(row, at))}
+          ${repeat(shown, ([row]) => row.path, ([row, at]) => this.renderRow(row, at))}${this.blank
+            ? html `<div part="empty" role="row"><div role="gridcell"><slot name="empty">${this.found ? this.noMatchesLabel : this.emptyLabel}</slot></div></div>`
+            : nothing}
           ${this.windowed ? html `<div part="after" role="presentation" style="block-size: ${after}px"></div>` : nothing}
         </div>
         ${this.noCopy ? nothing : this.renderCopyButton(rows[this.cursor])}
@@ -548,6 +558,10 @@ __decorate([
 __decorate([
     property({ attribute: 'default-depth', type: Number })
 ], HelixHeadlessObjectInspector.prototype, "defaultDepth", void 0);
+__decorate([
+    words,
+    property({ attribute: 'empty-label' })
+], HelixHeadlessObjectInspector.prototype, "emptyLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessObjectInspector.prototype, "expanded", null);
@@ -584,6 +598,10 @@ __decorate([
 __decorate([
     property({ attribute: 'no-copy', type: Boolean })
 ], HelixHeadlessObjectInspector.prototype, "noCopy", void 0);
+__decorate([
+    words,
+    property({ attribute: 'no-matches-label' })
+], HelixHeadlessObjectInspector.prototype, "noMatchesLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessObjectInspector.prototype, "renderValue", void 0);

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

@@ -150,7 +150,13 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
     protected readonly keys: KeyboardNavigationController;
     /** The steps, in the order the consumer wrote them. */
     private get steps();
-    /** The index of the stage the reader is on, or `-1`. */
+    /**
+     * The index of the stage the reader is on, or `-1`.
+     *
+     * Read from `active` once anything has set it, because a move writes
+     * `active` at once and each step's `current` only on the next update: two
+     * calls to `next()` in one task then move two stages.
+     */
     private get at();
     /**
      * Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`

package/dist/steps/root/steps-root.js

@@ -58,7 +58,12 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         return [...this.querySelectorAll(':scope > *')].filter((one) => 'current' in one);
     }
     get at() {
-        return this.steps.findIndex((step) => step.current);
+        const steps = this.steps;
+        if (this.active === '') {
+            return steps.findIndex((step) => step.current);
+        }
+        const item = this.resolveActive(steps);
+        return item ? steps.indexOf(item) : -1;
     }
     next() {
         return this.step(1);

package/dist/table/grid-controller.d.ts

@@ -42,6 +42,13 @@ export interface TableGridOptions {
      * carry the selection selects the row there.
      */
     arrive?: (to: number, control: boolean) => void;
+    /**
+     * Right or Left on the disclosure cell of drawn row `row`, `forward` for
+     * the key that moves on along the line. Says that it opened or shut the
+     * row, names the drawn row to move to, or says it did neither, which moves
+     * along the row as the key does on any cell.
+     */
+    disclose?: (row: number, forward: boolean) => boolean | number;
     /** Whether the table is a grid now. */
     on: () => boolean;
 }

package/dist/table/grid-controller.js

@@ -71,10 +71,24 @@ export class TableGridController {
                 }
                 return;
             }
+            const step = inlineStep(this.host, event.key);
+            if (step !== 0 &&
+                place.row >= 0 &&
+                !(event.shiftKey || event.ctrlKey || event.metaKey) &&
+                this.options.lead()[place.column] === 'expand') {
+                const done = this.options.disclose?.(place.row, step > 0) ?? false;
+                if (done !== false) {
+                    event.preventDefault();
+                    if (typeof done === 'number') {
+                        this.moveTo({ column: place.column, row: done });
+                    }
+                    return;
+                }
+            }
             const to = gridMove(event.key, place, { last: this.options.rows().length - 1, top: this.top, width: this.widthOf(place.row) }, {
                 control: event.ctrlKey || event.metaKey,
                 page: event.key.startsWith('Page') ? this.pageFrom(place.cell) : 1,
-                step: inlineStep(this.host, event.key),
+                step,
             });
             if (!to) {
                 return;

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

@@ -111,6 +111,8 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * | Enter, Space on a sortable heading | Sorts by the column. |
  * | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a `selectable` table. |
  * | Enter or Space on a disclosure cell | Shows or hides the rows under the row, in a table whose rows nest. |
+ * | Right on a disclosure cell | Shows the rows under a shut row, and otherwise moves one cell along the row. Left does, on a right-to-left page. |
+ * | Left on a disclosure cell | Hides the rows under an open row, and moves to the row this one sits under from any other. |
  * | Enter or Space on a grip cell | Picks the row up, or drops it, in a `reorderable` table. Up, Down, Home, and End move a row picked up, and Escape puts it back. |
  * | Down, Up, Page Down, Page Up under `selection-behavior="replace"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |
  * | Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |
@@ -184,6 +186,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  *
  * @cssstate empty - While there are no rows and none are loading.
  * @cssstate error - While `error-text` is set.
+ * @cssstate loading - While `loading` is set, as the rows are on their way.
  */
 export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     /**
@@ -534,6 +537,13 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     private selectRange;
     /** One row's checkbox, ticked or not. It becomes the row a range runs from. */
     private chooseRow;
+    /**
+     * Right or Left on a disclosure cell, as on a tree's item and as Data
+     * Table's row headers do: on to open a shut row, back to shut an open one.
+     * Back on a row that is shut, or has no rows under it, moves to the row it
+     * sits under. Anything else moves along the row.
+     */
+    private disclose;
     /**
      * Enter, Space or F2 on a cell of a `grid` table, and whether it did
      * anything. Left alone, Enter and F2 move into the cell's controls.

package/dist/table/root/table-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, anchorAt, assignSlots, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixBeforeToggleEvent, HelixElement, HelixLoadMoreEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, HelixToggleEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, scrollingAncestor, sort, splitValues, toggleEvery, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, assignSlots, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixBeforeToggleEvent, HelixElement, HelixLoadMoreEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, HelixToggleEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, scrollingAncestor, sort, splitValues, toggleEvery, treeArrow, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -94,6 +94,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 }
             },
             columns: () => this.tableColumns.filter((column) => column.shown),
+            disclose: (at, forward) => this.disclose(at, forward),
             lead: () => this.lead,
             on: () => this.grid,
             part: (name) => this.partNamed(name),
@@ -471,6 +472,21 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         }
         this.requestSelected(keys);
     }
+    disclose(at, forward) {
+        const rows = this.arrangedRows;
+        const row = rows[at];
+        const found = this.keyed.find((one) => one.row === row);
+        if (!(row && found)) {
+            return false;
+        }
+        const arrow = treeArrow({ branch: row.branch ?? false, open: this.open.has(found.key) }, forward ? 1 : -1);
+        if (arrow === 'open' || arrow === 'close') {
+            this.toggleRow(found.key);
+            return true;
+        }
+        const parent = arrow === 'parent' ? rows.indexOf(this.rowFor(row.parent ?? '')) : -1;
+        return parent >= 0 ? parent : false;
+    }
     activate(place, event) {
         const leads = this.lead;
         const lead = leads[place.column] === 'select';
@@ -697,6 +713,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         super.updated(changed);
         this.toggleState('error', this.errorText !== '');
         this.toggleState('empty', !this.loading && !this.hasRows);
+        this.toggleState('loading', this.loading);
         this.assign();
         this.alignCells();
         this.markSorted();

package/dist/video/root/video-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 { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, formatWords, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, reportRuntime, SKIP_SECONDS, sameCopies, showCaption, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { activeCue, adoptTrack, auditName, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, formatWords, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, reportRuntime, SKIP_SECONDS, sameCopies, showCaption, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { airplay, arrowClockwise, arrowCounterClockwise, closedCaptioning, cornersIn, cornersOut, dotsThreeVertical, download, gauge, pause, pictureInPicture, play, skipBack, skipForward, speakerHigh, speakerX, } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -464,6 +464,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
         this.finishHydration();
+        auditName(this, () => null, 'Give it a `label` that says what the video shows, such as "Product tour".', () => this.label !== '');
         const video = this.video;
         if (video) {
             if (this.defaultMuted || this.silent) {

package/dist/video-playlist/item/video-playlist-item.d.ts

@@ -38,6 +38,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart thumbnail - The image of `poster`, shown when the `media` slot is empty.
  *
  * @cssstate current - The entry that is playing.
+ * @cssstate dragging - The entry a pointer is dragging, in a `reorderable` playlist.
+ * @cssstate drop-after - The entry the dragged one would land after, which the drop indicator is drawn under.
+ * @cssstate drop-before - The entry the dragged one would land before, which the drop indicator is drawn over.
  */
 export declare class HelixHeadlessVideoPlaylistItem extends HelixElement {
     /**
@@ -61,6 +64,11 @@ export declare class HelixHeadlessVideoPlaylistItem extends HelixElement {
      * current one, and the arrow keys reach the rest.
      */
     focusable?: boolean;
+    /**
+     * @internal Set by a `reorderable` playlist: where this entry stands in a
+     * move, which it says through its states.
+     */
+    move: 'dragging' | 'drop-after' | 'drop-before' | undefined;
     /**
      * The image shown before this entry plays, also used as the row's thumbnail.
      *

package/dist/video-playlist/item/video-playlist-item.js

@@ -12,6 +12,7 @@ let HelixHeadlessVideoPlaylistItem = class HelixHeadlessVideoPlaylistItem extend
         super(...arguments);
         this.current = false;
         this.disabled = false;
+        this.move = undefined;
         this.poster = '';
         this.src = '';
         this.value = '';
@@ -40,6 +41,9 @@ let HelixHeadlessVideoPlaylistItem = class HelixHeadlessVideoPlaylistItem extend
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('current', this.current);
+        this.toggleState('dragging', this.move === 'dragging');
+        this.toggleState('drop-after', this.move === 'drop-after');
+        this.toggleState('drop-before', this.move === 'drop-before');
     }
     render() {
         return html `<div part="container" role="listitem">
@@ -70,6 +74,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessVideoPlaylistItem.prototype, "focusable", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessVideoPlaylistItem.prototype, "move", void 0);
 __decorate([
     property()
 ], HelixHeadlessVideoPlaylistItem.prototype, "poster", void 0);

package/dist/video-playlist/root/video-playlist-root.d.ts

@@ -54,6 +54,21 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  * the next or the previous entry. The player's previous and next controls
  * move through the entries in the same order the playlist does.
  *
+ * **Moving entries.** `reorderable` lets a reader change the order of the
+ * queue:
+ *
+ * - Alt with Up or Down moves the focused entry a place, and Alt with Home or
+ *   End moves it to either end, as the APG's rearrangeable listbox does.
+ *   Focus stays on it.
+ * - A pointer drags an entry, with a drop indicator, and the page scrolls near
+ *   an edge. A press that does not travel still plays the entry.
+ * - A drop sends `helix-before-reorder`, which you can refuse, and then
+ *   `helix-reorder`, whose `keys` hold every entry's `value` in the new order.
+ *   **You move the entries**: the playlist moves no element of yours, and the
+ *   next entry is the one after the current entry in the order you leave.
+ * - Each move is said in the live region, in words you can change:
+ *   `moved-label`, `dropped-label`, `canceled-label`, and `picked-up-label`.
+ *
  * **What a screen reader hears.** A list named by `label`, with a button for
  * each entry. When the playlist moves to another entry, by a press, by the
  * player's controls, or at the end of a clip, a live region says
@@ -71,7 +86,9 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  *
  * @event {HelixActivateEvent} helix-activate - The current entry changed. The playlist already holds the new entry when this is sent, and `detail.previous` is the entry it left. `currentEntry` is the entry itself, with its `src`, `poster` and name.
  * @event {HelixBeforeActivateEvent} helix-before-activate - The current entry is about to change, and `detail.cause` says why: `press`, `next`, `previous`, `ended`, or `removed`. Cancelable: cancel it to keep the current entry.
+ * @event {HelixBeforeReorderEvent} helix-before-reorder - An entry was moved to a new place, in a `reorderable` playlist, with every entry's value in the new order in `detail.keys`. Cancelable: cancel it to keep the entry where it is.
  * @event {HelixEndEvent} helix-end - The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set.
+ * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your entries to the order in `keys`. Cancelable: cancel it to say the move did not happen.
  *
  * @csspart empty - The box that holds the `empty` slot, drawn while there are no entries.
  * @csspart items - The list of entries.
@@ -86,6 +103,16 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
      * `registerWords('de', { 'helix-video-playlist': { label: 'Wiedergabeliste' } })`.
      */
     static words: string;
+    /**
+     * What screen readers hear when a move is put back, in a `reorderable`
+     * playlist. `{name}` is the entry's words.
+     */
+    canceledLabel: string;
+    /**
+     * What screen readers hear when a moved entry is let go, in a `reorderable`
+     * playlist. `{name}` is the entry's words.
+     */
+    droppedLabel: string;
     /**
      * What the playlist says while it has no entries. The `empty` slot replaces it.
      */
@@ -94,12 +121,23 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
      * The list's name, read by screen readers.
      */
     label: string;
+    /**
+     * What screen readers hear each time a key moves an entry, in a
+     * `reorderable` playlist. `{name}` is the entry's words, `{position}` its
+     * new place, counting from 1, and `{count}` the number of entries.
+     */
+    movedLabel: string;
     /**
      * Stays on an entry when its clip ends, where the playlist would otherwise
      * play the next one. The player's controls, a press, and `next()` still
      * move. `repeat="one"` still plays the entry again.
      */
     noAdvance: boolean;
+    /**
+     * What screen readers hear when a pointer picks up an entry, in a
+     * `reorderable` playlist. `{name}` is the entry's words.
+     */
+    pickedUpLabel: string;
     /**
      * What the live region says when the playlist moves to another entry.
      * `{title}` is the entry's name.
@@ -109,8 +147,30 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
      * `aria-current` on a button the reader is not on.
      */
     playingLabel: string;
+    /**
+     * Lets a reader move the entries, with Alt and the arrow keys or by
+     * dragging one. The playlist moves no entry itself: you move your entries
+     * on `helix-reorder`.
+     */
+    reorderable: boolean;
     /** The live region, rendered from the first move. */
     private readonly status;
+    /** The entry an event passed through, where it may move. */
+    private entryOf;
+    /** The entry with that value. */
+    private entryFor;
+    /**
+     * Moving the entries, as a listbox moves its options: Alt with the arrows
+     * on the focused entry, or a pointer dragging a whole entry, where a press
+     * that does not travel still plays it.
+     */
+    private readonly reorder;
+    /**
+     * Tells each entry where it stands in a move, which it says through its
+     * states for the styled tier to draw: the entry dragged, and the one the
+     * drop indicator is before or after.
+     */
+    private markMoves;
     /**
      * What happens when an entry ends with no next one to go to. `one` plays the
      * same entry again, and `all` goes from the last entry back to the first.