@fusion.dev/helix 0.147.0 → 0.149.0

package/dist/notifications/root/notifications-root.js

@@ -6,14 +6,26 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessNotifications } from '@fusion.dev/helix-headless/notifications';
+import { property } from 'lit/decorators.js';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
+import { HelixNotification } from '../notification/notification.js';
 import { styles } from './notifications-root.css.js';
-import '../notification/notification.js';
 let HelixNotifications = class HelixNotifications extends HelixHeadlessNotifications {
     static { this.tier = 'helix-'; }
     static { this.styles = [liveStyles, collectionStateStyles, styles]; }
+    updated(changed) {
+        super.updated(changed);
+        for (const item of this.items) {
+            if (item instanceof HelixNotification) {
+                item.feedSeparation = this.separation;
+            }
+        }
+    }
 };
+__decorate([
+    property({ reflect: true })
+], HelixNotifications.prototype, "separation", void 0);
 HelixNotifications = __decorate([
     customElement('helix-notifications')
 ], HelixNotifications);

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

@@ -63,6 +63,11 @@ import { type OrbState } from '../shapes.js';
  * @cssstate working - The orb shows `working`.
  */
 export declare class HelixOrb extends HelixElement {
+    /**
+     * The key this family's words are registered under, its tag:
+     * `registerWords('de', { 'helix-orb': { stateLabels: { thinking: 'Denkt nach' } } })`.
+     */
+    static words: string;
     static styles: CSSResultGroup;
     /**
      * Says each new state politely, such as "Working" and then "Done".

package/dist/orb/root/orb-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, hostAria, PaintGateController, readColor, wordsConverter, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, PaintGateController, readColor, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
@@ -14,15 +14,6 @@ const MORPH_NEAR = 380;
 const MORPH_REACH = 580;
 const LIGHT_Y = 0.36;
 const STILL_PHASE = 1.4;
-const LABELS = {
-    connecting: 'Connecting',
-    done: 'Done',
-    fetching: 'Fetching',
-    listening: 'Listening',
-    thinking: 'Thinking',
-    waiting: 'Waiting',
-    working: 'Working',
-};
 const GRAY = [128, 128, 128];
 let HelixOrb = class HelixOrb extends HelixElement {
     constructor() {
@@ -30,7 +21,15 @@ let HelixOrb = class HelixOrb extends HelixElement {
         this.announce = false;
         this.label = '';
         this.state = 'thinking';
-        this.stateLabels = {};
+        this.stateLabels = {
+            connecting: 'Connecting',
+            done: 'Done',
+            fetching: 'Fetching',
+            listening: 'Listening',
+            thinking: 'Thinking',
+            waiting: 'Waiting',
+            working: 'Working',
+        };
         this.context = null;
         this.gate = new PaintGateController(this, {
             canRun: () => !!this.context && !this.lost,
@@ -69,6 +68,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
             this.gate.play();
         };
     }
+    static { this.words = 'helix-orb'; }
     static { this.styles = [liveStyles, styles]; }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -95,7 +95,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
             : 'thinking';
     }
     get word() {
-        return this.stateLabels?.[this.shown] || LABELS[this.shown];
+        return this.stateLabels?.[this.shown] ?? '';
     }
     render() {
         return html `<canvas part="canvas" aria-hidden="true"></canvas>${this.announce ? html `<span part="live">${this.word}</span>` : nothing}`;
@@ -264,6 +264,7 @@ __decorate([
     property()
 ], HelixOrb.prototype, "state", void 0);
 __decorate([
+    words,
     property({ attribute: 'state-labels', converter: wordsConverter })
 ], HelixOrb.prototype, "stateLabels", void 0);
 HelixOrb = __decorate([

package/dist/pagination/root/pagination-root.css.js

@@ -1,37 +1,37 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {align-items: center;display: flex;flex-wrap: wrap;font-size: var(--helix-text-sm);gap: var(--pagination-gap, var(--helix-space-2xs));}[part="list"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--pagination-gap, var(--helix-space-2xs));list-style: none;margin: var(--helix-space-none);padding: var(--helix-space-none);}[part="item"] {display: inline-flex;}[part="first"],
+export const styles = createSheet(`:host {align-items: center;display: flex;flex-wrap: wrap;font-size: var(--pagination-font-size, var(--helix-text-sm));gap: var(--pagination-gap, var(--helix-space-2xs));}[part="list"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--pagination-gap, var(--helix-space-2xs));list-style: none;margin: var(--helix-space-none);padding: var(--helix-space-none);}[part="item"] {display: inline-flex;}[part="first"],
 [part="gap"],
 [part="last"],
 [part~="page"],
 [part="previous"],
-[part="next"] {align-items: center;appearance: none;background-color: transparent;block-size: var(--pagination-size, var(--helix-size-control-tight));border: var(--helix-border-thin) solid transparent;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;font: inherit;font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);justify-content: center;min-inline-size: var(--pagination-size, var(--helix-size-control-tight));padding-inline: var(--helix-space-2xs);text-decoration: none;transition:
+[part="next"] {align-items: center;appearance: none;background-color: transparent;block-size: var(--pagination-size, var(--helix-size-control-tight));border: var(--helix-border-thin) solid transparent;border-radius: var(--pagination-radius, var(--helix-radii-sm));color: var(--pagination-foreground-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;font: inherit;font-variant-numeric: tabular-nums;font-weight: var(--pagination-font-weight, var(--helix-weight-medium));justify-content: center;min-inline-size: var(--pagination-size, var(--helix-size-control-tight));padding-inline: var(--pagination-padding, var(--helix-space-2xs));text-decoration: none;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 color var(--helix-duration-fast) var(--helix-easing-standard);}[part="first"]:hover,
 [part="gap"]:hover,
 [part="last"]:hover,
 [part~="page"]:hover,
 [part="previous"]:hover,
-[part="next"]:hover {background-color: var(--pagination-hover-color, var(--helix-color-surface-sunken));color: var(--helix-color-foreground);}[part="first"]:focus-visible,
+[part="next"]:hover {background-color: var(--pagination-hover-color, var(--helix-color-surface-sunken));color: var(--pagination-hover-foreground-color, var(--helix-color-foreground));}[part="first"]:focus-visible,
 [part="gap"]:focus-visible,
 [part="last"]:focus-visible,
 [part~="page"]:focus-visible,
 [part="previous"]:focus-visible,
 [part="next"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part~="page"][aria-current="page"],
-[part~="page"][aria-current="page"]:hover {background-color: var(--pagination-current-color, var(--helix-color-surface-raised));border-color: var(--helix-color-border);color: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold);}[part="first"]:disabled,
+[part~="page"][aria-current="page"]:hover {background-color: var(--pagination-current-color, var(--helix-color-surface-raised));border-color: var(--pagination-current-border-color, var(--helix-color-border));color: var(--pagination-current-foreground-color, var(--helix-color-foreground));font-weight: var(--pagination-current-font-weight, var(--helix-weight-semibold));}[part="first"]:disabled,
 [part="last"]:disabled,
 [part="previous"]:disabled,
 [part="next"]:disabled,
 [part="first"][aria-disabled="true"],
 [part="last"][aria-disabled="true"],
 [part="previous"][aria-disabled="true"],
-[part="next"][aria-disabled="true"] {color: var(--helix-color-foreground-subtle);cursor: default;opacity: 0.5;pointer-events: none;}[part="first"] svg,
+[part="next"][aria-disabled="true"] {color: var(--pagination-disabled-foreground-color, var(--helix-color-foreground-subtle));cursor: default;opacity: var(--pagination-disabled-opacity, 0.5);pointer-events: none;}[part="first"] svg,
 [part="last"] svg,
 [part="previous"] svg,
 [part="next"] svg,
 ::slotted([slot="first-icon"]),
 ::slotted([slot="last-icon"]),
 ::slotted([slot="previous-icon"]),
-::slotted([slot="next-icon"]) {block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}:host(:dir(rtl)) ::slotted([slot="first-icon"]),
+::slotted([slot="next-icon"]) {block-size: var(--pagination-icon-size, var(--helix-size-icon-tight));inline-size: var(--pagination-icon-size, var(--helix-size-icon-tight));}:host(:dir(rtl)) ::slotted([slot="first-icon"]),
 :host(:dir(rtl)) ::slotted([slot="last-icon"]),
 :host(:dir(rtl)) ::slotted([slot="previous-icon"]),
-:host(:dir(rtl)) ::slotted([slot="next-icon"]) {scale: -1 1;}[part="gap"] {color: var(--helix-color-foreground-subtle);user-select: none;}:host(:state(empty)) {display: none;}[part="status"] {color: var(--helix-color-foreground-muted);font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);padding-inline: var(--helix-space-xs);}@media print {:host {display: none;}}`);
+:host(:dir(rtl)) ::slotted([slot="next-icon"]) {scale: -1 1;}[part="gap"] {color: var(--pagination-ellipsis-foreground-color, var(--helix-color-foreground-subtle));user-select: none;}:host(:state(empty)) {display: none;}[part="status"] {color: var(--pagination-status-foreground-color, var(--helix-color-foreground-muted));font-variant-numeric: tabular-nums;font-weight: var(--pagination-font-weight, var(--helix-weight-medium));padding-inline: var(--helix-space-xs);}@media print {:host {display: none;}}`);

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

@@ -35,10 +35,24 @@ import type { CSSResultGroup } from 'lit';
  * @csspart previous - The control that moves back one page.
  * @csspart status - The text that says which page you are on, in `compact`.
  *
+ * @cssproperty --pagination-current-border-color - Edge of the page you are on.
  * @cssproperty --pagination-current-color - Fill behind the page you are on.
+ * @cssproperty --pagination-current-font-weight - Weight of the number of the page you are on.
+ * @cssproperty --pagination-current-foreground-color - Color of the number of the page you are on.
+ * @cssproperty --pagination-disabled-foreground-color - Color of a first, previous, next or last control with nowhere to go.
+ * @cssproperty --pagination-disabled-opacity - How faint a control with nowhere to go is drawn.
+ * @cssproperty --pagination-ellipsis-foreground-color - Color of the control that stands in for hidden pages.
+ * @cssproperty --pagination-font-size - Size of the numbers and the status text.
+ * @cssproperty --pagination-font-weight - Weight of the numbers and the status text.
+ * @cssproperty --pagination-foreground-color - Color of the numbers and the marks on every control.
  * @cssproperty --pagination-gap - Space between one control and the next.
  * @cssproperty --pagination-hover-color - Fill behind a control under the pointer.
+ * @cssproperty --pagination-hover-foreground-color - Color of a control's number or mark under the pointer.
+ * @cssproperty --pagination-icon-size - Size of the mark on a first, previous, next or last control, drawn or slotted.
+ * @cssproperty --pagination-padding - Space either side of a control's number or mark.
+ * @cssproperty --pagination-radius - Corner radius of every control in the row.
  * @cssproperty --pagination-size - The box every control in the row takes.
+ * @cssproperty --pagination-status-foreground-color - Color of the text that says which page you are on, in `compact`.
  */
 export declare class HelixPagination extends HelixHeadlessPagination {
     static styles: CSSResultGroup;

package/dist/pagination/size/pagination-size.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline-flex;}:host(:state(empty)) {display: none;}[part="control"] {align-items: center;flex-direction: row;gap: var(--helix-space-xs);}[part="control"]::part(label) {padding-block-end: var(--helix-space-none);white-space: nowrap;}[part="control"]::part(trigger) {block-size: var(--helix-size-control-tight);}`);
+export const styles = createSheet(`:host {display: inline-flex;}:host(:state(empty)) {display: none;}[part="control"] {align-items: center;flex-direction: row;gap: var(--pagination-size-gap, var(--helix-space-xs));}[part="control"]::part(label) {padding-block-end: var(--helix-space-none);white-space: nowrap;}[part="control"]::part(trigger) {block-size: var(--pagination-size, var(--helix-size-control-tight));}`);

package/dist/pagination/size/pagination-size.d.ts

@@ -20,6 +20,9 @@ import '../../select/index.js';
  * @documentation https://fusion.dev/helix/components/pagination
  *
  * @csspart control - The select.
+ *
+ * @cssproperty --pagination-size - Height of the select's trigger, the same hook that sizes every control in the page row.
+ * @cssproperty --pagination-size-gap - Space between the label and the select.
  */
 export declare class HelixPaginationSize extends HelixHeadlessPaginationSize {
     static tier: string;

package/dist/pagination/summary/pagination-summary.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {color: var(--helix-color-foreground-subtle);display: inline-block;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-variant-numeric: tabular-nums;}`);
+export const styles = createSheet(`:host {color: var(--pagination-summary-foreground-color, var(--helix-color-foreground-subtle));display: inline-block;font-family: var(--helix-font-sans);font-size: var(--pagination-font-size, var(--helix-text-sm));font-variant-numeric: tabular-nums;}`);

package/dist/pagination/summary/pagination-summary.d.ts

@@ -11,6 +11,9 @@ import type { CSSResultGroup } from 'lit';
  * @status stable
  * @aliases Result count, Range
  * @documentation https://fusion.dev/helix/components/pagination
+ *
+ * @cssproperty --pagination-font-size - Size of the text, the same hook that sizes the page numbers.
+ * @cssproperty --pagination-summary-foreground-color - Color of the text.
  */
 export declare class HelixPaginationSummary extends HelixHeadlessPaginationSummary {
     static styles: CSSResultGroup;

package/dist/qr-code/root/qr-code-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_qr-size: var(--qr-code-size, 12rem);background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));block-size: var(--_qr-size);border-radius: var(--helix-radii-sm);color: var(--qr-code-color, var(--helix-color-surface-media));display: block;inline-size: var(--_qr-size);position: relative;}[part="code"] {block-size: 100%;display: block;inline-size: 100%;}[part="fallback"] {align-items: center;block-size: 100%;box-sizing: border-box;display: flex;justify-content: center;overflow-wrap: anywhere;padding: var(--helix-space-md);text-align: center;}[part="finders"] {fill: var(--qr-code-finder-color, currentColor);}[part="logo"] {align-items: center;background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));border-radius: var(--helix-radii-sm);box-sizing: border-box;display: flex;inset-block-start: 50%;inset-inline-start: 50%;justify-content: center;max-block-size: var(--qr-code-logo-size, 27%);max-inline-size: var(--qr-code-logo-size, 27%);min-block-size: var(--qr-code-logo-size, 27%);min-inline-size: var(--qr-code-logo-size, 27%);padding: var(--qr-code-logo-padding, 6%);position: absolute;translate: -50% -50%;}[part="logo"] slot::slotted(*) {block-size: 100%;inline-size: 100%;object-fit: contain;}[part="logo"][hidden] {display: none;}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {--_qr-size: var(--qr-code-size, 12rem);background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));block-size: var(--_qr-size);border-radius: var(--qr-code-radius, var(--helix-radii-sm));color: var(--qr-code-color, var(--helix-color-surface-media));display: block;inline-size: var(--_qr-size);position: relative;}[part="code"] {block-size: 100%;display: block;inline-size: 100%;}[part="fallback"] {align-items: center;block-size: 100%;box-sizing: border-box;display: flex;justify-content: center;overflow-wrap: anywhere;padding: var(--qr-code-fallback-padding, var(--helix-space-md));text-align: center;}[part="finders"] {fill: var(--qr-code-finder-color, currentColor);}[part="logo"] {align-items: center;background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));border-radius: var(--qr-code-logo-radius, var(--helix-radii-sm));box-sizing: border-box;display: flex;inset-block-start: 50%;inset-inline-start: 50%;justify-content: center;max-block-size: var(--qr-code-logo-size, 27%);max-inline-size: var(--qr-code-logo-size, 27%);min-block-size: var(--qr-code-logo-size, 27%);min-inline-size: var(--qr-code-logo-size, 27%);padding: var(--qr-code-logo-padding, 6%);position: absolute;translate: -50% -50%;}:host(:dir(rtl)) [part="logo"] {translate: 50% -50%;}[part="logo"] slot::slotted(*) {block-size: 100%;inline-size: 100%;object-fit: contain;}[part="logo"][hidden] {display: none;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -19,11 +19,14 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --qr-code-background-color - The fill behind the modules, including the quiet zone and the logo's box.
  * @cssproperty --qr-code-color - Color of the dark modules. Defaults to the dark media ink, which is the same in both color schemes so the code scans.
+ * @cssproperty --qr-code-fallback-padding - The space around the fallback inside the square.
  * @cssproperty --qr-code-finder-color - Color of the three corner squares. Defaults
  * to the color of the modules.
  * @cssproperty --qr-code-logo-padding - The clear space around the center logo.
+ * @cssproperty --qr-code-logo-radius - The corner radius of the logo's box.
  * @cssproperty --qr-code-logo-size - How much of the center a logo can cover.
  * Defaults to `27%`, which `H` correction allows, because it can lose thirty percent.
+ * @cssproperty --qr-code-radius - The corner radius of the square.
  * @cssproperty --qr-code-size - How wide the square is. Defaults to `12rem`.
  */
 export declare class HelixQrCode extends HelixHeadlessQrCode {

package/dist/sandbox/preview/sandbox-preview.d.ts

@@ -80,6 +80,11 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * @cssstate loading - While the frame's document loads, until it can take the example.
  */
 export declare class HelixSandboxPreview extends HelixElement {
+    /**
+     * The key this part's words are registered under, its tag:
+     * `registerWords('de', { 'helix-sandbox-preview': { label: 'Vorschau' } })`.
+     */
+    static words: string;
     /**
      * The color mode the frame renders in.
      *
@@ -194,7 +199,15 @@ export declare class HelixSandboxPreview extends HelixElement {
      * thing on the page already entitled to both.
      */
     private static readonly target;
-    /** Holds a coalesced send, so only one is ever queued, and drops it on disconnect. */
+    /**
+     * Holds a coalesced send, so only one is ever queued, and drops it on
+     * disconnect.
+     *
+     * **It renders nothing**, so it asks for no update when its wait starts or
+     * ends. One that did sent the source at once from that update, ahead of the
+     * wait, and the send at the end of the wait then cleared `failed` after the
+     * error it should have reported.
+     */
     private readonly settle;
     /**
      * Sends once the typing stops, replacing anything already waiting.

package/dist/sandbox/preview/sandbox-preview.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixSandboxPreview_1;
-import { customElement, DelayController, HelixConsoleEvent, HelixElement, HelixResizeEvent, } from '@fusion.dev/helix-core';
+import { customElement, DelayController, HelixConsoleEvent, HelixElement, HelixResizeEvent, words, } from '@fusion.dev/helix-core';
 const SETTLE = 120;
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -27,26 +27,28 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
             if (event.source !== this.frame?.contentWindow || event.origin !== 'null') {
                 return;
             }
-            if (event.data?.type === 'helix-preview-ready') {
+            const data = event.data;
+            if (data?.type === 'helix-preview-ready') {
                 this.handleFrameLoad();
                 return;
             }
-            if (event.data?.type === 'helix-preview-console') {
-                this.dispatchEvent(new HelixConsoleEvent({ level: event.data.level, text: event.data.text }));
-                if (event.data.uncaught) {
+            if (data?.type === 'helix-preview-console') {
+                this.dispatchEvent(new HelixConsoleEvent({ level: data.level, text: data.text }));
+                if (data.uncaught) {
                     this.toggleState('failed', true);
                 }
             }
-            if (event.data?.type === 'helix-preview-press') {
+            if (data?.type === 'helix-preview-press') {
                 this.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
             }
-            if (event.data?.type === 'helix-preview-size') {
-                this.dispatchEvent(new HelixResizeEvent({ size: event.data.size }));
+            if (data?.type === 'helix-preview-size') {
+                this.dispatchEvent(new HelixResizeEvent({ size: data.size }));
             }
         };
-        this.settle = new DelayController(this);
+        this.settle = new DelayController(this, { renders: false });
     }
     static { HelixSandboxPreview_1 = this; }
+    static { this.words = 'helix-sandbox-preview'; }
     get frame() {
         return this.renderRoot.querySelector('iframe');
     }
@@ -123,6 +125,7 @@ __decorate([
     property()
 ], HelixSandboxPreview.prototype, "direction", void 0);
 __decorate([
+    words,
     property()
 ], HelixSandboxPreview.prototype, "label", void 0);
 __decorate([

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

@@ -55,6 +55,11 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @cssstate panel-collapsed - While there is a panel and it is no taller than `panel-collapsed-size`.
  */
 export declare class HelixSandbox extends HelixElement {
+    /**
+     * The key this family's words are registered under, its tag:
+     * `registerWords('de', { 'helix-sandbox': { panelLabel: 'Bereich anpassen' } })`.
+     */
+    static words: string;
     /**
      * The name of the corner handle that moves both dividers at once, read by
      * screen readers.
@@ -132,9 +137,9 @@ export declare class HelixSandbox extends HelixElement {
     panelSize: number;
     /**
      * The name of the divider between the panes, read by screen readers.
-     *
-     * Empty names the lead pane, "Resize source pane" or "Resize preview pane",
-     * since the divider's value is that pane's share.
+     * `{pane}` is the lead pane, `source` or `preview`, whose share the
+     * divider's value is, so each is a whole sentence: "Resize source pane" or
+     * "Resize preview pane".
      */
     separatorLabel: string;
     /**

package/dist/sandbox/root/sandbox-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, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, HelixPanelResizeEvent, HelixSplitEvent, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, HelixPanelResizeEvent, HelixSplitEvent, requestChange, words, } from '@fusion.dev/helix-core';
 import '../../splitter/index.js';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -22,7 +22,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         this.panelCollapsedSize = 0;
         this.panelLabel = 'Resize panel';
         this.panelSize = DEFAULT_PANEL;
-        this.separatorLabel = '';
+        this.separatorLabel = '{pane, select, preview {Resize preview pane} other {Resize source pane}}';
         this.split = DEFAULT_SPLIT;
         this.hasPanel = false;
         this.bodyHeight = 0;
@@ -98,6 +98,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             this.hasPanel = this.querySelector(':scope > [slot="panel"]') !== null;
         };
     }
+    static { this.words = 'helix-sandbox'; }
     shareOf(size) {
         if (this.bodyHeight <= 0) {
             return 0;
@@ -249,7 +250,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         const second = first === 'preview' ? 'source' : 'preview';
         const split = Number.isFinite(this.split) ? this.split : DEFAULT_SPLIT;
         const home = Number.isFinite(this.defaultSplit) ? this.defaultSplit : DEFAULT_SPLIT;
-        const label = this.separatorLabel || (first === 'preview' ? 'Resize preview pane' : 'Resize source pane');
+        const label = formatWords(this, 'separatorLabel', { pane: first });
         return html `<slot name="toolbar"></slot>
       <helix-splitter part="body" ?data-panel=${this.hasPanel} exportparts="separator, corner"
         orientation="vertical" collapsed-size=${this.panelSliver} corner-label=${this.cornerLabel}
@@ -269,6 +270,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
     static { this.styles = styles; }
 };
 __decorate([
+    words,
     property({ attribute: 'corner-label' })
 ], HelixSandbox.prototype, "cornerLabel", void 0);
 __decorate([
@@ -287,12 +289,14 @@ __decorate([
     property({ attribute: 'panel-collapsed-size', type: Number })
 ], HelixSandbox.prototype, "panelCollapsedSize", void 0);
 __decorate([
+    words,
     property({ attribute: 'panel-label' })
 ], HelixSandbox.prototype, "panelLabel", void 0);
 __decorate([
     property({ attribute: 'panel-size', type: Number })
 ], HelixSandbox.prototype, "panelSize", void 0);
 __decorate([
+    words,
     property({ attribute: 'separator-label' })
 ], HelixSandbox.prototype, "separatorLabel", void 0);
 __decorate([

package/dist/sandbox/source/sandbox-source.d.ts

@@ -50,6 +50,11 @@ import { type SandboxTokenizer } from '../tokens.js';
  * @cssproperty --sandbox-source-tag-color - Color of a `tag` run, under `tokenize`. Defaults to `--helix-color-syntax-tag`.
  */
 export declare class HelixSandboxSource extends HelixElement {
+    /**
+     * The key this part's words are registered under, its tag:
+     * `registerWords('de', { 'helix-sandbox-source': { fieldLabel: 'Quelltext' } })`.
+     */
+    static words: string;
     /**
      * The editable region's name, read by screen readers.
      */

package/dist/sandbox/source/sandbox-source.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, HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, HelixElement, onUnlessFalse, restoreValue, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, HelixElement, onUnlessFalse, restoreValue, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { drawnRuns } from '../tokens.js';
@@ -54,6 +54,7 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
             this.edit(field, field.value);
         };
     }
+    static { this.words = 'helix-sandbox-source'; }
     edit(field, next) {
         const request = new HelixBeforeEditEvent({ value: next });
         const accepted = this.dispatchEvent(request);
@@ -101,9 +102,11 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     static { this.styles = styles; }
 };
 __decorate([
+    words,
     property({ attribute: 'field-label' })
 ], HelixSandboxSource.prototype, "fieldLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'keys-description' })
 ], HelixSandboxSource.prototype, "keysDescription", void 0);
 __decorate([

package/dist/sandbox/status-bar/sandbox-status-bar.d.ts

@@ -29,6 +29,11 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @cssproperty --sandbox-status-bar-color - Color of the bar's text.
  */
 export declare class HelixSandboxStatusBar extends HelixElement {
+    /**
+     * The key this part's words are registered under, its tag:
+     * `registerWords('de', { 'helix-sandbox-status-bar': { positionLabel: 'Z. {line}, Sp. {column}' } })`.
+     */
+    static words: string;
     /**
      * One-based column of the cursor.
      *
@@ -45,6 +50,11 @@ export declare class HelixSandboxStatusBar extends HelixElement {
      * Absent shows no readout.
      */
     line?: number;
+    /**
+     * How the cursor's place reads. `{line}` and `{column}` are the line and
+     * the column, written as an editor writes them, without grouping.
+     */
+    positionLabel: string;
     /** How the position reads, or nothing when there is no cursor to report. */
     private get position();
     protected render(): TemplateResult;

package/dist/sandbox/status-bar/sandbox-status-bar.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 { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './sandbox-status-bar.css.js';
@@ -15,11 +15,19 @@ const LABELS = {
     tsx: 'TSX',
 };
 let HelixSandboxStatusBar = class HelixSandboxStatusBar extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.positionLabel = 'Ln {line}, Col {column}';
+    }
+    static { this.words = 'helix-sandbox-status-bar'; }
     get position() {
         if (this.line === undefined || this.column === undefined) {
             return undefined;
         }
-        return `Ln ${this.line}, Col ${this.column}`;
+        return formatWords(this, 'positionLabel', {
+            column: String(this.column),
+            line: String(this.line),
+        });
     }
     render() {
         const language = this.language;
@@ -42,6 +50,10 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixSandboxStatusBar.prototype, "line", void 0);
+__decorate([
+    words,
+    property({ attribute: 'position-label' })
+], HelixSandboxStatusBar.prototype, "positionLabel", void 0);
 HelixSandboxStatusBar = __decorate([
     customElement('helix-sandbox-status-bar')
 ], HelixSandboxStatusBar);

package/dist/sandbox/terminal/sandbox-terminal.d.ts

@@ -43,6 +43,11 @@ import { type ConsoleLevel } from '../levels.js';
  * @cssproperty --sandbox-terminal-size - Height of the scrolling region.
  */
 export declare class HelixSandboxTerminal extends HelixElement {
+    /**
+     * The key this part's words are registered under, its tag:
+     * `registerWords('de', { 'helix-sandbox-terminal': { clearLabel: 'Leeren' } })`.
+     */
+    static words: string;
     /**
      * The clear button's text, under `controls`.
      */
@@ -81,6 +86,12 @@ export declare class HelixSandboxTerminal extends HelixElement {
      * that does not parse is no words.
      */
     levelWords: Partial<Record<ConsoleLevel, string>>;
+    /**
+     * What a screen reader is told a repeated line's count is. `{count}` is how
+     * many times it was written, two or more, in the locale, and a language
+     * writes the forms it has: `{count, plural, few {# razy} other {# razy}}`.
+     */
+    timesLabel: string;
     private entries;
     /**
      * Whether the reader is at the bottom, and so wants to follow new output.