@fusion.dev/helix-headless 0.148.0 → 0.149.0

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

@@ -77,6 +77,11 @@ declare const HelixHeadlessAnnouncement_base: (new (...args: any[]) => import("@
  * @cssstate waiting - The announcement is `queued` behind another, and renders nothing until that one is removed.
  */
 export declare class HelixHeadlessAnnouncement extends HelixHeadlessAnnouncement_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-announcement': { label: 'Mitteilung' } })`.
+     */
+    static words: string;
     /**
      * How long the announcement stays, in milliseconds, before it sends
      * `helix-dismiss`. When it is not set, it stays until it is dismissed.

package/dist/announcement/root/announcement-root.js

@@ -5,12 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessAnnouncement_1;
-import { ArrivalController, ariaChord, CountdownController, customElement, deepActiveElement, FocusScopeController, HelixElement, hostAria, MixinDismissible, markRegion, matchesChord, onApple, reportRuntime, slottedWords, } from '@fusion.dev/helix-core';
+import { ArrivalController, ariaChord, CountdownController, customElement, deepActiveElement, FocusScopeController, HelixElement, hostAria, MixinDismissible, markRegion, matchesChord, onApple, reportRuntime, slottedWords, words, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-let HelixHeadlessAnnouncement = HelixHeadlessAnnouncement_1 = class HelixHeadlessAnnouncement extends MixinDismissible(HelixElement) {
+let HelixHeadlessAnnouncement = class HelixHeadlessAnnouncement extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
         this.hotkey = 'F6';
@@ -75,6 +75,8 @@ let HelixHeadlessAnnouncement = HelixHeadlessAnnouncement_1 = class HelixHeadles
             this.countdown.release();
         };
     }
+    static { HelixHeadlessAnnouncement_1 = this; }
+    static { this.words = 'helix-announcement'; }
     behind() {
         if (!this.queued || (this.shadowRoot !== null && !this.hasUpdated)) {
             return false;
@@ -207,6 +209,7 @@ __decorate([
     property()
 ], HelixHeadlessAnnouncement.prototype, "hotkey", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessAnnouncement.prototype, "label", void 0);
 __decorate([

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

@@ -101,6 +101,11 @@ declare const HelixHeadlessAreaChart_base: typeof HelixElement & (new (...args:
  * @csspart tooltip-value - A column's value inside the tooltip.
  */
 export declare class HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-area-chart': { totalLabel: 'Summe' } })`.
+     */
+    static words: string;
     /**
      * How a band's edge gets from one reading to the next.
      *
@@ -146,6 +151,12 @@ export declare class HelixHeadlessAreaChart extends HelixHeadlessAreaChart_base
      * fills the height and the bands are shares of it.
      */
     share: boolean;
+    /**
+     * The summary's sentence. `{reading}` is the latest reading's name,
+     * `{totalLabel}` the name for the sum, `{total}` the sum, written in the
+     * locale, and `{shares}` each part's share, listed as the locale lists.
+     */
+    summaryLabel: string;
     /**
      * The name for the sum of the parts, shown in the tooltip and the summary.
      */

package/dist/area-chart/root/area-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 { CHART_PLOT, customElement, drawTooltip, formatNumbers, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, reportRuntime, seriesIndex, ticks, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, formatNumbers, formatWords, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, reportRuntime, seriesIndex, ticks, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -25,9 +25,11 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
         super(...arguments);
         this.overlap = false;
         this.share = false;
+        this.summaryLabel = '{reading}: {totalLabel} {total}; {shares}.';
         this.totalLabel = 'Total';
         this.warnedAboutNegatives = false;
     }
+    static { this.words = 'helix-area-chart'; }
     get rulesValue() {
         return this.gridlines !== undefined && this.gridlines !== 'category';
     }
@@ -179,18 +181,24 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
     renderSummary(stack, rows) {
         const last = rows.length - 1;
         const total = stack.totals[last] ?? 0;
-        const format = formatNumbers(this.locale);
+        const locale = wordsLocale(this);
         const shares = stack.names.flatMap((name, depth) => this.showsSeries(name)
             ? [
-                `${name} ${percentIn(this.locale).format(total > 0 ? (stack.values[depth]?.[last] ?? 0) / total : 0)}`,
+                `${name} ${percentIn(locale).format(total > 0 ? (stack.values[depth]?.[last] ?? 0) / total : 0)}`,
             ]
             : []);
         const named = this.named ? `${this.named}, ` : '';
-        const words = `${named}${rows[last]?.label ?? ''}: ${this.totalLabel} ${format(total)}; ${shares.join(', ')}.`;
-        return html `<p id="helix-chart-summary" part="summary">${words}</p>`;
+        const said = `${named}${formatWords(this, 'summaryLabel', {
+            reading: rows[last]?.label ?? '',
+            shares: new Intl.ListFormat(locale, { style: 'short', type: 'unit' }).format(shares),
+            total,
+            totalLabel: this.totalLabel,
+        })}`;
+        return html `<p id="helix-chart-summary" part="summary">${said}</p>`;
     }
     tallied(rows, stack) {
-        const format = formatNumbers(this.locale);
+        const locale = wordsLocale(this);
+        const format = formatNumbers(locale);
         return rows.map((row, index) => {
             const total = stack.totals[index] ?? 0;
             return {
@@ -199,7 +207,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
                     ...row.cells.map((cell, column) => this.share && cell.value !== undefined && stack.columns.includes(column) && total > 0
                         ? {
                             ...cell,
-                            text: `${cell.text} (${percentIn(this.locale).format(Math.max(0, cell.value) / total)})`,
+                            text: `${cell.text} (${percentIn(locale).format(Math.max(0, cell.value) / total)})`,
                         }
                         : cell),
                     { name: this.totalLabel, text: format(total) },
@@ -234,6 +242,11 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessAreaChart.prototype, "share", void 0);
 __decorate([
+    words,
+    property({ attribute: 'summary-label' })
+], HelixHeadlessAreaChart.prototype, "summaryLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'total-label' })
 ], HelixHeadlessAreaChart.prototype, "totalLabel", void 0);
 HelixHeadlessAreaChart = __decorate([

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

@@ -36,6 +36,11 @@ export declare const FOLDS_UP_TO = 12;
  * @csspart overflow - The count of avatars past `max`, an image named by `overflow-label`.
  */
 export declare class HelixHeadlessAvatarGroup extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-avatar-group': { overflowLabel: '…' } })`.
+     */
+    static words: string;
     /**
      * Accessible name for the set, such as "Reviewers".
      */
@@ -60,8 +65,11 @@ export declare class HelixHeadlessAvatarGroup extends HelixElement {
      */
     max?: number;
     /**
-     * What a screen reader is told the count is, with `{count}` for the number
-     * and `{names}` for the people it stands for, by each avatar's `name`.
+     * What a screen reader is told the count is, with `{count}` for the number,
+     * written in the locale, and `{names}` for the people it stands for, by each
+     * avatar's `name`, listed as the locale lists. A language that needs plural
+     * forms writes them: `{count, plural, one {# osoba więcej: {names}} few
+     * {# osoby więcej: {names}} other {# osób więcej: {names}}}`.
      *
      * The count shows "+3", which reads as "plus three" and says nothing about
      * what was counted, nor who.

package/dist/avatar/group/avatar-group.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, whenHydrated, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, hostAria, whenHydrated, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 export const FOLDS_UP_TO = 12;
@@ -12,9 +12,10 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
     constructor() {
         super(...arguments);
         this.label = '';
-        this.overflowLabel = '{count} more: {names}';
+        this.overflowLabel = '{count, plural, one {# more: {names}} other {# more: {names}}}';
         this.folded = new WeakSet();
     }
+    static { this.words = 'helix-avatar-group'; }
     get avatars() {
         return this.knownChildren.filter((child) => child instanceof HTMLElement);
     }
@@ -68,9 +69,12 @@ let HelixHeadlessAvatarGroup = class HelixHeadlessAvatarGroup extends HelixEleme
             ? html `<span
               part="overflow"
               role="img"
-              aria-label=${fillTemplate(this.overflowLabel, {
-                count: String(past),
-                names: this.foldedNames().join(', '),
+              aria-label=${formatWords(this, 'overflowLabel', {
+                count: past,
+                names: new Intl.ListFormat(wordsLocale(this), {
+                    style: 'short',
+                    type: 'unit',
+                }).format(this.foldedNames()),
             }).replace(/[\s:,]+$/, '')}
               >+${past}</span
             >`
@@ -84,6 +88,7 @@ __decorate([
     property({ reflect: true, type: Number })
 ], HelixHeadlessAvatarGroup.prototype, "max", void 0);
 __decorate([
+    words,
     property({ attribute: 'overflow-label' })
 ], HelixHeadlessAvatarGroup.prototype, "overflowLabel", void 0);
 HelixHeadlessAvatarGroup = __decorate([

package/dist/badge/count.d.ts

@@ -10,5 +10,10 @@ export declare const badgeText: (given: string, max: number | undefined, locale:
 /**
  * What a reader hears for the mark: `label` with `{count}` filled, or the text
  * alone, and nothing for a blank mark or an unnamed dot.
+ *
+ * `label` is a message, so it can hold plural forms: `{count, plural, one
+ * {{count} unread} other {{count} unread}}`. `{count}` is the text as the mark
+ * shows it, such as `99+`, and the form is picked by its number in `locale`'s
+ * rules, `other` where the text is no number.
  */
-export declare const badgeWords: (text: string, label: string, blank: boolean) => string;
+export declare const badgeWords: (text: string, label: string, blank: boolean, locale?: string) => string;

package/dist/badge/count.js

@@ -1,4 +1,4 @@
-import { fillTemplate, formatNumber } from '@fusion.dev/helix-core';
+import { formatMessage, formatNumber } from '@fusion.dev/helix-core';
 export const badgeBlank = (given) => given.trim() !== '' && Number(given) === 0;
 export const badgeCapped = (given, max) => {
     const count = Number(given);
@@ -12,9 +12,9 @@ export const badgeText = (given, max, locale, options) => {
     const count = Number(given);
     return options && given.trim() !== '' && Number.isFinite(count) ? write(count) : given;
 };
-export const badgeWords = (text, label, blank) => {
+export const badgeWords = (text, label, blank, locale = '') => {
     if (blank || (text === '' && label === '')) {
         return '';
     }
-    return fillTemplate(label, { count: text }) || text;
+    return formatMessage(label, { count: text }, locale) || text;
 };

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

@@ -64,12 +64,16 @@ export declare class HelixHeadlessBadge extends HelixElement {
      * Required for a dot, which has no text to read. `{count}` is replaced with
      * what the badge shows, so `label="{count} unread"` reads "8 unread" and
      * stays current as `value` changes, with no label of yours to keep in step.
+     * A language with plural forms writes them, `{count, plural, one {{count}
+     * nieprzeczytana} few {{count} nieprzeczytane} other {{count}
+     * nieprzeczytanych}}`, picked by the count in `locale`.
      */
     label: string;
     /**
-     * The locale a count is written in under `format-options`, such as `de`.
+     * The locale a count is written in under `format-options`, and whose plural
+     * rules `label` picks a form by, such as `de`.
      *
-     * Absent uses the runtime's own.
+     * Absent reads the nearest `lang`, then the runtime's own.
      */
     locale: string;
     /**

package/dist/badge/root/badge-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, focusTarget, 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';
@@ -28,10 +28,10 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
         return badgeCapped(this.given, this.max);
     }
     get text() {
-        return badgeText(this.given, this.max, this.locale, this.formatOptions);
+        return badgeText(this.given, this.max, wordsLocale(this), this.formatOptions);
     }
     get words() {
-        return badgeWords(this.text, this.label, this.blank);
+        return badgeWords(this.text, this.label, this.blank, wordsLocale(this));
     }
     wrapped() {
         const found = this.renderRoot

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/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/root/button-group-root.d.ts

@@ -118,6 +118,9 @@ export declare class HelixHeadlessButtonGroup extends HelixElement {
     /**
      * Whether the group holds the tab stop and the arrow keys: in a selection
      * mode, and not inside a toolbar, whose own keys walk the buttons.
+     *
+     * Truthiness, as `buttons` reads it: a removed attribute leaves the property
+     * null, which is no selection mode.
      */
     private get roving();
     /** Whether a button is pressed: its value is among the group's. */

package/dist/button-group/root/button-group-root.js

@@ -47,7 +47,7 @@ let HelixHeadlessButtonGroup = class HelixHeadlessButtonGroup extends HelixEleme
         return this.selectionMode && this.children ? [...this.children].filter(isGroupButton) : [];
     }
     get roving() {
-        return this.selectionMode !== undefined && toolbarAround(this) === null;
+        return Boolean(this.selectionMode) && toolbarAround(this) === null;
     }
     pressed(button) {
         return button.value !== '' && commaList(this.value).includes(button.value);
@@ -142,7 +142,7 @@ let HelixHeadlessButtonGroup = class HelixHeadlessButtonGroup extends HelixEleme
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        const toolbar = this.selectionMode !== undefined && toolbarAround(this) === null;
+        const toolbar = this.roving;
         hostAria(this.internals, { label: this.label, role: toolbar ? 'toolbar' : 'group' });
         this.internals.ariaOrientation = toolbar ? (this.orientation ?? null) : null;
     }

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

@@ -42,6 +42,11 @@ declare const HelixHeadlessCallout_base: (new (...args: any[]) => import("@fusio
  * @csspart icon-mark - The icon for the tone, shown when no icon is slotted.
  */
 export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-callout': { toneLabels: { danger: 'Fehler' } } })`.
+     */
+    static words: string;
     protected willUpdate(changed: PropertyValues): void;
     /**
      * What kind of attention the passage needs.
@@ -55,10 +60,19 @@ export declare class HelixHeadlessCallout extends HelixHeadlessCallout_base {
     /**
      * What a screen reader is told the tone is, such as "Fehler".
      *
-     * Absent is the English for the tone: "Error", "Information", "Note",
-     * "Success" or "Warning".
+     * Absent is the tone's words in `tone-labels`, "Error", "Information",
+     * "Note", "Success" or "Warning" in English.
      */
     toneLabel: string;
+    /**
+     * What a screen reader is told each tone is, by the tone's name, written as
+     * JSON in the attribute: `tone-labels='{"danger":"Fehler"}'`. A tone left
+     * out keeps its English, and `tone-label` wins over both.
+     *
+     * `danger` is said as "Error", the word a reader understands, and
+     * `neutral` as "Note", for what the passage is.
+     */
+    toneLabels: Partial<Record<'danger' | 'info' | 'neutral' | 'success' | 'warning', string>>;
     /**
      * The mark for the callout's tone, behind a seam.
      *

package/dist/callout/root/callout-root.js

@@ -4,16 +4,23 @@ 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, drawDismiss, drawDismissGlyph, HelixElement, hostAria, MixinDismissible, TONE_MARKS, toneMark, } from '@fusion.dev/helix-core';
+import { customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, MixinDismissible, TONE_MARKS, toneMark, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
-const NOTE = { icon: TONE_MARKS.info.icon, label: 'Note' };
 let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
         this.toneLabel = '';
+        this.toneLabels = {
+            danger: 'Error',
+            info: 'Information',
+            neutral: 'Note',
+            success: 'Success',
+            warning: 'Warning',
+        };
     }
+    static { this.words = 'helix-callout'; }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'note' });
@@ -31,8 +38,9 @@ let HelixHeadlessCallout = class HelixHeadlessCallout extends MixinDismissible(H
     </slot>`;
     }
     render() {
-        const { icon, label } = this.tone === 'neutral' ? NOTE : (toneMark(this.tone) ?? TONE_MARKS.info);
-        const named = this.toneLabel || label;
+        const tone = this.tone === 'neutral' ? 'neutral' : toneMark(this.tone) ? (this.tone ?? 'info') : 'info';
+        const { icon } = toneMark(tone) ?? TONE_MARKS.info;
+        const named = this.toneLabel || (this.toneLabels[tone] ?? '');
         return html `<span part="icon" role="img" aria-label=${named}>${this.renderIcon(icon, named)}</span>
       <div part="content">
         <slot name="heading"></slot>
@@ -52,6 +60,10 @@ __decorate([
 __decorate([
     property({ attribute: 'tone-label' })
 ], HelixHeadlessCallout.prototype, "toneLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'tone-labels', converter: wordsConverter })
+], HelixHeadlessCallout.prototype, "toneLabels", void 0);
 HelixHeadlessCallout = __decorate([
     customElement('helix-headless-callout')
 ], HelixHeadlessCallout);

package/dist/canvas/describe.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The words that describe a card or a connection, such as whether it is
+ * selected, what its tone means and where its connections go, as one list in
+ * the way `locale` writes one: "selected, Blocked" in English, "selected und
+ * Blocked" in German. An empty word is left out, and nothing at all is empty.
+ *
+ * **A narrow conjunction**, which English writes with commas alone, so the
+ * English reads as it did when the words were joined with a comma.
+ */
+export declare const descriptionOf: (locale: string, words: readonly (string | undefined)[]) => string;