@fusion.dev/helix 0.144.0 → 0.146.0

package/dist/scroll-area/root/scroll-area-root.css.js

@@ -21,6 +21,87 @@ var(--scroll-area-track-color, transparent);
 scrollbar-width: var(--scroll-area-scrollbar, thin);
 }
 
+:host([scrollbars]) [part="viewport"] {
+scrollbar-width: none;
+}
+
+[part~="scrollbar"] {
+--_scroll-area-thumb: max(
+var(--scroll-area-thumb-min-size, var(--helix-space-lg)),
+var(--scroll-area-thumb-fraction, 1) *
+100%
+);
+background-color: var(--scroll-area-track-color, transparent);
+opacity: 0;
+position: absolute;
+touch-action: none;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+user-select: none;
+
+z-index: calc(var(--helix-layer-raised) + 1);
+}
+
+[part~="scrollbar-visible"] {
+opacity: 1;
+}
+
+[part~="scrollbar-vertical"] {
+inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));
+inset-block: 0;
+inset-inline-end: 0;
+}
+
+[part~="scrollbar-horizontal"] {
+block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));
+inset-block-end: 0;
+inset-inline: 0;
+}
+
+:host(:state(scrollbar-horizontal)) [part~="scrollbar-vertical"] {
+inset-block-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm));
+}
+
+:host(:state(scrollbar-vertical)) [part~="scrollbar-horizontal"] {
+inset-inline-end: var(--scroll-area-scrollbar-size, var(--helix-space-sm));
+}
+
+[part~="thumb"] {
+background-color: var(--scroll-area-thumb-color, var(--helix-color-border));
+border-radius: var(--helix-radii-full);
+position: absolute;
+}
+
+[part~="thumb"]:hover {
+background-color: var(--scroll-area-thumb-hover-color, var(--helix-color-foreground-subtle));
+}
+
+[part~="thumb-vertical"] {
+block-size: var(--_scroll-area-thumb);
+inset-block-start: calc(
+var(--scroll-area-scroll-fraction, 0) *
+(100% - var(--_scroll-area-thumb))
+);
+inset-inline: var(--helix-border-thick);
+}
+
+[part~="thumb-horizontal"] {
+inline-size: var(--_scroll-area-thumb);
+inset-block: var(--helix-border-thick);
+inset-inline-start: calc(
+var(--scroll-area-scroll-fraction, 0) *
+(100% - var(--_scroll-area-thumb))
+);
+}
+
+[part="corner"] {
+background-color: var(--scroll-area-track-color, transparent);
+block-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));
+inline-size: var(--scroll-area-scrollbar-size, var(--helix-space-sm));
+inset-block-end: 0;
+inset-inline-end: 0;
+position: absolute;
+}
+
 :host::before,
 :host::after {
 content: "";
@@ -110,7 +191,8 @@ opacity: 1;
 :host::before,
 :host::after,
 [part="edges"]::before,
-[part="edges"]::after {
+[part="edges"]::after,
+[part~="scrollbar"] {
 transition: none;
 }
 }

package/dist/scroll-area/root/scroll-area-root.d.ts

@@ -8,6 +8,9 @@ import type { CSSResultGroup } from 'lit';
  * styled to match the design system. The base class measures which edges have
  * content past them.
  *
+ * Under `scrollbars`, the browser's scrollbar is hidden and the component's own
+ * are drawn over the content at the edge, in the same colors.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -21,7 +24,10 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --scroll-area-fade-inline-end - The depth of the fade at the inline end, or `0` to remove it.
  * @cssproperty --scroll-area-fade-inline-start - The depth of the fade at the inline start, or `0` to remove it.
  * @cssproperty --scroll-area-scrollbar - The scrollbar width, as a `scrollbar-width` keyword.
+ * @cssproperty --scroll-area-scrollbar-size - The thickness of each scrollbar drawn under `scrollbars`, and the size of the corner.
  * @cssproperty --scroll-area-thumb-color - The color of the scrollbar's thumb.
+ * @cssproperty --scroll-area-thumb-hover-color - The color of a thumb drawn under `scrollbars` while the pointer is over it.
+ * @cssproperty --scroll-area-thumb-min-size - The shortest a thumb drawn under `scrollbars` gets, however long the content.
  * @cssproperty --scroll-area-track-color - The color of the scrollbar's track.
  */
 export declare class HelixScrollArea extends HelixHeadlessScrollArea {

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

@@ -1,26 +1,38 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: block;
-inset-block-start: var(--helix-space-sm);
-inset-inline-start: var(--helix-space-sm);
+inset-block-start: var(--skip-link-inset-block, var(--helix-space-sm));
+inset-inline-start: var(--skip-link-inset-inline, var(--helix-space-sm));
 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(--helix-color-surface-inverse);
+background-color: var(--skip-link-background-color, var(--helix-color-surface-inverse));
 border: var(--skip-link-border-width, var(--helix-border-floating)) solid
 var(--skip-link-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
+border-radius: var(--skip-link-radius, var(--helix-radii-sm));
 box-shadow: var(--skip-link-shadow, var(--helix-shadow-floating));
-color: var(--helix-color-foreground-inverse);
+color: var(--skip-link-color, var(--helix-color-foreground-inverse));
 display: inline-block;
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
+font-size: var(--skip-link-font-size, var(--helix-text-sm));
 font-weight: var(--helix-weight-medium);
 line-height: var(--helix-leading-normal);
-padding-block: var(--helix-space-sm);
-padding-inline: var(--helix-space-md);
+padding-block: var(--skip-link-padding-block, var(--helix-space-sm));
+padding-inline: var(--skip-link-padding-inline, var(--helix-space-md));
 text-decoration: none;
 }
 

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.
@@ -22,10 +22,19 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Skip navigation, Skip to content
  * @documentation https://fusion.dev/helix/components/skip-link
  *
+ * @cssproperty --skip-link-background-color - The background of the link while it is shown.
  * @cssproperty --skip-link-border-color - The border color of the link while it is shown.
  * @cssproperty --skip-link-border-width - The border width of the link while it is shown. Follows
  *   `--helix-border-floating`, which is `0`, so the link is set apart by its shadow unless a
  *   theme sets a border.
+ * @cssproperty --skip-link-color - The text color of the link while it is shown.
+ * @cssproperty --skip-link-font-size - The size of the link's text.
+ * @cssproperty --skip-link-inset-block - How far the shown link sits from the top of the viewport.
+ * @cssproperty --skip-link-inset-inline - How far the shown link sits from the start edge of the
+ *   viewport.
+ * @cssproperty --skip-link-padding-block - The space above and below the link's text.
+ * @cssproperty --skip-link-padding-inline - The space either side of the link's text.
+ * @cssproperty --skip-link-radius - The corner radius of the link.
  * @cssproperty --skip-link-shadow - The shadow under the link while it is shown. Follows
  *   `--helix-shadow-floating`, because the link sits over the corner of the page.
  */

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"] {
@@ -26,23 +26,24 @@ opacity: 0.5;
 
 align-items: center;
 aspect-ratio: 1;
-background-color: var(--helix-color-surface-overlay);
+background-color: var(--speed-dial-item-background-color, var(--helix-color-surface-overlay));
 border-radius: var(--helix-radii-full);
 box-shadow: var(--helix-shadow-md);
-color: var(--helix-color-foreground);
+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);
 }
@@ -57,13 +58,20 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 [part="label"] {
-background-color: var(--helix-color-surface-overlay);
+background-color: var(--speed-dial-label-background-color, var(--helix-color-surface-overlay));
 border-radius: var(--helix-radii-sm);
 box-shadow: var(--helix-shadow-sm);
-color: var(--helix-color-foreground);
+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);
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
 white-space: nowrap;
+}
+
+[part="item"]:hover [part="label"],
+[part="item"]:focus-visible [part="label"] {
+opacity: 1;
 }`);

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

@@ -14,7 +14,14 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Speed dial action, FAB action, Quick action
  * @documentation https://fusion.dev/helix/components/speed-dial
  *
+ * @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

@@ -31,11 +31,11 @@ display: none;
 }
 
 [part="actions"] {
---_dial-from: var(--helix-space-md);
+--_dial-from: var(--speed-dial-travel, var(--helix-space-md));
 }
 
 [part="actions"][data-placement^="bottom"] {
---_dial-from: calc(var(--helix-space-md) * -1);
+--_dial-from: calc(var(--speed-dial-travel, var(--helix-space-md)) * -1);
 }
 
 [part="actions"] ::slotted(*) {
@@ -55,7 +55,7 @@ translate: 0 0;
 }
 
 [part="actions"] {
---_speed-dial-stagger: calc(var(--helix-duration-fast) / 3);
+--_speed-dial-stagger: var(--speed-dial-stagger, calc(var(--helix-duration-fast) / 3));
 }
 
 [part="actions"][data-placed] ::slotted(:nth-last-child(2)) {
@@ -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);
 }
@@ -140,4 +140,13 @@ outline-offset: var(--helix-size-focus-offset);
 :host {
 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,16 +7,32 @@ 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.
  */
 export declare class HelixSpeedDial extends HelixHeadlessSpeedDial {
     static styles: CSSResultGroup;
+    /**
+     * When the actions' names show. Unset, always, beside each action. `hover`
+     * shows a name only while its action is under the pointer or has focus, as
+     * a tooltip does, for a dial whose icons speak for themselves. The names stay
+     * the actions' accessible names either way.
+     */
+    labels?: 'hover';
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -6,12 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 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]; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixSpeedDial.prototype, "labels", void 0);
 HelixSpeedDial = __decorate([
     customElement('helix-speed-dial')
 ], HelixSpeedDial);

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;