@fusion.dev/helix 0.161.0 → 0.162.0

package/types/vue.d.ts

@@ -127,6 +127,8 @@ import type {
   HelixStat,
   HelixSteps,
   HelixStep,
+  HelixStrands,
+  HelixStrandsStop,
   HelixSwitch,
   HelixTableCell,
   HelixTableColumn,
@@ -244,6 +246,7 @@ import type {
   HelixBeforeResizeEvent,
   HelixCollapseEvent,
   HelixResizedEvent,
+  HelixStrandsFallbackEvent,
   HelixLoadEvent,
   HelixTourAskEvent,
   HelixTourStatusEvent,
@@ -16651,6 +16654,64 @@ export type HelixStepVueEvents = {
   "helix-select": HelixStepHelixSelectElementEvent;
 };
 
+/** `HelixStrands` component event */
+export type HelixStrandsElementEvent<E = Event> = TypedEvent<HelixStrands, E>;
+/** `helix-strands-fallback` event type */
+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`
+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;
+};
+
+export type HelixStrandsVueEvents = {
+  /** Fired each time the element stops drawing its ribbon and shows its gradient, with the reason. */
+  "helix-strands-fallback": HelixStrandsHelixStrandsFallbackElementEvent;
+};
+
+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. */
+  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 HelixStrandsStopVueEvents = {};
+
 /** `HelixSwitch` component event */
 export type HelixSwitchElementEvent<E = Event> = TypedEvent<HelixSwitch, E>;
 /** `helix-before-toggle` event type */
@@ -22781,6 +22842,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. */
@@ -24023,6 +24092,18 @@ 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. */
+  "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. */
+  "helix-strands-stop": DefineCustomElement<
+    HelixStrandsStop,
+    HelixStrandsStopVueProps,
+    HelixStrandsStopVueEvents
+  >;
   /** 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 what tells the two states apart.  The input is the hit target. It is stretched over the track and made invisible, so the press, the focus, and the label forwarding come from the platform.  The height is '--helix-size-switch', one step above the checkbox's at every density. At the checkbox's height the thumb has two pixels of track around it, and the control looks like a small dash. The width follows the height, so setting '--switch-block-size' widens the switch too and keeps the proportion.  The thumb is an element, the 'thumb' part, and holds an icon for each state: one in the 'on' slot shows while the switch is on, and one in the 'off' slot while it is off. */
   "helix-switch": DefineCustomElement<
     HelixSwitch,