@fusion.dev/helix 0.145.0 → 0.146.0

package/dist/sandbox/source/sandbox-source.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixBeforeEditEvent, HelixCaretEvent, HelixEditEvent, HelixElement, onUnlessFalse, restoreValue, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { drawnRuns } from '../tokens.js';
 import { styles } from './sandbox-source.css.js';
 const MODIFIERS = new Set(['Alt', 'AltGraph', 'Control', 'Meta', 'Shift']);
 let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
@@ -65,6 +66,17 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
         }
     }
     render() {
+        const field = this.renderField();
+        if (!this.highlight) {
+            return field;
+        }
+        const runs = drawnRuns(this.value, this.highlight(this.value, this.name));
+        return html `<div part="field">
+      <pre part="highlight" aria-hidden="true">${runs.map(({ kind, text }) => kind ? html `<span part="token" data-kind=${kind}>${text}</span>` : text)}${'\n'}</pre>
+      ${field}
+    </div>`;
+    }
+    renderField() {
         return html `<textarea
       part="source"
       aria-label=${this.fieldLabel}
@@ -84,6 +96,9 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
 __decorate([
     property({ attribute: 'field-label' })
 ], HelixSandboxSource.prototype, "fieldLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixSandboxSource.prototype, "highlight", void 0);
 __decorate([
     property({ attribute: 'keys-description' })
 ], HelixSandboxSource.prototype, "keysDescription", void 0);

package/dist/sandbox/terminal/sandbox-terminal.d.ts

@@ -27,6 +27,9 @@ import { type ConsoleLevel } from '../levels.js';
  * @aliases Console, Output
  * @documentation https://fusion.dev/helix/components/sandbox
  *
+ * @event {Event} change - Fired after the reader chose another level in the filter. `level` holds it.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the level filter changes, with the level chosen, `log` for every level. Cancelable: cancel it to keep the current level.
+ *
  * @csspart clear - The button that empties the log, under `controls`.
  * @csspart controls - The row holding the clear button and the level filter, under `controls`.
  * @csspart count - How many times a repeated line was written.
@@ -74,7 +77,8 @@ export declare class HelixSandboxTerminal extends HelixElement {
     /**
      * What each choice of the level filter reads, for a page in another
      * language, keyed by level, such as `{ warn: '…' }`. A level left out keeps
-     * its English words. As an attribute it is that object as JSON.
+     * its English words. As an attribute it is that object as JSON, and JSON
+     * that does not parse is no words.
      */
     levelWords: Partial<Record<ConsoleLevel, string>>;
     private entries;
@@ -98,7 +102,11 @@ export declare class HelixSandboxTerminal extends HelixElement {
     /** Empties the log. */
     clear(): void;
     protected updated(): void;
-    /** Takes the level the reader chose in the filter. */
+    /**
+     * Takes the level the reader chose in the filter, unless a listener
+     * refused it, and then says so with the select's own `change`, which stops
+     * at the shadow root otherwise. A refusal puts the select back.
+     */
     private readonly handleLevel;
     /** The clear button and the level filter, under `controls`. */
     private renderControls;

package/dist/sandbox/terminal/sandbox-terminal.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforeChangeEvent, HelixElement, requestChange, wordsConverter, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { LEVELS, shows } from '../levels.js';
@@ -28,8 +28,21 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
         this.entries = [];
         this.following = true;
         this.handleLevel = (event) => {
-            const chosen = event.target.value;
-            this.level = chosen === 'log' ? undefined : chosen;
+            const field = event.target;
+            const taken = requestChange({
+                apply: (next) => {
+                    this.level = next === 'log' ? undefined : next;
+                },
+                event: (next) => new HelixBeforeChangeEvent({ value: next }),
+                host: this,
+                next: field.value,
+            });
+            if (taken) {
+                this.relayNativeEvent(event);
+            }
+            else {
+                field.value = this.level ?? 'log';
+            }
         };
     }
     get log() {
@@ -66,7 +79,7 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
         return html `<div part="controls">
       <select part="filter" aria-label=${this.levelLabel} @change=${this.handleLevel}>
         ${LEVELS.map((one) => html `<option value=${one} ?selected=${(this.level ?? 'log') === one}>
-              ${this.levelWords[one] ?? LEVEL_WORDS[one]}
+              ${this.levelWords?.[one] ?? LEVEL_WORDS[one]}
             </option>`)}
       </select>
       <button part="clear" type="button" @click=${() => this.clear()}>${this.clearLabel}</button>
@@ -111,7 +124,7 @@ __decorate([
     property({ attribute: 'level-label' })
 ], HelixSandboxTerminal.prototype, "levelLabel", void 0);
 __decorate([
-    property({ attribute: 'level-words', type: Object })
+    property({ attribute: 'level-words', converter: wordsConverter })
 ], HelixSandboxTerminal.prototype, "levelWords", void 0);
 __decorate([
     state()

package/dist/sandbox/tokens.d.ts

@@ -0,0 +1,39 @@
+/** One run of source text, and the kind of token it is. */
+export interface SandboxToken {
+    /**
+     * What the run is: `callable`, `comment`, `constant`, `invalid`, `keyword`,
+     * `name`, `string` or `tag`, which each have a color. Absent for text that is
+     * not a token, such as spaces and punctuation.
+     */
+    kind?: string | undefined;
+    /** The text of the run, exactly as the source has it. */
+    text: string;
+}
+/**
+ * Splits a pane's source into runs, for `SandboxSource.highlight`.
+ *
+ * Takes the source and the pane's `name`, such as `html` or `css`, so one
+ * function can serve every pane.
+ */
+export type SandboxHighlight = (source: string, name: string) => readonly SandboxToken[];
+/** A run as the pane draws it: its text, and its kind as an attribute holds it. */
+export interface DrawnRun {
+    /** The kind, in lowercase letters, digits and hyphens, or `undefined` for plain text. */
+    kind: string | undefined;
+    /** The text of the run. */
+    text: string;
+}
+/**
+ * The runs a highlighter gave, made safe to draw over the field.
+ *
+ * **Drawn under the text the reader types, so the two must match exactly.** The
+ * runs are laid out behind a transparent field, and one character dropped or
+ * added moves every line after it away from the caret. So runs whose text does
+ * not add up to the source are not drawn as given: the source is drawn as one
+ * plain run instead, which loses the colors and keeps the caret honest.
+ *
+ * A kind is lowercased and anything but letters, digits and hyphens in it is
+ * a hyphen, so the stylesheet's eight kinds match however a highlighter
+ * spells them, and nothing else it writes reaches an attribute.
+ */
+export declare const drawnRuns: (source: string, runs: readonly SandboxToken[]) => DrawnRun[];

package/dist/sandbox/tokens.js

@@ -0,0 +1,9 @@
+export const drawnRuns = (source, runs) => {
+    if (runs.map((run) => run.text).join('') !== source) {
+        return [{ kind: undefined, text: source }];
+    }
+    return runs.map((run) => ({
+        kind: run.kind ? run.kind.toLowerCase().replace(/[^a-z0-9-]/g, '-') : undefined,
+        text: run.text,
+    }));
+};

package/dist/scatter-chart/root/scatter-chart-root.css.js

@@ -30,6 +30,15 @@ inline-size: 100%;
 overflow: visible;
 }
 
+[part="trend"] {
+fill: none;
+stroke: var(--chart-series);
+stroke-dasharray: var(--scatter-chart-trend-dash, 4 3);
+stroke-linecap: round;
+stroke-width: var(--scatter-chart-trend-width, 1.5px);
+vector-effect: non-scaling-stroke;
+}
+
 [part="gridline"] {
 stroke: var(--scatter-chart-gridline-color, var(--helix-color-border));
 stroke-width: var(--helix-border-thin);

package/dist/scatter-chart/root/scatter-chart-root.d.ts

@@ -38,6 +38,8 @@ import '../../tooltip/index.js';
  * @cssproperty --scatter-chart-point-opacity - Opacity of a point, so a cluster looks darker where it is denser.
  * @cssproperty --scatter-chart-point-ring-color - Color of the ring around each point. It matches the page, so change it when the chart sits on another surface.
  * @cssproperty --scatter-chart-point-size - Diameter of a point.
+ * @cssproperty --scatter-chart-trend-dash - The dash pattern of a line of best fit, under `trend`, as `stroke-dasharray` takes it. `none` draws it solid.
+ * @cssproperty --scatter-chart-trend-width - The thickness of a line of best fit, under `trend`.
  */
 export declare class HelixScatterChart extends HelixHeadlessScatterChart {
     /** The styled tier, so the tooltip this renders is the styled one. */

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

@@ -32,7 +32,7 @@ overflow: hidden;
 position: relative;
 }
 
-[part="skeleton"]::after {
+[part="sheen"] {
 animation: helix-skeleton-sweep var(--skeleton-duration, calc(var(--helix-duration-slow) * 4))
 ease-in-out infinite;
 background-image: linear-gradient(
@@ -42,7 +42,7 @@ var(--skeleton-sheen-color, color-mix(in oklab, var(--helix-color-foreground) 8%
 50%,
 transparent 100%
 );
-content: "";
+display: block;
 inline-size: 200%;
 inset-block: 0;
 inset-inline-start: 0;
@@ -58,8 +58,8 @@ border-radius: var(--helix-radii-full);
 border-radius: var(--helix-radii-full);
 }
 
-:host([effect="pulse"]) [part="skeleton"]::after,
-:host([effect="none"]) [part="skeleton"]::after {
+:host([effect="pulse"]) [part="sheen"],
+:host([effect="none"]) [part="sheen"] {
 animation: none;
 background-image: none;
 }
@@ -75,28 +75,28 @@ opacity: 0.4;
 }
 }
 
-:host(:not(:empty)) {
+:host(:state(wrapping)) {
 block-size: auto;
 inline-size: fit-content;
 max-inline-size: 100%;
 position: relative;
 }
 
-:host(:not(:empty)) [part="content"] {
+:host(:state(wrapping)) [part="content"] {
 display: block;
 }
 
-:host(:not(:empty)) [part="skeleton"] {
+:host(:state(wrapping)) [part="skeleton"] {
 block-size: auto;
 inset: 0;
 position: absolute;
 }
 
-:host(:not(:empty):not([loading])) [part="skeleton"] {
+:host(:state(wrapping):not([loading])) [part="skeleton"] {
 display: none;
 }
 
-:host([loading]:not(:empty)) [part="content"] {
+:host([loading]:state(wrapping)) [part="content"] {
 visibility: hidden;
 }
 
@@ -111,12 +111,12 @@ translate: 50% 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
-[part="skeleton"]::after,
+[part="sheen"],
 :host([effect="pulse"]) [part="skeleton"] {
 animation: none;
 }
 
-[part="skeleton"]::after {
+[part="sheen"] {
 background-image: none;
 }
 }

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

@@ -18,6 +18,7 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/skeleton
  *
  * @csspart content - The box around the content, hidden while `loading`.
+ * @csspart sheen - The highlight swept across the shape. Hidden for `effect="pulse"` and `effect="none"`.
  * @csspart skeleton - The placeholder shape.
  *
  * @cssproperty --skeleton-block-size - The height of the block shape, which is the shape when `shape` is unset. Defaults to the control height.

package/dist/skip-link/root/skip-link-root.css.js

@@ -7,6 +7,18 @@ position: fixed;
 z-index: var(--helix-layer-overlay);
 }
 
+:host(:not(:focus-within)) {
+block-size: 1px;
+border: var(--helix-space-none);
+clip-path: inset(50%);
+inline-size: 1px;
+margin: var(--helix-space-none);
+overflow: hidden;
+padding: var(--helix-space-none);
+position: absolute;
+white-space: nowrap;
+}
+
 [part="link"] {
 background-color: var(--skip-link-background-color, var(--helix-color-surface-inverse));
 border: var(--skip-link-border-width, var(--helix-border-floating)) solid

package/dist/skip-link/root/skip-link-root.d.ts

@@ -6,9 +6,9 @@ import type { CSSResultGroup } from 'lit';
  *
  * @description
  * Hidden until it receives keyboard focus, then shown in the corner of the
- * viewport. It is hidden with the base layer's visually hidden helper, so it
- * stays in the tab order and the accessibility tree. This stylesheet adds the
- * reveal.
+ * viewport. Its own stylesheet hides it with the visually hidden recipe the
+ * base layer uses, so it stays in the tab order and the accessibility tree,
+ * and is hidden with or without the base layer.
  *
  * It is fixed to the viewport, because the page may already be scrolled when
  * focus arrives, from a restored position or an anchor in the address.

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

@@ -79,6 +79,19 @@ var(--_slider-track-color) calc(var(--slider-fraction, 0) * 100%)
 );
 }
 
+[part="control"][data-origin] {
+--_slider-track-image: var(
+--slider-track-image,
+linear-gradient(
+var(--_slider-along),
+var(--_slider-track-color) calc(var(--slider-from, 0) * 100%),
+var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-from, 0) * 100%),
+var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-to, 0) * 100%),
+var(--_slider-track-color) calc(var(--slider-to, 0) * 100%)
+)
+);
+}
+
 [part="markers"] {
 align-self: center;
 block-size: var(--_slider-track);
@@ -337,6 +350,19 @@ margin-inline: 0;
 writing-mode: vertical-lr;
 }
 
+:host([orientation="vertical"]) [part="control"][data-origin] {
+--_slider-track-image: var(
+--slider-track-image,
+linear-gradient(
+to top,
+var(--_slider-track-color) calc(var(--slider-from, 0) * 100%),
+var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-from, 0) * 100%),
+var(--slider-fill-color, var(--helix-color-primary)) calc(var(--slider-to, 0) * 100%),
+var(--_slider-track-color) calc(var(--slider-to, 0) * 100%)
+)
+);
+}
+
 :host([orientation="vertical"]) [part="marker"] {
 block-size: var(--helix-border-thick);
 inline-size: var(--_slider-track);

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

@@ -97,4 +97,53 @@ opacity: var(--sparkline-area-opacity, 0.35);
 
 :host([emphasis="solid"]) [part="area"] {
 opacity: 1;
+}
+
+[part="svg"]:focus-visible {
+border-radius: var(--helix-radii-sm);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="cursor"],
+[part="high"],
+[part="low"] {
+background-color: var(--sparkline-mark-color, currentColor);
+block-size: var(--sparkline-mark-size, 5px);
+border-radius: var(--helix-radii-full);
+inline-size: var(--sparkline-mark-size, 5px);
+pointer-events: none;
+position: absolute;
+translate: -50% -50%;
+}
+
+[part="cursor"] {
+box-shadow: 0 0 0 var(--helix-border-thick)
+var(--sparkline-mark-ring-color, var(--helix-color-background));
+}
+
+[part="readout"] {
+background-color: var(--sparkline-readout-background-color, var(--helix-color-surface-inverse));
+border-radius: var(--helix-radii-sm);
+color: var(--sparkline-readout-color, var(--helix-color-foreground-inverse));
+font-family: var(--helix-font-sans);
+font-size: var(--sparkline-readout-font-size, var(--helix-text-xs));
+font-variant-numeric: tabular-nums;
+line-height: 1.4;
+padding: 0 var(--helix-space-2xs);
+pointer-events: none;
+position: absolute;
+translate: -50% calc(-100% - var(--sparkline-mark-size, 5px));
+white-space: nowrap;
+z-index: 1;
+}
+
+:host(:dir(rtl)) [part="cursor"],
+:host(:dir(rtl)) [part="high"],
+:host(:dir(rtl)) [part="low"] {
+translate: 50% -50%;
+}
+
+:host(:dir(rtl)) [part="readout"] {
+translate: 50% calc(-100% - var(--sparkline-mark-size, 5px));
 }`);

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

@@ -30,6 +30,12 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --sparkline-block-size - Height of the drawing.
  * @cssproperty --sparkline-color - Color of the line, the area fill, the columns, and the mark.
  * @cssproperty --sparkline-inline-size - Width of the drawing.
+ * @cssproperty --sparkline-mark-color - Color of the dot on the reading a pointer or a key rests on, and of the `marks` dots. Without it, the line's color.
+ * @cssproperty --sparkline-mark-ring-color - Color of the ring round the dot on the reading a pointer or a key rests on, which matches the page. Change it when the sparkline sits on another surface.
+ * @cssproperty --sparkline-mark-size - Size of the dot on the reading a pointer or a key rests on, and of the `marks` dots.
+ * @cssproperty --sparkline-readout-background-color - Ground of the reading written above the dot.
+ * @cssproperty --sparkline-readout-color - Color of the reading written above the dot.
+ * @cssproperty --sparkline-readout-font-size - Size of the reading written above the dot.
  * @cssproperty --sparkline-width - Thickness of the line, overriding `weight`.
  */
 export declare class HelixSparkline extends HelixHeadlessSparkline {

package/dist/sparkline/root/sparkline-root.js

@@ -8,9 +8,10 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSparkline } from '@fusion.dev/helix-headless/sparkline';
 import { property } from 'lit/decorators.js';
 import { styles as terminusStyles } from '../../shared/chart/terminus.css.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './sparkline-root.css.js';
 let HelixSparkline = class HelixSparkline extends HelixHeadlessSparkline {
-    static { this.styles = [terminusStyles, styles]; }
+    static { this.styles = [liveStyles, terminusStyles, styles]; }
 };
 __decorate([
     property({ reflect: true })

package/dist/speed-dial/item/speed-dial-item.css.js

@@ -18,7 +18,7 @@ padding: var(--helix-space-none);
 
 [part="item"]:disabled {
 cursor: not-allowed;
-opacity: 0.5;
+opacity: var(--speed-dial-item-disabled-opacity, 0.5);
 }
 
 [part="icon"] {
@@ -33,16 +33,17 @@ color: var(--speed-dial-item-color, var(--helix-color-foreground));
 display: inline-flex;
 inline-size: var(--speed-dial-item-size, var(--helix-size-control-tight));
 justify-content: center;
+
+pointer-events: auto;
 transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 box-shadow var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 [part="item"]:not(:disabled):hover [part="icon"] {
-background-color: color-mix(
-in oklab,
-var(--helix-color-foreground) 6%,
-var(--helix-color-surface-overlay)
+background-color: var(
+--speed-dial-item-hover-background-color,
+color-mix(in oklab, var(--helix-color-foreground) 6%, var(--helix-color-surface-overlay))
 );
 box-shadow: var(--helix-shadow-lg);
 }
@@ -62,7 +63,7 @@ border-radius: var(--helix-radii-sm);
 box-shadow: var(--helix-shadow-sm);
 color: var(--speed-dial-label-color, var(--helix-color-foreground));
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
+font-size: var(--speed-dial-label-font-size, var(--helix-text-sm));
 font-weight: var(--helix-weight-medium);
 opacity: var(--_speed-dial-label-opacity, 1);
 padding: var(--helix-space-2xs) var(--helix-space-xs);

package/dist/speed-dial/item/speed-dial-item.d.ts

@@ -16,9 +16,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --speed-dial-item-background-color - Fill of the round icon.
  * @cssproperty --speed-dial-item-color - Color of the icon.
+ * @cssproperty --speed-dial-item-disabled-opacity - How faint a disabled action is drawn.
+ * @cssproperty --speed-dial-item-hover-background-color - Fill of the round icon under the pointer.
  * @cssproperty --speed-dial-item-size - Edge length of the icon.
  * @cssproperty --speed-dial-label-background-color - Fill of the chip holding the action's name.
  * @cssproperty --speed-dial-label-color - Color of the action's name.
+ * @cssproperty --speed-dial-label-font-size - Size of the action's name.
  */
 export declare class HelixSpeedDialItem extends HelixHeadlessSpeedDialItem {
     static styles: CSSResultGroup;

package/dist/speed-dial/root/speed-dial-root.css.js

@@ -110,15 +110,15 @@ all: unset;
 
 align-items: center;
 
-background-color: var(--helix-color-primary-surface);
-block-size: var(--helix-size-control);
+background-color: var(--speed-dial-background-color, var(--helix-color-primary-surface));
+block-size: var(--speed-dial-size, var(--helix-size-control));
 border-radius: var(--helix-radii-full);
-box-shadow: var(--helix-shadow-md);
+box-shadow: var(--speed-dial-shadow, var(--helix-shadow-md));
 box-sizing: border-box;
-color: var(--helix-color-foreground-on-primary);
+color: var(--speed-dial-color, var(--helix-color-foreground-on-primary));
 cursor: pointer;
 display: inline-flex;
-inline-size: var(--helix-size-control);
+inline-size: var(--speed-dial-size, var(--helix-size-control));
 justify-content: center;
 transition: box-shadow var(--helix-duration-fast) var(--helix-easing-standard);
 }
@@ -144,4 +144,9 @@ display: none;
 
 :host([labels="hover"]) {
 --_speed-dial-label-opacity: 0;
+}
+
+:host([labels="hover"]) [part="actions"],
+:host([labels="hover"]) [part="actions"] ::slotted(*) {
+pointer-events: none;
 }`);

package/dist/speed-dial/root/speed-dial-root.d.ts

@@ -1,6 +1,5 @@
 import { HelixHeadlessSpeedDial } from '@fusion.dev/helix-headless/speed-dial';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 /**
  * @summary A floating button that opens a short list of the main actions on a screen.
  *
@@ -8,13 +7,20 @@ import '../../icon/index.js';
  * Presentation only: the column the actions fan into, and the end they align
  * to. The base class handles opening, closing, and keyboard movement.
  *
+ * It draws no `helix-icon` of its own, so it does not register one: import
+ * `@fusion.dev/helix/icon` where your trigger or your actions use it.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions
  * @aliases FAB, Floating action button, Action button, Quick actions
  * @documentation https://fusion.dev/helix/components/speed-dial
  *
+ * @cssproperty --speed-dial-background-color - Fill of the trigger the dial draws when none is slotted.
+ * @cssproperty --speed-dial-color - Color of that trigger's icon.
  * @cssproperty --speed-dial-gap - Space between the actions.
+ * @cssproperty --speed-dial-shadow - Shadow under that trigger at rest.
+ * @cssproperty --speed-dial-size - Width and height of that trigger.
  * @cssproperty --speed-dial-stagger - The wait between one action arriving and the next.
  * @cssproperty --speed-dial-travel - How far each action moves as it arrives.
  */

package/dist/speed-dial/root/speed-dial-root.js

@@ -9,7 +9,6 @@ import { HelixHeadlessSpeedDial } from '@fusion.dev/helix-headless/speed-dial';
 import { property } from 'lit/decorators.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './speed-dial-root.css.js';
-import '../../icon/index.js';
 let HelixSpeedDial = class HelixSpeedDial extends HelixHeadlessSpeedDial {
     static { this.styles = [glyphStyles, styles]; }
 };

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

@@ -32,6 +32,10 @@ font-size: var(--stat-unit-size, calc(var(--helix-text-md) / var(--helix-text-md
 font-weight: var(--helix-weight-medium);
 }
 
+slot[name="trend"]::slotted(*) {
+grid-column: 1 / -1;
+}
+
 :host([direction="column-reverse"]) slot[name="label"]::slotted(*) {
 order: 1;
 }

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

@@ -42,9 +42,37 @@ var(--_steps-connector-inset)
 --_steps-trail-block-size: var(--helix-border-thin);
 counter-reset: helix-step;
 display: flex;
+
+flex-wrap: wrap;
 gap: var(--steps-gap, var(--helix-space-md));
 }
 
+[part="progress"] {
+background-color: var(--steps-progress-track-color, var(--helix-color-border));
+background-image: linear-gradient(
+to right,
+var(--steps-progress-color, var(--helix-color-success)) var(--steps-progress, 0%),
+transparent 0
+);
+block-size: var(--steps-progress-thickness, var(--helix-border-thick));
+border-radius: var(--helix-radii-full);
+flex: 0 0 100%;
+order: 1;
+}
+
+[part="progress"]:dir(rtl) {
+background-image: linear-gradient(
+to left,
+var(--steps-progress-color, var(--helix-color-success)) var(--steps-progress, 0%),
+transparent 0
+);
+}
+
+:host([orientation="vertical"]) [part="progress"] {
+flex: none;
+inline-size: 100%;
+}
+
 :host(:not([orientation="vertical"])) ::slotted(*) {
 flex: 1 1 0;
 min-inline-size: 0;

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

@@ -18,12 +18,17 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Stepper, Wizard, Progress steps
  * @documentation https://fusion.dev/helix/components/steps
  *
+ * @csspart progress - How far through the sequence is, drawn as a bar under the steps once a stylesheet gives the part a `display`, such as `helix-steps::part(progress) { display: block }`.
+ *
  * @cssproperty --steps-complete-color - Color of the mark on a finished step.
  * @cssproperty --steps-connector-color - Color of the line that connects the steps.
  * @cssproperty --steps-connector-inset - Space on either side of a mark, before the connecting line.
  * @cssproperty --steps-current-color - Color of the mark on the current step.
  * @cssproperty --steps-gap - Space between one step and the next.
  * @cssproperty --steps-marker-size - Size of the mark, whether an icon or a digit.
+ * @cssproperty --steps-progress-color - Fill of the progress bar, once a page shows the `progress` part.
+ * @cssproperty --steps-progress-thickness - Height of the progress bar.
+ * @cssproperty --steps-progress-track-color - Color of the progress bar's track.
  */
 export declare class HelixSteps extends HelixHeadlessSteps {
     static styles: CSSResultGroup;

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

@@ -59,8 +59,8 @@ background-color: var(--_indicator-color, transparent);
 block-size: var(--_indicator-block, var(--helix-border-thick));
 
 border: var(--_indicator-border, 0) solid var(--_indicator-border-color, transparent);
-border-radius: var(--_indicator-radius, var(--helix-radii-none));
-box-shadow: var(--_indicator-shadow, none);
+border-radius: var(--tabs-indicator-radius, var(--_indicator-radius, var(--helix-radii-none)));
+box-shadow: var(--tabs-indicator-shadow, var(--_indicator-shadow, none));
 inline-size: var(--indicator-inline-size, 0);
 inset-block-start: 0;
 inset-inline-start: 0;