@fusion.dev/helix-headless 0.147.0 → 0.149.0

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,17 +4,22 @@ 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, HelixActionEvent, HelixBeforeChangeEvent, HelixElement, hostAria, inlineStep, KeyboardNavigationController, requestChange, rovingStop, 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';
 import { numbering } from '../numbering.js';
 import { choiceValue, pageReach, rowStop, } from '../selection.js';
-const PRESSABLE = 'a[href], button, input, label, select, textarea, [tabindex]';
 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 = '';
@@ -26,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 };
         };
@@ -71,11 +103,8 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             if (!row) {
                 return;
             }
-            const path = event.composedPath();
             const cell = row.cell;
-            const end = cell && path.includes(cell) ? path.indexOf(cell) : path.indexOf(row);
-            const inner = path.slice(0, Math.max(0, end));
-            if (inner.some((node) => node instanceof HTMLElement && node.matches(PRESSABLE))) {
+            if (pressedOwnControl(event, cell && event.composedPath().includes(cell) ? cell : row)) {
                 return;
             }
             if (this.selectionMode === 'none') {
@@ -97,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;
     }
@@ -110,18 +141,63 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         return this.interactive ? this.rows.filter((row) => !row.disabled) : [];
     }
     navigable(row) {
-        return {
-            contains: (node) => row.contains(node),
+        return focusItemOf(row, {
             disabled: row.disabled,
-            focusItem: () => row.focusItem(),
-            select: () => { },
-            selected: false,
+            focus: () => row.focusItem(),
             words: row.words,
-        };
+        });
     }
     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));
@@ -149,14 +225,8 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         if (next === null) {
             return;
         }
-        requestChange({
-            apply: (value) => {
-                this.value = value;
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            },
-            event: (value) => new HelixBeforeChangeEvent({ value }),
-            host: this,
-            next,
+        requestValue(this, next, (value) => {
+            this.value = value;
         });
     }
     choice(row, extend, toggle, arrived) {
@@ -203,8 +273,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             const box = one.getBoundingClientRect();
             return { bottom: box.bottom, top: box.top };
         });
-        const room = this.scrollHeight > this.clientHeight + 1 ? this.clientHeight : window.innerHeight;
-        const target = rows[pageReach(edges, rows.indexOf(row), room, step)];
+        const target = rows[pageReach(edges, rows.indexOf(row), scrollRoom(this), step)];
         if (target && target !== row) {
             target.focusItem();
         }
@@ -254,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);
@@ -265,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';

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

@@ -0,0 +1,83 @@
+import type { CSSResult, ReactiveController } from 'lit';
+import type { HelixHeadlessListbox } from '../root/listbox-root.js';
+/**
+ * Moves the options of a `reorderable` listbox, by pointer and by keyboard,
+ * and says each move in the list's live region.
+ *
+ * **Its own entry**, `@fusion.dev/helix-headless/listbox/reorder`, so a list
+ * that never moves options carries none of this. Importing the entry gives
+ * every listbox one, and `reorderable` turns it on.
+ *
+ * - **Alt with Up or Down** moves the highlighted option a place at once, and
+ *   Alt with Home or End to either end, as the APG's rearrangeable listbox
+ *   does. The highlight stays on the option.
+ * - **A pointer** drags a whole option, with no grip: a press that travels is
+ *   a drag, and one that does not is still a press that chooses it. The list
+ *   scrolls near an edge.
+ * - **The page moves the options.** A drop sends `helix-before-reorder` and
+ *   then `helix-reorder` with every value in the new order. An option in a
+ *   group moves within its group, and a list of `items` moves its records.
+ *
+ * It marks the option being dragged with `:state(dragging)` and the one the
+ * drop indicator is beside with `:state(drop-before)` or `:state(drop-after)`.
+ * While a pointer drags an option, a copy of it follows the pointer as the
+ * list's `drag-preview` part. The styled tier's entry draws those through two
+ * sheets it hands in, which this adopts while the list reorders: one into
+ * each option, and one into the list.
+ */
+export declare class ListboxReorderController implements ReactiveController {
+    private readonly host;
+    /** The sheet each option adopts while the list reorders, from the styled tier. */
+    sheet: CSSResult | undefined;
+    /**
+     * The sheet the list adopts while it reorders, from the styled tier, which
+     * draws the `drag-preview` part.
+     */
+    listSheet: CSSResult | undefined;
+    /** The options marked last, so a mark that moves is taken off where it was. */
+    private marked;
+    private readonly reorder;
+    constructor(host: HelixHeadlessListbox, sheet?: CSSResult, listSheet?: CSSResult);
+    /**
+     * Marks where each option stands once the list has drawn: after the update,
+     * because a list of `items` draws its options in its own last step, and
+     * reuses each element for another record as it scrolls.
+     */
+    hostUpdated(): void;
+    /**
+     * Draws the list's `drag-preview` part at the end of its shadow root while
+     * it reorders, and takes it away after. The list's own template has none to
+     * draw, and the controller fills this one while a pointer drags an option.
+     */
+    private drawPreview;
+    /** The options the list draws now: its elements, or the records it drew of `items`. */
+    private get drawn();
+    /** The option an event passed through. */
+    private optionOf;
+    /** The drawn option that stands for a value. */
+    private optionFor;
+    /**
+     * The values an option moves among: every record of `items`, or the options
+     * beside it, which in a list of groups are the options of its group.
+     */
+    private keysAround;
+    /** Puts each option's state in a move on it, and the styled tier's sheets. */
+    private mark;
+}
+/**
+ * Gives every listbox of a class a `ListboxReorderController`, and the class
+ * the words it says, as properties that read and write their attributes:
+ * `movedLabel`, `canceledLabel`, `droppedLabel`, and `pickedUpLabel`.
+ *
+ * The entries call it for their own tier's class: the headless entry for
+ * `HelixHeadlessListbox`, and the styled one for `HelixListbox`, with the
+ * sheet that draws a move on an option and the sheet that draws the list's
+ * `drag-preview` part. A class that has registered keeps the list of what
+ * it was given when it did, so each is given its own.
+ *
+ * **Lists already on the page are given one too.** A page that imports the
+ * list and then this entry has its lists upgraded, and built, before this
+ * runs, so the ones in the document and its open shadow roots are found and
+ * given theirs, and every list built after gets one as it is built.
+ */
+export declare const reorderListbox: (element: typeof HelixHeadlessListbox, sheet?: CSSResult, listSheet?: CSSResult) => void;