@fusion.dev/helix-headless 0.147.0 → 0.149.0

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

@@ -148,8 +148,11 @@ export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionIt
     /**
      * Opens the section find in page has matched in, before the match is shown.
      *
-     * The browser removes `hidden` itself. A refusal puts it back, so the trigger
-     * and the region still agree.
+     * A refusal puts `hidden` back, so the trigger and the region still agree.
+     * The browser removes the attribute after this event's listeners have
+     * returned, and after the microtasks they queued, so writing it here or in a
+     * microtask is undone at once. A mutation observer hears the removal itself
+     * and runs before the next paint or key press.
      */
     private readonly handleBeforeMatch;
     /** Whether the item was open at the last update, and `undefined` before one. */

package/dist/accordion/item/accordion-item.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 { closestInstance, customElement, HelixElement, headingLevel, MixinControllerOpen, onUnlessFalse, } from '@fusion.dev/helix-core';
+import { animationsFinished, closestInstance, customElement, HelixElement, headingLevel, MixinControllerOpen, onUnlessFalse, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -23,8 +23,14 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
             if (this.open || this.requestOpen(true)) {
                 return;
             }
-            ;
-            event.currentTarget.setAttribute('hidden', 'until-found');
+            const content = event.currentTarget;
+            const observer = new MutationObserver(() => {
+                observer.disconnect();
+                if (!this.open && !this.closing && !content.hasAttribute('hidden')) {
+                    content.setAttribute('hidden', 'until-found');
+                }
+            });
+            observer.observe(content, { attributeFilter: ['hidden'] });
         };
         this.wasOpen = undefined;
         this.handleToggle = () => {
@@ -72,13 +78,11 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
         }
     }
     finishClosing() {
-        const running = this.partNamed('content')?.getAnimations?.({ subtree: true }) ?? [];
-        const done = () => {
+        void animationsFinished(this.partNamed('content')).then(() => {
             if (!this.open) {
                 this.closing = false;
             }
-        };
-        Promise.all(running.map((animation) => animation.finished)).then(done, done);
+        });
     }
     get accordion() {
         return closestInstance(this, HelixHeadlessAccordion);

package/dist/accordion/root/accordion-root.js

@@ -4,16 +4,14 @@ 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, KeyboardNavigationController, onUnlessFalse, whenHydrated, } from '@fusion.dev/helix-core';
+import { customElement, focusItemOf, HelixElement, KeyboardNavigationController, onUnlessFalse, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessAccordionItem } from '../item/accordion-item.js';
-const navigable = (item) => ({
-    contains: (node) => node === item,
+const navigable = (item) => focusItemOf(item, {
     disabled: item.disabled,
-    focusItem: () => item.focusTrigger(),
-    select: () => { },
-    selected: false,
+    focus: () => item.focusTrigger(),
+    owns: (node) => node === item,
 });
 let HelixHeadlessAccordion = class HelixHeadlessAccordion extends HelixElement {
     constructor() {

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

@@ -1,5 +1,5 @@
 import { ArrivalController, HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessAnnouncement_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
 /**
  * @summary A message for the whole page, shown above its header, that can be dismissed.
@@ -29,6 +29,23 @@ declare const HelixHeadlessAnnouncement_base: (new (...args: any[]) => import("@
  * announcement beside it, move focus yourself, for example to the page's main
  * heading.
  *
+ * **The announcement is a landmark region**, named by `label`, "Announcement"
+ * unless you set it, so a screen reader lists it among the page's regions.
+ * `hotkey`, F6 unless you set it, moves focus to the announcement's first
+ * control, an action or the dismiss button, and pressed there moves focus
+ * back to where it was, as React Aria's toast region does. An announcement
+ * with no control leaves the key to the browser. When an announcement that
+ * the key moved focus into is removed with focus still inside, focus goes
+ * back to where it was before the key.
+ *
+ * **Set `queued` to show several announcements one at a time.** A queued
+ * announcement waits while a queued announcement before it in the same parent
+ * is still there, and shows when that one is removed: its message is then
+ * read out, and its `duration` starts. While it waits it renders nothing,
+ * is no region, and carries `:state(waiting)`. A server cannot see the
+ * announcements beside it, so a served page shows every one until the script
+ * runs.
+ *
  * Set `duration` to dismiss it after a time. The clock stops while the pointer
  * or focus is on the announcement, and continues from what was left, so a
  * reader partway through is not cut off. It stops while the page is hidden too,
@@ -57,8 +74,14 @@ declare const HelixHeadlessAnnouncement_base: (new (...args: any[]) => import("@
  * @csspart live - A copy of the message in a live region, read by screen readers when the announcement appears after the page has loaded, and emptied seven seconds later. Visually hidden in the styled tier.
  *
  * @cssstate paused - The clock `duration` started is stopped, while the pointer or focus is on the announcement or the page is hidden.
+ * @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.
@@ -67,6 +90,28 @@ export declare class HelixHeadlessAnnouncement extends HelixHeadlessAnnouncement
      * own. The clock stops while the pointer or focus is on the announcement.
      */
     duration?: number;
+    /**
+     * The key that moves focus to the announcement's first control, and back
+     * to where it was, written as keys joined by `+`, such as `F6` or `Alt+A`.
+     *
+     * F6 by default, the key React Aria's regions answer to. Empty turns it
+     * off. With several announcements, the first one in the page takes focus.
+     */
+    hotkey: string;
+    /**
+     * The name of the announcement's region, which screen readers list among
+     * the page's landmarks. Translate it with the rest of your interface.
+     *
+     * Empty leaves the announcement no region.
+     */
+    label: string;
+    /**
+     * Whether the announcement waits its turn behind the queued announcements
+     * before it in the same parent, showing when the last of them is removed.
+     *
+     * Off by default, so every announcement on a page shows at once.
+     */
+    queued: boolean;
     /**
      * The band's color.
      *
@@ -90,18 +135,29 @@ export declare class HelixHeadlessAnnouncement extends HelixHeadlessAnnouncement
      * axes, which is the test the registry answers to.
      */
     tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
+    /** Whether a queued announcement before this one is still there. */
+    private waiting;
+    /** Watches the parent for the announcements before this one leaving. */
+    private queue;
+    /** Whether a queued announcement comes before this one in its parent. */
+    private behind;
     protected readonly arrival: ArrivalController;
     /** The time `duration` gives it, held while a reader is on it. */
     private readonly countdown;
-    /** Whether the page being hidden is one of the reasons the clock is held. */
-    private heldHidden;
-    private readonly handleVisibility;
+    private readonly scope;
+    /** Where focus was when `hotkey` moved it in. */
+    private origin;
+    /** Whether focus is inside the announcement, kept as it moves. */
+    private focused;
+    private readonly handleHotkey;
+    protected willUpdate(changed: PropertyValues): void;
     private readonly handleHold;
     private readonly handleRelease;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    private watchQueue;
     /**
      * Says on the `actions` region whether anything is in it.
      *
@@ -126,7 +182,7 @@ export declare class HelixHeadlessAnnouncement extends HelixHeadlessAnnouncement
      * draws a tone mark. An announcement has no tone mark at all.
      */
     protected renderDismissIcon(): TemplateResult;
-    protected render(): TemplateResult;
+    protected render(): TemplateResult | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -4,54 +4,111 @@ 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 { ArrivalController, CountdownController, customElement, HelixElement, MixinDismissible, markRegion, reportRuntime, slottedWords, } from '@fusion.dev/helix-core';
+var HelixHeadlessAnnouncement_1;
+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 } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessAnnouncement = class HelixHeadlessAnnouncement extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
+        this.hotkey = 'F6';
+        this.label = 'Announcement';
+        this.queued = false;
+        this.waiting = false;
         this.arrival = new ArrivalController(this, {
             arriving: () => !this.serverRendered && document.readyState === 'complete',
-            text: () => slottedWords(this, ['']),
+            text: () => (this.waiting ? '' : slottedWords(this, [''])),
         });
         this.countdown = new CountdownController(this, {
             done: () => {
                 this.dismiss();
             },
+            holdWhileHidden: true,
             paused: (paused) => {
                 this.toggleState('paused', paused);
             },
         });
-        this.heldHidden = false;
-        this.handleVisibility = () => {
-            if (document.hidden && !this.heldHidden) {
-                this.heldHidden = true;
-                this.countdown.hold();
+        this.scope = new FocusScopeController(this, {
+            contents: () => [
+                ...(this.renderRoot
+                    ?.querySelector('slot[name="actions"]')
+                    ?.assignedElements({ flatten: true }) ?? []),
+                ...[...(this.renderRoot?.querySelectorAll('[part="dismiss"]') ?? [])],
+            ],
+            surface: () => null,
+        });
+        this.focused = false;
+        this.handleHotkey = (event) => {
+            if (event.defaultPrevented || !matchesChord(event, this.hotkey, onApple())) {
+                return;
+            }
+            if (this.scope.holdsFocus) {
+                if (this.scope.leave()) {
+                    event.preventDefault();
+                }
+                this.origin = undefined;
+                return;
             }
-            else if (!document.hidden && this.heldHidden) {
-                this.heldHidden = false;
-                this.countdown.release();
+            const other = event
+                .composedPath()
+                .some((node) => node !== this && node instanceof HelixHeadlessAnnouncement_1);
+            if (other || this.scope.controls.length === 0) {
+                return;
             }
+            event.preventDefault();
+            const active = deepActiveElement();
+            this.origin = active instanceof HTMLElement ? active : undefined;
+            this.scope.enter();
         };
-        this.handleHold = () => {
+        this.handleHold = (event) => {
+            this.focused ||= event.type === 'focusin';
             this.countdown.hold();
         };
-        this.handleRelease = () => {
+        this.handleRelease = (event) => {
+            if (event.type === 'focusout') {
+                queueMicrotask(() => {
+                    this.focused = this.matches(':focus-within');
+                });
+            }
             this.countdown.release();
         };
     }
+    static { HelixHeadlessAnnouncement_1 = this; }
+    static { this.words = 'helix-announcement'; }
+    behind() {
+        if (!this.queued || (this.shadowRoot !== null && !this.hasUpdated)) {
+            return false;
+        }
+        for (let at = this.previousElementSibling; at; at = at.previousElementSibling) {
+            if (at instanceof HelixHeadlessAnnouncement_1 && at.queued) {
+                return true;
+            }
+        }
+        return false;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, {
+            label: this.label,
+            role: this.label.trim() && !this.waiting ? 'region' : '',
+        });
+        if ('ariaKeyShortcuts' in this.internals) {
+            this.internals.ariaKeyShortcuts = ariaChord(this.hotkey, onApple()) || null;
+        }
+    }
     connectedCallback() {
+        this.waiting = this.behind();
         super.connectedCallback();
+        this.watchQueue();
         this.addEventListener('mouseenter', this.handleHold);
         this.addEventListener('mouseleave', this.handleRelease);
         this.addEventListener('focusin', this.handleHold);
         this.addEventListener('focusout', this.handleRelease);
-        document.addEventListener('visibilitychange', this.handleVisibility);
+        document.addEventListener('keydown', this.handleHotkey);
         if (this.hasUpdated) {
             this.countdown.resume();
-            this.handleVisibility();
         }
     }
     disconnectedCallback() {
@@ -60,13 +117,26 @@ let HelixHeadlessAnnouncement = class HelixHeadlessAnnouncement extends MixinDis
         this.removeEventListener('mouseleave', this.handleRelease);
         this.removeEventListener('focusin', this.handleHold);
         this.removeEventListener('focusout', this.handleRelease);
-        document.removeEventListener('visibilitychange', this.handleVisibility);
-        this.heldHidden = false;
+        document.removeEventListener('keydown', this.handleHotkey);
+        this.queue?.disconnect();
+        const origin = this.focused ? this.origin : undefined;
+        this.focused = false;
+        this.origin = undefined;
+        if (origin) {
+            requestAnimationFrame(() => {
+                const active = deepActiveElement();
+                if (origin.isConnected && (active === null || active === document.body)) {
+                    origin.focus({ preventScroll: true });
+                }
+            });
+        }
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        this.countdown.start(this.duration);
-        this.handleVisibility();
+        this.watchQueue();
+        if (!this.waiting) {
+            this.countdown.start(this.duration);
+        }
         if (this.querySelector(':scope > [slot="icon"]')) {
             reportRuntime({
                 kind: 'deprecated',
@@ -78,6 +148,26 @@ let HelixHeadlessAnnouncement = class HelixHeadlessAnnouncement extends MixinDis
     updated(changed) {
         super.updated(changed);
         this.markEmpty();
+        if (changed.has('queued')) {
+            this.watchQueue();
+        }
+        this.toggleState('waiting', this.waiting);
+        if (changed.has('waiting') && this.waiting) {
+            this.arrival.say();
+        }
+        else if (changed.get('waiting') === true) {
+            this.countdown.start(this.duration);
+        }
+    }
+    watchQueue() {
+        this.queue?.disconnect();
+        this.waiting = this.behind();
+        if (this.queued && this.parentElement && typeof MutationObserver !== 'undefined') {
+            this.queue ??= new MutationObserver(() => {
+                this.waiting = this.behind();
+            });
+            this.queue.observe(this.parentElement, { childList: true });
+        }
     }
     markEmpty() {
         markRegion(this.renderRoot, 'actions', ['actions']);
@@ -92,6 +182,9 @@ let HelixHeadlessAnnouncement = class HelixHeadlessAnnouncement extends MixinDis
     >`;
     }
     render() {
+        if (this.waiting) {
+            return nothing;
+        }
         return html `<div aria-hidden=${this.arrival.said === '' ? nothing : 'true'} part="content"
         ><slot @slotchange=${() => this.arrival.say()}></slot
       ></div>
@@ -112,10 +205,23 @@ let HelixHeadlessAnnouncement = class HelixHeadlessAnnouncement extends MixinDis
 __decorate([
     property({ type: Number })
 ], HelixHeadlessAnnouncement.prototype, "duration", void 0);
+__decorate([
+    property()
+], HelixHeadlessAnnouncement.prototype, "hotkey", void 0);
+__decorate([
+    words,
+    property()
+], HelixHeadlessAnnouncement.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessAnnouncement.prototype, "queued", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessAnnouncement.prototype, "tone", void 0);
-HelixHeadlessAnnouncement = __decorate([
+__decorate([
+    state()
+], HelixHeadlessAnnouncement.prototype, "waiting", void 0);
+HelixHeadlessAnnouncement = HelixHeadlessAnnouncement_1 = __decorate([
     customElement('helix-headless-announcement')
 ], HelixHeadlessAnnouncement);
 export { HelixHeadlessAnnouncement };

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';
     }
@@ -37,7 +39,7 @@ let HelixHeadlessAreaChart = class HelixHeadlessAreaChart extends MixinChartSour
     get stack() {
         const rows = this.sourceRows;
         const columns = this.plottedColumns;
-        const names = columns.map((column) => rows.find((row) => row.cells[column])?.cells[column]?.name ?? '');
+        const names = columns.map((column) => this.columnName(column));
         const values = columns.map((column, depth) => rows.map((row) => {
             if (!this.showsSeries(names[depth] ?? '')) {
                 return 0;
@@ -179,19 +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}, ` : '';
-        return html `<p id="helix-chart-summary" part="summary">
-      ${named}${rows[last]?.label ?? ''}: ${this.totalLabel} ${format(total)}; ${shares.join(', ')}.
-    </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 {
@@ -200,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) },
@@ -235,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

@@ -0,0 +1,19 @@
+/** Whether the value counts nothing, in which case there is no mark. */
+export declare const badgeBlank: (given: string) => boolean;
+/** Whether the count is past `max`, which the mark shows as `{max}+`. */
+export declare const badgeCapped: (given: string, max: number | undefined) => boolean;
+/**
+ * What the mark reads once the cap has been applied: the value as given, or
+ * written with `options` in `locale` where they are set and it is a number.
+ */
+export declare const badgeText: (given: string, max: number | undefined, locale: string, options: Intl.NumberFormatOptions | undefined) => string;
+/**
+ * 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, locale?: string) => string;

package/dist/badge/count.js

@@ -0,0 +1,20 @@
+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);
+    return max !== undefined && Number.isFinite(count) && count > max;
+};
+export const badgeText = (given, max, locale, options) => {
+    const write = (count) => options ? formatNumber(count, locale, options) : String(count);
+    if (badgeCapped(given, max)) {
+        return `${write(max)}+`;
+    }
+    const count = Number(given);
+    return options && given.trim() !== '' && Number.isFinite(count) ? write(count) : given;
+};
+export const badgeWords = (text, label, blank, locale = '') => {
+    if (blank || (text === '' && label === '')) {
+        return '';
+    }
+    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;
     /**