@fusion.dev/helix 0.215.3 → 0.217.0

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

@@ -2,13 +2,20 @@ import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessAreaChart } from '@fusion.dev/helix-headless/area-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 './area-chart-root.css.js';
 import '../../tooltip/index.js';
 let HelixAreaChart = class HelixAreaChart extends HelixHeadlessAreaChart {
     static { this.tier = 'helix-'; }
-    static { this.styles = [seriesStyles, statusStyles, tooltipStyles, styles]; }
+    static { this.styles = [
+        seriesStyles,
+        statusStyles,
+        tooltipStyles,
+        styles,
+        sonifyStyles,
+    ]; }
 };
 HelixAreaChart = __decorate([
     customElement('helix-area-chart')

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

@@ -3,6 +3,7 @@ import { customElement, seriesIndex, seriesNames } from '@fusion.dev/helix-core'
 import { HelixHeadlessBarChart } from '@fusion.dev/helix-headless/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 statusStyles } from '../../shared/chart/status.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './bar-chart-root.css.js';
@@ -35,7 +36,13 @@ let HelixBarChart = class HelixBarChart extends HelixHeadlessBarChart {
             mark(bar, 'material', glass.has(at) ? 'glass' : undefined);
         }
     }
-    static { this.styles = [seriesStyles, statusStyles, tooltipStyles, styles]; }
+    static { this.styles = [
+        seriesStyles,
+        statusStyles,
+        tooltipStyles,
+        styles,
+        sonifyStyles,
+    ]; }
 };
 __decorate([
     property({ reflect: true })

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="composer"] {background-color: var(--chat-composer-background-color, var(--helix-color-surface));border: var(--chat-composer-border-width, var(--helix-border-thin)) solid var(--helix-color-border);border-radius: var(--helix-radii-md);display: grid;gap: var(--helix-space-2xs);padding: var(--helix-space-xs)}[part="composer"]:focus-within {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0}:host(:state(invalid)) [part="composer"], :host(:state(invalid)) [part="composer"]:focus-within {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger)}[part="feedback"] {color: var(--helix-color-danger);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-normal);margin: var(--helix-space-none);margin-block-start: var(--helix-space-2xs)}[part="field"] {background-color: transparent;border: 0;color: var(--helix-color-foreground);field-sizing: content;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));line-height: var(--helix-leading-normal);max-block-size: var(--chat-composer-max-block-size, 12rem);padding-block: var(--helix-space-2xs);padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));resize: none}[part="field"]:focus-visible {outline: none}[part="tools"] {align-items: center;display: flex;gap: var(--helix-space-2xs);justify-content: flex-end}[part="start"], [part="end"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;display: flex;gap: var(--helix-space-2xs)}[part="start"] {margin-inline-end: auto}[part="end"] {margin-inline-end: var(--helix-space-2xs)}[part="start"][data-empty], [part="end"][data-empty] {display: none}[part="send"] {align-items: center;background-color: transparent;block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));justify-content: center;padding: var(--helix-space-none)}[part="mark"] {block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight)}[part="send"]:hover:not(:disabled) {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="send"]:disabled {cursor: not-allowed;opacity: 0.5}[part="send"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}`);
+export const styles = createSheet(`:host {display: block}[part="composer"] {background-color: var(--chat-composer-background-color, var(--helix-color-surface));border: var(--chat-composer-border-width, var(--helix-border-thin)) solid var(--helix-color-border);border-radius: var(--helix-radii-md);display: grid;gap: var(--helix-space-2xs);padding: var(--helix-space-xs)}[part="composer"]:focus-within {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0}:host(:state(invalid)) [part="composer"], :host(:state(invalid)) [part="composer"]:focus-within {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger)}[part="feedback"] {color: var(--helix-color-danger);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-normal);margin: var(--helix-space-none);margin-block-start: var(--helix-space-2xs)}[part="field"] {background-color: transparent;border: 0;color: var(--helix-color-foreground);field-sizing: content;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));line-height: var(--helix-leading-normal);max-block-size: var(--chat-composer-max-block-size, 12rem);padding-block: var(--helix-space-2xs);padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));resize: none}[part="field"]:focus-visible {outline: none}[part="tools"] {align-items: center;display: flex;gap: var(--helix-space-2xs);justify-content: flex-end}[part="start"], [part="end"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;display: flex;gap: var(--helix-space-2xs)}[part="start"] {margin-inline-end: auto}[part="end"] {margin-inline-end: var(--helix-space-2xs)}[part="start"][data-empty], [part="end"][data-empty] {display: none}[part="send"], [part~="voice"] {align-items: center;background-color: transparent;block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));justify-content: center;padding: var(--helix-space-none)}[part="mark"], [part~="voice"] svg {block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight)}[part="send"]:hover:not(:disabled), [part~="voice"]:hover:not(:disabled) {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground)}[part="send"]:disabled, [part~="voice"]:disabled {cursor: not-allowed;opacity: 0.5}[part="send"]: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)}`);

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

@@ -24,6 +24,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --chat-composer-background-color - Fill behind the composer.
  * @cssproperty --chat-composer-border-width - Width of the composer's edge, so your theme can remove it.
  * @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

@@ -1,10 +1,11 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessChatComposer } from '@fusion.dev/helix-headless/chat';
+import { styles as dictationStyles } from '../../shared/dictation/dictation.css.js';
 import { styles } from './chat-composer.css.js';
 let HelixChatComposer = class HelixChatComposer extends HelixHeadlessChatComposer {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [styles, dictationStyles]; }
 };
 HelixChatComposer = __decorate([
     customElement('helix-chat-composer')

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

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

package/dist/code-editor/index.js

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

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

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

package/dist/code-editor/root/code-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="field"] {background-color: var(--code-editor-background-color, var(--helix-color-background));block-size: var(--code-editor-block-size, 24rem);border: var(--helix-border-thin) solid var(--code-editor-border-color, var(--helix-color-border));border-radius: var(--code-editor-radius, var(--helix-radii-lg));box-sizing: border-box;display: flex;flex-direction: column;overflow: hidden}:host([fill]) [part="field"] {block-size: 100%}:host([separation="plain"]) [part="field"] {border: none;border-radius: 0}[part="header"], [part="find-bar"], [part="status"] {--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);align-items: center;background-color: var(--code-editor-header-background-color, var(--helix-color-surface-raised));box-sizing: border-box;display: flex;flex: 0 0 auto;gap: var(--helix-space-2xs) var(--helix-space-xs);min-inline-size: 0;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-sm) var(--helix-space-2xs)}[part="header"] {border-block-end: var(--helix-border-thin) solid var(--code-editor-border-color, var(--helix-color-border));min-block-size: calc(var(--helix-size-control) + var(--helix-space-2xs) * 2)}[part="label"] {display: block;flex: 0 1 auto;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="language"] {color: var(--helix-color-foreground-muted);flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs)}[part="controls"] {flex: 0 0 auto;margin-inline-start: auto}:host(:state(find-open)) [part="find"], [part="find-match-case"][aria-pressed="true"], [part="find-whole-word"][aria-pressed="true"], [part="find-regex"][aria-pressed="true"] {--icon-button-background-color: color-mix(in oklab, var(--helix-color-foreground) 12%, transparent);--icon-button-foreground-color: var(--helix-color-foreground)}[part="find-bar"], [part="find-controls"] {--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)}[part="find-bar"] {border-block-end: var(--helix-border-thin) solid var(--code-editor-border-color, var(--helix-color-border));flex-wrap: wrap}[part="find-bar"][hidden] {display: none}[part="find-field"], [part="replace-field"] {appearance: none;background-color: var(--code-editor-background-color, var(--helix-color-background));block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--code-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 10rem;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));max-inline-size: 20rem;min-inline-size: 0;padding-inline: var(--helix-space-xs)}[part="find-field"]:focus-visible, [part="replace-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="find-field"][aria-invalid="true"] {border-color: var(--helix-color-danger)}[part="find-field"]::-webkit-search-cancel-button, [part="find-field"]::-webkit-search-decoration {appearance: none}[part="find-count"] {color: var(--helix-color-foreground-muted);flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;min-inline-size: 7em;white-space: nowrap}[part="find-controls"] {flex: 0 0 auto}:host(:state(replace-open)) [part="find-bar"]::after {content: "";flex-basis: 100%;order: 1}[part="replace-field"], [part="replace"], [part="replace-all"] {order: 2}:host(:state(replace-open)) [part="replace-field"] {margin-inline-start: calc(var(--helix-size-control) + var(--helix-space-xs))}[part="find-replace"] {flex: 0 0 auto}[part="body"] {color: var(--helix-color-foreground);display: flex;flex: 1 1 auto;font-family: var(--helix-font-mono);font-size: var(--code-editor-font-size, var(--helix-text-sm));font-variant-ligatures: none;min-block-size: 0}[part="control"] {all: unset;box-sizing: border-box;caret-color: var(--helix-color-foreground);flex: 1 1 auto;font: inherit;line-height: var(--helix-leading-normal);min-inline-size: 0;overflow: auto;padding: var(--helix-space-xs) var(--helix-space-sm);tab-size: 2;white-space: pre}:host([wrap]) [part="control"] {white-space: pre-wrap}[part="view"] {flex: 1 1 auto;min-block-size: 0;min-inline-size: 0}[part="control"][hidden], [part="view"][hidden] {display: none}[part="diagnostics"] {border-block-start: var(--helix-border-thin) solid var(--code-editor-border-color, var(--helix-color-border));flex: 0 0 auto;list-style: none;margin: var(--helix-space-none);max-block-size: calc(5 * (var(--helix-text-xs) * var(--helix-leading-normal) + var(--helix-space-2xs) * 2));overflow: auto;padding: var(--helix-space-none)}[part~="diagnostic"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;box-sizing: border-box;color: var(--helix-color-foreground);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);inline-size: 100%;line-height: var(--helix-leading-normal);padding: var(--helix-space-2xs) var(--helix-space-sm)}[part~="diagnostic"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, transparent)}[part~="diagnostic"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="diagnostic-icon"] {display: inline-flex;flex: 0 0 auto}[part~="diagnostic-danger"] [part="diagnostic-icon"] {color: var(--helix-color-danger)}[part~="diagnostic-warning"] [part="diagnostic-icon"] {color: var(--helix-color-warning)}[part~="diagnostic-info"] [part="diagnostic-icon"] {color: var(--helix-color-info)}[part="status"] {border-block-start: var(--helix-border-thin) solid var(--code-editor-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;gap: var(--helix-space-md);justify-content: space-between;padding-inline: var(--helix-space-sm)}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5}@media print {[part="controls"], [part="find-bar"], [part="status"] {display: none}}`);

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

@@ -0,0 +1,52 @@
+import { HelixHeadlessCodeEditor } from '@fusion.dev/helix-headless/code-editor';
+import type { CSSResultGroup } from 'lit';
+import '../../button/index.js';
+import '../../icon-button/index.js';
+import '../../toolbar/index.js';
+/**
+ * @summary An editor for a file of code, drawn by a code editor you connect.
+ *
+ * @description
+ * Drawn as Terminal and Code Block are: the code on the page's ground, with a
+ * 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
+ * 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
+ * view.
+ *
+ * @since 0.216.0
+ * @status experimental
+ * @category inputs
+ * @aliases Code editor, CodeMirror, File editor, IDE, Monaco
+ * @documentation https://fusion.dev/helix/components/code-editor
+ *
+ * @cssproperty --code-editor-background-color - The ground the code is drawn on. Defaults to the page's background.
+ * @cssproperty --code-editor-block-size - The frame's height, as a length: 24rem unless set. Ignored with `fill`, where the container decides it.
+ * @cssproperty --code-editor-border-color - The frame's edge and the lines between its strips.
+ * @cssproperty --code-editor-font-size - The code's size. Defaults to `text-sm`.
+ * @cssproperty --code-editor-header-background-color - The fill of the header, the find bar, and the status line.
+ * @cssproperty --code-editor-radius - The frame's corner radius.
+ */
+export declare class HelixCodeEditor extends HelixHeadlessCodeEditor {
+    static tier: string;
+    /**
+     * Covers the container instead of taking a height of its own, for an
+     * editor that fills a pane. 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 pane that draws its own.
+     */
+    separation?: 'outlined' | 'plain';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-code-editor': HelixCodeEditor;
+    }
+}

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

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

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

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

package/dist/code-input/index.js

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

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

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

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

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="field"] {background-color: var(--code-input-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--code-input-border-color, var(--helix-color-border));border-radius: var(--code-input-radius, var(--helix-radii-sm));display: flex;gap: var(--helix-space-2xs);padding: var(--code-input-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="scroller"] {flex: 1 1 auto;min-inline-size: 0;scrollbar-width: thin}[part="layers"] {color: var(--helix-color-foreground);font-family: var(--helix-font-mono);font-size: var(--code-input-font-size, max(var(--helix-text-field-min), var(--helix-text-sm)));font-variant-ligatures: none;line-height: var(--helix-leading-normal);tab-size: 2}[part="control"] {caret-color: var(--helix-color-foreground)}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(: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/code-input/root/code-input-root.d.ts

@@ -0,0 +1,33 @@
+import { HelixHeadlessCodeInput } from '@fusion.dev/helix-headless/code-input';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A field for a short piece of code, highlighted as it is typed.
+ *
+ * @description
+ * Uses the same frame as `Textarea` and `Input`, so a form of mixed fields
+ * matches, with the code in the mono face at the size Code Block draws it.
+ * The colors are the syntax tokens, through the highlighter the page
+ * registered: `import '@fusion.dev/helix-sandbox/code-block'` colors every
+ * Code Block and Code Input on the page.
+ *
+ * @since 0.216.0
+ * @status experimental
+ * @category forms
+ * @aliases Code field, Code textarea, JSON input, Syntax highlighted input
+ * @documentation https://fusion.dev/helix/components/code-input
+ *
+ * @cssproperty --code-input-background-color - Fill behind the code.
+ * @cssproperty --code-input-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
+ * @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 {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-code-input': HelixCodeInput;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessCodeInput } from '@fusion.dev/helix-headless/code-input';
+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';
+import { styles } from './code-input-root.css.js';
+let HelixCodeInput = class HelixCodeInput extends HelixHeadlessCodeInput {
+    static { this.styles = [
+        fieldStyles,
+        fieldFrameStyles,
+        fieldStackedStyles,
+        styles,
+        dictationStyles,
+    ]; }
+};
+HelixCodeInput = __decorate([
+    customElement('helix-code-input')
+], HelixCodeInput);
+export { HelixCodeInput };

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

@@ -2,6 +2,7 @@ import { HelixHeadlessCommand } from '@fusion.dev/helix-headless/command';
 import type { CSSResultGroup } from 'lit';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
+import '../../option/index.js';
 /**
  * @summary A command palette: a list of commands that opens from anywhere on the page and filters as you type.
  *

package/dist/command/root/command-root.js

@@ -3,6 +3,7 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCommand } from '@fusion.dev/helix-headless/command';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
+import '../../option/index.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './command-root.css.js';
 let HelixCommand = class HelixCommand extends HelixHeadlessCommand {

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

@@ -3,13 +3,20 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDonutChart } from '@fusion.dev/helix-headless/donut-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 statusStyles } from '../../shared/chart/status.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
 import { styles } from './donut-chart-root.css.js';
 import '../../tooltip/index.js';
 let HelixDonutChart = class HelixDonutChart extends HelixHeadlessDonutChart {
     static { this.tier = 'helix-'; }
-    static { this.styles = [seriesStyles, statusStyles, tooltipStyles, styles]; }
+    static { this.styles = [
+        seriesStyles,
+        statusStyles,
+        tooltipStyles,
+        styles,
+        sonifyStyles,
+    ]; }
 };
 __decorate([
     property({ reflect: true })

package/dist/element-events.generated.js

@@ -30,7 +30,13 @@ registerElementEvents({
     ],
     'helix-carousel': ['helix-activate', 'helix-select'],
     'helix-chat': ['helix-before-pin', 'helix-history', 'helix-pin', 'helix-send'],
-    'helix-chat-composer': ['helix-send', 'helix-typing', 'input'],
+    'helix-chat-composer': [
+        'helix-before-listen',
+        'helix-listen',
+        'helix-send',
+        'helix-typing',
+        'input',
+    ],
     'helix-chat-message': ['helix-send'],
     'helix-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-checkbox-group': ['change', 'helix-before-change', 'input'],
@@ -42,6 +48,15 @@ registerElementEvents({
         'helix-copy-error',
         'helix-toggle',
     ],
+    'helix-code-editor': ['change', 'helix-before-change', 'input'],
+    'helix-code-input': [
+        'change',
+        'helix-before-change',
+        'helix-before-listen',
+        'helix-clear',
+        'helix-listen',
+        'input',
+    ],
     'helix-color-input': [
         'change',
         'helix-before-change',
@@ -124,9 +139,11 @@ registerElementEvents({
         'change',
         'helix-before-change',
         'helix-before-close',
+        'helix-before-listen',
         'helix-before-open',
         'helix-dismiss',
         'helix-facet',
+        'helix-listen',
         'helix-select',
         'input',
         'toggle',
@@ -153,7 +170,14 @@ registerElementEvents({
     'helix-icon': ['error', 'load'],
     'helix-icon-button': ['helix-press'],
     'helix-image': ['error', 'load'],
-    'helix-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
+    'helix-input': [
+        'change',
+        'helix-before-change',
+        'helix-before-listen',
+        'helix-clear',
+        'helix-listen',
+        'input',
+    ],
     'helix-kbd': ['helix-shortcut'],
     'helix-legend': ['change', 'helix-before-change'],
     'helix-lightbox': [
@@ -177,8 +201,10 @@ registerElementEvents({
     'helix-listbox': [
         'change',
         'helix-before-change',
+        'helix-before-listen',
         'helix-before-reorder',
         'helix-filter',
+        'helix-listen',
         'helix-load-more',
         'helix-reorder',
         'input',
@@ -354,7 +380,14 @@ registerElementEvents({
         'helix-terminal-restart',
         'helix-terminal-title',
     ],
-    'helix-textarea': ['change', 'helix-before-change', 'helix-clear', 'input'],
+    'helix-textarea': [
+        'change',
+        'helix-before-change',
+        'helix-before-listen',
+        'helix-clear',
+        'helix-listen',
+        'input',
+    ],
     'helix-time-input': [
         'change',
         'helix-before-change',

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_filter-input-size: var(--filter-input-size, var(--helix-size-control))}[part="field"] {align-items: center;background-color: var(--filter-input-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--filter-input-field-border-color, var(--helix-color-border));border-radius: var(--filter-input-radius, var(--helix-radii-sm));color: var(--helix-color-foreground-muted);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);min-block-size: var(--_filter-input-size);padding-block: var(--helix-space-2xs);padding-inline: var(--filter-input-padding-inline, 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)}::slotted([slot="tags"]) {flex: 0 0 auto;max-inline-size: 100%}[part="control"] {flex: 1 1 var(--filter-input-control-size, 6ch)}[part="lead"] {align-items: center;align-self: stretch;border-inline-end: var(--helix-border-thin) solid var(--filter-input-lead-border-color, var(--helix-color-border));display: flex;margin-block: calc(var(--helix-space-2xs) * -1);margin-inline-start: calc(var(--helix-space-xs) * -1);padding-inline: var(--helix-space-2xs)}[part="lead"][hidden] {display: none}[part="lead"], slot[name="end"] {--button-size: var(--filter-input-action-size, var(--helix-size-tag));--icon-button-size: var(--filter-input-action-size, var(--helix-size-tag));--button-padding-inline: var(--filter-input-action-padding-inline, var(--helix-space-xs))}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-muted);flex: 0 0 auto}[part="clear"] {--icon-size: 0.85em;all: unset;align-items: center;align-self: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--filter-input-clear-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 {background-color: color-mix(in oklab, currentcolor 12%, transparent);color: var(--filter-input-clear-color-hover, 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(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5}@media print {:host {print-color-adjust: exact}}[part="surface"] {--_floating-border-color: var(--filter-input-border-color, var(--helix-color-border));--_floating-border-width: var(--filter-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--filter-input-shadow, var(--helix-shadow-floating));box-sizing: border-box;inline-size: var(--filter-input-panel-size, var(--floating-anchor-inline-size, 100%));max-block-size: var(--floating-available-block-size, 20rem);min-inline-size: max-content;overflow-y: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);position: absolute}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-xs);--_collection-inset-inline: var(--helix-space-xs)}`);
+export const styles = createSheet(`:host {--_filter-input-size: var(--filter-input-size, var(--helix-size-control))}[part="field"] {align-items: center;background-color: var(--filter-input-background-color, var(--helix-color-well));border: var(--helix-border-thin) solid var(--filter-input-field-border-color, var(--helix-color-border));border-radius: var(--filter-input-radius, var(--helix-radii-sm));color: var(--helix-color-foreground-muted);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);min-block-size: var(--_filter-input-size);padding-block: var(--helix-space-2xs);padding-inline: var(--filter-input-padding-inline, 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)}::slotted([slot="tags"]) {flex: 0 0 auto;max-inline-size: 100%}[part="control"] {flex: 1 1 var(--filter-input-control-size, 6ch)}[part="lead"] {align-items: center;align-self: stretch;border-inline-end: var(--helix-border-thin) solid var(--filter-input-lead-border-color, var(--helix-color-border));display: flex;margin-block: calc(var(--helix-space-2xs) * -1);margin-inline-start: calc(var(--helix-space-xs) * -1);padding-inline: var(--helix-space-2xs)}[part="lead"][hidden] {display: none}[part="lead"], slot[name="end"] {--button-size: var(--filter-input-action-size, var(--helix-size-tag));--icon-button-size: var(--filter-input-action-size, var(--helix-size-tag));--button-padding-inline: var(--filter-input-action-padding-inline, var(--helix-space-xs))}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-muted);flex: 0 0 auto}[part="clear"], [part~="voice"] {--icon-size: 0.85em;all: unset;align-items: center;align-self: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--filter-input-clear-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 {background-color: color-mix(in oklab, currentcolor 12%, transparent);color: var(--filter-input-clear-color-hover, 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(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5}@media print {:host {print-color-adjust: exact}}[part="surface"] {--_floating-border-color: var(--filter-input-border-color, var(--helix-color-border));--_floating-border-width: var(--filter-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--filter-input-shadow, var(--helix-shadow-floating));box-sizing: border-box;inline-size: var(--filter-input-panel-size, var(--floating-anchor-inline-size, 100%));max-block-size: var(--floating-available-block-size, 20rem);min-inline-size: max-content;overflow-y: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none);position: absolute}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-xs);--_collection-inset-inline: var(--helix-space-xs)}`);

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

@@ -26,6 +26,7 @@ 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

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessFilterInput } from '@fusion.dev/helix-headless/filter-input';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
+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';
@@ -24,6 +25,7 @@ let HelixFilterInput = class HelixFilterInput extends HelixHeadlessFilterInput {
         floatingEntranceStyles,
         collectionStateStyles,
         styles,
+        dictationStyles,
     ]; }
 };
 HelixFilterInput = __decorate([

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

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

package/dist/index.d.ts

@@ -26,6 +26,8 @@ export * from './checkbox/index.js';
 export * from './checkbox-group/index.js';
 export * from './code/index.js';
 export * from './code-block/index.js';
+export * from './code-editor/index.js';
+export * from './code-input/index.js';
 export * from './color-input/index.js';
 export * from './color-picker/index.js';
 export * from './combobox/index.js';
@@ -63,6 +65,7 @@ export * from './listbox/index.js';
 export * from './loader/index.js';
 export * from './log/index.js';
 export * from './map/index.js';
+export * from './markdown/index.js';
 export * from './megamenu/index.js';
 export * from './menu/filter/index.js';
 export * from './menu/index.js';
@@ -87,6 +90,7 @@ export * from './sandbox/index.js';
 export * from './scatter-chart/index.js';
 export * from './scroll-area/index.js';
 export * from './select/index.js';
+export * from './shortcut-overlay/index.js';
 export * from './skeleton/index.js';
 export * from './skip-link/index.js';
 export * from './slider/index.js';

package/dist/index.js

@@ -21,6 +21,8 @@ export * from './checkbox/index.js';
 export * from './checkbox-group/index.js';
 export * from './code/index.js';
 export * from './code-block/index.js';
+export * from './code-editor/index.js';
+export * from './code-input/index.js';
 export * from './color-input/index.js';
 export * from './color-picker/index.js';
 export * from './combobox/index.js';
@@ -58,6 +60,7 @@ export * from './listbox/index.js';
 export * from './loader/index.js';
 export * from './log/index.js';
 export * from './map/index.js';
+export * from './markdown/index.js';
 export * from './megamenu/index.js';
 export * from './menu/filter/index.js';
 export * from './menu/index.js';
@@ -82,6 +85,7 @@ export * from './sandbox/index.js';
 export * from './scatter-chart/index.js';
 export * from './scroll-area/index.js';
 export * from './select/index.js';
+export * from './shortcut-overlay/index.js';
 export * from './skeleton/index.js';
 export * from './skip-link/index.js';
 export * from './slider/index.js';

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_input-size: var(--input-size, var(--helix-size-control))}[part="field"] {align-items: center;background-color: var(--input-background-color, var(--helix-color-well));block-size: var(--_input-size);border: var(--helix-border-thin) solid var(--input-border-color, var(--helix-color-border));border-radius: var(--input-radius, var(--helix-radii-sm));color: var(--helix-color-foreground-muted);display: flex;gap: var(--helix-space-2xs);padding-inline: var(--input-padding-inline, 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"] {block-size: 100%}[part="control"]::-webkit-search-cancel-button {appearance: none}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-muted);flex: 0 0 auto}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5}:host([readonly]) [part="field"] {background-color: transparent}[part="clear"], [part~="reveal"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;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~="reveal"]:hover {color: var(--helix-color-foreground)}[part="clear"]:focus-visible, [part~="reveal"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part~="reveal"][aria-pressed="true"] {color: var(--helix-color-foreground)}@media print {:host {print-color-adjust: exact}}`);
+export const styles = createSheet(`:host {--_input-size: var(--input-size, var(--helix-size-control))}[part="field"] {align-items: center;background-color: var(--input-background-color, var(--helix-color-well));block-size: var(--_input-size);border: var(--helix-border-thin) solid var(--input-border-color, var(--helix-color-border));border-radius: var(--input-radius, var(--helix-radii-sm));color: var(--helix-color-foreground-muted);display: flex;gap: var(--helix-space-2xs);padding-inline: var(--input-padding-inline, 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"] {block-size: 100%}[part="control"]::-webkit-search-cancel-button {appearance: none}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-muted);flex: 0 0 auto}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5}:host([readonly]) [part="field"] {background-color: transparent}[part="clear"], [part~="reveal"], [part~="voice"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;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~="reveal"]:hover, [part~="voice"]:hover {color: var(--helix-color-foreground)}[part="clear"]:focus-visible, [part~="reveal"]: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~="reveal"][aria-pressed="true"] {color: var(--helix-color-foreground)}@media print {:host {print-color-adjust: exact}}`);

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

@@ -22,6 +22,7 @@ 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.

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

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessInput } from '@fusion.dev/helix-headless/input';
+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';
@@ -13,6 +14,7 @@ let HelixInput = class HelixInput extends HelixHeadlessInput {
         fieldFrameStyles,
         fieldStackedStyles,
         styles,
+        dictationStyles,
     ]; }
 };
 HelixInput = __decorate([

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

@@ -3,6 +3,7 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessLineChart } from '@fusion.dev/helix-headless/line-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 statusStyles } from '../../shared/chart/status.css.js';
 import { styles as terminusStyles } from '../../shared/chart/terminus.css.js';
 import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
@@ -16,6 +17,7 @@ let HelixLineChart = class HelixLineChart extends HelixHeadlessLineChart {
         tooltipStyles,
         terminusStyles,
         styles,
+        sonifyStyles,
     ]; }
 };
 __decorate([

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs)}[part="items"] {--option-radius: var(--helix-radii-none);background-color: var(--listbox-background-color, var(--helix-color-surface));border: var(--listbox-border, var(--helix-border-thin) solid var(--helix-color-border));border-radius: var(--helix-radii-sm);display: flex;flex-direction: column;gap: var(--helix-space-none);max-block-size: var(--listbox-max-block-size, 14rem);overflow-y: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none)}:host([layout="grid"]) [part="items"] {display: grid;grid-template-columns: repeat(auto-fill, minmax(min(var(--listbox-column-min-inline-size, 8rem), 100%), 1fr))}[part="items"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0}:host(:state(invalid)) [part="items"], :host(:state(invalid)) [part="items"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger)}:host(:disabled) {opacity: 0.5}:host(:disabled) [part="items"] {cursor: not-allowed}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-xs);--_collection-inset-inline: var(--helix-space-xs)}[part="error"] {color: var(--listbox-error-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding: var(--helix-space-xs);text-align: center}[part="filter-icon"] {align-items: center;color: var(--helix-color-foreground-subtle);display: inline-flex;flex: 0 0 auto}[part="filter-icon"] svg, slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight)}[part="search"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);padding: var(--helix-space-2xs);padding-inline-start: var(--helix-space-xs)}[part="search-field"] {appearance: none;flex: 1 1 auto;min-inline-size: 0;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));font-weight: var(--helix-weight-medium);inline-size: 100%;padding-inline: var(--helix-space-xs)}[part="search-field"]:focus-visible {outline: none}:host([loading]) [part="items"] {opacity: 0.5}@media print {:host {print-color-adjust: exact}}`);
+export const styles = createSheet(`:host {display: flex;flex-direction: column;gap: var(--helix-space-2xs)}[part="items"] {--option-radius: var(--helix-radii-none);background-color: var(--listbox-background-color, var(--helix-color-surface));border: var(--listbox-border, var(--helix-border-thin) solid var(--helix-color-border));border-radius: var(--helix-radii-sm);display: flex;flex-direction: column;gap: var(--helix-space-none);max-block-size: var(--listbox-max-block-size, 14rem);overflow-y: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-none)}:host([layout="grid"]) [part="items"] {display: grid;grid-template-columns: repeat(auto-fill, minmax(min(var(--listbox-column-min-inline-size, 8rem), 100%), 1fr))}[part="items"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0}:host(:state(invalid)) [part="items"], :host(:state(invalid)) [part="items"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger)}:host(:disabled) {opacity: 0.5}:host(:disabled) [part="items"] {cursor: not-allowed}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-xs);--_collection-inset-inline: var(--helix-space-xs)}[part="error"] {color: var(--listbox-error-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding: var(--helix-space-xs);text-align: center}[part="filter-icon"] {align-items: center;color: var(--helix-color-foreground-subtle);display: inline-flex;flex: 0 0 auto}[part="filter-icon"] svg, slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight)}[part="search"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);padding: var(--helix-space-2xs);padding-inline-start: var(--helix-space-xs)}[part="search-field"] {appearance: none;flex: 1 1 auto;min-inline-size: 0;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));font-weight: var(--helix-weight-medium);inline-size: 100%;padding-inline: var(--helix-space-xs)}[part="search-field"]:focus-visible {outline: none}[part~="voice"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;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~="voice"]:hover {color: var(--helix-color-foreground)}[part~="voice"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}:host([loading]) [part="items"] {opacity: 0.5}@media print {:host {print-color-adjust: exact}}`);

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

@@ -17,6 +17,7 @@ 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

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessListbox } from '@fusion.dev/helix-headless/listbox';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
+import { styles as dictationStyles } from '../../shared/dictation/dictation.css.js';
 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';
@@ -14,6 +15,7 @@ let HelixListbox = class HelixListbox extends HelixHeadlessListbox {
         fieldStyles,
         fieldStackedStyles,
         styles,
+        dictationStyles,
     ]; }
 };
 HelixListbox = __decorate([

package/dist/markdown/index.d.ts

@@ -0,0 +1,2 @@
+export { type MarkdownAlertKind, type MarkdownElement, type MarkdownNode, type MarkdownOptions, type MarkdownTags, MarkdownWriter, markdownNodes, markdownToHtml, } from '@fusion.dev/helix-headless/markdown';
+export * from './root/markdown-root.js';

package/dist/markdown/index.js

@@ -0,0 +1,2 @@
+export { MarkdownWriter, markdownNodes, markdownToHtml, } from '@fusion.dev/helix-headless/markdown';
+export * from './root/markdown-root.js';