@fusion.dev/helix 0.222.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/preview/sandbox-preview.js

@@ -275,7 +275,7 @@ frame.onload = () => frame.contentWindow.postMessage(${JSON.stringify(this.messa
         this.speech =
             engine !== browserSpeech && scope === window
                 ? engine.listen({ lang: ask.lang, listener })
-                : recognizeSpeech(ask.lang, listener, { meter: false, scope });
+                : recognizeSpeech(ask.lang, listener, { scope });
     }
     reload() {
         const frame = this.frame;

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"]: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}}`);
+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.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

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