@fusion.dev/helix 0.173.0 → 0.174.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.173.0",
+  "version": "0.174.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.173.0",
-    "@fusion.dev/helix-headless": "0.173.0",
-    "@fusion.dev/helix-styles": "0.173.0"
+    "@fusion.dev/helix-core": "0.174.0",
+    "@fusion.dev/helix-headless": "0.174.0",
+    "@fusion.dev/helix-styles": "0.174.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.173.0",
-    "@fusion.dev/helix-testing": "0.173.0",
+    "@fusion.dev/helix-cem": "0.174.0",
+    "@fusion.dev/helix-testing": "0.174.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

@@ -33443,23 +33443,43 @@ 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`
+  /** Where the form sits across the box, as a share of the width: the bend's
+apex 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 bend's apex sits at `0.5`
 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 much the glow around the strands adds, as a multiplier. `0` draws the
+strands alone, crisp and dimmer, and `1` is the default glow. */
+  bloom?: (HelixStrands["bloom"]) | undefined;
+  /** How far apart the brightest and dimmest strands are, from `0`, most of
+them alike, to `1`, a few burning bright over many faint ones. Clamped to
+that range. The ribbon as a whole keeps its strength. */
+  contrast?: (HelixStrands["contrast"]) | undefined;
   /** How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and
 forty. Clamped to that range. */
   density?: (HelixStrands["density"]) | undefined;
+  /** How much the ribbon's depth shows, from `0`, flat, to `1`. Clamped to that
+range. The strands at the front of the ribbon's roll are drawn thicker,
+brighter, and further from its axis, and those at the back thinner, dimmer,
+and out of focus. */
+  depth?: (HelixStrands["depth"]) | undefined;
+  /** How differently each strand moves, from `0`, the whole ribbon rolling and
+waving as one, to `1`, each strand at its own pace and angle, crossing
+over the others. Clamped to that range. */
+  drift?: (HelixStrands["drift"]) | undefined;
+  /** How many specks of dust drift around the strands, as a multiplier: `0`
+draws none, `1` six hundred, and `4`, the most, two thousand four
+hundred. They gather where the ribbon is brightest. */
+  dust?: (HelixStrands["dust"]) | 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. */
+form, such as a bend's apex 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;
@@ -33482,23 +33502,43 @@ itself to the viewport, behind the page. */
 };
 
 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`
+  /** Where the form sits across the box, as a share of the width: the bend's
+apex 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 bend's apex sits at `0.5`
 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 much the glow around the strands adds, as a multiplier. `0` draws the
+strands alone, crisp and dimmer, and `1` is the default glow. */
+  "prop:bloom"?: (HelixStrands["bloom"]) | undefined;
+  /** How far apart the brightest and dimmest strands are, from `0`, most of
+them alike, to `1`, a few burning bright over many faint ones. Clamped to
+that range. The ribbon as a whole keeps its strength. */
+  "prop:contrast"?: (HelixStrands["contrast"]) | 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;
+  /** How much the ribbon's depth shows, from `0`, flat, to `1`. Clamped to that
+range. The strands at the front of the ribbon's roll are drawn thicker,
+brighter, and further from its axis, and those at the back thinner, dimmer,
+and out of focus. */
+  "prop:depth"?: (HelixStrands["depth"]) | undefined;
+  /** How differently each strand moves, from `0`, the whole ribbon rolling and
+waving as one, to `1`, each strand at its own pace and angle, crossing
+over the others. Clamped to that range. */
+  "prop:drift"?: (HelixStrands["drift"]) | undefined;
+  /** How many specks of dust drift around the strands, as a multiplier: `0`
+draws none, `1` six hundred, and `4`, the most, two thousand four
+hundred. They gather where the ribbon is brightest. */
+  "prop:dust"?: (HelixStrands["dust"]) | 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. */
+form, such as a bend's apex 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;
@@ -33525,9 +33565,9 @@ itself to the viewport, behind the page. */
 };
 
 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. */
+  /** Where the form sits across the page, as a share of the width: the bend's
+apex or the ribbon's axis. A wave crosses the whole width and does not
+read it. Unset, a bend's apex sits at `0.5` 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;
@@ -33536,9 +33576,9 @@ read it. Unset, a fan bends at `0.4` and a ribbon runs down the middle. */
 };
 
 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. */
+  /** Where the form sits across the page, as a share of the width: the bend's
+apex or the ribbon's axis. A wave crosses the whole width and does not
+read it. Unset, a bend's apex sits at `0.5` 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;
@@ -65449,16 +65489,16 @@ export type CustomElements = {
    * 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
+   * a few are `--helix-color-accent` 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
+   * **Three forms, set with `variant`.** `bend` turns bright strands through one tight point, 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
+   * way an image does, and `at` places the bend's apex 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
@@ -65466,8 +65506,9 @@ export type CustomElements = {
    * 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.
+   * its own `variant`, and between two waves less than a screen and a half
+   * apart 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
@@ -65487,20 +65528,35 @@ export type CustomElements = {
    *
    * 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`
+   * - `at`: Where the form sits across the box, as a share of the width: the bend's
+   * apex 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 bend's apex sits at `0.5`
    * 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.
+   * - `bloom`: How much the glow around the strands adds, as a multiplier. `0` draws the
+   * strands alone, crisp and dimmer, and `1` is the default glow.
+   * - `contrast`: How far apart the brightest and dimmest strands are, from `0`, most of
+   * them alike, to `1`, a few burning bright over many faint ones. Clamped to
+   * that range. The ribbon as a whole keeps its strength.
    * - `density`: How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and
    * forty. Clamped to that range.
+   * - `depth`: How much the ribbon's depth shows, from `0`, flat, to `1`. Clamped to that
+   * range. The strands at the front of the ribbon's roll are drawn thicker,
+   * brighter, and further from its axis, and those at the back thinner, dimmer,
+   * and out of focus.
+   * - `drift`: How differently each strand moves, from `0`, the whole ribbon rolling and
+   * waving as one, to `1`, each strand at its own pace and angle, crossing
+   * over the others. Clamped to that range.
+   * - `dust`: How many specks of dust drift around the strands, as a multiplier: `0`
+   * draws none, `1` six hundred, and `4`, the most, two thousand four
+   * hundred. They gather where the ribbon is brightest.
    * - `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.
+   * form, such as a bend's apex 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
@@ -65550,7 +65606,7 @@ export type CustomElements = {
    * - `--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`.
+   * - `--strands-tint`: The color of a few strands, for depth. Defaults to `--helix-color-accent`, which is the primary itself unless the theme relates an accent to the brand, as `accent: { from: 'brand', rotate: 40 }` does.
    *
    * ## CSS Parts
    *
@@ -65572,8 +65628,8 @@ export type CustomElements = {
 
   /**
    * 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
+   * `for` and says which form the ribbon takes when the page reaches it: a `bend`
+   * turning 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.
    *
@@ -65588,9 +65644,9 @@ export type CustomElements = {
    *
    * 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.
+   * - `at`: Where the form sits across the page, as a share of the width: the bend's
+   * apex or the ribbon's axis. A wave crosses the whole width and does not
+   * read it. Unset, a bend's apex sits at `0.5` 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.
@@ -95384,16 +95440,16 @@ export type CustomElementsSolidJs = {
    * 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
+   * a few are `--helix-color-accent` 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
+   * **Three forms, set with `variant`.** `bend` turns bright strands through one tight point, 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
+   * way an image does, and `at` places the bend's apex 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
@@ -95401,8 +95457,9 @@ export type CustomElementsSolidJs = {
    * 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.
+   * its own `variant`, and between two waves less than a screen and a half
+   * apart 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
@@ -95422,20 +95479,35 @@ export type CustomElementsSolidJs = {
    *
    * 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`
+   * - `at`: Where the form sits across the box, as a share of the width: the bend's
+   * apex 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 bend's apex sits at `0.5`
    * 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.
+   * - `bloom`: How much the glow around the strands adds, as a multiplier. `0` draws the
+   * strands alone, crisp and dimmer, and `1` is the default glow.
+   * - `contrast`: How far apart the brightest and dimmest strands are, from `0`, most of
+   * them alike, to `1`, a few burning bright over many faint ones. Clamped to
+   * that range. The ribbon as a whole keeps its strength.
    * - `density`: How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and
    * forty. Clamped to that range.
+   * - `depth`: How much the ribbon's depth shows, from `0`, flat, to `1`. Clamped to that
+   * range. The strands at the front of the ribbon's roll are drawn thicker,
+   * brighter, and further from its axis, and those at the back thinner, dimmer,
+   * and out of focus.
+   * - `drift`: How differently each strand moves, from `0`, the whole ribbon rolling and
+   * waving as one, to `1`, each strand at its own pace and angle, crossing
+   * over the others. Clamped to that range.
+   * - `dust`: How many specks of dust drift around the strands, as a multiplier: `0`
+   * draws none, `1` six hundred, and `4`, the most, two thousand four
+   * hundred. They gather where the ribbon is brightest.
    * - `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.
+   * form, such as a bend's apex 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
@@ -95485,7 +95557,7 @@ export type CustomElementsSolidJs = {
    * - `--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`.
+   * - `--strands-tint`: The color of a few strands, for depth. Defaults to `--helix-color-accent`, which is the primary itself unless the theme relates an accent to the brand, as `accent: { from: 'brand', rotate: 40 }` does.
    *
    * ## CSS Parts
    *
@@ -95510,8 +95582,8 @@ export type CustomElementsSolidJs = {
 
   /**
    * 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
+   * `for` and says which form the ribbon takes when the page reaches it: a `bend`
+   * turning 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.
    *
@@ -95526,9 +95598,9 @@ export type CustomElementsSolidJs = {
    *
    * 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.
+   * - `at`: Where the form sits across the page, as a share of the width: the bend's
+   * apex or the ribbon's axis. A wave crosses the whole width and does not
+   * read it. Unset, a bend's apex sits at `0.5` 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.
@@ -103474,7 +103546,7 @@ export type CustomCssProperties = {
   "--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`. */
+  /** The color of a few strands, for depth. Defaults to `--helix-color-accent`, which is the primary itself unless the theme relates an accent to the brand, as `accent: { from: 'brand', rotate: 40 }` does. */
   "--strands-tint"?: (string) | undefined;
   /** Height of the track. The width follows it. */
   "--switch-block-size"?: (string) | undefined;

package/types/vue.d.ts

@@ -17150,23 +17150,43 @@ export type HelixStrandsHelixStrandsFallbackElementEvent =
   HelixStrandsElementEvent<HelixStrandsFallbackEvent>;
 
 export type HelixStrandsVueProps = {
-  /** 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`
+  /** Where the form sits across the box, as a share of the width: the bend's
+apex 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 bend's apex sits at `0.5`
 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 much the glow around the strands adds, as a multiplier. `0` draws the
+strands alone, crisp and dimmer, and `1` is the default glow. */
+  bloom?: (HelixStrands["bloom"]) | undefined;
+  /** How far apart the brightest and dimmest strands are, from `0`, most of
+them alike, to `1`, a few burning bright over many faint ones. Clamped to
+that range. The ribbon as a whole keeps its strength. */
+  contrast?: (HelixStrands["contrast"]) | undefined;
   /** How many strands the ribbon has, from `0`, sixty, to `1`, three hundred and
 forty. Clamped to that range. */
   density?: (HelixStrands["density"]) | undefined;
+  /** How much the ribbon's depth shows, from `0`, flat, to `1`. Clamped to that
+range. The strands at the front of the ribbon's roll are drawn thicker,
+brighter, and further from its axis, and those at the back thinner, dimmer,
+and out of focus. */
+  depth?: (HelixStrands["depth"]) | undefined;
+  /** How differently each strand moves, from `0`, the whole ribbon rolling and
+waving as one, to `1`, each strand at its own pace and angle, crossing
+over the others. Clamped to that range. */
+  drift?: (HelixStrands["drift"]) | undefined;
+  /** How many specks of dust drift around the strands, as a multiplier: `0`
+draws none, `1` six hundred, and `4`, the most, two thousand four
+hundred. They gather where the ribbon is brightest. */
+  dust?: (HelixStrands["dust"]) | 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. */
+form, such as a bend's apex 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;
@@ -17189,9 +17209,9 @@ export type HelixStrandsVueEvents = {
 };
 
 export type HelixStrandsStopVueProps = {
-  /** 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. */
+  /** Where the form sits across the page, as a share of the width: the bend's
+apex or the ribbon's axis. A wave crosses the whole width and does not
+read it. Unset, a bend's apex sits at `0.5` 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;
@@ -23483,7 +23503,7 @@ export type CustomCssProperties = {
   "--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`. */
+  /** The color of a few strands, for depth. Defaults to `--helix-color-accent`, which is the primary itself unless the theme relates an accent to the brand, as `accent: { from: 'brand', rotate: 40 }` does. */
   "--strands-tint"?: (string) | undefined;
   /** Height of the track. The width follows it. */
   "--switch-block-size"?: (string) | undefined;
@@ -24751,13 +24771,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixStepVueProps,
     HelixStepVueEvents
   >;
-  /** 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. */
+  /** 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-accent' 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'.** 'bend' turns bright strands through one tight point, 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 bend's apex 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 less than a screen and a half apart 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. */
   "helix-strands": DefineCustomElement<
     HelixStrands,
     HelixStrandsVueProps,
     HelixStrandsVueEvents
   >;
-  /** 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. */
+  /** 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 'bend' turning 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. */
   "helix-strands-stop": DefineCustomElement<
     HelixStrandsStop,
     HelixStrandsStopVueProps,