@fusion.dev/helix-headless 0.177.2 → 0.179.0

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

@@ -2,7 +2,7 @@ import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
 import { type Reading } from './buckets.js';
-declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
+declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartStatusInterface);
 /**
  * @summary A strip of cells, each colored by its reading, for uptime, contributions, or activity.
  *
@@ -50,6 +50,25 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * `helix-before-change` and tells with `change`, and the `selection` part says
  * how many are selected, in `selection-label`.
  *
+ * **Under `selection-mode` the strip is a grid**, so the selection is state a
+ * reader is told rather than words alone: each column of the strip is a `row`,
+ * a week with `rows="7"`, and each cell a `gridcell` named by its row in the
+ * table and carrying `aria-selected`. The strip says
+ * `aria-multiselectable` under `multiple` and points at the cell the keys rest
+ * on with `aria-activedescendant`, so a screen reader reads that cell, and the
+ * `live` part stays quiet. Without `selection-mode` nothing is selectable, and
+ * the strip is an application with the readout, as every chart's plot is.
+ *
+ * **Readings are sent as every chart sends them.** `helix-reading-change`
+ * says each move of the reading, by pointer, tap or key, and
+ * `helix-reading-press` a reading clicked, tapped, or pressed with Enter or
+ * Space, each with the row of the table in `index`.
+ *
+ * **Nothing to draw.** A table with no readings shows `empty-text`, "No
+ * readings", under the strip, and `loading` shows `loading-text` there until
+ * readings arrive. The `empty` and `loading` slots take markup in place of
+ * either, as on every chart.
+ *
  * **Keyboard.** The strip is one tab stop once it has cells.
  *
  * | Key | What it does |
@@ -59,7 +78,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * | Right, Left | Moves a column on or back, a week with `rows="7"`. On a right-to-left page, Left moves on. |
  * | Home, End | Moves to the first or the last cell. |
  * | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |
- * | Enter, Space | Selects the cell, or lets it go, under `selection-mode`. |
+ * | Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |
  * | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode="multiple"`. |
  * | Escape | Puts the cell's tooltip away. |
  *
@@ -69,23 +88,30 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @aliases Contribution graph, Uptime strip, Calendar heatmap, Activity graph
  * @documentation https://fusion.dev/helix/components/heatmap
  *
+ * @slot empty - Content shown under the strip when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
  * @slot end - Below the strip, at the trailing edge: usually the newest date.
+ * @slot loading - Content shown under the strip while `loading` is set and there are no readings yet. Falls back to `loading-text`.
  * @slot start - Below the strip, at the leading edge: usually the oldest date.
  * @slot summary - Below the strip, in the middle: a summary of the range shown.
  *
  * @event {Event} change - Fired once a press or a key has changed which cells are selected.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable.
+ * @event {HelixReadingChangeEvent} helix-reading-change - The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
+ * @event {HelixReadingPressEvent} helix-reading-press - A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
  * @event {HelixResizeEvent} helix-resize - Fired when the number of cells drawn changes, with the new number.
  *
  * @csspart cell - One reading.
  * @csspart cell-active - The cell the pointer or the keys rest on. Set alongside `cell`.
  * @csspart cell-selected - A cell that is selected, under `selection-mode`. Set alongside `cell`.
- * @csspart empty - Shown when the table has no readings. It stays hidden until the table can be read: on the server and during hydration, there is no document to resolve `for` in.
+ * @csspart empty - The words under the strip when the table has no readings: the `empty` slot, falling back to `empty-text`. Not drawn while the table cannot be read yet, on the server and during hydration, there being no document to resolve `for` in.
  * @csspart end - The trailing slot's box.
  * @csspart footer - The three-slot row under the strip.
  * @csspart live - The readout: a polite live region that says the cell the keys moved to. Hide it visually.
+ * @csspart loading - The words under the strip while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart overview - The busiest reading and the total of the readings drawn, written as a sentence for screen readers, which describes the strip. Rendered once there are cells. Hide it visually.
+ * @csspart plot - The same element as `strip`, under the name every chart gives the drawing that takes focus.
+ * @csspart row - A column of cells, which a grid reads as a row, under `selection-mode`. It draws no box.
  * @csspart selection - A polite region that says how many cells are selected after a change, rendered from the first change. Hide it visually.
  * @csspart start - The leading slot's box.
  * @csspart strip - The grid of cells, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
@@ -125,6 +151,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  *
  * @cssstate active - While a cell is shown, under the pointer or the keys, with its tooltip open.
  * @cssstate empty - While the `empty` part stands in place of the cells.
+ * @cssstate loading - While the `loading` part stands in place of the cells.
  */
 export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     /**
@@ -137,13 +164,6 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * `overview-label`.
      */
     busiestLabel: string;
-    /**
-     * Shown when the table has no readings in it.
-     *
-     * Never shown while the table cannot be read at all, which is a server render
-     * and the hydrating one after it: see `sourceKnown`.
-     */
-    emptyText: string;
     /**
      * Space between cells, in CSS pixels. It is a number for the same reason
      * `min-cell` is.
@@ -187,9 +207,11 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      */
     rows: number;
     /**
-     * What the readout adds for a selected cell, under `selection-mode`, after
-     * where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-     * nothing.
+     * What the readout added for a selected cell, under `selection-mode`.
+     *
+     * @deprecated The strip is a grid under `selection-mode`, and each cell says
+     * whether it is selected with `aria-selected`, in the reader's own words, so
+     * the readout says nothing there and this is not read.
      */
     selectedLabel: string;
     /**
@@ -334,28 +356,6 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * the one under the pointer.
      */
     private get points();
-    /**
-     * Whether this render can tell a table with no readings from one it has not
-     * resolved yet.
-     *
-     * **Unknown is not empty, which is what an empty state must never say.**
-     * `for` names an id and resolving an id wants a document, so a server has
-     * none and a hydrating render must not look either. Without this the server
-     * drew "No readings" over a table holding ninety days of them, a crawler read
-     * that sentence, and the strip flipped to a full one on hydration: the fault
-     * `MixinCollection` names for a slotted collection, arriving through the one
-     * channel that mixin cannot see.
-     *
-     * The same shape as `childrenKnown`, asked of a tree that can answer about
-     * ids rather than of one that holds children. An id that resolves to nothing
-     * in a browser is still known, and still empty: a `for` naming no table
-     * should say so rather than sit blank, which is why this asks
-     * `searchableById` and not `elementById`.
-     *
-     * `readingsKnown` asks it for every chart, and for `data` too, which a
-     * server does not draw.
-     */
-    private get sourceKnown();
     /**
      * `rows` as a usable count, which is not always what the attribute says.
      *
@@ -432,6 +432,23 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     private markEmpty;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * The cells as a grid's rows, one for each column of the strip, so a week
+     * is a row with `rows="7"` and a status strip is one row.
+     *
+     * **A column, because that is the order the cells are in.** The strip fills
+     * down the column and then across, so a row wrapping a column keeps every
+     * cell where it was, and `display: contents` keeps the wrapper out of the
+     * strip's grid, drawing no box, which is a mechanism and not a look. A row
+     * across the strip would have taken cells out of order and moved them.
+     */
+    private renderRows;
+    /**
+     * One cell under `selection-mode`: a `gridcell` named by its row in the
+     * table, its reading and its place, and saying whether it is selected, which
+     * a reader hears on reaching it as the strip's active descendant.
+     */
+    private renderGridCell;
     /**
      * What the strip shows, in a sentence: the busiest reading drawn, as the
      * table writes it, and the total of them all, in `locale`. The strip is
@@ -461,13 +478,7 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * that is usually wider, so a percentage of the box lands between cells. The
      * pitch is `cell + gap` and both are measured.
      */
-    protected renderTooltip(): TemplateResult | typeof nothing;
-    /**
-     * The readout's cursor: the pointer, with the selected word after where a
-     * selected cell stands, so a reader moving through the strip hears which
-     * cells are in the selection and not only how many.
-     */
-    private reading;
+    protected renderTooltip(grid?: boolean): TemplateResult | typeof nothing;
     /**
      * Which drawn cell the pointer is over, or -1.
      *
@@ -476,6 +487,7 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * `mouseover` it is delivered for a pen.
      */
     private readonly onPointerOver;
+    private readonly onPointerUp;
     private readonly onPointerLeave;
 }
 declare global {

package/dist/heatmap/root/heatmap-root.js

@@ -4,16 +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 { AriaForwardController, byRow, CHART_PLOT, commaList, customElement, drawTooltip, formatWords, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, pressedValue, rangeAdd, requestValue, StatusController, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, byRow, CHART_PLOT, commaList, customElement, drawTooltip, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, HelixResizeEvent, MixinChartSource, MixinChartStatus, markRegion, pressedValue, rangeAdd, requestValue, StatusController, spokenReading, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 import { fits, monthPage, overviewOf, toneOf } from './buckets.js';
-let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(HelixElement) {
+let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
         super(...arguments);
         this.busiestLabel = 'Busiest';
-        this.emptyText = 'No readings';
         this.gap = 2;
         this.minCell = 8;
         this.overviewLabel = '{busiestLabel}: {busiest}; {totalLabel} {total}.';
@@ -69,6 +68,16 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             const index = Number(cell?.getAttribute('data-index') ?? -1);
             this.pointer.set(Number.isInteger(index) ? index : -1);
         };
+        this.onPointerUp = (event) => {
+            if (event.pointerType !== 'touch') {
+                return;
+            }
+            const cell = event.target?.closest?.('[part~="cell"]');
+            const index = Number(cell?.getAttribute('data-index') ?? -1);
+            if (cell && Number.isInteger(index) && index >= 0) {
+                this.pointer.tapTo(index);
+            }
+        };
         this.onPointerLeave = () => {
             if (!this.pointer.keyed) {
                 this.pointer.set(-1);
@@ -112,9 +121,6 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         }
         return byRow(series, this.sourceRows.length).map((point) => point ?? { value: undefined });
     }
-    get sourceKnown() {
-        return this.readingsKnown;
-    }
     get rowCount() {
         return Math.max(1, Math.floor(this.rows) || 1);
     }
@@ -160,6 +166,12 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
     }
     connectedCallback() {
         super.connectedCallback();
+        this.pointer.axis = 'none';
+        this.pointer.onReading = (heard, detail) => {
+            const row = detail.index < 0 ? -1 : this.points.length - this.drawn.length + detail.index;
+            const told = { ...detail, index: row, label: this.sourceRows[row]?.label ?? '' };
+            this.dispatchEvent(heard === 'press' ? new HelixReadingPressEvent(told) : new HelixReadingChangeEvent(told));
+        };
         this.addEventListener('keydown', this.onKeydown);
         if (typeof ResizeObserver !== 'undefined') {
             this.observer = new ResizeObserver((entries) => {
@@ -184,8 +196,6 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         super.updated(changed);
         this.markEmpty();
         this.measure();
-        this.toggleState('active', this.pointer.at >= 0);
-        this.toggleState('empty', this.drawn.length === 0 && this.sourceKnown);
         const showing = this.visible;
         const written = showing > 0 ? String(showing) : null;
         if (this.getAttribute('visible') !== written) {
@@ -206,41 +216,48 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const palette = writtenList(this.tones);
         const cells = this.drawn;
         const readable = cells.length > 0;
+        const grid = readable && this.selectionMode !== undefined;
         const keys = this.selectionMode ? this.keysOf(cells) : [];
         const chosen = new Set(this.selectionMode ? commaList(this.value) : []);
+        const drawn = cells.map((reading, index) => {
+            const tone = toneOf(reading, bounds, palette);
+            const active = this.pointer.at === index;
+            const picked = chosen.has(keys[index] ?? '');
+            if (grid) {
+                return this.renderGridCell(index, active, picked, tone);
+            }
+            return tone === undefined
+                ? html `<span
+                      part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
+                      data-index=${index}
+                    ></span>`
+                : html `<span
+                part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
+                data-index=${index}
+                data-tone=${tone}
+                style="--heatmap-tone: var(--heatmap-tone-${tone})"
+              ></span>`;
+        });
+        const at = this.pointer.at;
         return html `<div
+        aria-activedescendant=${grid && at >= 0 ? `cell-${at}` : nothing}
         aria-describedby=${readable ? 'helix-chart-summary' : nothing}
         aria-label=${this.named || this.stripLabel}
-        part="strip"
+        aria-multiselectable=${grid && this.selectionMode === 'multiple' ? 'true' : nothing}
+        part="strip plot"
         id=${CHART_PLOT}
-        role=${readable ? 'application' : 'img'}
+        role=${grid ? 'grid' : readable ? 'application' : 'img'}
         style="--heatmap-rows: ${this.rowCount}"
         tabindex=${readable ? '0' : nothing}
         @click=${this.onClick}
         @pointerover=${this.onPointerOver}
         @pointerleave=${this.onPointerLeave}
+        @pointerup=${this.onPointerUp}
       >
-        ${cells.length === 0
-            ? nothing
-            : cells.map((reading, index) => {
-                const tone = toneOf(reading, bounds, palette);
-                const active = this.pointer.at === index;
-                const picked = chosen.has(keys[index] ?? '');
-                return tone === undefined
-                    ? html `<span
-                      part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
-                      data-index=${index}
-                    ></span>`
-                    : html `<span
-                part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
-                data-index=${index}
-                data-tone=${tone}
-                style="--heatmap-tone: var(--heatmap-tone-${tone})"
-              ></span>`;
-            })}
-        ${this.renderTooltip()}
+        ${grid ? this.renderRows(drawn) : drawn}
+        ${this.renderTooltip(grid)}
       </div>
-      ${cells.length === 0 && this.sourceKnown ? html `<p part="empty">${this.emptyText}</p>` : nothing}
+      ${cells.length === 0 ? this.renderStatus() : nothing}
       <div part="footer">
         <span part="start"><slot name="start"></slot></span>
         <span part="summary"><slot name="summary"></slot></span>
@@ -249,6 +266,28 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             ? html `<span part="selection" role="status">${this.status.said}</span>`
             : nothing}${this.renderTable()}`;
     }
+    renderRows(cells) {
+        const size = this.rowCount === 1 ? cells.length : this.rowCount;
+        const rows = [];
+        for (let start = 0; start < cells.length; start += size) {
+            rows.push(html `<div part="row" role="row" style="display: contents">${cells.slice(start, start + size)}</div>`);
+        }
+        return rows;
+    }
+    renderGridCell(index, active, picked, tone) {
+        const row = this.sourceRows[this.points.length - this.drawn.length + index];
+        const name = row ? spokenReading(row) : '';
+        return html `<span
+      aria-label=${name || nothing}
+      aria-selected=${picked ? 'true' : 'false'}
+      data-index=${index}
+      data-tone=${tone ?? nothing}
+      id="cell-${index}"
+      part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
+      role="gridcell"
+      style=${tone === undefined ? nothing : `--heatmap-tone: var(--heatmap-tone-${tone})`}
+    ></span>`;
+    }
     renderOverview(cells) {
         const rows = this.sourceRows;
         const offset = this.points.length - cells.length;
@@ -264,10 +303,10 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         });
         return html `<p id="helix-chart-summary" part="overview">${said}</p>`;
     }
-    renderTooltip() {
+    renderTooltip(grid = false) {
         const at = this.pointer.at;
         if (at < 0) {
-            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'), undefined, undefined, this.pointer);
+            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'), undefined, undefined, grid ? undefined : this.pointer);
         }
         const offset = this.points.length - this.drawn.length;
         const cell = this.cellPx;
@@ -278,34 +317,13 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             placement: 'top',
             x: `${column * (cell + gap) + cell / 2}px`,
             y: `${row * (cell + gap)}px`,
-        }, undefined, this.reading(at));
-    }
-    reading(at) {
-        const pointer = this.pointer;
-        const key = this.keysOf(this.drawn)[at] ?? '';
-        if (!this.selectionMode || key === '' || this.selectedLabel === '') {
-            return pointer;
-        }
-        if (!commaList(this.value).includes(key)) {
-            return pointer;
-        }
-        return {
-            column: pointer.column,
-            keyed: pointer.keyed,
-            position: pointer.position,
-            shows: (cell) => pointer.shows(cell),
-            state: this.selectedLabel,
-        };
+        }, undefined, grid ? undefined : this.pointer);
     }
 };
 __decorate([
     words,
     property({ attribute: 'busiest-label' })
 ], HelixHeadlessHeatmap.prototype, "busiestLabel", void 0);
-__decorate([
-    words,
-    property({ attribute: 'empty-text' })
-], HelixHeadlessHeatmap.prototype, "emptyText", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessHeatmap.prototype, "gap", void 0);

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

@@ -436,6 +436,12 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
     protected renderMark(submenu: boolean): TemplateResult | typeof nothing;
     /** Whether the row says what it is from its host, for a field's `aria-activedescendant`. */
     private get onHost();
+    /**
+     * Presses the row, as `click()` presses a native button: passed to the
+     * control inside, which is what answers a click, so a script's `click()`
+     * chooses the row, or follows its link, once.
+     */
+    click(): void;
     protected render(): TemplateResult | typeof nothing;
 }
 declare global {

package/dist/menu/item/menu-item.js

@@ -240,6 +240,15 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
     get onHost() {
         return this.virtual && this.onPage && !this.showingSubmenu;
     }
+    click() {
+        const control = this.partNamed('item');
+        if (control) {
+            control.click();
+        }
+        else {
+            super.click();
+        }
+    }
     render() {
         const submenu = this.hasSubmenu;
         const ticks = this.choice;

package/dist/notifications/notification/notification.d.ts

@@ -89,6 +89,15 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      * Whether the notification starts as read, used until `read` is set.
      */
     defaultRead: boolean;
+    /**
+     * The dismiss control's name, read by screen readers, with `{label}` for the
+     * row's own words.
+     *
+     * One sentence with the words in it, so a translation puts them where its
+     * language does: `registerWords('de', { 'helix-notification': { dismissLabel:
+     * '{label} schließen' } })`.
+     */
+    dismissLabel: string;
     /**
      * Locale for the timestamp.
      *
@@ -129,13 +138,6 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      * the first render on the client is the server's.
      */
     stop: boolean;
-    /**
-     * What a screen reader hears before an unread notification's text.
-     *
-     * The unread mark is drawn, so a reader who cannot see it hears this word in
-     * its place. Translate it with the rest of your interface.
-     */
-    unreadLabel: string;
     /**
      * @internal Read by the list to identify its children across the light DOM,
      * which is cheaper than `instanceof` and is why this is public rather than
@@ -231,11 +233,37 @@ export declare class HelixHeadlessNotification extends HelixHeadlessNotification
      */
     private renderTime;
     protected render(): TemplateResult;
+    /**
+     * What a screen reader hears before an unread notification's text.
+     *
+     * The unread mark is drawn, so a reader who cannot see it hears this word in
+     * its place. Translate it with the rest of your interface.
+     */
+    unreadLabel: string;
+    /**
+     * The dismiss control's name: `dismissLabel` with the row's words.
+     *
+     * **Named for its row**, because a feed of rows each with a control named
+     * Dismiss is a list of buttons that says nothing about which notice each one
+     * ends. The words are the default slot's, the ones `helix-dismiss` reports,
+     * so a row's actions are not read into it. A page's own `dismiss-label` with
+     * no `{label}` is followed by them, unless it holds them already, as `Tag`
+     * names its remove button. Read from the children, so the verb alone on a
+     * server, until the update after.
+     */
+    private get dismissName();
+    protected firstUpdated(changed: PropertyValues): void;
     private readonly handleActions;
     private readonly handleDismiss;
     /**
-     * Where focus goes when this row leaves: the next row's first control, the
-     * one before, then the first control left in the feed.
+     * Where focus goes when this row leaves: the next row, the one before, then
+     * the first control left in the feed.
+     *
+     * **The row itself, and not a control in it**, because the row is what a
+     * reader moves through the feed by, and every row takes focus. Sent to the
+     * next dismiss control, focus passed over each row with no controls between,
+     * and to Load more where no row after had one. Focused, the row becomes the
+     * feed's stop, as one reached with the arrows does.
      */
     private neighbor;
 }

package/dist/notifications/notification/notification.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, deepActiveElement, deepContains, focusableElements, HelixElement, HelixReadEvent, MixinDismissible, requestChange, slotFilled, words, } from '@fusion.dev/helix-core';
+import { customElement, deepActiveElement, deepContains, focusableElements, formatWords, HelixElement, HelixReadEvent, MixinDismissible, requestChange, slotFilled, slottedWords, words, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -16,13 +16,14 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
         super(...arguments);
         this.at = '';
         this.defaultRead = false;
+        this.dismissLabel = 'Dismiss {label}';
         this.locale = '';
         this.position = 0;
         this.setSize = 0;
         this.stop = true;
-        this.unreadLabel = 'Unread';
         this.isNotification = true;
         this.readState = undefined;
+        this.unreadLabel = 'Unread';
         this.handleActions = () => {
             this.markActions();
         };
@@ -82,7 +83,7 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
         return html `<button
       part="dismiss"
       type="button"
-      aria-label=${this.dismissLabel}
+      aria-label=${this.dismissName}
       @click=${this.handleDismiss}
     >
       <slot name="dismiss">
@@ -132,6 +133,18 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
       </div>
     </div>`;
     }
+    get dismissName() {
+        const { dismissLabel } = this;
+        const label = this.childrenKnown ? slottedWords(this, ['']) : '';
+        if (dismissLabel.includes('{label}')) {
+            return formatWords(this, 'dismissLabel', { label }).trim();
+        }
+        return label === '' || dismissLabel.includes(label) ? dismissLabel : `${dismissLabel} ${label}`;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', () => this.requestUpdate());
+    }
     neighbor() {
         let feed = this.parentElement;
         while (feed && !('markEveryoneRead' in feed)) {
@@ -143,7 +156,7 @@ let HelixHeadlessNotification = class HelixHeadlessNotification extends MixinDis
         const at = rows.indexOf(this);
         const order = [...rows.slice(at + 1), ...rows.slice(0, Math.max(at, 0)).reverse()];
         for (const row of order) {
-            const target = row.shadowRoot?.querySelector('[part="dismiss"]') ?? focusableElements(row)[0];
+            const target = row.shadowRoot?.querySelector('[part="item"]');
             if (target) {
                 return target;
             }
@@ -162,6 +175,10 @@ __decorate([
 __decorate([
     property({ attribute: 'default-read', type: Boolean })
 ], HelixHeadlessNotification.prototype, "defaultRead", void 0);
+__decorate([
+    words,
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessNotification.prototype, "dismissLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessNotification.prototype, "locale", void 0);

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -87,6 +87,12 @@ export declare class HelixHeadlessSpeedDialItem extends HelixElement {
      * keyboard controller uses for the arrow keys.
      */
     focusItem(): void;
+    /**
+     * Presses the action, as `click()` presses a native button: passed to the
+     * control inside, which is what answers a click, so a script's `click()`
+     * chooses the action and follows its link, once.
+     */
+    click(): void;
     /** Chooses the action, the same as pressing it. */
     select(): void;
     /**

package/dist/speed-dial/item/speed-dial-item.js

@@ -43,6 +43,15 @@ let HelixHeadlessSpeedDialItem = class HelixHeadlessSpeedDialItem extends HelixE
     focusItem() {
         this.focus();
     }
+    click() {
+        const control = this.partNamed('item');
+        if (control) {
+            control.click();
+        }
+        else {
+            super.click();
+        }
+    }
     select() {
         this.choose();
     }

package/dist/tabs/tab/tab.d.ts

@@ -112,6 +112,12 @@ export declare class HelixHeadlessTab extends HelixHeadlessTab_base {
      * which changes nothing and so re-renders nothing.
      */
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Presses the tab, as `click()` presses a native button: passed to the
+     * control inside, which is what answers a click, so a script's `click()`
+     * selects the tab, or follows its link, once.
+     */
+    click(): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/tabs/tab/tab.js

@@ -67,6 +67,15 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinDismissible(MixinSele
         super.firstUpdated(changed);
         this.finishHydration();
     }
+    click() {
+        const control = this.partNamed('tab');
+        if (control) {
+            control.click();
+        }
+        else {
+            super.click();
+        }
+    }
     render() {
         const tabindex = this.selected || !this.childrenKnown ? '0' : '-1';
         const shortcut = this.dismissible && !this.disabled ? 'Delete' : nothing;