aeico-components 0.1.2 → 0.1.3

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 (33) hide show
  1. package/dist/index.cjs +1182 -1182
  2. package/dist/index.js +1182 -1182
  3. package/package.json +63 -63
  4. package/src/styles/color.css +117 -117
  5. package/src/styles/components/alert.css +104 -104
  6. package/src/styles/components/badge.css +67 -67
  7. package/src/styles/components/breadcrumb-item.css +59 -59
  8. package/src/styles/components/breadcrumb.css +19 -19
  9. package/src/styles/components/button-group.css +25 -25
  10. package/src/styles/components/button.css +213 -213
  11. package/src/styles/components/card.css +64 -64
  12. package/src/styles/components/checkbox.css +78 -78
  13. package/src/styles/components/detail.css +127 -127
  14. package/src/styles/components/dialog.css +103 -103
  15. package/src/styles/components/divider.css +18 -18
  16. package/src/styles/components/dropdown-item.css +91 -91
  17. package/src/styles/components/dropdown.css +179 -179
  18. package/src/styles/components/icon-button.css +116 -116
  19. package/src/styles/components/icon.css +29 -29
  20. package/src/styles/components/navbar.css +250 -250
  21. package/src/styles/components/radio-group.css +360 -360
  22. package/src/styles/components/select-option.css +43 -43
  23. package/src/styles/components/select.css +222 -222
  24. package/src/styles/components/slider.css +326 -326
  25. package/src/styles/components/switch.css +117 -117
  26. package/src/styles/components/tab-panel.css +8 -8
  27. package/src/styles/components/tab.css +44 -44
  28. package/src/styles/components/tabs.css +16 -16
  29. package/src/styles/components/tag.css +107 -107
  30. package/src/styles/components/text-input.css +110 -110
  31. package/src/styles/layout.css +43 -43
  32. package/src/styles/size.css +7 -7
  33. package/src/styles/variables.css +368 -368
package/src/styles/components/radio-group.css CHANGED
@@ -1,360 +1,360 @@
1
- :host {
2
- display: inline-flex;
3
- align-items: center;
4
- gap: var(--rg-gap, 0.286em);
5
- font-size: var(--size-m);
6
- --rg-solid-bg: var(--color-solid);
7
- --rg-solid-bg-hover: var(--color-solid-hover);
8
- --rg-solid-bg-active: var(--color-solid-active);
9
- --rg-solid-color: var(--color-on-solid);
10
- --rg-solid-color-hover: var(--color-on-solid-hover, var(--color-on-solid));
11
- --rg-border: var(--color-border);
12
- --rg-border-hover: var(--color-border-hover);
13
- --rg-accent: var(--color-accent);
14
- --rg-accent-hover: var(--color-accent-hover);
15
- --rg-subtle-bg: var(--color-subtle);
16
- --rg-subtle-bg-hover: var(--color-subtle-hover);
17
-
18
- --rg-font-size: 1em;
19
- --rg-height: 2.286em;
20
- --rg-padding: 0.429em 1.071em;
21
- --rg-min-width: 4.571em;
22
- --rg-radius: 4px;
23
- --rg-font-weight: 400;
24
-
25
- --color-unselected: var(--surface-base);
26
- --color-unselected-hover: var(--color-gray-lighter);
27
- }
28
-
29
- :host([size="xs"]) { --rg-radius: 3px; }
30
- :host([size="sm"]) { --rg-radius: 3px; }
31
-
32
- .rg-container {
33
- display: inline-flex;
34
- align-items: center;
35
- flex-wrap: wrap;
36
- gap: 6px;
37
- }
38
-
39
- slot {
40
- display: none;
41
- }
42
-
43
- .rg-radio-option {
44
- display: inline-flex;
45
- align-items: center;
46
- gap: 6px;
47
- cursor: pointer;
48
- font-size: var(--rg-font-size);
49
- color: var(--color-text-main);
50
- user-select: none;
51
- }
52
-
53
- .rg-radio-input {
54
- width: 14px;
55
- height: 14px;
56
- accent-color: var(--rg-solid-bg, var(--color-primary));
57
- cursor: pointer;
58
- margin: 0;
59
- flex-shrink: 0;
60
- }
61
-
62
- .rg-radio-label {
63
- line-height: 1.5;
64
- }
65
-
66
- .rg-btn {
67
- display: inline-flex;
68
- align-items: center;
69
- justify-content: center;
70
- font-family: inherit;
71
- font-size: var(--rg-font-size);
72
- font-weight: 400;
73
- height: var(--rg-height);
74
- padding: var(--rg-padding);
75
- min-width: var(--rg-min-width);
76
- white-space: nowrap;
77
- cursor: pointer;
78
- user-select: none;
79
- transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
80
- outline: none;
81
- border-radius: var(--rg-radius);
82
-
83
- background: var(--color-unselected);
84
- border: 1px solid var(--color-gray-light);
85
- color: var(--color-text-muted);
86
- }
87
-
88
- .rg-btn:hover:not(:disabled):not(.selected) {
89
- background: var(--color-unselected-hover);
90
- border-color: var(--color-gray-light);
91
- color: var(--color-text-main);
92
- }
93
-
94
- .rg-btn.selected {
95
- background: var(--rg-solid-bg);
96
- border-color: var(--rg-solid-bg);
97
- color: var(--rg-solid-color);
98
- font-weight: 500;
99
- box-shadow: 0 1px 4px rgb(from black r g b / 0.22);
100
- }
101
-
102
- .rg-btn.selected:hover:not(:disabled) {
103
- background: var(--rg-solid-bg-hover);
104
- border-color: var(--rg-solid-bg-hover);
105
- }
106
-
107
- .rg-btn:active:not(:disabled):not(.selected) {
108
- background: var(--rg-subtle-bg-hover);
109
- transform: translateY(1px);
110
- }
111
-
112
- .rg-btn:disabled {
113
- opacity: 0.45;
114
- cursor: not-allowed;
115
- pointer-events: none;
116
- }
117
-
118
- :host([variant="outlined"]) .rg-btn {
119
- background: transparent;
120
- border-color: var(--rg-border);
121
- color: var(--rg-accent);
122
- }
123
- :host([variant="outlined"]) .rg-btn:hover:not(:disabled):not(.selected) {
124
- background: var(--rg-subtle-bg);
125
- border-color: var(--rg-accent);
126
- color: var(--rg-accent-hover);
127
- }
128
- :host([variant="outlined"]) .rg-btn.selected {
129
- background: var(--rg-solid-bg);
130
- border-color: var(--rg-solid-bg);
131
- color: var(--rg-solid-color);
132
- }
133
-
134
- :host([variant="subtle"]) .rg-btn {
135
- background: transparent;
136
- border-color: transparent;
137
- color: var(--rg-accent);
138
- }
139
- :host([variant="subtle"]) .rg-btn:hover:not(:disabled):not(.selected) {
140
- background: var(--rg-subtle-bg);
141
- border-color: transparent;
142
- color: var(--rg-accent-hover);
143
- }
144
- :host([variant="subtle"]) .rg-btn.selected {
145
- background: var(--rg-subtle-bg-hover);
146
- border-color: transparent;
147
- color: var(--rg-accent-hover);
148
- font-weight: 600;
149
- box-shadow: none;
150
- }
151
-
152
- :host([variant="filled"]) .rg-btn:not(.selected) {
153
- background: var(--surface-base);
154
- border-color: var(--border-default);
155
- color: var(--color-text-muted);
156
- }
157
-
158
- :host([variant="filled"]) .rg-btn:hover:not(:disabled):not(.selected) {
159
- background: var(--surface-raised);
160
- border-color: var(--border-hover);
161
- color: var(--color-text-main);
162
- }
163
-
164
- :host([mode="button"]) .rg-container {
165
- gap: 6px;
166
- }
167
-
168
- :host([mode="button-group"]) .rg-container {
169
- gap: 0;
170
- }
171
-
172
- :host([mode="button-group"]) .rg-btn:not(.first):not(.only) {
173
- margin-left: -1px;
174
- }
175
-
176
- :host([mode="button-group"]) .rg-btn.first {
177
- border-radius: var(--rg-radius) 0 0 var(--rg-radius);
178
- }
179
- :host([mode="button-group"]) .rg-btn.inner {
180
- border-radius: 0;
181
- }
182
- :host([mode="button-group"]) .rg-btn.last {
183
- border-radius: 0 var(--rg-radius) var(--rg-radius) 0;
184
- }
185
- :host([mode="button-group"]) .rg-btn.only {
186
- border-radius: var(--rg-radius);
187
- }
188
-
189
- :host([mode="button-group"]) .rg-btn:hover:not(:disabled),
190
- :host([mode="button-group"]) .rg-btn.selected {
191
- position: relative;
192
- z-index: 1;
193
- }
194
-
195
- :host([mode="segmented"]) .rg-container {
196
- gap: 2px;
197
- background: var(--surface-raised);
198
- border: 1px solid var(--border-subtle);
199
- border-radius: calc(var(--rg-radius) + 2px);
200
- padding: 2px;
201
- flex-wrap: nowrap;
202
- }
203
-
204
- :host([mode="segmented"]) .rg-btn {
205
- background: transparent;
206
- border-color: transparent;
207
- color: var(--color-text-muted);
208
- border-radius: var(--rg-radius);
209
- min-width: var(--rg-min-width);
210
- box-shadow: none;
211
- font-weight: 400;
212
- }
213
-
214
- :host([mode="segmented"]) .rg-btn:hover:not(:disabled):not(.selected) {
215
- background: var(--rg-subtle-bg);
216
- border-color: transparent;
217
- color: var(--color-text-secondary, var(--color-text-main));
218
- }
219
-
220
- :host([mode="segmented"]) .rg-btn.selected {
221
- background: var(--rg-solid-bg);
222
- border-color: transparent;
223
- color: var(--rg-solid-color);
224
- font-weight: 500;
225
- box-shadow: 0 1px 4px rgb(from black r g b / 0.35);
226
- }
227
-
228
- :host([mode="segmented"]) .rg-btn.selected:hover:not(:disabled) {
229
- background: var(--rg-solid-bg-hover);
230
- }
231
-
232
- :host([mode="segmented"]:not([color])) .rg-btn.selected {
233
- background: var(--color-gray-lighter);
234
- color: var(--color-text-main);
235
- }
236
-
237
- :host([mode="segmented"][variant="outlined"]) .rg-container {
238
- border-color: var(--rg-border);
239
- }
240
- :host([mode="segmented"][variant="outlined"]) .rg-btn.selected {
241
- background: var(--rg-solid-bg);
242
- border-color: transparent;
243
- color: var(--rg-solid-color);
244
- }
245
-
246
- .reset-btn,
247
- .clear-btn {
248
- display: inline-flex;
249
- align-items: center;
250
- justify-content: center;
251
- cursor: pointer;
252
- transition: var(--reset-btn-transition);
253
- flex-shrink: 0;
254
- line-height: 1;
255
- font-family: inherit;
256
- padding: 0;
257
-
258
- width: 1.333em;
259
- height: 1.333em;
260
- border-radius: var(--reset-btn-border-radius);
261
- border: none;
262
- background: var(--reset-btn-bg);
263
- color: var(--reset-btn-color);
264
- }
265
-
266
- .reset-btn:hover { background: var(--reset-btn-bg-hover); color: var(--reset-btn-color-hover); }
267
- .clear-btn:hover { background: var(--clear-btn-bg-hover); color: var(--clear-btn-color-hover); }
268
-
269
- :host([mode="button"]) .reset-btn,
270
- :host([mode="button"]) .clear-btn,
271
- :host([mode="button-group"]) .reset-btn,
272
- :host([mode="button-group"]) .clear-btn,
273
- :host([mode="segmented"]) .reset-btn,
274
- :host([mode="segmented"]) .clear-btn {
275
- height: var(--rg-height);
276
- width: var(--rg-height);
277
- border-radius: var(--rg-radius);
278
- font-size: var(--rg-font-size);
279
- }
280
-
281
- :host([mode="button"]) .reset-btn,
282
- :host([mode="button"]) .clear-btn,
283
- :host([mode="button-group"]) .reset-btn,
284
- :host([mode="button-group"]) .clear-btn,
285
- :host([mode="segmented"]) .reset-btn,
286
- :host([mode="segmented"]) .clear-btn {
287
- background: transparent;
288
- border: 1px solid var(--color-gray-light);
289
- color: var(--color-text-muted);
290
- }
291
-
292
- :host([mode="button"]) .reset-btn:hover,
293
- :host([mode="button-group"]) .reset-btn:hover,
294
- :host([mode="segmented"]) .reset-btn:hover {
295
- background: var(--border-subtle);
296
- border-color: var(--color-gray-lighter);
297
- color: var(--color-text-main);
298
- }
299
-
300
- :host([mode="button"]) .clear-btn:hover,
301
- :host([mode="button-group"]) .clear-btn:hover,
302
- :host([mode="segmented"]) .clear-btn:hover {
303
- background: rgb(from var(--red) r g b / 0.10);
304
- border-color: var(--color-gray-lighter);
305
- color: var(--color-danger);
306
- }
307
-
308
- :host([variant="outlined"][mode="button"]) .reset-btn,
309
- :host([variant="outlined"][mode="button"]) .clear-btn,
310
- :host([variant="outlined"][mode="button-group"]) .reset-btn,
311
- :host([variant="outlined"][mode="button-group"]) .clear-btn,
312
- :host([variant="outlined"][mode="segmented"]) .reset-btn,
313
- :host([variant="outlined"][mode="segmented"]) .clear-btn {
314
- background: transparent;
315
- border-color: var(--rg-border);
316
- color: var(--rg-accent);
317
- }
318
-
319
- :host([variant="outlined"][mode="button"]) .reset-btn:hover,
320
- :host([variant="outlined"][mode="button-group"]) .reset-btn:hover,
321
- :host([variant="outlined"][mode="segmented"]) .reset-btn:hover {
322
- background: var(--border-subtle);
323
- border-color: var(--rg-border-hover);
324
- color: var(--rg-accent-hover);
325
- }
326
-
327
- :host([variant="outlined"][mode="button"]) .clear-btn:hover,
328
- :host([variant="outlined"][mode="button-group"]) .clear-btn:hover,
329
- :host([variant="outlined"][mode="segmented"]) .clear-btn:hover {
330
- background: rgb(from var(--red) r g b / 0.10);
331
- border-color: var(--rg-border-hover);
332
- color: var(--color-danger);
333
- }
334
-
335
- :host([variant="subtle"][mode="button"]) .reset-btn,
336
- :host([variant="subtle"][mode="button"]) .clear-btn,
337
- :host([variant="subtle"][mode="button-group"]) .reset-btn,
338
- :host([variant="subtle"][mode="button-group"]) .clear-btn,
339
- :host([variant="subtle"][mode="segmented"]) .reset-btn,
340
- :host([variant="subtle"][mode="segmented"]) .clear-btn {
341
- background: transparent;
342
- border-color: transparent;
343
- color: var(--rg-accent);
344
- }
345
-
346
- :host([variant="subtle"][mode="button"]) .reset-btn:hover,
347
- :host([variant="subtle"][mode="button-group"]) .reset-btn:hover,
348
- :host([variant="subtle"][mode="segmented"]) .reset-btn:hover {
349
- background: var(--border-subtle);
350
- border-color: transparent;
351
- color: var(--rg-accent-hover);
352
- }
353
-
354
- :host([variant="subtle"][mode="button"]) .clear-btn:hover,
355
- :host([variant="subtle"][mode="button-group"]) .clear-btn:hover,
356
- :host([variant="subtle"][mode="segmented"]) .clear-btn:hover {
357
- background: rgb(from var(--red) r g b / 0.10);
358
- border-color: transparent;
359
- color: var(--color-danger);
360
- }
1
+ :host {
2
+ display: inline-flex;
3
+ align-items: center;
4
+ gap: var(--rg-gap, 0.286em);
5
+ font-size: var(--size-m);
6
+ --rg-solid-bg: var(--color-solid);
7
+ --rg-solid-bg-hover: var(--color-solid-hover);
8
+ --rg-solid-bg-active: var(--color-solid-active);
9
+ --rg-solid-color: var(--color-on-solid);
10
+ --rg-solid-color-hover: var(--color-on-solid-hover, var(--color-on-solid));
11
+ --rg-border: var(--color-border);
12
+ --rg-border-hover: var(--color-border-hover);
13
+ --rg-accent: var(--color-accent);
14
+ --rg-accent-hover: var(--color-accent-hover);
15
+ --rg-subtle-bg: var(--color-subtle);
16
+ --rg-subtle-bg-hover: var(--color-subtle-hover);
17
+
18
+ --rg-font-size: 1em;
19
+ --rg-height: 2.286em;
20
+ --rg-padding: 0.429em 1.071em;
21
+ --rg-min-width: 4.571em;
22
+ --rg-radius: 4px;
23
+ --rg-font-weight: 400;
24
+
25
+ --color-unselected: var(--surface-base);
26
+ --color-unselected-hover: var(--color-gray-lighter);
27
+ }
28
+
29
+ :host([size="xs"]) { --rg-radius: 3px; }
30
+ :host([size="sm"]) { --rg-radius: 3px; }
31
+
32
+ .rg-container {
33
+ display: inline-flex;
34
+ align-items: center;
35
+ flex-wrap: wrap;
36
+ gap: 6px;
37
+ }
38
+
39
+ slot {
40
+ display: none;
41
+ }
42
+
43
+ .rg-radio-option {
44
+ display: inline-flex;
45
+ align-items: center;
46
+ gap: 6px;
47
+ cursor: pointer;
48
+ font-size: var(--rg-font-size);
49
+ color: var(--color-text-main);
50
+ user-select: none;
51
+ }
52
+
53
+ .rg-radio-input {
54
+ width: 14px;
55
+ height: 14px;
56
+ accent-color: var(--rg-solid-bg, var(--color-primary));
57
+ cursor: pointer;
58
+ margin: 0;
59
+ flex-shrink: 0;
60
+ }
61
+
62
+ .rg-radio-label {
63
+ line-height: 1.5;
64
+ }
65
+
66
+ .rg-btn {
67
+ display: inline-flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ font-family: inherit;
71
+ font-size: var(--rg-font-size);
72
+ font-weight: 400;
73
+ height: var(--rg-height);
74
+ padding: var(--rg-padding);
75
+ min-width: var(--rg-min-width);
76
+ white-space: nowrap;
77
+ cursor: pointer;
78
+ user-select: none;
79
+ transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
80
+ outline: none;
81
+ border-radius: var(--rg-radius);
82
+
83
+ background: var(--color-unselected);
84
+ border: 1px solid var(--color-gray-light);
85
+ color: var(--color-text-muted);
86
+ }
87
+
88
+ .rg-btn:hover:not(:disabled):not(.selected) {
89
+ background: var(--color-unselected-hover);
90
+ border-color: var(--color-gray-light);
91
+ color: var(--color-text-main);
92
+ }
93
+
94
+ .rg-btn.selected {
95
+ background: var(--rg-solid-bg);
96
+ border-color: var(--rg-solid-bg);
97
+ color: var(--rg-solid-color);
98
+ font-weight: 500;
99
+ box-shadow: 0 1px 4px rgb(from black r g b / 0.22);
100
+ }
101
+
102
+ .rg-btn.selected:hover:not(:disabled) {
103
+ background: var(--rg-solid-bg-hover);
104
+ border-color: var(--rg-solid-bg-hover);
105
+ }
106
+
107
+ .rg-btn:active:not(:disabled):not(.selected) {
108
+ background: var(--rg-subtle-bg-hover);
109
+ transform: translateY(1px);
110
+ }
111
+
112
+ .rg-btn:disabled {
113
+ opacity: 0.45;
114
+ cursor: not-allowed;
115
+ pointer-events: none;
116
+ }
117
+
118
+ :host([variant="outlined"]) .rg-btn {
119
+ background: transparent;
120
+ border-color: var(--rg-border);
121
+ color: var(--rg-accent);
122
+ }
123
+ :host([variant="outlined"]) .rg-btn:hover:not(:disabled):not(.selected) {
124
+ background: var(--rg-subtle-bg);
125
+ border-color: var(--rg-accent);
126
+ color: var(--rg-accent-hover);
127
+ }
128
+ :host([variant="outlined"]) .rg-btn.selected {
129
+ background: var(--rg-solid-bg);
130
+ border-color: var(--rg-solid-bg);
131
+ color: var(--rg-solid-color);
132
+ }
133
+
134
+ :host([variant="subtle"]) .rg-btn {
135
+ background: transparent;
136
+ border-color: transparent;
137
+ color: var(--rg-accent);
138
+ }
139
+ :host([variant="subtle"]) .rg-btn:hover:not(:disabled):not(.selected) {
140
+ background: var(--rg-subtle-bg);
141
+ border-color: transparent;
142
+ color: var(--rg-accent-hover);
143
+ }
144
+ :host([variant="subtle"]) .rg-btn.selected {
145
+ background: var(--rg-subtle-bg-hover);
146
+ border-color: transparent;
147
+ color: var(--rg-accent-hover);
148
+ font-weight: 600;
149
+ box-shadow: none;
150
+ }
151
+
152
+ :host([variant="filled"]) .rg-btn:not(.selected) {
153
+ background: var(--surface-base);
154
+ border-color: var(--border-default);
155
+ color: var(--color-text-muted);
156
+ }
157
+
158
+ :host([variant="filled"]) .rg-btn:hover:not(:disabled):not(.selected) {
159
+ background: var(--surface-raised);
160
+ border-color: var(--border-hover);
161
+ color: var(--color-text-main);
162
+ }
163
+
164
+ :host([mode="button"]) .rg-container {
165
+ gap: 6px;
166
+ }
167
+
168
+ :host([mode="button-group"]) .rg-container {
169
+ gap: 0;
170
+ }
171
+
172
+ :host([mode="button-group"]) .rg-btn:not(.first):not(.only) {
173
+ margin-left: -1px;
174
+ }
175
+
176
+ :host([mode="button-group"]) .rg-btn.first {
177
+ border-radius: var(--rg-radius) 0 0 var(--rg-radius);
178
+ }
179
+ :host([mode="button-group"]) .rg-btn.inner {
180
+ border-radius: 0;
181
+ }
182
+ :host([mode="button-group"]) .rg-btn.last {
183
+ border-radius: 0 var(--rg-radius) var(--rg-radius) 0;
184
+ }
185
+ :host([mode="button-group"]) .rg-btn.only {
186
+ border-radius: var(--rg-radius);
187
+ }
188
+
189
+ :host([mode="button-group"]) .rg-btn:hover:not(:disabled),
190
+ :host([mode="button-group"]) .rg-btn.selected {
191
+ position: relative;
192
+ z-index: 1;
193
+ }
194
+
195
+ :host([mode="segmented"]) .rg-container {
196
+ gap: 2px;
197
+ background: var(--surface-raised);
198
+ border: 1px solid var(--border-subtle);
199
+ border-radius: calc(var(--rg-radius) + 2px);
200
+ padding: 2px;
201
+ flex-wrap: nowrap;
202
+ }
203
+
204
+ :host([mode="segmented"]) .rg-btn {
205
+ background: transparent;
206
+ border-color: transparent;
207
+ color: var(--color-text-muted);
208
+ border-radius: var(--rg-radius);
209
+ min-width: var(--rg-min-width);
210
+ box-shadow: none;
211
+ font-weight: 400;
212
+ }
213
+
214
+ :host([mode="segmented"]) .rg-btn:hover:not(:disabled):not(.selected) {
215
+ background: var(--rg-subtle-bg);
216
+ border-color: transparent;
217
+ color: var(--color-text-secondary, var(--color-text-main));
218
+ }
219
+
220
+ :host([mode="segmented"]) .rg-btn.selected {
221
+ background: var(--rg-solid-bg);
222
+ border-color: transparent;
223
+ color: var(--rg-solid-color);
224
+ font-weight: 500;
225
+ box-shadow: 0 1px 4px rgb(from black r g b / 0.35);
226
+ }
227
+
228
+ :host([mode="segmented"]) .rg-btn.selected:hover:not(:disabled) {
229
+ background: var(--rg-solid-bg-hover);
230
+ }
231
+
232
+ :host([mode="segmented"]:not([color])) .rg-btn.selected {
233
+ background: var(--color-gray-lighter);
234
+ color: var(--color-text-main);
235
+ }
236
+
237
+ :host([mode="segmented"][variant="outlined"]) .rg-container {
238
+ border-color: var(--rg-border);
239
+ }
240
+ :host([mode="segmented"][variant="outlined"]) .rg-btn.selected {
241
+ background: var(--rg-solid-bg);
242
+ border-color: transparent;
243
+ color: var(--rg-solid-color);
244
+ }
245
+
246
+ .reset-btn,
247
+ .clear-btn {
248
+ display: inline-flex;
249
+ align-items: center;
250
+ justify-content: center;
251
+ cursor: pointer;
252
+ transition: var(--reset-btn-transition);
253
+ flex-shrink: 0;
254
+ line-height: 1;
255
+ font-family: inherit;
256
+ padding: 0;
257
+
258
+ width: 1.333em;
259
+ height: 1.333em;
260
+ border-radius: var(--reset-btn-border-radius);
261
+ border: none;
262
+ background: var(--reset-btn-bg);
263
+ color: var(--reset-btn-color);
264
+ }
265
+
266
+ .reset-btn:hover { background: var(--reset-btn-bg-hover); color: var(--reset-btn-color-hover); }
267
+ .clear-btn:hover { background: var(--clear-btn-bg-hover); color: var(--clear-btn-color-hover); }
268
+
269
+ :host([mode="button"]) .reset-btn,
270
+ :host([mode="button"]) .clear-btn,
271
+ :host([mode="button-group"]) .reset-btn,
272
+ :host([mode="button-group"]) .clear-btn,
273
+ :host([mode="segmented"]) .reset-btn,
274
+ :host([mode="segmented"]) .clear-btn {
275
+ height: var(--rg-height);
276
+ width: var(--rg-height);
277
+ border-radius: var(--rg-radius);
278
+ font-size: var(--rg-font-size);
279
+ }
280
+
281
+ :host([mode="button"]) .reset-btn,
282
+ :host([mode="button"]) .clear-btn,
283
+ :host([mode="button-group"]) .reset-btn,
284
+ :host([mode="button-group"]) .clear-btn,
285
+ :host([mode="segmented"]) .reset-btn,
286
+ :host([mode="segmented"]) .clear-btn {
287
+ background: transparent;
288
+ border: 1px solid var(--color-gray-light);
289
+ color: var(--color-text-muted);
290
+ }
291
+
292
+ :host([mode="button"]) .reset-btn:hover,
293
+ :host([mode="button-group"]) .reset-btn:hover,
294
+ :host([mode="segmented"]) .reset-btn:hover {
295
+ background: var(--border-subtle);
296
+ border-color: var(--color-gray-lighter);
297
+ color: var(--color-text-main);
298
+ }
299
+
300
+ :host([mode="button"]) .clear-btn:hover,
301
+ :host([mode="button-group"]) .clear-btn:hover,
302
+ :host([mode="segmented"]) .clear-btn:hover {
303
+ background: rgb(from var(--red) r g b / 0.10);
304
+ border-color: var(--color-gray-lighter);
305
+ color: var(--color-danger);
306
+ }
307
+
308
+ :host([variant="outlined"][mode="button"]) .reset-btn,
309
+ :host([variant="outlined"][mode="button"]) .clear-btn,
310
+ :host([variant="outlined"][mode="button-group"]) .reset-btn,
311
+ :host([variant="outlined"][mode="button-group"]) .clear-btn,
312
+ :host([variant="outlined"][mode="segmented"]) .reset-btn,
313
+ :host([variant="outlined"][mode="segmented"]) .clear-btn {
314
+ background: transparent;
315
+ border-color: var(--rg-border);
316
+ color: var(--rg-accent);
317
+ }
318
+
319
+ :host([variant="outlined"][mode="button"]) .reset-btn:hover,
320
+ :host([variant="outlined"][mode="button-group"]) .reset-btn:hover,
321
+ :host([variant="outlined"][mode="segmented"]) .reset-btn:hover {
322
+ background: var(--border-subtle);
323
+ border-color: var(--rg-border-hover);
324
+ color: var(--rg-accent-hover);
325
+ }
326
+
327
+ :host([variant="outlined"][mode="button"]) .clear-btn:hover,
328
+ :host([variant="outlined"][mode="button-group"]) .clear-btn:hover,
329
+ :host([variant="outlined"][mode="segmented"]) .clear-btn:hover {
330
+ background: rgb(from var(--red) r g b / 0.10);
331
+ border-color: var(--rg-border-hover);
332
+ color: var(--color-danger);
333
+ }
334
+
335
+ :host([variant="subtle"][mode="button"]) .reset-btn,
336
+ :host([variant="subtle"][mode="button"]) .clear-btn,
337
+ :host([variant="subtle"][mode="button-group"]) .reset-btn,
338
+ :host([variant="subtle"][mode="button-group"]) .clear-btn,
339
+ :host([variant="subtle"][mode="segmented"]) .reset-btn,
340
+ :host([variant="subtle"][mode="segmented"]) .clear-btn {
341
+ background: transparent;
342
+ border-color: transparent;
343
+ color: var(--rg-accent);
344
+ }
345
+
346
+ :host([variant="subtle"][mode="button"]) .reset-btn:hover,
347
+ :host([variant="subtle"][mode="button-group"]) .reset-btn:hover,
348
+ :host([variant="subtle"][mode="segmented"]) .reset-btn:hover {
349
+ background: var(--border-subtle);
350
+ border-color: transparent;
351
+ color: var(--rg-accent-hover);
352
+ }
353
+
354
+ :host([variant="subtle"][mode="button"]) .clear-btn:hover,
355
+ :host([variant="subtle"][mode="button-group"]) .clear-btn:hover,
356
+ :host([variant="subtle"][mode="segmented"]) .clear-btn:hover {
357
+ background: rgb(from var(--red) r g b / 0.10);
358
+ border-color: transparent;
359
+ color: var(--color-danger);
360
+ }