@melodicdev/components 1.4.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 (121) hide show
  1. package/assets/melodic-components.js +3514 -1652
  2. package/assets/melodic-components.js.map +1 -1
  3. package/assets/melodic-components.min.js +5338 -3476
  4. package/lib/components/data-display/activity-feed/activity-feed-item.styles.d.ts.map +1 -1
  5. package/lib/components/data-display/activity-feed/activity-feed-item.styles.js +79 -31
  6. package/lib/components/data-display/activity-feed/activity-feed.styles.d.ts.map +1 -1
  7. package/lib/components/data-display/activity-feed/activity-feed.styles.js +5 -1
  8. package/lib/components/data-display/avatar/avatar.styles.d.ts.map +1 -1
  9. package/lib/components/data-display/avatar/avatar.styles.js +18 -7
  10. package/lib/components/data-display/badge/badge.styles.d.ts.map +1 -1
  11. package/lib/components/data-display/badge/badge.styles.js +30 -11
  12. package/lib/components/data-display/badge-group/badge-group.styles.d.ts.map +1 -1
  13. package/lib/components/data-display/badge-group/badge-group.styles.js +29 -14
  14. package/lib/components/data-display/calendar-view/calendar-view.styles.d.ts.map +1 -1
  15. package/lib/components/data-display/calendar-view/calendar-view.styles.js +155 -89
  16. package/lib/components/data-display/data-grid/data-grid.styles.d.ts.map +1 -1
  17. package/lib/components/data-display/data-grid/data-grid.styles.js +117 -61
  18. package/lib/components/data-display/list/list-item.styles.d.ts.map +1 -1
  19. package/lib/components/data-display/list/list-item.styles.js +35 -13
  20. package/lib/components/data-display/list/list.styles.d.ts.map +1 -1
  21. package/lib/components/data-display/list/list.styles.js +5 -1
  22. package/lib/components/data-display/profile-card/profile-card.styles.d.ts.map +1 -1
  23. package/lib/components/data-display/profile-card/profile-card.styles.js +66 -28
  24. package/lib/components/data-display/stat-card/stat-card.styles.d.ts.map +1 -1
  25. package/lib/components/data-display/stat-card/stat-card.styles.js +64 -26
  26. package/lib/components/data-display/table/table.styles.d.ts.map +1 -1
  27. package/lib/components/data-display/table/table.styles.js +60 -25
  28. package/lib/components/data-display/tag/tag.styles.d.ts.map +1 -1
  29. package/lib/components/data-display/tag/tag.styles.js +62 -25
  30. package/lib/components/feedback/alert/alert.styles.d.ts.map +1 -1
  31. package/lib/components/feedback/alert/alert.styles.js +41 -17
  32. package/lib/components/feedback/progress/progress.styles.d.ts.map +1 -1
  33. package/lib/components/feedback/progress/progress.styles.js +112 -56
  34. package/lib/components/feedback/spinner/spinner.styles.d.ts.map +1 -1
  35. package/lib/components/feedback/spinner/spinner.styles.js +32 -16
  36. package/lib/components/feedback/toast/toast.styles.d.ts.map +1 -1
  37. package/lib/components/feedback/toast/toast.styles.js +69 -26
  38. package/lib/components/forms/autocomplete/autocomplete.styles.d.ts.map +1 -1
  39. package/lib/components/forms/autocomplete/autocomplete.styles.js +164 -76
  40. package/lib/components/forms/button/button.styles.d.ts.map +1 -1
  41. package/lib/components/forms/button/button.styles.js +141 -116
  42. package/lib/components/forms/button-group/button-group.styles.d.ts.map +1 -1
  43. package/lib/components/forms/button-group/button-group.styles.js +8 -2
  44. package/lib/components/forms/checkbox/checkbox.styles.d.ts.map +1 -1
  45. package/lib/components/forms/checkbox/checkbox.styles.js +75 -41
  46. package/lib/components/forms/date-picker/calendar.styles.d.ts.map +1 -1
  47. package/lib/components/forms/date-picker/calendar.styles.js +108 -47
  48. package/lib/components/forms/date-picker/date-picker.styles.d.ts.map +1 -1
  49. package/lib/components/forms/date-picker/date-picker.styles.js +96 -38
  50. package/lib/components/forms/date-time-picker/date-time-picker.styles.d.ts.map +1 -1
  51. package/lib/components/forms/date-time-picker/date-time-picker.styles.js +65 -25
  52. package/lib/components/forms/file-upload/file-upload.styles.d.ts.map +1 -1
  53. package/lib/components/forms/file-upload/file-upload.styles.js +92 -39
  54. package/lib/components/forms/form-field/form-field.styles.d.ts.map +1 -1
  55. package/lib/components/forms/form-field/form-field.styles.js +72 -29
  56. package/lib/components/forms/input/input.styles.d.ts.map +1 -1
  57. package/lib/components/forms/input/input.styles.js +81 -29
  58. package/lib/components/forms/radio/radio.styles.d.ts.map +1 -1
  59. package/lib/components/forms/radio/radio.styles.js +85 -54
  60. package/lib/components/forms/radio-card-group/radio-card-group.styles.d.ts.map +1 -1
  61. package/lib/components/forms/radio-card-group/radio-card-group.styles.js +34 -12
  62. package/lib/components/forms/radio-card-group/radio-card.styles.d.ts.map +1 -1
  63. package/lib/components/forms/radio-card-group/radio-card.styles.js +108 -47
  64. package/lib/components/forms/select/select.styles.d.ts.map +1 -1
  65. package/lib/components/forms/select/select.styles.js +152 -71
  66. package/lib/components/forms/slider/slider.styles.d.ts.map +1 -1
  67. package/lib/components/forms/slider/slider.styles.js +77 -36
  68. package/lib/components/forms/textarea/textarea.styles.d.ts.map +1 -1
  69. package/lib/components/forms/textarea/textarea.styles.js +79 -31
  70. package/lib/components/forms/time-picker/time-picker.styles.d.ts.map +1 -1
  71. package/lib/components/forms/time-picker/time-picker.styles.js +196 -91
  72. package/lib/components/forms/toggle/toggle.styles.d.ts.map +1 -1
  73. package/lib/components/forms/toggle/toggle.styles.js +84 -54
  74. package/lib/components/foundation/card/card.styles.d.ts.map +1 -1
  75. package/lib/components/foundation/card/card.styles.js +48 -17
  76. package/lib/components/foundation/divider/divider.styles.d.ts.map +1 -1
  77. package/lib/components/foundation/divider/divider.styles.js +24 -12
  78. package/lib/components/general/icon/icon.styles.d.ts.map +1 -1
  79. package/lib/components/general/icon/icon.styles.js +9 -2
  80. package/lib/components/navigation/breadcrumb/breadcrumb.styles.d.ts.map +1 -1
  81. package/lib/components/navigation/breadcrumb/breadcrumb.styles.js +4 -1
  82. package/lib/components/navigation/pagination/pagination.styles.d.ts.map +1 -1
  83. package/lib/components/navigation/pagination/pagination.styles.js +59 -23
  84. package/lib/components/navigation/sidebar/sidebar-item.styles.d.ts.map +1 -1
  85. package/lib/components/navigation/sidebar/sidebar-item.styles.js +79 -33
  86. package/lib/components/navigation/sidebar/sidebar.styles.d.ts.map +1 -1
  87. package/lib/components/navigation/sidebar/sidebar.styles.js +154 -61
  88. package/lib/components/navigation/steps/step.styles.d.ts.map +1 -1
  89. package/lib/components/navigation/steps/step.styles.js +149 -83
  90. package/lib/components/navigation/steps/steps.styles.d.ts.map +1 -1
  91. package/lib/components/navigation/steps/steps.styles.js +169 -91
  92. package/lib/components/navigation/tabs/tab.styles.d.ts.map +1 -1
  93. package/lib/components/navigation/tabs/tab.styles.js +36 -12
  94. package/lib/components/navigation/tabs/tabs.styles.d.ts.map +1 -1
  95. package/lib/components/navigation/tabs/tabs.styles.js +126 -57
  96. package/lib/components/overlays/dialog/dialog.styles.d.ts.map +1 -1
  97. package/lib/components/overlays/dialog/dialog.styles.js +73 -33
  98. package/lib/components/overlays/drawer/drawer.styles.d.ts.map +1 -1
  99. package/lib/components/overlays/drawer/drawer.styles.js +77 -33
  100. package/lib/components/overlays/dropdown/dropdown-item.styles.d.ts.map +1 -1
  101. package/lib/components/overlays/dropdown/dropdown-item.styles.js +43 -17
  102. package/lib/components/overlays/dropdown/dropdown.styles.d.ts.map +1 -1
  103. package/lib/components/overlays/dropdown/dropdown.styles.js +30 -15
  104. package/lib/components/overlays/popover/popover.styles.d.ts.map +1 -1
  105. package/lib/components/overlays/popover/popover.styles.js +29 -14
  106. package/lib/components/overlays/tooltip/tooltip.styles.d.ts.map +1 -1
  107. package/lib/components/overlays/tooltip/tooltip.styles.js +28 -12
  108. package/lib/components/pages/auth/auth-layout.styles.d.ts +1 -1
  109. package/lib/components/pages/auth/auth-layout.styles.d.ts.map +1 -1
  110. package/lib/components/pages/auth/auth-layout.styles.js +79 -31
  111. package/lib/components/pages/dashboard/dashboard-page.styles.d.ts.map +1 -1
  112. package/lib/components/pages/dashboard/dashboard-page.styles.js +34 -12
  113. package/lib/components/sections/app-shell/app-shell.styles.d.ts.map +1 -1
  114. package/lib/components/sections/app-shell/app-shell.styles.js +54 -23
  115. package/lib/components/sections/hero/hero-section.styles.d.ts.map +1 -1
  116. package/lib/components/sections/hero/hero-section.styles.js +97 -40
  117. package/lib/components/sections/page-header/page-header.styles.d.ts.map +1 -1
  118. package/lib/components/sections/page-header/page-header.styles.js +62 -28
  119. package/lib/components/sections/page-section/page-section.styles.d.ts.map +1 -1
  120. package/lib/components/sections/page-section/page-section.styles.js +51 -21
  121. package/package.json +1 -1
@@ -5,6 +5,85 @@ export const selectStyles = () => css `
5
5
  width: 100%;
6
6
  min-width: 0;
7
7
  box-sizing: border-box;
8
+
9
+ /* --- Label --- */
10
+ --ml-select-label-font-size: var(--ml-text-sm);
11
+ --ml-select-label-font-weight: var(--ml-font-medium);
12
+ --ml-select-label-color: var(--ml-color-text-secondary);
13
+ --ml-select-label-line-height: var(--ml-leading-tight);
14
+
15
+ /* --- Required indicator --- */
16
+ --ml-select-required-color: var(--ml-color-danger);
17
+
18
+ /* --- Trigger --- */
19
+ --ml-select-bg: var(--ml-color-surface);
20
+ --ml-select-border-width: var(--ml-border);
21
+ --ml-select-border-color: var(--ml-color-border);
22
+ --ml-select-border-radius: var(--ml-radius);
23
+ --ml-select-color: var(--ml-color-text);
24
+ --ml-select-font-family: var(--ml-font-sans);
25
+ --ml-select-font-size: var(--ml-text-sm);
26
+ --ml-select-padding: var(--ml-space-2-5) var(--ml-space-3-5);
27
+ --ml-select-gap: var(--ml-space-2);
28
+ --ml-select-hover-border-color: var(--ml-color-border-strong);
29
+
30
+ /* --- Focus --- */
31
+ --ml-select-focus-border-color: var(--ml-color-primary);
32
+ --ml-select-focus-shadow: var(--ml-shadow-focus-ring);
33
+
34
+ /* --- Error --- */
35
+ --ml-select-error-border-color: var(--ml-color-danger);
36
+ --ml-select-error-focus-shadow: var(--ml-shadow-ring-error);
37
+ --ml-select-error-color: var(--ml-color-danger);
38
+
39
+ /* --- Disabled --- */
40
+ --ml-select-disabled-bg: var(--ml-color-input-disabled-bg);
41
+ --ml-select-disabled-color: var(--ml-color-text-muted);
42
+
43
+ /* --- Placeholder --- */
44
+ --ml-select-placeholder-color: var(--ml-color-text-muted);
45
+
46
+ /* --- Chevron / Icons --- */
47
+ --ml-select-icon-color: var(--ml-color-text-muted);
48
+
49
+ /* --- Dropdown --- */
50
+ --ml-select-dropdown-bg: var(--ml-color-surface);
51
+ --ml-select-dropdown-border-color: var(--ml-color-border);
52
+ --ml-select-dropdown-border-radius: var(--ml-radius);
53
+ --ml-select-dropdown-shadow: var(--ml-shadow-lg);
54
+ --ml-select-dropdown-max-height: 280px;
55
+ --ml-select-dropdown-padding: var(--ml-space-1-5);
56
+
57
+ /* --- Option --- */
58
+ --ml-select-option-padding: var(--ml-space-2) var(--ml-space-3);
59
+ --ml-select-option-border-radius: var(--ml-radius-sm);
60
+ --ml-select-option-font-size: var(--ml-text-sm);
61
+ --ml-select-option-font-weight: var(--ml-font-medium);
62
+ --ml-select-option-color: var(--ml-color-text);
63
+ --ml-select-option-hover-bg: var(--ml-color-surface-raised);
64
+ --ml-select-option-selected-bg: var(--ml-color-primary-subtle);
65
+ --ml-select-option-disabled-color: var(--ml-color-text-muted);
66
+ --ml-select-option-check-color: var(--ml-color-primary);
67
+
68
+ /* --- Tag (multi-select) --- */
69
+ --ml-select-tag-height: 20px;
70
+ --ml-select-tag-border-radius: var(--ml-radius-full);
71
+ --ml-select-tag-border-color: var(--ml-color-border);
72
+ --ml-select-tag-bg: var(--ml-color-surface);
73
+ --ml-select-tag-font-size: var(--ml-text-xs);
74
+ --ml-select-tag-font-weight: var(--ml-font-medium);
75
+ --ml-select-tag-color: var(--ml-color-text);
76
+ --ml-select-tag-remove-color: var(--ml-color-text-secondary);
77
+ --ml-select-tag-remove-hover-color: var(--ml-color-text);
78
+ --ml-select-tag-remove-hover-bg: var(--ml-color-surface-raised);
79
+
80
+ /* --- Hint --- */
81
+ --ml-select-hint-color: var(--ml-color-text-muted);
82
+ --ml-select-hint-font-size: var(--ml-text-sm);
83
+
84
+ /* --- Transition --- */
85
+ --ml-select-transition-duration: var(--ml-duration-150);
86
+ --ml-select-transition-easing: var(--ml-ease-in-out);
8
87
  }
9
88
 
10
89
  *,
@@ -26,14 +105,14 @@ export const selectStyles = () => css `
26
105
  }
27
106
 
28
107
  .ml-select__label {
29
- font-size: var(--ml-text-sm);
30
- font-weight: var(--ml-font-medium);
31
- color: var(--ml-color-text-secondary);
32
- line-height: var(--ml-leading-tight);
108
+ font-size: var(--ml-select-label-font-size);
109
+ font-weight: var(--ml-select-label-font-weight);
110
+ color: var(--ml-select-label-color);
111
+ line-height: var(--ml-select-label-line-height);
33
112
  }
34
113
 
35
114
  .ml-select__required {
36
- color: var(--ml-color-danger);
115
+ color: var(--ml-select-required-color);
37
116
  margin-left: var(--ml-space-0-5);
38
117
  }
39
118
 
@@ -41,42 +120,44 @@ export const selectStyles = () => css `
41
120
  display: flex;
42
121
  align-items: center;
43
122
  justify-content: space-between;
44
- gap: var(--ml-space-2);
123
+ gap: var(--ml-select-gap);
45
124
  width: 100%;
46
125
  max-width: 100%;
47
126
  overflow: hidden;
48
- background-color: var(--ml-color-surface);
49
- border: var(--ml-border) solid var(--ml-color-border);
50
- border-radius: var(--ml-radius);
127
+ padding: var(--ml-select-padding);
128
+ background-color: var(--ml-select-bg);
129
+ border: var(--ml-select-border-width) solid var(--ml-select-border-color);
130
+ border-radius: var(--ml-select-border-radius);
51
131
  box-shadow: none;
52
- color: var(--ml-color-text);
53
- font-family: var(--ml-font-sans);
132
+ color: var(--ml-select-color);
133
+ font-family: var(--ml-select-font-family);
134
+ font-size: var(--ml-select-font-size);
54
135
  cursor: pointer;
55
136
  text-align: left;
56
137
  transition:
57
- border-color var(--ml-duration-150) var(--ml-ease-in-out),
58
- box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
138
+ border-color var(--ml-select-transition-duration) var(--ml-select-transition-easing),
139
+ box-shadow var(--ml-select-transition-duration) var(--ml-select-transition-easing);
59
140
  }
60
141
 
61
142
  .ml-select:not(.ml-select--disabled) .ml-select__trigger:hover {
62
- border-color: var(--ml-color-border-strong);
143
+ border-color: var(--ml-select-hover-border-color);
63
144
  }
64
145
 
65
146
  .ml-select__trigger:focus,
66
147
  .ml-select__trigger:focus-within {
67
148
  outline: none;
68
- border-color: var(--ml-color-primary);
69
- box-shadow: var(--ml-shadow-focus-ring);
149
+ border-color: var(--ml-select-focus-border-color);
150
+ box-shadow: var(--ml-select-focus-shadow);
70
151
  }
71
152
 
72
153
  .ml-select--disabled .ml-select__trigger {
73
- background-color: var(--ml-color-input-disabled-bg);
154
+ background-color: var(--ml-select-disabled-bg);
74
155
  cursor: not-allowed;
75
- color: var(--ml-color-text-muted);
156
+ color: var(--ml-select-disabled-color);
76
157
  }
77
158
 
78
159
  .ml-select--disabled .ml-select__search {
79
- color: var(--ml-color-text-muted);
160
+ color: var(--ml-select-disabled-color);
80
161
  }
81
162
 
82
163
  .ml-select__value {
@@ -84,7 +165,7 @@ export const selectStyles = () => css `
84
165
  min-width: 0;
85
166
  display: flex;
86
167
  align-items: center;
87
- gap: var(--ml-space-2);
168
+ gap: var(--ml-select-gap);
88
169
  overflow: hidden;
89
170
  text-overflow: ellipsis;
90
171
  white-space: nowrap;
@@ -103,7 +184,7 @@ export const selectStyles = () => css `
103
184
  }
104
185
 
105
186
  .ml-select__search-icon {
106
- color: var(--ml-color-text-muted);
187
+ color: var(--ml-select-icon-color);
107
188
  flex-shrink: 0;
108
189
  height: 20px;
109
190
  display: flex;
@@ -118,21 +199,21 @@ export const selectStyles = () => css `
118
199
  outline: none;
119
200
  background: transparent;
120
201
  font: inherit;
121
- color: var(--ml-color-text);
202
+ color: var(--ml-select-color);
122
203
  padding: 0;
123
204
  line-height: 20px;
124
205
  }
125
206
 
126
207
  .ml-select__search::placeholder {
127
- color: var(--ml-color-text-muted);
208
+ color: var(--ml-select-placeholder-color);
128
209
  }
129
210
 
130
211
  .ml-select__placeholder {
131
- color: var(--ml-color-text-muted);
212
+ color: var(--ml-select-placeholder-color);
132
213
  }
133
214
 
134
215
  .ml-select__value-icon {
135
- color: var(--ml-color-text-muted);
216
+ color: var(--ml-select-icon-color);
136
217
  flex-shrink: 0;
137
218
  }
138
219
 
@@ -145,13 +226,13 @@ export const selectStyles = () => css `
145
226
  align-items: center;
146
227
  gap: var(--ml-space-1);
147
228
  padding: 0 var(--ml-space-1-5);
148
- height: 20px;
149
- border-radius: var(--ml-radius-full);
150
- border: var(--ml-border) solid var(--ml-color-border);
151
- background-color: var(--ml-color-surface);
152
- font-size: var(--ml-text-xs);
153
- font-weight: var(--ml-font-medium);
154
- color: var(--ml-color-text);
229
+ height: var(--ml-select-tag-height);
230
+ border-radius: var(--ml-select-tag-border-radius);
231
+ border: var(--ml-select-border-width) solid var(--ml-select-tag-border-color);
232
+ background-color: var(--ml-select-tag-bg);
233
+ font-size: var(--ml-select-tag-font-size);
234
+ font-weight: var(--ml-select-tag-font-weight);
235
+ color: var(--ml-select-tag-color);
155
236
  line-height: 1;
156
237
  white-space: nowrap;
157
238
  max-width: 100%;
@@ -168,7 +249,7 @@ export const selectStyles = () => css `
168
249
  .ml-select__tag-avatar {
169
250
  width: 14px;
170
251
  height: 14px;
171
- border-radius: var(--ml-radius-full);
252
+ border-radius: var(--ml-select-tag-border-radius);
172
253
  object-fit: cover;
173
254
  margin-left: -2px;
174
255
  }
@@ -179,26 +260,26 @@ export const selectStyles = () => css `
179
260
  padding: 2px;
180
261
  margin-left: var(--ml-space-0-5);
181
262
  margin-right: -4px;
182
- color: var(--ml-color-text-secondary);
263
+ color: var(--ml-select-tag-remove-color);
183
264
  cursor: pointer;
184
265
  display: inline-flex;
185
266
  align-items: center;
186
267
  justify-content: center;
187
268
  flex-shrink: 0;
188
- border-radius: var(--ml-radius-full);
189
- transition: color var(--ml-duration-100) var(--ml-ease-in-out),
190
- background-color var(--ml-duration-100) var(--ml-ease-in-out);
269
+ border-radius: var(--ml-select-tag-border-radius);
270
+ transition: color var(--ml-duration-100) var(--ml-select-transition-easing),
271
+ background-color var(--ml-duration-100) var(--ml-select-transition-easing);
191
272
  }
192
273
 
193
274
  .ml-select__tag-remove:hover {
194
- color: var(--ml-color-text);
195
- background-color: var(--ml-color-surface-raised);
275
+ color: var(--ml-select-tag-remove-hover-color);
276
+ background-color: var(--ml-select-tag-remove-hover-bg);
196
277
  }
197
278
 
198
279
  .ml-select__chevron {
199
280
  flex-shrink: 0;
200
- color: var(--ml-color-text-muted);
201
- transition: transform var(--ml-duration-200) var(--ml-ease-in-out);
281
+ color: var(--ml-select-icon-color);
282
+ transition: transform var(--ml-duration-200) var(--ml-select-transition-easing);
202
283
  }
203
284
 
204
285
  .ml-select--open .ml-select__chevron {
@@ -216,13 +297,13 @@ export const selectStyles = () => css `
216
297
  inset: unset;
217
298
  margin: 0;
218
299
  z-index: 50;
219
- background-color: var(--ml-color-surface);
220
- border: var(--ml-border) solid var(--ml-color-border);
221
- border-radius: var(--ml-radius);
222
- box-shadow: var(--ml-shadow-lg);
223
- max-height: 280px;
300
+ background-color: var(--ml-select-dropdown-bg);
301
+ border: var(--ml-select-border-width) solid var(--ml-select-dropdown-border-color);
302
+ border-radius: var(--ml-select-dropdown-border-radius);
303
+ box-shadow: var(--ml-select-dropdown-shadow);
304
+ max-height: var(--ml-select-dropdown-max-height);
224
305
  overflow-y: auto;
225
- padding: var(--ml-space-1-5);
306
+ padding: var(--ml-select-dropdown-padding);
226
307
  display: flex;
227
308
  flex-direction: column;
228
309
  gap: var(--ml-space-1);
@@ -233,48 +314,48 @@ export const selectStyles = () => css `
233
314
  }
234
315
 
235
316
  .ml-select__empty {
236
- padding: var(--ml-space-2) var(--ml-space-3);
237
- font-size: var(--ml-text-sm);
238
- color: var(--ml-color-text-muted);
317
+ padding: var(--ml-select-option-padding);
318
+ font-size: var(--ml-select-option-font-size);
319
+ color: var(--ml-select-placeholder-color);
239
320
  }
240
321
 
241
322
  .ml-select__option {
242
323
  display: flex;
243
324
  align-items: center;
244
- gap: var(--ml-space-2);
245
- padding: var(--ml-space-2) var(--ml-space-3);
246
- border-radius: var(--ml-radius-sm);
325
+ gap: var(--ml-select-gap);
326
+ padding: var(--ml-select-option-padding);
327
+ border-radius: var(--ml-select-option-border-radius);
247
328
  cursor: pointer;
248
- font-size: var(--ml-text-sm);
249
- font-weight: var(--ml-font-medium);
250
- color: var(--ml-color-text);
251
- transition: background-color var(--ml-duration-100) var(--ml-ease-in-out);
329
+ font-size: var(--ml-select-option-font-size);
330
+ font-weight: var(--ml-select-option-font-weight);
331
+ color: var(--ml-select-option-color);
332
+ transition: background-color var(--ml-duration-100) var(--ml-select-transition-easing);
252
333
  }
253
334
 
254
335
  .ml-select__option:hover:not(.ml-select__option--disabled) {
255
- background-color: var(--ml-color-surface-raised);
336
+ background-color: var(--ml-select-option-hover-bg);
256
337
  }
257
338
 
258
339
  .ml-select__option--focused {
259
- background-color: var(--ml-color-surface-raised);
340
+ background-color: var(--ml-select-option-hover-bg);
260
341
  }
261
342
 
262
343
  .ml-select__option--selected {
263
- background-color: var(--ml-color-primary-subtle);
344
+ background-color: var(--ml-select-option-selected-bg);
264
345
  }
265
346
 
266
347
  .ml-select__option--selected:hover:not(.ml-select__option--disabled) {
267
- background-color: var(--ml-color-primary-subtle);
348
+ background-color: var(--ml-select-option-selected-bg);
268
349
  }
269
350
 
270
351
  .ml-select__option--disabled {
271
- color: var(--ml-color-text-muted);
352
+ color: var(--ml-select-option-disabled-color);
272
353
  cursor: not-allowed;
273
354
  }
274
355
 
275
356
  .ml-select__option-icon {
276
357
  flex-shrink: 0;
277
- color: var(--ml-color-text-muted);
358
+ color: var(--ml-select-icon-color);
278
359
  }
279
360
 
280
361
  .ml-select__option-avatar {
@@ -286,7 +367,7 @@ export const selectStyles = () => css `
286
367
  }
287
368
 
288
369
  .ml-select__option--selected .ml-select__option-icon {
289
- color: var(--ml-color-primary);
370
+ color: var(--ml-select-option-check-color);
290
371
  }
291
372
 
292
373
  .ml-select__option-label {
@@ -299,30 +380,30 @@ export const selectStyles = () => css `
299
380
 
300
381
  .ml-select__option-check {
301
382
  flex-shrink: 0;
302
- color: var(--ml-color-primary);
383
+ color: var(--ml-select-option-check-color);
303
384
  margin-left: auto;
304
385
  }
305
386
 
306
387
  .ml-select__hint,
307
388
  .ml-select__error {
308
- font-size: var(--ml-text-sm);
309
- line-height: var(--ml-leading-tight);
389
+ font-size: var(--ml-select-hint-font-size);
390
+ line-height: var(--ml-select-label-line-height);
310
391
  }
311
392
 
312
393
  .ml-select__hint {
313
- color: var(--ml-color-text-muted);
394
+ color: var(--ml-select-hint-color);
314
395
  }
315
396
 
316
397
  .ml-select__error {
317
- color: var(--ml-color-danger);
398
+ color: var(--ml-select-error-color);
318
399
  }
319
400
 
320
401
  .ml-select--error .ml-select__trigger {
321
- border-color: var(--ml-color-danger);
402
+ border-color: var(--ml-select-error-border-color);
322
403
  }
323
404
 
324
405
  .ml-select--error .ml-select__trigger:focus {
325
- box-shadow: var(--ml-shadow-ring-error);
406
+ box-shadow: var(--ml-select-error-focus-shadow);
326
407
  }
327
408
 
328
409
  /* Size variants */
@@ -1 +1 @@
1
- {"version":3,"file":"slider.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/slider/slider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAsKxB,CAAC"}
1
+ {"version":3,"file":"slider.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/slider/slider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDA+MxB,CAAC"}
@@ -2,6 +2,45 @@ import { css } from '@melodicdev/core';
2
2
  export const sliderStyles = () => css `
3
3
  :host {
4
4
  display: block;
5
+
6
+ /* --- Label / Value --- */
7
+ --ml-slider-label-font-size: var(--ml-text-sm);
8
+ --ml-slider-label-font-weight: var(--ml-font-medium);
9
+ --ml-slider-label-color: var(--ml-color-text);
10
+
11
+ /* --- Track --- */
12
+ --ml-slider-track-height: 6px;
13
+ --ml-slider-track-bg: var(--ml-color-surface-hover);
14
+ --ml-slider-track-border-radius: var(--ml-radius-full);
15
+
16
+ /* --- Fill --- */
17
+ --ml-slider-fill-color: var(--ml-color-primary);
18
+
19
+ /* --- Thumb --- */
20
+ --ml-slider-thumb-size: 20px;
21
+ --ml-slider-thumb-bg: var(--ml-color-surface);
22
+ --ml-slider-thumb-border-width: 2px;
23
+ --ml-slider-thumb-border-color: var(--ml-color-primary);
24
+ --ml-slider-thumb-border-radius: var(--ml-radius-full);
25
+ --ml-slider-thumb-shadow: var(--ml-shadow-sm);
26
+ --ml-slider-thumb-hover-shadow: var(--ml-shadow-md);
27
+ --ml-slider-thumb-focus-shadow: 0 0 0 3px var(--ml-color-primary-subtle);
28
+
29
+ /* --- Error --- */
30
+ --ml-slider-error-fill-color: var(--ml-color-danger);
31
+ --ml-slider-error-thumb-border-color: var(--ml-color-danger);
32
+ --ml-slider-error-color: var(--ml-color-danger);
33
+
34
+ /* --- Hint --- */
35
+ --ml-slider-hint-font-size: var(--ml-text-sm);
36
+ --ml-slider-hint-color: var(--ml-color-text-tertiary);
37
+
38
+ /* --- Disabled --- */
39
+ --ml-slider-disabled-opacity: 0.5;
40
+
41
+ /* --- Transition --- */
42
+ --ml-slider-transition-duration: var(--ml-duration-150);
43
+ --ml-slider-transition-easing: var(--ml-ease-in-out);
5
44
  }
6
45
 
7
46
  .ml-slider__header {
@@ -12,15 +51,15 @@ export const sliderStyles = () => css `
12
51
  }
13
52
 
14
53
  .ml-slider__label {
15
- font-size: var(--ml-text-sm);
16
- font-weight: var(--ml-font-medium);
17
- color: var(--ml-color-text);
54
+ font-size: var(--ml-slider-label-font-size);
55
+ font-weight: var(--ml-slider-label-font-weight);
56
+ color: var(--ml-slider-label-color);
18
57
  }
19
58
 
20
59
  .ml-slider__value {
21
- font-size: var(--ml-text-sm);
22
- font-weight: var(--ml-font-medium);
23
- color: var(--ml-color-text);
60
+ font-size: var(--ml-slider-label-font-size);
61
+ font-weight: var(--ml-slider-label-font-weight);
62
+ color: var(--ml-slider-label-color);
24
63
  }
25
64
 
26
65
  .ml-slider__track-wrapper {
@@ -41,8 +80,9 @@ export const sliderStyles = () => css `
41
80
  content: '';
42
81
  position: absolute;
43
82
  width: 100%;
44
- background-color: var(--ml-color-surface-hover);
45
- border-radius: var(--ml-radius-full);
83
+ height: var(--ml-slider-track-height);
84
+ background-color: var(--ml-slider-track-bg);
85
+ border-radius: var(--ml-slider-track-border-radius);
46
86
  }
47
87
 
48
88
  .ml-slider--sm .ml-slider__track::before {
@@ -60,8 +100,9 @@ export const sliderStyles = () => css `
60
100
  .ml-slider__fill {
61
101
  position: absolute;
62
102
  left: 0;
63
- background-color: var(--ml-color-primary);
64
- border-radius: var(--ml-radius-full);
103
+ height: var(--ml-slider-track-height);
104
+ background-color: var(--ml-slider-fill-color);
105
+ border-radius: var(--ml-slider-track-border-radius);
65
106
  pointer-events: none;
66
107
  }
67
108
 
@@ -78,7 +119,7 @@ export const sliderStyles = () => css `
78
119
  }
79
120
 
80
121
  .ml-slider--error .ml-slider__fill {
81
- background-color: var(--ml-color-danger);
122
+ background-color: var(--ml-slider-error-fill-color);
82
123
  }
83
124
 
84
125
  /* Native range input - overlays the track */
@@ -95,59 +136,59 @@ export const sliderStyles = () => css `
95
136
 
96
137
  .ml-slider__input:disabled {
97
138
  cursor: not-allowed;
98
- opacity: 0.5;
139
+ opacity: var(--ml-slider-disabled-opacity);
99
140
  }
100
141
 
101
142
  /* Webkit thumb */
102
143
  .ml-slider__input::-webkit-slider-thumb {
103
144
  -webkit-appearance: none;
104
145
  appearance: none;
105
- width: 20px;
106
- height: 20px;
107
- border-radius: var(--ml-radius-full);
108
- background-color: var(--ml-color-surface);
109
- border: 2px solid var(--ml-color-primary);
110
- box-shadow: var(--ml-shadow-sm);
146
+ width: var(--ml-slider-thumb-size);
147
+ height: var(--ml-slider-thumb-size);
148
+ border-radius: var(--ml-slider-thumb-border-radius);
149
+ background-color: var(--ml-slider-thumb-bg);
150
+ border: var(--ml-slider-thumb-border-width) solid var(--ml-slider-thumb-border-color);
151
+ box-shadow: var(--ml-slider-thumb-shadow);
111
152
  transition:
112
- box-shadow var(--ml-duration-150) var(--ml-ease-in-out),
113
- transform var(--ml-duration-150) var(--ml-ease-in-out);
153
+ box-shadow var(--ml-slider-transition-duration) var(--ml-slider-transition-easing),
154
+ transform var(--ml-slider-transition-duration) var(--ml-slider-transition-easing);
114
155
  }
115
156
 
116
157
  .ml-slider__input:hover::-webkit-slider-thumb {
117
- box-shadow: var(--ml-shadow-md);
158
+ box-shadow: var(--ml-slider-thumb-hover-shadow);
118
159
  transform: scale(1.1);
119
160
  }
120
161
 
121
162
  .ml-slider__input:focus-visible::-webkit-slider-thumb {
122
- box-shadow: 0 0 0 3px var(--ml-color-primary-subtle);
163
+ box-shadow: var(--ml-slider-thumb-focus-shadow);
123
164
  }
124
165
 
125
166
  .ml-slider--error .ml-slider__input::-webkit-slider-thumb {
126
- border-color: var(--ml-color-danger);
167
+ border-color: var(--ml-slider-error-thumb-border-color);
127
168
  }
128
169
 
129
170
  /* Firefox thumb */
130
171
  .ml-slider__input::-moz-range-thumb {
131
- width: 20px;
132
- height: 20px;
133
- border-radius: var(--ml-radius-full);
134
- background-color: var(--ml-color-surface);
135
- border: 2px solid var(--ml-color-primary);
136
- box-shadow: var(--ml-shadow-sm);
172
+ width: var(--ml-slider-thumb-size);
173
+ height: var(--ml-slider-thumb-size);
174
+ border-radius: var(--ml-slider-thumb-border-radius);
175
+ background-color: var(--ml-slider-thumb-bg);
176
+ border: var(--ml-slider-thumb-border-width) solid var(--ml-slider-thumb-border-color);
177
+ box-shadow: var(--ml-slider-thumb-shadow);
137
178
  }
138
179
 
139
180
  .ml-slider--error .ml-slider__input::-moz-range-thumb {
140
- border-color: var(--ml-color-danger);
181
+ border-color: var(--ml-slider-error-thumb-border-color);
141
182
  }
142
183
 
143
184
  /* Hide browser track (we use custom track) */
144
185
  .ml-slider__input::-webkit-slider-runnable-track {
145
- height: 20px;
186
+ height: var(--ml-slider-thumb-size);
146
187
  background: transparent;
147
188
  }
148
189
 
149
190
  .ml-slider__input::-moz-range-track {
150
- height: 20px;
191
+ height: var(--ml-slider-thumb-size);
151
192
  background: transparent;
152
193
  border: none;
153
194
  }
@@ -155,14 +196,14 @@ export const sliderStyles = () => css `
155
196
  .ml-slider__hint {
156
197
  display: block;
157
198
  margin-top: var(--ml-space-2);
158
- font-size: var(--ml-text-sm);
159
- color: var(--ml-color-text-tertiary);
199
+ font-size: var(--ml-slider-hint-font-size);
200
+ color: var(--ml-slider-hint-color);
160
201
  }
161
202
 
162
203
  .ml-slider__error {
163
204
  display: block;
164
205
  margin-top: var(--ml-space-2);
165
- font-size: var(--ml-text-sm);
166
- color: var(--ml-color-danger);
206
+ font-size: var(--ml-slider-hint-font-size);
207
+ color: var(--ml-slider-error-color);
167
208
  }
168
209
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"textarea.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/textarea/textarea.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAgH1B,CAAC"}
1
+ {"version":3,"file":"textarea.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/textarea/textarea.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAgK1B,CAAC"}