@fusion.dev/helix 0.146.0 → 0.147.0

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

@@ -1,213 +1,10 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_radio-size: var(--radio-size, var(--helix-size-checkbox));
-display: block;
-}
-
-[part="item"] {
-all: unset;
-align-items: center;
-box-sizing: border-box;
-cursor: pointer;
-display: inline-flex;
-gap: var(--helix-space-xs);
-}
-
-:host([disabled]) [part="item"] {
-cursor: default;
-}
-
-:host([disabled]) {
-opacity: 0.5;
-}
-
-[part="box"] {
-
-background-color: var(--radio-background-color, var(--helix-color-background));
-block-size: var(--_radio-size);
-border: var(--helix-border-thin) solid var(--radio-border-color, var(--helix-color-border));
-
-border-radius: var(--helix-radii-full);
-display: grid;
-flex: 0 0 auto;
-inline-size: var(--_radio-size);
-place-items: center;
-transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:not([disabled])) [part="item"]:hover [part="box"] {
-border-color: var(--radio-border-color, var(--helix-color-foreground-muted));
-}
-
-:host(:state(selected)) [part="box"] {
-border-color: var(--radio-border-color, var(--helix-color-foreground));
-}
-
-[part="box"]::after {
-background-color: var(--radio-mark-color, var(--helix-color-foreground));
-block-size: calc(var(--_radio-size) * 0.4);
-border-radius: var(--helix-radii-full);
-content: "";
-inline-size: calc(var(--_radio-size) * 0.4);
-
-scale: 0;
-transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
-}
-
-:host(:state(selected)) [part="box"]::after {
-scale: 1;
-}
-
-:host(:state(has-indicator)) [part="box"]::after {
-content: none;
-}
-
-slot[name="indicator"]::slotted(*) {
-block-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));
-color: var(--radio-mark-color, var(--helix-color-foreground));
-inline-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));
-scale: 0;
-transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
-}
-
-:host(:state(selected)) slot[name="indicator"]::slotted(*) {
-scale: 1;
-}
-
-[part="item"]:focus-visible [part="box"] {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="label"] {
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-line-height: var(--helix-leading-tight);
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) {
-display: block;
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) [part="item"] {
-align-items: start;
-background-color: var(--radio-card-background-color, var(--helix-color-surface));
-border: var(--helix-border-thin) solid var(--radio-card-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-display: flex;
-gap: var(--helix-space-sm);
-inline-size: 100%;
-padding: var(--radio-card-padding, var(--helix-space-md));
-transition:
+export const styles = createSheet(`:host {--_radio-size: var(--radio-size, var(--helix-size-checkbox));display: block;}[part="item"] {all: unset;align-items: center;box-sizing: border-box;cursor: pointer;display: inline-flex;gap: var(--helix-space-xs);}:host([disabled]) [part="item"] {cursor: default;}:host([disabled]) {opacity: 0.5;}[part="box"] {background-color: var(--radio-background-color, var(--helix-color-background));block-size: var(--_radio-size);border: var(--helix-border-thin) solid var(--radio-border-color, var(--helix-color-border));border-radius: var(--helix-radii-full);display: grid;flex: 0 0 auto;inline-size: var(--_radio-size);place-items: center;transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:not([disabled])) [part="item"]:hover [part="box"] {border-color: var(--radio-border-color, var(--helix-color-foreground-muted));}:host(:state(selected)) [part="box"] {border-color: var(--radio-border-color, var(--helix-color-foreground));}[part="box"]::after {background-color: var(--radio-mark-color, var(--helix-color-foreground));block-size: calc(var(--_radio-size) * 0.4);border-radius: var(--helix-radii-full);content: "";inline-size: calc(var(--_radio-size) * 0.4);scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);}:host(:state(selected)) [part="box"]::after {scale: 1;}:host(:state(has-indicator)) [part="box"]::after {content: none;}slot[name="indicator"]::slotted(*) {block-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));color: var(--radio-mark-color, var(--helix-color-foreground));inline-size: var(--radio-indicator-size, calc(var(--_radio-size) * 0.75));scale: 0;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);}:host(:state(selected)) slot[name="indicator"]::slotted(*) {scale: 1;}[part="item"]:focus-visible [part="box"] {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="label"] {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-tight);}:host(:is([separation="filled"], [separation="outlined"])) {display: block;}:host(:is([separation="filled"], [separation="outlined"])) [part="item"] {align-items: start;background-color: var(--radio-card-background-color, var(--helix-color-surface));border: var(--helix-border-thin) solid var(--radio-card-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-sm);inline-size: 100%;padding: var(--radio-card-padding, var(--helix-space-md));transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host([separation="filled"]) [part="item"] {
-border-color: transparent;
-}
-
-:host(:not([disabled]):is([separation="filled"], [separation="outlined"])) [part="item"]:hover {
-border-color: var(--helix-color-foreground-muted);
-}
-
-:host(:is([separation="filled"], [separation="outlined"]):state(selected)) [part="item"] {
-background-color: var(--helix-color-surface-raised);
-border-color: var(--helix-color-primary);
-box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-primary);
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) [part="item"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host(:is([separation="filled"], [separation="outlined"]))
+border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host([separation="filled"]) [part="item"] {border-color: transparent;}:host(:not([disabled]):is([separation="filled"], [separation="outlined"])) [part="item"]:hover {border-color: var(--helix-color-foreground-muted);}:host(:is([separation="filled"], [separation="outlined"]):state(selected)) [part="item"] {background-color: var(--helix-color-surface-raised);border-color: var(--helix-color-primary);box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-primary);}:host(:is([separation="filled"], [separation="outlined"])) [part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:is([separation="filled"], [separation="outlined"]))
 [part="item"]:focus-visible
-[part="box"] {
-outline: none;
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) [part="label"] {
-font-size: var(--helix-text-md);
-line-height: var(--helix-leading-normal);
-}
-
-:host(:is([separation="filled"], [separation="outlined"])) [part="box"] {
-font-size: var(--helix-text-md);
-line-height: var(--helix-leading-normal);
-margin-block-start: calc((1lh - var(--_radio-size)) / 2);
-}
-
-:host(:is([separation="filled"], [separation="outlined"])[hide-control]) [part="box"] {
-display: none;
-}
-
-:host([variant="chip"]) [part="box"] {
-display: none;
-}
-
-:host([variant="chip"]) [part="item"] {
-
---_radio-chip-lift: 2px;
-
-align-items: center;
-background-color: var(--helix-color-surface-sunken);
-block-size: var(--radio-chip-size, var(--helix-size-control));
-border-radius: var(--helix-radii-full);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-inline-size: var(--radio-chip-size, var(--helix-size-control));
-justify-content: center;
-padding: 0;
-transition:
+[part="box"] {outline: none;}:host(:is([separation="filled"], [separation="outlined"])) [part="label"] {font-size: var(--helix-text-md);line-height: var(--helix-leading-normal);}:host(:is([separation="filled"], [separation="outlined"])) [part="box"] {font-size: var(--helix-text-md);line-height: var(--helix-leading-normal);margin-block-start: calc((1lh - var(--_radio-size)) / 2);}:host(:is([separation="filled"], [separation="outlined"])[hide-control]) [part="box"] {display: none;}:host([variant="chip"]) [part="box"] {display: none;}:host([variant="chip"]) [part="item"] {--_radio-chip-lift: 2px;align-items: center;background-color: var(--helix-color-surface-sunken);block-size: var(--radio-chip-size, var(--helix-size-control));border-radius: var(--helix-radii-full);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--radio-chip-size, var(--helix-size-control));justify-content: center;padding: 0;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 box-shadow var(--helix-duration-fast) var(--helix-easing-standard),
-translate var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host([variant="chip"]:state(selected)) [part="item"] {
-background-color: var(--helix-color-surface-inverse);
-box-shadow: var(--helix-shadow-md);
-color: var(--helix-color-foreground-inverse);
-translate: 0 calc(var(--_radio-chip-lift) * -1);
-}
-
-:host(:not([disabled])[variant="chip"]) [part="item"]:hover {
-translate: 0 calc(var(--_radio-chip-lift) / -2);
-}
-
-:host([variant="chip"]) [part="item"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([variant="chip"]) [part="label"] {
-clip-path: inset(50%);
-block-size: 1px;
-inline-size: 1px;
-overflow: hidden;
-position: absolute;
-white-space: nowrap;
-}
-
-@media (prefers-reduced-motion: reduce) {
-:host([variant="chip"]) [part="item"] {
-transition: none;
-}
-
-:host([variant="chip"]:state(selected)) [part="item"],
-:host(:not([disabled])[variant="chip"]) [part="item"]:hover {
-translate: none;
-}
-}
-
-@media print {
-:host {
-box-shadow: none;
-print-color-adjust: exact;
-}
-}`);
+translate var(--helix-duration-fast) var(--helix-easing-standard);}:host([variant="chip"]:state(selected)) [part="item"] {background-color: var(--helix-color-surface-inverse);box-shadow: var(--helix-shadow-md);color: var(--helix-color-foreground-inverse);translate: 0 calc(var(--_radio-chip-lift) * -1);}:host(:not([disabled])[variant="chip"]) [part="item"]:hover {translate: 0 calc(var(--_radio-chip-lift) / -2);}:host([variant="chip"]) [part="item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([variant="chip"]) [part="label"] {clip-path: inset(50%);block-size: 1px;inline-size: 1px;overflow: hidden;position: absolute;white-space: nowrap;}@media (prefers-reduced-motion: reduce) {:host([variant="chip"]) [part="item"] {transition: none;}:host([variant="chip"]:state(selected)) [part="item"],
+:host(:not([disabled])[variant="chip"]) [part="item"]:hover {translate: none;}}@media print {:host {box-shadow: none;print-color-adjust: exact;}}`);

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

@@ -1,126 +1,13 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_rating-mark-size: var(--rating-size, var(--helix-size-icon-md));
---_rating-mark-gap: var(--rating-gap, var(--helix-space-2xs));
-
-display: inline-flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-}
-
-[part="field"] {
-align-items: center;
-display: inline-flex;
-gap: var(--helix-space-xs);
-}
-
-[part="marks"] {
-display: inline-flex;
-position: relative;
-
-touch-action: pan-y;
-}
-
-[part="track"],
-[part="fill"] {
-display: inline-flex;
-gap: var(--_rating-mark-gap);
-}
-
-[part="track"] {
-color: var(--rating-empty-color, var(--helix-color-border));
-}
-
-[part="fill"] {
-color: var(--rating-color, var(--helix-color-warning));
-inline-size: calc(
+export const styles = createSheet(`:host {--_rating-mark-size: var(--rating-size, var(--helix-size-icon-md));--_rating-mark-gap: var(--rating-gap, var(--helix-space-2xs));display: inline-flex;flex-direction: column;gap: var(--helix-space-2xs);}[part="field"] {align-items: center;display: inline-flex;gap: var(--helix-space-xs);}[part="marks"] {display: inline-flex;position: relative;touch-action: pan-y;}[part="track"],
+[part="fill"] {display: inline-flex;gap: var(--_rating-mark-gap);}[part="track"] {color: var(--rating-empty-color, var(--helix-color-border));}[part="fill"] {color: var(--rating-color, var(--helix-color-warning));inline-size: calc(
 var(--rating-full, 0) *
 (var(--_rating-mark-size) + var(--_rating-mark-gap)) +
 var(--rating-part, 0) *
 var(--_rating-mark-size)
-);
-inset-block: 0;
-inset-inline-start: 0;
-overflow: hidden;
-position: absolute;
-}
-
-[part="mark"] {
---_rating-star: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.4l6.5-.9z"/></svg>');
-
-background-color: currentcolor;
-block-size: var(--_rating-mark-size);
-flex: 0 0 auto;
-inline-size: var(--_rating-mark-size);
-mask-image: var(--rating-mark, var(--_rating-star));
-mask-position: center;
-mask-repeat: no-repeat;
-mask-size: contain;
-}
-
-[part="option"] {
-all: unset;
-box-sizing: border-box;
-
-cursor: pointer;
-inset-block: 0;
-position: absolute;
-}
-
-[part="option"] {
---_rating-pitch: calc((100% + var(--_rating-mark-gap)) / var(--rating-steps, 1));
-
-inline-size: var(--_rating-pitch);
-inset-inline-start: calc(
+);inset-block: 0;inset-inline-start: 0;overflow: hidden;position: absolute;}[part="mark"] {--_rating-star: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.4l6.5-.9z"/></svg>');background-color: currentcolor;block-size: var(--_rating-mark-size);flex: 0 0 auto;inline-size: var(--_rating-mark-size);mask-image: var(--rating-mark, var(--_rating-star));mask-position: center;mask-repeat: no-repeat;mask-size: contain;}[part="option"] {all: unset;box-sizing: border-box;cursor: pointer;inset-block: 0;position: absolute;}[part="option"] {--_rating-pitch: calc((100% + var(--_rating-mark-gap)) / var(--rating-steps, 1));inline-size: var(--_rating-pitch);inset-inline-start: calc(
 (var(--rating-step, 1) - 1) *
 var(--_rating-pitch) -
 var(--_rating-mark-gap) /
 2
-);
-}
-
-[part="value"] {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-sm);
-font-variant-numeric: tabular-nums;
-line-height: 1;
-}
-
-:host([shape="dots"]) {
---_rating-mark-size: var(--rating-size, var(--helix-size-icon-sm));
-}
-
-:host([shape="dots"]) [part="mark"] {
-border-radius: var(--helix-radii-full);
-mask-image: none;
-}
-
-[part="option"]:focus-visible {
-border-radius: var(--helix-radii-sm);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host(:disabled) [part="option"] {
-cursor: not-allowed;
-}
-
-:host(:disabled) [part="marks"] {
-opacity: 0.5;
-}
-
-:host([readonly]) [part="marks"] {
-cursor: default;
-}
-
-[data-slotted] [part="mark"] {
-background-color: transparent;
-mask-image: none;
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+);}[part="value"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);font-variant-numeric: tabular-nums;line-height: 1;}:host([shape="dots"]) {--_rating-mark-size: var(--rating-size, var(--helix-size-icon-sm));}:host([shape="dots"]) [part="mark"] {border-radius: var(--helix-radii-full);mask-image: none;}[part="option"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host(:disabled) [part="option"] {cursor: not-allowed;}:host(:disabled) [part="marks"] {opacity: 0.5;}:host([readonly]) [part="marks"] {cursor: default;}[data-slotted] [part="mark"] {background-color: transparent;mask-image: none;}@media print {:host {print-color-adjust: exact;}}`);

package/dist/sandbox/frame.d.ts

@@ -51,7 +51,8 @@ export declare const loggedText: (value: unknown) => string;
  * - Writes each `helix-preview-render` into the root: the markup, the
  *   stylesheet, the direction, the layout and the color mode. Scripts in the
  *   markup run.
- * - Posts every console call and uncaught error as `helix-preview-console`.
+ * - Posts every console call and uncaught error as `helix-preview-console`,
+ *   an uncaught one marked `uncaught`, which marks the preview `failed`.
  * - Posts `helix-preview-size` whenever what was drawn changes height.
  * - Posts `helix-preview-press` on every press, so menus outside close.
  *

package/dist/sandbox/frame.js

@@ -71,7 +71,7 @@ export const servePreview = (options = {}) => {
         };
     }
     const failed = (event) => {
-        post({ level: 'error', text: event.message, type: 'helix-preview-console' });
+        post({ level: 'error', text: event.message, type: 'helix-preview-console', uncaught: true });
     };
     const measure = () => {
         const boxes = [...root.children].flatMap(drawn);

package/dist/sandbox/index.d.ts

@@ -18,5 +18,5 @@ export * from './root/sandbox-root.js';
 export * from './source/sandbox-source.js';
 export * from './status-bar/sandbox-status-bar.js';
 export * from './terminal/sandbox-terminal.js';
-export type { SandboxHighlight, SandboxToken } from './tokens.js';
+export type { SandboxToken, SandboxTokenizer } from './tokens.js';
 export * from './toolbar/sandbox-toolbar.js';

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

@@ -1,13 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-min-block-size: 0;
-}
-
-[part="frame"] {
-background-color: var(--helix-color-background);
-block-size: 100%;
-border: none;
-display: block;
-inline-size: 100%;
-}`);
+export const styles = createSheet(`:host {display: block;min-block-size: 0;}[part="frame"] {background-color: var(--helix-color-background);block-size: 100%;border: none;display: block;inline-size: 100%;}`);

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

@@ -19,6 +19,8 @@ export interface PreviewConsole {
     level: 'log' | 'info' | 'warn' | 'error';
     text: string;
     type: 'helix-preview-console';
+    /** Set for an error the example threw and did not catch, which marks the preview `failed`. */
+    uncaught?: boolean;
 }
 /**
  * A press inside the frame, which is the one event the page cannot see for
@@ -57,6 +59,13 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * let a document on the same origin remove its own sandbox, which is the same
  * as having none.
  *
+ * **A preview says where it is.** It is `:state(loading)` from the moment it
+ * has a `src` until that document can take the example, and again through
+ * `reload()`. It is `:state(failed)` once the example throws an error it does
+ * not catch, until the next source is sent, which a frame on `servePreview`
+ * reports. A page draws its own spinner or message from either, such as a
+ * sibling shown by `helix-sandbox-preview:state(failed) + .message`.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Result, Output
@@ -66,6 +75,9 @@ export type PreviewMessage = PreviewConsole | PreviewPress | PreviewReady | Prev
  * @event {HelixResizeEvent} helix-resize - Fired when the height of the frame's content changes, with the new height.
  *
  * @csspart frame - The iframe.
+ *
+ * @cssstate failed - Since the example threw an error it did not catch, until the next source is sent.
+ * @cssstate loading - While the frame's document loads, until it can take the example.
  */
 export declare class HelixSandboxPreview extends HelixElement {
     /**
@@ -127,7 +139,9 @@ export declare class HelixSandboxPreview extends HelixElement {
     private ready;
     private get frame();
     /**
-     * The frame's document has finished loading, so its listener exists.
+     * The frame's document has finished loading, so its listener exists, the
+     * example is sent and the preview is no longer `loading`. The frame saying
+     * `helix-preview-ready` lands here too.
      *
      * **The announcement is one shot and the parent can miss it.** The frame posts
      * `helix-preview-ready` at the end of its own module evaluation and never
@@ -180,8 +194,8 @@ export declare class HelixSandboxPreview extends HelixElement {
      * thing on the page already entitled to both.
      */
     private static readonly target;
-    /** Set while a coalesced send is waiting, so only one is ever queued. */
-    private pending;
+    /** Holds a coalesced send, so only one is ever queued, and drops it on disconnect. */
+    private readonly settle;
     /**
      * Sends once the typing stops, replacing anything already waiting.
      *
@@ -211,6 +225,8 @@ export declare class HelixSandboxPreview extends HelixElement {
      * new document announces itself the same way the first one did.
      */
     reload(): void;
+    /** A new document is on its way, so nothing is sent until it listens, and nothing has failed in it. */
+    private unready;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     static styles: CSSResultGroup;

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixSandboxPreview_1;
-import { customElement, HelixConsoleEvent, HelixElement, HelixResizeEvent, } from '@fusion.dev/helix-core';
+import { customElement, DelayController, HelixConsoleEvent, HelixElement, HelixResizeEvent, } from '@fusion.dev/helix-core';
 const SETTLE = 120;
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -20,6 +20,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         this.ready = false;
         this.handleFrameLoad = () => {
             this.ready = true;
+            this.toggleState('loading', false);
             this.send();
         };
         this.handleMessage = (event) => {
@@ -27,12 +28,14 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
                 return;
             }
             if (event.data?.type === 'helix-preview-ready') {
-                this.ready = true;
-                this.send();
+                this.handleFrameLoad();
                 return;
             }
             if (event.data?.type === 'helix-preview-console') {
                 this.dispatchEvent(new HelixConsoleEvent({ level: event.data.level, text: event.data.text }));
+                if (event.data.uncaught) {
+                    this.toggleState('failed', true);
+                }
             }
             if (event.data?.type === 'helix-preview-press') {
                 this.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }));
@@ -41,6 +44,7 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
                 this.dispatchEvent(new HelixResizeEvent({ size: event.data.size }));
             }
         };
+        this.settle = new DelayController(this);
     }
     static { HelixSandboxPreview_1 = this; }
     get frame() {
@@ -48,11 +52,10 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
     }
     static { this.target = '*'; }
     scheduleSend() {
-        clearTimeout(this.pending);
-        this.pending = setTimeout(() => {
-            this.pending = undefined;
+        this.settle.start(SETTLE, () => {
+            this.toggleState('failed', false);
             this.send();
-        }, SETTLE);
+        });
     }
     send() {
         if (!this.ready) {
@@ -74,8 +77,6 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        clearTimeout(this.pending);
-        this.pending = undefined;
         window.removeEventListener('message', this.handleMessage);
     }
     reload() {
@@ -83,13 +84,18 @@ let HelixSandboxPreview = class HelixSandboxPreview extends HelixElement {
         if (!frame) {
             return;
         }
-        this.ready = false;
+        this.unready();
         frame.src = this.src;
     }
+    unready() {
+        this.ready = false;
+        this.toggleState('failed', false);
+        this.toggleState('loading', this.src !== '');
+    }
     updated(changed) {
         super.updated(changed);
         if (changed.has('src')) {
-            this.ready = false;
+            this.unready();
             return;
         }
         if (changed.has('source') || changed.has('styles')) {

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

@@ -1,71 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-background-color: var(--helix-color-background);
-display: grid;
-grid-template-rows: auto minmax(0, 1fr) auto;
-min-block-size: var(--sandbox-min-block-size, 20rem);
-overflow: hidden;
-}
-
-::slotted([slot="toolbar"]) {
-grid-row: 1;
-}
-
-[part="body"] {
-grid-row: 2;
-}
-
-::slotted([slot="status"]) {
-grid-row: 3;
-}
-
-[part="body"],
-[part="panes"] {
---splitter-color: var(--sandbox-separator-color, var(--helix-color-border));
---splitter-target: calc(var(--sandbox-grab, var(--helix-space-2xs)) * 2);
-min-block-size: 0;
-min-inline-size: 0;
-}
-
-[part="panes"] {
-block-size: 100%;
-}
-
-[part="body"]:not([data-panel])::part(separator) {
-display: none;
-}
-
-[part="body"]:not([data-panel])::part(corner) {
-display: none;
-}
-
-[part="pane"] {
-block-size: 100%;
-min-block-size: 0;
-min-inline-size: 0;
-overflow: hidden;
-}
-
-[part="panel"] {
-block-size: 100%;
-min-block-size: 0;
-overflow: hidden;
-}
-
-::slotted([slot="panel"]) {
-block-size: 100%;
-min-block-size: 0;
-}
-
-::slotted(helix-sandbox-preview) {
-background-color: var(--helix-color-background);
-block-size: 100%;
-color: var(--helix-color-foreground);
-display: block;
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {background-color: var(--helix-color-background);display: grid;grid-template-rows: auto minmax(0, 1fr) auto;min-block-size: var(--sandbox-min-block-size, 20rem);overflow: hidden;}::slotted([slot="toolbar"]) {grid-row: 1;}[part="body"] {grid-row: 2;}::slotted([slot="status"]) {grid-row: 3;}[part="body"],
+[part="panes"] {--splitter-color: var(--sandbox-separator-color, var(--helix-color-border));--splitter-target: calc(var(--sandbox-grab, var(--helix-space-2xs)) * 2);min-block-size: 0;min-inline-size: 0;}[part="panes"] {block-size: 100%;}[part="body"]:not([data-panel])::part(corner),
+[part="body"]:not([data-panel])::part(separator) {display: none;}[part="pane"] {block-size: 100%;min-block-size: 0;min-inline-size: 0;overflow: hidden;}[part="panel"] {block-size: 100%;min-block-size: 0;overflow: hidden;}::slotted([slot="panel"]) {block-size: 100%;min-block-size: 0;}::slotted(helix-sandbox-preview) {background-color: var(--helix-color-background);block-size: 100%;color: var(--helix-color-foreground);display: block;}@media print {:host {display: none;}}`);

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

@@ -41,16 +41,18 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @event {HelixResizeEvent} helix-resize - Fired by the preview pane when the height of the frame's content changes, with the new height.
  * @event {HelixSplitEvent} helix-split - Fired after the panes' divider settled somewhere new, with the lead pane's share.
  *
- * @csspart body - The splitter holding the panes above the panel.
+ * @csspart body - The splitter holding the panes above the panel. `::part(body):state(dragging)` matches while its divider is held.
  * @csspart corner - The handle where the two dividers cross.
  * @csspart pane - Either pane.
  * @csspart panel - The box that holds the slotted panel.
- * @csspart panes - The splitter holding the source and preview panes.
+ * @csspart panes - The splitter holding the source and preview panes. `::part(panes):state(dragging)` matches while its divider is held.
  * @csspart separator - Either divider.
  *
  * @cssproperty --sandbox-grab - The invisible width of a divider's drag target.
  * @cssproperty --sandbox-min-block-size - Minimum height of the sandbox.
  * @cssproperty --sandbox-separator-color - Color of the divider.
+ *
+ * @cssstate panel-collapsed - While there is a panel and it is no taller than `panel-collapsed-size`.
  */
 export declare class HelixSandbox extends HelixElement {
     /**
@@ -176,8 +178,12 @@ export declare class HelixSandbox extends HelixElement {
      * back into the position that answered it.
      */
     private readonly watch;
-    /** The panel as a share of the body, which is what the splitter takes. */
-    private get panelShare();
+    /**
+     * A panel height as a share of the body, which is what the splitter takes,
+     * held to what the panel may have. A height that is no number is the
+     * default one.
+     */
+    private shareOf;
     /**
      * Where the outer divider goes: everything the panel is not.
      *
@@ -305,6 +311,12 @@ export declare class HelixSandbox extends HelixElement {
     private requestSplit;
     /** As `requestSplit`, for the panel, whose value is pixels rather than a share. */
     private requestPanelSize;
+    /**
+     * Takes a request a splitter of this sandbox made for itself, stopped and
+     * refused, and gives its value. Gives nothing for one that came up from
+     * something slotted into a pane, which passes through untouched.
+     */
+    private claim;
     /**
      * Answers a divider that has asked to move.
      *