@fusion.dev/helix-headless 0.142.1 → 0.144.0

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

@@ -20,6 +20,13 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  *
  * A range with two thumbs is two inputs stacked on one track, because there is
  * no native two-thumb range. Each thumb keeps its own value.
+ * `min-steps-between-thumbs` keeps them that many steps apart.
+ *
+ * `format-options` writes the value with `Intl.NumberFormat` in `locale`, as a
+ * currency, a percent or a unit, and `formatter` writes it with a function of
+ * your own, such as words for a scale. Either one is what a screen reader
+ * hears, what the readout shows and what the marker labels say. `value-text`
+ * still wraps it in a sentence, with the formatted value in its place.
  *
  * `required` comes with the field mixin and cannot fail. A range is never
  * empty: the platform shows its midpoint when no value is set, and `willUpdate`
@@ -33,6 +40,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.
@@ -58,6 +69,27 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     protected readonly aria: AriaForwardController;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
+    /**
+     * `Intl.NumberFormat` options the value is written with: a currency, a
+     * percent, a unit, or a number of decimals. Written as JSON in the
+     * attribute.
+     *
+     * ```html
+     * <helix-slider format-options='{"style":"currency","currency":"USD"}'></helix-slider>
+     * ```
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /**
+     * Writes a value as text, in place of `format-options`: words for a scale,
+     * or anything `Intl.NumberFormat` cannot say. A property, since a function
+     * cannot be written in an attribute.
+     */
+    formatter?: (value: number) => string;
+    /**
+     * The locale `format-options` writes the value in, such as `de-DE`. Empty is
+     * the reader's own.
+     */
+    locale: string;
     /**
      * Shows the value at each mark.
      */
@@ -98,6 +130,11 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     min: number;
     /** The name of a range's lower thumb, read after the slider's label. */
     minimumLabel: string;
+    /**
+     * How many steps a range's two thumbs stay apart, as Zag's
+     * `minStepsBetweenThumbs`. A thumb pushed closer stops there.
+     */
+    minStepsBetweenThumbs: number;
     /**
      * The direction the track runs. `vertical` stands it on end.
      *
@@ -123,6 +160,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 +249,27 @@ 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;
+    /** How far apart a range's thumbs stay, in the slider's own units. */
+    private get gap();
+    /** Whether the value is written by `formatter` or `format-options`. */
+    private get formats();
+    /** A value as the reader sees it: formatted where asked, the number otherwise. */
+    private said;
+    /** 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, formatNumber, 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)) {
@@ -14,23 +14,27 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             target: () => this.partNamed('control'),
         });
         this.announcesInput = true;
+        this.locale = '';
         this.markerLabels = false;
         this.markers = 0;
         this.max = 100;
         this.maximumLabel = 'maximum';
         this.min = 0;
         this.minimumLabel = 'minimum';
+        this.minStepsBetweenThumbs = 0;
         this.range = false;
         this.showValue = false;
+        this.step = 1;
         this.handleInput = (event) => {
             event.stopPropagation();
             const control = event.target;
             if (this.range) {
                 const [start, end] = this.bounds;
                 const moved = Number(control.value);
+                const gap = this.gap;
                 const pair = control.dataset.thumb === 'start'
-                    ? [Math.min(moved, end), end]
-                    : [start, Math.max(moved, start)];
+                    ? [Math.min(moved, end - gap), end]
+                    : [start, Math.max(moved, start + gap)];
                 this.requestValue(pair.join(','));
                 restoreValue(control, String(control.dataset.thumb === 'start' ? this.bounds[0] : this.bounds[1]));
                 return;
@@ -43,10 +47,10 @@ 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);
+        const widest = Math.max(this.said(this.min).length, this.said(this.max).length);
         return this.range ? widest * 2 + ' to '.length : widest;
     }
     get precision() {
@@ -110,8 +114,57 @@ 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));
+    }
+    get gap() {
+        return Math.max(0, this.minStepsBetweenThumbs) * this.step;
+    }
+    get formats() {
+        return this.formatter !== undefined || this.formatOptions !== undefined;
+    }
+    said(at) {
+        const number = typeof at === 'number' ? at : Number.parseFloat(at);
+        if (!Number.isFinite(number)) {
+            return String(at);
+        }
+        if (this.formatter) {
+            return this.formatter(number);
+        }
+        return this.formatOptions ? formatNumber(number, this.locale, this.formatOptions) : String(at);
+    }
+    spoken(at) {
+        if (this.valueText) {
+            return fillTemplate(this.valueText, { value: this.said(at) });
+        }
+        return this.formats ? this.said(at) : nothing;
     }
     updated(changed) {
         super.updated(changed);
@@ -130,6 +183,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 + this.gap : nothing}
+        aria-valuemax=${which === 'start' ? end - this.gap : nothing}
+        aria-valuetext=${this.spoken(at)}
         aria-describedby=${this.describedBy ?? nothing}
         aria-invalid=${this.invalidity ?? nothing}
         ?disabled=${this.isDisabled}
@@ -161,6 +217,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}
@@ -172,7 +229,9 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               ${this.markerValues.map((at) => html `<span
                     part="marker"
                     style="--slider-marker-at: ${((at - this.min) / (this.max - this.min)) * 100}%"
-                    >${this.markerLabels ? html `<span part="marker-label">${at}</span>` : nothing}</span
+                    >${this.markerLabels
+                ? html `<span part="marker-label">${this.said(at)}</span>`
+                : nothing}</span
                   >`)}
             </div>`
             : nothing}
@@ -182,13 +241,22 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               for=${this.range ? 'control control-end' : 'control'}
               aria-hidden="true"
               style=${`--_slider-output-reserve: ${this.reserve}ch`}
-              >${this.range ? `${start} to ${end}` : this.value}</output
+              >${this.range ? `${this.said(start)} to ${this.said(end)}` : this.said(this.value)}</output
             >`
             : nothing}
     </div>
     ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessSlider.prototype, "formatOptions", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessSlider.prototype, "formatter", void 0);
+__decorate([
+    property()
+], HelixHeadlessSlider.prototype, "locale", void 0);
 __decorate([
     property({ attribute: 'marker-labels', reflect: true, type: Boolean })
 ], HelixHeadlessSlider.prototype, "markerLabels", void 0);
@@ -207,6 +275,9 @@ __decorate([
 __decorate([
     property({ attribute: 'minimum-label' })
 ], HelixHeadlessSlider.prototype, "minimumLabel", void 0);
+__decorate([
+    property({ attribute: 'min-steps-between-thumbs', type: Number })
+], HelixHeadlessSlider.prototype, "minStepsBetweenThumbs", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSlider.prototype, "orientation", void 0);
@@ -219,6 +290,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)}