@fusion.dev/helix-headless 0.148.0 → 0.149.0

package/dist/lightbox/root/lightbox-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, } from '@fusion.dev/helix-core';
+import { CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FullscreenController, formatWords, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight, minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -18,6 +18,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.controls = false;
         this.counter = false;
         this.dismissLabel = 'Close';
+        this.fallbackLabel = 'Lightbox';
         this.idleDelay = 0;
         this.label = '';
         this.loop = false;
@@ -29,7 +30,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.statusLabel = '{index} of {count}';
         this.zoomInLabel = 'Zoom in';
         this.zoomOutLabel = 'Zoom out';
-        this.zoomStatusLabel = 'Zoomed to {percent}%';
+        this.zoomStatusLabel = 'Zoomed to {scale, number, percent}';
         this.resting = false;
         this.filled = false;
         this.announcement = '';
@@ -125,6 +126,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.requestOpen(false);
         };
     }
+    static { this.words = 'helix-lightbox'; }
     drawZoom(scale, pan) {
         const viewport = this.partNamed('viewport');
         const zoomed = scale > 1;
@@ -144,7 +146,10 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             return;
         }
         this.zoomSaid.start(400, () => {
-            this.announcement = fillTemplate(this.zoomStatusLabel, { percent: percentOf(this.zoomScale) });
+            this.announcement = formatWords(this, 'zoomStatusLabel', {
+                percent: percentOf(this.zoomScale),
+                scale: this.zoomScale,
+            });
         });
     }
     zoomTo(scale) {
@@ -272,7 +277,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         items.forEach((item, at) => {
             item.current = item === current;
             whenHydrated(item, () => {
-                item.position = fillTemplate(this.slideLabel, {
+                item.position = formatWords(this, 'slideLabel', {
                     count: items.length,
                     index: at + 1,
                     label: item.label,
@@ -301,7 +306,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.announcement =
             at === -1 || !current
                 ? ''
-                : fillTemplate(this.statusLabel, {
+                : formatWords(this, 'statusLabel', {
                     count: items.length,
                     index: at + 1,
                     label: current.label,
@@ -311,7 +316,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         const items = this.items;
         const current = resolveActiveItem(this.active, items);
         return current
-            ? fillTemplate(this.statusLabel, {
+            ? formatWords(this, 'statusLabel', {
                 count: items.length,
                 index: items.indexOf(current) + 1,
                 label: current.label,
@@ -321,7 +326,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
     render() {
         return html `<dialog
       part="dialog"
-      aria-label=${this.label || 'Lightbox'}
+      aria-label=${this.label || this.fallbackLabel}
       autofocus
       tabindex="-1"
       @cancel=${this.handleCancel}
@@ -412,8 +417,13 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessLightbox.prototype, "counter", void 0);
 __decorate([
+    words,
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessLightbox.prototype, "dismissLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessLightbox.prototype, "fallbackLabel", void 0);
 __decorate([
     property({ attribute: 'idle-delay', type: Number })
 ], HelixHeadlessLightbox.prototype, "idleDelay", void 0);
@@ -427,27 +437,35 @@ __decorate([
     property({ attribute: 'max-zoom', type: Number })
 ], HelixHeadlessLightbox.prototype, "maxZoom", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-label' })
 ], HelixHeadlessLightbox.prototype, "nextLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-label' })
 ], HelixHeadlessLightbox.prototype, "previousLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'slide-label' })
 ], HelixHeadlessLightbox.prototype, "slideLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'slide-role-label' })
 ], HelixHeadlessLightbox.prototype, "slideRoleLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'status-label' })
 ], HelixHeadlessLightbox.prototype, "statusLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'zoom-in-label' })
 ], HelixHeadlessLightbox.prototype, "zoomInLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'zoom-out-label' })
 ], HelixHeadlessLightbox.prototype, "zoomOutLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'zoom-status-label' })
 ], HelixHeadlessLightbox.prototype, "zoomStatusLabel", void 0);
 __decorate([

package/dist/line-chart/root/line-chart-root.d.ts

@@ -81,6 +81,11 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @cssproperty --chart-terminus-y - Where a series' last reading sits vertically, as a percentage. Written by the component.
  */
 export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-line-chart': { positionLabel: '{position} von {count}' } })`.
+     */
+    static words: string;
     /**
      * Draws a wash under each line, down to the floor of the plot. The washes
      * overlap and do not add up, so for parts that make a total, use

package/dist/line-chart/root/line-chart-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 { byRow, CHART_PLOT, commaList, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, unbroken, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, commaList, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, unbroken, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -16,6 +16,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         this.markers = false;
         this.zero = false;
     }
+    static { this.words = 'helix-line-chart'; }
     get rulesValue() {
         return this.gridlines !== undefined && this.gridlines !== 'category';
     }
@@ -71,8 +72,9 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             return [{ label: last.label, reading: `${one.name} ${text}` }];
         });
         const shared = latest.every((one) => one.label === latest[0]?.label);
+        const listed = new Intl.ListFormat(wordsLocale(this), { style: 'short', type: 'unit' });
         const body = shared
-            ? `${latest[0]?.label ?? ''}: ${latest.map((one) => one.reading).join(', ')}`
+            ? `${latest[0]?.label ?? ''}: ${listed.format(latest.map((one) => one.reading))}`
             : latest.map((one) => `${one.label}: ${one.reading}`).join('; ');
         const named = this.named ? `${this.named}, ` : '';
         return html `<p id="helix-chart-summary" part="summary">${named}${body}.</p>`;

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

@@ -2,6 +2,8 @@ import { HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /** The values `current` takes, which are `aria-current`'s. */
 export type ListItemCurrent = 'date' | 'location' | 'page' | 'step' | 'time' | 'true';
+/** Where a row stands in a move: the row being moved, or the one the drop indicator is beside. */
+export type ListItemMove = 'dragging' | 'drop-after' | 'drop-before';
 /**
  * @summary One row of a list.
  *
@@ -35,6 +37,11 @@ export type ListItemCurrent = 'date' | 'location' | 'page' | 'step' | 'time' | '
  * selects, whether it is selected. Its link leaves the tab order there, and
  * Enter follows it from the row.
  *
+ * **In a `reorderable` list, the row has a grip** after its `end` slot, named
+ * by the list's `move-label`. The list says which row is moving and where the
+ * drop indicator is, with the `dragging`, `drop-before`, and `drop-after`
+ * states.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Row, Entry
@@ -47,10 +54,15 @@ export type ListItemCurrent = 'date' | 'location' | 'page' | 'step' | 'time' | '
  *
  * @event {HelixActionEvent} helix-action - The reader pressed Enter on the row, or pressed the row in a list that selects nothing, in a list with `selection-mode`. Read the row from `target`. A row with `href` follows its link instead.
  *
+ * @csspart grip - The button that moves the row, in a `reorderable` list.
+ * @csspart grip-mark - The icon on the grip.
  * @csspart link - The link, when the row has `href`. It holds every region except `end`.
  * @csspart row - The row's layout. It sits inside the host so the host can carry a list marker. In a list with `selection-mode` it is the grid cell that takes focus.
  * @csspart row-current - Added to `row` while the row is `current`.
  *
+ * @cssstate dragging - The row is being moved, in a `reorderable` list.
+ * @cssstate drop-after - The row being moved goes after this one when it is dropped.
+ * @cssstate drop-before - The row being moved goes before this one when it is dropped.
  * @cssstate selected - The row is selected, in a list that selects.
  */
 export declare class HelixHeadlessListItem extends HelixElement {
@@ -77,6 +89,13 @@ export declare class HelixHeadlessListItem extends HelixElement {
      * it is coordination between elements, as `Tag.focusable` is.
      */
     focusable?: boolean | undefined;
+    /**
+     * The name of the row's grip, written by a `reorderable` list from its
+     * `move-label`, and unset in a list that does not reorder, which draws no
+     * grip. No attribute: it is coordination between elements, as `focusable`
+     * is.
+     */
+    grip?: string | undefined;
     /**
      * The URL the row links to. Leave it empty for a row that is not a link.
      *
@@ -85,6 +104,11 @@ export declare class HelixHeadlessListItem extends HelixElement {
      * to the current page on every row a consumer never asked to be one.
      */
     href: string;
+    /**
+     * Where the row stands in a move, written by a `reorderable` list: the row
+     * being moved, or the one the drop indicator is beside. Unset otherwise.
+     */
+    move?: ListItemMove | undefined;
     /**
      * The link's `rel` value. You set it yourself. It is not derived from
      * `target`, for the reason `Tree.Item` gives.
@@ -121,11 +145,19 @@ export declare class HelixHeadlessListItem extends HelixElement {
      * over.
      */
     get controls(): HTMLElement[];
+    /** @internal The grip that moves the row, in a `reorderable` list. */
+    get gripElement(): HTMLElement | null;
     /** Moves focus to the row's cell, in a list with `selection-mode`. */
     focusItem(): void;
     /** @internal Follows the row's link, as a press on it would. Called by the list on Enter. */
     follow(): void;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The grip, after `end`, in a `reorderable` list. A tab stop of its own in a
+     * list a reader reads, and reached with Left and Right in a list with
+     * `selection-mode`, as a control in `end` is.
+     */
+    private renderGrip;
     /**
      * The cell before the row's content, which this tier leaves empty.
      *

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

@@ -5,8 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, hostAria, slottedWords } from '@fusion.dev/helix-core';
+import { dotsSixVertical } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const CONTROL = 'a[href], button, input, select, textarea, [tabindex]';
 let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
     constructor() {
@@ -31,11 +33,18 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
     }
     get controls() {
         const slot = this.renderRoot?.querySelector?.('slot[name="end"]');
-        return (slot?.assignedElements({ flatten: true }) ?? [])
-            .flatMap((element) => [element, ...element.querySelectorAll('*')])
-            .filter((element) => element instanceof HTMLElement &&
-            element.matches(CONTROL) &&
-            !element.matches(':disabled'));
+        const grip = this.gripElement;
+        return [
+            ...(slot?.assignedElements({ flatten: true }) ?? [])
+                .flatMap((element) => [element, ...element.querySelectorAll('*')])
+                .filter((element) => element instanceof HTMLElement &&
+                element.matches(CONTROL) &&
+                !element.matches(':disabled')),
+            ...(grip ? [grip] : []),
+        ];
+    }
+    get gripElement() {
+        return this.renderRoot?.querySelector?.('[part="grip"]') ?? null;
     }
     focusItem() {
         this.cell?.focus();
@@ -51,6 +60,18 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
         this.internals.ariaCurrent =
             this.current !== undefined && this.href === '' ? this.current : null;
         this.toggleState('selected', this.selected === true);
+        this.toggleState('dragging', this.move === 'dragging');
+        this.toggleState('drop-after', this.move === 'drop-after');
+        this.toggleState('drop-before', this.move === 'drop-before');
+    }
+    renderGrip() {
+        return this.grip === undefined
+            ? nothing
+            : html `<button part="grip" type="button" tabindex=${this.grouped ? '-1' : nothing} aria-label=${this.grip}>
+          <svg aria-hidden="true" fill="currentColor" part="grip-mark" viewBox=${dotsSixVertical.viewBox}>
+            ${unsafeSVG(dotsSixVertical.content)}
+          </svg>
+        </button>`;
     }
     renderRail() {
         return nothing;
@@ -70,7 +91,7 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
           tabindex=${tabindex}
           aria-labelledby=${labelledby}
           aria-describedby=${describedby}
-        >${content}<slot name="end"></slot></div>`
+        >${content}<slot name="end"></slot>${this.renderGrip()}</div>`
             : html `<div
           part="row${this.current === undefined ? '' : ' row-current'}"
           role=${role}
@@ -85,7 +106,7 @@ let HelixHeadlessListItem = class HelixHeadlessListItem extends HelixElement {
           aria-current=${this.current ?? nothing}
           tabindex=${this.grouped ? '-1' : nothing}
           >${content}</a
-        ><slot name="end"></slot></div>`;
+        ><slot name="end"></slot>${this.renderGrip()}</div>`;
     }
 };
 __decorate([
@@ -101,9 +122,15 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessListItem.prototype, "focusable", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessListItem.prototype, "grip", void 0);
 __decorate([
     property()
 ], HelixHeadlessListItem.prototype, "href", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessListItem.prototype, "move", void 0);
 __decorate([
     property()
 ], HelixHeadlessListItem.prototype, "rel", void 0);

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

@@ -46,6 +46,23 @@ import { type ListSelectionBehavior, type ListSelectionMode } from '../selection
  * in `end` `tabindex="-1"` to leave it to the arrow keys and out of the tab
  * order.
  *
+ * **`reorderable` lets you move rows.** Each row gets a grip after its `end`
+ * slot, named by `move-label`. Drag a grip to move its row, and the list
+ * scrolls near an edge. Or press a grip with Space, Enter, or a click to pick
+ * up its row, move it with the arrow keys, and press the grip again to drop
+ * it. A click on another row drops it there, and Escape puts it back. The list
+ * says each step in its `live` region. A drop sends `helix-before-reorder`,
+ * which you can refuse, and then `helix-reorder`, whose `keys` hold every
+ * row's value in the new order. **You move the rows**: the list moves no
+ * element of yours, so your framework keeps the order it rendered.
+ *
+ * | Key, on a held row's grip | What it does |
+ * |---|---|
+ * | Down, Up | Moves the row one place. |
+ * | Home, End | Moves the row to the top or the bottom. |
+ * | Space, Enter | Drops the row. |
+ * | Escape | Puts the row back where it was. |
+ *
  * `start` and `reversed` number an ordered list as `<ol>` does. The list
  * writes where the numbers start and which way they run as `--list-first` and
  * `--list-step` on its slot, which the styled tier counts from. Reversed with
@@ -63,11 +80,28 @@ import { type ListSelectionBehavior, type ListSelectionMode } from '../selection
  * @event {Event} change - Fired once a press has changed which rows are selected.
  * @event {HelixActionEvent} helix-action - Sent from a row when the reader acts on it: Enter, or a press in a list that selects nothing. Read the row from `target`. A row with `href` follows its link instead.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a press changes which rows are selected, with the `value` it would leave. Cancelable.
+ * @event {HelixBeforeReorderEvent} helix-before-reorder - Fired when a row is dropped at a new place, in a `reorderable` list, with every row's value in the new order. Cancelable: cancel it to keep the row where it is.
+ * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen.
+ *
+ * @csspart drag-preview - A copy of the row a pointer drags, which follows the pointer in the top layer until the row is let go, in a `reorderable` list. Hidden from assistive technology.
+ * @csspart live - The region that says each step of a move to screen readers, in a `reorderable` list. Drawn from the first move. Visually hidden in the styled tier.
  *
  * @cssproperty --list-first - The number of the first row, written where `start` or `reversed` moves it.
  * @cssproperty --list-step - What each row adds to the number before it: `1`, or `-1` where `reversed`.
  */
 export declare class HelixHeadlessList extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-list': { moveLabel: '{name} verschieben' } })`.
+     */
+    static words: string;
+    /**
+     * What screen readers hear when a held row is put back, or a move is
+     * refused, in a `reorderable` list.
+     */
+    canceledLabel: string;
+    /** What screen readers hear when a row is dropped, in a `reorderable` list. */
+    droppedLabel: string;
     /**
      * The kind of list, which follows from the content.
      *
@@ -95,6 +129,27 @@ export declare class HelixHeadlessList extends HelixElement {
      * The list's name, read by screen readers.
      */
     label: string;
+    /**
+     * What screen readers hear each time an arrow key moves a held row, in a
+     * `reorderable` list. `{name}` is the row's words, `{position}` the place it
+     * would go, counting from 1, and `{count}` the number of rows.
+     */
+    movedLabel: string;
+    /**
+     * The name of each row's grip, in a `reorderable` list. `{name}` is
+     * replaced with the row's words.
+     */
+    moveLabel: string;
+    /**
+     * What screen readers hear when a key or a click picks up a row, in a
+     * `reorderable` list. `{name}` is the row's words.
+     */
+    pickedUpLabel: string;
+    /**
+     * Lets you move rows by dragging a grip, or with the keys. The list moves no
+     * row itself: you move your data on `helix-reorder`.
+     */
+    reorderable: boolean;
     /**
      * Numbers an ordered list downward, so the count falls row by row and ends at
      * its last row, as `<ol reversed>` does.
@@ -150,6 +205,15 @@ export declare class HelixHeadlessList extends HelixElement {
      * from the focused row and without wrapping. Left and Right are the row's.
      */
     protected readonly keys: KeyboardNavigationController;
+    /** The region that says each step of a move. */
+    private readonly status;
+    /** The value of a row just moved, whose grip takes focus back once the page has moved it. */
+    private moved;
+    /**
+     * Moving rows by their grips, in a `reorderable` list. The rows are the
+     * page's, so a drop asks the page to move them.
+     */
+    private readonly reorder;
     /** Whether the list is a grid a reader moves through. */
     private get interactive();
     /** The rows the list holds, in order. */
@@ -160,6 +224,29 @@ export declare class HelixHeadlessList extends HelixElement {
     private navigable;
     /** What a row stands for in `value`: its own `value`, or its words. */
     private valueFor;
+    /** The row that stands for a value. */
+    private rowFor;
+    /**
+     * Asks the page to move a row: `helix-before-reorder`, which can refuse it,
+     * then `helix-reorder`. Reports whether it stood.
+     */
+    private requestMove;
+    /**
+     * Tells every row whether it has a grip and where it stands in a move. Through
+     * `whenHydrated`, as `sync` is.
+     */
+    private syncMoves;
+    /**
+     * Gives focus back to the grip of a row the page has just moved, where moving
+     * the row took focus to the body.
+     *
+     * The page moves its rows when it likes, in the same task or a render later,
+     * so this waits for the rows to change. Focus that went anywhere but the body
+     * is where you put it, and is left there.
+     */
+    private refocus;
+    /** Whether the rows changed since the last move asked for one, for `refocus`. */
+    private rowsChanged;
     /**
      * Tells every row its place: whether it holds the one tab stop and whether
      * it is selected, or that it is a plain row. Through `whenHydrated`, so a

package/dist/list/root/list-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 { commaList, customElement, focusItemOf, HelixActionEvent, HelixElement, hostAria, inlineStep, KeyboardNavigationController, pressedOwnControl, requestValue, rovingStop, scrollRoom, selectsAll, typeaheadByWords, whenHydrated, } from '@fusion.dev/helix-core';
+import { commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, hostAria, inlineStep, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessListItem } from '../item/list-item.js';
@@ -13,7 +13,13 @@ import { choiceValue, pageReach, rowStop, } from '../selection.js';
 let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
     constructor() {
         super(...arguments);
+        this.canceledLabel = 'Canceled';
+        this.droppedLabel = 'Dropped';
         this.label = '';
+        this.movedLabel = '{name} moved to position {position} of {count}';
+        this.moveLabel = 'Move {name}';
+        this.pickedUpLabel = 'Picked up {name}';
+        this.reorderable = false;
         this.reversed = false;
         this.selectionBehavior = 'toggle';
         this.value = '';
@@ -25,6 +31,33 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             typeahead: typeaheadByWords(),
             wrap: false,
         });
+        this.status = new StatusController(this);
+        this.reorder = new ReorderController(this, {
+            axis: 'block',
+            box: (key) => this.rowFor(key)?.getBoundingClientRect(),
+            drop: (move) => this.requestMove(move),
+            enabled: () => this.reorderable,
+            grip: (event) => {
+                const row = this.rowOf(event);
+                const element = row?.gripElement;
+                return row && element && event.composedPath().includes(element)
+                    ? { element, key: this.valueFor(row) }
+                    : undefined;
+            },
+            item: (event) => {
+                const row = this.rowOf(event);
+                return row ? this.valueFor(row) : undefined;
+            },
+            keys: () => this.rows.map((row) => this.valueFor(row)),
+            name: (key) => this.rowFor(key)?.words || key,
+            preview: (key) => this.rowFor(key),
+            say: (said) => this.status.say(said),
+            scroller: () => {
+                const first = this.rows[0];
+                return first ? scrollingAncestor(first, { axis: 'y', overflowing: true }) : null;
+            },
+        });
+        this.rowsChanged = false;
         this.handleKeyCapture = (event) => {
             this.moving = { extend: event.shiftKey, toggle: event.ctrlKey || event.metaKey };
         };
@@ -93,9 +126,11 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             }
         };
         this.handleSlotChange = () => {
+            this.rowsChanged = true;
             this.requestUpdate();
         };
     }
+    static { this.words = 'helix-list'; }
     get interactive() {
         return this.selectionMode !== undefined;
     }
@@ -115,6 +150,54 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
     valueFor(row) {
         return row.value || row.words;
     }
+    rowFor(key) {
+        return this.rows.find((row) => this.valueFor(row) === key);
+    }
+    requestMove({ from, key, to }) {
+        const old = this.rows.map((row) => this.valueFor(row));
+        const keys = placeKey(old, old, key, to);
+        const stood = requestReorder(this, {
+            from,
+            key,
+            keys,
+            kind: 'item',
+            to: keys.indexOf(key),
+            value: keys.join(','),
+        });
+        this.moved = stood ? key : undefined;
+        this.rowsChanged = false;
+        return stood;
+    }
+    syncMoves() {
+        const held = this.reorder.held;
+        const mark = this.reorder.mark;
+        for (const row of this.rows) {
+            const key = this.valueFor(row);
+            whenHydrated(row, () => {
+                row.grip =
+                    this.reorderable && !row.disabled
+                        ? formatWords(this, 'moveLabel', { name: row.words || key })
+                        : undefined;
+                row.move =
+                    held?.key === key
+                        ? 'dragging'
+                        : mark?.key === key
+                            ? `drop-${mark.edge}`
+                            : undefined;
+            });
+        }
+    }
+    refocus() {
+        const row = this.moved === undefined ? undefined : this.rowFor(this.moved);
+        if (!row || !this.rowsChanged) {
+            return;
+        }
+        const active = deepActiveElement();
+        if (active === null || active === document.body) {
+            row.gripElement?.focus();
+        }
+        this.moved = undefined;
+    }
     sync() {
         const mode = this.selectionMode;
         const chosen = new Set(commaList(this.value));
@@ -240,6 +323,10 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         if (this.interactive || changed.get('selectionMode') !== undefined) {
             this.sync();
         }
+        if (this.reorderable || changed.get('reorderable') !== undefined) {
+            this.syncMoves();
+            this.refocus();
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -251,15 +338,38 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         return counted ? `--list-first: ${counted.first}; --list-step: ${counted.step}` : nothing;
     }
     render() {
-        return html `<slot style=${this.numbers} @slotchange=${this.handleSlotChange}></slot>`;
+        return html `<slot style=${this.numbers} @slotchange=${this.handleSlotChange}></slot>${drawStatus(this.status)}${this.reorder.drawDragPreview()}`;
     }
 };
+__decorate([
+    words,
+    property({ attribute: 'canceled-label' })
+], HelixHeadlessList.prototype, "canceledLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'dropped-label' })
+], HelixHeadlessList.prototype, "droppedLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessList.prototype, "kind", void 0);
 __decorate([
     property()
 ], HelixHeadlessList.prototype, "label", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-label' })
+], HelixHeadlessList.prototype, "movedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'move-label' })
+], HelixHeadlessList.prototype, "moveLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'picked-up-label' })
+], HelixHeadlessList.prototype, "pickedUpLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessList.prototype, "reorderable", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessList.prototype, "reversed", void 0);

package/dist/listbox/reorder/index.d.ts

@@ -0,0 +1 @@
+export { ListboxReorderController, reorderListbox } from './listbox-reorder.js';

package/dist/listbox/reorder/index.js

@@ -0,0 +1,4 @@
+import { HelixHeadlessListbox } from '../root/listbox-root.js';
+import { reorderListbox } from './listbox-reorder.js';
+reorderListbox(HelixHeadlessListbox);
+export { ListboxReorderController, reorderListbox } from './listbox-reorder.js';