@fusion.dev/helix 0.148.0 → 0.149.0

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, { 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.

package/dist/sandbox/terminal/sandbox-terminal.js

@@ -4,17 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixBeforeChangeEvent, HelixElement, requestChange, wordsConverter, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixBeforeChangeEvent, HelixElement, requestChange, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { LEVELS, shows } from '../levels.js';
 import { styles } from './sandbox-terminal.css.js';
-const LEVEL_WORDS = {
-    error: 'Errors',
-    info: 'Info and above',
-    log: 'All levels',
-    warn: 'Warnings and errors',
-};
 const LIMIT = 200;
 const stop = (event) => event.stopPropagation();
 let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
@@ -25,7 +19,13 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
         this.emptyLabel = 'Nothing written to the console yet.';
         this.label = 'Console output';
         this.levelLabel = 'Levels shown';
-        this.levelWords = {};
+        this.levelWords = {
+            error: 'Errors',
+            info: 'Info and above',
+            log: 'All levels',
+            warn: 'Warnings and errors',
+        };
+        this.timesLabel = '{count} times';
         this.entries = [];
         this.following = true;
         this.handleLevel = (event) => {
@@ -46,6 +46,7 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
             }
         };
     }
+    static { this.words = 'helix-sandbox-terminal'; }
     get log() {
         return this.renderRoot.querySelector('[part="log"]');
     }
@@ -77,13 +78,14 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
         if (!this.controls) {
             return nothing;
         }
+        const clear = this.clearLabel;
         return html `<div part="controls">
       <select part="filter" aria-label=${this.levelLabel} @change=${this.handleLevel} @input=${stop}>
         ${LEVELS.map((one) => html `<option value=${one} ?selected=${(this.level ?? 'log') === one}>
-              ${this.levelWords?.[one] ?? LEVEL_WORDS[one]}
+              ${this.levelWords[one]}
             </option>`)}
       </select>
-      <button part="clear" type="button" @click=${() => this.clear()}>${this.clearLabel}</button>
+      <button part="clear" type="button" @click=${() => this.clear()}>${clear}</button>
     </div>`;
     }
     render() {
@@ -97,7 +99,7 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
                 >
                 <span part="message">${entry.text}</span>
                 ${entry.count > 1
-                ? html `<span part="count" aria-label="${entry.count} times"
+                ? html `<span part="count" aria-label=${formatWords(this, 'timesLabel', { count: entry.count })}
                         >${entry.count}</span
                       >`
                 : nothing}
@@ -107,26 +109,35 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
     static { this.styles = styles; }
 };
 __decorate([
+    words,
     property({ attribute: 'clear-label' })
 ], HelixSandboxTerminal.prototype, "clearLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixSandboxTerminal.prototype, "controls", void 0);
 __decorate([
+    words,
     property({ attribute: 'empty-label' })
 ], HelixSandboxTerminal.prototype, "emptyLabel", void 0);
 __decorate([
+    words,
     property()
 ], HelixSandboxTerminal.prototype, "label", void 0);
 __decorate([
     property()
 ], HelixSandboxTerminal.prototype, "level", void 0);
 __decorate([
+    words,
     property({ attribute: 'level-label' })
 ], HelixSandboxTerminal.prototype, "levelLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'level-words', converter: wordsConverter })
 ], HelixSandboxTerminal.prototype, "levelWords", void 0);
+__decorate([
+    words,
+    property({ attribute: 'times-label' })
+], HelixSandboxTerminal.prototype, "timesLabel", void 0);
 __decorate([
     state()
 ], HelixSandboxTerminal.prototype, "entries", void 0);

package/dist/scroll-area/root/scroll-area-root.css.js

@@ -1,16 +1,17 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;position: relative;}[part="viewport"] {block-size: 100%;overflow: auto;overscroll-behavior: contain;}[part="viewport"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="viewport"] {scrollbar-color: var(--scroll-area-thumb-color, var(--helix-color-border))
-var(--scroll-area-track-color, transparent);scrollbar-width: var(--scroll-area-scrollbar, thin);}:host([scrollbars]) [part="viewport"] {scrollbar-width: none;}[part~="scrollbar"] {--_scroll-area-thumb: max(
+export const styles = createSheet(`:host {display: block;position: relative;}[part="viewport"] {block-size: 100%;overflow: auto;overscroll-behavior: contain;}[part="viewport"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="viewport"] {scrollbar-color: var(--scroll-area-thumb-color, var(--helix-scrollbar-thumb-color))
+var(--scroll-area-track-color, var(--helix-scrollbar-track-color));scrollbar-width: var(--scroll-area-scrollbar, thin);}[part="viewport"]:hover {scrollbar-color: var(--scroll-area-thumb-hover-color, var(--helix-scrollbar-thumb-hover-color))
+var(--scroll-area-track-color, var(--helix-scrollbar-track-color));}:host([scrollbars]) [part="viewport"] {scrollbar-width: none;}[part~="scrollbar"] {--_scroll-area-thumb: max(
 var(--scroll-area-thumb-min-size, var(--helix-space-lg)),
 var(--scroll-area-thumb-fraction, 1) *
 100%
-);background-color: var(--scroll-area-track-color, transparent);opacity: 0;position: absolute;touch-action: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);user-select: none;z-index: calc(var(--helix-layer-raised) + 1);}[part~="scrollbar-visible"] {opacity: 1;}[part~="scrollbar-vertical"] {inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block: 0;inset-inline-end: 0;}[part~="scrollbar-horizontal"] {block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline: 0;}:host(:state(scrollbar-horizontal)) [part~="scrollbar-vertical"] {inset-block-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm));}:host(:state(scrollbar-vertical)) [part~="scrollbar-horizontal"] {inset-inline-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm));}[part~="thumb"] {background-color: var(--scroll-area-thumb-color, var(--helix-color-border));border-radius: var(--helix-radii-full);position: absolute;}[part~="thumb"]:hover {background-color: var(--scroll-area-thumb-hover-color, var(--helix-color-foreground-subtle));}[part~="thumb-vertical"] {block-size: var(--_scroll-area-thumb);inset-block-start: calc(
+);background-color: var(--scroll-area-track-color, var(--helix-scrollbar-track-color));opacity: 0;position: absolute;touch-action: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);user-select: none;z-index: calc(var(--helix-layer-raised) + 1);}[part~="scrollbar-visible"] {opacity: 1;}[part~="scrollbar-vertical"] {inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block: 0;inset-inline-end: 0;}[part~="scrollbar-horizontal"] {block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline: 0;}:host(:state(scrollbar-horizontal)) [part~="scrollbar-vertical"] {inset-block-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm));}:host(:state(scrollbar-vertical)) [part~="scrollbar-horizontal"] {inset-inline-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm));}[part~="thumb"] {background-color: var(--scroll-area-thumb-color, var(--helix-scrollbar-thumb-color));border-radius: var(--helix-radii-full);position: absolute;}[part~="thumb"]:hover {background-color: var(--scroll-area-thumb-hover-color, var(--helix-scrollbar-thumb-hover-color));}[part~="thumb-vertical"] {block-size: var(--_scroll-area-thumb);inset-block-start: calc(
 var(--scroll-area-scroll-fraction, 0) *
 (100% - var(--_scroll-area-thumb))
 );inset-inline: var(--helix-border-thick);}[part~="thumb-horizontal"] {inline-size: var(--_scroll-area-thumb);inset-block: var(--helix-border-thick);inset-inline-start: calc(
 var(--scroll-area-scroll-fraction, 0) *
 (100% - var(--_scroll-area-thumb))
-);}[part="corner"] {background-color: var(--scroll-area-track-color, transparent);block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline-end: 0;position: absolute;}:host::before,
+);}[part="corner"] {background-color: var(--scroll-area-track-color, var(--helix-scrollbar-track-color));block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));inset-block-end: 0;inset-inline-end: 0;position: absolute;}:host::before,
 :host::after {content: "";opacity: 0;pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-raised);}:host::before {background: linear-gradient(
 to bottom,
 var(--scroll-area-fade-color, var(--helix-color-background)),

package/dist/scroll-area/root/scroll-area-root.d.ts

@@ -25,10 +25,10 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --scroll-area-fade-inline-start - The depth of the fade at the inline start, or `0` to remove it.
  * @cssproperty --scroll-area-scrollbar - The scrollbar width, as a `scrollbar-width` keyword.
  * @cssproperty --scroll-area-scrollbar-size - The thickness of each scrollbar drawn under `scrollbars`, and the size of the corner.
- * @cssproperty --scroll-area-thumb-color - The color of the scrollbar's thumb.
- * @cssproperty --scroll-area-thumb-hover-color - The color of a thumb drawn under `scrollbars` while the pointer is over it.
+ * @cssproperty --scroll-area-thumb-color - The color of the scrollbar's thumb. Defaults to `--helix-scrollbar-thumb-color`.
+ * @cssproperty --scroll-area-thumb-hover-color - The color of the browser's thumb while the pointer is over the scroll area, and of a thumb drawn under `scrollbars` while the pointer is over it. Defaults to `--helix-scrollbar-thumb-hover-color`.
  * @cssproperty --scroll-area-thumb-min-size - The shortest a thumb drawn under `scrollbars` gets, however long the content.
- * @cssproperty --scroll-area-track-color - The color of the scrollbar's track.
+ * @cssproperty --scroll-area-track-color - The color of the scrollbar's track. Defaults to `--helix-scrollbar-track-color`.
  */
 export declare class HelixScrollArea extends HelixHeadlessScrollArea {
     static styles: CSSResultGroup;

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

@@ -1,2 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;overflow-x: auto;}[part="table"] {display: grid;grid-template-columns: var(--table-columns, var(--table-template, minmax(0, 1fr)));inline-size: 100%;}[part="head"] {display: contents;}::slotted([slot="heading"]) {color: var(--table-title-color, var(--helix-color-foreground));display: block;font-family: var(--helix-font-sans);font-size: var(--table-title-text, var(--helix-text-md));font-weight: var(--helix-weight-semibold);margin-block: var(--helix-space-none) var(--table-title-gap, var(--helix-space-sm));}[part="select-all"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control-loose);padding-inline: var(--helix-space-none) var(--helix-space-md);}[part="select-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host([loading]) [part="table"] {opacity: 0.5;}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {display: block;overflow-x: auto;}[part="table"] {display: grid;grid-template-columns: var(--table-columns, var(--table-template, minmax(0, 1fr)));inline-size: 100%;}[part="head"] {display: contents;}::slotted([slot="heading"]) {color: var(--table-title-color, var(--helix-color-foreground));display: block;font-family: var(--helix-font-sans);font-size: var(--table-title-text, var(--helix-text-md));font-weight: var(--helix-weight-semibold);margin-block: var(--helix-space-none) var(--table-title-gap, var(--helix-space-sm));}[part="select-all"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control-loose);padding-inline: var(--helix-space-none) var(--helix-space-md);}[part="grip-head"] {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;min-block-size: var(--helix-size-control-loose);}[part="grip-head"]:focus-visible,
+[part="select-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host([loading]) [part="table"] {opacity: 0.5;}[part="drag-preview"] {background-color: var(--table-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--table-drag-preview-border-width, var(--helix-border-floating)) solid
+var(--table-drag-preview-border-color, var(--helix-color-border));border-radius: var(--table-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--table-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--table-drag-preview-opacity, 0.9);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -16,10 +16,17 @@ import '../../checkbox/index.js';
  * @slot - The table's rows.
  * @slot heading - Words that name the table, shown above it in the weight of a heading.
  *
- * @csspart live - A live region that repeats the empty and loading text, so screen readers announce it when it changes. Visually hidden in the styled tier.
+ * @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, in a `reorderable` table. Hidden from assistive technology.
+ * @csspart live - A live region that repeats the empty and loading text, and says each step of a move, so screen readers announce it when it changes. Visually hidden in the styled tier.
  * @csspart table - The grid.
  *
  * @cssproperty --table-columns - Track list for the columns. It overrides the track list worked out from the columns.
+ * @cssproperty --table-drag-preview-background-color - The fill behind the copy of a row a pointer drags.
+ * @cssproperty --table-drag-preview-border-color - The color of the edge around the copy of a row a pointer drags.
+ * @cssproperty --table-drag-preview-border-width - The width of the edge around the copy of a row a pointer drags. None by default, where the shadow lifts it.
+ * @cssproperty --table-drag-preview-opacity - The opacity of the copy of a row a pointer drags.
+ * @cssproperty --table-drag-preview-radius - The corner radius of the copy of a row a pointer drags.
+ * @cssproperty --table-drag-preview-shadow - The shadow that raises the copy of a row a pointer drags over the page.
  * @cssproperty --table-title-color - The color of the words in the `heading` slot.
  * @cssproperty --table-title-gap - The space between the `heading` slot and the grid.
  * @cssproperty --table-title-text - The font size of the words in the `heading` slot.

package/dist/table/row/table-row.css.js

@@ -7,4 +7,12 @@ var(--helix-color-background)
 );}:host(:state(link)) ::slotted(*) {cursor: pointer;}:host(:state(link):hover) ::slotted(*) {background-color: var(
 --table-row-hover-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)
-);}[part~="select"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}`);
+);}[part~="select"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part~="grip"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-2xs) var(--helix-space-sm);}[part~="grip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="grip-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--table-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;touch-action: none;}[part="grip-button"]:active {cursor: grabbing;}[part="grip-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="grip-button"][aria-disabled="true"] {cursor: default;opacity: var(--table-grip-disabled-opacity, 0.4);}[part="grip-mark"] {block-size: 1em;inline-size: 1em;}:host(:state(dragging)) [part~="grip"],
+:host(:state(dragging)) [part~="select"],
+:host(:state(dragging)) ::slotted(*) {opacity: var(--table-dragging-opacity, 0.5);}:host(:state(drop-before)) [part~="grip"],
+:host(:state(drop-before)) [part~="select"],
+:host(:state(drop-before)) ::slotted(*) {box-shadow: inset 0 var(--table-drop-indicator-size, var(--helix-border-thick)) 0 0
+var(--table-drop-indicator-color, var(--helix-color-primary));}:host(:state(drop-after)) [part~="grip"],
+:host(:state(drop-after)) [part~="select"],
+:host(:state(drop-after)) ::slotted(*) {box-shadow: inset 0 calc(var(--table-drop-indicator-size, var(--helix-border-thick)) * -1) 0 0
+var(--table-drop-indicator-color, var(--helix-color-primary));}`);

package/dist/table/row/table-row.d.ts

@@ -16,6 +16,11 @@ import '../../checkbox/index.js';
  *
  * @slot - The row's cells.
  *
+ * @cssproperty --table-dragging-opacity - The opacity of a row being moved, in a `reorderable` table.
+ * @cssproperty --table-drop-indicator-color - The color of the line where a moved row would land.
+ * @cssproperty --table-drop-indicator-size - The thickness of the line where a moved row would land.
+ * @cssproperty --table-grip-color - The color of a row's grip, in a `reorderable` table.
+ * @cssproperty --table-grip-disabled-opacity - The opacity of a row's grip while a sort decides the order.
  * @cssproperty --table-row-hover-background-color - The wash across the cells of a row with `href` under the pointer.
  */
 export declare class HelixTableRow extends HelixHeadlessTableRow {

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

@@ -4,6 +4,15 @@ import type { CSSResultGroup } from 'lit';
  * @summary A short text that appears next to an element on hover and focus.
  *
  * @description
+ * Place the tooltip beside its trigger, name the trigger with `for`, and name
+ * the tooltip in the trigger's `aria-describedby`, so the trigger is described
+ * in the server's markup and at rest:
+ *
+ * ```html
+ * <helix-button aria-describedby="save-tip" id="save">Save</helix-button>
+ * <helix-tooltip content="Save your work" for="save" id="save-tip"></helix-tooltip>
+ * ```
+ *
  * The bubble is in the top layer, so it needs no `z-index` and no container
  * clips it.
  *

package/dist/tree/item/tree-item.css.js

@@ -20,6 +20,8 @@ slot[name="end"]::slotted(*) {flex: 0 0 auto;}slot[name="end"] {align-items: cen
 grid-template-rows var(--helix-duration-fast) var(--helix-easing-standard),
 display var(--helix-duration-fast) allow-discrete;}[part="group"] > slot {display: block;min-block-size: 0;overflow: hidden;}[part="group"][hidden] {display: none;grid-template-rows: 0fr;}@starting-style {[part="group"]:not([hidden]) {grid-template-rows: 0fr;}}[part="toggle"] {align-self: center;margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));order: var(--tree-chevron-order, 0);}slot[name="chevron"]::slotted(*) {align-self: center;block-size: var(--_tree-chevron);color: var(--helix-color-foreground-subtle);flex: 0 0 auto;inline-size: var(--_tree-chevron);margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));order: var(--tree-chevron-order, 0);transform: rotate(-90deg);transition: transform var(--helix-duration-fast) var(--helix-easing-standard);}:host(:dir(rtl)) slot[name="chevron"]::slotted(*) {transform: rotate(90deg);}:host(:state(open)) slot[name="chevron"]::slotted(*) {transform: rotate(0deg);}[part~="checkbox"] {align-self: center;background-color: var(--tree-checkbox-background-color, var(--helix-color-background));block-size: var(--tree-checkbox-size, var(--_tree-chevron));border: var(--helix-border-thin) solid
 var(--tree-checkbox-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);color: var(--tree-checkbox-mark-color, var(--helix-color-foreground));display: grid;flex: 0 0 auto;inline-size: var(--tree-checkbox-size, var(--_tree-chevron));place-items: center;}[part~="checkbox-checked"],
-[part~="checkbox-mixed"] {border-color: var(--tree-checkbox-border-color, var(--helix-color-foreground));}[part~="checkbox"] svg {block-size: 80%;inline-size: 80%;}:host([disabled]) [part="row"] {cursor: not-allowed;opacity: var(--tree-row-disabled-opacity, 0.5);}:host([disabled]) [part="row"]:hover {background-color: transparent;color: var(--tree-row-color, var(--helix-color-foreground-muted));}:host(:state(loading)) [part="toggle"],
+[part~="checkbox-mixed"] {border-color: var(--tree-checkbox-border-color, var(--helix-color-foreground));}[part~="checkbox"] svg {block-size: 80%;inline-size: 80%;}[part="grip"] {align-items: center;color: var(--tree-grip-color, var(--helix-color-foreground-subtle));cursor: grab;display: inline-flex;flex: 0 0 auto;order: 3;touch-action: none;}[part="grip"]:active {cursor: grabbing;}[part="grip-mark"] {block-size: var(--_tree-chevron);inline-size: var(--_tree-chevron);}:host(:state(dragging)) [part="item"] {opacity: var(--tree-dragging-opacity, 0.5);}:host(:state(drop-before)) [part="item"],
+:host(:state(drop-after)) [part="item"] {position: relative;}:host(:state(drop-before)) [part="item"]::before,
+:host(:state(drop-after)) [part="item"]::after {background-color: var(--tree-drop-indicator-color, var(--helix-color-primary));block-size: var(--tree-drop-indicator-size, var(--helix-border-thick));content: "";inset-inline: 0;pointer-events: none;position: absolute;z-index: 1;}:host(:state(drop-before)) [part="item"]::before {inset-block-start: 0;}:host(:state(drop-after)) [part="item"]::after {inset-block-end: 0;}:host([disabled]) [part="row"] {cursor: not-allowed;opacity: var(--tree-row-disabled-opacity, 0.5);}:host([disabled]) [part="row"]:hover {background-color: transparent;color: var(--tree-row-color, var(--helix-color-foreground-muted));}:host(:state(loading)) [part="toggle"],
 :host(:state(loading)) slot[name="chevron"]::slotted(*) {animation: tree-loading var(--helix-duration-slow) var(--helix-easing-standard) infinite alternate;}@keyframes tree-loading {to {opacity: 0.3;}}@media (prefers-reduced-motion: reduce) {:host(:state(loading)) [part="toggle"],
 :host(:state(loading)) slot[name="chevron"]::slotted(*) {animation: none;}}`);

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

@@ -25,6 +25,8 @@ import type { CSSResultGroup } from 'lit';
  * @csspart checkbox - The check mark's box, in a tree with `selection-mode="multiple"`.
  * @csspart checkbox-checked - The check mark's box while the item is checked.
  * @csspart checkbox-mixed - The check mark's box while some of a branch's items are checked.
+ * @csspart grip - The handle a pointer drags to move the item, in a `reorderable` tree.
+ * @csspart grip-mark - The icon on the grip.
  * @csspart group - The container for nested items.
  * @csspart item - The node, and the focus target.
  * @csspart label - The label text.
@@ -37,7 +39,11 @@ import type { CSSResultGroup } from 'lit';
  *   branch.
  * @cssproperty --tree-checkbox-size - Size of the check mark's box. Follows the chevron's size.
  * @cssproperty --tree-chevron-size - Size of the chevron, and the gutter a leaf reserves.
+ * @cssproperty --tree-dragging-opacity - The opacity of an item being moved, in a `reorderable` tree.
+ * @cssproperty --tree-drop-indicator-color - The color of the line where a moved item would land.
+ * @cssproperty --tree-drop-indicator-size - The thickness of the line where a moved item would land.
  * @cssproperty --tree-gap - Space between rows.
+ * @cssproperty --tree-grip-color - The color of the grip, in a `reorderable` tree.
  * @cssproperty --tree-indent - Indent added per level.
  * @cssproperty --tree-row-checked-background-color - Fill of a checked row, in a tree with `selection-mode="multiple"`. Unset, the box alone marks it.
  * @cssproperty --tree-row-checked-color - Text color of a checked row, in a tree with `selection-mode="multiple"`.

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

@@ -1,2 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part="tree"] {display: flex;flex-direction: column;}:host {--tree-chevron-order: 0;}:host([chevron-placement="end"]) {--tree-chevron-order: 2;--tree-chevron-gap: var(--helix-space-none);--_tree-reserve: var(--helix-space-none);}:host([nesting="subordinate"]) {--_tree-nested-text: var(--helix-text-xs);}:host([nesting="heading"]) {--_tree-heading-ink: var(--helix-color-foreground-subtle);--_tree-heading-text: var(--helix-text-xs);--_tree-heading-tracking: var(--helix-tracking-wide);}:host([loading]) [part="tree"] {opacity: 0.5;}@media print {:host {print-color-adjust: economy;}}`);
+export const styles = createSheet(`:host {display: block;}[part="tree"] {display: flex;flex-direction: column;}:host {--tree-chevron-order: 0;}:host([chevron-placement="end"]) {--tree-chevron-order: 2;--tree-chevron-gap: var(--helix-space-none);--_tree-reserve: var(--helix-space-none);}:host([nesting="subordinate"]) {--_tree-nested-text: var(--helix-text-xs);}:host([nesting="heading"]) {--_tree-heading-ink: var(--helix-color-foreground-subtle);--_tree-heading-text: var(--helix-text-xs);--_tree-heading-tracking: var(--helix-tracking-wide);}:host([loading]) [part="tree"] {opacity: 0.5;}[part="drag-preview"] {background-color: var(--tree-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--tree-drag-preview-border-width, var(--helix-border-floating)) solid
+var(--tree-drag-preview-border-color, var(--helix-color-border));border-radius: var(--tree-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--tree-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--tree-drag-preview-opacity, 0.9);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -17,12 +17,19 @@ import type { CSSResultGroup } from 'lit';
  *
  * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. The item sends it, and you can listen for it on the tree. Cancelable: canceling it changes nothing.
  *
- * @csspart live - A copy of the empty and loading messages, in a live region that announces them when they change. Visually hidden in the styled tier.
+ * @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the item is let go, in a `reorderable` tree. Hidden from assistive technology.
+ * @csspart live - A copy of the empty and loading messages, and each step of a move in a `reorderable` tree, in a live region that announces them when they change. Visually hidden in the styled tier.
  * @csspart tree - The tree container.
  *
  * @cssproperty --tree-chevron-gap - The space before the chevron. Set from `chevron-placement`.
  * @cssproperty --tree-chevron-order - The chevron's order in the row. Set from `chevron-placement` and read by each item.
  * @cssproperty --tree-chevron-size - Size of the chevron, and the gutter a leaf reserves.
+ * @cssproperty --tree-drag-preview-background-color - The fill behind the copy of an item a pointer drags.
+ * @cssproperty --tree-drag-preview-border-color - The color of the edge around the copy of an item a pointer drags.
+ * @cssproperty --tree-drag-preview-border-width - The width of the edge around the copy of an item a pointer drags. None by default, where the shadow lifts it.
+ * @cssproperty --tree-drag-preview-opacity - The opacity of the copy of an item a pointer drags.
+ * @cssproperty --tree-drag-preview-radius - The corner radius of the copy of an item a pointer drags.
+ * @cssproperty --tree-drag-preview-shadow - The shadow that raises the copy of an item a pointer drags over the page.
  * @cssproperty --tree-gap - Space between rows.
  * @cssproperty --tree-indent - Indent added per level.
  * @cssproperty --tree-row-size - Minimum height of a row, so rows with and without an icon match.

package/dist/virtual-list/root/virtual-list-root.css.js

@@ -1,5 +1,10 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part="viewport"] {block-size: var(--virtual-list-block-size, 20em);margin-inline: calc(var(--helix-size-focus-reach) * -1);overflow-y: auto;overscroll-behavior: contain;padding-inline: var(--helix-size-focus-reach);scrollbar-color: var(--helix-color-border) transparent;scrollbar-width: thin;}::slotted([data-index]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}::slotted([aria-selected="true"]) {background-color: var(
+export const styles = createSheet(`:host {display: block;}[part="viewport"] {block-size: var(--virtual-list-block-size, 20em);margin-inline: calc(var(--helix-size-focus-reach) * -1);overflow-y: auto;overscroll-behavior: contain;padding-inline: var(--helix-size-focus-reach);scrollbar-color: var(--virtual-list-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color))
+var(--virtual-list-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin;}[part="viewport"]:hover {scrollbar-color: var(
+--virtual-list-scrollbar-thumb-hover-color,
+var(--helix-scrollbar-thumb-hover-color)
+)
+var(--virtual-list-scrollbar-track-color, var(--helix-scrollbar-track-color));}::slotted([data-index]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}::slotted([aria-selected="true"]) {background-color: var(
 --virtual-list-selected-background-color,
 var(--helix-color-primary-subtle)
 );}[part="loading"] {color: var(--virtual-list-loading-color, var(--helix-color-foreground-muted));font-size: var(--helix-text-sm);padding: var(--virtual-list-loading-padding, var(--helix-space-sm));text-align: center;}[part="after"],

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -24,6 +24,9 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --virtual-list-block-size - How tall the scrolling box is.
  * @cssproperty --virtual-list-loading-color - The color of the text in the row drawn while `loading` is set.
  * @cssproperty --virtual-list-loading-padding - The space around the text in the row drawn while `loading` is set.
+ * @cssproperty --virtual-list-scrollbar-thumb-color - The thumb of the list's scrollbar. Defaults to `--helix-scrollbar-thumb-color`.
+ * @cssproperty --virtual-list-scrollbar-thumb-hover-color - The thumb while the pointer is over the list. Defaults to `--helix-scrollbar-thumb-hover-color`.
+ * @cssproperty --virtual-list-scrollbar-track-color - The track of the list's scrollbar. Defaults to `--helix-scrollbar-track-color`.
  * @cssproperty --virtual-list-selected-background-color - The fill behind a chosen row, in a list with `selection-mode`.
  */
 export declare class HelixVirtualList extends HelixHeadlessVirtualList {