@fusion.dev/helix-headless 0.142.1 → 0.143.0

package/dist/skeleton/root/skeleton-root.js

@@ -4,18 +4,32 @@ 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, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 let HelixHeadlessSkeleton = class HelixHeadlessSkeleton extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
-        this.internals.ariaBusy = 'true';
-        this.internals.ariaLive = 'polite';
+        if (this.label) {
+            hostAria(this.internals, { label: this.label, role: 'progressbar' });
+            this.internals.ariaHidden = null;
+        }
+        else {
+            hostAria(this.internals, { label: '', role: '' });
+            this.internals.ariaHidden = 'true';
+        }
     }
     render() {
         return html `<span part="skeleton"></span>`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessSkeleton.prototype, "label", void 0);
 HelixHeadlessSkeleton = __decorate([
     customElement('helix-headless-skeleton')
 ], HelixHeadlessSkeleton);

package/dist/skip-link/root/skip-link-root.d.ts

@@ -75,6 +75,16 @@ export declare class HelixHeadlessSkipLink extends HelixElement {
      * region.
      */
     private readonly skip;
+    /** The `href` the last warning was for, so a page hears once per target. */
+    private missed;
+    /**
+     * Says so when an in-page `href` names nothing.
+     *
+     * Asked on a press and not on connection: the link is first in the
+     * document, so its target is usually parsed or rendered after it, and an
+     * early check would warn about a page that is still arriving.
+     */
+    private reportMissing;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/skip-link/root/skip-link-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, elementById, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
@@ -18,6 +18,7 @@ let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
             }
             const target = this.target;
             if (!target) {
+                this.reportMissing();
                 return;
             }
             event.preventDefault();
@@ -29,6 +30,7 @@ let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
             target.addEventListener('blur', () => target.removeAttribute('tabindex'), { once: true });
             target.focus();
         };
+        this.missed = '';
     }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
@@ -40,6 +42,18 @@ let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
         }
         return elementById(this, decodeURIComponent(this.href.slice(1)), { orDocument: true });
     }
+    reportMissing() {
+        if (!this.href.startsWith('#') || this.href.length < 2 || this.missed === this.href) {
+            return;
+        }
+        this.missed = this.href;
+        reportRuntime({
+            kind: 'missing-target',
+            message: `<${this.localName} href="${this.href}"> names no element in its tree, so the press ` +
+                'moves focus nowhere. Give the main content that id, or point `href` at the id it has.',
+            tag: this.localName,
+        });
+    }
     render() {
         return html `<a part="link" href=${this.href} @click=${this.skip}><slot>${this.label}</slot></a>`;
     }

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

@@ -33,6 +33,10 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * @aliases Range, Range input
  * @documentation https://fusion.dev/helix/components/slider
  *
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
+ *
  * @event {Event} change - Fired when the user releases the thumb.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired as the value changes. Cancelable: call `preventDefault()` to keep the current value.
  * @event {Event} input - Fired after the value changes.
@@ -123,6 +127,8 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * Shows the chosen value beside the track.
      */
     showValue: boolean;
+    /** How far one press of an arrow key moves the thumb. */
+    step: number;
     /**
      * How many characters the readout has to be able to hold, widest case.
      *
@@ -210,9 +216,21 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      */
     private snapped;
     protected willUpdate(changed: PropertyValues): void;
+    /** One number pulled into the bounds and onto the step, as a range does. */
+    private settled;
+    /**
+     * The value as a native range would hold it: a number in the bounds on the
+     * step, or for a range, two of them in order.
+     */
+    private sanitize;
+    /** What a screen reader says for one thumb, where `value-text` asks. */
+    private spoken;
     protected updated(changed: PropertyValues): void;
-    /** How far one press of an arrow key moves the thumb. */
-    step: number;
+    /**
+     * What a screen reader says for a thumb's value, with `{value}` filled in,
+     * such as `{value} degrees`. Empty announces the number alone.
+     */
+    valueText: string;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/slider/root/slider-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, HelixFormElement, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, fillTemplate, HelixFormElement, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue(MixinField(HelixFormElement)) {
@@ -22,6 +22,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.minimumLabel = 'minimum';
         this.range = false;
         this.showValue = false;
+        this.step = 1;
         this.handleInput = (event) => {
             event.stopPropagation();
             const control = event.target;
@@ -43,7 +44,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             event.stopPropagation();
             this.announceChange();
         };
-        this.step = 1;
+        this.valueText = '';
     }
     get reserve() {
         const widest = Math.max(String(this.min).length, String(this.max).length);
@@ -110,9 +111,39 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
     willUpdate(changed) {
         super.willUpdate(changed);
         if (!this.hasUpdated && this.value === '') {
-            this.defaultValue = String(this.min + (this.max - this.min) / 2);
+            this.defaultValue = this.range
+                ? `${this.min},${this.max}`
+                : String(this.min + (this.max - this.min) / 2);
+        }
+        const clean = this.sanitize(this.value);
+        if (clean !== this.value) {
+            this.value = clean;
         }
     }
+    settled(at) {
+        const low = Math.min(this.min, this.max);
+        const high = Math.max(this.min, this.max);
+        return Math.min(high, Math.max(low, this.snapped(Math.min(high, Math.max(low, at)))));
+    }
+    sanitize(text) {
+        if (this.range) {
+            const [from, to] = text.split(',').map((part) => Number.parseFloat(part));
+            if (from === undefined ||
+                to === undefined ||
+                !Number.isFinite(from) ||
+                !Number.isFinite(to)) {
+                return `${this.min},${this.max}`;
+            }
+            const ends = [this.settled(from), this.settled(to)].sort((a, b) => a - b);
+            return ends.join(',');
+        }
+        const parsed = Number.parseFloat(text);
+        const at = Number.isFinite(parsed) ? parsed : this.min + (this.max - this.min) / 2;
+        return String(this.settled(at));
+    }
+    spoken(at) {
+        return this.valueText ? fillTemplate(this.valueText, { value: at }) : nothing;
+    }
     updated(changed) {
         super.updated(changed);
         this.sync();
@@ -130,6 +161,9 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         step=${this.step}
         .value=${String(at)}
         aria-labelledby=${this.labeled ? `${this.labelId} ${which}-name` : `${which}-name`}
+        aria-valuemin=${which === 'end' ? start : nothing}
+        aria-valuemax=${which === 'start' ? end : nothing}
+        aria-valuetext=${this.spoken(at)}
         aria-describedby=${this.describedBy ?? nothing}
         aria-invalid=${this.invalidity ?? nothing}
         ?disabled=${this.isDisabled}
@@ -161,6 +195,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               step=${this.step}
               .value=${this.value}
               name=${this.name || nothing}
+              aria-valuetext=${this.spoken(this.value)}
               aria-describedby=${this.describedBy ?? nothing}
               aria-invalid=${this.invalidity ?? nothing}
               ?disabled=${this.isDisabled}
@@ -219,6 +254,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "step", void 0);
+__decorate([
+    property({ attribute: 'value-text' })
+], HelixHeadlessSlider.prototype, "valueText", void 0);
 HelixHeadlessSlider = __decorate([
     customElement('helix-headless-slider')
 ], HelixHeadlessSlider);

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

@@ -9,9 +9,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `values` to the data and `label` to the one sentence a screen reader
  * announces.
  *
- * This follows the library's rule that a content property is the fallback for
- * its slot, as with `Tooltip`'s `content` and `Avatar`'s `name`. Use `for` when
- * a sparkline has a real table behind it. `for` wins when both are set.
+ * Use `for` when a sparkline has a real table behind it. `for` wins when both
+ * are set.
  *
  * Without a `label` the sparkline is decorative and `aria-hidden`, for example
  * beside a stat that already says "Sessions, 1,102". With a `label` it is an
@@ -95,8 +94,8 @@ export declare class HelixHeadlessSparkline extends HelixElement {
     /**
      * What the readings are drawn as.
      *
-     * Absent is a line, `area` is a line with the region beneath it washed, and
-     * `bar` is a column per reading.
+     * Absent is `area`, a line with the region beneath it washed. `line` is the
+     * bare stroke, and `bar` is a column per reading.
      *
      * **A bar plot measures from zero and the other two measure from the data's
      * own range**, which is the one way the plots are not interchangeable. A line
@@ -125,12 +124,12 @@ export declare class HelixHeadlessSparkline extends HelixElement {
     /**
      * The numbers, separated by whitespace or by commas.
      *
-     * Both separators, so `values="1240 1318"` and an array assigned to the
-     * property both work: assigning `[1240, 1318]` stringifies to `1240,1318`,
-     * and a string is what survives React's hydration where an array property
-     * does not.
+     * An array assigned to the property works too, which is what React 19 does
+     * with `values={[1240, 1318]}`. The attribute is the form to prefer, because
+     * a string is what survives React's hydration where an array property does
+     * not.
      */
-    values: string;
+    values: string | readonly number[];
     protected readonly source: SourceController;
     protected willUpdate(changed: PropertyValues<this>): void;
     /** The series to draw: the table if there is one, the attribute otherwise. */

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

@@ -52,12 +52,18 @@ export declare class HelixHeadlessSpeedDialItem extends HelixElement {
     /** Chooses the action, the same as pressing it. */
     select(): void;
     /**
-     * Whether the action has focus, which is what selected means in a speed dial.
+     * Whether the action has focus, which makes it the action the keyboard is on.
      *
-     * Asked of the document rather than of the shadow root: focus lands on the
-     * control inside this element and the platform retargets it, so from outside
-     * `activeElement` already is this element. `Menu.Item` records the same;
-     * reading it off the shadow root does not survive happy-dom.
+     * `Option` calls the same thing `active`. The focused node is found through
+     * every shadow root, as `Menu.Item` does, so a dial inside another
+     * component's shadow root still knows its current action.
+     */
+    get active(): boolean;
+    /**
+     * Whether the action has focus, the same as `active`.
+     *
+     * @deprecated Read `active`. Everywhere else in the library `selected` means
+     * chosen out of a set, and a speed dial's action is never chosen that way.
      */
     get selected(): boolean;
     private choose;

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, HelixElement, HelixSelectEvent, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixElement {
@@ -26,8 +26,12 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
     select() {
         this.choose();
     }
+    get active() {
+        const active = deepActiveElement();
+        return active !== null && active.getRootNode() === this.renderRoot;
+    }
     get selected() {
-        return this.ownerDocument.activeElement === this;
+        return this.active;
     }
     choose() {
         if (this.disabled) {
@@ -42,6 +46,7 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
       type="button"
       aria-disabled=${this.disabled ? 'true' : nothing}
       ?disabled=${this.disabled}
+      tabindex="-1"
       @click=${this.handleClick}
     >
       <span part="icon"><slot name="icon"></slot></span>

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

@@ -11,8 +11,8 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  * - `PopoverController` for the panel
  * - `MixinControllerOpen` for open and closed
  *
- * It is a separate component because a speed dial has no submenus, headers,
- * checkable items, or type-ahead.
+ * It is a separate component because a speed dial has no submenus, headers, or
+ * checkable items.
  *
  * You slot the trigger. The usual floating action button is `IconButton` with
  * `shape="circle"` and `raised`. There is no `helix-fab`, because `IconButton`
@@ -21,7 +21,9 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  *
  * All four arrow keys move through the actions, because a speed dial has no
  * nested levels to reserve the horizontal pair for. This is the default
- * behavior of the keyboard controller.
+ * behavior of the keyboard controller. Typing a letter moves to the next
+ * action whose name starts with it. The actions are one tab stop, and Tab
+ * closes the dial and moves on.
  *
  * @since 0.1.0
  * @status stable
@@ -35,7 +37,7 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  * @event {HelixBeforeCloseEvent} helix-before-close - The actions are about to close. Cancelable: cancel it to keep them open.
  * @event {HelixBeforeOpenEvent} helix-before-open - The actions are about to open. Cancelable: cancel it to keep them closed.
  * @event {HelixSelectEvent} helix-select - An action was chosen. The action sends the event, and the dial closes after it. Cancelable: cancel it to keep the dial open.
- * @event {Event} toggle - The dial opened or closed. The event carries `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - The dial opened or closed. The event carries `newState` and `oldState`.
  *
  * @csspart actions - The region the actions are drawn in.
  * @csspart trigger - The default trigger, drawn when none is slotted.
@@ -60,6 +62,15 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
      */
     placement: Placement;
     protected readonly keys: KeyboardNavigationController;
+    /**
+     * Whether the trigger asked for the open that is under way, which is the one
+     * open that moves focus onto the first action.
+     *
+     * A dial opened by `default-open` or by a script setting `open` leaves focus
+     * where it is: on load that is wherever `autofocus` put it, and later it is
+     * wherever the reader is typing.
+     */
+    private focusOnOpen;
     protected readonly panel: PopoverController;
     /** Whatever the consumer slotted, or the button rendered in its place. */
     private get trigger();

package/dist/speed-dial/root/speed-dial-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 { anchorElement, customElement, drawIcon, HelixElement, KeyboardNavigationController, MixinControllerOpen, PopoverController, tellDisclosure, } from '@fusion.dev/helix-core';
+import { anchorElement, customElement, drawIcon, HelixElement, KeyboardNavigationController, MixinControllerOpen, PopoverController, slottedWords, tellDisclosure, } from '@fusion.dev/helix-core';
 import { plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -15,9 +15,11 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         this.offset = 12;
         this.placement = 'top-end';
         this.keys = new KeyboardNavigationController(this, {
-            items: () => this.items,
+            items: () => (this.open ? this.items : []),
             selects: () => false,
+            typeahead: (item) => slottedWords(item, ['']),
         });
+        this.focusOnOpen = false;
         this.panel = new PopoverController(this, {
             anchor: () => this.trigger,
             boundary: () => this,
@@ -28,7 +30,11 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
             surface: () => this.partNamed('actions'),
         });
         this.handleTriggerClick = () => {
-            this.requestOpen(!this.open);
+            if (this.open) {
+                this.requestOpen(false);
+                return;
+            }
+            this.focusOnOpen = this.requestOpen(true);
         };
         this.handleSelect = (event) => {
             queueMicrotask(() => {
@@ -38,6 +44,13 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
             });
         };
         this.handleKeydown = (event) => {
+            if (!this.open) {
+                return;
+            }
+            if (event.key === 'Tab') {
+                this.requestOpen(false);
+                return;
+            }
             if (event.key !== 'Escape') {
                 return;
             }
@@ -74,12 +87,13 @@ let HelixHeadlessSpeedDial = class HelixHeadlessSpeedDial extends MixinControlle
         if (trigger === this.partNamed('trigger')) {
             return;
         }
-        tellDisclosure(trigger, this.open);
+        tellDisclosure(trigger, this.open, 'menu');
     }
     updated(changed) {
         super.updated?.(changed);
         this.announce();
-        if (this.open) {
+        if (this.open && this.focusOnOpen) {
+            this.focusOnOpen = false;
             this.updateComplete.then(() => {
                 if (this.open) {
                     this.items.find((one) => !one.disabled)?.focusItem();

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

@@ -1,4 +1,4 @@
-import { HelixElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary Two panes and a divider that you can move.
@@ -13,9 +13,10 @@ 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`. Drag it with a
- * pointer or move it with the arrow keys, and press `Home` or `End` to move it
- * to its bounds. A drag in progress is tracked as a state, so both dividers a
+ * 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,
+ * 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.
  *
  * By default, `min` and `max` let the divider reach either edge, so you can
@@ -39,6 +40,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @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.
  *
  * @csspart corner - The handle where two dividers cross, added on the client.
  * @csspart end - The box that holds the second pane.
@@ -96,8 +99,13 @@ export declare class HelixHeadlessSplitter extends HelixElement {
     defaultPosition: number;
     /**
      * The divider's name, read by screen readers.
+     *
+     * An `aria-label` or `aria-labelledby` on the host names the divider too,
+     * and wins over this.
      */
     label: string;
+    /** Carries a host `aria-label` and `aria-labelledby` to the divider. */
+    protected readonly aria: AriaForwardController;
     /**
      * How close the divider can come to the end, in the same units as `min`.
      */
@@ -453,6 +461,19 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * it on every page, which on a right-to-left one sent the divider right.
      */
     private travel;
+    /**
+     * Collapses the start pane, or opens whichever pane is collapsed, which is
+     * what `Enter` does on the divider.
+     *
+     * The window splitter pattern's own key, and the one way the keyboard
+     * reaches `collapsed` where `min` keeps `Home` short of the edge. Collapse
+     * overrides `min` and `max`, as it does for every other way in.
+     *
+     * Asked through `helix-before-collapse` alone. The pane opens back to the
+     * position it was collapsed from, or to `default-position` where that was
+     * the edge itself.
+     */
+    private toggleCollapse;
     /** Puts the divider back where the markup put it. */
     private reset;
     private readonly handleDoubleClick;
@@ -465,7 +486,8 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      */
     private readonly handleCornerDoubleClick;
     /**
-     * Records that a nested splitter crosses this one at `at` percent along it.
+     * @internal Records that a nested splitter crosses this one at `at` percent
+     * along it.
      *
      * Public because it is the whole of the channel between the two, and it runs
      * one way: the child tells the parent where it is, and the parent draws the
@@ -473,7 +495,7 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * anything about the other's state.
      */
     cross(by: HelixHeadlessSplitter, at: number): void;
-    /** Forgets a nested splitter that has left the tree. See `cross`. */
+    /** @internal Forgets a nested splitter that has left the tree. See `cross`. */
     uncross(by: HelixHeadlessSplitter): void;
     /**
      * Announces this splitter to the one it is nested in, if they cross.

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 { capturePointer, closestInstance, customElement, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixElement, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { AriaForwardController, capturePointer, closestInstance, customElement, 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';
 const STACK_BELOW = 512;
@@ -17,6 +17,10 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         this.cornerLabel = 'Resize both';
         this.defaultPosition = 50;
         this.label = 'Resize panes';
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('separator'),
+        });
         this.max = 100;
         this.min = 0;
         this.step = 2;
@@ -68,6 +72,11 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
             this.settle(this.reached ?? this.position);
         };
         this.handleKeydown = (event) => {
+            if (event.key === 'Enter') {
+                this.toggleCollapse();
+                event.preventDefault();
+                return;
+            }
             const toward = this.travel(event.key);
             let next;
             if (toward !== 0) {
@@ -313,6 +322,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
                 const previous = this.position;
                 this.positionState = value;
                 this.requestUpdate('position', previous);
+                this.dispatchEvent(new HelixResizedEvent({ value: String(value) }));
             },
             event: (value) => new HelixBeforeResizeEvent({ value: String(value) }),
             host: this,
@@ -327,6 +337,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
                     }
                     this.collapsedState = value === '' ? 'none' : value;
                     this.requestUpdate('collapsed', previous);
+                    this.dispatchEvent(new HelixCollapseEvent({ value }));
                 },
                 event: (value) => new HelixBeforeCollapseEvent({ value }),
                 host: this,
@@ -340,6 +351,27 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         }
         return key === 'ArrowDown' ? 1 : key === 'ArrowUp' ? -1 : 0;
     }
+    toggleCollapse() {
+        const shut = this.collapsed;
+        const opened = shut ? undefined : this.position;
+        requestChange({
+            apply: (value) => {
+                const previous = this.collapsed;
+                if (opened !== undefined) {
+                    this.positionState = opened;
+                }
+                else if (this.shutAt(this.clamp(this.positionState ?? this.defaultPosition))) {
+                    this.positionState = this.defaultPosition;
+                }
+                this.collapsedState = value === '' ? 'none' : value;
+                this.requestUpdate('collapsed', previous);
+                this.dispatchEvent(new HelixCollapseEvent({ value }));
+            },
+            event: (value) => new HelixBeforeCollapseEvent({ value }),
+            host: this,
+            next: shut ? '' : 'start',
+        });
+    }
     reset() {
         const home = this.clamp(this.defaultPosition);
         this.settle(home);
@@ -427,6 +459,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         const position = this.showing;
         return html `<div
         part="start"
+        id="start"
         ?data-dragging=${this.dragging}
         style="--splitter-position: ${position}%"
       >
@@ -436,6 +469,7 @@ let HelixHeadlessSplitter = HelixHeadlessSplitter_1 = class HelixHeadlessSplitte
         part="separator"
         role="separator"
         tabindex="0"
+        aria-controls="start"
         aria-label=${this.label}
         aria-orientation=${this.vertical ? 'horizontal' : 'vertical'}
         aria-valuemax=${this.collapsed ? 100 : this.clamp(this.maxPercent)}

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One measurement, with a label that names what it measures.
  *
@@ -38,6 +38,11 @@ export declare class HelixHeadlessStat extends HelixElement {
      * the value's baseline whichever way the pair goes, and only this element
      * knows which of its children the unit belongs to.
      *
+     * **`Trend` has a `direction` too, and there it means which way a number
+     * moved:** `up`, `down` or `neutral`. A Stat and a Trend are often written
+     * side by side, so watch for the mix-up. On a Stat those three words are not
+     * layouts, and the pair stays the column.
+     *
      * **Optional rather than defaulted to `column`, which is not a style
      * preference.** A reflecting property with a default writes its attribute onto
      * the host the moment the element upgrades, and the host is markup the
@@ -47,6 +52,7 @@ export declare class HelixHeadlessStat extends HelixElement {
      * carries nothing nobody wrote.
      */
     direction?: 'column-reverse' | 'row' | 'row-reverse';
+    protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {