@fusion.dev/helix-headless 0.147.0 → 0.149.0

package/dist/select/root/select-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, afterLinkFollowed, customElement, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, reportValues, typesCharacter, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, customElement, drawAutofill, drawStatus, HelixFormElement, hostAria, hostWords, isRtl, MixinControllerOpen, MixinControllerValue, MixinField, onApple, PopoverController, reportValues, StatusController, typesCharacter, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -23,6 +23,8 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             },
             target: () => this.partNamed('trigger'),
         });
+        this.status = new StatusController(this);
+        this.autocomplete = '';
         this.emptyText = 'No matches';
         this.filterable = false;
         this.focusable = true;
@@ -32,6 +34,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.multiple = false;
         this.placeholder = 'Choose';
         this.position = 'floating';
+        this.valueMissingMessage = 'Choose one to continue.';
         this.panel = new PopoverController(this, {
             anchor: () => this.partNamed('trigger'),
             boundary: () => [
@@ -114,7 +117,17 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
                     this.requestOpen(true);
                 }
                 else {
-                    this.requestValue(match);
+                    this.choose(match);
+                }
+                return;
+            }
+            const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+            if (step !== 0 && !this.multiple && !(event.altKey || event.ctrlKey || event.metaKey)) {
+                event.preventDefault();
+                const reachable = listbox?.options.filter((option) => !option.hidden && !option.disabled) ?? [];
+                const next = reachable[Math.max(0, reachable.findIndex((one) => one.value === this.value) + step)];
+                if (next) {
+                    this.choose(next.value);
                 }
                 return;
             }
@@ -138,6 +151,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
             }
         };
     }
+    static { this.words = 'helix-select'; }
     get selectedIndex() {
         return this.listbox?.selectedIndex ?? -1;
     }
@@ -151,12 +165,11 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         return this.partNamed('listbox');
     }
     get display() {
-        const chosen = new Set(this.value === '' ? [] : this.value.split(','));
         const words = this.chosenOptions.map((option) => option.text);
         if (words.length > 0) {
-            return new Intl.ListFormat(this.lang || undefined, { style: 'short', type: 'unit' }).format(words);
+            return new Intl.ListFormat(wordsLocale(this), { style: 'short', type: 'unit' }).format(words);
         }
-        return chosen.size > 0 && !this.childrenKnown ? nothing : this.placeholder;
+        return this.value !== '' && !this.childrenKnown ? nothing : this.placeholder;
     }
     get chosenOptions() {
         const chosen = new Set(this.value === '' ? [] : this.value.split(','));
@@ -207,6 +220,11 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         this.requestOpen(false);
         this.partNamed('trigger')?.focus();
     }
+    choose(value) {
+        if (this.requestValue(value) && onApple()) {
+            this.status.say(String(this.display));
+        }
+    }
     reconcileOptions() {
         const options = optionsAmong(this.knownChildren);
         if (this.defaultValue === '' && !this.hasAttribute('default-value')) {
@@ -232,7 +250,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         else {
             this.internals.setFormValue(this.value === '' ? null : this.value);
         }
-        this.reportRequired(this.value === '', 'Choose one to continue.', 'trigger');
+        this.reportRequired(this.value === '', this.valueMissingMessage, 'trigger');
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -283,12 +301,11 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       manual
       aria-label=${this.listName || this.listLabel || nothing}
       @keydown=${this.handleListKeydown}
+      .chosenAgain=${() => this.close()}
       @helix-before-change=${this.handleChange}
       @change=${this.stopInner}
       @input=${this.stopInner}
     >
-      <!-- An option arriving or leaving changes no property, so this is what
-           schedules the update that rereads the trigger's words. -->
       <slot @slotchange=${() => this.requestUpdate()}></slot>
     </${this.tag('listbox')}>`;
     }
@@ -327,19 +344,29 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
       >
         <slot name="start"></slot>
         <span part="value" id="value">${this.renderValue()}</span>
-        ${''}
         <slot name="end"></slot>
-        ${''}
         ${this.renderIndicator()}
       </button>
 
       <div part="surface" popover="manual" ?hidden=${!this.open}>
         ${this.renderListbox()}
       </div>
-      ${this.renderHint()}${this.renderFeedback()}`;
+      ${this.renderHint()}${this.renderFeedback()}${drawStatus(this.status)}
+      ${drawAutofill({
+            autocomplete: this.autocomplete,
+            disabled: this.isDisabled,
+            multiple: this.multiple,
+            onFill: (value) => this.requestValue(value),
+            options: optionsAmong(this.knownChildren),
+            value: this.value,
+        })}`;
     }
 };
 __decorate([
+    property()
+], HelixHeadlessSelect.prototype, "autocomplete", void 0);
+__decorate([
+    words,
     property({ attribute: 'empty-text' })
 ], HelixHeadlessSelect.prototype, "emptyText", void 0);
 __decorate([
@@ -349,18 +376,21 @@ __decorate([
     property({ attribute: false })
 ], HelixHeadlessSelect.prototype, "focusable", void 0);
 __decorate([
+    words,
     property({ attribute: 'list-label' })
 ], HelixHeadlessSelect.prototype, "listLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSelect.prototype, "loading", void 0);
 __decorate([
+    words,
     property({ attribute: 'loading-text' })
 ], HelixHeadlessSelect.prototype, "loadingText", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSelect.prototype, "multiple", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessSelect.prototype, "placeholder", void 0);
 __decorate([
@@ -369,6 +399,10 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessSelect.prototype, "valueContent", void 0);
+__decorate([
+    words,
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessSelect.prototype, "valueMissingMessage", void 0);
 HelixHeadlessSelect = __decorate([
     customElement('helix-headless-select')
 ], HelixHeadlessSelect);

package/dist/skip-link/root/skip-link-root.d.ts

@@ -35,6 +35,11 @@ import { type TemplateResult } from 'lit';
  * @csspart link - The anchor. It takes the focus.
  */
 export declare class HelixHeadlessSkipLink extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-skip-link': { label: 'Zum Inhalt springen' } })`.
+     */
+    static words: string;
     /** Focus goes to the anchor inside, so the host is never the focus target. */
     static shadowRootOptions: ShadowRootInit;
     /**

package/dist/skip-link/root/skip-link-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 { customElement, elementById, HelixElement, plainClick, reportRuntime, } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixElement, plainClick, reportRuntime, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
@@ -32,6 +32,7 @@ let HelixHeadlessSkipLink = class HelixHeadlessSkipLink extends HelixElement {
         };
         this.missed = '';
     }
+    static { this.words = 'helix-skip-link'; }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
         delegatesFocus: true,
@@ -62,6 +63,7 @@ __decorate([
     property()
 ], HelixHeadlessSkipLink.prototype, "href", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessSkipLink.prototype, "label", void 0);
 HelixHeadlessSkipLink = __decorate([

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

@@ -89,6 +89,11 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * @cssstate invalid - The slider has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-slider': { rangeText: '{start} bis {end}' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
@@ -109,8 +114,8 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      */
     formatter?: (value: number) => string;
     /**
-     * The locale `format-options` writes the value in, such as `de-DE`. Empty is
-     * the reader's own.
+     * The locale the value and the words are written in, such as `de-DE`. Empty
+     * reads the nearest `lang`, then the browser's language.
      */
     locale: string;
     /**

package/dist/slider/root/slider-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, fillTemplate, formatNumber, HelixFormElement, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, formatNumber, formatWords, HelixFormElement, MixinControllerValue, MixinField, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue(MixinField(HelixFormElement)) {
@@ -51,10 +51,11 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         };
         this.valueText = '';
     }
+    static { this.words = 'helix-slider'; }
     get reserve() {
         const widest = Math.max(this.said(this.min).length, this.said(this.max).length);
         return this.range
-            ? widest * 2 + fillTemplate(this.rangeText, { end: '', start: '' }).length
+            ? widest * 2 + formatWords(this, 'rangeText', { end: '', start: '' }).length
             : widest;
     }
     get precision() {
@@ -170,11 +171,13 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         if (this.formatter) {
             return this.formatter(number);
         }
-        return this.formatOptions ? formatNumber(number, this.locale, this.formatOptions) : String(at);
+        return this.formatOptions
+            ? formatNumber(number, wordsLocale(this), this.formatOptions)
+            : String(at);
     }
     spoken(at) {
         if (this.valueText) {
-            return fillTemplate(this.valueText, { value: this.said(at) });
+            return formatWords(this, 'valueText', { value: this.said(at) });
         }
         return this.formats ? this.said(at) : nothing;
     }
@@ -273,7 +276,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               aria-hidden="true"
               style=${`--_slider-output-reserve: ${this.reserve}ch`}
               >${this.range
-                ? fillTemplate(this.rangeText, { end: this.said(end), start: this.said(start) })
+                ? formatWords(this, 'rangeText', { end: this.said(end), start: this.said(start) })
                 : this.said(this.value)}</output
             >`
             : nothing}
@@ -300,12 +303,14 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "max", void 0);
 __decorate([
+    words,
     property({ attribute: 'maximum-label' })
 ], HelixHeadlessSlider.prototype, "maximumLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSlider.prototype, "min", void 0);
 __decorate([
+    words,
     property({ attribute: 'minimum-label' })
 ], HelixHeadlessSlider.prototype, "minimumLabel", void 0);
 __decorate([
@@ -321,6 +326,7 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSlider.prototype, "range", void 0);
 __decorate([
+    words,
     property({ attribute: 'range-text' })
 ], HelixHeadlessSlider.prototype, "rangeText", void 0);
 __decorate([

package/dist/sparkline/readings.d.ts

@@ -27,10 +27,20 @@ export interface Run {
  * first. Empty where there are no runs.
  */
 export declare const areaPath: (runs: readonly Run[], floor: number) => string;
+/** The readings an overview names, each as the readout writes it. */
+export interface Overview {
+    /** The first reading. */
+    first: string;
+    /** The highest reading. */
+    high: string;
+    /** The last reading. */
+    last: string;
+    /** The lowest reading. */
+    low: 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.
+ * What the readings come to, as `say` puts it: the first and the last
+ * reading, and 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;
+export declare const overviewWords: (say: (overview: Overview) => string, slots: readonly (number | undefined)[], write: (at: number) => string) => string;

package/dist/sparkline/readings.js

@@ -1,4 +1,4 @@
-import { extremesOf, fillTemplate } from '@fusion.dev/helix-core';
+import { extremesOf } from '@fusion.dev/helix-core';
 export const readingWords = (label, text, position) => {
     const named = label === '' ? text : text === '' ? label : `${label}: ${text}`;
     return position === '' ? named : `${named} (${position})`;
@@ -19,7 +19,7 @@ export const areaPath = (runs, floor) => runs
     return `${one.path}L${last[0]},${floor}L${first[0]},${floor}Z`;
 })
     .join('');
-export const overviewWords = (template, slots, write) => {
+export const overviewWords = (say, slots, write) => {
     const placed = slots.flatMap((value, at) => (value === undefined ? [] : [at]));
     const first = placed[0];
     const last = placed.at(-1);
@@ -27,7 +27,7 @@ export const overviewWords = (template, slots, write) => {
     if (placed.length < 2 || first === undefined || last === undefined) {
         return '';
     }
-    return fillTemplate(template, {
+    return say({
         first: write(first),
         high: write(high),
         last: write(last),

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

@@ -64,6 +64,11 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @cssproperty --chart-terminus-y - Where the last point sits vertically, as a percentage.
  */
 export declare class HelixHeadlessSparkline extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-sparkline': { positionLabel: '{position} von {count}' } })`.
+     */
+    static words: string;
     /**
      * How the line is drawn from one reading to the next.
      *
@@ -114,11 +119,11 @@ export declare class HelixHeadlessSparkline extends HelixElement {
      */
     label: string;
     /**
-     * The locale the readout's numbers and positions are written in, such as
-     * `de` for `1.240`.
+     * The locale the words, the readout's numbers and positions are in, such
+     * as `de` for `1.240`.
      *
-     * Absent uses the runtime's own. A table's cells are shown as the table
-     * writes them, whatever this says.
+     * Absent reads the nearest `lang`, then the runtime's own. A table's cells
+     * are shown as the table writes them, whatever this says.
      */
     locale: string;
     /**

package/dist/sparkline/root/sparkline-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 { CHART_PLOT, ChartPointerController, customElement, extent, extremesOf, formatNumbers, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, unbroken, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, ChartPointerController, customElement, extent, extremesOf, formatNumbers, formatWords, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, unbroken, words, wordsLocale, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import { areaPath, overviewWords, readingWords, slotsOf } from '../readings.js';
@@ -23,6 +23,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         this.source = new SourceController(this);
         this.pointer = new ChartPointerController(this);
     }
+    static { this.words = 'helix-sparkline'; }
     static get observedAttributes() {
         return [...super.observedAttributes, 'aria-label'];
     }
@@ -67,7 +68,10 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         const rows = this.source.rows;
         const row = rows[at];
         if (!row) {
-            return { label: '', text: value === undefined ? '' : formatNumbers(this.locale)(value) };
+            return {
+                label: '',
+                text: value === undefined ? '' : formatNumbers(wordsLocale(this))(value),
+            };
         }
         const column = row.cells.findIndex((_, index) => rows.some((one) => one.cells[index]?.value !== undefined));
         return { label: row.label, text: row.cells[column]?.text ?? '' };
@@ -115,7 +119,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         const name = this.named;
         const named = name !== '';
         const overview = named
-            ? overviewWords(this.overviewLabel, slots, (index) => this.reading(index, slots[index]).text)
+            ? overviewWords((values) => formatWords(this, 'overviewLabel', { ...values }), slots, (index) => this.reading(index, slots[index]).text)
             : '';
         return html `<svg
         aria-describedby=${overview === '' ? nothing : 'sparkline-overview'}
@@ -218,12 +222,14 @@ __decorate([
     property()
 ], HelixHeadlessSparkline.prototype, "marks", void 0);
 __decorate([
+    words,
     property({ attribute: 'overview-label' })
 ], HelixHeadlessSparkline.prototype, "overviewLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSparkline.prototype, "plot", void 0);
 __decorate([
+    words,
     property({ attribute: 'position-label' })
 ], HelixHeadlessSparkline.prototype, "positionLabel", void 0);
 __decorate([

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.
      */
@@ -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 {