@fusion.dev/helix-headless 0.147.0 → 0.149.0

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 { 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 = '';
@@ -56,7 +59,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.announcement = '';
         this.said = 0;
         this.words = TURN_WORDS;
-        this.watcher = undefined;
+        this.childWatch = new ChildrenController(this, () => this.handleSlotChange());
         this.settling = undefined;
         this.grower = undefined;
         this.watched = [];
@@ -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') {
@@ -349,8 +359,6 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     }
     connectedCallback() {
         super.connectedCallback();
-        this.watcher = new MutationObserver(this.handleSlotChange);
-        this.watcher.observe(this, { childList: true });
         this.settling = new MutationObserver(this.handleSettle);
         this.settling.observe(this, { attributeFilter: ['state'], subtree: true });
         this.opening = true;
@@ -363,8 +371,6 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.watcher?.disconnect();
-        this.watcher = undefined;
         this.settling?.disconnect();
         this.settling = undefined;
         this.grower?.disconnect();
@@ -372,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 };
         }
@@ -441,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>`)}
@@ -461,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}
@@ -480,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')}>
@@ -494,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([
@@ -516,6 +538,7 @@ __decorate([
     property({ type: Number })
 ], HelixHeadlessChat.prototype, "threshold", void 0);
 __decorate([
+    words,
     property({ attribute: 'turn-label' })
 ], HelixHeadlessChat.prototype, "turnLabel", void 0);
 __decorate([
@@ -525,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.
      *
@@ -96,8 +107,21 @@ export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGro
      */
     get values(): string[];
     set values(next: string[]);
+    /**
+     * Writes the set the boxes are given at the next update: by value, or, for
+     * a set a press decided, by box.
+     */
+    private choose;
     /** The values last written, which the boxes are given at the next update. */
     private declared;
+    /**
+     * The boxes to check at the next update, where a press on a box or on the
+     * select-all box decided the set.
+     *
+     * **By box, since boxes can share a value.** Boxes written with no `value`
+     * all submit `on`, and pushed by value, a press on one checked every one.
+     */
+    private checking;
     /**
      * Whether `declared` has yet to reach the boxes.
      *

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

@@ -5,19 +5,21 @@ 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, toggleEvery, } 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 { selectAllState } from '../select-all.js';
-let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadlessCheckboxGroup extends MixinField(HelixFormElement) {
+import { selectAllPress, selectAllState } from '../select-all.js';
+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;
         this.watched = new Set();
         this.member = {
@@ -41,14 +43,13 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
                 return;
             }
             const wanted = event.detail.checked;
-            const next = this.boxes
-                .filter((box) => (box === changed ? wanted : box.checked))
-                .map((box) => box.value);
+            const checking = this.boxes.filter((box) => (box === changed ? wanted : box.checked));
+            const next = checking.map((box) => box.value);
             if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next.join(',') }))) {
                 event.preventDefault();
                 return;
             }
-            this.values = next;
+            this.choose(next, checking);
             this.announceInput();
             this.announceChange();
         };
@@ -60,16 +61,20 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
         this.handleSelectAll = (event) => {
             event.preventDefault();
             event.stopPropagation();
-            const boxes = this.setBoxes();
-            const next = toggleEvery(boxes.filter((box) => box.checked).map((box) => box.value), boxes.filter((box) => !box.disabled).map((box) => box.value), boxes.map((box) => box.value));
+            const boxes = this.boxes;
+            const pressed = selectAllPress(this.setBoxes());
+            const checking = boxes.filter((_, at) => pressed[at]);
+            const next = checking.map((box) => box.value);
             if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next.join(',') }))) {
                 return;
             }
-            this.values = next;
+            this.choose(next, checking);
             this.announceInput();
             this.announceChange();
         };
     }
+    static { HelixHeadlessCheckboxGroup_1 = this; }
+    static { this.words = 'helix-checkbox-group'; }
     get value() {
         return this.values.join(',');
     }
@@ -86,8 +91,12 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
             : boxes.filter((box) => box.checked).map((box) => box.value);
     }
     set values(next) {
+        this.choose(next);
+    }
+    choose(next, boxes) {
         const previous = this.value;
         this.declared = [...next];
+        this.checking = boxes ? new Set(boxes) : undefined;
         this.pending = true;
         this.requestUpdate('value', previous);
     }
@@ -125,8 +134,10 @@ let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadl
         }
         this.pending = false;
         const wanted = new Set(this.declared);
+        const checking = this.checking;
+        this.checking = undefined;
         for (const box of boxes) {
-            box.checked = wanted.has(box.value);
+            box.checked = checking ? checking.has(box) : wanted.has(box.value);
         }
     }
     connectedCallback() {
@@ -167,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);
@@ -215,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);

package/dist/checkbox-group/select-all.d.ts

@@ -19,3 +19,14 @@ export declare const selectAllState: (boxes: readonly SetBox[]) => {
     checked: boolean;
     indeterminate: boolean;
 };
+/**
+ * What a press on the select-all box does to each box, in the set's order:
+ * every enabled box checked, or every one cleared once all of them are, with a
+ * disabled box keeping its state. A set with no enabled box stays as it is.
+ *
+ * **By box and not by value**, so boxes that share a value, such as boxes
+ * written with none, which all submit `on`, are each moved on their own: by
+ * value, one checked box made every box with its value count as checked, and
+ * the press cleared the set where it should have filled it.
+ */
+export declare const selectAllPress: (boxes: readonly SetBox[]) => boolean[];

package/dist/checkbox-group/select-all.js

@@ -5,3 +5,8 @@ export const selectAllState = (boxes) => {
     const checked = counted.length > 0 && ticked === counted.length;
     return { checked, indeterminate: ticked > 0 && !checked };
 };
+export const selectAllPress = (boxes) => {
+    const enabled = boxes.filter((box) => !box.disabled);
+    const every = enabled.length > 0 && enabled.every((box) => box.checked);
+    return boxes.map((box) => (box.disabled ? box.checked : !every));
+};

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

@@ -78,7 +78,7 @@ import '../../copy-button/index.js';
  * @csspart gutter - The line numbers beside the code, shown when `line-numbers` is set.
  * @csspart header - The bar that holds the name and the copy button, shown when there is a name.
  * @csspart hunk - In a diff, a `@@` line saying where the lines under it are.
- * @csspart label - The file name or language, where one is given.
+ * @csspart label - The block's name: its `label`, or its `language` where it has no label.
  * @csspart marker - In a diff, the `+`, `-`, or space that starts a line.
  * @csspart new - In a split diff, the new version's `<pre>`.
  * @csspart number - In a diff, a line number.
@@ -90,6 +90,11 @@ import '../../copy-button/index.js';
  * @cssstate expanded - The expand button has shown every line of a capped block.
  */
 export declare class HelixHeadlessCodeBlock extends HelixElement {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-code-block': { copyLabel: 'Code kopieren' } })`.
+     */
+    static words: string;
     /**
      * The expand button's words while the block shows every line.
      */
@@ -102,10 +107,15 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * The copy button's name and tooltip text before a copy.
      *
      * Where the block has a name, the button says it too, such as "Copy code,
-     * app.ts", so each copy button on a page with several blocks is told apart.
-     * In a diff, that is each file's own name.
+     * app.ts", as `copy-name-label` puts it, so each copy button on a page with
+     * several blocks is told apart. In a diff, that is each file's own name.
      */
     copyLabel: string;
+    /**
+     * The copy button's name and tooltip text before a copy, where the block
+     * has a name. `{copy}` is `copy-label` and `{name}` the block's name.
+     */
+    copyNameLabel: string;
     /**
      * Whether the content is a unified diff, drawn as the lines it changed.
      *
@@ -151,18 +161,20 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      */
     highlight?: (code: string, language: string) => string;
     /**
-     * The block's name, usually a file name or a language.
+     * The block's name, usually a file name, drawn in the header.
      *
-     * In a diff, each file is named from the patch, and this names a patch that
-     * carries no name of its own.
+     * Absent, the block is named by `language` where there is one. In a diff,
+     * each file is named from the patch, and this names a patch that carries no
+     * name of its own.
      */
     label: string;
     /**
      * The language the code is written in, such as `ts` or `css`, handed to
      * `highlight` as its second argument.
      *
-     * Absent hands it an empty string. It draws nothing of its own: the block's
-     * name is `label`.
+     * A block with no `label` is named by it, in the header and on the copy
+     * button, as a docs site names a snippet by its language. Absent hands
+     * `highlight` an empty string and names nothing.
      */
     language: string;
     /**

package/dist/code-block/root/code-block-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 } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixElement, words } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -19,6 +19,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.collapseLabel = 'Show fewer lines';
         this.copiedLabel = 'Copied';
         this.copyLabel = 'Copy code';
+        this.copyNameLabel = '{copy}, {name}';
         this.diff = false;
         this.expandable = false;
         this.expandLabel = 'Show all lines';
@@ -38,6 +39,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             }
         };
     }
+    static { this.words = 'helix-code-block'; }
     get files() {
         if (!this.diff) {
             return [];
@@ -109,10 +111,11 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         const gutter = this.lineNumbers
             ? html `<span part="gutter" aria-hidden="true">${lines === 0 ? nothing : gutterNumbers(lines)}</span>`
             : nothing;
-        return html `${this.renderHeader(this.label)}
+        const name = this.label || this.language;
+        return html `${this.renderHeader(name)}
       <div part="frame">
         <pre id="block" part="block">${gutter}${code}</pre>
-        ${this.label ? nothing : this.renderCopy()}
+        ${name ? nothing : this.renderCopy()}
       </div>${this.renderExpand()}`;
     }
     renderExpand() {
@@ -140,7 +143,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     renderCopy(value, name) {
         return this.noCopy ? nothing : this.renderCopyButton(value, name);
     }
-    renderCopyButton(value = this.text, name = this.label) {
+    renderCopyButton(value = this.text, name = this.label || this.language) {
         return html `<${this.tag('copy-button')}
       part="copy"
       exportparts="button: copy-button, text: copy-text, mark: copy-mark, live: copy-live, spinner: copy-spinner, tooltip: copy-tooltip,
@@ -149,7 +152,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
         tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
       copied-label=${this.copiedLabel}
-      label=${name ? `${this.copyLabel}, ${name}` : this.copyLabel}
+      label=${name ? formatWords(this, 'copyNameLabel', { copy: this.copyLabel, name }) : this.copyLabel}
       .value=${value}
     ></${this.tag('copy-button')}>`;
     }
@@ -202,14 +205,21 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     }
 };
 __decorate([
+    words,
     property({ attribute: 'collapse-label' })
 ], HelixHeadlessCodeBlock.prototype, "collapseLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'copied-label' })
 ], HelixHeadlessCodeBlock.prototype, "copiedLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'copy-label' })
 ], HelixHeadlessCodeBlock.prototype, "copyLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'copy-name-label' })
+], HelixHeadlessCodeBlock.prototype, "copyNameLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "diff", void 0);
@@ -217,6 +227,7 @@ __decorate([
     property({ type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "expandable", void 0);
 __decorate([
+    words,
     property({ attribute: 'expand-label' })
 ], HelixHeadlessCodeBlock.prototype, "expandLabel", void 0);
 __decorate([

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

@@ -115,6 +115,11 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @cssstate open - While the picker is open.
  */
 export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-color-input': { triggerLabel: 'Farbe auswählen' } })`.
+     */
+    static words: string;
     protected readonly aria: AriaForwardController;
     /**
      * Whether the color carries an alpha channel.
@@ -180,6 +185,12 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * Colors offered under the picker, as a comma-separated list.
      */
     swatches: string;
+    /**
+     * What the swatch says in `variant="swatch"`, after the field's label, once
+     * there is a color. `{name}` is the color's name, such as "vibrant red", and
+     * `{value}` the value as written.
+     */
+    swatchLabel: string;
     /**
      * Accessible name for the control that opens the panel.
      */
@@ -232,6 +243,8 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * field. It carries `id="control"` there for the same reason.
      */
     protected get anchor(): HTMLElement | null;
+    /** The swatch's words in `swatch`, which its label points at, and never drawn. */
+    private renderSwatchValue;
     /** What the picker should show, which is only ever a color. */
     private get picked();
     /**