@fusion.dev/helix 0.181.2 → 0.182.1

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.181.2",
+  "version": "0.182.1",
   "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.181.2",
-    "@fusion.dev/helix-headless": "0.181.2",
-    "@fusion.dev/helix-styles": "0.181.2"
+    "@fusion.dev/helix-core": "0.182.1",
+    "@fusion.dev/helix-headless": "0.182.1",
+    "@fusion.dev/helix-styles": "0.182.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.181.2",
-    "@fusion.dev/helix-testing": "0.181.2",
+    "@fusion.dev/helix-cem": "0.182.1",
+    "@fusion.dev/helix-testing": "0.182.1",
     "@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

@@ -33817,9 +33817,10 @@ 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. */
+  /** How differently the strands move across the ribbon, from `0`, the whole
+ribbon rolling and waving as one, to `1`, its edges flowing at their own
+pace past its middle. Neighbors always move together, so no strand leaves
+its lane. 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
@@ -33827,6 +33828,11 @@ 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 ids of elements the light dims behind, separated by spaces, such as
+a hero's words. Inside each, the ribbon keeps a faint glow, so words over
+it stay crisp and nothing busy runs under them, and it eases back to full
+a short way past each edge. Up to four; ids that name nothing are skipped. */
+  quiet?: (HelixStrands["quiet"]) | 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 bend's apex or a wave, stays sharp whatever this says. */
@@ -33876,9 +33882,10 @@ 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. */
+  /** How differently the strands move across the ribbon, from `0`, the whole
+ribbon rolling and waving as one, to `1`, its edges flowing at their own
+pace past its middle. Neighbors always move together, so no strand leaves
+its lane. 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
@@ -33886,6 +33893,11 @@ 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 ids of elements the light dims behind, separated by spaces, such as
+a hero's words. Inside each, the ribbon keeps a faint glow, so words over
+it stay crisp and nothing busy runs under them, and it eases back to full
+a short way past each edge. Up to four; ids that name nothing are skipped. */
+  "prop:quiet"?: (HelixStrands["quiet"]) | 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 bend's apex or a wave, stays sharp whatever this says. */
@@ -44118,6 +44130,13 @@ export type CustomElements = {
    * - `--chart-stroke`: Thickness of a `lines` series. Bar Chart, Line Chart, and the top edge of Area Chart share this property. `--bar-chart-line-width` overrides it here.
    * - `--bar-chart-axis`: The width of an axis, in `ch`, set from the widest number on it. The chart sets it on the axis itself, and only when the categories run along the bottom. In a horizontal chart the axis is a row, one line high.
    * - `--bar-chart-secondary`: The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to.
+   * - `--bar-chart-tone-accent`: The color of a bar whose cell says `data-tone="accent"`.
+   * - `--bar-chart-tone-danger`: The color of a bar whose cell says `data-tone="danger"`.
+   * - `--bar-chart-tone-info`: The color of a bar whose cell says `data-tone="info"`.
+   * - `--bar-chart-tone-muted`: The color of a bar whose cell says `data-tone="muted"`.
+   * - `--bar-chart-tone-primary`: The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define.
+   * - `--bar-chart-tone-success`: The color of a bar whose cell says `data-tone="success"`.
+   * - `--bar-chart-tone-warning`: The color of a bar whose cell says `data-tone="warning"`.
    * - `--chart-bar-wash`: The gradient for a bar, named per bar so the styled tier can use it as the `fill`. It is always drawn, and used only when `wash="gradient"` is set.
    *
    * ## CSS Parts
@@ -44127,7 +44146,8 @@ export type CustomElements = {
    * - `axis`: The numbers of one scale: the primary under `value-axis`, and both when `secondary` splits the chart into two scales.
    * - `band`: The category band under the pointer.
    * - `bar`: One column. Under `stacked`, one segment of a category's column.
-   * - `bar-end`: Under `stacked`, the segment at a column's far end: the last positive segment above zero and the last negative one below it. Its `data-end` is `positive` or `negative`. A blank or a zero segment is never the end. Set together with `bar`.
+   * - `bar-end`: The bar at a column's far end, the end away from zero, which is the end to round. A column standing alone is its own far end. Under `stacked`, the last positive segment above zero and the last negative one below it. Its `data-end` is `positive` or `negative`. A blank or a zero is never the end. Set together with `bar`.
+   * - `bar-end-negative`: A far end below zero, whose far end is its bottom, or its inline start when the bars run across. Set together with `bar-end`.
    * - `bar-wash-end`: The far stop of a bar's gradient, where one is used.
    * - `bar-wash-start`: The stop of a bar's gradient at its base.
    * - `baseline`: The line the columns stand on.
@@ -65980,9 +66000,15 @@ export type CustomElements = {
    * `--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.
+   * **Four 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. `sweep` enters at a top corner, the one
+   * `at` is nearer, and crosses in one diagonal to the far side. `waves` is sharp
+   * strands crossing the full width.
+   *
+   * **Quiet behind words.** `quiet` names elements, such as a hero's words, that
+   * the light dims behind to a faint glow, so a bright ribbon can cross the page
+   * under them and they stay crisp.
    *
    * **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
@@ -66034,13 +66060,18 @@ export type CustomElements = {
    * 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.
+   * - `drift`: How differently the strands move across the ribbon, from `0`, the whole
+   * ribbon rolling and waving as one, to `1`, its edges flowing at their own
+   * pace past its middle. Neighbors always move together, so no strand leaves
+   * its lane. 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.
+   * - `quiet`: The ids of elements the light dims behind, separated by spaces, such as
+   * a hero's words. Inside each, the ribbon keeps a faint glow, so words over
+   * it stay crisp and nothing busy runs under them, and it eases back to full
+   * a short way past each edge. Up to four; ids that name nothing are skipped.
    * - `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 bend's apex or a wave, stays sharp whatever this says.
@@ -66116,9 +66147,11 @@ 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 `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.
+   * turning through it, a `ribbon` passing through `at`, a `sweep` crossing in one
+   * diagonal from the page's top corner on the side `at` is nearer to the
+   * element's far top corner, 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.
    *
@@ -73833,6 +73866,13 @@ export type CustomElementsSolidJs = {
    * - `--chart-stroke`: Thickness of a `lines` series. Bar Chart, Line Chart, and the top edge of Area Chart share this property. `--bar-chart-line-width` overrides it here.
    * - `--bar-chart-axis`: The width of an axis, in `ch`, set from the widest number on it. The chart sets it on the axis itself, and only when the categories run along the bottom. In a horizontal chart the axis is a row, one line high.
    * - `--bar-chart-secondary`: The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to.
+   * - `--bar-chart-tone-accent`: The color of a bar whose cell says `data-tone="accent"`.
+   * - `--bar-chart-tone-danger`: The color of a bar whose cell says `data-tone="danger"`.
+   * - `--bar-chart-tone-info`: The color of a bar whose cell says `data-tone="info"`.
+   * - `--bar-chart-tone-muted`: The color of a bar whose cell says `data-tone="muted"`.
+   * - `--bar-chart-tone-primary`: The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define.
+   * - `--bar-chart-tone-success`: The color of a bar whose cell says `data-tone="success"`.
+   * - `--bar-chart-tone-warning`: The color of a bar whose cell says `data-tone="warning"`.
    * - `--chart-bar-wash`: The gradient for a bar, named per bar so the styled tier can use it as the `fill`. It is always drawn, and used only when `wash="gradient"` is set.
    *
    * ## CSS Parts
@@ -73842,7 +73882,8 @@ export type CustomElementsSolidJs = {
    * - `axis`: The numbers of one scale: the primary under `value-axis`, and both when `secondary` splits the chart into two scales.
    * - `band`: The category band under the pointer.
    * - `bar`: One column. Under `stacked`, one segment of a category's column.
-   * - `bar-end`: Under `stacked`, the segment at a column's far end: the last positive segment above zero and the last negative one below it. Its `data-end` is `positive` or `negative`. A blank or a zero segment is never the end. Set together with `bar`.
+   * - `bar-end`: The bar at a column's far end, the end away from zero, which is the end to round. A column standing alone is its own far end. Under `stacked`, the last positive segment above zero and the last negative one below it. Its `data-end` is `positive` or `negative`. A blank or a zero is never the end. Set together with `bar`.
+   * - `bar-end-negative`: A far end below zero, whose far end is its bottom, or its inline start when the bars run across. Set together with `bar-end`.
    * - `bar-wash-end`: The far stop of a bar's gradient, where one is used.
    * - `bar-wash-start`: The stop of a bar's gradient at its base.
    * - `baseline`: The line the columns stand on.
@@ -96053,9 +96094,15 @@ export type CustomElementsSolidJs = {
    * `--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.
+   * **Four 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. `sweep` enters at a top corner, the one
+   * `at` is nearer, and crosses in one diagonal to the far side. `waves` is sharp
+   * strands crossing the full width.
+   *
+   * **Quiet behind words.** `quiet` names elements, such as a hero's words, that
+   * the light dims behind to a faint glow, so a bright ribbon can cross the page
+   * under them and they stay crisp.
    *
    * **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
@@ -96107,13 +96154,18 @@ export type CustomElementsSolidJs = {
    * 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.
+   * - `drift`: How differently the strands move across the ribbon, from `0`, the whole
+   * ribbon rolling and waving as one, to `1`, its edges flowing at their own
+   * pace past its middle. Neighbors always move together, so no strand leaves
+   * its lane. 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.
+   * - `quiet`: The ids of elements the light dims behind, separated by spaces, such as
+   * a hero's words. Inside each, the ribbon keeps a faint glow, so words over
+   * it stay crisp and nothing busy runs under them, and it eases back to full
+   * a short way past each edge. Up to four; ids that name nothing are skipped.
    * - `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 bend's apex or a wave, stays sharp whatever this says.
@@ -96192,9 +96244,11 @@ 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 `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.
+   * turning through it, a `ribbon` passing through `at`, a `sweep` crossing in one
+   * diagonal from the page's top corner on the side `at` is nearer to the
+   * element's far top corner, 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.
    *
@@ -102296,6 +102350,20 @@ export type CustomCssProperties = {
   "--bar-chart-axis"?: (string) | undefined;
   /** The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to. */
   "--bar-chart-secondary"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="accent"`. */
+  "--bar-chart-tone-accent"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="danger"`. */
+  "--bar-chart-tone-danger"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="info"`. */
+  "--bar-chart-tone-info"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="muted"`. */
+  "--bar-chart-tone-muted"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define. */
+  "--bar-chart-tone-primary"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="success"`. */
+  "--bar-chart-tone-success"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="warning"`. */
+  "--bar-chart-tone-warning"?: (string) | undefined;
   /** The gradient for a bar, named per bar so the styled tier can use it as the `fill`. It is always drawn, and used only when `wash="gradient"` is set. */
   "--chart-bar-wash"?: (string) | undefined;
   /** The color of the attribution. */

package/types/vue.d.ts

@@ -17353,9 +17353,10 @@ 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. */
+  /** How differently the strands move across the ribbon, from `0`, the whole
+ribbon rolling and waving as one, to `1`, its edges flowing at their own
+pace past its middle. Neighbors always move together, so no strand leaves
+its lane. 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
@@ -17363,6 +17364,11 @@ 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 ids of elements the light dims behind, separated by spaces, such as
+a hero's words. Inside each, the ribbon keeps a faint glow, so words over
+it stay crisp and nothing busy runs under them, and it eases back to full
+a short way past each edge. Up to four; ids that name nothing are skipped. */
+  quiet?: (HelixStrands["quiet"]) | 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 bend's apex or a wave, stays sharp whatever this says. */
@@ -21815,6 +21821,20 @@ export type CustomCssProperties = {
   "--bar-chart-axis"?: (string) | undefined;
   /** The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to. */
   "--bar-chart-secondary"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="accent"`. */
+  "--bar-chart-tone-accent"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="danger"`. */
+  "--bar-chart-tone-danger"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="info"`. */
+  "--bar-chart-tone-info"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="muted"`. */
+  "--bar-chart-tone-muted"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define. */
+  "--bar-chart-tone-primary"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="success"`. */
+  "--bar-chart-tone-success"?: (string) | undefined;
+  /** The color of a bar whose cell says `data-tone="warning"`. */
+  "--bar-chart-tone-warning"?: (string) | undefined;
   /** The gradient for a bar, named per bar so the styled tier can use it as the `fill`. It is always drawn, and used only when `wash="gradient"` is set. */
   "--chart-bar-wash"?: (string) | undefined;
   /** The color of the attribution. */
@@ -24975,13 +24995,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-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. */
+  /** 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.  **Four 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. 'sweep' enters at a top corner, the one 'at' is nearer, and crosses in one diagonal to the far side. 'waves' is sharp strands crossing the full width.  **Quiet behind words.** 'quiet' names elements, such as a hero's words, that the light dims behind to a faint glow, so a bright ribbon can cross the page under them and they stay crisp.  **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 '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. */
+  /** 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', a 'sweep' crossing in one diagonal from the page's top corner on the side 'at' is nearer to the element's far top corner, 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,