@fusion.dev/helix 0.143.0 → 0.145.0

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

@@ -31,15 +31,26 @@ transform: scaleY(1);
 transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-:host(:not([chevron-placement="start"])) [part="chevron"] {
+::slotted([slot="chevron"]) {
+block-size: 1em;
+color: var(--helix-color-foreground-subtle);
+flex: 0 0 auto;
+inline-size: 1em;
+transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not([chevron-placement="start"])) [part="chevron"],
+:host(:not([chevron-placement="start"])) ::slotted([slot="chevron"]) {
 margin-inline-start: auto;
 }
 
-:host(:state(open)) [part="chevron"] {
+:host(:state(open)) [part="chevron"],
+:host(:state(open)) ::slotted([slot="chevron"]) {
 transform: scaleY(-1);
 }
 
-[part="trigger"]:hover:not(:disabled) [part="chevron"] {
+[part="trigger"]:hover:not(:disabled) [part="chevron"],
+[part="trigger"]:hover:not(:disabled) ::slotted([slot="chevron"]) {
 color: var(--helix-color-foreground);
 }
 

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

@@ -16,6 +16,8 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/accordion
  *
  * @slot - The content shown when the section is open.
+ * @slot chevron - Replaces the open and close indicator. A slotted icon is sized, colored and
+ *   turned like the drawn one.
  * @slot summary - The text of the button that opens and closes the section. Always shown.
  *
  * @csspart chevron - The open and close indicator.

package/dist/aura/palette.d.ts

@@ -0,0 +1,38 @@
+import type { ColorBytes, TokenColor } from '@fusion.dev/helix-core';
+/** The four ramp stops a shape is drawn through, as channels in `0..1`. */
+export interface AuraPalette {
+    glow: TokenColor;
+    ground: TokenColor;
+    haze: TokenColor;
+    peak: TokenColor;
+}
+/** The computed colors the canvas carries, one per stop and two for the peak. */
+export type PaletteStyle = Pick<CSSStyleDeclaration, 'caretColor' | 'color' | 'columnRuleColor' | 'outlineColor' | 'textDecorationColor'>;
+/** The default theme's dark page, ink on black, which is drawn until a read. */
+export declare const RESTING_PALETTE: AuraPalette;
+/**
+ * The ramp, from the colors the canvas's stylesheet resolved for it.
+ *
+ * **Carried on color properties of the canvas, which a canvas never paints**,
+ * because a custom property is handed back as the text that was written and a
+ * color property is resolved by the engine first. Read there, each stop takes
+ * the `--aura-*` hook a page wrote anywhere above the aura, and the token
+ * otherwise, the same way the fallback gradient on the host does:
+ *
+ * - `color`: `--aura-glow`, or `primary`.
+ * - `text-decoration-color`: `--aura-haze`, or `primary-subtle`.
+ * - `outline-color`: `--aura-ground`, or the background.
+ * - `column-rule-color` and `caret-color`: `--aura-peak`, or the light and the
+ *   dark page's own peak.
+ *
+ * **Light pages peak on the pressed `primary-active` and dark ones on the
+ * foreground**, and the ground is what says which: mixing a saturated hue
+ * toward near-black takes the chroma out of exactly the pixels carrying the
+ * most of it. Read from the ground's own luminance rather than asked of the
+ * color mode, which is a private token this tier may not reach for. A page
+ * that sets `--aura-peak` sets both, so its peak is used either way.
+ *
+ * @param style The canvas's computed style.
+ * @param read Turns a resolved color into bytes, `undefined` where it cannot.
+ */
+export declare const paletteOf: (style: PaletteStyle, read: (value: string) => ColorBytes | undefined) => AuraPalette;

package/dist/aura/palette.js

@@ -0,0 +1,22 @@
+export const RESTING_PALETTE = {
+    glow: [0.88, 0.88, 0.88],
+    ground: [0, 0, 0],
+    haze: [0.16, 0.16, 0.16],
+    peak: [1, 1, 1],
+};
+export const paletteOf = (style, read) => {
+    const channels = (value, fallback) => {
+        const bytes = read(value);
+        return bytes ? [bytes[0] / 255, bytes[1] / 255, bytes[2] / 255] : [...fallback];
+    };
+    const ground = channels(style.outlineColor, RESTING_PALETTE.ground);
+    const light = ground[0] * 0.2126 + ground[1] * 0.7152 + ground[2] * 0.0722 > 0.5;
+    return {
+        glow: channels(style.color, RESTING_PALETTE.glow),
+        ground,
+        haze: channels(style.textDecorationColor, RESTING_PALETTE.haze),
+        peak: light
+            ? channels(style.columnRuleColor, [0.02, 0.02, 0.02])
+            : channels(style.caretColor, RESTING_PALETTE.peak),
+    };
+};

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

@@ -1,5 +1,10 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+
+--_aura-glow: var(--aura-glow, var(--helix-color-primary));
+--_aura-ground: var(--aura-ground, var(--helix-color-background));
+--_aura-haze: var(--aura-haze, var(--helix-color-primary-subtle));
+
 position: relative;
 display: block;
 inline-size: 100%;
@@ -7,9 +12,9 @@ block-size: 100%;
 
 background-image: radial-gradient(
 120% 90% at 62% 12%,
-color-mix(in oklab, var(--helix-color-primary) 38%, var(--helix-color-background)) 0%,
-var(--helix-color-primary-subtle) 38%,
-var(--helix-color-background) 78%
+color-mix(in oklab, var(--_aura-glow) 38%, var(--_aura-ground)) 0%,
+var(--_aura-haze) 38%,
+var(--_aura-ground) 78%
 );
 }
 
@@ -25,6 +30,22 @@ pointer-events: auto;
 display: block;
 inline-size: 100%;
 block-size: 100%;
+
+caret-color: var(--aura-peak, var(--helix-color-foreground));
+color: var(--_aura-glow);
+column-rule-color: var(--aura-peak, var(--helix-color-primary-active));
+outline-color: var(--_aura-ground);
+text-decoration-color: var(--_aura-haze);
+}
+
+[part="content"] {
+inset: 0;
+pointer-events: none;
+position: absolute;
+}
+
+::slotted(*) {
+pointer-events: auto;
 }
 
 [part="canvas"][hidden] {

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

@@ -33,13 +33,37 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * allow. Its behavior is drawing to a canvas, so there is no structure for you
  * to restyle and nothing for a headless version to hold.
  *
+ * **Content placed inside sits over the field**, in a `content` part that
+ * covers the aura, so an interactive aura answers the pointer over the
+ * content too. Clicks still reach the content. Style `::part(content)` to
+ * place it, such as centering a hero's heading.
+ *
+ * **The colors are the theme's, and each has a hook**: `--aura-ground`,
+ * `--aura-haze`, `--aura-glow` and `--aura-peak`, read by the shader and by the
+ * fallback gradient alike, from wherever on the page you set them.
+ *
+ * Where the gradient shows in place of the shader, the aura matches
+ * `:state(fallback)` and sends `helix-aura-fallback` with the reason.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
  * @aliases Backdrop, Background, Atmosphere, Gradient
  * @documentation https://fusion.dev/helix/components/aura
  *
+ * @slot - Content drawn over the field, such as a heading.
+ *
+ * @event {HelixAuraFallbackEvent} helix-aura-fallback - Fired each time the aura stops drawing its shader and shows its gradient, with the reason.
+ *
  * @csspart canvas - The surface the shader draws into.
+ * @csspart content - The box over the field that holds the content. It covers the aura.
+ *
+ * @cssproperty --aura-glow - The bright stop of the ramp. Defaults to `--helix-color-primary`.
+ * @cssproperty --aura-ground - The page the field fades into. Defaults to `--helix-color-background`.
+ * @cssproperty --aura-haze - The faint stop between the ground and the glow. Defaults to `--helix-color-primary-subtle`.
+ * @cssproperty --aura-peak - The hottest stop, at the center of a shape. Defaults to `--helix-color-primary-active` on a light page and `--helix-color-foreground` on a dark one.
+ *
+ * @cssstate fallback - The aura shows its gradient: the renderer draws on the CPU, there is no WebGL, or the browser took the context back. Cleared once the shader draws again.
  */
 export declare class HelixAura extends HelixElement {
     static styles: CSSResultGroup;
@@ -173,8 +197,7 @@ export declare class HelixAura extends HelixElement {
      * 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;
+    constructor();
     /**
      * The four ramp stops, resolved.
      *
@@ -186,6 +209,10 @@ export declare class HelixAura extends HelixElement {
      * that happens, so this is filled from there and from the first paint.
      */
     private palette;
+    /** Why the gradient shows, while it does, or `undefined` while the shader draws. */
+    private fallback;
+    /** Why the last `build` drew nothing, for the fallback it leads to. */
+    private refused;
     private canvas;
     private gl;
     private program;
@@ -413,6 +440,15 @@ export declare class HelixAura extends HelixElement {
      * loss was canceled.
      */
     private readonly handleLost;
+    /**
+     * Shows the gradient, and says so once for each time it starts to.
+     *
+     * The state is what a stylesheet reads, and the event is what a script
+     * logs, such as to count how many readers see the gradient. Sent again only
+     * after the shader has drawn in between, so a context that is lost while
+     * the gradient already shows is not said twice.
+     */
+    private fallBack;
     /**
      * Draws again on the context the browser gave back.
      *
@@ -424,11 +460,10 @@ export declare class HelixAura extends HelixElement {
     /**
      * Resolves the ramp. Called when the palette moves, not when a frame draws.
      *
-     * Light pages peak on the pressed `primary-active` and dark ones on the
-     * foreground, and the ground is what says which: mixing a saturated hue
-     * toward near-black takes the chroma out of exactly the pixels carrying the
-     * most of it. Read from the ground's own luminance rather than asked of the
-     * color mode, which is a private token this tier may not reach for.
+     * From the canvas's own computed style, which carries each stop on a color
+     * property: the `--aura-*` hook where a page set one, and the token
+     * otherwise. `paletteOf` says which property is which, and how the peak is
+     * chosen for a light page or a dark one.
      */
     private readPalette;
     private link;

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

@@ -5,10 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixAura_1;
-import { customElement, HelixElement, MAX_FRAME_STEP, PaintGateController, TokenColorController, } from '@fusion.dev/helix-core';
+import { customElement, HelixAuraFallbackEvent, HelixElement, MAX_FRAME_STEP, PaintGateController, readColor, TokenColorController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { tiltFor } from '../axis.js';
+import { paletteOf, RESTING_PALETTE } from '../palette.js';
 import { FRAGMENT, INTERACTIONS, SHAPES, VERTEX } from '../shader.js';
 import { styles } from './aura-root.css.js';
 const MAX_CANVAS_EDGE = 4096;
@@ -16,8 +17,10 @@ const MAX_CANVAS_PIXELS = 4_194_304;
 const OPENING_PATIENCE = 500;
 const SOFTWARE_RENDERER = /swiftshader|llvmpipe|softpipe|software rasterizer|basic render/i;
 let HelixAura = class HelixAura extends HelixElement {
+    static { HelixAura_1 = this; }
+    static { this.styles = styles; }
     constructor() {
-        super(...arguments);
+        super();
         this.bloom = 0.5;
         this.drift = 0;
         this.gain = 1;
@@ -27,16 +30,8 @@ let HelixAura = class HelixAura extends HelixElement {
         this.speed = 1;
         this.tilt = 14;
         this.variance = 1;
-        this.tokens = new TokenColorController(this, () => {
-            this.readPalette();
-            this.paintOnce();
-        });
-        this.palette = {
-            glow: [0.88, 0.88, 0.88],
-            ground: [0, 0, 0],
-            haze: [0.16, 0.16, 0.16],
-            peak: [1, 1, 1],
-        };
+        this.palette = { ...RESTING_PALETTE };
+        this.refused = 'unavailable';
         this.canvas = null;
         this.gl = null;
         this.program = null;
@@ -87,6 +82,7 @@ let HelixAura = class HelixAura extends HelixElement {
             }
             this.program = null;
             this.canvas?.toggleAttribute('hidden', true);
+            this.fallBack('lost');
         };
         this.handleRestored = () => {
             if (!this.prepare()) {
@@ -121,9 +117,11 @@ let HelixAura = class HelixAura extends HelixElement {
             const rect = this.getBoundingClientRect();
             this.box = { ...this.box, left: rect.left, top: rect.top };
         };
+        new TokenColorController(this, () => {
+            this.readPalette();
+            this.paintOnce();
+        });
     }
-    static { HelixAura_1 = this; }
-    static { this.styles = styles; }
     static { this.CONTEXT = {
         alpha: true,
         antialias: false,
@@ -132,7 +130,8 @@ let HelixAura = class HelixAura extends HelixElement {
         stencil: false,
     }; }
     render() {
-        return html `<canvas part="canvas" aria-hidden="true"></canvas>`;
+        return html `<canvas part="canvas" aria-hidden="true"></canvas>
+      <div part="content"><slot></slot></div>`;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -150,6 +149,7 @@ let HelixAura = class HelixAura extends HelixElement {
             this.gl = null;
         }
         if (!this.program && !this.gl?.isContextLost() && !this.build()) {
+            this.fallBack(this.refused);
             return;
         }
         this.canvas?.addEventListener('webglcontextlost', this.handleLost);
@@ -182,8 +182,10 @@ let HelixAura = class HelixAura extends HelixElement {
             return false;
         }
         if (HelixAura_1.drawsInSoftware()) {
+            this.refused = 'software';
             return false;
         }
+        this.refused = 'unavailable';
         let gl = canvas.getContext('webgl2', HelixAura_1.CONTEXT);
         if (gl?.isContextLost()) {
             const fresh = document.createElement('canvas');
@@ -212,6 +214,8 @@ let HelixAura = class HelixAura extends HelixElement {
             return false;
         }
         this.canvas?.toggleAttribute('hidden', false);
+        this.fallback = undefined;
+        this.toggleState('fallback', false);
         gl.useProgram(this.program);
         for (const name of [
             'uBloom',
@@ -263,17 +267,19 @@ let HelixAura = class HelixAura extends HelixElement {
         window.removeEventListener('scroll', this.handleScroll, { capture: true });
         this.release = window.setTimeout(this.drop, 0);
     }
+    fallBack(reason) {
+        if (this.fallback !== undefined) {
+            return;
+        }
+        this.fallback = reason;
+        this.toggleState('fallback', true);
+        this.dispatchEvent(new HelixAuraFallbackEvent({ reason }));
+    }
     readPalette() {
-        const ground = this.tokens.read('--helix-color-background', [0, 0, 0]);
-        const light = ground[0] * 0.2126 + ground[1] * 0.7152 + ground[2] * 0.0722 > 0.5;
-        this.palette = {
-            glow: this.tokens.read('--helix-color-primary', [0.88, 0.88, 0.88]),
-            ground,
-            haze: this.tokens.read('--helix-color-primary-subtle', [0.16, 0.16, 0.16]),
-            peak: light
-                ? this.tokens.read('--helix-color-primary-active', [0.02, 0.02, 0.02])
-                : this.tokens.read('--helix-color-foreground', [1, 1, 1]),
-        };
+        const canvas = this.renderRoot.querySelector('canvas');
+        if (canvas) {
+            this.palette = paletteOf(getComputedStyle(canvas), readColor);
+        }
     }
     link(vertex, fragment) {
         const gl = this.gl;

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

@@ -105,6 +105,41 @@ background-color: var(--badge-background-color, var(--helix-color-surface-raised
 color: var(--badge-color, var(--helix-color-foreground));
 }
 
+:host([placement="top-start"]) [part="indicator"],
+:host([placement="bottom-start"]) [part="indicator"] {
+inset-inline-end: auto;
+inset-inline-start: var(--badge-offset, calc(var(--_badge-size) / 4));
+}
+
+:host([placement="bottom-end"]) [part="indicator"],
+:host([placement="bottom-start"]) [part="indicator"] {
+inset-block-end: var(--badge-offset, calc(var(--_badge-size) / 4));
+inset-block-start: auto;
+}
+
+:host([placement="top-start"]) [part="indicator"] {
+translate: -50% -50%;
+}
+
+:host([placement="bottom-end"]) [part="indicator"] {
+translate: 50% 50%;
+}
+
+:host([placement="bottom-start"]) [part="indicator"] {
+translate: -50% 50%;
+}
+
+:host([placement="inline"]) {
+align-items: center;
+gap: var(--badge-gap, var(--helix-space-2xs));
+}
+
+:host([placement="inline"]) [part="indicator"] {
+box-shadow: none;
+position: static;
+translate: none;
+}
+
 @media print {
 :host {
 box-shadow: none;

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

@@ -8,6 +8,12 @@ import type { CSSResultGroup } from 'lit';
  * where it overlaps the element it is pinned to, such as a dark badge on a dark
  * icon.
  *
+ * `placement` pins it to another corner, or puts it in the line with
+ * `inline`. **Inside a control, `inline` puts the count in the control's
+ * name**: `<button>Inbox <helix-badge placement="inline" value="8"
+ * label="8 unread"></helix-badge></button>` is the button "Inbox 8 unread",
+ * kept current by the badge with no label of yours to update.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers
@@ -16,10 +22,20 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --badge-background-color - The fill of the indicator.
  * @cssproperty --badge-color - The color of the count, to pair with a fill set through `--badge-background-color`.
+ * @cssproperty --badge-gap - The space between the content and the count under `placement="inline"`.
  * @cssproperty --badge-offset - Pulls the mark in from the corner, along both axes.
  * @cssproperty --badge-ring-color - The color of the ring between the indicator and what is behind it.
  */
 export declare class HelixBadge extends HelixHeadlessBadge {
+    /**
+     * Where the mark sits: a corner, `top-start`, `bottom-end` or `bottom-start`,
+     * or `inline`, in the line after the content.
+     *
+     * Absent is the top end, the corner a count is looked for in. `inline` is
+     * for a badge inside a control, where its count is read as part of the
+     * control's name.
+     */
+    placement?: 'bottom-end' | 'bottom-start' | 'inline' | 'top-start';
     /**
      * What the mark means. The stylesheet picks the fill from it.
      *

package/dist/badge/root/badge-root.js

@@ -11,6 +11,9 @@ import { styles } from './badge-root.css.js';
 let HelixBadge = class HelixBadge extends HelixHeadlessBadge {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixBadge.prototype, "placement", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixBadge.prototype, "tone", void 0);

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

@@ -14,8 +14,8 @@ margin: var(--helix-space-none);
 
 slot:not([name]) {
 
-color: var(--helix-color-foreground-muted);
-font-family: var(--helix-font-display);
+color: var(--blockquote-color, var(--helix-color-foreground-muted));
+font-family: var(--blockquote-font-family, var(--helix-font-display));
 font-size: var(--blockquote-size, var(--helix-text-xl));
 font-weight: var(--helix-weight-medium);
 letter-spacing: var(--helix-tracking-tight);
@@ -27,10 +27,10 @@ margin: var(--helix-space-none);
 }
 
 [part="attribution"] {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-sm);
+color: var(--blockquote-attribution-color, var(--helix-color-foreground-muted));
+font-size: var(--blockquote-attribution-size, var(--helix-text-sm));
 
-margin-block-start: var(--helix-space-sm);
+margin-block-start: var(--blockquote-gap, var(--helix-space-sm));
 }
 
 [part="attribution"][data-empty] {

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

@@ -14,6 +14,11 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Pullquote, Citation, Excerpt
  * @documentation https://fusion.dev/helix/components/blockquote
  *
+ * @cssproperty --blockquote-attribution-color - The color of the attribution.
+ * @cssproperty --blockquote-attribution-size - The font size of the attribution.
+ * @cssproperty --blockquote-color - The color of the quoted passage.
+ * @cssproperty --blockquote-font-family - The typeface of the quoted passage, the display face by default.
+ * @cssproperty --blockquote-gap - The space between the passage and its attribution.
  * @cssproperty --blockquote-size - The font size of the quoted passage.
  */
 export declare class HelixBlockquote extends HelixHeadlessBlockquote {

package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js

@@ -38,7 +38,7 @@ display: none;
 
 ::slotted(a) {
 background-color: transparent;
-border-radius: var(--helix-radii-sm);
+border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));
 padding: var(--helix-space-2xs) var(--helix-space-xs);
 transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
@@ -61,17 +61,17 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 :host {
-font-weight: var(--helix-weight-medium);
+font-weight: var(--breadcrumbs-font-weight, var(--helix-weight-medium));
 }
 
 :host([current]) {
-color: var(--helix-color-foreground);
+color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
 }
 
 [part="link"] {
 align-items: center;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
+border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));
+color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));
 display: inline-flex;
 gap: var(--helix-space-xs);
 padding: var(--helix-space-2xs) var(--helix-space-xs);
@@ -95,11 +95,11 @@ background-color: var(
 --breadcrumbs-hover-color,
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
 );
-color: var(--helix-color-foreground);
+color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
 }
 
 :host([current]) [part="link"] {
-color: var(--helix-color-foreground);
+color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
 }
 
 :host([hidden]) {

package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts

@@ -25,7 +25,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --breadcrumbs-control-padding-inline - Inline padding of a control slotted into a crumb, matching the steps either side of it.
  * @cssproperty --breadcrumbs-control-size - How tall a control slotted into a crumb is.
+ * @cssproperty --breadcrumbs-current-color - Text color of the current page's crumb.
+ * @cssproperty --breadcrumbs-font-weight - Weight of every crumb's text.
  * @cssproperty --breadcrumbs-hover-color - Fill behind a step under the pointer.
+ * @cssproperty --breadcrumbs-link-color - Text color of a crumb that is not the current page. A link
+ *   you slot inherits it unless your own styles set a color.
+ * @cssproperty --breadcrumbs-radius - Corner radius of the fill behind a step under the pointer.
  * @cssproperty --breadcrumbs-separator-color - Color of the chevron.
  */
 export declare class HelixBreadcrumb extends HelixHeadlessBreadcrumb {

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

@@ -7,7 +7,7 @@ display: block;
 align-items: center;
 display: flex;
 flex-wrap: wrap;
-font-size: var(--helix-text-sm);
+font-size: var(--breadcrumbs-font-size, var(--helix-text-sm));
 gap: var(--breadcrumbs-gap, var(--helix-space-xs));
 
 list-style: none;

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessBreadcrumbs } from '@fusion.dev/helix-headless/breadcrumbs';
 import type { CSSResultGroup } from 'lit';
+import '../breadcrumb/breadcrumb.js';
 /**
  * @summary Shows the path to the current page.
  *
@@ -17,9 +18,11 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart list - The ordered list.
  *
+ * @cssproperty --breadcrumbs-font-size - Size of the trail's text.
  * @cssproperty --breadcrumbs-gap - Space between items and separators.
  */
 export declare class HelixBreadcrumbs extends HelixHeadlessBreadcrumbs {
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/breadcrumbs/root/breadcrumbs-root.js

@@ -7,7 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessBreadcrumbs } from '@fusion.dev/helix-headless/breadcrumbs';
 import { styles } from './breadcrumbs-root.css.js';
+import '../breadcrumb/breadcrumb.js';
 let HelixBreadcrumbs = class HelixBreadcrumbs extends HelixHeadlessBreadcrumbs {
+    static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
 HelixBreadcrumbs = __decorate([

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

@@ -14,6 +14,8 @@ max-inline-size: 100%;
 --_button-on-tone: var(--helix-color-background);
 --_button-tone: var(--helix-color-foreground);
 
+--_button-turn: 0.8s;
+
 --_button-tone-hover: color-mix(
 in oklab,
 var(--helix-color-foreground) 86%,
@@ -61,7 +63,7 @@ color-mix(in oklab, var(--_button-tone) 6%, transparent)
 );
 
 block-size: var(--button-size, var(--helix-size-control));
-border: var(--helix-border-thin) solid var(--_button-edge);
+border: var(--helix-border-thin) solid var(--button-border-color, var(--_button-edge));
 box-sizing: border-box;
 color: var(--button-foreground-color, var(--_button-tone));
 cursor: pointer;
@@ -183,6 +185,41 @@ text-box: trim-both cap alphabetic;
 --icon-size: 1.15em;
 }
 
+:host(:state(pending)) [part="button"] {
+cursor: progress;
+position: relative;
+}
+
+:host(:state(pending)) [part="button"] > slot {
+visibility: hidden;
+}
+
+:host(:state(pending)) [part="button"]::after {
+animation: helix-button-turn var(--_button-turn) linear infinite;
+block-size: var(--button-spinner-size, 1.15em);
+border: var(--helix-border-thick) solid color-mix(in oklab, currentColor 30%, transparent);
+border-block-start-color: currentColor;
+border-radius: var(--helix-radii-full);
+box-sizing: border-box;
+content: "";
+inline-size: var(--button-spinner-size, 1.15em);
+inset: 0;
+margin: auto;
+position: absolute;
+}
+
+@keyframes helix-button-turn {
+to {
+rotate: 1turn;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host(:state(pending)) [part="button"]::after {
+animation-duration: calc(var(--helix-duration-slow) * 12);
+}
+}
+
 @media print {
 :host {
 display: none;