@fusion.dev/helix-headless 0.146.0 → 0.148.0

package/dist/slider/root/slider-root.js

@@ -26,6 +26,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.rangeText = '{start} to {end}';
         this.showValue = false;
         this.step = 1;
+        this.tooltip = false;
         this.handleInput = (event) => {
             event.stopPropagation();
             const control = event.target;
@@ -181,6 +182,22 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         super.updated(changed);
         this.sync();
     }
+    renderTooltips(start, end) {
+        if (!this.tooltip) {
+            return nothing;
+        }
+        const bubble = (fraction, text, thumb) => html `<span part="tooltip" data-thumb=${thumb ?? nothing} style="--slider-at: ${fraction}"
+        >${text}</span
+      >`;
+        return html `<div part="tooltips" aria-hidden="true">
+      ${this.range
+            ? [
+                bubble(this.along(start), this.said(start), 'start'),
+                bubble(this.along(end), this.said(end), 'end'),
+            ]
+            : bubble(this.fraction, this.said(this.value))}
+    </div>`;
+    }
     render() {
         const [start, end] = this.bounds;
         const thumb = (which, at) => html `<input
@@ -212,6 +229,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
       part="field"
       data-markers=${this.markerValues.length > 0 ? '' : nothing}
       data-range=${this.range ? '' : nothing}
+      data-tooltip=${this.tooltip ? '' : nothing}
       style="--slider-fraction: ${this.fraction}; --slider-from: ${this.along(start)}; --slider-to: ${this.along(end)}"
     >
       ${this.range ? thumb('start', start) : nothing}
@@ -247,6 +265,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
                   >`)}
             </div>`
             : nothing}
+      ${this.renderTooltips(start, end)}
       ${this.showValue
             ? html `<output
               part="output"
@@ -310,6 +329,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessSlider.prototype, "tooltip", void 0);
 __decorate([
     property({ attribute: 'value-text' })
 ], HelixHeadlessSlider.prototype, "valueText", void 0);

package/dist/sparkline/readings.d.ts

@@ -1,18 +1,36 @@
-/** Where the highest and the lowest readings are, by place, or none. */
-export interface Extremes {
-    /** The place of the highest reading, the first where several tie. */
-    high?: number;
-    /** The place of the lowest reading, the first where several tie. */
-    low?: number;
-}
-/**
- * Where the highest and the lowest readings stand. A blank slot is passed
- * over, and a list with nothing in it has neither.
- */
-export declare const extremesOf: (slots: readonly (number | undefined)[]) => Extremes;
+import { type Point } from '@fusion.dev/helix-core';
 /**
  * A reading in words, for the readout: the row's name where a table gave one,
  * the reading as it is written, and where it stands in brackets, such as
  * "Mon: 12 (3 of 7)". The same order every chart's readout uses.
  */
 export declare const readingWords: (label: string, text: string, position: string) => string;
+/**
+ * The readings in their places: `count` slots, each holding the value read at
+ * that place, or nothing where the place is blank. A point outside the places
+ * is left out.
+ */
+export declare const slotsOf: (points: readonly {
+    at: number;
+    value: number;
+}[], count: number) => (number | undefined)[];
+/** One unbroken stretch of the line: its drawn path and the points it runs through. */
+export interface Run {
+    /** The path the line draws through the points. */
+    path: string;
+    /** The points, in drawing coordinates. */
+    run: readonly Point[];
+}
+/**
+ * Each run of the line closed down to `floor`, the path the wash fills: the
+ * run's own path, then down from its last point, across and back up to its
+ * first. Empty where there are no runs.
+ */
+export declare const areaPath: (runs: readonly Run[], floor: number) => string;
+/**
+ * What the readings come to, in `template`: `{first}` and `{last}` for the
+ * first and the last reading, `{high}` and `{low}` for the highest and the
+ * lowest, each written by `write`. Empty where there are fewer than two
+ * readings, which make no trend.
+ */
+export declare const overviewWords: (template: string, slots: readonly (number | undefined)[], write: (at: number) => string) => string;

package/dist/sparkline/readings.js

@@ -1,19 +1,36 @@
-export const extremesOf = (slots) => {
-    const found = {};
-    slots.forEach((value, at) => {
-        if (value === undefined) {
-            return;
-        }
-        if (found.high === undefined || value > slots[found.high]) {
-            found.high = at;
-        }
-        if (found.low === undefined || value < slots[found.low]) {
-            found.low = at;
-        }
-    });
-    return found;
-};
+import { extremesOf, fillTemplate } from '@fusion.dev/helix-core';
 export const readingWords = (label, text, position) => {
     const named = label === '' ? text : text === '' ? label : `${label}: ${text}`;
     return position === '' ? named : `${named} (${position})`;
 };
+export const slotsOf = (points, count) => {
+    const slots = Array.from({ length: count }, () => undefined);
+    for (const point of points) {
+        if (point.at >= 0 && point.at < count) {
+            slots[point.at] = point.value;
+        }
+    }
+    return slots;
+};
+export const areaPath = (runs, floor) => runs
+    .map((one) => {
+    const first = one.run[0];
+    const last = one.run.at(-1);
+    return `${one.path}L${last[0]},${floor}L${first[0]},${floor}Z`;
+})
+    .join('');
+export const overviewWords = (template, slots, write) => {
+    const placed = slots.flatMap((value, at) => (value === undefined ? [] : [at]));
+    const first = placed[0];
+    const last = placed.at(-1);
+    const { high, low } = extremesOf(slots);
+    if (placed.length < 2 || first === undefined || last === undefined) {
+        return '';
+    }
+    return fillTemplate(template, {
+        first: write(first),
+        high: write(high),
+        last: write(last),
+        low: write(low),
+    });
+};

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

@@ -1,4 +1,4 @@
-import { ChartPointerController, type Curve, HelixElement, SourceController } from '@fusion.dev/helix-core';
+import { ChartPointerController, type Curve, HelixElement, type Series, SourceController } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A small chart with no axes that shows the shape of a series beside its number.
@@ -19,10 +19,16 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * the last, Escape puts the reading away, and the `live` part says each
  * reading with where it stands, such as "Mon: 12 (3 of 7)".
  *
+ * **A named sparkline describes itself.** Beside its name, a screen reader
+ * hears what the readings come to, the first and the last, the highest and
+ * the lowest, in `overview-label`: "From 12 to 20, highest 30, lowest 8". An
+ * `aria-label` on the element names it as `label` does.
+ *
  * A pointer resting on the drawing shows the reading under it: the `cursor`
  * part marks it and the `readout` part writes it. `marks` adds a mark on the
- * highest and the lowest reading. A blank cell in a `for` table is a gap in
- * the line.
+ * highest and the lowest reading, and `range` draws a band between two values,
+ * such as a normal range. A blank cell in a `for` table is a gap in the line,
+ * and a reading alone between two blanks is a `lone` mark.
  *
  * Place it beside a `Stat`, because a change beside a figure is a second fact,
  * as `Stat`'s own spec says. `Trend` is composed the same way.
@@ -44,7 +50,10 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @csspart high - The mark on the highest reading, under `marks="high"`. Placed as `cursor` is.
  * @csspart line - The line's path.
  * @csspart live - A polite region that says the reading a key moved to, rendered only with a `label`. Hide it visually.
+ * @csspart lone - The mark on a reading no line reaches, with a blank or an end on each side. Placed as `cursor` is.
  * @csspart low - The mark on the lowest reading, under `marks="low"`. Placed as `cursor` is.
+ * @csspart overview - What the readings come to, in `overview-label`, which describes the drawing. Rendered `hidden` with a name, since it is read through the description and not shown.
+ * @csspart range - The band between the two values of `range`, drawn behind the line.
  * @csspart readout - The reading a pointer or a key rests on, as the table or `values` writes it, rendered only while there is one. Placed as `cursor` is.
  * @csspart svg - The drawing, which takes focus to be read by key where there is a `label`.
  * @csspart terminus - The mark on the last value.
@@ -120,6 +129,15 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      * placed at its reading, for a stylesheet to draw.
      */
     marks: string;
+    /**
+     * What the readings come to, said after the name: `{first}` and `{last}`
+     * for the first and the last reading, `{high}` and `{low}` for the highest
+     * and the lowest, each written as the readout writes it.
+     *
+     * Set it to the words of the page's language, or to nothing to say no
+     * more than the name. Said only where the sparkline is named.
+     */
+    overviewLabel: string;
     /**
      * What the readings are drawn as.
      *
@@ -159,6 +177,14 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      * {count}`, or to nothing to say no position.
      */
     positionLabel: string;
+    /**
+     * Two values a band is drawn between, behind the line, separated by a
+     * space: `range="60 100"` marks a normal range.
+     *
+     * The scale stretches to hold the band where the readings do not reach it.
+     * Absent draws none.
+     */
+    range: string;
     /**
      * The numbers, separated by whitespace or by commas.
      *
@@ -174,6 +200,17 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      * chart, so a sparkline is read the way they are.
      */
     readonly pointer: ChartPointerController;
+    /**
+     * Hears an `aria-label` written on the sparkline, which no property mirrors,
+     * because it names the drawing as `label` does, as on every chart.
+     */
+    static get observedAttributes(): string[];
+    /** Called by the browser when an observed attribute changes; a new `aria-label` renames the drawing. */
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /** The drawing's name: an `aria-label` written on the sparkline, then `label`. */
+    get named(): string;
+    /** The two values of `range`, lower first, or none. */
+    private get band();
     protected willUpdate(changed: PropertyValues<this>): void;
     /**
      * The series to draw, and how many readings it has room for: the table's
@@ -193,6 +230,12 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      */
     private reading;
     protected render(): TemplateResult;
+    /**
+     * A mark on each reading with a blank on either side, which no line can
+     * reach, so a line and an area show it as `LineChart` does. Not on a bar
+     * plot, whose column already shows it.
+     */
+    protected renderLone(series: Series | undefined, at: (index: number, value: number) => string): TemplateResult | typeof nothing;
     /** The marks `marks` asks for, on the highest and the lowest reading. */
     protected renderMarks(slots: (number | undefined)[], at: (index: number, value: number) => string): TemplateResult | typeof nothing;
     /**

package/dist/sparkline/root/sparkline-root.js

@@ -4,10 +4,10 @@ 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, ChartPointerController, customElement, extent, formatNumbers, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, unbroken, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, ChartPointerController, customElement, extent, extremesOf, formatNumbers, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, unbroken, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-import { extremesOf, readingWords } from '../readings.js';
+import { areaPath, overviewWords, readingWords, slotsOf } from '../readings.js';
 const STRIP_HEIGHT = 32;
 let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
     constructor() {
@@ -16,11 +16,31 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         this.label = '';
         this.locale = '';
         this.marks = '';
+        this.overviewLabel = 'From {first} to {last}, highest {high}, lowest {low}';
         this.positionLabel = '{position} of {count}';
+        this.range = '';
         this.values = '';
         this.source = new SourceController(this);
         this.pointer = new ChartPointerController(this);
     }
+    static get observedAttributes() {
+        return [...super.observedAttributes, 'aria-label'];
+    }
+    attributeChangedCallback(name, old, value) {
+        super.attributeChangedCallback(name, old, value);
+        if (name === 'aria-label') {
+            this.requestUpdate();
+        }
+    }
+    get named() {
+        return this.getAttribute?.('aria-label') || this.label;
+    }
+    get band() {
+        const [one, two] = writtenNumbers(this.range);
+        return one === undefined || two === undefined
+            ? undefined
+            : [Math.min(one, two), Math.max(one, two)];
+    }
     willUpdate(changed) {
         if (changed.has('for')) {
             this.source.watch();
@@ -54,15 +74,11 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
     }
     render() {
         const { count, series } = this.drawn();
-        const slots = Array.from({ length: count }, () => undefined);
-        for (const point of series.points) {
-            if (point.at >= 0 && point.at < count) {
-                slots[point.at] = point.value;
-            }
-        }
+        const slots = slotsOf(series.points, count);
         const points = slots.filter((value) => value !== undefined);
+        const band = this.band;
         const x = linear([0, Math.max(count - 1, 1)], [0, PLOT_WIDTH]);
-        const [low, high] = extent(points.length > 0 ? points : [0]);
+        const [low, high] = extent(points.length > 0 ? [...points, ...(band ?? [])] : [0]);
         const y = this.plot === 'bar'
             ? linear([Math.min(0, low), Math.max(0, high)], [STRIP_HEIGHT, 0])
             : linear([low, high], [STRIP_HEIGHT, 0]);
@@ -73,15 +89,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
                 .map((run) => ({ path: linePath(run, this.curve ?? 'smooth'), run }))
                 .filter((one) => one.path !== '');
         const path = runs.map((one) => one.path).join('');
-        const area = this.plot !== 'bar' && this.plot !== 'line' && path !== ''
-            ? runs
-                .map((one) => {
-                const first = one.run[0];
-                const last = one.run.at(-1);
-                return `${one.path}L${last[0]},${STRIP_HEIGHT}L${first[0]},${STRIP_HEIGHT}Z`;
-            })
-                .join('')
-            : '';
+        const area = this.plot !== 'bar' && this.plot !== 'line' && path !== '' ? areaPath(runs, STRIP_HEIGHT) : '';
         const slot = PLOT_WIDTH / Math.max(count, 1);
         const floor = y(0);
         const bars = this.plot === 'bar'
@@ -104,10 +112,15 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
             const across = this.plot === 'bar' ? index * slot + slot / 2 : x(index);
             return `inset-inline-start: ${(across / PLOT_WIDTH) * 100}%; inset-block-start: ${(y(value) / STRIP_HEIGHT) * 100}%`;
         };
-        const named = this.label !== '';
+        const name = this.named;
+        const named = name !== '';
+        const overview = named
+            ? overviewWords(this.overviewLabel, slots, (index) => this.reading(index, slots[index]).text)
+            : '';
         return html `<svg
+        aria-describedby=${overview === '' ? nothing : 'sparkline-overview'}
         aria-hidden=${named ? nothing : 'true'}
-        aria-label=${named ? this.label : nothing}
+        aria-label=${named ? name : nothing}
         data-mirror
         id=${CHART_PLOT}
         part="svg"
@@ -123,6 +136,15 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
               <stop offset="1" part="wash-end" />
             </linearGradient>
           </defs>`}
+        ${band === undefined
+            ? nothing
+            : svg `<rect
+                height=${Math.abs(y(band[0]) - y(band[1]))}
+                part="range"
+                width=${PLOT_WIDTH}
+                x="0"
+                y=${Math.min(y(band[0]), y(band[1]))}
+              />`}
         ${path === '' ? nothing : svg `<path d=${path} part="line" />`}
         ${area === '' ? nothing : svg `<path d=${area} part="area" />`}
         ${bars.map((bar) => svg `<rect
@@ -135,7 +157,18 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
       </svg>
       ${points.length < 2 || this.plot === 'bar'
             ? nothing
-            : html `<span aria-hidden="true" part="terminus" style=${end ?? nothing}></span>`}${this.renderMarks(slots, at)}${this.renderReading(slots, at)}${named && count > 0 ? this.renderLive(slots) : nothing}`;
+            : html `<span aria-hidden="true" part="terminus" style=${end ?? nothing}></span>`}${this.renderLone(points.length < 2 ? undefined : series, at)}${this.renderMarks(slots, at)}${this.renderReading(slots, at)}${named && count > 0 ? this.renderLive(slots) : nothing}${overview === ''
+            ? nothing
+            : html `<span hidden id="sparkline-overview" part="overview">${overview}</span>`}`;
+    }
+    renderLone(series, at) {
+        if (!series || this.plot === 'bar') {
+            return nothing;
+        }
+        const alone = unbroken(series).filter((run) => run.length === 1);
+        return alone.length === 0
+            ? nothing
+            : html `${alone.map(([point]) => html `<span aria-hidden="true" part="lone" style=${at(point?.at ?? 0, point?.value ?? 0)}></span>`)}`;
     }
     renderMarks(slots, at) {
         const asked = writtenList(this.marks);
@@ -184,12 +217,18 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessSparkline.prototype, "marks", void 0);
+__decorate([
+    property({ attribute: 'overview-label' })
+], HelixHeadlessSparkline.prototype, "overviewLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSparkline.prototype, "plot", void 0);
 __decorate([
     property({ attribute: 'position-label' })
 ], HelixHeadlessSparkline.prototype, "positionLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessSparkline.prototype, "range", void 0);
 __decorate([
     property()
 ], HelixHeadlessSparkline.prototype, "values", void 0);

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

@@ -0,0 +1,48 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary A named set of actions inside a speed dial, set apart from the rest.
+ *
+ * @description
+ * A `group` of the dial's menu, named by its label, as React Aria's menu
+ * sections and Menu's groups are: a reader hears the name on entering the set,
+ * and the arrow keys walk through every group's actions in order, from the
+ * last action of one group to the first of the next.
+ *
+ * Put actions straight into the group, and the group straight into the dial.
+ * Anything else slotted here is drawn and is not an action.
+ *
+ * @since 0.141.0
+ * @status stable
+ * @category actions
+ * @aliases Speed dial section, Action group
+ * @documentation https://fusion.dev/helix/components/speed-dial
+ *
+ * @slot - The group's actions.
+ * @slot label - The group's name, for content richer than the `label` text.
+ *
+ * @csspart group - The set, which carries the `group` role.
+ * @csspart label - The group's name, drawn above its actions while there is one.
+ */
+export declare class HelixHeadlessSpeedDialGroup extends HelixElement {
+    /**
+     * The group's name, drawn above its actions and read by screen readers.
+     */
+    label: string;
+    /**
+     * @internal Read by the dial to find the actions inside a group, which is
+     * cheaper than `instanceof` and is why this is public rather than protected.
+     * Not a consumer's to read or set.
+     */
+    readonly isSpeedDialGroup = true;
+    /** Whether anything is in the `label` slot, so the name is drawn from it. */
+    private labelSlotted;
+    private readonly readLabel;
+    protected firstUpdated(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-speed-dial-group': HelixHeadlessSpeedDialGroup;
+    }
+}

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

@@ -0,0 +1,43 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, slotFilled } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+let HelixHeadlessSpeedDialGroup = class HelixHeadlessSpeedDialGroup extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.isSpeedDialGroup = true;
+        this.labelSlotted = false;
+        this.readLabel = () => {
+            this.labelSlotted = slotFilled(this.renderRoot.querySelector('slot[name="label"]'));
+        };
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.readLabel();
+    }
+    render() {
+        const named = this.label !== '' || this.labelSlotted;
+        return html `<div part="group" role="group" aria-labelledby=${named ? 'label' : nothing}>
+      <span id="label" part="label" ?hidden=${!named}
+        ><slot name="label" @slotchange=${this.readLabel}>${this.label}</slot></span
+      >
+      <slot></slot>
+    </div>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessSpeedDialGroup.prototype, "label", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpeedDialGroup.prototype, "labelSlotted", void 0);
+HelixHeadlessSpeedDialGroup = __decorate([
+    customElement('helix-headless-speed-dial-group')
+], HelixHeadlessSpeedDialGroup);
+export { HelixHeadlessSpeedDialGroup };

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

@@ -1,2 +1,3 @@
+export * from './group/speed-dial-group.js';
 export * from './item/speed-dial-item.js';
 export * from './root/speed-dial-root.js';

package/dist/speed-dial/index.js

@@ -1,2 +1,3 @@
+export * from './group/speed-dial-group.js';
 export * from './item/speed-dial-item.js';
 export * from './root/speed-dial-root.js';

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One action in a speed dial: an icon and a name beside it.
  *
@@ -12,6 +12,13 @@ import { type TemplateResult } from 'lit';
  * `title` on an icon shows only on hover. Visible text is read, searched, and
  * translated like other text.
  *
+ * `shortcut` gives the action's keyboard shortcut as a chord, such as `mod+s`,
+ * the grammar Menu's rows use. The action carries it as `aria-keyshortcuts`
+ * and draws it after the name in the platform's glyphs or words, `⌘S` on an
+ * Apple keyboard and `Ctrl+S` elsewhere, as Menu draws its rows' shortcuts.
+ * Put a `Kbd` in the `shortcut` slot to draw it as keys instead; the dial
+ * imports no `Kbd` of its own. Showing a shortcut does not bind it.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
@@ -20,18 +27,26 @@ import { type TemplateResult } from 'lit';
  *
  * @slot - The action's name.
  * @slot icon - The action's icon, the main way the action is recognized.
+ * @slot shortcut - The action's keyboard shortcut, drawn after its name, such as a `Kbd`. It replaces the text drawn for `shortcut`, and is hidden from the name, which `aria-keyshortcuts` carries instead.
  *
  * @event {HelixSelectEvent} helix-select - The action was chosen. Cancelable: cancel it to keep the dial open.
  *
  * @csspart icon - The box that holds the icon.
  * @csspart item - The control for the action.
  * @csspart label - The action's name, beside the icon.
+ * @csspart shortcut - The box after the name that holds the shortcut, shown while `shortcut` is set or something is in the `shortcut` slot.
  */
 export declare class HelixHeadlessSpeedDialItem extends HelixElement {
     /**
      * Whether the action is disabled, so it cannot be chosen.
      */
     disabled: boolean;
+    /**
+     * The action's keyboard shortcut as a chord, such as `mod+s`, carried as
+     * `aria-keyshortcuts` and drawn after the name. `mod` is Command on an Apple
+     * keyboard and Control elsewhere. Showing a shortcut does not bind it.
+     */
+    shortcut: string;
     /**
      * The action's value, sent in `helix-select` when the action is chosen.
      */
@@ -43,7 +58,7 @@ export declare class HelixHeadlessSpeedDialItem extends HelixElement {
      */
     readonly isSpeedDialItem = true;
     /** Puts focus on the control inside the item. */
-    focus(): void;
+    focus(options?: FocusOptions): void;
     /**
      * Moves focus to the action. Part of `NavigableItem`, which the shared
      * keyboard controller uses for the arrow keys.
@@ -66,9 +81,19 @@ export declare class HelixHeadlessSpeedDialItem extends HelixElement {
      * chosen out of a set, and a speed dial's action is never chosen that way.
      */
     get selected(): boolean;
+    /** Whether anything is in the `shortcut` slot, so its box is drawn. */
+    private hasShortcut;
+    private readonly readShortcut;
     private choose;
     private readonly handleClick;
     protected render(): TemplateResult;
+    /**
+     * The `shortcut` slot, holding the shortcut drawn after the name as Kbd
+     * draws a chord and from the same table: the slot's fallback, so a `Kbd`
+     * slotted in replaces it.
+     */
+    protected renderShortcut(): TemplateResult;
+    protected firstUpdated(changed: PropertyValues): void;
 }
 declare global {
     interface HTMLElementTagNameMap {