@fusion.dev/helix-headless 0.148.0 → 0.149.0

package/dist/carousel/root/carousel-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 { ChildrenController, capturePointer, customElement, fillTemplate, HelixActivateEvent, HelixElement, HelixSelectEvent, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { ChildrenController, capturePointer, customElement, formatWords, HelixActivateEvent, HelixElement, HelixSelectEvent, hostAria, inlineStep, isRtl, requestChange, words, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight, play, stop } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -192,6 +192,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             }
         };
     }
+    static { this.words = 'helix-carousel'; }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
@@ -415,7 +416,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         if (changed.has('index')) {
             this.showing = undefined;
             if (this.hasUpdated) {
-                this.said = fillTemplate(this.slideLabel, {
+                this.said = formatWords(this, 'slideLabel', {
                     count: this.slides.length,
                     index: this.index + 1,
                 });
@@ -565,7 +566,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             part="slide"
             role="group"
             aria-roledescription=${this.slideRoleLabel || nothing}
-            aria-label=${fillTemplate(this.slideLabel, { count: this.slides.length, index: index + 1 })}
+            aria-label=${formatWords(this, 'slideLabel', { count: this.slides.length, index: index + 1 })}
             style=${this.paneStyle(index, last, stops)}
           >
             <slot
@@ -576,14 +577,14 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
       </div>
       ${''}<span part="live" aria-live=${rotating ? 'off' : 'polite'}>${this.said}</span>
       ${this.slides.length > 1 && this.across !== undefined
-            ? html `<div part="indicators" role="group" aria-label=${fillTemplate(this.indicatorsLabel, { label: this.label })}>
+            ? html `<div part="indicators" role="group" aria-label=${formatWords(this, 'indicatorsLabel', { label: this.label })}>
               ${''}
               ${stops.map((stop, at) => {
                 const current = at === showing;
                 return html `<button
                   part="indicator${current ? ' indicator-current' : ''}"
                   type="button"
-                  aria-label=${fillTemplate(this.indicatorLabel, { index: at + 1 })}
+                  aria-label=${formatWords(this, 'indicatorLabel', { index: at + 1 })}
                   aria-current=${at === place ? 'true' : nothing}
                   tabindex=${at === place ? '0' : '-1'}
                   ?data-current=${current}
@@ -608,15 +609,18 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessCarousel.prototype, "index", null);
 __decorate([
+    words,
     property({ attribute: 'indicator-label' })
 ], HelixHeadlessCarousel.prototype, "indicatorLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'indicators-label' })
 ], HelixHeadlessCarousel.prototype, "indicatorsLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessCarousel.prototype, "interval", void 0);
 __decorate([
+    words,
     property()
 ], HelixHeadlessCarousel.prototype, "label", void 0);
 __decorate([
@@ -626,6 +630,7 @@ __decorate([
     property({ attribute: 'mouse-drag', reflect: true, type: Boolean })
 ], HelixHeadlessCarousel.prototype, "mouseDrag", void 0);
 __decorate([
+    words,
     property({ attribute: 'next-label' })
 ], HelixHeadlessCarousel.prototype, "nextLabel", void 0);
 __decorate([
@@ -638,24 +643,30 @@ __decorate([
     property({ attribute: 'per-view', converter: COUNT_OR_AUTO, reflect: true })
 ], HelixHeadlessCarousel.prototype, "perView", void 0);
 __decorate([
+    words,
     property({ attribute: 'previous-label' })
 ], HelixHeadlessCarousel.prototype, "previousLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'role-label' })
 ], HelixHeadlessCarousel.prototype, "roleLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'slide-label' })
 ], HelixHeadlessCarousel.prototype, "slideLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'slide-role-label' })
 ], HelixHeadlessCarousel.prototype, "slideRoleLabel", void 0);
 __decorate([
     property({ attribute: 'slides-per-move', type: Number })
 ], HelixHeadlessCarousel.prototype, "slidesPerMove", void 0);
 __decorate([
+    words,
     property({ attribute: 'start-label' })
 ], HelixHeadlessCarousel.prototype, "startLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'stop-label' })
 ], HelixHeadlessCarousel.prototype, "stopLabel", void 0);
 __decorate([

package/dist/chat/composer/chat-composer.d.ts

@@ -47,6 +47,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart tools - The row under the field.
  */
 export declare class HelixHeadlessChatComposer extends HelixFormElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-chat-composer': { sendLabel: 'Senden' } })`.
+     */
+    static words: string;
     /**
      * The field's name, read by screen readers.
      */

package/dist/chat/composer/chat-composer.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, DelayController, HelixFormElement, HelixSendEvent, HelixTypingEvent, hostAria, markRegion, } from '@fusion.dev/helix-core';
+import { customElement, DelayController, HelixFormElement, HelixSendEvent, HelixTypingEvent, hostAria, markRegion, words, } from '@fusion.dev/helix-core';
 import { arrowElbowDownLeft } from '@fusion.dev/helix-icons';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -43,6 +43,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
             this.send();
         };
     }
+    static { this.words = 'helix-chat-composer'; }
     get typing() {
         return this.writing;
     }
@@ -136,6 +137,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
     }
 };
 __decorate([
+    words,
     property()
 ], HelixHeadlessChatComposer.prototype, "label", void 0);
 __decorate([
@@ -145,6 +147,7 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessChatComposer.prototype, "rows", void 0);
 __decorate([
+    words,
     property({ attribute: 'send-label' })
 ], HelixHeadlessChatComposer.prototype, "sendLabel", void 0);
 __decorate([

package/dist/chat/message/chat-message.d.ts

@@ -3,8 +3,8 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * What a turn that did not send is called, where nobody said otherwise.
  *
- * Exported because the transcript says it too: a failure is announced in the
- * words the turn shows, and two defaults for one phrase are two phrases.
+ * @deprecated The English of `failed-label`, which is now a word property:
+ * register its words with `registerWords`. Removed in the next major version.
  */
 export declare const FAILED_LABEL = "Not sent";
 /**
@@ -55,6 +55,11 @@ export declare const FAILED_LABEL = "Not sent";
  * @csspart time - The turn's time.
  */
 export declare class HelixHeadlessChatMessage extends HelixElement {
+    /**
+     * The key this part's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-chat-message': { retryLabel: 'Erneut versuchen' } })`.
+     */
+    static words: string;
     /**
      * The turn's time, in any format `Date` parses.
      */
@@ -82,9 +87,8 @@ export declare class HelixHeadlessChatMessage extends HelixElement {
      */
     failedLabel: string;
     /**
-     * Locale for the timestamp.
-     *
-     * Empty is the runtime's own.
+     * The locale the timestamp and the words are in, as a BCP 47 tag such as
+     * `de`. Empty reads the nearest `lang`, then the browser's language.
      */
     locale: string;
     /**

package/dist/chat/message/chat-message.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, HelixSendEvent, hostAria, markRegion, RelativeClockController, relativeTime, requestChange, TONE_MARKS, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixSendEvent, hostAria, markRegion, RelativeClockController, relativeTime, requestChange, TONE_MARKS, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -15,7 +15,7 @@ let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixEleme
         super(...arguments);
         this.at = '';
         this.authorLabel = '';
-        this.failedLabel = FAILED_LABEL;
+        this.failedLabel = 'Not sent';
         this.locale = '';
         this.retryLabel = 'Try again';
         this.sendingLabel = 'Sending';
@@ -24,7 +24,7 @@ let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixEleme
         this.clock = new RelativeClockController(this, {
             expires: (now) => {
                 const moment = this.moment;
-                return moment ? relativeTime(this.locale)(moment, now).next : undefined;
+                return moment ? relativeTime(wordsLocale(this))(moment, now).next : undefined;
             },
         });
         this.handleFill = () => {
@@ -49,6 +49,7 @@ let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixEleme
             });
         };
     }
+    static { this.words = 'helix-chat-message'; }
     get moment() {
         if (this.at === '') {
             return undefined;
@@ -66,7 +67,7 @@ let HelixHeadlessChatMessage = class HelixHeadlessChatMessage extends HelixEleme
     }
     get reading() {
         const moment = this.moment;
-        return moment ? relativeTime(this.locale)(moment, new Date(this.clock.now)).text : '';
+        return moment ? relativeTime(wordsLocale(this))(moment, new Date(this.clock.now)).text : '';
     }
     get name() {
         return turnName(authorWords(this.author, this.authorLabel, this.turnWords), this.reading, this.turnWords);
@@ -142,15 +143,18 @@ __decorate([
     property({ attribute: 'author-label' })
 ], HelixHeadlessChatMessage.prototype, "authorLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'failed-label' })
 ], HelixHeadlessChatMessage.prototype, "failedLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessChatMessage.prototype, "locale", void 0);
 __decorate([
+    words,
     property({ attribute: 'retry-label' })
 ], HelixHeadlessChatMessage.prototype, "retryLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'sending-label' })
 ], HelixHeadlessChatMessage.prototype, "sendingLabel", void 0);
 __decorate([

package/dist/chat/naming.js

@@ -1,4 +1,4 @@
-import { fillTemplate } from '@fusion.dev/helix-core';
+import { formatMessage } from '@fusion.dev/helix-core';
 export const TURN_WORDS = { me: 'You', sentence: '{author}, {time}', turn: 'Message' };
 export const authorWords = (author, authorLabel, words) => {
     if (authorLabel !== '') {
@@ -10,5 +10,5 @@ export const authorWords = (author, authorLabel, words) => {
     return author === undefined || author === 'them' ? '' : author;
 };
 export const turnName = (author, time, words) => author !== '' && time !== ''
-    ? fillTemplate(words.sentence, { author, time })
+    ? formatMessage(words.sentence, { author, time }, '')
     : author || time || words.turn;

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

@@ -1,6 +1,6 @@
 import { ChildrenController, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import { type HelixHeadlessChatMessage } from '../message/chat-message.js';
+import type { HelixHeadlessChatMessage } from '../message/chat-message.js';
 /** One turn handed over as data, which is what `turns` holds. */
 export interface ChatTurn {
     /** When it was said, as anything `Date` parses. */
@@ -128,6 +128,11 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * @csspart typing - The words that say who is typing, in the status band, while `typing` names someone.
  */
 export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-chat': { typingLabel: '{author} schreibt' } })`.
+     */
+    static words: string;
     /**
      * Slots are assigned manually, so only the turns go into the log.
      *
@@ -159,6 +164,19 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * so a default of true had no attribute that turned it off.
      */
     defaultPinned: boolean;
+    /**
+     * What a turn from `turns` that did not send says, and what a screen reader
+     * hears before its words. A turn you write as a child says its own
+     * `failed-label`.
+     */
+    failedLabel: string;
+    /**
+     * What a screen reader hears for a turn that did not send. `{failed}` is the
+     * turn's `failed-label` and `{text}` is its words.
+     */
+    failedTurnLabel: string;
+    /** The conversation's name, read by screen readers, where `label` is empty. */
+    fallbackLabel: string;
     /**
      * Whether there are older turns to load, and whether they are loading.
      *
@@ -376,6 +394,14 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      * turn; what they were reading is the one fixed point. It is also idempotent,
      * which is what lets it run beside the browser's own scroll anchoring where
      * there is some: a turn the browser already put back has not moved.
+     *
+     * **A transcript fed as data writes no scroll offset while the reader
+     * scrolls.** Turns drawn above the reader for the first time come out taller
+     * or shorter than the estimate, and a write to `scrollTop` to make up for
+     * them ends a fling on iOS. While the reader scrolls, the controller holds
+     * them instead, in its spacer above the window, and squares the scroll offset
+     * once the log is still. The turn noted before a scroll whose event has not
+     * arrived is out of date, so that counts as scrolling too.
      */
     private restore;
     /** Fires `helix-history` once for each time the reader reaches the top. */

package/dist/chat/root/chat-root.js

@@ -5,13 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessChat_1;
-import { ChildrenController, customElement, fillTemplate, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, whenHydrated, wordsConverter, } from '@fusion.dev/helix-core';
+import { ChildrenController, customElement, formatWords, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, whenHydrated, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
-import { FAILED_LABEL } from '../message/chat-message.js';
 import { TURN_WORDS } from '../naming.js';
 const REGIONS = ['header', 'actions', 'resume', 'status', 'composer'];
 const SECOND_NAMES = {
@@ -37,11 +36,15 @@ const spoken = (message) => [...message.childNodes]
     .join('')
     .replace(/\s+/g, ' ')
     .trim();
+const drawnInFull = ({ element }) => element.firstElementChild?.hasUpdated !== false;
 let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
         this.authorStyles = {};
         this.defaultPinned = true;
+        this.failedLabel = 'Not sent';
+        this.failedTurnLabel = '{failed}: {text}';
+        this.fallbackLabel = 'Conversation';
         this.history = '';
         this.historyText = 'Loading earlier messages';
         this.label = '';
@@ -67,10 +70,11 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.newest = undefined;
         this.pending = new Set();
         this.virtualize = new VirtualizeController(this, {
+            anchor: () => !this.pinned && this.virtualize.scrolling(),
             container: () => (this.fed ? this.log : null),
             count: () => this.turns.length,
             estimate: () => HelixHeadlessChat_1.ESTIMATE,
-            rows: () => (this.fed ? this.drawn() : []),
+            rows: () => (this.fed ? this.drawn().filter(drawnInFull) : []),
         });
         this.filled = undefined;
         this.handleResize = () => {
@@ -78,6 +82,9 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
                 this.stick();
             }
             else {
+                if (this.fed) {
+                    this.virtualize.settle();
+                }
                 this.restore();
             }
             this.remember();
@@ -108,6 +115,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         };
     }
     static { HelixHeadlessChat_1 = this; }
+    static { this.words = 'helix-chat'; }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
@@ -159,7 +167,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         if (this.fed) {
             return this.turns.map((turn) => ({
                 author: turn.author,
-                failed: FAILED_LABEL,
+                failed: this.failedLabel,
                 id: this.identity(turn),
                 state: turn.state,
                 text: turn.text,
@@ -259,7 +267,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     restore() {
         const log = this.log;
         const anchor = this.anchor;
-        if (!log || !anchor) {
+        if (!log || !anchor || (this.fed && this.virtualize.scrolling())) {
             return;
         }
         const found = this.rendered().find((turn) => turn.id === anchor.id);
@@ -328,7 +336,9 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         return at < 0 ? [] : turns.slice(at + 1);
     }
     phrase(turn) {
-        return turn.state === 'failed' ? `${turn.failed}: ${turn.text}` : turn.text;
+        return turn.state === 'failed'
+            ? formatWords(this, 'failedTurnLabel', { failed: turn.failed, text: turn.text })
+            : turn.text;
     }
     watchSizes() {
         if (typeof ResizeObserver === 'undefined') {
@@ -368,7 +378,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label || 'Conversation', role: 'region' });
+        hostAria(this.internals, { label: this.label || this.fallbackLabel, role: 'region' });
         if (changed.has('meLabel') || changed.has('messageLabel') || changed.has('turnLabel')) {
             this.words = { me: this.meLabel, sentence: this.messageLabel, turn: this.turnLabel };
         }
@@ -437,6 +447,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
               at=${turn.at ?? nothing}
               style=${ownEntry(this.authorStyles, turn.author) ?? nothing}
               .turnWords=${this.words}
+              .failedLabel=${this.failedLabel}
               state=${turn.state ?? nothing}
             >${turn.text}</${message}>
           </div>`)}
@@ -457,7 +468,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         part="log"
         role="log"
         aria-live="off"
-        aria-label=${this.label || 'Conversation'}
+        aria-label=${this.label || this.fallbackLabel}
         aria-busy=${busy ? 'true' : nothing}
         ?data-windowed=${fed}
         @scroll=${this.handleScroll}
@@ -476,7 +487,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
             ? nothing
             : html `<span part="typing"
                 ><span part="indicator" aria-hidden="true"></span
-                >${fillTemplate(this.typingLabel, { author: this.typing })}</span
+                >${formatWords(this, 'typingLabel', { author: this.typing })}</span
               >`}
       </div>
       <div part="composer" ?hidden=${!this.has('composer')}>
@@ -490,19 +501,34 @@ __decorate([
 __decorate([
     property({ attribute: 'default-pinned', converter: onUnlessFalse })
 ], HelixHeadlessChat.prototype, "defaultPinned", void 0);
+__decorate([
+    words,
+    property({ attribute: 'failed-label' })
+], HelixHeadlessChat.prototype, "failedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'failed-turn-label' })
+], HelixHeadlessChat.prototype, "failedTurnLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixHeadlessChat.prototype, "fallbackLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessChat.prototype, "history", void 0);
 __decorate([
+    words,
     property({ attribute: 'history-text' })
 ], HelixHeadlessChat.prototype, "historyText", void 0);
 __decorate([
     property()
 ], HelixHeadlessChat.prototype, "label", void 0);
 __decorate([
+    words,
     property({ attribute: 'me-label' })
 ], HelixHeadlessChat.prototype, "meLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'message-label' })
 ], HelixHeadlessChat.prototype, "messageLabel", void 0);
 __decorate([
@@ -512,6 +538,7 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessChat.prototype, "threshold", void 0);
 __decorate([
+    words,
     property({ attribute: 'turn-label' })
 ], HelixHeadlessChat.prototype, "turnLabel", void 0);
 __decorate([
@@ -521,6 +548,7 @@ __decorate([
     property()
 ], HelixHeadlessChat.prototype, "typing", void 0);
 __decorate([
+    words,
     property({ attribute: 'typing-label' })
 ], HelixHeadlessChat.prototype, "typingLabel", void 0);
 __decorate([

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

@@ -66,6 +66,11 @@ declare const HelixHeadlessCheckbox_base: (new (...args: any[]) => import("@fusi
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessCheckbox extends HelixHeadlessCheckbox_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-checkbox': { valueMissingMessage: '...' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /** A click on the element itself, `click()` or a page's `<label for>`, toggles it. */
     protected readonly clicks: HostClickController;
@@ -83,6 +88,12 @@ export declare class HelixHeadlessCheckbox extends HelixHeadlessCheckbox_base {
      * The value submitted when the box is checked.
      */
     value: string;
+    /**
+     * The message reported when the field is required and the box is not ticked.
+     * Absent, or empty, is this sentence, or the words registered for the page's
+     * locale.
+     */
+    valueMissingMessage: string;
     /**
      * Whether the mark draws the dash: from the moment the box is indeterminate
      * until it is checked.

package/dist/checkbox/root/checkbox-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, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, slotFilled, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, HostClickController, MixinControllerChecked, MixinField, slotFilled, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerChecked(MixinField(HelixFormElement)) {
@@ -16,6 +16,7 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         this.clicks = new HostClickController(this, () => this.partNamed('control'));
         this.indeterminate = false;
         this.value = 'on';
+        this.valueMissingMessage = 'Tick this box to continue.';
         this.dashed = false;
         this.handleChange = (event) => {
             const input = event.target;
@@ -43,13 +44,14 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
             }
         };
     }
+    static { this.words = 'helix-checkbox'; }
     static { this.shadowRootOptions = {
         ...HelixFormElement.shadowRootOptions,
         delegatesFocus: true,
     }; }
     sync() {
         this.internals.setFormValue(this.checked ? this.value : null);
-        this.reportRequired(!this.checked, 'Tick this box to continue.', 'control');
+        this.reportRequired(!this.checked, this.valueMissingMessage, 'control');
     }
     formResetCallback() {
         super.formResetCallback();
@@ -120,6 +122,10 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessCheckbox.prototype, "value", void 0);
+__decorate([
+    words,
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessCheckbox.prototype, "valueMissingMessage", void 0);
 HelixHeadlessCheckbox = __decorate([
     customElement('helix-headless-checkbox')
 ], HelixHeadlessCheckbox);

package/dist/checkbox-group/root/checkbox-group-root.d.ts

@@ -71,6 +71,11 @@ declare const HelixHeadlessCheckboxGroup_base: (new (...args: any[]) => import("
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGroup_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-checkbox-group': { selectAllLabel: 'Alle auswählen' } })`.
+     */
+    static words: string;
     /**
      * Whether a box above the set checks or unchecks every enabled box.
      */
@@ -88,6 +93,12 @@ export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGro
      */
     get value(): string;
     set value(next: string);
+    /**
+     * The message reported when the field is required and no box is ticked.
+     * Absent, or empty, is this sentence, or the words registered for the page's
+     * locale.
+     */
+    valueMissingMessage: string;
     /**
      * The checked values, as a list, in the order the boxes are written.
      *

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

@@ -5,18 +5,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessCheckboxGroup_1;
-import { commaList, customElement, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, } from '@fusion.dev/helix-core';
+import { commaList, customElement, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import { HelixHeadlessCheckbox } from '../../checkbox/root/checkbox-root.js';
 import '../../checkbox/index.js';
 import { selectAllPress, selectAllState } from '../select-all.js';
-let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadlessCheckboxGroup extends MixinField(HelixFormElement) {
+let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinField(HelixFormElement) {
     constructor() {
         super(...arguments);
         this.selectAll = false;
         this.selectAllLabel = 'Select all';
+        this.valueMissingMessage = 'Choose at least one to continue.';
         this.declared = [];
         this.checking = undefined;
         this.pending = false;
@@ -72,6 +73,8 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
             this.announceChange();
         };
     }
+    static { HelixHeadlessCheckboxGroup_1 = this; }
+    static { this.words = 'helix-checkbox-group'; }
     get value() {
         return this.values.join(',');
     }
@@ -175,7 +178,7 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
     }
     validate() {
         this.judged = this.value;
-        this.reportRequired(this.judged === '', 'Choose at least one to continue.', 'items');
+        this.reportRequired(this.judged === '', this.valueMissingMessage, 'items');
     }
     updated(changed) {
         super.updated(changed);
@@ -223,11 +226,16 @@ __decorate([
     property({ attribute: 'select-all', type: Boolean })
 ], HelixHeadlessCheckboxGroup.prototype, "selectAll", void 0);
 __decorate([
+    words,
     property({ attribute: 'select-all-label' })
 ], HelixHeadlessCheckboxGroup.prototype, "selectAllLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessCheckboxGroup.prototype, "value", null);
+__decorate([
+    words,
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessCheckboxGroup.prototype, "valueMissingMessage", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessCheckboxGroup.prototype, "values", null);