@fusion.dev/helix-headless 0.148.0 → 0.149.0

package/dist/pin-input/root/pin-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, customElement, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, restoreValue, submitImplicitly, verdictFlags, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, formatWords, HelixCompleteEvent, HelixFormElement, MixinControllerValue, MixinField, restoreValue, submitImplicitly, verdictFlags, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { caretTo, cleanCode, codeVerdict, overwriteCode, readTyped, } from '../code.js';
@@ -28,6 +28,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         this.maskCharacter = '•';
         this.placeholder = '';
         this.readOnly = false;
+        this.tooShortMessage = '{length, plural, one {Please enter the # character.} other {Please enter all # characters.}}';
         this.type = 'numeric';
         this.active = -1;
         this.pressedAt = undefined;
@@ -104,6 +105,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
             }
         };
     }
+    static { this.words = 'helix-pin-input'; }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
         delegatesFocus: true,
@@ -166,7 +168,7 @@ let HelixHeadlessPinInput = class HelixHeadlessPinInput extends MixinControllerV
         }
         const found = verdictFlags(codeVerdict(this.value, this.count, this.required, {
             missing: this.valueMissingMessage,
-            short: this.tooShortMessage,
+            short: (length) => formatWords(this, 'tooShortMessage', { length }),
         }));
         this.internals.setValidity(found?.[0] ?? {}, found?.[1] ?? '', control);
         this.refreshFeedback();
@@ -260,6 +262,7 @@ __decorate([
     property()
 ], HelixHeadlessPinInput.prototype, "case", void 0);
 __decorate([
+    words,
     property({ attribute: 'cell-label' })
 ], HelixHeadlessPinInput.prototype, "cellLabel", void 0);
 __decorate([
@@ -281,6 +284,7 @@ __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessPinInput.prototype, "readOnly", void 0);
 __decorate([
+    words,
     property({ attribute: 'too-short-message' })
 ], HelixHeadlessPinInput.prototype, "tooShortMessage", void 0);
 __decorate([

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

@@ -81,6 +81,11 @@ declare const HelixHeadlessPopover_base: (new (...args: any[]) => import("@fusio
  * @cssstate placed-top - While the panel sits above its trigger.
  */
 export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-popover': { fallbackLabel: 'Popup' } })`.
+     */
+    static words: string;
     /**
      * Draws a point on the panel's edge facing the trigger.
      *
@@ -89,8 +94,13 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      */
     arrow: boolean;
     /**
-     * The panel's name, read by screen readers. Left at `Popover`, the first
-     * heading in the panel names it instead.
+     * The panel's name where nothing else names it: no `label`, no heading in
+     * the panel, and no `aria-labelledby` on the host.
+     */
+    fallbackLabel: string;
+    /**
+     * The panel's name, read by screen readers. Left empty, the first heading in
+     * the panel names it, and then `fallback-label`.
      */
     label: string;
     /**

package/dist/popover/root/popover-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, anchorElement, arrowReach, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, OpenPhaseController, PopoverController, reflectElements, sideOf, tellDisclosure, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, arrowReach, CommandController, customElement, deepActiveElement, FocusScopeController, HelixElement, headingIn, MixinControllerOpen, OpenPhaseController, PopoverController, reflectElements, sideOf, tellDisclosure, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { hideOutside } from '../hide-outside.js';
@@ -12,7 +12,8 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
     constructor() {
         super(...arguments);
         this.arrow = false;
-        this.label = 'Popover';
+        this.fallbackLabel = 'Popover';
+        this.label = '';
         this.modal = false;
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('popover'),
@@ -99,13 +100,14 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         this.pressed = false;
         this.settled = false;
     }
+    static { this.words = 'helix-popover'; }
     get slotted() {
         return (this.renderRoot
             ?.querySelector('slot:not([name])')
             ?.assignedElements({ flatten: true }) ?? []);
     }
     nameByHeading() {
-        const asked = this.label !== 'Popover' || this.hasAttribute('aria-labelledby');
+        const asked = this.label !== '' || this.hasAttribute('aria-labelledby');
         const heading = asked ? null : headingIn(this.slotted);
         this.namedByHeading = reflectElements(this.partNamed('popover'), 'ariaLabelledByElements', heading ? [heading] : [], this.namedByHeading);
     }
@@ -196,7 +198,7 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         part="popover"
         popover="manual"
         role="dialog"
-        aria-label=${this.label}
+        aria-label=${this.label || this.fallbackLabel}
         aria-modal=${this.modal ? 'true' : nothing}
         tabindex="-1"
         ?hidden=${!this.open}
@@ -214,6 +216,10 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessPopover.prototype, "arrow", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessPopover.prototype, "fallbackLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessPopover.prototype, "label", void 0);

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

@@ -43,6 +43,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @cssstate complete - The value is at `max` and the bar is not indeterminate.
  */
 export declare class HelixHeadlessProgress extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-progress': { completeLabel: 'Fertig' } })`.
+     */
+    static words: string;
     /**
      * The words a screen reader hears when the value reaches `max`, such as
      * "Upload complete".
@@ -88,9 +93,9 @@ export declare class HelixHeadlessProgress extends HelixElement {
      */
     label: string;
     /**
-     * The locale the percentage is written in, such as `fr` for `72 %`.
+     * The locale the words and the percentage are in, such as `fr` for `72 %`.
      *
-     * Absent uses the runtime's own.
+     * Absent reads the nearest `lang`, then the runtime's own.
      */
     locale: string;
     /**

package/dist/progress/root/progress-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, drawStatus, HelixCompleteEvent, HelixElement, hostAria, readingText, StatusController, slottedWords, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixCompleteEvent, HelixElement, hostAria, readingText, StatusController, slottedWords, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
@@ -24,6 +24,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
             this.requestUpdate();
         };
     }
+    static { this.words = 'helix-progress'; }
     get complete() {
         return !this.indeterminate && this.fraction >= 1;
     }
@@ -66,7 +67,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
     }
     get text() {
         return (this.valueText ||
-            readingText(Math.min(Math.max(this.value, this.range.min), this.range.max), this.fraction, this.locale, this.formatOptions));
+            readingText(Math.min(Math.max(this.value, this.range.min), this.range.max), this.fraction, wordsLocale(this), this.formatOptions));
     }
     render() {
         const fraction = this.indeterminate ? 1 : this.fraction;
@@ -87,6 +88,7 @@ let HelixHeadlessProgress = class HelixHeadlessProgress extends HelixElement {
     }
 };
 __decorate([
+    words,
     property({ attribute: 'complete-label' })
 ], HelixHeadlessProgress.prototype, "completeLabel", void 0);
 __decorate([
@@ -96,6 +98,7 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessProgress.prototype, "indeterminate", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessProgress.prototype, "label", void 0);
 __decorate([

package/dist/qr-code/name.d.ts

@@ -1,6 +1,7 @@
 /**
  * The name a code is read by: its `label`, or with none, the word for a code,
- * followed by the value where the value is a web address.
+ * or where the value is a web address, `addressed` with it, which puts the
+ * word and the address in one sentence.
  *
  * **A value that is no web address is never read out.** A code that sets up
  * an authenticator (`otpauth://…?secret=…`) or joins a network
@@ -8,4 +9,4 @@
  * read that secret aloud to anyone in earshot. A web address is what a
  * sighted reader gets by scanning, so it is said after the word.
  */
-export declare const qrName: (label: string, value: string, word: string) => string;
+export declare const qrName: (label: string, value: string, word: string, addressed: (address: string) => string) => string;

package/dist/qr-code/name.js

@@ -1,7 +1,7 @@
-export const qrName = (label, value, word) => {
+export const qrName = (label, value, word, addressed) => {
     if (label.trim() !== '') {
         return label;
     }
     const address = value.trim();
-    return /^https?:\/\/\S+$/iu.test(address) ? `${word}, ${address}` : word;
+    return /^https?:\/\/\S+$/iu.test(address) ? addressed(address) : word;
 };

package/dist/qr-code/root/qr-code-root.d.ts

@@ -62,8 +62,18 @@ export type QrStyle = 'dots' | 'rounded' | 'square';
  */
 export declare class HelixHeadlessQrCode extends HelixElement {
     /**
-     * The words a code with no `label` is named by, followed by its value where
-     * the value is a web address.
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-qr-code': { codeLabel: 'QR-Code' } })`.
+     */
+    static words: string;
+    /**
+     * The name of a code with no `label` whose value is a web address.
+     * `{code}` is `code-label` and `{address}` the address.
+     */
+    addressLabel: string;
+    /**
+     * The words a code with no `label` is named by, with its value where the
+     * value is a web address, as `address-label` says.
      */
     codeLabel: string;
     /**

package/dist/qr-code/root/qr-code-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, HelixElement, reportRuntime, rgbOf, slotFilled, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, reportRuntime, rgbOf, slotFilled, words, } from '@fusion.dev/helix-core';
 import { html, nothing, svg, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { encode } from 'uqr';
@@ -77,6 +77,7 @@ const pathFor = (matrix, style, only = 'all') => {
 let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     constructor() {
         super(...arguments);
+        this.addressLabel = '{code}, {address}';
         this.codeLabel = 'QR code';
         this.label = '';
         this.value = '';
@@ -84,6 +85,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
         this.toldLogo = false;
         this.overflowed = '';
     }
+    static { this.words = 'helix-qr-code'; }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (this.childrenKnown) {
@@ -224,7 +226,7 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
       viewBox="0 0 ${box} ${box}"
       xmlns="http://www.w3.org/2000/svg"
       role="img"
-      aria-label=${qrName(this.label, this.value, this.codeLabel)}
+      aria-label=${qrName(this.label, this.value, this.codeLabel, (address) => formatWords(this, 'addressLabel', { address, code: this.codeLabel }))}
       shape-rendering="crispEdges"
     >
       <path
@@ -260,6 +262,11 @@ let HelixHeadlessQrCode = class HelixHeadlessQrCode extends HelixElement {
     }
 };
 __decorate([
+    words,
+    property({ attribute: 'address-label' })
+], HelixHeadlessQrCode.prototype, "addressLabel", void 0);
+__decorate([
+    words,
     property({ attribute: 'code-label' })
 ], HelixHeadlessQrCode.prototype, "codeLabel", void 0);
 __decorate([

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

@@ -68,6 +68,11 @@ declare const HelixHeadlessRadioGroup_base: (new (...args: any[]) => import("@fu
  * @cssstate invalid - The group has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-radio-group': { valueMissingMessage: '...' } })`.
+     */
+    static words: string;
     /**
      * Whether the group holds a tab stop of its own.
      *
@@ -101,6 +106,12 @@ export declare class HelixHeadlessRadioGroup extends HelixHeadlessRadioGroup_bas
      * `aria-readonly`. A script can still set `value`.
      */
     readOnly: boolean;
+    /**
+     * The message reported when the field is required and no option is chosen.
+     * Absent, or empty, is this sentence, or the words registered for the page's
+     * locale.
+     */
+    valueMissingMessage: string;
     protected readonly keys: KeyboardNavigationController;
     protected readonly cascade: DisabledCascadeController;
     /** The radios, in light-DOM order. Client only: the server has no tree. */

package/dist/radio/group/radio-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, DisabledCascadeController, HelixFormElement, hostAria, KeyboardNavigationController, MixinControllerValue, MixinField, } from '@fusion.dev/helix-core';
+import { customElement, DisabledCascadeController, HelixFormElement, hostAria, KeyboardNavigationController, MixinControllerValue, MixinField, words, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessRadio } from '../root/radio-root.js';
@@ -13,6 +13,7 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
         super(...arguments);
         this.focusable = true;
         this.readOnly = false;
+        this.valueMissingMessage = 'Choose one to continue.';
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.items,
             origin: () => (this.readOnly ? 'focus' : 'selection'),
@@ -39,6 +40,7 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
             });
         };
     }
+    static { this.words = 'helix-radio-group'; }
     get items() {
         return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessRadio);
     }
@@ -84,7 +86,7 @@ let HelixHeadlessRadioGroup = class HelixHeadlessRadioGroup extends MixinControl
     sync() {
         const answered = this.answered;
         this.internals.setFormValue(answered ? this.value : null);
-        this.reportRequired(!answered, 'Choose one to continue.', 'items');
+        this.reportRequired(!answered, this.valueMissingMessage, 'items');
     }
     connectedCallback() {
         super.connectedCallback();
@@ -124,6 +126,10 @@ __decorate([
 __decorate([
     property({ attribute: 'readonly', reflect: true, type: Boolean })
 ], HelixHeadlessRadioGroup.prototype, "readOnly", void 0);
+__decorate([
+    words,
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessRadioGroup.prototype, "valueMissingMessage", void 0);
 HelixHeadlessRadioGroup = __decorate([
     customElement('helix-headless-radio-group')
 ], HelixHeadlessRadioGroup);

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

@@ -69,6 +69,11 @@ declare const HelixHeadlessRating_base: (new (...args: any[]) => import("@fusion
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-rating': { optionLabel: '{score} von {max}' } })`.
+     */
+    static words: string;
     protected readonly announcesInput = false;
     /**
      * Whether a reader can take the rating back to unrated: by pressing the
@@ -125,7 +130,7 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
     min: number;
     /**
      * The name of each mark a reader can choose, with `{score}` and `{max}`
-     * filled in. Set it to translate "3 out of 5".
+     * filled in, written in the locale. Set it to translate "3 out of 5".
      *
      * Also what a read-only rating says for its score where `value-text` is
      * empty.
@@ -158,6 +163,12 @@ export declare class HelixHeadlessRating extends HelixHeadlessRating_base {
      * than an index: with halves, five marks are ten answers.
      */
     step: number;
+    /**
+     * The message reported when the field is required and no rating is chosen.
+     * Absent, or empty, is this sentence, or the words registered for the page's
+     * locale.
+     */
+    valueMissingMessage: string;
     /**
      * The text screen readers read for the score, in place of "3.5 out of 5".
      *

package/dist/rating/root/rating-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, valueAsNumber as asNumber, customElement, fillTemplate, numberAsValue as fromNumber, HelixClearEvent, HelixFormElement, HelixPreviewEvent, KeyboardNavigationController, MixinControllerValue, MixinField, nearest, reportRuntime, SlottedGlyph, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsNumber as asNumber, customElement, formatWords, numberAsValue as fromNumber, HelixClearEvent, HelixFormElement, HelixPreviewEvent, KeyboardNavigationController, MixinControllerValue, MixinField, nearest, reportRuntime, SlottedGlyph, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue(MixinField(HelixFormElement)) {
@@ -18,6 +18,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.readOnly = false;
         this.showValue = false;
         this.step = 1;
+        this.valueMissingMessage = 'Choose a rating to continue.';
         this.valueText = '';
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('marks'),
@@ -123,6 +124,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         };
         this.warned = false;
     }
+    static { this.words = 'helix-rating'; }
     get namedControl() {
         return this.partNamed('marks');
     }
@@ -183,7 +185,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
     }
     sync() {
         this.internals.setFormValue(this.value === '' ? null : this.value);
-        this.reportRequired(this.value === '', 'Choose a rating to continue.', 'marks');
+        this.reportRequired(this.value === '', this.valueMissingMessage, 'marks');
     }
     clear() {
         if (this.value !== '' && !this.readOnly && !this.isDisabled && this.requestValue('')) {
@@ -231,7 +233,7 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.sync();
     }
     nameFor(score) {
-        return fillTemplate(this.optionLabel, { max: this.max, score });
+        return formatWords(this, 'optionLabel', { max: this.max, score });
     }
     stopAt(answered, first) {
         if (!answered) {
@@ -335,6 +337,7 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessRating.prototype, "min", void 0);
 __decorate([
+    words,
     property({ attribute: 'option-label' })
 ], HelixHeadlessRating.prototype, "optionLabel", void 0);
 __decorate([
@@ -346,6 +349,10 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessRating.prototype, "step", void 0);
+__decorate([
+    words,
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessRating.prototype, "valueMissingMessage", void 0);
 __decorate([
     property({ attribute: 'value-text' })
 ], HelixHeadlessRating.prototype, "valueText", void 0);

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

@@ -112,7 +112,13 @@ declare const HelixHeadlessScatterChart_base: typeof HelixElement & (new (...arg
  */
 export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart_base {
     /**
-     * The word the summary uses for the strength of the relation.
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-scatter-chart': { seriesLabel: '…' } })`.
+     */
+    static words: string;
+    /**
+     * The word for the strength of the relation, `{correlationLabel}` in
+     * `series-label`.
      */
     correlationLabel: string;
     /**
@@ -125,9 +131,21 @@ export declare class HelixHeadlessScatterChart extends HelixHeadlessScatterChart
      */
     gridlines?: 'both' | 'x' | 'y';
     /**
-     * The word the summary uses for a row when it counts them.
+     * The word for the rows a series rests on, `{pointsLabel}` in
+     * `series-label`. `{count}` is how many, so the word takes its plural
+     * forms: `{count, plural, one {punkt} few {punkty} other {punktów}}`.
      */
     pointsLabel: string;
+    /**
+     * What the summary says of each series. `{y}` is what the series measures up,
+     * `{x}` what the chart measures across, `{count}` how many rows it rests on,
+     * written in the locale, `{pointsLabel}` the word for them, and
+     * `{correlation}` its correlation, or `none` where there are fewer than
+     * three points or no spread to measure, so each case is a whole sentence:
+     * `{correlation, select, none {...} other {...}}`. `{correlationLabel}` is
+     * `correlation-label`.
+     */
+    seriesLabel: string;
     /**
      * The heading of a column whose numbers size the points, such as
      * `Population`, which makes the chart a bubble chart.

package/dist/scatter-chart/root/scatter-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, extent, formatNumbers, HelixElement, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, ticks, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, isRtl, linear, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, 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';
@@ -37,7 +37,8 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     constructor() {
         super(...arguments);
         this.correlationLabel = 'correlation';
-        this.pointsLabel = 'points';
+        this.pointsLabel = '{count, plural, one {point} other {points}}';
+        this.seriesLabel = '{correlation, select, none {{y} / {x}: {count} {pointsLabel}} other {{y} / {x}: {count} {pointsLabel}, {correlationLabel} {correlation}}}';
         this.sizeBy = '';
         this.trend = false;
         this.drawn = [];
@@ -72,6 +73,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
             this.nearest = undefined;
         };
     }
+    static { this.words = 'helix-scatter-chart'; }
     connectedCallback() {
         super.connectedCallback();
         this.pointer.axis = 'none';
@@ -137,7 +139,7 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         <div id=${CHART_PLOT} part="plot"></div>
       </div>`;
         }
-        const format = formatNumbers(this.locale);
+        const format = formatNumbers(wordsLocale(this));
         const along = linear(field.x, [0, PLOT_WIDTH]);
         const up = linear(field.y, [PLOT_HEIGHT, 0]);
         return html `<div dir="ltr" part="plane">
@@ -216,11 +218,18 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
         });
     }
     renderSummary(field) {
+        const coefficient = coefficientIn(wordsLocale(this));
         const clauses = field.yNames.map((name, depth) => {
             const pairs = field.pairs[depth] ?? [];
             const r = correlation(pairs);
-            const strength = r === undefined ? '' : `, ${this.correlationLabel} ${coefficientIn(this.locale).format(r)}`;
-            return `${name} / ${field.xName}: ${pairs.length} ${this.pointsLabel}${strength}`;
+            return formatWords(this, 'seriesLabel', {
+                correlation: r === undefined ? 'none' : coefficient.format(r),
+                correlationLabel: this.correlationLabel,
+                count: pairs.length,
+                pointsLabel: formatWords(this, 'pointsLabel', { count: pairs.length }),
+                x: field.xName,
+                y: name,
+            });
         });
         const named = this.named ? `${this.named}. ` : '';
         return html `<p id="helix-chart-summary" part="summary">${named}${clauses.join('; ')}.</p>`;
@@ -246,14 +255,20 @@ let HelixHeadlessScatterChart = class HelixHeadlessScatterChart extends MixinCha
     }
 };
 __decorate([
+    words,
     property({ attribute: 'correlation-label' })
 ], HelixHeadlessScatterChart.prototype, "correlationLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessScatterChart.prototype, "gridlines", void 0);
 __decorate([
+    words,
     property({ attribute: 'points-label' })
 ], HelixHeadlessScatterChart.prototype, "pointsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'series-label' })
+], HelixHeadlessScatterChart.prototype, "seriesLabel", void 0);
 __decorate([
     property({ attribute: 'size-by' })
 ], HelixHeadlessScatterChart.prototype, "sizeBy", void 0);

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

@@ -104,6 +104,11 @@ declare const HelixHeadlessSelect_base: (new (...args: any[]) => import("@fusion
  * @cssstate open - While the list is open.
  */
 export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-select': { placeholder: 'Auswählen' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** The region a choice made on the closed trigger is said from. */
     private readonly status;
@@ -194,6 +199,12 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * write a function in markup.
      */
     valueContent?: ((chosen: readonly HelixHeadlessOption[]) => unknown) | undefined;
+    /**
+     * The message reported when the field is required and nothing is chosen.
+     * Absent, or empty, is this sentence, or the words registered for the page's
+     * locale.
+     */
+    valueMissingMessage: string;
     /**
      * Which option is chosen, as an index, or `-1` where none is.
      *