@fusion.dev/helix-headless 0.163.0 → 0.164.0

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

@@ -26,6 +26,7 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * | Key | What it does |
  * |---|---|
  * | Down, Up | On a closed field, opens the list on the chosen option, or the first or the last. In the open list, moves the highlight, round from the last option to the first. |
+ * | Alt with Down, Alt with Up | Opens the list without moving the highlight, and closes it, choosing nothing. |
  * | Page Down, Page Up | In the open list, moves the highlight by as many options as the list shows at once. |
  * | Enter | Chooses the highlighted option. With nothing left in the list, creates what was typed with `creatable`, or takes it with `allows-custom-value`. On a closed field, submits the form. |
  * | Escape | Closes the list and puts the chosen words back. On a closed field, a second Escape clears a single choice. |

package/dist/combobox/root/combobox-root.js

@@ -154,7 +154,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 return;
             }
             if (!this.open) {
-                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                if (event.key === 'ArrowDown' && event.altKey) {
+                    event.preventDefault();
+                    this.requestOpen(true);
+                }
+                else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
                     event.preventDefault();
                     const fallback = event.key === 'ArrowDown' ? 'first' : 'last';
                     this.opening = this.values.length > 0 ? 'selected' : fallback;
@@ -162,6 +166,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
                 }
                 return;
             }
+            if (event.key === 'ArrowUp' && event.altKey) {
+                event.preventDefault();
+                this.close();
+                return;
+            }
             if (this.moveAroundCreate(event)) {
                 void this.updateComplete.then(() => this.linkActive());
                 return;

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

@@ -215,6 +215,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *
  * @cssstate empty - While there are no rows to show 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 HelixHeadlessDataTable extends HelixHeadlessDataTable_base {
     /**

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

@@ -984,6 +984,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.markEmpty();
         this.toggleState('error', this.errorText !== '');
         this.toggleState('empty', !this.loading && !this.hasRows);
+        this.toggleState('loading', this.loading);
         this.assign();
         this.announceSort();
         this.quietControls();

package/dist/element-events.generated.js

@@ -335,7 +335,13 @@ registerElementEvents({
         'volumechange',
         'waiting',
     ],
-    'helix-headless-video-playlist': ['helix-activate', 'helix-before-activate', 'helix-end'],
+    'helix-headless-video-playlist': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-before-reorder',
+        'helix-end',
+        'helix-reorder',
+    ],
     'helix-headless-video-playlist-item': ['helix-select'],
     'helix-headless-video-playlist-menu': ['helix-select'],
     'helix-headless-virtual-list': [

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/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.

package/dist/video-playlist/root/video-playlist-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, drawStatus, formatWords, HelixElement, HelixEndEvent, inlineStep, MixinControllerActive, StatusController, words, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, formatWords, HelixElement, HelixEndEvent, inlineStep, MixinControllerActive, ReorderController, StatusController, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessVideoPlaylistItem } from '../item/video-playlist-item.js';
@@ -12,11 +12,30 @@ import { playOrder, stepTo } from '../order.js';
 let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinControllerActive(HelixElement) {
     constructor() {
         super(...arguments);
+        this.canceledLabel = 'Canceled';
+        this.droppedLabel = 'Dropped';
         this.emptyLabel = 'No videos';
         this.label = 'Playlist';
+        this.movedLabel = '{name} moved to position {position} of {count}';
         this.noAdvance = false;
+        this.pickedUpLabel = 'Picked up {name}';
         this.playingLabel = 'Now playing {title}';
+        this.reorderable = false;
         this.status = new StatusController(this);
+        this.reorder = new ReorderController(this, {
+            axis: 'block',
+            box: (value) => this.entryFor(value)?.getBoundingClientRect(),
+            current: (event) => this.entryOf(event)?.value,
+            grip: (event) => {
+                const entry = this.entryOf(event);
+                return entry ? { element: entry, key: entry.value } : undefined;
+            },
+            holds: false,
+            keys: () => this.items.map((one) => one.value),
+            name: (value) => this.entryFor(value)?.text || value,
+            refocus: (value) => this.entryFor(value)?.focus(),
+            say: (words) => this.status.say(words),
+        });
         this.shuffle = false;
         this.chased = false;
         this.known = {
@@ -116,6 +135,21 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
         };
     }
     static { this.words = 'helix-video-playlist'; }
+    entryOf(event) {
+        const items = this.items;
+        return event
+            .composedPath()
+            .find((node) => items.includes(node) &&
+            !node.disabled);
+    }
+    entryFor(value) {
+        return this.items.find((one) => one.value === value);
+    }
+    markMoves() {
+        for (const entry of this.items) {
+            entry.move = this.reorderable ? this.reorder.moveOf(entry.value) : undefined;
+        }
+    }
     get items() {
         return [...this.querySelectorAll('*')].filter((one) => one instanceof HelixHeadlessVideoPlaylistItem && one.value !== '');
     }
@@ -228,6 +262,7 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
     }
     updated(changed) {
         super.updated?.(changed);
+        this.markMoves();
         const items = this.items;
         const current = this.resolveActive(items);
         for (const item of items) {
@@ -270,6 +305,14 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
       ${drawStatus(this.status)}`;
     }
 };
+__decorate([
+    words,
+    property({ attribute: 'canceled-label' })
+], HelixHeadlessVideoPlaylist.prototype, "canceledLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'dropped-label' })
+], HelixHeadlessVideoPlaylist.prototype, "droppedLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'empty-label' })
@@ -278,13 +321,24 @@ __decorate([
     words,
     property()
 ], HelixHeadlessVideoPlaylist.prototype, "label", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-label' })
+], HelixHeadlessVideoPlaylist.prototype, "movedLabel", void 0);
 __decorate([
     property({ attribute: 'no-advance', type: Boolean })
 ], HelixHeadlessVideoPlaylist.prototype, "noAdvance", void 0);
+__decorate([
+    words,
+    property({ attribute: 'picked-up-label' })
+], HelixHeadlessVideoPlaylist.prototype, "pickedUpLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'playing-label' })
 ], HelixHeadlessVideoPlaylist.prototype, "playingLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessVideoPlaylist.prototype, "reorderable", void 0);
 __decorate([
     property()
 ], HelixHeadlessVideoPlaylist.prototype, "repeat", void 0);