@fusion.dev/helix 0.4.2 → 0.4.4

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

@@ -1,6 +1,11 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
+--helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-control: var(--helix-size-control-sm);
+
+--_toast-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));
+
 display: grid;
 
 grid-template-rows: minmax(0, 1fr);
@@ -12,11 +17,6 @@ margin-block-start var(--helix-duration-normal) var(--helix-easing-standard),
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 translate var(--helix-duration-normal) var(--helix-easing-standard);
 
---helix-size-icon: var(--helix-size-icon-sm);
---helix-size-control: var(--helix-size-control-sm);
-
---_toast-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));
-
 inline-size: var(--toast-inline-size, 22rem);
 max-inline-size: calc(100vw - var(--helix-space-xl));
 }

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

@@ -10,16 +10,15 @@ z-index: var(--helix-layer-toast);
 }
 
 :host(:not([placement])) {
-inset-block-end: var(--_toast-inset);
-
 --_toast-enter: var(--helix-space-lg);
+inset-block-end: var(--_toast-inset);
 }
 
 [part="region"] {
-display: flex;
-flex-direction: column;
 
 --_toast-gap: var(--toast-gap, var(--helix-space-xs));
+display: flex;
+flex-direction: column;
 }
 
 ::slotted(*) {
@@ -27,15 +26,13 @@ pointer-events: auto;
 }
 
 :host([placement^="bottom"]) {
-inset-block-end: var(--_toast-inset);
-
 --_toast-enter: var(--helix-space-lg);
+inset-block-end: var(--_toast-inset);
 }
 
 :host([placement^="top"]) {
-inset-block-start: var(--_toast-inset);
-
 --_toast-enter: calc(var(--helix-space-lg) * -1);
+inset-block-start: var(--_toast-inset);
 }
 
 :host([placement^="top"]) [part="region"] {

package/dist/toggle/group/toggle-group.css.js

@@ -28,6 +28,11 @@ align-items: start;
 }
 
 [part="track"] {
+--_toggle-height: calc(var(--helix-size-control) - var(--helix-space-2xs) * 2);
+
+--_toggle-radius: var(--helix-radii-sm);
+
+--_indicator-surface: var(--helix-color-surface-raised);
 display: inline-flex;
 position: relative;
 
@@ -36,21 +41,11 @@ flex-wrap: wrap;
 
 min-block-size: var(--helix-size-control);
 
---_toggle-height: calc(var(--helix-size-control) - var(--helix-space-2xs) * 2);
-
---_toggle-radius: var(--helix-radii-sm);
-
 padding: var(--helix-space-2xs);
-
---_indicator-surface: var(--helix-color-surface-raised);
 }
 
 :host(:not([separation])) [part="track"],
 :host([separation="outlined"]) [part="track"] {
-background-color: var(--helix-color-surface-sunken);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-padding: var(--helix-space-2xs);
 
 --_toggle-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));
 
@@ -63,6 +58,10 @@ var(--helix-border-thin) *
 );
 
 --_indicator-surface: var(--helix-color-surface-overlay);
+background-color: var(--helix-color-surface-sunken);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+padding: var(--helix-space-2xs);
 }
 
 ::slotted(helix-toggle) {

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

@@ -9,9 +9,9 @@ line-height: var(--helix-leading-tight);
 }
 
 :host {
-color: var(--trend-color, var(--_trend-color));
 
 --_trend-color: var(--helix-color-foreground-muted);
+color: var(--trend-color, var(--_trend-color));
 }
 
 [part="icon"] {

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

@@ -82,8 +82,8 @@ opacity: 0;
 }
 
 [part="controls"] :where(a, button) {
-all: unset;
 --icon-size: var(--helix-size-icon-tight);
+all: unset;
 
 align-items: center;
 border-radius: var(--helix-radii-sm);
@@ -239,8 +239,8 @@ display: contents;
 }
 
 [part="start"] {
-all: unset;
 --icon-size: 40%;
+all: unset;
 
 align-items: center;
 aspect-ratio: 1;

package/dist/video-playlist/menu/video-playlist-menu.css.js

@@ -5,9 +5,8 @@ flex: 0 0 auto;
 }
 
 [part="trigger"] {
-all: unset;
-
 --icon-size: var(--video-playlist-menu-size, var(--helix-size-icon-tight));
+all: unset;
 
 align-items: center;
 border-radius: var(--helix-radii-sm);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -22,43 +22,38 @@
       "default": "./dist/*/index.js"
     },
     "./custom-elements.json": "./custom-elements.json",
-    "./elements.css": "./elements.css",
-    "./helix.css": "./helix.css",
-    "./jsx": "./jsx.d.ts",
-    "./svelte": "./svelte.d.ts",
-    "./vue": "./vue.d.ts"
+    "./jsx": "./types/jsx.d.ts",
+    "./svelte": "./types/svelte.d.ts",
+    "./vue": "./types/vue.d.ts"
   },
   "files": [
     "custom-elements.json",
     "dist",
-    "elements.css",
-    "helix.css",
-    "jsx.d.ts",
-    "svelte.d.ts",
-    "vue.d.ts"
+    "types"
   ],
   "customElements": "custom-elements.json",
   "sideEffects": true,
   "scripts": {
-    "analyze": "cem analyze --config custom-elements-manifest.config.ts",
-    "build": "tsc -p tsconfig.json && tsc -p tsconfig.types.json",
-    "styles": "build-styles . && build-elements-css .",
-    "test": "bun run test:pure && bun run test:dom && bun run test:ssr",
+    "analyze": "bun --bun cem analyze --config cem.config.ts",
+    "build": "bun run element-events && tsc -p tsconfig.build.json && tsc -p tsconfig.types.json",
+    "element-events": "build-element-events --package styled",
+    "styles": "build-styles .",
+    "test": "bun run element-events && bun run test:pure && bun run test:dom && bun run test:ssr",
     "test:dom": "bun test dom.spec",
     "test:pure": "bun test pure.spec",
     "test:ssr": "bun test ssr.spec",
-    "typecheck": "tsc -p tsconfig.json --noEmit"
+    "typecheck": "bun run element-events && tsc -p tsconfig.json --noEmit"
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.4.2",
-    "@fusion.dev/helix-headless": "0.4.2",
-    "@fusion.dev/helix-styles": "0.4.2"
+    "@fusion.dev/helix-core": "0.4.4",
+    "@fusion.dev/helix-headless": "0.4.4",
+    "@fusion.dev/helix-styles": "0.4.4"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.4.2",
-    "@fusion.dev/helix-testing": "0.4.2",
+    "@fusion.dev/helix-cem": "0.4.4",
+    "@fusion.dev/helix-testing": "0.4.4",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",

package/{jsx.d.ts → types/jsx.d.ts}

@@ -18315,43 +18315,22 @@ export type CustomElements = {
 
   /**
    * One fragment shader over a full-screen triangle, with the palette read from
-   * the tokens rather than given as colors. That is the whole reason this belongs
-   * in a design system instead of in a page: a background written with hex values
-   * is an asset that has to be re-cut when the brand moves, and one written
-   * against `--helix-color-primary` is a consequence of it.
+   * the tokens rather than given as colors. A background written with hex values
+   * is an asset that has to be re-cut when the brand moves; one written against
+   * `--helix-color-primary` is a consequence of it.
    *
    * **Every shape ramps through four token stops**, and the token layer inverts
-   * each of them: the page's own background, `primary-subtle`, `primary`, and
-   * then a peak. The peak is the foreground on a dark page and `primary-active`
-   * on a light one, because mixing a saturated hue toward near-black takes the
-   * chroma out of exactly the pixels carrying the most of it. Which way the page
-   * runs is not asked of the mode, which is a private token: it is read off the
-   * ground's own luminance, which the shader already has.
+   * each: the page's background, `primary-subtle`, `primary`, then a peak. The
+   * peak is the foreground on a dark page and `primary-active` on a light one,
+   * because mixing a saturated hue toward near-black takes the chroma out of the
+   * pixels carrying most of it. Which way the page runs is read off the ground's
+   * own luminance rather than asked of the mode, which is a private token.
    *
    * **No dependency, and no scene graph.** The geometry is three vertices derived
-   * from `gl_VertexID`, so there is no attribute, no buffer and no upload. The
-   * common implementations of this reach for a 3D library to draw one quad, which
-   * is a camera and a material system for four vertices that never move.
+   * from `gl_VertexID`, so there is no attribute, no buffer and no upload.
    *
    * **It stops when nobody is looking**, off screen and in a background tab, and
-   * `prefers-reduced-motion` gets one still frame rather than an empty box: the
-   * composition is the point and the drift is a garnish.
-   *
-   * **A layer over an interactive aura has to let the pointer through.** The
-   * element is hit-testable only when `interactive` is set, because a background
-   * that swallows clicks is worse than one that does nothing, but a scrim or an
-   * overlay a consumer paints on top will absorb the move before it arrives. Any
-   * decorative layer above this wants `pointer-events: none`. It has already
-   * caught this repository's own bench once.
-   *
-   * **The fallback needs no detection.** Where WebGL is refused the canvas never
-   * paints and is transparent, and the host carries a gradient of the same tokens
-   * underneath. Nothing has to ask whether it worked.
-   *
-   * Presentation only, so there is no headless tier: the split exists to keep
-   * behavior separate from styling, and there is no structure or semantics here
-   * to separate. Decorative, so the host is hidden from assistive technology and
-   * takes no pointer events.
+   * `prefers-reduced-motion` gets one still frame rather than an empty box.
    *
    * ## Attributes & Properties
    *
@@ -28088,41 +28067,21 @@ export type CustomElements = {
   >;
 
   /**
-   * A sandboxed `<iframe>` pointed at `src`, which is a document the consumer
-   * provides. That document imports whatever the examples need, listens for a
-   * render message, and writes the markup into itself.
+   * A sandboxed `<iframe>` pointed at `src`, a document the consumer provides.
+   * That document imports whatever the examples need, listens for a render
+   * message, and writes the markup into itself.
    *
    * **A frame rather than the page.** Rendering into the page meant an example
-   * was styled by whatever surrounded it, which flatters the preview and lies
-   * about it: an example that restyles `helix-card` restyled the sandbox too, a
-   * script in an example ran against the real document, and a stray
-   * `position: fixed` escaped the pane. It also left nothing to capture console
-   * output from, and the terminal has to come from somewhere.
-   *
-   * The cost is that the frame starts empty. Styles and element definitions do
-   * not cross into it, because a document has its own stylesheets and a window
-   * has its own custom element registry, so `src` has to load them. That is the
-   * consumer's document rather than something guessed at here.
+   * was styled by whatever surrounded it: an example restyling `helix-card`
+   * restyled the sandbox too, a script ran against the real document, and a stray
+   * `position: fixed` escaped the pane. The cost is that the frame starts empty,
+   * a document having its own stylesheets and a window its own registry, so `src`
+   * has to load them.
    *
    * **The source is not trusted, and the frame is what makes that safe.**
-   * `sandbox="allow-scripts"` and no `allow-same-origin`, so the document runs on
-   * an opaque origin: script in an example cannot reach this page, its storage,
-   * its cookies, or the editor the source was typed into. Without it they could,
-   * measured, through an `onerror` handler on an image that fails to load, which
-   * `innerHTML` does not strip the way it refuses a `<script>` tag. That is what
-   * lets a sandbox hold markup a reader pasted from somewhere, or one day arrived
-   * in a shared link, rather than only what its owner typed.
-   *
-   * `allow-forms` is granted because examples have forms in them and a submit
-   * that silently does nothing is a worse lie than one that navigates a frame
-   * nobody is looking at. Top-level navigation, popups and modals are not.
-   *
-   * **`allow="clipboard-write *; fullscreen *"`, and the stars matter.** Both
-   * policies default to `self`, and a frame on an opaque origin is not `self`, so
-   * the default denies both: a component that copies to the clipboard and a video
-   * offering a fullscreen button each become a control that silently does nothing,
-   * a denied request rejecting a promise nobody was watching. Nothing else is
-   * granted, and a copy still needs the reader's own gesture.
+   * `sandbox="allow-scripts"` and never `allow-same-origin`: the two together are
+   * the same as no sandbox at all, a document on its own origin being able to
+   * reach up and remove the attribute.
    *
    * ## Attributes & Properties
    *
@@ -28201,41 +28160,20 @@ export type CustomElements = {
   >;
 
   /**
-   * Coordination is by event, the same way the accordion does it: a source pane
-   * dispatches `helix-before-edit`, which bubbles, and the sandbox hands the value to
-   * whatever preview is slotted into it. Neither child knows the other exists, so
-   * either can be replaced or used alone.
+   * Coordination is by event: a source pane dispatches `helix-before-edit`, which
+   * bubbles, and the sandbox hands the value to whatever preview is slotted into
+   * it. Neither child knows the other exists, so either can be replaced or used
+   * alone.
    *
    * The event carries the pane's `name`, which is what lets one sandbox hold
-   * several panes without the root identifying senders by reference. `html` is
-   * the preview's markup and `css` is its stylesheet. A pane named anything else
-   * is showing something rather than driving it, and is ignored: the sandbox has
-   * a pane rendering the example as JSX, and guessing would have put the text of
-   * a React component into the preview.
-   *
-   * **The dividers are two nested `helix-splitter`s, not a grid this element
-   * drags itself.** The pointer handling, the keyboard handling and the corner are
-   * all the splitter's, and the corner arrives on its own wherever a nested
-   * splitter crosses the one it is in.
-   *
-   * The panes are the inner splitter and the panel is the outer one, which is the
-   * order that makes the panel span the full width: the outer divider runs edge to
-   * edge and the inner stops at it.
-   *
-   * **Both are controlled from here, so `split` and `panel-size` stay the truth.**
-   * A splitter that owned its own position would leave this element reporting one
-   * arrangement and showing another, and a consumer restoring a saved layout
-   * writes to these two properties. Each splitter announces where it wants to go
-   * and this answers, which is the same contract a form control has with a
-   * framework.
-   *
-   * **The panel is in pixels here and a percentage in the splitter, and the
-   * conversion belongs here.** A terminal wants a number of lines rather than a
-   * share of the window, so its height should not change when the window does. A
-   * splitter has no business knowing that, so it stays percentage-pure and this
-   * element, which does know what is in the panel, holds the box and converts.
-   * That is also what keeps a stored `panelSize` from a previous visit meaning
-   * what it meant when it was written.
+   * several panes: `html` is the preview's markup and `css` its stylesheet. A
+   * pane named anything else is showing something rather than driving it, and is
+   * ignored.
+   *
+   * **The dividers are two nested `helix-splitter`s**, not a grid this element
+   * drags itself, so the pointer handling, the keyboard handling and the corner
+   * are all the splitter's. The panes are the inner splitter and the panel is the
+   * outer one, which is the order that makes the panel span the full width.
    *
    * ## Attributes & Properties
    *
@@ -33956,43 +33894,22 @@ export type CustomElementsSolidJs = {
 
   /**
    * One fragment shader over a full-screen triangle, with the palette read from
-   * the tokens rather than given as colors. That is the whole reason this belongs
-   * in a design system instead of in a page: a background written with hex values
-   * is an asset that has to be re-cut when the brand moves, and one written
-   * against `--helix-color-primary` is a consequence of it.
+   * the tokens rather than given as colors. A background written with hex values
+   * is an asset that has to be re-cut when the brand moves; one written against
+   * `--helix-color-primary` is a consequence of it.
    *
    * **Every shape ramps through four token stops**, and the token layer inverts
-   * each of them: the page's own background, `primary-subtle`, `primary`, and
-   * then a peak. The peak is the foreground on a dark page and `primary-active`
-   * on a light one, because mixing a saturated hue toward near-black takes the
-   * chroma out of exactly the pixels carrying the most of it. Which way the page
-   * runs is not asked of the mode, which is a private token: it is read off the
-   * ground's own luminance, which the shader already has.
+   * each: the page's background, `primary-subtle`, `primary`, then a peak. The
+   * peak is the foreground on a dark page and `primary-active` on a light one,
+   * because mixing a saturated hue toward near-black takes the chroma out of the
+   * pixels carrying most of it. Which way the page runs is read off the ground's
+   * own luminance rather than asked of the mode, which is a private token.
    *
    * **No dependency, and no scene graph.** The geometry is three vertices derived
-   * from `gl_VertexID`, so there is no attribute, no buffer and no upload. The
-   * common implementations of this reach for a 3D library to draw one quad, which
-   * is a camera and a material system for four vertices that never move.
+   * from `gl_VertexID`, so there is no attribute, no buffer and no upload.
    *
    * **It stops when nobody is looking**, off screen and in a background tab, and
-   * `prefers-reduced-motion` gets one still frame rather than an empty box: the
-   * composition is the point and the drift is a garnish.
-   *
-   * **A layer over an interactive aura has to let the pointer through.** The
-   * element is hit-testable only when `interactive` is set, because a background
-   * that swallows clicks is worse than one that does nothing, but a scrim or an
-   * overlay a consumer paints on top will absorb the move before it arrives. Any
-   * decorative layer above this wants `pointer-events: none`. It has already
-   * caught this repository's own bench once.
-   *
-   * **The fallback needs no detection.** Where WebGL is refused the canvas never
-   * paints and is transparent, and the host carries a gradient of the same tokens
-   * underneath. Nothing has to ask whether it worked.
-   *
-   * Presentation only, so there is no headless tier: the split exists to keep
-   * behavior separate from styling, and there is no structure or semantics here
-   * to separate. Decorative, so the host is hidden from assistive technology and
-   * takes no pointer events.
+   * `prefers-reduced-motion` gets one still frame rather than an empty box.
    *
    * ## Attributes & Properties
    *
@@ -43952,41 +43869,21 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * A sandboxed `<iframe>` pointed at `src`, which is a document the consumer
-   * provides. That document imports whatever the examples need, listens for a
-   * render message, and writes the markup into itself.
+   * A sandboxed `<iframe>` pointed at `src`, a document the consumer provides.
+   * That document imports whatever the examples need, listens for a render
+   * message, and writes the markup into itself.
    *
    * **A frame rather than the page.** Rendering into the page meant an example
-   * was styled by whatever surrounded it, which flatters the preview and lies
-   * about it: an example that restyles `helix-card` restyled the sandbox too, a
-   * script in an example ran against the real document, and a stray
-   * `position: fixed` escaped the pane. It also left nothing to capture console
-   * output from, and the terminal has to come from somewhere.
-   *
-   * The cost is that the frame starts empty. Styles and element definitions do
-   * not cross into it, because a document has its own stylesheets and a window
-   * has its own custom element registry, so `src` has to load them. That is the
-   * consumer's document rather than something guessed at here.
+   * was styled by whatever surrounded it: an example restyling `helix-card`
+   * restyled the sandbox too, a script ran against the real document, and a stray
+   * `position: fixed` escaped the pane. The cost is that the frame starts empty,
+   * a document having its own stylesheets and a window its own registry, so `src`
+   * has to load them.
    *
    * **The source is not trusted, and the frame is what makes that safe.**
-   * `sandbox="allow-scripts"` and no `allow-same-origin`, so the document runs on
-   * an opaque origin: script in an example cannot reach this page, its storage,
-   * its cookies, or the editor the source was typed into. Without it they could,
-   * measured, through an `onerror` handler on an image that fails to load, which
-   * `innerHTML` does not strip the way it refuses a `<script>` tag. That is what
-   * lets a sandbox hold markup a reader pasted from somewhere, or one day arrived
-   * in a shared link, rather than only what its owner typed.
-   *
-   * `allow-forms` is granted because examples have forms in them and a submit
-   * that silently does nothing is a worse lie than one that navigates a frame
-   * nobody is looking at. Top-level navigation, popups and modals are not.
-   *
-   * **`allow="clipboard-write *; fullscreen *"`, and the stars matter.** Both
-   * policies default to `self`, and a frame on an opaque origin is not `self`, so
-   * the default denies both: a component that copies to the clipboard and a video
-   * offering a fullscreen button each become a control that silently does nothing,
-   * a denied request rejecting a promise nobody was watching. Nothing else is
-   * granted, and a copy still needs the reader's own gesture.
+   * `sandbox="allow-scripts"` and never `allow-same-origin`: the two together are
+   * the same as no sandbox at all, a document on its own origin being able to
+   * reach up and remove the attribute.
    *
    * ## Attributes & Properties
    *
@@ -44068,41 +43965,20 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * Coordination is by event, the same way the accordion does it: a source pane
-   * dispatches `helix-before-edit`, which bubbles, and the sandbox hands the value to
-   * whatever preview is slotted into it. Neither child knows the other exists, so
-   * either can be replaced or used alone.
+   * Coordination is by event: a source pane dispatches `helix-before-edit`, which
+   * bubbles, and the sandbox hands the value to whatever preview is slotted into
+   * it. Neither child knows the other exists, so either can be replaced or used
+   * alone.
    *
    * The event carries the pane's `name`, which is what lets one sandbox hold
-   * several panes without the root identifying senders by reference. `html` is
-   * the preview's markup and `css` is its stylesheet. A pane named anything else
-   * is showing something rather than driving it, and is ignored: the sandbox has
-   * a pane rendering the example as JSX, and guessing would have put the text of
-   * a React component into the preview.
-   *
-   * **The dividers are two nested `helix-splitter`s, not a grid this element
-   * drags itself.** The pointer handling, the keyboard handling and the corner are
-   * all the splitter's, and the corner arrives on its own wherever a nested
-   * splitter crosses the one it is in.
-   *
-   * The panes are the inner splitter and the panel is the outer one, which is the
-   * order that makes the panel span the full width: the outer divider runs edge to
-   * edge and the inner stops at it.
-   *
-   * **Both are controlled from here, so `split` and `panel-size` stay the truth.**
-   * A splitter that owned its own position would leave this element reporting one
-   * arrangement and showing another, and a consumer restoring a saved layout
-   * writes to these two properties. Each splitter announces where it wants to go
-   * and this answers, which is the same contract a form control has with a
-   * framework.
-   *
-   * **The panel is in pixels here and a percentage in the splitter, and the
-   * conversion belongs here.** A terminal wants a number of lines rather than a
-   * share of the window, so its height should not change when the window does. A
-   * splitter has no business knowing that, so it stays percentage-pure and this
-   * element, which does know what is in the panel, holds the box and converts.
-   * That is also what keeps a stored `panelSize` from a previous visit meaning
-   * what it meant when it was written.
+   * several panes: `html` is the preview's markup and `css` its stylesheet. A
+   * pane named anything else is showing something rather than driving it, and is
+   * ignored.
+   *
+   * **The dividers are two nested `helix-splitter`s**, not a grid this element
+   * drags itself, so the pointer handling, the keyboard handling and the corner
+   * are all the splitter's. The panes are the inner splitter and the panel is the
+   * outer one, which is the order that makes the panel span the full width.
    *
    * ## Attributes & Properties
    *

package/{vue.d.ts → types/vue.d.ts}

@@ -10110,7 +10110,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixAppHeaderVueProps,
     HelixAppHeaderVueEvents
   >;
-  /** One fragment shader over a full-screen triangle, with the palette read from the tokens rather than given as colors. That is the whole reason this belongs in a design system instead of in a page: a background written with hex values is an asset that has to be re-cut when the brand moves, and one written against '--helix-color-primary' is a consequence of it.  **Every shape ramps through four token stops**, and the token layer inverts each of them: the page's own background, 'primary-subtle', 'primary', and then a peak. The peak is the foreground on a dark page and 'primary-active' on a light one, because mixing a saturated hue toward near-black takes the chroma out of exactly the pixels carrying the most of it. Which way the page runs is not asked of the mode, which is a private token: it is read off the ground's own luminance, which the shader already has.  **No dependency, and no scene graph.** The geometry is three vertices derived from 'gl_VertexID', so there is no attribute, no buffer and no upload. The common implementations of this reach for a 3D library to draw one quad, which is a camera and a material system for four vertices that never move.  **It stops when nobody is looking**, off screen and in a background tab, and 'prefers-reduced-motion' gets one still frame rather than an empty box: the composition is the point and the drift is a garnish.  **A layer over an interactive aura has to let the pointer through.** The element is hit-testable only when 'interactive' is set, because a background that swallows clicks is worse than one that does nothing, but a scrim or an overlay a consumer paints on top will absorb the move before it arrives. Any decorative layer above this wants 'pointer-events: none'. It has already caught this repository's own bench once.  **The fallback needs no detection.** Where WebGL is refused the canvas never paints and is transparent, and the host carries a gradient of the same tokens underneath. Nothing has to ask whether it worked.  Presentation only, so there is no headless tier: the split exists to keep behavior separate from styling, and there is no structure or semantics here to separate. Decorative, so the host is hidden from assistive technology and takes no pointer events. */
+  /** One fragment shader over a full-screen triangle, with the palette read from the tokens rather than given as colors. A background written with hex values is an asset that has to be re-cut when the brand moves; one written against '--helix-color-primary' is a consequence of it.  **Every shape ramps through four token stops**, and the token layer inverts each: the page's background, 'primary-subtle', 'primary', then a peak. The peak is the foreground on a dark page and 'primary-active' on a light one, because mixing a saturated hue toward near-black takes the chroma out of the pixels carrying most of it. Which way the page runs is read off the ground's own luminance rather than asked of the mode, which is a private token.  **No dependency, and no scene graph.** The geometry is three vertices derived from 'gl_VertexID', so there is no attribute, no buffer and no upload.  **It stops when nobody is looking**, off screen and in a background tab, and 'prefers-reduced-motion' gets one still frame rather than an empty box. */
   "helix-aura": DefineCustomElement<
     HelixAura,
     HelixAuraVueProps,
@@ -10548,13 +10548,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixRatingVueProps,
     HelixRatingVueEvents
   >;
-  /** A sandboxed '<iframe>' pointed at 'src', which is a document the consumer provides. That document imports whatever the examples need, listens for a render message, and writes the markup into itself.  **A frame rather than the page.** Rendering into the page meant an example was styled by whatever surrounded it, which flatters the preview and lies about it: an example that restyles 'helix-card' restyled the sandbox too, a script in an example ran against the real document, and a stray 'position: fixed' escaped the pane. It also left nothing to capture console output from, and the terminal has to come from somewhere.  The cost is that the frame starts empty. Styles and element definitions do not cross into it, because a document has its own stylesheets and a window has its own custom element registry, so 'src' has to load them. That is the consumer's document rather than something guessed at here.  **The source is not trusted, and the frame is what makes that safe.** 'sandbox="allow-scripts"' and no 'allow-same-origin', so the document runs on an opaque origin: script in an example cannot reach this page, its storage, its cookies, or the editor the source was typed into. Without it they could, measured, through an 'onerror' handler on an image that fails to load, which 'innerHTML' does not strip the way it refuses a '<script>' tag. That is what lets a sandbox hold markup a reader pasted from somewhere, or one day arrived in a shared link, rather than only what its owner typed.  'allow-forms' is granted because examples have forms in them and a submit that silently does nothing is a worse lie than one that navigates a frame nobody is looking at. Top-level navigation, popups and modals are not.  **'allow="clipboard-write *; fullscreen *"', and the stars matter.** Both policies default to 'self', and a frame on an opaque origin is not 'self', so the default denies both: a component that copies to the clipboard and a video offering a fullscreen button each become a control that silently does nothing, a denied request rejecting a promise nobody was watching. Nothing else is granted, and a copy still needs the reader's own gesture. */
+  /** A sandboxed '<iframe>' pointed at 'src', a document the consumer provides. That document imports whatever the examples need, listens for a render message, and writes the markup into itself.  **A frame rather than the page.** Rendering into the page meant an example was styled by whatever surrounded it: an example restyling 'helix-card' restyled the sandbox too, a script ran against the real document, and a stray 'position: fixed' escaped the pane. The cost is that the frame starts empty, a document having its own stylesheets and a window its own registry, so 'src' has to load them.  **The source is not trusted, and the frame is what makes that safe.** 'sandbox="allow-scripts"' and never 'allow-same-origin': the two together are the same as no sandbox at all, a document on its own origin being able to reach up and remove the attribute. */
   "helix-sandbox-preview": DefineCustomElement<
     HelixSandboxPreview,
     HelixSandboxPreviewVueProps,
     HelixSandboxPreviewVueEvents
   >;
-  /** Coordination is by event, the same way the accordion does it: a source pane dispatches 'helix-before-edit', which bubbles, and the sandbox hands the value to whatever preview is slotted into it. Neither child knows the other exists, so either can be replaced or used alone.  The event carries the pane's 'name', which is what lets one sandbox hold several panes without the root identifying senders by reference. 'html' is the preview's markup and 'css' is its stylesheet. A pane named anything else is showing something rather than driving it, and is ignored: the sandbox has a pane rendering the example as JSX, and guessing would have put the text of a React component into the preview.  **The dividers are two nested 'helix-splitter's, not a grid this element drags itself.** The pointer handling, the keyboard handling and the corner are all the splitter's, and the corner arrives on its own wherever a nested splitter crosses the one it is in.  The panes are the inner splitter and the panel is the outer one, which is the order that makes the panel span the full width: the outer divider runs edge to edge and the inner stops at it.  **Both are controlled from here, so 'split' and 'panel-size' stay the truth.** A splitter that owned its own position would leave this element reporting one arrangement and showing another, and a consumer restoring a saved layout writes to these two properties. Each splitter announces where it wants to go and this answers, which is the same contract a form control has with a framework.  **The panel is in pixels here and a percentage in the splitter, and the conversion belongs here.** A terminal wants a number of lines rather than a share of the window, so its height should not change when the window does. A splitter has no business knowing that, so it stays percentage-pure and this element, which does know what is in the panel, holds the box and converts. That is also what keeps a stored 'panelSize' from a previous visit meaning what it meant when it was written. */
+  /** Coordination is by event: a source pane dispatches 'helix-before-edit', which bubbles, and the sandbox hands the value to whatever preview is slotted into it. Neither child knows the other exists, so either can be replaced or used alone.  The event carries the pane's 'name', which is what lets one sandbox hold several panes: 'html' is the preview's markup and 'css' its stylesheet. A pane named anything else is showing something rather than driving it, and is ignored.  **The dividers are two nested 'helix-splitter's**, not a grid this element drags itself, so the pointer handling, the keyboard handling and the corner are all the splitter's. The panes are the inner splitter and the panel is the outer one, which is the order that makes the panel span the full width. */
   "helix-sandbox": DefineCustomElement<
     HelixSandbox,
     HelixSandboxVueProps,