@unofficialbox/box-open-elements 0.9.0 → 0.11.0

package/dist/components/feedback/skeleton.js

@@ -1,12 +1,48 @@
 import { BaseElement } from "../../core/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
+import { BOE_GRID_COLUMNS, BOE_GRID_GUTTER_PROPERTY, boeGridGutterStyles, isBoeGridPlacementRecord, resolveBoeGridPlacement, resolveGridCount, } from "../../foundations/layout/index.js";
 import { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-skeleton";
+const SKELETON_VARIANTS = new Set(["box", "line", "grid"]);
+/**
+ * Narrow an author-supplied variant, falling back to `box`.
+ *
+ * A typo should render the original single rectangle rather than an empty
+ * element: every multi-part branch is scoped to a known value.
+ */
+export const resolveSkeletonVariant = (value) => SKELETON_VARIANTS.has(value) ? value : "box";
+/**
+ * The columns in Adobe Spectrum's responsive grid.
+ *
+ * Delegated to the layout foundation that `box-grid` also builds on: a
+ * skeleton stands in for a real layout, so if the two disagreed about what a
+ * column is worth the placeholder would stop matching what replaces it.
+ */
+export const SKELETON_DEFAULT_COLUMNS = BOE_GRID_COLUMNS;
+/** Attribute payloads are author input — validate every record. */
+export const isSkeletonGridItemRecord = isBoeGridPlacementRecord;
+/**
+ * Fit a region to the grid, clamping every value to the declared totals.
+ *
+ * Still exported here because it is part of this component's published
+ * surface; the behaviour now lives in the foundation.
+ */
+export const resolveSkeletonGridItem = resolveBoeGridPlacement;
 const skeletonStyles = `
   :host {
     display: inline-block;
     color: inherit;
     font: inherit;
+
+  }
+
+${boeGridGutterStyles(":host")}
+
+  /* The multi-part variants are layout, so they take the full width they are
+     given rather than shrink-wrapping like the single box. */
+  :host([variant="line"]),
+  :host([variant="grid"]) {
+    display: block;
   }
 
   [part="skeleton"] {
@@ -22,6 +58,38 @@ const skeletonStyles = `
     animation: boe-skeleton-shimmer ${boeMotionDuration.shimmer} ${boeMotionEasing.standard} infinite;
   }
 
+  [part="lines"] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+  }
+
+  [part="lines"] [part="skeleton"] {
+    display: block;
+    inline-size: 100%;
+  }
+
+  /* The last line stops short, the way a paragraph's does. Without it a stack
+     of equal bars reads as a table rather than as text. */
+  [part="lines"] [part="skeleton"]:last-child:not(:only-child) {
+    inline-size: 62%;
+  }
+
+  [part="grid"] {
+    display: grid;
+    grid-template-columns: repeat(var(--boe-skeleton-columns, ${BOE_GRID_COLUMNS}), minmax(0, 1fr));
+    grid-auto-rows: var(--boe-skeleton-row-height, 48px);
+    gap: var(${BOE_GRID_GUTTER_PROPERTY});
+  }
+
+  /* Offsets are spacers rather than an explicit grid-column-start, so they
+     compose with auto-placement instead of fighting it: an explicit start makes
+     the item hunt for a row where that exact column is free, which reorders the
+     regions the author listed. */
+  [part="grid-offset"] {
+    visibility: hidden;
+  }
+
   @keyframes boe-skeleton-shimmer {
     0% {
       background-position: 100% 0;
@@ -37,11 +105,15 @@ const skeletonStyles = `
 export class Skeleton extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["height", "width"];
+        return ["columns", "height", "items", "lines", "row-height", "rows", "variant", "width"];
     }
     skeletonEl;
+    rootEl;
     appliedWidth = "";
     appliedHeight = "";
+    renderedVariant = null;
+    itemsRaw = null;
+    itemsCache = [];
     get width() {
         return this.getAttribute("width") ?? "100%";
     }
@@ -54,6 +126,85 @@ export class Skeleton extends BaseElement {
     set height(value) {
         this.setAttribute("height", value);
     }
+    /** Shape of the placeholder. An unknown value falls back to `box`. */
+    get variant() {
+        return resolveSkeletonVariant(this.getAttribute("variant"));
+    }
+    set variant(value) {
+        this.setAttribute("variant", value);
+    }
+    /** Lines drawn by the `line` variant. Values below 1 render a single line. */
+    get lines() {
+        const parsed = Number.parseInt(this.getAttribute("lines") ?? "", 10);
+        return Number.isFinite(parsed) ? Math.max(parsed, 1) : 3;
+    }
+    set lines(value) {
+        this.setAttribute("lines", String(value));
+    }
+    /** Columns in the `grid` variant. Defaults to Spectrum's twelve. */
+    get columns() {
+        return resolveGridCount(this.getAttribute("columns"), BOE_GRID_COLUMNS);
+    }
+    set columns(value) {
+        this.setAttribute("columns", String(value));
+    }
+    /** Rows in the `grid` variant. Also the ceiling for any region's `rowSpan`. */
+    get rows() {
+        return resolveGridCount(this.getAttribute("rows"), 1);
+    }
+    set rows(value) {
+        this.setAttribute("rows", String(value));
+    }
+    /** Height of one grid row; a region spanning two is twice this plus a gutter. */
+    get rowHeight() {
+        return this.getAttribute("row-height") ?? "48px";
+    }
+    set rowHeight(value) {
+        this.setAttribute("row-height", value);
+    }
+    /**
+     * Regions of the `grid` variant, in order.
+     *
+     * With none given the grid is filled with single-column regions — `rows` ×
+     * `columns` of them — so `rows` and `columns` alone describe a uniform grid.
+     */
+    get items() {
+        const raw = this.getAttribute("items");
+        if (!raw) {
+            return [];
+        }
+        if (raw !== this.itemsRaw) {
+            this.itemsRaw = raw;
+            try {
+                const parsed = JSON.parse(raw);
+                this.itemsCache =
+                    Array.isArray(parsed) && parsed.every(isSkeletonGridItemRecord)
+                        ? parsed
+                        : [];
+            }
+            catch {
+                this.itemsCache = [];
+            }
+        }
+        return [...this.itemsCache];
+    }
+    set items(value) {
+        if (value.length) {
+            this.setAttribute("items", JSON.stringify(value));
+            return;
+        }
+        this.removeAttribute("items");
+    }
+    /** The grid's regions as rendered: clamped to `columns` and `rows`. */
+    get resolvedItems() {
+        const columns = this.columns;
+        const rows = this.rows;
+        const declared = this.items;
+        const source = declared.length
+            ? declared
+            : Array.from({ length: rows * columns }, () => ({}));
+        return source.map(item => resolveSkeletonGridItem(item, columns, rows));
+    }
     renderTemplate() {
         if (!this.shadowRoot) {
             return;
@@ -65,8 +216,29 @@ export class Skeleton extends BaseElement {
         this.skeletonEl = this.shadowRoot.querySelector('[part="skeleton"]');
         this.appliedWidth = "";
         this.appliedHeight = "";
+        this.renderedVariant = "box";
     }
     update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const variant = this.variant;
+        if (variant !== "box") {
+            this.updateGroup(variant);
+            return;
+        }
+        if (this.renderedVariant !== "box") {
+            // Coming back from a multi-part variant: restore the single box that the
+            // width/height path writes into.
+            this.shadowRoot.innerHTML = `
+        <style>${skeletonStyles}</style>
+        <span part="skeleton" style="display:inline-block;" aria-hidden="true"></span>
+      `;
+            this.skeletonEl = this.shadowRoot.querySelector('[part="skeleton"]');
+            this.appliedWidth = "";
+            this.appliedHeight = "";
+            this.renderedVariant = "box";
+        }
         if (!this.skeletonEl) {
             return;
         }
@@ -85,5 +257,63 @@ export class Skeleton extends BaseElement {
             this.appliedHeight = nextHeight;
         }
     }
+    /** Render the `line` or `grid` variant, which draw many bars rather than one. */
+    updateGroup(variant) {
+        const shadowRoot = this.shadowRoot;
+        if (this.renderedVariant !== variant) {
+            shadowRoot.innerHTML = `
+        <style>${skeletonStyles}</style>
+        <div part="${variant === "line" ? "lines" : "grid"}" aria-hidden="true"></div>
+      `;
+            this.rootEl = shadowRoot.querySelector(`[part="${variant === "line" ? "lines" : "grid"}"]`);
+            this.renderedVariant = variant;
+            this.appliedWidth = "";
+            this.appliedHeight = "";
+        }
+        if (variant === "line") {
+            this.renderLines();
+            return;
+        }
+        this.renderGrid();
+    }
+    renderLines() {
+        const count = this.lines;
+        const height = this.height;
+        // Reuse the bars already there: only the count changes between renders, and
+        // replacing every node would restart the shimmer on each update.
+        while (this.rootEl.childElementCount > count) {
+            this.rootEl.lastElementChild.remove();
+        }
+        while (this.rootEl.childElementCount < count) {
+            const line = document.createElement("span");
+            line.setAttribute("part", "skeleton");
+            this.rootEl.append(line);
+        }
+        for (const child of Array.from(this.rootEl.children)) {
+            // Via the CSSOM, for the same reason the box variant does: the value is
+            // author input and setProperty drops anything that is not a length.
+            child.style.setProperty("height", height);
+        }
+    }
+    renderGrid() {
+        this.rootEl.style.setProperty("--boe-skeleton-columns", String(this.columns));
+        this.rootEl.style.setProperty("--boe-skeleton-row-height", this.rowHeight);
+        // Rebuilt rather than patched: a change to items can alter every region's
+        // span and offset, so there is no stable identity to reuse.
+        this.rootEl.replaceChildren();
+        for (const item of this.resolvedItems) {
+            if (item.offset > 0) {
+                const spacer = document.createElement("span");
+                spacer.setAttribute("part", "grid-offset");
+                spacer.style.setProperty("grid-column", `span ${item.offset}`);
+                this.rootEl.append(spacer);
+            }
+            const region = document.createElement("span");
+            region.setAttribute("part", "skeleton");
+            region.style.setProperty("grid-column", `span ${item.span}`);
+            region.style.setProperty("grid-row", `span ${item.rowSpan}`);
+            this.rootEl.append(region);
+        }
+    }
 }
 Skeleton.register();

package/dist/components/feedback/toast.d.ts

@@ -1,11 +1,25 @@
 import { BaseElement } from "../../core/index.js";
+/**
+ * Whether the toast clears itself.
+ *
+ * `dismissible` auto-dismisses after `duration` and can also be closed by hand;
+ * `sticky` stays until the reader closes it, whatever `duration` says. Both
+ * carry the close control — a toast the reader cannot get rid of is a trap.
+ */
+export type ToastMode = "dismissible" | "sticky";
+/** Narrow an author-supplied mode, falling back to `dismissible`. */
+export declare const resolveToastMode: (value: string | null | undefined) => ToastMode;
 export declare class Toast extends BaseElement {
     static readonly tagName: string;
     static get observedAttributes(): string[];
     private openValue;
     private timeoutId;
     private toastEl;
+    private iconEl;
+    private headingEl;
+    private toneLabelEl;
     private messageEl;
+    private renderedTone;
     private actionSlot;
     private dismissEl;
     /** Auto-dismiss delay in ms for the declarative `open` path. 0 = sticky. */
@@ -16,6 +30,30 @@ export declare class Toast extends BaseElement {
     private scheduleAutoDismiss;
     get message(): string;
     set message(value: string);
+    /**
+     * Optional bold line above the message — "Upload failed" over "3 of 12 files
+     * could not be read". Named to match `box-alert`, which established the
+     * heading-plus-message shape in this family. Salesforce calls it `label`.
+     */
+    get heading(): string;
+    set heading(value: string);
+    /**
+     * Drop the outline for a softer, fill-only toast.
+     *
+     * Purely presentational and handled entirely in CSS, so it is deliberately
+     * not an observed attribute — there is nothing to re-render. The default
+     * stays bordered: that outline tracks box-ui-elements' `.notification` and
+     * is pinned by the colour conformance manifest.
+     */
+    get borderless(): boolean;
+    set borderless(value: boolean);
+    /**
+     * Whether the toast clears itself. `sticky` overrides any `duration`: a
+     * caller that has said "this one stays" should not have it taken away by a
+     * duration set elsewhere.
+     */
+    get mode(): ToastMode;
+    set mode(value: ToastMode);
     get tone(): string;
     set tone(value: string);
     disconnectedCallback(): void;

package/dist/components/feedback/toast.js

@@ -1,8 +1,29 @@
 import { BaseElement } from "../../core/index.js";
+import { toneAccessibleLabel } from "./tone.js";
 import { boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-toast";
+const TOAST_MODES = new Set(["dismissible", "sticky"]);
+/** Narrow an author-supplied mode, falling back to `dismissible`. */
+export const resolveToastMode = (value) => TOAST_MODES.has(value) ? value : "dismissible";
+/**
+ * Status glyphs, one per tone.
+ *
+ * A toast is read at a glance and often out of the corner of an eye, so the
+ * shape has to carry the meaning before the colour does — a round tick and a
+ * warning triangle are distinguishable to a reader who cannot separate green
+ * from amber. Literal markup, never author input, so innerHTML is safe here.
+ */
+const TONE_ICONS = {
+    info: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 3.4a1.15 1.15 0 110 2.3 1.15 1.15 0 010-2.3zM11.1 15H8.9V9.3h2.2V15z"/></svg>`,
+    success: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm4.06 5.86-5 5.2a1 1 0 01-1.44 0L5.94 11.3A1 1 0 117.38 9.9l1.04 1.08 4.28-4.52a1 1 0 011.36 1.38z"/></svg>`,
+    warning: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M9.13 2.6 1.4 15.9a1 1 0 00.87 1.5h15.46a1 1 0 00.87-1.5L10.87 2.6a1 1 0 00-1.74 0zM11.1 15.4H8.9v-2.2h2.2v2.2zm0-3.4H8.9V7.6h2.2V12z"/></svg>`,
+    error: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 2c1.29 0 2.48.41 3.46 1.1L5.1 13.46A6 6 0 0110 4zm0 12c-1.29 0-2.48-.41-3.46-1.1l8.36-8.36A6 6 0 0110 16z"/></svg>`,
+};
+/** The tone glyph, falling back to the info mark for an unknown tone. */
+const toneIcon = (tone) => TONE_ICONS[tone] ?? TONE_ICONS.info;
+const DISMISS_ICON = `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" focusable="false"><path d="M5.5 5.5l9 9M14.5 5.5l-9 9"/></svg>`;
 const toastStyles = `
   :host {
     display: block;
@@ -16,9 +37,18 @@ const toastStyles = `
     display: none;
   }
 
+  /* Fill, border, text colour and shadow all track box-ui-elements'
+     .notification and are pinned by the colour conformance manifest — they are
+     deliberately not derived from the tone accent. The --toast-accent property
+     exists only to colour the status glyph, which upstream has no equivalent
+     for, so adding it costs no conformance. */
   [part="toast"] {
+    --toast-accent: var(--boe-token-text-text, #222222);
+
     display: inline-flex;
-    align-items: center;
+    /* Top, not centre: with a heading above the message the glyph belongs on
+       the heading's line, and centring floats it into the gap between them. */
+    align-items: flex-start;
     gap: ${boeSpace[3]};
     min-height: 48px;
     max-inline-size: min(100%, 572px);
@@ -30,33 +60,107 @@ const toastStyles = `
     box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
   }
 
+  /* Opt-in softer treatment: the outline goes, the geometry does not. Setting
+     the colour to transparent rather than the width to 0 keeps the 2px in the
+     box model, so a borderless toast is exactly the size of a bordered one and
+     the two can sit in the same stack without jumping. The background paints
+     under the border by default, so the fill simply extends into it.
+
+     The bordered default stays: the 2px solid text-colour rule below is pinned
+     by the colour conformance manifest against upstream's .notification, and
+     strict mode fails if that declaration goes. */
+  :host([borderless]) [part="toast"] {
+    border-color: transparent;
+  }
+
+  /* The neutral toast keeps upstream's grey fill and near-black border, so the
+     glyph is the only place the "this is information" signal can live. */
+  [part="toast"][data-tone="info"] {
+    --toast-accent: var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
   [part="toast"][data-tone="success"] {
+    --toast-accent: var(--boe-token-surface-status-surface-success, #26c281);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 20%, #fff);
     border-color: var(--boe-token-surface-status-surface-success, #26c281);
   }
 
   [part="toast"][data-tone="error"] {
+    --toast-accent: var(--boe-token-surface-status-surface-error, #ed3757);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 20%, #fff);
     border-color: var(--boe-token-surface-status-surface-error, #ed3757);
   }
 
   [part="toast"][data-tone="warning"],
   [part="toast"][data-tone="inprogress"] {
+    --toast-accent: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 20%, #fff);
     border-color: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
   }
 
-  [part="message"] {
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  [part="icon"] {
+    flex: 0 0 auto;
+    inline-size: 20px;
+    block-size: 20px;
+    /* The accent at full strength: the glyph is the one element that should
+       read as the status colour rather than a darkened version of it. */
+    color: var(--toast-accent);
+  }
+
+  [part="icon"] svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  [part="content"] {
     flex: 1 1 auto;
     min-inline-size: 0;
-    padding-inline-end: ${boeSpace[3]};
+    padding-inline-end: ${boeSpace[2]};
+  }
+
+  [part="heading"] {
+    display: block;
     font-size: 15px;
     font-weight: 700;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+  }
+
+  /* Optional: with no heading the message stands alone, and an empty element
+     would still contribute its line box. */
+  [part="heading"]:empty {
+    display: none;
+  }
+
+  [part="message"] {
+    display: block;
+    font-size: 14px;
+    font-weight: 400;
     line-height: 1.35;
     /* Long unbroken tokens (URLs, filenames) wrap instead of overflowing. */
     overflow-wrap: anywhere;
   }
 
+  /* Without a heading the message is the toast's only line, so it carries the
+     weight the heading would have had. */
+  [part="heading"]:empty + [part="message"] {
+    font-size: 15px;
+    font-weight: 700;
+  }
+
   /* Optional action affordance (e.g. "Undo") before the dismiss button.
      Hidden — taking no flex gap — until content is assigned. */
   [part="action"] {
@@ -77,21 +181,33 @@ const toastStyles = `
     cursor: pointer;
   }
 
+  /* An icon button rather than a "Dismiss" label: the toast is chrome over the
+     reader's work, and a word-width button competes with the message it sits
+     beside. The accessible name is on the button, so nothing is lost. */
   [part="dismiss"] {
     appearance: none;
     flex: 0 0 auto;
-    border: 1px solid var(--boe-token-text-text, #222222);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 24px;
+    block-size: 24px;
+    padding: 4px;
+    border: 0;
     border-radius: ${boeRadius.med};
     background: transparent;
-    color: var(--boe-token-text-text, #222222);
+    color: inherit;
     font: inherit;
-    font-size: 13px;
-    font-weight: 700;
-    padding: 7px 13px;
     cursor: pointer;
     transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
   }
 
+  [part="dismiss"] svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
   [part="dismiss"]:hover:not(:disabled) {
     background: rgb(0 0 0 / 6%);
   }
@@ -111,12 +227,16 @@ const toastStyles = `
 export class Toast extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["message", "open", "tone", "duration"];
+        return ["duration", "heading", "message", "mode", "open", "tone"];
     }
     openValue = false;
     timeoutId = null;
     toastEl;
+    iconEl;
+    headingEl;
+    toneLabelEl;
     messageEl;
+    renderedTone = null;
     actionSlot;
     dismissEl;
     /** Auto-dismiss delay in ms for the declarative `open` path. 0 = sticky. */
@@ -161,7 +281,8 @@ export class Toast extends BaseElement {
             clearTimeout(this.timeoutId);
             this.timeoutId = null;
         }
-        if (duration > 0) {
+        // Sticky wins over any duration, including one passed to show().
+        if (duration > 0 && this.mode !== "sticky") {
             this.timeoutId = setTimeout(() => this.hide(), duration);
         }
     }
@@ -171,6 +292,42 @@ export class Toast extends BaseElement {
     set message(value) {
         this.setAttribute("message", value);
     }
+    /**
+     * Optional bold line above the message — "Upload failed" over "3 of 12 files
+     * could not be read". Named to match `box-alert`, which established the
+     * heading-plus-message shape in this family. Salesforce calls it `label`.
+     */
+    get heading() {
+        return this.getAttribute("heading") ?? "";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    /**
+     * Drop the outline for a softer, fill-only toast.
+     *
+     * Purely presentational and handled entirely in CSS, so it is deliberately
+     * not an observed attribute — there is nothing to re-render. The default
+     * stays bordered: that outline tracks box-ui-elements' `.notification` and
+     * is pinned by the colour conformance manifest.
+     */
+    get borderless() {
+        return this.hasAttribute("borderless");
+    }
+    set borderless(value) {
+        this.toggleAttribute("borderless", value);
+    }
+    /**
+     * Whether the toast clears itself. `sticky` overrides any `duration`: a
+     * caller that has said "this one stays" should not have it taken away by a
+     * duration set elsewhere.
+     */
+    get mode() {
+        return resolveToastMode(this.getAttribute("mode"));
+    }
+    set mode(value) {
+        this.setAttribute("mode", value);
+    }
     get tone() {
         return this.getAttribute("tone") ?? "info";
     }
@@ -211,12 +368,20 @@ export class Toast extends BaseElement {
         this.shadowRoot.innerHTML = `
       <style>${toastStyles}</style>
       <div part="toast" role="status" aria-live="polite">
-        <span part="message"></span>
+        <span part="icon" aria-hidden="true"></span>
+        <div part="content">
+          <span part="tone-label" class="sr-only"></span>
+          <span part="heading"></span>
+          <span part="message"></span>
+        </div>
         <slot name="action" part="action"></slot>
-        <button type="button" part="dismiss">Dismiss</button>
+        <button type="button" part="dismiss" aria-label="Dismiss">${DISMISS_ICON}</button>
       </div>
     `;
         this.toastEl = this.shadowRoot.querySelector('[part="toast"]');
+        this.iconEl = this.shadowRoot.querySelector('[part="icon"]');
+        this.headingEl = this.shadowRoot.querySelector('[part="heading"]');
+        this.toneLabelEl = this.shadowRoot.querySelector('[part="tone-label"]');
         this.messageEl = this.shadowRoot.querySelector('[part="message"]');
         this.actionSlot = this.shadowRoot.querySelector('slot[name="action"]');
         this.dismissEl = this.shadowRoot.querySelector('[part="dismiss"]');
@@ -240,7 +405,18 @@ export class Toast extends BaseElement {
         if (!visible) {
             return;
         }
-        this.toastEl.dataset.tone = this.tone;
+        const tone = this.tone;
+        this.toastEl.dataset.tone = tone;
+        // Only when it actually changes: this re-parses SVG markup, and update()
+        // runs on every attribute write.
+        if (tone !== this.renderedTone) {
+            this.iconEl.innerHTML = toneIcon(tone);
+            this.renderedTone = tone;
+        }
+        // The glyph is aria-hidden and the fill is colour, so without this the
+        // tone reaches a screen reader not at all.
+        this.toneLabelEl.textContent = toneAccessibleLabel(tone);
+        this.headingEl.textContent = this.heading;
         this.messageEl.textContent = this.message;
     }
 }

package/dist/components/feedback/tone.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The status vocabulary shared by the feedback surfaces.
+ *
+ * `box-alert` and `box-toast` both state their tone in words for screen
+ * readers, and both must say the *same* words: a reader who hears "In progress"
+ * from an alert should not hear "Inprogress" from a toast reporting the same
+ * thing. One definition is what keeps them in step.
+ */
+/**
+ * The tone as a word, for assistive technology.
+ *
+ * Tone is otherwise carried by fill and glyph, neither of which reaches a
+ * screen reader. An unrecognised tone is title-cased rather than dropped —
+ * a host that invents a tone should still get something spoken.
+ */
+export declare const toneAccessibleLabel: (tone: string) => string;