@fusion.dev/helix 0.215.3 → 0.217.0

package/dist/markdown/root/markdown-root.css.d.ts

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

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

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {display: block}:host(:state(streaming)) ::slotted(:last-child) {text-wrap: wrap}@media print {:host {print-color-adjust: economy}}`);

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

@@ -0,0 +1,32 @@
+import { HelixHeadlessMarkdown } from '@fusion.dev/helix-headless/markdown';
+import type { CSSResultGroup } from 'lit';
+import '../../callout/index.js';
+import '../../code-block/index.js';
+/**
+ * @summary Markdown drawn as a document, which streams in place as a reply arrives.
+ *
+ * @description
+ * The document is drawn by the page's prose recipe: put `data-prose` on the
+ * element or on a container, and `@fusion.dev/helix-styles` sets its type,
+ * spacing, lists, and tables. A fence is drawn by `Code Block` and an alert by
+ * `Callout`, in this tier.
+ *
+ * While `streaming`, the block still arriving wraps its lines in the plain
+ * way, never `pretty` or `balance`, since those move earlier line breaks as
+ * each word arrives.
+ *
+ * @since 0.216.0
+ * @status experimental
+ * @category typography
+ * @aliases Markdown renderer, Streaming text, Rich text
+ * @documentation https://fusion.dev/helix/components/markdown
+ */
+export declare class HelixMarkdown extends HelixHeadlessMarkdown {
+    static styles: CSSResultGroup;
+    static tier: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-markdown': HelixMarkdown;
+    }
+}

package/dist/markdown/root/markdown-root.js

@@ -0,0 +1,14 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessMarkdown } from '@fusion.dev/helix-headless/markdown';
+import '../../callout/index.js';
+import '../../code-block/index.js';
+import { styles } from './markdown-root.css.js';
+let HelixMarkdown = class HelixMarkdown extends HelixHeadlessMarkdown {
+    static { this.styles = styles; }
+    static { this.tier = 'helix-'; }
+};
+HelixMarkdown = __decorate([
+    customElement('helix-markdown')
+], HelixMarkdown);
+export { HelixMarkdown };

package/dist/sandbox/compile-worker.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The version of the messages the worker and the page exchange, which every
+ * answer ends with. A page that copied this file from an older release answers
+ * with another, or none, and is told to copy it again. Raise it whenever the
+ * messages change, and only then, so an upgrade that leaves them alone asks
+ * nobody to copy anything.
+ */
+export declare const PROTOCOL = 1;

package/dist/sandbox/compile-worker.generated.d.ts

@@ -0,0 +1,4 @@
+/** The version of the messages `compile-worker.ts` answers with. */
+export declare const PROTOCOL = 1;
+/** `compile-worker.ts`, minified, for the preview to start from a `blob:` address. */
+export declare const WORKER = "var i=1,e=globalThis,t={};e.onmessage=async({data:[s,n,g,r]})=>{let a;try{t[n]??=import(n),a=await t[n]}catch(o){delete t[n],e.postMessage([s,void 0,`${r.filePath} needs ${n}, which did not load: ${o}`,1]);return}try{e.postMessage([s,a.transform(g,r),void 0,1])}catch(o){e.postMessage([s,void 0,String(o?.message),1])}};export{i as PROTOCOL};";

package/dist/sandbox/compile-worker.generated.js

@@ -0,0 +1,2 @@
+export const PROTOCOL = 1;
+export const WORKER = "var i=1,e=globalThis,t={};e.onmessage=async({data:[s,n,g,r]})=>{let a;try{t[n]??=import(n),a=await t[n]}catch(o){delete t[n],e.postMessage([s,void 0,`${r.filePath} needs ${n}, which did not load: ${o}`,1]);return}try{e.postMessage([s,a.transform(g,r),void 0,1])}catch(o){e.postMessage([s,void 0,String(o?.message),1])}};export{i as PROTOCOL};";

package/dist/sandbox/compile-worker.js

@@ -0,0 +1,26 @@
+export const PROTOCOL = 1;
+const scope = globalThis;
+const loaded = {};
+scope.onmessage = async ({ data: [id, address, source, options] }) => {
+    let compiler;
+    try {
+        loaded[address] ??= import(address);
+        compiler = await loaded[address];
+    }
+    catch (error) {
+        delete loaded[address];
+        scope.postMessage([
+            id,
+            undefined,
+            `${options.filePath} needs ${address}, which did not load: ${error}`,
+            PROTOCOL,
+        ]);
+        return;
+    }
+    try {
+        scope.postMessage([id, compiler.transform(source, options), undefined, PROTOCOL]);
+    }
+    catch (error) {
+        scope.postMessage([id, undefined, String(error?.message), PROTOCOL]);
+    }
+};

package/dist/sandbox/compile.d.ts

@@ -1,3 +1,4 @@
+import { PROTOCOL, WORKER } from './compile-worker.generated.js';
 /**
  * The compiler a module file in TypeScript or JSX runs through before the
  * frame loads it, by its npm name and its pinned version.
@@ -39,6 +40,28 @@ type Transform = (source: string, options: Record<string, unknown>) => Promise<{
     code: string;
     sourceMap?: Record<string, unknown>;
 }>;
+export { PROTOCOL, WORKER };
+/**
+ * Starts the compiler's worker from a file the page serves, rather than from
+ * a `blob:` address.
+ *
+ * **For a page whose Content Security Policy refuses `blob:` workers**, which
+ * `worker-src 'self'` does, and which leaves TypeScript and JSX panes
+ * uncompiled. Copy `@fusion.dev/helix/sandbox/compile-worker.js` to where the
+ * page serves its own scripts, and call this before the first preview
+ * compiles:
+ *
+ * ```js
+ * import { registerCompilerWorker } from '@fusion.dev/helix/sandbox'
+ *
+ * registerCompilerWorker('/sandbox/compile-worker.js')
+ * ```
+ *
+ * The compiler itself still loads from the preview's `cdn`, so the policy's
+ * `script-src` names that host either way. A worker already started keeps
+ * running, and the address applies to the next page that starts one.
+ */
+export declare const registerCompilerWorker: (address: string | URL) => void;
 /**
  * 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.
@@ -60,4 +83,3 @@ export declare const compilers: Map<string, Transform>;
  * console, 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

@@ -1,15 +1,27 @@
+import { reportRuntime } from '@fusion.dev/helix-core';
+import { PROTOCOL, WORKER } from './compile-worker.generated.js';
 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)])}}';
+export { PROTOCOL, WORKER };
+let warned = false;
 let worker;
+let workerAddress;
+export const registerCompilerWorker = (address) => {
+    workerAddress = address;
+};
 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 = new Worker(workerAddress ?? URL.createObjectURL(new Blob([WORKER], { type: 'text/javascript' })), { type: 'module' });
         worker.onmessage = ({ data }) => {
+            if (data[3] !== PROTOCOL && !warned) {
+                warned = true;
+                reportRuntime({
+                    kind: 'stale-worker',
+                    message: `The compiler worker at ${String(workerAddress)} is from another release of @fusion.dev/helix. Copy @fusion.dev/helix/sandbox/compile-worker.js to that address again.`,
+                });
+            }
             owed.get(data[0])?.(data);
             owed.delete(data[0]);
         };

package/dist/sandbox/index.d.ts

@@ -12,6 +12,7 @@
  * hardcodes `sandbox="allow-scripts allow-forms"` on its frame and never
  * `allow-same-origin`, which is the pairing that would undo it.
  */
+export { registerCompilerWorker } from './compile.js';
 export * from './console/sandbox-console.js';
 export { isRender, LAYOUT_RULES, loggedText, type ServePreviewOptions, servePreview, withoutStylesheets, } from './frame.js';
 export * from './preview/sandbox-preview.js';

package/dist/sandbox/index.js

@@ -1,3 +1,4 @@
+export { registerCompilerWorker } from './compile.js';
 export * from './console/sandbox-console.js';
 export { isRender, LAYOUT_RULES, loggedText, servePreview, withoutStylesheets, } from './frame.js';
 export * from './preview/sandbox-preview.js';

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

@@ -2,13 +2,20 @@ import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessScatterChart } from '@fusion.dev/helix-headless/scatter-chart';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles as sonifyStyles } from '../../shared/chart/sonify.css.js';
 import { styles as statusStyles } from '../../shared/chart/status.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './scatter-chart-root.css.js';
 import '../../tooltip/index.js';
 let HelixScatterChart = class HelixScatterChart extends HelixHeadlessScatterChart {
     static { this.tier = 'helix-'; }
-    static { this.styles = [seriesStyles, statusStyles, tooltipStyles, styles]; }
+    static { this.styles = [
+        seriesStyles,
+        statusStyles,
+        tooltipStyles,
+        styles,
+        sonifyStyles,
+    ]; }
 };
 HelixScatterChart = __decorate([
     customElement('helix-scatter-chart')

package/dist/shared/chart/sonify.css.d.ts

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

package/dist/shared/chart/sonify.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="sonify"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);grid-column: 1 / -1;justify-self: start;min-block-size: var(--helix-size-icon-loose);padding-inline: var(--helix-space-2xs)}[part="sonify"] svg {block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight)}[part="sonify"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="sonify"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="sonify"][aria-pressed="true"] {color: var(--helix-color-accent)}:host([summary="visible"]) [part="summary"] {block-size: auto;clip-path: none;color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);grid-column: 1 / -1;inline-size: auto;line-height: var(--helix-leading-normal);overflow: visible;position: static;white-space: normal}@media print {[part="sonify"] {display: none}}`);

package/dist/shared/dictation/dictation.css.d.ts

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

package/dist/shared/dictation/dictation.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part~="voice-listening"] {box-shadow: 0 0 0 calc(var(--dictation-level, 0.4) * var(--helix-space-2xs) * 1.5) color-mix(in oklab, var(--helix-color-accent) 35%, transparent);color: var(--helix-color-accent);transition: box-shadow var(--helix-duration-fast) linear}@media (prefers-reduced-motion: reduce) {[part~="voice-listening"] {box-shadow: 0 0 0 calc(var(--helix-space-2xs) * 0.6) color-mix(in oklab, var(--helix-color-accent) 35%, transparent);transition: none}}@media print {[part~="voice"] {display: none}}`);

package/dist/shortcut-overlay/index.d.ts

@@ -0,0 +1 @@
+export * from './root/shortcut-overlay-root.js';

package/dist/shortcut-overlay/index.js

@@ -0,0 +1 @@
+export * from './root/shortcut-overlay-root.js';

package/dist/shortcut-overlay/root/shortcut-overlay-root.css.d.ts

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

package/dist/shortcut-overlay/root/shortcut-overlay-root.css.js

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="badge"] {align-items: center;background-color: var(--shortcut-overlay-badge-background-color, var(--helix-color-surface-inverse));border: var(--shortcut-overlay-badge-border-width, var(--helix-border-floating)) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--shortcut-overlay-badge-shadow, var(--helix-shadow-floating));color: var(--shortcut-overlay-badge-color, var(--helix-color-foreground-inverse));display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-regular);gap: var(--helix-space-2xs);line-height: var(--helix-leading-tight);max-inline-size: var(--shortcut-overlay-badge-max-inline-size, 16rem);padding: var(--helix-space-2xs) var(--helix-space-xs)}[part="badge"] {animation: shortcut-overlay-in var(--helix-duration-fast) var(--helix-easing-standard)}@media (prefers-reduced-motion: reduce) {[part="badge"] {animation: none}}@keyframes shortcut-overlay-in {from {opacity: 0}}[part="badge-keys"], [part="keys"] kbd {font-family: var(--helix-font-sans);font-weight: var(--helix-weight-semibold)}[part="badge-name"] {overflow: hidden;text-overflow: ellipsis}[part="list"] {display: grid;gap: var(--helix-space-2xs);grid-template-columns: minmax(0, 1fr) auto;margin: var(--helix-space-none)}[part="row"] {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: grid;grid-column: 1 / -1;grid-template-columns: subgrid;padding-block: var(--helix-space-xs)}[part="row"]:last-child {border-block-end-color: transparent}[part="name"], [part="keys"] {font-size: var(--helix-text-sm);margin: var(--helix-space-none)}[part="keys"] {color: var(--helix-color-foreground-muted);text-align: end}[part="empty"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);margin: var(--helix-space-none)}@media print {[part="badge"] {display: none}}`);

package/dist/shortcut-overlay/root/shortcut-overlay-root.d.ts

@@ -0,0 +1,33 @@
+import { HelixHeadlessShortcutOverlay } from '@fusion.dev/helix-headless/shortcut-overlay';
+import type { CSSResultGroup } from 'lit';
+import '../../dialog/index.js';
+/**
+ * @summary Shows every control's shortcut and what it does while a key is held.
+ *
+ * @description
+ * Each badge is a small inverse plate, as a tooltip is, with the keys first
+ * and the control's name after them, centered under the control.
+ * The sheet is a `Dialog` listing each shortcut's name with its keys at the
+ * end of the row.
+ *
+ * @since 0.216.0
+ * @status experimental
+ * @category navigation
+ * @aliases Keyboard shortcuts, Shortcut hints, Key tips, Cheat sheet
+ * @documentation https://fusion.dev/helix/components/shortcut-overlay
+ *
+ * @cssproperty --shortcut-overlay-badge-background-color - The badge's fill. Defaults to `surface-inverse`.
+ * @cssproperty --shortcut-overlay-badge-border-width - The badge's edge. Defaults to `border-floating`, which a theme sets to zero where a shadow alone lifts a surface.
+ * @cssproperty --shortcut-overlay-badge-color - The badge's text. Defaults to `foreground-inverse`.
+ * @cssproperty --shortcut-overlay-badge-max-inline-size - The widest a badge grows before its name ends in an ellipsis. Defaults to 16rem.
+ * @cssproperty --shortcut-overlay-badge-shadow - The badge's lift. Defaults to `shadow-floating`.
+ */
+export declare class HelixShortcutOverlay extends HelixHeadlessShortcutOverlay {
+    static styles: CSSResultGroup;
+    static tier: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-shortcut-overlay': HelixShortcutOverlay;
+    }
+}

package/dist/shortcut-overlay/root/shortcut-overlay-root.js

@@ -0,0 +1,13 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessShortcutOverlay } from '@fusion.dev/helix-headless/shortcut-overlay';
+import '../../dialog/index.js';
+import { styles } from './shortcut-overlay-root.css.js';
+let HelixShortcutOverlay = class HelixShortcutOverlay extends HelixHeadlessShortcutOverlay {
+    static { this.styles = [HelixHeadlessShortcutOverlay.styles, styles]; }
+    static { this.tier = 'helix-'; }
+};
+HelixShortcutOverlay = __decorate([
+    customElement('helix-shortcut-overlay')
+], HelixShortcutOverlay);
+export { HelixShortcutOverlay };

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

@@ -3,12 +3,13 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSpatialBarChart } from '@fusion.dev/helix-headless/spatial-bar-chart';
 import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles as sonifyStyles } from '../../shared/chart/sonify.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './spatial-bar-chart-root.css.js';
 import '../../tooltip/index.js';
 let HelixSpatialBarChart = class HelixSpatialBarChart extends HelixHeadlessSpatialBarChart {
     static { this.tier = 'helix-'; }
-    static { this.styles = [seriesStyles, tooltipStyles, styles]; }
+    static { this.styles = [seriesStyles, tooltipStyles, styles, sonifyStyles]; }
 };
 __decorate([
     property({ reflect: true })

package/dist/spatial-heatmap/root/spatial-heatmap-root.js

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSpatialHeatmap } from '@fusion.dev/helix-headless/spatial-heatmap';
 import { property } from 'lit/decorators.js';
+import { styles as sonifyStyles } from '../../shared/chart/sonify.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './spatial-heatmap-root.css.js';
 import '../../tooltip/index.js';
@@ -11,7 +12,7 @@ let HelixSpatialHeatmap = class HelixSpatialHeatmap extends HelixHeadlessSpatial
         this.minCell = 10;
     }
     static { this.tier = 'helix-'; }
-    static { this.styles = [tooltipStyles, styles]; }
+    static { this.styles = [tooltipStyles, styles, sonifyStyles]; }
 };
 __decorate([
     property({ reflect: true })

package/dist/spatial-ribbon-chart/root/spatial-ribbon-chart-root.js

@@ -3,12 +3,13 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSpatialRibbonChart } from '@fusion.dev/helix-headless/spatial-ribbon-chart';
 import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles as sonifyStyles } from '../../shared/chart/sonify.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './spatial-ribbon-chart-root.css.js';
 import '../../tooltip/index.js';
 let HelixSpatialRibbonChart = class HelixSpatialRibbonChart extends HelixHeadlessSpatialRibbonChart {
     static { this.tier = 'helix-'; }
-    static { this.styles = [seriesStyles, tooltipStyles, styles]; }
+    static { this.styles = [seriesStyles, tooltipStyles, styles, sonifyStyles]; }
 };
 __decorate([
     property({ reflect: true })

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

@@ -3,12 +3,13 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSpatialScatterChart } from '@fusion.dev/helix-headless/spatial-scatter-chart';
 import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles as sonifyStyles } from '../../shared/chart/sonify.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './spatial-scatter-chart-root.css.js';
 import '../../tooltip/index.js';
 let HelixSpatialScatterChart = class HelixSpatialScatterChart extends HelixHeadlessSpatialScatterChart {
     static { this.tier = 'helix-'; }
-    static { this.styles = [seriesStyles, tooltipStyles, styles]; }
+    static { this.styles = [seriesStyles, tooltipStyles, styles, sonifyStyles]; }
 };
 __decorate([
     property({ reflect: true })

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.js

@@ -2,12 +2,13 @@ import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSpatialSurfaceChart } from '@fusion.dev/helix-headless/spatial-surface-chart';
 import { property } from 'lit/decorators.js';
+import { styles as sonifyStyles } from '../../shared/chart/sonify.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './spatial-surface-chart-root.css.js';
 import '../../tooltip/index.js';
 let HelixSpatialSurfaceChart = class HelixSpatialSurfaceChart extends HelixHeadlessSpatialSurfaceChart {
     static { this.tier = 'helix-'; }
-    static { this.styles = [tooltipStyles, styles]; }
+    static { this.styles = [tooltipStyles, styles, sonifyStyles]; }
 };
 __decorate([
     property({ reflect: true })

package/dist/spatial-treemap/root/spatial-treemap-root.js

@@ -3,12 +3,13 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSpatialTreemap } from '@fusion.dev/helix-headless/spatial-treemap';
 import { property } from 'lit/decorators.js';
 import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles as sonifyStyles } from '../../shared/chart/sonify.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './spatial-treemap-root.css.js';
 import '../../tooltip/index.js';
 let HelixSpatialTreemap = class HelixSpatialTreemap extends HelixHeadlessSpatialTreemap {
     static { this.tier = 'helix-'; }
-    static { this.styles = [seriesStyles, tooltipStyles, styles]; }
+    static { this.styles = [seriesStyles, tooltipStyles, styles, sonifyStyles]; }
 };
 __decorate([
     property({ reflect: true })

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="field"] {background-color: var(--textarea-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--textarea-border-color, var(--helix-color-border));border-radius: var(--textarea-radius, var(--helix-radii-sm));display: flex;gap: var(--helix-space-2xs);padding: var(--textarea-padding, var(--helix-space-xs));transition: border-color var(--helix-duration-fast) var(--helix-easing-standard), background-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="control"] {line-height: var(--helix-leading-normal);overflow-wrap: break-word;resize: var(--textarea-resize, vertical)}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {align-self: flex-start;color: var(--helix-color-foreground-muted);flex: 0 0 auto}[part="clear"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;align-self: flex-start;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="clear"]:hover {color: var(--helix-color-foreground)}[part="clear"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([auto-grow]) [part="control"] {overflow: hidden;resize: none}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5}:host([readonly]) [part="field"] {background-color: transparent}@media print {:host {print-color-adjust: exact}}`);
+export const styles = createSheet(`[part="field"] {background-color: var(--textarea-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--textarea-border-color, var(--helix-color-border));border-radius: var(--textarea-radius, var(--helix-radii-sm));display: flex;gap: var(--helix-space-2xs);padding: var(--textarea-padding, var(--helix-space-xs));transition: border-color var(--helix-duration-fast) var(--helix-easing-standard), background-color var(--helix-duration-fast) var(--helix-easing-standard)}[part="control"] {line-height: var(--helix-leading-normal);overflow-wrap: break-word;resize: var(--textarea-resize, vertical)}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {align-self: flex-start;color: var(--helix-color-foreground-muted);flex: 0 0 auto}[part="clear"], [part~="voice"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;align-self: flex-start;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground-muted);cursor: pointer;display: flex;flex: 0 0 auto;justify-content: center;min-block-size: var(--helix-size-icon-loose);min-inline-size: var(--helix-size-icon-loose);transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="clear"]:hover, [part~="voice"]:hover {color: var(--helix-color-foreground)}[part="clear"]:focus-visible, [part~="voice"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([auto-grow]) [part="control"] {overflow: hidden;resize: none}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5}:host([readonly]) [part="field"] {background-color: transparent}@media print {:host {print-color-adjust: exact}}`);

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

@@ -14,6 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Multiline, TextArea
  * @documentation https://fusion.dev/helix/components/textarea
  *
+ * @cssproperty --dictation-level - How loud the microphone is while the field listens for dictation, from 0 to 1, which the element sets; the ring around the dictation button grows with it.
  * @cssproperty --textarea-background-color - Fill behind the text.
  * @cssproperty --textarea-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
  * @cssproperty --textarea-padding - Space between the edge of the field and the text.

package/dist/textarea/root/textarea-root.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTextarea } from '@fusion.dev/helix-headless/textarea';
+import { styles as dictationStyles } from '../../shared/dictation/dictation.css.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
@@ -11,6 +12,7 @@ let HelixTextarea = class HelixTextarea extends HelixHeadlessTextarea {
         fieldFrameStyles,
         fieldStackedStyles,
         styles,
+        dictationStyles,
     ]; }
 };
 HelixTextarea = __decorate([

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessToast } from '@fusion.dev/helix-headless/toast';
 import type { CSSResultGroup } from 'lit';
+import '../../button/index.js';
 /**
  * @summary The region that holds toast messages, and the only element that announces them.
  *

package/dist/toast/root/toast-root.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessToast } from '@fusion.dev/helix-headless/toast';
+import '../../button/index.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './toast-root.css.js';
 let HelixToast = class HelixToast extends HelixHeadlessToast {