@fusion.dev/helix-headless 0.142.1 → 0.143.0

package/dist/avatar/root/avatar-root.js

@@ -38,7 +38,7 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
         super.willUpdate(changed);
         if (changed.has('src')) {
             this.broken = false;
-            this.status = 'loading';
+            this.status = this.src === '' && this.hasUpdated ? 'error' : 'loading';
         }
         hostAria(this.internals, {
             label: this.name,
@@ -47,6 +47,13 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        if (this.src === '') {
+            setTimeout(() => {
+                if (this.src === '' && this.status === 'loading') {
+                    this.status = 'error';
+                }
+            });
+        }
         const image = this.serverRendered ? this.renderRoot.querySelector('img') : null;
         if (image?.complete) {
             const broken = image.naturalWidth === 0;

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

@@ -18,6 +18,14 @@ import { type TemplateResult } from 'lit';
  * fuller name, such as `4 unread`. A dot needs a `label`. Without one, the dot
  * is a colored circle that screen readers do not announce.
  *
+ * **The count is not part of the wrapped control's name.** It is a status of
+ * its own, read when it changes and when a reader moves to it, so focusing a
+ * button inside a badge announces the button's name alone. Where the count
+ * belongs in that name, write it into the control's own label, such as
+ * `aria-label="Inbox, 8 unread"` on a button that reads "Inbox". The badge
+ * cannot add it: a reference from the control to the count would point into
+ * the badge's shadow root, which the platform does not allow.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers

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

@@ -16,7 +16,9 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * 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.
+ * so screen reader users get the numbers themselves. The `summary` part names
+ * the chart, from `label` or the table's caption, and gives each series' highest
+ * reading.
  *
  * 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,6 +43,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart line - A series drawn as a line, named in `lines`.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart plot - The drawing.
+ * @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.
  * @csspart tooltip - The tooltip bubble, forwarded from `Tooltip`.
@@ -87,6 +90,10 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * and reach no reader through the table.
      */
     gridlines?: 'both' | 'category' | 'value';
+    /**
+     * The word the summary puts before each series' highest reading.
+     */
+    highestLabel: string;
     /**
      * The names of the series to draw as lines. The other series are drawn as
      * columns.
@@ -121,8 +128,8 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * turns on its side, and neither is as readable as putting them down the left
      * where they read normally.
      *
-     * `orientation` and not `orientation`, which `Trend` uses in the same group for
-     * which way a number moved.
+     * Named `orientation` because `direction` is taken: `Trend` uses it in the
+     * same group for which way a number moved.
      */
     orientation?: 'horizontal';
     /**
@@ -182,6 +189,15 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      */
     protected willUpdate(changed: PropertyValues<this>): void;
     protected render(): TemplateResult;
+    /**
+     * What a reader who cannot see the columns is told: the chart's name and
+     * each series' highest reading.
+     *
+     * The highest, because which category leads is the question a bar chart is
+     * read for, and the table beside it has every other number. The reading is
+     * written the way the table writes it, such as `$128k` for `128000`.
+     */
+    protected renderSummary(series: Series[]): TemplateResult;
     /**
      * The columns themselves, behind a seam the styled tier can move.
      *

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

@@ -4,11 +4,15 @@ 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 { CHART_PLOT, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, ticks, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, ticks, unbroken, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource(HelixElement) {
+    constructor() {
+        super(...arguments);
+        this.highestLabel = 'Highest';
+    }
     get scaled() {
         return new Set(seriesNames(this.secondary));
     }
@@ -27,7 +31,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
     }
     render() {
         const series = this.series;
-        const categories = series[0]?.points.map((point) => point.label) ?? [];
+        const categories = series.length === 0 ? [] : this.sourceRows.map((row) => row.label);
         if (categories.length === 0) {
             return html `<div id=${CHART_PLOT} part="plot"></div>`;
         }
@@ -49,12 +53,26 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const z = scaled.size > 0 ? linear(other, range) : undefined;
         const widest = z === undefined
             ? 0
-            : Math.max(...[...ticks(domain), ...ticks(other)].map((level) => level.toLocaleString().length));
+            : Math.max(...[...ticks(domain), ...ticks(other)].map((level) => formatNumbers(this.locale)(level).length));
         const lone = series.filter(own);
         const tint = lone.length === 1 && lone[0] !== undefined
             ? `--bar-chart-secondary: var(--chart-series-${seriesIndex(series.indexOf(lone[0]))})`
             : undefined;
-        return html `${z === undefined ? nothing : this.renderAxis(y, domain, 'primary', sideways, widest)}${this.renderPlot(series, categories, y, domain, floor, z)}${z === undefined ? nothing : this.renderAxis(z, other, 'secondary', sideways, widest, tint)}${this.renderLabels(categories)}`;
+        return html `${z === undefined ? nothing : this.renderAxis(y, domain, 'primary', sideways, widest)}${this.renderPlot(series, categories, y, domain, floor, z)}${z === undefined ? nothing : this.renderAxis(z, other, 'secondary', sideways, widest, tint)}${this.renderLabels(categories)}${this.renderSummary(series)}`;
+    }
+    renderSummary(series) {
+        const rows = this.sourceRows;
+        const columns = this.plottedColumns;
+        const highest = series.flatMap((one, depth) => {
+            const top = one.points.reduce((best, point) => (best === undefined || point.value > best.value ? point : best), undefined);
+            if (top === undefined) {
+                return [];
+            }
+            const text = rows[top.at]?.cells[columns[depth] ?? -1]?.text ?? String(top.value);
+            return [`${one.name} ${top.label} ${text}`];
+        });
+        const named = this.named ? `${this.named}. ` : '';
+        return html `<p part="summary">${named}${this.highestLabel}: ${highest.join('; ')}.</p>`;
     }
     renderPlot(series, categories, y, domain, floor, z) {
         const sideways = this.orientation === 'horizontal';
@@ -64,7 +82,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const own = (one) => scaled.has(one.name.trim().toLowerCase());
         const against = (one) => z !== undefined && own(one) ? z : y;
         const columns = series
-            .map((one, index) => ({ one, tone: index }))
+            .map((one, index) => ({ one, slots: byRow(one, categories.length), tone: index }))
             .filter(({ one }) => !lined.has(one.name.trim().toLowerCase()));
         const stride = (slot * 0.72) / Math.max(columns.length, 1);
         const gap = columns.length > 1 ? stride * 0.08 : 0;
@@ -127,7 +145,12 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
               data-active=${this.pointer.at === index ? '' : nothing}
               part="group${this.pointer.at === index ? ' group-active' : ''}"
             >
-              ${columns.map(({ one, tone }, depth) => bar(one.points[index]?.value ?? 0, index, depth, tone, against(one)))}
+              ${columns.map(({ slots, one, tone }, depth) => {
+            const point = slots[index];
+            return point === undefined
+                ? nothing
+                : bar(point.value, index, depth, tone, against(one));
+        })}
             </g>`)}
         ${series.map((one) => lined.has(one.name.trim().toLowerCase())
             ? this.renderLine(one, series.indexOf(one), slot, against(one), sideways)
@@ -147,7 +170,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
       ${ticks(domain).map((level) => html `<span
             part="tick"
             style=${sideways ? `inset-inline-start: ${scale(level)}%` : `inset-block-start: ${scale(level)}%`}
-            >${level.toLocaleString()}</span
+            >${formatNumbers(this.locale)(level)}</span
           >`)}
     </div>`;
     }
@@ -184,13 +207,15 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
     </div>`;
     }
     renderLine(one, depth, slot, y, sideways) {
-        const points = one.points.map((point, index) => {
-            const across = index * slot + slot / 2;
+        const path = unbroken(one)
+            .map((run) => linePath(run.map((point) => {
+            const across = point.at * slot + slot / 2;
             const along = y(point.value);
             return sideways ? [along, across] : [across, along];
-        });
+        }), 'straight'))
+            .join('');
         return svg `<path
-      d=${linePath(points, 'straight')}
+      d=${path}
       data-series=${seriesIndex(depth)}
       part="line"
       style="--chart-series: var(--chart-series-${seriesIndex(depth)})"
@@ -202,13 +227,15 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         if (at < 0 || series.length === 0) {
             return drawTooltip(this.sourceRows, at, this.tag('tooltip'));
         }
-        const values = series.map((one) => one.points[at]?.value ?? 0);
+        const values = series
+            .map((one) => byRow(one, this.readings)[at]?.value)
+            .filter((one) => one !== undefined);
         const all = series.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';
         const scale = sideways ? linear(domain, [0, PLOT_HEIGHT]) : linear(domain, [PLOT_HEIGHT, 0]);
-        const ends = values.map((one) => scale(one));
+        const ends = (values.length > 0 ? values : [0]).map((one) => scale(one));
         const far = sideways ? Math.max(...ends) : Math.min(...ends);
         const slot = 100 / this.readings;
         const across = at * slot + slot / 2;
@@ -222,6 +249,9 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
 __decorate([
     property()
 ], HelixHeadlessBarChart.prototype, "gridlines", void 0);
+__decorate([
+    property({ attribute: 'highest-label' })
+], HelixHeadlessBarChart.prototype, "highestLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessBarChart.prototype, "lines", void 0);

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

@@ -4,9 +4,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @summary A passage set off from the prose around it.
  *
  * @description
- * Renders a `<blockquote>` with a `<footer>` for the attribution, the structure
- * the HTML spec describes. The attribution sits outside the quoted text because
- * it is about the quotation.
+ * Renders a `<figure>` holding the `<blockquote>` and a `<figcaption>` for the
+ * attribution, the structure the HTML spec describes. The attribution sits
+ * outside the quotation because it is about the quotation, and it names the
+ * figure, so a screen reader reads the source as the figure's caption.
+ *
+ * The figure keeps the browser's default margins on this tier. Set
+ * `::part(figure) { margin: 0 }` where they are unwanted.
  *
  * For a quotation inside a sentence, use `Quote`.
  *
@@ -19,8 +23,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The quoted passage.
  * @slot attribution - Who said it, and where.
  *
- * @csspart attribution - The footer carrying the source.
+ * @csspart attribution - The `<figcaption>` carrying the source.
  * @csspart blockquote - The quotation.
+ * @csspart figure - The `<figure>` holding the quotation and its attribution.
  */
 export declare class HelixHeadlessBlockquote extends HelixElement {
     /**
@@ -28,13 +33,13 @@ export declare class HelixHeadlessBlockquote extends HelixElement {
      */
     cite: string;
     /**
-     * Says on the footer whether there is an attribution in it.
+     * Says on the caption whether there is an attribution in it.
      *
-     * A `<footer>` with nothing in it is still a block in the quote's flow and
+     * A `<figcaption>` with nothing in it is still a block in the quote's flow and
      * still takes the container's gap, so every blockquote written without an
      * attribution reserved a full space below itself. There is no selector that
      * can ask, `slot:empty` being about a slot's fallback rather than its
-     * assigned nodes, so the component asks and says so on the footer inside this
+     * assigned nodes, so the component asks and says so on the caption inside this
      * shadow root: an attribute on the host is a change to markup the consumer
      * rendered, which React reports on hydration.
      */

package/dist/blockquote/root/blockquote-root.js

@@ -20,10 +20,12 @@ let HelixHeadlessBlockquote = class HelixHeadlessBlockquote extends HelixElement
         this.markEmpty();
     }
     render() {
-        return html `<blockquote part="blockquote" cite=${this.cite || nothing}>
-      <slot></slot>
-      <footer part="attribution"><slot name="attribution"></slot></footer>
-    </blockquote>`;
+        return html `<figure aria-labelledby="attribution" part="figure">
+      <blockquote part="blockquote" cite=${this.cite || nothing}><slot></slot></blockquote>
+      <figcaption id="attribution" part="attribution"
+        ><slot name="attribution" @slotchange=${() => this.markEmpty()}></slot
+      ></figcaption>
+    </figure>`;
     }
 };
 __decorate([

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

@@ -4,9 +4,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @summary Shows the path to the current page.
  *
  * @description
- * The host is the navigation landmark, so an `aria-label` on it names the
- * trail. When a page has more than one navigation landmark, screen reader users
- * choose between them by name.
+ * The host is the navigation landmark, named "Breadcrumb" by default. An
+ * `aria-label` on the host names the trail instead, and so does `label`. When a
+ * page has more than one navigation landmark, screen reader users choose
+ * between them by name.
  *
  * The `<ol>` has an explicit `role="list"`, because Safari removes list
  * semantics from a list with `list-style: none`, and the trail always hides its
@@ -30,6 +31,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart list - The ordered list.
  */
 export declare class HelixHeadlessBreadcrumbs extends HelixElement {
+    /**
+     * The landmark's name, read by screen readers. An `aria-label` on the host
+     * wins over it.
+     */
+    label: string;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }

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

@@ -6,10 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.label = 'Breadcrumb';
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { role: 'navigation' });
+        hostAria(this.internals, { label: this.label, role: 'navigation' });
     }
     render() {
         return html `<ol part="list" role="list">
@@ -17,6 +22,9 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
     </ol>`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessBreadcrumbs.prototype, "label", void 0);
 HelixHeadlessBreadcrumbs = __decorate([
     customElement('helix-headless-breadcrumbs')
 ], HelixHeadlessBreadcrumbs);

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

@@ -21,6 +21,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * it. To submit, the button calls `requestSubmit()` on its form, which runs
  * validation, unlike `submit()`.
  *
+ * A `submit` listener reads `event.submitter` as `null`, because the platform
+ * accepts only a native submit button there. The button's `name` and `value`
+ * are in the form data, so read them from `new FormData(form)` to tell two
+ * submit buttons apart.
+ *
+ * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -35,6 +43,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  */
 export declare class HelixHeadlessButton extends HelixFormElement {
     protected readonly aria: AriaForwardController;
+    /**
+     * @internal Whether a host `aria-label` names the inner button. A subclass
+     * that writes the name itself, as `CopyButton` does while it confirms a
+     * copy, says no.
+     */
+    protected get forwardsLabel(): boolean;
     /**
      * What to send when the button is activated, and what to send it to.
      *
@@ -236,6 +250,29 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      */
     private sendCommand;
     protected updated(changed: PropertyValues): void;
+    /** @internal A submit button is what its form's implicit submission presses. */
+    protected get submitsForm(): boolean;
+    /** @internal Pressed as the form's default button, through the inner control. */
+    protected activate(): void;
+    /** The form whose Enter key this button listens to, as its default button. */
+    private watched;
+    /**
+     * Presses this button for Enter in a native text field of its form, when it
+     * is the form's default button.
+     *
+     * The platform cannot find a default button in a shadow root, so a form whose
+     * only submit button is this one found none: with two fields Enter did
+     * nothing, and with one it submitted without this button's name, value or
+     * overrides. The event's default is prevented so a later native submit button
+     * is not pressed instead.
+     */
+    private readonly pressOnEnter;
+    /** Listens to the form this button now belongs to, and to no other. */
+    private watchForm;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Called by the browser when the button's form changes. */
+    formAssociatedCallback(form: HTMLFormElement | null): void;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -11,6 +11,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
+            label: () => this.forwardsLabel,
             target: () => this.partNamed('button'),
         });
         this.command = '';
@@ -41,6 +42,24 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         };
         this.type = 'button';
         this.value = '';
+        this.watched = null;
+        this.pressOnEnter = (event) => {
+            const form = this.watched;
+            if (event.key !== 'Enter' ||
+                event.defaultPrevented ||
+                !form ||
+                !HelixFormElement.submitsOnEnter(event.composedPath()[0], form) ||
+                HelixFormElement.defaultButton(form) !== this) {
+                return;
+            }
+            event.preventDefault();
+            if (!this.isDisabled) {
+                this.activate();
+            }
+        };
+    }
+    get forwardsLabel() {
+        return true;
     }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
@@ -116,6 +135,31 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         super.updated(changed);
         this.linkCommand();
     }
+    get submitsForm() {
+        return this.type === 'submit';
+    }
+    activate() {
+        this.partNamed('button')?.click();
+    }
+    watchForm(form) {
+        if (form === this.watched) {
+            return;
+        }
+        this.watched?.removeEventListener('keypress', this.pressOnEnter);
+        form?.addEventListener('keypress', this.pressOnEnter);
+        this.watched = form;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.watchForm(this.form);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.watchForm(null);
+    }
+    formAssociatedCallback(form) {
+        this.watchForm(form);
+    }
     render() {
         const label = html `<slot name="start"></slot><slot part="text"></slot><slot name="end"></slot>`;
         const stop = this.focusable ? nothing : '-1';

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

@@ -5,11 +5,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @description
  * `tone` is on the headless tier because it carries meaning. It picks the icon
- * and the icon's accessible name, so a screen reader announces "Error" for an
- * error callout whether or not the color is seen.
+ * and the icon region's accessible name, so a screen reader announces "Error"
+ * for an error callout whether or not the color is seen. Set `tone-label` to
+ * say the name in another language.
  *
  * The icon is the fallback content of a slot. Slot your own icon to replace it,
- * and the default disappears with no extra check.
+ * and the default disappears with no extra check. The tone's name stays on the
+ * region around it.
  *
  * 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
@@ -26,7 +28,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot icon - Replaces the icon chosen by `tone`.
  *
  * @csspart content - The content region.
- * @csspart icon - The icon region.
+ * @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 {
@@ -40,6 +42,13 @@ export declare class HelixHeadlessCallout extends HelixElement {
      * is the whole of the registry, which is why there is no `severity` beside it.
      */
     tone?: 'danger' | 'info' | 'neutral' | 'success' | 'warning';
+    /**
+     * What a screen reader is told the tone is, such as "Fehler".
+     *
+     * Absent is the English for the tone: "Error", "Information", "Note",
+     * "Success" or "Warning".
+     */
+    toneLabel: string;
     /**
      * The mark for the callout's tone, behind a seam.
      *
@@ -56,7 +65,7 @@ export declare class HelixHeadlessCallout extends HelixElement {
     protected renderIcon(icon: {
         content: string;
         viewBox: string;
-    }, label: string): TemplateResult;
+    }, _label: string): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -10,20 +10,25 @@ 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 {
+    constructor() {
+        super(...arguments);
+        this.toneLabel = '';
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'note' });
     }
-    renderIcon(icon, label) {
+    renderIcon(icon, _label) {
         return html `<slot name="icon">
-      <svg part="icon-mark" fill="currentColor" viewBox=${icon.viewBox} role="img" aria-label=${label}>
+      <svg part="icon-mark" fill="currentColor" viewBox=${icon.viewBox} aria-hidden="true">
         ${unsafeSVG(icon.content)}
       </svg>
     </slot>`;
     }
     render() {
         const { icon, label } = this.tone === 'neutral' ? NOTE : (toneMark(this.tone) ?? TONE_MARKS.info);
-        return html `<span part="icon">${this.renderIcon(icon, label)}</span>
+        const named = this.toneLabel || label;
+        return html `<span part="icon" role="img" aria-label=${named}>${this.renderIcon(icon, named)}</span>
       <div part="content">
         <slot name="heading"></slot>
         <slot></slot>
@@ -33,6 +38,9 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends HelixElement {
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCallout.prototype, "tone", void 0);
+__decorate([
+    property({ attribute: 'tone-label' })
+], HelixHeadlessCallout.prototype, "toneLabel", void 0);
 HelixHeadlessCallout = __decorate([
     customElement('helix-headless-callout')
 ], HelixHeadlessCallout);

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

@@ -72,6 +72,7 @@ declare const HelixHeadlessCanvas_base: (new (...args: any[]) => import("@fusion
  * @aliases Board, JSON Canvas, Whiteboard
  * @documentation https://fusion.dev/helix/components/canvas
  *
+ * @slot - The board's `helix-canvas-node` and `helix-canvas-edge` elements, drawn on the plane.
  * @slot empty - Content shown when the document has no nodes.
  * @slot footer - Content below the board.
  * @slot header - Content above the board.

package/dist/canvas/root/canvas-root.js

@@ -1738,7 +1738,6 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
         return html `<svg
       part="edges"
       role="none"
-      @focusin=${this.handleFocusIn}
       viewBox=${`0 0 ${box.width} ${box.height}`}
       width=${box.width}
       height=${box.height}
@@ -1889,9 +1888,19 @@ let HelixHeadlessCanvas = class HelixHeadlessCanvas extends MixinViewport(HelixE
              ruling's own offset is where the document's zero lands, so a line
              falls on every multiple of its spacing in the document's units and
              a card placed on one sits on a line. -->
+        <!-- **Focus is heard here as well as on the host.** Moving from one
+             connection to the next moves focus inside this shadow root, and a
+             browser does not tell the host about a move that starts and ends
+             in its own tree. So the stop stayed on the first of two
+             connections in a row. Heard on the board and never on the edges'
+             SVG element: Chromium makes an SVG element with a focus listener
+             a Tab stop of its own, an unnamed one between the board and the
+             first card. Heard twice from a card, which the handler answers
+             the same way both times. -->
         <div
           part="board"
           style=${`--_canvas-plane-inline-size: ${box.width}px; --_canvas-plane-block-size: ${box.height}px`}
+          @focusin=${this.handleFocusIn}
         >
           ${this.renderEdges(origin, box)} ${this.renderLabels(origin)}
           <slot @slotchange=${this.handleSlotChange}></slot>