@astryxdesign/lab 0.3.0-canary.e9fc2bb → 0.3.0-canary.ee705d8

package/dist/RichTextEditor/RichTextEditorAutoLinkPlugin.d.ts

@@ -71,7 +71,6 @@ export interface RichTextEditorAutoLinkPluginProps {
  * @example
  * ```
  * import {RichTextEditor, RichTextEditorAutoLinkPlugin} from '@astryxdesign/lab';
- *
  * <RichTextEditor
  *   label="Notes"
  *   plugins={<RichTextEditorAutoLinkPlugin />}

package/dist/RichTextEditor/RichTextEditorAutoLinkPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditorAutoLinkPlugin.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditorAutoLinkPlugin.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,sCAAsC,CAAC;AAG9C;;;;GAIG;AACH,eAAO,MAAM,uBAAuB;;;CAG1B,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAc9C,CAAC;AAEF,MAAM,WAAW,iCAAiC;IAChD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjE;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAgC,EAChC,QAAQ,GACT,EAAE,iCAAiC,+BAEnC;yBALe,4BAA4B"}
+{"version":3,"file":"RichTextEditorAutoLinkPlugin.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditorAutoLinkPlugin.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,sCAAsC,CAAC;AAG9C;;;;GAIG;AACH,eAAO,MAAM,uBAAuB;;;CAG1B,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAc9C,CAAC;AAEF,MAAM,WAAW,iCAAiC;IAChD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAgC,EAChC,QAAQ,GACT,EAAE,iCAAiC,+BAEnC;yBALe,4BAA4B"}

package/dist/RichTextEditor/RichTextEditorAutoLinkPlugin.js

@@ -76,7 +76,6 @@ export const DEFAULT_LINK_MATCHERS = [text => {
  * @example
  * ```
  * import {RichTextEditor, RichTextEditorAutoLinkPlugin} from '@astryxdesign/lab';
- *
  * <RichTextEditor
  *   label="Notes"
  *   plugins={<RichTextEditorAutoLinkPlugin />}

package/dist/Schedule/useCurrentTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCurrentTime.d.ts","sourceRoot":"","sources":["../../src/Schedule/useCurrentTime.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,SAAS,CAAC;AAmCrC,wBAAgB,cAAc,IAAI,OAAO,CAExC"}
+{"version":3,"file":"useCurrentTime.d.ts","sourceRoot":"","sources":["../../src/Schedule/useCurrentTime.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,SAAS,CAAC;AAqCrC,wBAAgB,cAAc,IAAI,OAAO,CAExC"}

package/dist/Schedule/useCurrentTime.js

@@ -25,6 +25,8 @@ function getServerSnapshot() {
 function subscribe(listener) {
   listeners.add(listener);
   if (interval == null) {
+    // The module may have loaded long before Schedule mounted.
+    currentTime = Date.now();
     interval = setInterval(() => {
       currentTime = Date.now();
       listeners.forEach(activeListener => activeListener());

package/dist/Stepper/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAarC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAMlD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAwdD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BAylBX;yBA3mBe,IAAI"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAarC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAOlD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAsgBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BA0nBX;yBA5oBe,IAAI"}

package/dist/Stepper/Step.js

@@ -24,6 +24,8 @@ import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import { useTranslator } from '@astryxdesign/core/i18n';
 import { useStepperContext } from "./StepperContext.js";
 import { themeProps } from '@astryxdesign/core/utils';
+import "./stepper.stylex.js";
+import { stepMarker } from "./stepper.stylex.js";
 
 /**
  * Built-in indicator presets. Anything other than these strings passed to
@@ -37,10 +39,26 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // --- Default progress icons (16px) ---
 //
 // The `completed` progress state and the current-step ring are drawn as local
-// glyphs: `completed` is a filled circle-check (a distinct "progress done"
-// mark), deliberately different from the semantic `success` status — which
-// defers to the themed Icon registry (an outline check). `warning` / `error`
-// statuses also defer to the themed registry so they share one visual language.
+// <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() {
@@ -163,7 +181,7 @@ const styles = {
     kzqmXN: "xfyiiit",
     kZKoxP: "x1grt7ep",
     kaIpWk: "xjspbzw",
-    kGuDYH: "x1k6wstc",
+    kGuDYH: "x141an7d",
     kGO01o: "x1j85h84",
     k63SB2: "x2mo6ok",
     kLWn49: "xo5v014",
@@ -231,6 +249,10 @@ const styles = {
     kMwMTN: "xnbbluu",
     $$css: true
   },
+  labelCollapsible: {
+    k1xSpc: "x1lliihq x1wzf6n4",
+    $$css: true
+  },
   descriptionRow: {
     kZCmMZ: "x18gyask",
     $$css: true
@@ -279,7 +301,7 @@ const styles = {
     kkrTdU: "x1ypdohk",
     kaIpWk: "xh6dtrn",
     k1ekBW: "x15406qy",
-    kIyJzY: "xkvfbh3",
+    kIyJzY: "xkvfbh3 x12w9bfk",
     kAMwcw: "xlr8y92",
     kWkggS: "xjbqb8w xe9uy6x xyxi2l3",
     $$css: true
@@ -332,8 +354,12 @@ const styles = {
     kaIpWk: "x2u8bby",
     $$css: true
   },
-  otSegHidden: {
-    k33iCy: "xlshs6z",
+  otSegHiddenIfFirst: {
+    k33iCy: "xnpuxes x1rmeqbc",
+    $$css: true
+  },
+  otSegHiddenIfLast: {
+    k33iCy: "xnpuxes xehs70j",
     $$css: true
   },
   lineFilled: {
@@ -423,7 +449,7 @@ export function Step({
     onStepClick,
     density: ctxDensity,
     indicatorPosition,
-    stepCount
+    hasCollapsibleLabels
   } = ctx;
   const density = densityProp ?? ctxDensity;
 
@@ -436,6 +462,11 @@ export function Step({
   const progress = step === activeStep ? 'in-progress' : step < activeStep ? 'completed' : 'not-started';
   const isVertical = orientation === 'vertical';
   const isActive = progress === 'in-progress';
+  // Non-current step labels collapse only when the stepper opted in, the layout
+  // is horizontal (width-constrained), and this step is not the current one —
+  // the current step always keeps its label. The actual hide is a container
+  // query on the label element (styles.labelCollapsible).
+  const collapseLabel = hasCollapsibleLabels && !isVertical && !isActive;
   // 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;
@@ -479,7 +510,10 @@ export function Step({
       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",
-        ...stylex.props(styles.numberBadge, numberColorStyle),
+        ...mergeProps(themeProps('step-indicator', {
+          progress,
+          status: status ?? undefined
+        }), stylex.props(styles.numberBadge, numberColorStyle)),
         children: step + 1
       });
     } else {
@@ -505,7 +539,10 @@ export function Step({
       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",
-        ...stylex.props(styles.icon, iconColorStyle),
+        ...mergeProps(themeProps('step-indicator', {
+          progress,
+          status: status ?? undefined
+        }), stylex.props(styles.icon, iconColorStyle)),
         children: iconContent
       });
     }
@@ -544,7 +581,7 @@ export function Step({
       className: "x78zum5 x1q0g3np x6s0dn4 x1txdalj"
     },
     children: [indicatorNode, /*#__PURE__*/_jsx("span", {
-      ...stylex.props(styles.label, labelColorStyle),
+      ...stylex.props(styles.label, labelColorStyle, collapseLabel && styles.labelCollapsible),
       children: label
     }), statusTextNode, isOptional && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("span", {
@@ -590,9 +627,10 @@ export function Step({
     const afterFilled = step < activeStep;
     const beforeSegStyle = beforeFilled ? styles.lineFilled : styles.lineUnfilled;
     const afterSegStyle = afterFilled ? styles.lineFilled : styles.lineUnfilled;
-    const isFirst = step === 0;
-    // The last step has no next node, so its trailing segment is hidden.
-    const isLast = step === stepCount - 1;
+    // 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.
+
     const densitySpace = density === 'compact' ? spacingVars['--spacing-1'] : density === 'spacious' ? spacingVars['--spacing-3'] : spacingVars['--spacing-2'];
     const labelLineNode = /*#__PURE__*/_jsxs("div", {
       ...{
@@ -604,7 +642,7 @@ export function Step({
         }
       }[!!isVertical << 0],
       children: [/*#__PURE__*/_jsx("span", {
-        ...stylex.props(styles.label, labelColorStyle),
+        ...stylex.props(styles.label, labelColorStyle, collapseLabel && styles.labelCollapsible),
         children: label
       }), statusTextNode, isOptional && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx("span", {
@@ -643,10 +681,10 @@ export function Step({
           ...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), beforeSegStyle, isFirst && styles.otSegHidden))
+            ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegLeadV(densitySpace), beforeSegStyle, styles.otSegHiddenIfFirst))
           }), indicatorNode, /*#__PURE__*/_jsx("div", {
             "aria-hidden": "true",
-            ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegFlexV, afterSegStyle, isLast && styles.otSegHidden))
+            ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegBaseV, styles.otSegFlexV, afterSegStyle, styles.otSegHiddenIfLast))
           })]
         }), /*#__PURE__*/_jsxs("div", {
           ...{
@@ -657,7 +695,7 @@ export function Step({
       });
       return /*#__PURE__*/_jsxs("li", {
         ref: ref,
-        ...mergeProps(stepThemeProps, stylex.props(styles.otVerticalRoot, xstyle), className, style),
+        ...mergeProps(stepThemeProps, stylex.props(stepMarker, styles.otVerticalRoot, xstyle), className, style),
         "aria-current": isActive ? 'step' : undefined,
         "data-testid": dataTestId,
         ...rest,
@@ -682,10 +720,10 @@ export function Step({
         },
         children: [/*#__PURE__*/_jsx("div", {
           "aria-hidden": "true",
-          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, beforeSegStyle, isFirst && styles.otSegHidden))
+          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, beforeSegStyle, styles.otSegHiddenIfFirst))
         }), indicatorNode, /*#__PURE__*/_jsx("div", {
           "aria-hidden": "true",
-          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, afterSegStyle, isLast && styles.otSegHidden))
+          ...mergeProps(themeProps('step-connector'), stylex.props(styles.otSegH, afterSegStyle, styles.otSegHiddenIfLast))
         })]
       }), /*#__PURE__*/_jsxs("div", {
         ...stylex.props(styles.otLabelWrapH, styles.otMarginTop(densitySpace)),
@@ -694,7 +732,7 @@ export function Step({
     });
     return /*#__PURE__*/_jsxs("li", {
       ref: ref,
-      ...mergeProps(stepThemeProps, stylex.props(styles.otHorizontalRoot, xstyle), className, style),
+      ...mergeProps(stepThemeProps, stylex.props(stepMarker, styles.otHorizontalRoot, xstyle), className, style),
       "aria-current": isActive ? 'step' : undefined,
       "data-testid": dataTestId,
       ...rest,
@@ -715,7 +753,7 @@ export function Step({
   if (isVertical) {
     return /*#__PURE__*/_jsxs("li", {
       ref: ref,
-      ...mergeProps(stepThemeProps, stylex.props(styles.verticalRoot, xstyle), className, style),
+      ...mergeProps(stepThemeProps, stylex.props(stepMarker, styles.verticalRoot, xstyle), className, style),
       "aria-current": isActive ? 'step' : undefined,
       "data-testid": dataTestId,
       ...rest,
@@ -739,28 +777,28 @@ export function Step({
           "aria-label": stepAriaLabel,
           ...{
             0: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
             },
             4: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xu0wf1k xf314gf"
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xu0wf1k xf314gf"
             },
             2: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
             },
             6: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
             },
             1: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
             },
             5: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
             },
             3: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
             },
             7: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
             }
           }[!!(density === 'compact') << 2 | !!(density === 'balanced') << 1 | !!(density === 'spacious') << 0],
           children: [iconLabelNode, descriptionNode]
@@ -798,7 +836,7 @@ export function Step({
   // ======= HORIZONTAL =======
   return /*#__PURE__*/_jsxs("li", {
     ref: ref,
-    ...mergeProps(stepThemeProps, stylex.props(styles.horizontalStep, xstyle), className, style),
+    ...mergeProps(stepThemeProps, stylex.props(stepMarker, styles.horizontalStep, xstyle), className, style),
     "aria-current": isActive ? 'step' : undefined,
     "data-testid": dataTestId,
     ...rest,
@@ -818,28 +856,28 @@ export function Step({
       "aria-label": stepAriaLabel,
       ...{
         0: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
         },
         4: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xu0wf1k xf314gf"
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xu0wf1k xf314gf"
         },
         2: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
         },
         6: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
         },
         1: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
         },
         5: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
         },
         3: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
         },
         7: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
+          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
         }
       }[!!(density === 'compact') << 2 | !!(density === 'balanced') << 1 | !!(density === 'spacious') << 0],
       children: [iconLabelNode, descriptionNode]

package/dist/Stepper/Stepper.d.ts

@@ -54,15 +54,26 @@ export interface StepperProps extends BaseProps<HTMLOListElement> {
      * @default 'separated'
      */
     indicatorPosition?: StepperIndicatorPosition;
+    /**
+     * Horizontal only. When the stepper gets too narrow to fit every label,
+     * collapse the labels of non-current steps so the track can shrink — only
+     * the current step keeps its visible label (the rest stay reachable via
+     * `aria-current` and the accessible names). Uses a container query, so it
+     * responds to the stepper's own width, not the viewport. No effect in the
+     * vertical orientation, where width is not the constraint.
+     * @default false
+     */
+    hasCollapsibleLabels?: boolean;
 }
 /**
  * A stepper component for multi-step workflows. Displays numbered steps
  * with visual indicators for completed, active, and upcoming states.
  *
  * Each Step child must provide a `step` prop (zero-based index) so it
- * can derive its state from the parent's activeStep. The parent supplies
- * the total `stepCount` via context so the on-track layout can hide the
- * trailing connector on the final step.
+ * can derive its state from the parent's activeStep. The on-track layout
+ * hides the leading connector on the first step and the trailing connector
+ * on the last step structurally, from each step's own `<li>` position, so
+ * it works regardless of how the steps are grouped.
  *
  * Rendered as an ordered list (`<ol>`/`<li>`) rather than a `nav`
  * landmark: a stepper communicates *progress through a sequence*, not a
@@ -80,7 +91,7 @@ export interface StepperProps extends BaseProps<HTMLOListElement> {
  * </Stepper>
  * ```
  */
-export declare function Stepper({ activeStep, children, orientation, onStepClick, label, density, indicatorPosition, xstyle, className, style, ref, ...rest }: StepperProps): import("react").JSX.Element;
+export declare function Stepper({ activeStep, children, orientation, onStepClick, label, density, indicatorPosition, hasCollapsibleLabels, xstyle, className, style, ref, ...rest }: StepperProps): import("react").JSX.Element;
 export declare namespace Stepper {
     var displayName: string;
 }

package/dist/Stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAKxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAE9B,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9C;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,CAAC;CAC9C;AAgCD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,QAAQ,EACR,WAA0B,EAC1B,WAAW,EACX,KAAkB,EAClB,OAAoB,EACpB,iBAA+B,EAC/B,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,YAAY,+BAkDd;yBA/De,OAAO"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,wBAAwB,EAE9B,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9C;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,CAAC;IAC7C;;;;;;;;OAQG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAuCD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,QAAQ,EACR,WAA0B,EAC1B,WAAW,EACX,KAAkB,EAClB,OAAoB,EACpB,iBAA+B,EAC/B,oBAA4B,EAC5B,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,YAAY,+BA0Dd;yBAxEe,OAAO"}

package/dist/Stepper/Stepper.js

@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/Stepper.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/Stepper/ (showcase blocks)
  */
-import { Children, useMemo } from 'react';
+import { useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { spacingVars } from '@astryxdesign/core/theme/tokens.stylex';
@@ -53,6 +53,11 @@ const styles = {
     kXwgrk: "xdt5ytf",
     kOIVth: "xxhr3t",
     $$css: true
+  },
+  labelCollapseContainer: {
+    k9g6sI: "x12h1iku",
+    kanfag: "x1hppuf3",
+    $$css: true
   }
 };
 
@@ -61,9 +66,10 @@ const styles = {
  * with visual indicators for completed, active, and upcoming states.
  *
  * Each Step child must provide a `step` prop (zero-based index) so it
- * can derive its state from the parent's activeStep. The parent supplies
- * the total `stepCount` via context so the on-track layout can hide the
- * trailing connector on the final step.
+ * can derive its state from the parent's activeStep. The on-track layout
+ * hides the leading connector on the first step and the trailing connector
+ * on the last step structurally, from each step's own `<li>` position, so
+ * it works regardless of how the steps are grouped.
  *
  * Rendered as an ordered list (`<ol>`/`<li>`) rather than a `nav`
  * landmark: a stepper communicates *progress through a sequence*, not a
@@ -89,13 +95,13 @@ export function Stepper({
   label = 'Progress',
   density = 'balanced',
   indicatorPosition = 'separated',
+  hasCollapsibleLabels = false,
   xstyle,
   className,
   style,
   ref,
   ...rest
 }) {
-  const stepCount = Children.count(children);
   const ctxValue = useMemo(() => ({
     activeStep,
     orientation,
@@ -103,10 +109,14 @@ export function Stepper({
     onStepClick: onStepClick ?? null,
     density,
     indicatorPosition,
-    stepCount
-  }), [activeStep, orientation, onStepClick, density, indicatorPosition, stepCount]);
+    hasCollapsibleLabels
+  }), [activeStep, orientation, onStepClick, density, indicatorPosition, hasCollapsibleLabels]);
   const isOnTrack = indicatorPosition === 'on-track';
   const orientationStyle = orientation === 'horizontal' ? isOnTrack ? styles.horizontalOnTrack : styles.horizontal : isOnTrack ? styles.verticalOnTrack : styles.vertical;
+
+  // Label collapse is a width constraint, so it only applies to the horizontal
+  // orientation; vertical steppers are never width-limited this way.
+  const isLabelCollapse = hasCollapsibleLabels && orientation === 'horizontal';
   return /*#__PURE__*/_jsx(StepperContext, {
     value: ctxValue,
     children: /*#__PURE__*/_jsx("ol", {
@@ -116,7 +126,7 @@ export function Stepper({
       ...mergeProps(themeProps('stepper', {
         orientation,
         indicatorPosition
-      }), stylex.props(styles.root, orientationStyle, xstyle), className, style),
+      }), stylex.props(styles.root, orientationStyle, isLabelCollapse && styles.labelCollapseContainer, xstyle), className, style),
       children: children
     })
   });

package/dist/Stepper/StepperContext.d.ts

@@ -15,13 +15,13 @@ export interface StepperContextValue {
     isNonLinear: boolean;
     onStepClick: ((index: number) => void) | null;
     density: StepperDensity;
+    indicatorPosition: StepperIndicatorPosition;
     /**
-     * Total number of Step children. Used by the on-track layout to hide the
-     * trailing connector segment on the last step (which otherwise has no next
-     * node to reach toward).
+     * Horizontal only. When true, non-current step labels collapse via a
+     * container query once the stepper is too narrow to fit them all, so the
+     * track can shrink. The current step keeps its label.
      */
-    stepCount: number;
-    indicatorPosition: StepperIndicatorPosition;
+    hasCollapsibleLabels: boolean;
 }
 export declare const StepperContext: import("react").Context<StepperContextValue | null>;
 export declare function useStepperContext(): StepperContextValue;

package/dist/Stepper/StepperContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepperContext.d.ts","sourceRoot":"","sources":["../../src/Stepper/StepperContext.ts"],"names":[],"mappings":"AAiBA,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEjE;;;;;;;GAOG;AACH,MAAM,MAAM,wBAAwB,GAAG,WAAW,GAAG,UAAU,CAAC;AAEhE,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9C,OAAO,EAAE,cAAc,CAAC;IACxB;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,wBAAwB,CAAC;CAC7C;AAED,eAAO,MAAM,cAAc,qDAAkD,CAAC;AAG9E,wBAAgB,iBAAiB,IAAI,mBAAmB,CASvD"}
+{"version":3,"file":"StepperContext.d.ts","sourceRoot":"","sources":["../../src/Stepper/StepperContext.ts"],"names":[],"mappings":"AAiBA,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEjE;;;;;;;GAOG;AACH,MAAM,MAAM,wBAAwB,GAAG,WAAW,GAAG,UAAU,CAAC;AAEhE,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,kBAAkB,CAAC;IAChC,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAC9C,OAAO,EAAE,cAAc,CAAC;IACxB,iBAAiB,EAAE,wBAAwB,CAAC;IAC5C;;;;OAIG;IACH,oBAAoB,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,cAAc,qDAAkD,CAAC;AAG9E,wBAAgB,iBAAiB,IAAI,mBAAmB,CASvD"}

package/dist/Stepper/stepper.stylex.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @file stepper.stylex.ts
+ * @input StyleX marker system
+ * @output stepMarker — a scoped marker applied to each Step's <li>
+ * @position Shared StyleX marker consumed by Step for structural selectors
+ *
+ * Applied to each Step's root `<li>` so the on-track connector segments can
+ * key their first/last-node visibility off `stylex.when.ancestor(':first-child'
+ * | ':last-child', stepMarker)` — matching only the parent step row, never the
+ * outer `<ol>`. This replaces counting children in the parent, so steps behave
+ * correctly regardless of how the consumer groups them (arrays, fragments).
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const stepMarker: ReturnType<typeof stylex.defineMarker>;
+//# sourceMappingURL=stepper.stylex.d.ts.map

package/dist/Stepper/stepper.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.stylex.d.ts","sourceRoot":"","sources":["../../src/Stepper/stepper.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C,eAAO,MAAM,UAAU,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CACvC,CAAC"}

package/dist/Stepper/stepper.stylex.js

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file stepper.stylex.ts
+ * @input StyleX marker system
+ * @output stepMarker — a scoped marker applied to each Step's <li>
+ * @position Shared StyleX marker consumed by Step for structural selectors
+ *
+ * Applied to each Step's root `<li>` so the on-track connector segments can
+ * key their first/last-node visibility off `stylex.when.ancestor(':first-child'
+ * | ':last-child', stepMarker)` — matching only the parent step row, never the
+ * outer `<ol>`. This replaces counting children in the parent, so steps behave
+ * correctly regardless of how the consumer groups them (arrays, fragments).
+ */
+
+import * as stylex from '@stylexjs/stylex';
+export const stepMarker = {
+  x1fcdk97: "x1fcdk97",
+  $$css: true
+};

package/dist/lab.css

@@ -321,6 +321,7 @@
   .xak3so:not(#\#):not(#\#):not(#\#){column-gap:var(--spacing-2)}
   .xewh9hi:not(#\#):not(#\#):not(#\#){column-gap:var(--spacing-3)}
   .x1w36mze:not(#\#):not(#\#):not(#\#){contain-intrinsic-height:auto 28px}
+  .x1hppuf3:not(#\#):not(#\#):not(#\#){container-name:astryx-stepper}
   .x63rumg:not(#\#):not(#\#):not(#\#){container-name:list-input}
   .x12h1iku:not(#\#):not(#\#):not(#\#){container-type:inline-size}
   .xb5mbof:not(#\#):not(#\#):not(#\#){content-visibility:auto}
@@ -350,7 +351,6 @@
   .x1c3i2sq:not(#\#):not(#\#):not(#\#){font-size:1.125rem}
   .x1603h9y:not(#\#):not(#\#):not(#\#){font-size:1.25rem}
   .xngnso2:not(#\#):not(#\#):not(#\#){font-size:1.5rem}
-  .x1k6wstc:not(#\#):not(#\#):not(#\#){font-size:10px}
   .x1jvydc1:not(#\#):not(#\#):not(#\#){font-size:15px}
   .xosj86m:not(#\#):not(#\#):not(#\#){font-size:18px}
   .xhs0kqb:not(#\#):not(#\#):not(#\#){font-size:var(--font-size-2xl)}
@@ -511,6 +511,7 @@
   .xxymvpz:not(#\#):not(#\#):not(#\#){vertical-align:middle}
   .xqwjeat:not(#\#):not(#\#):not(#\#){view-transition-name:var(--x-viewTransitionName)}
   .xlshs6z:not(#\#):not(#\#):not(#\#){visibility:hidden}
+  .xnpuxes:not(#\#):not(#\#):not(#\#){visibility:visible}
   .xuxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}
   .x126k92a:not(#\#):not(#\#):not(#\#){white-space:pre-wrap}
   .x1sdyfia:not(#\#):not(#\#):not(#\#){white-space:pre}
@@ -521,6 +522,8 @@
   .xfo81ep:not(#\#):not(#\#):not(#\#){z-index:1000}
   .x1355qak:not(#\#):not(#\#):not(#\#){z-index:20}
   .xr3buco:not(#\#):not(#\#):not(#\#){z-index:var(--x-zIndex)}
+  .x1rmeqbc.x1rmeqbc:where(.x1fcdk97:first-child *):not(#\#):not(#\#):not(#\#){visibility:hidden}
+  .xehs70j.xehs70j:where(.x1fcdk97:last-child *):not(#\#):not(#\#):not(#\#){visibility:hidden}
   .x7s97pk:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:2px}
   .x1df3fe5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translateX(-100%)}
   .xttggg:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}
@@ -540,6 +543,7 @@
   @container (max-width: 40rem){.x12eanku.x12eanku:not(#\#):not(#\#):not(#\#){border-inline-start-width:0}}
   @container list-input (max-width: 640px){.x1jiamoa.x1jiamoa:not(#\#):not(#\#):not(#\#){display:block}}
   @container list-input (max-width: 640px){.x12gktpv.x12gktpv:not(#\#):not(#\#):not(#\#){display:contents}}
+  @container astryx-stepper (max-width: 480px){.x1wzf6n4.x1wzf6n4:not(#\#):not(#\#):not(#\#){display:none}}
   @container (max-width: 40rem){.x1sp3fdr.x1sp3fdr:not(#\#):not(#\#):not(#\#){grid-template-columns:minmax(0,1fr)}}
   @container list-input (max-width: 640px){.x540v0d.x540v0d:not(#\#):not(#\#):not(#\#){grid-template-columns:minmax(0,1fr)}}
   @container list-input (max-width: 640px){.xrs5tkd.xrs5tkd:not(#\#):not(#\#):not(#\#){row-gap:var(--spacing-2)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.3.0-canary.e9fc2bb",
+  "version": "0.3.0-canary.ee705d8",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.3.0-canary.e9fc2bb",
+    "@astryxdesign/core": "0.3.0-canary.ee705d8",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "lexical": "^0.46.0",
@@ -66,7 +66,7 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.3.0-canary.e9fc2bb",
+    "@astryxdesign/cli": "0.3.0-canary.ee705d8",
     "@lexical/code": "^0.46.0",
     "@lexical/headless": "^0.46.0",
     "@lexical/html": "^0.46.0",

package/src/RichTextEditor/RichTextEditorAutoLinkPlugin.tsx

@@ -99,7 +99,6 @@ export interface RichTextEditorAutoLinkPluginProps {
  * @example
  * ```
  * import {RichTextEditor, RichTextEditorAutoLinkPlugin} from '@astryxdesign/lab';
- *
  * <RichTextEditor
  *   label="Notes"
  *   plugins={<RichTextEditorAutoLinkPlugin />}