@atelier-ui/react 0.2.37 → 0.2.39

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## 0.2.39 (2026-09-07)
+
+### 🩹 Fixes
+
+- **pagination,stepper:** the active state was bolder than any role allows ([1eea2f0](https://github.com/DominikPieper/atelier-ui/commit/1eea2f0))
+- **breadcrumbs:** the fallback separator named a glyph nothing ships ([910e77c](https://github.com/DominikPieper/atelier-ui/commit/910e77c))
+
+### ❤️ Thank You
+
+- Claude Opus 5 (1M context)
+- Dominik Pieper @DominikPieper
+
+## 0.2.38 (2026-09-07)
+
+### 🩹 Fixes
+
+- **card:** the header stated three of the title role's four axes ([c88a543](https://github.com/DominikPieper/atelier-ui/commit/c88a543))
+
+### ❤️ Thank You
+
+- Claude Opus 5 (1M context)
+- Dominik Pieper @DominikPieper
+
 ## 0.2.37 (2026-09-06)
 
 ### 🩹 Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atelier-ui/react",
-  "version": "0.2.37",
+  "version": "0.2.39",
   "description": "Atelier component library for React — LLM-optimised, accessible, design-token-driven",
   "keywords": [
     "react",

package/src/lib/breadcrumbs/atl-breadcrumbs.css

@@ -47,9 +47,17 @@
    the CSS Generated Content alt-text pair: an explicit empty alternative
    text, which keeps the glyph out of the accessibility tree in Chromium,
    Firefox and WebKit alike (verified; a bare `content: '…'` is NOT excluded
-   by default — it renders as its own accessible text node). See ADR-0100. */
+   by default — it renders as its own accessible text node). See ADR-0100.
+   The fallback matches the component's own default ('/', not '›'): all
+   three adapters always set --atl-separator inline before first paint (in
+   SSR-rendered markup, not just post-hydration), so this value is unreached
+   in every documented usage — it exists only so a stray '.atl-breadcrumb-
+   item::after' rendered without the component (hand-authored markup that
+   imports the CSS but skips AtlBreadcrumbs/atl-breadcrumbs/AtlBreadcrumbs.vue)
+   degrades to the shipped default rather than to a glyph the spec's
+   `separator` option list ('/', '>') never offers. */
 .atl-breadcrumb-item::after {
-  content: var(--atl-separator, '›') / '';
+  content: var(--atl-separator, '/') / '';
   margin: 0 var(--ui-spacing-2);
   color: var(--ui-color-border-hover);
   font-size: var(--ui-font-size-md);
@@ -80,7 +88,15 @@
   box-shadow: var(--ui-focus-ring);
 }
 
-/* Current item (plain text) */
+/* Current item (plain text). Deliberately no padding: `.breadcrumb-link`'s
+   padding is exactly cancelled by its own negative margin (a hit/hover-area
+   enlargement, invisible in the flow), so its text occupies exactly the same
+   box a padding-less element would — measured in a real browser, both items'
+   rows come out the same height and the link's text starts at the same
+   offset within its row as this span's. Adding matching padding here would
+   not reproduce that; without a compensating negative margin it would make
+   this row taller than a link row, which is the regression this note exists
+   to head off. */
 .atl-breadcrumb-item .breadcrumb-current {
   color: var(--ui-color-text);
   font-weight: var(--ui-font-weight-semibold);

package/src/lib/card/atl-card.css

@@ -81,6 +81,7 @@
   display: block;
   font-size: var(--ui-font-size-lg);
   font-weight: var(--ui-font-weight-semibold);
+  line-height: var(--ui-line-height-tight);
   color: var(--ui-color-text);
   border-bottom: var(--ui-border-width) solid var(--ui-color-border);
   letter-spacing: var(--ui-letter-spacing-tight);

package/src/lib/pagination/atl-pagination.css

@@ -65,12 +65,14 @@
   box-shadow: var(--ui-focus-ring);
 }
 
-/* Active (current) page — primary fill */
+/* Active (current) page — primary fill. Weight stays the resting --ui-type-control
+ * medium (ADR-0074): the Figma master renders this label Medium in every state, and
+ * .atl-tab-group's own .is-active — the other stateful member of the same six-rule
+ * consumer list — changes only colour, never weight, on its current item. */
 .page-btn.is-active {
   background-color: var(--ui-color-primary);
   border-color: var(--ui-color-primary);
   color: var(--ui-color-text-on-primary);
-  font-weight: var(--ui-font-weight-semibold);
 }
 
 .page-btn.is-active:hover {

package/src/lib/stepper/atl-stepper.css

@@ -27,6 +27,9 @@
 .stepper-header {
   display: flex;
   align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 /* ─── Step item ─── */
@@ -101,14 +104,14 @@
 .step-description {
   font-size: var(--ui-font-size-xs);
   color: var(--ui-color-text-muted);
-  margin-top: 2px;
+  margin-top: var(--ui-spacing-1);
 }
 
 .step-optional {
   font-size: var(--ui-font-size-xs);
   color: var(--ui-color-text-muted);
   font-style: italic;
-  margin-top: 2px;
+  margin-top: var(--ui-spacing-1);
 }
 
 /* ─── Content ─── */
@@ -116,7 +119,7 @@
   margin-top: var(--ui-spacing-6);
 }
 
-.stepper-content [role="tabpanel"][hidden] {
+.stepper-content .step-panel[hidden] {
   display: none;
 }
 
@@ -127,8 +130,11 @@
 }
 
 .step-item.is-active .step-label {
+  /* Weight stays the resting --ui-type-control medium (ADR-0074): the Figma master
+   * renders this label Medium in every state, and .atl-tab-group's own .is-active —
+   * the other stateful member of the same six-rule consumer list — changes only
+   * colour, never weight, on its current item. */
   color: var(--ui-color-text);
-  font-weight: var(--ui-font-weight-semibold);
 }
 
 /* ─── Completed state ─── */

package/src/lib/stepper/atl-stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"atl-stepper.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,SAAS,EACT,cAAc,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3D,OAAO,mBAAmB,CAAC;AAG3B,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,mBAAmB;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAYD,0DAA0D;AAC1D,wBAAgB,aAAa,wBAE5B;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,0BAA0B;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,UAAU,EAAE,YAAY,EACxB,kBAAkB,EAClB,WAA0B,EAC1B,MAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,eAAe,+BAkJjB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,aAEjD;yBAFe,OAAO"}
+{"version":3,"file":"atl-stepper.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,SAAS,EACT,cAAc,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3D,OAAO,mBAAmB,CAAC;AAG3B,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,mBAAmB;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAYD,0DAA0D;AAC1D,wBAAgB,aAAa,wBAE5B;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,0BAA0B;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,UAAU,EAAE,YAAY,EACxB,kBAAkB,EAClB,WAA0B,EAC1B,MAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,eAAe,+BAwJjB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,aAEjD;yBAFe,OAAO"}

package/src/lib/stepper/atl-stepper.js

@@ -41,16 +41,27 @@ export function AtlStepper({ activeStep: externalStep, onActiveStepChange, orien
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [children]);
+    // Whether step `i` can be activated right now: not itself disabled, and — in
+    // linear mode — either at/behind the active step, or ahead of it with every
+    // step before it completed or optional. Drives both goTo()'s guard and the
+    // header button's native `disabled` state, so an unreachable step is also
+    // not focusable — no roving-tabindex bookkeeping needed, since the header is
+    // a list, not a tab widget.
+    const isReachable = (i) => {
+        const step = steps[i];
+        if (!step || step.disabled)
+            return false;
+        if (!linear)
+            return true;
+        if (i <= activeStep)
+            return true;
+        return steps.slice(0, i).every((s) => s.completed || s.optional);
+    };
     const goTo = (i) => {
         if (i < 0 || i >= steps.length)
             return;
-        if (steps[i]?.disabled)
+        if (!isReachable(i))
             return;
-        if (linear && i > activeStep) {
-            const canAdvance = steps.slice(0, i).every((s) => s.completed || s.optional);
-            if (!canAdvance)
-                return;
-        }
         setStep(i);
     };
     const next = () => goTo(activeStep + 1);
@@ -68,7 +79,7 @@ export function AtlStepper({ activeStep: externalStep, onActiveStepChange, orien
         .join(' ');
     const stepPanels = childArray.filter((c) => isValidElement(c) &&
         c.type.displayName === 'AtlStep');
-    return (_jsx(StepperContext.Provider, { value: { activeStep, setActiveStep: setStep, steps, linear, next, prev, goTo }, children: _jsxs("div", { className: classes, ...rest, children: [_jsx("div", { className: "stepper-header", role: "tablist", children: steps.map((step, i) => {
+    return (_jsx(StepperContext.Provider, { value: { activeStep, setActiveStep: setStep, steps, linear, next, prev, goTo }, children: _jsxs("div", { className: classes, ...rest, children: [_jsx("ol", { className: "stepper-header", role: "list", "aria-label": "Progress", children: steps.map((step, i) => {
                         const isActive = activeStep === i;
                         const isCompleted = step.completed && !isActive;
                         const itemClass = [
@@ -80,12 +91,12 @@ export function AtlStepper({ activeStep: externalStep, onActiveStepChange, orien
                         ]
                             .filter(Boolean)
                             .join(' ');
-                        return (_jsxs(Fragment, { children: [_jsxs("div", { className: itemClass, children: [_jsx("button", { type: "button", role: "tab", id: `atl-step-${i}`, className: "step-circle", "aria-label": step.label, "aria-selected": isActive, "aria-controls": `atl-step-panel-${i}`, "aria-disabled": step.disabled || undefined, tabIndex: isActive ? 0 : -1, disabled: step.disabled, onClick: () => goTo(i), children: step.completed && !step.error ? (_jsx(AtlIcon, { name: "check", size: "sm" })) : step.error ? (_jsx(AtlIcon, { name: "close", size: "sm" })) : (i + 1) }), _jsxs("div", { className: "step-text", children: [_jsx("span", { className: "step-label", children: step.label }), step.description && (_jsx("span", { className: "step-description", children: step.description })), step.optional && !step.completed && (_jsx("span", { className: "step-optional", children: "Optional" }))] })] }), i < steps.length - 1 && (_jsx("div", { className: ['step-connector', (activeStep > i || step.completed) && 'is-active']
+                        return (_jsxs(Fragment, { children: [_jsxs("li", { className: itemClass, children: [_jsx("button", { type: "button", id: `atl-step-${i}`, className: "step-circle", "aria-label": step.label, "aria-current": isActive ? 'step' : undefined, disabled: !isReachable(i), onClick: () => goTo(i), children: step.completed && !step.error ? (_jsx(AtlIcon, { name: "check", size: "sm" })) : step.error ? (_jsx(AtlIcon, { name: "close", size: "sm" })) : (i + 1) }), _jsxs("div", { className: "step-text", children: [_jsx("span", { className: "step-label", children: step.label }), step.description && (_jsx("span", { className: "step-description", children: step.description })), step.optional && !step.completed && (_jsx("span", { className: "step-optional", children: "Optional" }))] })] }), i < steps.length - 1 && (_jsx("li", { "aria-hidden": "true", className: ['step-connector', (activeStep > i || step.completed) && 'is-active']
                                         .filter(Boolean)
                                         .join(' ') }))] }, i));
                     }) }), _jsx("div", { className: "stepper-content", children: stepPanels.map((panel, i) => {
                         const element = panel;
-                        return (_jsx("div", { id: `atl-step-panel-${i}`, role: "tabpanel", "aria-labelledby": `atl-step-${i}`, tabIndex: 0, hidden: i !== activeStep, children: element.props.children }, i));
+                        return (_jsx("div", { role: "region", className: "step-panel", "aria-labelledby": `atl-step-${i}`, hidden: i !== activeStep, children: element.props.children }, i));
                     }) })] }) }));
 }
 export function AtlStep({ children }) {

package/src/lib/stepper/atl-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"atl-stepper.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Fragment,\n  createContext,\n  useContext,\n  useState,\n  ReactNode,\n  HTMLAttributes,\n  Children,\n  isValidElement,\n  useMemo,\n  ReactElement,\n} from 'react';\nimport type { AtlStepperSpec, AtlStepSpec } from '../spec';\nimport './atl-stepper.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ninterface StepInfo {\n  label: string;\n  description?: string;\n  completed: boolean;\n  error: boolean;\n  optional: boolean;\n  disabled: boolean;\n}\n\ninterface StepperContextValue {\n  activeStep: number;\n  setActiveStep: (i: number) => void;\n  steps: StepInfo[];\n  linear: boolean;\n  next(): void;\n  prev(): void;\n  goTo(i: number): void;\n}\n\nconst StepperContext = createContext<StepperContextValue>({\n  activeStep: 0,\n  setActiveStep: () => undefined,\n  steps: [],\n  linear: false,\n  next: () => undefined,\n  prev: () => undefined,\n  goTo: () => undefined,\n});\n\n/** Access stepper navigation from within step content. */\nexport function useAtlStepper() {\n  return useContext(StepperContext);\n}\n\nexport interface AtlStepperProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlStepperSpec {\n  /** Currently active step index. */\n  activeStep?: number;\n  /** Callback when the active step changes. */\n  onActiveStepChange?: (index: number) => void;\n  /** Layout orientation. */\n  orientation?: 'horizontal' | 'vertical';\n  /** Restrict forward navigation until previous steps are completed. */\n  linear?: boolean;\n  children?: ReactNode;\n}\n\nexport function AtlStepper({\n  activeStep: externalStep,\n  onActiveStepChange,\n  orientation = 'horizontal',\n  linear = false,\n  children,\n  className,\n  ...rest\n}: AtlStepperProps) {\n  const [internalStep, setInternalStep] = useState(externalStep ?? 0);\n  const isControlled = externalStep !== undefined;\n  const activeStep = isControlled ? externalStep : internalStep;\n\n  const setStep = (i: number) => {\n    if (!isControlled) setInternalStep(i);\n    onActiveStepChange?.(i);\n  };\n\n  const childArray = Children.toArray(children);\n  const steps: StepInfo[] = useMemo(\n    () =>\n      childArray\n        .filter(\n          (c) =>\n            isValidElement(c) &&\n            (c.type as { displayName?: string }).displayName === 'AtlStep'\n        )\n        .map((c) => {\n          const element = c as ReactElement<AtlStepProps>;\n          return {\n            label: element.props.label ?? '',\n            description: element.props.description,\n            completed: element.props.completed ?? false,\n            error: element.props.error ?? false,\n            optional: element.props.optional ?? false,\n            disabled: element.props.disabled ?? false,\n          };\n        }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children]\n  );\n\n  const goTo = (i: number) => {\n    if (i < 0 || i >= steps.length) return;\n    if (steps[i]?.disabled) return;\n    if (linear && i > activeStep) {\n      const canAdvance = steps.slice(0, i).every((s) => s.completed || s.optional);\n      if (!canAdvance) return;\n    }\n    setStep(i);\n  };\n\n  const next = () => goTo(activeStep + 1);\n  const prev = () => {\n    const p = activeStep - 1;\n    if (p >= 0 && !steps[p]?.disabled) setStep(p);\n  };\n\n  const classes = [\n    'atl-stepper',\n    `orientation-${orientation}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const stepPanels = childArray.filter(\n    (c) =>\n      isValidElement(c) &&\n      (c.type as { displayName?: string }).displayName === 'AtlStep'\n  );\n\n  return (\n    <StepperContext.Provider value={{ activeStep, setActiveStep: setStep, steps, linear, next, prev, goTo }}>\n      <div className={classes} {...rest}>\n        <div className=\"stepper-header\" role=\"tablist\">\n          {steps.map((step, i) => {\n            const isActive = activeStep === i;\n            const isCompleted = step.completed && !isActive;\n            const itemClass = [\n              'step-item',\n              isActive && 'is-active',\n              isCompleted && 'is-completed',\n              step.error && 'is-error',\n              step.disabled && 'is-disabled',\n            ]\n              .filter(Boolean)\n              .join(' ');\n\n            return (\n              <Fragment key={i}>\n                <div className={itemClass}>\n                  <button\n                    type=\"button\"\n                    role=\"tab\"\n                    id={`atl-step-${i}`}\n                    className=\"step-circle\"\n                    aria-label={step.label}\n                    aria-selected={isActive}\n                    aria-controls={`atl-step-panel-${i}`}\n                    aria-disabled={step.disabled || undefined}\n                    tabIndex={isActive ? 0 : -1}\n                    disabled={step.disabled}\n                    onClick={() => goTo(i)}\n                  >\n                    {step.completed && !step.error ? (\n                      <AtlIcon name=\"check\" size=\"sm\" />\n                    ) : step.error ? (\n                      <AtlIcon name=\"close\" size=\"sm\" />\n                    ) : (\n                      i + 1\n                    )}\n                  </button>\n                  <div className=\"step-text\">\n                    <span className=\"step-label\">{step.label}</span>\n                    {step.description && (\n                      <span className=\"step-description\">{step.description}</span>\n                    )}\n                    {step.optional && !step.completed && (\n                      <span className=\"step-optional\">Optional</span>\n                    )}\n                  </div>\n                </div>\n                {i < steps.length - 1 && (\n                  <div\n                    className={['step-connector', (activeStep > i || step.completed) && 'is-active']\n                      .filter(Boolean)\n                      .join(' ')}\n                  />\n                )}\n              </Fragment>\n            );\n          })}\n        </div>\n        <div className=\"stepper-content\">\n          {stepPanels.map((panel, i) => {\n            const element = panel as ReactElement<AtlStepProps>;\n            return (\n              <div\n                key={i}\n                id={`atl-step-panel-${i}`}\n                role=\"tabpanel\"\n                aria-labelledby={`atl-step-${i}`}\n                tabIndex={0}\n                hidden={i !== activeStep}\n              >\n                {element.props.children}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </StepperContext.Provider>\n  );\n}\n\nexport interface AtlStepProps extends AtlStepSpec {\n  /** Text displayed on the step indicator. Required. */\n  label: string;\n  /** Optional subtitle. */\n  description?: string;\n  /** Mark as completed (shows checkmark). */\n  completed?: boolean;\n  /** Mark as errored (shows X). */\n  error?: boolean;\n  /** Mark as optional. */\n  optional?: boolean;\n  /** Whether the step is disabled. */\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\nexport function AtlStep({ children }: AtlStepProps) {\n  return children;\n}\nAtlStep.displayName = 'AtlStep';\n"]}
+{"version":3,"file":"atl-stepper.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Fragment,\n  createContext,\n  useContext,\n  useState,\n  ReactNode,\n  HTMLAttributes,\n  Children,\n  isValidElement,\n  useMemo,\n  ReactElement,\n} from 'react';\nimport type { AtlStepperSpec, AtlStepSpec } from '../spec';\nimport './atl-stepper.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\ninterface StepInfo {\n  label: string;\n  description?: string;\n  completed: boolean;\n  error: boolean;\n  optional: boolean;\n  disabled: boolean;\n}\n\ninterface StepperContextValue {\n  activeStep: number;\n  setActiveStep: (i: number) => void;\n  steps: StepInfo[];\n  linear: boolean;\n  next(): void;\n  prev(): void;\n  goTo(i: number): void;\n}\n\nconst StepperContext = createContext<StepperContextValue>({\n  activeStep: 0,\n  setActiveStep: () => undefined,\n  steps: [],\n  linear: false,\n  next: () => undefined,\n  prev: () => undefined,\n  goTo: () => undefined,\n});\n\n/** Access stepper navigation from within step content. */\nexport function useAtlStepper() {\n  return useContext(StepperContext);\n}\n\nexport interface AtlStepperProps\n  extends HTMLAttributes<HTMLDivElement>,\n    AtlStepperSpec {\n  /** Currently active step index. */\n  activeStep?: number;\n  /** Callback when the active step changes. */\n  onActiveStepChange?: (index: number) => void;\n  /** Layout orientation. */\n  orientation?: 'horizontal' | 'vertical';\n  /** Restrict forward navigation until previous steps are completed. */\n  linear?: boolean;\n  children?: ReactNode;\n}\n\nexport function AtlStepper({\n  activeStep: externalStep,\n  onActiveStepChange,\n  orientation = 'horizontal',\n  linear = false,\n  children,\n  className,\n  ...rest\n}: AtlStepperProps) {\n  const [internalStep, setInternalStep] = useState(externalStep ?? 0);\n  const isControlled = externalStep !== undefined;\n  const activeStep = isControlled ? externalStep : internalStep;\n\n  const setStep = (i: number) => {\n    if (!isControlled) setInternalStep(i);\n    onActiveStepChange?.(i);\n  };\n\n  const childArray = Children.toArray(children);\n  const steps: StepInfo[] = useMemo(\n    () =>\n      childArray\n        .filter(\n          (c) =>\n            isValidElement(c) &&\n            (c.type as { displayName?: string }).displayName === 'AtlStep'\n        )\n        .map((c) => {\n          const element = c as ReactElement<AtlStepProps>;\n          return {\n            label: element.props.label ?? '',\n            description: element.props.description,\n            completed: element.props.completed ?? false,\n            error: element.props.error ?? false,\n            optional: element.props.optional ?? false,\n            disabled: element.props.disabled ?? false,\n          };\n        }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [children]\n  );\n\n  // Whether step `i` can be activated right now: not itself disabled, and — in\n  // linear mode — either at/behind the active step, or ahead of it with every\n  // step before it completed or optional. Drives both goTo()'s guard and the\n  // header button's native `disabled` state, so an unreachable step is also\n  // not focusable — no roving-tabindex bookkeeping needed, since the header is\n  // a list, not a tab widget.\n  const isReachable = (i: number) => {\n    const step = steps[i];\n    if (!step || step.disabled) return false;\n    if (!linear) return true;\n    if (i <= activeStep) return true;\n    return steps.slice(0, i).every((s) => s.completed || s.optional);\n  };\n\n  const goTo = (i: number) => {\n    if (i < 0 || i >= steps.length) return;\n    if (!isReachable(i)) return;\n    setStep(i);\n  };\n\n  const next = () => goTo(activeStep + 1);\n  const prev = () => {\n    const p = activeStep - 1;\n    if (p >= 0 && !steps[p]?.disabled) setStep(p);\n  };\n\n  const classes = [\n    'atl-stepper',\n    `orientation-${orientation}`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const stepPanels = childArray.filter(\n    (c) =>\n      isValidElement(c) &&\n      (c.type as { displayName?: string }).displayName === 'AtlStep'\n  );\n\n  return (\n    <StepperContext.Provider value={{ activeStep, setActiveStep: setStep, steps, linear, next, prev, goTo }}>\n      <div className={classes} {...rest}>\n        <ol className=\"stepper-header\" role=\"list\" aria-label=\"Progress\">\n          {steps.map((step, i) => {\n            const isActive = activeStep === i;\n            const isCompleted = step.completed && !isActive;\n            const itemClass = [\n              'step-item',\n              isActive && 'is-active',\n              isCompleted && 'is-completed',\n              step.error && 'is-error',\n              step.disabled && 'is-disabled',\n            ]\n              .filter(Boolean)\n              .join(' ');\n\n            return (\n              <Fragment key={i}>\n                <li className={itemClass}>\n                  <button\n                    type=\"button\"\n                    id={`atl-step-${i}`}\n                    className=\"step-circle\"\n                    aria-label={step.label}\n                    aria-current={isActive ? 'step' : undefined}\n                    disabled={!isReachable(i)}\n                    onClick={() => goTo(i)}\n                  >\n                    {step.completed && !step.error ? (\n                      <AtlIcon name=\"check\" size=\"sm\" />\n                    ) : step.error ? (\n                      <AtlIcon name=\"close\" size=\"sm\" />\n                    ) : (\n                      i + 1\n                    )}\n                  </button>\n                  <div className=\"step-text\">\n                    <span className=\"step-label\">{step.label}</span>\n                    {step.description && (\n                      <span className=\"step-description\">{step.description}</span>\n                    )}\n                    {step.optional && !step.completed && (\n                      <span className=\"step-optional\">Optional</span>\n                    )}\n                  </div>\n                </li>\n                {i < steps.length - 1 && (\n                  <li\n                    aria-hidden=\"true\"\n                    className={['step-connector', (activeStep > i || step.completed) && 'is-active']\n                      .filter(Boolean)\n                      .join(' ')}\n                  />\n                )}\n              </Fragment>\n            );\n          })}\n        </ol>\n        <div className=\"stepper-content\">\n          {stepPanels.map((panel, i) => {\n            const element = panel as ReactElement<AtlStepProps>;\n            return (\n              <div\n                key={i}\n                role=\"region\"\n                className=\"step-panel\"\n                aria-labelledby={`atl-step-${i}`}\n                hidden={i !== activeStep}\n              >\n                {element.props.children}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </StepperContext.Provider>\n  );\n}\n\nexport interface AtlStepProps extends AtlStepSpec {\n  /** Text displayed on the step indicator. Required. */\n  label: string;\n  /** Optional subtitle. */\n  description?: string;\n  /** Mark as completed (shows checkmark). */\n  completed?: boolean;\n  /** Mark as errored (shows X). */\n  error?: boolean;\n  /** Mark as optional. */\n  optional?: boolean;\n  /** Whether the step is disabled. */\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\nexport function AtlStep({ children }: AtlStepProps) {\n  return children;\n}\nAtlStep.displayName = 'AtlStep';\n"]}