@fusion.dev/helix 0.161.0 → 0.162.0

package/custom-elements.json

@@ -6628,18 +6628,6 @@
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "drawsInSoftware",
-              "privacy": "private",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "description": "Whether WebGL here is drawn on the CPU, asked before one is drawn into.\n\n**The shader costs what a GPU makes it cheap to ask for.** The note at the\ntop of this file measures it: on Metal the browser shares the compiled\nprogram and each aura after the first draws its opening frame in about 2ms,\nwhile under SwiftShader nothing is shared and each one compiles the pipeline\nagain for about 450ms. Measured again 15 Sep 2026 on a page of 720 pixel\nauras, SwiftShader against the same page with this check in place: the worst\nframe gap went 568ms to 50ms with one aura, 1626ms to 34ms with three and\n3200ms to 42ms with six, and a page of three or six ran at 13 frames a\nsecond before and at the display's own rate after. What that buys is a field\na reader barely sees behind content, against a gradient ramped from the same\ntokens. So the software path takes the fallback.\n\n**The unmasked name is the only one that answers.** `gl.RENDERER` is masked\nto `WebKit WebGL` on Chromium, the same string on SwiftShader and on Metal,\nand `WEBGL_debug_renderer_info` is what lifts the mask.\n\n**An unreadable renderer draws**, which is the safe direction and not the\ntidy one. The extension is optional and is withheld deliberately: Firefox's\n`privacy.resistFingerprinting` and Safari's equivalent both drop it, and a\nbrowser may drop it at any time, since a GPU name is a fingerprinting\nsurface. Treating \"we cannot tell\" as software would take the shader away\nfrom every reader on a machine that hides its hardware, which is a real GPU\nfar more often than not. Treating it as hardware costs a machine that hides\na software renderer the 450ms, which is the cost the component has today.\n\n**A probe context of its own, and given straight back.** Asking the\nelement's own canvas would spend it: `build` below is written around a\ncanvas whose context was force-lost never yielding a working one again, and\nthe probe has to release what it took or a page of auras runs the browser\ninto its cap of about sixteen. One pixel by one, and released through\n`WEBGL_lose_context` the same way `drop` does.\n\n**The same attributes the real context asks for**, because they are part of\nthe question: `powerPreference` can select a different adapter, so a probe\nasking for a high-performance context would name a GPU the drawing one is\nnever given.\n\n**Asked per context rather than once for the page.** The answer is not\nfixed: a GPU process that crashes takes the page down to SwiftShader for\nthe rest of its life, and an aura rebuilding after that should get the\ncurrent answer rather than the one from before. It costs a context creation\nand two calls, measured 15 Sep 2026 at about 2ms under SwiftShader and 2ms\non Metal, against the 450ms and 135ms first draws it stands in front of, and\nit happens once per context rather than once per frame."
-            },
             {
               "kind": "method",
               "name": "build",
@@ -100077,6 +100065,14 @@
             "module": "src/steps/index.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/strands/index.js"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -189007,6 +189003,2498 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/strands/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/strands/root/strands-root.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/strands/stop/strands-stop.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/strands/palette.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "RESTING_PALETTE",
+          "type": {
+            "text": "StrandsPalette"
+          },
+          "default": "{ glow: [0.88, 0.88, 0.88], ground: [0, 0, 0], light: false, peak: [1, 1, 1], tint: [0.6, 0.6, 0.6], }",
+          "description": "The default theme's dark page, ink on black, which is drawn until a read."
+        },
+        {
+          "kind": "function",
+          "name": "paletteOf",
+          "return": {
+            "type": {
+              "text": "StrandsPalette"
+            }
+          },
+          "parameters": [
+            {
+              "name": "style",
+              "type": {
+                "text": "StrandsPaletteStyle"
+              },
+              "description": "The canvas's computed style."
+            },
+            {
+              "name": "read",
+              "type": {
+                "text": "(value: string) => ColorBytes | undefined"
+              },
+              "description": "Turns a resolved color into bytes, `undefined` where it cannot."
+            }
+          ],
+          "description": "The palette, from the colors the canvas's stylesheet resolved for it.\n\n**Carried on color properties of the canvas, which a canvas never paints**,\nthe way `Aura` carries its ramp: a custom property is handed back as the\ntext that was written, and a color property is resolved by the engine first.\nRead there, each color takes the `--strands-*` hook a page wrote anywhere\nabove the element, and the token otherwise:\n\n- `color`: `--strands-glow`, or `primary`.\n- `text-decoration-color`: `--strands-tint`, or `info`.\n- `outline-color`: `--strands-ground`, or the background.\n- `caret-color` and `column-rule-color`: `--strands-peak`, or the dark and\n  the light page's own peak.\n\n**The ground says which way the page runs**, read from its luminance rather\nthan asked of the color mode, which is a private token this tier may not\nreach for. A dark page adds light toward a bright peak; a light page darkens\ntoward a deep one, because light added to near-white is invisible."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RESTING_PALETTE",
+          "declaration": {
+            "name": "RESTING_PALETTE",
+            "module": "src/strands/palette.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "paletteOf",
+          "declaration": {
+            "name": "paletteOf",
+            "module": "src/strands/palette.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/strands/path.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "MAX_POINTS",
+          "type": {
+            "text": "number"
+          },
+          "default": "96",
+          "description": "The most points a path may carry, which is the length of the shader's\nuniform array.\n\nWebGL2 guarantees 256 vertex uniform vectors, and this takes 96 of them. A\npage-long ribbon spends one point per half screen, so 96 covers a page more\nthan forty screens long; a longer one keeps its first 96 points and fades."
+        },
+        {
+          "kind": "function",
+          "name": "boxPath",
+          "return": {
+            "type": {
+              "text": "PathPoint[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "StrandsVariant"
+              },
+              "description": "The form to draw."
+            },
+            {
+              "name": "at",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Where it sits across the box, as a share of the width. A wave crosses the whole width and does not read it."
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "number"
+              },
+              "description": "The box's height, in CSS pixels. Its width needs no argument: `x` is a share of it."
+            }
+          ],
+          "description": "The ribbon drawn inside its own box, which is what an element without\n`travel` shows."
+        },
+        {
+          "kind": "function",
+          "name": "pagePath",
+          "return": {
+            "type": {
+              "text": "PathPoint[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "stops",
+              "type": {
+                "text": "readonly PlacedStop[]"
+              },
+              "description": "The resolved stops, in any order."
+            },
+            {
+              "name": "fill",
+              "type": {
+                "text": "StrandsVariant"
+              },
+              "description": "The root's own form, for the stretches no stop claims."
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "number"
+              },
+              "description": "The viewport's width, in CSS pixels."
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "number"
+              },
+              "description": "The viewport's height, in CSS pixels."
+            },
+            {
+              "name": "page",
+              "type": {
+                "text": "number"
+              },
+              "description": "The page's height, in CSS pixels."
+            }
+          ],
+          "description": "The ribbon laid down a whole page, which is what an element with `travel`\nshows.\n\nEach stop places its form at its target, in page order. Between two stops\nthe ribbon fills the gap with soft S-curves in `fill`'s place, except\nbetween two waves, where it turns off screen so each wave reads alone.\nWithout stops, `fill` runs the length of the page: a fan opens the page and\na ribbon follows it, waves cross every screen and a third, and a ribbon\nmeanders the whole way. After a last wave the ribbon does not come back, so\nthe page ends on the wave."
+        },
+        {
+          "kind": "function",
+          "name": "catmull",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
+            {
+              "name": "p0",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "p1",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "p2",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "p3",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "f",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "One coordinate of a uniform Catmull-Rom segment, the same one the shader runs."
+        },
+        {
+          "kind": "function",
+          "name": "lookup",
+          "return": {
+            "type": {
+              "text": "Float32Array"
+            }
+          },
+          "parameters": [
+            {
+              "name": "points",
+              "type": {
+                "text": "readonly PathPoint[]"
+              }
+            }
+          ],
+          "description": "The centerline's `y` at even steps of its parameter, for finding which\nstretch is on screen.\n\nTwenty-four samples a segment, which is finer than any segment is tall on a\nscreen, and computed once a layout rather than once a frame."
+        },
+        {
+          "kind": "function",
+          "name": "visibleRange",
+          "return": {
+            "type": {
+              "text": "readonly [number, number]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "table",
+              "type": {
+                "text": "Float32Array"
+              }
+            },
+            {
+              "name": "top",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "bottom",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "The stretch of the path that lies between `top` and `bottom`, as a range of\nits parameter.\n\nDrawing only that stretch is what keeps a page-long ribbon as fine as a\nscreen-sized one: the same number of segments, spent where a reader looks.\nA path that does not reach the window answers an empty range."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MAX_POINTS",
+          "declaration": {
+            "name": "MAX_POINTS",
+            "module": "src/strands/path.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "boxPath",
+          "declaration": {
+            "name": "boxPath",
+            "module": "src/strands/path.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "pagePath",
+          "declaration": {
+            "name": "pagePath",
+            "module": "src/strands/path.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "catmull",
+          "declaration": {
+            "name": "catmull",
+            "module": "src/strands/path.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "lookup",
+          "declaration": {
+            "name": "lookup",
+            "module": "src/strands/path.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "visibleRange",
+          "declaration": {
+            "name": "visibleRange",
+            "module": "src/strands/path.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/strands/renderer.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "MAX_STRANDS",
+          "type": {
+            "text": "number"
+          },
+          "default": "340",
+          "description": "The most strands a ribbon draws, at `density` 1."
+        },
+        {
+          "kind": "variable",
+          "name": "MIN_STRANDS",
+          "type": {
+            "text": "number"
+          },
+          "default": "60",
+          "description": "The fewest, at `density` 0. Fewer stops reading as a ribbon at all."
+        },
+        {
+          "kind": "class",
+          "description": "The pipeline, on one context: strands and dust added into a float buffer,\ntwo levels of bloom, and the composite over the page color.\n\n**Created whole or not at all.** `create` answers `null` when any program\nfails to link, so the element has one question to ask and one fallback to\ntake, and never draws half a pipeline.\n\n**Float buffers where the GPU offers them, and eight bits where it does not.**\nLight is added strand by strand, and a hot bend sums far past `1`; an eight\nbit buffer clips it, so there the energy is scaled down on the way in and\nback up in the composite, which keeps the bend hot at the cost of some\ngradation in the dimmest strands.",
+          "name": "StrandsRenderer",
+          "members": [
+            {
+              "kind": "field",
+              "name": "gl",
+              "type": {
+                "text": "WebGL2RenderingContext"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "gl"
+            },
+            {
+              "kind": "field",
+              "name": "line",
+              "type": {
+                "text": "Program"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "dust",
+              "type": {
+                "text": "Program"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "down",
+              "type": {
+                "text": "Program"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "blur",
+              "type": {
+                "text": "Program"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "composite",
+              "type": {
+                "text": "Program"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "ribbon",
+              "type": {
+                "text": "WebGLVertexArrayObject"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "empty",
+              "type": {
+                "text": "WebGLVertexArrayObject"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "buffers",
+              "type": {
+                "text": "WebGLBuffer[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "half",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "scale",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "targets",
+              "type": {
+                "text": "{\n    far: Target\n    farSwap: Target\n    near: Target\n    nearSwap: Target\n    scene: Target\n  } | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "create",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "StrandsRenderer | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "gl",
+                  "type": {
+                    "text": "WebGL2RenderingContext"
+                  }
+                }
+              ],
+              "description": "The pipeline on `gl`, or `null` when a program does not link, which the\nelement answers with its gradient."
+            },
+            {
+              "kind": "method",
+              "name": "resize",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "width",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "height",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Sizes the buffers to the drawing buffer. The bloom runs at a quarter and a\ntwelfth of it, which is where a glow's width lives and a twentieth of the\nfill."
+            },
+            {
+              "kind": "method",
+              "name": "dispose",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Deletes everything made on the context, ahead of losing it."
+            },
+            {
+              "kind": "method",
+              "name": "release",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "target",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Target | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "width",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "height",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "use",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "program",
+                  "type": {
+                    "text": "Program"
+                  }
+                },
+                {
+                  "name": "frame",
+                  "type": {
+                    "text": "StrandsFrame"
+                  }
+                }
+              ],
+              "description": "The uniforms every strand and speck reads."
+            },
+            {
+              "kind": "method",
+              "name": "shrink",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "from",
+                  "type": {
+                    "text": "Target"
+                  }
+                },
+                {
+                  "name": "into",
+                  "type": {
+                    "text": "Target"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "smear",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "Target"
+                  }
+                },
+                {
+                  "name": "swap",
+                  "type": {
+                    "text": "Target"
+                  }
+                },
+                {
+                  "name": "radius",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "A separable blur of `target`, through `swap` and back."
+            },
+            {
+              "kind": "method",
+              "name": "pass",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "program",
+                  "type": {
+                    "text": "Program"
+                  }
+                },
+                {
+                  "name": "into",
+                  "type": {
+                    "text": "Target"
+                  }
+                },
+                {
+                  "name": "bind",
+                  "type": {
+                    "text": "() => void"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "texture",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "program",
+                  "type": {
+                    "text": "Program"
+                  }
+                },
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "unit",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "from",
+                  "type": {
+                    "text": "Target"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "vec3",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "program",
+                  "type": {
+                    "text": "Program"
+                  }
+                },
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "readonly [number, number, number]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "float",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "program",
+                  "type": {
+                    "text": "Program"
+                  }
+                },
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            }
+          ],
+          "helix": {}
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MAX_STRANDS",
+          "declaration": {
+            "name": "MAX_STRANDS",
+            "module": "src/strands/renderer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MIN_STRANDS",
+          "declaration": {
+            "name": "MIN_STRANDS",
+            "module": "src/strands/renderer.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "StrandsRenderer",
+          "declaration": {
+            "name": "StrandsRenderer",
+            "module": "src/strands/renderer.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/strands/root/strands-root.css.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/strands/root/strands-root.css.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/strands/root/strands-root.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Hundreds of thin strands are drawn as one ribbon, and the light they add\ntogether is bloomed, so where they converge the ribbon burns hot. The ribbon\nmoves on its own all the time: it sways and breathes, its strands wave and\nroll over one another, and light runs along them.\n\nIts palette comes from the tokens. The strands are `--helix-color-primary`,\na few are `--helix-color-info` for depth, and the page they light is\n`--helix-color-background`. On a light page the light becomes ink, because\nlight added to near-white cannot be seen.\n\n**Three forms, set with `variant`.** `fan` is a tight, bright bend with its\narms opening to the right. `ribbon`, the default, is a broad, soft ribbon in\nlong curves. `waves` is sharp strands crossing the full width.\n\n**In its own box, by default.** The element fills the box it is given, the\nway an image does, and `at` places the fan's bend or the ribbon's axis across\nit. Content placed inside sits over the ribbon, in the `content` part.\n\n**Down the whole page, with `travel`.** The element fixes itself behind the\npage, on `--helix-layer-beneath`, and lays one ribbon from the top of the page to the\nbottom, so scrolling travels along it. Put `helix-strands-stop` elements\ninside to pin a form to a section: each names an element with `for` and says\nwhich form the ribbon takes there. Between stops the ribbon fills the gap in\nits own `variant`, and between two waves it turns off screen so each wave\nreads alone. Set `z-index` on the element to move it.\n\nThe ribbon stops moving in these cases:\n- `prefers-reduced-motion` is set. The element shows one still frame, and in\n  `travel` still follows the scroll, without easing.\n- The element is off screen or in a background tab.\n\nIt shows a gradient from the same tokens in these cases, and matches\n`:state(fallback)` and sends `helix-strands-fallback` with the reason:\n- The renderer draws on the CPU, such as a headless browser or a machine with\n  no usable GPU.\n- There is no WebGL, or the browser took the drawing context back.\n\nStrands is styled only and has behavior, as `Aura` does: its behavior is\ndrawing to a canvas, so there is no structure for a headless version to hold.",
+          "name": "HelixStrands",
+          "cssProperties": [
+            {
+              "description": "The color of most strands. Defaults to `--helix-color-primary`.",
+              "name": "--strands-glow"
+            },
+            {
+              "description": "The page the light is added to. Defaults to `--helix-color-background`.",
+              "name": "--strands-ground"
+            },
+            {
+              "description": "The hottest strands, and on a light page the ink the light darkens toward. Defaults to `--helix-color-primary-hover` on a dark page and `--helix-color-primary-active` on a light one.",
+              "name": "--strands-peak"
+            },
+            {
+              "description": "The color of a few strands, for depth. Defaults to `--helix-color-info`.",
+              "name": "--strands-tint"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The surface the ribbon draws into.",
+              "name": "canvas"
+            },
+            {
+              "description": "The box over the ribbon that holds the content. It covers the element.",
+              "name": "content"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Content drawn over the ribbon, such as a heading, and the `helix-strands-stop` elements that pin its forms in `travel`.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "at",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Where the form sits across the box, as a share of the width: the fan's\nbend or the ribbon's axis. `0` is the left edge and `1` the right. A wave\ncrosses the whole width and does not read it. Unset, a fan bends at `0.4`\nand a ribbon runs down the middle.\n\n**A share rather than a length**, so the ribbon keeps its place when the\nbox changes shape. Read inside a box only; in `travel` each stop has its\nown.",
+              "attribute": "at"
+            },
+            {
+              "kind": "field",
+              "name": "density",
+              "type": {
+                "text": "number"
+              },
+              "default": "0.8",
+              "description": "How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and\nforty. Clamped to that range.",
+              "attribute": "density"
+            },
+            {
+              "kind": "field",
+              "name": "gain",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Overall brightness, as a multiplier on the light.",
+              "attribute": "gain"
+            },
+            {
+              "kind": "field",
+              "name": "softness",
+              "type": {
+                "text": "number"
+              },
+              "default": "0.55",
+              "description": "The share of strands drawn out of focus where the ribbon is wide, from `0`,\nevery strand sharp, to `1`, every one soft. Clamped to that range. A tight\nform, such as a fan's bend or a wave, stays sharp whatever this says.",
+              "attribute": "softness"
+            },
+            {
+              "kind": "field",
+              "name": "speed",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How fast the ribbon moves, as a multiplier on time. `0` holds it still.",
+              "attribute": "speed"
+            },
+            {
+              "kind": "field",
+              "name": "spread",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How wide the ribbon is, as a multiplier on each form's own width.",
+              "attribute": "spread"
+            },
+            {
+              "kind": "field",
+              "name": "travel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the ribbon is laid down the whole page, so scrolling travels along\nit.\n\nReflected because the stylesheet selects on it: in `travel` the host fixes\nitself to the viewport, behind the page.",
+              "attribute": "travel",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'fan' | 'ribbon' | 'waves' | undefined"
+              },
+              "description": "The form the ribbon takes. When it is not set, the form is `ribbon`. In\n`travel`, the form of every stretch no stop claims.",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "palette",
+              "type": {
+                "text": "StrandsPalette"
+              },
+              "privacy": "private",
+              "default": "{ ...RESTING_PALETTE }",
+              "description": "The colors, resolved from what the canvas carries. Aura's approach, in `readPalette`."
+            },
+            {
+              "kind": "field",
+              "name": "carried",
+              "type": {
+                "text": "{ canvas: HTMLCanvasElement; style: CSSStyleDeclaration; text: string } | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "The canvas's live computed style, and the five colors it last carried."
+            },
+            {
+              "kind": "field",
+              "name": "fallback",
+              "type": {
+                "text": "HelixStrandsFallbackEvent['detail']['reason'] | undefined"
+              },
+              "privacy": "private",
+              "description": "Why the gradient shows, while it does, or `undefined` while the ribbon draws."
+            },
+            {
+              "kind": "field",
+              "name": "refused",
+              "type": {
+                "text": "HelixStrandsFallbackEvent['detail']['reason']"
+              },
+              "privacy": "private",
+              "default": "'unavailable'",
+              "description": "Why the last `build` drew nothing, for the fallback it leads to."
+            },
+            {
+              "kind": "field",
+              "name": "canvas",
+              "type": {
+                "text": "HTMLCanvasElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "gl",
+              "type": {
+                "text": "WebGL2RenderingContext | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "renderer",
+              "type": {
+                "text": "StrandsRenderer | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "release",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "The pending context release, or `0`. Canceled by a reconnection."
+            },
+            {
+              "kind": "field",
+              "name": "CONTEXT",
+              "type": {
+                "text": "WebGLContextAttributes"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "{ alpha: true, antialias: false, depth: false, powerPreference: 'low-power', stencil: false, }",
+              "description": "What every context is asked for, the same as Aura's and the probe's."
+            },
+            {
+              "kind": "field",
+              "name": "elapsed",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "Seconds of motion so far, accumulated so a paused tab resumes where it was."
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "The drawing buffer, in device pixels, and the ratio it was sized at."
+            },
+            {
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "dpr",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "1"
+            },
+            {
+              "kind": "field",
+              "name": "box",
+              "type": {
+                "text": "object"
+              },
+              "privacy": "private",
+              "default": "{ height: 1, width: 1 }",
+              "description": "The element's box, in CSS pixels, from the last measurement."
+            },
+            {
+              "kind": "field",
+              "name": "points",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Float32Array(MAX_POINTS * 4)",
+              "description": "The path, padded to the shader's array, and how many points are in use."
+            },
+            {
+              "kind": "field",
+              "name": "count",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "table",
+              "type": {
+                "text": "Float32Array"
+              },
+              "privacy": "private",
+              "default": "new Float32Array(1)",
+              "description": "In `travel`, the path's `y` at even steps of its parameter."
+            },
+            {
+              "kind": "field",
+              "name": "offset",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "In `travel`, the scroll position the ribbon is drawn at, easing toward the page's."
+            },
+            {
+              "kind": "field",
+              "name": "opened",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the opening frame has been drawn. Aura's settle: see `open`."
+            },
+            {
+              "kind": "field",
+              "name": "opening",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "openBy",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "laying",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "A layout booked for the next frame, so a burst of changes lays out once."
+            },
+            {
+              "kind": "field",
+              "name": "pageObserver",
+              "type": {
+                "text": "ResizeObserver | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "In `travel`, what tells the element that the page or its stops moved."
+            },
+            {
+              "kind": "field",
+              "name": "stopObserver",
+              "type": {
+                "text": "MutationObserver | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "gate",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PaintGateController(this, { canRun: () => !!this.gl && !this.gl.isContextLost() && this.width > 0 && this.opened, onFrame: (delta) => { this.advance(delta) }, onMotion: (reduced) => { if (reduced) { this.paintOnce() } }, onResize: () => { this.resized() }, })"
+            },
+            {
+              "kind": "method",
+              "name": "start",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Everything the canvas needs, from either lifecycle. Aura's `start`, line for line in intent."
+            },
+            {
+              "kind": "method",
+              "name": "build",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "The context and the pipeline, from whatever canvas can still give one. A\nspent canvas is replaced rather than re-asked, for the reason Aura's\n`build` records."
+            },
+            {
+              "kind": "method",
+              "name": "prepare",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "The pipeline on the context already held, which a restored context comes back to alone."
+            },
+            {
+              "kind": "field",
+              "name": "drop",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Gives the context back, once nothing has claimed the element again. Aura's `drop`."
+            },
+            {
+              "kind": "field",
+              "name": "handleLost",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Stops for a context the browser took, hides the canvas, and asks for it back."
+            },
+            {
+              "kind": "field",
+              "name": "handleRestored",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Draws again on the context the browser gave back."
+            },
+            {
+              "kind": "method",
+              "name": "fallBack",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "reason",
+                  "type": {
+                    "text": "HelixStrandsFallbackEvent['detail']['reason']"
+                  }
+                }
+              ],
+              "description": "Shows the gradient, and says so once each time it starts to."
+            },
+            {
+              "kind": "method",
+              "name": "readPalette",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The colors, converted only when the text the canvas carries moved."
+            },
+            {
+              "kind": "field",
+              "name": "handleRestyle",
+              "privacy": "private",
+              "readonly": true,
+              "description": "One frame for a stopped loop, once a color the canvas carries has moved."
+            },
+            {
+              "kind": "method",
+              "name": "measure",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Re-reads the box and resizes the drawing buffer to match. Called from the\ngate's observer, never per frame, and an empty box is layout that has not\nhappened: Aura's `measure` records both.\n\n**A ratio under Aura's**, 0.75 of the device's up to two, because a strand\nis a line rather than a field and the bloom hides the rest; the buffer's\nedge and pixel ceilings then apply as they do there."
+            },
+            {
+              "kind": "method",
+              "name": "layout",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Lays the path out again: inside the box, or down the page from the stops.\n\nCheap, a few dozen points and a table of a few hundred numbers, so it runs\non any change that could move the path rather than working out which did."
+            },
+            {
+              "kind": "method",
+              "name": "placedStops",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "PlacedStop[]"
+                }
+              },
+              "description": "The stops inside, each with its target's place on the page. A stop naming nothing is skipped."
+            },
+            {
+              "kind": "method",
+              "name": "watchPage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "on",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "In `travel`, follows the page: the scroll it travels along, the page's\nheight and its sections moving, and the stops being changed."
+            },
+            {
+              "kind": "field",
+              "name": "relayout",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A layout on the next frame, once, however many changes asked for one."
+            },
+            {
+              "kind": "field",
+              "name": "handleScroll",
+              "privacy": "private",
+              "readonly": true,
+              "description": "The page scrolled. A running loop eases toward it on its own; a stopped\none, for a reader who asked for no motion, jumps there and paints once."
+            },
+            {
+              "kind": "method",
+              "name": "paint",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resized",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The box changed: measure, and repaint at once, because resizing cleared the buffer."
+            },
+            {
+              "kind": "method",
+              "name": "open",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The opening frame, one animation frame after the box last changed. Aura's `open`."
+            },
+            {
+              "kind": "method",
+              "name": "paintOnce",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "One frame, now, for a change that has to show while the loop is stopped."
+            },
+            {
+              "kind": "field",
+              "name": "CAPPED",
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "description": "The shortest gap between two frames, in seconds, while nothing is being\nfollowed. Aura's cap, for Aura's reason: a drifting ribbon does not need\nthe display's rate."
+            },
+            {
+              "kind": "field",
+              "name": "held",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "What the skipped frames were worth, spent on the next one drawn."
+            },
+            {
+              "kind": "method",
+              "name": "advance",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "delta",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "tier",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "'helix-headless-'",
+              "description": "The prefix this tier registers its elements under.\n\n**A component that renders another renders its own tier's version of it**,\nso `helix-headless-pagination-size` composes `helix-headless-select` and\n`helix-pagination-size` composes `helix-select`. One template says\n`${this.tag('select')}` and each tier answers with its own name.\n\n**The public tag may not be the composed one, in either tier.** Using it\ncosts three things: the name means two different things depending on what a\nconsumer imported, the headless tier composes an element it does not ship,\nand the composition cannot be tested there at all, because there is no\n`helix-select` on that tier to test it against.\n\n**A prefix rather than an override per composition**, which was the first\nplan and does not compile. An override re-renders the fragment from the\nsubclass, and the fragment reads members the base keeps private:\n`PaginationSize` alone would have had to widen `options`, `current` and\n`handleChange` to `protected` so a subclass could say the same thing again.\nSixteen families of that is a lot of encapsulation spent on saying one\nword differently.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "tag",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "StaticValue"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "One composed tag, as a static value a template can interpolate.\n\nWhat `unsafeStatic` returns, safe by construction: the name is a literal in\nour own source and the prefix is one of two strings this class defines.\nCalled per render and not cached, which costs nothing, because\n`static-html` keys its template cache on the joined string rather than on\nthe object.\n\n**Written out rather than imported, for every element that never renders\none.** `lit/static-html.js` declares no side effects, so importing\n`unsafeStatic` alone kept the module's three `withStatic` calls in every\nbundle: about 210 bytes gzipped on each of the families that compose no\ntag, Divider and Badge among them. The value is lit's cross-copy protocol,\nkeyed by `Symbol.for('')` so that two copies of lit on a page read each\nother's, and a spec holds it equal to `unsafeStatic`'s.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "partNamed",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "T | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "One of this element's own parts, by name, or null where it is not rendered.\n\nNot `part`, which every element already has: `Element.part` is the\n`DOMTokenList` of the names the element itself carries, and a method under\nthat name is a type error on every subclass.\n\n**One guard for every lookup.** Lit's server shim has no `querySelector`\non the render root, so a lookup reached during a server render, from a\ngetter a template reads or from `willUpdate`, throws there and nowhere\nelse. Four spellings of the same guard had grown across the library, and\na fifth site with none. Null on the server, which is what the rest of the\ncode already treats a part that has not rendered as.\n\n**`~=` and not `=`.** A part drawn in a state carries a second name while\nthe state holds, `part=\"page page-current\"`, and an exact match stops\nfinding it for exactly as long as it is the one that matters.\n\n`helix component`'s `selectors` reads these calls the way it reads a\n`querySelector('[part=\"x\"]')`, so a name nothing renders is a finding\nrather than a null an optional chain swallows.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "internals",
+              "type": {
+                "text": "ElementInternals"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "description": "The element's semantics, set without touching the DOM.\n\n`ElementInternals` sets the implicit role, which an author's own `role`\nattribute still overrides, and it writes no attribute. Setting `role` on the\nhost directly would: that is an attribute the element gives itself after it\nupgrades, which a React consumer's server markup never had, and hydration\nreports it as a mismatch.\n\nAvailable during server rendering. Lit's shim implements `attachInternals`,\nso nothing here needs a guard.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "toggleState",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "on",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Records a boolean fact about this element as a custom state.\n\n**The host belongs to whoever rendered it, and a component's own\nbookkeeping may not be kept there.** An attribute written on the first\nupdate is markup a consumer's server never sent, so a React consumer\nhydrates a DOM that has gained attributes since and reports a mismatch it\nwill not patch up. A custom state is not in the DOM at all: it carries the\nfact to a stylesheet through `:state()` and leaves the markup alone, so the\nserver's output and the client's agree by construction.\n\n`SETTLED` carries the long version of that argument; `checked`, `open`,\n`invalid` and `has-label` are recorded the same way, each of them a state a\n`default-*` attribute resolves before React reaches the node.\n\n**Deferring the definitions is not a fix and could not be.** Importing them\nfrom an effect so the upgrades fall the other side of hydration works only\nwhile hydration is one pass: anything that splits it, a streamed segment or\na suspended boundary, puts an upgrade back inside the window. Timing cannot\nbe the guarantee when the fact is kept somewhere React reconciles.\n\nFeature-tested rather than assumed, the way `hostAria` tests element\nreferences. An engine without `CustomStateSet` records nothing and keeps\nwhatever the resting rule draws, which is the safe direction to fail.\n\n**The engines the test is for are browsers**: Safari below 17.4 and Firefox\nbelow 126, where the write is a `TypeError`, so a component bypassing this\nfails to render rather than rendering without whatever the state draws.\nLit's server shim sets `states`, so the guard passes there and records a\nstate nothing reads, which is harmless.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "whenSettled",
+              "type": {
+                "text": "Promise<void>"
+              },
+              "readonly": true,
+              "description": "Resolves a frame after the first update, when transitions are switched on.\n\n**Named `whenSettled` because `settled` is taken four times over**, by\nImage, Splitter and both color controls, none of them about transitions. A\nbase class takes the name every subclass then cannot use.\n\n**The state it reports cannot be watched, which is why this exists.** A\ncustom state is deliberately not in the DOM, so there is no\n`MutationObserver` equivalent for `ElementInternals.states`. Await this\ninstead.\n\nSeparate from `updateComplete`, which resolves in the microtask checkpoint\nthe suppression is still active in. That is the distinction `readyToMove`\nin `@fusion.dev/helix-testing` is written around.\n\nIt never resolves where `requestAnimationFrame` never fires, which is a\nserver, a hidden tab, and happy-dom. Callers that must not hang there race\nit against a timeout, as the happy-dom harness's `readyToMove` does. The\nbrowser harness's awaits it alone: a browser always runs the frame, and a\ntimer beside it was a bet on how long one takes, which a busy run lost.",
+              "default": "new Promise<void>((resolve) => { this.resolveSettled = resolve })",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "resolveSettled",
+              "type": {
+                "text": "() => void"
+              },
+              "privacy": "private",
+              "description": "Resolves `whenSettled`, once, from the frame that records the state.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "fromServer",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the shadow root was a server's, parsed from declarative shadow DOM.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hydrating",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Whether this update is hydrating a server's markup, and so has to render\nexactly what the server rendered.\n\n**Lit hydrates by assuming the markup already shows the first render.** A\nvalue that differs is recorded and never written, so the page keeps the\nserver's, and a template that differs throws. The server has no children,\nso anything a component reads from its children waits for the update after\nhydration, which `finishHydration` asks for. Without a server's markup the\nfirst render reads them and there is one render.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "serverRendered",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Whether this element hydrated a server's markup rather than rendering its own.\n\nFor what happened before hydration and cannot be heard after it: an image\nthe parser fetched fires `load` or `error` before any listener exists, so a\ncomponent asks the image instead, once, when this is true.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "finishHydration",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Asks for the update a hydration put off, so the reads it skipped happen.\n\nCalled from `firstUpdated`, the end of the hydrating update. The render it\nschedules can only follow that one, which is the exception Lit's\nchange-in-update warning names, and it happens only on a page a server\nrendered.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "childrenKnown",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Whether this render can know the children.\n\nA server cannot: its element shim carries attributes and no tree, so\n`children` is undefined there. A render hydrating what a server sent must\nnot, because it has to be the server's render. Anywhere else it can. A\ncomponent whose render depends on its children reads them through\n`knownChildren`, and treats \"not known\" as its own answer rather than as\n\"none\": a list that renders its empty state because nobody has looked yet is\nthe one thing an empty state must never do.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "knownChildren",
+              "type": {
+                "text": "Element[]"
+              },
+              "privacy": "protected",
+              "description": "The children a render may read: all of them where they are known, and none otherwise.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "assignsByName",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Whether this element's slots route by name although it asked to assign them\nby hand.\n\n**A declarative shadow root is always the by-name kind.** HTML has no way to\nask for manual assignment, so a component that assigns by hand and hydrates\na server's root gets one where `slot.assign()` does nothing, and its\nchildren land wherever their `slot` attribute sends them. The way through is\nto write that attribute, which is what `route` does. Only there: on a root\nthis element made, assignment stays manual and the consumer's markup is\nnever touched, which is what a React consumer's hydration requires.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "route",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "child",
+                  "type": {
+                    "text": "Element"
+                  }
+                },
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string | undefined"
+                  }
+                }
+              ],
+              "description": "Sends a child to a slot by name, on a root that routes by name.\n\n`undefined` is the default slot. Written only when it differs, so routing\nthe same child again on every update writes nothing.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "stopInner",
+              "privacy": "protected",
+              "readonly": true,
+              "description": "Stops an inner control's own announcement at this element's boundary.\n\n**A composed control is one control to a consumer, and the natives had no\nequivalent of the stop the prefixed events already get.** `<helix-select>`\nrenders a `<helix-listbox>`, and both announce: the listbox dispatches\n`input` and `change` from its own host, `input` is composed by\nspecification, and a consumer listening on the select therefore heard one\nchoice twice. Measured before this existed, on the styled tier, one choice\non the inner listbox: select `input` twice and `change` three times,\ncombobox, date input, time input and color input twice each. `Command` was\nthe only one that was right, because it happened to reach for\n`stopImmediatePropagation` for a different reason.\n\nBound on the child in the parent's template, so it runs while the event is\nstill at the child and before it can cross. The guard is for the case where\na component binds this on itself: an element must never stop its own\nannouncement, which is the one it exists to make.\n\nThis is the same job the `helix-before-*` handlers do with their own\n`stopPropagation`, and it is separate rather than folded into them because\na consumer may legitimately refuse a request without the notification ever\nhappening: the two travel at different times and one can be absent.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "relayNativeEvent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                },
+                {
+                  "name": "init",
+                  "optional": true,
+                  "type": {
+                    "text": "EventInit"
+                  }
+                }
+              ],
+              "description": "Re-emits a native event from the host, under its own name.\n\nA native event fired by an inner `<input>` or `<textarea>` is not composed,\nso it stops at the shadow boundary and a consumer listening on\n`<helix-input>` hears nothing. Re-dispatching it from the host is what\nmakes the component behave like the control it wraps.\n\nThe relayed event keeps the native name deliberately. `change` is `change`,\nwhich is what a consumer already knows to listen for, and it is what\nreaches React: its synthetic system claims `onChange` and wires it to that\nname, so a prefixed one would never arrive.\n\n`composed` is not forced. It defaults to the original event's own value, so\na relayed `change` stops at the next shadow boundary exactly as a native\none would. Pass it explicitly only where escaping is the intent, and say so\nwhere you do.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "finalizeStyles",
+              "privacy": "protected",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "CSSResultOrNative[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "styles",
+                  "optional": true,
+                  "type": {
+                    "text": "CSSResultOrNative | CSSResultOrNative[]"
+                  }
+                }
+              ],
+              "description": "Prepends the shadow-root reset to every subclass's styles, so no component\nhas to remember to include it.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "performUpdate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The first update, timed where a page asked to measure what the components\ncost, and a property read where it did not: see `reportRender`.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "HelixStrandsFallbackEvent"
+              },
+              "description": "Fired each time the element stops drawing its ribbon and shows its gradient, with the reason.",
+              "name": "helix-strands-fallback",
+              "reactProp": "onhelix-strands-fallback"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "at",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Where the form sits across the box, as a share of the width: the fan's\nbend or the ribbon's axis. `0` is the left edge and `1` the right. A wave\ncrosses the whole width and does not read it. Unset, a fan bends at `0.4`\nand a ribbon runs down the middle.\n\n**A share rather than a length**, so the ribbon keeps its place when the\nbox changes shape. Read inside a box only; in `travel` each stop has its\nown.",
+              "fieldName": "at"
+            },
+            {
+              "name": "density",
+              "type": {
+                "text": "number"
+              },
+              "default": "0.8",
+              "description": "How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and\nforty. Clamped to that range.",
+              "fieldName": "density"
+            },
+            {
+              "name": "gain",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Overall brightness, as a multiplier on the light.",
+              "fieldName": "gain"
+            },
+            {
+              "name": "softness",
+              "type": {
+                "text": "number"
+              },
+              "default": "0.55",
+              "description": "The share of strands drawn out of focus where the ribbon is wide, from `0`,\nevery strand sharp, to `1`, every one soft. Clamped to that range. A tight\nform, such as a fan's bend or a wave, stays sharp whatever this says.",
+              "fieldName": "softness"
+            },
+            {
+              "name": "speed",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How fast the ribbon moves, as a multiplier on time. `0` holds it still.",
+              "fieldName": "speed"
+            },
+            {
+              "name": "spread",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "How wide the ribbon is, as a multiplier on each form's own width.",
+              "fieldName": "spread"
+            },
+            {
+              "name": "travel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the ribbon is laid down the whole page, so scrolling travels along\nit.\n\nReflected because the stylesheet selects on it: in `travel` the host fixes\nitself to the viewport, behind the page.",
+              "fieldName": "travel"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'fan' | 'ribbon' | 'waves' | undefined"
+              },
+              "description": "The form the ribbon takes. When it is not set, the form is `ribbon`. In\n`travel`, the form of every stretch no stop claims.",
+              "fieldName": "variant"
+            }
+          ],
+          "cssStates": [
+            {
+              "description": "The element shows its gradient: the renderer draws on the CPU, there is no WebGL, or the browser took the context back. Cleared once the ribbon draws again.",
+              "name": "fallback"
+            },
+            {
+              "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
+              "name": "settled",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "HelixElement",
+            "package": "@fusion.dev/helix-core"
+          },
+          "summary": "A ribbon of fine strands of light, drawn in your theme's colors, in its own box or down a whole page.",
+          "helix": {
+            "category": "media",
+            "since": "0.147.0",
+            "status": "experimental",
+            "documentation": "https://fusion.dev/helix/components/strands",
+            "aliases": [
+              "Ribbon",
+              "Filaments",
+              "Light strands",
+              "Fibers"
+            ],
+            "tier": "styled",
+            "group": "Strands",
+            "part": "Root",
+            "examples": [
+              {
+                "description": "A soft ribbon of strands, sized to the box that holds it.",
+                "slug": "preview"
+              },
+              {
+                "description": "A fan bending at a quarter of the width, and another at three quarters.",
+                "slug": "at"
+              },
+              {
+                "description": "Strands drawn in the success color, with the info color for depth, set with the color hooks.",
+                "slug": "colors"
+              },
+              {
+                "description": "A sparse, sharp ribbon beside a dense, soft one.",
+                "slug": "density-and-softness"
+              },
+              {
+                "description": "One ribbon down the whole page: a fan through the opening section, soft ribbon after it, and a wave above the last section.",
+                "slug": "travel"
+              },
+              {
+                "description": "The three forms: a bright fan, a soft ribbon, and sharp waves.",
+                "slug": "variants"
+              }
+            ],
+            "source": "helix/styled/src/strands"
+          },
+          "tagName": "helix-strands",
+          "customElement": true,
+          "modulePath": "src/strands/root/strands-root.ts",
+          "definitionPath": "src/strands/root/strands-root.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HelixStrands",
+          "declaration": {
+            "name": "HelixStrands",
+            "module": "src/strands/root/strands-root.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "helix-strands",
+          "declaration": {
+            "name": "HelixStrands",
+            "module": "src/strands/root/strands-root.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/strands/shader.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "LINE_VERTEX",
+          "default": "`#version 300 es layout(location = 0) in vec2 aVert; layout(location = 1) in float aId; uniform float uDpr; uniform float uSoftness; uniform vec3 uGlow; uniform vec3 uTint; uniform vec3 uPeak; out float vSide; out vec3 vColor; ${PATH} void main() { float id = aId; float r5 = h1(id + 7.77); float r6 = h1(id + 9.19); float r7 = h1(id + 11.3); float t = mix(uT.x, uT.y, aVert.x); vec3 info; vec3 unused; vec3 a = strandAt(id, t, info); vec3 b = strandAt(id, t + (uT.y - uT.x) / 700.0, unused); vec2 tg = b.xy - a.xy; tg = length(tg) > 1e-4 ? normalize(tg) : vec2(0.0, 1.0); vec2 nrm = vec2(-tg.y, tg.x); float soft = smoothstep(0.06, 0.28, info.y) * step(1.0 - uSoftness, r6); float base = mix(0.35, 1.3, r7 * r7) * uDpr * (1.0 + 0.3 * a.z); float w = max(base + soft * mix(8.0, 36.0, r6) * uDpr, 1.0); float drawW = w + 2.5 * uDpr; vec2 res = uView * uDpr; vec2 px = a.xy * uDpr + nrm * aVert.y * drawW * 0.5; gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0); vSide = aVert.y * drawW / w; float shimmer = 0.5 + 0.5 * sin(info.z * 0.044 - uTime * (2.0 + 2.0 * r5) + r6 * 6.283); shimmer *= shimmer; float bright = mix(0.25, 1.0, pow(r5, 1.4)); float energy = min(base, w) / w; float depth = 0.7 + 0.3 * a.z; vec3 col = mix(uGlow, uTint, step(0.83, r6) * 0.9); col = mix(col, uPeak, step(0.93, r7) * 0.6); vColor = col * energy * info.x * (0.35 + 0.65 * shimmer) * bright * depth; } `",
+          "description": "Each strand as a ribbon of quads, wide enough to anti-alias and to blur."
+        },
+        {
+          "kind": "variable",
+          "name": "LINE_FRAGMENT",
+          "default": "`#version 300 es precision highp float; in float vSide; in vec3 vColor; uniform float uScale; out vec4 outColor; void main() { outColor = vec4(vColor * exp(-vSide * vSide * 2.4) * uScale, 1.0); } `",
+          "description": "A soft profile across the ribbon, added into the buffer."
+        },
+        {
+          "kind": "variable",
+          "name": "DUST_VERTEX",
+          "default": "`#version 300 es uniform float uDpr; uniform float uStrands; uniform vec3 uGlow; uniform vec3 uPeak; out vec3 vColor; ${PATH} void main() { float id = float(gl_VertexID); float sid = floor(h1(id + 0.5) * uStrands); float r = h1(id + 2.3); float r2 = h1(id + 4.1); float t = mix(uT.x, uT.y, fract(r + uTime * 0.003 * (0.3 + r2))); vec3 info; vec3 a = strandAt(sid, t, info); vec2 off = (vec2(h1(id + 6.1), h1(id + 8.3)) - 0.5) * (24.0 + (150.0 + info.y * uView.x) * h1(id + 9.7)); vec2 res = uView * uDpr; vec2 px = (a.xy + off) * uDpr; gl_Position = vec4(px.x / res.x * 2.0 - 1.0, 1.0 - px.y / res.y * 2.0, 0.0, 1.0); gl_PointSize = mix(1.2, 3.4, r2 * r2) * uDpr; float tw = 0.35 + 0.65 * (0.5 + 0.5 * sin(uTime * (0.5 + 1.8 * r) + r2 * 40.0)); vColor = mix(uGlow, uPeak, 0.55) * tw * mix(0.2, 0.9, r) * info.x * 0.8; } `",
+          "description": "Specks drifting along the strands, thickest where the ribbon is bright."
+        },
+        {
+          "kind": "variable",
+          "name": "DUST_FRAGMENT",
+          "default": "`#version 300 es precision highp float; in vec3 vColor; uniform float uScale; out vec4 outColor; void main() { vec2 c = gl_PointCoord - 0.5; outColor = vec4(vColor * exp(-dot(c, c) * 16.0) * uScale, 1.0); } `"
+        },
+        {
+          "kind": "variable",
+          "name": "QUAD_VERTEX",
+          "default": "`#version 300 es out vec2 vUv; void main() { vec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2); vUv = p; gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0); } `",
+          "description": "One triangle over the whole target, from three vertex ids and no buffer."
+        },
+        {
+          "kind": "variable",
+          "name": "DOWN_FRAGMENT",
+          "default": "`#version 300 es precision highp float; in vec2 vUv; uniform sampler2D uSource; uniform vec2 uTexel; out vec4 outColor; void main() { vec3 c = texture(uSource, vUv + uTexel * vec2(-1.0, -1.0)).rgb + texture(uSource, vUv + uTexel * vec2(1.0, -1.0)).rgb + texture(uSource, vUv + uTexel * vec2(-1.0, 1.0)).rgb + texture(uSource, vUv + uTexel * vec2(1.0, 1.0)).rgb; outColor = vec4(c * 0.25, 1.0); } `",
+          "description": "Four bilinear taps, a box filter at half the step for the price of four reads."
+        },
+        {
+          "kind": "variable",
+          "name": "BLUR_FRAGMENT",
+          "default": "`#version 300 es precision highp float; in vec2 vUv; uniform sampler2D uSource; uniform vec2 uStep; out vec4 outColor; void main() { vec3 c = texture(uSource, vUv).rgb * 0.2270; c += (texture(uSource, vUv + uStep * 1.3846).rgb + texture(uSource, vUv - uStep * 1.3846).rgb) * 0.3162; c += (texture(uSource, vUv + uStep * 3.2308).rgb + texture(uSource, vUv - uStep * 3.2308).rgb) * 0.0703; outColor = vec4(c, 1.0); } `",
+          "description": "A nine-tap Gaussian in five reads, along one axis."
+        },
+        {
+          "kind": "variable",
+          "name": "COMPOSITE_FRAGMENT",
+          "default": "`#version 300 es precision highp float; in vec2 vUv; uniform sampler2D uScene; uniform sampler2D uNear; uniform sampler2D uFar; uniform vec3 uGround; uniform vec3 uInk; uniform float uLight; uniform float uGain; out vec4 outColor; float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); } void main() { vec3 e = texture(uScene, vUv).rgb + texture(uNear, vUv).rgb * 1.1 + texture(uFar, vUv).rgb * 0.9; e *= uGain; vec3 dark = 1.0 - (1.0 - uGround) * exp(-e); float lum = dot(e, vec3(0.3, 0.55, 0.15)); vec3 light = mix(uGround, uInk, 1.0 - exp(-lum * 1.4)); vec3 c = mix(dark, light, uLight); c += (hash(gl_FragCoord.xy) - 0.5) / 255.0; outColor = vec4(c, 1.0); } `",
+          "description": "The light and its bloom over the page color.\n\nOn a dark page the light is screened onto the ground, so it saturates to\nthe peak rather than clipping. On a light page added light is invisible, so\nthe same energy darkens the ground toward the peak as ink. A step of noise\nunder a code value hides the banding a slow gradient shows on eight bits."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LINE_VERTEX",
+          "declaration": {
+            "name": "LINE_VERTEX",
+            "module": "src/strands/shader.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LINE_FRAGMENT",
+          "declaration": {
+            "name": "LINE_FRAGMENT",
+            "module": "src/strands/shader.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DUST_VERTEX",
+          "declaration": {
+            "name": "DUST_VERTEX",
+            "module": "src/strands/shader.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DUST_FRAGMENT",
+          "declaration": {
+            "name": "DUST_FRAGMENT",
+            "module": "src/strands/shader.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "QUAD_VERTEX",
+          "declaration": {
+            "name": "QUAD_VERTEX",
+            "module": "src/strands/shader.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DOWN_FRAGMENT",
+          "declaration": {
+            "name": "DOWN_FRAGMENT",
+            "module": "src/strands/shader.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BLUR_FRAGMENT",
+          "declaration": {
+            "name": "BLUR_FRAGMENT",
+            "module": "src/strands/shader.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "COMPOSITE_FRAGMENT",
+          "declaration": {
+            "name": "COMPOSITE_FRAGMENT",
+            "module": "src/strands/shader.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/strands/stop/strands-stop.css.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/strands/stop/strands-stop.css.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/strands/stop/strands-stop.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Placed inside a `helix-strands` with `travel`, a stop names an element with\n`for` and says which form the ribbon takes when the page reaches it: a `fan`\nbending through it, a `ribbon` passing through `at`, or `waves` crossing at\nits top edge. The stops are read in page order, whatever order they are\nwritten in, and a stop naming no element is skipped.\n\nA stop draws nothing itself and is never shown.\n\n**Every property is reflected**, because the parent watches its stops'\nattributes to lay the ribbon out again: a change made from script reaches the\npage as a change made in markup does. None has a default, so a stop writes\nnothing it was not given.",
+          "name": "HelixStrandsStop",
+          "members": [
+            {
+              "kind": "field",
+              "name": "at",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Where the form sits across the page, as a share of the width: the fan's\nbend or the ribbon's axis. A wave crosses the whole width and does not\nread it. Unset, a fan bends at `0.4` and a ribbon runs down the middle.",
+              "attribute": "at",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "for",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The id of the element the form is pinned to, in the same tree as the stop.",
+              "attribute": "for",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'fan' | 'ribbon' | 'waves' | undefined"
+              },
+              "description": "The form the ribbon takes at the element. When it is not set, the form is `ribbon`.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tier",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "'helix-headless-'",
+              "description": "The prefix this tier registers its elements under.\n\n**A component that renders another renders its own tier's version of it**,\nso `helix-headless-pagination-size` composes `helix-headless-select` and\n`helix-pagination-size` composes `helix-select`. One template says\n`${this.tag('select')}` and each tier answers with its own name.\n\n**The public tag may not be the composed one, in either tier.** Using it\ncosts three things: the name means two different things depending on what a\nconsumer imported, the headless tier composes an element it does not ship,\nand the composition cannot be tested there at all, because there is no\n`helix-select` on that tier to test it against.\n\n**A prefix rather than an override per composition**, which was the first\nplan and does not compile. An override re-renders the fragment from the\nsubclass, and the fragment reads members the base keeps private:\n`PaginationSize` alone would have had to widen `options`, `current` and\n`handleChange` to `protected` so a subclass could say the same thing again.\nSixteen families of that is a lot of encapsulation spent on saying one\nword differently.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "tag",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "StaticValue"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "One composed tag, as a static value a template can interpolate.\n\nWhat `unsafeStatic` returns, safe by construction: the name is a literal in\nour own source and the prefix is one of two strings this class defines.\nCalled per render and not cached, which costs nothing, because\n`static-html` keys its template cache on the joined string rather than on\nthe object.\n\n**Written out rather than imported, for every element that never renders\none.** `lit/static-html.js` declares no side effects, so importing\n`unsafeStatic` alone kept the module's three `withStatic` calls in every\nbundle: about 210 bytes gzipped on each of the families that compose no\ntag, Divider and Badge among them. The value is lit's cross-copy protocol,\nkeyed by `Symbol.for('')` so that two copies of lit on a page read each\nother's, and a spec holds it equal to `unsafeStatic`'s.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "partNamed",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "T | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "One of this element's own parts, by name, or null where it is not rendered.\n\nNot `part`, which every element already has: `Element.part` is the\n`DOMTokenList` of the names the element itself carries, and a method under\nthat name is a type error on every subclass.\n\n**One guard for every lookup.** Lit's server shim has no `querySelector`\non the render root, so a lookup reached during a server render, from a\ngetter a template reads or from `willUpdate`, throws there and nowhere\nelse. Four spellings of the same guard had grown across the library, and\na fifth site with none. Null on the server, which is what the rest of the\ncode already treats a part that has not rendered as.\n\n**`~=` and not `=`.** A part drawn in a state carries a second name while\nthe state holds, `part=\"page page-current\"`, and an exact match stops\nfinding it for exactly as long as it is the one that matters.\n\n`helix component`'s `selectors` reads these calls the way it reads a\n`querySelector('[part=\"x\"]')`, so a name nothing renders is a finding\nrather than a null an optional chain swallows.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "internals",
+              "type": {
+                "text": "ElementInternals"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "description": "The element's semantics, set without touching the DOM.\n\n`ElementInternals` sets the implicit role, which an author's own `role`\nattribute still overrides, and it writes no attribute. Setting `role` on the\nhost directly would: that is an attribute the element gives itself after it\nupgrades, which a React consumer's server markup never had, and hydration\nreports it as a mismatch.\n\nAvailable during server rendering. Lit's shim implements `attachInternals`,\nso nothing here needs a guard.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "toggleState",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "on",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Records a boolean fact about this element as a custom state.\n\n**The host belongs to whoever rendered it, and a component's own\nbookkeeping may not be kept there.** An attribute written on the first\nupdate is markup a consumer's server never sent, so a React consumer\nhydrates a DOM that has gained attributes since and reports a mismatch it\nwill not patch up. A custom state is not in the DOM at all: it carries the\nfact to a stylesheet through `:state()` and leaves the markup alone, so the\nserver's output and the client's agree by construction.\n\n`SETTLED` carries the long version of that argument; `checked`, `open`,\n`invalid` and `has-label` are recorded the same way, each of them a state a\n`default-*` attribute resolves before React reaches the node.\n\n**Deferring the definitions is not a fix and could not be.** Importing them\nfrom an effect so the upgrades fall the other side of hydration works only\nwhile hydration is one pass: anything that splits it, a streamed segment or\na suspended boundary, puts an upgrade back inside the window. Timing cannot\nbe the guarantee when the fact is kept somewhere React reconciles.\n\nFeature-tested rather than assumed, the way `hostAria` tests element\nreferences. An engine without `CustomStateSet` records nothing and keeps\nwhatever the resting rule draws, which is the safe direction to fail.\n\n**The engines the test is for are browsers**: Safari below 17.4 and Firefox\nbelow 126, where the write is a `TypeError`, so a component bypassing this\nfails to render rather than rendering without whatever the state draws.\nLit's server shim sets `states`, so the guard passes there and records a\nstate nothing reads, which is harmless.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "whenSettled",
+              "type": {
+                "text": "Promise<void>"
+              },
+              "readonly": true,
+              "description": "Resolves a frame after the first update, when transitions are switched on.\n\n**Named `whenSettled` because `settled` is taken four times over**, by\nImage, Splitter and both color controls, none of them about transitions. A\nbase class takes the name every subclass then cannot use.\n\n**The state it reports cannot be watched, which is why this exists.** A\ncustom state is deliberately not in the DOM, so there is no\n`MutationObserver` equivalent for `ElementInternals.states`. Await this\ninstead.\n\nSeparate from `updateComplete`, which resolves in the microtask checkpoint\nthe suppression is still active in. That is the distinction `readyToMove`\nin `@fusion.dev/helix-testing` is written around.\n\nIt never resolves where `requestAnimationFrame` never fires, which is a\nserver, a hidden tab, and happy-dom. Callers that must not hang there race\nit against a timeout, as the happy-dom harness's `readyToMove` does. The\nbrowser harness's awaits it alone: a browser always runs the frame, and a\ntimer beside it was a bet on how long one takes, which a busy run lost.",
+              "default": "new Promise<void>((resolve) => { this.resolveSettled = resolve })",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "resolveSettled",
+              "type": {
+                "text": "() => void"
+              },
+              "privacy": "private",
+              "description": "Resolves `whenSettled`, once, from the frame that records the state.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "fromServer",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the shadow root was a server's, parsed from declarative shadow DOM.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hydrating",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Whether this update is hydrating a server's markup, and so has to render\nexactly what the server rendered.\n\n**Lit hydrates by assuming the markup already shows the first render.** A\nvalue that differs is recorded and never written, so the page keeps the\nserver's, and a template that differs throws. The server has no children,\nso anything a component reads from its children waits for the update after\nhydration, which `finishHydration` asks for. Without a server's markup the\nfirst render reads them and there is one render.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "serverRendered",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Whether this element hydrated a server's markup rather than rendering its own.\n\nFor what happened before hydration and cannot be heard after it: an image\nthe parser fetched fires `load` or `error` before any listener exists, so a\ncomponent asks the image instead, once, when this is true.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "finishHydration",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Asks for the update a hydration put off, so the reads it skipped happen.\n\nCalled from `firstUpdated`, the end of the hydrating update. The render it\nschedules can only follow that one, which is the exception Lit's\nchange-in-update warning names, and it happens only on a page a server\nrendered.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "childrenKnown",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Whether this render can know the children.\n\nA server cannot: its element shim carries attributes and no tree, so\n`children` is undefined there. A render hydrating what a server sent must\nnot, because it has to be the server's render. Anywhere else it can. A\ncomponent whose render depends on its children reads them through\n`knownChildren`, and treats \"not known\" as its own answer rather than as\n\"none\": a list that renders its empty state because nobody has looked yet is\nthe one thing an empty state must never do.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "knownChildren",
+              "type": {
+                "text": "Element[]"
+              },
+              "privacy": "protected",
+              "description": "The children a render may read: all of them where they are known, and none otherwise.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "assignsByName",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "description": "Whether this element's slots route by name although it asked to assign them\nby hand.\n\n**A declarative shadow root is always the by-name kind.** HTML has no way to\nask for manual assignment, so a component that assigns by hand and hydrates\na server's root gets one where `slot.assign()` does nothing, and its\nchildren land wherever their `slot` attribute sends them. The way through is\nto write that attribute, which is what `route` does. Only there: on a root\nthis element made, assignment stays manual and the consumer's markup is\nnever touched, which is what a React consumer's hydration requires.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "route",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "child",
+                  "type": {
+                    "text": "Element"
+                  }
+                },
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string | undefined"
+                  }
+                }
+              ],
+              "description": "Sends a child to a slot by name, on a root that routes by name.\n\n`undefined` is the default slot. Written only when it differs, so routing\nthe same child again on every update writes nothing.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "stopInner",
+              "privacy": "protected",
+              "readonly": true,
+              "description": "Stops an inner control's own announcement at this element's boundary.\n\n**A composed control is one control to a consumer, and the natives had no\nequivalent of the stop the prefixed events already get.** `<helix-select>`\nrenders a `<helix-listbox>`, and both announce: the listbox dispatches\n`input` and `change` from its own host, `input` is composed by\nspecification, and a consumer listening on the select therefore heard one\nchoice twice. Measured before this existed, on the styled tier, one choice\non the inner listbox: select `input` twice and `change` three times,\ncombobox, date input, time input and color input twice each. `Command` was\nthe only one that was right, because it happened to reach for\n`stopImmediatePropagation` for a different reason.\n\nBound on the child in the parent's template, so it runs while the event is\nstill at the child and before it can cross. The guard is for the case where\na component binds this on itself: an element must never stop its own\nannouncement, which is the one it exists to make.\n\nThis is the same job the `helix-before-*` handlers do with their own\n`stopPropagation`, and it is separate rather than folded into them because\na consumer may legitimately refuse a request without the notification ever\nhappening: the two travel at different times and one can be absent.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "relayNativeEvent",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                },
+                {
+                  "name": "init",
+                  "optional": true,
+                  "type": {
+                    "text": "EventInit"
+                  }
+                }
+              ],
+              "description": "Re-emits a native event from the host, under its own name.\n\nA native event fired by an inner `<input>` or `<textarea>` is not composed,\nso it stops at the shadow boundary and a consumer listening on\n`<helix-input>` hears nothing. Re-dispatching it from the host is what\nmakes the component behave like the control it wraps.\n\nThe relayed event keeps the native name deliberately. `change` is `change`,\nwhich is what a consumer already knows to listen for, and it is what\nreaches React: its synthetic system claims `onChange` and wires it to that\nname, so a prefixed one would never arrive.\n\n`composed` is not forced. It defaults to the original event's own value, so\na relayed `change` stops at the next shadow boundary exactly as a native\none would. Pass it explicitly only where escaping is the intent, and say so\nwhere you do.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "finalizeStyles",
+              "privacy": "protected",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "CSSResultOrNative[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "styles",
+                  "optional": true,
+                  "type": {
+                    "text": "CSSResultOrNative | CSSResultOrNative[]"
+                  }
+                }
+              ],
+              "description": "Prepends the shadow-root reset to every subclass's styles, so no component\nhas to remember to include it.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "performUpdate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "The first update, timed where a page asked to measure what the components\ncost, and a property read where it did not: see `reportRender`.",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "at",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Where the form sits across the page, as a share of the width: the fan's\nbend or the ribbon's axis. A wave crosses the whole width and does not\nread it. Unset, a fan bends at `0.4` and a ribbon runs down the middle.",
+              "fieldName": "at"
+            },
+            {
+              "name": "for",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The id of the element the form is pinned to, in the same tree as the stop.",
+              "fieldName": "for"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'fan' | 'ribbon' | 'waves' | undefined"
+              },
+              "description": "The form the ribbon takes at the element. When it is not set, the form is `ribbon`.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "HelixElement",
+            "package": "@fusion.dev/helix-core"
+          },
+          "summary": "Pins a form of the ribbon to a section of the page.",
+          "helix": {
+            "since": "0.147.0",
+            "status": "experimental",
+            "documentation": "https://fusion.dev/helix/components/strands",
+            "tier": "styled",
+            "group": "Strands",
+            "part": "Stop"
+          },
+          "tagName": "helix-strands-stop",
+          "customElement": true,
+          "cssStates": [
+            {
+              "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
+              "name": "settled",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            }
+          ],
+          "modulePath": "src/strands/stop/strands-stop.ts",
+          "definitionPath": "src/strands/stop/strands-stop.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HelixStrandsStop",
+          "declaration": {
+            "name": "HelixStrandsStop",
+            "module": "src/strands/stop/strands-stop.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "helix-strands-stop",
+          "declaration": {
+            "name": "HelixStrandsStop",
+            "module": "src/strands/stop/strands-stop.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/switch/index.ts",
@@ -238352,6 +240840,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.161.0"
+    "version": "0.162.0"
   }
 }