@fusion.dev/helix 0.146.0 → 0.148.0

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

@@ -1,96 +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;
-}
-
-[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));
-}`);
+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,6 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup, TemplateResult } from 'lit';
-import { type SandboxHighlight } from '../tokens.js';
+import { type SandboxTokenizer } from '../tokens.js';
 /**
  * @summary An editable source pane for a sandbox preview.
  *
@@ -12,7 +12,7 @@ import { type SandboxHighlight } from '../tokens.js';
  * 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
+ * **`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
@@ -20,7 +20,9 @@ import { type SandboxHighlight } from '../tokens.js';
  * `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`.
+ * 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
@@ -31,37 +33,27 @@ import { type SandboxHighlight } from '../tokens.js';
  * @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 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 `highlight`.
+ * @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 `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-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 `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`.
+ * @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 {
     /**
      * 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.
      */
@@ -79,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.
      */
@@ -123,7 +129,7 @@ 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`. */
+    /** The field itself and its description, which is the whole pane without `tokenize`. */
     private renderField;
     static styles: CSSResultGroup;
 }

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

@@ -67,10 +67,17 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     }
     render() {
         const field = this.renderField();
-        if (!this.highlight) {
+        if (!this.tokenize) {
             return field;
         }
-        const runs = drawnRuns(this.value, this.highlight(this.value, this.name));
+        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}
@@ -96,9 +103,6 @@ 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);
@@ -108,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

@@ -106,6 +106,10 @@ export declare class HelixSandboxTerminal extends HelixElement {
      * 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`. */

package/dist/sandbox/terminal/sandbox-terminal.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);
@@ -77,7 +78,7 @@ 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]}
             </option>`)}

package/dist/sandbox/tokens.d.ts

@@ -10,12 +10,12 @@ export interface SandboxToken {
     text: string;
 }
 /**
- * Splits a pane's source into runs, for `SandboxSource.highlight`.
+ * 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 SandboxHighlight = (source: string, name: string) => readonly SandboxToken[];
+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. */

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,152 +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="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"] {
-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,6 +33,7 @@ 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.