@revikornmann/muka-ui 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/cjs/components/DataPieChart/DataPieChart.js +1 -1
  2. package/dist/cjs/components/DataPieChart/DataPieChart.js.map +1 -1
  3. package/dist/cjs/components/DataTable/DataTable.css +17 -0
  4. package/dist/cjs/components/{FormProgressBar/FormProgressBar.css → ProgressTracker/ProgressTracker.css} +28 -22
  5. package/dist/cjs/components/{FormProgressBar/FormProgressBar.js → ProgressTracker/ProgressTracker.js} +20 -20
  6. package/dist/cjs/components/{FormProgressBar/FormProgressBar.js.map → ProgressTracker/ProgressTracker.js.map} +1 -1
  7. package/dist/cjs/components/ProgressTracker/index.js +8 -0
  8. package/dist/cjs/components/{FormProgressBar → ProgressTracker}/index.js.map +1 -1
  9. package/dist/cjs/components/index.js +3 -3
  10. package/dist/esm/components/DataPieChart/DataPieChart.js +1 -1
  11. package/dist/esm/components/DataPieChart/DataPieChart.js.map +1 -1
  12. package/dist/esm/components/DataTable/DataTable.css +17 -0
  13. package/dist/{styles/components/FormProgressBar.css → esm/components/ProgressTracker/ProgressTracker.css} +28 -22
  14. package/dist/esm/components/{FormProgressBar/FormProgressBar.js → ProgressTracker/ProgressTracker.js} +18 -18
  15. package/dist/esm/components/{FormProgressBar/FormProgressBar.js.map → ProgressTracker/ProgressTracker.js.map} +1 -1
  16. package/dist/esm/components/ProgressTracker/index.js +3 -0
  17. package/dist/esm/components/{FormProgressBar → ProgressTracker}/index.js.map +1 -1
  18. package/dist/esm/components/index.js +1 -1
  19. package/dist/styles/components/DataTable.css +17 -0
  20. package/dist/{esm/components/FormProgressBar/FormProgressBar.css → styles/components/ProgressTracker.css} +28 -22
  21. package/dist/styles/index.css +899 -876
  22. package/dist/styles/muka-dark.css +899 -876
  23. package/dist/styles/muka-light.css +899 -876
  24. package/dist/styles/tokens-bouwplan-dark.css +391 -391
  25. package/dist/styles/tokens-bouwplan-light.css +387 -387
  26. package/dist/styles/wireframe-dark.css +899 -876
  27. package/dist/styles/wireframe-light.css +899 -876
  28. package/dist/types/components/DataPieChart/DataPieChart.d.ts +1 -1
  29. package/dist/types/components/DataPieChart/DataPieChart.d.ts.map +1 -1
  30. package/dist/types/components/{FormProgressBar/FormProgressBar.d.ts → ProgressTracker/ProgressTracker.d.ts} +9 -9
  31. package/dist/types/components/{FormProgressBar/FormProgressBar.d.ts.map → ProgressTracker/ProgressTracker.d.ts.map} +1 -1
  32. package/dist/types/components/ProgressTracker/index.d.ts +3 -0
  33. package/dist/types/components/{FormProgressBar → ProgressTracker}/index.d.ts.map +1 -1
  34. package/dist/types/components/index.d.ts +1 -1
  35. package/package.json +1 -1
  36. package/tokens/t2-alias/brand/bouwplan/dark.json +45 -45
  37. package/tokens/t2-alias/brand/bouwplan/fonts.json +6 -6
  38. package/tokens/t2-alias/brand/bouwplan/light.json +43 -43
  39. package/dist/cjs/components/FormProgressBar/index.js +0 -8
  40. package/dist/esm/components/FormProgressBar/index.js +0 -3
  41. package/dist/types/components/FormProgressBar/index.d.ts +0 -3
package/dist/cjs/components/DataPieChart/DataPieChart.js CHANGED
@@ -17,7 +17,7 @@ const GEOMETRY = {
17
17
  *
18
18
  * Variants: donut (default), pie
19
19
  */
20
- const DataPieChart = ({ value, max = 100, variant = 'donut', size = 120, color = 'var(--color-state-info-default)', trackColor = 'var(--color-surface-level0)', showValue = false, className = '', 'aria-label': ariaLabel, ...props }) => {
20
+ const DataPieChart = ({ value, max = 100, variant = 'donut', size = 120, color = 'var(--color-action-default)', trackColor = 'var(--color-surface-level0)', showValue = false, className = '', 'aria-label': ariaLabel, ...props }) => {
21
21
  const { radius, strokeWidth } = GEOMETRY[variant];
22
22
  const circumference = 2 * Math.PI * radius;
23
23
  const safeMax = max > 0 ? max : 1;
package/dist/cjs/components/DataPieChart/DataPieChart.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DataPieChart.js","sourceRoot":"","sources":["../../../../components/DataPieChart/DataPieChart.tsx"],"names":[],"mappings":";;;;AACA,8BAA4B;AA+B5B,4EAA4E;AAC5E,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;IACtC,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;CAC5B,CAAC;AAEX;;;;;;;;GAQG;AACI,MAAM,YAAY,GAAgC,CAAC,EACxD,KAAK,EACL,GAAG,GAAG,GAAG,EACT,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,iCAAiC,EACzC,UAAU,GAAG,6BAA6B,EAC1C,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;IAE3C,MAAM,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;IAC3C,MAAM,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;IAE3C,MAAM,YAAY,GAAG;QACnB,qBAAqB;QACrB,wBAAwB,OAAO,EAAE;QACjC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,KAAK,GAAG,SAAS,IAAI,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,OAAO,GAAG,CAAC;IAEzF,OAAO,CACL,iCACE,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EACpC,IAAI,EAAC,KAAK,gBACE,KAAK,KACb,KAAK,aAET,iCAAK,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAC,aAAa,iBAAa,MAAM,aAEhF,mCACE,SAAS,EAAC,4BAA4B,EACtC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,UAAU,GAClB,EACD,QAAQ,GAAG,CAAC,IAAI,CACf,mCACE,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,KAAK,EACb,eAAe,EAAE,GAAG,SAAS,IAAI,aAAa,GAAG,SAAS,EAAE,EAC5D,gBAAgB,EAAE,CAAC,GACnB,CACH,IACG,EACL,SAAS,IAAI,OAAO,KAAK,OAAO,IAAI,CACnC,kCAAM,SAAS,EAAC,4BAA4B,iBAAa,MAAM,aAC5D,OAAO,SACH,CACR,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AApEW,QAAA,YAAY,gBAoEvB;AAEF,kBAAe,oBAAY,CAAC"}
1
+ {"version":3,"file":"DataPieChart.js","sourceRoot":"","sources":["../../../../components/DataPieChart/DataPieChart.tsx"],"names":[],"mappings":";;;;AACA,8BAA4B;AA+B5B,4EAA4E;AAC5E,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;IACtC,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;CAC5B,CAAC;AAEX;;;;;;;;GAQG;AACI,MAAM,YAAY,GAAgC,CAAC,EACxD,KAAK,EACL,GAAG,GAAG,GAAG,EACT,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,6BAA6B,EACrC,UAAU,GAAG,6BAA6B,EAC1C,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;IAE3C,MAAM,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;IAC3C,MAAM,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;IAE3C,MAAM,YAAY,GAAG;QACnB,qBAAqB;QACrB,wBAAwB,OAAO,EAAE;QACjC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,KAAK,GAAG,SAAS,IAAI,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,OAAO,GAAG,CAAC;IAEzF,OAAO,CACL,iCACE,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EACpC,IAAI,EAAC,KAAK,gBACE,KAAK,KACb,KAAK,aAET,iCAAK,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAC,aAAa,iBAAa,MAAM,aAEhF,mCACE,SAAS,EAAC,4BAA4B,EACtC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,UAAU,GAClB,EACD,QAAQ,GAAG,CAAC,IAAI,CACf,mCACE,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,KAAK,EACb,eAAe,EAAE,GAAG,SAAS,IAAI,aAAa,GAAG,SAAS,EAAE,EAC5D,gBAAgB,EAAE,CAAC,GACnB,CACH,IACG,EACL,SAAS,IAAI,OAAO,KAAK,OAAO,IAAI,CACnC,kCAAM,SAAS,EAAC,4BAA4B,iBAAa,MAAM,aAC5D,OAAO,SACH,CACR,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AApEW,QAAA,YAAY,gBAoEvB;AAEF,kBAAe,oBAAY,CAAC"}
package/dist/cjs/components/DataTable/DataTable.css CHANGED
@@ -341,6 +341,10 @@
341
341
  min-content, collapsing the flexible (1fr) stack track to 0. */
342
342
  .muka-data-table--responsive {
343
343
  display: block;
344
+ /* Collapsed cards always use md cell padding regardless of the table's `size`
345
+ — sm is too tight and lg wastes horizontal room, forcing the name to wrap. */
346
+ --dt-pad-x: var(--datatable-cell-padding-x-md);
347
+ --dt-pad-y: var(--datatable-cell-padding-y-md);
344
348
  }
345
349
 
346
350
  .muka-data-table--responsive .muka-data-table__body {
@@ -384,6 +388,11 @@
384
388
  .muka-data-table--responsive .muka-data-table__td--m-secondary {
385
389
  display: block;
386
390
  grid-column: 2;
391
+ /* Hug the widest secondary content (e.g. a status badge). The desktop column's
392
+ min/max-width are inline styles, so `!important` is required to drop them and
393
+ let the `auto` grid track shrink to the badge — freeing space for the name. */
394
+ min-width: 0 !important;
395
+ max-width: none !important;
387
396
  }
388
397
 
389
398
  .muka-data-table--responsive .muka-data-table__td--action {
@@ -401,6 +410,14 @@
401
410
  justify-content: flex-end;
402
411
  }
403
412
 
413
+ /* Utility for cell content: hide a sub-element in the collapsed card. Use it to
414
+ drop a redundant text label next to a compact visual (e.g. the "75%" beside a
415
+ donut) so only the visual shows and the secondary column hugs to its width.
416
+ `display: none` also collapses any surrounding flex `gap`, leaving no gutter. */
417
+ .muka-data-table--responsive .muka-data-table__mobile-hidden {
418
+ display: none;
419
+ }
420
+
404
421
  /* Stacked primary column: first field is the title, the rest are subtitle lines. */
405
422
  .muka-data-table__stack {
406
423
  display: flex;
package/dist/cjs/components/{FormProgressBar/FormProgressBar.css → ProgressTracker/ProgressTracker.css} RENAMED
@@ -1,13 +1,13 @@
1
- /* FormProgressBar Component Styles — Using Muka Design Tokens */
1
+ /* ProgressTracker Component Styles — Using Muka Design Tokens */
2
2
 
3
3
  /* ─── Root ──────────────────────────────────────────────── */
4
- .muka-progress-bar {
4
+ .muka-progress-tracker {
5
5
  width: 100%;
6
6
  padding-bottom: var(--spacing-7);
7
7
  }
8
8
 
9
9
  /* ─── Track (layered container) ─────────────────────────── */
10
- .muka-progress-bar__track {
10
+ .muka-progress-tracker__track {
11
11
  position: relative;
12
12
  /* Vertical padding = (indicator size - connector height) / 2 = (32 - 4) / 2 = 14px */
13
13
  padding-top: 14px;
@@ -15,7 +15,7 @@
15
15
  }
16
16
 
17
17
  /* ─── Steps layer (on top) ──────────────────────────────── */
18
- .muka-progress-bar__steps {
18
+ .muka-progress-tracker__steps {
19
19
  position: absolute;
20
20
  inset: 0;
21
21
  display: flex;
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  /* ─── Individual step ───────────────────────────────────── */
28
- .muka-progress-bar__step {
28
+ .muka-progress-tracker__step {
29
29
  display: flex;
30
30
  flex-direction: column;
31
31
  align-items: center;
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  /* ─── Step indicator (circle) ───────────────────────────── */
37
- .muka-progress-bar__indicator {
37
+ .muka-progress-tracker__indicator {
38
38
  width: 32px;
39
39
  height: 32px;
40
40
  border-radius: var(--border-radius-full);
@@ -46,35 +46,35 @@
46
46
  }
47
47
 
48
48
  /* Past: dark accent contrast circle with white checkmark */
49
- .muka-progress-bar__indicator--past {
49
+ .muka-progress-tracker__indicator--past {
50
50
  background-color: var(--alias-color-accent-contrast);
51
51
  color: var(--color-text-default-inverse);
52
52
  cursor: pointer;
53
53
  }
54
54
 
55
- .muka-progress-bar__indicator--past:hover {
56
- opacity: 0.85;
55
+ .muka-progress-tracker__indicator--past:hover {
56
+ background-color: var(--alias-color-accent-pressed);
57
57
  }
58
58
 
59
- .muka-progress-bar__indicator--past:focus-visible {
59
+ .muka-progress-tracker__indicator--past:focus-visible {
60
60
  outline: 2px solid var(--color-border-focus);
61
61
  outline-offset: 2px;
62
62
  }
63
63
 
64
64
  /* Current: accent default circle with white number */
65
- .muka-progress-bar__indicator--current {
65
+ .muka-progress-tracker__indicator--current {
66
66
  background-color: var(--alias-color-accent-default);
67
67
  color: var(--color-text-default-inverse);
68
68
  }
69
69
 
70
70
  /* Upcoming: sunken/gray circle with dark number */
71
- .muka-progress-bar__indicator--upcoming {
71
+ .muka-progress-tracker__indicator--upcoming {
72
72
  background-color: var(--color-surface-sunken);
73
73
  color: var(--color-text-default-default);
74
74
  }
75
75
 
76
76
  /* ─── Step number text ──────────────────────────────────── */
77
- .muka-progress-bar__number {
77
+ .muka-progress-tracker__number {
78
78
  font-family: var(--text-label-md-bold-fontFamily);
79
79
  font-weight: var(--text-label-md-bold-fontWeight);
80
80
  font-size: var(--text-label-md-bold-fontSize);
@@ -84,13 +84,19 @@
84
84
  }
85
85
 
86
86
  /* ─── Checkmark icon ────────────────────────────────────── */
87
- .muka-progress-bar__check-icon {
87
+ .muka-progress-tracker__check-icon {
88
88
  width: 20px;
89
89
  height: 20px;
90
90
  }
91
91
 
92
+ /* Past checkmark uses inverse foreground, matching the active step number.
93
+ Scoped under the indicator to override the Icon component's default color. */
94
+ .muka-progress-tracker__indicator--past .muka-progress-tracker__check-icon {
95
+ color: var(--color-text-default-inverse);
96
+ }
97
+
92
98
  /* ─── Step label ────────────────────────────────────────── */
93
- .muka-progress-bar__label {
99
+ .muka-progress-tracker__label {
94
100
  font-family: var(--text-label-sm-regular-fontFamily);
95
101
  font-weight: var(--text-label-sm-regular-fontWeight);
96
102
  font-size: var(--text-label-sm-regular-fontSize);
@@ -104,13 +110,13 @@
104
110
  }
105
111
 
106
112
  /* Current step label is bold */
107
- .muka-progress-bar__label--current {
113
+ .muka-progress-tracker__label--current {
108
114
  font-family: var(--text-label-sm-bold-fontFamily);
109
115
  font-weight: var(--text-label-sm-bold-fontWeight);
110
116
  }
111
117
 
112
118
  /* ─── Connectors layer (behind indicators) ──────────────── */
113
- .muka-progress-bar__connectors {
119
+ .muka-progress-tracker__connectors {
114
120
  display: flex;
115
121
  align-items: center;
116
122
  /* Horizontal padding = indicator radius (32/2 = 16px) so lines meet circle centers */
@@ -121,19 +127,19 @@
121
127
  }
122
128
 
123
129
  /* ─── Individual connector line ─────────────────────────── */
124
- .muka-progress-bar__connector {
130
+ .muka-progress-tracker__connector {
125
131
  flex: 1 0 0;
126
132
  height: 4px;
127
133
  min-width: 1px;
128
134
  }
129
135
 
130
136
  /* Past: solid dark line */
131
- .muka-progress-bar__connector--past {
137
+ .muka-progress-tracker__connector--past {
132
138
  background-color: var(--alias-color-accent-contrast);
133
139
  }
134
140
 
135
141
  /* Current: gradient from past (dark) toward current step */
136
- .muka-progress-bar__connector--current {
142
+ .muka-progress-tracker__connector--current {
137
143
  background: linear-gradient(
138
144
  to right,
139
145
  var(--alias-color-accent-contrast) 0%,
@@ -142,7 +148,7 @@
142
148
  }
143
149
 
144
150
  /* Current-right: gradient fading from current step into upcoming */
145
- .muka-progress-bar__connector--current-right {
151
+ .muka-progress-tracker__connector--current-right {
146
152
  background: linear-gradient(
147
153
  to right,
148
154
  var(--alias-color-accent-default) 0%,
@@ -152,6 +158,6 @@
152
158
  }
153
159
 
154
160
  /* Upcoming: solid gray line */
155
- .muka-progress-bar__connector--upcoming {
161
+ .muka-progress-tracker__connector--upcoming {
156
162
  background-color: var(--color-surface-sunken);
157
163
  }
package/dist/cjs/components/{FormProgressBar/FormProgressBar.js → ProgressTracker/ProgressTracker.js} RENAMED
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.FormProgressBar = void 0;
3
+ exports.ProgressTracker = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
- require("./FormProgressBar.css");
5
+ require("./ProgressTracker.css");
6
6
  const Icon_1 = require("../Icon");
7
7
  function getStepStatus(stepIndex, currentStep, totalSteps) {
8
8
  if (currentStep <= 0)
@@ -32,7 +32,7 @@ function getConnectorStatus(connectorIndex, currentStep, totalSteps) {
32
32
  return 'upcoming';
33
33
  }
34
34
  /**
35
- * FormProgressBar Component
35
+ * ProgressTracker Component
36
36
  *
37
37
  * A horizontal stepper/progress indicator for multi-step forms.
38
38
  * Shows numbered step indicators connected by progress lines.
@@ -45,32 +45,32 @@ function getConnectorStatus(connectorIndex, currentStep, totalSteps) {
45
45
  * - Multi-brand theming through design tokens
46
46
  *
47
47
  * Tokens used:
48
- * - alias.color.accent.{default|contrast} — step indicator backgrounds
48
+ * - alias.color.accent.{default|contrast|pressed} — step indicator backgrounds
49
49
  * - color.surface.sunken — upcoming indicator/connector background
50
50
  * - color.text.default.{default|inverse} — indicator/label text
51
51
  * - text.label.{sm|md}.{regular|bold} — typography
52
52
  * - spacing.4, spacing.7 — layout spacing
53
53
  * - border.radius.full — circular indicators
54
54
  */
55
- const FormProgressBar = ({ steps, currentStep, onStepClick, className = '', }) => {
55
+ const ProgressTracker = ({ steps, currentStep, onStepClick, className = '', }) => {
56
56
  const totalSteps = steps.length;
57
- const rootClasses = ['muka-progress-bar', className].filter(Boolean).join(' ');
58
- return ((0, jsx_runtime_1.jsx)("div", { className: rootClasses, role: "group", "aria-label": "Form progress", children: (0, jsx_runtime_1.jsxs)("div", { className: "muka-progress-bar__track", children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-progress-bar__steps", children: steps.map((step, index) => {
57
+ const rootClasses = ['muka-progress-tracker', className].filter(Boolean).join(' ');
58
+ return ((0, jsx_runtime_1.jsx)("div", { className: rootClasses, role: "group", "aria-label": "Form progress", children: (0, jsx_runtime_1.jsxs)("div", { className: "muka-progress-tracker__track", children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-progress-tracker__steps", children: steps.map((step, index) => {
59
59
  const status = getStepStatus(index, currentStep, totalSteps);
60
60
  const stepNumber = index + 1;
61
61
  const isPast = status === 'past';
62
62
  const isCurrent = status === 'current';
63
63
  const stepClasses = [
64
- 'muka-progress-bar__step',
65
- `muka-progress-bar__step--${status}`,
64
+ 'muka-progress-tracker__step',
65
+ `muka-progress-tracker__step--${status}`,
66
66
  ].join(' ');
67
67
  const indicatorClasses = [
68
- 'muka-progress-bar__indicator',
69
- `muka-progress-bar__indicator--${status}`,
68
+ 'muka-progress-tracker__indicator',
69
+ `muka-progress-tracker__indicator--${status}`,
70
70
  ].join(' ');
71
71
  const labelClasses = [
72
- 'muka-progress-bar__label',
73
- isCurrent && 'muka-progress-bar__label--current',
72
+ 'muka-progress-tracker__label',
73
+ isCurrent && 'muka-progress-tracker__label--current',
74
74
  ].filter(Boolean).join(' ');
75
75
  const handleClick = isPast && onStepClick
76
76
  ? () => onStepClick(index)
@@ -86,16 +86,16 @@ const FormProgressBar = ({ steps, currentStep, onStepClick, className = '', }) =
86
86
  ? `Step ${stepNumber}: ${step.label} (completed)`
87
87
  : isCurrent
88
88
  ? `Step ${stepNumber}: ${step.label} (current)`
89
- : `Step ${stepNumber}: ${step.label}`, children: isPast ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", variant: "fill", size: "sm", className: "muka-progress-bar__check-icon" })) : ((0, jsx_runtime_1.jsx)("span", { className: "muka-progress-bar__number", children: stepNumber })) }), (0, jsx_runtime_1.jsx)("span", { className: labelClasses, children: step.label })] }, index));
90
- }) }), (0, jsx_runtime_1.jsx)("div", { className: "muka-progress-bar__connectors", children: Array.from({ length: totalSteps - 1 }, (_, index) => {
89
+ : `Step ${stepNumber}: ${step.label}`, children: isPast ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", variant: "fill", size: "sm", className: "muka-progress-tracker__check-icon" })) : ((0, jsx_runtime_1.jsx)("span", { className: "muka-progress-tracker__number", children: stepNumber })) }), (0, jsx_runtime_1.jsx)("span", { className: labelClasses, children: step.label })] }, index));
90
+ }) }), (0, jsx_runtime_1.jsx)("div", { className: "muka-progress-tracker__connectors", children: Array.from({ length: totalSteps - 1 }, (_, index) => {
91
91
  const status = getConnectorStatus(index, currentStep, totalSteps);
92
92
  const connectorClasses = [
93
- 'muka-progress-bar__connector',
94
- `muka-progress-bar__connector--${status}`,
93
+ 'muka-progress-tracker__connector',
94
+ `muka-progress-tracker__connector--${status}`,
95
95
  ].join(' ');
96
96
  return (0, jsx_runtime_1.jsx)("div", { className: connectorClasses, "aria-hidden": "true" }, index);
97
97
  }) })] }) }));
98
98
  };
99
- exports.FormProgressBar = FormProgressBar;
100
- exports.default = exports.FormProgressBar;
101
- //# sourceMappingURL=FormProgressBar.js.map
99
+ exports.ProgressTracker = ProgressTracker;
100
+ exports.default = exports.ProgressTracker;
101
+ //# sourceMappingURL=ProgressTracker.js.map
package/dist/cjs/components/{FormProgressBar/FormProgressBar.js.map → ProgressTracker/ProgressTracker.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"FormProgressBar.js","sourceRoot":"","sources":["../../../../components/FormProgressBar/FormProgressBar.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ProgressTracker.js","sourceRoot":"","sources":["../../../../components/ProgressTracker/ProgressTracker.tsx"],"names":[],"mappings":"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"}
package/dist/cjs/components/ProgressTracker/index.js ADDED
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = exports.ProgressTracker = void 0;
4
+ var ProgressTracker_1 = require("./ProgressTracker");
5
+ Object.defineProperty(exports, "ProgressTracker", { enumerable: true, get: function () { return ProgressTracker_1.ProgressTracker; } });
6
+ var ProgressTracker_2 = require("./ProgressTracker");
7
+ Object.defineProperty(exports, "default", { enumerable: true, get: function () { return ProgressTracker_2.ProgressTracker; } });
8
+ //# sourceMappingURL=index.js.map
package/dist/cjs/components/{FormProgressBar → ProgressTracker}/index.js.map RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/FormProgressBar/index.ts"],"names":[],"mappings":";;;AAAA,qDAAyG;AAAhG,kHAAA,eAAe,OAAA;AACxB,qDAA+D;AAAtD,0GAAA,eAAe,OAAW"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ProgressTracker/index.ts"],"names":[],"mappings":";;;AAAA,qDAAyG;AAAhG,kHAAA,eAAe,OAAA;AACxB,qDAA+D;AAAtD,0GAAA,eAAe,OAAW"}
package/dist/cjs/components/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DataTable = exports.useTableSelection = exports.TablePagination = exports.TableHeaderCell = exports.TableCell = exports.TableRow = exports.TableBody = exports.TableHead = exports.Table = exports.RangeSlider = exports.DataPieChart = exports.PieChart = exports.Progress = exports.ProfileBadge = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Container = exports.Section = exports.NavigationTransition = exports.AppShell = exports.View = exports.Dialog = exports.BottomBarTab = exports.BottomBar = exports.ControlBar = exports.TopBar = exports.FormProgressBar = exports.EmptyState = exports.Toast = exports.Alert = exports.RadioTile = exports.CheckboxTile = exports.Toggle = exports.Checkbox = exports.Radio = exports.TabPanel = exports.Tab = exports.TabList = exports.Tabs = exports.Select = exports.Divider = exports.Chip = exports.Icon = exports.Label = exports.Card = exports.NumberInput = exports.Input = exports.ListItem = exports.Button = void 0;
3
+ exports.DataTable = exports.useTableSelection = exports.TablePagination = exports.TableHeaderCell = exports.TableCell = exports.TableRow = exports.TableBody = exports.TableHead = exports.Table = exports.RangeSlider = exports.DataPieChart = exports.PieChart = exports.Progress = exports.ProfileBadge = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Container = exports.Section = exports.NavigationTransition = exports.AppShell = exports.View = exports.Dialog = exports.BottomBarTab = exports.BottomBar = exports.ControlBar = exports.TopBar = exports.ProgressTracker = exports.EmptyState = exports.Toast = exports.Alert = exports.RadioTile = exports.CheckboxTile = exports.Toggle = exports.Checkbox = exports.Radio = exports.TabPanel = exports.Tab = exports.TabList = exports.Tabs = exports.Select = exports.Divider = exports.Chip = exports.Icon = exports.Label = exports.Card = exports.NumberInput = exports.Input = exports.ListItem = exports.Button = void 0;
4
4
  exports.SpecList = exports.Spinner = exports.Sheet = exports.AccordionContent = exports.AccordionTrigger = exports.AccordionItem = exports.Accordion = exports.PopoverClose = exports.PopoverTrigger = exports.PopoverRoot = exports.PopoverContent = exports.Popover = exports.Tooltip = exports.Drawer = exports.Pagination = exports.Breadcrumb = exports.Skeleton = exports.Textarea = exports.ContextMenuSubContent = exports.ContextMenuSubTrigger = exports.ContextMenuSub = exports.ContextMenuRadioItem = exports.ContextMenuRadioGroup = exports.ContextMenuCheckboxItem = exports.ContextMenuGroup = exports.ContextMenuSeparator = exports.ContextMenuItem = exports.ContextMenuContent = exports.ContextMenuTrigger = exports.ContextMenu = exports.MenuSubContent = exports.MenuSubTrigger = exports.MenuSub = exports.MenuRadioItem = exports.MenuRadioGroup = exports.MenuCheckboxItem = exports.MenuGroup = exports.MenuSeparator = exports.MenuItem = exports.MenuContent = exports.MenuTrigger = exports.Menu = exports.FileUploadItem = exports.FileUpload = exports.SmsOtpField = exports.DocumentViewer = exports.Tile = exports.PriceTag = exports.SegmentGroup = exports.DatePicker = void 0;
5
5
  exports.LicensePlateInput = exports.PullToRefresh = exports.SwipeActions = exports.Combobox = exports.ChatAttachmentChip = exports.TypingIndicator = exports.AgentTaskList = exports.ChatComposer = exports.ChatMessageList = exports.ChatBubble = exports.SearchInput = exports.ActionSheet = exports.FAB = exports.SpecRow = void 0;
6
6
  // Muka Design System Components
@@ -45,8 +45,8 @@ var Toast_1 = require("./Toast");
45
45
  Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.Toast; } });
46
46
  var EmptyState_1 = require("./EmptyState");
47
47
  Object.defineProperty(exports, "EmptyState", { enumerable: true, get: function () { return EmptyState_1.EmptyState; } });
48
- var FormProgressBar_1 = require("./FormProgressBar");
49
- Object.defineProperty(exports, "FormProgressBar", { enumerable: true, get: function () { return FormProgressBar_1.FormProgressBar; } });
48
+ var ProgressTracker_1 = require("./ProgressTracker");
49
+ Object.defineProperty(exports, "ProgressTracker", { enumerable: true, get: function () { return ProgressTracker_1.ProgressTracker; } });
50
50
  var TopBar_1 = require("./TopBar");
51
51
  Object.defineProperty(exports, "TopBar", { enumerable: true, get: function () { return TopBar_1.TopBar; } });
52
52
  Object.defineProperty(exports, "ControlBar", { enumerable: true, get: function () { return TopBar_1.ControlBar; } });
package/dist/esm/components/DataPieChart/DataPieChart.js CHANGED
@@ -14,7 +14,7 @@ const GEOMETRY = {
14
14
  *
15
15
  * Variants: donut (default), pie
16
16
  */
17
- export const DataPieChart = ({ value, max = 100, variant = 'donut', size = 120, color = 'var(--color-state-info-default)', trackColor = 'var(--color-surface-level0)', showValue = false, className = '', 'aria-label': ariaLabel, ...props }) => {
17
+ export const DataPieChart = ({ value, max = 100, variant = 'donut', size = 120, color = 'var(--color-action-default)', trackColor = 'var(--color-surface-level0)', showValue = false, className = '', 'aria-label': ariaLabel, ...props }) => {
18
18
  const { radius, strokeWidth } = GEOMETRY[variant];
19
19
  const circumference = 2 * Math.PI * radius;
20
20
  const safeMax = max > 0 ? max : 1;
package/dist/esm/components/DataPieChart/DataPieChart.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DataPieChart.js","sourceRoot":"","sources":["../../../../components/DataPieChart/DataPieChart.tsx"],"names":[],"mappings":";AACA,OAAO,oBAAoB,CAAC;AA+B5B,4EAA4E;AAC5E,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;IACtC,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;CAC5B,CAAC;AAEX;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,KAAK,EACL,GAAG,GAAG,GAAG,EACT,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,iCAAiC,EACzC,UAAU,GAAG,6BAA6B,EAC1C,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;IAE3C,MAAM,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;IAC3C,MAAM,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;IAE3C,MAAM,YAAY,GAAG;QACnB,qBAAqB;QACrB,wBAAwB,OAAO,EAAE;QACjC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,KAAK,GAAG,SAAS,IAAI,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,OAAO,GAAG,CAAC;IAEzF,OAAO,CACL,eACE,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EACpC,IAAI,EAAC,KAAK,gBACE,KAAK,KACb,KAAK,aAET,eAAK,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAC,aAAa,iBAAa,MAAM,aAEhF,iBACE,SAAS,EAAC,4BAA4B,EACtC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,UAAU,GAClB,EACD,QAAQ,GAAG,CAAC,IAAI,CACf,iBACE,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,KAAK,EACb,eAAe,EAAE,GAAG,SAAS,IAAI,aAAa,GAAG,SAAS,EAAE,EAC5D,gBAAgB,EAAE,CAAC,GACnB,CACH,IACG,EACL,SAAS,IAAI,OAAO,KAAK,OAAO,IAAI,CACnC,gBAAM,SAAS,EAAC,4BAA4B,iBAAa,MAAM,aAC5D,OAAO,SACH,CACR,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"DataPieChart.js","sourceRoot":"","sources":["../../../../components/DataPieChart/DataPieChart.tsx"],"names":[],"mappings":";AACA,OAAO,oBAAoB,CAAC;AA+B5B,4EAA4E;AAC5E,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;IACtC,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;CAC5B,CAAC;AAEX;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,KAAK,EACL,GAAG,GAAG,GAAG,EACT,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,6BAA6B,EACrC,UAAU,GAAG,6BAA6B,EAC1C,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;IAE3C,MAAM,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;IAC3C,MAAM,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;IAE3C,MAAM,YAAY,GAAG;QACnB,qBAAqB;QACrB,wBAAwB,OAAO,EAAE;QACjC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,KAAK,GAAG,SAAS,IAAI,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,OAAO,GAAG,CAAC;IAEzF,OAAO,CACL,eACE,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EACpC,IAAI,EAAC,KAAK,gBACE,KAAK,KACb,KAAK,aAET,eAAK,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAC,aAAa,iBAAa,MAAM,aAEhF,iBACE,SAAS,EAAC,4BAA4B,EACtC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,UAAU,GAClB,EACD,QAAQ,GAAG,CAAC,IAAI,CACf,iBACE,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,KAAK,EACb,eAAe,EAAE,GAAG,SAAS,IAAI,aAAa,GAAG,SAAS,EAAE,EAC5D,gBAAgB,EAAE,CAAC,GACnB,CACH,IACG,EACL,SAAS,IAAI,OAAO,KAAK,OAAO,IAAI,CACnC,gBAAM,SAAS,EAAC,4BAA4B,iBAAa,MAAM,aAC5D,OAAO,SACH,CACR,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
package/dist/esm/components/DataTable/DataTable.css CHANGED
@@ -341,6 +341,10 @@
341
341
  min-content, collapsing the flexible (1fr) stack track to 0. */
342
342
  .muka-data-table--responsive {
343
343
  display: block;
344
+ /* Collapsed cards always use md cell padding regardless of the table's `size`
345
+ — sm is too tight and lg wastes horizontal room, forcing the name to wrap. */
346
+ --dt-pad-x: var(--datatable-cell-padding-x-md);
347
+ --dt-pad-y: var(--datatable-cell-padding-y-md);
344
348
  }
345
349
 
346
350
  .muka-data-table--responsive .muka-data-table__body {
@@ -384,6 +388,11 @@
384
388
  .muka-data-table--responsive .muka-data-table__td--m-secondary {
385
389
  display: block;
386
390
  grid-column: 2;
391
+ /* Hug the widest secondary content (e.g. a status badge). The desktop column's
392
+ min/max-width are inline styles, so `!important` is required to drop them and
393
+ let the `auto` grid track shrink to the badge — freeing space for the name. */
394
+ min-width: 0 !important;
395
+ max-width: none !important;
387
396
  }
388
397
 
389
398
  .muka-data-table--responsive .muka-data-table__td--action {
@@ -401,6 +410,14 @@
401
410
  justify-content: flex-end;
402
411
  }
403
412
 
413
+ /* Utility for cell content: hide a sub-element in the collapsed card. Use it to
414
+ drop a redundant text label next to a compact visual (e.g. the "75%" beside a
415
+ donut) so only the visual shows and the secondary column hugs to its width.
416
+ `display: none` also collapses any surrounding flex `gap`, leaving no gutter. */
417
+ .muka-data-table--responsive .muka-data-table__mobile-hidden {
418
+ display: none;
419
+ }
420
+
404
421
  /* Stacked primary column: first field is the title, the rest are subtitle lines. */
405
422
  .muka-data-table__stack {
406
423
  display: flex;
package/dist/{styles/components/FormProgressBar.css → esm/components/ProgressTracker/ProgressTracker.css} RENAMED
@@ -1,13 +1,13 @@
1
- /* FormProgressBar Component Styles — Using Muka Design Tokens */
1
+ /* ProgressTracker Component Styles — Using Muka Design Tokens */
2
2
 
3
3
  /* ─── Root ──────────────────────────────────────────────── */
4
- .muka-progress-bar {
4
+ .muka-progress-tracker {
5
5
  width: 100%;
6
6
  padding-bottom: var(--spacing-7);
7
7
  }
8
8
 
9
9
  /* ─── Track (layered container) ─────────────────────────── */
10
- .muka-progress-bar__track {
10
+ .muka-progress-tracker__track {
11
11
  position: relative;
12
12
  /* Vertical padding = (indicator size - connector height) / 2 = (32 - 4) / 2 = 14px */
13
13
  padding-top: 14px;
@@ -15,7 +15,7 @@
15
15
  }
16
16
 
17
17
  /* ─── Steps layer (on top) ──────────────────────────────── */
18
- .muka-progress-bar__steps {
18
+ .muka-progress-tracker__steps {
19
19
  position: absolute;
20
20
  inset: 0;
21
21
  display: flex;
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  /* ─── Individual step ───────────────────────────────────── */
28
- .muka-progress-bar__step {
28
+ .muka-progress-tracker__step {
29
29
  display: flex;
30
30
  flex-direction: column;
31
31
  align-items: center;
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  /* ─── Step indicator (circle) ───────────────────────────── */
37
- .muka-progress-bar__indicator {
37
+ .muka-progress-tracker__indicator {
38
38
  width: 32px;
39
39
  height: 32px;
40
40
  border-radius: var(--border-radius-full);
@@ -46,35 +46,35 @@
46
46
  }
47
47
 
48
48
  /* Past: dark accent contrast circle with white checkmark */
49
- .muka-progress-bar__indicator--past {
49
+ .muka-progress-tracker__indicator--past {
50
50
  background-color: var(--alias-color-accent-contrast);
51
51
  color: var(--color-text-default-inverse);
52
52
  cursor: pointer;
53
53
  }
54
54
 
55
- .muka-progress-bar__indicator--past:hover {
56
- opacity: 0.85;
55
+ .muka-progress-tracker__indicator--past:hover {
56
+ background-color: var(--alias-color-accent-pressed);
57
57
  }
58
58
 
59
- .muka-progress-bar__indicator--past:focus-visible {
59
+ .muka-progress-tracker__indicator--past:focus-visible {
60
60
  outline: 2px solid var(--color-border-focus);
61
61
  outline-offset: 2px;
62
62
  }
63
63
 
64
64
  /* Current: accent default circle with white number */
65
- .muka-progress-bar__indicator--current {
65
+ .muka-progress-tracker__indicator--current {
66
66
  background-color: var(--alias-color-accent-default);
67
67
  color: var(--color-text-default-inverse);
68
68
  }
69
69
 
70
70
  /* Upcoming: sunken/gray circle with dark number */
71
- .muka-progress-bar__indicator--upcoming {
71
+ .muka-progress-tracker__indicator--upcoming {
72
72
  background-color: var(--color-surface-sunken);
73
73
  color: var(--color-text-default-default);
74
74
  }
75
75
 
76
76
  /* ─── Step number text ──────────────────────────────────── */
77
- .muka-progress-bar__number {
77
+ .muka-progress-tracker__number {
78
78
  font-family: var(--text-label-md-bold-fontFamily);
79
79
  font-weight: var(--text-label-md-bold-fontWeight);
80
80
  font-size: var(--text-label-md-bold-fontSize);
@@ -84,13 +84,19 @@
84
84
  }
85
85
 
86
86
  /* ─── Checkmark icon ────────────────────────────────────── */
87
- .muka-progress-bar__check-icon {
87
+ .muka-progress-tracker__check-icon {
88
88
  width: 20px;
89
89
  height: 20px;
90
90
  }
91
91
 
92
+ /* Past checkmark uses inverse foreground, matching the active step number.
93
+ Scoped under the indicator to override the Icon component's default color. */
94
+ .muka-progress-tracker__indicator--past .muka-progress-tracker__check-icon {
95
+ color: var(--color-text-default-inverse);
96
+ }
97
+
92
98
  /* ─── Step label ────────────────────────────────────────── */
93
- .muka-progress-bar__label {
99
+ .muka-progress-tracker__label {
94
100
  font-family: var(--text-label-sm-regular-fontFamily);
95
101
  font-weight: var(--text-label-sm-regular-fontWeight);
96
102
  font-size: var(--text-label-sm-regular-fontSize);
@@ -104,13 +110,13 @@
104
110
  }
105
111
 
106
112
  /* Current step label is bold */
107
- .muka-progress-bar__label--current {
113
+ .muka-progress-tracker__label--current {
108
114
  font-family: var(--text-label-sm-bold-fontFamily);
109
115
  font-weight: var(--text-label-sm-bold-fontWeight);
110
116
  }
111
117
 
112
118
  /* ─── Connectors layer (behind indicators) ──────────────── */
113
- .muka-progress-bar__connectors {
119
+ .muka-progress-tracker__connectors {
114
120
  display: flex;
115
121
  align-items: center;
116
122
  /* Horizontal padding = indicator radius (32/2 = 16px) so lines meet circle centers */
@@ -121,19 +127,19 @@
121
127
  }
122
128
 
123
129
  /* ─── Individual connector line ─────────────────────────── */
124
- .muka-progress-bar__connector {
130
+ .muka-progress-tracker__connector {
125
131
  flex: 1 0 0;
126
132
  height: 4px;
127
133
  min-width: 1px;
128
134
  }
129
135
 
130
136
  /* Past: solid dark line */
131
- .muka-progress-bar__connector--past {
137
+ .muka-progress-tracker__connector--past {
132
138
  background-color: var(--alias-color-accent-contrast);
133
139
  }
134
140
 
135
141
  /* Current: gradient from past (dark) toward current step */
136
- .muka-progress-bar__connector--current {
142
+ .muka-progress-tracker__connector--current {
137
143
  background: linear-gradient(
138
144
  to right,
139
145
  var(--alias-color-accent-contrast) 0%,
@@ -142,7 +148,7 @@
142
148
  }
143
149
 
144
150
  /* Current-right: gradient fading from current step into upcoming */
145
- .muka-progress-bar__connector--current-right {
151
+ .muka-progress-tracker__connector--current-right {
146
152
  background: linear-gradient(
147
153
  to right,
148
154
  var(--alias-color-accent-default) 0%,
@@ -152,6 +158,6 @@
152
158
  }
153
159
 
154
160
  /* Upcoming: solid gray line */
155
- .muka-progress-bar__connector--upcoming {
161
+ .muka-progress-tracker__connector--upcoming {
156
162
  background-color: var(--color-surface-sunken);
157
163
  }