@fusion.dev/helix 0.151.0 → 0.152.0

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

@@ -2,4 +2,9 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);background-color: var(--app-header-background-color, var(--helix-color-background));border-block-end: var(--helix-border-thin) solid var(--app-header-border-color, transparent);container-type: inline-size;display: block;inline-size: 100%;transition:
 backdrop-filter var(--helix-duration-normal) var(--helix-easing-standard),
 background-color var(--helix-duration-normal) var(--helix-easing-standard),
-border-color var(--helix-duration-normal) var(--helix-easing-standard);}:host([material="glass"]) {backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));background-color: var(--app-header-background-color, var(--helix-material-translucent));}:host([material="frosted"]) {backdrop-filter: var(--app-header-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--app-header-background-color, var(--helix-material-translucent-strong));}:host([material="transparent"]) {background-color: var(--app-header-background-color, transparent);}:host([material="transparent"]:state(scrolled)) {backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));background-color: var(--app-header-background-color, var(--helix-material-translucent));}:host([sticky]) {inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky);}[part="row"] {align-items: center;block-size: var(--app-header-block-size, var(--helix-size-header));display: grid;gap: var(--helix-space-lg);grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);margin-inline: auto;max-inline-size: var(--app-header-max-inline-size, 72rem);padding-inline: var(--app-header-padding, var(--helix-space-lg));}[part="start"] {align-items: center;display: flex;min-inline-size: 0;}[part="end"] {align-items: center;display: flex;gap: var(--helix-space-xs);justify-content: flex-end;min-inline-size: 0;}:host([content-align="start"]) [part="row"] {grid-template-columns: auto 1fr auto;}slot[name="start"]::slotted(*) {align-items: center;color: var(--helix-color-foreground);display: flex;flex: 0 0 auto;font-weight: var(--helix-weight-semibold);gap: var(--helix-space-xs);letter-spacing: var(--helix-tracking-tight);}[part="content"] {align-items: center;display: flex;position: relative;gap: var(--helix-space-md);justify-content: safe center;min-inline-size: 0;overflow-x: auto;}:host([content-align="start"]) [part="content"] {justify-content: flex-start;}@container (inline-size < 24rem) {[part="row"] {gap: var(--helix-space-md);padding-inline: var(--app-header-padding, var(--helix-space-md));}}@media print {:host {display: none;}}`);
+border-color var(--helix-duration-normal) var(--helix-easing-standard);}:host([material="glass"]) {backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));background-color: var(--app-header-background-color, var(--helix-material-translucent));}:host([material="frosted"]) {backdrop-filter: var(--app-header-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--app-header-background-color, var(--helix-material-translucent-strong));}:host([material="transparent"]) {background-color: var(--app-header-background-color, transparent);}:host([material="transparent"]:state(scrolled)) {backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));background-color: var(--app-header-background-color, var(--helix-material-translucent));}:host([sticky]) {inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky);}[part="row"] {align-items: center;block-size: var(--app-header-block-size, var(--helix-size-header));display: grid;gap: var(--helix-space-lg);grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);margin-inline: auto;max-inline-size: var(--app-header-max-inline-size, 72rem);padding-inline: var(--app-header-padding, var(--helix-space-lg));}[part="start"] {align-items: center;display: flex;min-inline-size: 0;}[part="end"] {align-items: center;display: flex;gap: var(--helix-space-xs);justify-content: flex-end;min-inline-size: 0;}:host([content-align="start"]) [part="row"] {grid-template-columns: auto 1fr auto;}slot[name="start"]::slotted(*) {align-items: center;color: var(--helix-color-foreground);display: flex;flex: 0 0 auto;font-weight: var(--helix-weight-semibold);gap: var(--helix-space-xs);letter-spacing: var(--helix-tracking-tight);}[part="content"] {align-items: center;display: flex;position: relative;gap: var(--helix-space-md);justify-content: safe center;min-inline-size: 0;overflow-x: auto;}:host([content-align="start"]) [part="content"] {justify-content: flex-start;}@container (inline-size < 24rem) {[part="row"] {gap: var(--helix-space-md);padding-inline: var(--app-header-padding, var(--helix-space-md));}}:host([sticky]) {transition:
+backdrop-filter var(--helix-duration-normal) var(--helix-easing-standard),
+background-color var(--helix-duration-normal) var(--helix-easing-standard),
+border-color var(--helix-duration-normal) var(--helix-easing-standard),
+translate var(--helix-duration-normal) var(--helix-easing-standard);}:host([sticky]:state(hidden)) {translate: 0 -100%;}:host(:state(folded)) [part="row"] {block-size: auto;grid-template-columns: minmax(0, 1fr) auto;grid-template-rows: var(--app-header-block-size, var(--helix-size-header));row-gap: var(--helix-space-none);}:host(:state(folded)) [part="content"] {align-items: stretch;flex-direction: column;grid-column: 1 / -1;grid-row: 2;justify-content: flex-start;overflow-x: visible;padding-block-end: var(--helix-space-sm);}[part="content"][hidden] {display: none;}[part="toggle"] {all: unset;box-sizing: border-box;align-items: center;block-size: var(--helix-size-control);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: var(--helix-size-control);justify-content: center;}[part="toggle"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="toggle"]:hover,
+:host(:state(open)) [part="toggle"] {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="toggle"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}@media (prefers-reduced-motion: reduce) {:host([sticky]) {transition: none;}}@media print {:host {display: none;}}`);

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

@@ -1,5 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block;}[part="nav"] {align-items: center;block-size: var(--navigation-block-size, var(--helix-size-control-sm));display: flex;gap: var(--navigation-gap, var(--helix-space-2xs));min-inline-size: 0;overflow-x: auto;position: relative;}[part="indicator"] {background-color: var(--navigation-indicator-color, var(--helix-color-surface-sunken));block-size: var(--indicator-block-size, 0);border-radius: var(--navigation-indicator-radius, var(--helix-radii-sm));box-shadow: var(--navigation-indicator-shadow, none);inline-size: var(--indicator-inline-size, 0);inset-block-start: 50%;inset-inline-start: 0;opacity: 0;position: absolute;translate: var(--indicator-x, 0) -50%;transition:
+export const styles = createSheet(`:host {display: block;}[part="nav"] {align-items: center;block-size: var(--navigation-block-size, var(--helix-size-control-sm));display: flex;gap: var(--navigation-gap, var(--helix-space-2xs));min-inline-size: 0;overflow-x: auto;position: relative;}::slotted(:is(ul, ol, [role="list"])) {align-items: center;block-size: 100%;display: flex;gap: var(--navigation-gap, var(--helix-space-2xs));list-style: none;margin: var(--helix-space-none);padding: var(--helix-space-none);}:host([orientation="vertical"]) ::slotted(:is(ul, ol, [role="list"])) {align-items: stretch;block-size: auto;flex-direction: column;}[part="indicator"] {background-color: var(--navigation-indicator-color, var(--helix-color-surface-sunken));block-size: var(--indicator-block-size, 0);border-radius: var(--navigation-indicator-radius, var(--helix-radii-sm));box-shadow: var(--navigation-indicator-shadow, none);inline-size: var(--indicator-inline-size, 0);inset-block-start: 50%;inset-inline-start: 0;opacity: 0;position: absolute;translate: var(--indicator-x, 0) -50%;transition:
 translate var(--helix-duration-normal) var(--helix-easing-emphasized),
 inline-size var(--helix-duration-normal) var(--helix-easing-emphasized),
 opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base);}[part="indicator"][data-placed] {opacity: 1;}:host([orientation="vertical"]) [part="nav"] {align-items: stretch;block-size: auto;flex-direction: column;overflow-x: visible;}:host([orientation="vertical"]) [part="indicator"] {inset-block-start: 0;translate: var(--indicator-x, 0) var(--indicator-y, 0);}@media print {:host {display: none;}}`);

package/dist/steps/step/step.css.js

@@ -3,4 +3,4 @@ export const styles = createSheet(`:host {--_step-inset: var(--helix-space-sm);a
 :host::after {background-color: var(--steps-connector-color, var(--helix-color-border));content: "";position: absolute;z-index: 0;}:host::before {block-size: var(--_steps-lead-block-size, var(--helix-border-thin));inline-size: var(--_steps-lead-inline-size, 0);inset-block-start: var(--_steps-lead-block-start, 50%);inset-inline-start: var(--_steps-lead-inline-start, 0);}:host::after {block-size: var(--_steps-trail-block-size, var(--helix-border-thin));inline-size: var(--_steps-trail-inline-size, 0);inset-block-start: var(--_steps-trail-block-start, 50%);inset-inline-start: var(--_steps-trail-inline-start, 0);}:host(:first-child)::before,
 :host(:last-child)::after {display: none;}[part="marker"] {align-items: center;grid-column: var(--_steps-marker-column, 1);grid-row: 1;justify-self: var(--_steps-marker-justify, center);block-size: var(--_steps-mark-box, var(--helix-size-icon));box-sizing: border-box;color: var(--_steps-marker-color, var(--helix-color-border));display: inline-flex;flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-semibold);inline-size: var(--_steps-mark-box, var(--helix-size-icon));justify-content: center;position: relative;transition: color var(--helix-duration-fast) var(--helix-easing-standard);z-index: 1;}[part="marker"] slot {align-items: center;display: inline-flex;justify-content: center;}[part="marker"]::after {content: var(--_steps-count, none);}[part="marker"] svg {block-size: var(--_steps-m, var(--helix-size-icon));display: var(--_steps-mark, inline);flex: 0 0 auto;inline-size: var(--_steps-m, var(--helix-size-icon));}slot[name="marker"]::slotted(*) {--icon-size: var(--_steps-m, var(--helix-size-icon));}:host([complete]) [part="marker"] {color: var(--steps-complete-color, var(--_steps-ink-complete, var(--helix-color-success)));}:host([current]) [part="marker"] {color: var(--steps-current-color, var(--_steps-ink-current, var(--helix-color-primary)));}:host([complete][current]) [part="marker"] {color: var(--steps-complete-color, var(--_steps-ink-complete, var(--helix-color-success)));}[part="body"] {align-items: var(--_steps-body-align, center);grid-column: var(--_steps-body-column, 1);grid-row: var(--_steps-body-row, 2);display: flex;flex-direction: column;min-inline-size: 0;position: relative;z-index: 1;}[part="label"] {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-space-control: var(--_step-inset);--helix-text-control: var(--helix-text-sm);--button-foreground-color: var(--helix-color-foreground-muted);max-inline-size: 100%;}:host([complete]) [part="label"],
 :host([current]) [part="label"] {--button-foreground-color: var(--helix-color-foreground);}[part="description"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);padding-inline: var(--_step-inset);}:host([disabled]) [part="marker"],
-:host([disabled]) [part="description"] {opacity: 0.5;}[part="content"] {display: var(--_steps-content, none);grid-column: var(--_steps-body-column, 1);grid-row: calc(var(--_steps-body-row, 2) + 1);grid-template-rows: 0fr;padding-inline: var(--_step-inset);transition: grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard);}:host([current]) [part="content"] {grid-template-rows: 1fr;}[part="content"] > slot {display: block;min-block-size: 0;overflow: hidden;}`);
+:host([disabled]) [part="description"] {opacity: 0.5;}[part="content"] {display: var(--_steps-content, none);grid-column: var(--_steps-body-column, 1);grid-row: calc(var(--_steps-body-row, 2) + 1);grid-template-rows: 0fr;padding-inline: var(--_step-inset);transition: grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard);}:host([current]) [part="content"] {grid-template-rows: 1fr;}[part="content"] > slot {display: block;min-block-size: 0;overflow: hidden;transition: visibility var(--helix-duration-normal) var(--helix-easing-standard);visibility: hidden;}:host([current]) [part="content"] > slot {visibility: visible;}`);

package/dist/steps/step/step.d.ts

@@ -4,6 +4,16 @@ import '../../button/index.js';
 /**
  * @summary One stage in a sequence.
  *
+ * @description
+ * A step draws its mark, its name as a `helix-button`, and the line that joins
+ * it to the steps either side. The mark is a tick on a finished step, a dot
+ * on the current one, and an empty ring on one nobody has reached. Where the
+ * list sets `variant="numeric"`, it is the step's number.
+ *
+ * Down a column, the current step opens to show what is in its `content` slot,
+ * and the others collapse it. A collapsed stage's content is hidden, so Tab and
+ * a screen reader pass over it as well.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Stage