@fusion.dev/helix-headless 0.145.0 → 0.146.0

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

@@ -109,10 +109,16 @@ export declare class HelixHeadlessToast extends HelixElement {
      * stack, holding `message` as its text. The region removes it once it has
      * been dismissed and has finished leaving, which is the one case where it
      * removes anything: a message you render stays yours.
+     *
+     * `heading` gives the message a title, which names it, and `message` becomes
+     * the line of detail under it. `action` is an element for the message's
+     * `actions` slot, such as an Undo button you have wired up.
      */
     add(message: string, options?: {
+        action?: Element;
         dismissible?: boolean;
         duration?: number;
+        heading?: string;
         tone?: 'danger' | 'info' | 'success' | 'warning';
     }): HTMLElement;
     /** Removes a message `add()` made, once it has hidden and finished leaving. */

package/dist/toast/root/toast-root.js

@@ -92,7 +92,16 @@ let HelixHeadlessToast = class HelixHeadlessToast extends HelixElement {
     add(message, options = {}) {
         const tier = this.constructor.tier;
         const item = document.createElement(`${tier}toast-item`);
-        item.textContent = message;
+        if (options.heading === undefined) {
+            item.textContent = message;
+        }
+        else {
+            item.append(slotted('heading', options.heading), slotted('description', message));
+        }
+        if (options.action) {
+            options.action.setAttribute('slot', 'actions');
+            item.append(options.action);
+        }
         if (options.tone) {
             item.setAttribute('tone', options.tone);
         }
@@ -238,3 +247,9 @@ const popoverOpen = (region) => {
 const focusTarget = (item) => item.shadowRoot?.querySelector('[part="dismiss"]') ??
     focusableElements(item)[0] ??
     null;
+const slotted = (slot, words) => {
+    const element = document.createElement('div');
+    element.slot = slot;
+    element.textContent = words;
+    return element;
+};

package/dist/toggle/group/toggle-group.d.ts

@@ -18,9 +18,12 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
  * say whether they are pressed with `aria-pressed`, as React Aria's
  * ToggleButtonGroup and Radix's ToggleGroup do. A press presses or releases
  * one item, the arrow keys move focus without pressing, and `value` is the
- * pressed values, comma separated, which `values` also gives as a list. The
- * form receives one entry per pressed value. The indicator stays hidden, and
- * each pressed item is marked with `:state(pressed)`.
+ * pressed values, comma separated, which `values` also gives as a list. Use
+ * `values` where an item's value holds a comma. The form receives one entry
+ * per pressed value, and a page the browser brings back presses the same
+ * items again. The indicator stays hidden, and each pressed item is marked
+ * with `:state(pressed)`. Inside a toolbar it is a named group of that
+ * toolbar's controls instead, so a reader meets one toolbar.
  *
  * `orientation="vertical"` runs the items down a column, says so to the
  * accessibility tree, and the up and down arrows move between them.
@@ -178,6 +181,16 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * The group's role: a radio group, a toolbar of pressed buttons, or, for
+     * pressed buttons inside a toolbar, a group.
+     *
+     * **A toolbar inside a toolbar is a reader's dead end**, so inside one the
+     * pressed buttons are a named group of the outer toolbar, as React Aria's
+     * ToggleButtonGroup demotes itself. Read by tag and by role, since the
+     * outer toolbar is a Helix one or the page's own `role="toolbar"`.
+     */
+    private get groupRole();
     protected willUpdate(changed: PropertyValues): void;
     /**
      * What the form receives: the value, or under `selection-mode="multiple"`
@@ -203,6 +216,14 @@ export declare class HelixHeadlessToggleGroup extends HelixHeadlessToggleGroup_b
      */
     get values(): string[];
     set values(next: string[]);
+    /** The pressed values as a list last written, which `values` reads. */
+    private chosen;
+    /**
+     * Presses the items a page the browser brings back held. Under
+     * `selection-mode="multiple"` the saved state is the form's entries, one per
+     * pressed value, which the shared restore leaves alone.
+     */
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     /**
      * The row the track sits in, so something can sit beside it.
      *

package/dist/toggle/group/toggle-group.js

@@ -39,11 +39,19 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
                     return;
                 }
                 const value = event.detail.value;
-                this.requestValue(this.multiple
-                    ? toggleValue(this.values, value, this.items.map((item) => item.value)).join(',')
-                    : value);
+                if (!this.multiple) {
+                    this.requestValue(value);
+                    return;
+                }
+                const next = toggleValue(this.values, value, this.items.map((item) => item.value));
+                const was = this.chosen;
+                this.chosen = next;
+                if (!this.requestValue(next.join(','))) {
+                    this.chosen = was;
+                }
             });
         };
+        this.chosen = undefined;
     }
     adopt() {
         if (this.value !== '' || this.children === undefined) {
@@ -120,10 +128,18 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         this.validate();
         this.linkHost();
     }
+    get groupRole() {
+        if (!this.multiple) {
+            return 'radiogroup';
+        }
+        return this.parentElement?.closest('[role="toolbar"], helix-toolbar, helix-headless-toolbar')
+            ? 'group'
+            : 'toolbar';
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         this.adopt();
-        hostAria(this.internals, { label: this.label, role: this.multiple ? 'toolbar' : 'radiogroup' });
+        hostAria(this.internals, { label: this.label, role: this.groupRole });
         this.internals.ariaOrientation = this.orientation ?? null;
         this.internals.setFormValue(this.formValue());
     }
@@ -144,11 +160,24 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
         this.reportRequired(!this.answered, 'Choose one to continue.', 'track');
     }
     get values() {
-        return this.multiple ? commaList(this.value) : this.value === '' ? [] : [this.value];
+        if (!this.multiple) {
+            return this.value === '' ? [] : [this.value];
+        }
+        return this.chosen && this.chosen.join(',') === this.value
+            ? [...this.chosen]
+            : commaList(this.value);
     }
     set values(next) {
+        this.chosen = [...next];
         this.value = next.join(',');
     }
+    formStateRestoreCallback(state) {
+        if (!(state instanceof FormData) || !this.multiple) {
+            super.formStateRestoreCallback(state);
+            return;
+        }
+        this.values = state.getAll(this.name).filter((one) => typeof one === 'string');
+    }
     render() {
         const inside = this.labelPlacement === 'start';
         const label = this.renderGroupLabel();

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

@@ -30,7 +30,9 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  *
  * The tooltip shows on hover and on focus. It hides on pointer leave, on blur,
  * on Escape, and when the trigger is activated. The pointer can move from the
- * trigger onto the bubble and the bubble stays.
+ * trigger onto the bubble and the bubble stays, unless you set
+ * `hoverable="false"`. `delay` is how long the pointer rests before it shows,
+ * and `delay-out` how long it stays once the pointer leaves.
  *
  * Once one tooltip is showing, moving to another trigger shows its tooltip
  * with no `delay`, and the first one hides. The same holds for `skip-delay`
@@ -87,7 +89,9 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      */
     delay: number;
     /**
-     * How long the bubble stays after the pointer leaves, in milliseconds.
+     * How long the bubble stays after the pointer leaves the trigger or the
+     * bubble, in milliseconds: the close delay. It is the time a reader has to
+     * cross the gap onto the bubble.
      */
     delayOut: number;
     /**
@@ -115,6 +119,13 @@ export declare class HelixHeadlessTooltip extends HelixHeadlessTooltip_base {
      * why this does not reflect and nothing styles on it.
      */
     for: string;
+    /**
+     * Whether the pointer can move onto the bubble and the bubble stays, so a
+     * reader can read it under a magnifier or select its words, as WCAG 1.4.13
+     * asks. `hoverable="false"` hides the bubble once the pointer reaches it,
+     * for a bubble that covers something a reader moves on to.
+     */
+    hoverable: boolean;
     /**
      * The space between the trigger and the tip of the bubble, in pixels.
      *

package/dist/tooltip/root/tooltip-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, arrowReach, customElement, elementById, HelixElement, hostAria, linkDescription, MixinControllerOpen, PopoverController, reportRuntime, sideOf, unlinkDescription, } from '@fusion.dev/helix-core';
+import { anchorElement, arrowReach, customElement, elementById, HelixElement, hostAria, linkDescription, MixinControllerOpen, onUnlessFalse, PopoverController, reportRuntime, sideOf, unlinkDescription, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { focusTarget } from '../focus-target.js';
@@ -23,6 +23,7 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
         this.delayOut = 100;
         this.disabled = false;
         this.for = '';
+        this.hoverable = true;
         this.offset = 8;
         this.persist = false;
         this.placement = 'top';
@@ -68,6 +69,10 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             this.timer = setTimeout(() => this.show(), this.delay);
         };
         this.holdOnBubble = () => {
+            if (!this.hoverable) {
+                this.hideLater();
+                return;
+            }
             if (!this.named) {
                 return;
             }
@@ -365,6 +370,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTooltip.prototype, "for", void 0);
+__decorate([
+    property({ converter: onUnlessFalse })
+], HelixHeadlessTooltip.prototype, "hoverable", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTooltip.prototype, "offset", void 0);

package/dist/tour/back.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The stop Back goes to from `index`: the nearest stop before it that is not a
+ * `wait` stop, or `undefined` where there is none.
+ *
+ * A `wait` stop shows nothing and moves on by itself once its target is on the
+ * page, so going back onto one either moves straight on again or leaves the
+ * reader at a stop with nothing in it. Back passes over it to the stop that
+ * told the reader what to do.
+ */
+export declare const stopBefore: (types: readonly (string | undefined)[], index: number) => number | undefined;

package/dist/tour/back.js

@@ -0,0 +1,8 @@
+export const stopBefore = (types, index) => {
+    for (let at = Math.min(index, types.length) - 1; at >= 0; at -= 1) {
+        if (types[at] !== 'wait') {
+            return at;
+        }
+    }
+    return undefined;
+};

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

@@ -22,6 +22,11 @@ declare const HelixHeadlessTour_base: (new (...args: any[]) => import("@fusion.d
  * `toggle` work as they do on `Dialog`. Setting `open` starts the run, and
  * `skip()` and `requestOpen(false)` end it early.
  *
+ * The box the light falls on is on the `spotlight` part as
+ * `--tour-spotlight-x`, `--tour-spotlight-y`, `--tour-spotlight-width` and
+ * `--tour-spotlight-height`, for a sheet that draws its own light, such as a
+ * ring around the target.
+ *
  * Each stop is told its place in the run, from `progress-label`, such as "2 of
  * 5". It describes the stop's panel, so a screen reader says it at every stop,
  * and `progress` draws it in the panel as well. A dialog or a floating stop,
@@ -50,12 +55,19 @@ declare const HelixHeadlessTour_base: (new (...args: any[]) => import("@fusion.d
  * @event {HelixCompleteEvent} helix-complete - Fired when the last stop is
  * finished.
  * @event {HelixTourAskEvent} helix-tour-ask - Fired when a stop's control is pressed to move the tour. The stop sends it, and the tour handles it.
+ * @event {HelixTourStatusEvent} helix-tour-status - Fired when the tour starts waiting at a `wait` stop, is skipped, or is completed, with the stop's index and `detail.status` saying which.
  * @event {ToggleEvent} toggle - Sent when the tour starts or ends, with `newState` and `oldState`.
  *
  * @csspart backdrop - Behind a dialog or a floating stop, which lights nothing. It draws no box until you give it one.
  * @csspart spotlight - The box over the current target. It also draws the dimmed area around the target.
  *
+ * @cssproperty --tour-spotlight-height - The lit box's height, in pixels, padding included. Written on the spotlight while it lights a target.
+ * @cssproperty --tour-spotlight-width - The lit box's width, in pixels, padding included. Written on the spotlight while it lights a target.
+ * @cssproperty --tour-spotlight-x - The lit box's left edge, from the window's left edge, in pixels. Written on the spotlight while it lights a target.
+ * @cssproperty --tour-spotlight-y - The lit box's top edge, from the window's top edge, in pixels. Written on the spotlight while it lights a target.
+ *
  * @cssstate open - While the tour is running.
+ * @cssstate waiting - While the tour waits at a `wait` stop for its target to be on the page.
  */
 export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
     /**
@@ -131,7 +143,10 @@ export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
     get length(): number;
     /** Goes to the next stop, and finishes the tour on the last stop. */
     next(): void;
-    /** Goes to the previous stop. It does nothing on the first stop. */
+    /**
+     * Goes to the previous stop, passing over a `wait` stop, which shows nothing.
+     * It does nothing on the first stop, or where only `wait` stops come before.
+     */
     back(): void;
     /**
      * Ends the tour early, as a close. `helix-complete` is not fired.
@@ -164,7 +179,20 @@ export declare class HelixHeadlessTour extends HelixHeadlessTour_base {
      * where to be.
      */
     private follow;
-    /** Focuses the current stop's panel once the stop has shown it. */
+    /**
+     * Where focus was put while a `wait` stop waits, so the move on from it still
+     * counts as a move from inside the tour while focus has stayed there.
+     */
+    private parked;
+    /**
+     * Focuses the current stop's panel once the stop has shown it.
+     *
+     * A `wait` stop shows no panel, and focus would fall to the body. It goes to
+     * the target of the stop before instead, which is usually the control the
+     * reader is asked to use, such as the button that opens the menu the stop
+     * waits for. Where that target holds no control, it goes back to where it
+     * was when the tour opened.
+     */
     private focusCurrent;
     /**
      * Tells each stop where it is in the run.

package/dist/tour/root/tour-root.js

@@ -4,9 +4,10 @@ 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, deepContains, fillTemplate, HelixActivateEvent, HelixBeforeActivateEvent, HelixCompleteEvent, HelixElement, hostAria, MixinControllerOpen, requestChange, whenHydrated, } from '@fusion.dev/helix-core';
+import { controlsIn, customElement, deepActiveElement, deepContains, fillTemplate, HelixActivateEvent, HelixBeforeActivateEvent, HelixCompleteEvent, HelixElement, HelixTourStatusEvent, hostAria, MixinControllerOpen, requestChange, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { stopBefore } from '../back.js';
 import { onPage, waitFor } from '../wait.js';
 let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(HelixElement) {
     constructor() {
@@ -69,16 +70,20 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
         this.move(this.index + 1);
     }
     back() {
-        if (this.index <= 0) {
-            return;
+        const to = stopBefore(this.stops.map((stop) => stop.type), this.index);
+        if (to !== undefined) {
+            this.move(to);
         }
-        this.move(this.index - 1);
     }
     skip() {
-        this.requestOpen(false);
+        const at = this.index;
+        if (this.open && this.requestOpen(false)) {
+            this.dispatchEvent(new HelixTourStatusEvent({ index: at, status: 'skipped' }));
+        }
     }
     finish() {
         this.dispatchEvent(new HelixCompleteEvent({ value: String(this.index) }));
+        this.dispatchEvent(new HelixTourStatusEvent({ index: this.index, status: 'completed' }));
         this.open = false;
     }
     move(to) {
@@ -115,6 +120,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
         this.unwait?.();
         this.unwait = undefined;
         this.waiting = undefined;
+        this.toggleState('waiting', false);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -138,7 +144,13 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
         const opened = changed.has('open') && this.open && changed.get('open') === false;
         const closed = changed.has('open') && !this.open && changed.get('open') === true;
         const active = deepActiveElement();
-        const inside = active === null || active === document.body || deepContains(this, active);
+        const inside = active === null ||
+            active === document.body ||
+            deepContains(this, active) ||
+            (this.parked !== undefined && active === this.parked);
+        if (opened || closed || changed.has('index')) {
+            this.parked = undefined;
+        }
         if (opened) {
             if (active instanceof HTMLElement && !deepContains(this, active)) {
                 this.returnFocus = active;
@@ -158,10 +170,21 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
     }
     focusCurrent() {
         const stops = this.stops;
-        const stop = stops[Math.max(0, Math.min(this.index, stops.length - 1))];
+        const at = Math.max(0, Math.min(this.index, stops.length - 1));
+        const stop = stops[at];
         if (!stop) {
             return;
         }
+        if (stop.type === 'wait') {
+            const before = stopBefore(stops.map((one) => one.type), at);
+            const target = before === undefined ? undefined : stops[before]?.target;
+            const park = (target ? controlsIn([target])[0] : undefined) ?? this.returnFocus;
+            if (park?.isConnected) {
+                park.focus();
+                this.parked = park;
+            }
+            return;
+        }
         void stop.updateComplete.then(() => {
             if (this.open && stop.current) {
                 stop.focus();
@@ -213,12 +236,15 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
         this.unwait?.();
         this.unwait = undefined;
         this.waiting = next;
+        this.toggleState('waiting', next !== undefined);
         if (!next) {
             return;
         }
+        this.dispatchEvent(new HelixTourStatusEvent({ index: this.index, status: 'waiting' }));
         this.unwait = waitFor(next.getRootNode(), () => onPage(next.target), () => {
             this.waiting = undefined;
             this.unwait = undefined;
+            this.toggleState('waiting', false);
             queueMicrotask(() => {
                 if (this.open && this.current === next) {
                     this.next();
@@ -274,7 +300,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
             : html `<div
             part="spotlight"
             aria-hidden="true"
-            style=${`left: ${spot.left}px; top: ${spot.top}px; block-size: ${spot.height}px; inline-size: ${spot.width}px`}
+            style=${`left: ${spot.left}px; top: ${spot.top}px; block-size: ${spot.height}px; inline-size: ${spot.width}px; --tour-spotlight-x: ${spot.left}px; --tour-spotlight-y: ${spot.top}px; --tour-spotlight-width: ${spot.width}px; --tour-spotlight-height: ${spot.height}px`}
           ></div>`}
       <slot></slot>`;
     }

package/dist/tree/item/tree-item.d.ts

@@ -21,7 +21,8 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  *
  * Pressing a branch, or Enter or Space on it, opens or closes it. A branch with
  * a `value` is chosen as well and sends `helix-select`, unless the tree has
- * `nesting="heading"`, where a branch names the list under it.
+ * `nesting="heading"`, where a branch names the list under it, or
+ * `selection-mode="leaf"`, where only the items at the ends are chosen.
  *
  * A `disabled` item is reached by the arrow keys and announced as unavailable,
  * and a press, Enter or Space on it does nothing.
@@ -58,7 +59,9 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  *
  * @cssproperty --tree-level - How deep this row sits, counting from one as `aria-level` does, for the indent.
  *
+ * @cssstate checked - While it is checked, in a tree with `selection-mode="multiple"`.
  * @cssstate loading - While a `lazy` item is open and its children have not arrived.
+ * @cssstate mixed - While some of a branch's items are checked, in a tree with `selection-mode="multiple"`.
  * @cssstate open - While its children are shown.
  * @cssstate selected - While it is selected.
  */
@@ -80,8 +83,9 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
     disabled: boolean;
     /**
      * @internal Set by the tree: whether a branch heads the list under it, as
-     * under `nesting="heading"`. Such a branch only opens and closes when it is
-     * pressed, because it names a list and is not a destination of its own.
+     * under `nesting="heading"`, or is not chosen at all, as under
+     * `selection-mode="leaf"`. Such a branch only opens and closes when it is
+     * pressed.
      */
     heads: boolean;
     /**

package/dist/tree/item/tree-item.js

@@ -110,6 +110,7 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
     renderToggle() {
         return html `<slot
       name="chevron"
+      aria-hidden="true"
       @click=${this.href === '' ? nothing : this.handleToggleClick}
       ><svg part="toggle" fill="currentColor" viewBox=${caretDown.viewBox} aria-hidden="true">
         ${unsafeSVG(caretDown.content)}
@@ -140,6 +141,8 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('selected', this.selected);
+        this.toggleState('checked', this.checkable && this.checked === true);
+        this.toggleState('mixed', this.checkable && this.checked === 'mixed');
         this.toggleState('loading', this.open && this.lazy);
         if (this.childrenKnown) {
             this.branch = this.knownChildren.some((child) => child.slot === 'children');

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

@@ -24,6 +24,18 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * checked values, comma separated, which `values` also gives as a list, and
  * the tree says `aria-multiselectable`.
  *
+ * `selection-mode="leaf"` chooses one item at a time and only the items at the
+ * ends: a press, Enter or Space on a branch opens or closes it and chooses
+ * nothing, as Web Awesome's `leaf` mode does.
+ *
+ * Keys: Up and Down Arrow move between the items a reader can see; Right
+ * Arrow opens a shut branch and then moves into it, and Left Arrow shuts an
+ * open one and then moves to its parent, the two swapping on a right-to-left
+ * page. Home and End go to the first and the last item, Enter and Space choose
+ * or open, and the tree's one tab stop stays on the item last reached. In a
+ * tree of check marks, Control+A (Command+A on an Apple keyboard) checks every
+ * item or clears them all, and Shift with Up or Down Arrow moves and checks.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -91,12 +103,12 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      */
     nesting?: 'heading' | 'peer' | 'subordinate';
     /**
-     * Whether a reader can check many items. Unset, one item is chosen at a
-     * time.
+     * Whether a reader can check many items, or choose only the items at the
+     * ends. Unset, one item is chosen at a time, branches included.
      *
      * Optional, so a tree of one choice writes no attribute onto the host.
      */
-    selectionMode?: 'multiple';
+    selectionMode?: 'leaf' | 'multiple';
     /**
      * The checked values, as a list, under `selection-mode="multiple"`, and the
      * chosen value alone otherwise. Writing it sets `active`.
@@ -154,6 +166,15 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      * Returns whether the press was one of those.
      */
     private handleTyping;
+    /**
+     * The keys of a tree of check marks, as the tree pattern gives them:
+     * Control+A (Command+A on an Apple keyboard) checks every item, or clears
+     * them all where every one is checked, and Shift with Up or Down Arrow moves
+     * to the item before or after and checks or unchecks it.
+     *
+     * Returns whether the press was one of those.
+     */
+    private handleMultiple;
     private move;
     private focusOn;
     private readonly handleKeydown;

package/dist/tree/root/tree-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, closestInstance, commaList, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, scrollItemIntoView, slottedWords, Typeahead, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, closestInstance, commaList, customElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, scrollItemIntoView, slottedWords, Typeahead, treeArrow, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTreeItem } from '../item/tree-item.js';
@@ -45,6 +45,10 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             if (!current || !this.items.includes(current)) {
                 return;
             }
+            if (this.multiple && this.handleMultiple(current, event)) {
+                event.preventDefault();
+                return;
+            }
             if (this.handleTyping(current, event)) {
                 event.preventDefault();
                 return;
@@ -71,21 +75,16 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             else if (event.key === 'End') {
                 this.focusOn(this.visibleItems.at(-1));
             }
-            else if (along === 1) {
-                if (current.isBranch && !current.open && !current.disabled) {
-                    current.requestOpen(true);
+            else if (along !== 0) {
+                const arrow = treeArrow({ branch: current.isBranch, disabled: current.disabled, open: current.open }, along);
+                if (arrow === 'open' || arrow === 'close') {
+                    current.requestOpen(arrow === 'open');
                     this.syncItems();
                 }
-                else if (current.isBranch) {
+                else if (arrow === 'child') {
                     this.move(current, 1);
                 }
-            }
-            else if (along === -1) {
-                if (current.isBranch && current.open && !current.disabled) {
-                    current.requestOpen(false);
-                    this.syncItems();
-                }
-                else {
+                else if (arrow === 'parent') {
                     const parent = closestInstance(current.parentElement, HelixHeadlessTreeItem);
                     this.focusOn(parent instanceof HelixHeadlessTreeItem ? parent : undefined);
                 }
@@ -157,7 +156,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         const held = visible.find((item) => item.focusable) ??
             this.visibleAncestor(this.items.find((item) => item.focusable));
         const stop = held ?? chosen;
-        const heads = this.nesting === 'heading';
+        const heads = this.nesting === 'heading' || this.selectionMode === 'leaf';
         const multiple = this.multiple;
         const checked = new Set(this.values);
         for (const item of this.items) {
@@ -217,6 +216,26 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         }
         return true;
     }
+    handleMultiple(current, event) {
+        if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === 'a') {
+            const leaves = this.items
+                .filter((item) => !this.holds(item) && !item.disabled && item.value !== '')
+                .map((item) => item.value);
+            this.requestActive(pressRow({ branch: true, disabled: false, leaves, value: '' }, this.values, this.order).join(','));
+            this.syncItems();
+            return true;
+        }
+        if (event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            const visible = this.visibleItems;
+            const next = visible[visible.indexOf(current) + (event.key === 'ArrowDown' ? 1 : -1)];
+            if (next) {
+                this.focusOn(next);
+                next.select();
+            }
+            return true;
+        }
+        return false;
+    }
     move(from, delta) {
         const visible = this.visibleItems;
         const index = visible.indexOf(from);

package/dist/tree/selection.js

@@ -1,3 +1,4 @@
+import { toggleEvery } from '@fusion.dev/helix-core';
 const valuesOf = (row) => row.branch && row.leaves.length > 0 ? [...row.leaves] : row.value === '' ? [] : [row.value];
 export const checkedState = (row, chosen) => {
     const values = valuesOf(row);
@@ -8,19 +9,5 @@ export const checkedState = (row, chosen) => {
     return count === values.length ? true : 'mixed';
 };
 export const pressRow = (row, chosen, order) => {
-    if (row.disabled) {
-        return [...chosen];
-    }
-    const values = valuesOf(row);
-    const all = values.every((value) => chosen.includes(value));
-    const next = new Set(chosen);
-    for (const value of values) {
-        if (all) {
-            next.delete(value);
-        }
-        else {
-            next.add(value);
-        }
-    }
-    return order.filter((value) => next.has(value));
+    return row.disabled ? [...chosen] : toggleEvery(chosen, valuesOf(row), order);
 };