@fusion.dev/helix-headless 0.147.0 → 0.149.0

package/dist/heatmap/root/heatmap-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, byRow, CHART_PLOT, commaList, customElement, drawTooltip, fillTemplate, formatNumbers, HelixBeforeChangeEvent, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, pressedValue, rangeAdd, requestChange, StatusController, searchableById, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { AriaForwardController, byRow, CHART_PLOT, commaList, customElement, drawTooltip, formatWords, HelixElement, HelixResizeEvent, MixinChartSource, markRegion, pressedValue, rangeAdd, requestValue, StatusController, searchableById, words, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -16,8 +16,11 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         this.emptyText = 'No readings';
         this.gap = 2;
         this.minCell = 8;
+        this.overviewLabel = '{busiestLabel}: {busiest}; {totalLabel} {total}.';
         this.rows = 1;
-        this.selectionLabel = '{count} selected';
+        this.selectedLabel = 'selected';
+        this.selectionLabel = '{count, plural, one {# selected} other {# selected}}';
+        this.stripLabel = 'Heatmap';
         this.thresholds = '';
         this.tones = '';
         this.totalLabel = 'Total';
@@ -72,6 +75,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             }
         };
     }
+    static { this.words = 'helix-heatmap'; }
     get visible() {
         return Math.min(this.points.length, this.room);
     }
@@ -84,15 +88,9 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         if (next === this.value) {
             return;
         }
-        requestChange({
-            apply: (value) => {
-                this.value = value;
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-                this.status.say(fillTemplate(this.selectionLabel, { count: commaList(value).length }));
-            },
-            event: (value) => new HelixBeforeChangeEvent({ value }),
-            host: this,
-            next,
+        requestValue(this, next, (value) => {
+            this.value = value;
+            this.status.say(formatWords(this, 'selectionLabel', { count: commaList(value).length }));
         });
     }
     press(index) {
@@ -213,7 +211,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const chosen = new Set(this.selectionMode ? commaList(this.value) : []);
         return html `<div
         aria-describedby=${readable ? 'helix-chart-summary' : nothing}
-        aria-label=${this.named || 'Heatmap'}
+        aria-label=${this.named || this.stripLabel}
         part="strip"
         id=${CHART_PLOT}
         role=${readable ? 'application' : 'img'}
@@ -259,9 +257,13 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
         const { busiest, total } = overviewOf(cells);
         const row = rows[offset + busiest];
         const text = row?.cells[column]?.text ?? '';
-        const most = row ? `${this.busiestLabel}: ${row.label}${text === '' ? '' : `, ${text}`}` : '';
-        const sum = `${this.totalLabel} ${formatNumbers(this.locale)(total)}`;
-        return html `<p id="helix-chart-summary" part="overview">${most ? `${most}; ${sum}` : sum}.</p>`;
+        const said = formatWords(this, 'overviewLabel', {
+            busiest: text === '' ? (row?.label ?? '') : `${row?.label ?? ''}, ${text}`,
+            busiestLabel: this.busiestLabel,
+            total,
+            totalLabel: this.totalLabel,
+        });
+        return html `<p id="helix-chart-summary" part="overview">${said}</p>`;
     }
     renderTooltip() {
         const at = this.pointer.at;
@@ -277,13 +279,32 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartSource(H
             placement: 'top',
             x: `${column * (cell + gap) + cell / 2}px`,
             y: `${row * (cell + gap)}px`,
-        }, undefined, this.pointer);
+        }, undefined, this.reading(at));
+    }
+    reading(at) {
+        const pointer = this.pointer;
+        const key = this.keysOf(this.drawn)[at] ?? '';
+        if (!this.selectionMode || key === '' || this.selectedLabel === '') {
+            return pointer;
+        }
+        if (!commaList(this.value).includes(key)) {
+            return pointer;
+        }
+        return {
+            column: pointer.column,
+            keyed: pointer.keyed,
+            position: pointer.position,
+            shows: (cell) => pointer.shows(cell),
+            state: this.selectedLabel,
+        };
     }
 };
 __decorate([
+    words,
     property({ attribute: 'busiest-label' })
 ], HelixHeadlessHeatmap.prototype, "busiestLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'empty-text' })
 ], HelixHeadlessHeatmap.prototype, "emptyText", void 0);
 __decorate([
@@ -292,15 +313,28 @@ __decorate([
 __decorate([
     property({ attribute: 'min-cell', type: Number })
 ], HelixHeadlessHeatmap.prototype, "minCell", void 0);
+__decorate([
+    words,
+    property({ attribute: 'overview-label' })
+], HelixHeadlessHeatmap.prototype, "overviewLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessHeatmap.prototype, "rows", void 0);
 __decorate([
+    words,
+    property({ attribute: 'selected-label' })
+], HelixHeadlessHeatmap.prototype, "selectedLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'selection-label' })
 ], HelixHeadlessHeatmap.prototype, "selectionLabel", void 0);
 __decorate([
     property({ attribute: 'selection-mode' })
 ], HelixHeadlessHeatmap.prototype, "selectionMode", void 0);
+__decorate([
+    words,
+    property({ attribute: 'strip-label' })
+], HelixHeadlessHeatmap.prototype, "stripLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessHeatmap.prototype, "thresholds", void 0);
@@ -308,6 +342,7 @@ __decorate([
     property()
 ], HelixHeadlessHeatmap.prototype, "tones", void 0);
 __decorate([
+    words,
     property({ attribute: 'total-label' })
 ], HelixHeadlessHeatmap.prototype, "totalLabel", void 0);
 __decorate([

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

@@ -30,6 +30,11 @@ import { HelixHeadlessButton } from '../../button/root/button-root.js';
  * @csspart button - The inner button.
  */
 export declare class HelixHeadlessIconButton extends HelixHeadlessButton {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-icon-button': { pendingLabel: 'Wird geladen' } })`.
+     */
+    static words: string;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessButton } from '../../button/root/button-root.js';
 let HelixHeadlessIconButton = class HelixHeadlessIconButton extends HelixHeadlessButton {
+    static { this.words = 'helix-icon-button'; }
 };
 HelixHeadlessIconButton = __decorate([
     customElement('helix-headless-icon-button')

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

@@ -16,6 +16,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * its own. The fallback is read once the picture fails, after the picture's
  * `alt`, so a reader hears that it did not load, as a sighted reader sees.
  *
+ * **An image with no `alt` says so.** At its first render it reports a
+ * `missing-alt` warning, printed in the console and counted by
+ * `@fusion.dev/helix-diagnostics`, which names the fix: describe the picture
+ * in `alt`, or write `alt=""` for one that is decoration. An image hidden with
+ * `aria-hidden="true"` needs neither and is not reported.
+ *
+ * A sheet of yours reads the state as `:state(loading)`, `:state(loaded)`,
+ * `:state(error)`, and `:state(waiting)`, the last while `placeholder-delay`
+ * holds the placeholder back. It can also read `data-status` on the host once
+ * the picture has loaded or failed.
+ *
  * @since 0.1.0
  * @status stable
  * @category media

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

@@ -69,6 +69,11 @@ declare const HelixHeadlessInput_base: (new (...args: any[]) => import("@fusion.
  * @cssstate invalid - The control has an error to show, from the browser's validation, `validate`, or your `feedback`.
  */
 export declare class HelixHeadlessInput extends HelixHeadlessInput_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-input': { clearLabel: 'Leeren' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;

package/dist/input/root/input-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, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, submitImplicitly, } from '@fusion.dev/helix-core';
+import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, MixinControllerValue, MixinField, restoreValue, submitImplicitly, words, } from '@fusion.dev/helix-core';
 import { eye, eyeSlash, x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -59,6 +59,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         this.step = '';
         this.type = 'text';
     }
+    static { this.words = 'helix-input'; }
     get effectiveType() {
         return this.revealed && this.type === 'password' ? 'text' : this.type;
     }
@@ -234,6 +235,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessInput.prototype, "clearable", void 0);
 __decorate([
+    words,
     property({ attribute: 'clear-label' })
 ], HelixHeadlessInput.prototype, "clearLabel", void 0);
 __decorate([
@@ -270,6 +272,7 @@ __decorate([
     state()
 ], HelixHeadlessInput.prototype, "revealed", void 0);
 __decorate([
+    words,
     property({ attribute: 'reveal-label' })
 ], HelixHeadlessInput.prototype, "revealLabel", void 0);
 __decorate([

package/dist/kbd/root/kbd-root.js

@@ -4,10 +4,9 @@ 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 { ariaChord, chordParts, customElement, elementById, HelixElement, HelixShortcutEvent, matchesChord, onApple, printableChord, wordsConverter, } from '@fusion.dev/helix-core';
+import { ariaChord, chordParts, customElement, elementById, HelixElement, HelixShortcutEvent, keyNames, matchesChord, onApple, printableChord, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { keyNames } from '../keys.js';
 import { claimShortcut, releaseShortcut } from '../shortcut.js';
 const typing = (node) => {
     if (node instanceof HTMLTextAreaElement) {

package/dist/legend/root/legend-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, HelixBeforeChangeEvent, HelixElement, KeyboardNavigationController, requestChange, SourceController, seriesIndex, seriesKey, typeaheadBy, } from '@fusion.dev/helix-core';
+import { customElement, focusItemOf, HelixElement, KeyboardNavigationController, requestValue, SourceController, seriesIndex, seriesKey, typeaheadBy, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { isHidden, namesIn, toggledNames } from '../hidden-series.js';
@@ -19,14 +19,7 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
         this.stop = 0;
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.toggles
-                ? [...this.renderRoot.querySelectorAll('[part="toggle"]')].map((button) => ({
-                    contains: (node) => button.contains(node),
-                    disabled: false,
-                    focusItem: () => button.focus(),
-                    select: () => { },
-                    selected: false,
-                    words: button.textContent?.trim() ?? '',
-                }))
+                ? [...this.renderRoot.querySelectorAll('[part="toggle"]')].map((button) => focusItemOf(button, { words: button.textContent?.trim() ?? '' }))
                 : [],
             origin: 'focus',
             selects: () => false,
@@ -73,14 +66,8 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
         super.disconnectedCallback();
     }
     toggle(name) {
-        requestChange({
-            apply: (value) => {
-                this.hiddenSeries = value;
-                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-            },
-            event: (value) => new HelixBeforeChangeEvent({ value }),
-            host: this,
-            next: toggledNames(this.hiddenSeries, name),
+        requestValue(this, toggledNames(this.hiddenSeries, name), (value) => {
+            this.hiddenSeries = value;
         });
     }
     names() {

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

@@ -97,6 +97,11 @@ declare const HelixHeadlessLightbox_base: (new (...args: any[]) => import("@fusi
  * @cssstate zoomed - While the shown item is zoomed past its own size.
  */
 export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-lightbox': { nextLabel: 'Weiter' } })`.
+     */
+    static words: string;
     /**
      * Draws the viewer's own previous, next and close controls over the picture,
      * and zoom-out and zoom-in controls where `max-zoom` allows zooming.
@@ -120,6 +125,8 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      * interface.
      */
     dismissLabel: string;
+    /** The viewer's name where `label` is empty. */
+    fallbackLabel: string;
     /**
      * How long the user can be idle before the header and footer hide, in
      * milliseconds.
@@ -152,7 +159,7 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     previousLabel: string;
     /**
      * The name of an item with no `label` of its own, with `{index}` and
-     * `{count}` filled in.
+     * `{count}` filled in, written in the locale.
      */
     slideLabel: string;
     /**
@@ -163,7 +170,7 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     slideRoleLabel: string;
     /**
      * The status text that says which item is shown, with `{index}`, `{count}`
-     * and the item's `{label}` filled in.
+     * and the item's `{label}` filled in, the numbers written in the locale.
      *
      * Announced rather than only drawn, because the picture changing under a
      * reader who cannot see it is otherwise silent. A consumer who has their own
@@ -179,8 +186,11 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
      */
     zoomOutLabel: string;
     /**
-     * What the live region says once a reader has stopped zooming, with the
-     * scale as a whole `{percent}` filled in. Empty it to say nothing.
+     * What the live region says once a reader has stopped zooming. `{scale,
+     * number, percent}` writes the scale as a percentage the way the locale
+     * writes one, such as `150%`, or `150 %` in French. `{percent}` is the same
+     * scale as a whole number, for a sentence that places the sign itself. Empty
+     * it to say nothing.
      */
     zoomStatusLabel: string;
     /** Whether the reader has been still long enough to hide the chrome. */

package/dist/lightbox/root/lightbox-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 { CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, } from '@fusion.dev/helix-core';
+import { CommandController, customElement, DelayController, deepActiveElement, deepContains, drawDismiss, drawDismissGlyph, FullscreenController, formatWords, HelixElement, hostAria, IdleController, inlineStep, isRtl, keyClaimed, lockScroll, MixinControllerActive, MixinControllerOpen, resolveActiveItem, SwipeController, swipeStep, unlockScroll, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight, minus, plus } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -18,6 +18,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.controls = false;
         this.counter = false;
         this.dismissLabel = 'Close';
+        this.fallbackLabel = 'Lightbox';
         this.idleDelay = 0;
         this.label = '';
         this.loop = false;
@@ -29,7 +30,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.statusLabel = '{index} of {count}';
         this.zoomInLabel = 'Zoom in';
         this.zoomOutLabel = 'Zoom out';
-        this.zoomStatusLabel = 'Zoomed to {percent}%';
+        this.zoomStatusLabel = 'Zoomed to {scale, number, percent}';
         this.resting = false;
         this.filled = false;
         this.announcement = '';
@@ -125,6 +126,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.requestOpen(false);
         };
     }
+    static { this.words = 'helix-lightbox'; }
     drawZoom(scale, pan) {
         const viewport = this.partNamed('viewport');
         const zoomed = scale > 1;
@@ -144,7 +146,10 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             return;
         }
         this.zoomSaid.start(400, () => {
-            this.announcement = fillTemplate(this.zoomStatusLabel, { percent: percentOf(this.zoomScale) });
+            this.announcement = formatWords(this, 'zoomStatusLabel', {
+                percent: percentOf(this.zoomScale),
+                scale: this.zoomScale,
+            });
         });
     }
     zoomTo(scale) {
@@ -272,7 +277,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         items.forEach((item, at) => {
             item.current = item === current;
             whenHydrated(item, () => {
-                item.position = fillTemplate(this.slideLabel, {
+                item.position = formatWords(this, 'slideLabel', {
                     count: items.length,
                     index: at + 1,
                     label: item.label,
@@ -301,7 +306,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         this.announcement =
             at === -1 || !current
                 ? ''
-                : fillTemplate(this.statusLabel, {
+                : formatWords(this, 'statusLabel', {
                     count: items.length,
                     index: at + 1,
                     label: current.label,
@@ -311,7 +316,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         const items = this.items;
         const current = resolveActiveItem(this.active, items);
         return current
-            ? fillTemplate(this.statusLabel, {
+            ? formatWords(this, 'statusLabel', {
                 count: items.length,
                 index: items.indexOf(current) + 1,
                 label: current.label,
@@ -321,7 +326,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
     render() {
         return html `<dialog
       part="dialog"
-      aria-label=${this.label || 'Lightbox'}
+      aria-label=${this.label || this.fallbackLabel}
       autofocus
       tabindex="-1"
       @cancel=${this.handleCancel}
@@ -412,8 +417,13 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessLightbox.prototype, "counter", void 0);
 __decorate([
+    words,
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessLightbox.prototype, "dismissLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessLightbox.prototype, "fallbackLabel", void 0);
 __decorate([
     property({ attribute: 'idle-delay', type: Number })
 ], HelixHeadlessLightbox.prototype, "idleDelay", void 0);
@@ -427,27 +437,35 @@ __decorate([
     property({ attribute: 'max-zoom', type: Number })
 ], HelixHeadlessLightbox.prototype, "maxZoom", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-label' })
 ], HelixHeadlessLightbox.prototype, "nextLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-label' })
 ], HelixHeadlessLightbox.prototype, "previousLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'slide-label' })
 ], HelixHeadlessLightbox.prototype, "slideLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'slide-role-label' })
 ], HelixHeadlessLightbox.prototype, "slideRoleLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'status-label' })
 ], HelixHeadlessLightbox.prototype, "statusLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'zoom-in-label' })
 ], HelixHeadlessLightbox.prototype, "zoomInLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'zoom-out-label' })
 ], HelixHeadlessLightbox.prototype, "zoomOutLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'zoom-status-label' })
 ], HelixHeadlessLightbox.prototype, "zoomStatusLabel", void 0);
 __decorate([

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

@@ -81,6 +81,11 @@ declare const HelixHeadlessLineChart_base: typeof HelixElement & (new (...args:
  * @cssproperty --chart-terminus-y - Where a series' last reading sits vertically, as a percentage. Written by the component.
  */
 export declare class HelixHeadlessLineChart extends HelixHeadlessLineChart_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-line-chart': { positionLabel: '{position} von {count}' } })`.
+     */
+    static words: string;
     /**
      * Draws a wash under each line, down to the floor of the plot. The washes
      * overlap and do not add up, so for parts that make a total, use

package/dist/line-chart/root/line-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, commaList, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, unbroken, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, commaList, customElement, drawTooltip, extent, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, ticks, unbroken, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import '../../tooltip/index.js';
@@ -16,6 +16,7 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
         this.markers = false;
         this.zero = false;
     }
+    static { this.words = 'helix-line-chart'; }
     get rulesValue() {
         return this.gridlines !== undefined && this.gridlines !== 'category';
     }
@@ -71,8 +72,9 @@ let HelixHeadlessLineChart = class HelixHeadlessLineChart extends MixinChartSour
             return [{ label: last.label, reading: `${one.name} ${text}` }];
         });
         const shared = latest.every((one) => one.label === latest[0]?.label);
+        const listed = new Intl.ListFormat(wordsLocale(this), { style: 'short', type: 'unit' });
         const body = shared
-            ? `${latest[0]?.label ?? ''}: ${latest.map((one) => one.reading).join(', ')}`
+            ? `${latest[0]?.label ?? ''}: ${listed.format(latest.map((one) => one.reading))}`
             : latest.map((one) => `${one.label}: ${one.reading}`).join('; ');
         const named = this.named ? `${this.named}, ` : '';
         return html `<p id="helix-chart-summary" part="summary">${named}${body}.</p>`;

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

@@ -2,6 +2,8 @@ import { HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /** The values `current` takes, which are `aria-current`'s. */
 export type ListItemCurrent = 'date' | 'location' | 'page' | 'step' | 'time' | 'true';
+/** Where a row stands in a move: the row being moved, or the one the drop indicator is beside. */
+export type ListItemMove = 'dragging' | 'drop-after' | 'drop-before';
 /**
  * @summary One row of a list.
  *
@@ -35,6 +37,11 @@ export type ListItemCurrent = 'date' | 'location' | 'page' | 'step' | 'time' | '
  * selects, whether it is selected. Its link leaves the tab order there, and
  * Enter follows it from the row.
  *
+ * **In a `reorderable` list, the row has a grip** after its `end` slot, named
+ * by the list's `move-label`. The list says which row is moving and where the
+ * drop indicator is, with the `dragging`, `drop-before`, and `drop-after`
+ * states.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Row, Entry
@@ -47,10 +54,15 @@ export type ListItemCurrent = 'date' | 'location' | 'page' | 'step' | 'time' | '
  *
  * @event {HelixActionEvent} helix-action - The reader pressed Enter on the row, or pressed the row in a list that selects nothing, in a list with `selection-mode`. Read the row from `target`. A row with `href` follows its link instead.
  *
+ * @csspart grip - The button that moves the row, in a `reorderable` list.
+ * @csspart grip-mark - The icon on the grip.
  * @csspart link - The link, when the row has `href`. It holds every region except `end`.
  * @csspart row - The row's layout. It sits inside the host so the host can carry a list marker. In a list with `selection-mode` it is the grid cell that takes focus.
  * @csspart row-current - Added to `row` while the row is `current`.
  *
+ * @cssstate dragging - The row is being moved, in a `reorderable` list.
+ * @cssstate drop-after - The row being moved goes after this one when it is dropped.
+ * @cssstate drop-before - The row being moved goes before this one when it is dropped.
  * @cssstate selected - The row is selected, in a list that selects.
  */
 export declare class HelixHeadlessListItem extends HelixElement {
@@ -77,6 +89,13 @@ export declare class HelixHeadlessListItem extends HelixElement {
      * it is coordination between elements, as `Tag.focusable` is.
      */
     focusable?: boolean | undefined;
+    /**
+     * The name of the row's grip, written by a `reorderable` list from its
+     * `move-label`, and unset in a list that does not reorder, which draws no
+     * grip. No attribute: it is coordination between elements, as `focusable`
+     * is.
+     */
+    grip?: string | undefined;
     /**
      * The URL the row links to. Leave it empty for a row that is not a link.
      *
@@ -85,6 +104,11 @@ export declare class HelixHeadlessListItem extends HelixElement {
      * to the current page on every row a consumer never asked to be one.
      */
     href: string;
+    /**
+     * Where the row stands in a move, written by a `reorderable` list: the row
+     * being moved, or the one the drop indicator is beside. Unset otherwise.
+     */
+    move?: ListItemMove | undefined;
     /**
      * The link's `rel` value. You set it yourself. It is not derived from
      * `target`, for the reason `Tree.Item` gives.
@@ -121,11 +145,19 @@ export declare class HelixHeadlessListItem extends HelixElement {
      * over.
      */
     get controls(): HTMLElement[];
+    /** @internal The grip that moves the row, in a `reorderable` list. */
+    get gripElement(): HTMLElement | null;
     /** Moves focus to the row's cell, in a list with `selection-mode`. */
     focusItem(): void;
     /** @internal Follows the row's link, as a press on it would. Called by the list on Enter. */
     follow(): void;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The grip, after `end`, in a `reorderable` list. A tab stop of its own in a
+     * list a reader reads, and reached with Left and Right in a list with
+     * `selection-mode`, as a control in `end` is.
+     */
+    private renderGrip;
     /**
      * The cell before the row's content, which this tier leaves empty.
      *