@fusion.dev/helix 0.221.0 → 0.223.0

package/dist/chat/composer/chat-composer.d.ts

@@ -1,6 +1,7 @@
 import { HelixHeadlessChatComposer } from '@fusion.dev/helix-headless/chat';
 import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
+import '../../voice-level/index.js';
 /**
  * The keyframes of one lap of the light around a box `w` wide and `h` tall,
  * clockwise from its top-left corner, each side taking the share of the lap
@@ -46,7 +47,6 @@ export declare function lapOf(w: number, h: number): Keyframe[];
  * @cssproperty --chat-composer-border-width - Width of the composer's edge, so your theme can remove it.
  * @cssproperty --chat-composer-glow-color - Color of the focus glow under `glow`. Defaults to the primary color.
  * @cssproperty --chat-composer-max-block-size - Maximum height the field grows to.
- * @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.
  */
 export declare class HelixChatComposer extends HelixHeadlessChatComposer {
     static tier: string;

package/dist/chat/composer/chat-composer.js

@@ -7,6 +7,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styles as dictationStyles } from '../../shared/dictation/dictation.css.js';
 import { styles } from './chat-composer.css.js';
 import '../../tooltip/index.js';
+import '../../voice-level/index.js';
 const LIGHT_X = '--_chat-composer-light-x';
 const LIGHT_Y = '--_chat-composer-light-y';
 const REACH_X = '--_chat-composer-reach-x';

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessCodeInput } from '@fusion.dev/helix-headless/code-input';
 import type { CSSResultGroup } from 'lit';
+import '../../voice-level/index.js';
 /**
  * @summary A field for a short piece of code, highlighted as it is typed.
  *
@@ -21,9 +22,10 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --code-input-font-size - The code's size. Defaults to `text-sm`, and never under 16px on a touch screen.
  * @cssproperty --code-input-padding - Space between the edge of the field and the code.
  * @cssproperty --code-input-radius - Corner radius of the field.
- * @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.
  */
 export declare class HelixCodeInput extends HelixHeadlessCodeInput {
+    /** The tier its dictation button draws Voice Level from. */
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/code-input/root/code-input-root.js

@@ -6,7 +6,9 @@ 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 } from './code-input-root.css.js';
+import '../../voice-level/index.js';
 let HelixCodeInput = class HelixCodeInput extends HelixHeadlessCodeInput {
+    static { this.tier = 'helix-'; }
     static { this.styles = [
         fieldStyles,
         fieldFrameStyles,

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessFilterInput } from '@fusion.dev/helix-headless/filter-input';
 import type { CSSResultGroup } from 'lit';
+import '../../voice-level/index.js';
 /**
  * @summary A text field for filters, with the active filters shown in it as tokens.
  *
@@ -26,7 +27,6 @@ import type { CSSResultGroup } from 'lit';
  * @aliases SearchField, FacetInput, TokenInput
  * @documentation https://fusion.dev/helix/components/filter-input
  *
- * @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 --filter-input-action-padding-inline - The space on either side of a slotted control's label. It follows `--helix-space-xs`, the space a token uses.
  * @cssproperty --filter-input-action-size - The height of a control slotted at either end. It follows `--helix-size-tag`, so it matches the height of the tokens beside it.
  * @cssproperty --filter-input-background-color - The fill behind the field.

package/dist/filter-input/root/filter-input-root.js

@@ -12,6 +12,7 @@ import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles as tagRowStyles } from '../../shared/tags/tags.css.js';
 import { styles } from './filter-input-root.css.js';
+import '../../voice-level/index.js';
 let HelixFilterInput = class HelixFilterInput extends HelixHeadlessFilterInput {
     static { this.tier = 'helix-'; }
     static { this.styles = [

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessInput } from '@fusion.dev/helix-headless/input';
 import type { CSSResultGroup } from 'lit';
+import '../../voice-level/index.js';
 /**
  * @summary A field for a single line of text.
  *
@@ -22,7 +23,6 @@ import type { CSSResultGroup } from 'lit';
  * @aliases TextField, Field, TextInput
  * @documentation https://fusion.dev/helix/components/input
  *
- * @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 --input-background-color - Fill behind the text.
  * @cssproperty --input-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
  * @cssproperty --input-padding-inline - Space between the edge of the field and what is inside it.
@@ -32,6 +32,8 @@ import type { CSSResultGroup } from 'lit';
  * @replaces input, input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=url]
  */
 export declare class HelixInput extends HelixHeadlessInput {
+    /** The tier its dictation button draws Voice Level from. */
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -7,7 +7,9 @@ import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.j
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './input-root.css.js';
+import '../../voice-level/index.js';
 let HelixInput = class HelixInput extends HelixHeadlessInput {
+    static { this.tier = 'helix-'; }
     static { this.styles = [
         glyphStyles,
         fieldStyles,

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessListbox } from '@fusion.dev/helix-headless/listbox';
 import type { CSSResultGroup } from 'lit';
+import '../../voice-level/index.js';
 /**
  * @summary A list of options, from which you choose one or several.
  *
@@ -17,7 +18,6 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Options, Select list
  * @documentation https://fusion.dev/helix/components/listbox
  *
- * @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 --listbox-background-color - The panel's fill. Set it to `transparent` when the list is already inside a panel.
  * @cssproperty --listbox-border - The panel's border, as a shorthand. Set it to `none` when the list is already inside a panel.
  * @cssproperty --listbox-column-min-inline-size - How narrow a column may be with `layout="grid"`. As many columns as fit are drawn. Defaults to `8rem`.

package/dist/listbox/root/listbox-root.js

@@ -7,6 +7,7 @@ import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './listbox-root.css.js';
+import '../../voice-level/index.js';
 let HelixListbox = class HelixListbox extends HelixHeadlessListbox {
     static { this.tier = 'helix-'; }
     static { this.styles = [

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, { 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-level"] {--voice-level-bars: 5;--voice-level-block-size: var(--icon-size, var(--helix-size-icon));--voice-level-inline-size: var(--icon-size, var(--helix-size-icon));display: block}@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.d.ts

@@ -1,5 +1,6 @@
 import { HelixHeadlessTextarea } from '@fusion.dev/helix-headless/textarea';
 import type { CSSResultGroup } from 'lit';
+import '../../voice-level/index.js';
 /**
  * @summary A multi-line text field.
  *
@@ -14,7 +15,6 @@ 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.
@@ -24,6 +24,8 @@ import type { CSSResultGroup } from 'lit';
  * @replaces textarea
  */
 export declare class HelixTextarea extends HelixHeadlessTextarea {
+    /** The tier its dictation button draws Voice Level from. */
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -5,9 +5,13 @@ 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';
+import '../../voice-level/index.js';
 let HelixTextarea = class HelixTextarea extends HelixHeadlessTextarea {
+    static { this.tier = 'helix-'; }
     static { this.styles = [
+        glyphStyles,
         fieldStyles,
         fieldFrameStyles,
         fieldStackedStyles,