@fusion.dev/helix 0.161.0 → 0.162.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.161.0",
+  "version": "0.162.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -54,13 +54,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.161.0",
-    "@fusion.dev/helix-headless": "0.161.0",
-    "@fusion.dev/helix-styles": "0.161.0"
+    "@fusion.dev/helix-core": "0.162.0",
+    "@fusion.dev/helix-headless": "0.162.0",
+    "@fusion.dev/helix-styles": "0.162.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.161.0",
-    "@fusion.dev/helix-testing": "0.161.0",
+    "@fusion.dev/helix-cem": "0.162.0",
+    "@fusion.dev/helix-testing": "0.162.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.14.5",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -213,6 +213,9 @@ import type {
   HelixStatGroup,
   HelixStep,
   HelixSteps,
+  HelixStrands,
+  HelixStrandsFallbackEvent,
+  HelixStrandsStop,
   HelixSwitch,
   HelixTab,
   HelixTabPanel,
@@ -32468,6 +32471,121 @@ with `linear`. Ark UI's skippable step. */
   textContent?: (string | number) | undefined;
 };
 
+/** `HelixStrands` component event */
+export type HelixStrandsElementEvent<E = Event> = TypedEvent<HelixStrands, E>;
+/** `helix-strands-fallback` event type */
+export type HelixStrandsHelixStrandsFallbackElementEvent =
+  HelixStrandsElementEvent<HelixStrandsFallbackEvent>;
+
+export type HelixStrandsProps = {
+  /** Where the form sits across the box, as a share of the width: the fan's
+bend or the ribbon's axis. `0` is the left edge and `1` the right. A wave
+crosses the whole width and does not read it. Unset, a fan bends at `0.4`
+and a ribbon runs down the middle.
+
+**A share rather than a length**, so the ribbon keeps its place when the
+box changes shape. Read inside a box only; in `travel` each stop has its
+own. */
+  at?: (HelixStrands["at"]) | undefined;
+  /** How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and
+forty. Clamped to that range. */
+  density?: (HelixStrands["density"]) | undefined;
+  /** Overall brightness, as a multiplier on the light. */
+  gain?: (HelixStrands["gain"]) | undefined;
+  /** The share of strands drawn out of focus where the ribbon is wide, from `0`,
+every strand sharp, to `1`, every one soft. Clamped to that range. A tight
+form, such as a fan's bend or a wave, stays sharp whatever this says. */
+  softness?: (HelixStrands["softness"]) | undefined;
+  /** How fast the ribbon moves, as a multiplier on time. `0` holds it still. */
+  speed?: (HelixStrands["speed"]) | undefined;
+  /** How wide the ribbon is, as a multiplier on each form's own width. */
+  spread?: (HelixStrands["spread"]) | undefined;
+  /** Whether the ribbon is laid down the whole page, so scrolling travels along
+it.
+
+Reflected because the stylesheet selects on it: in `travel` the host fixes
+itself to the viewport, behind the page. */
+  travel?: (HelixStrands["travel"]) | undefined;
+  /** The form the ribbon takes. When it is not set, the form is `ribbon`. In
+`travel`, the form of every stretch no stop claims. */
+  variant?: (HelixStrands["variant"]) | undefined;
+
+  /** Fired each time the element stops drawing its ribbon and shows its gradient, with the reason. */
+  "onhelix-strands-fallback"?: ((
+    e: HelixStrandsHelixStrandsFallbackElementEvent,
+  ) => void) | undefined;
+};
+
+export type HelixStrandsSolidJsProps = {
+  /** Where the form sits across the box, as a share of the width: the fan's
+bend or the ribbon's axis. `0` is the left edge and `1` the right. A wave
+crosses the whole width and does not read it. Unset, a fan bends at `0.4`
+and a ribbon runs down the middle.
+
+**A share rather than a length**, so the ribbon keeps its place when the
+box changes shape. Read inside a box only; in `travel` each stop has its
+own. */
+  "prop:at"?: (HelixStrands["at"]) | undefined;
+  /** How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and
+forty. Clamped to that range. */
+  "prop:density"?: (HelixStrands["density"]) | undefined;
+  /** Overall brightness, as a multiplier on the light. */
+  "prop:gain"?: (HelixStrands["gain"]) | undefined;
+  /** The share of strands drawn out of focus where the ribbon is wide, from `0`,
+every strand sharp, to `1`, every one soft. Clamped to that range. A tight
+form, such as a fan's bend or a wave, stays sharp whatever this says. */
+  "prop:softness"?: (HelixStrands["softness"]) | undefined;
+  /** How fast the ribbon moves, as a multiplier on time. `0` holds it still. */
+  "prop:speed"?: (HelixStrands["speed"]) | undefined;
+  /** How wide the ribbon is, as a multiplier on each form's own width. */
+  "prop:spread"?: (HelixStrands["spread"]) | undefined;
+  /** Whether the ribbon is laid down the whole page, so scrolling travels along
+it.
+
+Reflected because the stylesheet selects on it: in `travel` the host fixes
+itself to the viewport, behind the page. */
+  "prop:travel"?: (HelixStrands["travel"]) | undefined;
+  /** The form the ribbon takes. When it is not set, the form is `ribbon`. In
+`travel`, the form of every stretch no stop claims. */
+  "prop:variant"?: (HelixStrands["variant"]) | undefined;
+  /** Fired each time the element stops drawing its ribbon and shows its gradient, with the reason. */
+  "on:helix-strands-fallback"?: ((
+    e: HelixStrandsHelixStrandsFallbackElementEvent,
+  ) => void) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
+export type HelixStrandsStopProps = {
+  /** Where the form sits across the page, as a share of the width: the fan's
+bend or the ribbon's axis. A wave crosses the whole width and does not
+read it. Unset, a fan bends at `0.4` and a ribbon runs down the middle. */
+  at?: (HelixStrandsStop["at"]) | undefined;
+  /** The id of the element the form is pinned to, in the same tree as the stop. */
+  for?: (HelixStrandsStop["for"]) | undefined;
+  /** The form the ribbon takes at the element. When it is not set, the form is `ribbon`. */
+  variant?: (HelixStrandsStop["variant"]) | undefined;
+};
+
+export type HelixStrandsStopSolidJsProps = {
+  /** Where the form sits across the page, as a share of the width: the fan's
+bend or the ribbon's axis. A wave crosses the whole width and does not
+read it. Unset, a fan bends at `0.4` and a ribbon runs down the middle. */
+  "prop:at"?: (HelixStrandsStop["at"]) | undefined;
+  /** The id of the element the form is pinned to, in the same tree as the stop. */
+  "prop:for"?: (HelixStrandsStop["for"]) | undefined;
+  /** The form the ribbon takes at the element. When it is not set, the form is `ribbon`. */
+  "prop:variant"?: (HelixStrandsStop["variant"]) | undefined;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: (string) | undefined;
+  /** Set the textContent of the element */
+  textContent?: (string | number) | undefined;
+};
+
 /** `HelixSwitch` component event */
 export type HelixSwitchElementEvent<E = Event> = TypedEvent<HelixSwitch, E>;
 /** `helix-before-toggle` event type */
@@ -63556,6 +63674,188 @@ export type CustomElements = {
    */
   "helix-step": Partial<HelixStepProps & BaseProps<HelixStep> & BaseEvents<HelixStep>>;
 
+  /**
+   * Hundreds of thin strands are drawn as one ribbon, and the light they add
+   * together is bloomed, so where they converge the ribbon burns hot. The ribbon
+   * moves on its own all the time: it sways and breathes, its strands wave and
+   * roll over one another, and light runs along them.
+   *
+   * Its palette comes from the tokens. The strands are `--helix-color-primary`,
+   * a few are `--helix-color-info` for depth, and the page they light is
+   * `--helix-color-background`. On a light page the light becomes ink, because
+   * light added to near-white cannot be seen.
+   *
+   * **Three forms, set with `variant`.** `fan` is a tight, bright bend with its
+   * arms opening to the right. `ribbon`, the default, is a broad, soft ribbon in
+   * long curves. `waves` is sharp strands crossing the full width.
+   *
+   * **In its own box, by default.** The element fills the box it is given, the
+   * way an image does, and `at` places the fan's bend or the ribbon's axis across
+   * it. Content placed inside sits over the ribbon, in the `content` part.
+   *
+   * **Down the whole page, with `travel`.** The element fixes itself behind the
+   * page, on `--helix-layer-beneath`, and lays one ribbon from the top of the page to the
+   * bottom, so scrolling travels along it. Put `helix-strands-stop` elements
+   * inside to pin a form to a section: each names an element with `for` and says
+   * which form the ribbon takes there. Between stops the ribbon fills the gap in
+   * its own `variant`, and between two waves it turns off screen so each wave
+   * reads alone. Set `z-index` on the element to move it.
+   *
+   * The ribbon stops moving in these cases:
+   * - `prefers-reduced-motion` is set. The element shows one still frame, and in
+   *   `travel` still follows the scroll, without easing.
+   * - The element is off screen or in a background tab.
+   *
+   * It shows a gradient from the same tokens in these cases, and matches
+   * `:state(fallback)` and sends `helix-strands-fallback` with the reason:
+   * - The renderer draws on the CPU, such as a headless browser or a machine with
+   *   no usable GPU.
+   * - There is no WebGL, or the browser took the drawing context back.
+   *
+   * Strands is styled only and has behavior, as `Aura` does: its behavior is
+   * drawing to a canvas, so there is no structure for a headless version to hold.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `at`: Where the form sits across the box, as a share of the width: the fan's
+   * bend or the ribbon's axis. `0` is the left edge and `1` the right. A wave
+   * crosses the whole width and does not read it. Unset, a fan bends at `0.4`
+   * and a ribbon runs down the middle.
+   *
+   * **A share rather than a length**, so the ribbon keeps its place when the
+   * box changes shape. Read inside a box only; in `travel` each stop has its
+   * own.
+   * - `density`: How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and
+   * forty. Clamped to that range.
+   * - `gain`: Overall brightness, as a multiplier on the light.
+   * - `softness`: The share of strands drawn out of focus where the ribbon is wide, from `0`,
+   * every strand sharp, to `1`, every one soft. Clamped to that range. A tight
+   * form, such as a fan's bend or a wave, stays sharp whatever this says.
+   * - `speed`: How fast the ribbon moves, as a multiplier on time. `0` holds it still.
+   * - `spread`: How wide the ribbon is, as a multiplier on each form's own width.
+   * - `travel`: Whether the ribbon is laid down the whole page, so scrolling travels along
+   * it.
+   *
+   * Reflected because the stylesheet selects on it: in `travel` the host fixes
+   * itself to the viewport, behind the page.
+   * - `variant`: The form the ribbon takes. When it is not set, the form is `ribbon`. In
+   * `travel`, the form of every stretch no stop claims.
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `helix-strands-fallback`: Fired each time the element stops drawing its ribbon and shows its gradient, with the reason.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: Content drawn over the ribbon, such as a heading, and the `helix-strands-stop` elements that pin its forms in `travel`.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--strands-glow`: The color of most strands. Defaults to `--helix-color-primary`.
+   * - `--strands-ground`: The page the light is added to. Defaults to `--helix-color-background`.
+   * - `--strands-peak`: 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.
+   * - `--strands-tint`: The color of a few strands, for depth. Defaults to `--helix-color-info`.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `canvas`: The surface the ribbon draws into.
+   * - `content`: The box over the ribbon that holds the content. It covers the element.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `fallback`: 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.
+   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
+   */
+  "helix-strands": Partial<
+    HelixStrandsProps & BaseProps<HelixStrands> & BaseEvents<HelixStrands>
+  >;
+
+  /**
+   * Placed inside a `helix-strands` with `travel`, a stop names an element with
+   * `for` and says which form the ribbon takes when the page reaches it: a `fan`
+   * bending through it, a `ribbon` passing through `at`, or `waves` crossing at
+   * its top edge. The stops are read in page order, whatever order they are
+   * written in, and a stop naming no element is skipped.
+   *
+   * A stop draws nothing itself and is never shown.
+   *
+   * **Every property is reflected**, because the parent watches its stops'
+   * attributes to lay the ribbon out again: a change made from script reaches the
+   * page as a change made in markup does. None has a default, so a stop writes
+   * nothing it was not given.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `at`: Where the form sits across the page, as a share of the width: the fan's
+   * bend or the ribbon's axis. A wave crosses the whole width and does not
+   * read it. Unset, a fan bends at `0.4` and a ribbon runs down the middle.
+   * - `for`: The id of the element the form is pinned to, in the same tree as the stop.
+   * - `variant`: The form the ribbon takes at the element. When it is not set, the form is `ribbon`.
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
+   */
+  "helix-strands-stop": Partial<
+    HelixStrandsStopProps & BaseProps<HelixStrandsStop> & BaseEvents<HelixStrandsStop>
+  >;
+
   /**
    * A thumb moves along a track. The switch is the one place in Helix where color
    * means "on". A checkbox has a tick, and a switch has no mark, so the fill is
@@ -92648,6 +92948,194 @@ export type CustomElementsSolidJs = {
     HelixStepProps & HelixStepSolidJsProps & BaseProps<HelixStep> & BaseEvents<HelixStep>
   >;
 
+  /**
+   * Hundreds of thin strands are drawn as one ribbon, and the light they add
+   * together is bloomed, so where they converge the ribbon burns hot. The ribbon
+   * moves on its own all the time: it sways and breathes, its strands wave and
+   * roll over one another, and light runs along them.
+   *
+   * Its palette comes from the tokens. The strands are `--helix-color-primary`,
+   * a few are `--helix-color-info` for depth, and the page they light is
+   * `--helix-color-background`. On a light page the light becomes ink, because
+   * light added to near-white cannot be seen.
+   *
+   * **Three forms, set with `variant`.** `fan` is a tight, bright bend with its
+   * arms opening to the right. `ribbon`, the default, is a broad, soft ribbon in
+   * long curves. `waves` is sharp strands crossing the full width.
+   *
+   * **In its own box, by default.** The element fills the box it is given, the
+   * way an image does, and `at` places the fan's bend or the ribbon's axis across
+   * it. Content placed inside sits over the ribbon, in the `content` part.
+   *
+   * **Down the whole page, with `travel`.** The element fixes itself behind the
+   * page, on `--helix-layer-beneath`, and lays one ribbon from the top of the page to the
+   * bottom, so scrolling travels along it. Put `helix-strands-stop` elements
+   * inside to pin a form to a section: each names an element with `for` and says
+   * which form the ribbon takes there. Between stops the ribbon fills the gap in
+   * its own `variant`, and between two waves it turns off screen so each wave
+   * reads alone. Set `z-index` on the element to move it.
+   *
+   * The ribbon stops moving in these cases:
+   * - `prefers-reduced-motion` is set. The element shows one still frame, and in
+   *   `travel` still follows the scroll, without easing.
+   * - The element is off screen or in a background tab.
+   *
+   * It shows a gradient from the same tokens in these cases, and matches
+   * `:state(fallback)` and sends `helix-strands-fallback` with the reason:
+   * - The renderer draws on the CPU, such as a headless browser or a machine with
+   *   no usable GPU.
+   * - There is no WebGL, or the browser took the drawing context back.
+   *
+   * Strands is styled only and has behavior, as `Aura` does: its behavior is
+   * drawing to a canvas, so there is no structure for a headless version to hold.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `at`: Where the form sits across the box, as a share of the width: the fan's
+   * bend or the ribbon's axis. `0` is the left edge and `1` the right. A wave
+   * crosses the whole width and does not read it. Unset, a fan bends at `0.4`
+   * and a ribbon runs down the middle.
+   *
+   * **A share rather than a length**, so the ribbon keeps its place when the
+   * box changes shape. Read inside a box only; in `travel` each stop has its
+   * own.
+   * - `density`: How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and
+   * forty. Clamped to that range.
+   * - `gain`: Overall brightness, as a multiplier on the light.
+   * - `softness`: The share of strands drawn out of focus where the ribbon is wide, from `0`,
+   * every strand sharp, to `1`, every one soft. Clamped to that range. A tight
+   * form, such as a fan's bend or a wave, stays sharp whatever this says.
+   * - `speed`: How fast the ribbon moves, as a multiplier on time. `0` holds it still.
+   * - `spread`: How wide the ribbon is, as a multiplier on each form's own width.
+   * - `travel`: Whether the ribbon is laid down the whole page, so scrolling travels along
+   * it.
+   *
+   * Reflected because the stylesheet selects on it: in `travel` the host fixes
+   * itself to the viewport, behind the page.
+   * - `variant`: The form the ribbon takes. When it is not set, the form is `ribbon`. In
+   * `travel`, the form of every stretch no stop claims.
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `helix-strands-fallback`: Fired each time the element stops drawing its ribbon and shows its gradient, with the reason.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: Content drawn over the ribbon, such as a heading, and the `helix-strands-stop` elements that pin its forms in `travel`.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--strands-glow`: The color of most strands. Defaults to `--helix-color-primary`.
+   * - `--strands-ground`: The page the light is added to. Defaults to `--helix-color-background`.
+   * - `--strands-peak`: 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.
+   * - `--strands-tint`: The color of a few strands, for depth. Defaults to `--helix-color-info`.
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `canvas`: The surface the ribbon draws into.
+   * - `content`: The box over the ribbon that holds the content. It covers the element.
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `fallback`: 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.
+   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
+   */
+  "helix-strands": Partial<
+    HelixStrandsProps &
+      HelixStrandsSolidJsProps &
+      BaseProps<HelixStrands> &
+      BaseEvents<HelixStrands>
+  >;
+
+  /**
+   * Placed inside a `helix-strands` with `travel`, a stop names an element with
+   * `for` and says which form the ribbon takes when the page reaches it: a `fan`
+   * bending through it, a `ribbon` passing through `at`, or `waves` crossing at
+   * its top edge. The stops are read in page order, whatever order they are
+   * written in, and a stop naming no element is skipped.
+   *
+   * A stop draws nothing itself and is never shown.
+   *
+   * **Every property is reflected**, because the parent watches its stops'
+   * attributes to lay the ribbon out again: a change made from script reaches the
+   * page as a change made in markup does. None has a default, so a stop writes
+   * nothing it was not given.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `at`: Where the form sits across the page, as a share of the width: the fan's
+   * bend or the ribbon's axis. A wave crosses the whole width and does not
+   * read it. Unset, a fan bends at `0.4` and a ribbon runs down the middle.
+   * - `for`: The id of the element the form is pinned to, in the same tree as the stop.
+   * - `variant`: The form the ribbon takes at the element. When it is not set, the form is `ribbon`.
+   * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
+   *
+   * **Named `whenSettled` because `settled` is taken four times over**, by
+   * Image, Splitter and both color controls, none of them about transitions. A
+   * base class takes the name every subclass then cannot use.
+   *
+   * **The state it reports cannot be watched, which is why this exists.** A
+   * custom state is deliberately not in the DOM, so there is no
+   * `MutationObserver` equivalent for `ElementInternals.states`. Await this
+   * instead.
+   *
+   * Separate from `updateComplete`, which resolves in the microtask checkpoint
+   * the suppression is still active in. That is the distinction `readyToMove`
+   * in `@fusion.dev/helix-testing` is written around.
+   *
+   * It never resolves where `requestAnimationFrame` never fires, which is a
+   * server, a hidden tab, and happy-dom. Callers that must not hang there race
+   * it against a timeout, as the happy-dom harness's `readyToMove` does. The
+   * browser harness's awaits it alone: a browser always runs the frame, and a
+   * timer beside it was a bet on how long one takes, which a busy run lost. (property only) (readonly)
+   *
+   * ## CSS States
+   *
+   * These can be used to apply styling when a component is in a given state.
+   *
+   * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
+   */
+  "helix-strands-stop": Partial<
+    HelixStrandsStopProps &
+      HelixStrandsStopSolidJsProps &
+      BaseProps<HelixStrandsStop> &
+      BaseEvents<HelixStrandsStop>
+  >;
+
   /**
    * A thumb moves along a track. The switch is the one place in Helix where color
    * means "on". A checkbox has a tick, and a switch has no mark, so the fill is
@@ -100423,6 +100911,14 @@ export type CustomCssProperties = {
   "--steps-progress-track-color"?: (string) | undefined;
   /** How far through the sequence is, as a percentage, written on the `progress` part. */
   "--steps-progress"?: (string) | undefined;
+  /** The color of most strands. Defaults to `--helix-color-primary`. */
+  "--strands-glow"?: (string) | undefined;
+  /** The page the light is added to. Defaults to `--helix-color-background`. */
+  "--strands-ground"?: (string) | undefined;
+  /** 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. */
+  "--strands-peak"?: (string) | undefined;
+  /** The color of a few strands, for depth. Defaults to `--helix-color-info`. */
+  "--strands-tint"?: (string) | undefined;
   /** Height of the track. The width follows it. */
   "--switch-block-size"?: (string) | undefined;
   /** Color of the icon on the thumb. Without it, the icon is muted while off and takes the on color while on. */

package/types/svelte.d.ts

@@ -157,6 +157,8 @@ declare module 'svelte/elements' {
     'helix-stat': Helix<'helix-stat'>
     'helix-steps': Helix<'helix-steps'>
     'helix-step': Helix<'helix-step'>
+    'helix-strands': Helix<'helix-strands'>
+    'helix-strands-stop': Helix<'helix-strands-stop'>
     'helix-switch': Helix<'helix-switch'>
     'helix-table-cell': Helix<'helix-table-cell'>
     'helix-table-column': Helix<'helix-table-column'>