@fusion.dev/helix 0.0.0-dev → 0.0.3

package/dist/accordion/item/accordion-item.css.js

@@ -1,4 +1,4 @@
-// Generated from src/accordion/item/accordion-item.css by `bun run styles`. Do not edit.
+// Generated from src/accordion/item/accordion-item.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;
@@ -40,12 +40,6 @@ margin-inline-start: auto;
 transform: scaleY(-1);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="chevron"] {
-transition: none;
-}
-}
-
 [part="trigger"]:hover [part="chevron"] {
 color: var(--helix-color-foreground);
 }
@@ -77,16 +71,4 @@ display: block;
 line-height: var(--helix-leading-normal);
 padding: var(--accordion-item-padding, var(--helix-space-sm) var(--helix-space-md));
 padding-block-start: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="content"] {
-transition: none;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="trigger"] {
-transition: none;
-}
 }`);

package/dist/accordion/root/accordion-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/accordion/root/accordion-root.css by `bun run styles`. Do not edit.
+// Generated from src/accordion/root/accordion-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;

package/dist/accordion/root/accordion-root.d.ts

@@ -4,7 +4,7 @@ import type { CSSResultGroup } from 'lit';
  * @summary Groups collapsible sections, one open at a time by default.
  *
  * @description
- * Items share one rule between neighbours rather than each drawing its own, so
+ * Items share one rule between neighbors rather than each drawing its own, so
  * the seam between two items is one pixel and not two. Those seams are what
  * carry the grouping, which is why the surrounding frame is opt-in rather than
  * the default: an accordion is a list, where a card is a surface.

package/dist/accordion/root/accordion-root.js

@@ -12,7 +12,7 @@ import { styles } from './accordion-root.css.js';
  * @summary Groups collapsible sections, one open at a time by default.
  *
  * @description
- * Items share one rule between neighbours rather than each drawing its own, so
+ * Items share one rule between neighbors rather than each drawing its own, so
  * the seam between two items is one pixel and not two. Those seams are what
  * carry the grouping, which is why the surrounding frame is opt-in rather than
  * the default: an accordion is a list, where a card is a surface.

package/dist/announcement/root/announcement-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/announcement/root/announcement-root.css by `bun run styles`. Do not edit.
+// Generated from src/announcement/root/announcement-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
@@ -127,12 +127,6 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="dismiss"] {
-transition: none;
-}
-}
-
 [part="actions"][data-empty] {
 display: none;
 }

package/dist/app-header/root/app-header-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/app-header/root/app-header-root.css by `bun run styles`. Do not edit.
+// Generated from src/app-header/root/app-header-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
@@ -99,12 +99,6 @@ overflow-x: auto;
 justify-content: flex-start;
 }
 
-@media (prefers-reduced-motion: reduce) {
-:host {
-transition: none;
-}
-}
-
 @media print {
 :host {
 display: none;

package/dist/app-header/root/app-header-root.d.ts

@@ -6,10 +6,10 @@ import type { CSSResultGroup } from 'lit';
  * @description
  * Flat, opaque, and in the flow. Both of the interesting things a banner can do
  * are opt-in: `sticky` because following the reader is a decision about the
- * page rather than about the bar, and `appearance="material"` because a
- * backdrop filter makes the header a containing block for `position: fixed`
- * descendants, so an overlay rendered inside a material header is placed
- * against the header rather than the viewport.
+ * page rather than about the bar, and `material` because a backdrop filter
+ * makes the header a containing block for `position: fixed` descendants, so an
+ * overlay rendered inside a material header is placed against the header rather
+ * than the viewport.
  *
  * The separating rule appears only once the page has scrolled, which keeps the
  * banner flat against a hero and lifts it off the content afterwards. There is
@@ -39,38 +39,35 @@ export declare class HelixAppHeader extends HelixHeadlessAppHeader {
      * What the banner is made of, which is how much of what is behind it shows
      * through.
      *
-     * One axis, three points, and absent is opaque, per the rule that a reflected
-     * property takes no default.
+     * One axis, and absent is opaque, per the rule that a reflected property
+     * takes no default.
      *
      * - Absent is opaque. The page stops at the bar, which is what an application
      *   wants: the bar is chrome and chrome does not need to be interesting.
      * - `glass` is translucent and blurred, so content passing underneath stays
      *   visible and goes soft. The page reads as one surface with a bar floating
      *   over it.
+     * - `frosted` is the same pair turned up: less shows through and the blur is
+     *   heavier.
      * - `transparent` has no fill at all until something has scrolled under it,
      *   and then it takes the glass. For a banner over a hero, where the art
      *   should reach the top of the window and the bar should only become a
      *   surface once it has to be legible over moving content.
      *
-     * **This was `appearance`, and it was filed under the wrong axis from the
-     * start.** The library's test is the one `Card` states: `separation` is where
-     * a surface ends, `tone` is what it means, `material` is what it is made of,
-     * and a property belongs to `material` when it can be true at the same time
-     * as the other two. Every value here varies exactly one quantity, and that
-     * quantity is translucency. The proof is inside the component rather than in
-     * the argument: scrolled, `transparent` emits the same two declarations
-     * `glass` does, so two of the three points are the same material arriving at
-     * different times.
+     * **This belongs to `material` and not to a shape or an appearance.** The
+     * library's test is the one `Card` states: `separation` is where a surface
+     * ends, `tone` is what it means, `material` is what it is made of, and a
+     * property belongs to `material` when it can be true at the same time as the
+     * other two. Every value here varies exactly one quantity, translucency. The
+     * proof is inside the component: scrolled, `transparent` emits the same two
+     * declarations `glass` does, so two of the points are the same material
+     * arriving at different times.
      *
      * **One axis rather than two, and that is the whole reason it stays an
-     * enum.** The three are mutually exclusive: a bar cannot be opaque and
-     * see-through. Splitting the glass out and leaving `appearance="transparent"`
-     * beside it would make `material="glass" appearance="transparent"` sayable,
-     * which is a state with nothing to mean, where an enum makes it unsayable.
-     *
-     * The vocabulary got more coherent on the way. `flat` is a word about shape,
-     * `material` was a word about categories and `transparent` a word about
-     * light; opaque, glass and transparent are three points in one language.
+     * enum.** The values are mutually exclusive: a bar cannot be opaque and
+     * see-through. Splitting the glass out onto a second property would make
+     * `material="glass"` and a transparent flag sayable together, which is a
+     * state with nothing to mean, where an enum makes it unsayable.
      *
      * **`material` makes the header a containing block for `position: fixed`
      * descendants**, which is worth knowing and is narrower than it sounds. Every

package/dist/app-header/root/app-header-root.js

@@ -14,10 +14,10 @@ import { styles } from './app-header-root.css.js';
  * @description
  * Flat, opaque, and in the flow. Both of the interesting things a banner can do
  * are opt-in: `sticky` because following the reader is a decision about the
- * page rather than about the bar, and `appearance="material"` because a
- * backdrop filter makes the header a containing block for `position: fixed`
- * descendants, so an overlay rendered inside a material header is placed
- * against the header rather than the viewport.
+ * page rather than about the bar, and `material` because a backdrop filter
+ * makes the header a containing block for `position: fixed` descendants, so an
+ * overlay rendered inside a material header is placed against the header rather
+ * than the viewport.
  *
  * The separating rule appears only once the page has scrolled, which keeps the
  * banner flat against a hero and lifts it off the content afterwards. There is

package/dist/aura/root/aura-axis.d.ts

@@ -8,11 +8,9 @@
  * output is a uniform, and what that uniform does is a WebGL draw.
  *
  * That guard is the whole reason this file exists. `terminus` was wrong twice
- * while its docstring said otherwise, out by a factor of two and by the aspect
- * correction, so `0.5` exited at 81.3% of the width on the landing page's own
- * box and `0` was the only value that reached the middle. Both times the
- * arithmetic lived inside a getter, beside a sentence describing different
- * arithmetic, and nothing compared them. See 155.
+ * while its docstring said otherwise, the arithmetic living inside a getter
+ * beside a sentence describing different arithmetic with nothing comparing the
+ * two.
  *
  * **`exitOf` mirrors the shader step by step rather than stating the closed
  * form**, which is deliberate and is what makes the round trip worth running.
@@ -51,8 +49,8 @@ export declare const exitOf: (tilt: number, aspect: number) => number;
  * steps gives `terminus = 0.5 + tan(tilt) / (2 * aspect^2)`, and rearranging
  * for the tilt gives what is below.
  *
- * This is the contract `terminus` has always claimed and twice failed to keep:
- * `0` is the left edge, `0.5` the middle and `1` the right edge, in every box.
+ * The contract `terminus` claims: `0` is the left edge, `0.5` the middle and
+ * `1` the right edge, in every box.
  *
  * @param terminus - The crossing wanted, as a fraction of the width.
  * @param aspect - The box's width over its height.

package/dist/aura/root/aura-axis.js

@@ -8,11 +8,9 @@
  * output is a uniform, and what that uniform does is a WebGL draw.
  *
  * That guard is the whole reason this file exists. `terminus` was wrong twice
- * while its docstring said otherwise, out by a factor of two and by the aspect
- * correction, so `0.5` exited at 81.3% of the width on the landing page's own
- * box and `0` was the only value that reached the middle. Both times the
- * arithmetic lived inside a getter, beside a sentence describing different
- * arithmetic, and nothing compared them. See 155.
+ * while its docstring said otherwise, the arithmetic living inside a getter
+ * beside a sentence describing different arithmetic with nothing comparing the
+ * two.
  *
  * **`exitOf` mirrors the shader step by step rather than stating the closed
  * form**, which is deliberate and is what makes the round trip worth running.
@@ -58,8 +56,8 @@ export const exitOf = (tilt, aspect) => {
  * steps gives `terminus = 0.5 + tan(tilt) / (2 * aspect^2)`, and rearranging
  * for the tilt gives what is below.
  *
- * This is the contract `terminus` has always claimed and twice failed to keep:
- * `0` is the left edge, `0.5` the middle and `1` the right edge, in every box.
+ * The contract `terminus` claims: `0` is the left edge, `0.5` the middle and
+ * `1` the right edge, in every box.
  *
  * @param terminus - The crossing wanted, as a fraction of the width.
  * @param aspect - The box's width over its height.

package/dist/aura/root/aura-root.css.js

@@ -1,4 +1,4 @@
-// Generated from src/aura/root/aura-root.css by `bun run styles`. Do not edit.
+// Generated from src/aura/root/aura-root.css by `turbo run styles`. Do not edit.
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 position: relative;

package/dist/aura/root/aura-root.d.ts

@@ -54,21 +54,9 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 export declare class HelixAura extends HelixElement {
     static styles: CSSResultGroup;
     /**
-     * Which form the light takes. Absent is `braid`.
-     *
-     * Reflected because the fallback gradient selects on it, and given no default
-     * for the same reason every axis here has none: a default on a reflected
-     * property writes the attribute onto every host anybody renders.
-     *
-     * **`variant` and not `shape`, which it was until 26 Aug 2026.** `shape` is
-     * an axis about geometry, `circle` against `square`, `arc` against `ring`,
-     * and it is registered as one now. Aurora, braid and caustics are not
-     * geometries; they are eleven names for a look, which is what `variant` is
-     * for by the rule the registry already states. Renamed rather than
-     * grandfathered because nothing is published yet: there is no `helix-v` tag,
-     * so this costs an edit today and a deprecation later. See 236.
+     * How soft the falloff is, `0` tight and `1` diffuse.
      */
-    variant?: 'aurora' | 'braid' | 'caustics' | 'flow' | 'fracture' | 'lattice' | 'particles' | 'rays' | 'streaks' | 'threads' | 'waves';
+    bloom: number;
     /**
      * How far the settings wander on their own, `0` still and `1` restless.
      *
@@ -84,6 +72,10 @@ export declare class HelixAura extends HelixElement {
      * a timer.
      */
     drift: number;
+    /**
+     * Overall brightness, as a multiplier on the field.
+     */
+    gain: number;
     /**
      * What the pointer does, where the shape's own answer is not wanted.
      *
@@ -91,21 +83,13 @@ export declare class HelixAura extends HelixElement {
      * of: braid leans, rays are occluded, threads pinch, particles scatter. The
      * named options are generic, and are a deliberate step down in meaning. A
      * response made of the same material as the shape says something about that
-     * shape; a lamp following the cursor says the same nothing on all nine.
+     * shape; a lamp following the cursor says the same nothing on every one.
      *
      * They exist because a consumer may want the quieter, more conventional
      * answer, and because `none` is a real requirement. Not because any of them
      * is the better default.
      */
     interaction?: 'light' | 'none' | 'ripple' | 'shadow';
-    /**
-     * How far the pointer reaches into the field, `0` upward.
-     *
-     * Multiplied into the presence the pointer already fades in and out with, so
-     * it scales the whole response rather than any one part of it, whichever
-     * interaction is in play.
-     */
-    reach: number;
     /**
      * Whether the pointer shifts and lifts the field.
      *
@@ -116,13 +100,13 @@ export declare class HelixAura extends HelixElement {
      */
     interactive: boolean;
     /**
-     * How soft the falloff is, `0` tight and `1` diffuse.
-     */
-    bloom: number;
-    /**
-     * Overall brightness, as a multiplier on the field.
+     * How far the pointer reaches into the field, `0` upward.
+     *
+     * Multiplied into the presence the pointer already fades in and out with, so
+     * it scales the whole response rather than any one part of it, whichever
+     * interaction is in play.
      */
-    gain: number;
+    reach: number;
     /**
      * Feature size, as a multiplier on the sampled coordinates.
      */
@@ -131,10 +115,6 @@ export declare class HelixAura extends HelixElement {
      * How fast it drifts, as a multiplier on time.
      */
     speed: number;
-    /**
-     * The field's rotation, in degrees.
-     */
-    tilt: number;
     /**
      * Where the axis crosses the top edge, as a fraction of the width.
      *
@@ -152,20 +132,16 @@ export declare class HelixAura extends HelixElement {
      * the angle really is the point, which is what an aura in a square tile
      * wants.
      *
-     * **The fraction is measured across the whole width, and for a while it was
-     * not.** The first expression corrected for the aspect once in the wrong
-     * direction and never subtracted the center, so the value read as an offset
-     * from the middle that also moved with the box: on a 1440 by 1800 hero `0.5`
-     * put the axis at 81.3% of the width and `0` was the only value that reached
-     * the middle. The contract above is now solved against what the shader draws
-     * rather than asserted beside it.
-     *
      * Derived from the box the resize observer already keeps, so it costs no
      * layout read per frame, and the drift is applied to the result rather than
      * to the angle behind it: the field still wanders, around a bearing that
      * holds the exit where it was put.
      */
     terminus?: number;
+    /**
+     * The field's rotation, in degrees.
+     */
+    tilt: number;
     /**
      * How much the members of a population differ from one another, `0` a set
      * that is uniform and `1` the resting amount. Clamped to that range: these
@@ -182,6 +158,20 @@ export declare class HelixAura extends HelixElement {
      * those four this is inert.
      */
     variance: number;
+    /**
+     * Which form the light takes. Absent is `braid`.
+     *
+     * Reflected because the fallback gradient selects on it, and given no default
+     * for the same reason every axis here has none: a default on a reflected
+     * property writes the attribute onto every host anybody renders.
+     *
+     * **`variant` and not `shape`.** `shape` is an axis about geometry, `circle`
+     * against `square`, `arc` against `ring`, and it is registered as one.
+     * Aurora, braid and caustics are not geometries; they are eleven names for a
+     * look, which is what `variant` is for by the rule the registry already
+     * states.
+     */
+    variant?: 'aurora' | 'braid' | 'caustics' | 'flow' | 'fracture' | 'lattice' | 'particles' | 'rays' | 'streaks' | 'threads' | 'waves';
     /** Repaints when the palette moves, which no re-render would do on its own. */
     private readonly tokens;
     /**
@@ -235,7 +225,12 @@ export declare class HelixAura extends HelixElement {
      * ending at P to ending at P, P, which is the same shape, and nothing jumps.
      */
     private readonly head;
-    /** Where the pointer is, and where the field has got to. The gap is weight. */
+    /**
+     * Where the pointer is, and where the field has got to. The gap is weight.
+     *
+     * `presence`, not `reach`: the eased value is how far the pointer has faded
+     * in, and `reach` is the consumer's amplitude. The two multiply.
+     */
     private readonly target;
     private readonly eased;
     private motion;
@@ -243,12 +238,12 @@ export declare class HelixAura extends HelixElement {
     /**
      * The element's box, cached.
      *
-     * **Read per event, this was the ragged half.** `getBoundingClientRect` forces
-     * a synchronous layout, and a pointer emits events far faster than the
-     * display refreshes: a 1000Hz mouse flushed layout a thousand times a second
-     * to compute a number that only changes when the page reflows. Refreshed from
-     * the resize observer and from scroll, both of which are exactly when it can
-     * go stale, and never from the handler that reads it.
+     * **Never read per event.** `getBoundingClientRect` forces a synchronous
+     * layout, and a pointer emits events far faster than the display refreshes: a
+     * 1000Hz mouse flushed layout a thousand times a second to compute a number
+     * that only changes when the page reflows. Refreshed from the resize observer
+     * and from scroll, both of which are exactly when it can go stale, and never
+     * from the handler that reads it.
      */
     private box;
     /** Watches the element's own size, so no frame has to ask for it. */
@@ -265,9 +260,8 @@ export declare class HelixAura extends HelixElement {
      * scales: it opens coarse and tightens, which reads as the background zooming
      * out on load rather than as a background.
      *
-     * Refusing the degenerate 0 by 0 box fixed the worst of it, a 2 by 2 drawing
-     * buffer smeared over the page, and left the ordinary case: a first real box
-     * that is simply not the last one.
+     * Refusing the degenerate 0 by 0 box leaves the ordinary case: a first real
+     * box that is simply not the last one.
      *
      * So the opening frame waits for the box to stop moving. Nothing paints until
      * a measurement has stood unchanged for one animation frame, which is the
@@ -293,17 +287,16 @@ export declare class HelixAura extends HelixElement {
     /**
      * The context and the program, from whatever canvas can still give one.
      *
-     * **A canvas whose context was force-lost never yields a working one again**,
-     * and the release below used to assume the opposite: `getContext` hands back
-     * the very same dead object, which reports `isContextLost()` and answers
-     * `null` to every `getShaderParameter`. So `link` failed, `start` returned
-     * before installing a single observer, and the element sat connected and
-     * permanently blind, holding whatever buffer it last painted. Measured on the
-     * landing page, where one remove-and-reinsert was enough: the frozen frame
-     * was the 2x2 the first `measure` took before layout, stretched across two
-     * screens as a gray smear that reads as a broken gradient rather than as a
-     * dead component. The only sound in the console was `getShaderInfoLog`
-     * answering `null`, twice per element.
+     * **A canvas whose context was force-lost never yields a working one again.**
+     * `getContext` hands back the very same dead object, which reports
+     * `isContextLost()` and answers `null` to every `getShaderParameter`, so
+     * `link` fails, `start` returns before installing a single observer, and the
+     * element sits connected and permanently blind, holding whatever buffer it
+     * last painted. Measured on the landing page, where one remove-and-reinsert
+     * was enough: the frozen frame was the 2x2 the first `measure` took before
+     * layout, stretched across two screens as a gray smear that reads as a broken
+     * gradient rather than as a dead component. The only sound in the console was
+     * `getShaderInfoLog` answering `null`, twice per element.
      *
      * A spent canvas is therefore replaced rather than re-asked. `restoreContext`
      * is the other way and is not reachable from here: it needs the `webglcontextlost`
@@ -385,12 +378,10 @@ export declare class HelixAura extends HelixElement {
      * `/helix/aura`, where it is a toggle a reader chose. So the cap applies where
      * nothing is being followed and lifts where something is.
      *
-     * **Measured before it was capped, because the cost had changed.** 252 was
-     * filed against one field on the first two screens. It is three now, one per
-     * transparent run of the page, and with the frame limiter off they drew 2,654
-     * times in three seconds against 1,276 for one: the work scales with the count
-     * because each instance draws once per callback. Capping the two that nobody
-     * points at is most of that back.
+     * **The cost scales with the count.** Three fields run on the landing page,
+     * one per transparent run, and with the frame limiter off they drew 2,654
+     * times in three seconds against 1,276 for one: each instance draws once per
+     * callback. Capping the two that nobody points at is most of that back.
      */
     private static readonly CAPPED;
     private readonly tick;
@@ -403,12 +394,9 @@ export declare class HelixAura extends HelixElement {
      * business knowing when: it is read once per frame from numbers already
      * there.
      *
-     * The solve is `tiltFor` in `aura-axis.ts` rather than an expression here,
-     * and that is the fix for how this went wrong twice. Both times the
-     * arithmetic sat inside this getter next to a sentence describing different
-     * arithmetic, and nothing in the repository could tell they disagreed. It is
-     * callable now, and `aura-root.dom.spec.ts` runs it against a model of the
-     * shader in both directions. See 155.
+     * The solve is `tiltFor` in `aura-axis.ts` rather than an expression here, so
+     * it is callable and `aura-root.dom.spec.ts` runs it against a model of the
+     * shader in both directions.
      */
     private get bearing();
     private drifted;
@@ -418,19 +406,19 @@ export declare class HelixAura extends HelixElement {
     /**
      * Keeps the head of the wake on the cursor, and commits it as it travels.
      *
-     * **The head used to be a committed mark, and that was both faults at once.**
-     * Marks are spaced by distance so eight slots cover a gesture rather than the
-     * last few milliseconds of one, but committing was also the only time the
-     * stroke grew: its leading end therefore sat up to a full gate behind the
-     * pointer, and caught up in jumps of exactly that size. Latent, and jagged,
-     * for one reason.
-     *
-     * So the slot at `trailNext` is provisional. It is rewritten every frame to
-     * wherever the field has actually eased to, which is where the cursor looks
-     * like it is, so the stroke always reaches the pointer. Crossing the gate does
-     * not move the head, it just stops the previous position from being
-     * overwritten, and a new provisional head starts from there. The wake grows
-     * continuously and is still only ever eight points.
+     * **The head is provisional, never a committed mark**, and holding it in the
+     * ring is two faults at once. Marks are spaced by distance so eight slots
+     * cover a gesture rather than the last few milliseconds of one, but if
+     * committing is also the only time the stroke grows, its leading end sits up
+     * to a full gate behind the pointer and catches up in jumps of exactly that
+     * size. Latent, and jagged, for one reason.
+     *
+     * So the slot at `trailNext` is rewritten every frame to wherever the field
+     * has actually eased to, which is where the cursor looks like it is, so the
+     * stroke always reaches the pointer. Crossing the gate does not move the head,
+     * it just stops the previous position from being overwritten, and a new
+     * provisional head starts from there. The wake grows continuously and is still
+     * only ever eight points.
      *
      * Measured against `eased` rather than `target`, or the stroke would reach a
      * place the field has not arrived at yet and lead its own parallax.