@melodicdev/components 1.3.0 → 1.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 (240) hide show
  1. package/assets/melodic-components.js +3550 -1656
  2. package/assets/melodic-components.js.map +1 -1
  3. package/assets/melodic-components.min.js +5497 -3605
  4. package/lib/components/data-display/activity-feed/activity-feed-item.component.d.ts +5 -3
  5. package/lib/components/data-display/activity-feed/activity-feed-item.component.d.ts.map +1 -1
  6. package/lib/components/data-display/activity-feed/activity-feed-item.component.js +6 -1
  7. package/lib/components/data-display/activity-feed/activity-feed-item.styles.d.ts.map +1 -1
  8. package/lib/components/data-display/activity-feed/activity-feed-item.styles.js +80 -31
  9. package/lib/components/data-display/activity-feed/activity-feed-item.template.d.ts.map +1 -1
  10. package/lib/components/data-display/activity-feed/activity-feed-item.template.js +2 -1
  11. package/lib/components/data-display/activity-feed/activity-feed.component.d.ts.map +1 -1
  12. package/lib/components/data-display/activity-feed/activity-feed.styles.d.ts.map +1 -1
  13. package/lib/components/data-display/activity-feed/activity-feed.styles.js +5 -1
  14. package/lib/components/data-display/avatar/avatar.component.d.ts.map +1 -1
  15. package/lib/components/data-display/avatar/avatar.styles.d.ts.map +1 -1
  16. package/lib/components/data-display/avatar/avatar.styles.js +18 -7
  17. package/lib/components/data-display/badge/badge.component.d.ts +2 -0
  18. package/lib/components/data-display/badge/badge.component.d.ts.map +1 -1
  19. package/lib/components/data-display/badge/badge.component.js +3 -1
  20. package/lib/components/data-display/badge/badge.styles.d.ts.map +1 -1
  21. package/lib/components/data-display/badge/badge.styles.js +35 -10
  22. package/lib/components/data-display/badge/badge.template.d.ts.map +1 -1
  23. package/lib/components/data-display/badge/badge.template.js +4 -1
  24. package/lib/components/data-display/badge-group/badge-group.component.d.ts.map +1 -1
  25. package/lib/components/data-display/badge-group/badge-group.styles.d.ts.map +1 -1
  26. package/lib/components/data-display/badge-group/badge-group.styles.js +29 -14
  27. package/lib/components/data-display/calendar-view/calendar-view.component.d.ts.map +1 -1
  28. package/lib/components/data-display/calendar-view/calendar-view.styles.d.ts.map +1 -1
  29. package/lib/components/data-display/calendar-view/calendar-view.styles.js +155 -89
  30. package/lib/components/data-display/data-grid/data-grid.component.d.ts.map +1 -1
  31. package/lib/components/data-display/data-grid/data-grid.styles.d.ts.map +1 -1
  32. package/lib/components/data-display/data-grid/data-grid.styles.js +117 -61
  33. package/lib/components/data-display/list/list-item.component.d.ts.map +1 -1
  34. package/lib/components/data-display/list/list-item.styles.d.ts.map +1 -1
  35. package/lib/components/data-display/list/list-item.styles.js +35 -13
  36. package/lib/components/data-display/list/list.component.d.ts.map +1 -1
  37. package/lib/components/data-display/list/list.styles.d.ts.map +1 -1
  38. package/lib/components/data-display/list/list.styles.js +5 -1
  39. package/lib/components/data-display/profile-card/index.d.ts +2 -0
  40. package/lib/components/data-display/profile-card/index.d.ts.map +1 -0
  41. package/lib/components/data-display/profile-card/index.js +1 -0
  42. package/lib/components/data-display/profile-card/profile-card.component.d.ts +61 -0
  43. package/lib/components/data-display/profile-card/profile-card.component.d.ts.map +1 -0
  44. package/lib/components/data-display/profile-card/profile-card.component.js +102 -0
  45. package/lib/components/data-display/profile-card/profile-card.styles.d.ts +2 -0
  46. package/lib/components/data-display/profile-card/profile-card.styles.d.ts.map +1 -0
  47. package/lib/components/data-display/profile-card/profile-card.styles.js +182 -0
  48. package/lib/components/data-display/profile-card/profile-card.template.d.ts +3 -0
  49. package/lib/components/data-display/profile-card/profile-card.template.d.ts.map +1 -0
  50. package/lib/components/data-display/profile-card/profile-card.template.js +52 -0
  51. package/lib/components/data-display/stat-card/index.d.ts +2 -0
  52. package/lib/components/data-display/stat-card/index.d.ts.map +1 -0
  53. package/lib/components/data-display/stat-card/index.js +1 -0
  54. package/lib/components/data-display/stat-card/stat-card.component.d.ts +45 -0
  55. package/lib/components/data-display/stat-card/stat-card.component.d.ts.map +1 -0
  56. package/lib/components/data-display/stat-card/stat-card.component.js +59 -0
  57. package/lib/components/data-display/stat-card/stat-card.styles.d.ts +2 -0
  58. package/lib/components/data-display/stat-card/stat-card.styles.d.ts.map +1 -0
  59. package/lib/components/data-display/stat-card/stat-card.styles.js +119 -0
  60. package/lib/components/data-display/stat-card/stat-card.template.d.ts +3 -0
  61. package/lib/components/data-display/stat-card/stat-card.template.d.ts.map +1 -0
  62. package/lib/components/data-display/stat-card/stat-card.template.js +27 -0
  63. package/lib/components/data-display/table/table.component.d.ts.map +1 -1
  64. package/lib/components/data-display/table/table.styles.d.ts.map +1 -1
  65. package/lib/components/data-display/table/table.styles.js +61 -23
  66. package/lib/components/data-display/tag/tag.component.d.ts.map +1 -1
  67. package/lib/components/data-display/tag/tag.styles.d.ts.map +1 -1
  68. package/lib/components/data-display/tag/tag.styles.js +62 -25
  69. package/lib/components/feedback/alert/alert.component.d.ts.map +1 -1
  70. package/lib/components/feedback/alert/alert.styles.d.ts.map +1 -1
  71. package/lib/components/feedback/alert/alert.styles.js +41 -17
  72. package/lib/components/feedback/progress/progress.component.d.ts.map +1 -1
  73. package/lib/components/feedback/progress/progress.styles.d.ts.map +1 -1
  74. package/lib/components/feedback/progress/progress.styles.js +112 -56
  75. package/lib/components/feedback/spinner/spinner.component.d.ts.map +1 -1
  76. package/lib/components/feedback/spinner/spinner.styles.d.ts.map +1 -1
  77. package/lib/components/feedback/spinner/spinner.styles.js +32 -16
  78. package/lib/components/feedback/toast/toast-container.component.d.ts.map +1 -1
  79. package/lib/components/feedback/toast/toast.component.d.ts.map +1 -1
  80. package/lib/components/feedback/toast/toast.service.d.ts.map +1 -1
  81. package/lib/components/feedback/toast/toast.styles.d.ts.map +1 -1
  82. package/lib/components/feedback/toast/toast.styles.js +69 -26
  83. package/lib/components/forms/autocomplete/autocomplete.component.d.ts.map +1 -1
  84. package/lib/components/forms/autocomplete/autocomplete.styles.d.ts.map +1 -1
  85. package/lib/components/forms/autocomplete/autocomplete.styles.js +164 -76
  86. package/lib/components/forms/button/button.component.d.ts.map +1 -1
  87. package/lib/components/forms/button/button.styles.d.ts.map +1 -1
  88. package/lib/components/forms/button/button.styles.js +141 -116
  89. package/lib/components/forms/button-group/button-group-item.component.d.ts.map +1 -1
  90. package/lib/components/forms/button-group/button-group.component.d.ts.map +1 -1
  91. package/lib/components/forms/button-group/button-group.styles.d.ts.map +1 -1
  92. package/lib/components/forms/button-group/button-group.styles.js +8 -2
  93. package/lib/components/forms/checkbox/checkbox.component.d.ts.map +1 -1
  94. package/lib/components/forms/checkbox/checkbox.styles.d.ts.map +1 -1
  95. package/lib/components/forms/checkbox/checkbox.styles.js +75 -41
  96. package/lib/components/forms/date-picker/calendar.component.d.ts.map +1 -1
  97. package/lib/components/forms/date-picker/calendar.styles.d.ts.map +1 -1
  98. package/lib/components/forms/date-picker/calendar.styles.js +108 -47
  99. package/lib/components/forms/date-picker/date-picker.component.d.ts.map +1 -1
  100. package/lib/components/forms/date-picker/date-picker.styles.d.ts.map +1 -1
  101. package/lib/components/forms/date-picker/date-picker.styles.js +96 -38
  102. package/lib/components/forms/date-time-picker/date-time-picker.component.d.ts.map +1 -1
  103. package/lib/components/forms/date-time-picker/date-time-picker.styles.d.ts.map +1 -1
  104. package/lib/components/forms/date-time-picker/date-time-picker.styles.js +65 -25
  105. package/lib/components/forms/file-upload/file-icon.component.d.ts.map +1 -1
  106. package/lib/components/forms/file-upload/file-upload-item.component.d.ts.map +1 -1
  107. package/lib/components/forms/file-upload/file-upload.component.d.ts +2 -2
  108. package/lib/components/forms/file-upload/file-upload.component.d.ts.map +1 -1
  109. package/lib/components/forms/file-upload/file-upload.component.js +3 -3
  110. package/lib/components/forms/file-upload/file-upload.styles.d.ts.map +1 -1
  111. package/lib/components/forms/file-upload/file-upload.styles.js +92 -39
  112. package/lib/components/forms/form-field/form-field.component.d.ts.map +1 -1
  113. package/lib/components/forms/form-field/form-field.styles.d.ts.map +1 -1
  114. package/lib/components/forms/form-field/form-field.styles.js +72 -29
  115. package/lib/components/forms/input/input.component.d.ts.map +1 -1
  116. package/lib/components/forms/input/input.styles.d.ts.map +1 -1
  117. package/lib/components/forms/input/input.styles.js +81 -29
  118. package/lib/components/forms/radio/radio-group.component.d.ts.map +1 -1
  119. package/lib/components/forms/radio/radio.component.d.ts.map +1 -1
  120. package/lib/components/forms/radio/radio.styles.d.ts.map +1 -1
  121. package/lib/components/forms/radio/radio.styles.js +85 -54
  122. package/lib/components/forms/radio-card-group/radio-card-group.component.d.ts.map +1 -1
  123. package/lib/components/forms/radio-card-group/radio-card-group.styles.d.ts.map +1 -1
  124. package/lib/components/forms/radio-card-group/radio-card-group.styles.js +34 -12
  125. package/lib/components/forms/radio-card-group/radio-card.component.d.ts.map +1 -1
  126. package/lib/components/forms/radio-card-group/radio-card.styles.d.ts.map +1 -1
  127. package/lib/components/forms/radio-card-group/radio-card.styles.js +108 -47
  128. package/lib/components/forms/select/select.component.d.ts.map +1 -1
  129. package/lib/components/forms/select/select.styles.d.ts.map +1 -1
  130. package/lib/components/forms/select/select.styles.js +152 -71
  131. package/lib/components/forms/slider/slider.component.d.ts.map +1 -1
  132. package/lib/components/forms/slider/slider.styles.d.ts.map +1 -1
  133. package/lib/components/forms/slider/slider.styles.js +77 -36
  134. package/lib/components/forms/textarea/textarea.component.d.ts.map +1 -1
  135. package/lib/components/forms/textarea/textarea.styles.d.ts.map +1 -1
  136. package/lib/components/forms/textarea/textarea.styles.js +79 -31
  137. package/lib/components/forms/time-picker/time-picker.component.d.ts.map +1 -1
  138. package/lib/components/forms/time-picker/time-picker.styles.d.ts.map +1 -1
  139. package/lib/components/forms/time-picker/time-picker.styles.js +196 -91
  140. package/lib/components/forms/toggle/toggle.component.d.ts.map +1 -1
  141. package/lib/components/forms/toggle/toggle.styles.d.ts.map +1 -1
  142. package/lib/components/forms/toggle/toggle.styles.js +84 -54
  143. package/lib/components/foundation/card/card.component.d.ts.map +1 -1
  144. package/lib/components/foundation/card/card.styles.d.ts.map +1 -1
  145. package/lib/components/foundation/card/card.styles.js +48 -17
  146. package/lib/components/foundation/container/container.component.d.ts.map +1 -1
  147. package/lib/components/foundation/divider/divider.component.d.ts.map +1 -1
  148. package/lib/components/foundation/divider/divider.styles.d.ts.map +1 -1
  149. package/lib/components/foundation/divider/divider.styles.js +24 -12
  150. package/lib/components/foundation/stack/stack.component.d.ts.map +1 -1
  151. package/lib/components/general/icon/icon.component.d.ts.map +1 -1
  152. package/lib/components/general/icon/icon.styles.d.ts.map +1 -1
  153. package/lib/components/general/icon/icon.styles.js +9 -2
  154. package/lib/components/navigation/breadcrumb/breadcrumb-item.component.d.ts.map +1 -1
  155. package/lib/components/navigation/breadcrumb/breadcrumb.component.d.ts.map +1 -1
  156. package/lib/components/navigation/breadcrumb/breadcrumb.styles.d.ts.map +1 -1
  157. package/lib/components/navigation/breadcrumb/breadcrumb.styles.js +4 -1
  158. package/lib/components/navigation/pagination/pagination.component.d.ts.map +1 -1
  159. package/lib/components/navigation/pagination/pagination.styles.d.ts.map +1 -1
  160. package/lib/components/navigation/pagination/pagination.styles.js +59 -23
  161. package/lib/components/navigation/sidebar/sidebar-group.component.d.ts.map +1 -1
  162. package/lib/components/navigation/sidebar/sidebar-item.component.d.ts +3 -1
  163. package/lib/components/navigation/sidebar/sidebar-item.component.d.ts.map +1 -1
  164. package/lib/components/navigation/sidebar/sidebar-item.component.js +3 -1
  165. package/lib/components/navigation/sidebar/sidebar-item.styles.d.ts.map +1 -1
  166. package/lib/components/navigation/sidebar/sidebar-item.styles.js +79 -33
  167. package/lib/components/navigation/sidebar/sidebar-item.template.js +1 -1
  168. package/lib/components/navigation/sidebar/sidebar.component.d.ts +1 -3
  169. package/lib/components/navigation/sidebar/sidebar.component.d.ts.map +1 -1
  170. package/lib/components/navigation/sidebar/sidebar.component.js +1 -5
  171. package/lib/components/navigation/sidebar/sidebar.styles.d.ts.map +1 -1
  172. package/lib/components/navigation/sidebar/sidebar.styles.js +154 -61
  173. package/lib/components/navigation/steps/step-panel.component.d.ts.map +1 -1
  174. package/lib/components/navigation/steps/step.component.d.ts.map +1 -1
  175. package/lib/components/navigation/steps/step.styles.d.ts.map +1 -1
  176. package/lib/components/navigation/steps/step.styles.js +149 -83
  177. package/lib/components/navigation/steps/steps.component.d.ts +1 -1
  178. package/lib/components/navigation/steps/steps.component.d.ts.map +1 -1
  179. package/lib/components/navigation/steps/steps.styles.d.ts.map +1 -1
  180. package/lib/components/navigation/steps/steps.styles.js +169 -91
  181. package/lib/components/navigation/tabs/tab-panel.component.d.ts.map +1 -1
  182. package/lib/components/navigation/tabs/tab.component.d.ts.map +1 -1
  183. package/lib/components/navigation/tabs/tab.styles.d.ts.map +1 -1
  184. package/lib/components/navigation/tabs/tab.styles.js +36 -12
  185. package/lib/components/navigation/tabs/tabs.component.d.ts +1 -1
  186. package/lib/components/navigation/tabs/tabs.component.d.ts.map +1 -1
  187. package/lib/components/navigation/tabs/tabs.styles.d.ts.map +1 -1
  188. package/lib/components/navigation/tabs/tabs.styles.js +126 -57
  189. package/lib/components/overlays/dialog/dialog-ref.class.d.ts.map +1 -1
  190. package/lib/components/overlays/dialog/dialog.component.d.ts.map +1 -1
  191. package/lib/components/overlays/dialog/dialog.service.d.ts.map +1 -1
  192. package/lib/components/overlays/dialog/dialog.styles.d.ts.map +1 -1
  193. package/lib/components/overlays/dialog/dialog.styles.js +73 -33
  194. package/lib/components/overlays/drawer/drawer.component.d.ts.map +1 -1
  195. package/lib/components/overlays/drawer/drawer.styles.d.ts.map +1 -1
  196. package/lib/components/overlays/drawer/drawer.styles.js +77 -33
  197. package/lib/components/overlays/dropdown/dropdown-group.component.d.ts.map +1 -1
  198. package/lib/components/overlays/dropdown/dropdown-item.component.d.ts.map +1 -1
  199. package/lib/components/overlays/dropdown/dropdown-item.styles.d.ts.map +1 -1
  200. package/lib/components/overlays/dropdown/dropdown-item.styles.js +43 -17
  201. package/lib/components/overlays/dropdown/dropdown.component.d.ts.map +1 -1
  202. package/lib/components/overlays/dropdown/dropdown.styles.d.ts.map +1 -1
  203. package/lib/components/overlays/dropdown/dropdown.styles.js +30 -15
  204. package/lib/components/overlays/popover/popover.component.d.ts.map +1 -1
  205. package/lib/components/overlays/popover/popover.styles.d.ts.map +1 -1
  206. package/lib/components/overlays/popover/popover.styles.js +29 -14
  207. package/lib/components/overlays/tooltip/tooltip.component.d.ts.map +1 -1
  208. package/lib/components/overlays/tooltip/tooltip.styles.d.ts.map +1 -1
  209. package/lib/components/overlays/tooltip/tooltip.styles.js +28 -12
  210. package/lib/components/pages/auth/auth-layout.styles.d.ts +1 -1
  211. package/lib/components/pages/auth/auth-layout.styles.d.ts.map +1 -1
  212. package/lib/components/pages/auth/auth-layout.styles.js +79 -31
  213. package/lib/components/pages/auth/login-page.component.d.ts.map +1 -1
  214. package/lib/components/pages/auth/signup-page.component.d.ts.map +1 -1
  215. package/lib/components/pages/dashboard/dashboard-page.component.d.ts.map +1 -1
  216. package/lib/components/pages/dashboard/dashboard-page.styles.d.ts.map +1 -1
  217. package/lib/components/pages/dashboard/dashboard-page.styles.js +34 -12
  218. package/lib/components/sections/app-shell/app-shell.component.d.ts.map +1 -1
  219. package/lib/components/sections/app-shell/app-shell.styles.d.ts.map +1 -1
  220. package/lib/components/sections/app-shell/app-shell.styles.js +54 -23
  221. package/lib/components/sections/hero/hero-section.component.d.ts.map +1 -1
  222. package/lib/components/sections/hero/hero-section.styles.d.ts.map +1 -1
  223. package/lib/components/sections/hero/hero-section.styles.js +97 -40
  224. package/lib/components/sections/page-header/page-header.component.d.ts.map +1 -1
  225. package/lib/components/sections/page-header/page-header.styles.d.ts.map +1 -1
  226. package/lib/components/sections/page-header/page-header.styles.js +62 -28
  227. package/lib/components/sections/page-section/index.d.ts +2 -0
  228. package/lib/components/sections/page-section/index.d.ts.map +1 -0
  229. package/lib/components/sections/page-section/index.js +1 -0
  230. package/lib/components/sections/page-section/page-section.component.d.ts +39 -0
  231. package/lib/components/sections/page-section/page-section.component.d.ts.map +1 -0
  232. package/lib/components/sections/page-section/page-section.component.js +56 -0
  233. package/lib/components/sections/page-section/page-section.styles.d.ts +2 -0
  234. package/lib/components/sections/page-section/page-section.styles.d.ts.map +1 -0
  235. package/lib/components/sections/page-section/page-section.styles.js +102 -0
  236. package/lib/components/sections/page-section/page-section.template.d.ts +3 -0
  237. package/lib/components/sections/page-section/page-section.template.d.ts.map +1 -0
  238. package/lib/components/sections/page-section/page-section.template.js +30 -0
  239. package/lib/utils/virtual-scroll/index.d.ts.map +1 -1
  240. package/package.json +13 -1
@@ -1,6 +1,72 @@
1
1
  import { css } from '@melodicdev/core';
2
2
  export const stepStyles = () => css `
3
3
  :host {
4
+ /* Focus ring */
5
+ --ml-step-focus-color: var(--ml-color-primary);
6
+ --ml-step-focus-radius: var(--ml-radius);
7
+
8
+ /* Disabled state */
9
+ --ml-step-disabled-opacity: 0.5;
10
+
11
+ /* Connector */
12
+ --ml-step-connector-thickness: 2px;
13
+ --ml-step-connector-color: var(--ml-color-border);
14
+ --ml-step-connector-transition: var(--ml-duration-150) var(--ml-ease-in-out);
15
+
16
+ /* Indicator (numbered & circles) */
17
+ --ml-step-indicator-size: 32px;
18
+ --ml-step-indicator-border-width: 2px;
19
+ --ml-step-indicator-font-size: var(--ml-text-sm);
20
+ --ml-step-indicator-font-weight: var(--ml-font-medium);
21
+ --ml-step-indicator-font-family: var(--ml-font-sans);
22
+ --ml-step-indicator-transition: var(--ml-duration-150) var(--ml-ease-in-out);
23
+
24
+ /* Indicator upcoming */
25
+ --ml-step-upcoming-border-color: var(--ml-color-border);
26
+ --ml-step-upcoming-color: var(--ml-color-text-secondary);
27
+ --ml-step-upcoming-bg: var(--ml-color-surface);
28
+
29
+ /* Indicator dot (circles variant) */
30
+ --ml-step-dot-size: 10px;
31
+
32
+ /* Icons variant */
33
+ --ml-step-icon-indicator-size: 40px;
34
+ --ml-step-icon-indicator-radius: var(--ml-radius-lg);
35
+ --ml-step-icon-upcoming-color: var(--ml-color-text-muted);
36
+ --ml-step-icon-current-border-color: var(--ml-color-text);
37
+ --ml-step-icon-current-color: var(--ml-color-text);
38
+
39
+ /* Completed indicator text */
40
+ --ml-step-completed-indicator-text: #fff;
41
+
42
+ /* Bar variant */
43
+ --ml-step-bar-height: 4px;
44
+ --ml-step-bar-radius: 2px;
45
+ --ml-step-bar-color: var(--ml-color-border);
46
+
47
+ /* Compact / dots */
48
+ --ml-step-compact-dot-size: 12px;
49
+ --ml-step-compact-dot-color: var(--ml-color-border);
50
+
51
+ /* Content spacing */
52
+ --ml-step-content-gap: var(--ml-space-1);
53
+ --ml-step-track-gap: var(--ml-space-3);
54
+ --ml-step-vertical-content-padding: var(--ml-space-6);
55
+
56
+ /* Label */
57
+ --ml-step-label-font-family: var(--ml-font-sans);
58
+ --ml-step-label-font-size: var(--ml-text-sm);
59
+ --ml-step-label-font-weight: var(--ml-font-medium);
60
+ --ml-step-label-color: var(--ml-color-text);
61
+ --ml-step-label-line-height: var(--ml-leading-tight);
62
+ --ml-step-label-upcoming-color: var(--ml-color-text-secondary);
63
+
64
+ /* Description */
65
+ --ml-step-desc-font-family: var(--ml-font-sans);
66
+ --ml-step-desc-font-size: var(--ml-text-xs);
67
+ --ml-step-desc-color: var(--ml-color-text-muted);
68
+ --ml-step-desc-line-height: var(--ml-leading-normal);
69
+
4
70
  display: contents;
5
71
  }
6
72
 
@@ -17,13 +83,13 @@ export const stepStyles = () => css `
17
83
 
18
84
  .ml-step--disabled {
19
85
  cursor: not-allowed;
20
- opacity: 0.5;
86
+ opacity: var(--ml-step-disabled-opacity);
21
87
  }
22
88
 
23
89
  .ml-step:focus-visible {
24
- outline: 2px solid var(--ml-color-primary);
90
+ outline: 2px solid var(--ml-step-focus-color);
25
91
  outline-offset: 2px;
26
- border-radius: var(--ml-radius);
92
+ border-radius: var(--ml-step-focus-radius);
27
93
  }
28
94
 
29
95
  /* ============================================
@@ -39,13 +105,13 @@ export const stepStyles = () => css `
39
105
  display: flex;
40
106
  align-items: center;
41
107
  width: 100%;
42
- margin-bottom: var(--ml-space-3);
108
+ margin-bottom: var(--ml-step-track-gap);
43
109
  }
44
110
 
45
111
  .ml-step--horizontal .ml-step__connector-before,
46
112
  .ml-step--horizontal .ml-step__connector-after {
47
113
  flex: 1;
48
- height: 2px;
114
+ height: var(--ml-step-connector-thickness);
49
115
  }
50
116
 
51
117
  .ml-step--horizontal .ml-step__connector--hidden {
@@ -65,13 +131,13 @@ export const stepStyles = () => css `
65
131
  display: flex;
66
132
  flex-direction: column;
67
133
  align-items: center;
68
- margin-right: var(--ml-space-3);
134
+ margin-right: var(--ml-step-track-gap);
69
135
  }
70
136
 
71
137
  .ml-step--vertical .ml-step__connector-before,
72
138
  .ml-step--vertical .ml-step__connector-after {
73
139
  flex: 1;
74
- width: 2px;
140
+ width: var(--ml-step-connector-thickness);
75
141
  min-height: 12px;
76
142
  }
77
143
 
@@ -80,7 +146,7 @@ export const stepStyles = () => css `
80
146
  }
81
147
 
82
148
  .ml-step--vertical .ml-step__content {
83
- padding-bottom: var(--ml-space-6);
149
+ padding-bottom: var(--ml-step-vertical-content-padding);
84
150
  }
85
151
 
86
152
  .ml-step--vertical.ml-step--last .ml-step__content {
@@ -92,12 +158,12 @@ export const stepStyles = () => css `
92
158
  ============================================ */
93
159
  .ml-step__connector-before,
94
160
  .ml-step__connector-after {
95
- transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
161
+ transition: background-color var(--ml-step-connector-transition);
96
162
  }
97
163
 
98
164
  /* Solid connector */
99
165
  .ml-step__connector--solid {
100
- background-color: var(--ml-color-border);
166
+ background-color: var(--ml-step-connector-color);
101
167
  }
102
168
 
103
169
  /* Dotted connector */
@@ -109,8 +175,8 @@ export const stepStyles = () => css `
109
175
  .ml-step--horizontal .ml-step__connector--dotted {
110
176
  background-image: repeating-linear-gradient(
111
177
  to right,
112
- var(--ml-color-border) 0,
113
- var(--ml-color-border) 4px,
178
+ var(--ml-step-connector-color) 0,
179
+ var(--ml-step-connector-color) 4px,
114
180
  transparent 4px,
115
181
  transparent 8px
116
182
  );
@@ -123,8 +189,8 @@ export const stepStyles = () => css `
123
189
  .ml-step--vertical .ml-step__connector--dotted {
124
190
  background-image: repeating-linear-gradient(
125
191
  to bottom,
126
- var(--ml-color-border) 0,
127
- var(--ml-color-border) 4px,
192
+ var(--ml-step-connector-color) 0,
193
+ var(--ml-step-connector-color) 4px,
128
194
  transparent 4px,
129
195
  transparent 8px
130
196
  );
@@ -237,87 +303,87 @@ export const stepStyles = () => css `
237
303
  align-items: center;
238
304
  justify-content: center;
239
305
  transition:
240
- background-color var(--ml-duration-150) var(--ml-ease-in-out),
241
- border-color var(--ml-duration-150) var(--ml-ease-in-out),
242
- color var(--ml-duration-150) var(--ml-ease-in-out);
306
+ background-color var(--ml-step-indicator-transition),
307
+ border-color var(--ml-step-indicator-transition),
308
+ color var(--ml-step-indicator-transition);
243
309
  }
244
310
 
245
311
  /* ============================================
246
312
  NUMBERED VARIANT
247
313
  ============================================ */
248
314
  .ml-step__indicator-inner--numbered {
249
- width: 32px;
250
- height: 32px;
315
+ width: var(--ml-step-indicator-size);
316
+ height: var(--ml-step-indicator-size);
251
317
  border-radius: 50%;
252
- font-size: var(--ml-text-sm);
253
- font-weight: var(--ml-font-medium);
254
- font-family: var(--ml-font-sans);
318
+ font-size: var(--ml-step-indicator-font-size);
319
+ font-weight: var(--ml-step-indicator-font-weight);
320
+ font-family: var(--ml-step-indicator-font-family);
255
321
  }
256
322
 
257
323
  /* Numbered - Upcoming */
258
324
  .ml-step--upcoming .ml-step__indicator-inner--numbered {
259
- border: 2px solid var(--ml-color-border);
260
- color: var(--ml-color-text-secondary);
261
- background-color: var(--ml-color-surface);
325
+ border: var(--ml-step-indicator-border-width) solid var(--ml-step-upcoming-border-color);
326
+ color: var(--ml-step-upcoming-color);
327
+ background-color: var(--ml-step-upcoming-bg);
262
328
  }
263
329
 
264
330
  /* Numbered - Current (primary) */
265
331
  .ml-step--current.ml-step--primary .ml-step__indicator-inner--numbered {
266
- border: 2px solid var(--ml-color-primary);
332
+ border: var(--ml-step-indicator-border-width) solid var(--ml-color-primary);
267
333
  color: var(--ml-color-primary);
268
- background-color: var(--ml-color-surface);
334
+ background-color: var(--ml-step-upcoming-bg);
269
335
  }
270
336
 
271
337
  /* Numbered - Current (success) */
272
338
  .ml-step--current.ml-step--success .ml-step__indicator-inner--numbered {
273
- border: 2px solid var(--ml-color-success);
339
+ border: var(--ml-step-indicator-border-width) solid var(--ml-color-success);
274
340
  color: var(--ml-color-success);
275
- background-color: var(--ml-color-surface);
341
+ background-color: var(--ml-step-upcoming-bg);
276
342
  }
277
343
 
278
344
  /* Numbered - Completed (primary) */
279
345
  .ml-step--completed.ml-step--primary .ml-step__indicator-inner--numbered {
280
346
  background-color: var(--ml-color-primary);
281
- border: 2px solid var(--ml-color-primary);
282
- color: #fff;
347
+ border: var(--ml-step-indicator-border-width) solid var(--ml-color-primary);
348
+ color: var(--ml-step-completed-indicator-text);
283
349
  }
284
350
 
285
351
  /* Numbered - Completed (success) */
286
352
  .ml-step--completed.ml-step--success .ml-step__indicator-inner--numbered {
287
353
  background-color: var(--ml-color-success);
288
- border: 2px solid var(--ml-color-success);
289
- color: #fff;
354
+ border: var(--ml-step-indicator-border-width) solid var(--ml-color-success);
355
+ color: var(--ml-step-completed-indicator-text);
290
356
  }
291
357
 
292
358
  /* ============================================
293
359
  CIRCLES VARIANT
294
360
  ============================================ */
295
361
  .ml-step__indicator-inner--circles {
296
- width: 32px;
297
- height: 32px;
362
+ width: var(--ml-step-indicator-size);
363
+ height: var(--ml-step-indicator-size);
298
364
  border-radius: 50%;
299
365
  }
300
366
 
301
367
  .ml-step__indicator-dot {
302
- width: 10px;
303
- height: 10px;
368
+ width: var(--ml-step-dot-size);
369
+ height: var(--ml-step-dot-size);
304
370
  border-radius: 50%;
305
- transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
371
+ transition: background-color var(--ml-step-connector-transition);
306
372
  }
307
373
 
308
374
  /* Circles - Upcoming */
309
375
  .ml-step--upcoming .ml-step__indicator-inner--circles {
310
- border: 2px solid var(--ml-color-border);
311
- background-color: var(--ml-color-surface);
376
+ border: var(--ml-step-indicator-border-width) solid var(--ml-step-upcoming-border-color);
377
+ background-color: var(--ml-step-upcoming-bg);
312
378
  }
313
379
  .ml-step--upcoming .ml-step__indicator-dot {
314
- background-color: var(--ml-color-border);
380
+ background-color: var(--ml-step-upcoming-border-color);
315
381
  }
316
382
 
317
383
  /* Circles - Current (primary) */
318
384
  .ml-step--current.ml-step--primary .ml-step__indicator-inner--circles {
319
- border: 2px solid var(--ml-color-primary);
320
- background-color: var(--ml-color-surface);
385
+ border: var(--ml-step-indicator-border-width) solid var(--ml-color-primary);
386
+ background-color: var(--ml-step-upcoming-bg);
321
387
  }
322
388
  .ml-step--current.ml-step--primary .ml-step__indicator-dot {
323
389
  background-color: var(--ml-color-primary);
@@ -325,8 +391,8 @@ export const stepStyles = () => css `
325
391
 
326
392
  /* Circles - Current (success) */
327
393
  .ml-step--current.ml-step--success .ml-step__indicator-inner--circles {
328
- border: 2px solid var(--ml-color-success);
329
- background-color: var(--ml-color-surface);
394
+ border: var(--ml-step-indicator-border-width) solid var(--ml-color-success);
395
+ background-color: var(--ml-step-upcoming-bg);
330
396
  }
331
397
  .ml-step--current.ml-step--success .ml-step__indicator-dot {
332
398
  background-color: var(--ml-color-success);
@@ -335,39 +401,39 @@ export const stepStyles = () => css `
335
401
  /* Circles - Completed (primary) */
336
402
  .ml-step--completed.ml-step--primary .ml-step__indicator-inner--circles {
337
403
  background-color: var(--ml-color-primary);
338
- border: 2px solid var(--ml-color-primary);
339
- color: #fff;
404
+ border: var(--ml-step-indicator-border-width) solid var(--ml-color-primary);
405
+ color: var(--ml-step-completed-indicator-text);
340
406
  }
341
407
 
342
408
  /* Circles - Completed (success) */
343
409
  .ml-step--completed.ml-step--success .ml-step__indicator-inner--circles {
344
410
  background-color: var(--ml-color-success);
345
- border: 2px solid var(--ml-color-success);
346
- color: #fff;
411
+ border: var(--ml-step-indicator-border-width) solid var(--ml-color-success);
412
+ color: var(--ml-step-completed-indicator-text);
347
413
  }
348
414
 
349
415
  /* ============================================
350
416
  ICONS VARIANT
351
417
  ============================================ */
352
418
  .ml-step__indicator-inner--icons {
353
- width: 40px;
354
- height: 40px;
355
- border-radius: var(--ml-radius-lg);
356
- border: 2px solid var(--ml-color-border);
419
+ width: var(--ml-step-icon-indicator-size);
420
+ height: var(--ml-step-icon-indicator-size);
421
+ border-radius: var(--ml-step-icon-indicator-radius);
422
+ border: var(--ml-step-indicator-border-width) solid var(--ml-step-upcoming-border-color);
357
423
  }
358
424
 
359
425
  /* Icons - Upcoming */
360
426
  .ml-step--upcoming .ml-step__indicator-inner--icons {
361
- border-color: var(--ml-color-border);
362
- background-color: var(--ml-color-surface);
363
- color: var(--ml-color-text-muted);
427
+ border-color: var(--ml-step-upcoming-border-color);
428
+ background-color: var(--ml-step-upcoming-bg);
429
+ color: var(--ml-step-icon-upcoming-color);
364
430
  }
365
431
 
366
432
  /* Icons - Current */
367
433
  .ml-step--current .ml-step__indicator-inner--icons {
368
- border-color: var(--ml-color-text);
369
- background-color: var(--ml-color-surface);
370
- color: var(--ml-color-text);
434
+ border-color: var(--ml-step-icon-current-border-color);
435
+ background-color: var(--ml-step-upcoming-bg);
436
+ color: var(--ml-step-icon-current-color);
371
437
  }
372
438
 
373
439
  /* Icons - Completed (primary) */
@@ -394,11 +460,11 @@ export const stepStyles = () => css `
394
460
 
395
461
  .ml-step--bar .ml-step__bar {
396
462
  width: 100%;
397
- height: 4px;
398
- border-radius: 2px;
399
- background-color: var(--ml-color-border);
400
- margin-bottom: var(--ml-space-3);
401
- transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
463
+ height: var(--ml-step-bar-height);
464
+ border-radius: var(--ml-step-bar-radius);
465
+ background-color: var(--ml-step-bar-color);
466
+ margin-bottom: var(--ml-step-track-gap);
467
+ transition: background-color var(--ml-step-connector-transition);
402
468
  }
403
469
 
404
470
  /* Bar - Current & Completed (primary) */
@@ -419,15 +485,15 @@ export const stepStyles = () => css `
419
485
  }
420
486
 
421
487
  .ml-step--bar.ml-step--vertical .ml-step__bar {
422
- width: 4px;
488
+ width: var(--ml-step-bar-height);
423
489
  height: auto;
424
490
  min-height: 40px;
425
491
  margin-bottom: 0;
426
- margin-right: var(--ml-space-3);
492
+ margin-right: var(--ml-step-track-gap);
427
493
  }
428
494
 
429
495
  .ml-step--bar.ml-step--vertical .ml-step__content {
430
- padding-bottom: var(--ml-space-6);
496
+ padding-bottom: var(--ml-step-vertical-content-padding);
431
497
  }
432
498
 
433
499
  .ml-step--bar.ml-step--vertical.ml-step--last .ml-step__content {
@@ -445,11 +511,11 @@ export const stepStyles = () => css `
445
511
  }
446
512
 
447
513
  .ml-step__dot {
448
- width: 12px;
449
- height: 12px;
514
+ width: var(--ml-step-compact-dot-size);
515
+ height: var(--ml-step-compact-dot-size);
450
516
  border-radius: 50%;
451
- background-color: var(--ml-color-border);
452
- transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
517
+ background-color: var(--ml-step-compact-dot-color);
518
+ transition: background-color var(--ml-step-connector-transition);
453
519
  }
454
520
 
455
521
  .ml-step--compact.ml-step--current.ml-step--primary .ml-step__dot {
@@ -471,21 +537,21 @@ export const stepStyles = () => css `
471
537
  .ml-step__content {
472
538
  display: flex;
473
539
  flex-direction: column;
474
- gap: var(--ml-space-1);
540
+ gap: var(--ml-step-content-gap);
475
541
  min-width: 0;
476
542
  }
477
543
 
478
544
  .ml-step__label {
479
- font-family: var(--ml-font-sans);
480
- font-size: var(--ml-text-sm);
481
- font-weight: var(--ml-font-medium);
482
- color: var(--ml-color-text);
483
- line-height: var(--ml-leading-tight);
484
- transition: color var(--ml-duration-150) var(--ml-ease-in-out);
545
+ font-family: var(--ml-step-label-font-family);
546
+ font-size: var(--ml-step-label-font-size);
547
+ font-weight: var(--ml-step-label-font-weight);
548
+ color: var(--ml-step-label-color);
549
+ line-height: var(--ml-step-label-line-height);
550
+ transition: color var(--ml-step-connector-transition);
485
551
  }
486
552
 
487
553
  .ml-step--upcoming .ml-step__label {
488
- color: var(--ml-color-text-secondary);
554
+ color: var(--ml-step-label-upcoming-color);
489
555
  }
490
556
 
491
557
  .ml-step--current.ml-step--primary .ml-step__label {
@@ -497,9 +563,9 @@ export const stepStyles = () => css `
497
563
  }
498
564
 
499
565
  .ml-step__description {
500
- font-family: var(--ml-font-sans);
501
- font-size: var(--ml-text-xs);
502
- color: var(--ml-color-text-muted);
503
- line-height: var(--ml-leading-normal);
566
+ font-family: var(--ml-step-desc-font-family);
567
+ font-size: var(--ml-step-desc-font-size);
568
+ color: var(--ml-step-desc-color);
569
+ line-height: var(--ml-step-desc-line-height);
504
570
  }
505
571
  `;
@@ -45,7 +45,7 @@ export declare class StepsComponent implements IElementRef, OnCreate, OnDestroy,
45
45
  /** Step configurations (alternative to slotted ml-step elements) */
46
46
  steps: StepConfig[];
47
47
  /** Internal tracking of slotted steps */
48
- _slottedSteps: HTMLElement[];
48
+ private _slottedSteps;
49
49
  /** Navigation event listener for routed mode */
50
50
  private readonly _handleNavigation;
51
51
  onCreate(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"steps.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/steps/steps.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACnF,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAI3H;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAMa,cAAe,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ;IAChF,UAAU,EAAG,WAAW,CAAC;IAEzB,kCAAkC;IAClC,MAAM,SAAM;IAEZ,qBAAqB;IACrB,OAAO,EAAE,YAAY,CAAc;IAEnC,yBAAyB;IACzB,WAAW,EAAE,gBAAgB,CAAgB;IAE7C,2BAA2B;IAC3B,SAAS,EAAE,cAAc,CAAW;IAEpC,mBAAmB;IACnB,KAAK,EAAE,UAAU,CAAa;IAE9B,wBAAwB;IACxB,OAAO,UAAS;IAEhB,gCAAgC;IAChC,MAAM,UAAS;IAEf,oEAAoE;IACpE,KAAK,EAAE,UAAU,EAAE,CAAM;IAEzB,yCAAyC;IACzC,aAAa,EAAE,WAAW,EAAE,CAAM;IAElC,gDAAgD;IAChD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAgC;IAElE,QAAQ,IAAI,IAAI;IAUhB,QAAQ,IAAI,IAAI;IAIhB,SAAS,IAAI,IAAI;IAQjB,+BAA+B;IAC/B,oBAAoB,GAAI,OAAO,KAAK,KAAG,IAAI,CAczC;IAEF,sCAAsC;IACtC,eAAe,GAAI,WAAW,MAAM,EAAE,OAAO,MAAM,KAAG,IAAI,CAoBxD;IAEF,sCAAsC;IACtC,OAAO,CAAC,sBAAsB,CAG5B;IAEF,iCAAiC;IACjC,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CA8C1C;IAEF,qEAAqE;IACrE,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,UAAU;IAU5C,0DAA0D;IAC1D,oBAAoB,IAAI,MAAM;IAM9B,2BAA2B;IAC3B,aAAa,IAAI,MAAM;IAIvB,6CAA6C;IAC7C,WAAW,IAAI,UAAU,EAAE;IAe3B,wBAAwB;IACxB,OAAO,CAAC,cAAc;IAItB,yCAAyC;IACzC,OAAO,CAAC,uBAAuB;IAiB/B,8BAA8B;IAC9B,OAAO,CAAC,qBAAqB;IAU7B,mCAAmC;IACnC,OAAO,CAAC,SAAS;IAMjB,0CAA0C;IAC1C,OAAO,CAAC,aAAa;IASrB,6CAA6C;IAC7C,OAAO,CAAC,YAAY;CAGpB"}
1
+ {"version":3,"file":"steps.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/steps/steps.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACnF,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAI3H;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAMa,cAAe,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ;IACzE,UAAU,EAAG,WAAW,CAAC;IAEhC,kCAAkC;IAC3B,MAAM,SAAM;IAEnB,qBAAqB;IACd,OAAO,EAAE,YAAY,CAAc;IAE1C,yBAAyB;IAClB,WAAW,EAAE,gBAAgB,CAAgB;IAEpD,2BAA2B;IACpB,SAAS,EAAE,cAAc,CAAW;IAE3C,mBAAmB;IACZ,KAAK,EAAE,UAAU,CAAa;IAErC,wBAAwB;IACjB,OAAO,UAAS;IAEvB,gCAAgC;IACzB,MAAM,UAAS;IAEtB,oEAAoE;IAC7D,KAAK,EAAE,UAAU,EAAE,CAAM;IAEhC,yCAAyC;IACzC,OAAO,CAAC,aAAa,CAAqB;IAE1C,gDAAgD;IAChD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAgC;IAE3D,QAAQ,IAAI,IAAI;IAUhB,QAAQ,IAAI,IAAI;IAIhB,SAAS,IAAI,IAAI;IAQxB,+BAA+B;IACxB,oBAAoB,GAAI,OAAO,KAAK,KAAG,IAAI,CAchD;IAEF,sCAAsC;IAC/B,eAAe,GAAI,WAAW,MAAM,EAAE,OAAO,MAAM,KAAG,IAAI,CAoB/D;IAEF,sCAAsC;IACtC,OAAO,CAAC,sBAAsB,CAG5B;IAEF,iCAAiC;IAC1B,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CA8CjD;IAEF,qEAAqE;IAC9D,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,UAAU;IAUnD,0DAA0D;IACnD,oBAAoB,IAAI,MAAM;IAMrC,2BAA2B;IACpB,aAAa,IAAI,MAAM;IAI9B,6CAA6C;IACtC,WAAW,IAAI,UAAU,EAAE;IAelC,wBAAwB;IACxB,OAAO,CAAC,cAAc;IAItB,yCAAyC;IACzC,OAAO,CAAC,uBAAuB;IAiB/B,8BAA8B;IAC9B,OAAO,CAAC,qBAAqB;IAU7B,mCAAmC;IACnC,OAAO,CAAC,SAAS;IAMjB,0CAA0C;IAC1C,OAAO,CAAC,aAAa;IASrB,6CAA6C;IAC7C,OAAO,CAAC,YAAY;CAGpB"}
@@ -1 +1 @@
1
- {"version":3,"file":"steps.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/steps/steps.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAghBvB,CAAC"}
1
+ {"version":3,"file":"steps.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/steps/steps.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDA8lBvB,CAAC"}