@fusion.dev/helix-headless 0.146.0 → 0.148.0

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

@@ -4,21 +4,27 @@ 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, deepActiveElement, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
+import { ariaChord, chordParts, customElement, deepActiveElement, HelixElement, HelixSelectEvent, keyNames, onApple, reportRuntime, slotFilled, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
+let toldSelected = false;
 let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixElement {
     constructor() {
         super(...arguments);
         this.disabled = false;
+        this.shortcut = '';
         this.value = '';
         this.isSpeedDialItem = true;
+        this.hasShortcut = false;
+        this.readShortcut = () => {
+            this.hasShortcut = slotFilled(this.renderRoot.querySelector('slot[name="shortcut"]'));
+        };
         this.handleClick = () => {
             this.choose();
         };
     }
-    focus() {
-        this.partNamed('item')?.focus();
+    focus(options) {
+        this.partNamed('item')?.focus(options);
     }
     focusItem() {
         this.focus();
@@ -31,6 +37,14 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
         return active !== null && active.getRootNode() === this.renderRoot;
     }
     get selected() {
+        if (!toldSelected) {
+            toldSelected = true;
+            reportRuntime({
+                kind: 'deprecated',
+                message: `<${this.localName}>.selected is deprecated: read \`active\`, which says the same.`,
+                tag: this.localName,
+            });
+        }
         return this.active;
     }
     choose() {
@@ -40,26 +54,50 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
     }
     render() {
+        const keys = this.shortcut === '' ? nothing : ariaChord(this.shortcut, !this.hydrating && onApple());
         return html `<button
       part="item"
       role="menuitem"
       type="button"
       aria-disabled=${this.disabled ? 'true' : nothing}
+      aria-keyshortcuts=${keys}
       ?disabled=${this.disabled}
       tabindex="-1"
       @click=${this.handleClick}
     >
       <span part="icon"><slot name="icon"></slot></span>
-      <span part="label"><slot></slot></span>
+      <span part="label"><slot></slot><span
+          part="shortcut"
+          aria-hidden="true"
+          ?hidden=${!this.hasShortcut && this.shortcut === ''}
+        >${this.renderShortcut()}</span
+      ></span>
     </button>`;
     }
+    renderShortcut() {
+        const drawn = keyNames(chordParts(this.shortcut), !this.hydrating && onApple());
+        return html `<slot name="shortcut" @slotchange=${this.readShortcut}>${drawn.keys.join(drawn.separator)}</slot>`;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.readShortcut();
+        if (this.shortcut !== '') {
+            this.finishHydration();
+        }
+    }
 };
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSpeedDialItem.prototype, "disabled", void 0);
+__decorate([
+    property()
+], HelixHeadlessSpeedDialItem.prototype, "shortcut", void 0);
 __decorate([
     property()
 ], HelixHeadlessSpeedDialItem.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpeedDialItem.prototype, "hasShortcut", void 0);
 HelixHeadlessSpeedDialItem = __decorate([
     customElement('helix-headless-speed-dial-item')
 ], HelixHeadlessSpeedDialItem);

package/dist/speed-dial/long-press.d.ts

@@ -0,0 +1,50 @@
+import type { ReactiveControllerHost } from 'lit';
+/** How long a press is held before it counts, in milliseconds, as React Aria waits. */
+export declare const LONG_PRESS_DELAY = 500;
+/**
+ * How far a held pointer may drift and still be the same press, in pixels. A
+ * finger is never still, and one that moves further is scrolling or dragging.
+ */
+export declare const LONG_PRESS_SLOP = 10;
+/** What a long press reads and calls. */
+export interface LongPressOptions {
+    /** Called once a press has been held for the delay without drifting. */
+    onLongPress: () => void;
+}
+/**
+ * Watches one control's presses for a held one.
+ *
+ * The control's own handlers call `down`, `move` and `up`, so a press counts
+ * only where it started on the control, and `cancel` drops it. The click a
+ * held press ends in is the long press's, and `takeClick` says so once, so the
+ * control's own action does not run as well.
+ */
+export declare class LongPress {
+    private readonly options;
+    private readonly wait;
+    /** Where the press began, while one is held and still counts. */
+    private from;
+    /** Whether the press that just ended was a long one, until its click is taken. */
+    private held;
+    constructor(host: ReactiveControllerHost, options: LongPressOptions);
+    /** Starts the wait for a press of the primary button. */
+    down(event: PointerEvent): void;
+    /** Drops the press once the pointer drifts past the slop. */
+    move(event: PointerEvent): void;
+    /**
+     * Ends the press. A press released before the delay is an ordinary one.
+     *
+     * A held one keeps its claim on a click only until the task ends: the click
+     * a release makes comes in the same task, and a release that makes none, off
+     * the control or after a touch's own menu, must not leave the next Enter on
+     * the control swallowed.
+     */
+    up(): void;
+    /** Drops the press, which then neither opens anything nor swallows a click. */
+    cancel(): void;
+    /**
+     * Whether a click belongs to the long press that just ended, and so is not
+     * the control's. True once.
+     */
+    takeClick(): boolean;
+}

package/dist/speed-dial/long-press.js

@@ -0,0 +1,48 @@
+import { DelayController } from '@fusion.dev/helix-core';
+export const LONG_PRESS_DELAY = 500;
+export const LONG_PRESS_SLOP = 10;
+export class LongPress {
+    constructor(host, options) {
+        this.options = options;
+        this.from = undefined;
+        this.held = false;
+        this.wait = new DelayController(host);
+    }
+    down(event) {
+        this.held = false;
+        if (event.button !== 0) {
+            return;
+        }
+        this.from = { x: event.clientX, y: event.clientY };
+        this.wait.start(LONG_PRESS_DELAY, () => {
+            this.from = undefined;
+            this.held = true;
+            this.options.onLongPress();
+        });
+    }
+    move(event) {
+        const from = this.from;
+        if (from && Math.hypot(event.clientX - from.x, event.clientY - from.y) > LONG_PRESS_SLOP) {
+            this.cancel();
+        }
+    }
+    up() {
+        this.from = undefined;
+        this.wait.cancel();
+        if (this.held) {
+            setTimeout(() => {
+                this.held = false;
+            });
+        }
+    }
+    cancel() {
+        this.from = undefined;
+        this.held = false;
+        this.wait.cancel();
+    }
+    takeClick() {
+        const held = this.held;
+        this.held = false;
+        return held;
+    }
+}

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -25,6 +25,31 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  * action whose name starts with it. The actions are one tab stop, and Tab
  * closes the dial and moves on.
  *
+ * **Keyboard.** On the trigger, Enter, Space or a press opens the dial on its
+ * first action. With the dial open:
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Right | Moves to the next action, from the last back to the first. |
+ * | Up, Left | Moves to the action before, from the first round to the last. |
+ * | Home, End | Moves to the first or the last action. |
+ * | A letter | Moves to the next action whose name starts with it. |
+ * | Enter, Space | Chooses the action, and the dial closes. |
+ * | Escape | Closes the dial and puts focus back on the trigger. |
+ * | Tab | Closes the dial and moves on. |
+ *
+ * **Groups.** Put actions in `Speed Dial.Group`, named by its `label`, to set
+ * them apart as Menu's sections do: each is a `group` of the menu, and the
+ * arrow keys walk through every group's actions in order.
+ *
+ * **A trigger with its own action.** With `open-on="long-press"`, a press on
+ * the trigger is the trigger's own, such as composing a message, and holding it
+ * for half a second opens the dial, as React Aria's menu trigger does with
+ * `trigger="longPress"`. Alt+Down or Alt+Up opens it from the keyboard, and
+ * the trigger says so in its description, `long-press-label`, the drawn one
+ * and a slotted one alike. A press that has opened the dial does not also do
+ * the trigger's action.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -49,10 +74,26 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
      * Accessible name for the trigger and the set of actions it opens.
      */
     label: string;
+    /**
+     * The description the trigger gives under `open-on="long-press"`, saying how
+     * its actions are reached.
+     *
+     * A slotted trigger is described by the dial, which carries the words as
+     * its own label for that: a Helix button's inner control at once, and a
+     * plain element of yours once a reader reaches it, after hydration, unless
+     * you described or labeled it yourself.
+     */
+    longPressLabel: string;
     /**
      * Space between the trigger and the actions, in pixels.
      */
     offset: number;
+    /**
+     * What opens the dial. `click` opens it on a press of the trigger. Under
+     * `long-press`, a press is the trigger's own action, and the dial opens on a
+     * press held for half a second, or on Alt+Down or Alt+Up.
+     */
+    openOn: 'click' | 'long-press';
     /**
      * The direction the actions open in. They move to another side if that side
      * does not fit.
@@ -74,11 +115,34 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
     protected readonly panel: PopoverController;
     /** Whatever the consumer slotted, or the button rendered in its place. */
     private get trigger();
-    /** The actions, which are this element's own rows and nothing else slotted. */
+    /**
+     * The actions, in order: this element's own rows, and the rows of each group
+     * slotted beside them, and nothing else slotted.
+     */
     private get items();
+    /** Watches the trigger for a held press, under `open-on="long-press"`. */
+    private readonly longPress;
+    private get pressHeld();
+    /**
+     * Puts focus on the trigger, the slotted one or the button drawn in its
+     * place, as a `focus()` on a native control would. The host itself takes no
+     * focus, so a page focusing it after a dialog closes landed nowhere.
+     */
+    focus(options?: FocusOptions): void;
     /** Shuts it and puts the reader back on the trigger. */
     private close;
     private readonly handleTriggerClick;
+    /**
+     * Takes the click a held press ends in, ahead of the trigger's own
+     * listeners, so a press that opened the dial does not also do the trigger's
+     * action. In capture, on the host, which is above a slotted trigger.
+     */
+    private readonly handleHeldClick;
+    private readonly handleTriggerPointerDown;
+    private readonly handleTriggerPointerMove;
+    private readonly handleTriggerPointerUp;
+    private readonly handleTriggerPointerCancel;
+    private readonly handleTriggerContextMenu;
     private readonly handleSelect;
     private readonly handleKeydown;
     connectedCallback(): void;
@@ -107,6 +171,27 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
      * is expanded is already saying it has something to expand.
      */
     private announce;
+    /** The control the dial has described, so the description can be taken back. */
+    private described;
+    /**
+     * Describes a slotted trigger by `long-press-label` under
+     * `open-on="long-press"`, as the drawn one is, or takes it back.
+     *
+     * **By the host, which carries the words as its label.** The drawn
+     * trigger's description is in this shadow root, and a reference from the
+     * consumer's trigger, or from the button inside a Helix one, cannot point
+     * in; it can point out, to the host. Core's `linkDescription` says where
+     * that is safe: inside a component's shadow root always, and on the
+     * consumer's own element only once `light` says a reader has acted, which
+     * is after hydration. React Aria's long press describes whatever trigger it
+     * is given.
+     *
+     * @param light A reader has just reached the trigger.
+     */
+    private describeTrigger;
+    /** A reader reaching a slotted trigger, which is late enough to describe a plain one. */
+    private readonly handleTriggerFocusIn;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * The control that opens it, behind a seam the styled tier can move.

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,29 +110,57 @@ 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;
+        if (trigger === this) {
+            super.focus(options);
+            return;
+        }
+        trigger.focus(options);
     }
     close() {
         if (!this.requestOpen(false)) {
             return;
         }
-        this.trigger.focus();
+        this.focus();
     }
     connectedCallback() {
         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;
@@ -89,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(() => {
@@ -102,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}
@@ -113,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() {
@@ -131,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,12 +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 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.
@@ -50,6 +53,10 @@ 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';
@@ -127,6 +127,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         this.positionState = wanted;
         this.collapsedState = 'none';
         this.requestUpdate('position', previous);
+        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
     }
     settle(next) {
         const wanted = this.clamp(next);
@@ -143,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) }),
@@ -446,6 +450,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         super.firstUpdated(changed);
         this.watchWidth();
         this.findOuter();
+        this.finishHydration();
     }
     updated(changed) {
         super.updated(changed);
@@ -471,6 +476,9 @@ 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;
@@ -492,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}
@@ -501,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>
@@ -514,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}