@fusion.dev/helix 0.182.2 → 0.184.0

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--bar-chart-gap, var(--helix-space-2xs))}[part="plot"] {position: relative;block-size: var(--bar-chart-block-size, 12em)}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="bar"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0 0;--_bar-chart-base: 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0;clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));fill: var(--_bar-chart-series)}:host([orientation="horizontal"]) [part~="bar"] {--_bar-chart-corners: 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0;--_bar-chart-base: 0 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2)}:host([stacked]) [part~="bar"]:not([part~="bar-end"]) {--_bar-chart-corners: 0}[part~="bar-end-negative"] {--_bar-chart-corners: 0 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px)}:host([orientation="horizontal"]) [part~="bar-end-negative"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) 0 0 var(--bar-chart-bar-radius, 2px)}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap}:host([orientation="horizontal"]) {grid-template-columns: auto 1fr}:host([orientation="horizontal"]) [part="labels"] {grid-column: 1;grid-row: 1}:host([orientation="horizontal"]) [part="plot"] {grid-column: 2;grid-row: 1}:host([orientation="horizontal"]) [part="labels"] {grid-auto-columns: auto;grid-auto-flow: row;grid-auto-rows: 1fr;align-self: start;block-size: var(--bar-chart-block-size, 12em)}:host([orientation="horizontal"]) [part="label"] {align-self: center;text-align: end}[part~="bar"], [part="line"] {--_bar-chart-series: var(--chart-series)}:host {--bar-chart-tone-accent: var(--helix-color-accent);--bar-chart-tone-danger: var(--helix-color-danger);--bar-chart-tone-info: var(--helix-color-info);--bar-chart-tone-muted: var(--helix-color-foreground-subtle);--bar-chart-tone-primary: var(--helix-color-primary);--bar-chart-tone-success: var(--helix-color-success);--bar-chart-tone-warning: var(--helix-color-warning)}[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {opacity: 0.45}[part~="group"] {transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate)}[part~="bar"] {transition: height var(--helix-duration-normal) var(--helix-easing-decelerate), width var(--helix-duration-normal) var(--helix-easing-decelerate), x var(--helix-duration-normal) var(--helix-easing-decelerate), y var(--helix-duration-normal) var(--helix-easing-decelerate)}@starting-style {:host(:not([orientation="horizontal"])) [part~="bar"] {height: 0;y: 100}:host([orientation="horizontal"]) [part~="bar"] {width: 0}}[part="plot"] {cursor: crosshair}[part="gridline"] {stroke: var(--bar-chart-gridline-color, var(--helix-color-border));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="band"] {fill: var(--bar-chart-band-color, var(--helix-color-surface-sunken))}[part="line"] {fill: none;stroke: var(--bar-chart-line-color, var(--_bar-chart-series, var(--helix-color-series-1)));stroke-linecap: round;stroke-linejoin: round;stroke-width: var(--bar-chart-line-width, var(--_chart-stroke));vector-effect: non-scaling-stroke}:host([secondary]) {grid-template-columns: auto 1fr auto}:host([secondary]) [part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1}:host([secondary]) [part="plot"] {grid-column: 2;grid-row: 1}[part="axis"][data-axis="secondary"] {--_bar-chart-axis-ink: color-mix(in oklab, var(--bar-chart-secondary) 45%, var(--helix-color-foreground));color: var(--_bar-chart-axis-ink, var(--helix-color-foreground-subtle))}:host([secondary]) [part="axis"][data-axis="secondary"] {grid-column: 3;grid-row: 1}:host([secondary]) [part="labels"] {grid-column: 2;grid-row: 2}:host([orientation="horizontal"][secondary]) {grid-template-columns: auto 1fr;grid-template-rows: auto 1fr auto}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {grid-column: 2;grid-row: 1}:host([orientation="horizontal"][secondary]) [part="labels"] {grid-column: 1;grid-row: 2}:host([orientation="horizontal"][secondary]) [part="plot"] {grid-column: 2;grid-row: 2}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 3}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) {grid-template-columns: auto 1fr}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="plot"], :host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="labels"] {grid-column: 2}:host([value-axis][orientation="horizontal"]:not([secondary])) {grid-template-rows: 1fr auto}:host([value-axis][orientation="horizontal"]:not([secondary])) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 2}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;pointer-events: none;position: relative}:host(:not([orientation="horizontal"])) [part="axis"] {inline-size: var(--bar-chart-axis, 3ch)}:host([orientation="horizontal"]) [part="axis"] {block-size: 1lh}[part="tick"] {position: absolute}:host(:not([orientation="horizontal"])) [part="tick"] {inset-inline-end: 0;translate: 0 -50%}:host([orientation="horizontal"]) [part="tick"] {translate: -50% 0}:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {translate: 50% 0}:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {inset-inline-end: auto;inset-inline-start: 0}[part~="bar"] {fill-opacity: calc(var(--_bar-chart-area, 1) * var(--_bar-chart-through, 1));stroke-opacity: var(--_bar-chart-through, 1)}[part~="bar"][data-emphasis="outlined"], :host([emphasis="outlined"]) [part~="bar"]:not([data-emphasis]) {--_bar-chart-foot: var(--_bar-chart-base);fill: var(--_bar-chart-shade);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke}[part~="bar"][data-emphasis="subtle"], :host([emphasis="subtle"]) [part~="bar"]:not([data-emphasis]) {--_bar-chart-area: 0.2;--_bar-chart-foot: var(--_bar-chart-base);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke}[part~="bar"] {--_bar-chart-shade: color-mix(in oklab, var(--_bar-chart-series) 60%, var(--helix-color-background))}[part~="bar"][data-material="glass"], :host([material="glass"]) [part~="bar"]:not([data-material]) {--_bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) [part~="bar"]:not([data-material]) {--_bar-chart-through: calc(0.88 * var(--helix-material-opacity))}:host([wash="gradient"]) [part~="bar"] {fill: var(--chart-bar-wash)}[part="bar-wash-start"] {stop-color: var(--chart-series);stop-opacity: calc(1 * var(--helix-material-opacity))}[part="bar-wash-end"] {stop-color: var(--chart-series);stop-opacity: calc(0.35 * var(--helix-material-opacity))}@media print {:host {print-color-adjust: exact}}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}`);
+export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--bar-chart-gap, var(--helix-space-2xs))}[part="plot"] {position: relative;block-size: var(--bar-chart-block-size, 12em)}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="bar"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0 0;--_bar-chart-base: 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0;clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));fill: var(--_bar-chart-series)}:host([orientation="horizontal"]) [part~="bar"] {--_bar-chart-corners: 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0;--_bar-chart-base: 0 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2)}:host([stacked]) [part~="bar"]:not([part~="bar-end"]) {--_bar-chart-corners: 0}[part~="bar-end-negative"] {--_bar-chart-corners: 0 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px)}:host([orientation="horizontal"]) [part~="bar-end-negative"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) 0 0 var(--bar-chart-bar-radius, 2px)}[part~="bar-negative"] {--_bar-chart-base: calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0 0 0}:host([orientation="horizontal"]) [part~="bar-negative"] {--_bar-chart-base: 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0 0}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap}:host([orientation="horizontal"]) {grid-template-columns: auto 1fr}:host([orientation="horizontal"]) [part="labels"] {grid-column: 1;grid-row: 1}:host([orientation="horizontal"]) [part="plot"] {grid-column: 2;grid-row: 1}:host([orientation="horizontal"]) [part="labels"] {grid-auto-columns: auto;grid-auto-flow: row;grid-auto-rows: 1fr;align-self: start;block-size: var(--bar-chart-block-size, 12em)}:host([orientation="horizontal"]) [part="label"] {align-self: center;text-align: end}[part~="bar"], [part="line"] {--_bar-chart-series: var(--chart-series)}:host {--bar-chart-tone-accent: var(--helix-color-accent);--bar-chart-tone-danger: var(--helix-color-danger);--bar-chart-tone-info: var(--helix-color-info);--bar-chart-tone-muted: var(--helix-color-foreground-subtle);--bar-chart-tone-primary: var(--helix-color-primary);--bar-chart-tone-success: var(--helix-color-success);--bar-chart-tone-warning: var(--helix-color-warning)}[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {opacity: 0.45}[part~="group"] {transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate)}[part~="bar"] {transition: height var(--helix-duration-normal) var(--helix-easing-decelerate), width var(--helix-duration-normal) var(--helix-easing-decelerate), x var(--helix-duration-normal) var(--helix-easing-decelerate), y var(--helix-duration-normal) var(--helix-easing-decelerate)}@starting-style {:host(:not([orientation="horizontal"])) [part~="bar"] {height: 0;y: 100}:host([orientation="horizontal"]) [part~="bar"] {width: 0}}[part="plot"] {cursor: crosshair}[part="gridline"] {stroke: var(--bar-chart-gridline-color, var(--helix-color-border));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="band"] {fill: var(--bar-chart-band-color, var(--helix-color-surface-sunken))}[part="line"] {fill: none;stroke: var(--bar-chart-line-color, var(--_bar-chart-series, var(--helix-color-series-1)));stroke-linecap: round;stroke-linejoin: round;stroke-width: var(--bar-chart-line-width, var(--_chart-stroke));vector-effect: non-scaling-stroke}:host([secondary]) {grid-template-columns: auto 1fr auto}:host([secondary]) [part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1}:host([secondary]) [part="plot"] {grid-column: 2;grid-row: 1}[part="axis"][data-axis="secondary"] {--_bar-chart-axis-ink: color-mix(in oklab, var(--bar-chart-secondary) 45%, var(--helix-color-foreground));color: var(--_bar-chart-axis-ink, var(--helix-color-foreground-subtle))}:host([secondary]) [part="axis"][data-axis="secondary"] {grid-column: 3;grid-row: 1}:host([secondary]) [part="labels"] {grid-column: 2;grid-row: 2}:host([orientation="horizontal"][secondary]) {grid-template-columns: auto 1fr;grid-template-rows: auto 1fr auto}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {grid-column: 2;grid-row: 1}:host([orientation="horizontal"][secondary]) [part="labels"] {grid-column: 1;grid-row: 2}:host([orientation="horizontal"][secondary]) [part="plot"] {grid-column: 2;grid-row: 2}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 3}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) {grid-template-columns: auto 1fr}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="plot"], :host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="labels"] {grid-column: 2}:host([value-axis][orientation="horizontal"]:not([secondary])) {grid-template-rows: 1fr auto}:host([value-axis][orientation="horizontal"]:not([secondary])) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 2}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;pointer-events: none;position: relative}:host(:not([orientation="horizontal"])) [part="axis"] {inline-size: var(--bar-chart-axis, 3ch)}:host([orientation="horizontal"]) [part="axis"] {block-size: 1lh}[part="tick"] {position: absolute}:host(:not([orientation="horizontal"])) [part="tick"] {inset-inline-end: 0;translate: 0 -50%}:host([orientation="horizontal"]) [part="tick"] {translate: -50% 0}:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {translate: 50% 0}:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {inset-inline-end: auto;inset-inline-start: 0}[part~="bar"] {fill-opacity: calc(var(--_bar-chart-area, 1) * var(--_bar-chart-through, 1));stroke-opacity: var(--_bar-chart-through, 1)}[part~="bar"][data-emphasis="outlined"], :host([emphasis="outlined"]) [part~="bar"]:not([data-emphasis]) {--_bar-chart-foot: var(--_bar-chart-base);fill: var(--_bar-chart-shade);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke}[part~="bar"][data-emphasis="subtle"], :host([emphasis="subtle"]) [part~="bar"]:not([data-emphasis]) {--_bar-chart-area: 0.2;--_bar-chart-foot: var(--_bar-chart-base);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke}[part~="bar"] {--_bar-chart-shade: color-mix(in oklab, var(--_bar-chart-series) 60%, var(--helix-color-background))}[part~="bar"][data-material="glass"], :host([material="glass"]) [part~="bar"]:not([data-material]) {--_bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) [part~="bar"]:not([data-material]) {--_bar-chart-through: calc(0.88 * var(--helix-material-opacity))}:host([wash="gradient"]) [part~="bar"] {fill: var(--chart-bar-wash)}[part="bar-wash-start"] {stop-color: var(--chart-series);stop-opacity: calc(1 * var(--helix-material-opacity))}[part="bar-wash-end"] {stop-color: var(--chart-series);stop-opacity: calc(0.35 * var(--helix-material-opacity))}@media print {:host {print-color-adjust: exact}}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}`);

package/dist/code-block/index.d.ts

@@ -1 +1,2 @@
+export { type CodeBlockHighlighter, registerHighlighter, } from '@fusion.dev/helix-headless/code-block';
 export * from './root/code-block-root.js';

package/dist/code-block/index.js

@@ -1 +1,2 @@
+export { registerHighlighter, } from '@fusion.dev/helix-headless/code-block';
 export * from './root/code-block-root.js';

package/dist/index.d.ts

@@ -62,6 +62,7 @@ export * from './listbox/index.js';
 export * from './loader/index.js';
 export * from './map/index.js';
 export * from './megamenu/index.js';
+export * from './menu/filter/index.js';
 export * from './menu/index.js';
 export * from './meter/index.js';
 export * from './navigation/index.js';

package/dist/index.js

@@ -57,6 +57,7 @@ export * from './listbox/index.js';
 export * from './loader/index.js';
 export * from './map/index.js';
 export * from './megamenu/index.js';
+export * from './menu/filter/index.js';
 export * from './menu/index.js';
 export * from './meter/index.js';
 export * from './navigation/index.js';

package/dist/menu/filter/index.d.ts

@@ -0,0 +1 @@
+export { filterMenu, MenuFilterController } from '@fusion.dev/helix-headless/menu/filter';

package/dist/menu/filter/index.js

@@ -0,0 +1,5 @@
+import { filterMenu } from '@fusion.dev/helix-headless/menu/filter';
+import { HelixMenu } from '../root/menu-root.js';
+import { styles } from './menu-filter.css.js';
+filterMenu(HelixMenu, styles);
+export { filterMenu, MenuFilterController } from '@fusion.dev/helix-headless/menu/filter';

package/dist/menu/filter/menu-filter.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/menu/filter/menu-filter.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`input {appearance: none;background-color: var(--menu-background-color, var(--helix-color-surface-overlay));border: none;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);inline-size: 100%;inset-block-start: calc(var(--helix-space-xs) * -1);margin-block: calc(var(--helix-space-xs) * -1) var(--helix-space-xs);min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-sm);position: sticky;z-index: 1}input:focus-visible {outline: none}[data-filtered] slot::slotted(helix-divider) {display: none}`);

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents}[part="surface"] {--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-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);--menu-item-start: 0px;--menu-item-end: 0px;max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));overflow-y: auto;--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));min-inline-size: var(--menu-min-inline-size, 12rem);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none)}:host(:state(start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs))}:host(:state(mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs))}[part="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);margin-block-end: var(--helix-space-2xs);padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs)}[part="back"] {align-items: center;background: none;border: none;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;justify-content: center;block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));padding: var(--helix-space-none)}[part="back"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="back"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="back"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="title"] {color: var(--helix-color-foreground);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium)}::slotted(helix-divider) {margin-block: var(--helix-space-2xs)}[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {display: none}[part="search-field"] {appearance: none;background-color: var(--menu-background-color, var(--helix-color-surface-overlay));border: none;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);inline-size: 100%;inset-block-start: calc(var(--helix-space-xs) * -1);margin-block: calc(var(--helix-space-xs) * -1) var(--helix-space-xs);min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-sm);position: sticky;z-index: 1}[part="search-field"]:focus-visible {outline: none}[part="surface"][data-filtered] slot::slotted(helix-divider) {display: none}:host([loading]) [part="surface"] {opacity: 0.5}@media print {:host {display: none}}`);
+export const styles = createSheet(`:host {display: contents}[part="surface"] {--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-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);--menu-item-start: 0px;--menu-item-end: 0px;max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));overflow-y: auto;--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));min-inline-size: var(--menu-min-inline-size, 12rem);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none)}:host(:state(start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs))}:host(:state(mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs))}[part="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);margin-block-end: var(--helix-space-2xs);padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs)}[part="back"] {align-items: center;background: none;border: none;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;justify-content: center;block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));padding: var(--helix-space-none)}[part="back"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon)}[part="back"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="back"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="title"] {color: var(--helix-color-foreground);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium)}::slotted(helix-divider) {margin-block: var(--helix-space-2xs)}[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {display: none}:host([loading]) [part="surface"] {opacity: 0.5}@media print {:host {display: none}}`);

package/dist/sandbox/compile.d.ts

@@ -0,0 +1,63 @@
+/**
+ * The compiler a module file in TypeScript or JSX runs through before the
+ * frame loads it, by its npm name and its pinned version.
+ *
+ * **Sucrase, measured against esbuild-wasm on October 8, 2026**, on a TSX
+ * module of 241 lines with the automatic JSX runtime:
+ *
+ * | | Sucrase 3.35 | esbuild-wasm 0.28 |
+ * | --- | --- | --- |
+ * | Download, gzip | 48 KB, and 9 KB of `buffer` esm.sh adds | 3.2 MB of WebAssembly, and 19 KB |
+ * | First compile | 14 ms | 188 ms, the WebAssembly starting |
+ * | Each after | 0.8 ms | 4.6 ms |
+ * | Automatic JSX runtime | yes | yes |
+ * | Source map | yes | yes |
+ *
+ * Both compile what a sandbox holds, and neither checks types. esbuild-wasm
+ * downloads 56 times as much before the first module runs, which a reader
+ * waits through on the first edit of every page. Sucrase also keeps every line
+ * where it was, so a line number in an error in the frame is the line in the
+ * pane even where a browser ignores the source map.
+ *
+ * **Loaded the first time a module needs it**, from the preview's `cdn` as a
+ * package in `dependencies` is, so the published package carries no compiler
+ * and a sandbox with no TypeScript loads none.
+ *
+ * **In a worker of its own**, which has no access to the page and keeps a
+ * long compile off the page's thread. The worker's script is text, so the
+ * `import()` of an address known only at run time is one no bundler reads:
+ * written in this module, Turbopack refused to build a page that imported
+ * it, the TypeScript build having dropped the comments that tell bundlers to
+ * leave it alone. The compiler reads the source as text, and the example
+ * itself still runs only in the frame.
+ */
+export declare const COMPILER = "sucrase@3.35.1";
+/** Whether a module file is TypeScript or JSX, which a browser cannot run as written. */
+export declare const COMPILED: RegExp;
+/** Sucrase's `transform`, as the worker runs it: rejects with what failed. */
+type Transform = (source: string, options: Record<string, unknown>) => Promise<{
+    code: string;
+    sourceMap?: Record<string, unknown>;
+}>;
+/**
+ * The compiler for each `cdn`, so each is set up once a page. A spec puts a
+ * stand-in here, for an address of its own.
+ */
+export declare const compilers: Map<string, Transform>;
+/**
+ * A module file compiled to JavaScript, with its source map inline, for the
+ * frame to load as its other modules.
+ *
+ * `.ts` is read as TypeScript, `.tsx` as TypeScript with JSX, and `.jsx` as
+ * JSX. JSX compiles to the automatic runtime, `react/jsx-runtime`, which an
+ * example lists in `dependencies`, or to the runtime a
+ * `@jsxImportSource preact` comment in the file names.
+ *
+ * **What fails to compile still runs, as a module that throws** what the
+ * compiler said, such as `Error transforming app.tsx: Unexpected token (2:1)`.
+ * The frame reports it as it reports any error an example does not catch, so
+ * it shows over the example in the preview's `error` part and in the
+ * terminal, and only where the example imports the file.
+ */
+export declare const compile: (cdn: string, path: string, source: string) => Promise<string>;
+export {};

package/dist/sandbox/compile.js

@@ -0,0 +1,52 @@
+export const COMPILER = 'sucrase@3.35.1';
+export const COMPILED = /\.(?:[cm]?ts|[jt]sx)$/;
+const WORKER = 'const l={};onmessage=async({data:[i,a,s,o]})=>{let c;try{c=await(l[a]??=import(a))}catch(e){delete l[a];return postMessage([i,,o.filePath+" needs "+a+", which did not load: "+e])}try{postMessage([i,c.transform(s,o)])}catch(e){postMessage([i,,String(e?.message)])}}';
+let worker;
+let sent = 0;
+const owed = new Map();
+const inWorker = (address) => (source, options) => {
+    if (!worker) {
+        worker = new Worker(URL.createObjectURL(new Blob([WORKER], { type: 'text/javascript' })), {
+            type: 'module',
+        });
+        worker.onmessage = ({ data }) => {
+            owed.get(data[0])?.(data);
+            owed.delete(data[0]);
+        };
+    }
+    sent += 1;
+    const id = sent;
+    worker.postMessage([id, address, source, options]);
+    return new Promise((resolve, reject) => {
+        owed.set(id, ([, result, error]) => (result ? resolve(result) : reject(new Error(error))));
+    });
+};
+export const compilers = new Map();
+const compilerAt = (cdn) => {
+    let compiler = compilers.get(cdn);
+    if (!compiler) {
+        compiler = inWorker(`${cdn}${COMPILER}`);
+        compilers.set(cdn, compiler);
+    }
+    return compiler;
+};
+export const compile = async (cdn, path, source) => {
+    try {
+        const { code, sourceMap } = await compilerAt(cdn)(source, {
+            filePath: path,
+            jsxImportSource: /@jsxImportSource\s+(\S+)/.exec(source)?.[1],
+            jsxRuntime: 'automatic',
+            production: true,
+            sourceMapOptions: { compiledFilename: path },
+            transforms: [
+                ...(/tsx?$/.test(path) ? ['typescript'] : []),
+                ...(/x$/.test(path) ? ['jsx'] : []),
+            ],
+        });
+        const map = JSON.stringify({ ...sourceMap, sourcesContent: [source] });
+        return `${code}\n
+    }
+    catch (error) {
+        return `throw new SyntaxError(${JSON.stringify(error.message)})`;
+    }
+};

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

@@ -73,6 +73,15 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * in the `js` pane or in another module loads it. A sandbox writes each pane
  * named for a module file here.
  *
+ * **A module in TypeScript or JSX runs too**: a path ending in `.ts`, `.tsx`
+ * or `.jsx` is compiled to JavaScript first, and imported by its path or by
+ * its path without the extension. The compiler, Sucrase, loads from `cdn` the
+ * first time a module needs it, so the package carries none and a preview
+ * with no such module loads none. JSX compiles to the automatic runtime,
+ * `react/jsx-runtime`, from `dependencies`, or to the one a
+ * `@jsxImportSource` comment names. What fails to compile shows in the
+ * `error` part as an error the example threw, when the example imports it.
+ *
  * **Examples render in a frame**, so an example's styles and scripts do not
  * affect the page around the sandbox, and `position: fixed` stays inside the
  * pane. The frame starts empty, with its own stylesheets and its own custom
@@ -233,6 +242,16 @@ export declare class HelixSandboxPreview extends HelixElement {
     private failedSource;
     /** What the example threw and did not catch, while the preview is `failed`. */
     private failure;
+    /** Each module file compiled to JavaScript, by its path and source. */
+    private compiled;
+    /** The module files being compiled, by their path and source. */
+    private readonly compiling;
+    /**
+     * The import map the built-in document loads with: the last one with every
+     * module file compiled, so a frame never loads without one an example
+     * imports.
+     */
+    private map;
     /** Says the preview failed with `text`, or, with none, that it has not. */
     private fail;
     /** What the frame is sent as its source: the markup, and the script after it. */
@@ -244,6 +263,11 @@ export declare class HelixSandboxPreview extends HelixElement {
      * `dependencies` and the paths under it, and `imports` over all of them.
      */
     private get importMap();
+    /**
+     * Compiles a module file, once, then draws again with it. Not on a server,
+     * which loads no frame.
+     */
+    private compileModule;
     /**
      * The frame's document has finished loading, so its listener exists, the
      * example is sent and the preview is no longer `loading`. The frame saying
@@ -322,7 +346,10 @@ export declare class HelixSandboxPreview extends HelixElement {
     private scheduleSend;
     /** What the frame is sent: the source, its stylesheet and its settings. */
     private get message();
-    /** Sends the current source to the frame, once it is listening. */
+    /**
+     * Sends the current source to the frame, once it is listening and no
+     * module it may import is still compiling.
+     */
     private send;
     /**
      * Opens the example in a new tab, and returns the tab's window, or `null`
@@ -362,6 +389,7 @@ export declare class HelixSandboxPreview extends HelixElement {
      * nothing has failed in it. The built-in document loads too.
      */
     private unready;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /** The reload and open buttons, under `controls`. */
     private renderControls;

package/dist/sandbox/preview/sandbox-preview.js

@@ -4,6 +4,7 @@ import { customElement, DelayController, HelixConsoleEvent, HelixElement, HelixR
 const SETTLE = 120;
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { COMPILED, compile } from '../compile.js';
 import { defaultFrame, withScript } from '../frame.js';
 import { styles as sheet } from './sandbox-preview.css.js';
 const SANDBOX = 'allow-scripts allow-forms';
@@ -22,6 +23,9 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         this.src = '';
         this.styles = '';
         this.ready = false;
+        this.compiled = new Map();
+        this.compiling = new Set();
+        this.map = {};
         this.handleFrameLoad = () => {
             this.ready = true;
             this.toggleState('loading', false);
@@ -72,11 +76,39 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
             map[name] = address;
             map[`${name}/`] = `${address}/`;
         }
+        const compiled = new Map();
         for (const [given, source] of Object.entries(this.modules ?? {})) {
             const path = given.replace(/^\.?\//, '');
-            map[`./${path}`] = map[`sandbox:/${path}`] = moduleText(path, source);
+            if (!COMPILED.test(path)) {
+                map[`./${path}`] = map[`sandbox:/${path}`] = moduleText(path, source);
+                continue;
+            }
+            const key = `${path}\u0000${source}`;
+            const code = this.compiled.get(key);
+            if (code === undefined) {
+                this.compileModule(key, path, source);
+                continue;
+            }
+            compiled.set(key, code);
+            const text = moduleText(path, code);
+            const bare = path.replace(COMPILED, '');
+            map[`./${path}`] = map[`sandbox:/${path}`] = text;
+            map[`./${bare}`] ??= map[`sandbox:/${bare}`] ??= text;
         }
-        return { ...map, ...this.imports };
+        this.compiled = compiled;
+        return this.compiling.size > 0 ? undefined : { ...map, ...this.imports };
+    }
+    compileModule(key, path, source) {
+        if (this.compiling.has(key) || typeof document === 'undefined') {
+            return;
+        }
+        this.compiling.add(key);
+        void compile(this.cdn, path, source).then((code) => {
+            this.compiling.delete(key);
+            this.compiled.set(key, code);
+            this.requestUpdate();
+            void this.updateComplete.then(() => this.send());
+        });
     }
     static { this.target = '*'; }
     scheduleSend() {
@@ -98,7 +130,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         };
     }
     send() {
-        if (!this.ready) {
+        if (!this.ready || this.compiling.size > 0) {
             return;
         }
         this.frame?.contentWindow?.postMessage(this.message, HelixSandboxPreview_1.target);
@@ -118,7 +150,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         frame.title = this.label;
         frame.style.cssText = 'block-size: 100vh; border: none; display: block; inline-size: 100vw';
         if (this.src === '') {
-            frame.srcdoc = defaultFrame(this.importMap);
+            frame.srcdoc = defaultFrame(this.map);
         }
         else {
             frame.src = this.frame?.src || this.src;
@@ -144,7 +176,7 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
         }
         this.unready();
         if (this.src === '') {
-            frame.srcdoc = defaultFrame(this.importMap);
+            frame.srcdoc = defaultFrame(this.map);
             return;
         }
         frame.src = this.src;
@@ -156,9 +188,15 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
         this.fail();
         this.toggleState('loading', true);
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.src === '') {
+            this.map = this.importMap ?? this.map;
+        }
+    }
     updated(changed) {
         super.updated(changed);
-        const map = this.src === '' ? JSON.stringify(this.importMap) : '';
+        const map = this.src === '' ? JSON.stringify(this.map) : '';
         const remapped = map !== this.loadedMap;
         this.loadedMap = map;
         if (changed.has('src') || remapped) {
@@ -189,7 +227,7 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
       part="frame"
       @load=${this.handleFrameLoad}
       src=${this.src || nothing}
-      srcdoc=${this.src === '' ? defaultFrame(this.importMap) : nothing}
+      srcdoc=${this.src === '' ? defaultFrame(this.map) : nothing}
       title=${this.label}
       aria-describedby=${this.failure === undefined ? nothing : 'error'}
       allow="clipboard-write *; fullscreen *"

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

@@ -21,6 +21,10 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * - `js` sets a script that runs as a module after the markup.
  * - A module file name ending in `.js` or `.mjs`, such as `utils.js`, is a
  *   module the other scripts import by its path, `./utils.js`.
+ * - A module file name ending in `.ts`, `.tsx` or `.jsx`, such as `app.tsx`,
+ *   is one too, which the preview compiles to JavaScript first. The `js` pane
+ *   runs it with `import './app.tsx'`. A file that does not compile shows
+ *   why over the preview, as an error the example threw.
  * - `package.json` sets the npm packages the scripts import by name, from its
  *   `dependencies`, which load from the preview's `cdn`.
  *

package/dist/sandbox/root/sandbox-root.js

@@ -8,7 +8,7 @@ const DEFAULT_SPLIT = 50;
 const DEFAULT_PANEL = 160;
 const PANEL_MAX = 0.8;
 const PANE_KEYS = { css: 'styles', html: 'source', js: 'script' };
-const MODULE = /\.m?js$/;
+const MODULE = /\.(?:m?js|[cm]?ts|[jt]sx)$/;
 const MANIFEST = 'package.json';
 const isPaneName = (name) => typeof name === 'string' &&
     (Object.hasOwn(PANE_KEYS, name) || MODULE.test(name) || name === MANIFEST);