@fusion.dev/helix-headless 0.144.0 → 0.146.0

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

@@ -21,7 +21,15 @@ 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.
+ *
+ * A `lazy` item is a branch whose children you load when it opens: opening it
+ * sends `helix-load`, the row says it is busy, and the children you add appear
+ * in it. Remove `lazy` once they are in.
  *
  * @since 0.1.0
  * @status stable
@@ -29,15 +37,20 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * @documentation https://fusion.dev/helix/components/tree
  *
  * @slot - The item's label.
+ * @slot chevron - Replaces the expand and collapse mark of a branch, such as with your own icon.
  * @slot children - Nested items, which make this a branch.
  * @slot end - Content after the label, at the far side of the row, such as a count or a state.
  * @slot start - Content before the label and after the chevron, such as a mark for the item.
  *
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before a branch closes, and cancelable.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before a branch opens, and cancelable.
+ * @event {HelixLoadEvent} helix-load - Fired when a `lazy` item opens, so you can load its children.
  * @event {HelixSelectEvent} helix-select - Fired when the item is chosen, and cancelable. Canceling it changes nothing.
  * @event {ToggleEvent} toggle - Sent when the branch opens or closes, with `newState` and `oldState`.
  *
+ * @csspart checkbox - The check mark's box, in a tree with `selection-mode="multiple"`.
+ * @csspart checkbox-checked - The check mark's box while the item is checked.
+ * @csspart checkbox-mixed - The check mark's box while some of a branch's items are checked.
  * @csspart group - The container for nested items.
  * @csspart item - The node, and the focus target unless `href` moves it to the row.
  * @csspart label - The label text.
@@ -46,14 +59,33 @@ 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.
  */
 export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
+    /**
+     * @internal Set by the tree: whether the item draws a check mark and is
+     * checked rather than selected, as under `selection-mode="multiple"`.
+     */
+    checkable: boolean;
+    /**
+     * @internal Set by the tree in `selection-mode="multiple"`: whether the item
+     * is checked, `mixed` for a branch some of whose items are.
+     */
+    checked: boolean | 'mixed';
+    /**
+     * Whether the item cannot be chosen, opened or followed. The arrow keys still
+     * reach it, so a reader knows it is there.
+     */
+    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;
     /**
@@ -64,6 +96,13 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * current page on every item a consumer never asked to be one.
      */
     href: string;
+    /**
+     * Whether the item is a branch whose children are loaded when it opens.
+     *
+     * Opening it sends `helix-load`. Add the children to its `children` slot,
+     * and remove `lazy` once they are in, as Web Awesome's tree item does.
+     */
+    lazy: boolean;
     /**
      * The node's depth from the root. The tree counts it, so indentation needs no
      * nested CSS.
@@ -151,7 +190,7 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * row rather than the wrapper around it.
      */
     focusItem(): void;
-    /** Selects this node and sends `helix-select`. */
+    /** Selects this node and sends `helix-select`. A disabled node sends nothing. */
     select(): void;
     /**
      * Chooses this node, as a press or Enter does.
@@ -163,6 +202,13 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * value and nothing listens for it.
      */
     activate(): void;
+    /**
+     * Opens or closes a branch, unless the item is disabled.
+     *
+     * Every press and key that opens a branch comes through here, so `disabled`
+     * holds for all of them. A script can still set `open`.
+     */
+    toggleOpen(): boolean;
     /**
      * Follows a link slotted into the name, if there is one.
      *
@@ -184,8 +230,17 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * its children.
      */
     private follow;
+    /** A press on the check mark checks the item and leaves a branch as it is. */
+    private readonly handleCheckClick;
     private readonly handleToggleClick;
     private readonly handleRowClick;
+    /**
+     * The expand and collapse mark of a branch, as the `chevron` slot's
+     * fallback, so an icon of your own replaces it by being slotted.
+     */
+    protected renderToggle(): TemplateResult;
+    /** The check mark, in a tree with `selection-mode="multiple"`. */
+    private renderCheckbox;
     /** Everything inside the row, which is the same whichever element it is. */
     private renderRow;
     /**
@@ -204,6 +259,8 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * a consumer's markup means. What stops is the write back.
      */
     protected willUpdate(changed: PropertyValues): void;
+    /** Asks for a lazy branch's children when it opens. */
+    protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,22 +4,31 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HelixSelectEvent, MixinControllerOpen, } from '@fusion.dev/helix-core';
-import { caretDown } from '@fusion.dev/helix-icons';
+import { customElement, HelixElement, HelixLoadEvent, HelixSelectEvent, MixinControllerOpen, } from '@fusion.dev/helix-core';
+import { caretDown, check, minus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerOpen(HelixElement) {
     constructor() {
         super(...arguments);
+        this.checkable = false;
+        this.checked = false;
+        this.disabled = false;
         this.heads = false;
         this.href = '';
+        this.lazy = false;
         this.rel = '';
         this.selected = false;
         this.target = '';
         this.focusable = false;
         this.value = '';
         this.branch = false;
+        this.handleCheckClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.select();
+        };
         this.handleToggleClick = (event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -27,7 +36,11 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         };
         this.handleRowClick = (event) => {
             const onLink = event.composedPath().some((node) => node instanceof HTMLAnchorElement);
-            if (this.branch && this.href === '') {
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            if (this.isBranch && this.href === '') {
                 if (!onLink) {
                     if (this.choosable) {
                         this.select();
@@ -51,10 +64,10 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
         });
     }
     get choosable() {
-        return this.value !== '' && !this.heads;
+        return this.value !== '' && !this.heads && !this.checkable && !this.disabled;
     }
     get isBranch() {
-        return this.branch;
+        return this.branch || this.lazy;
     }
     focusItem() {
         this.renderRoot
@@ -62,12 +75,21 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
             ?.focus({ preventScroll: true });
     }
     select() {
+        if (this.disabled) {
+            return;
+        }
         this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
     }
     activate() {
+        if (this.disabled) {
+            return;
+        }
         this.select();
         this.follow();
     }
+    toggleOpen() {
+        return this.disabled ? false : super.toggleOpen();
+    }
     follow() {
         const own = this.renderRoot?.querySelector('a[part="row"]');
         if (own) {
@@ -85,18 +107,33 @@ 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)}
+      </svg></slot
+    >`;
+    }
+    renderCheckbox() {
+        if (!this.checkable) {
+            return nothing;
+        }
+        const mixed = this.checked === 'mixed';
+        const glyph = mixed ? minus : this.checked ? check : undefined;
+        return html `<span
+      part="checkbox${mixed ? ' checkbox-mixed' : this.checked ? ' checkbox-checked' : ''}"
+      aria-hidden="true"
+      @click=${this.handleCheckClick}
+      >${glyph
+            ? html `<svg fill="currentColor" viewBox=${glyph.viewBox}>${unsafeSVG(glyph.content)}</svg>`
+            : nothing}</span
+    >`;
+    }
     renderRow() {
-        return html `${this.branch
-            ? html `<svg
-            part="toggle"
-            fill="currentColor"
-            viewBox=${caretDown.viewBox}
-            aria-hidden="true"
-            @click=${this.href === '' ? nothing : this.handleToggleClick}
-          >
-          ${unsafeSVG(caretDown.content)}
-        </svg>`
-            : nothing}
+        return html `${this.isBranch ? this.renderToggle() : nothing}${this.renderCheckbox()}
       <slot name="start"></slot>
       <span part="label"><slot></slot></span>
       <slot name="end"></slot>`;
@@ -104,21 +141,41 @@ 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');
         }
     }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('open') && this.open && this.lazy) {
+            this.dispatchEvent(new HelixLoadEvent());
+        }
+    }
     render() {
         const linked = this.href !== '';
         const level = this.level ?? 1;
         const depth = this.level ?? nothing;
-        const expanded = this.branch ? (this.open ? 'true' : 'false') : nothing;
+        const expanded = this.isBranch ? (this.open ? 'true' : 'false') : nothing;
+        const chosen = this.checkable ? undefined : this.selected ? 'true' : 'false';
+        const checked = this.checkable
+            ? this.checked === 'mixed'
+                ? 'mixed'
+                : String(this.checked)
+            : undefined;
+        const busy = this.open && this.lazy ? 'true' : nothing;
+        const off = this.disabled ? 'true' : nothing;
         const tabIndex = this.focusable || !this.childrenKnown ? '0' : '-1';
         return html `<div
         part="item"
         role=${linked ? 'none' : 'treeitem'}
         aria-expanded=${linked ? nothing : expanded}
-        aria-selected=${linked ? nothing : this.selected ? 'true' : 'false'}
+        aria-selected=${linked ? nothing : (chosen ?? nothing)}
+        aria-checked=${linked ? nothing : (checked ?? nothing)}
+        aria-disabled=${linked ? nothing : off}
+        aria-busy=${linked ? nothing : busy}
         aria-level=${linked ? nothing : depth}
         tabindex=${linked ? nothing : tabIndex}
       >
@@ -126,11 +183,14 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
             ? html `<a
                 part="row"
                 role="treeitem"
-                href=${this.href}
+                href=${this.disabled ? nothing : this.href}
                 target=${this.target || nothing}
                 rel=${this.rel || nothing}
                 aria-expanded=${expanded}
-                aria-selected=${this.selected ? 'true' : 'false'}
+                aria-selected=${chosen ?? nothing}
+                aria-checked=${checked ?? nothing}
+                aria-disabled=${off}
+                aria-busy=${busy}
                 aria-level=${depth}
                 tabindex=${tabIndex}
                 style="--tree-level: ${level}"
@@ -152,12 +212,24 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
       </div>`;
     }
 };
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTreeItem.prototype, "checkable", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTreeItem.prototype, "checked", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTreeItem.prototype, "disabled", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTreeItem.prototype, "heads", void 0);
 __decorate([
     property()
 ], HelixHeadlessTreeItem.prototype, "href", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTreeItem.prototype, "lazy", void 0);
 __decorate([
     property({ attribute: false, type: Number })
 ], HelixHeadlessTreeItem.prototype, "level", void 0);

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

@@ -16,6 +16,26 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * Typing a letter moves to the next visible item whose name starts with it,
  * and `*` opens every branch beside the focused item.
  *
+ * `selection-mode="multiple"` draws a check mark on every row and lets a
+ * reader check many, as Web Awesome's and Ark UI's checkbox trees do. Checking
+ * a branch checks every item under it, and a branch some of whose items are
+ * checked is partly checked. Space or a press on the mark checks the focused
+ * row, and Enter or a press on a branch's row opens it. `active` then holds the
+ * 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
@@ -82,6 +102,21 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      * The resting state is the absence of the attribute, which is `peer`.
      */
     nesting?: 'heading' | 'peer' | 'subordinate';
+    /**
+     * 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?: 'leaf' | 'multiple';
+    /**
+     * The checked values, as a list, under `selection-mode="multiple"`, and the
+     * chosen value alone otherwise. Writing it sets `active`.
+     */
+    get values(): string[];
+    set values(next: string[]);
+    /** Whether many items can be checked. */
+    private get multiple();
     private watcher;
     /**
      * Every item, in the order a reader moving down would meet them.
@@ -100,6 +135,20 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
     /** Items a reader can actually reach: not inside a collapsed branch. */
     private get visibleItems();
     private readonly handleSelection;
+    /** Every value in the tree, in the order a reader meets the items. */
+    private get order();
+    /**
+     * Whether an item holds others, read from the tree as well as from the item.
+     *
+     * **An item hydrating what a server sent has not said it is a branch yet**:
+     * it learns that from its children on the render after, and nothing then
+     * asks the tree again. Read from its own render alone, a folder served with
+     * one of its files checked was counted a leaf and drawn unchecked rather
+     * than partly checked, once hydrated.
+     */
+    private holds;
+    /** What the multiple selection reads of an item. */
+    private rowOf;
     /**
      * Pushes tree-owned state down: which item is selected, which holds the tab
      * stop, and how deep each one sits.
@@ -117,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,10 +4,11 @@ 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, 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';
+import { checkedState, pressRow } from '../selection.js';
 const KEYS = new Set([
     'ArrowDown',
     'ArrowUp',
@@ -33,7 +34,9 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                 return;
             }
             if (!event.defaultPrevented) {
-                this.requestActive(event.detail.value);
+                this.requestActive(this.multiple
+                    ? pressRow(this.rowOf(origin), this.values, this.order).join(',')
+                    : event.detail.value);
             }
             this.syncItems();
         };
@@ -42,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;
@@ -51,6 +58,11 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             }
             this.typeahead.reset();
             const along = inlineStep(this, event.key);
+            if (this.multiple && event.key === ' ') {
+                current.select();
+                event.preventDefault();
+                return;
+            }
             if (event.key === 'ArrowDown') {
                 this.move(current, 1);
             }
@@ -63,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.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.requestOpen(false);
-                    this.syncItems();
-                }
-                else {
+                else if (arrow === 'parent') {
                     const parent = closestInstance(current.parentElement, HelixHeadlessTreeItem);
                     this.focusOn(parent instanceof HelixHeadlessTreeItem ? parent : undefined);
                 }
@@ -100,6 +107,15 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             this.syncItems();
         };
     }
+    get values() {
+        return this.multiple ? commaList(this.active) : this.active === '' ? [] : [this.active];
+    }
+    set values(next) {
+        this.active = next.join(',');
+    }
+    get multiple() {
+        return this.selectionMode === 'multiple';
+    }
     get items() {
         return [...this.querySelectorAll('*')].filter((node) => node instanceof HelixHeadlessTreeItem);
     }
@@ -115,15 +131,37 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             return true;
         });
     }
+    get order() {
+        return this.items.map((item) => item.value).filter((value) => value !== '');
+    }
+    holds(item) {
+        return item.isBranch || this.items.some((other) => other !== item && item.contains(other));
+    }
+    rowOf(item) {
+        const branch = this.holds(item);
+        const leaves = branch
+            ? this.items
+                .filter((other) => other !== item &&
+                item.contains(other) &&
+                !this.holds(other) &&
+                !other.disabled &&
+                other.value !== '')
+                .map((other) => other.value)
+            : [];
+        return { branch, disabled: item.disabled, leaves, value: item.value };
+    }
     syncItems() {
         const visible = this.visibleItems;
         const chosen = this.resolveActive(visible);
         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) {
-            const selected = item.value !== '' && item.value === this.active;
+            const selected = !multiple && item.value !== '' && item.value === this.active;
+            const state = multiple ? checkedState(this.rowOf(item), checked) : false;
             const focusable = item === stop;
             let level = 1;
             let parent = item.parentElement;
@@ -135,6 +173,8 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             }
             whenHydrated(item, () => {
                 item.selected = selected;
+                item.checkable = multiple;
+                item.checked = state;
                 item.focusable = focusable;
                 item.level = level;
                 item.heads = heads;
@@ -176,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);
@@ -214,7 +274,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('active') || changed.has('nesting')) {
+        if (changed.has('active') || changed.has('nesting') || changed.has('selectionMode')) {
             this.syncItems();
         }
     }
@@ -223,6 +283,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
       part="tree"
       role="tree"
       aria-busy=${this.loading ? 'true' : nothing}
+      aria-multiselectable=${this.multiple ? 'true' : nothing}
       aria-label=${this.label}
     >
       <slot
@@ -241,6 +302,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTree.prototype, "nesting", void 0);
+__decorate([
+    property({ attribute: 'selection-mode', reflect: true })
+], HelixHeadlessTree.prototype, "selectionMode", void 0);
 HelixHeadlessTree = __decorate([
     customElement('helix-headless-tree')
 ], HelixHeadlessTree);

package/dist/tree/selection.d.ts

@@ -0,0 +1,24 @@
+/** What the multiple selection reads of a row. */
+export interface CheckableRow {
+    /** Whether the row is a branch, holding rows of its own. */
+    branch: boolean;
+    /** Whether the row is out of play. Its value is never added or taken away. */
+    disabled: boolean;
+    /** The values of the leaves under a branch, in order. Empty for a leaf. */
+    leaves: readonly string[];
+    /** The row's own value. */
+    value: string;
+}
+/**
+ * Whether a row is checked in a tree of check marks: a leaf by its value, and
+ * a branch by its leaves, `mixed` where some of them are.
+ */
+export declare const checkedState: (row: CheckableRow, chosen: ReadonlySet<string>) => boolean | 'mixed';
+/**
+ * The checked values after a press on `row`, in `order`.
+ *
+ * A leaf comes in or out. A branch checks every leaf under it, or clears them
+ * all where every one is already checked, as Ark UI's and Web Awesome's
+ * checkbox trees do. A disabled row changes nothing.
+ */
+export declare const pressRow: (row: CheckableRow, chosen: readonly string[], order: readonly string[]) => string[];

package/dist/tree/selection.js

@@ -0,0 +1,13 @@
+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);
+    const count = values.filter((value) => chosen.has(value)).length;
+    if (count === 0) {
+        return false;
+    }
+    return count === values.length ? true : 'mixed';
+};
+export const pressRow = (row, chosen, order) => {
+    return row.disabled ? [...chosen] : toggleEvery(chosen, valuesOf(row), order);
+};