@fusion.dev/helix-headless 0.147.0 → 0.148.0

package/dist/speed-dial/root/speed-dial-root.js

@@ -4,20 +4,31 @@ 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 { anchorElement, customElement, drawIcon, HelixElement, KeyboardNavigationController, MixinControllerOpen, PopoverController, slottedWords, tellDisclosure, typeaheadBy, } from '@fusion.dev/helix-core';
+import { anchorElement, customElement, drawIcon, focusTarget, HelixElement, KeyboardNavigationController, linkDescription, MixinControllerOpen, PopoverController, slottedWords, tellDisclosure, typeaheadByWords, unlinkDescription, } from '@fusion.dev/helix-core';
 import { plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { LongPress } from '../long-press.js';
+const navigable = (item) => ({
+    contains: (node) => item.contains(node),
+    disabled: item.disabled,
+    focusItem: () => item.focusItem(),
+    select: () => item.select(),
+    selected: item.active,
+    words: slottedWords(item, ['']),
+});
 let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
         this.label = 'Actions';
+        this.longPressLabel = 'Long press or press Alt+Down to show the actions';
         this.offset = 12;
+        this.openOn = 'click';
         this.placement = 'top-end';
         this.keys = new KeyboardNavigationController(this, {
-            items: () => (this.open ? this.items : []),
+            items: () => (this.open ? this.items.map(navigable) : []),
             selects: () => false,
-            typeahead: typeaheadBy((item) => slottedWords(item, [''])),
+            typeahead: typeaheadByWords(),
         });
         this.focusOnOpen = false;
         this.panel = new PopoverController(this, {
@@ -29,13 +40,48 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
             placement: () => this.placement,
             surface: () => this.partNamed('actions'),
         });
+        this.longPress = new LongPress(this, {
+            onLongPress: () => {
+                if (!this.open) {
+                    this.focusOnOpen = this.requestOpen(true);
+                }
+            },
+        });
         this.handleTriggerClick = () => {
             if (this.open) {
                 this.requestOpen(false);
                 return;
             }
+            if (this.pressHeld) {
+                return;
+            }
             this.focusOnOpen = this.requestOpen(true);
         };
+        this.handleHeldClick = (event) => {
+            if (this.pressHeld && this.longPress.takeClick()) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+            }
+        };
+        this.handleTriggerPointerDown = (event) => {
+            if (this.pressHeld && !this.open) {
+                this.longPress.down(event);
+            }
+        };
+        this.handleTriggerPointerMove = (event) => {
+            this.longPress.move(event);
+        };
+        this.handleTriggerPointerUp = () => {
+            this.longPress.up();
+        };
+        this.handleTriggerPointerCancel = () => {
+            this.longPress.cancel();
+        };
+        this.handleTriggerContextMenu = (event) => {
+            if (this.pressHeld) {
+                event.preventDefault();
+            }
+        };
         this.handleSelect = (event) => {
             queueMicrotask(() => {
                 if (!event.defaultPrevented) {
@@ -45,6 +91,12 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         };
         this.handleKeydown = (event) => {
             if (!this.open) {
+                if (this.pressHeld &&
+                    event.altKey &&
+                    (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+                    event.preventDefault();
+                    this.focusOnOpen = this.requestOpen(true);
+                }
                 return;
             }
             if (event.key === 'Tab') {
@@ -58,13 +110,26 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
             this.close();
             event.preventDefault();
         };
+        this.handleTriggerFocusIn = () => {
+            if (this.pressHeld) {
+                this.describeTrigger(true);
+            }
+        };
     }
     get trigger() {
         return anchorElement(this.renderRoot?.querySelector('slot[name="trigger"]'), this.partNamed('trigger') ?? this);
     }
     get items() {
         const slot = this.renderRoot?.querySelector('slot:not([name])');
-        return (slot?.assignedElements?.() ?? []).filter((one) => one.isSpeedDialItem === true);
+        const isItem = (one) => one.isSpeedDialItem === true;
+        return (slot?.assignedElements?.() ?? []).flatMap((one) => isItem(one)
+            ? [one]
+            : one.isSpeedDialGroup === true
+                ? [...one.children].filter(isItem)
+                : []);
+    }
+    get pressHeld() {
+        return this.openOn === 'long-press';
     }
     focus(options) {
         const trigger = this.trigger;
@@ -84,11 +149,18 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelect);
         this.addEventListener('keydown', this.handleKeydown);
+        this.addEventListener('click', this.handleHeldClick, true);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        if (this.described) {
+            unlinkDescription(this.described, this);
+            this.described = undefined;
+            this.internals.ariaLabel = null;
+        }
         this.removeEventListener('helix-select', this.handleSelect);
         this.removeEventListener('keydown', this.handleKeydown);
+        this.removeEventListener('click', this.handleHeldClick, true);
     }
     announce() {
         const trigger = this.trigger;
@@ -97,9 +169,27 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         }
         tellDisclosure(trigger, this.open, 'menu');
     }
+    describeTrigger(light = false) {
+        const trigger = this.trigger;
+        const slotted = this.pressHeld && trigger !== this && trigger !== this.partNamed('trigger');
+        const control = slotted ? focusTarget(trigger) : undefined;
+        if (this.described && this.described !== control) {
+            unlinkDescription(this.described, this);
+            this.described = undefined;
+        }
+        if (control && control !== this.described && linkDescription(control, this, light)) {
+            this.described = control;
+        }
+        this.internals.ariaLabel = this.described ? this.longPressLabel : null;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        requestAnimationFrame(() => this.describeTrigger());
+    }
     updated(changed) {
         super.updated?.(changed);
         this.announce();
+        this.describeTrigger();
         if (this.open && this.focusOnOpen) {
             this.focusOnOpen = false;
             this.updateComplete.then(() => {
@@ -110,10 +200,22 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         }
     }
     renderTrigger() {
-        return html `<slot name="trigger" @click=${this.handleTriggerClick}>
+        const held = this.pressHeld;
+        return html `<slot
+      name="trigger"
+      @click=${this.handleTriggerClick}
+      @contextmenu=${this.handleTriggerContextMenu}
+      @focusin=${this.handleTriggerFocusIn}
+      @pointercancel=${this.handleTriggerPointerCancel}
+      @pointerdown=${this.handleTriggerPointerDown}
+      @pointermove=${this.handleTriggerPointerMove}
+      @pointerup=${this.handleTriggerPointerUp}
+      @slotchange=${() => this.describeTrigger()}
+    >
       <button
         part="trigger"
         type="button"
+        aria-describedby=${held ? 'long-press' : nothing}
         aria-expanded=${this.open ? 'true' : 'false'}
         aria-haspopup="menu"
         aria-label=${this.label}
@@ -121,6 +223,7 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         ${''}
         ${drawIcon(plus)}
       </button>
+      ${held ? html `<span id="long-press" hidden>${this.longPressLabel}</span>` : nothing}
     </slot>`;
     }
     render() {
@@ -139,9 +242,15 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
 __decorate([
     property()
 ], HelixHeadlessSpeedDial.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'long-press-label' })
+], HelixHeadlessSpeedDial.prototype, "longPressLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSpeedDial.prototype, "offset", void 0);
+__decorate([
+    property({ attribute: 'open-on' })
+], HelixHeadlessSpeedDial.prototype, "openOn", void 0);
 __decorate([
     property()
 ], HelixHeadlessSpeedDial.prototype, "placement", void 0);

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

@@ -13,8 +13,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * added at `firstUpdated` and is not in the server markup. Before it appears,
  * both dividers work on their own.
  *
- * The divider has `role="separator"` and `aria-valuenow`, and `aria-controls`
- * names the start pane. Drag it with a pointer or move it with the arrow keys,
+ * The divider has `role="separator"` and `aria-valuenow`, with
+ * `aria-valuetext` saying the start pane's share as a percentage in the
+ * reader's locale, and `aria-controls` names the start pane. Drag it with a pointer or move it with the arrow keys,
  * press `Home` or `End` to move it to its bounds, and press `Enter` to collapse
  * the start pane and open it again. A drag in progress is tracked as a state, so both dividers a
  * corner moves stay lit for as long as they move.
@@ -36,13 +37,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/splitter
  *
  * @slot end - The pane after the divider.
+ * @slot handle - A mark drawn at the middle of the divider, such as a grip icon. It takes no focus and no pointer of its own: a press on it is a press on the divider.
  * @slot start - The pane before the divider.
  *
  * @event {HelixBeforeCollapseEvent} helix-before-collapse - Fired before a pane shuts or reopens, whether or not the resize that caused it was allowed. It carries its own position, because a shut pane sits at `collapsed-size`. Cancelable: canceling it leaves the pane as it was and the divider where the gesture put it.
  * @event {HelixBeforeResizeEvent} helix-before-resize - Fired before the divider settles, and only when the gesture moved it. A press that moved nothing, a drag that came back, an arrow key with no room left, and a corner that moved only the other divider do not fire it. Cancelable: canceling it leaves the position to you and keeps the rest of the gesture, so a collapse the gesture reached still fires `helix-before-collapse`, which you can also cancel. A dragged divider stays where it was dropped until you set your own `position`.
  * @event {HelixCollapseEvent} helix-collapse - Fired after a pane shuts or reopens, with the side that is shut, or empty where both are open.
  * @event {HelixResizedEvent} helix-resized - Fired after the divider settles somewhere new, with the new position.
- * @event {Event} input - Fired each time a drag moves the divider, before it settles, as a range input does while it is dragged. Read `position` for where it is now.
+ * @event {Event} input - Fired each time the divider moves, as a range input does: on each step of a drag, and before `helix-resized` for a key, a double click or a corner. Read `position` for where it is now.
  *
  * @csspart corner - The handle where two dividers cross, added on the client.
  * @csspart end - The box that holds the second pane.
@@ -52,7 +54,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssproperty --splitter-corner-at - Where a nested splitter crosses this one, as a percentage.
  * @cssproperty --splitter-position - Where the divider sits, as a percentage of the box.
  *
+ * @cssstate collapsed - While a pane is shut. `data-collapsed` on the host says which.
  * @cssstate dragging - While the pointer or a corner holds the divider.
+ * @cssstate vertical - While the panes are one above the other, whether `orientation` says so or `auto` turned them.
  */
 export declare class HelixHeadlessSplitter extends HelixElement {
     /**

package/dist/splitter/root/splitter-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessSplitter_1;
-import { AriaForwardController, capturePointer, closestInstance, commaList, customElement, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixCollapseEvent, HelixElement, HelixResizedEvent, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { AriaForwardController, capturePointer, closestInstance, commaList, customElement, formatPercent, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixCollapseEvent, HelixElement, HelixResizedEvent, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { snapTo } from '../snap.js';
@@ -144,6 +144,9 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
                 const previous = this.position;
                 this.positionState = value;
                 this.requestUpdate('position', previous);
+                if (value !== previous) {
+                    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+                }
                 this.dispatchEvent(new HelixResizedEvent({ value: String(value) }));
             },
             event: (value) => new HelixBeforeResizeEvent({ value: String(value) }),
@@ -447,6 +450,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         super.firstUpdated(changed);
         this.watchWidth();
         this.findOuter();
+        this.finishHydration();
     }
     updated(changed) {
         super.updated(changed);
@@ -473,6 +477,8 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('dragging', this.dragging);
+        this.toggleState('collapsed', this.collapsed !== undefined);
+        this.toggleState('vertical', this.vertical);
     }
     render() {
         const position = this.showing;
@@ -494,7 +500,11 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         aria-valuemax=${this.collapsed ? 100 : this.clamp(this.maxPercent)}
         aria-valuemin=${this.collapsed ? 0 : this.clamp(this.minPercent)}
         aria-valuenow=${Math.round(position)}
-        aria-valuetext=${this.collapsed ? this.collapsedLabel : nothing}
+        aria-valuetext=${this.collapsed
+            ? this.collapsedLabel
+            : this.hydrating
+                ? nothing
+                : formatPercent(Math.round(position) / 100)}
         ?data-dragging=${this.dragging}
         ?data-flush=${this.flush}
         @dblclick=${this.handleDoubleClick}
@@ -503,7 +513,9 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         @pointerdown=${this.handlePointerDown}
         @pointermove=${this.handlePointerMove}
         @pointerup=${this.handlePointerUp}
-      ></div>
+      >
+        <slot name="handle"></slot>
+      </div>
       <div part="end" ?data-dragging=${this.dragging}>
         <slot name="end"></slot>
       </div>
@@ -516,6 +528,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
           aria-valuemax="100"
           aria-valuemin="0"
           aria-valuenow=${Math.round(crossing.at)}
+          aria-valuetext=${formatPercent(Math.round(crossing.at) / 100)}
           data-cross=${index}
           style="--splitter-corner-at: ${crossing.at}%; --splitter-position: ${position}%"
           @dblclick=${this.handleCornerDoubleClick}

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

@@ -14,7 +14,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *   table with no `TableColumn` heads its columns with.
  *
  * The role is on the host so the cell stays a child of its row in the flat
- * tree, which keeps the table structure intact.
+ * tree, which keeps the table structure intact. In a `grid` table a value is
+ * a `gridcell`, and the table gives the cell a `tabindex` so focus can rest on
+ * it.
  *
  * @since 0.1.0
  * @status stable
@@ -33,6 +35,11 @@ export declare class HelixHeadlessTableCell extends HelixElement {
      * column in a row of headers alone.
      */
     header: boolean;
+    /**
+     * @internal Whether the cell is a cell of a `grid` table, which moves focus
+     * between its cells, written by that table. Not a consumer's to set.
+     */
+    gridCell: boolean;
     /**
      * @internal Read by the row and by the cells beside it, to tell a header
      * cell from a value. Not a consumer's to read or set.

package/dist/table/cell/table-cell.js

@@ -6,11 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 let HelixHeadlessTableCell = class HelixHeadlessTableCell extends HelixElement {
     constructor() {
         super(...arguments);
         this.header = false;
+        this.gridCell = false;
         this.isTableCell = true;
         this.handleSlotChange = () => {
             const text = [...this.childNodes].some((node) => node.nodeType === Node.TEXT_NODE && (node.textContent ?? '').trim() !== '');
@@ -27,7 +28,7 @@ let HelixHeadlessTableCell = class HelixHeadlessTableCell extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         const header = this.headsRow ? 'rowheader' : 'columnheader';
-        hostAria(this.internals, { role: this.header ? header : 'cell' });
+        hostAria(this.internals, { role: this.header ? header : this.gridCell ? 'gridcell' : 'cell' });
     }
     updated(changed) {
         super.updated(changed);
@@ -47,6 +48,9 @@ let HelixHeadlessTableCell = class HelixHeadlessTableCell extends HelixElement {
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTableCell.prototype, "header", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableCell.prototype, "gridCell", void 0);
 HelixHeadlessTableCell = __decorate([
     customElement('helix-headless-table-cell')
 ], HelixHeadlessTableCell);

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

@@ -0,0 +1,117 @@
+import { type GridPlace } from '@fusion.dev/helix-core';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { HelixHeadlessTableColumn } from './column/table-column.js';
+/** A place in the grid with the element that holds focus there. */
+export interface GridCell extends GridPlace {
+    cell: HTMLElement;
+}
+export interface TableGridOptions {
+    /**
+     * Acts on a cell for Enter, Space or F2, and says whether it did. A key it
+     * leaves alone moves into the cell's controls, Enter and F2 only.
+     */
+    activate: (place: GridCell, event: KeyboardEvent) => boolean;
+    /** The headings that are drawn, in order. */
+    columns: () => HelixHeadlessTableColumn[];
+    /** The element in the table's own shadow root holding a part of that name. */
+    part: (name: string) => HTMLElement | null;
+    /** The rows in the order they are drawn. */
+    rows: () => Element[];
+    /** Selects every row for Control or Command with A, and says whether it did. */
+    selectAll: () => boolean;
+    /** Whether a checkbox column leads. */
+    selectable: () => boolean;
+    /** Whether the table is a grid now. */
+    on: () => boolean;
+}
+/**
+ * The keyboard of a `grid` table: one tab stop among its cells, the arrow
+ * keys, Home, End and the Page keys between them, and Enter or F2 into a
+ * cell's controls.
+ *
+ * **Tab leaves the grid.** The controls in a cell are the consumer's, so their
+ * tab order is left as written: Tab on a cell, or past the last control of a
+ * cell, focuses an empty box at the grid's end (Shift: its start) and lets the
+ * key go on from there, as React Aria's collections do. A control in a cell
+ * that focus reaches from outside by the keyboard hands it to the stop, so the
+ * grid is one stop from either side. A press, or a script focusing a cell, is
+ * left where it lands, and the stop follows it.
+ */
+export declare class TableGridController implements ReactiveController {
+    private readonly host;
+    private readonly options;
+    /** The row holding the stop, `head` for the headings, or nothing for the first row. */
+    private stopRow;
+    /** The column holding the stop. */
+    private stopColumn;
+    /** Where the stop's row was drawn when last marked, for the row that takes over when it goes. */
+    private stopIndex;
+    /** The row focus is in, while it is in the grid's rows. */
+    private focusRow;
+    /** Whether the next update focuses the stop, after a key moved it. */
+    private focusWanted;
+    /** Whether focus is arriving from a press, which keeps its place. */
+    private pointing;
+    /** The cells given a `tabindex`, so a table that stops being a grid takes it back. */
+    private readonly given;
+    constructor(host: ReactiveControllerHost & HTMLElement, options: TableGridOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * A row taken away while it held the stop hands it to the row drawn in its
+     * place, or to the row before where it was the last, at the same column.
+     * Where focus was in that row and went with it, focus follows the stop, as
+     * React Aria's collections move it to a neighbor; focus that had already
+     * left the grid is left where it is. Before the render, so the cells the
+     * table draws itself are drawn with the stop where it now is.
+     */
+    hostUpdate(): void;
+    /** How many columns lead the consumer's cells: the checkbox column, where there is one. */
+    private get offset();
+    /** The first row: the headings where there are any, and the first row of cells otherwise. */
+    private get top();
+    /** A row's cells that are drawn, in order. */
+    private cellsOf;
+    /** How many columns a row has. */
+    private widthOf;
+    /** The element that takes focus at a place, or nothing where there is none. */
+    cellAt({ column, row }: GridPlace): HTMLElement | null;
+    /** The place holding the stop now, held to the grid as it is. */
+    current(): GridPlace;
+    /** Whether the stop is at a place, for a cell the table draws itself. */
+    isStop(place: GridPlace): boolean;
+    /** The place an event came from or through, with the element that holds focus there. */
+    private placeOf;
+    /** Moves the stop to a place, and focus with it on the next update. */
+    private moveTo;
+    /**
+     * Writes the stops: a `tabindex` on every cell, `0` on the one holding the
+     * stop, and the grid's state on the rows and headings. Takes it all back
+     * once the table stops being a grid. Called by the table after each update.
+     */
+    mark(): void;
+    /** Focuses the stop where a key asked for it. Called by the table after `mark`. */
+    place(): void;
+    /** The controls in a cell, in order: what Enter and F2 move into, and Tab moves between. */
+    private controlsIn;
+    /**
+     * Hands focus to the empty box at the grid's end, or its start, so the Tab
+     * under way goes on from there and out of the grid.
+     */
+    private leave;
+    /** How many rows a Page key moves from a cell. */
+    private pageFrom;
+    private readonly handleKeydown;
+    /** The keys the grid takes while focus is on a control inside a cell. */
+    private handleControlKey;
+    /**
+     * Focus arriving on a cell, or inside one. From outside the grid by the
+     * keyboard, anywhere but the stop is handed to the stop; otherwise the stop
+     * moves to where focus went.
+     */
+    private readonly handleFocusIn;
+    /** Focus leaving for somewhere outside the grid's host is no longer in a row. */
+    private readonly handleFocusOut;
+    /** A press is under way, so the focus it brings stays where it lands. */
+    private readonly handlePointerDown;
+}