@duskmoon-dev/core 1.10.0 → 1.10.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.
- package/README.md +3 -3
- package/dist/components/index.css +281 -0
- package/dist/components/theme-controller.css +281 -0
- package/dist/components/toggle.css +274 -0
- package/dist/esm/components/theme-controller.js +288 -0
- package/dist/esm/components/toggle.js +281 -0
- package/dist/index.css +281 -0
- package/dist/index.min.css +1 -1
- package/dist/types/types/plugin.d.ts +1 -1
- package/package.json +21 -1
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
// Auto-generated from toggle.css
|
|
2
|
+
export const css = `/**
|
|
3
|
+
* Toggle Button Component Styles
|
|
4
|
+
* DuskMoonUI - Material Design 3 inspired toggle button
|
|
5
|
+
* Used for selecting between multiple options or toggling states
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@layer components {
|
|
9
|
+
/* Base toggle button */
|
|
10
|
+
.toggle-btn {
|
|
11
|
+
display: inline-flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
gap: 0.5rem;
|
|
15
|
+
padding: 0.625rem 1rem;
|
|
16
|
+
font-size: 0.875rem;
|
|
17
|
+
font-weight: 500;
|
|
18
|
+
line-height: 1.25rem;
|
|
19
|
+
color: var(--color-on-surface-variant);
|
|
20
|
+
background-color: transparent;
|
|
21
|
+
border: 1px solid var(--color-outline);
|
|
22
|
+
border-radius: 0.5rem;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
25
|
+
user-select: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Hover state */
|
|
29
|
+
.toggle-btn:hover:not(:disabled) {
|
|
30
|
+
background-color: color-mix(in oklch, var(--color-surface-variant) 50%, transparent);
|
|
31
|
+
border-color: var(--color-outline-variant);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Active/Selected state */
|
|
35
|
+
.toggle-btn-active,
|
|
36
|
+
.toggle-btn.active {
|
|
37
|
+
color: var(--color-on-primary-container);
|
|
38
|
+
background-color: var(--color-primary-container);
|
|
39
|
+
border-color: var(--color-primary);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.toggle-btn-active:hover:not(:disabled),
|
|
43
|
+
.toggle-btn.active:hover:not(:disabled) {
|
|
44
|
+
background-color: color-mix(in oklch, var(--color-primary-container) 90%, transparent);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Secondary variant */
|
|
48
|
+
.toggle-btn-secondary.toggle-btn-active,
|
|
49
|
+
.toggle-btn-secondary.active {
|
|
50
|
+
color: var(--color-on-secondary-container);
|
|
51
|
+
background-color: var(--color-secondary-container);
|
|
52
|
+
border-color: var(--color-secondary);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Tertiary variant */
|
|
56
|
+
.toggle-btn-tertiary.toggle-btn-active,
|
|
57
|
+
.toggle-btn-tertiary.active {
|
|
58
|
+
color: var(--color-on-tertiary-container);
|
|
59
|
+
background-color: var(--color-tertiary-container);
|
|
60
|
+
border-color: var(--color-tertiary);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Focus state */
|
|
64
|
+
.toggle-btn:focus-visible {
|
|
65
|
+
outline: 2px solid var(--color-primary);
|
|
66
|
+
outline-offset: 2px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Disabled state */
|
|
70
|
+
.toggle-btn:disabled,
|
|
71
|
+
.toggle-btn-disabled {
|
|
72
|
+
opacity: 0.38;
|
|
73
|
+
cursor: not-allowed;
|
|
74
|
+
pointer-events: none;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Size variants */
|
|
78
|
+
.toggle-btn-sm {
|
|
79
|
+
padding: 0.375rem 0.75rem;
|
|
80
|
+
font-size: 0.8125rem;
|
|
81
|
+
gap: 0.375rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.toggle-btn-lg {
|
|
85
|
+
padding: 0.75rem 1.25rem;
|
|
86
|
+
font-size: 1rem;
|
|
87
|
+
gap: 0.625rem;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Toggle button group */
|
|
91
|
+
.toggle-group {
|
|
92
|
+
display: inline-flex;
|
|
93
|
+
align-items: center;
|
|
94
|
+
gap: 0;
|
|
95
|
+
border: 1px solid var(--color-outline);
|
|
96
|
+
border-radius: 0.5rem;
|
|
97
|
+
padding: 0.25rem;
|
|
98
|
+
background-color: color-mix(in oklch, var(--color-surface-variant) 30%, transparent);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Toggle buttons in group */
|
|
102
|
+
.toggle-group .toggle-btn {
|
|
103
|
+
border: none;
|
|
104
|
+
border-radius: 0.375rem;
|
|
105
|
+
margin: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.toggle-group .toggle-btn:not(:last-child) {
|
|
109
|
+
margin-right: 0.125rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Vertical group */
|
|
113
|
+
.toggle-group-vertical {
|
|
114
|
+
flex-direction: column;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.toggle-group-vertical .toggle-btn:not(:last-child) {
|
|
118
|
+
margin-right: 0;
|
|
119
|
+
margin-bottom: 0.125rem;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Exclusive selection (radio-like behavior) */
|
|
123
|
+
.toggle-group-exclusive .toggle-btn {
|
|
124
|
+
flex: 1;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* Icon-only toggle */
|
|
128
|
+
.toggle-btn-icon-only {
|
|
129
|
+
padding: 0.625rem;
|
|
130
|
+
aspect-ratio: 1;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.toggle-btn-icon-only.toggle-btn-sm {
|
|
134
|
+
padding: 0.5rem;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.toggle-btn-icon-only.toggle-btn-lg {
|
|
138
|
+
padding: 0.875rem;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* With icon */
|
|
142
|
+
.toggle-icon {
|
|
143
|
+
width: 1.125rem;
|
|
144
|
+
height: 1.125rem;
|
|
145
|
+
flex-shrink: 0;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/* Segmented control style */
|
|
149
|
+
.toggle-segmented {
|
|
150
|
+
display: inline-flex;
|
|
151
|
+
align-items: center;
|
|
152
|
+
gap: 0;
|
|
153
|
+
background-color: var(--color-surface);
|
|
154
|
+
border: 1px solid var(--color-outline-variant);
|
|
155
|
+
border-radius: 0.5rem;
|
|
156
|
+
padding: 0.25rem;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.toggle-segmented .toggle-btn {
|
|
160
|
+
border: none;
|
|
161
|
+
background-color: transparent;
|
|
162
|
+
border-radius: 0.375rem;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.toggle-segmented .toggle-btn.toggle-btn-active,
|
|
166
|
+
.toggle-segmented .toggle-btn.active {
|
|
167
|
+
background-color: var(--color-surface-variant);
|
|
168
|
+
border-color: transparent;
|
|
169
|
+
box-shadow: var(--shadow-sm);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* Chip-like toggle */
|
|
173
|
+
.toggle-chip {
|
|
174
|
+
border-radius: 1rem;
|
|
175
|
+
padding: 0.5rem 1rem;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.toggle-chip.toggle-btn-active,
|
|
179
|
+
.toggle-chip.active {
|
|
180
|
+
background-color: var(--color-primary-container);
|
|
181
|
+
border-color: var(--color-primary-container);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* Outlined variant */
|
|
185
|
+
.toggle-outlined {
|
|
186
|
+
background-color: transparent;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.toggle-outlined.toggle-btn-active,
|
|
190
|
+
.toggle-outlined.active {
|
|
191
|
+
background-color: color-mix(in oklch, var(--color-primary) 10%, transparent);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/* Filled variant */
|
|
195
|
+
.toggle-filled {
|
|
196
|
+
background-color: var(--color-surface-variant);
|
|
197
|
+
border: none;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.toggle-filled.toggle-btn-active,
|
|
201
|
+
.toggle-filled.active {
|
|
202
|
+
background-color: var(--color-primary);
|
|
203
|
+
color: var(--color-on-primary);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* With badge/indicator */
|
|
207
|
+
.toggle-badge {
|
|
208
|
+
position: relative;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.toggle-badge::after {
|
|
212
|
+
content: "";
|
|
213
|
+
position: absolute;
|
|
214
|
+
top: 0.25rem;
|
|
215
|
+
right: 0.25rem;
|
|
216
|
+
width: 0.5rem;
|
|
217
|
+
height: 0.5rem;
|
|
218
|
+
background-color: var(--color-error);
|
|
219
|
+
border-radius: 50%;
|
|
220
|
+
border: 2px solid var(--color-surface);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* Full width */
|
|
224
|
+
.toggle-full {
|
|
225
|
+
width: 100%;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.toggle-group-full {
|
|
229
|
+
width: 100%;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.toggle-group-full .toggle-btn {
|
|
233
|
+
flex: 1;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/* Loading state */
|
|
237
|
+
.toggle-loading {
|
|
238
|
+
position: relative;
|
|
239
|
+
pointer-events: none;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.toggle-loading::after {
|
|
243
|
+
content: "";
|
|
244
|
+
position: absolute;
|
|
245
|
+
top: 50%;
|
|
246
|
+
left: 50%;
|
|
247
|
+
width: 1rem;
|
|
248
|
+
height: 1rem;
|
|
249
|
+
margin-top: -0.5rem;
|
|
250
|
+
margin-left: -0.5rem;
|
|
251
|
+
border: 2px solid currentColor;
|
|
252
|
+
border-top-color: transparent;
|
|
253
|
+
border-radius: 50%;
|
|
254
|
+
animation: toggle-spin 0.6s linear infinite;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
@keyframes toggle-spin {
|
|
258
|
+
0% {
|
|
259
|
+
transform: rotate(0deg);
|
|
260
|
+
}
|
|
261
|
+
100% {
|
|
262
|
+
transform: rotate(360deg);
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/* Reduce Motion */
|
|
267
|
+
@media (prefers-reduced-motion: reduce) {
|
|
268
|
+
.toggle-btn {
|
|
269
|
+
transition: none;
|
|
270
|
+
}
|
|
271
|
+
.toggle-loading::after {
|
|
272
|
+
animation: none;
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
`;
|
|
277
|
+
|
|
278
|
+
const sheet = new CSSStyleSheet();
|
|
279
|
+
sheet.replaceSync(css);
|
|
280
|
+
export const styles = sheet;
|
|
281
|
+
export default sheet;
|
package/dist/index.css
CHANGED
|
@@ -9747,6 +9747,287 @@ html {
|
|
|
9747
9747
|
}
|
|
9748
9748
|
}
|
|
9749
9749
|
|
|
9750
|
+
/**
|
|
9751
|
+
* Theme Controller Component Styles
|
|
9752
|
+
* DuskMoonUI - Two display modes for theme switching:
|
|
9753
|
+
*
|
|
9754
|
+
* 1. Switch (.theme-controller) — inline pill-shaped radio group, all options visible
|
|
9755
|
+
* 2. Dropdown (.theme-controller-dropdown) — <details>/<summary> with floating menu
|
|
9756
|
+
*
|
|
9757
|
+
* Both modes reuse .theme-controller-item (hidden radio) and .theme-controller-label
|
|
9758
|
+
* for CSS-only active state via :checked + label.
|
|
9759
|
+
*/
|
|
9760
|
+
|
|
9761
|
+
@layer components {
|
|
9762
|
+
/* ========================================
|
|
9763
|
+
* SHARED — Radio input & label (used in both modes)
|
|
9764
|
+
* ======================================== */
|
|
9765
|
+
|
|
9766
|
+
/* Hidden Radio Input — visually hidden but accessible */
|
|
9767
|
+
.theme-controller-item {
|
|
9768
|
+
position: absolute;
|
|
9769
|
+
width: 1px;
|
|
9770
|
+
height: 1px;
|
|
9771
|
+
padding: 0;
|
|
9772
|
+
margin: -1px;
|
|
9773
|
+
overflow: hidden;
|
|
9774
|
+
clip: rect(0, 0, 0, 0);
|
|
9775
|
+
white-space: nowrap;
|
|
9776
|
+
border: 0;
|
|
9777
|
+
}
|
|
9778
|
+
|
|
9779
|
+
/* Visible Label — the clickable option */
|
|
9780
|
+
.theme-controller-label {
|
|
9781
|
+
display: inline-flex;
|
|
9782
|
+
align-items: center;
|
|
9783
|
+
justify-content: center;
|
|
9784
|
+
gap: 0.5rem;
|
|
9785
|
+
padding: 0.5rem 1rem;
|
|
9786
|
+
font-size: 0.875rem;
|
|
9787
|
+
font-weight: 500;
|
|
9788
|
+
line-height: 1.25rem;
|
|
9789
|
+
color: var(--color-on-surface-variant);
|
|
9790
|
+
background-color: transparent;
|
|
9791
|
+
border-radius: calc(var(--radius-box, 1.5rem) - 0.25rem);
|
|
9792
|
+
cursor: pointer;
|
|
9793
|
+
transition: background-color 150ms ease-in-out, color 150ms ease-in-out,
|
|
9794
|
+
box-shadow 150ms ease-in-out;
|
|
9795
|
+
user-select: none;
|
|
9796
|
+
white-space: nowrap;
|
|
9797
|
+
}
|
|
9798
|
+
|
|
9799
|
+
/* Hover state */
|
|
9800
|
+
.theme-controller-label:hover {
|
|
9801
|
+
background-color: var(--color-surface-container-high);
|
|
9802
|
+
}
|
|
9803
|
+
|
|
9804
|
+
/* Focus-visible ring on the label when its radio is focused */
|
|
9805
|
+
.theme-controller-item:focus-visible + .theme-controller-label {
|
|
9806
|
+
outline: 2px solid var(--color-primary);
|
|
9807
|
+
outline-offset: 2px;
|
|
9808
|
+
}
|
|
9809
|
+
|
|
9810
|
+
/* Active/checked state */
|
|
9811
|
+
.theme-controller-item:checked + .theme-controller-label {
|
|
9812
|
+
background-color: var(--color-primary-container);
|
|
9813
|
+
color: var(--color-on-primary-container);
|
|
9814
|
+
box-shadow: var(--shadow-xs);
|
|
9815
|
+
}
|
|
9816
|
+
|
|
9817
|
+
.theme-controller-item:checked + .theme-controller-label:hover {
|
|
9818
|
+
background-color: color-mix(in oklch, var(--color-primary-container), black 5%);
|
|
9819
|
+
}
|
|
9820
|
+
|
|
9821
|
+
/* ========================================
|
|
9822
|
+
* SWITCH MODE — inline pill radio group
|
|
9823
|
+
* ======================================== */
|
|
9824
|
+
|
|
9825
|
+
.theme-controller {
|
|
9826
|
+
display: inline-flex;
|
|
9827
|
+
align-items: stretch;
|
|
9828
|
+
background-color: var(--color-surface-container);
|
|
9829
|
+
border: 1px solid var(--color-outline-variant);
|
|
9830
|
+
border-radius: var(--radius-box, 1.5rem);
|
|
9831
|
+
padding: 0.25rem;
|
|
9832
|
+
gap: 0.125rem;
|
|
9833
|
+
}
|
|
9834
|
+
|
|
9835
|
+
/* ── Switch Size Variants ── */
|
|
9836
|
+
|
|
9837
|
+
.theme-controller-sm {
|
|
9838
|
+
padding: 0.125rem;
|
|
9839
|
+
border-radius: calc(var(--radius-box, 1.5rem) * 0.75);
|
|
9840
|
+
}
|
|
9841
|
+
|
|
9842
|
+
.theme-controller-sm .theme-controller-label {
|
|
9843
|
+
padding: 0.375rem 0.75rem;
|
|
9844
|
+
font-size: 0.75rem;
|
|
9845
|
+
line-height: 1rem;
|
|
9846
|
+
border-radius: calc(var(--radius-box, 1.5rem) * 0.75 - 0.125rem);
|
|
9847
|
+
}
|
|
9848
|
+
|
|
9849
|
+
.theme-controller-lg {
|
|
9850
|
+
padding: 0.375rem;
|
|
9851
|
+
gap: 0.25rem;
|
|
9852
|
+
border-radius: calc(var(--radius-box, 1.5rem) * 1.25);
|
|
9853
|
+
}
|
|
9854
|
+
|
|
9855
|
+
.theme-controller-lg .theme-controller-label {
|
|
9856
|
+
padding: 0.75rem 1.5rem;
|
|
9857
|
+
font-size: 1rem;
|
|
9858
|
+
line-height: 1.5rem;
|
|
9859
|
+
border-radius: calc(var(--radius-box, 1.5rem) * 1.25 - 0.375rem);
|
|
9860
|
+
}
|
|
9861
|
+
|
|
9862
|
+
/* ── Switch Icon-only Variant ── */
|
|
9863
|
+
|
|
9864
|
+
.theme-controller-icon .theme-controller-label {
|
|
9865
|
+
padding: 0.5rem;
|
|
9866
|
+
}
|
|
9867
|
+
|
|
9868
|
+
.theme-controller-icon.theme-controller-sm .theme-controller-label {
|
|
9869
|
+
padding: 0.375rem;
|
|
9870
|
+
}
|
|
9871
|
+
|
|
9872
|
+
.theme-controller-icon.theme-controller-lg .theme-controller-label {
|
|
9873
|
+
padding: 0.75rem;
|
|
9874
|
+
}
|
|
9875
|
+
|
|
9876
|
+
/* ========================================
|
|
9877
|
+
* DROPDOWN MODE — <details>/<summary> with floating menu
|
|
9878
|
+
* ======================================== */
|
|
9879
|
+
|
|
9880
|
+
.theme-controller-dropdown {
|
|
9881
|
+
position: relative;
|
|
9882
|
+
display: inline-block;
|
|
9883
|
+
}
|
|
9884
|
+
|
|
9885
|
+
/* Trigger button (<summary>) */
|
|
9886
|
+
.theme-controller-trigger {
|
|
9887
|
+
display: inline-flex;
|
|
9888
|
+
align-items: center;
|
|
9889
|
+
gap: 0.5rem;
|
|
9890
|
+
padding: 0.5rem 0.75rem;
|
|
9891
|
+
font-size: 0.875rem;
|
|
9892
|
+
font-weight: 500;
|
|
9893
|
+
line-height: 1.25rem;
|
|
9894
|
+
color: var(--color-on-surface);
|
|
9895
|
+
background-color: var(--color-surface-container);
|
|
9896
|
+
border: 1px solid var(--color-outline-variant);
|
|
9897
|
+
border-radius: var(--radius-field, 0.5rem);
|
|
9898
|
+
cursor: pointer;
|
|
9899
|
+
user-select: none;
|
|
9900
|
+
transition: background-color 150ms ease-in-out;
|
|
9901
|
+
list-style: none;
|
|
9902
|
+
}
|
|
9903
|
+
|
|
9904
|
+
.theme-controller-trigger::-webkit-details-marker {
|
|
9905
|
+
display: none;
|
|
9906
|
+
}
|
|
9907
|
+
|
|
9908
|
+
.theme-controller-trigger:hover {
|
|
9909
|
+
background-color: var(--color-surface-container-high);
|
|
9910
|
+
}
|
|
9911
|
+
|
|
9912
|
+
.theme-controller-trigger:focus-visible {
|
|
9913
|
+
outline: 2px solid var(--color-primary);
|
|
9914
|
+
outline-offset: 2px;
|
|
9915
|
+
}
|
|
9916
|
+
|
|
9917
|
+
/* Chevron indicator */
|
|
9918
|
+
.theme-controller-trigger::after {
|
|
9919
|
+
content: '';
|
|
9920
|
+
display: inline-block;
|
|
9921
|
+
width: 0.5rem;
|
|
9922
|
+
height: 0.5rem;
|
|
9923
|
+
border-right: 2px solid currentColor;
|
|
9924
|
+
border-bottom: 2px solid currentColor;
|
|
9925
|
+
transform: rotate(45deg);
|
|
9926
|
+
margin-top: -0.125rem;
|
|
9927
|
+
transition: transform 150ms ease-in-out;
|
|
9928
|
+
}
|
|
9929
|
+
|
|
9930
|
+
.theme-controller-dropdown[open] .theme-controller-trigger::after {
|
|
9931
|
+
transform: rotate(-135deg);
|
|
9932
|
+
margin-top: 0.125rem;
|
|
9933
|
+
}
|
|
9934
|
+
|
|
9935
|
+
/* Floating menu */
|
|
9936
|
+
.theme-controller-menu {
|
|
9937
|
+
position: absolute;
|
|
9938
|
+
top: calc(100% + 0.25rem);
|
|
9939
|
+
left: 0;
|
|
9940
|
+
z-index: 50;
|
|
9941
|
+
min-width: 100%;
|
|
9942
|
+
background-color: var(--color-surface-container);
|
|
9943
|
+
border: 1px solid var(--color-outline-variant);
|
|
9944
|
+
border-radius: var(--radius-field, 0.5rem);
|
|
9945
|
+
padding: 0.25rem;
|
|
9946
|
+
box-shadow: var(--shadow-md);
|
|
9947
|
+
display: flex;
|
|
9948
|
+
flex-direction: column;
|
|
9949
|
+
gap: 0.125rem;
|
|
9950
|
+
}
|
|
9951
|
+
|
|
9952
|
+
/* Menu labels are full-width and left-aligned */
|
|
9953
|
+
.theme-controller-menu .theme-controller-label {
|
|
9954
|
+
width: 100%;
|
|
9955
|
+
justify-content: flex-start;
|
|
9956
|
+
border-radius: calc(var(--radius-field, 0.5rem) - 0.25rem);
|
|
9957
|
+
}
|
|
9958
|
+
|
|
9959
|
+
/* ── Dropdown Size Variants ── */
|
|
9960
|
+
|
|
9961
|
+
.theme-controller-dropdown-sm .theme-controller-trigger {
|
|
9962
|
+
padding: 0.375rem 0.625rem;
|
|
9963
|
+
font-size: 0.75rem;
|
|
9964
|
+
line-height: 1rem;
|
|
9965
|
+
}
|
|
9966
|
+
|
|
9967
|
+
.theme-controller-dropdown-sm .theme-controller-menu {
|
|
9968
|
+
padding: 0.125rem;
|
|
9969
|
+
}
|
|
9970
|
+
|
|
9971
|
+
.theme-controller-dropdown-sm .theme-controller-menu .theme-controller-label {
|
|
9972
|
+
padding: 0.375rem 0.75rem;
|
|
9973
|
+
font-size: 0.75rem;
|
|
9974
|
+
line-height: 1rem;
|
|
9975
|
+
}
|
|
9976
|
+
|
|
9977
|
+
.theme-controller-dropdown-lg .theme-controller-trigger {
|
|
9978
|
+
padding: 0.75rem 1rem;
|
|
9979
|
+
font-size: 1rem;
|
|
9980
|
+
line-height: 1.5rem;
|
|
9981
|
+
}
|
|
9982
|
+
|
|
9983
|
+
.theme-controller-dropdown-lg .theme-controller-menu {
|
|
9984
|
+
padding: 0.375rem;
|
|
9985
|
+
}
|
|
9986
|
+
|
|
9987
|
+
.theme-controller-dropdown-lg .theme-controller-menu .theme-controller-label {
|
|
9988
|
+
padding: 0.75rem 1.5rem;
|
|
9989
|
+
font-size: 1rem;
|
|
9990
|
+
line-height: 1.5rem;
|
|
9991
|
+
}
|
|
9992
|
+
|
|
9993
|
+
/* ── Dropdown Icon-only Trigger ── */
|
|
9994
|
+
|
|
9995
|
+
.theme-controller-dropdown-icon .theme-controller-trigger {
|
|
9996
|
+
padding: 0.5rem;
|
|
9997
|
+
}
|
|
9998
|
+
|
|
9999
|
+
/* Hide chevron for icon-only trigger */
|
|
10000
|
+
.theme-controller-dropdown-icon .theme-controller-trigger::after {
|
|
10001
|
+
display: none;
|
|
10002
|
+
}
|
|
10003
|
+
|
|
10004
|
+
.theme-controller-dropdown-icon.theme-controller-dropdown-sm .theme-controller-trigger {
|
|
10005
|
+
padding: 0.375rem;
|
|
10006
|
+
}
|
|
10007
|
+
|
|
10008
|
+
.theme-controller-dropdown-icon.theme-controller-dropdown-lg .theme-controller-trigger {
|
|
10009
|
+
padding: 0.75rem;
|
|
10010
|
+
}
|
|
10011
|
+
|
|
10012
|
+
/* ── Dropdown Alignment ── */
|
|
10013
|
+
|
|
10014
|
+
.theme-controller-dropdown-end .theme-controller-menu {
|
|
10015
|
+
left: auto;
|
|
10016
|
+
right: 0;
|
|
10017
|
+
}
|
|
10018
|
+
|
|
10019
|
+
/* ========================================
|
|
10020
|
+
* REDUCED MOTION
|
|
10021
|
+
* ======================================== */
|
|
10022
|
+
|
|
10023
|
+
@media (prefers-reduced-motion: reduce) {
|
|
10024
|
+
.theme-controller-label,
|
|
10025
|
+
.theme-controller-trigger,
|
|
10026
|
+
.theme-controller-trigger::after {
|
|
10027
|
+
transition: none;
|
|
10028
|
+
}
|
|
10029
|
+
}
|
|
10030
|
+
}
|
|
9750
10031
|
|
|
9751
10032
|
/**
|
|
9752
10033
|
* Toggle Button Component Styles
|