@fusion.dev/helix 0.220.0 → 0.222.0

package/dist/code-editor/root/code-editor-root.d.ts

@@ -12,7 +12,7 @@ import '../../toolbar/index.js';
  * header, a find bar and a status line each a strip on the raised surface,
  * one frame around them. It is 24rem tall unless `fill` is set or
  * `--code-editor-block-size` says otherwise. An engine draws inside it:
- * `@fusion.dev/helix-editor` themes CodeMirror's gutter, caret, selection and
+ * `@fusion.dev/helix-code-editor` themes CodeMirror's gutter, caret, selection and
  * syntax from your tokens, and draws a problem's line number in its tone.
  *
  * Set `fill` for an editor that fills a pane, such as one side of a split
@@ -20,7 +20,7 @@ import '../../toolbar/index.js';
  *
  * @since 0.216.0
  * @status experimental
- * @category inputs
+ * @category editors
  * @aliases Code editor, CodeMirror, File editor, IDE, Monaco
  * @documentation https://fusion.dev/helix/components/code-editor
  *

package/dist/editor/index.d.ts

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

package/dist/editor/index.js

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

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

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

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

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {display: flex;flex-direction: column}:host([fill]) {inset: 0;position: absolute}[part="region"] {background-color: var(--editor-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--editor-border-color, var(--helix-color-border));border-radius: var(--editor-radius, var(--helix-radii-lg));box-sizing: border-box;display: flex;flex: 1 1 auto;flex-direction: column;min-block-size: var(--editor-min-block-size, 12rem);overflow: clip;transition: border-color var(--helix-duration-fast) var(--helix-easing-standard)}:host([fill]) [part="region"] {block-size: 100%;min-block-size: 0}:host([separation="plain"]) [part="region"] {border: none;border-radius: 0}:host(:state(document-focused):not([separation="plain"])) [part="region"] {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0}[part="header"] {--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);background-color: var(--editor-header-background-color, var(--helix-color-surface-raised));border-block-end: var(--helix-border-thin) solid var(--editor-border-color, var(--helix-color-border));box-sizing: border-box;container-type: inline-size;display: flex;flex: 0 0 auto;flex-direction: column;gap: var(--helix-space-2xs);inset-block-start: var(--editor-header-offset, 0);padding: var(--helix-space-2xs) var(--helix-space-xs);position: sticky;z-index: 1}[part="header"][hidden] {display: none}[part="controls"] {--toolbar-separator-gap: var(--helix-space-2xs);display: flex}[part="controls"]::part(toolbar) {flex: 1 1 auto;flex-wrap: wrap;row-gap: var(--helix-space-2xs)}[part="tools"] {display: flex;gap: var(--helix-space-2xs)}[part="divider"] {align-self: center;block-size: calc(var(--helix-size-control) * 0.6)}@container (inline-size < 40rem) {[part="controls"] {--toolbar-gap: var(--helix-space-sm)}[part="divider"] {display: none}}[aria-pressed="true"], :host(:state(find-open)) [part="find-toggle"] {--icon-button-background-color: color-mix(in oklab, var(--helix-color-foreground) 12%, transparent);--icon-button-foreground-color: var(--helix-color-foreground)}[part="block-name"] {display: inline-grid;justify-items: start}[part="block-name"] > span {grid-area: 1 / 1}[part="block-name"] > [hidden] {display: block;visibility: hidden}[part="actions"] {display: flex;gap: var(--helix-space-2xs);margin-inline-start: auto}[part="actions"][hidden] {display: none}[part="link-bar"] {--helix-size-control: calc(var(--helix-size-control-sm) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);align-items: center;display: flex;gap: var(--helix-space-2xs);min-inline-size: 0;padding-inline-start: var(--helix-space-2xs)}[part="link-bar"][hidden] {display: none}[part="link-field"] {appearance: none;background-color: var(--editor-background-color, var(--helix-color-background));block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--editor-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 12rem;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));max-inline-size: 28rem;min-inline-size: 0;padding-inline: var(--helix-space-xs)}[part="link-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="link-controls"] {flex: 0 0 auto}[part="find"] {--find-background-color: transparent;--find-border-color: var(--editor-border-color, var(--helix-color-border));--find-field-background-color: var(--editor-background-color, var(--helix-color-background))}[part="find"]:not(:state(open)) {display: none}[part="find"]::part(bar) {border-block-end: none;padding-block: 0;padding-inline: var(--helix-space-2xs) 0}[part="viewport"] {color: var(--helix-color-foreground);display: flex;flex: 1 1 auto;flex-direction: column;min-block-size: 0}:host([fill]) [part="viewport"] {overflow: auto}[part="viewport"] ::slotted(*) {box-sizing: border-box;caret-color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-md);line-height: var(--helix-leading-normal);outline: none;padding-block: var(--editor-padding, var(--helix-space-lg));padding-inline: max(var(--editor-padding, var(--helix-space-lg)), calc((100% - var(--editor-measure, 72ch)) / 2))}[part="footer"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs)}@media print {[part="header"] {display: none}[part="region"], :host([fill]) [part="viewport"] {overflow: visible}}`);

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

@@ -0,0 +1,62 @@
+import { HelixHeadlessEditor } from '@fusion.dev/helix-headless/editor';
+import type { CSSResultGroup } from 'lit';
+import '../../button/index.js';
+import '../../divider/index.js';
+import '../../find/index.js';
+import '../../icon-button/index.js';
+import '../../menu/index.js';
+import '../../toolbar/index.js';
+/**
+ * @summary A frame around a document that ProseMirror or another editor draws.
+ *
+ * @description
+ * Drawn as Code Editor is: the document on the page's ground, and the toolbar
+ * a strip on the raised surface, one frame around them. The strip stays at the
+ * top of the page while a long document scrolls under it, and the frame grows
+ * with the document from `--editor-min-block-size`. Set `fill` for an editor
+ * that fills a pane, where the document scrolls inside the frame.
+ *
+ * The document's headings, lists, quotes, code, and tables are drawn by the
+ * base layer's `data-prose` rules, so it reads as your docs and chat replies
+ * do. Write `data-prose` on the document so the base layer draws it before a
+ * renderer connects, and `connectEditor` writes it too. Its lines keep to a
+ * readable length, `--editor-measure`, centered in a wide frame.
+ *
+ * @since 0.221.0
+ * @status experimental
+ * @category editors
+ * @aliases Rich text editor, WYSIWYG, Document editor, ProseMirror, Block editor
+ * @documentation https://fusion.dev/helix/components/editor
+ *
+ * @cssproperty --editor-background-color - The ground the document is drawn on. Defaults to the page's background.
+ * @cssproperty --editor-border-color - The frame's edge and the line under the toolbar.
+ * @cssproperty --editor-header-background-color - The fill of the toolbar's strip.
+ * @cssproperty --editor-header-offset - How far below the top of the page the toolbar stays while the document scrolls, such as the height of your own fixed header. `0` unless set.
+ * @cssproperty --editor-measure - The longest a line of the document runs, as a length: `72ch` unless set.
+ * @cssproperty --editor-min-block-size - The frame's least height, which it grows from with the document: `12rem` unless set. Ignored with `fill`.
+ * @cssproperty --editor-padding - The space around the document, inside the frame.
+ * @cssproperty --editor-radius - The frame's corner radius.
+ */
+export declare class HelixEditor extends HelixHeadlessEditor {
+    static tier: string;
+    /**
+     * Covers the container instead of growing with the document, for an editor
+     * that fills a pane, such as one side of a split view. The document scrolls
+     * inside the frame. The container needs a position, such as
+     * `position: relative`.
+     */
+    fill: boolean;
+    /**
+     * How the frame stands off the page. Unset, it is outlined. `plain` draws
+     * no edge or corners, for a document that fills a page or a pane of its own.
+     */
+    separation?: 'outlined' | 'plain';
+    /** The block menu's button is drawn as the tools beside it are. */
+    protected get blockEmphasis(): 'ghost' | undefined;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-editor': HelixEditor;
+    }
+}

package/dist/editor/root/editor-root.js

@@ -0,0 +1,33 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessEditor } from '@fusion.dev/helix-headless/editor';
+import { property } from 'lit/decorators.js';
+import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
+import { styles } from './editor-root.css.js';
+import '../../button/index.js';
+import '../../divider/index.js';
+import '../../find/index.js';
+import '../../icon-button/index.js';
+import '../../menu/index.js';
+import '../../toolbar/index.js';
+let HelixEditor = class HelixEditor extends HelixHeadlessEditor {
+    constructor() {
+        super(...arguments);
+        this.fill = false;
+    }
+    static { this.tier = 'helix-'; }
+    get blockEmphasis() {
+        return 'ghost';
+    }
+    static { this.styles = [glyphStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixEditor.prototype, "fill", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixEditor.prototype, "separation", void 0);
+HelixEditor = __decorate([
+    customElement('helix-editor')
+], HelixEditor);
+export { HelixEditor };

package/dist/element-events.generated.js

@@ -134,6 +134,7 @@ registerElementEvents({
     'helix-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
     'helix-drilldown': ['helix-navigate', 'helix-select'],
     'helix-drilldown-item': ['helix-select'],
+    'helix-editor': ['helix-found'],
     'helix-file-input': ['change', 'helix-before-change', 'helix-reject', 'input'],
     'helix-filter-chip': ['helix-dismiss'],
     'helix-filter-input': [

package/dist/index.d.ts

@@ -43,6 +43,7 @@ export * from './divider/index.js';
 export * from './donut-chart/index.js';
 export * from './drawer/index.js';
 export * from './drilldown/index.js';
+export * from './editor/index.js';
 export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';

package/dist/index.js

@@ -38,6 +38,7 @@ export * from './divider/index.js';
 export * from './donut-chart/index.js';
 export * from './drawer/index.js';
 export * from './drilldown/index.js';
+export * from './editor/index.js';
 export * from './empty/index.js';
 export * from './file-input/index.js';
 export * from './filter-input/index.js';

package/dist/sandbox/index.d.ts

@@ -10,7 +10,8 @@
  *
  * What makes this a sandbox rather than a layout is here: `Sandbox.Preview`
  * hardcodes `sandbox="allow-scripts allow-forms"` on its frame and never
- * `allow-same-origin`, which is the pairing that would undo it.
+ * `allow-same-origin`, which is the pairing that would undo it. The frame is
+ * granted clipboard write, fullscreen, and the microphone.
  */
 export { registerCompilerWorker } from './compile.js';
 export * from './console/sandbox-console.js';

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

@@ -44,7 +44,23 @@ export interface PreviewSize {
     size: number;
     type: 'helix-preview-size';
 }
-export type PreviewMessage = PreviewConsole | PreviewFetch | PreviewPress | PreviewReady | PreviewRender | PreviewRendered | PreviewSize;
+/**
+ * The frame asking this page to listen. Its own origin is opaque, so the
+ * recognizer there refuses to start.
+ */
+export interface PreviewSpeechStart {
+    /** Which listening this is, so a late reply cannot land in the next one. */
+    id: number;
+    /** A BCP 47 tag, such as `en-US`. */
+    lang: string;
+    type: 'helix-speech-start';
+}
+/** The frame asking this page to stop the listening `id` names. */
+export interface PreviewSpeechStop {
+    id: number;
+    type: 'helix-speech-stop';
+}
+export type PreviewMessage = PreviewConsole | PreviewFetch | PreviewPress | PreviewReady | PreviewRender | PreviewRendered | PreviewSize | PreviewSpeechStart | PreviewSpeechStop;
 /**
  * @summary A frame that renders sandbox source in a separate document.
  *
@@ -263,6 +279,10 @@ export declare class HelixSandboxPreview extends HelixElement {
     styles: string;
     /** Whether the frame has said it is listening. */
     private ready;
+    /** The recognizer running for the frame, on this page. */
+    private speech;
+    /** Which ask `speech` belongs to. */
+    private speechId;
     /** The source the frame was last sent, which it holds and does not run again. */
     private sentSource;
     /** The source the frame held when it last reported an uncaught error. */
@@ -403,17 +423,35 @@ export declare class HelixSandboxPreview extends HelixElement {
      * where the browser refused to open one.
      *
      * **The tab runs the example as this preview does**: in a frame that fills
-     * it, with this frame's `sandbox`, loading `src` or the built-in document,
-     * and sent the example once it loads. The example stays on an opaque origin,
-     * and the tab's `opener` is cleared, so it cannot reach this page. The tab
-     * shows the example as it was when it opened, and edits after that do not
-     * reach it. A short inline script in the tab sends the example, so on a page
-     * whose Content Security Policy refuses inline scripts the tab opens empty,
-     * as the built-in document does there.
+     * it, with this frame's `sandbox` and `allow`, loading `src` or the built-in
+     * document, and sent the example once it loads. The example stays on an
+     * opaque origin, and the tab's `opener` is cleared, so it cannot reach this
+     * page. The tab shows the example as it was when it opened, and edits after
+     * that do not reach it. A short inline script in the tab sends the example,
+     * so on a page whose Content Security Policy refuses inline scripts the tab
+     * opens empty, as the built-in document does there. Dictation in the tab
+     * listens through the tab's own recognizer, asked from this page.
      */
     open(): Window | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Takes a frame's ask to start or stop listening, and returns whether the
+     * message was one. `scope` is the window that holds the frame, whose
+     * recognizer listens.
+     */
+    private speak;
+    /**
+     * Listens for a frame that cannot listen for itself, and sends each guess
+     * back to that frame.
+     *
+     * **An engine this page registered listens in its place**, so a page that
+     * gives its own fields another engine gives it to its examples too. The
+     * browser's recognizer listens in `scope`, the window that holds the frame:
+     * a tab `open()` makes holds its own. A registered engine runs in this page,
+     * so it listens only for the frame this page holds.
+     */
+    private hear;
     /**
      * Loads the frame's document again, and re-sends the example to it.
      *

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

@@ -1,6 +1,6 @@
 var HelixSandboxPreview_1;
 import { __decorate } from "tslib";
-import { customElement, DelayController, HelixConsoleEvent, HelixElement, HelixResizeEvent, words, } from '@fusion.dev/helix-core';
+import { browserSpeech, customElement, DelayController, HelixConsoleEvent, HelixElement, HelixResizeEvent, pageSpeechEngine, recognizeSpeech, words, } from '@fusion.dev/helix-core';
 const SETTLE = 120;
 const PAINT_PATIENCE = 1000;
 import { html, nothing } from 'lit';
@@ -10,6 +10,7 @@ import { defaultFrame, withScript } from '../frame.js';
 import { isFetch, RELAY_OPEN, relayAddress, relayFetch, relayPrefixes, } from '../relay.js';
 import { styles as sheet } from './sandbox-preview.css.js';
 const SANDBOX = 'allow-scripts allow-forms';
+const ALLOW = 'clipboard-write *; fullscreen *; microphone *';
 const RELATIVE = /(\bfrom\s*|\bimport\s*\(?\s*)(["'])(\.{1,2}\/[^"']+)\2/g;
 const moduleText = (path, source) => `data:text/javascript;charset=utf-8,${encodeURIComponent(source.replace(RELATIVE, (_, lead, quote, specifier) => `${lead}${quote}${new URL(specifier, `sandbox:/${path}`).href}${quote}`))}`;
 let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
@@ -40,6 +41,9 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
                 return;
             }
             const data = event.data;
+            if (this.speak(event, window)) {
+                return;
+            }
             if (isFetch(data)) {
                 void this.answer(data, event.source);
                 return;
@@ -191,6 +195,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         tab.document.title = this.label;
         body.style.margin = '0';
         const frame = tab.document.createElement('iframe');
+        frame.setAttribute('allow', ALLOW);
         frame.setAttribute('sandbox', SANDBOX);
         frame.title = this.label;
         frame.style.cssText = 'block-size: 100vh; border: none; display: block; inline-size: 100vw';
@@ -200,15 +205,18 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         else {
             frame.src = this.frame?.src || this.src;
         }
-        if (relayPrefixes(this.relay).length > 0) {
-            tab.addEventListener('message', (event) => {
-                if (event.source === frame.contentWindow &&
-                    event.origin === 'null' &&
-                    isFetch(event.data)) {
-                    void this.answer(event.data, event.source);
-                }
-            });
-        }
+        const relays = relayPrefixes(this.relay).length > 0;
+        tab.addEventListener('message', (event) => {
+            if (event.source !== frame.contentWindow || event.origin !== 'null') {
+                return;
+            }
+            if (this.speak(event, tab)) {
+                return;
+            }
+            if (relays && isFetch(event.data)) {
+                void this.answer(event.data, event.source);
+            }
+        });
         const send = tab.document.createElement('script');
         send.textContent = `const frame = document.currentScript.previousElementSibling
 frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.message)}, '*')`;
@@ -222,6 +230,52 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
     disconnectedCallback() {
         super.disconnectedCallback();
         window.removeEventListener('message', this.handleMessage);
+        this.speech?.stop();
+        this.speech = undefined;
+    }
+    speak(event, scope) {
+        const data = event.data;
+        if (data?.type === 'helix-speech-start') {
+            this.hear(data, event.source, scope, event.ports[0]);
+            return true;
+        }
+        if (data?.type === 'helix-speech-stop') {
+            if (this.speechId === data.id) {
+                this.speech?.stop();
+            }
+            return true;
+        }
+        return false;
+    }
+    hear(ask, source, scope, port) {
+        this.speech?.stop();
+        this.speechId = ask.id;
+        const tell = (kind, text, error, level) => {
+            const message = { error, id: ask.id, kind, level, text, type: 'helix-speech-heard' };
+            if (port) {
+                port.postMessage(message);
+            }
+            else {
+                source.postMessage(message, '*');
+            }
+        };
+        const listener = {
+            end: (reason, message) => {
+                tell(reason === 'error' ? 'error' : reason === 'stopped' ? 'stopped' : 'end', undefined, message);
+                if (this.speechId === ask.id) {
+                    this.speech = undefined;
+                    this.speechId = undefined;
+                }
+            },
+            final: (text) => tell('final', text),
+            level: (level) => tell('level', undefined, undefined, level),
+            partial: (text) => tell('partial', text),
+        };
+        const engine = pageSpeechEngine();
+        this.speech =
+            engine !== browserSpeech && scope === window
+                ? engine.listen({ lang: ask.lang, listener })
+                : recognizeSpeech(ask.lang, listener, { meter: false, scope });
     }
     reload() {
         const frame = this.frame;
@@ -286,7 +340,7 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
       srcdoc=${this.src === '' ? defaultFrame(this.map) : nothing}
       title=${this.label}
       aria-describedby=${this.failure === undefined ? nothing : 'error'}
-      allow="clipboard-write *; fullscreen *"
+      allow=${ALLOW}
       sandbox=${SANDBOX}
     ></iframe>${this.failure === undefined
             ? nothing

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

@@ -1,2 +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}}`);
+export const styles = createSheet(`[part~="voice-listening"]:not(:disabled), [part~="voice-listening"]:hover:not(:disabled) {background-color: var(--helix-color-success-surface);box-shadow: 0 0 0 calc(var(--dictation-level, 0.4) * var(--helix-space-2xs) * 1.5) color-mix(in oklab, var(--helix-color-success) 35%, transparent);color: var(--helix-color-foreground-on-status);transition: box-shadow var(--helix-duration-fast) linear}[part~="voice-listening"]:hover:not(:disabled) {background-color: var(--helix-color-success-surface-hover)}@media (prefers-reduced-motion: reduce) {[part~="voice-listening"]:not(:disabled), [part~="voice-listening"]:hover:not(:disabled) {box-shadow: 0 0 0 calc(var(--helix-space-2xs) * 0.6) color-mix(in oklab, var(--helix-color-success) 35%, transparent);transition: none}}@media print {[part~="voice"] {display: none}}`);

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"], [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}}`);
+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));position: relative;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)}[part~="voice"] {background-color: transparent;block-size: var(--helix-size-icon-loose);inline-size: var(--helix-size-icon-loose);inset-block-start: calc(var(--textarea-padding, var(--helix-space-xs)) + (1em * var(--helix-leading-normal) - var(--helix-size-icon-loose)) / 2);inset-inline-end: var(--textarea-padding, var(--helix-space-xs));overflow: hidden;position: absolute}[part="field"]:has([part~="voice"]) [part="control"] {padding-inline-end: calc(var(--helix-size-icon-loose) + var(--helix-space-2xs))}[part~="voice"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)}: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.js

@@ -5,9 +5,11 @@ import { styles as dictationStyles } from '../../shared/dictation/dictation.css.
 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';
+import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './textarea-root.css.js';
 let HelixTextarea = class HelixTextarea extends HelixHeadlessTextarea {
     static { this.styles = [
+        glyphStyles,
         fieldStyles,
         fieldFrameStyles,
         fieldStackedStyles,