@fusion.dev/helix 0.164.0 → 0.166.0

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

@@ -2,7 +2,8 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {--_code-block-size: var(--code-block-font-size, var(--helix-text-sm));--_code-block-leading: var(--code-block-line-height, var(--helix-leading-normal));--_code-block-face: var(--code-block-font-family, var(--helix-font-mono));--_code-block-copy-inset: calc(var(--helix-space-sm) + (1lh - var(--helix-size-control-sm)) / 2);--_code-block-gutter: calc(var(--helix-size-control-sm) + var(--_code-block-copy-inset) * 2);display: flex;flex-direction: column;}[part="frame"] {flex: 1;}:host(:not([diff])) [part="frame"] {font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}[part="header"] {align-items: center;backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-header-background-color, var(--helix-color-surface-raised));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-end-end-radius: var(--helix-radii-none);border-end-start-radius: var(--helix-radii-none);border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));display: flex;gap: var(--helix-space-sm);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="header"]:has(> [part="copy"]) {padding-block: var(--helix-space-2xs);padding-inline-end: var(--helix-space-2xs);}[part="label"] {color: var(--code-block-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow-wrap: anywhere;}[part="frame"] {position: relative;}[part="block"] {block-size: 100%;}[part="copy"] {--icon-button-size: var(--helix-size-control-sm);}[part="header"] > [part="copy"] {margin-inline-start: auto;}[part="actions"] {align-items: center;display: flex;gap: var(--helix-space-2xs);margin-inline-start: auto;}[part="header"]
 > :is([part="actions"], [part="wrap-toggle"])
 ~ :is([part="copy"], [part="wrap-toggle"]) {margin-inline-start: var(--helix-space-none);}[part="wrap-toggle"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-label-color, var(--helix-color-foreground-muted));cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);margin-inline-start: auto;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);}[part="wrap-toggle"]:hover,
-[part="wrap-toggle"][aria-pressed="true"] {color: var(--helix-color-foreground);}[part="wrap-toggle"][aria-pressed="true"] {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);}[part="wrap-toggle"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="frame"] > [part="copy"] {font-size: var(--_code-block-size);inset-block-start: var(--_code-block-copy-inset);inset-inline-end: var(--_code-block-copy-inset);line-height: var(--_code-block-leading);position: absolute;}[part="block"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);overflow-x: auto;padding-block: var(--helix-space-sm);padding-inline: var(--helix-space-md);}:host(:not([diff], [no-copy])) [part="frame"]:not([part="header"] + *) > [part="block"] {padding-inline-end: var(--_code-block-gutter);}[part="header"] + [part="frame"] [part="block"] {border-block-start-width: var(--helix-space-none);border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="code"] {color: var(--code-block-color, var(--helix-color-foreground));font-family: var(--_code-block-face);font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}:host(:not([diff])) [part="code"] {display: block;isolation: isolate;max-block-size: var(--code-block-max-block-size, none);overflow-x: auto;position: relative;}:host(:state(expanded)) [part="code"] {max-block-size: none;}[part="expand"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-expand-color, var(--helix-color-foreground-muted));cursor: pointer;font-size: var(--helix-text-sm);padding: var(--helix-space-xs);}[part="expand"]:hover {color: var(--helix-color-foreground);}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="block"]:focus-visible,
+[part="wrap-toggle"][aria-pressed="true"] {color: var(--helix-color-foreground);}[part="wrap-toggle"][aria-pressed="true"] {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);}[part="wrap-toggle"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="frame"] > [part="copy"] {font-size: var(--_code-block-size);inset-block-start: var(--_code-block-copy-inset);inset-inline-end: var(--_code-block-copy-inset);line-height: var(--_code-block-leading);position: absolute;}[part="block"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-radius: var(--code-block-radius, var(--helix-radii-lg));margin: var(--helix-space-none);overflow-x: auto;padding-block: var(--helix-space-sm);padding-inline: var(--helix-space-md);}:host(:not([diff], [no-copy])) [part="frame"]:not([part="header"] + *) > [part="block"] {padding-inline-end: var(--_code-block-gutter);}[part="header"] + [part="frame"] [part="block"] {border-block-start-width: var(--helix-space-none);border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="files"] {backdrop-filter: var(--code-block-backdrop, none);background-color: var(--code-block-header-background-color, var(--helix-color-surface-raised));border: var(--helix-border-thin) solid var(--code-block-border-color, var(--helix-color-border));border-block-end-width: var(--helix-space-none);border-start-end-radius: var(--code-block-radius, var(--helix-radii-lg));border-start-start-radius: var(--code-block-radius, var(--helix-radii-lg));display: flex;overflow-x: auto;padding-inline: var(--helix-space-xs);}[part="file-tab"] {background-color: transparent;border: none;border-block-end: var(--helix-border-thick) solid transparent;color: var(--code-block-label-color, var(--helix-color-foreground-muted));cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-sm);white-space: nowrap;}[part="file-tab"]:hover,
+[part="file-tab"][aria-selected="true"] {color: var(--helix-color-foreground);}[part="file-tab"][aria-selected="true"] {border-block-end-color: var(--helix-color-accent);}[part="file-tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host(:state(tabbed)) :is([part="header"], [part="block"]) {border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}[part="code"] {color: var(--code-block-color, var(--helix-color-foreground));font-family: var(--_code-block-face);font-size: var(--_code-block-size);line-height: var(--_code-block-leading);}:host(:not([diff])) [part="code"] {display: block;isolation: isolate;max-block-size: var(--code-block-max-block-size, none);overflow-x: auto;position: relative;}:host(:state(expanded)) [part="code"] {max-block-size: none;}[part="expand"] {all: unset;box-sizing: border-box;border-radius: var(--helix-radii-sm);color: var(--code-block-expand-color, var(--helix-color-foreground-muted));cursor: pointer;font-size: var(--helix-text-sm);padding: var(--helix-space-xs);}[part="expand"]:hover {color: var(--helix-color-foreground);}[part="expand"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="block"]:focus-visible,
 [part="code"]:focus-visible,
 [part="old"]:focus-visible,
 [part="new"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host([wrap]:not([diff])) [part="code"] {overflow-wrap: anywhere;white-space: pre-wrap;}[part="mark"] {background-color: var(

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

@@ -1,7 +1,7 @@
 import { HelixHeadlessDateInput } from '@fusion.dev/helix-headless/date-input';
 import type { CSSResultGroup } from 'lit';
 import '../../date-picker/index.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 /**
  * @summary A date, typed or picked from a calendar.
  *

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDateInput } from '@fusion.dev/helix-headless/date-input';
 import '../../date-picker/index.js';
-import '../../tag/index.js';
+import '../../tag/root/index.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 fieldSegmentsStyles } from '../../shared/field/field-segments.css.js';

package/dist/element-events.generated.js

@@ -32,7 +32,14 @@ registerElementEvents({
     'helix-chat-message': ['helix-send'],
     'helix-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-checkbox-group': ['change', 'helix-before-change', 'input'],
-    'helix-code-block': ['helix-before-toggle', 'helix-toggle'],
+    'helix-code-block': [
+        'change',
+        'helix-before-change',
+        'helix-before-toggle',
+        'helix-copy',
+        'helix-copy-error',
+        'helix-toggle',
+    ],
     'helix-color-input': [
         'change',
         'helix-before-change',
@@ -182,7 +189,13 @@ registerElementEvents({
     'helix-map-route': ['helix-map-part-change'],
     'helix-map-terrain': ['helix-map-part-change'],
     'helix-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
-    'helix-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
+    'helix-menu': [
+        'helix-before-close',
+        'helix-before-open',
+        'helix-filter',
+        'helix-select',
+        'toggle',
+    ],
     'helix-menu-item': ['helix-before-toggle', 'helix-select'],
     'helix-meter': ['helix-band'],
     'helix-notification': ['helix-dismiss', 'helix-read'],

package/dist/menu/item/menu-item.css.js

@@ -6,6 +6,9 @@ auto
 var(--menu-item-end, 0px);min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-sm);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);user-select: none;}[part="item"]:hover {background-color: var(
 --menu-item-hover-color,
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);}:host(:state(highlighted)) [part="item"] {background-color: var(
+--menu-item-hover-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
 );}[part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="item"][aria-disabled="true"] {cursor: not-allowed;opacity: 0.5;}[part="start"] {--icon-size: var(--helix-size-icon);align-items: center;box-sizing: border-box;color: var(--helix-color-foreground-subtle);display: flex;justify-content: center;padding-inline-end: var(--helix-space-xs);min-block-size: var(--helix-size-icon);}[part="start"] {grid-column: 1;}[part="item"] > slot:not([name]) {display: block;grid-column: 2;min-inline-size: 0;}slot[name="description"] {color: var(--menu-item-description-color, var(--helix-color-foreground-subtle));display: block;font-weight: var(--helix-weight-regular);grid-column: 2;grid-row: 2;min-inline-size: 0;padding-block-end: var(--helix-space-2xs);}slot[name="description"][data-empty] {display: none;}[part="end"] {align-items: center;color: var(--menu-item-detail-color, var(--helix-color-foreground-subtle));display: flex;gap: var(--helix-space-2xs);grid-column: 3;padding-inline-start: var(--helix-space-sm);}[part="end"][data-empty] {display: none;}[part="mark"],
 slot[name="check"]::slotted(*),
 slot[name="chevron"]::slotted(*) {grid-column: 4;grid-row: 1;}[part="start"][data-empty] {display: none;}[part="mark"],

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents;}[part="surface"] {--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);--menu-item-start: 0px;--menu-item-end: 0px;max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));overflow-y: auto;--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));min-inline-size: var(--menu-min-inline-size, 12rem);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none);}:host(:state(start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs));}:host(:state(mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs));}[part="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%);}[part="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%);}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);margin-block-end: var(--helix-space-2xs);padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs);}[part="back"] {align-items: center;background: none;border: none;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;justify-content: center;block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));padding: var(--helix-space-none);}[part="back"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="back"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="back"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="title"] {color: var(--helix-color-foreground);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);}::slotted(helix-divider) {margin-block: var(--helix-space-2xs);}[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {display: none;}:host([loading]) [part="surface"] {opacity: 0.5;}@media print {:host {display: none;}}`);
+export const styles = createSheet(`:host {display: contents;}[part="surface"] {--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);--menu-item-start: 0px;--menu-item-end: 0px;max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));overflow-y: auto;--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));--_floating-border-color: var(--menu-border-color, var(--helix-color-border));--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));min-inline-size: var(--menu-min-inline-size, 12rem);padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-none);}:host(:state(start)) [part="surface"] {--menu-item-start: calc(var(--helix-size-icon) + var(--helix-space-xs));}:host(:state(mark)) [part="surface"] {--menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs));}[part="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%);}[part="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%);}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);margin-block-end: var(--helix-space-2xs);padding: var(--helix-space-2xs) var(--helix-space-xs) var(--helix-space-xs);}[part="back"] {align-items: center;background: none;border: none;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;justify-content: center;block-size: calc(var(--helix-size-icon) + var(--helix-space-xs));inline-size: calc(var(--helix-size-icon) + var(--helix-space-xs));padding: var(--helix-space-none);}[part="back"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="back"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="back"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="title"] {color: var(--helix-color-foreground);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);}::slotted(helix-divider) {margin-block: var(--helix-space-2xs);}[part="surface"][data-drilled] slot::slotted(:not(helix-menu-item)) {display: none;}[part="search-field"] {appearance: none;background-color: var(--menu-background-color, var(--helix-color-surface-overlay));border: none;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;color: var(--helix-color-foreground);display: block;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);inline-size: 100%;inset-block-start: calc(var(--helix-space-xs) * -1);margin-block: calc(var(--helix-space-xs) * -1) var(--helix-space-xs);min-block-size: var(--helix-size-control);padding-inline: var(--helix-space-sm);position: sticky;z-index: 1;}[part="search-field"]:focus-visible {outline: none;}[part="surface"][data-filtered] slot::slotted(helix-divider) {display: none;}:host([loading]) [part="surface"] {opacity: 0.5;}@media print {:host {display: none;}}`);

package/dist/option/root/index.d.ts

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

package/dist/option/root/index.js

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

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

@@ -1,4 +1,4 @@
-import { HelixHeadlessOption } from '@fusion.dev/helix-headless/option';
+import { HelixHeadlessOption } from '@fusion.dev/helix-headless/option/root';
 import type { CSSResultGroup } from 'lit';
 /**
  * @summary One choice in a listbox.

package/dist/option/root/option-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement } from '@fusion.dev/helix-core';
-import { HelixHeadlessOption } from '@fusion.dev/helix-headless/option';
+import { HelixHeadlessOption } from '@fusion.dev/helix-headless/option/root';
 import { styles } from './option-root.css.js';
 let HelixOption = class HelixOption extends HelixHeadlessOption {
     static { this.styles = styles; }

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

@@ -10,6 +10,9 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * preview do not reference each other, so you can replace either one or use it
  * alone.
  *
+ * The preview runs an edit once typing has rested for `preview-delay`, 300
+ * milliseconds by default, so a word typed reloads it once. A pane's text when the sandbox starts reaches it at once.
+ *
  * The event carries the pane's `name`, so one sandbox can hold several panes.
  * `html` sets the preview's markup, `css` sets its stylesheet, and `js` sets
  * a script that runs as a module after the markup. The sandbox ignores a pane
@@ -34,6 +37,16 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * like `helix-sandbox-source`, and the sandbox reads its `value` to seed the
  * preview. Dispatch `helix-caret` from it too for the status bar's position.
  *
+ * Sandbox is styled only and has behavior, as `Aura` is. Its behavior is the
+ * hand-off from a source pane to a preview frame, which works with any pane
+ * that sends `helix-before-edit`, and what it draws is the layout around them:
+ * dividers, file tabs, and a panel. A page that wants another look slots its
+ * own panes and keeps the hand-off, so there is nothing for a headless version
+ * to hold.
+ *
+ * A development build warns about a source pane with no `label` and no `name`,
+ * whose file tab would have no words.
+ *
  * On a focused divider, the arrow keys move it, and `Home` and `End` move it
  * to its ends. `Enter` on the panes divider shuts the lead pane, and pressed
  * again it opens the pane where it was. `Enter` on the panel divider shuts the
@@ -170,6 +183,19 @@ export declare class HelixSandbox extends HelixElement {
      * Height of the panel, in pixels.
      */
     panelSize: number;
+    /**
+     * How long typing rests before the preview runs the new source, in
+     * milliseconds, as Sandpack's `recompileDelay` does. The preview reloads its
+     * frame on each run, so a word typed runs it once. `0` runs it on every
+     * edit.
+     */
+    previewDelay: number;
+    /** The edits waiting out `previewDelay`, the last text of each pane. */
+    private readonly edits;
+    /** The wait before the edits reach the previews. */
+    private readonly resting;
+    /** Hands the waiting edits to the previews. */
+    private readonly runEdits;
     /**
      * The name of the divider between the panes, read by screen readers.
      * `{pane}` is the lead pane, `source` or `preview`, whose share the

package/dist/sandbox/root/sandbox-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, formatWords, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, HelixPanelResizeEvent, HelixSplitEvent, inlineStep, requestChange, requestValue, words, } from '@fusion.dev/helix-core';
+import { auditName, customElement, DelayController, formatWords, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, HelixPanelResizeEvent, HelixSplitEvent, inlineStep, requestChange, requestValue, words, } from '@fusion.dev/helix-core';
 import '../../splitter/index.js';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -33,6 +33,15 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         this.panelCollapsedSize = 0;
         this.panelLabel = 'Resize panel';
         this.panelSize = DEFAULT_PANEL;
+        this.previewDelay = 300;
+        this.edits = new Map();
+        this.resting = new DelayController(this, { renders: false });
+        this.runEdits = () => {
+            for (const [name, value] of this.edits) {
+                this.write(name, value, false);
+            }
+            this.edits.clear();
+        };
         this.separatorLabel = '{pane, select, preview {Resize preview pane} other {Resize source pane}}';
         this.split = DEFAULT_SPLIT;
         this.hasPanel = false;
@@ -76,8 +85,15 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
                 return;
             }
             queueMicrotask(() => {
-                if (!event.defaultPrevented) {
-                    this.write(name, value, false);
+                if (event.defaultPrevented) {
+                    return;
+                }
+                this.edits.set(name, value);
+                if (this.previewDelay > 0) {
+                    this.resting.start(this.previewDelay, this.runEdits);
+                }
+                else {
+                    this.runEdits();
                 }
             });
         };
@@ -378,6 +394,12 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         if (changed.has('files') || changed.has('file')) {
             this.showFile();
         }
+        if (this.files.length > 0) {
+            auditName(this, () => {
+                const tabs = [...this.renderRoot.querySelectorAll('[part="file"]')];
+                return tabs.find((tab) => !tab.textContent?.trim()) ?? tabs[0];
+            }, 'Give each source pane a `label` or a `name`, which its file tab shows.');
+        }
     }
     renderPane(name, at) {
         const slot = html `<slot name=${name} @slotchange=${this.seed}></slot>`;
@@ -450,6 +472,9 @@ __decorate([
 __decorate([
     property({ attribute: 'panel-size', type: Number })
 ], HelixSandbox.prototype, "panelSize", void 0);
+__decorate([
+    property({ attribute: 'preview-delay', type: Number })
+], HelixSandbox.prototype, "previewDelay", void 0);
 __decorate([
     words,
     property({ attribute: 'separator-label' })

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

@@ -59,6 +59,12 @@ export declare class HelixSandboxSource extends HelixElement {
      * The editable region's name, read by screen readers.
      */
     fieldLabel: string;
+    /**
+     * The editable region's name where the pane has a `label`, so each file's
+     * field says which file it holds. `{field}` is `field-label` and `{name}`
+     * the pane's `label`.
+     */
+    fieldNameLabel: string;
     /**
      * The field's description, read by screen readers while Tab indents.
      */

package/dist/sandbox/source/sandbox-source.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, HelixElement, onUnlessFalse, restoreValue, words, } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, HelixElement, onUnlessFalse, restoreValue, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { drawnRuns } from '../tokens.js';
@@ -14,6 +14,7 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     constructor() {
         super(...arguments);
         this.fieldLabel = 'Example source';
+        this.fieldNameLabel = '{field}, {name}';
         this.keysDescription = 'Tab inserts two spaces. To leave, press Escape and then Tab, or press Shift+Tab to go back.';
         this.label = '';
         this.name = 'html';
@@ -94,7 +95,9 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     renderField() {
         return html `<textarea
       part="source"
-      aria-label=${this.fieldLabel}
+      aria-label=${this.label
+            ? formatWords(this, 'fieldNameLabel', { field: this.fieldLabel, name: this.label })
+            : this.fieldLabel}
       aria-describedby=${this.tabIndents ? 'keys' : nothing}
       spellcheck="false"
       .value=${this.value}
@@ -112,6 +115,10 @@ __decorate([
     words,
     property({ attribute: 'field-label' })
 ], HelixSandboxSource.prototype, "fieldLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'field-name-label' })
+], HelixSandboxSource.prototype, "fieldNameLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'keys-description' })

package/dist/tag/root/index.d.ts

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

package/dist/tag/root/index.js

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

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

@@ -1,4 +1,4 @@
-import { HelixHeadlessTag } from '@fusion.dev/helix-headless/tag';
+import { HelixHeadlessTag } from '@fusion.dev/helix-headless/tag/root';
 import type { CSSResultGroup } from 'lit';
 /**
  * @summary A short label that adds metadata to content.

package/dist/tag/root/tag-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement } from '@fusion.dev/helix-core';
-import { HelixHeadlessTag } from '@fusion.dev/helix-headless/tag';
+import { HelixHeadlessTag } from '@fusion.dev/helix-headless/tag/root';
 import { property } from 'lit/decorators.js';
 import { styles } from './tag-root.css.js';
 let HelixTag = class HelixTag extends HelixHeadlessTag {

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

@@ -1,6 +1,6 @@
 import { HelixHeadlessTimeInput } from '@fusion.dev/helix-headless/time-input';
 import type { CSSResultGroup } from 'lit';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 import '../../time-picker/index.js';
 /**
  * @summary A field for a time, typed or picked from a list.

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTimeInput } from '@fusion.dev/helix-headless/time-input';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 import '../../time-picker/index.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';

package/dist/time-picker/root/time-picker-root.d.ts

@@ -1,7 +1,7 @@
 import { HelixHeadlessTimePicker } from '@fusion.dev/helix-headless/time-picker';
 import type { CSSResultGroup } from 'lit';
 import '../../listbox/index.js';
-import '../../option/index.js';
+import '../../option/root/index.js';
 /**
  * @summary A control for choosing a time from a list or from wheels.
  *

package/dist/time-picker/root/time-picker-root.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTimePicker } from '@fusion.dev/helix-headless/time-picker';
 import '../../listbox/index.js';
-import '../../option/index.js';
+import '../../option/root/index.js';
 import { styles } from './time-picker-root.css.js';
 let HelixTimePicker = class HelixTimePicker extends HelixHeadlessTimePicker {
     static { this.tier = 'helix-'; }