@melodicdev/components 1.4.0 → 1.5.1

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 +3582 -1654
  2. package/assets/melodic-components.js.map +1 -1
  3. package/assets/melodic-components.min.js +5406 -3478
  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 +64 -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 +82 -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 +153 -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 +80 -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 +108 -34
  86. package/lib/components/navigation/sidebar/sidebar.styles.d.ts.map +1 -1
  87. package/lib/components/navigation/sidebar/sidebar.styles.js +183 -62
  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 +31 -15
  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 +64 -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,86 @@ 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
+ --ml-select-focus-inset-shadow: none;
34
+
35
+ /* --- Error --- */
36
+ --ml-select-error-border-color: var(--ml-color-danger);
37
+ --ml-select-error-focus-shadow: var(--ml-shadow-ring-error);
38
+ --ml-select-error-color: var(--ml-color-danger);
39
+
40
+ /* --- Disabled --- */
41
+ --ml-select-disabled-bg: var(--ml-color-input-disabled-bg);
42
+ --ml-select-disabled-color: var(--ml-color-text-muted);
43
+
44
+ /* --- Placeholder --- */
45
+ --ml-select-placeholder-color: var(--ml-color-text-muted);
46
+
47
+ /* --- Chevron / Icons --- */
48
+ --ml-select-icon-color: var(--ml-color-text-muted);
49
+
50
+ /* --- Dropdown --- */
51
+ --ml-select-dropdown-bg: var(--ml-color-surface);
52
+ --ml-select-dropdown-border-color: var(--ml-color-border);
53
+ --ml-select-dropdown-border-radius: var(--ml-radius);
54
+ --ml-select-dropdown-shadow: var(--ml-shadow-lg);
55
+ --ml-select-dropdown-max-height: 280px;
56
+ --ml-select-dropdown-padding: var(--ml-space-1-5);
57
+
58
+ /* --- Option --- */
59
+ --ml-select-option-padding: var(--ml-space-2) var(--ml-space-3);
60
+ --ml-select-option-border-radius: var(--ml-radius-sm);
61
+ --ml-select-option-font-size: var(--ml-text-sm);
62
+ --ml-select-option-font-weight: var(--ml-font-medium);
63
+ --ml-select-option-color: var(--ml-color-text);
64
+ --ml-select-option-hover-bg: var(--ml-color-surface-raised);
65
+ --ml-select-option-selected-bg: var(--ml-color-primary-subtle);
66
+ --ml-select-option-disabled-color: var(--ml-color-text-muted);
67
+ --ml-select-option-check-color: var(--ml-color-primary);
68
+
69
+ /* --- Tag (multi-select) --- */
70
+ --ml-select-tag-height: 20px;
71
+ --ml-select-tag-border-radius: var(--ml-radius-full);
72
+ --ml-select-tag-border-color: var(--ml-color-border);
73
+ --ml-select-tag-bg: var(--ml-color-surface);
74
+ --ml-select-tag-font-size: var(--ml-text-xs);
75
+ --ml-select-tag-font-weight: var(--ml-font-medium);
76
+ --ml-select-tag-color: var(--ml-color-text);
77
+ --ml-select-tag-remove-color: var(--ml-color-text-secondary);
78
+ --ml-select-tag-remove-hover-color: var(--ml-color-text);
79
+ --ml-select-tag-remove-hover-bg: var(--ml-color-surface-raised);
80
+
81
+ /* --- Hint --- */
82
+ --ml-select-hint-color: var(--ml-color-text-muted);
83
+ --ml-select-hint-font-size: var(--ml-text-sm);
84
+
85
+ /* --- Transition --- */
86
+ --ml-select-transition-duration: var(--ml-duration-150);
87
+ --ml-select-transition-easing: var(--ml-ease-in-out);
8
88
  }
9
89
 
10
90
  *,
@@ -26,14 +106,14 @@ export const selectStyles = () => css `
26
106
  }
27
107
 
28
108
  .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);
109
+ font-size: var(--ml-select-label-font-size);
110
+ font-weight: var(--ml-select-label-font-weight);
111
+ color: var(--ml-select-label-color);
112
+ line-height: var(--ml-select-label-line-height);
33
113
  }
34
114
 
35
115
  .ml-select__required {
36
- color: var(--ml-color-danger);
116
+ color: var(--ml-select-required-color);
37
117
  margin-left: var(--ml-space-0-5);
38
118
  }
39
119
 
@@ -41,42 +121,44 @@ export const selectStyles = () => css `
41
121
  display: flex;
42
122
  align-items: center;
43
123
  justify-content: space-between;
44
- gap: var(--ml-space-2);
124
+ gap: var(--ml-select-gap);
45
125
  width: 100%;
46
126
  max-width: 100%;
47
127
  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);
128
+ padding: var(--ml-select-padding);
129
+ background-color: var(--ml-select-bg);
130
+ border: var(--ml-select-border-width) solid var(--ml-select-border-color);
131
+ border-radius: var(--ml-select-border-radius);
51
132
  box-shadow: none;
52
- color: var(--ml-color-text);
53
- font-family: var(--ml-font-sans);
133
+ color: var(--ml-select-color);
134
+ font-family: var(--ml-select-font-family);
135
+ font-size: var(--ml-select-font-size);
54
136
  cursor: pointer;
55
137
  text-align: left;
56
138
  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);
139
+ border-color var(--ml-select-transition-duration) var(--ml-select-transition-easing),
140
+ box-shadow var(--ml-select-transition-duration) var(--ml-select-transition-easing);
59
141
  }
60
142
 
61
143
  .ml-select:not(.ml-select--disabled) .ml-select__trigger:hover {
62
- border-color: var(--ml-color-border-strong);
144
+ border-color: var(--ml-select-hover-border-color);
63
145
  }
64
146
 
65
147
  .ml-select__trigger:focus,
66
148
  .ml-select__trigger:focus-within {
67
149
  outline: none;
68
- border-color: var(--ml-color-primary);
69
- box-shadow: var(--ml-shadow-focus-ring);
150
+ border-color: var(--ml-select-focus-border-color);
151
+ box-shadow: var(--ml-select-focus-shadow), var(--ml-select-focus-inset-shadow);
70
152
  }
71
153
 
72
154
  .ml-select--disabled .ml-select__trigger {
73
- background-color: var(--ml-color-input-disabled-bg);
155
+ background-color: var(--ml-select-disabled-bg);
74
156
  cursor: not-allowed;
75
- color: var(--ml-color-text-muted);
157
+ color: var(--ml-select-disabled-color);
76
158
  }
77
159
 
78
160
  .ml-select--disabled .ml-select__search {
79
- color: var(--ml-color-text-muted);
161
+ color: var(--ml-select-disabled-color);
80
162
  }
81
163
 
82
164
  .ml-select__value {
@@ -84,7 +166,7 @@ export const selectStyles = () => css `
84
166
  min-width: 0;
85
167
  display: flex;
86
168
  align-items: center;
87
- gap: var(--ml-space-2);
169
+ gap: var(--ml-select-gap);
88
170
  overflow: hidden;
89
171
  text-overflow: ellipsis;
90
172
  white-space: nowrap;
@@ -103,7 +185,7 @@ export const selectStyles = () => css `
103
185
  }
104
186
 
105
187
  .ml-select__search-icon {
106
- color: var(--ml-color-text-muted);
188
+ color: var(--ml-select-icon-color);
107
189
  flex-shrink: 0;
108
190
  height: 20px;
109
191
  display: flex;
@@ -118,21 +200,21 @@ export const selectStyles = () => css `
118
200
  outline: none;
119
201
  background: transparent;
120
202
  font: inherit;
121
- color: var(--ml-color-text);
203
+ color: var(--ml-select-color);
122
204
  padding: 0;
123
205
  line-height: 20px;
124
206
  }
125
207
 
126
208
  .ml-select__search::placeholder {
127
- color: var(--ml-color-text-muted);
209
+ color: var(--ml-select-placeholder-color);
128
210
  }
129
211
 
130
212
  .ml-select__placeholder {
131
- color: var(--ml-color-text-muted);
213
+ color: var(--ml-select-placeholder-color);
132
214
  }
133
215
 
134
216
  .ml-select__value-icon {
135
- color: var(--ml-color-text-muted);
217
+ color: var(--ml-select-icon-color);
136
218
  flex-shrink: 0;
137
219
  }
138
220
 
@@ -145,13 +227,13 @@ export const selectStyles = () => css `
145
227
  align-items: center;
146
228
  gap: var(--ml-space-1);
147
229
  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);
230
+ height: var(--ml-select-tag-height);
231
+ border-radius: var(--ml-select-tag-border-radius);
232
+ border: var(--ml-select-border-width) solid var(--ml-select-tag-border-color);
233
+ background-color: var(--ml-select-tag-bg);
234
+ font-size: var(--ml-select-tag-font-size);
235
+ font-weight: var(--ml-select-tag-font-weight);
236
+ color: var(--ml-select-tag-color);
155
237
  line-height: 1;
156
238
  white-space: nowrap;
157
239
  max-width: 100%;
@@ -168,7 +250,7 @@ export const selectStyles = () => css `
168
250
  .ml-select__tag-avatar {
169
251
  width: 14px;
170
252
  height: 14px;
171
- border-radius: var(--ml-radius-full);
253
+ border-radius: var(--ml-select-tag-border-radius);
172
254
  object-fit: cover;
173
255
  margin-left: -2px;
174
256
  }
@@ -179,26 +261,26 @@ export const selectStyles = () => css `
179
261
  padding: 2px;
180
262
  margin-left: var(--ml-space-0-5);
181
263
  margin-right: -4px;
182
- color: var(--ml-color-text-secondary);
264
+ color: var(--ml-select-tag-remove-color);
183
265
  cursor: pointer;
184
266
  display: inline-flex;
185
267
  align-items: center;
186
268
  justify-content: center;
187
269
  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);
270
+ border-radius: var(--ml-select-tag-border-radius);
271
+ transition: color var(--ml-duration-100) var(--ml-select-transition-easing),
272
+ background-color var(--ml-duration-100) var(--ml-select-transition-easing);
191
273
  }
192
274
 
193
275
  .ml-select__tag-remove:hover {
194
- color: var(--ml-color-text);
195
- background-color: var(--ml-color-surface-raised);
276
+ color: var(--ml-select-tag-remove-hover-color);
277
+ background-color: var(--ml-select-tag-remove-hover-bg);
196
278
  }
197
279
 
198
280
  .ml-select__chevron {
199
281
  flex-shrink: 0;
200
- color: var(--ml-color-text-muted);
201
- transition: transform var(--ml-duration-200) var(--ml-ease-in-out);
282
+ color: var(--ml-select-icon-color);
283
+ transition: transform var(--ml-duration-200) var(--ml-select-transition-easing);
202
284
  }
203
285
 
204
286
  .ml-select--open .ml-select__chevron {
@@ -216,13 +298,13 @@ export const selectStyles = () => css `
216
298
  inset: unset;
217
299
  margin: 0;
218
300
  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;
301
+ background-color: var(--ml-select-dropdown-bg);
302
+ border: var(--ml-select-border-width) solid var(--ml-select-dropdown-border-color);
303
+ border-radius: var(--ml-select-dropdown-border-radius);
304
+ box-shadow: var(--ml-select-dropdown-shadow);
305
+ max-height: var(--ml-select-dropdown-max-height);
224
306
  overflow-y: auto;
225
- padding: var(--ml-space-1-5);
307
+ padding: var(--ml-select-dropdown-padding);
226
308
  display: flex;
227
309
  flex-direction: column;
228
310
  gap: var(--ml-space-1);
@@ -233,48 +315,48 @@ export const selectStyles = () => css `
233
315
  }
234
316
 
235
317
  .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);
318
+ padding: var(--ml-select-option-padding);
319
+ font-size: var(--ml-select-option-font-size);
320
+ color: var(--ml-select-placeholder-color);
239
321
  }
240
322
 
241
323
  .ml-select__option {
242
324
  display: flex;
243
325
  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);
326
+ gap: var(--ml-select-gap);
327
+ padding: var(--ml-select-option-padding);
328
+ border-radius: var(--ml-select-option-border-radius);
247
329
  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);
330
+ font-size: var(--ml-select-option-font-size);
331
+ font-weight: var(--ml-select-option-font-weight);
332
+ color: var(--ml-select-option-color);
333
+ transition: background-color var(--ml-duration-100) var(--ml-select-transition-easing);
252
334
  }
253
335
 
254
336
  .ml-select__option:hover:not(.ml-select__option--disabled) {
255
- background-color: var(--ml-color-surface-raised);
337
+ background-color: var(--ml-select-option-hover-bg);
256
338
  }
257
339
 
258
340
  .ml-select__option--focused {
259
- background-color: var(--ml-color-surface-raised);
341
+ background-color: var(--ml-select-option-hover-bg);
260
342
  }
261
343
 
262
344
  .ml-select__option--selected {
263
- background-color: var(--ml-color-primary-subtle);
345
+ background-color: var(--ml-select-option-selected-bg);
264
346
  }
265
347
 
266
348
  .ml-select__option--selected:hover:not(.ml-select__option--disabled) {
267
- background-color: var(--ml-color-primary-subtle);
349
+ background-color: var(--ml-select-option-selected-bg);
268
350
  }
269
351
 
270
352
  .ml-select__option--disabled {
271
- color: var(--ml-color-text-muted);
353
+ color: var(--ml-select-option-disabled-color);
272
354
  cursor: not-allowed;
273
355
  }
274
356
 
275
357
  .ml-select__option-icon {
276
358
  flex-shrink: 0;
277
- color: var(--ml-color-text-muted);
359
+ color: var(--ml-select-icon-color);
278
360
  }
279
361
 
280
362
  .ml-select__option-avatar {
@@ -286,7 +368,7 @@ export const selectStyles = () => css `
286
368
  }
287
369
 
288
370
  .ml-select__option--selected .ml-select__option-icon {
289
- color: var(--ml-color-primary);
371
+ color: var(--ml-select-option-check-color);
290
372
  }
291
373
 
292
374
  .ml-select__option-label {
@@ -299,30 +381,30 @@ export const selectStyles = () => css `
299
381
 
300
382
  .ml-select__option-check {
301
383
  flex-shrink: 0;
302
- color: var(--ml-color-primary);
384
+ color: var(--ml-select-option-check-color);
303
385
  margin-left: auto;
304
386
  }
305
387
 
306
388
  .ml-select__hint,
307
389
  .ml-select__error {
308
- font-size: var(--ml-text-sm);
309
- line-height: var(--ml-leading-tight);
390
+ font-size: var(--ml-select-hint-font-size);
391
+ line-height: var(--ml-select-label-line-height);
310
392
  }
311
393
 
312
394
  .ml-select__hint {
313
- color: var(--ml-color-text-muted);
395
+ color: var(--ml-select-hint-color);
314
396
  }
315
397
 
316
398
  .ml-select__error {
317
- color: var(--ml-color-danger);
399
+ color: var(--ml-select-error-color);
318
400
  }
319
401
 
320
402
  .ml-select--error .ml-select__trigger {
321
- border-color: var(--ml-color-danger);
403
+ border-color: var(--ml-select-error-border-color);
322
404
  }
323
405
 
324
406
  .ml-select--error .ml-select__trigger:focus {
325
- box-shadow: var(--ml-shadow-ring-error);
407
+ box-shadow: var(--ml-select-error-focus-shadow);
326
408
  }
327
409
 
328
410
  /* 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,iDAiK1B,CAAC"}