@revikornmann/muka-ui 0.18.0 → 0.20.0

package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js

@@ -16,11 +16,14 @@ import './ProgressAccordeon.css';
  * - **past** — dark check indicator, heading, edit + chevron controls; the
  *   content slot collapses/expands via `collapsed` + `onToggle`
  * - **current** — accent numbered indicator, heading, content slot, actions
- * - **upcoming** — muted numbered indicator, heading only
+ * - **upcoming** — muted numbered indicator, heading; optional collapsible
+ *   content slot (same `collapsed` + `onToggle` as past) for empty-state
+ *   instructions or picking up a step out of order
  *
  * Content is passed as `children` (an optional slot) and rendered as-is — supply
- * your own `Card` when you want a card surface. Composes the Button, Icon and
- * Divider primitives and is fully themed through the Muka design token system.
+ * your own `Card` or `EmptyState` when you want those surfaces. Composes the
+ * Button, Icon and Divider primitives and is fully themed through the Muka
+ * design token system.
  *
  * Tokens used:
  * - alias.color.accent.{default|contrast} — step indicator fills
@@ -39,18 +42,25 @@ import './ProgressAccordeon.css';
 export const ProgressAccordeon = ({ state, stepNumber, heading, description, children, divider = true, collapsed = false, onToggle, editLabel = 'Edit', onEdit, primaryAction, secondaryAction, className = '', }) => {
     const isPast = state === 'past';
     const isCurrent = state === 'current';
-    const isExpanded = isPast && !collapsed;
-    const showToggle = isPast && Boolean(onToggle);
-    const showEdit = isExpanded && Boolean(onEdit);
-    const showDescription = Boolean(description) && !collapsed;
-    // Past steps keep their content mounted regardless of `collapsed` so the
-    // collapse/expand can be CSS-animated (you can't animate an unmounted node).
-    const hasSlot = (isPast || isCurrent) && Boolean(children);
+    const isUpcoming = state === 'upcoming';
+    // Past and upcoming share the collapsible slot pattern so consumers can show
+    // empty-state instructions on future steps and pick steps up independently.
+    const isCollapsible = isPast || isUpcoming;
+    const showToggle = isCollapsible && Boolean(onToggle);
+    const showEdit = isPast && !collapsed && Boolean(onEdit);
+    const showDescription = Boolean(description) && !(isCollapsible && collapsed);
+    // Collapsible steps keep their content mounted regardless of `collapsed` so
+    // the collapse/expand can be CSS-animated (you can't animate an unmounted node).
+    const hasSlot = (isCollapsible || isCurrent) && Boolean(children);
     const hasActions = isCurrent && Boolean(primaryAction || secondaryAction);
+    // Collapse modifiers only when the step can actually collapse — keeps
+    // header-only upcoming spacing on the base `--upcoming` gap rule.
+    const showCollapseModifiers = isPast || (isUpcoming && (Boolean(children) || Boolean(onToggle)));
     const rootClasses = [
         'muka-progress-accordeon',
         `muka-progress-accordeon--${state}`,
-        isPast && `muka-progress-accordeon--${collapsed ? 'collapsed' : 'expanded'}`,
+        showCollapseModifiers &&
+            `muka-progress-accordeon--${collapsed ? 'collapsed' : 'expanded'}`,
         className,
     ].filter(Boolean).join(' ');
     const indicatorClasses = [
@@ -59,9 +69,10 @@ export const ProgressAccordeon = ({ state, stepNumber, heading, description, chi
     ].join(' ');
     const header = (_jsxs("div", { className: "muka-progress-accordeon__header", children: [_jsxs("div", { className: "muka-progress-accordeon__header-row", children: [_jsxs("div", { className: "muka-progress-accordeon__heading-group", children: [_jsx("div", { className: indicatorClasses, "aria-hidden": "true", children: isPast ? (_jsx(Icon, { name: "check", variant: "fill", size: "sm", className: "muka-progress-accordeon__check-icon" })) : (_jsx("span", { className: "muka-progress-accordeon__number", children: stepNumber })) }), _jsx("h3", { className: "muka-progress-accordeon__heading", children: heading })] }), (showEdit || showToggle) && (_jsxs("div", { className: "muka-progress-accordeon__controls", children: [showEdit && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "tertiary", size: "md", onClick: onEdit, iconLeft: _jsx(Icon, { name: "pencil", variant: "line", size: "md" }), className: "muka-progress-accordeon__edit muka-progress-accordeon__edit--wide", children: editLabel }), _jsx(Button, { variant: "tertiary", size: "md", iconOnly: true, onClick: onEdit, className: "muka-progress-accordeon__edit muka-progress-accordeon__edit--narrow", "aria-label": editLabel, children: _jsx(Icon, { name: "pencil", variant: "line", size: "md" }) })] })), showToggle && (_jsx(Button, { variant: "tertiary", size: "md", iconOnly: true, onClick: onToggle, className: "muka-progress-accordeon__toggle", "aria-label": collapsed ? 'Expand' : 'Collapse', "aria-expanded": !collapsed, children: _jsx(Icon, { name: collapsed ? 'arrow-down-s' : 'arrow-up-s', variant: "line", size: "md" }) }))] }))] }), showDescription && (_jsx("div", { className: "muka-progress-accordeon__description", children: description }))] }));
     const slot = hasSlot ? (_jsx("div", { className: "muka-progress-accordeon__slot", children: children })) : null;
-    // Past steps wrap the (always-mounted) slot in a grid animation container that
-    // collapses its height to zero. Marked inert + aria-hidden while collapsed so
-    // the still-mounted content is skipped by keyboard focus and assistive tech.
+    // Collapsible steps wrap the (always-mounted) slot in a grid animation
+    // container that collapses its height to zero. Marked inert + aria-hidden while
+    // collapsed so the still-mounted content is skipped by keyboard focus and
+    // assistive tech.
     // `inert` is set imperatively on the DOM node rather than via a React prop:
     // React 18 drops a boolean `inert` prop, while React 19 warns on the string
     // form — toggling the attribute directly works correctly under both.
@@ -77,8 +88,8 @@ export const ProgressAccordeon = ({ state, stepNumber, heading, description, chi
             node.removeAttribute('inert');
         }
     }, [collapsed]);
-    const pastSlot = hasSlot ? (_jsx("div", { ref: slotWrapperRef, className: `muka-progress-accordeon__slot-wrapper${collapsed ? ' muka-progress-accordeon__slot-wrapper--collapsed' : ''}`, "aria-hidden": collapsed || undefined, children: _jsx("div", { className: "muka-progress-accordeon__slot-clip", children: slot }) })) : null;
-    return (_jsxs("div", { className: rootClasses, role: "group", "aria-label": `Step ${stepNumber}: ${heading}`, "aria-current": isCurrent ? 'step' : undefined, children: [isPast ? (_jsxs("div", { className: "muka-progress-accordeon__body", children: [header, pastSlot] })) : (_jsxs(_Fragment, { children: [header, slot] })), hasActions && (_jsxs("div", { className: "muka-progress-accordeon__actions", children: [secondaryAction && (_jsx(Button, { variant: "secondary", size: "md", onClick: secondaryAction.onClick, disabled: secondaryAction.disabled, className: "muka-progress-accordeon__action", children: secondaryAction.label })), primaryAction && (_jsx(Button, { variant: "primary", size: "md", onClick: primaryAction.onClick, disabled: primaryAction.disabled, className: "muka-progress-accordeon__action", children: primaryAction.label }))] })), divider && _jsx(Divider, { className: "muka-progress-accordeon__divider" })] }));
+    const collapsibleSlot = hasSlot ? (_jsx("div", { ref: slotWrapperRef, className: `muka-progress-accordeon__slot-wrapper${collapsed ? ' muka-progress-accordeon__slot-wrapper--collapsed' : ''}`, "aria-hidden": collapsed || undefined, children: _jsx("div", { className: "muka-progress-accordeon__slot-clip", children: slot }) })) : null;
+    return (_jsxs("div", { className: rootClasses, role: "group", "aria-label": `Step ${stepNumber}: ${heading}`, "aria-current": isCurrent ? 'step' : undefined, children: [isCollapsible ? (_jsxs("div", { className: "muka-progress-accordeon__body", children: [header, collapsibleSlot] })) : (_jsxs(_Fragment, { children: [header, slot] })), hasActions && (_jsxs("div", { className: "muka-progress-accordeon__actions", children: [secondaryAction && (_jsx(Button, { variant: "secondary", size: "md", onClick: secondaryAction.onClick, disabled: secondaryAction.disabled, className: "muka-progress-accordeon__action", children: secondaryAction.label })), primaryAction && (_jsx(Button, { variant: "primary", size: "md", onClick: primaryAction.onClick, disabled: primaryAction.disabled, className: "muka-progress-accordeon__action", children: primaryAction.label }))] })), divider && _jsx(Divider, { className: "muka-progress-accordeon__divider" })] }));
 };
 export default ProgressAccordeon;
 //# sourceMappingURL=ProgressAccordeon.js.map

package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressAccordeon.js","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/ProgressAccordeon.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProgressAccordeon.js","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/ProgressAccordeon.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/ProgressTracker/ProgressTracker.css

@@ -3,19 +3,22 @@
 /* ─── Root ──────────────────────────────────────────────── */
 .muka-progress-tracker {
   width: 100%;
+}
+
+.muka-progress-tracker--horizontal {
   padding-bottom: var(--spacing-7);
 }
 
 /* ─── Track (layered container) ─────────────────────────── */
-.muka-progress-tracker__track {
+.muka-progress-tracker--horizontal .muka-progress-tracker__track {
   position: relative;
   /* Vertical padding = (indicator size - connector height) / 2 = (32 - 4) / 2 = 14px */
   padding-top: 14px;
   padding-bottom: 14px;
 }
 
-/* ─── Steps layer (on top) ──────────────────────────────── */
-.muka-progress-tracker__steps {
+/* ─── Steps layer (on top) — horizontal ─────────────────── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__steps {
   position: absolute;
   inset: 0;
   display: flex;
@@ -24,13 +27,16 @@
   z-index: 2;
 }
 
-/* ─── Individual step ───────────────────────────────────── */
-.muka-progress-tracker__step {
+/* ─── Individual step — horizontal ──────────────────────── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__step {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 7px;
   position: relative;
+  /* Labels are absolutely positioned so the step stays 32px and
+     circle centers line up with the connector padding. */
+  width: 32px;
+  flex: 0 0 32px;
 }
 
 /* ─── Step indicator (circle) ───────────────────────────── */
@@ -43,20 +49,24 @@
   justify-content: center;
   flex-shrink: 0;
   position: relative;
+  z-index: 1;
 }
 
 /* Past: dark accent contrast circle with white checkmark */
 .muka-progress-tracker__indicator--past {
   background-color: var(--alias-color-accent-contrast);
   color: var(--color-text-default-inverse);
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past {
   cursor: pointer;
 }
 
-.muka-progress-tracker__indicator--past:hover {
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past:hover {
   background-color: var(--alias-color-accent-pressed);
 }
 
-.muka-progress-tracker__indicator--past:focus-visible {
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--past:focus-visible {
   outline: 2px solid var(--color-border-focus);
   outline-offset: 2px;
 }
@@ -83,6 +93,18 @@
   user-select: none;
 }
 
+.muka-progress-tracker--horizontal .muka-progress-tracker__indicator--upcoming .muka-progress-tracker__number {
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__indicator--upcoming .muka-progress-tracker__number {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
 /* ─── Checkmark icon ────────────────────────────────────── */
 .muka-progress-tracker__check-icon {
   width: 20px;
@@ -95,8 +117,12 @@
   color: var(--color-text-default-inverse);
 }
 
-/* ─── Step label ────────────────────────────────────────── */
-.muka-progress-tracker__label {
+/* ─── Step label — horizontal ───────────────────────────── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__label {
+  position: absolute;
+  top: 39px;
+  left: 50%;
+  transform: translateX(-50%);
   font-family: var(--text-label-sm-regular-fontFamily);
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
@@ -109,14 +135,14 @@
   text-overflow: ellipsis;
 }
 
-/* Current step label is bold */
-.muka-progress-tracker__label--current {
+/* Current step label is bold (horizontal only) */
+.muka-progress-tracker--horizontal .muka-progress-tracker__label--current {
   font-family: var(--text-label-sm-bold-fontFamily);
   font-weight: var(--text-label-sm-bold-fontWeight);
 }
 
-/* ─── Connectors layer (behind indicators) ──────────────── */
-.muka-progress-tracker__connectors {
+/* ─── Connectors layer (behind indicators) — horizontal ─── */
+.muka-progress-tracker--horizontal .muka-progress-tracker__connectors {
   display: flex;
   align-items: center;
   /* Horizontal padding = indicator radius (32/2 = 16px) so lines meet circle centers */
@@ -126,20 +152,31 @@
   z-index: 1;
 }
 
-/* ─── Individual connector line ─────────────────────────── */
-.muka-progress-tracker__connector {
+/* Rounder, bar, rounder in a row. Chromium treats a negative gap as invalid,
+   so the overlap is margins: the bar runs 2px under each circle. */
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   flex: 1 0 0;
   height: 4px;
   min-width: 1px;
+  position: relative;
+  overflow: visible;
+  background: none;
 }
 
-/* Past: solid dark line */
-.muka-progress-tracker__connector--past {
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector-line {
+  flex: 1 1 auto;
+  height: 4px;
+  min-width: 1px;
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector--past .muka-progress-tracker__connector-line {
   background-color: var(--alias-color-accent-contrast);
 }
 
-/* Current: gradient from past (dark) toward current step */
-.muka-progress-tracker__connector--current {
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector--current .muka-progress-tracker__connector-line {
   background: linear-gradient(
     to right,
     var(--alias-color-accent-contrast) 0%,
@@ -147,8 +184,7 @@
   );
 }
 
-/* Current-right: gradient fading from current step into upcoming */
-.muka-progress-tracker__connector--current-right {
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector--current-right .muka-progress-tracker__connector-line {
   background: linear-gradient(
     to right,
     var(--alias-color-accent-default) 0%,
@@ -157,7 +193,222 @@
   );
 }
 
+.muka-progress-tracker--horizontal .muka-progress-tracker__connector--upcoming .muka-progress-tracker__connector-line {
+  background-color: var(--color-surface-sunken);
+}
+
+/* Past: solid dark line (vertical; horizontal uses the inner line) */
+.muka-progress-tracker__connector--past {
+  background-color: var(--alias-color-accent-contrast);
+}
+
 /* Upcoming: solid gray line */
 .muka-progress-tracker__connector--upcoming {
   background-color: var(--color-surface-sunken);
 }
+
+/* ═══════════════════════════════════════════════════════════
+   Vertical orientation
+   ═══════════════════════════════════════════════════════════ */
+
+.muka-progress-tracker--vertical .muka-progress-tracker__track {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-6);
+  width: 100%;
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__step {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  padding-right: var(--spacing-1);
+  position: relative;
+  width: 100%;
+  min-height: 32px;
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive {
+  cursor: pointer;
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 4px;
+  border-radius: 20px;
+}
+
+/* Indicator column: circle only; connector is absolutely positioned on the step */
+.muka-progress-tracker--vertical .muka-progress-tracker__indicator-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+  width: 32px;
+  z-index: 1;
+}
+
+/* Vertical connector: from mid-indicator through gap to next mid-indicator */
+.muka-progress-tracker--vertical .muka-progress-tracker__connector {
+  position: absolute;
+  left: 14px; /* (32px indicator - 4px line) / 2 */
+  top: 16px;
+  /* Through track gap (spacing-6) into the next indicator's top half */
+  bottom: calc(-1 * var(--spacing-6) - 16px);
+  width: 4px;
+  z-index: 0;
+  overflow: visible;
+}
+
+/* Divider rounders: circle bleeds into the connector (Figma Divider Rounder) */
+.muka-progress-tracker__rounder {
+  position: absolute;
+  display: block;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.muka-progress-tracker__rounder--past {
+  color: var(--alias-color-accent-contrast);
+}
+
+.muka-progress-tracker__rounder--current {
+  color: var(--alias-color-accent-default);
+}
+
+.muka-progress-tracker__rounder--upcoming {
+  color: var(--color-surface-sunken);
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__rounder {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  transform: none;
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__rounder--start {
+  margin-left: 14px;
+  /* Rounder overhangs the circle by 3px; -5px tucks the bar 2px under the circle. */
+  margin-right: -5px;
+}
+
+.muka-progress-tracker--horizontal .muka-progress-tracker__rounder--end {
+  margin-left: -5px;
+  margin-right: 14px;
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__rounder--start {
+  left: 50%;
+  top: 14px;
+  transform: translateX(-50%);
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__rounder--end {
+  left: 50%;
+  bottom: 14px;
+  transform: translateX(-50%);
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__connector--current {
+  background: linear-gradient(
+    to bottom,
+    var(--alias-color-accent-contrast) 0%,
+    var(--alias-color-accent-default) 100%
+  );
+}
+
+.muka-progress-tracker--vertical .muka-progress-tracker__connector--current-right {
+  background: linear-gradient(
+    to bottom,
+    var(--alias-color-accent-default) 0%,
+    var(--alias-color-accent-default) 15%,
+    var(--color-surface-sunken) 50%
+  );
+}
+
+/* Vertical label: body/base/regular, wraps, not bold for current */
+.muka-progress-tracker--vertical .muka-progress-tracker__label {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-default-default);
+  text-align: left;
+  flex: 1 0 0;
+  min-width: 0;
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+  word-break: break-word;
+}
+
+/* Current label stays regular weight in vertical layout */
+.muka-progress-tracker--vertical .muka-progress-tracker__label--current {
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+}
+
+/* Ensure step content paints above hover/selected backgrounds */
+.muka-progress-tracker--vertical .muka-progress-tracker__indicator-col,
+.muka-progress-tracker--vertical .muka-progress-tracker__label {
+  position: relative;
+  z-index: 1;
+}
+
+/* ─── Hover halo (vertical interactive only) ────────────── */
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:hover::before,
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:active::before,
+.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']::before {
+  content: '';
+  position: absolute;
+  background-color: var(--color-surface-level1);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Hover: 40px circle behind indicator only */
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:hover::before {
+  left: -4px;
+  top: -4px;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+}
+
+/* Selected / :active: pill behind full step row — wins over hover */
+.muka-progress-tracker--vertical .muka-progress-tracker__step--interactive:active::before,
+.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']::before {
+  left: -4px;
+  right: -8px;
+  top: -4px;
+  bottom: -4px;
+  width: auto;
+  height: auto;
+  border-radius: 20px;
+}
+
+/* Selected steps without interactive class still show the pill */
+.muka-progress-tracker--vertical .muka-progress-tracker__step[data-selected='true']:not(.muka-progress-tracker__step--interactive)::before {
+  content: '';
+  position: absolute;
+  left: -4px;
+  right: -8px;
+  top: -4px;
+  bottom: -4px;
+  background-color: var(--color-surface-level1);
+  border-radius: 20px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Connector stays behind indicators (indicator-col is z-index 1) */
+.muka-progress-tracker--vertical .muka-progress-tracker__connector {
+  z-index: 0;
+}

package/dist/esm/components/ProgressTracker/ProgressTracker.js

@@ -1,6 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import './ProgressTracker.css';
 import { Icon } from '../Icon';
+/** Figma Divider Rounder paths — circle bleeds into the 4px connector. */
+const DIVIDER_ROUNDERS = {
+    horizontal: {
+        start: {
+            width: 5,
+            height: 15.4893,
+            viewBox: '0 0 5 15.4893',
+            d: 'M0 0C0.549963 0.992174 1.00009 2.04813 1.33105 3.15527C1.7646 4.60497 3.01126 5.74512 4.52441 5.74512H5V9.74512H4.52441C3.01126 9.74512 1.7646 10.8853 1.33105 12.335C1.00017 13.4418 0.549773 14.4973 0 15.4893V0Z',
+        },
+        end: {
+            width: 5,
+            height: 15.4893,
+            viewBox: '0 0 5 15.4893',
+            d: 'M5 0C4.45004 0.992174 3.99991 2.04813 3.66895 3.15527C3.2354 4.60497 1.98874 5.74512 0.475586 5.74512H0V9.74512H0.475586C1.98874 9.74512 3.2354 10.8853 3.66895 12.335C3.99983 13.4418 4.45023 14.4973 5 15.4893V0Z',
+        },
+    },
+    vertical: {
+        start: {
+            width: 16,
+            height: 5,
+            viewBox: '0 0 16 5',
+            d: 'M16 0C14.9751 0.549963 13.8843 1.00009 12.7407 1.33105C11.2432 1.7646 10 3.01126 10 4.52441V5H6V4.52441C6 3.01126 4.75581 1.7646 3.25831 1.33105C2.11494 1.00017 1.02467 0.549773 0 0H16Z',
+        },
+        end: {
+            width: 16,
+            height: 5,
+            viewBox: '0 0 16 5',
+            d: 'M16 5C14.9751 4.45004 13.8843 3.99991 12.7407 3.66895C11.2432 3.2354 10 1.98874 10 0.475586V0H6V0.475586C6 1.98874 4.75581 3.2354 3.25831 3.66895C2.11494 3.99983 1.02467 4.45023 0 5H16Z',
+        },
+    },
+};
+function DividerRounder({ orientation, edge, status, }) {
+    const spec = DIVIDER_ROUNDERS[orientation][edge];
+    return (_jsx("svg", { className: `muka-progress-tracker__rounder muka-progress-tracker__rounder--${edge} muka-progress-tracker__rounder--${status}`, width: spec.width, height: spec.height, viewBox: spec.viewBox, fill: "none", "aria-hidden": "true", children: _jsx("path", { d: spec.d, fill: "currentColor" }) }));
+}
+function DividerRounders({ orientation, startStatus, endStatus, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(DividerRounder, { orientation: orientation, edge: "start", status: startStatus }), _jsx(DividerRounder, { orientation: orientation, edge: "end", status: endStatus })] }));
+}
 function getStepStatus(stepIndex, currentStep, totalSteps) {
     if (currentStep <= 0)
         return 'upcoming';
@@ -31,12 +69,15 @@ function getConnectorStatus(connectorIndex, currentStep, totalSteps) {
 /**
  * ProgressTracker Component
  *
- * A horizontal stepper/progress indicator for multi-step forms.
+ * A stepper/progress indicator for multi-step forms.
+ * Supports horizontal (default) and vertical orientations.
  * Shows numbered step indicators connected by progress lines.
- * Supports 2–5 steps with past, current, and upcoming states.
+ * Supports 2–10 steps with past, current, and upcoming states.
+ *
+ * Vertical orientation also supports hover and selected interaction states.
  *
  * Built using the Muka design token system with support for:
- * - Dynamic step counts (2–5)
+ * - Dynamic step counts (2–10)
  * - Step states: past (checkmark), current (number), upcoming (number)
  * - Animated connector lines showing progress
  * - Multi-brand theming through design tokens
@@ -44,14 +85,73 @@ function getConnectorStatus(connectorIndex, currentStep, totalSteps) {
  * Tokens used:
  * - alias.color.accent.{default|contrast|pressed} — step indicator backgrounds
  * - color.surface.sunken — upcoming indicator/connector background
+ * - color.surface.level1 — vertical hover/selected backgrounds
  * - color.text.default.{default|inverse} — indicator/label text
- * - text.label.{sm|md}.{regular|bold} — typography
- * - spacing.4, spacing.7 — layout spacing
+ * - text.label.{sm|md}.{regular|bold|semibold} — horizontal typography
+ * - text.body.base.regular — vertical label typography
+ * - spacing.1, spacing.3, spacing.4, spacing.6, spacing.7 — layout spacing
  * - border.radius.full — circular indicators
  */
-export const ProgressTracker = ({ steps, currentStep, onStepClick, className = '', }) => {
+export const ProgressTracker = ({ steps, currentStep, orientation = 'horizontal', selectedStep, onStepClick, className = '', }) => {
     const totalSteps = steps.length;
-    const rootClasses = ['muka-progress-tracker', className].filter(Boolean).join(' ');
+    const isVertical = orientation === 'vertical';
+    const rootClasses = [
+        'muka-progress-tracker',
+        `muka-progress-tracker--${orientation}`,
+        className,
+    ].filter(Boolean).join(' ');
+    const renderIndicatorContent = (status, stepNumber) => {
+        if (status === 'past') {
+            return (_jsx(Icon, { name: "check", variant: "fill", size: "sm", className: "muka-progress-tracker__check-icon" }));
+        }
+        return _jsx("span", { className: "muka-progress-tracker__number", children: stepNumber });
+    };
+    if (isVertical) {
+        return (_jsx("div", { className: rootClasses, role: "group", "aria-label": "Form progress", children: _jsx("div", { className: "muka-progress-tracker__track", children: steps.map((step, index) => {
+                    const status = getStepStatus(index, currentStep, totalSteps);
+                    const stepNumber = index + 1;
+                    const isPast = status === 'past';
+                    const isCurrent = status === 'current';
+                    const isLast = index === totalSteps - 1;
+                    const isSelected = selectedStep === stepNumber;
+                    const isInteractive = Boolean(onStepClick);
+                    const stepClasses = [
+                        'muka-progress-tracker__step',
+                        `muka-progress-tracker__step--${status}`,
+                        isInteractive && 'muka-progress-tracker__step--interactive',
+                    ].filter(Boolean).join(' ');
+                    const indicatorClasses = [
+                        'muka-progress-tracker__indicator',
+                        `muka-progress-tracker__indicator--${status}`,
+                    ].join(' ');
+                    const labelClasses = [
+                        'muka-progress-tracker__label',
+                        isCurrent && 'muka-progress-tracker__label--current',
+                    ].filter(Boolean).join(' ');
+                    const handleClick = isInteractive
+                        ? () => onStepClick(index)
+                        : undefined;
+                    const connectorStatus = !isLast
+                        ? getConnectorStatus(index, currentStep, totalSteps)
+                        : null;
+                    return (_jsxs("div", { className: stepClasses, "data-selected": isSelected ? 'true' : undefined, "aria-current": isCurrent ? 'step' : undefined, onClick: handleClick, role: handleClick ? 'button' : undefined, tabIndex: handleClick ? 0 : undefined, onKeyDown: handleClick
+                            ? (e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    handleClick();
+                                }
+                            }
+                            : undefined, "aria-label": isPast
+                            ? `Step ${stepNumber}: ${step.label} (completed)`
+                            : isCurrent
+                                ? `Step ${stepNumber}: ${step.label} (current)`
+                                : `Step ${stepNumber}: ${step.label}`, children: [connectorStatus && (_jsx("div", { className: [
+                                    'muka-progress-tracker__connector',
+                                    `muka-progress-tracker__connector--${connectorStatus}`,
+                                ].join(' '), "aria-hidden": "true", children: _jsx(DividerRounders, { orientation: "vertical", startStatus: status, endStatus: getStepStatus(index + 1, currentStep, totalSteps) }) })), _jsx("div", { className: "muka-progress-tracker__indicator-col", children: _jsx("div", { className: indicatorClasses, children: renderIndicatorContent(status, stepNumber) }) }), _jsx("span", { className: labelClasses, children: step.label })] }, index));
+                }) }) }));
+    }
+    // Horizontal layout (default)
     return (_jsx("div", { className: rootClasses, role: "group", "aria-label": "Form progress", children: _jsxs("div", { className: "muka-progress-tracker__track", children: [_jsx("div", { className: "muka-progress-tracker__steps", children: steps.map((step, index) => {
                         const status = getStepStatus(index, currentStep, totalSteps);
                         const stepNumber = index + 1;
@@ -83,14 +183,14 @@ export const ProgressTracker = ({ steps, currentStep, onStepClick, className = '
                                         ? `Step ${stepNumber}: ${step.label} (completed)`
                                         : isCurrent
                                             ? `Step ${stepNumber}: ${step.label} (current)`
-                                            : `Step ${stepNumber}: ${step.label}`, children: isPast ? (_jsx(Icon, { name: "check", variant: "fill", size: "sm", className: "muka-progress-tracker__check-icon" })) : (_jsx("span", { className: "muka-progress-tracker__number", children: stepNumber })) }), _jsx("span", { className: labelClasses, children: step.label })] }, index));
+                                            : `Step ${stepNumber}: ${step.label}`, children: renderIndicatorContent(status, stepNumber) }), _jsx("span", { className: labelClasses, children: step.label })] }, index));
                     }) }), _jsx("div", { className: "muka-progress-tracker__connectors", children: Array.from({ length: totalSteps - 1 }, (_, index) => {
                         const status = getConnectorStatus(index, currentStep, totalSteps);
                         const connectorClasses = [
                             'muka-progress-tracker__connector',
                             `muka-progress-tracker__connector--${status}`,
                         ].join(' ');
-                        return _jsx("div", { className: connectorClasses, "aria-hidden": "true" }, index);
+                        return (_jsxs("div", { className: connectorClasses, "aria-hidden": "true", children: [_jsx(DividerRounder, { orientation: "horizontal", edge: "start", status: getStepStatus(index, currentStep, totalSteps) }), _jsx("span", { className: "muka-progress-tracker__connector-line" }), _jsx(DividerRounder, { orientation: "horizontal", edge: "end", status: getStepStatus(index + 1, currentStep, totalSteps) })] }, index));
                     }) })] }) }));
 };
 export default ProgressTracker;