@fusion.dev/helix-headless 0.154.0 → 0.156.0

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

@@ -25,6 +25,10 @@ declare const HelixHeadlessAccordionItem_base: (new (...args: any[]) => import("
  * and a closed section is `hidden` and `inert` instead, and find in page skips
  * it.
  *
+ * A section whose trigger has no words, with nothing in its `summary` slot,
+ * is announced as a bare button, and a development build warns once with the
+ * kind `missing-name`.
+ *
  * While it is open, the content part carries the content's height as
  * `--accordion-content-height`, as Radix's accordion does, for a stylesheet
  * that animates the section open with keyframes of its own.
@@ -51,6 +55,7 @@ declare const HelixHeadlessAccordionItem_base: (new (...args: any[]) => import("
  *
  * @cssproperty --accordion-content-height - The height of the content, in pixels, written on the `content` part while the section is open.
  *
+ * @cssstate closing - While the item has closed and its content is still drawn, until the content part's animations end.
  * @cssstate open - While the item is open.
  */
 export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionItem_base {
@@ -88,6 +93,11 @@ export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionIt
      * for the reason `groupHeadingLevel` is a property.
      */
     groupHiddenUntilFound: boolean;
+    /**
+     * @internal The accordion's `mode`, written by the accordion, so the trigger
+     * of the open section says it cannot close under `single`.
+     */
+    groupMode: 'single' | 'single-collapsible' | undefined;
     /**
      * The level of the heading around the trigger, from 1 to 6.
      *
@@ -155,6 +165,7 @@ export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionIt
      * and runs before the next paint or key press.
      */
     private readonly handleBeforeMatch;
+    protected firstUpdated(changed: PropertyValues): void;
     /** Whether the item was open at the last update, and `undefined` before one. */
     private wasOpen;
     /**
@@ -239,6 +250,10 @@ export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionIt
      * the accessibility tree by itself, and an inert region is never searched.
      * It leaves the region's own box in the tree, so a closed findable section
      * drops `role="region"` and its name until it opens.
+     *
+     * Under `mode="single"` the open section's trigger is `aria-disabled`, as in
+     * Radix, because a press cannot close the last open section. It stays
+     * focusable, so the arrow keys still reach it.
      */
     protected render(): TemplateResult;
 }

package/dist/accordion/item/accordion-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 { animationsFinished, closestInstance, customElement, HelixElement, headingLevel, MixinControllerOpen, onUnlessFalse, } from '@fusion.dev/helix-core';
+import { animationsFinished, auditName, closestInstance, customElement, HelixElement, headingLevel, MixinControllerOpen, onUnlessFalse, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -18,6 +18,7 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
         this.disabled = false;
         this.groupHeadingLevel = undefined;
         this.groupHiddenUntilFound = true;
+        this.groupMode = undefined;
         this.closing = false;
         this.handleBeforeMatch = (event) => {
             if (this.open || this.requestOpen(true)) {
@@ -76,6 +77,7 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
         if (changed.has('open')) {
             this.closing = !this.open && changed.get('open') === true && this.findable;
         }
+        this.toggleState('closing', this.closing);
     }
     finishClosing() {
         void animationsFinished(this.partNamed('content')).then(() => {
@@ -84,6 +86,10 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
             }
         });
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        auditName(this, () => this.renderRoot.querySelector(`#${TRIGGER_ID}`), 'Write its title in the `summary` slot.');
+    }
     get accordion() {
         return closestInstance(this, HelixHeadlessAccordion);
     }
@@ -129,12 +135,14 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
         const shown = open || this.closing;
         const landmark = shown || !this.findable;
         const level = headingLevel(this.headingLevel ?? this.groupHeadingLevel);
+        const locked = open && this.groupMode === 'single';
         return html `
       <div part="container">
         <div part="heading" role="heading" aria-level=${level}>
         <button
           id=${TRIGGER_ID}
           aria-controls=${CONTENT_ID}
+          aria-disabled=${locked ? 'true' : nothing}
           aria-expanded=${open ? 'true' : 'false'}
           part="trigger"
           type="button"
@@ -175,6 +183,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessAccordionItem.prototype, "groupHiddenUntilFound", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessAccordionItem.prototype, "groupMode", void 0);
 __decorate([
     property({ attribute: 'heading-level', type: Number })
 ], HelixHeadlessAccordionItem.prototype, "headingLevel", void 0);

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

@@ -20,7 +20,8 @@ import { HelixHeadlessAccordionItem } from '../item/accordion-item.js';
  * Keys, on a trigger: Up and Down Arrow move to the previous and the next
  * trigger, and so do Left and Right, wrapping at the ends; Home and End go to
  * the first and the last. Enter and Space open and close the section. Disabled
- * sections are passed over.
+ * sections are passed over. Under `single` the open section's trigger is
+ * `aria-disabled`, because a press cannot close it.
  *
  * Each trigger is a button with `aria-expanded` and `aria-controls`, inside a
  * heading, level 3 unless `heading-level` says otherwise, so the sections are

package/dist/accordion/root/accordion-root.js

@@ -32,6 +32,7 @@ let HelixHeadlessAccordion = class HelixHeadlessAccordion extends HelixElement {
             whenHydrated(item, () => {
                 item.groupHeadingLevel = this.headingLevel;
                 item.groupHiddenUntilFound = this.hiddenUntilFound;
+                item.groupMode = this.mode;
             });
         }
         if (this.mode === undefined) {

package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { type CSSResultGroup, nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One step in a breadcrumb trail.
  *
@@ -11,8 +11,11 @@ import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'l
  * Set `href` to make the whole crumb an anchor, which works with Enter, middle
  * click, and the status bar, and before any JavaScript runs. A router cannot
  * reach an anchor inside a shadow root, so intercept the click for client-side
- * navigation, as with `Tree.Item` and `List.Item`. A trail that collapses also
- * reads `href` to rebuild its hidden crumbs elsewhere.
+ * navigation, as with `Tree.Item` and `List.Item`: a plain press on the link
+ * sends `helix-select` with the `href` as its value first, and canceling it
+ * keeps the browser from following, so a client-side router follows it
+ * instead, as React Aria's `onAction` lets a router do. A press with a
+ * modifier opens the link where the browser opens it and sends nothing.
  *
  * Without `href`, the crumb renders a plain `<span>` around what you slot,
  * including your own anchor.
@@ -37,12 +40,18 @@ import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'l
  * @slot separator - Replaces the chevron shown before this item.
  * @slot start - Content before the label, such as an icon.
  *
+ * @event {HelixSelectEvent} helix-select - A plain press on the crumb's link, with its `href` as the value, before the browser follows it. Cancelable: cancel it to keep the browser from following, as a client-side router does.
+ *
+ * @csspart expand - The button after the first crumb of a folded slotted trail, which shows the folded crumbs.
+ * @csspart fold-separator - The chevron before that button.
  * @csspart link - The crumb itself, which is an `<a>` where `href` is set.
  * @csspart separator - The separator preceding the item.
  * @csspart separator-mark - The chevron between crumbs, shown when no separator is slotted.
  *
+ * @cssstate current - While the crumb is the current page, marked `current` or the last of a trail with none marked.
  * @cssstate end - While the `end` slot holds something, so a stylesheet can join
  * the label and what follows it into one control.
+ * @cssstate folded - While a trail longer than its `max-items` has folded the crumb away. It takes no room.
  */
 export declare class HelixHeadlessBreadcrumb extends HelixElement {
     static styles: CSSResultGroup;
@@ -50,6 +59,18 @@ export declare class HelixHeadlessBreadcrumb extends HelixElement {
      * Marks this item as the page you are on.
      */
     current: boolean;
+    /**
+     * @internal Set by the trail: how many crumbs after this one a slotted trail
+     * longer than its `max-items` has folded, so this crumb draws the button
+     * that shows them. 0 draws none.
+     */
+    fold: number;
+    /**
+     * @internal Set by the trail: whether this crumb is folded away.
+     */
+    folded: boolean;
+    /** @internal Set by the trail: the name of the button that shows the folded crumbs. */
+    foldLabel: string;
     /**
      * The URL the crumb links to. The current page has none.
      *
@@ -74,6 +95,8 @@ export declare class HelixHeadlessBreadcrumb extends HelixElement {
      * `current`, so this one is said to be the current page.
      */
     implied: boolean;
+    /** @internal Set by the trail: what a press on the fold's button does. */
+    onFold: (() => void) | undefined;
     /**
      * The link's `rel` value, which describes how the linked page relates to this
      * one.
@@ -86,6 +109,16 @@ export declare class HelixHeadlessBreadcrumb extends HelixElement {
      */
     target: string;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Sends `helix-select` for a plain press on the link, and keeps the browser
+     * from following where it was canceled.
+     */
+    private readonly handleLinkClick;
+    /**
+     * The button that shows the crumbs a slotted trail folded after this one,
+     * with a chevron before it, drawn after the crumb's own label.
+     */
+    protected renderFold(): TemplateResult | typeof nothing;
     protected updated(changed: PropertyValues): void;
     /**
      * Says whether anything sits after the label.

package/dist/breadcrumbs/breadcrumb/breadcrumb.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, hostAria, slotFilled, slotNamed, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixSelectEvent, hostAria, plainClick, slotFilled, slotNamed, } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
 import { css, html, nothing, } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -13,9 +13,21 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
     constructor() {
         super(...arguments);
         this.current = false;
+        this.fold = 0;
+        this.folded = false;
+        this.foldLabel = '';
         this.implied = false;
+        this.onFold = undefined;
         this.rel = '';
         this.target = '';
+        this.handleLinkClick = (event) => {
+            if (!plainClick(event)) {
+                return;
+            }
+            if (!this.dispatchEvent(new HelixSelectEvent({ value: this.href ?? '' }))) {
+                event.preventDefault();
+            }
+        };
         this.handleEnd = () => {
             this.markEnd();
         };
@@ -24,11 +36,29 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
     :host(:first-child) [part='separator'] {
       display: none;
     }
+
+    :host(:state(folded)) {
+      display: none;
+    }
   `; }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'listitem' });
         this.internals.ariaCurrent = this.current || this.implied ? 'page' : null;
+        this.toggleState('current', this.current || this.implied);
+        this.toggleState('folded', this.folded);
+    }
+    renderFold() {
+        if (this.fold === 0) {
+            return nothing;
+        }
+        return html `<span part="fold-separator" aria-hidden="true"
+        ><svg data-mirror fill="currentColor" viewBox=${caretRight.viewBox}>
+          ${unsafeSVG(caretRight.content)}
+        </svg></span
+      ><button part="expand" type="button" aria-label=${this.foldLabel} @click=${() => this.onFold?.()}>
+        …
+      </button>`;
     }
     updated(changed) {
         super.updated(changed);
@@ -55,14 +85,24 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
               href=${this.href ?? ''}
               target=${this.target || nothing}
               rel=${this.rel || nothing}
+              @click=${this.handleLinkClick}
               >${label}</a
             >`
-            : html `<span part="link">${label}</span>`}<slot name="end" @slotchange=${this.handleEnd}></slot>`;
+            : html `<span part="link">${label}</span>`}<slot name="end" @slotchange=${this.handleEnd}></slot>${this.renderFold()}`;
     }
 };
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessBreadcrumb.prototype, "current", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessBreadcrumb.prototype, "fold", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessBreadcrumb.prototype, "folded", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessBreadcrumb.prototype, "foldLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessBreadcrumb.prototype, "href", void 0);

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

@@ -35,11 +35,13 @@ export interface BreadcrumbItem {
  * array of `{ label, href }`, drawn as crumbs in order, the last one as the
  * current page. Slotted crumbs follow them. Use one way or the other in a trail.
  *
- * With `max-items`, a trail drawn from `items` that is longer folds its middle
- * into one crumb: the first crumb, a button, then the last `max-items` less one.
- * The button is named by `expand-label` and shows the whole trail, moving focus
- * to the first crumb it brought back. A new `items` folds again. Slotted crumbs
- * do not fold; write the folded crumb where the gap should be.
+ * With `max-items`, a trail that is longer folds its middle into one place:
+ * the first crumb, a button, then the last `max-items` less one. The button is
+ * named by `expand-label` and shows the whole trail, moving focus to the first
+ * crumb it brought back. A trail drawn from `items` draws the button as a
+ * crumb of its own, and a new `items` folds again. A slotted trail hides the
+ * crumbs it folds, which take no room, and its first crumb draws the button
+ * after its link; a change to the crumbs folds again.
  *
  * **Keyboard.** Each crumb with an `href` is a link and one tab stop, and
  * Enter follows it. The current page and the separators are not in the tab
@@ -58,6 +60,8 @@ export interface BreadcrumbItem {
  * @csspart crumb - Each crumb drawn from `items`.
  * @csspart crumb-collapsed - The crumb that holds the folded middle of a trail longer than `max-items`.
  * @csspart crumb-current - The crumb drawn from `items` for the current page.
+ * @csspart crumb-expand - The fold button a crumb draws after the first crumb of a folded slotted trail. A trail drawn from `items` draws its fold as a crumb of its own, `crumb-collapsed`, so this one is never drawn there.
+ * @csspart crumb-fold-separator - The chevron before that button.
  * @csspart crumb-link - The link, or the current page's words, of a crumb drawn from `items`.
  * @csspart crumb-separator - The separator before a crumb drawn from `items`.
  * @csspart crumb-separator-mark - The chevron before a crumb drawn from `items`.
@@ -98,6 +102,10 @@ export declare class HelixHeadlessBreadcrumbs extends HelixElement {
     maxItems?: number;
     /** Whether a reader has asked to see the whole of a folded trail. */
     private expanded;
+    /** The crumbs slotted into the trail, in order. */
+    private get slotted();
+    /** Shows the whole of a folded slotted trail and moves focus to the first crumb it brought back. */
+    private readonly unfold;
     /** Shows the whole trail and moves focus to the first crumb it brought back. */
     private readonly expand;
     protected willUpdate(changed: PropertyValues): void;
@@ -110,6 +118,8 @@ export declare class HelixHeadlessBreadcrumbs extends HelixElement {
      * not reflect, so nothing is written onto your markup.
      */
     private readonly markLast;
+    /** New crumbs fold again, as a new `items` does. */
+    private readonly handleSlotChange;
     /** The crumbs `items` describes, each a crumb of this tier. */
     protected renderItems(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;

package/dist/breadcrumbs/root/breadcrumbs-root.js

@@ -17,6 +17,15 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
         this.items = [];
         this.label = 'Breadcrumb';
         this.expanded = false;
+        this.unfold = () => {
+            this.expanded = true;
+            this.updateComplete.then(() => {
+                const crumb = this.slotted[1];
+                const link = crumb?.shadowRoot?.querySelector('a[part="link"]') ??
+                    crumb?.querySelector('a[href]');
+                link?.focus();
+            });
+        };
         this.expand = () => {
             this.expanded = true;
             this.updateComplete.then(() => {
@@ -25,16 +34,32 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             });
         };
         this.markLast = () => {
-            const crumbs = (this.renderRoot.querySelector('slot:not([name])')?.assignedElements() ?? []).filter((one) => one instanceof HelixHeadlessBreadcrumb);
+            const crumbs = this.slotted;
             const marked = crumbs.some((one) => one.current);
+            const most = this.maxItems ?? 0;
+            const fold = !this.expanded && this.items.length === 0 && most >= 2 && crumbs.length > most
+                ? crumbs.length - most
+                : 0;
+            const label = fold > 0 ? formatWords(this, 'expandLabel', { count: fold }) : '';
             crumbs.forEach((crumb, index) => {
                 whenHydrated(crumb, () => {
                     crumb.implied = !marked && this.items.length === 0 && index === crumbs.length - 1;
+                    crumb.folded = index > 0 && index <= fold;
+                    crumb.fold = index === 0 ? fold : 0;
+                    crumb.foldLabel = index === 0 ? label : '';
+                    crumb.onFold = index === 0 && fold > 0 ? this.unfold : undefined;
                 });
             });
         };
+        this.handleSlotChange = () => {
+            this.expanded = false;
+            this.markLast();
+        };
     }
     static { this.words = 'helix-breadcrumbs'; }
+    get slotted() {
+        return (this.renderRoot?.querySelector('slot:not([name])')?.assignedElements() ?? []).filter((one) => one instanceof HelixHeadlessBreadcrumb);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'navigation' });
@@ -65,7 +90,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             ? nothing
             : html `<${crumb}
             part="crumb crumb-collapsed"
-            exportparts="link: crumb-link, separator: crumb-separator, separator-mark: crumb-separator-mark"
+            exportparts="expand: crumb-expand, fold-separator: crumb-fold-separator, link: crumb-link, separator: crumb-separator, separator-mark: crumb-separator-mark"
             ><button
               part="expand"
               type="button"
@@ -79,7 +104,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
         const rest = shown.slice(1);
         const draw = ({ index, item }) => html `<${crumb}
         part="crumb${index === last ? ' crumb-current' : ''}"
-        exportparts="link: crumb-link, separator: crumb-separator, separator-mark: crumb-separator-mark"
+        exportparts="expand: crumb-expand, fold-separator: crumb-fold-separator, link: crumb-link, separator: crumb-separator, separator-mark: crumb-separator-mark"
         href=${index === last ? nothing : (item.href ?? nothing)}
         rel=${item.rel ?? nothing}
         target=${item.target ?? nothing}
@@ -90,7 +115,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
     }
     render() {
         return html `<ol part="list" role="list">
-      ${this.renderItems()}<slot @slotchange=${this.markLast}></slot>
+      ${this.renderItems()}<slot @slotchange=${this.handleSlotChange}></slot>
     </ol>`;
     }
 };

package/dist/button-group/root/button-group-root.d.ts

@@ -65,6 +65,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a press changes `value`, with the value it would leave in `detail.value`. Cancelable: call `preventDefault()` to keep the buttons as they are.
  *
  * @cssproperty --button-group-pressed - Written on the control inside each toggle button of a group with `selection-mode`: `1` while it is pressed and `0` while it is not. Read it in a `::part(button)` rule to draw the pressed look.
+ *
+ * @cssstate pressed - While a group with `selection-mode` has a button pressed.
  */
 export declare class HelixHeadlessButtonGroup extends HelixElement {
     /**

package/dist/button-group/root/button-group-root.js

@@ -145,6 +145,7 @@ let HelixHeadlessButtonGroup = class HelixHeadlessButtonGroup extends HelixEleme
         const toolbar = this.roving;
         hostAria(this.internals, { label: this.label, role: toolbar ? 'toolbar' : 'group' });
         this.internals.ariaOrientation = toolbar ? (this.orientation ?? null) : null;
+        this.toggleState('pressed', Boolean(this.selectionMode) && commaList(this.value).length > 0);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);

package/dist/canvas/node/canvas-node.js

@@ -77,7 +77,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
       aria-describedby=${this.status || this.meaning || this.links ? 'about' : nothing}
       aria-label=${this.label || nothing}
       aria-labelledby=${this.label || this.group ? nothing : 'content'}
-      aria-keyshortcuts=${this.connectable ? 'Enter F2 Space Shift+ArrowRight Shift+ArrowDown Alt+ArrowRight Alt+ArrowDown C Delete' : nothing}
+      aria-keyshortcuts=${this.connectable ? 'Enter F2 Space Control+ArrowDown Control+ArrowUp Shift+ArrowRight Shift+ArrowDown Alt+ArrowRight Alt+ArrowDown C Delete' : nothing}
       role=${this.group ? 'group' : 'article'}
       tabindex=${this.current ? '0' : '-1'}
     >

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

@@ -46,6 +46,10 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * - One card holds the board's tab stop.
  * - The arrow keys move through the cards in reading order. The card you land
  *   on scrolls into view, and its connections are announced with it.
+ * - The card you land on is selected. Control or Command with an arrow key,
+ *   Home, or End moves without changing the selection, and Space adds the card
+ *   to the selection or takes it out, so you can select cards that are not
+ *   next to each other.
  * - Shift with an arrow key moves the card: by 16 units, or to the next
  *   multiple of `snap` where it is set. Alt with an arrow key resizes it from
  *   its bottom right corner the same way.
@@ -143,6 +147,8 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @csspart zoom-in - The button that zooms in.
  * @csspart zoom-out - The button that zooms out.
  *
+ * @cssproperty --canvas-zoom - The board's zoom, which the board writes: 1 at the document's own size, 0.5 at half. The cards inherit it, so a card's stylesheet can draw less when the board is far out, such as a border that stays one pixel wide at `calc(1px / var(--canvas-zoom))`.
+ *
  * @cssstate connecting - While you draw a connection.
  * @cssstate direct - The board moves without easing, while you drag it or while it settles into its box.
  * @cssstate empty - While the document has no nodes.
@@ -271,14 +277,21 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * units.
      */
     resizedLabel: string;
+    /**
+     * What a screen reader calls the board in place of its role, after its
+     * name: "Release plan, canvas". Said only where the board has a name of its
+     * own, since the fallback name is the same word. Empty leaves the role.
+     */
+    roleLabel: string;
     /**
      * The names of the selected cards and connections, comma separated. Empty
      * when nothing is selected.
      *
      * **Comma separated, the way `Listbox` writes a multiple value**, so a page
      * reads one selection the same way wherever it comes from. A click, or a key
-     * that lands on one, selects it alone; Shift, Command or Control with a click
-     * adds or takes one away, and so does Space; Command or Control with A
+     * that lands on one, selects it alone; Command or Control with an arrow key
+     * moves without selecting; Shift, Command or Control with a click adds or
+     * takes one away, and so does Space; Command or Control with A
      * selects everything; Shift and a drag across the empty board selects the
      * cards the box touches. A click on the empty board, or Escape, selects
      * nothing. Dragging, Shift with an arrow, and Delete act on the whole
@@ -882,6 +895,8 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      * asks for it and Escape stops.
      */
     private readonly handleStopKeydown;
+    /** Whether the stop focus is moving to keeps the selection as it is. */
+    private walkingApart;
     /**
      * A stop a reader landed on becomes the tab stop, and a card comes into view.
      *

package/dist/canvas/root/canvas-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 { assignSlots, capturePointer, customElement, formatPercent, formatWords, HelixBeforeMoveEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
+import { assignSlots, auditName, capturePointer, customElement, formatPercent, formatWords, HelixBeforeMoveEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixConnectEvent, HelixElement, HelixMoveEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixSelectEvent, hostAria, inlineStep, isRtl, MixinViewport, words, wordsConverter, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { descriptionOf } from '../describe.js';
@@ -57,6 +57,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         this.readOnly = false;
         this.reconnectingLabel = 'Moving the end of the connection from {from} to {to}. Move to a card and press Enter, or Escape to stop.';
         this.resizedLabel = '{name} resized to {width} by {height}';
+        this.roleLabel = 'canvas';
         this.selected = '';
         this.selectedLabel = 'selected';
         this.selectionLabel = '{count} selected';
@@ -592,8 +593,15 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
                 return;
             }
             event.preventDefault();
-            this.focusStop(walk[to]?.key);
+            this.walkingApart = event.ctrlKey || event.metaKey;
+            try {
+                this.focusStop(walk[to]?.key);
+            }
+            finally {
+                this.walkingApart = false;
+            }
         };
+        this.walkingApart = false;
         this.handleFocusIn = (event) => {
             const edge = this.edgeOf(event);
             const card = edge === undefined ? this.cardOf(event) : undefined;
@@ -603,7 +611,10 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
             this.refocus = undefined;
             this.focusedCard = card;
             this.stop = edge ?? card?.name;
-            if (!this.pointing && this.stop !== undefined && !this.picked.includes(this.stop)) {
+            if (!this.pointing &&
+                !this.walkingApart &&
+                this.stop !== undefined &&
+                !this.picked.includes(this.stop)) {
                 this.choose(this.stop);
             }
             if (card) {
@@ -1650,6 +1661,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
+        auditName(this, () => null, 'Give it a `label` that says what the board holds, such as "Release plan".', () => this.label !== '');
         if (this.waiting) {
             this.measured = this.box;
             this.view = this.waiting;
@@ -1941,7 +1953,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         d=${drawn.d}
         data-edge=${key}
         fill="none"
-        aria-keyshortcuts="Enter F2 C Delete"
+        aria-keyshortcuts="Enter F2 Space Control+ArrowDown Control+ArrowUp C Delete"
         role="button"
         tabindex=${key === stop ? '0' : '-1'}
       />
@@ -2050,7 +2062,8 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         return html `<div
       part="region"
       role="group"
-      aria-label=${this.label || this.fallbackLabel}
+      aria-label=${this.label || this.getAttribute?.('aria-label') || this.fallbackLabel}
+      aria-roledescription=${(this.label || this.getAttribute?.('aria-label')) && this.roleLabel ? this.roleLabel : nothing}
       aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight Plus Minus"
       tabindex="0"
       @focusin=${this.idle.stir}
@@ -2063,7 +2076,7 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
       </div>
       <div
         part="viewport"
-        style=${`--_canvas-x: ${this.at.x}px; --_canvas-y: ${this.at.y}px; --_canvas-zoom: ${this.at.zoom}; --_canvas-rule-x: ${this.at.x - origin.x * this.at.zoom}px; --_canvas-rule-y: ${this.at.y - origin.y * this.at.zoom}px; --_canvas-rule-zoom: ${ruling(this.at.zoom)}`}
+        style=${`--_canvas-x: ${this.at.x}px; --_canvas-y: ${this.at.y}px; --_canvas-zoom: ${this.at.zoom}; --canvas-zoom: ${this.at.zoom}; --_canvas-rule-x: ${this.at.x - origin.x * this.at.zoom}px; --_canvas-rule-y: ${this.at.y - origin.y * this.at.zoom}px; --_canvas-rule-zoom: ${ruling(this.at.zoom)}`}
         @wheel=${this.handleWheel}
       >
         <!-- **One shape, whatever the board holds**, which is what hydration
@@ -2175,6 +2188,10 @@ __decorate([
     words,
     property({ attribute: 'resized-label' })
 ], HelixHeadlessCanvas.prototype, "resizedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'role-label' })
+], HelixHeadlessCanvas.prototype, "roleLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessCanvas.prototype, "selected", void 0);

package/dist/chat/composer/chat-composer.js

@@ -105,7 +105,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         super.updated(changed);
         this.markEmpty();
         if (changed.has('value')) {
-            this.internals.setFormValue(this.value === '' ? null : this.value);
+            this.internals.setFormValue(this.value === '' ? null : this.value, this.value);
         }
         const field = this.partNamed('field');
         if (field?.validity) {

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

@@ -40,7 +40,8 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * The log is `aria-live="off"`. A separate status region announces each new
  * turn once, when it has finished arriving. It skips the user's own turns
  * unless they failed to send, turns loaded as history, and the turns already
- * there when the transcript opened.
+ * there when the transcript opened. A turn is said with its author first, such
+ * as "Ada: It ships today" (`arrival-label`), where its author can be named.
  *
  * Pass the turns as children or as `turns` data. Do not use both. Children
  * render from the server and suit most conversations. `turns` draws a long
@@ -145,6 +146,13 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     static shadowRootOptions: ShadowRootInit;
     /** How tall a turn is assumed to be before it has been drawn, in pixels. */
     static readonly ESTIMATE = 72;
+    /**
+     * What a screen reader hears when a turn arrives. `{author}` is who wrote
+     * it, as its name says it, and `{text}` its words. A turn with no author a
+     * reader can be told, a turn by `them` with no `author-label`, says its
+     * words alone.
+     */
+    arrivalLabel: string;
     /**
      * Declarations for the turns from `turns` by each author, keyed by `author`,
      * as JSON in the attribute: `{"ada": "--chat-message-background-color: …"}`.
@@ -430,6 +438,11 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     private announce;
     /** The turns after the newest one already accounted for, by the rules above. */
     private arrived;
+    /**
+     * What is said for a turn: a failed one with `failed-turn-label`, and
+     * another with `arrival-label` where its author can be named, so a reader
+     * in a conversation of several knows who spoke.
+     */
     private phrase;
     /** Watches what is drawn for size, re-observing only when that changed. */
     private watchSizes;