@fusion.dev/helix-headless 0.147.0 → 0.149.0

package/dist/badge/root/badge-root.js

@@ -4,9 +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 { customElement, fillTemplate, formatNumber, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, focusTarget, HelixElement, wordsLocale } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { badgeBlank, badgeCapped, badgeText, badgeWords } from '../count.js';
 let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
     constructor() {
         super(...arguments);
@@ -21,28 +22,16 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
         return String(this.value ?? '');
     }
     get blank() {
-        return this.given.trim() !== '' && Number(this.given) === 0;
+        return badgeBlank(this.given);
     }
     get capped() {
-        const count = Number(this.given);
-        return this.max !== undefined && Number.isFinite(count) && count > this.max;
+        return badgeCapped(this.given, this.max);
     }
     get text() {
-        const write = (count) => this.formatOptions ? formatNumber(count, this.locale, this.formatOptions) : String(count);
-        if (this.capped) {
-            return `${write(this.max)}+`;
-        }
-        const count = Number(this.given);
-        return this.formatOptions && this.given.trim() !== '' && Number.isFinite(count)
-            ? write(count)
-            : this.given;
+        return badgeText(this.given, this.max, wordsLocale(this), this.formatOptions);
     }
     get words() {
-        const text = this.text;
-        if (this.blank || (text === '' && this.label === '')) {
-            return '';
-        }
-        return fillTemplate(this.label, { count: text }) || text;
+        return badgeWords(this.text, this.label, this.blank, wordsLocale(this));
     }
     wrapped() {
         const found = this.renderRoot
@@ -50,10 +39,7 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
             ?.assignedElements({ flatten: true })
             .find((element) => element instanceof HTMLElement &&
             (element.tabIndex >= 0 || element.shadowRoot?.delegatesFocus === true));
-        const inner = found?.shadowRoot?.delegatesFocus
-            ? found.shadowRoot.querySelector('a[href], button, input, select, textarea')
-            : null;
-        return inner ?? found;
+        return found && focusTarget(found);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -113,7 +99,7 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
         data-blank=${blank ? '' : nothing}
         data-single=${text.length <= 1 ? '' : nothing}
         role="status"
-        aria-label=${announced ? fillTemplate(this.label, { count: text }) || text : nothing}
+        aria-label=${announced ? this.words : nothing}
         >${blank ? html `<span aria-hidden="true">${text}</span>` : text}</span
       >`;
     }

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

@@ -78,6 +78,11 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  *   `wash="gradient"` is set.
  */
 export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-bar-chart': { highestLabel: 'Höchster Wert' } })`.
+     */
+    static words: string;
     /**
      * Which gridlines are drawn across the plot, if any.
      *
@@ -100,7 +105,8 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      */
     gridlines?: 'both' | 'category' | 'value';
     /**
-     * The word the summary puts before each series' highest reading.
+     * The name the summary gives each series' highest reading, `{highestLabel}`
+     * in `summary-label`.
      */
     highestLabel: string;
     /**
@@ -187,6 +193,12 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
      * second scale stack among themselves.
      */
     stacked: boolean;
+    /**
+     * The summary's sentence. `{highestLabel}` is `highest-label`, and
+     * `{readings}` each series' highest reading: the series, the category and
+     * the reading as the table writes it.
+     */
+    summaryLabel: string;
     /** The series names on the second scale, lowercased and trimmed. */
     private get scaled();
     /** The series names drawn as a line, lowercased and trimmed for matching. */

package/dist/bar-chart/root/bar-chart-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 { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, seriesNames, ticks, unbroken, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, seriesNames, ticks, unbroken, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import { stackEnds, stackedReadings, stackSpans } from '../stack.js';
@@ -14,7 +14,9 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         super(...arguments);
         this.highestLabel = 'Highest';
         this.stacked = false;
+        this.summaryLabel = '{highestLabel}: {readings}.';
     }
+    static { this.words = 'helix-bar-chart'; }
     get scaled() {
         return new Set(seriesNames(this.secondary));
     }
@@ -58,9 +60,10 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const [second, top] = extent(scaled.size > 0 ? on(own) : [0]);
         const other = [Math.min(0, second), Math.max(0, top)];
         const z = scaled.size > 0 ? linear(other, range) : undefined;
+        const format = formatNumbers(wordsLocale(this));
         const widest = z === undefined
             ? 0
-            : Math.max(...[...ticks(domain), ...ticks(other)].map((level) => formatNumbers(this.locale)(level).length));
+            : Math.max(...[...ticks(domain), ...ticks(other)].map((level) => format(level).length));
         const lone = series.filter(own);
         const tint = lone.length === 1 && lone[0] !== undefined
             ? `--bar-chart-secondary: var(--chart-series-${seriesIndex(series.indexOf(lone[0]))})`
@@ -79,7 +82,11 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             return [`${one.name} ${top.label} ${text}`];
         });
         const named = this.named ? `${this.named}. ` : '';
-        return html `<p id="helix-chart-summary" part="summary">${named}${this.highestLabel}: ${highest.join('; ')}.</p>`;
+        const said = formatWords(this, 'summaryLabel', {
+            highestLabel: this.highestLabel,
+            readings: highest.join('; '),
+        });
+        return html `<p id="helix-chart-summary" part="summary">${named}${said}</p>`;
     }
     renderPlot(series, categories, y, domain, floor, z) {
         const sideways = this.orientation === 'horizontal';
@@ -188,6 +195,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
     }
     renderAxis(scale, domain, which, sideways, widest, tint) {
         const sizing = sideways ? undefined : `--bar-chart-axis: ${widest}ch`;
+        const format = formatNumbers(wordsLocale(this));
         return html `<div
       aria-hidden="true"
       data-axis=${which}
@@ -197,7 +205,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
       ${ticks(domain).map((level) => html `<span
             part="tick"
             style=${sideways ? `inset-inline-start: ${scale(level)}%` : `inset-block-start: ${scale(level)}%`}
-            >${formatNumbers(this.locale)(level)}</span
+            >${format(level)}</span
           >`)}
     </div>`;
     }
@@ -282,6 +290,7 @@ __decorate([
     property()
 ], HelixHeadlessBarChart.prototype, "gridlines", void 0);
 __decorate([
+    words,
     property({ attribute: 'highest-label' })
 ], HelixHeadlessBarChart.prototype, "highestLabel", void 0);
 __decorate([
@@ -296,6 +305,10 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessBarChart.prototype, "stacked", void 0);
+__decorate([
+    words,
+    property({ attribute: 'summary-label' })
+], HelixHeadlessBarChart.prototype, "summaryLabel", void 0);
 HelixHeadlessBarChart = __decorate([
     customElement('helix-headless-bar-chart')
 ], HelixHeadlessBarChart);

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

@@ -1,16 +1,36 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary A passage set off from the prose around it.
  *
  * @description
- * Renders a `<figure>` holding the `<blockquote>` and a `<figcaption>` for the
+ * Renders a figure holding the `<blockquote>` and a caption for the
  * attribution, the structure the HTML spec describes. The attribution sits
  * outside the quotation because it is about the quotation, and it names the
  * figure, so a screen reader reads the source as the figure's caption.
  *
- * The figure keeps the browser's default margins on this tier. Set
- * `::part(figure) { margin: 0 }` where they are unwanted.
+ * **The figure is a `<div role="figure">`**, so the headless tier draws no
+ * space around the quotation. A `<figure>` takes a 40px indent and a line of
+ * space above and below from the browser's own sheet, which every page had to
+ * reset. The `<blockquote>` keeps its own margins, as a bare one does. A
+ * screen reader meets the same figure, named by its caption.
+ *
+ * **A figure only while there is an attribution.** With nothing in the caption
+ * the figure has no name and nothing to say, so the role and its name are
+ * dropped and a reader meets the quotation alone. A server cannot see what is
+ * slotted, so it serves the figure, and the client drops it after hydration;
+ * an `attribution` written as words is served exactly.
+ *
+ * **Quotation marks follow the language**, under `marks`. The opening mark is
+ * the one the browser sets for a `<q>` in the element's language, „ under
+ * `lang="de"` and « under `lang="fr"`, and a `Quote` inside the passage takes
+ * the inner marks. The mark is drawn, not read: a screen reader hears the
+ * passage. A passage under `marks` that starts with a mark typed into the text
+ * would show two, and warns once, with the runtime kind `typed-marks`.
+ *
+ * **`cite` is the source's URL**, which the browser keeps and does not show.
+ * Words in it, such as the author's name, warn once, with the runtime kind
+ * `cite-not-url`.
  *
  * For a quotation inside a sentence, use `Quote`.
  *
@@ -21,17 +41,37 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/blockquote
  *
  * @slot - The quoted passage.
- * @slot attribution - Who said it, and where.
+ * @slot attribution - Who said it, and where. Replaces the words of `attribution`.
  *
- * @csspart attribution - The `<figcaption>` carrying the source.
+ * @csspart attribution - The caption carrying the source.
  * @csspart blockquote - The quotation.
- * @csspart figure - The `<figure>` holding the quotation and its attribution.
+ * @csspart figure - The figure holding the quotation and its attribution, a `<div>` with `role="figure"` while the attribution has words.
  */
 export declare class HelixHeadlessBlockquote extends HelixElement {
+    static styles: CSSResultGroup;
     /**
-     * The URL of the source the passage came from.
+     * Who said it, and where, as words, such as "Maria Lopez, operations
+     * manager". The `attribution` slot replaces them, for markup such as a link.
+     *
+     * Words are served with the figure they name, where a server cannot see a
+     * slotted attribution.
+     */
+    attribution: string;
+    /**
+     * The URL of the source the passage came from. Who said it goes in
+     * `attribution`: a `cite` with words in it warns once, with the runtime kind
+     * `cite-not-url`.
      */
     cite: string;
+    /**
+     * Whether to draw an opening quotation mark before the passage, in the
+     * element's language. Leave the marks out of the text.
+     */
+    marks: boolean;
+    /** Whether this blockquote has said its passage starts with a typed mark, so it says so once. */
+    private warned;
+    /** Whether this blockquote has said its `cite` holds words, so it says so once. */
+    private citeWarned;
     /**
      * Says on the caption whether there is an attribution in it.
      *
@@ -44,8 +84,26 @@ export declare class HelixHeadlessBlockquote extends HelixElement {
      * rendered, which React reports on hydration.
      */
     private markEmpty;
+    /**
+     * Reads the passage for a mark typed at its start, which `marks` would
+     * double. Only the start: the mark drawn is an opening one.
+     */
+    private readonly readPassage;
+    /**
+     * Reads `cite` for words where the source's URL belongs, the common mistake
+     * of naming the author there. A URL holds no spaces, so words with a space
+     * between them are enough to tell.
+     */
+    private readCite;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * The caption, with the words of `attribution` as its slot's fallback,
+     * behind a seam a tier can move. The words are in an element, so the region
+     * counts them as its own.
+     */
+    protected renderAttribution(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/blockquote/root/blockquote-root.js

@@ -4,33 +4,110 @@ 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, markRegion } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
+import { customElement, HelixElement, markRegion, reportRuntime } from '@fusion.dev/helix-core';
+import { css, html, nothing, } from 'lit';
 import { property } from 'lit/decorators.js';
+import { typedMarks } from '../../quote/marks.js';
 let HelixHeadlessBlockquote = class HelixHeadlessBlockquote extends HelixElement {
     constructor() {
         super(...arguments);
+        this.attribution = '';
         this.cite = '';
+        this.marks = false;
+        this.warned = false;
+        this.citeWarned = false;
+        this.readPassage = () => {
+            if (!this.marks || this.warned) {
+                return;
+            }
+            const text = [...this.childNodes]
+                .filter((node) => !(node instanceof Element) || !node.slot)
+                .map((node) => node.textContent ?? '')
+                .join('')
+                .trim();
+            if (!typedMarks(text.charAt(0))) {
+                return;
+            }
+            this.warned = true;
+            reportRuntime({
+                kind: 'typed-marks',
+                message: `<${this.localName} marks> starts with a typed quotation mark, and the element draws its own, so the mark shows twice. Take the typed mark out.`,
+                tag: this.localName,
+            });
+        };
     }
+    static { this.styles = css `
+    :host([marks]) [part='blockquote']::before {
+      content: open-quote / '';
+    }
+
+    :host([marks]) [part='blockquote']::after {
+      content: no-close-quote;
+    }
+  `; }
     markEmpty() {
-        markRegion(this.renderRoot, 'attribution', ['attribution']);
+        markRegion(this.renderRoot, 'attribution', ['attribution'], {
+            occupied: 'slot[name="attribution"] > *',
+        });
+        const named = !this.partNamed('attribution')?.hasAttribute('data-empty');
+        const figure = this.partNamed('figure');
+        if (named) {
+            figure?.setAttribute('role', 'figure');
+            figure?.setAttribute('aria-labelledby', 'attribution');
+        }
+        else {
+            figure?.removeAttribute('role');
+            figure?.removeAttribute('aria-labelledby');
+        }
+    }
+    readCite() {
+        if (this.citeWarned || !/\S\s+\S/.test(this.cite || '')) {
+            return;
+        }
+        this.citeWarned = true;
+        reportRuntime({
+            kind: 'cite-not-url',
+            message: `<${this.localName} cite="${this.cite}"> holds words, and \`cite\` takes the URL of the source. Put who said it in \`attribution\`.`,
+            tag: this.localName,
+        });
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', this.readPassage);
     }
     updated(changed) {
         super.updated(changed);
         this.markEmpty();
+        if (changed.has('marks')) {
+            this.readPassage();
+        }
+        if (changed.has('cite')) {
+            this.readCite();
+        }
     }
     render() {
-        return html `<figure aria-labelledby="attribution" part="figure">
+        return html `<div aria-labelledby="attribution" part="figure" role="figure">
       <blockquote part="blockquote" cite=${this.cite || nothing}><slot></slot></blockquote>
-      <figcaption id="attribution" part="attribution"
-        ><slot name="attribution" @slotchange=${() => this.markEmpty()}></slot
-      ></figcaption>
-    </figure>`;
+      ${this.renderAttribution()}
+    </div>`;
+    }
+    renderAttribution() {
+        return html `<div id="attribution" part="attribution"
+      ><slot name="attribution" @slotchange=${() => this.markEmpty()}
+        >${this.attribution ? html `<span>${this.attribution}</span>` : nothing}</slot
+      ></div
+    >`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessBlockquote.prototype, "attribution", void 0);
 __decorate([
     property()
 ], HelixHeadlessBlockquote.prototype, "cite", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessBlockquote.prototype, "marks", void 0);
 HelixHeadlessBlockquote = __decorate([
     customElement('helix-headless-blockquote')
 ], HelixHeadlessBlockquote);

package/dist/breadcrumbs/breadcrumb/breadcrumb.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, HelixElement, hostAria, slotFilled } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, slotFilled, slotNamed, } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -29,7 +29,7 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
         this.markEnd();
     }
     markEnd() {
-        this.toggleState('end', slotFilled(this.renderRoot?.querySelector('slot[name="end"]')));
+        this.toggleState('end', slotFilled(slotNamed(this.renderRoot, 'end')));
     }
     renderSeparator() {
         return html `<slot name="separator"

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

@@ -60,9 +60,16 @@ export interface BreadcrumbItem {
  * @csspart list - The ordered list.
  */
 export declare class HelixHeadlessBreadcrumbs extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-breadcrumbs': { label: 'Brotkrümelpfad' } })`.
+     */
+    static words: string;
     /**
      * The name of the button that shows a folded trail's hidden crumbs. `{count}`
-     * is replaced by how many it shows. Translate it with the page.
+     * is how many it shows, written in the locale, and a language with plural
+     * forms writes them: `{count, plural, one {# weiteren zeigen} other {#
+     * weitere zeigen}}`.
      */
     expandLabel: string;
     /**

package/dist/breadcrumbs/root/breadcrumbs-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, fillTemplate, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, hostAria, words } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -25,6 +25,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             });
         };
     }
+    static { this.words = 'helix-breadcrumbs'; }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'navigation' });
@@ -55,7 +56,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             ><button
               part="expand"
               type="button"
-              aria-label=${fillTemplate(this.expandLabel, { count: String(folded) })}
+              aria-label=${formatWords(this, 'expandLabel', { count: folded })}
               @click=${this.expand}
             >
               …
@@ -81,12 +82,14 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
     }
 };
 __decorate([
+    words,
     property({ attribute: 'expand-label' })
 ], HelixHeadlessBreadcrumbs.prototype, "expandLabel", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessBreadcrumbs.prototype, "items", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessBreadcrumbs.prototype, "label", void 0);
 __decorate([

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

@@ -59,6 +59,11 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate pending - The button is pending: `pending` is set.
  */
 export declare class HelixHeadlessButton extends HelixFormElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-button': { pendingLabel: 'Wird geladen' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /**
      * @internal Whether a host `aria-label` names the inner button. A subclass
@@ -167,8 +172,12 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      * Lives here rather than only on `IconButton` so the two share one render.
      * An icon-only button without it is a control a screen reader announces as
      * "button" and nothing else.
+     *
+     * Undefaulted, so a subclass's own default, such as Copy Button's `Copy`, is
+     * the first value its element receives and so the English its words fall
+     * back to.
      */
-    label: string;
+    label?: string;
     /**
      * Whether the action the button started is still running.
      *

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, defaultButton, drawStatus, elementById, HelixFallbackCommandEvent, HelixFormElement, HelixPressEvent, pressType, StatusController, submitsOnEnter, supportsInvokers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, defaultButton, drawStatus, elementById, HelixFallbackCommandEvent, HelixFormElement, HelixPressEvent, pressType, StatusController, submitsOnEnter, supportsInvokers, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { submitAs } from '../submitter.js';
@@ -24,7 +24,6 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         this.formMethod = '';
         this.formNoValidate = false;
         this.formTarget = '';
-        this.label = '';
         this.pending = false;
         this.pendingLabel = 'Loading';
         this.status = new StatusController(this);
@@ -64,6 +63,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
             }
         };
     }
+    static { this.words = 'helix-button'; }
     get forwardsLabel() {
         return true;
     }
@@ -229,6 +229,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessButton.prototype, "pending", void 0);
 __decorate([
+    words,
     property({ attribute: 'pending-label' })
 ], HelixHeadlessButton.prototype, "pendingLabel", void 0);
 __decorate([

package/dist/button-group/arrows.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The index a key moves focus to, or `-1` for a key that moves nothing.
+ *
+ * Down and Up step forward and back, and Left and Right step by `step`, which
+ * core's `inlineStep` turns on a right-to-left page. Home and End go to the
+ * ends. A step wraps from the last button round to the first, as a toolbar's
+ * does.
+ *
+ * @param key The key pressed.
+ * @param step `1` or `-1` for Left and Right, from `inlineStep`, and `0` otherwise.
+ * @param from The index focus is on, or `-1` where it is on none of them.
+ * @param count How many buttons focus can move between.
+ */
+export declare const arrowTarget: (key: string, step: number, from: number, count: number) => number;

package/dist/button-group/arrows.js

@@ -0,0 +1,10 @@
+export const arrowTarget = (key, step, from, count) => {
+    const by = key === 'ArrowDown' ? 1 : key === 'ArrowUp' ? -1 : step;
+    if (from < 0 || count === 0) {
+        return -1;
+    }
+    if (key === 'Home' || key === 'End') {
+        return key === 'Home' ? 0 : count - 1;
+    }
+    return by === 0 ? -1 : (from + by + count) % count;
+};