@astryxdesign/core 0.4.7 → 0.5.0-canary.009bcb3

package/dist/Stepper/Step.js

@@ -0,0 +1,1045 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Step.tsx
+ * @input Uses React, stylex, theme tokens (including the motion duration token
+ *   the connector fill animates on), StepperContext
+ * @output Exports Step component and StepProps
+ * @position Individual step item; used inside Stepper
+ *
+ * Every connector this file draws — the separated progress bars and the
+ * on-track segments alike — paints its accent fill as a scaled ::before rather
+ * than by swapping a background color, so a step the flow advances into grows
+ * its line along the track. See the CONNECTOR FILL block in the styles below
+ * for the axis/RTL/reduced-motion rules that go with it.
+ *
+ * Exactly one change animates: advancing a single step. Going back, jumping
+ * forward by more than one, and mounting mid-flow all land at once. The rule
+ * and the reasoning behind it sit above the styles; the arithmetic that keeps
+ * the one animated span reading as a single front — an on-track span is drawn
+ * by two steps, three where a content slot splits it — is in the component.
+ * Nothing about it is public API: Stepper hands each Step the step it came
+ * from through context, and the rest is derived.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Stepper/Stepper.doc.mjs
+ * - /packages/core/src/Stepper/Stepper.test.tsx
+ * - /packages/core/src/Stepper/index.ts
+ * - /apps/storybook/stories/Stepper.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Step/ (showcase blocks)
+ */
+import { useEffect } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars, textSizeVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
+import { focusOutlineStyles, mergeProps, isRenderable, themeProps } from "../utils/index.js";
+import { Icon } from "../Icon/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { useTranslator } from "../i18n/index.js";
+import { useStepperContext } from "./StepperContext.js";
+import "./stepper.stylex.js";
+import { stepMarker } from "./stepper.stylex.js";
+
+/**
+ * Built-in indicator presets. Anything other than these strings passed to
+ * `indicator` is treated as a custom ReactNode (e.g. an `<Icon />`).
+ * - 'auto': numbered badge for not-yet-reached steps, a check once completed
+ *   (default)
+ * - 'number': always a numbered badge
+ * - 'none': no indicator — just the progress bar and label
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// --- Default progress icons (16px) ---
+//
+// The `completed` progress state and the current-step ring are drawn as local
+// <svg> glyphs rather than sourced from the Icon registry. This is a deliberate
+// exception to the "glyphs come from the registry" convention (audit rule T17),
+// for two reasons:
+//
+//  1. `CurrentIcon` (a dot inside a ring) has no registry equivalent — it is a
+//     progress affordance, not a general-purpose icon.
+//  2. `CheckCircleIcon` (a filled circle with a check) is intentionally NOT the
+//     registry `success` glyph, even though the two look similar. They mean
+//     different things and must stay independently restyleable: `completed`
+//     marks *progress through the sequence* (every step you've passed), while
+//     the semantic `success` status marks a step's *outcome*. A stepper can
+//     show a completed step that also carries a `warning`/`error` status, so
+//     collapsing the two glyphs would conflate progress with outcome. The
+//     semantic `success`/`warning`/`error` STATUS glyphs DO defer to the themed
+//     registry (see the status branch below), so those share one visual
+//     language; only the progress marks are local.
+//
+// Both glyphs paint via `currentColor`, so the indicator's color is still
+// controlled by tokens on the wrapper (never hardcoded), and the wrapper
+// carries the `astryx-step-indicator` theme target.
+
+/** Filled circle with a check — shown for a completed step in 'auto' mode. */
+function CheckCircleIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: "8",
+      cy: "8",
+      r: "8",
+      fill: "currentColor"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M4.75 8.25 7 10.5l4.25-4.5",
+      stroke: colorVars['--color-background-surface'],
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+
+/** Filled dot in a ring — shown for the active step in 'auto' mode. */
+function CurrentIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: "8",
+      cy: "8",
+      r: "7",
+      stroke: "currentColor",
+      strokeWidth: "2"
+    }), /*#__PURE__*/_jsx("circle", {
+      cx: "8",
+      cy: "8",
+      r: "4",
+      fill: "currentColor"
+    })]
+  });
+}
+
+// --- Styles ---
+
+const BAR_WIDTH = spacingVars['--spacing-1'];
+// Every indicator — check, ring, custom icon, number badge — occupies the same
+// box, so the `auto` mode swapping a number for a check as a step completes
+// never nudges the label or the track.
+const INDICATOR_SIZE = spacingVars['--spacing-4'];
+// Indicator (16px) + the label-row gap (8px). The indent that lines a
+// description or a content slot up with the label above it.
+const INDICATOR_GUTTER = spacingVars['--spacing-6'];
+
+// --- Connector fill motion ---
+//
+// One change animates: advancing exactly one step. Going back, jumping
+// forward by more than one, and mounting mid-flow all apply at once.
+//
+// Animating the others was tried and read worse than not animating them. A
+// retreat is the clearest case: run forward, the transition ends with a bar
+// that is nearly full, and nearly full is indistinguishable from full, so the
+// eye calls it arrived well before it settles. Run backward, the same curve
+// ends with a shrinking stub of accent still on the track, and a remnant that
+// is still there reads unmistakably as not finished. Identical arithmetic in
+// both directions — measurably so — and the backward one still feels slow,
+// because the tail is what is visible rather than what is hidden. No easing
+// fixes that; only not animating it does. A multi-step jump fails differently:
+// it is a navigation rather than a progression, and sweeping a front across
+// four segments makes the user sit through a journey they asked to skip.
+//
+// What is left is the one gesture where the movement carries the meaning: the
+// flow went forward one step, and the line grows to show it. That span takes
+// the medium band — a fill crossing a whole segment is a spatial change, not a
+// micro-interaction, so per `astryx docs motion` it sits above the fast band
+// reserved for high-frequency states like hover.
+const FILL_SPAN_TIME = durationVars['--duration-medium'];
+
+// Share of one node-to-node span owned by the segment *arriving* at the far
+// node; the segment leaving the near node takes the rest. On-track spans are
+// drawn by two steps (see the ON-TRACK section), and the time has to be split
+// the way the length is or the two halves sweep at visibly different speeds.
+//
+// Horizontal: both halves are `flex: 1` inside equal-width steps, so an even
+// split is the proportional one.
+//
+// Vertical: the halves are nothing like equal, and no constant can be right
+// for all of them. The arriving half is otSegLeadV, a cap fixed at one density
+// space; the leaving half is otSegFlexV, grown to whatever is left of the step
+// row, so its length turns on label and description lengths this file cannot
+// see. Measured in the browser the cap is 40% of a plain balanced span (8 of
+// 20px) but 21% once the step carries a description (8 of 38px). 0.3 is the
+// value that minimises the worse of those two: it leaves the cap ~1.6x off the
+// rail's speed either way, where tuning to one case puts the other past 2x.
+// Matching each case exactly would mean measuring the rendered rail, a layout
+// read this system avoids.
+const OT_ARRIVAL_SHARE_H = 0.5;
+const OT_ARRIVAL_SHARE_V = 0.3;
+// A vertical step carrying a content slot draws a third segment down the side
+// of it (otContentSegV) which continues the leaving half past the row, so the
+// leaving half's time splits again. A slot runs several times the rail left
+// above it — 34px of rail to 108px of slot in the spacious content story — and
+// this is the middle of that range. Matching it exactly would mean measuring
+// the rendered slot; the ordering is what keeps the front contiguous, and this
+// keeps its speed in the right neighbourhood.
+const OT_RAIL_SHARE_OF_LEAVING = 0.25;
+
+/** Scale a CSS `<time>` by a unitless factor, collapsing the trivial cases. */
+function fillTimeSlice(time, factor) {
+  if (factor <= 0) {
+    return '0s';
+  }
+  if (factor === 1) {
+    return time;
+  }
+  // Rounded because the factors are sums of shares, and float noise would
+  // otherwise reach the emitted custom property as `calc(... * 0.7000000001)`.
+  return `calc(${time} * ${Number(factor.toFixed(4))})`;
+}
+const _temp = {
+  kKXxxB: "x196sc62 " + "x13sdc92",
+  k5BDGz: "xizoc3 " + "xhhm9v0",
+  "$$css": true
+};
+const _temp2 = {
+  kZCmMZ: "xnvo3vl",
+  "$$css": true
+};
+const _temp3 = {
+  kVAEAm: "x10l6tqk",
+  kYYq5F: "x10no89f",
+  kLqNvP: "x1lxsm33",
+  kzqmXN: "xx9zwd3",
+  "$$css": true
+};
+const _temp4 = {
+  kqGvvJ: "x1oqu0vw",
+  "$$css": true
+};
+const _temp5 = {
+  keoZOQ: "x1vhfslr",
+  "$$css": true
+};
+const styles = {
+  verticalRoot: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "x1q0g3np",
+    kGNEyG: "x1qjc9v5",
+    kVAEAm: "x1n2onr6",
+    kOIVth: "x1lsbc85",
+    $$css: true
+  },
+  verticalBar: {
+    kzqmXN: "xx9zwd3",
+    kaIpWk: "xjspbzw",
+    kmuXW: "x2lah0s",
+    kSGwAc: "xkh2ocl",
+    $$css: true
+  },
+  horizontalStep: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kGNEyG: "x1qjc9v5",
+    kUk6DE: "x98rzlu",
+    k7Eaqz: "xeuugli",
+    $$css: true
+  },
+  horizontalBar: {
+    kzqmXN: "xh8yej3",
+    kZKoxP: "x11c6zpc",
+    kaIpWk: "xjspbzw",
+    kmuXW: "x2lah0s",
+    k1K539: "xlstkdb",
+    $$css: true
+  },
+  connectorTrack: {
+    kVAEAm: "x1n2onr6",
+    kWkggS: "x1m4xfpy",
+    kgeoSG: "x1cpjm7i",
+    kEoFBp: "x1hmns74",
+    kFcpXp: "xxx281p",
+    kPB484: "xxyica1",
+    kLkRvE: "x1tzqye7",
+    k7KCAZ: "x1hu8v7x",
+    kKXxxB: "xuhr57t x13sdc92",
+    kqUdNP: "xyt8op7",
+    $$css: true
+  },
+  connectorTiming: (duration, delay) => [_temp, {
+    "--x-1dd27dc": (val => typeof val === "number" ? val + "ms" : val != null ? val : undefined)(duration),
+    "--x-owu7oy": (val => typeof val === "number" ? val + "ms" : val != null ? val : undefined)(delay)
+  }],
+  connectorFillV: {
+    kEdqc7: "x1fgylwi",
+    kcTAPf: "xd30wvy",
+    $$css: true
+  },
+  connectorEmptyV: {
+    kEdqc7: "x1fgylwi",
+    kcTAPf: "xb5f74o",
+    $$css: true
+  },
+  connectorFillH: {
+    kEdqc7: "xgu12d xdq8fwl",
+    kcTAPf: "xp1ps4y",
+    $$css: true
+  },
+  connectorEmptyH: {
+    kEdqc7: "xgu12d xdq8fwl",
+    kcTAPf: "x1e8txe",
+    $$css: true
+  },
+  icon: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kzqmXN: "x12xnipv",
+    kZKoxP: "x6b6gus",
+    kmuXW: "x2lah0s",
+    $$css: true
+  },
+  iconCompleted: {
+    kMwMTN: "xqwr325",
+    $$css: true
+  },
+  iconInProgress: {
+    kMwMTN: "xqwr325",
+    $$css: true
+  },
+  iconNotStarted: {
+    kMwMTN: "xv9yike",
+    $$css: true
+  },
+  iconDisabled: {
+    kMwMTN: "xqa6c3m",
+    kSiTet: "xbyyjgo",
+    $$css: true
+  },
+  iconAccent: {
+    kMwMTN: "xqwr325",
+    $$css: true
+  },
+  iconSuccess: {
+    kMwMTN: "xtjic6",
+    $$css: true
+  },
+  iconWarning: {
+    kMwMTN: "xs3pv69",
+    $$css: true
+  },
+  iconError: {
+    kMwMTN: "xjt36v0",
+    $$css: true
+  },
+  numberBadge: {
+    k1xSpc: "xrvj5dj",
+    kgQiWS: "x1ku5rj1",
+    kzqmXN: "x12xnipv",
+    kZKoxP: "x6b6gus",
+    kaIpWk: "xjspbzw",
+    kGuDYH: "x51wmvv",
+    k63SB2: "x2mo6ok",
+    kmuXW: "x2lah0s",
+    k9WMMc: "x2b8uid",
+    $$css: true
+  },
+  numberCompleted: {
+    kWkggS: "x1ewilqj",
+    kMwMTN: "xrkvqaz",
+    $$css: true
+  },
+  numberInProgress: {
+    kWkggS: "x1ewilqj",
+    kMwMTN: "xrkvqaz",
+    $$css: true
+  },
+  numberNotStarted: {
+    kWkggS: "xwmxj5m",
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  numberDisabled: {
+    kWkggS: "xwmxj5m",
+    kMwMTN: "xnbbluu",
+    kSiTet: "xbyyjgo",
+    $$css: true
+  },
+  numberAccent: {
+    kWkggS: "x1ewilqj",
+    kMwMTN: "x17wrial",
+    $$css: true
+  },
+  numberSuccess: {
+    kWkggS: "xdsz4j9",
+    kMwMTN: "xri61p4",
+    $$css: true
+  },
+  numberWarning: {
+    kWkggS: "x1q8g9m5",
+    kMwMTN: "xrebv38",
+    $$css: true
+  },
+  numberError: {
+    kWkggS: "x1pjz0fi",
+    kMwMTN: "x1m024r3",
+    $$css: true
+  },
+  label: {
+    kGuDYH: "xjm74w1",
+    kLWn49: "xw6l6zx",
+    k63SB2: "x1sodnla",
+    kMwMTN: "x1tgivj0",
+    k7Eaqz: "xeuugli",
+    kHjlTd: "x1mzt3pk",
+    $$css: true
+  },
+  labelInProgress: {
+    k63SB2: "x2mo6ok",
+    $$css: true
+  },
+  labelNotStarted: {
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  labelDisabled: {
+    kMwMTN: "xnbbluu",
+    $$css: true
+  },
+  stepContent: {
+    kLKAdn: "x1xye8es",
+    $$css: true
+  },
+  contentIndent: (inlinePad, gutter) => [_temp2, {
+    kwRFfy: inlinePad != null ? "x120eax6" : inlinePad,
+    $$css: true
+  }, {
+    "--x-paddingInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`calc(${inlinePad} + ${gutter})`),
+    "--x-paddingInlineEnd": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(inlinePad)
+  }],
+  densityCompact: {
+    k8WAf4: "xu0wf1k",
+    $$css: true
+  },
+  densityBalanced: {
+    k8WAf4: "xce4md1",
+    $$css: true
+  },
+  densitySpacious: {
+    k8WAf4: "x8o8v82",
+    $$css: true
+  },
+  densityInline: value => [{
+    kg3NbH: value != null ? "x30g6up" : value,
+    $$css: true
+  }, {
+    "--x-paddingInline": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(value)
+  }],
+  buttonReset: {
+    k9WMMc: "x1yc453h",
+    kGNEyG: "x1qjc9v5",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kzqmXN: "xh8yej3",
+    kkrTdU: "x1ypdohk x16khyan",
+    kaIpWk: "xh6dtrn",
+    k1ekBW: "x15406qy",
+    kIyJzY: "xkvfbh3 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kWkggS: "xjbqb8w xoevpu5 xyxi2l3",
+    $$css: true
+  },
+  otVerticalRoot: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kVAEAm: "x1n2onr6",
+    $$css: true
+  },
+  otHorizontalRoot: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kUk6DE: "x98rzlu",
+    k7Eaqz: "xeuugli",
+    $$css: true
+  },
+  otInteractive: {
+    kB7OPa: "x9f619",
+    k9WMMc: "x1yc453h",
+    kkrTdU: "x1ypdohk x16khyan",
+    kaIpWk: "xh6dtrn",
+    k1ekBW: "x15406qy",
+    kIyJzY: "xkvfbh3 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kWkggS: "xjbqb8w xoevpu5 xyxi2l3",
+    $$css: true
+  },
+  otRowWrap: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "x1q0g3np",
+    kGNEyG: "x1qjc9v5",
+    kOIVth: "x1txdalj",
+    kzqmXN: "xh8yej3",
+    $$css: true
+  },
+  otColWrap: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kGNEyG: "x1qjc9v5",
+    kzqmXN: "xh8yej3",
+    $$css: true
+  },
+  otIndicatorColV: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kGNEyG: "x6s0dn4",
+    kzqmXN: "x12xnipv",
+    kmuXW: "x2lah0s",
+    kSGwAc: "xkh2ocl",
+    $$css: true
+  },
+  otSegBaseV: {
+    kzqmXN: "xx9zwd3",
+    kmuXW: "x2lah0s",
+    kaIpWk: "x2u8bby",
+    $$css: true
+  },
+  otSegFlexV: {
+    kUk6DE: "x98rzlu",
+    kAzted: "x175cymr",
+    $$css: true
+  },
+  otSegLeadV: value => [{
+    kZKoxP: value != null ? "x16ye13r" : value,
+    $$css: true
+  }, {
+    "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(value)
+  }],
+  otSegH: {
+    kZKoxP: "x11c6zpc",
+    kUk6DE: "x98rzlu",
+    k7Eaqz: "x18ki04u",
+    kaIpWk: "x2u8bby",
+    $$css: true
+  },
+  otSegHiddenIfFirst: {
+    k33iCy: "xnpuxes x5um2zc",
+    $$css: true
+  },
+  otSegHiddenIfLast: {
+    k33iCy: "xnpuxes x1se5z8o",
+    $$css: true
+  },
+  otLabelWrapH: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kGNEyG: "x1qjc9v5",
+    kOIVth: "x1lsbc85",
+    k9WMMc: "x2b8uid",
+    $$css: true
+  },
+  otContent: {
+    kLKAdn: "x1xye8es",
+    $$css: true
+  },
+  otContentSegV: inlinePad => [_temp3, {
+    "--x-insetInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`calc(${inlinePad} + (${INDICATOR_SIZE} - ${BAR_WIDTH}) / 2)`)
+  }],
+  otRowPadV: value => [{
+    k8WAf4: value != null ? "x1giekp1" : value,
+    kg3NbH: value != null ? "x30g6up" : value,
+    $$css: true
+  }, {
+    "--x-paddingBlock": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(value),
+    "--x-paddingInline": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(value)
+  }],
+  otRailBridgeV: value => [_temp4, {
+    "--x-marginBlock": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`calc(-1 * ${value})`)
+  }],
+  otPadBlock: value => [{
+    k8WAf4: value != null ? "x1giekp1" : value,
+    $$css: true
+  }, {
+    "--x-paddingBlock": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(value)
+  }],
+  otMarginTop: value => [_temp5, {
+    "--x-marginBlockStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(value)
+  }]
+};
+
+/**
+ * An individual step within an Stepper. Renders a 4px progress-bar segment,
+ * an indicator (numbered badge, check, or any custom icon), a label with
+ * optional description, and an optional content slot.
+ *
+ * Progress (completed / active / not-started) is derived from the parent's
+ * `activeStep` and this step's `step` prop. The optional `status` prop layers a
+ * semantic meaning on top: in the default `auto` indicator mode it recolors the
+ * indicator and swaps in a matching glyph (`success` → green check-circle,
+ * `warning`/`error` → the shared Input status icons). The current step always
+ * keeps its current-step ring. `status` never recolors the connector/track.
+ *
+ * @example
+ * ```
+ * <Step step={0} label="Account details" description="Enter your email" />
+ * ```
+ *
+ * @example
+ * ```
+ * <Step step={1} label="Payment" status="error" />
+ * ```
+ */
+export function Step({
+  step,
+  label,
+  description,
+  children,
+  status,
+  isDisabled = false,
+  isOptional = false,
+  endContent,
+  indicator: indicatorProp,
+  density: densityProp,
+  xstyle,
+  className,
+  style,
+  ref,
+  'data-testid': dataTestId,
+  ...rest
+}) {
+  const t = useTranslator();
+  const ctx = useStepperContext();
+  const {
+    activeStep,
+    previousActiveStep,
+    orientation,
+    onStepClick,
+    density: ctxDensity,
+    indicatorPosition,
+    registerStep
+  } = ctx;
+
+  // Register this step index with the parent Stepper for duplicate detection.
+  useEffect(() => registerStep(step), [registerStep, step]);
+  const density = densityProp ?? ctxDensity;
+  // Inline padding of a separated step's hover target. Density varies the block
+  // padding freely, but the inline value has to be readable from out here: the
+  // content slot renders outside that target and re-applies it to stay aligned
+  // (see contentIndent), so keeping it in one place is what stops the two
+  // drifting apart.
+  const separatedDensityInline = density === 'spacious' ? spacingVars['--spacing-3'] : spacingVars['--spacing-2'];
+
+  // Resolve indicator prop — may be a preset string or a custom ReactNode.
+  const isCustomIndicator = indicatorProp != null && typeof indicatorProp !== 'string';
+  const indicator = isCustomIndicator ? 'auto' : indicatorProp ?? 'auto';
+
+  // Internal progress, derived from the parent's activeStep. This is NOT the
+  // public `status` prop — `status` controls semantic color only.
+  const progress = step === activeStep ? 'in-progress' : step < activeStep ? 'completed' : 'not-started';
+  const isVertical = orientation === 'vertical';
+  const isActive = progress === 'in-progress';
+  // Any non-disabled step is navigable when an onStepClick handler is provided,
+  // including not-started steps (free navigation across the flow).
+  const isClickable = !isDisabled && onStepClick != null;
+  const handleClick = () => {
+    if (isClickable && onStepClick) {
+      onStepClick(step);
+    }
+  };
+
+  // Bar fill is purely progress-based. `status` never recolors the bar — it
+  // only recolors the indicator (icon / number badge) below.
+  const isBarFilled = progress === 'completed' || progress === 'in-progress';
+
+  // --- This step's slice of the animated span ---
+  // Both layouts are measured in the same unit, the node-to-node span: on-track
+  // span k runs from node k to node k+1, and a separated step's lone bar is the
+  // span arriving at it (bar s fills on exactly the condition span s-1 does).
+  // So one rule serves both, and neither needs to know the step count.
+  //
+  // Only a single forward step animates, and the span it crosses is the one
+  // leaving the step the flow came from. Every other segment — the untouched
+  // ones, and every segment of a jump or a retreat — is handed a zero
+  // duration, so it lands at once and carries no stale delay into a later
+  // change.
+  const isSingleAdvance = activeStep === previousActiveStep + 1;
+  const animatedSpan = previousActiveStep;
+
+  /**
+   * Timing for the segment covering `[offset, offset + share)` of span
+   * `spanIndex`, both expressed as fractions of that span.
+   */
+  const fillTiming = (spanIndex, offset, share) => {
+    if (!isSingleAdvance || spanIndex !== animatedSpan) {
+      return styles.connectorTiming('0s', '0s');
+    }
+    return styles.connectorTiming(fillTimeSlice(FILL_SPAN_TIME, share), fillTimeSlice(FILL_SPAN_TIME, offset));
+  };
+
+  // A separated step draws the whole span arriving at it, so it fills for the
+  // span's entire slice with nothing to sequence against.
+  const barTiming = fillTiming(step - 1, 0, 1);
+
+  // --- Build indicator node ---
+  // 'auto': number for not-started, check/dot icon once reached
+  // 'number': always number badge
+  // 'none': nothing
+  // custom ReactNode (or `icon` prop): render as-is
+  let indicatorNode = null;
+  const customIcon = isCustomIndicator ? indicatorProp : null;
+
+  // Semantic `status` drives a distinct indicator glyph (default 'auto' mode,
+  // no custom icon), all sourced from the themed Icon registry so a step reads
+  // the same as the rest of the system:
+  //  - success → the themed `success` glyph (same check-circle as a completed
+  //    step), tinted success — i.e. a green check
+  //  - warning → the themed `warning` glyph
+  //  - error   → the themed `error` glyph
+  // The current (in-progress) step always shows the current-step ring — its
+  // indicator "replaces" any status glyph. `accent` has no distinct glyph and
+  // falls through to the progress-derived default.
+  const statusGlyph = indicator === 'auto' && customIcon == null && !isActive && (status === 'success' || status === 'warning' || status === 'error') ? status : null;
+  if (indicator !== 'none') {
+    const showNumber = customIcon == null && statusGlyph == null && (indicator === 'number' || indicator === 'auto' && progress === 'not-started');
+    if (showNumber) {
+      // Status only fills the badge once the step is reached. A not-started
+      // step stays neutral — otherwise `accent` (which has no glyph to swap in)
+      // would paint an inverted accent badge on an upcoming step, making it
+      // read as active/completed.
+      const isReached = progress === 'completed' || progress === 'in-progress';
+      const numberColorStyle = isDisabled ? styles.numberDisabled : isReached && status === 'accent' ? styles.numberAccent : isReached && status === 'success' ? styles.numberSuccess : isReached && status === 'warning' ? styles.numberWarning : isReached && status === 'error' ? styles.numberError : progress === 'completed' ? styles.numberCompleted : progress === 'in-progress' ? styles.numberInProgress : styles.numberNotStarted;
+      indicatorNode = /*#__PURE__*/_jsx("div", {
+        "aria-hidden": "true",
+        ...mergeProps(themeProps('step-indicator', {
+          progress,
+          status: status ?? undefined
+        }), stylex.props(styles.numberBadge, numberColorStyle)),
+        children: step + 1
+      });
+    } else {
+      // Priority: explicit custom icon → status glyph (non-current steps) →
+      // progress-derived default (check when completed, ring when current).
+      const iconContent = customIcon != null ? customIcon : statusGlyph === 'success' ? /*#__PURE__*/_jsx(Icon, {
+        icon: "success",
+        size: "sm",
+        color: isDisabled ? 'disabled' : 'success'
+      }) : statusGlyph === 'warning' ? /*#__PURE__*/_jsx(Icon, {
+        icon: "warning",
+        size: "sm",
+        color: isDisabled ? 'disabled' : 'warning'
+      }) : statusGlyph === 'error' ? /*#__PURE__*/_jsx(Icon, {
+        icon: "error",
+        size: "sm",
+        color: isDisabled ? 'disabled' : 'error'
+      }) : progress === 'completed' ? /*#__PURE__*/_jsx(CheckCircleIcon, {}) : /*#__PURE__*/_jsx(CurrentIcon, {});
+
+      // Wrapper tint drives the currentColor glyphs (check-circle / ring /
+      // custom icon). The <Icon> status glyphs set their own color, but we tint
+      // the wrapper to match so the indicator's color reflects `status` too.
+      const iconColorStyle = isDisabled ? styles.iconDisabled : customIcon != null ? status === 'accent' ? styles.iconAccent : status === 'success' ? styles.iconSuccess : status === 'warning' ? styles.iconWarning : status === 'error' ? styles.iconError : progress === 'completed' ? styles.iconCompleted : progress === 'in-progress' ? styles.iconInProgress : styles.iconNotStarted : statusGlyph === 'success' ? styles.iconSuccess : statusGlyph === 'warning' ? styles.iconWarning : statusGlyph === 'error' ? styles.iconError : progress === 'completed' ? styles.iconCompleted : progress === 'in-progress' ? styles.iconInProgress : styles.iconNotStarted;
+      indicatorNode = /*#__PURE__*/_jsx("div", {
+        "aria-hidden": "true",
+        ...mergeProps(themeProps('step-indicator', {
+          progress,
+          status: status ?? undefined
+        }), stylex.props(styles.icon, iconColorStyle)),
+        children: iconContent
+      });
+    }
+  }
+
+  // Every indicator glyph above is aria-hidden (pure decoration), so the
+  // step's progress/status must also reach assistive tech as text
+  // (WCAG 1.4.1 / 1.3.1). `error`/`warning` announce the semantic status;
+  // `success` and a completed step both announce "completed". The current
+  // step is announced via aria-current="step" instead, and not-started steps
+  // stay silent (the default state needs no qualifier).
+  const statusText = status === 'error' ? t('@astryx.step.status.error') : status === 'warning' ? t('@astryx.step.status.warning') : status === 'success' || progress === 'completed' ? t('@astryx.step.status.completed') : null;
+
+  // Rendered next to the label: hidden text for static steps, and composed
+  // into the button's accessible name for clickable ones (an aria-label on
+  // the button would otherwise override the hidden text). Two separate keys
+  // rather than string concatenation so translations control the joiner.
+  const statusTextNode = isRenderable(statusText) ? /*#__PURE__*/_jsx(VisuallyHidden, {
+    children: statusText
+  }) : null;
+  const stepAriaLabel = statusText != null ? t('@astryx.step.goToStepWithStatus', {
+    stepNumber: step + 1,
+    label,
+    status: statusText
+  }) : t('@astryx.step.goToStep', {
+    stepNumber: step + 1,
+    label
+  });
+  const hasIndicator = indicator !== 'none';
+  const labelColorStyle = isDisabled ? styles.labelDisabled : progress === 'not-started' ? styles.labelNotStarted : isActive ? styles.labelInProgress : undefined;
+
+  // Indicator + Label row
+  const iconLabelNode = /*#__PURE__*/_jsxs("div", {
+    ...{
+      className: "x78zum5 x1q0g3np x6s0dn4 x1txdalj"
+    },
+    children: [indicatorNode, /*#__PURE__*/_jsx("span", {
+      ...stylex.props(styles.label, labelColorStyle),
+      children: label
+    }), statusTextNode, isOptional && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        ...{
+          className: "xjm74w1 xv1l7n4"
+        },
+        children: "\u2022"
+      }), /*#__PURE__*/_jsx("span", {
+        ...{
+          className: "xjm74w1 xv1l7n4"
+        },
+        children: t('@astryx.step.optional')
+      })]
+    }), endContent]
+  });
+  const descriptionNode = isRenderable(description) ? /*#__PURE__*/_jsx("div", {
+    ...{
+      0: {
+        className: "x18gyask"
+      },
+      1: {
+        className: "x31w388"
+      }
+    }[!!hasIndicator << 0],
+    children: /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x1lliihq x141an7d x1ojctns xv1l7n4"
+      },
+      children: description
+    })
+  }) : null;
+  const contentNode = isRenderable(children) ? /*#__PURE__*/_jsx("div", {
+    ...stylex.props(styles.stepContent, styles.contentIndent(separatedDensityInline, hasIndicator ? INDICATOR_GUTTER : '0px')),
+    children: children
+  }) : null;
+
+  // Theme data attributes reflect progress + optional semantic status.
+  const stepThemeProps = themeProps('step', {
+    progress,
+    status: status ?? undefined
+  });
+
+  // ======= ON-TRACK: indicator is a node on the connector =======
+  if (indicatorPosition === 'on-track') {
+    // Connector fill is purely progress-based (matches the separated bar):
+    // the segment before the indicator is "reached" once we're at/past this
+    // step; the segment after is filled only once this step is completed.
+    // `status` never recolors the connector — only the indicator.
+    const beforeFilled = step <= activeStep;
+    const afterFilled = step < activeStep;
+    // Both segments animate their fill along the track (see connectorTrack), so
+    // the pair is picked by orientation: the vertical column scales down its
+    // block axis, the horizontal row along the reading direction.
+    const segFilledStyle = isVertical ? styles.connectorFillV : styles.connectorFillH;
+    const segEmptyStyle = isVertical ? styles.connectorEmptyV : styles.connectorEmptyH;
+    const beforeSegStyle = beforeFilled ? segFilledStyle : segEmptyStyle;
+    const afterSegStyle = afterFilled ? segFilledStyle : segEmptyStyle;
+    // First/last connector visibility is decided structurally from the step's
+    // own <li> position (see otSegHiddenIfFirst/Last), not by counting children
+    // in the parent — so grouping steps in a fragment can't break it.
+
+    // A node-to-node span is drawn by two steps: this one's trailing segments
+    // leave its own node, the next one's leading cap arrives at the next node.
+    // Both flip on the same condition, so left to themselves they fill together
+    // and one gap between two nodes reads as two dashes converging on the space
+    // between them. Handing each its own slice of the span's time, in track
+    // order — the leaving half first, then the arriving one — is what closes
+    // that into a single line growing.
+    const arrivalShare = isVertical ? OT_ARRIVAL_SHARE_V : OT_ARRIVAL_SHARE_H;
+    const leavingShare = 1 - arrivalShare;
+    // A content slot's segment continues the leaving half below the row, so the
+    // two divide the leaving time between them; with no slot the rail segment
+    // takes all of it. Each step can work this out for its own trailing side
+    // alone: the arriving cap always takes the span's last `arrivalShare`, so
+    // the step drawing it never has to know whether the step before it carries
+    // a slot.
+    const hasContentSeg = isVertical && isRenderable(children);
+    const railShare = leavingShare * (hasContentSeg ? OT_RAIL_SHARE_OF_LEAVING : 1);
+    const contentShare = leavingShare - railShare;
+    const beforeTiming = fillTiming(step - 1, leavingShare, arrivalShare);
+    const railTiming = fillTiming(step, 0, railShare);
+    const contentTiming = fillTiming(step, railShare, contentShare);
+    const densitySpace = density === 'compact' ? spacingVars['--spacing-1'] : density === 'spacious' ? spacingVars['--spacing-3'] : spacingVars['--spacing-2'];
+    const labelLineNode = /*#__PURE__*/_jsxs("div", {
+      ...{
+        0: {
+          className: "x78zum5 x1q0g3np x6s0dn4 xl56j7k x1a02dak xzye2dw"
+        },
+        1: {
+          className: "x78zum5 x1q0g3np x6s0dn4 x1txdalj"
+        }
+      }[!!isVertical << 0],
+      children: [/*#__PURE__*/_jsx("span", {
+        ...stylex.props(styles.label, labelColorStyle),
+        children: label
+      }), statusTextNode, isOptional && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          ...{
+            className: "xjm74w1 xv1l7n4"
+          },
+          children: "\u2022"
+        }), /*#__PURE__*/_jsx("span", {
+          ...{
+            className: "xjm74w1 xv1l7n4"
+          },
+          children: t('@astryx.step.optional')
+        })]
+      }), endContent]
+    });
+    const otDescriptionNode = isRenderable(description) ? /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x1lliihq x141an7d x1ojctns xv1l7n4"
+      },
+      children: description
+    }) : null;
+    const otContentNode = !isRenderable(children) ? null : isVertical ? /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x1n2onr6"
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        "aria-hidden": "true",
+        ...mergeProps(themeProps('step-connector'), stylex.props(
+        // connectorTrack first: it declares `position: relative` to
+        // anchor its fill layer, but this segment is absolutely placed
+        // on the rail beside the content slot and must keep that. An
+        // absolute box is a containing block too, so the fill still
+        // pins to it.
+        styles.connectorTrack, styles.otContentSegV(densitySpace), afterSegStyle, contentTiming, styles.otSegHiddenIfLast))
+      }), /*#__PURE__*/_jsx("div", {
+        ...stylex.props(styles.otContent, styles.contentIndent(densitySpace, INDICATOR_GUTTER)),
+        children: children
+      })]
+    }) : /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x1xye8es"
+      },
+      children: children
+    });
+    if (isVertical) {
+      const inner = /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs("div", {
+          ...stylex.props(styles.otIndicatorColV, styles.otRailBridgeV(densitySpace)),
+          children: [/*#__PURE__*/_jsx("div", {
+            "aria-hidden": "true",
+            ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegLeadV(densitySpace), styles.connectorTrack, beforeSegStyle, beforeTiming, styles.otSegHiddenIfFirst))
+          }), indicatorNode, /*#__PURE__*/_jsx("div", {
+            "aria-hidden": "true",
+            ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegFlexV, styles.connectorTrack, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          ...{
+            className: "x78zum5 xdt5ytf x1nhvcw1 x98rzlu x1lsbc85 xeuugli"
+          },
+          children: [labelLineNode, otDescriptionNode]
+        })]
+      });
+      return /*#__PURE__*/_jsxs("li", {
+        ref: ref,
+        ...mergeProps(stepThemeProps, stylex.props(stepMarker, styles.otVerticalRoot, xstyle), className, style),
+        "aria-current": isActive ? 'step' : undefined,
+        "data-testid": dataTestId,
+        ...rest,
+        children: [isClickable ? /*#__PURE__*/_jsx("button", {
+          type: "button",
+          onClick: handleClick,
+          "aria-label": stepAriaLabel,
+          ...stylex.props(styles.otInteractive, styles.otRowWrap, styles.otRowPadV(densitySpace), focusOutlineStyles.focusVisible),
+          children: inner
+        }) : /*#__PURE__*/_jsx("div", {
+          ...stylex.props(styles.otRowWrap, styles.otRowPadV(densitySpace)),
+          children: inner
+        }), otContentNode]
+      });
+    }
+
+    // Horizontal on-track
+    const innerH = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        ...{
+          className: "x78zum5 x1q0g3np x6s0dn4 xh8yej3"
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          "aria-hidden": "true",
+          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, beforeSegStyle, beforeTiming, styles.otSegHiddenIfFirst))
+        }), indicatorNode, /*#__PURE__*/_jsx("div", {
+          "aria-hidden": "true",
+          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, afterSegStyle, railTiming, styles.otSegHiddenIfLast))
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        ...stylex.props(styles.otLabelWrapH, styles.otMarginTop(densitySpace)),
+        children: [labelLineNode, otDescriptionNode]
+      })]
+    });
+    return /*#__PURE__*/_jsxs("li", {
+      ref: ref,
+      ...mergeProps(stepThemeProps, stylex.props(stepMarker, styles.otHorizontalRoot, xstyle), className, style),
+      "aria-current": isActive ? 'step' : undefined,
+      "data-testid": dataTestId,
+      ...rest,
+      children: [isClickable ? /*#__PURE__*/_jsx("button", {
+        type: "button",
+        onClick: handleClick,
+        "aria-label": stepAriaLabel,
+        ...stylex.props(styles.otInteractive, styles.otColWrap, styles.otPadBlock(densitySpace), focusOutlineStyles.focusVisible),
+        children: innerH
+      }) : /*#__PURE__*/_jsx("div", {
+        ...stylex.props(styles.otColWrap, styles.otPadBlock(densitySpace)),
+        children: innerH
+      }), otContentNode]
+    });
+  }
+
+  // ======= VERTICAL =======
+  if (isVertical) {
+    return /*#__PURE__*/_jsxs("li", {
+      ref: ref,
+      ...mergeProps(stepThemeProps, stylex.props(stepMarker, styles.verticalRoot, xstyle), className, style),
+      "aria-current": isActive ? 'step' : undefined,
+      "data-testid": dataTestId,
+      ...rest,
+      children: [/*#__PURE__*/_jsx("div", {
+        ...mergeProps(themeProps('step-bar'), stylex.props(styles.verticalBar, styles.connectorTrack, isBarFilled ? styles.connectorFillV : styles.connectorEmptyV, barTiming)),
+        "aria-hidden": "true"
+      }), /*#__PURE__*/_jsxs("div", {
+        ...{
+          className: "x78zum5 xdt5ytf x98rzlu"
+        },
+        children: [isClickable ? /*#__PURE__*/_jsxs("button", {
+          type: "button",
+          onClick: handleClick,
+          "aria-label": stepAriaLabel,
+          ...stylex.props(styles.buttonReset, focusOutlineStyles.focusVisible, density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline)),
+          children: [iconLabelNode, descriptionNode]
+        }) : /*#__PURE__*/_jsxs("div", {
+          ...stylex.props(density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline)),
+          children: [iconLabelNode, descriptionNode]
+        }), contentNode]
+      })]
+    });
+  }
+
+  // ======= HORIZONTAL =======
+  return /*#__PURE__*/_jsxs("li", {
+    ref: ref,
+    ...mergeProps(stepThemeProps, stylex.props(stepMarker, styles.horizontalStep, xstyle), className, style),
+    "aria-current": isActive ? 'step' : undefined,
+    "data-testid": dataTestId,
+    ...rest,
+    children: [/*#__PURE__*/_jsx("div", {
+      ...mergeProps(themeProps('step-bar'), stylex.props(styles.horizontalBar, styles.connectorTrack, isBarFilled ? styles.connectorFillH : styles.connectorEmptyH, barTiming)),
+      "aria-hidden": "true"
+    }), isClickable ? /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      onClick: handleClick,
+      "aria-label": stepAriaLabel,
+      ...stylex.props(styles.buttonReset, focusOutlineStyles.focusVisible, density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline)),
+      children: [iconLabelNode, descriptionNode]
+    }) : /*#__PURE__*/_jsxs("div", {
+      ...stylex.props(density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline)),
+      children: [iconLabelNode, descriptionNode]
+    }), contentNode]
+  });
+}
+Step.displayName = 'Step';