@fusion.dev/helix-headless 0.163.0 → 0.165.0

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

@@ -0,0 +1 @@
+export * from './option-root.js';

package/dist/option/root/index.js

@@ -0,0 +1 @@
+export * from './option-root.js';

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/tag/root/index.d.ts

@@ -0,0 +1 @@
+export * from './tag-root.js';

package/dist/tag/root/index.js

@@ -0,0 +1 @@
+export * from './tag-root.js';

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

@@ -1,6 +1,6 @@
 import { AriaForwardController, HelixFormElement, type HourCycle } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 import '../../time-picker/index.js';
 declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSegmentedFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -349,8 +349,9 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     /**
      * Each time, where `mode` holds several, sent one entry each.
      *
-     * One time that is text and no time, such as `2:45 P`, is sent as an empty
-     * entry, as a native time field sends a time it cannot read.
+     * Text that is no time, such as `2:45 P`, is sent as one empty entry, as a
+     * native time field sends a time it cannot read. Measured before this: a
+     * range written `09:00/10:30` was invalid and submitted the text.
      */
     protected get answers(): readonly string[] | undefined;
     /** What is wrong with the times, which the text input cannot say. */

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

@@ -4,13 +4,13 @@ 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, valueAsTime as asTime, clockLocale, customElement, drawIcon, formatWords, timeAsValue as fromTime, HelixClearEvent, HelixFormElement, handedLocale, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, readWrittenTime, timeFault, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsTime as asTime, clockLocale, customElement, drawIcon, formatWords, timeAsValue as fromTime, HelixClearEvent, HelixFormElement, handedLocale, hostWords, isClockValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, readWrittenTime, slottedWords, timeFault, words, wordsLocale, writeClock, } from '@fusion.dev/helix-core';
 import { clock, x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 import '../../time-picker/index.js';
 let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmentedField(MixinPickerEditing(MixinPickerField(MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement))))))) {
     constructor() {
@@ -174,7 +174,8 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
     }
     get answers() {
         if (this.mode !== undefined) {
-            return this.held;
+            const held = this.held;
+            return held.every((one) => this.isTime(one)) ? held : [''];
         }
         const text = this.value.trim();
         return text === '' || this.isTime(text) ? undefined : [''];
@@ -242,7 +243,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinSegmented
       variant=${this.variant ?? nothing}
       disable-times=${this.disableTimes || nothing}
       manual
-      label=${this.label || 'Time'}
+      label=${hostWords(this, slottedWords(this, ['label']) || this.label) || 'Time'}
       hour-cycle=${this.hourCycle ?? nothing}
       locale=${handedLocale(this) || nothing}
       max=${this.max}

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

@@ -1,7 +1,7 @@
 import { HelixFormElement, type HourCycle, type PickerFailure } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../listbox/index.js';
-import '../../option/index.js';
+import '../../option/root/index.js';
 declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFeedbackInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & typeof HelixFormElement;
 /**
  * @summary A control for choosing a time from a list or from wheels.

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

@@ -10,7 +10,7 @@ import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import { wheelName } from '../wheel-name.js';
 import '../../listbox/index.js';
-import '../../option/index.js';
+import '../../option/root/index.js';
 let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerFeedback(MixinControllerValue(HelixFormElement)) {
     constructor() {
         super(...arguments);
@@ -275,7 +275,8 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
             this.internals.setFormValue(null);
             return;
         }
-        reportValues(this.internals, this.name, this.held);
+        const held = this.held;
+        reportValues(this.internals, this.name, held.every((one) => valueAsSeconds(one) !== null) ? held : ['']);
     }
     async revealWhenSettled() {
         const settling = [
@@ -356,6 +357,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       data-column=${part}
       aria-describedby=${this.describedBy}
       aria-invalid=${this.marked ? 'true' : nothing}
+      aria-required=${this.required ? 'true' : nothing}
       exportparts="empty: column-empty, error: column-error, feedback: column-feedback, filter-icon: column-filter-icon,
         filter-mark: column-filter-mark, hint: column-hint, items: column-items, label: column-label,
         live: column-live, loading: column-loading, search: column-search, search-field: column-search-field"
@@ -408,6 +410,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
       part="list"
       aria-describedby=${this.describedBy}
       aria-invalid=${this.marked ? 'true' : nothing}
+      aria-required=${this.required ? 'true' : nothing}
       exportparts="empty: list-empty, error: list-error, feedback: list-feedback, filter-icon: list-filter-icon,
         filter-mark: list-filter-mark, hint: list-hint, items: list-items, label: list-label,
         live: list-live, loading: list-loading, search: list-search, search-field: list-search-field"

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);