@fusion.dev/helix-headless 0.143.0 → 0.144.0

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

@@ -44,9 +44,15 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * bands show each part's share. Use it to see which part grew. The default
  * shows whether the total grew.
  *
- * The drawing is `aria-hidden`. The text summary gives the latest reading's
- * total and each part's share of it, and the table beside the chart has every
- * number.
+ * The drawing is hidden from screen readers. The text summary gives the latest
+ * reading's total and each part's share of it, and the table beside the chart
+ * has every number.
+ *
+ * **The plot is read by key.** It takes focus, named by `label` or the caption.
+ * The left and right arrows move from reading to reading, Home and End go to
+ * the first and the last, and the up and down arrows move among the series of
+ * a reading. The tooltip follows, the `live` part says the reading in words,
+ * and Escape puts the tooltip away.
  *
  * Every numeric column is a part, so leave a total column out of the table the
  * chart reads, or it is counted twice. A negative reading is drawn as zero.
@@ -64,8 +70,9 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * @csspart label - One reading's name.
  * @csspart labels - The row of reading names.
  * @csspart line - The top edge of one part's band.
+ * @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 total and each part's share at the latest reading, written as a sentence for screen readers.
  * @csspart svg - The drawing surface the bands sit on.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
@@ -77,6 +84,7 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * @csspart tooltip-arrow-top - The point while the bubble is above the reading, so on its bottom edge, beside `tooltip-arrow`.
  * @csspart tooltip-bottom - The bubble while it is below the reading, beside `tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
+ * @csspart tooltip-cell-current - The cell the up and down arrows rest on, while they rest there. Set alongside `tooltip-cell`.
  * @csspart tooltip-label - The reading's own name inside the tooltip.
  * @csspart tooltip-left - The bubble while it is left of the reading, beside `tooltip`.
  * @csspart tooltip-name - A column's name inside the tooltip.

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

@@ -36,7 +36,11 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
     get stack() {
         const rows = this.sourceRows;
         const columns = this.plottedColumns;
-        const values = columns.map((column) => rows.map((row) => {
+        const names = columns.map((column) => rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
+        const values = columns.map((column, depth) => rows.map((row) => {
+            if (!this.showsSeries(names[depth] ?? '')) {
+                return 0;
+            }
             const value = row.cells[column]?.value ?? 0;
             if (value < 0) {
                 this.warnNegative();
@@ -59,7 +63,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         return {
             columns,
             layers,
-            names: columns.map((column) => rows.find((row) => row.cells[column])?.cells[column]?.name ?? ''),
+            names,
             totals,
             values,
         };
@@ -94,8 +98,17 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
     }
     renderPlot(stack, count, x, y, domain) {
         const order = stack.layers.map((_, depth) => depth).reverse();
-        return html `<div aria-hidden="true" id=${CHART_PLOT} part="plot">
+        return html `<div
+      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}"
@@ -162,9 +175,13 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         const last = rows.length - 1;
         const total = stack.totals[last] ?? 0;
         const format = formatNumbers(this.locale);
-        const shares = stack.names.map((name, depth) => `${name} ${percentIn(this.locale).format(total > 0 ? (stack.values[depth]?.[last] ?? 0) / total : 0)}`);
+        const shares = stack.names.flatMap((name, depth) => this.showsSeries(name)
+            ? [
+                `${name} ${percentIn(this.locale).format(total > 0 ? (stack.values[depth]?.[last] ?? 0) / total : 0)}`,
+            ]
+            : []);
         const named = this.named ? `${this.named}, ` : '';
-        return html `<p part="summary">
+        return html `<p id="helix-chart-summary" part="summary">
       ${named}${rows[last]?.label ?? ''}: ${this.totalLabel} ${format(total)}; ${shares.join(', ')}.
     </p>`;
     }
@@ -190,14 +207,14 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         const at = this.pointer.at;
         const rows = this.tallied(this.sourceRows, stack);
         if (at < 0) {
-            return drawTooltip(rows, at, this.tag('tooltip'));
+            return drawTooltip(rows, at, this.tag('tooltip'), undefined, undefined, this.pointer);
         }
         const slot = 100 / rows.length;
         return drawTooltip(rows, at, this.tag('tooltip'), {
             placement: 'top',
             x: `${at * slot + slot / 2}%`,
             y: `${y(stack.layers.at(-1)?.[at] ?? 0)}%`,
-        }, (cell) => this.seriesOf(cell));
+        }, (cell) => this.seriesOf(cell), this.pointer);
     }
 };
 __decorate([

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

@@ -32,6 +32,17 @@ export declare const initialsOf: (name: string) => string;
  * @csspart initials - The initials shown when there is no usable image.
  */
 export declare class HelixHeadlessAvatar extends HelixElement {
+    /**
+     * How long, in milliseconds, a picture may take before the initials stand
+     * in for it while it loads.
+     *
+     * Absent keeps the picture's place empty until it arrives or fails. Set,
+     * the initials show once the wait is over and the picture
+     * replaces them when it arrives, so a slow connection shows who it is
+     * without a cached picture flashing initials first. Radix's `delayMs` is the
+     * same idea.
+     */
+    fallbackDelay?: number;
     /**
      * Name of the person or entity.
      *
@@ -65,10 +76,13 @@ export declare class HelixHeadlessAvatar extends HelixElement {
      * report waits for the event it reports, below.
      */
     private broken;
+    /** The wait `fallback-delay` asks for, which has run out for the picture loading now or not. */
+    private readonly wait;
     private readonly handleError;
     private readonly handleLoad;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
+    private startWait;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /**

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

@@ -4,8 +4,8 @@ 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 } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, DelayController, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 export const initialsOf = (name) => {
     const words = name.trim().split(/\s+/).filter(Boolean);
@@ -24,6 +24,7 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
         this.src = '';
         this.status = 'loading';
         this.broken = false;
+        this.wait = new DelayController(this);
         this.handleError = (event) => {
             this.broken = true;
             this.status = 'error';
@@ -64,8 +65,16 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
             });
         }
     }
+    startWait() {
+        this.wait.start(this.fallbackDelay !== undefined && this.src !== ''
+            ? Math.max(this.fallbackDelay, 0)
+            : undefined);
+    }
     updated(changed) {
         super.updated(changed);
+        if (changed.has('src') || changed.has('fallbackDelay')) {
+            this.startWait();
+        }
         if (changed.has('status')) {
             if (this.status === 'loading') {
                 this.removeAttribute('data-status');
@@ -77,13 +86,15 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
     }
     render() {
         if (this.src !== '' && !this.broken) {
-            return html `<img
-        part="image"
-        src=${this.src}
-        alt=""
-        @error=${this.handleError}
-        @load=${this.handleLoad}
-      />`;
+            const standIn = this.wait.elapsed && this.status === 'loading';
+            return html `${standIn ? this.renderInitials() : nothing}<img
+          part="image"
+          src=${this.src}
+          alt=""
+          ?hidden=${standIn}
+          @error=${this.handleError}
+          @load=${this.handleLoad}
+        />`;
         }
         return this.renderInitials();
     }
@@ -93,6 +104,9 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
     </slot>`;
     }
 };
+__decorate([
+    property({ attribute: 'fallback-delay', type: Number })
+], HelixHeadlessAvatar.prototype, "fallbackDelay", void 0);
 __decorate([
     property()
 ], HelixHeadlessAvatar.prototype, "name", void 0);

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

@@ -18,13 +18,17 @@ 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.
+ * **A badge wrapped around a control is not part of the 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. A
+ * reference from the control to the count would point into the badge's shadow
+ * root, which the platform does not allow.
+ *
+ * **Put the badge inside the control to have its count read with the
+ * control's name**, as Web Awesome and Shoelace do: `<button>Inbox
+ * <helix-badge value="8" label="8 unread"></helix-badge></button>` is the
+ * button "Inbox 8 unread", and stays current as the count changes. The styled
+ * tier's `placement="inline"` draws the mark in the line for that case.
  *
  * @since 0.1.0
  * @status stable

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/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 {};