@fusion.dev/helix 0.144.0 → 0.146.0

package/dist/sandbox/levels.js

@@ -0,0 +1,5 @@
+export const LEVELS = ['log', 'info', 'warn', 'error'];
+export const shows = (level, floor) => {
+    const from = LEVELS.indexOf(floor);
+    return from < 0 || LEVELS.indexOf(level) >= from;
+};

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

@@ -36,7 +36,10 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @event {HelixBeforeSplitEvent} helix-before-split - Fired before the panes' divider is released, with the lead pane's share. Cancelable: cancel it to keep the current split.
  * @event {HelixCaretEvent} helix-caret - Fired when the cursor moves in the source. The source pane dispatches it, and you can listen for it on the sandbox.
  * @event {HelixConsoleEvent} helix-console - Fired once per console call in the preview frame. The preview pane dispatches it.
+ * @event {HelixEditEvent} helix-edit - Fired after the source was edited, with the new source. The source pane dispatches it, and you can listen for it on the sandbox.
+ * @event {HelixPanelResizeEvent} helix-panel-resize - Fired after the panel's divider settled at a new height, with the height in pixels.
  * @event {HelixResizeEvent} helix-resize - Fired by the preview pane when the height of the frame's content changes, with the new height.
+ * @event {HelixSplitEvent} helix-split - Fired after the panes' divider settled somewhere new, with the lead pane's share.
  *
  * @csspart body - The splitter holding the panes above the panel.
  * @csspart corner - The handle where the two dividers cross.

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, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, HelixPanelResizeEvent, HelixSplitEvent, requestChange, } from '@fusion.dev/helix-core';
 import '../../splitter/index.js';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -164,7 +164,8 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         return this.orientation ?? 'horizontal';
     }
     requestSplit(next) {
-        return requestChange({
+        const was = this.split;
+        const accepted = requestChange({
             apply: (value) => {
                 this.split = value;
             },
@@ -172,9 +173,14 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             host: this,
             next,
         });
+        if (accepted && this.split !== was) {
+            this.dispatchEvent(new HelixSplitEvent({ value: String(this.split) }));
+        }
+        return accepted;
     }
     requestPanelSize(next) {
-        return requestChange({
+        const was = this.panelSize;
+        const accepted = requestChange({
             apply: (value) => {
                 this.panelSize = value;
             },
@@ -182,6 +188,10 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             host: this,
             next,
         });
+        if (accepted && this.panelSize !== was) {
+            this.dispatchEvent(new HelixPanelResizeEvent({ value: String(this.panelSize) }));
+        }
+        return accepted;
     }
     answer(divider, position) {
         const target = divider;

package/dist/sandbox/source/sandbox-source.css.js

@@ -23,4 +23,74 @@ tab-size: 2;
 [part="source"]:focus-visible {
 background-color: var(--helix-color-surface);
 outline: none;
+}
+
+[part="field"] {
+background-color: var(--sandbox-source-background-color, var(--helix-color-background));
+block-size: 100%;
+display: grid;
+grid-template-rows: minmax(max-content, auto);
+overflow: auto;
+}
+
+[part="field"]:focus-within {
+background-color: var(--helix-color-surface);
+}
+
+[part="field"] > [part="highlight"],
+[part="field"] > [part="source"] {
+border: none;
+box-sizing: border-box;
+font-family: var(--helix-font-mono);
+font-size: var(--helix-text-xs);
+grid-area: 1 / 1;
+inline-size: 100%;
+letter-spacing: normal;
+line-height: var(--helix-leading-normal);
+margin: 0;
+min-block-size: var(--sandbox-source-min-block-size, 12rem);
+overflow-wrap: break-word;
+padding: var(--helix-space-sm);
+tab-size: 2;
+white-space: pre-wrap;
+}
+
+[part="field"] > [part="highlight"] {
+color: var(--helix-color-foreground-muted);
+}
+
+[part="field"] > [part="source"],
+[part="field"] > [part="source"]:focus-visible {
+-webkit-text-fill-color: transparent;
+align-self: stretch;
+background-color: transparent;
+block-size: auto;
+caret-color: var(--helix-color-foreground);
+color: transparent;
+overflow: hidden;
+}
+
+[part="token"][data-kind="callable"] {
+color: var(--sandbox-source-callable-color, var(--helix-color-syntax-callable));
+}
+[part="token"][data-kind="comment"] {
+color: var(--sandbox-source-comment-color, var(--helix-color-syntax-comment));
+}
+[part="token"][data-kind="constant"] {
+color: var(--sandbox-source-constant-color, var(--helix-color-syntax-constant));
+}
+[part="token"][data-kind="invalid"] {
+color: var(--sandbox-source-invalid-color, var(--helix-color-syntax-invalid));
+}
+[part="token"][data-kind="keyword"] {
+color: var(--sandbox-source-keyword-color, var(--helix-color-syntax-keyword));
+}
+[part="token"][data-kind="name"] {
+color: var(--sandbox-source-name-color, var(--helix-color-syntax-name));
+}
+[part="token"][data-kind="string"] {
+color: var(--sandbox-source-string-color, var(--helix-color-syntax-string));
+}
+[part="token"][data-kind="tag"] {
+color: var(--sandbox-source-tag-color, var(--helix-color-syntax-tag));
 }`);

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

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup, TemplateResult } from 'lit';
+import { type SandboxHighlight } from '../tokens.js';
 /**
  * @summary An editable source pane for a sandbox preview.
  *
@@ -11,6 +12,16 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * field, press Escape and then Tab. Shift+Tab moves focus back as it does
  * anywhere else. The field's description says so to a screen reader.
  *
+ * **`highlight` colors the source** with a highlighter you bring, such as one
+ * built on Lezer, Prism or Shiki. It is a function from the source to runs of
+ * text, each with an optional kind, and the pane draws the runs under a
+ * transparent field, so typing, selection and undo stay the textarea's. The
+ * kinds are `callable`, `comment`, `constant`, `invalid`, `keyword`, `name`,
+ * `string` and `tag`, each colored by the `--helix-color-syntax-*` token of
+ * its name and a hook of its own, such as `--sandbox-source-keyword-color`.
+ * A run of any other kind is drawn in the field's own color. Every run with a
+ * kind is a `token` part, and carries its kind as `data-kind`.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Editor, Code pane
@@ -18,17 +29,39 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @event {HelixBeforeEditEvent} helix-before-edit - Fired before the source is edited. Cancelable: cancel it to keep the source unchanged.
  * @event {HelixCaretEvent} helix-caret - Fired when the cursor moves.
+ * @event {HelixEditEvent} helix-edit - Fired after the source was edited, with the new source.
  *
+ * @csspart field - The box that scrolls the field and its colors together, under `highlight`.
+ * @csspart highlight - The colored copy of the source drawn under the field, under `highlight`.
  * @csspart source - The editable region.
+ * @csspart token - One run of the source that has a kind, under `highlight`.
  *
  * @cssproperty --sandbox-source-background-color - Fill behind the source.
+ * @cssproperty --sandbox-source-callable-color - Color of a `callable` run, under `highlight`. Defaults to `--helix-color-syntax-callable`.
+ * @cssproperty --sandbox-source-comment-color - Color of a `comment` run, under `highlight`. Defaults to `--helix-color-syntax-comment`.
+ * @cssproperty --sandbox-source-constant-color - Color of a `constant` run, under `highlight`. Defaults to `--helix-color-syntax-constant`.
+ * @cssproperty --sandbox-source-invalid-color - Color of an `invalid` run, under `highlight`. Defaults to `--helix-color-syntax-invalid`.
+ * @cssproperty --sandbox-source-keyword-color - Color of a `keyword` run, under `highlight`. Defaults to `--helix-color-syntax-keyword`.
  * @cssproperty --sandbox-source-min-block-size - Minimum height of the pane.
+ * @cssproperty --sandbox-source-name-color - Color of a `name` run, under `highlight`. Defaults to `--helix-color-syntax-name`.
+ * @cssproperty --sandbox-source-string-color - Color of a `string` run, under `highlight`. Defaults to `--helix-color-syntax-string`.
+ * @cssproperty --sandbox-source-tag-color - Color of a `tag` run, under `highlight`. Defaults to `--helix-color-syntax-tag`.
  */
 export declare class HelixSandboxSource extends HelixElement {
     /**
      * The editable region's name, read by screen readers.
      */
     fieldLabel: string;
+    /**
+     * Colors the source: a function from the source and the pane's `name` to
+     * runs of text, each with an optional kind, such as
+     * `[{ text: '<' }, { kind: 'tag', text: 'p' }, { text: '>' }]`.
+     *
+     * Absent, the pane is a plain field. Runs whose text does not add up to the
+     * source are drawn as the source, uncolored, so the colors never drift from
+     * the caret. Set it as a property.
+     */
+    highlight?: SandboxHighlight;
     /**
      * The field's description, read by screen readers while Tab indents.
      */
@@ -90,6 +123,8 @@ export declare class HelixSandboxSource extends HelixElement {
     private edit;
     private readonly handleKeydown;
     protected render(): TemplateResult;
+    /** The field itself and its description, which is the whole pane without `highlight`. */
+    private renderField;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/sandbox/source/sandbox-source.js

@@ -4,16 +4,17 @@ 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, HelixElement, onUnlessFalse, restoreValue, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, HelixElement, onUnlessFalse, restoreValue, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { drawnRuns } from '../tokens.js';
 import { styles } from './sandbox-source.css.js';
 const MODIFIERS = new Set(['Alt', 'AltGraph', 'Control', 'Meta', 'Shift']);
 let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     constructor() {
         super(...arguments);
         this.fieldLabel = 'Example source';
-        this.keysDescription = 'Tab inserts two spaces. To leave, press Escape and then Tab.';
+        this.keysDescription = 'Tab inserts two spaces. To leave, press Escape and then Tab, or press Shift+Tab to go back.';
         this.name = 'html';
         this.tabIndents = true;
         this.value = '';
@@ -55,12 +56,27 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     }
     edit(field, next) {
         const request = new HelixBeforeEditEvent({ value: next });
-        if (this.dispatchEvent(request)) {
+        const accepted = this.dispatchEvent(request);
+        if (accepted) {
             this.value = next;
         }
         restoreValue(field, this.value);
+        if (accepted) {
+            this.dispatchEvent(new HelixEditEvent({ value: next }));
+        }
     }
     render() {
+        const field = this.renderField();
+        if (!this.highlight) {
+            return field;
+        }
+        const runs = drawnRuns(this.value, this.highlight(this.value, this.name));
+        return html `<div part="field">
+      <pre part="highlight" aria-hidden="true">${runs.map(({ kind, text }) => kind ? html `<span part="token" data-kind=${kind}>${text}</span>` : text)}${'\n'}</pre>
+      ${field}
+    </div>`;
+    }
+    renderField() {
         return html `<textarea
       part="source"
       aria-label=${this.fieldLabel}
@@ -80,6 +96,9 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
 __decorate([
     property({ attribute: 'field-label' })
 ], HelixSandboxSource.prototype, "fieldLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixSandboxSource.prototype, "highlight", void 0);
 __decorate([
     property({ attribute: 'keys-description' })
 ], HelixSandboxSource.prototype, "keysDescription", void 0);

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

@@ -7,6 +7,45 @@ grid-template-rows: minmax(0, 1fr);
 min-block-size: 0;
 }
 
+:host([controls]) {
+grid-template-rows: auto minmax(0, 1fr);
+}
+
+[part="controls"] {
+align-items: center;
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+display: flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+gap: var(--helix-space-xs);
+justify-content: space-between;
+padding: var(--helix-space-2xs) var(--helix-space-sm);
+}
+
+[part="filter"],
+[part="clear"] {
+background-color: transparent;
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground);
+font: inherit;
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+}
+
+[part="clear"] {
+cursor: pointer;
+}
+
+[part="clear"]:hover {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part="filter"]:focus-visible,
+[part="clear"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
 [part="log"] {
 font-family: var(--helix-font-mono);
 font-size: var(--helix-text-xs);

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

@@ -1,5 +1,6 @@
 import { type ConsoleDetail, HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup, TemplateResult } from 'lit';
+import { type ConsoleLevel } from '../levels.js';
 /**
  * @summary A panel that shows what the previewed example wrote to the console.
  *
@@ -17,14 +18,24 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * level is read before it, except a plain `log`, so an error does not sound
  * like any other line.
  *
+ * **`controls` adds a clear button and a level filter** above the log. Both
+ * are also yours to drive without them: `clear()` empties the log, and
+ * `level` hides the quieter lines.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Console, Output
  * @documentation https://fusion.dev/helix/components/sandbox
  *
+ * @event {Event} change - Fired after the reader chose another level in the filter. `level` holds it.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the level filter changes, with the level chosen, `log` for every level. Cancelable: cancel it to keep the current level.
+ *
+ * @csspart clear - The button that empties the log, under `controls`.
+ * @csspart controls - The row holding the clear button and the level filter, under `controls`.
  * @csspart count - How many times a repeated line was written.
- * @csspart empty - Shown while nothing has been written.
+ * @csspart empty - Shown while nothing has been written, or while the level filter hides every line.
  * @csspart entry - One line.
+ * @csspart filter - The level filter, a native select, under `controls`.
  * @csspart level - The console level a line was written at.
  * @csspart log - The scrolling region.
  * @csspart message - The text of a line.
@@ -32,6 +43,17 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @cssproperty --sandbox-terminal-size - Height of the scrolling region.
  */
 export declare class HelixSandboxTerminal extends HelixElement {
+    /**
+     * The clear button's text, under `controls`.
+     */
+    clearLabel: string;
+    /**
+     * Shows a clear button and a level filter above the log.
+     *
+     * Off by default, because a sandbox that puts the terminal in a panel often
+     * has a toolbar of its own for them.
+     */
+    controls: boolean;
     /**
      * Text shown before anything has been written.
      */
@@ -40,6 +62,25 @@ export declare class HelixSandboxTerminal extends HelixElement {
      * The log's name, read by screen readers.
      */
     label: string;
+    /**
+     * The quietest level shown: `info` hides plain logs, `warn` shows warnings
+     * and errors, and `error` shows errors only. Absent shows every line.
+     *
+     * Lines it hides are kept, so lowering it shows them again. The filter under
+     * `controls` sets it.
+     */
+    level?: ConsoleLevel | undefined;
+    /**
+     * The level filter's name, read by screen readers, under `controls`.
+     */
+    levelLabel: string;
+    /**
+     * What each choice of the level filter reads, for a page in another
+     * language, keyed by level, such as `{ warn: '…' }`. A level left out keeps
+     * its English words. As an attribute it is that object as JSON, and JSON
+     * that does not parse is no words.
+     */
+    levelWords: Partial<Record<ConsoleLevel, string>>;
     private entries;
     /**
      * Whether the reader is at the bottom, and so wants to follow new output.
@@ -61,6 +102,14 @@ export declare class HelixSandboxTerminal extends HelixElement {
     /** Empties the log. */
     clear(): void;
     protected updated(): void;
+    /**
+     * Takes the level the reader chose in the filter, unless a listener
+     * refused it, and then says so with the select's own `change`, which stops
+     * at the shadow root otherwise. A refusal puts the select back.
+     */
+    private readonly handleLevel;
+    /** The clear button and the level filter, under `controls`. */
+    private renderControls;
     protected render(): TemplateResult;
     static styles: CSSResultGroup;
 }

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

@@ -4,18 +4,46 @@ 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, HelixBeforeChangeEvent, HelixElement, requestChange, 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;
 let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
     constructor() {
         super(...arguments);
+        this.clearLabel = 'Clear';
+        this.controls = false;
         this.emptyLabel = 'Nothing written to the console yet.';
         this.label = 'Console output';
+        this.levelLabel = 'Levels shown';
+        this.levelWords = {};
         this.entries = [];
         this.following = true;
+        this.handleLevel = (event) => {
+            const field = event.target;
+            const taken = requestChange({
+                apply: (next) => {
+                    this.level = next === 'log' ? undefined : next;
+                },
+                event: (next) => new HelixBeforeChangeEvent({ value: next }),
+                host: this,
+                next: field.value,
+            });
+            if (taken) {
+                this.relayNativeEvent(event);
+            }
+            else {
+                field.value = this.level ?? 'log';
+            }
+        };
     }
     get log() {
         return this.renderRoot.querySelector('[part="log"]');
@@ -44,11 +72,25 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
             }
         }
     }
+    renderControls() {
+        if (!this.controls) {
+            return nothing;
+        }
+        return html `<div part="controls">
+      <select part="filter" aria-label=${this.levelLabel} @change=${this.handleLevel}>
+        ${LEVELS.map((one) => html `<option value=${one} ?selected=${(this.level ?? 'log') === one}>
+              ${this.levelWords?.[one] ?? LEVEL_WORDS[one]}
+            </option>`)}
+      </select>
+      <button part="clear" type="button" @click=${() => this.clear()}>${this.clearLabel}</button>
+    </div>`;
+    }
     render() {
-        return html `<div part="log" role="log" aria-label=${this.label} tabindex="0">
-      ${this.entries.length === 0
+        const shown = this.entries.filter((entry) => shows(entry.level, this.level));
+        return html `${this.renderControls()}<div part="log" role="log" aria-label=${this.label} tabindex="0">
+      ${shown.length === 0
             ? html `<p part="empty">${this.emptyLabel}</p>`
-            : this.entries.map((entry) => html `<div part="entry" data-level=${entry.level}>
+            : shown.map((entry) => html `<div part="entry" data-level=${entry.level}>
                 <span part="level" aria-hidden=${entry.level === 'log' ? 'true' : nothing}
                   >${entry.level}</span
                 >
@@ -63,12 +105,27 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
     }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ attribute: 'clear-label' })
+], HelixSandboxTerminal.prototype, "clearLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixSandboxTerminal.prototype, "controls", void 0);
 __decorate([
     property({ attribute: 'empty-label' })
 ], HelixSandboxTerminal.prototype, "emptyLabel", void 0);
 __decorate([
     property()
 ], HelixSandboxTerminal.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixSandboxTerminal.prototype, "level", void 0);
+__decorate([
+    property({ attribute: 'level-label' })
+], HelixSandboxTerminal.prototype, "levelLabel", void 0);
+__decorate([
+    property({ attribute: 'level-words', converter: wordsConverter })
+], HelixSandboxTerminal.prototype, "levelWords", void 0);
 __decorate([
     state()
 ], HelixSandboxTerminal.prototype, "entries", void 0);

package/dist/sandbox/tokens.d.ts

@@ -0,0 +1,39 @@
+/** One run of source text, and the kind of token it is. */
+export interface SandboxToken {
+    /**
+     * What the run is: `callable`, `comment`, `constant`, `invalid`, `keyword`,
+     * `name`, `string` or `tag`, which each have a color. Absent for text that is
+     * not a token, such as spaces and punctuation.
+     */
+    kind?: string | undefined;
+    /** The text of the run, exactly as the source has it. */
+    text: string;
+}
+/**
+ * Splits a pane's source into runs, for `SandboxSource.highlight`.
+ *
+ * Takes the source and the pane's `name`, such as `html` or `css`, so one
+ * function can serve every pane.
+ */
+export type SandboxHighlight = (source: string, name: string) => readonly SandboxToken[];
+/** A run as the pane draws it: its text, and its kind as an attribute holds it. */
+export interface DrawnRun {
+    /** The kind, in lowercase letters, digits and hyphens, or `undefined` for plain text. */
+    kind: string | undefined;
+    /** The text of the run. */
+    text: string;
+}
+/**
+ * The runs a highlighter gave, made safe to draw over the field.
+ *
+ * **Drawn under the text the reader types, so the two must match exactly.** The
+ * runs are laid out behind a transparent field, and one character dropped or
+ * added moves every line after it away from the caret. So runs whose text does
+ * not add up to the source are not drawn as given: the source is drawn as one
+ * plain run instead, which loses the colors and keeps the caret honest.
+ *
+ * A kind is lowercased and anything but letters, digits and hyphens in it is
+ * a hyphen, so the stylesheet's eight kinds match however a highlighter
+ * spells them, and nothing else it writes reaches an attribute.
+ */
+export declare const drawnRuns: (source: string, runs: readonly SandboxToken[]) => DrawnRun[];

package/dist/sandbox/tokens.js

@@ -0,0 +1,9 @@
+export const drawnRuns = (source, runs) => {
+    if (runs.map((run) => run.text).join('') !== source) {
+        return [{ kind: undefined, text: source }];
+    }
+    return runs.map((run) => ({
+        kind: run.kind ? run.kind.toLowerCase().replace(/[^a-z0-9-]/g, '-') : undefined,
+        text: run.text,
+    }));
+};

package/dist/scatter-chart/root/scatter-chart-root.css.js

@@ -30,6 +30,15 @@ inline-size: 100%;
 overflow: visible;
 }
 
+[part="trend"] {
+fill: none;
+stroke: var(--chart-series);
+stroke-dasharray: var(--scatter-chart-trend-dash, 4 3);
+stroke-linecap: round;
+stroke-width: var(--scatter-chart-trend-width, 1.5px);
+vector-effect: non-scaling-stroke;
+}
+
 [part="gridline"] {
 stroke: var(--scatter-chart-gridline-color, var(--helix-color-border));
 stroke-width: var(--helix-border-thin);

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

@@ -38,6 +38,8 @@ import '../../tooltip/index.js';
  * @cssproperty --scatter-chart-point-opacity - Opacity of a point, so a cluster looks darker where it is denser.
  * @cssproperty --scatter-chart-point-ring-color - Color of the ring around each point. It matches the page, so change it when the chart sits on another surface.
  * @cssproperty --scatter-chart-point-size - Diameter of a point.
+ * @cssproperty --scatter-chart-trend-dash - The dash pattern of a line of best fit, under `trend`, as `stroke-dasharray` takes it. `none` draws it solid.
+ * @cssproperty --scatter-chart-trend-width - The thickness of a line of best fit, under `trend`.
  */
 export declare class HelixScatterChart extends HelixHeadlessScatterChart {
     /** The styled tier, so the tooltip this renders is the styled one. */