@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,26 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-block-size: 100%;
-}
-
-[part="source"] {
-background-color: var(--sandbox-source-background-color, var(--helix-color-background));
-block-size: 100%;
-border: none;
-color: var(--helix-color-foreground-muted);
-display: block;
-font-family: var(--helix-font-mono);
-font-size: var(--helix-text-xs);
-inline-size: 100%;
-line-height: var(--helix-leading-normal);
-min-block-size: var(--sandbox-source-min-block-size, 12rem);
-padding: var(--helix-space-sm);
-resize: none;
-tab-size: 2;
-}
-
-[part="source"]:focus-visible {
-background-color: var(--helix-color-surface);
-outline: none;
-}`);
+export const styles = createSheet(`:host {display: block;block-size: 100%;}[part="highlight"],
+[part="source"] {border: none;color: var(--helix-color-foreground-muted);font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);inline-size: 100%;line-height: var(--helix-leading-normal);min-block-size: var(--sandbox-source-min-block-size, 12rem);padding: var(--helix-space-sm);tab-size: 2;}[part="source"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: block;resize: none;}[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] {grid-area: 1 / 1;letter-spacing: normal;margin: 0;overflow-wrap: break-word;white-space: pre-wrap;}[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;}[data-kind="callable"] {color: var(--sandbox-source-callable-color, var(--helix-color-syntax-callable));}[data-kind="comment"] {color: var(--sandbox-source-comment-color, var(--helix-color-syntax-comment));}[data-kind="constant"] {color: var(--sandbox-source-constant-color, var(--helix-color-syntax-constant));}[data-kind="invalid"] {color: var(--sandbox-source-invalid-color, var(--helix-color-syntax-invalid));}[data-kind="keyword"] {color: var(--sandbox-source-keyword-color, var(--helix-color-syntax-keyword));}[data-kind="name"] {color: var(--sandbox-source-name-color, var(--helix-color-syntax-name));}[data-kind="string"] {color: var(--sandbox-source-string-color, var(--helix-color-syntax-string));}[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 SandboxTokenizer } from '../tokens.js';
 /**
  * @summary An editable source pane for a sandbox preview.
  *
@@ -11,6 +12,18 @@ 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.
  *
+ * **`tokenize` 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`. A `tokenize`
+ * that throws leaves the source drawn plain and the field editable, and the
+ * error is reported to the page as an uncaught one.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Editor, Code pane
@@ -20,10 +33,21 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @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 `tokenize`.
+ * @csspart highlight - The colored copy of the source drawn under the field, under `tokenize`.
  * @csspart source - The editable region.
+ * @csspart token - One run of the source that has a kind, under `tokenize`.
  *
  * @cssproperty --sandbox-source-background-color - Fill behind the source.
+ * @cssproperty --sandbox-source-callable-color - Color of a `callable` run, under `tokenize`. Defaults to `--helix-color-syntax-callable`.
+ * @cssproperty --sandbox-source-comment-color - Color of a `comment` run, under `tokenize`. Defaults to `--helix-color-syntax-comment`.
+ * @cssproperty --sandbox-source-constant-color - Color of a `constant` run, under `tokenize`. Defaults to `--helix-color-syntax-constant`.
+ * @cssproperty --sandbox-source-invalid-color - Color of an `invalid` run, under `tokenize`. Defaults to `--helix-color-syntax-invalid`.
+ * @cssproperty --sandbox-source-keyword-color - Color of a `keyword` run, under `tokenize`. 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 `tokenize`. Defaults to `--helix-color-syntax-name`.
+ * @cssproperty --sandbox-source-string-color - Color of a `string` run, under `tokenize`. Defaults to `--helix-color-syntax-string`.
+ * @cssproperty --sandbox-source-tag-color - Color of a `tag` run, under `tokenize`. Defaults to `--helix-color-syntax-tag`.
  */
 export declare class HelixSandboxSource extends HelixElement {
     /**
@@ -47,6 +71,20 @@ export declare class HelixSandboxSource extends HelixElement {
      * Whether Tab indents the source. When it is off, Tab moves focus.
      */
     tabIndents: boolean;
+    /**
+     * 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, and so is the source when the function throws. Set it as a
+     * property.
+     *
+     * Named for what it returns, runs of text, where Code Block's `highlight`
+     * returns markup.
+     */
+    tokenize?: SandboxTokenizer;
     /**
      * The source being edited.
      */
@@ -91,6 +129,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 `tokenize`. */
+    private renderField;
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 {
@@ -65,6 +66,24 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
         }
     }
     render() {
+        const field = this.renderField();
+        if (!this.tokenize) {
+            return field;
+        }
+        let given = [];
+        try {
+            given = this.tokenize(this.value, this.name);
+        }
+        catch (error) {
+            globalThis.reportError?.(error);
+        }
+        const runs = drawnRuns(this.value, given);
+        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}
@@ -93,6 +112,9 @@ __decorate([
 __decorate([
     property({ attribute: 'tab-indents', converter: onUnlessFalse })
 ], HelixSandboxSource.prototype, "tabIndents", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixSandboxSource.prototype, "tokenize", void 0);
 __decorate([
     property()
 ], HelixSandboxSource.prototype, "value", void 0);

package/dist/sandbox/status-bar/sandbox-status-bar.css.js

@@ -1,22 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-align-items: center;
-background-color: var(--helix-color-background);
-border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
-color: var(--sandbox-status-bar-color, var(--helix-color-foreground-subtle));
-display: flex;
-font-size: var(--helix-text-xs);
-gap: var(--helix-space-sm);
-line-height: var(--helix-leading-tight);
-padding: var(--helix-space-2xs) var(--helix-space-sm);
-
-user-select: none;
-}
-
-slot:not([name]) + * {
-margin-inline-start: auto;
-}
-
-[part="caret"] {
-font-variant-numeric: tabular-nums;
-}`);
+export const styles = createSheet(`:host {align-items: center;background-color: var(--helix-color-background);border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--sandbox-status-bar-color, var(--helix-color-foreground-subtle));display: flex;font-size: var(--helix-text-xs);gap: var(--helix-space-sm);line-height: var(--helix-leading-tight);padding: var(--helix-space-2xs) var(--helix-space-sm);user-select: none;}slot:not([name]) + * {margin-inline-start: auto;}[part="caret"] {font-variant-numeric: tabular-nums;}`);

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

@@ -1,107 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
-block-size: var(--sandbox-terminal-size, 100%);
-display: grid;
-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);
-line-height: var(--helix-leading-normal);
-overflow: auto;
-padding: var(--helix-space-xs) var(--helix-space-sm);
-}
-
-[part="log"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-[part="empty"] {
-color: var(--helix-color-foreground-subtle);
-margin: var(--helix-space-none);
-}
-
-[part="entry"] {
-align-items: baseline;
-color: var(--helix-color-foreground-muted);
-display: grid;
-gap: var(--helix-space-xs);
-grid-template-columns: 3.5rem minmax(0, 1fr) auto;
-padding-block: var(--helix-space-2xs);
-}
-
-[part="level"] {
-color: var(--helix-color-foreground-subtle);
-text-transform: uppercase;
-}
-
-[part="message"] {
-white-space: pre-wrap;
-word-break: break-word;
-}
-
-[part="count"] {
-background-color: var(--helix-color-surface-sunken);
-border-radius: var(--helix-radii-full);
-color: var(--helix-color-foreground-subtle);
-padding-inline: var(--helix-space-2xs);
-}
-
-[part="entry"][data-level="warn"] {
-color: var(--helix-color-warning);
-}
-
-[part="entry"][data-level="warn"] [part="level"] {
-color: var(--helix-color-warning);
-}
-
-[part="entry"][data-level="error"] {
-color: var(--helix-color-danger);
-}
-
-[part="entry"][data-level="error"] [part="level"] {
-color: var(--helix-color-danger);
-}`);
+export const styles = createSheet(`:host {block-size: var(--sandbox-terminal-size, 100%);display: grid;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);line-height: var(--helix-leading-normal);overflow: auto;padding: var(--helix-space-xs) var(--helix-space-sm);}[part="log"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="empty"] {color: var(--helix-color-foreground-subtle);margin: var(--helix-space-none);}[part="entry"] {align-items: baseline;color: var(--helix-color-foreground-muted);display: grid;gap: var(--helix-space-xs);grid-template-columns: 3.5rem minmax(0, 1fr) auto;padding-block: var(--helix-space-2xs);}[part="level"] {color: var(--helix-color-foreground-subtle);text-transform: uppercase;}[part="message"] {white-space: pre-wrap;word-break: break-word;}[part="count"] {background-color: var(--helix-color-surface-sunken);border-radius: var(--helix-radii-full);color: var(--helix-color-foreground-subtle);padding-inline: var(--helix-space-2xs);}[data-level="warn"],
+[data-level="warn"] [part="level"] {color: var(--helix-color-warning);}[data-level="error"],
+[data-level="error"] [part="level"] {color: var(--helix-color-danger);}`);

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

@@ -27,6 +27,9 @@ import { type ConsoleLevel } from '../levels.js';
  * @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.
@@ -74,7 +77,8 @@ export declare class HelixSandboxTerminal extends HelixElement {
     /**
      * 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.
+     * 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;
@@ -98,7 +102,15 @@ export declare class HelixSandboxTerminal extends HelixElement {
     /** Empties the log. */
     clear(): void;
     protected updated(): void;
-    /** Takes the level the reader chose in the filter. */
+    /**
+     * 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.
+     *
+     * The select's `input` is stopped where it starts, as Pagination's is. It is
+     * composed and comes first, so it left this element before
+     * `helix-before-change` and still left it when the change was refused.
+     */
     private readonly handleLevel;
     /** The clear button and the level filter, under `controls`. */
     private renderControls;

package/dist/sandbox/terminal/sandbox-terminal.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, 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';
@@ -16,6 +16,7 @@ const LEVEL_WORDS = {
     warn: 'Warnings and errors',
 };
 const LIMIT = 200;
+const stop = (event) => event.stopPropagation();
 let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
     constructor() {
         super(...arguments);
@@ -28,8 +29,21 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
         this.entries = [];
         this.following = true;
         this.handleLevel = (event) => {
-            const chosen = event.target.value;
-            this.level = chosen === 'log' ? undefined : chosen;
+            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() {
@@ -64,9 +78,9 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
             return nothing;
         }
         return html `<div part="controls">
-      <select part="filter" aria-label=${this.levelLabel} @change=${this.handleLevel}>
+      <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] ?? LEVEL_WORDS[one]}
             </option>`)}
       </select>
       <button part="clear" type="button" @click=${() => this.clear()}>${this.clearLabel}</button>
@@ -111,7 +125,7 @@ __decorate([
     property({ attribute: 'level-label' })
 ], HelixSandboxTerminal.prototype, "levelLabel", void 0);
 __decorate([
-    property({ attribute: 'level-words', type: Object })
+    property({ attribute: 'level-words', converter: wordsConverter })
 ], HelixSandboxTerminal.prototype, "levelWords", void 0);
 __decorate([
     state()

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.tokenize`.
+ *
+ * Takes the source and the pane's `name`, such as `html` or `css`, so one
+ * function can serve every pane.
+ */
+export type SandboxTokenizer = (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/sandbox/toolbar/sandbox-toolbar.css.js

@@ -1,37 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---helix-size-checkbox: var(--helix-size-checkbox-sm);
---helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);
---helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);
---helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);
---helix-size-control: var(--helix-size-control-sm);
---helix-size-control-loose: calc(var(--helix-size-control) * 1.2);
---helix-size-control-tight: calc(var(--helix-size-control) * 0.8);
---helix-size-tag: var(--helix-size-tag-sm);
-
-align-items: center;
-background-color: var(--helix-color-background);
-
-block-size: var(--sandbox-toolbar-size, var(--helix-size-control-lg));
-
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
-display: flex;
-min-block-size: 0;
-padding-block: var(--helix-space-none);
-
-padding-inline: var(--helix-space-md);
-}
-
-slot {
-align-items: center;
-display: flex;
-gap: var(--sandbox-toolbar-gap, var(--helix-space-sm));
-min-inline-size: 0;
-}
-
-slot[name="end"] {
-margin-inline-start: auto;
-}`);
+export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);align-items: center;background-color: var(--helix-color-background);block-size: var(--sandbox-toolbar-size, var(--helix-size-control-lg));border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;min-block-size: 0;padding-block: var(--helix-space-none);padding-inline: var(--helix-space-md);}slot {align-items: center;display: flex;gap: var(--sandbox-toolbar-gap, var(--helix-space-sm));min-inline-size: 0;}slot[name="end"] {margin-inline-start: auto;}`);

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

@@ -1,143 +1,17 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-container-type: inline-size;
-display: block;
-position: relative;
-}
-
-[part="plane"] {
-column-gap: var(--scatter-chart-gap, var(--helix-space-xs));
-display: grid;
-grid-template-areas:
+export const styles = createSheet(`:host {container-type: inline-size;display: block;position: relative;}[part="plane"] {column-gap: var(--scatter-chart-gap, var(--helix-space-xs));display: grid;grid-template-areas:
 "y-name y-name"
 "y-axis plot"
 ". x-axis"
-". x-name";
-grid-template-columns: auto minmax(0, 1fr);
-row-gap: var(--scatter-chart-gap, var(--helix-space-xs));
-}
-
-[part="plot"] {
-block-size: var(--scatter-chart-block-size, 14em);
-cursor: crosshair;
-grid-area: plot;
-position: relative;
-}
-
-[part="plot"] svg {
-block-size: 100%;
-inline-size: 100%;
-overflow: visible;
-}
-
-[part="gridline"] {
-stroke: var(--scatter-chart-gridline-color, var(--helix-color-border));
-stroke-width: var(--helix-border-thin);
-vector-effect: non-scaling-stroke;
-}
-
-[part~="point"] {
-background-color: var(--chart-series);
-block-size: var(--scatter-chart-point-size, 8px);
-border-radius: var(--helix-radii-full);
-box-shadow: 0 0 0 var(--helix-border-thin)
-var(--scatter-chart-point-ring-color, var(--helix-color-background));
-inline-size: var(--scatter-chart-point-size, 8px);
-inset-block-start: var(--chart-point-y);
-inset-inline-start: var(--chart-point-x);
-opacity: var(--scatter-chart-point-opacity, 0.8);
-pointer-events: none;
-position: absolute;
-transition:
+". x-name";grid-template-columns: auto minmax(0, 1fr);row-gap: var(--scatter-chart-gap, var(--helix-space-xs));}[part="plot"] {block-size: var(--scatter-chart-block-size, 14em);cursor: crosshair;grid-area: plot;position: relative;}[part="plot"] svg {block-size: 100%;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);vector-effect: non-scaling-stroke;}[part~="point"] {--_scatter-chart-diameter: calc(
+var(--scatter-chart-point-size, 8px) +
+var(--chart-point-weight, 0) *
+(var(--scatter-chart-bubble-size, 40px) - var(--scatter-chart-point-size, 8px))
+);background-color: var(--chart-series);block-size: var(--_scatter-chart-diameter);border-radius: var(--helix-radii-full);box-shadow: 0 0 0 var(--helix-border-thin)
+var(--scatter-chart-point-ring-color, var(--helix-color-background));inline-size: var(--_scatter-chart-diameter);inset-block-start: var(--chart-point-y);inset-inline-start: var(--chart-point-x);opacity: var(--scatter-chart-point-opacity, 0.8);pointer-events: none;position: absolute;transition:
 inset-block-start var(--helix-duration-normal) var(--helix-easing-decelerate),
 inset-inline-start var(--helix-duration-normal) var(--helix-easing-decelerate),
-scale var(--helix-duration-fast) var(--helix-easing-decelerate);
-translate: -50% -50%;
-}
-
-[part~="point"][data-active] {
-opacity: 1;
-scale: 1.5;
-}
-
-[part="x-axis"],
-[part="y-axis"] {
-display: grid;
-}
-
-[part="x-axis"] {
-grid-area: x-axis;
-}
-
-[part="y-axis"] {
-grid-area: y-axis;
-}
-
-[part="x-tick"],
-[part="y-tick"] {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-xs);
-font-variant-numeric: tabular-nums;
-grid-area: 1 / 1;
-line-height: 1;
-position: relative;
-white-space: nowrap;
-}
-
-[part="x-tick"] {
-inset-inline-start: var(--chart-tick);
-justify-self: start;
-translate: -50% 0;
-}
-
-[part="y-tick"] {
-align-self: start;
-inset-block-start: var(--chart-tick);
-justify-self: end;
-translate: 0 -50%;
-}
-
-@container (inline-size < 30rem) {
-[part="x-tick"]:nth-last-child(even) {
-visibility: hidden;
-}
-}
-
-[part="x-name"],
-[part="y-name"] {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-xs);
-font-weight: var(--helix-weight-medium);
-}
-
-[part="x-name"] {
-grid-area: x-name;
-justify-self: end;
-}
-
-[part="y-name"] {
-grid-area: y-name;
-justify-self: start;
-}
-
-[part="summary"] {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-margin: var(--helix-space-none);
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}
-
-@starting-style {
-[part~="point"] {
-opacity: 0;
-}
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+scale var(--helix-duration-fast) var(--helix-easing-decelerate);translate: -50% -50%;}[part~="point"][data-active] {opacity: 1;scale: 1.5;}[part="x-axis"],
+[part="y-axis"] {display: grid;}[part="x-axis"] {grid-area: x-axis;}[part="y-axis"] {grid-area: y-axis;}[part="x-tick"],
+[part="y-tick"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;grid-area: 1 / 1;line-height: 1;position: relative;white-space: nowrap;}[part="x-tick"] {inset-inline-start: var(--chart-tick);justify-self: start;translate: -50% 0;}[part="y-tick"] {align-self: start;inset-block-start: var(--chart-tick);justify-self: end;translate: 0 -50%;}@container (inline-size < 30rem) {[part="x-tick"]:nth-last-child(even) {visibility: hidden;}}[part="x-name"],
+[part="y-name"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);}[part="x-name"] {grid-area: x-name;justify-self: end;}[part="y-name"] {grid-area: y-name;justify-self: start;}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}@starting-style {[part~="point"] {opacity: 0;}}@media print {:host {print-color-adjust: exact;}}`);

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

@@ -33,11 +33,14 @@ import '../../tooltip/index.js';
  * @documentation https://fusion.dev/helix/components/scatter-chart
  *
  * @cssproperty --scatter-chart-block-size - Height of the drawing.
+ * @cssproperty --scatter-chart-bubble-size - Diameter of the largest point under `size-by`. The smallest is `--scatter-chart-point-size`.
  * @cssproperty --scatter-chart-gap - Space between the drawing and its axes.
  * @cssproperty --scatter-chart-gridline-color - Color of the gridlines across the plot, drawn when `gridlines` is set.
  * @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. */