// 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, and per-step theme selector
 *   state
 * @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. In a compact horizontal
 * Stepper, each track node is presentational rather than clickable; navigation
 * moves to the named previous/next controls in the summary row. The on-track
 * layout keeps each indicator on the rail and does not repeat the active one
 * beside the summary label. Each public content slot stays mounted and is
 * hidden to preserve local state.
 *
 * 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 { useLayoutEffect, type ReactNode } from 'react';
import { createPortal } from 'react-dom';
import * as stylex from "../style-runtime.js";
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 { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
import type { BaseProps } from "../BaseProps.js";
import { Icon } from "../Icon/index.js";
import { VisuallyHidden } from "../VisuallyHidden/index.js";
import { useTranslator } from "../i18n/index.js";
import { useStepperInternalContext } from "./StepperContext.js";
import "./stepper.stylex.js";
import { stepMarker } from "./stepper.stylex.js";
import type { StepStatus } from "./StepStatus.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
 */
export type StepIndicatorPreset = 'auto' | 'number' | 'none';
export type StepDensity = 'compact' | 'balanced' | 'spacious';
export interface StepProps extends BaseProps<HTMLLIElement> {
  /** Ref forwarded to the root element */
  ref?: React.Ref<HTMLLIElement>;
  /**
   * Zero-based index of this step. Used to derive progress (completed /
   * active / not-started) relative to the parent's `activeStep`.
   */
  step: number;
  /**
   * Step label text.
   */
  label: string;
  /**
   * Optional description shown below the label.
   */
  description?: string;
  /**
   * Content rendered below the label and description. Useful in vertical
   * steppers to show form fields or detailed content for each step. Compact
   * horizontal steppers hide it without unmounting it, preserving local state.
   */
  children?: ReactNode;

  /**
   * Semantic status for the step, mapped to the global Astryx semantic tokens
   * (`accent`, `success`, `warning`, `error`). In the default `auto` indicator
   * mode it sets both the indicator color and a matching glyph: `success` shows
   * a green check-circle, `warning`/`error` show the shared Input status icons.
   * `accent` is color-only. The current (in-progress) step always keeps its
   * current-step indicator regardless of `status`. Never recolors the
   * connector/track.
   *
   * Because the indicator glyphs are decorative (aria-hidden), the status also
   * reaches assistive technology as text: visually hidden "completed" /
   * "warning" / "error" next to the label, and composed into the accessible
   * name of clickable steps.
   */
  status?: StepStatus;
  /**
   * Disable interaction for this step.
   * @default false
   */
  isDisabled?: boolean;
  /**
   * Marks the step as optional, appending an "Optional" affordance after the
   * label.
   * @default false
   */
  isOptional?: boolean;
  /**
   * Trailing content rendered at the end of the label row (e.g. a timestamp
   * or status chip).
   */
  endContent?: ReactNode;
  /**
   * What to show as the step indicator. Accepts a preset string or any
   * ReactNode:
   * - 'auto': numbered badge until completed, then a check (default)
   * - 'number': always a numbered badge
   * - 'none': no indicator, just the bar + label
   * - ReactNode: any custom icon or element to render as the indicator
   * @default 'auto'
   */
  indicator?: StepIndicatorPreset | ReactNode;
  /**
   * Controls vertical padding of the step. Falls back to the stepper-level
   * density when unset.
   * - 'compact': minimal padding (4px block)
   * - 'balanced': default (8px block)
   * - 'spacious': generous (12px block, 12px inline)
   */
  density?: StepDensity;
}

// --- 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 <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="8" fill="currentColor" />
      <path d="M4.75 8.25 7 10.5l4.25-4.5" stroke={colorVars['--color-background-surface']} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
    </svg>;
}

/** Filled dot in a ring — shown for the active step in 'auto' mode. */
function CurrentIcon() {
  return <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="2" />
      <circle cx="8" cy="8" r="4" fill="currentColor" />
    </svg>;
}

// --- Styles ---

const BAR_WIDTH = spacingVars['--spacing-1'];

/**
 * How much of itself a connector gives up where it meets the indicator, read
 * from the public `--step-connector-gap` declared on the Stepper root.
 *
 * Clipped, not padded. The gap has to apply to two layers — the track, which is
 * the segment's own background, and the accent fill, which is an absolutely
 * placed `::before`. Spending it on each separately meant two declarations on
 * two boxes: a percentage then resolved against a different containing block
 * for each and stopped them ~1.2px apart. `clip-path` is ONE declaration on the
 * segment that clips the element and its pseudo-element together, against one
 * reference box — so every accepted value behaves the same way on both layers,
 * which is what a public input owes its full value domain.
 *
 * Clipping also cannot change layout: the segment keeps its box, so the node it
 * positions cannot move and the Stepper cannot grow. A raw `1rem` padding grew
 * a 180px stepper to 240px.
 *
 * Still clamped, because the value arrives with nothing in between to reject
 * it. Both halves earn their place, and not for the reasons padding needed:
 *
 * - `max(0px, …)` — `inset()` ACCEPTS a negative length. Chromium computes
 *   `inset(0 0 -4px 0)` as-is rather than dropping it, which is the opposite
 *   of padding (there CSS clamps a negative to `0` for you). This normalises
 *   it to `0` so a negative gap means "no gap" rather than a clip rect
 *   stretched outside the segment's own box.
 * - `min(…, --spacing-2)` — the flexible segment's own `min-height`, so an
 *   oversized gap leaves a short track rather than an unbounded one.
 *
 * The Stepper root explicitly inherits the property, so a horizontal Stepper
 * can receive a consumer value (or its 0px default) from the styled frame while
 * a theme can still set the property directly on the `stepper` target. The
 * use-site fallback supplies the same default to an unframed vertical Stepper.
 */
const CONNECTOR_GAP = `max(0px, min(var(--step-connector-gap, 0px), ${spacingVars['--spacing-2']}))`;

// 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: string, factor: number): string {
  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 as const
  },
  verticalBar: {
    kzqmXN: "xx9zwd3",
    kaIpWk: "xjspbzw",
    kmuXW: "x2lah0s",
    kSGwAc: "xkh2ocl",
    $$css: true as const
  },
  horizontalStep: {
    k1xSpc: "x78zum5",
    kXwgrk: "xdt5ytf",
    kGNEyG: "x1qjc9v5",
    kUk6DE: "x98rzlu",
    k7Eaqz: "xeuugli",
    $$css: true as const
  },
  horizontalBar: {
    kzqmXN: "xh8yej3",
    kZKoxP: "x11c6zpc",
    kaIpWk: "xjspbzw",
    kmuXW: "x2lah0s",
    k1K539: "xlstkdb",
    $$css: true as const
  },
  connectorTrack: {
    kVAEAm: "x1n2onr6",
    kWkggS: "x1m4xfpy",
    kgeoSG: "x1cpjm7i",
    kEoFBp: "x1hmns74",
    kFcpXp: "xxx281p",
    kPB484: "xxyica1",
    kLkRvE: "x1tzqye7",
    k7KCAZ: "x1hu8v7x",
    kKXxxB: "xuhr57t x13sdc92",
    kqUdNP: "xyt8op7",
    $$css: true as const
  },
  connectorTiming: (duration: string, delay: string) => [_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 as const
  },
  connectorEmptyV: {
    kEdqc7: "x1fgylwi",
    kcTAPf: "xb5f74o",
    $$css: true as const
  },
  connectorFillH: {
    kEdqc7: "xgu12d xdq8fwl",
    kcTAPf: "xp1ps4y",
    $$css: true as const
  },
  connectorEmptyH: {
    kEdqc7: "xgu12d xdq8fwl",
    kcTAPf: "x1e8txe",
    $$css: true as const
  },
  icon: {
    k1xSpc: "x78zum5",
    kGNEyG: "x6s0dn4",
    kjj79g: "xl56j7k",
    kzqmXN: "x12xnipv",
    kZKoxP: "x6b6gus",
    kmuXW: "x2lah0s",
    $$css: true as const
  },
  iconCompleted: {
    kMwMTN: "xqwr325",
    $$css: true as const
  },
  iconInProgress: {
    kMwMTN: "xqwr325",
    $$css: true as const
  },
  iconNotStarted: {
    kMwMTN: "xv9yike",
    $$css: true as const
  },
  iconDisabled: {
    kMwMTN: "xqa6c3m",
    kSiTet: "xbyyjgo",
    $$css: true as const
  },
  iconAccent: {
    kMwMTN: "xqwr325",
    $$css: true as const
  },
  iconSuccess: {
    kMwMTN: "xtjic6",
    $$css: true as const
  },
  iconWarning: {
    kMwMTN: "xs3pv69",
    $$css: true as const
  },
  iconError: {
    kMwMTN: "xjt36v0",
    $$css: true as const
  },
  numberBadge: {
    k1xSpc: "xrvj5dj",
    kgQiWS: "x1ku5rj1",
    kzqmXN: "x12xnipv",
    kZKoxP: "x6b6gus",
    kaIpWk: "xjspbzw",
    kGuDYH: "x51wmvv",
    k63SB2: "x2mo6ok",
    kmuXW: "x2lah0s",
    k9WMMc: "x2b8uid",
    $$css: true as const
  },
  numberCompleted: {
    kWkggS: "x1ewilqj",
    kMwMTN: "xrkvqaz",
    $$css: true as const
  },
  numberInProgress: {
    kWkggS: "x1ewilqj",
    kMwMTN: "xrkvqaz",
    $$css: true as const
  },
  numberNotStarted: {
    kWkggS: "xwmxj5m",
    kMwMTN: "xv1l7n4",
    $$css: true as const
  },
  numberDisabled: {
    kWkggS: "xwmxj5m",
    kMwMTN: "xnbbluu",
    kSiTet: "xbyyjgo",
    $$css: true as const
  },
  numberAccent: {
    kWkggS: "x1ewilqj",
    kMwMTN: "x17wrial",
    $$css: true as const
  },
  numberSuccess: {
    kWkggS: "xdsz4j9",
    kMwMTN: "xri61p4",
    $$css: true as const
  },
  numberWarning: {
    kWkggS: "x1q8g9m5",
    kMwMTN: "xrebv38",
    $$css: true as const
  },
  numberError: {
    kWkggS: "x1pjz0fi",
    kMwMTN: "x1m024r3",
    $$css: true as const
  },
  label: {
    kGuDYH: "xjm74w1",
    kLWn49: "xw6l6zx",
    k63SB2: "x1sodnla",
    kMwMTN: "x1tgivj0",
    k7Eaqz: "xeuugli",
    khDVqt: "xuxw1ft",
    kVQacm: "xb3r6kr",
    kg5iWk: "xlyipyv",
    $$css: true as const
  },
  labelInProgress: {
    k63SB2: "x2mo6ok",
    $$css: true as const
  },
  labelNotStarted: {
    kMwMTN: "xv1l7n4",
    $$css: true as const
  },
  labelDisabled: {
    kMwMTN: "xnbbluu",
    $$css: true as const
  },
  stepContent: {
    kLKAdn: "x1xye8es",
    $$css: true as const
  },
  contentIndent: (inlinePad: string, gutter: string) => [_temp2, {
    kwRFfy: inlinePad != null ? "x120eax6" : inlinePad,
    $$css: true as const
  }, {
    "--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 as const
  },
  densityBalanced: {
    k8WAf4: "xce4md1",
    $$css: true as const
  },
  densitySpacious: {
    k8WAf4: "x8o8v82",
    $$css: true as const
  },
  densityInline: (value: string) => [{
    kg3NbH: value != null ? "x30g6up" : value,
    $$css: true as const
  }, {
    "--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",
    $$css: true as const
  },
  otVerticalRoot: {
    k1xSpc: "x78zum5",
    kXwgrk: "xdt5ytf",
    kVAEAm: "x1n2onr6",
    $$css: true as const
  },
  otHorizontalRoot: {
    k1xSpc: "x78zum5",
    kXwgrk: "xdt5ytf",
    kUk6DE: "x98rzlu",
    k7Eaqz: "xeuugli",
    $$css: true as const
  },
  otInteractive: {
    kB7OPa: "x9f619",
    k9WMMc: "x1yc453h",
    kkrTdU: "x1ypdohk x16khyan",
    kaIpWk: "xh6dtrn",
    k1ekBW: "x15406qy",
    kIyJzY: "xkvfbh3 x12w9bfk",
    kAMwcw: "xlr8y92",
    kWkggS: "xjbqb8w",
    $$css: true as const
  },
  otRowWrap: {
    k1xSpc: "x78zum5",
    kXwgrk: "x1q0g3np",
    kGNEyG: "x1qjc9v5",
    kOIVth: "x1txdalj",
    kzqmXN: "xh8yej3",
    $$css: true as const
  },
  otColWrap: {
    k1xSpc: "x78zum5",
    kXwgrk: "xdt5ytf",
    kGNEyG: "x1qjc9v5",
    kzqmXN: "xh8yej3",
    $$css: true as const
  },
  otIndicatorColV: {
    k1xSpc: "x78zum5",
    kXwgrk: "xdt5ytf",
    kGNEyG: "x6s0dn4",
    kzqmXN: "x12xnipv",
    kmuXW: "x2lah0s",
    kSGwAc: "xkh2ocl",
    $$css: true as const
  },
  otSegBaseV: {
    kzqmXN: "xx9zwd3",
    kmuXW: "x2lah0s",
    kaIpWk: "x2u8bby",
    $$css: true as const
  },
  otSegGapLeadV: {
    kz4h6p: "x1yxrbr4",
    $$css: true as const
  },
  otSegGapRailV: {
    kz4h6p: "x1eyou77",
    $$css: true as const
  },
  otSegGapLeadH: {
    kz4h6p: "x17qoqre x153f7d5",
    $$css: true as const
  },
  otSegGapRailH: {
    kz4h6p: "x13hy1yx x7cmjge",
    $$css: true as const
  },
  otSegFlexV: {
    kUk6DE: "x98rzlu",
    kAzted: "x175cymr",
    $$css: true as const
  },
  otSegLeadV: (value: string) => [{
    kZKoxP: value != null ? "x16ye13r" : value,
    $$css: true as const
  }, {
    "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(value)
  }],
  otSegH: {
    kZKoxP: "x11c6zpc",
    kUk6DE: "x98rzlu",
    k7Eaqz: "x18ki04u",
    kaIpWk: "x2u8bby",
    $$css: true as const
  },
  otSegHiddenIfFirst: {
    k33iCy: "xnpuxes x5um2zc",
    $$css: true as const
  },
  otSegHiddenIfLast: {
    k33iCy: "xnpuxes x1se5z8o",
    $$css: true as const
  },
  otLabelWrapH: {
    k1xSpc: "x78zum5",
    kXwgrk: "xdt5ytf",
    kGNEyG: "x1qjc9v5",
    kOIVth: "x1lsbc85",
    k9WMMc: "x2b8uid",
    $$css: true as const
  },
  otContent: {
    kLKAdn: "x1xye8es",
    $$css: true as const
  },
  otContentSegV: (inlinePad: string) => [_temp3, {
    "--x-insetInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`calc(${inlinePad} + (${INDICATOR_SIZE} - ${BAR_WIDTH}) / 2)`)
  }],
  otRowPadV: (value: string) => [{
    k8WAf4: value != null ? "x1giekp1" : value,
    kg3NbH: value != null ? "x30g6up" : value,
    $$css: true as const
  }, {
    "--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: string) => [_temp4, {
    "--x-marginBlock": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`calc(-1 * ${value})`)
  }],
  otPadBlock: (value: string) => [{
    k8WAf4: value != null ? "x1giekp1" : value,
    $$css: true as const
  }, {
    "--x-paddingBlock": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(value)
  }],
  otMarginTop: (value: string) => [_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
}: StepProps) {
  const t = useTranslator();
  const ctx = useStepperInternalContext();
  const {
    activeStep,
    previousActiveStep,
    orientation,
    onStepClick,
    density: ctxDensity,
    indicatorPosition,
    registerStep,
    isCompact,
    summarySlot
  } = ctx;

  // Register this step index with the parent Stepper, which uses the tally to
  // warn about duplicate indices and work out how much width each step gets.
  // The optional getter keeps disabled state owned by this Step while compact
  // navigation can read its latest registration.
  //
  // A layout effect, not an effect: the width each step has is the stepper's
  // width divided by this count, so a stepper narrow enough to collapse can
  // only know it once every step is counted. Running after paint would show
  // the full stepper for a frame and then snap it shut.
  useLayoutEffect(() => registerStep(step, {
    getIsDisabled: () => isDisabled
  }), [registerStep, step, isDisabled]);
  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: StepIndicatorPreset = isCustomIndicator ? 'auto' : indicatorProp as StepIndicatorPreset | undefined ?? 'auto';

  // Internal progress, derived from the parent's activeStep. This is NOT the
  // public `status` prop — `status` controls semantic color only.
  const progress: 'completed' | 'in-progress' | 'not-started' = step === activeStep ? 'in-progress' : step < activeStep ? 'completed' : 'not-started';
  const isVertical = orientation === 'vertical';
  const isActive = progress === 'in-progress';
  // A compact horizontal stepper moves navigation to the named controls in its
  // summary row. Its track — including the on-track indicators — stays purely
  // presentational so it does not expose a second, denser set of click targets.
  const isClickable = !isDisabled && onStepClick != null && !isCompact;
  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: number, offset: number, share: number) => {
    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: ReactNode = 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: 'success' | 'warning' | 'error' | null = 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 = <div aria-hidden="true" {...mergeProps(themeProps('step-indicator', {
        progress,
        status: status ?? undefined
      }), stylex.props(styles.numberBadge, numberColorStyle))}>
          {step + 1}
        </div>;
    } else {
      // Priority: explicit custom icon → status glyph (non-current steps) →
      // progress-derived default (check when completed, ring when current).
      const iconContent: ReactNode = customIcon != null ? customIcon : statusGlyph === 'success' ? <Icon icon="success" size="sm" color={isDisabled ? 'disabled' : 'success'} /> : statusGlyph === 'warning' ? <Icon icon="warning" size="sm" color={isDisabled ? 'disabled' : 'warning'} /> : statusGlyph === 'error' ? <Icon icon="error" size="sm" color={isDisabled ? 'disabled' : 'error'} /> : progress === 'completed' ? <CheckCircleIcon /> : <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 = <div aria-hidden="true" {...mergeProps(themeProps('step-indicator', {
        progress,
        status: status ?? undefined
      }), stylex.props(styles.icon, iconColorStyle))}>
          {iconContent}
        </div>;
    }
  }

  // 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: string | null = 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) ? <VisuallyHidden>{statusText}</VisuallyHidden> : 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;

  // Both text parts carry {progress, status}, the phase vocabulary of
  // `step-indicator` above. The label additionally owns Stepper's disabled
  // paint, so it alone carries disabled below.
  const labelThemeProps = themeProps('step-label', {
    progress,
    status: status ?? undefined,
    // The label owns Stepper's disabled paint (`styles.labelDisabled` above),
    // so it owns the selector too. The description does not change under
    // disabled and deliberately keeps the smaller {progress, status} surface.
    disabled: isDisabled ? 'disabled' : null
  });
  const descriptionThemeProps = themeProps('step-description', {
    progress,
    status: status ?? undefined
  });

  // Indicator + Label row. In compact on-track mode the indicator remains
  // visible on the rail, so the summary reuses this row without drawing the
  // active indicator a second time beside the label.
  const iconLabelNode = <div className="x78zum5 x1q0g3np x6s0dn4 x1txdalj xeuugli">
      {(!isCompact || indicatorPosition !== 'on-track') && indicatorNode}
      <span {...mergeProps(labelThemeProps, stylex.props(styles.label, labelColorStyle))}>
        {label}
      </span>
      {statusTextNode}
      {isOptional && <>
          <span className="xjm74w1 xv1l7n4">•</span>
          <span className="xjm74w1 xv1l7n4">
            {t('@astryx.step.optional')}
          </span>
        </>}
      {endContent}
    </div>;
  const descriptionNode = isRenderable(description) ? <div {...{
    0: {
      className: "x18gyask"
    },
    1: {
      className: "x31w388"
    }
  }[Number(!!hasIndicator) << 0]}>
      <span {...mergeProps(descriptionThemeProps, {
      className: "x1lliihq x141an7d x1ojctns xv1l7n4"
    })}>
        {description}
      </span>
    </div> : null;

  // Compact horizontal layouts hide public step content without unmounting it,
  // so local state survives as the container crosses the threshold.
  const contentNode = isRenderable(children) ? <div hidden={isCompact || undefined} {...stylex.props(styles.stepContent, styles.contentIndent(separatedDensityInline, hasIndicator ? INDICATOR_GUTTER : '0px'))}>
      {children}
    </div> : null;

  // Theme data attributes reflect progress + optional semantic status.
  const stepThemeProps = themeProps('step', {
    progress,
    status: status ?? undefined
  });

  // ======= SUMMARY: this step, drawn below a collapsed track =======
  //
  // Only the current step draws one, into a row the stepper owns and keeps
  // outside the `<ol>` — so the list is left with exactly the children it was
  // given, and the on-track connectors go on reading their own
  // `:first-child`/`:last-child` position to decide which caps to hide.
  //
  // Rendered here rather than handed up as data because it reuses
  // `iconLabelNode`: indicator resolution, status glyphs, completed checks,
  // disabled tints, and the compact on-track rule above stay in one place. The
  // description is re-wrapped, though — the row version indents itself under
  // an indicator, and centred under a track there is nothing to line it up with.
  const summaryNode = isCompact && isActive && summarySlot != null ? createPortal(<div {...mergeProps(stepThemeProps, {
    className: "x6s0dn4 x78zum5 xdt5ytf x1lsbc85 xeuugli"
  })}>
            {iconLabelNode}
            {isRenderable(description) ? <span className="x1lliihq x141an7d x1ojctns xv1l7n4">{description}</span> : null}
          </div>, summarySlot) : null;

  // Every compact step is presentational, including on-track indicators, so
  // each item restores its label and status as hidden text. The list stays a
  // complete ordered sequence with `aria-current` intact, while the summary row
  // below it owns the compact navigation controls and remains decorative apart
  // from those buttons.
  const compactNameNode = isCompact ? <>
      <VisuallyHidden>{label}</VisuallyHidden>
      {statusTextNode}
    </> : null;

  // ======= 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 = <div {...{
      0: {
        className: "x78zum5 x1q0g3np x6s0dn4 xl56j7k x1a02dak xzye2dw"
      },
      1: {
        className: "x78zum5 x1q0g3np x6s0dn4 x1txdalj"
      }
    }[Number(!!isVertical) << 0]}>
        <span {...mergeProps(labelThemeProps, stylex.props(styles.label, labelColorStyle))}>
          {label}
        </span>
        {statusTextNode}
        {isOptional && <>
            <span className="xjm74w1 xv1l7n4">•</span>
            <span className="xjm74w1 xv1l7n4">
              {t('@astryx.step.optional')}
            </span>
          </>}
        {endContent}
      </div>;
    const otDescriptionNode = isRenderable(description) ? <span {...mergeProps(descriptionThemeProps, {
      className: "x1lliihq x141an7d x1ojctns xv1l7n4"
    })}>
        {description}
      </span> : null;
    const otContentNode = !isRenderable(children) ? null : isVertical ? <div className="x1n2onr6">
        <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))} />
        <div {...stylex.props(styles.otContent, styles.contentIndent(densitySpace, INDICATOR_GUTTER))}>
          {children}
        </div>
      </div> : <div hidden={isCompact || undefined} className="x1xye8es">
        {children}
      </div>;
    if (isVertical) {
      const inner = <>
          <div {...stylex.props(styles.otIndicatorColV, styles.otRailBridgeV(densitySpace))}>
            <div aria-hidden="true" {...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegLeadV(densitySpace), styles.connectorTrack, hasIndicator && styles.otSegGapLeadV, beforeSegStyle, beforeTiming, styles.otSegHiddenIfFirst))} />
            {indicatorNode}
            <div aria-hidden="true" {...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegFlexV, styles.connectorTrack, hasIndicator && styles.otSegGapRailV, afterSegStyle, railTiming, styles.otSegHiddenIfLast))} />
          </div>
          <div className="x78zum5 xdt5ytf x1nhvcw1 x98rzlu x1lsbc85 xeuugli">
            {labelLineNode}
            {otDescriptionNode}
          </div>
        </>;
      return <li ref={ref} {...mergeProps(stepThemeProps, stylex.props(stepMarker, styles.otVerticalRoot, xstyle), className, style)} aria-current={isActive ? 'step' : undefined} data-testid={dataTestId} {...rest}>
          {isClickable ? <button type="button" onClick={handleClick} aria-label={stepAriaLabel} {...stylex.props(styles.otInteractive, interactionOverlayStyles.backgroundColor, styles.otRowWrap, styles.otRowPadV(densitySpace), focusOutlineStyles.focusVisible)}>
              {inner}
            </button> : <div {...stylex.props(styles.otRowWrap, styles.otRowPadV(densitySpace))}>
              {inner}
            </div>}
          {otContentNode}
        </li>;
    }

    // Horizontal on-track
    const innerH = <>
        <div className="x78zum5 x1q0g3np x6s0dn4 xh8yej3">
          <div aria-hidden="true" {...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, hasIndicator && styles.otSegGapLeadH, beforeSegStyle, beforeTiming, styles.otSegHiddenIfFirst))} />
          {indicatorNode}
          <div aria-hidden="true" {...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, styles.connectorTrack, hasIndicator && styles.otSegGapRailH, afterSegStyle, railTiming, styles.otSegHiddenIfLast))} />
        </div>
        {/* The on-track indicator remains visible as a node on the rail at
            compact widths, but the wrapper becomes presentational with its
            label. Navigation moves to the named controls in the summary row. */}
        {!isCompact && <div {...stylex.props(styles.otLabelWrapH, styles.otMarginTop(densitySpace))}>
            {labelLineNode}
            {otDescriptionNode}
          </div>}
      </>;
    return <li ref={ref} {...mergeProps(stepThemeProps, stylex.props(stepMarker, styles.otHorizontalRoot, xstyle), className, style)} aria-current={isActive ? 'step' : undefined} data-testid={dataTestId} {...rest}>
        {isClickable ? <button type="button" onClick={handleClick} aria-label={stepAriaLabel} {...stylex.props(styles.otInteractive, interactionOverlayStyles.backgroundColor, styles.otColWrap, styles.otPadBlock(densitySpace), focusOutlineStyles.focusVisible)}>
            {innerH}
          </button> : <div {...stylex.props(styles.otColWrap, styles.otPadBlock(densitySpace))}>
            {innerH}
          </div>}
        {compactNameNode}
        {otContentNode}
        {summaryNode}
      </li>;
  }

  // ======= VERTICAL =======
  if (isVertical) {
    return <li ref={ref} {...mergeProps(stepThemeProps, stylex.props(stepMarker, styles.verticalRoot, xstyle), className, style)} aria-current={isActive ? 'step' : undefined} data-testid={dataTestId} {...rest}>
        {/* 4px progress bar */}
        <div {...mergeProps(themeProps('step-bar'), stylex.props(styles.verticalBar, styles.connectorTrack, isBarFilled ? styles.connectorFillV : styles.connectorEmptyV, barTiming))} aria-hidden="true" />
        {/* Body: button wraps only label area, children render outside */}
        <div className="x78zum5 xdt5ytf x98rzlu">
          {isClickable ? <button type="button" onClick={handleClick} aria-label={stepAriaLabel} {...stylex.props(styles.buttonReset, interactionOverlayStyles.backgroundColor, focusOutlineStyles.focusVisible, density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline))}>
              {iconLabelNode}
              {descriptionNode}
            </button> : <div {...stylex.props(density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline))}>
              {iconLabelNode}
              {descriptionNode}
            </div>}
          {contentNode}
        </div>
      </li>;
  }

  // ======= HORIZONTAL =======
  return <li ref={ref} {...mergeProps(stepThemeProps, stylex.props(stepMarker, styles.horizontalStep, xstyle), className, style)} aria-current={isActive ? 'step' : undefined} data-testid={dataTestId} {...rest}>
      {/* 4px progress bar segment for this step */}
      <div {...mergeProps(themeProps('step-bar'), stylex.props(styles.horizontalBar, styles.connectorTrack, isBarFilled ? styles.connectorFillH : styles.connectorEmptyH, barTiming))} aria-hidden="true" />
      {/* The click target goes with the label, deliberately. A step narrow
          enough to lose its label is narrow enough that all that would be left
          to press is a 4px bar; the stepper puts a pair of named controls
          under the track instead. */}
      {isCompact ? compactNameNode : isClickable ? <button type="button" onClick={handleClick} aria-label={stepAriaLabel} {...stylex.props(styles.buttonReset, interactionOverlayStyles.backgroundColor, focusOutlineStyles.focusVisible, density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline))}>
          {iconLabelNode}
          {descriptionNode}
        </button> : <div {...stylex.props(density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious, styles.densityInline(separatedDensityInline))}>
          {iconLabelNode}
          {descriptionNode}
        </div>}
      {contentNode}
      {summaryNode}
    </li>;
}
Step.displayName = 'Step';