@fusion.dev/helix 0.4.1 → 0.4.3

package/custom-elements.json

@@ -2102,7 +2102,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "One fragment shader over a full-screen triangle, with the palette read from\nthe tokens rather than given as colors. That is the whole reason this belongs\nin a design system instead of in a page: a background written with hex values\nis an asset that has to be re-cut when the brand moves, and one written\nagainst `--helix-color-primary` is a consequence of it.\n\n**Every shape ramps through four token stops**, and the token layer inverts\neach of them: the page's own background, `primary-subtle`, `primary`, and\nthen a peak. The peak is the foreground on a dark page and `primary-active`\non a light one, because mixing a saturated hue toward near-black takes the\nchroma out of exactly the pixels carrying the most of it. Which way the page\nruns is not asked of the mode, which is a private token: it is read off the\nground's own luminance, which the shader already has.\n\n**No dependency, and no scene graph.** The geometry is three vertices derived\nfrom `gl_VertexID`, so there is no attribute, no buffer and no upload. The\ncommon implementations of this reach for a 3D library to draw one quad, which\nis a camera and a material system for four vertices that never move.\n\n**It stops when nobody is looking**, off screen and in a background tab, and\n`prefers-reduced-motion` gets one still frame rather than an empty box: the\ncomposition is the point and the drift is a garnish.\n\n**A layer over an interactive aura has to let the pointer through.** The\nelement is hit-testable only when `interactive` is set, because a background\nthat swallows clicks is worse than one that does nothing, but a scrim or an\noverlay a consumer paints on top will absorb the move before it arrives. Any\ndecorative layer above this wants `pointer-events: none`. It has already\ncaught this repository's own bench once.\n\n**The fallback needs no detection.** Where WebGL is refused the canvas never\npaints and is transparent, and the host carries a gradient of the same tokens\nunderneath. Nothing has to ask whether it worked.\n\nPresentation only, so there is no headless tier: the split exists to keep\nbehavior separate from styling, and there is no structure or semantics here\nto separate. Decorative, so the host is hidden from assistive technology and\ntakes no pointer events.",
+          "description": "One fragment shader over a full-screen triangle, with the palette read from\nthe tokens rather than given as colors. A background written with hex values\nis an asset that has to be re-cut when the brand moves; one written against\n`--helix-color-primary` is a consequence of it.\n\n**Every shape ramps through four token stops**, and the token layer inverts\neach: the page's background, `primary-subtle`, `primary`, then a peak. The\npeak is the foreground on a dark page and `primary-active` on a light one,\nbecause mixing a saturated hue toward near-black takes the chroma out of the\npixels carrying most of it. Which way the page runs is read off the ground's\nown luminance rather than asked of the mode, which is a private token.\n\n**No dependency, and no scene graph.** The geometry is three vertices derived\nfrom `gl_VertexID`, so there is no attribute, no buffer and no upload.\n\n**It stops when nobody is looking**, off screen and in a background tab, and\n`prefers-reduced-motion` gets one still frame rather than an empty box.",
           "name": "HelixAura",
           "cssParts": [
             {
@@ -7318,7 +7318,7 @@
               "reflects": true,
               "inheritedFrom": {
                 "name": "MixinControlSurface",
-                "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
+                "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
               }
             },
             {
@@ -7332,7 +7332,7 @@
               "reflects": true,
               "inheritedFrom": {
                 "name": "MixinControlSurface",
-                "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
+                "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
               }
             },
             {
@@ -7949,7 +7949,7 @@
               "fieldName": "emphasis",
               "inheritedFrom": {
                 "name": "MixinControlSurface",
-                "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
+                "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
               }
             },
             {
@@ -7961,7 +7961,7 @@
               "fieldName": "tone",
               "inheritedFrom": {
                 "name": "MixinControlSurface",
-                "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
+                "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
               }
             },
             {
@@ -8124,7 +8124,7 @@
           "mixins": [
             {
               "name": "MixinControlSurface",
-              "module": "/src/mixins/mixin-control-surface/mixin-control-surface.js"
+              "module": "/src/shared/mixin-control-surface/mixin-control-surface.js"
             }
           ],
           "superclass": {
@@ -21761,7 +21761,7 @@
               "reflects": true,
               "inheritedFrom": {
                 "name": "MixinControlSurface",
-                "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
+                "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
               }
             },
             {
@@ -21775,7 +21775,7 @@
               "reflects": true,
               "inheritedFrom": {
                 "name": "MixinControlSurface",
-                "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
+                "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
               }
             },
             {
@@ -22503,7 +22503,7 @@
           "mixins": [
             {
               "name": "MixinControlSurface",
-              "module": "/src/mixins/mixin-control-surface/mixin-control-surface.js"
+              "module": "/src/shared/mixin-control-surface/mixin-control-surface.js"
             }
           ],
           "superclass": {
@@ -22543,7 +22543,7 @@
               "fieldName": "emphasis",
               "inheritedFrom": {
                 "name": "MixinControlSurface",
-                "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
+                "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
               }
             },
             {
@@ -22555,7 +22555,7 @@
               "fieldName": "tone",
               "inheritedFrom": {
                 "name": "MixinControlSurface",
-                "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
+                "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
               }
             },
             {
@@ -36737,7 +36737,7 @@
               "reflects": true,
               "inheritedFrom": {
                 "name": "MixinControlSurface",
-                "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
+                "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
               }
             },
             {
@@ -36751,7 +36751,7 @@
               "reflects": true,
               "inheritedFrom": {
                 "name": "MixinControlSurface",
-                "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
+                "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
               }
             },
             {
@@ -37377,7 +37377,7 @@
               "fieldName": "emphasis",
               "inheritedFrom": {
                 "name": "MixinControlSurface",
-                "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
+                "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
               }
             },
             {
@@ -37389,7 +37389,7 @@
               "fieldName": "tone",
               "inheritedFrom": {
                 "name": "MixinControlSurface",
-                "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
+                "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
               }
             },
             {
@@ -37552,7 +37552,7 @@
           "mixins": [
             {
               "name": "MixinControlSurface",
-              "module": "/src/mixins/mixin-control-surface/mixin-control-surface.js"
+              "module": "/src/shared/mixin-control-surface/mixin-control-surface.js"
             }
           ],
           "superclass": {
@@ -49853,107 +49853,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/mixins/mixin-control-surface/mixin-control-surface.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "How much ink a control claims and what it means, for the three that are buttons.\n\n**It belongs here rather than in `core`.**\n`helix/core` is consumed by the headless tier, which must never take styling,\nand these two properties are purely presentational: they carry no behavior,\nno ARIA and no form participation, only which rules a stylesheet applies.\nDeclaring them in core would put a treatment on the tier whose whole purpose\nis not having one.\n\n**Why a mixin rather than inheritance.** `Button`, `IconButton` and\n`CopyButton` all want this pair, and the styled tier cannot get it by\nextending: each styled class extends its own base, which is what keeps a\ncontrol's behavior and its presentation in one branch. `CopyButton` already\ncomposes `IconButton`'s stylesheet, `[HelixIconButton.styles, styles]`, which\nis the same move for CSS; this is that move for API. Redeclared instead, the\nthree drift the first time one gains a value.",
-          "name": "MixinControlSurfaceInterface",
-          "members": [
-            {
-              "kind": "field",
-              "name": "emphasis",
-              "type": {
-                "text": "'ghost' | 'outlined' | 'solid' | 'subtle' | undefined"
-              },
-              "description": "How filled it is drawn. Absent is the control's own resting treatment."
-            },
-            {
-              "kind": "field",
-              "name": "tone",
-              "type": {
-                "text": "'accent' | 'danger' | 'neutral' | 'primary' | undefined"
-              },
-              "description": "What it means. Absent is `neutral`, which is the resting case."
-            }
-          ],
-          "helix": {}
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "MixinControlSurface",
-          "members": [
-            {
-              "kind": "field",
-              "name": "emphasis",
-              "type": {
-                "text": "'ghost' | 'outlined' | 'solid' | 'subtle' | undefined"
-              },
-              "description": "How filled it is drawn.\n\nNot `separation`: a Card's `outlined` says where a surface ends, and this\none says how much ink a control claims. One word cannot say both.\n\nReflected because the stylesheet selects on it, and undefaulted because\nit reflects: a reflected property with a default writes its attribute\nonto every host anybody renders. The resting treatment is the attribute's\nabsence, which each control names for itself, `outlined` on `Button` and\n`ghost` on `IconButton`.",
-              "attribute": "emphasis",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "tone",
-              "type": {
-                "text": "'accent' | 'danger' | 'neutral' | 'primary' | undefined"
-              },
-              "description": "What it means.\n\nThree and an accent, not the full status set. A tag reports a state and a\nbutton performs an action: a success button and a warning button are not\nthings anybody writes, and offering them invites a page where the color\nof a control means nothing in particular. `accent` is the second\nemphasis, a rotation off the brand seed rather than a color of its own,\nso it stays in relation when somebody rethemes.",
-              "attribute": "tone",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "emphasis",
-              "type": {
-                "text": "'ghost' | 'outlined' | 'solid' | 'subtle' | undefined"
-              },
-              "description": "How filled it is drawn.\n\nNot `separation`: a Card's `outlined` says where a surface ends, and this\none says how much ink a control claims. One word cannot say both.\n\nReflected because the stylesheet selects on it, and undefaulted because\nit reflects: a reflected property with a default writes its attribute\nonto every host anybody renders. The resting treatment is the attribute's\nabsence, which each control names for itself, `outlined` on `Button` and\n`ghost` on `IconButton`.",
-              "fieldName": "emphasis"
-            },
-            {
-              "name": "tone",
-              "type": {
-                "text": "'accent' | 'danger' | 'neutral' | 'primary' | undefined"
-              },
-              "description": "What it means.\n\nThree and an accent, not the full status set. A tag reports a state and a\nbutton performs an action: a success button and a warning button are not\nthings anybody writes, and offering them invites a page where the color\nof a control means nothing in particular. `accent` is the second\nemphasis, a rotation off the brand seed rather than a color of its own,\nso it stays in relation when somebody rethemes.",
-              "fieldName": "tone"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "Base",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "MixinControlSurfaceInterface",
-          "declaration": {
-            "name": "MixinControlSurfaceInterface",
-            "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MixinControlSurface",
-          "declaration": {
-            "name": "MixinControlSurface",
-            "module": "src/mixins/mixin-control-surface/mixin-control-surface.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/navigation/index.ts",
@@ -64090,7 +63989,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A sandboxed `<iframe>` pointed at `src`, which is a document the consumer\nprovides. That document imports whatever the examples need, listens for a\nrender message, and writes the markup into itself.\n\n**A frame rather than the page.** Rendering into the page meant an example\nwas styled by whatever surrounded it, which flatters the preview and lies\nabout it: an example that restyles `helix-card` restyled the sandbox too, a\nscript in an example ran against the real document, and a stray\n`position: fixed` escaped the pane. It also left nothing to capture console\noutput from, and the terminal has to come from somewhere.\n\nThe cost is that the frame starts empty. Styles and element definitions do\nnot cross into it, because a document has its own stylesheets and a window\nhas its own custom element registry, so `src` has to load them. That is the\nconsumer's document rather than something guessed at here.\n\n**The source is not trusted, and the frame is what makes that safe.**\n`sandbox=\"allow-scripts\"` and no `allow-same-origin`, so the document runs on\nan opaque origin: script in an example cannot reach this page, its storage,\nits cookies, or the editor the source was typed into. Without it they could,\nmeasured, through an `onerror` handler on an image that fails to load, which\n`innerHTML` does not strip the way it refuses a `<script>` tag. That is what\nlets a sandbox hold markup a reader pasted from somewhere, or one day arrived\nin a shared link, rather than only what its owner typed.\n\n`allow-forms` is granted because examples have forms in them and a submit\nthat silently does nothing is a worse lie than one that navigates a frame\nnobody is looking at. Top-level navigation, popups and modals are not.\n\n**`allow=\"clipboard-write *; fullscreen *\"`, and the stars matter.** Both\npolicies default to `self`, and a frame on an opaque origin is not `self`, so\nthe default denies both: a component that copies to the clipboard and a video\noffering a fullscreen button each become a control that silently does nothing,\na denied request rejecting a promise nobody was watching. Nothing else is\ngranted, and a copy still needs the reader's own gesture.",
+          "description": "A sandboxed `<iframe>` pointed at `src`, a document the consumer provides.\nThat document imports whatever the examples need, listens for a render\nmessage, and writes the markup into itself.\n\n**A frame rather than the page.** Rendering into the page meant an example\nwas styled by whatever surrounded it: an example restyling `helix-card`\nrestyled the sandbox too, a script ran against the real document, and a stray\n`position: fixed` escaped the pane. The cost is that the frame starts empty,\na document having its own stylesheets and a window its own registry, so `src`\nhas to load them.\n\n**The source is not trusted, and the frame is what makes that safe.**\n`sandbox=\"allow-scripts\"` and never `allow-same-origin`: the two together are\nthe same as no sandbox at all, a document on its own origin being able to\nreach up and remove the attribute.",
           "name": "HelixSandboxPreview",
           "cssParts": [
             {
@@ -64569,7 +64468,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Coordination is by event, the same way the accordion does it: a source pane\ndispatches `helix-before-edit`, which bubbles, and the sandbox hands the value to\nwhatever preview is slotted into it. Neither child knows the other exists, so\neither can be replaced or used alone.\n\nThe event carries the pane's `name`, which is what lets one sandbox hold\nseveral panes without the root identifying senders by reference. `html` is\nthe preview's markup and `css` is its stylesheet. A pane named anything else\nis showing something rather than driving it, and is ignored: the sandbox has\na pane rendering the example as JSX, and guessing would have put the text of\na React component into the preview.\n\n**The dividers are two nested `helix-splitter`s, not a grid this element\ndrags itself.** The pointer handling, the keyboard handling and the corner are\nall the splitter's, and the corner arrives on its own wherever a nested\nsplitter crosses the one it is in.\n\nThe panes are the inner splitter and the panel is the outer one, which is the\norder that makes the panel span the full width: the outer divider runs edge to\nedge and the inner stops at it.\n\n**Both are controlled from here, so `split` and `panel-size` stay the truth.**\nA splitter that owned its own position would leave this element reporting one\narrangement and showing another, and a consumer restoring a saved layout\nwrites to these two properties. Each splitter announces where it wants to go\nand this answers, which is the same contract a form control has with a\nframework.\n\n**The panel is in pixels here and a percentage in the splitter, and the\nconversion belongs here.** A terminal wants a number of lines rather than a\nshare of the window, so its height should not change when the window does. A\nsplitter has no business knowing that, so it stays percentage-pure and this\nelement, which does know what is in the panel, holds the box and converts.\nThat is also what keeps a stored `panelSize` from a previous visit meaning\nwhat it meant when it was written.",
+          "description": "Coordination is by event: a source pane dispatches `helix-before-edit`, which\nbubbles, and the sandbox hands the value to whatever preview is slotted into\nit. Neither child knows the other exists, so either can be replaced or used\nalone.\n\nThe event carries the pane's `name`, which is what lets one sandbox hold\nseveral panes: `html` is the preview's markup and `css` its stylesheet. A\npane named anything else is showing something rather than driving it, and is\nignored.\n\n**The dividers are two nested `helix-splitter`s**, not a grid this element\ndrags itself, so the pointer handling, the keyboard handling and the corner\nare all the splitter's. The panes are the inner splitter and the panel is the\nouter one, which is the order that makes the panel span the full width.",
           "name": "HelixSandbox",
           "cssProperties": [
             {
@@ -68888,6 +68787,107 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/mixin-control-surface/mixin-control-surface.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "How much ink a control claims and what it means, for the three that are buttons.\n\n**It belongs here rather than in `core`.**\n`helix/core` is consumed by the headless tier, which must never take styling,\nand these two properties are purely presentational: they carry no behavior,\nno ARIA and no form participation, only which rules a stylesheet applies.\nDeclaring them in core would put a treatment on the tier whose whole purpose\nis not having one.\n\n**Why a mixin rather than inheritance.** `Button`, `IconButton` and\n`CopyButton` all want this pair, and the styled tier cannot get it by\nextending: each styled class extends its own base, which is what keeps a\ncontrol's behavior and its presentation in one branch. `CopyButton` already\ncomposes `IconButton`'s stylesheet, `[HelixIconButton.styles, styles]`, which\nis the same move for CSS; this is that move for API. Redeclared instead, the\nthree drift the first time one gains a value.",
+          "name": "MixinControlSurfaceInterface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "emphasis",
+              "type": {
+                "text": "'ghost' | 'outlined' | 'solid' | 'subtle' | undefined"
+              },
+              "description": "How filled it is drawn. Absent is the control's own resting treatment."
+            },
+            {
+              "kind": "field",
+              "name": "tone",
+              "type": {
+                "text": "'accent' | 'danger' | 'neutral' | 'primary' | undefined"
+              },
+              "description": "What it means. Absent is `neutral`, which is the resting case."
+            }
+          ],
+          "helix": {}
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "MixinControlSurface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "emphasis",
+              "type": {
+                "text": "'ghost' | 'outlined' | 'solid' | 'subtle' | undefined"
+              },
+              "description": "How filled it is drawn.\n\nNot `separation`: a Card's `outlined` says where a surface ends, and this\none says how much ink a control claims. One word cannot say both.\n\nReflected because the stylesheet selects on it, and undefaulted because\nit reflects: a reflected property with a default writes its attribute\nonto every host anybody renders. The resting treatment is the attribute's\nabsence, which each control names for itself, `outlined` on `Button` and\n`ghost` on `IconButton`.",
+              "attribute": "emphasis",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tone",
+              "type": {
+                "text": "'accent' | 'danger' | 'neutral' | 'primary' | undefined"
+              },
+              "description": "What it means.\n\nThree and an accent, not the full status set. A tag reports a state and a\nbutton performs an action: a success button and a warning button are not\nthings anybody writes, and offering them invites a page where the color\nof a control means nothing in particular. `accent` is the second\nemphasis, a rotation off the brand seed rather than a color of its own,\nso it stays in relation when somebody rethemes.",
+              "attribute": "tone",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "emphasis",
+              "type": {
+                "text": "'ghost' | 'outlined' | 'solid' | 'subtle' | undefined"
+              },
+              "description": "How filled it is drawn.\n\nNot `separation`: a Card's `outlined` says where a surface ends, and this\none says how much ink a control claims. One word cannot say both.\n\nReflected because the stylesheet selects on it, and undefaulted because\nit reflects: a reflected property with a default writes its attribute\nonto every host anybody renders. The resting treatment is the attribute's\nabsence, which each control names for itself, `outlined` on `Button` and\n`ghost` on `IconButton`.",
+              "fieldName": "emphasis"
+            },
+            {
+              "name": "tone",
+              "type": {
+                "text": "'accent' | 'danger' | 'neutral' | 'primary' | undefined"
+              },
+              "description": "What it means.\n\nThree and an accent, not the full status set. A tag reports a state and a\nbutton performs an action: a success button and a warning button are not\nthings anybody writes, and offering them invites a page where the color\nof a control means nothing in particular. `accent` is the second\nemphasis, a rotation off the brand seed rather than a color of its own,\nso it stays in relation when somebody rethemes.",
+              "fieldName": "tone"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "Base",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MixinControlSurfaceInterface",
+          "declaration": {
+            "name": "MixinControlSurfaceInterface",
+            "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MixinControlSurface",
+          "declaration": {
+            "name": "MixinControlSurface",
+            "module": "src/shared/mixin-control-surface/mixin-control-surface.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/skeleton/index.ts",

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

@@ -5,43 +5,22 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @description
  * 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.
  *
  * @since 0.1.0
  * @status experimental

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

@@ -1,13 +1,13 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-display: inline-flex;
-position: relative;
-vertical-align: middle;
 
 --_badge-size: var(--helix-size-badge);
 --_badge-text: var(--helix-text-xs);
 --_badge-inset: var(--helix-space-2xs);
 --_badge-dot: var(--helix-space-xs);
+display: inline-flex;
+position: relative;
+vertical-align: middle;
 }
 
 [part="indicator"] {

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

@@ -25,11 +25,10 @@ vector-effect: non-scaling-stroke;
 }
 
 [part="bar"] {
-clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));
-fill: var(--_bar-chart-series);
-
 --_bar-chart-corners: var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0 0;
 --_bar-chart-base: 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0;
+clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));
+fill: var(--_bar-chart-series);
 }
 
 :host([direction="horizontal"]) [part="bar"] {
@@ -373,23 +372,22 @@ stroke-opacity: var(--_bar-chart-through, 1);
 
 [part="bar"][data-emphasis="outlined"],
 :host([emphasis="outlined"]) [part="bar"]:not([data-emphasis]) {
+
+--_bar-chart-foot: var(--_bar-chart-base);
 fill: var(--_bar-chart-shade);
 stroke: var(--_bar-chart-series);
 stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));
 vector-effect: non-scaling-stroke;
-
---_bar-chart-foot: var(--_bar-chart-base);
 }
 
 [part="bar"][data-emphasis="subtle"],
 :host([emphasis="subtle"]) [part="bar"]:not([data-emphasis]) {
-stroke: var(--_bar-chart-series);
-stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));
-vector-effect: non-scaling-stroke;
-
 --_bar-chart-area: 0.2;
 
 --_bar-chart-foot: var(--_bar-chart-base);
+stroke: var(--_bar-chart-series);
+stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));
+vector-effect: non-scaling-stroke;
 }
 
 [part="bar"] {

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

@@ -1,6 +1,6 @@
 import { HelixHeadlessButton } from '@fusion.dev/helix-headless/button';
 import type { CSSResultGroup } from 'lit';
-declare const HelixButton_base: (new (...args: any[]) => import("../../mixins/mixin-control-surface/mixin-control-surface.js").MixinControlSurfaceInterface) & typeof HelixHeadlessButton;
+declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mixin-control-surface/mixin-control-surface.js").MixinControlSurfaceInterface) & typeof HelixHeadlessButton;
 /**
  * @summary Triggers an action, submits a form, or navigates.
  *

package/dist/button/root/button-root.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessButton } from '@fusion.dev/helix-headless/button';
 import { property } from 'lit/decorators.js';
-import { MixinControlSurface } from '../../mixins/mixin-control-surface/mixin-control-surface.js';
+import { MixinControlSurface } from '../../shared/mixin-control-surface/mixin-control-surface.js';
 import { styles } from './button-root.css.js';
 let HelixButton = class HelixButton extends MixinControlSurface(HelixHeadlessButton) {
     static { this.styles = styles; }

package/dist/button-group/root/button-group-root.css.js

@@ -21,12 +21,12 @@ flex-direction: column;
 }
 
 :host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:first-child)) {
-margin-block-start: calc(var(--helix-border-thin) * -1);
-
-margin-inline-start: 0;
 --button-radius-start-start: 0;
 --button-radius-start-end: 0;
 --button-radius-start: var(--button-radius, var(--helix-radii-sm));
+margin-block-start: calc(var(--helix-border-thin) * -1);
+
+margin-inline-start: 0;
 }
 
 :host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:last-child)) {

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

@@ -1,5 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+--_callout-color: var(--helix-color-info);
 
 font-size: var(--helix-text-sm);
 background-color: var(
@@ -16,8 +17,6 @@ gap: var(--helix-space-sm);
 
 padding: var(--helix-space-md);
 padding-inline-start: calc(var(--helix-space-md) + var(--helix-border-thick));
-
---_callout-color: var(--helix-color-info);
 }
 
 :host::before {

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

@@ -1,5 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+
+--_card-inset: var(--card-padding, var(--helix-space-control));
+
+--_card-media: var(--card-media-size, 12rem);
 background-color: var(--card-background-color, var(--helix-color-surface));
 border: var(--card-border-width, var(--helix-border-surface)) solid
 var(--card-border-color, var(--helix-color-border));
@@ -20,22 +24,16 @@ padding: var(--_card-inset);
 transition:
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
 box-shadow var(--helix-duration-fast) var(--helix-easing-standard);
-
---_card-inset: var(--card-padding, var(--helix-space-control));
-
---_card-media: var(--card-media-size, 12rem);
 }
 
 :host([separation="elevated"]) {
-border-color: light-dark(transparent, var(--helix-color-border));
-
 --card-shadow: var(--helix-shadow-md);
+border-color: light-dark(transparent, var(--helix-color-border));
 }
 
 :host([separation="filled"]) {
-border-color: transparent;
-
 --card-shadow: none;
+border-color: transparent;
 }
 
 :host([separation="plain"]) {

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

@@ -238,6 +238,8 @@ var(--_carousel-per-view)
 }
 
 [part="indicator"] {
+
+--_carousel-indicator-motion: var(--helix-duration-slow) var(--helix-easing-emphasized);
 all: unset;
 background-color: var(--helix-color-border);
 block-size: var(--helix-space-xs);
@@ -248,8 +250,6 @@ inline-size: var(--helix-space-xs);
 transition:
 background-color var(--_carousel-indicator-motion),
 inline-size var(--_carousel-indicator-motion);
-
---_carousel-indicator-motion: var(--helix-duration-slow) var(--helix-easing-emphasized);
 }
 
 [part="indicator"][data-current] {

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

@@ -1,12 +1,11 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-display: inline-flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-
 --_checkbox-size: var(--checkbox-size, var(--helix-size-checkbox));
 
 --_field-control-inline-size: var(--_checkbox-size);
+display: inline-flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
 }
 
 [part="field"] {

package/dist/copy-button/root/copy-button-root.d.ts

@@ -1,7 +1,7 @@
 import { HelixHeadlessCopyButton } from '@fusion.dev/helix-headless/copy-button';
 import type { CSSResultGroup } from 'lit';
 import '../../tooltip/index.js';
-declare const HelixCopyButton_base: (new (...args: any[]) => import("../../mixins/mixin-control-surface/mixin-control-surface.js").MixinControlSurfaceInterface) & typeof HelixHeadlessCopyButton;
+declare const HelixCopyButton_base: (new (...args: any[]) => import("../../shared/mixin-control-surface/mixin-control-surface.js").MixinControlSurfaceInterface) & typeof HelixHeadlessCopyButton;
 /**
  * @summary A button that puts a string on the clipboard and says it did.
  *