@fusion.dev/helix-headless 0.143.0 → 0.145.0

package/dist/badge/root/badge-root.js

@@ -36,7 +36,7 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
         data-blank=${blank ? '' : nothing}
         data-single=${text.length <= 1 ? '' : nothing}
         role="status"
-        aria-label=${this.label !== '' && announced ? this.label : nothing}
+        aria-label=${announced ? this.label || text : nothing}
         >${blank ? html `<span aria-hidden="true">${text}</span>` : text}</span
       >`;
     }

package/dist/bar-chart/root/bar-chart-root.d.ts

@@ -15,11 +15,18 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * and 43px in a wide one, and SVG has no setting that keeps text at one size
  * the way `vector-effect` does for strokes.
  *
- * The table is the accessible representation, and the drawing is `aria-hidden`,
- * so screen reader users get the numbers themselves. The `summary` part names
+ * The table is the accessible representation, and the drawing is hidden from
+ * screen readers, so they get the numbers themselves. The `summary` part names
  * the chart, from `label` or the table's caption, and gives each series' highest
  * reading.
  *
+ * **The plot is read by key.** It takes focus, named by `label` or the caption.
+ * The arrows along the categories move from one to the next, which is left and
+ * right for columns and up and down for `orientation="horizontal"`. Home and
+ * End go to the first and the last, and the other pair of arrows moves among
+ * the series of a category. The tooltip follows, the `live` part says the
+ * reading in words, and Escape puts the tooltip away.
+ *
  * The component writes the custom properties below with numbers it computes,
  * and the stylesheet that draws the chart reads them. Do not set them yourself.
  *
@@ -41,8 +48,9 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart label - One category's name.
  * @csspart labels - The row of category names.
  * @csspart line - A series drawn as a line, named in `lines`.
+ * @csspart live - The readout: a polite live region that says the reading the keys moved to. Hide it visually.
  * @csspart mark - The invisible point the tooltip is anchored to.
- * @csspart plot - The drawing.
+ * @csspart plot - The drawing, which takes focus to be read by key.
  * @csspart summary - The chart's name and each series' highest reading, written as a sentence for screen readers. Hide it visually.
  * @csspart svg - The drawing surface the bars and lines sit on.
  * @csspart tick - One number on an axis.
@@ -55,6 +63,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart tooltip-arrow-top - The arrow while the bubble is above the reading, on the bubble's bottom edge. Set together with `tooltip-arrow`.
  * @csspart tooltip-bottom - The bubble while it is below the reading. Set together with `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell the series keys rest on, while they rest there. Set alongside `tooltip-cell`.
  * @csspart tooltip-label - The reading's category name inside the tooltip.
  * @csspart tooltip-left - The bubble while it is left of the reading. Set together with `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.

package/dist/bar-chart/root/bar-chart-root.js

@@ -37,9 +37,10 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         }
         const scaled = this.scaled;
         const own = (one) => scaled.has(one.name.trim().toLowerCase());
-        const values = series.flatMap((one) => one.points.map((point) => point.value));
+        const shown = series.filter((one) => this.showsSeries(one.name));
+        const values = shown.flatMap((one) => one.points.map((point) => point.value));
         const on = (which) => {
-            const found = series.filter(which).flatMap((one) => one.points.map((point) => point.value));
+            const found = shown.filter(which).flatMap((one) => one.points.map((point) => point.value));
             return found.length > 0 ? found : values.length > 0 ? values : [0];
         };
         const [low, high] = extent(scaled.size === 0 ? on(() => true) : on((one) => !own(one)));
@@ -72,7 +73,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             return [`${one.name} ${top.label} ${text}`];
         });
         const named = this.named ? `${this.named}. ` : '';
-        return html `<p part="summary">${named}${this.highestLabel}: ${highest.join('; ')}.</p>`;
+        return html `<p id="helix-chart-summary" part="summary">${named}${this.highestLabel}: ${highest.join('; ')}.</p>`;
     }
     renderPlot(series, categories, y, domain, floor, z) {
         const sideways = this.orientation === 'horizontal';
@@ -83,7 +84,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const against = (one) => z !== undefined && own(one) ? z : y;
         const columns = series
             .map((one, index) => ({ one, slots: byRow(one, categories.length), tone: index }))
-            .filter(({ one }) => !lined.has(one.name.trim().toLowerCase()));
+            .filter(({ one }) => !lined.has(one.name.trim().toLowerCase()) && this.showsSeries(one.name));
         const stride = (slot * 0.72) / Math.max(columns.length, 1);
         const gap = columns.length > 1 ? stride * 0.08 : 0;
         const thickness = stride - gap;
@@ -113,11 +114,16 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
           />`;
         };
         return html `<div
-      aria-hidden="true"
+      aria-describedby=${this.named ? 'helix-chart-summary' : nothing}
+      aria-label=${this.named || nothing}
+      aria-labelledby=${this.named ? nothing : 'helix-chart-summary'}
       id=${CHART_PLOT}
       part="plot"
+      role="application"
+      tabindex="0"
     >
       <svg part="svg"
+        aria-hidden="true"
         data-mirror
         preserveAspectRatio="none"
         viewBox="0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}"
@@ -152,7 +158,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
                 : bar(point.value, index, depth, tone, against(one));
         })}
             </g>`)}
-        ${series.map((one) => lined.has(one.name.trim().toLowerCase())
+        ${series.map((one) => lined.has(one.name.trim().toLowerCase()) && this.showsSeries(one.name)
             ? this.renderLine(one, series.indexOf(one), slot, against(one), sideways)
             : nothing)}
       </svg>
@@ -225,12 +231,13 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const at = this.pointer.at;
         const series = this.series;
         if (at < 0 || series.length === 0) {
-            return drawTooltip(this.sourceRows, at, this.tag('tooltip'));
+            return drawTooltip(this.sourceRows, at, this.tag('tooltip'), undefined, undefined, this.pointer);
         }
-        const values = series
+        const shown = series.filter((one) => this.showsSeries(one.name));
+        const values = shown
             .map((one) => byRow(one, this.readings)[at]?.value)
             .filter((one) => one !== undefined);
-        const all = series.flatMap((one) => one.points.map((point) => point.value));
+        const all = shown.flatMap((one) => one.points.map((point) => point.value));
         const [low, high] = extent(all.length > 0 ? all : [0]);
         const domain = [Math.min(0, low), Math.max(0, high)];
         const sideways = this.orientation === 'horizontal';
@@ -243,7 +250,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             placement: sideways ? (this.pointer.mirrored ? 'left' : 'right') : 'top',
             x: sideways ? `${far}%` : `${across}%`,
             y: sideways ? `${across}%` : `${far}%`,
-        }, (cell) => this.seriesOf(cell));
+        }, (cell) => this.seriesOf(cell), this.pointer);
     }
 };
 __decorate([

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

@@ -1,5 +1,17 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import '../breadcrumb/breadcrumb.js';
+/** One step of a trail written as data, for `items`. */
+export interface BreadcrumbItem {
+    /** The URL the step links to. The last step is the current page and takes none. */
+    href?: string;
+    /** The step's words. */
+    label: string;
+    /** The link's `rel`. */
+    rel?: string;
+    /** Where the link opens. */
+    target?: string;
+}
 /**
  * @summary Shows the path to the current page.
  *
@@ -19,6 +31,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The trail does not measure itself, and you write its overflow in markup: put
  * the crumb that holds the folded items where the gap should appear.
  *
+ * A trail built from data, such as a router's matched routes, takes `items`: an
+ * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -28,15 +44,30 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The trail's items, in order from the root to the current page. Put
  * the crumb that holds the folded items where the gap should appear.
  *
+ * @csspart crumb - Each crumb drawn from `items`.
+ * @csspart crumb-current - The crumb drawn from `items` for the current page.
+ * @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`.
  * @csspart list - The ordered list.
  */
 export declare class HelixHeadlessBreadcrumbs extends HelixElement {
+    /**
+     * The trail as data, drawn as crumbs before any you slot. The last item is the
+     * current page.
+     *
+     * React Aria's `items`. A property only: a trail is built by script, and an
+     * attribute would put the whole path into the markup twice.
+     */
+    items: BreadcrumbItem[];
     /**
      * The landmark's name, read by screen readers. An `aria-label` on the host
      * wins over it.
      */
     label: string;
     protected willUpdate(changed: PropertyValues): void;
+    /** The crumbs `items` describes, each a crumb of this tier. */
+    protected renderItems(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -5,23 +5,46 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { html } from 'lit/static-html.js';
+import '../breadcrumb/breadcrumb.js';
 let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixElement {
     constructor() {
         super(...arguments);
+        this.items = [];
         this.label = 'Breadcrumb';
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'navigation' });
     }
+    renderItems() {
+        if (this.items.length === 0) {
+            return nothing;
+        }
+        const crumb = this.tag('breadcrumb');
+        const last = this.items.length - 1;
+        return html `${repeat(this.items, (item, index) => html `<${crumb}
+        part="crumb${index === last ? ' crumb-current' : ''}"
+        exportparts="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}
+        ?current=${index === last}
+        >${item.label}</${crumb}
+      >`)}`;
+    }
     render() {
         return html `<ol part="list" role="list">
-      <slot></slot>
+      ${this.renderItems()}<slot></slot>
     </ol>`;
     }
 };
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessBreadcrumbs.prototype, "items", void 0);
 __decorate([
     property()
 ], HelixHeadlessBreadcrumbs.prototype, "label", void 0);

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

@@ -1,5 +1,5 @@
 import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary Triggers an action, submits a form, or navigates.
  *
@@ -29,6 +29,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * As the first submit button in its form, it is the form's default button:
  * Enter in a text field of the form presses it, as it presses a native one.
  *
+ * Set `pending` while the action a press started is still running. The button
+ * keeps focus and refuses presses, and a reader on it hears `pending-label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -39,7 +42,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot start - Content before the label, usually an icon.
  *
  * @csspart button - The inner control.
+ * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time the button is pending, and the styled button clips it out of view.
  * @csspart text - The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.
+ *
+ * @cssstate pending - The button is pending: `pending` is set.
  */
 export declare class HelixHeadlessButton extends HelixFormElement {
     protected readonly aria: AriaForwardController;
@@ -157,6 +163,24 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      * "button" and nothing else.
      */
     label: string;
+    /**
+     * Whether the action the button started is still running.
+     *
+     * A pending button keeps focus and stays in the tab order, and refuses every
+     * press: a click, Enter and Space, and Enter in a field of its form. The
+     * click does not reach your listeners. The inner control carries
+     * `aria-busy` and `aria-disabled`, and when the button becomes pending while
+     * it has focus, a reader hears `pending-label`. The styled button draws a
+     * turning ring over its words.
+     *
+     * `disabled` takes the button out of reach. Use `pending` for the wait after
+     * a press, so focus stays where the reader left it.
+     */
+    pending: boolean;
+    /**
+     * What a reader hears when the button becomes pending while it has focus.
+     */
+    pendingLabel: string;
     /**
      * What kind of panel this button opens, where it opens one: `menu` for a
      * `Menu`.
@@ -167,6 +191,27 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      * reported collapsed and expanded and no popup.
      */
     popup?: 'dialog' | 'grid' | 'listbox' | 'menu' | 'tree';
+    /**
+     * The status region, rendered from the first time the button is pending, so
+     * a button that never waits carries no live region.
+     */
+    private readonly status;
+    /**
+     * Says `pendingLabel` when the button becomes pending under focus, and
+     * clears it when the wait ends.
+     *
+     * **Only under focus**, as React Aria announces it: the reader who pressed
+     * the button is the one waiting, and a button elsewhere on the page that
+     * starts waiting is not news to them. The region arrives empty and takes its
+     * words a frame later, since a region that arrives with its words is read
+     * inconsistently.
+     */
+    private sayPending;
+    /**
+     * @internal The live region a pending button speaks in, for a subclass that
+     * replaces the template, as `CopyButton` does.
+     */
+    protected renderLive(): TemplateResult | typeof nothing;
     /** Moves focus to the inner control, so the host is never the focus target. */
     static shadowRootOptions: ShadowRootInit;
     private readonly handleClick;
@@ -249,6 +294,7 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      * fixes and would only appear on the browsers that work.
      */
     private sendCommand;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /** @internal A submit button is what its form's implicit submission presses. */
     protected get submitsForm(): boolean;

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, customElement, elementById, HelixFallbackCommandEvent, HelixFormElement, supportsInvokers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawStatus, elementById, HelixFallbackCommandEvent, HelixFormElement, StatusController, supportsInvokers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
@@ -13,6 +13,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         this.aria = new AriaForwardController(this, {
             label: () => this.forwardsLabel,
             target: () => this.partNamed('button'),
+            unnamed: 'Give it words, a `label`, or an `aria-label`.',
         });
         this.command = '';
         this.commandFor = '';
@@ -23,7 +24,15 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         this.formNoValidate = false;
         this.formTarget = '';
         this.label = '';
-        this.handleClick = () => {
+        this.pending = false;
+        this.pendingLabel = 'Loading';
+        this.status = new StatusController(this);
+        this.handleClick = (event) => {
+            if (this.pending) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                return;
+            }
             this.linkCommand();
             this.sendCommand();
             if (this.type === 'button') {
@@ -53,7 +62,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
                 return;
             }
             event.preventDefault();
-            if (!this.isDisabled) {
+            if (!this.isDisabled && !this.pending) {
                 this.activate();
             }
         };
@@ -61,6 +70,16 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
     get forwardsLabel() {
         return true;
     }
+    sayPending() {
+        const focused = this.renderRoot?.activeElement != null;
+        if (!focused && this.status.said === '') {
+            return;
+        }
+        this.status.say(this.pending && focused ? this.pendingLabel : '', { clear: false });
+    }
+    renderLive() {
+        return drawStatus(this.status);
+    }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
         delegatesFocus: true,
@@ -131,9 +150,16 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         }
         this.commandTarget()?.dispatchEvent(new HelixFallbackCommandEvent(this.command, this));
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('pending', this.pending);
+    }
     updated(changed) {
         super.updated(changed);
         this.linkCommand();
+        if (changed.has('pending') && changed.get('pending') !== undefined) {
+            this.sayPending();
+        }
     }
     get submitsForm() {
         return this.type === 'submit';
@@ -168,6 +194,8 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
       type="button"
       aria-expanded=${this.expanded === undefined ? nothing : String(this.expanded)}
       aria-haspopup=${this.popup ?? nothing}
+      aria-busy=${this.pending ? 'true' : nothing}
+      aria-disabled=${this.pending ? 'true' : nothing}
       aria-label=${this.label || nothing}
       command=${this.command || nothing}
       tabindex=${stop}
@@ -175,7 +203,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
       @click=${this.handleClick}
     >
       ${label}
-    </button>`;
+    </button>${this.renderLive()}`;
     }
 };
 __decorate([
@@ -208,6 +236,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessButton.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessButton.prototype, "pending", void 0);
+__decorate([
+    property({ attribute: 'pending-label' })
+], HelixHeadlessButton.prototype, "pendingLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessButton.prototype, "popup", void 0);

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

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessCallout_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
 /**
  * @summary A passage set apart as a note, information, a warning, or an error.
  *
@@ -13,6 +14,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * and the default disappears with no extra check. The tone's name stays on the
  * region around it.
  *
+ * Set `dismissible` for a note a reader may put away, as Shoelace's `closable`
+ * alert does. The button fires `helix-dismiss` and the callout stays until a
+ * listener removes it, so the page decides whether it comes back.
+ *
  * A callout sets a passage apart inside a document and is read where it sits.
  * For page-level chrome above the masthead that is a live region and can be
  * dismissed, use `Announcement`.
@@ -24,14 +29,19 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/callout
  *
  * @slot - The callout's content.
+ * @slot dismiss-icon - Replaces the cross inside the dismiss button.
  * @slot heading - A heading above the content.
  * @slot icon - Replaces the icon chosen by `tone`.
  *
+ * @event {HelixDismissEvent} helix-dismiss - The dismiss button was pressed. The callout does not remove itself, so remove it in response. Cancelable.
+ *
  * @csspart content - The content region.
+ * @csspart dismiss - The button that dismisses the callout, shown when `dismissible` is set.
+ * @csspart dismiss-mark - The cross on the dismiss button, shown when the `dismiss-icon` slot is empty.
  * @csspart icon - The icon region, an image named for the tone.
  * @csspart icon-mark - The icon for the tone, shown when no icon is slotted.
  */
-export declare class HelixHeadlessCallout extends HelixElement {
+export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
     protected willUpdate(changed: PropertyValues): void;
     /**
      * What kind of attention the passage needs.
@@ -66,6 +76,12 @@ export declare class HelixHeadlessCallout extends HelixElement {
         content: string;
         viewBox: string;
     }, _label: string): TemplateResult;
+    /**
+     * The cross inside the dismiss button, behind a seam, for the reason
+     * `renderIcon` gives: the slot answers the page and the method the tier
+     * above.
+     */
+    protected renderDismissIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {
@@ -73,3 +89,4 @@ declare global {
         'helix-headless-callout': HelixHeadlessCallout;
     }
 }
+export {};

package/dist/callout/root/callout-root.js

@@ -4,12 +4,12 @@ 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, TONE_MARKS, toneMark } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, MixinDismissible, TONE_MARKS, toneMark, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const NOTE = { icon: TONE_MARKS.info.icon, label: 'Note' };
-let HelixHeadlessCallout = class HelixHeadlessCallout extends HelixElement {
+let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
         this.toneLabel = '';
@@ -25,6 +25,11 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends HelixElement {
       </svg>
     </slot>`;
     }
+    renderDismissIcon() {
+        return html `<slot name="dismiss-icon">
+      ${drawDismissGlyph()}
+    </slot>`;
+    }
     render() {
         const { icon, label } = this.tone === 'neutral' ? NOTE : (toneMark(this.tone) ?? TONE_MARKS.info);
         const named = this.toneLabel || label;
@@ -32,7 +37,13 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends HelixElement {
       <div part="content">
         <slot name="heading"></slot>
         <slot></slot>
-      </div>`;
+      </div>${this.dismissible
+            ? drawDismiss({
+                label: this.dismissLabel,
+                mark: this.renderDismissIcon(),
+                onDismiss: () => this.dismiss(),
+            })
+            : nothing}`;
     }
 };
 __decorate([

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

@@ -98,7 +98,7 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @csspart edge - One connector between two cards.
  * @csspart edge-end - An end of a selected connection. Drag it, or click it to pick it up.
  * @csspart edge-target - A wider, invisible line over a connection, which receives focus and presses.
- * @csspart edges - The layer the connectors are drawn in.
+ * @csspart edges - A layer the connectors are drawn in: one holding the arrowhead, and one after each card holding the connections leaving it, so they are read in the order the arrows walk them. Give it `z-index: -1` to draw it under the cards.
  * @csspart footer - The strip below the board.
  * @csspart fullscreen - The button that makes the board fill the screen.
  * @csspart gesture-hint - Words over the board for a moment when it lets a gesture pass to the page, such as how to zoom it.
@@ -128,6 +128,10 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @cssstate using - A board with `gestures="activate"` has been pressed and has the gestures.
  */
 export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
+    /** The connection whose target had focus as an update began, and that target. */
+    private focusedEdge;
+    /** Each card is assigned to its own slot, in the order the arrows walk them. */
+    static shadowRootOptions: ShadowRootInit;
     /** The text read with a card to say where its connections come from, with `{cards}`. */
     comesFromLabel: string;
     /** The text announced when a connection is requested, with `{from}` and `{to}`. */
@@ -951,16 +955,47 @@ export declare class HelixHeadlessCanvas extends HelixHeadlessCanvas_base {
      */
     private renderEnds;
     /**
-     * The connectors, in one layer under the cards.
+     * The layer that holds the arrowhead and the connection being drawn.
      *
      * **The arrowhead is measured in the board's own units, not in multiples of
      * the line's width.** `markerUnits="strokeWidth"` multiplies by the stroke, so
      * an eight-unit head on a two-pixel line drew a sixteen-pixel triangle that
      * read as a shape of its own rather than as a direction. In user space it is
      * eight units of the document, which is what the cards are measured in, and it
-     * grows with the zoom like everything else.
+     * grows with the zoom like everything else. Each card's connections reach it
+     * by its id, which every layer in this shadow root shares.
      */
     private renderEdges;
+    /**
+     * Each card, and then the connections leaving it, in the order the arrows
+     * walk them.
+     *
+     * **The order is the accessibility tree's.** The connections were one layer
+     * drawn before every card, so a screen reader's reading went through every
+     * connection and then every card, while the arrow keys went card by card
+     * with each card's connections after it. Each card now has a slot of its
+     * own, assigned by hand, with its connections' layer straight after it, so
+     * both orders are the walk. The cards are read before hydration, which
+     * knows none, from the default slot after these, as they always were.
+     *
+     * **Every layer sits under the cards by its stacking.** A layer after a card
+     * in the tree would otherwise paint over it, so the styled sheet sets
+     * `--helix-layer-beneath` on `edges`, and a headless page sets `z-index: -1`.
+     */
+    private renderStops;
+    /** One connector: the target that takes focus and presses, and the line it paints. */
+    private renderEdge;
+    /**
+     * Sends each card to its slot, and everything else to the slot it names.
+     *
+     * A root that assigns by hand routes nothing by itself, the named slots
+     * included, so the header, the footer and the empty state are assigned here
+     * too. Paired with the walk by position, as the template was built, and a
+     * card the walk does not reach, a second one of the same name, goes to the
+     * default slot with everything else. On a root a server sent, which routes
+     * by name, each card is sent to its slot by name instead.
+     */
+    private assign;
     /**
      * The connections' labels, as text on the plane over the lines.
      *