@fusion.dev/helix 0.145.0 → 0.146.0

package/dist/number-input/root/number-input-root.css.js

@@ -23,7 +23,7 @@ background-color: transparent;
 
 [part="control"] {
 font-variant-numeric: tabular-nums;
-padding-inline: var(--helix-space-xs);
+padding-inline: var(--number-input-padding-inline, var(--helix-space-xs));
 text-align: center;
 }
 
@@ -46,12 +46,13 @@ padding-inline-end: var(--helix-space-xs);
 all: unset;
 align-items: center;
 align-self: stretch;
+background-color: var(--number-input-stepper-background-color, transparent);
 box-sizing: border-box;
-color: var(--helix-color-foreground-muted);
+color: var(--number-input-stepper-color, var(--helix-color-foreground-muted));
 cursor: pointer;
 display: flex;
 flex: none;
-inline-size: var(--helix-size-control);
+inline-size: var(--number-input-stepper-size, var(--helix-size-control));
 justify-content: center;
 transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
@@ -59,17 +60,19 @@ color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 [part="decrement"] {
-border-inline-end: var(--helix-border-thin) solid var(--helix-color-border);
+border-inline-end: var(--helix-border-thin) solid
+var(--number-input-stepper-border-color, var(--helix-color-border));
 }
 
 [part="increment"] {
-border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
+border-inline-start: var(--helix-border-thin) solid
+var(--number-input-stepper-border-color, var(--helix-color-border));
 }
 
 [part="decrement"]:hover:not(:disabled),
 [part="increment"]:hover:not(:disabled) {
-background-color: var(--helix-color-surface);
-color: var(--helix-color-foreground);
+background-color: var(--number-input-stepper-background-color-hover, var(--helix-color-surface));
+color: var(--number-input-stepper-color-hover, var(--helix-color-foreground));
 }
 
 [part="decrement"]:disabled,
@@ -80,8 +83,8 @@ opacity: 0.4;
 
 [part="decrement"] svg,
 [part="increment"] svg {
-block-size: var(--helix-size-icon-tight);
-inline-size: var(--helix-size-icon-tight);
+block-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));
+inline-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));
 }
 
 :host([scrub]) [part="label"] {

package/dist/number-input/root/number-input-root.d.ts

@@ -34,8 +34,16 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --number-input-background-color - The fill behind the number.
  * @cssproperty --number-input-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --number-input-padding-inline - Space at each side of the number, inside the steppers.
  * @cssproperty --number-input-radius - Corner radius of the field.
  * @cssproperty --number-input-size - Height of the field.
+ * @cssproperty --number-input-stepper-background-color - Fill behind each stepper button at rest.
+ * @cssproperty --number-input-stepper-background-color-hover - Fill behind a stepper button under the pointer.
+ * @cssproperty --number-input-stepper-border-color - The rule between each stepper button and the number.
+ * @cssproperty --number-input-stepper-color - Icon color of the stepper buttons at rest.
+ * @cssproperty --number-input-stepper-color-hover - Icon color of a stepper button under the pointer.
+ * @cssproperty --number-input-stepper-icon-size - Width and height of the stepper icons.
+ * @cssproperty --number-input-stepper-size - Width of each stepper button.
  */
 export declare class HelixNumberInput extends HelixHeadlessNumberInput {
     static styles: CSSResultGroup;

package/dist/object-inspector/root/object-inspector-root.css.js

@@ -77,10 +77,6 @@ overflow-y: auto;
 overscroll-behavior: contain;
 }
 
-[part="tree"]:focus-visible {
-outline: none;
-}
-
 [part~="row"] {
 cursor: default;
 overflow: hidden;
@@ -105,11 +101,11 @@ var(--helix-space-sm)
 );
 }
 
-[part="tree"]:focus [part~="row-active"] {
+[part="tree"]:focus-within [part~="row-active"] {
 background-color: var(--helix-color-surface-sunken);
 }
 
-[part="tree"]:focus-visible [part~="row-active"] {
+[part~="row"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: calc(var(--helix-size-focus-offset) * -1);
 }

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

@@ -67,7 +67,7 @@ mask-repeat: no-repeat;
 mask-size: contain;
 }
 
-:host([data-active]) [part~="item"],
+:host(:state(active)) [part~="item"],
 :host(:not([disabled])) [part~="item"]:hover {
 
 background-color: var(

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

@@ -31,7 +31,8 @@ import { type OrbState } from '../shapes.js';
  * `prefers-reduced-motion`, it draws one still frame.
  *
  * The orb is styled only and has behavior, which the tier split does not
- * otherwise allow. Its role, name and busy state follow `state`, and the rest
+ * otherwise allow. Its role, name and busy state follow `state`, unless
+ * `announce` makes it a status region, and the rest
  * is drawing dots to a canvas, so there is no structure to restyle. For a
  * drawing of your own, the headless `Loader` holds the same busy progress bar
  * and its name.
@@ -47,7 +48,7 @@ import { type OrbState } from '../shapes.js';
  * @documentation https://fusion.dev/helix/components/orb
  *
  * @csspart canvas - The canvas the dots are drawn on.
- * @csspart live - The live region that says the new state when `announce` is set. It is rendered from the first change of state and clipped out of view.
+ * @csspart live - The word for the state, which the orb says as it changes when `announce` is set. Rendered only then, and clipped out of view.
  *
  * @cssproperty --orb-color - The color of the nearest dots. Defaults to `currentColor`.
  * @cssproperty --orb-ground - The color the farthest dots fade toward. Defaults to the page's background.
@@ -64,8 +65,13 @@ import { type OrbState } from '../shapes.js';
 export declare class HelixOrb extends HelixElement {
     static styles: CSSResultGroup;
     /**
-     * Says each new state through a polite live region, such as "Working" and
-     * then "Done".
+     * Says each new state politely, such as "Working" and then "Done".
+     *
+     * **The orb becomes the live region**: its role is `status` rather than
+     * `progressbar` or `img`, and it holds the state's word. A region inside a
+     * progress bar or an image may never be heard, because assistive technology
+     * treats what those two hold as presentation. The name is still `label` or
+     * the state's word.
      *
      * Off by default, because the name and the busy state already change with
      * the state, and an orb beside a stream of messages would otherwise talk
@@ -118,8 +124,6 @@ export declare class HelixOrb extends HelixElement {
      * markup and plain HTML can carry the words too.
      */
     stateLabels: Partial<Record<OrbState, string>>;
-    /** The region `announce` speaks in. */
-    private readonly status;
     private canvas;
     private context;
     /**
@@ -161,6 +165,10 @@ export declare class HelixOrb extends HelixElement {
      */
     private phase;
     protected willUpdate(changed: PropertyValues): void;
+    /** The state drawn: `state`, or `thinking` for one it does not draw. */
+    private get shown();
+    /** The word for the state drawn, in the page's words where it gave them. */
+    private get word();
     protected render(): TemplateResult;
     protected firstUpdated(changed: PropertyValues): void;
     connectedCallback(): void;

package/dist/orb/root/orb-root.js

@@ -4,8 +4,8 @@ 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, drawStatus, HelixElement, hostAria, PaintGateController, readColor, StatusController, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, HelixElement, hostAria, PaintGateController, readColor, wordsConverter, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { blendStaged, evenSphere, fibonacci, meshFor, ORB_STATES, orbPoint, paramsFor, project, smoother, stateDistance, TRAIL, } from '../shapes.js';
@@ -23,19 +23,6 @@ const LABELS = {
     waiting: 'Waiting',
     working: 'Working',
 };
-const labelsConverter = {
-    fromAttribute: (value) => {
-        try {
-            const parsed = JSON.parse(value ?? '');
-            return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
-                ? parsed
-                : {};
-        }
-        catch {
-            return {};
-        }
-    },
-};
 const GRAY = [128, 128, 128];
 let HelixOrb = class HelixOrb extends HelixElement {
     constructor() {
@@ -44,7 +31,6 @@ let HelixOrb = class HelixOrb extends HelixElement {
         this.label = '';
         this.state = 'thinking';
         this.stateLabels = {};
-        this.status = new StatusController(this);
         this.context = null;
         this.gate = new PaintGateController(this, {
             canRun: () => !!this.context && !this.lost,
@@ -86,14 +72,12 @@ let HelixOrb = class HelixOrb extends HelixElement {
     static { this.styles = [liveStyles, styles]; }
     willUpdate(changed) {
         super.willUpdate(changed);
-        const state = ORB_STATES.includes(this.state)
-            ? this.state
-            : 'thinking';
+        const state = this.shown;
         hostAria(this.internals, {
-            label: this.label || this.stateLabels[state] || LABELS[state],
-            role: state === 'done' ? 'img' : 'progressbar',
+            label: this.label || this.word,
+            role: this.announce ? 'status' : state === 'done' ? 'img' : 'progressbar',
         });
-        this.internals.ariaBusy = state === 'done' ? 'false' : 'true';
+        this.internals.ariaBusy = this.announce ? null : state === 'done' ? 'false' : 'true';
         this.toggleState('connecting', state === 'connecting');
         this.toggleState('done', state === 'done');
         this.toggleState('fetching', state === 'fetching');
@@ -103,13 +87,18 @@ let HelixOrb = class HelixOrb extends HelixElement {
         this.toggleState('working', state === 'working');
         if (changed.has('state') && changed.get('state') !== undefined) {
             this.turn();
-            if (this.announce) {
-                this.status.say(this.label || this.stateLabels[state] || LABELS[state]);
-            }
         }
     }
+    get shown() {
+        return ORB_STATES.includes(this.state)
+            ? this.state
+            : 'thinking';
+    }
+    get word() {
+        return this.stateLabels?.[this.shown] || LABELS[this.shown];
+    }
     render() {
-        return html `<canvas part="canvas" aria-hidden="true"></canvas>${drawStatus(this.status)}`;
+        return html `<canvas part="canvas" aria-hidden="true"></canvas>${this.announce ? html `<span part="live">${this.word}</span>` : nothing}`;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -275,7 +264,7 @@ __decorate([
     property()
 ], HelixOrb.prototype, "state", void 0);
 __decorate([
-    property({ attribute: 'state-labels', converter: labelsConverter })
+    property({ attribute: 'state-labels', converter: wordsConverter })
 ], HelixOrb.prototype, "stateLabels", void 0);
 HelixOrb = __decorate([
     customElement('helix-orb')

package/dist/pin-input/root/pin-input-root.css.js

@@ -19,9 +19,9 @@ border: var(--helix-border-thin) solid
 var(--pin-input-cell-border-color, var(--helix-color-border));
 border-radius: var(--pin-input-cell-radius, var(--helix-radii-sm));
 box-sizing: border-box;
-color: var(--helix-color-foreground);
+color: var(--pin-input-cell-color, var(--helix-color-foreground));
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-lg);
+font-size: var(--pin-input-cell-font-size, var(--helix-text-lg));
 
 font-variant-numeric: tabular-nums;
 font-weight: var(--helix-weight-medium);
@@ -35,7 +35,7 @@ border-color: var(--helix-color-foreground-muted);
 }
 
 [part="cell"]:focus-visible {
-border-color: var(--helix-color-primary);
+border-color: var(--pin-input-cell-border-color-focus, var(--helix-color-primary));
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: 0;
 }
@@ -59,7 +59,7 @@ font-size: var(--helix-text-xl);
 
 [part="separator"] {
 align-self: center;
-color: var(--helix-color-foreground-muted);
+color: var(--pin-input-separator-color, var(--helix-color-foreground-muted));
 font-size: var(--helix-text-lg);
 }
 

package/dist/pin-input/root/pin-input-root.d.ts

@@ -25,9 +25,13 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --pin-input-cell-background-color - Fill behind each box.
  * @cssproperty --pin-input-cell-border-color - Edge of each box at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --pin-input-cell-border-color-focus - Edge of the box holding focus.
+ * @cssproperty --pin-input-cell-color - The color of a typed character.
+ * @cssproperty --pin-input-cell-font-size - The size of a typed character.
  * @cssproperty --pin-input-cell-radius - Corner radius of each box.
  * @cssproperty --pin-input-cell-size - Width and height of each box.
  * @cssproperty --pin-input-gap - The space between one box and the next.
+ * @cssproperty --pin-input-separator-color - The color of the text `format` draws between boxes.
  */
 export declare class HelixPinInput extends HelixHeadlessPinInput {
     static styles: CSSResultGroup;

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

@@ -55,7 +55,8 @@ border-radius: inherit;
 inline-size: 100%;
 scale: var(--progress-fraction, 0) 1;
 transform-origin: left center;
-transition: scale var(--helix-duration-normal) var(--helix-easing-decelerate);
+transition: scale var(--progress-transition-duration, var(--helix-duration-normal))
+var(--helix-easing-decelerate);
 }
 
 :host(:dir(rtl)) [part="indicator"] {
@@ -150,7 +151,8 @@ scale: none;
 stroke: var(--progress-color, var(--helix-color-primary));
 stroke-dasharray: calc(var(--progress-fraction) * 100) 100;
 stroke-linecap: round;
-transition: stroke-dasharray var(--helix-duration-normal) var(--helix-easing-decelerate);
+transition: stroke-dasharray var(--progress-transition-duration, var(--helix-duration-normal))
+var(--helix-easing-decelerate);
 }
 
 :host([shape="ring"][show-value]) {

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

@@ -28,6 +28,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --progress-ring-width - Thickness of the ring's stroke.
  * @cssproperty --progress-size - Thickness of the bar.
  * @cssproperty --progress-track-color - Fill of the part that is not done.
+ * @cssproperty --progress-transition-duration - How long the fill takes to move to a new value. `0s` moves it at once.
  */
 export declare class HelixProgress extends HelixHeadlessProgress {
     /**

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

@@ -17,6 +17,17 @@ display: block;
 inline-size: 100%;
 }
 
+[part="fallback"] {
+align-items: center;
+block-size: 100%;
+box-sizing: border-box;
+display: flex;
+justify-content: center;
+overflow-wrap: anywhere;
+padding: var(--helix-space-md);
+text-align: center;
+}
+
 [part="finders"] {
 fill: var(--qr-code-finder-color, currentColor);
 }

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

@@ -8,7 +8,10 @@ font: inherit;
 
 color: var(--quote-color, var(--helix-color-foreground-muted));
 font: inherit;
+
+font-family: var(--quote-font-family, inherit);
 font-style: var(--quote-font-style, italic);
+font-weight: var(--quote-font-weight, inherit);
 }
 
 @media print {

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

@@ -14,7 +14,9 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/quote
  *
  * @cssproperty --quote-color - Color of the quoted text.
+ * @cssproperty --quote-font-family - The typeface of the quoted text, the paragraph's own by default.
  * @cssproperty --quote-font-style - The slant of the quoted text, `italic` by default. Set `normal` for a face whose italic is too loud, or `oblique` for one with no italic of its own.
+ * @cssproperty --quote-font-weight - The weight of the quoted text, the paragraph's own by default.
  */
 export declare class HelixQuote extends HelixHeadlessQuote {
     static styles: CSSResultGroup;

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

@@ -58,6 +58,22 @@ transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
 scale: 1;
 }
 
+:host(:state(has-indicator)) [part="box"]::after {
+content: none;
+}
+
+slot[name="indicator"]::slotted(*) {
+block-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));
+color: var(--radio-mark-color, var(--helix-color-foreground));
+inline-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));
+scale: 0;
+transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
+}
+
+:host(:state(selected)) slot[name="indicator"]::slotted(*) {
+scale: 1;
+}
+
 [part="item"]:focus-visible [part="box"] {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);

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

@@ -23,7 +23,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --radio-card-border-color - The border color of a card-shaped choice.
  * @cssproperty --radio-card-padding - The padding inside a card-shaped choice.
  * @cssproperty --radio-chip-size - The diameter of a chip.
- * @cssproperty --radio-mark-color - The color of the dot.
+ * @cssproperty --radio-indicator-size - The width and height of an icon slotted into `indicator`. Three quarters of the circle by default.
+ * @cssproperty --radio-mark-color - The color of the dot, or of an icon slotted into `indicator`.
  * @cssproperty --radio-size - The diameter of the circle.
  */
 export declare class HelixRadio extends HelixHeadlessRadio {

package/dist/sandbox/frame.d.ts

@@ -24,9 +24,10 @@ export interface ServePreviewOptions {
  * shrinks each top-level child to its own content and centers it, which is
  * the difference for a component whose root is a full-width block. They
  * select the root by its `data-preview-root` attribute, so they reach nothing
- * an example draws inside it.
+ * an example draws inside it. The three that fill the viewport count their
+ * padding inside that height, so the root never overflows the frame.
  */
-export declare const LAYOUT_RULES = "\n:root { --preview-measure: 48rem; }\n[data-preview-root][data-layout=\"padded\"] { padding: var(--helix-space-lg, 1.5rem); }\n[data-preview-root][data-layout=\"centered\"], [data-preview-root][data-layout=\"hug\"] {\n  align-content: center; display: block; inline-size: min(100%, var(--preview-measure));\n  margin-inline: auto; min-block-size: 100dvh; padding: var(--helix-space-lg, 1.5rem);\n}\n[data-preview-root][data-layout=\"centered\"] { text-align: center; }\n[data-preview-root][data-layout=\"centered\"] > * { margin-inline: auto; text-align: start; }\n[data-preview-root][data-layout=\"hug\"] > * {\n  inline-size: fit-content; margin-inline: auto; max-inline-size: 100%;\n}\n[data-preview-root][data-layout=\"fullscreen\"] { min-block-size: 100dvh; padding: 0; }\n";
+export declare const LAYOUT_RULES = "\n:root { --preview-measure: 48rem; }\n[data-preview-root][data-layout=\"padded\"] { padding: var(--helix-space-lg, 1.5rem); }\n[data-preview-root][data-layout=\"centered\"], [data-preview-root][data-layout=\"hug\"] {\n  align-content: center; box-sizing: border-box; display: block;\n  inline-size: min(100%, var(--preview-measure)); margin-inline: auto; min-block-size: 100dvh;\n  padding: var(--helix-space-lg, 1.5rem);\n}\n[data-preview-root][data-layout=\"centered\"] { text-align: center; }\n[data-preview-root][data-layout=\"centered\"] > * { margin-inline: auto; text-align: start; }\n[data-preview-root][data-layout=\"hug\"] > * {\n  inline-size: fit-content; margin-inline: auto; max-inline-size: 100%;\n}\n[data-preview-root][data-layout=\"fullscreen\"] { box-sizing: border-box; min-block-size: 100dvh; padding: 0; }\n";
 /** Whether `data` is a render message, as the preview sends one. */
 export declare const isRender: (data: unknown) => data is PreviewRender;
 /**

package/dist/sandbox/frame.js

@@ -2,15 +2,16 @@ export const LAYOUT_RULES = `
 :root { --preview-measure: 48rem; }
 [data-preview-root][data-layout="padded"] { padding: var(--helix-space-lg, 1.5rem); }
 [data-preview-root][data-layout="centered"], [data-preview-root][data-layout="hug"] {
-  align-content: center; display: block; inline-size: min(100%, var(--preview-measure));
-  margin-inline: auto; min-block-size: 100dvh; padding: var(--helix-space-lg, 1.5rem);
+  align-content: center; box-sizing: border-box; display: block;
+  inline-size: min(100%, var(--preview-measure)); margin-inline: auto; min-block-size: 100dvh;
+  padding: var(--helix-space-lg, 1.5rem);
 }
 [data-preview-root][data-layout="centered"] { text-align: center; }
 [data-preview-root][data-layout="centered"] > * { margin-inline: auto; text-align: start; }
 [data-preview-root][data-layout="hug"] > * {
   inline-size: fit-content; margin-inline: auto; max-inline-size: 100%;
 }
-[data-preview-root][data-layout="fullscreen"] { min-block-size: 100dvh; padding: 0; }
+[data-preview-root][data-layout="fullscreen"] { box-sizing: border-box; min-block-size: 100dvh; padding: 0; }
 `;
 export const isRender = (data) => typeof data === 'object' &&
     data !== null &&
@@ -113,9 +114,21 @@ export const servePreview = (options = {}) => {
         options.onRender?.(root, fresh);
         measure();
     };
-    const press = () => post({ type: 'helix-preview-press' });
     const watcher = new ResizeObserver(measure);
-    watcher.observe(root);
+    const watch = () => {
+        watcher.disconnect();
+        watcher.observe(root);
+        for (const child of root.children) {
+            const placed = getComputedStyle(child).display === 'contents' ? child.children : [child];
+            for (const box of placed) {
+                watcher.observe(box);
+            }
+        }
+    };
+    const children = new MutationObserver(watch);
+    children.observe(root, { childList: true });
+    watch();
+    const press = () => post({ type: 'helix-preview-press' });
     window.addEventListener('error', failed);
     window.addEventListener('message', render);
     document.addEventListener('pointerdown', press, { capture: true, passive: true });
@@ -125,6 +138,7 @@ export const servePreview = (options = {}) => {
             console[level] = originals[index];
         });
         watcher.disconnect();
+        children.disconnect();
         window.removeEventListener('error', failed);
         window.removeEventListener('message', render);
         document.removeEventListener('pointerdown', press, { capture: true });

package/dist/sandbox/index.d.ts

@@ -18,4 +18,5 @@ export * from './root/sandbox-root.js';
 export * from './source/sandbox-source.js';
 export * from './status-bar/sandbox-status-bar.js';
 export * from './terminal/sandbox-terminal.js';
+export type { SandboxHighlight, SandboxToken } from './tokens.js';
 export * from './toolbar/sandbox-toolbar.js';

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
@@ -20,16 +31,37 @@ 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 `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.
      */
@@ -91,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 {