@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,147 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline-flex;
-}
-
-[part="actions"] {
-background-color: transparent;
-border: none;
-display: flex;
-flex-direction: column;
-gap: var(--speed-dial-gap, var(--helix-space-sm));
-margin: var(--helix-space-none);
-overflow: visible;
-padding: var(--helix-space-none);
-}
-
-[part="actions"] {
---_speed-dial-row: row-reverse;
-
-align-items: flex-end;
-}
-
-[part="actions"][data-placement$="-start"] {
---_speed-dial-row: row;
-
-align-items: flex-start;
-}
-
-[part="actions"][hidden] {
-display: none;
-}
-
-[part="actions"] {
---_dial-from: var(--speed-dial-travel, var(--helix-space-md));
-}
-
-[part="actions"][data-placement^="bottom"] {
---_dial-from: calc(var(--speed-dial-travel, var(--helix-space-md)) * -1);
-}
-
-[part="actions"] ::slotted(*) {
-opacity: 0;
-scale: 0.8;
-transition:
+export const styles = createSheet(`:host {display: inline-flex;}[part="actions"] {background-color: transparent;border: none;display: flex;flex-direction: column;gap: var(--speed-dial-gap, var(--helix-space-sm));margin: var(--helix-space-none);overflow: visible;padding: var(--helix-space-none);}[part="actions"] {--_speed-dial-row: row-reverse;align-items: flex-end;}[part="actions"][data-placement$="-start"] {--_speed-dial-row: row;align-items: flex-start;}[part="actions"][hidden] {display: none;}[part="actions"] {--_dial-from: var(--speed-dial-travel, var(--helix-space-md));}[part="actions"][data-placement^="bottom"] {--_dial-from: calc(var(--speed-dial-travel, var(--helix-space-md)) * -1);}[part="actions"] ::slotted(*) {opacity: 0;scale: 0.8;transition:
 opacity var(--helix-duration-fast) var(--helix-easing-standard),
 scale var(--helix-duration-fast) var(--helix-easing-emphasized),
-translate var(--helix-duration-fast) var(--helix-easing-emphasized);
-translate: 0 var(--_dial-from);
-}
-
-[part="actions"][data-placed] ::slotted(*) {
-opacity: 1;
-scale: 1;
-translate: 0 0;
-}
-
-[part="actions"] {
---_speed-dial-stagger: var(--speed-dial-stagger, calc(var(--helix-duration-fast) / 3));
-}
-
-[part="actions"][data-placed] ::slotted(:nth-last-child(2)) {
-transition-delay: var(--_speed-dial-stagger);
-}
-
-[part="actions"][data-placed] ::slotted(:nth-last-child(3)) {
-transition-delay: calc(var(--_speed-dial-stagger) * 2);
-}
-
-[part="actions"][data-placed] ::slotted(:nth-last-child(4)) {
-transition-delay: calc(var(--_speed-dial-stagger) * 3);
-}
-
-[part="actions"][data-placed] ::slotted(:nth-last-child(n + 5)) {
-transition-delay: calc(var(--_speed-dial-stagger) * 4);
-}
-
-[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(2)) {
-transition-delay: var(--_speed-dial-stagger);
-}
-
-[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(3)) {
-transition-delay: calc(var(--_speed-dial-stagger) * 2);
-}
-
-[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(4)) {
-transition-delay: calc(var(--_speed-dial-stagger) * 3);
-}
-
-[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(n + 5)) {
-transition-delay: calc(var(--_speed-dial-stagger) * 4);
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="actions"] ::slotted(*) {
-opacity: 1;
-scale: 1;
-transition: none;
-transition-delay: 0s;
-translate: 0 0;
-}
-
-[part="trigger"] {
-transition: none;
-}
-}
-
-[part="trigger"] {
---icon-size: var(--helix-size-icon);
-all: unset;
-
-align-items: center;
-
-background-color: var(--helix-color-primary-surface);
-block-size: var(--helix-size-control);
-border-radius: var(--helix-radii-full);
-box-shadow: var(--helix-shadow-md);
-box-sizing: border-box;
-color: var(--helix-color-foreground-on-primary);
-cursor: pointer;
-display: inline-flex;
-inline-size: var(--helix-size-control);
-justify-content: center;
-transition: box-shadow var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="trigger"]:hover {
-box-shadow: var(--helix-shadow-lg);
-}
-
-[part="trigger"]:active {
-box-shadow: var(--helix-shadow-sm);
-}
-
-[part="trigger"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-@media print {
-:host {
-display: none;
-}
-}
-
-:host([labels="hover"]) {
---_speed-dial-label-opacity: 0;
-}`);
+translate var(--helix-duration-fast) var(--helix-easing-emphasized);translate: 0 var(--_dial-from);}[part="actions"][data-placed] ::slotted(*) {opacity: 1;scale: 1;translate: 0 0;}[part="actions"] {--_speed-dial-stagger: var(--speed-dial-stagger, calc(var(--helix-duration-fast) / 3));}[part="actions"][data-placed] ::slotted(:nth-last-child(2)) {transition-delay: var(--_speed-dial-stagger);}[part="actions"][data-placed] ::slotted(:nth-last-child(3)) {transition-delay: calc(var(--_speed-dial-stagger) * 2);}[part="actions"][data-placed] ::slotted(:nth-last-child(4)) {transition-delay: calc(var(--_speed-dial-stagger) * 3);}[part="actions"][data-placed] ::slotted(:nth-last-child(n + 5)) {transition-delay: calc(var(--_speed-dial-stagger) * 4);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(2)) {transition-delay: var(--_speed-dial-stagger);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(3)) {transition-delay: calc(var(--_speed-dial-stagger) * 2);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(4)) {transition-delay: calc(var(--_speed-dial-stagger) * 3);}[part="actions"][data-placement^="bottom"][data-placed] ::slotted(:nth-child(n + 5)) {transition-delay: calc(var(--_speed-dial-stagger) * 4);}@media (prefers-reduced-motion: reduce) {[part="actions"] ::slotted(*) {opacity: 1;scale: 1;transition: none;transition-delay: 0s;translate: 0 0;}[part="trigger"] {transition: none;}}[part="trigger"] {--icon-size: var(--helix-size-icon);all: unset;align-items: center;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(--speed-dial-shadow, var(--helix-shadow-md));box-sizing: border-box;color: var(--speed-dial-color, var(--helix-color-foreground-on-primary));cursor: pointer;display: inline-flex;inline-size: var(--speed-dial-size, var(--helix-size-control));justify-content: center;transition: box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}[part="trigger"]:hover {box-shadow: var(--helix-shadow-lg);}[part="trigger"]:active {box-shadow: var(--helix-shadow-sm);}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media print {: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,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/splitter/root/splitter-root.css.js

@@ -1,187 +1,22 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-min-block-size: 0;
-min-inline-size: 0;
-
-position: relative;
-}
-
-:host(:is([orientation="vertical"], [data-axis="vertical"])) {
-flex-direction: column;
-}
-
-[part="start"] {
-flex: 0 0 var(--splitter-position, 50%);
-
-min-block-size: 0;
-min-inline-size: 0;
-overflow: auto;
-}
-
-[part="end"] {
-flex: 1 1 0;
-min-block-size: 0;
-min-inline-size: 0;
-overflow: auto;
-}
-
-[part="separator"] {
-background-color: transparent;
-box-sizing: border-box;
-cursor: col-resize;
-flex: none;
-inline-size: var(--splitter-target, var(--helix-space-xs));
-margin-inline: calc(var(--splitter-target, var(--helix-space-xs)) / -2);
-position: relative;
-
-touch-action: none;
-user-select: none;
-
-z-index: var(--helix-layer-raised);
-}
-
-[part="separator"]::before {
-background-color: var(--splitter-color, var(--helix-color-border));
-content: "";
-inline-size: var(--helix-border-thin);
-inset-block: 0;
-inset-inline-start: 50%;
-margin-inline-start: calc(var(--helix-border-thin) / -2);
-position: absolute;
-transition:
+export const styles = createSheet(`:host {display: flex;min-block-size: 0;min-inline-size: 0;position: relative;}:host(:is([orientation="vertical"], [data-axis="vertical"])) {flex-direction: column;}[part="start"] {flex: 0 0 var(--splitter-position, 50%);min-block-size: 0;min-inline-size: 0;overflow: auto;}[part="end"] {flex: 1 1 0;min-block-size: 0;min-inline-size: 0;overflow: auto;}[part="separator"] {background-color: transparent;box-sizing: border-box;cursor: col-resize;flex: none;inline-size: var(--splitter-target, var(--helix-space-xs));margin-inline: calc(var(--splitter-target, var(--helix-space-xs)) / -2);position: relative;touch-action: none;user-select: none;z-index: var(--helix-layer-raised);}[part="separator"]::before {background-color: var(--splitter-color, var(--helix-color-border));content: "";inline-size: var(--helix-border-thin);inset-block: 0;inset-inline-start: 50%;margin-inline-start: calc(var(--helix-border-thin) / -2);position: absolute;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-inline-size var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"] {
-block-size: var(--splitter-target, var(--helix-space-xs));
-cursor: row-resize;
-inline-size: auto;
-margin-block: calc(var(--splitter-target, var(--helix-space-xs)) / -2);
-margin-inline: 0;
-}
-
-:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"]::before {
-block-size: var(--helix-border-thin);
-inline-size: auto;
-inset-block-start: 50%;
-inset-inline: 0;
-margin-block-start: calc(var(--helix-border-thin) / -2);
-transition:
+inline-size var(--helix-duration-fast) var(--helix-easing-standard);}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"] {block-size: var(--splitter-target, var(--helix-space-xs));cursor: row-resize;inline-size: auto;margin-block: calc(var(--splitter-target, var(--helix-space-xs)) / -2);margin-inline: 0;}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="separator"]::before {block-size: var(--helix-border-thin);inline-size: auto;inset-block-start: 50%;inset-inline: 0;margin-block-start: calc(var(--helix-border-thin) / -2);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-block-size var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="separator"]:hover,
+block-size var(--helix-duration-fast) var(--helix-easing-standard);}[part="separator"]:hover,
 [part="separator"]:focus-visible,
-[part="separator"][data-dragging] {
-z-index: calc(var(--helix-layer-raised) + 1);
-}
-
-[part="separator"][data-flush]::before {
-background-color: transparent;
-}
-
-:host(:not([variant="grip"])) [part="separator"]:hover::before,
+[part="separator"][data-dragging] {z-index: calc(var(--helix-layer-raised) + 1);}[part="separator"][data-flush]::before {background-color: transparent;}:host(:not([variant="grip"])) [part="separator"]:hover::before,
 :host(:not([variant="grip"])) [part="separator"]:focus-visible::before,
-:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {
-background-color: var(--splitter-hover-color, var(--helix-color-foreground-muted));
-inline-size: var(--helix-border-thick);
-}
-
-:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {
-background-color: var(--splitter-drag-color, var(--helix-color-primary));
-}
-
-:host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
+:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {background-color: var(--splitter-hover-color, var(--helix-color-foreground-muted));inline-size: var(--helix-border-thick);}:host(:not([variant="grip"])) [part="separator"][data-dragging]::before {background-color: var(--splitter-drag-color, var(--helix-color-primary));}:host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
 [part="separator"]:hover::before,
 :host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
 [part="separator"]:focus-visible::before,
 :host(:is([orientation="vertical"], [data-axis="vertical"]):not([variant="grip"]))
-[part="separator"][data-dragging]::before {
-block-size: var(--helix-border-thick);
-inline-size: auto;
-}
-
-[part="separator"]:focus-visible {
-outline: none;
-}
-
-[part="separator"]:focus-visible::before {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="corner"] {
-block-size: var(--splitter-corner, var(--helix-space-md));
-
-cursor: move;
-inline-size: var(--splitter-corner, var(--helix-space-md));
-inset-block-start: var(--splitter-corner-at);
-inset-inline-start: var(--splitter-position);
-margin-block-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);
-margin-inline-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);
-position: absolute;
-touch-action: none;
-user-select: none;
-z-index: calc(var(--helix-layer-raised) + 2);
-}
-
-:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="corner"] {
-inset-block-start: var(--splitter-position);
-inset-inline-start: var(--splitter-corner-at);
-}
-
-[part="corner"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([variant="grip"]) [part="separator"]::after {
-background-color: var(--splitter-grip-color, var(--helix-color-foreground-muted));
-border-radius: var(--helix-radii-full);
-content: "";
-opacity: 0;
-position: absolute;
-transition:
+[part="separator"][data-dragging]::before {block-size: var(--helix-border-thick);inline-size: auto;}[part="separator"]:focus-visible {outline: none;}[part="separator"]:focus-visible::before {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="corner"] {block-size: var(--splitter-corner, var(--helix-space-md));cursor: move;inline-size: var(--splitter-corner, var(--helix-space-md));inset-block-start: var(--splitter-corner-at);inset-inline-start: var(--splitter-position);margin-block-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);margin-inline-start: calc(var(--splitter-corner, var(--helix-space-md)) / -2);position: absolute;touch-action: none;user-select: none;z-index: calc(var(--helix-layer-raised) + 2);}:host(:is([orientation="vertical"], [data-axis="vertical"])) [part="corner"] {inset-block-start: var(--splitter-position);inset-inline-start: var(--splitter-corner-at);}[part="corner"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([variant="grip"]) [part="separator"]::after {background-color: var(--splitter-grip-color, var(--helix-color-foreground-muted));border-radius: var(--helix-radii-full);content: "";opacity: 0;position: absolute;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-opacity var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host([variant="grip"]:not(:is([orientation="vertical"], [data-axis="vertical"])))
-[part="separator"]::after {
-block-size: var(--splitter-grip-length, 2rem);
-inline-size: var(--helix-border-thick);
-inset-block-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);
-inset-inline-start: calc(50% - var(--helix-border-thick) - var(--helix-space-2xs));
-}
-
-:host([variant="grip"]:is([orientation="vertical"], [data-axis="vertical"]))
-[part="separator"]::after {
-block-size: var(--helix-border-thick);
-inline-size: var(--splitter-grip-length, 2rem);
-inset-block-start: calc(50% - var(--helix-border-thick) - var(--helix-space-2xs));
-inset-inline-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);
-}
-
-:host([variant="grip"]) [part="separator"]:hover::after,
+opacity var(--helix-duration-fast) var(--helix-easing-standard);}:host([variant="grip"]:not(:is([orientation="vertical"], [data-axis="vertical"])))
+[part="separator"]::after {block-size: var(--splitter-grip-length, 2rem);inline-size: var(--helix-border-thick);inset-block-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);inset-inline-start: calc(50% - var(--helix-border-thick) - var(--helix-space-2xs));}:host([variant="grip"]:is([orientation="vertical"], [data-axis="vertical"]))
+[part="separator"]::after {block-size: var(--helix-border-thick);inline-size: var(--splitter-grip-length, 2rem);inset-block-start: calc(50% - var(--helix-border-thick) - var(--helix-space-2xs));inset-inline-start: calc(50% - var(--splitter-grip-length, 2rem) / 2);}:host([variant="grip"]) [part="separator"]:hover::after,
 :host([variant="grip"]) [part="separator"]:focus-visible::after,
-:host([variant="grip"]) [part="separator"][data-dragging]::after {
-opacity: 1;
-}
-
-:host([variant="grip"]) [part="separator"][data-dragging]::after {
-background-color: var(--splitter-drag-color, var(--helix-color-primary));
-}
-
-[part="start"][data-dragging],
-[part="end"][data-dragging] {
-pointer-events: none;
-}
-
-@media print {
-:host {
-overflow: visible;
-}
-}`);
+:host([variant="grip"]) [part="separator"][data-dragging]::after {opacity: 1;}:host([variant="grip"]) [part="separator"][data-dragging]::after {background-color: var(--splitter-drag-color, var(--helix-color-primary));}[part="start"][data-dragging],
+[part="end"][data-dragging] {pointer-events: none;}@media print {:host {overflow: visible;}}`);

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

@@ -1,37 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_stat-group-gap: var(--stat-group-gap, var(--helix-space-2xl));
-display: flex;
-flex-wrap: wrap;
-gap: var(--_stat-group-gap);
-}
-
-:host([columns]) {
-display: grid;
-}
-:host([columns="2"]) {
-grid-template-columns: var(--stat-group-columns, repeat(2, minmax(0, 1fr)));
-}
-:host([columns="3"]) {
-grid-template-columns: var(--stat-group-columns, repeat(3, minmax(0, 1fr)));
-}
-:host([columns="4"]) {
-grid-template-columns: var(--stat-group-columns, repeat(4, minmax(0, 1fr)));
-}
-:host([columns="5"]) {
-grid-template-columns: var(--stat-group-columns, repeat(5, minmax(0, 1fr)));
-}
-:host([columns="6"]) {
-grid-template-columns: var(--stat-group-columns, repeat(6, minmax(0, 1fr)));
-}
-
-:host([divided]) {
-column-gap: calc(var(--_stat-group-gap) * 2);
-overflow-x: clip;
-}
-
-:host([divided]) ::slotted(*) {
-border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
-margin-inline-start: calc(var(--_stat-group-gap) * -1 - var(--helix-border-thin));
-padding-inline-start: var(--_stat-group-gap);
-}`);
+export const styles = createSheet(`:host {--_stat-group-gap: var(--stat-group-gap, var(--helix-space-2xl));display: flex;flex-wrap: wrap;gap: var(--_stat-group-gap);}:host([columns]) {display: grid;}:host([columns="2"]) {grid-template-columns: var(--stat-group-columns, repeat(2, minmax(0, 1fr)));}:host([columns="3"]) {grid-template-columns: var(--stat-group-columns, repeat(3, minmax(0, 1fr)));}:host([columns="4"]) {grid-template-columns: var(--stat-group-columns, repeat(4, minmax(0, 1fr)));}:host([columns="5"]) {grid-template-columns: var(--stat-group-columns, repeat(5, minmax(0, 1fr)));}:host([columns="6"]) {grid-template-columns: var(--stat-group-columns, repeat(6, minmax(0, 1fr)));}:host([divided]) {column-gap: calc(var(--_stat-group-gap) * 2);overflow-x: clip;}:host([divided]) ::slotted(*) {border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);margin-inline-start: calc(var(--_stat-group-gap) * -1 - var(--helix-border-thin));padding-inline-start: var(--_stat-group-gap);}`);

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

@@ -1,59 +1,4 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
-align-content: start;
-
-align-items: baseline;
-display: grid;
-gap: var(--stat-gap, var(--helix-space-2xs));
-grid-template-columns: auto 1fr;
-}
-
-slot[name="label"]::slotted(*) {
-color: var(--stat-label-color, var(--helix-color-foreground-muted));
-font-size: var(--stat-label-size, calc(var(--helix-text-xs) / var(--helix-text-md) * 1em));
-font-weight: var(--helix-weight-medium);
-grid-column: 1 / -1;
-letter-spacing: var(--helix-tracking-wide);
-}
-
-slot:not([name]) {
-color: var(--stat-value-color, var(--helix-color-foreground));
-font-family: var(--helix-font-display);
-font-size: var(--stat-value-size, calc(var(--helix-text-3xl) / var(--helix-text-md) * 1em));
-font-weight: var(--helix-weight-semibold);
-letter-spacing: var(--helix-tracking-tight);
-line-height: var(--helix-leading-tight);
-}
-
-slot[name="unit"]::slotted(*) {
-color: var(--stat-unit-color, var(--helix-color-foreground-muted));
-font-size: var(--stat-unit-size, calc(var(--helix-text-md) / var(--helix-text-md) * 1em));
-font-weight: var(--helix-weight-medium);
-}
-
-:host([direction="column-reverse"]) slot[name="label"]::slotted(*) {
-order: 1;
-}
-
-:host([direction="row"]),
-:host([direction="row-reverse"]) {
-align-items: baseline;
-display: flex;
-gap: var(--stat-gap, var(--helix-space-xs));
-}
-
-:host([direction="row"]) slot[name="label"]::slotted(*),
-:host([direction="row-reverse"]) slot[name="label"]::slotted(*) {
-grid-column: auto;
-}
-
-:host([direction="row-reverse"]) slot[name="label"] {
-order: 1;
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+export const styles = createSheet(`:host {align-content: start;align-items: baseline;display: grid;gap: var(--stat-gap, var(--helix-space-2xs));grid-template-columns: auto 1fr;}slot[name="label"]::slotted(*) {color: var(--stat-label-color, var(--helix-color-foreground-muted));font-size: var(--stat-label-size, calc(var(--helix-text-xs) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-medium);grid-column: 1 / -1;letter-spacing: var(--helix-tracking-wide);}slot:not([name]) {color: var(--stat-value-color, var(--helix-color-foreground));font-family: var(--helix-font-display);font-size: var(--stat-value-size, calc(var(--helix-text-3xl) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-semibold);letter-spacing: var(--helix-tracking-tight);line-height: var(--helix-leading-tight);}slot[name="unit"]::slotted(*) {color: var(--stat-unit-color, var(--helix-color-foreground-muted));font-size: var(--stat-unit-size, calc(var(--helix-text-md) / var(--helix-text-md) * 1em));font-weight: var(--helix-weight-medium);}slot[name="trend"]::slotted(*) {grid-column: 1 / -1;}:host([direction="column-reverse"]) slot[name="label"]::slotted(*) {order: 1;}:host([direction="row"]),
+:host([direction="row-reverse"]) {align-items: baseline;display: flex;gap: var(--stat-gap, var(--helix-space-xs));}:host([direction="row"]) slot[name="label"]::slotted(*),
+:host([direction="row-reverse"]) slot[name="label"]::slotted(*) {grid-column: auto;}:host([direction="row-reverse"]) slot[name="label"] {order: 1;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -1,91 +1,34 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_steps-m: var(--steps-marker-size, var(--helix-size-icon));
---_steps-mark-box: var(--_steps-m);
-
---_steps-connector-inset: var(--steps-connector-inset, var(--helix-space-2xs));
---_steps-columns: minmax(0, 1fr);
---_steps-marker-column: 1;
---_steps-marker-justify: center;
---_steps-body-column: 1;
---_steps-body-row: 2;
---_steps-body-align: center;
---_steps-row-gap: var(--helix-space-xs);
---_steps-content: none;
-
---_steps-lead-inline-start: calc(var(--steps-gap, var(--helix-space-md)) / -2);
---_steps-lead-inline-size: calc(
+export const styles = createSheet(`:host {--_steps-m: var(--steps-marker-size, var(--helix-size-icon));--_steps-mark-box: var(--_steps-m);--_steps-connector-inset: var(--steps-connector-inset, var(--helix-space-2xs));--_steps-columns: minmax(0, 1fr);--_steps-marker-column: 1;--_steps-marker-justify: center;--_steps-body-column: 1;--_steps-body-row: 2;--_steps-body-align: center;--_steps-row-gap: var(--helix-space-xs);--_steps-content: none;--_steps-lead-inline-start: calc(var(--steps-gap, var(--helix-space-md)) / -2);--_steps-lead-inline-size: calc(
 50% +
 var(--steps-gap, var(--helix-space-md)) /
 2 -
 var(--_steps-mark-box) /
 2 -
 var(--_steps-connector-inset)
-);
---_steps-lead-block-start: calc(var(--_steps-mark-box) / 2);
---_steps-lead-block-size: var(--helix-border-thin);
---_steps-trail-inline-start: calc(
+);--_steps-lead-block-start: calc(var(--_steps-mark-box) / 2);--_steps-lead-block-size: var(--helix-border-thin);--_steps-trail-inline-start: calc(
 50% +
 var(--_steps-mark-box) /
 2 +
 var(--_steps-connector-inset)
-);
---_steps-trail-inline-size: calc(
+);--_steps-trail-inline-size: calc(
 50% +
 var(--steps-gap, var(--helix-space-md)) /
 2 -
 var(--_steps-mark-box) /
 2 -
 var(--_steps-connector-inset)
-);
---_steps-trail-block-start: calc(var(--_steps-mark-box) / 2);
---_steps-trail-block-size: var(--helix-border-thin);
-counter-reset: helix-step;
-display: flex;
-gap: var(--steps-gap, var(--helix-space-md));
-}
-
-:host(:not([orientation="vertical"])) ::slotted(*) {
-flex: 1 1 0;
-min-inline-size: 0;
-}
-
-:host([orientation="vertical"]) {
---_steps-mark-box: var(--helix-size-control-tight);
---_steps-columns: auto minmax(0, 1fr);
---_steps-marker-justify: start;
---_steps-body-column: 2;
---_steps-body-row: 1;
---_steps-body-align: start;
---_steps-row-gap: var(--helix-space-2xs);
---_steps-content: grid;
-
---_steps-lead-inline-start: calc(var(--_steps-mark-box) / 2);
---_steps-lead-inline-size: var(--helix-border-thin);
---_steps-lead-block-start: calc(var(--steps-gap, var(--helix-space-md)) / -2);
---_steps-lead-block-size: calc(var(--steps-gap, var(--helix-space-md)) / 2);
---_steps-trail-inline-start: calc(var(--_steps-mark-box) / 2);
---_steps-trail-inline-size: var(--helix-border-thin);
---_steps-trail-block-start: var(--_steps-mark-box);
---_steps-trail-block-size: calc(
+);--_steps-trail-block-start: calc(var(--_steps-mark-box) / 2);--_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;}:host([orientation="vertical"]) {--_steps-mark-box: var(--helix-size-control-tight);--_steps-columns: auto minmax(0, 1fr);--_steps-marker-justify: start;--_steps-body-column: 2;--_steps-body-row: 1;--_steps-body-align: start;--_steps-row-gap: var(--helix-space-2xs);--_steps-content: grid;--_steps-lead-inline-start: calc(var(--_steps-mark-box) / 2);--_steps-lead-inline-size: var(--helix-border-thin);--_steps-lead-block-start: calc(var(--steps-gap, var(--helix-space-md)) / -2);--_steps-lead-block-size: calc(var(--steps-gap, var(--helix-space-md)) / 2);--_steps-trail-inline-start: calc(var(--_steps-mark-box) / 2);--_steps-trail-inline-size: var(--helix-border-thin);--_steps-trail-block-start: var(--_steps-mark-box);--_steps-trail-block-size: calc(
 100% -
 var(--_steps-mark-box) +
 var(--steps-gap, var(--helix-space-md)) /
 2
-);
-flex-direction: column;
-}
-
-:host([variant="numeric"]) {
---_steps-mark: none;
---_steps-count: counter(helix-step);
---_steps-marker-color: var(--helix-color-foreground-subtle);
---_steps-ink-complete: var(--helix-color-foreground-muted);
---_steps-ink-current: var(--helix-color-foreground);
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+);flex-direction: column;}:host([variant="numeric"]) {--_steps-mark: none;--_steps-count: counter(helix-step);--_steps-marker-color: var(--helix-color-foreground-subtle);--_steps-ink-complete: var(--helix-color-foreground-muted);--_steps-ink-current: var(--helix-color-foreground);}@media print {:host {print-color-adjust: economy;}}`);

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;