@db-ux/core-components 3.1.20 → 4.0.1-0-540218c

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 (38) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/agent/_instructions.md +7 -2
  3. package/build/components/accordion-item/accordion-item.css +4 -1
  4. package/build/components/badge/badge.css +2 -0
  5. package/build/components/brand/brand.css +2 -0
  6. package/build/components/button/button.css +2 -0
  7. package/build/components/checkbox/checkbox.css +28 -17
  8. package/build/components/checkbox/checkbox.scss +2 -52
  9. package/build/components/custom-select/custom-select.css +61 -1
  10. package/build/components/custom-select-dropdown/custom-select-dropdown.css +2 -0
  11. package/build/components/custom-select-form-field/custom-select-form-field.css +2 -0
  12. package/build/components/custom-select-list/custom-select-list.css +2 -0
  13. package/build/components/custom-select-list-item/custom-select-list-item.css +2 -0
  14. package/build/components/header/header.css +2 -0
  15. package/build/components/infotext/infotext.css +10 -7
  16. package/build/components/infotext/infotext.scss +2 -2
  17. package/build/components/input/input.css +74 -1
  18. package/build/components/link/link.css +4 -1
  19. package/build/components/navigation/navigation.css +2 -0
  20. package/build/components/navigation-item/navigation-item.css +4 -1
  21. package/build/components/notification/notification.css +4 -1
  22. package/build/components/radio/radio.css +2 -0
  23. package/build/components/select/select.css +61 -1
  24. package/build/components/switch/switch.css +298 -439
  25. package/build/components/switch/switch.scss +93 -76
  26. package/build/components/tab-item/tab-item.css +2 -0
  27. package/build/components/tab-list/tab-list.css +2 -0
  28. package/build/components/tabs/tabs.css +2 -0
  29. package/build/components/tag/tag.css +4 -1
  30. package/build/components/textarea/textarea.css +76 -0
  31. package/build/components/tooltip/tooltip.css +2 -0
  32. package/build/styles/absolute.css +133 -31
  33. package/build/styles/index.css +133 -31
  34. package/build/styles/internal/_form-components.scss +87 -0
  35. package/build/styles/relative.css +133 -31
  36. package/build/styles/rollup.css +133 -31
  37. package/build/styles/webpack.css +133 -31
  38. package/package.json +2 -2
package/build/components/switch/switch.css CHANGED
@@ -33,315 +33,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
33
33
 
34
34
  @layer variables {}
35
35
 
36
- .db-switch[data-emphasis=strong] > input {
37
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
38
- }
39
- @layer variables {
40
- .db-switch[data-emphasis=strong] > input {
41
- --db-adaptive-bg-basic-level-1-default: var(
42
- --db-critical-bg-basic-level-1-default
43
- );
44
- --db-adaptive-bg-basic-level-1-hovered: var(
45
- --db-critical-bg-basic-level-1-hovered
46
- );
47
- --db-adaptive-bg-basic-level-1-pressed: var(
48
- --db-critical-bg-basic-level-1-pressed
49
- );
50
- --db-adaptive-bg-basic-level-2-default: var(
51
- --db-critical-bg-basic-level-2-default
52
- );
53
- --db-adaptive-bg-basic-level-2-hovered: var(
54
- --db-critical-bg-basic-level-2-hovered
55
- );
56
- --db-adaptive-bg-basic-level-2-pressed: var(
57
- --db-critical-bg-basic-level-2-pressed
58
- );
59
- --db-adaptive-bg-basic-level-3-default: var(
60
- --db-critical-bg-basic-level-3-default
61
- );
62
- --db-adaptive-bg-basic-level-3-hovered: var(
63
- --db-critical-bg-basic-level-3-hovered
64
- );
65
- --db-adaptive-bg-basic-level-3-pressed: var(
66
- --db-critical-bg-basic-level-3-pressed
67
- );
68
- --db-adaptive-bg-basic-transparent-full-default: var(
69
- --db-critical-bg-basic-transparent-full-default
70
- );
71
- --db-adaptive-bg-basic-transparent-semi-default: var(
72
- --db-critical-bg-basic-transparent-semi-default
73
- );
74
- --db-adaptive-bg-basic-transparent-full-hovered: var(
75
- --db-critical-bg-basic-transparent-full-hovered
76
- );
77
- --db-adaptive-bg-basic-transparent-full-pressed: var(
78
- --db-critical-bg-basic-transparent-full-pressed
79
- );
80
- --db-adaptive-bg-basic-transparent-semi-hovered: var(
81
- --db-critical-bg-basic-transparent-semi-hovered
82
- );
83
- --db-adaptive-bg-basic-transparent-semi-pressed: var(
84
- --db-critical-bg-basic-transparent-semi-pressed
85
- );
86
- --db-adaptive-on-bg-basic-emphasis-100-default: var(
87
- --db-critical-on-bg-basic-emphasis-100-default
88
- );
89
- --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
90
- --db-critical-on-bg-basic-emphasis-100-hovered
91
- );
92
- --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
93
- --db-critical-on-bg-basic-emphasis-100-pressed
94
- );
95
- --db-adaptive-on-bg-basic-emphasis-90-default: var(
96
- --db-critical-on-bg-basic-emphasis-90-default
97
- );
98
- --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
99
- --db-critical-on-bg-basic-emphasis-90-hovered
100
- );
101
- --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
102
- --db-critical-on-bg-basic-emphasis-90-pressed
103
- );
104
- --db-adaptive-on-bg-basic-emphasis-80-default: var(
105
- --db-critical-on-bg-basic-emphasis-80-default
106
- );
107
- --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
108
- --db-critical-on-bg-basic-emphasis-80-hovered
109
- );
110
- --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
111
- --db-critical-on-bg-basic-emphasis-80-pressed
112
- );
113
- --db-adaptive-on-bg-basic-emphasis-70-default: var(
114
- --db-critical-on-bg-basic-emphasis-70-default
115
- );
116
- --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
117
- --db-critical-on-bg-basic-emphasis-70-hovered
118
- );
119
- --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
120
- --db-critical-on-bg-basic-emphasis-70-pressed
121
- );
122
- --db-adaptive-on-bg-basic-emphasis-60-default: var(
123
- --db-critical-on-bg-basic-emphasis-60-default
124
- );
125
- --db-adaptive-on-bg-basic-emphasis-50-default: var(
126
- --db-critical-on-bg-basic-emphasis-50-default
127
- );
128
- --db-adaptive-bg-inverted-contrast-max-default: var(
129
- --db-critical-bg-inverted-contrast-max-default
130
- );
131
- --db-adaptive-bg-inverted-contrast-max-hovered: var(
132
- --db-critical-bg-inverted-contrast-max-hovered
133
- );
134
- --db-adaptive-bg-inverted-contrast-max-pressed: var(
135
- --db-critical-bg-inverted-contrast-max-pressed
136
- );
137
- --db-adaptive-bg-inverted-contrast-high-default: var(
138
- --db-critical-bg-inverted-contrast-high-default
139
- );
140
- --db-adaptive-bg-inverted-contrast-high-hovered: var(
141
- --db-critical-bg-inverted-contrast-high-hovered
142
- );
143
- --db-adaptive-bg-inverted-contrast-high-pressed: var(
144
- --db-critical-bg-inverted-contrast-high-pressed
145
- );
146
- --db-adaptive-bg-inverted-contrast-low-default: var(
147
- --db-critical-bg-inverted-contrast-low-default
148
- );
149
- --db-adaptive-bg-inverted-contrast-low-hovered: var(
150
- --db-critical-bg-inverted-contrast-low-hovered
151
- );
152
- --db-adaptive-bg-inverted-contrast-low-pressed: var(
153
- --db-critical-bg-inverted-contrast-low-pressed
154
- );
155
- --db-adaptive-on-bg-inverted-default: var(
156
- --db-critical-on-bg-inverted-default
157
- );
158
- --db-adaptive-on-bg-inverted-hovered: var(
159
- --db-critical-on-bg-inverted-hovered
160
- );
161
- --db-adaptive-on-bg-inverted-pressed: var(
162
- --db-critical-on-bg-inverted-pressed
163
- );
164
- --db-adaptive-origin-default: var(--db-critical-origin-default);
165
- --db-adaptive-origin-hovered: var(--db-critical-origin-hovered);
166
- --db-adaptive-origin-pressed: var(--db-critical-origin-pressed);
167
- --db-adaptive-on-origin-default: var(
168
- --db-critical-on-origin-default
169
- );
170
- --db-adaptive-bg-vibrant-default: var(
171
- --db-critical-bg-vibrant-default
172
- );
173
- --db-adaptive-bg-vibrant-hovered: var(
174
- --db-critical-bg-vibrant-hovered
175
- );
176
- --db-adaptive-bg-vibrant-pressed: var(
177
- --db-critical-bg-vibrant-pressed
178
- );
179
- --db-adaptive-on-bg-vibrant-default: var(
180
- --db-critical-on-bg-vibrant-default
181
- );
182
- --db-adaptive-on-bg-vibrant-hovered: var(
183
- --db-critical-on-bg-vibrant-hovered
184
- );
185
- --db-adaptive-on-bg-vibrant-pressed: var(
186
- --db-critical-on-bg-vibrant-pressed
187
- );
188
- }
189
- }
36
+ @layer variables {}
190
37
 
191
- .db-switch[data-emphasis=strong] > input:checked {
192
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
193
- }
194
- @layer variables {
195
- .db-switch[data-emphasis=strong] > input:checked {
196
- --db-adaptive-bg-basic-level-1-default: var(
197
- --db-successful-bg-basic-level-1-default
198
- );
199
- --db-adaptive-bg-basic-level-1-hovered: var(
200
- --db-successful-bg-basic-level-1-hovered
201
- );
202
- --db-adaptive-bg-basic-level-1-pressed: var(
203
- --db-successful-bg-basic-level-1-pressed
204
- );
205
- --db-adaptive-bg-basic-level-2-default: var(
206
- --db-successful-bg-basic-level-2-default
207
- );
208
- --db-adaptive-bg-basic-level-2-hovered: var(
209
- --db-successful-bg-basic-level-2-hovered
210
- );
211
- --db-adaptive-bg-basic-level-2-pressed: var(
212
- --db-successful-bg-basic-level-2-pressed
213
- );
214
- --db-adaptive-bg-basic-level-3-default: var(
215
- --db-successful-bg-basic-level-3-default
216
- );
217
- --db-adaptive-bg-basic-level-3-hovered: var(
218
- --db-successful-bg-basic-level-3-hovered
219
- );
220
- --db-adaptive-bg-basic-level-3-pressed: var(
221
- --db-successful-bg-basic-level-3-pressed
222
- );
223
- --db-adaptive-bg-basic-transparent-full-default: var(
224
- --db-successful-bg-basic-transparent-full-default
225
- );
226
- --db-adaptive-bg-basic-transparent-semi-default: var(
227
- --db-successful-bg-basic-transparent-semi-default
228
- );
229
- --db-adaptive-bg-basic-transparent-full-hovered: var(
230
- --db-successful-bg-basic-transparent-full-hovered
231
- );
232
- --db-adaptive-bg-basic-transparent-full-pressed: var(
233
- --db-successful-bg-basic-transparent-full-pressed
234
- );
235
- --db-adaptive-bg-basic-transparent-semi-hovered: var(
236
- --db-successful-bg-basic-transparent-semi-hovered
237
- );
238
- --db-adaptive-bg-basic-transparent-semi-pressed: var(
239
- --db-successful-bg-basic-transparent-semi-pressed
240
- );
241
- --db-adaptive-on-bg-basic-emphasis-100-default: var(
242
- --db-successful-on-bg-basic-emphasis-100-default
243
- );
244
- --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
245
- --db-successful-on-bg-basic-emphasis-100-hovered
246
- );
247
- --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
248
- --db-successful-on-bg-basic-emphasis-100-pressed
249
- );
250
- --db-adaptive-on-bg-basic-emphasis-90-default: var(
251
- --db-successful-on-bg-basic-emphasis-90-default
252
- );
253
- --db-adaptive-on-bg-basic-emphasis-90-hovered: var(
254
- --db-successful-on-bg-basic-emphasis-90-hovered
255
- );
256
- --db-adaptive-on-bg-basic-emphasis-90-pressed: var(
257
- --db-successful-on-bg-basic-emphasis-90-pressed
258
- );
259
- --db-adaptive-on-bg-basic-emphasis-80-default: var(
260
- --db-successful-on-bg-basic-emphasis-80-default
261
- );
262
- --db-adaptive-on-bg-basic-emphasis-80-hovered: var(
263
- --db-successful-on-bg-basic-emphasis-80-hovered
264
- );
265
- --db-adaptive-on-bg-basic-emphasis-80-pressed: var(
266
- --db-successful-on-bg-basic-emphasis-80-pressed
267
- );
268
- --db-adaptive-on-bg-basic-emphasis-70-default: var(
269
- --db-successful-on-bg-basic-emphasis-70-default
270
- );
271
- --db-adaptive-on-bg-basic-emphasis-70-hovered: var(
272
- --db-successful-on-bg-basic-emphasis-70-hovered
273
- );
274
- --db-adaptive-on-bg-basic-emphasis-70-pressed: var(
275
- --db-successful-on-bg-basic-emphasis-70-pressed
276
- );
277
- --db-adaptive-on-bg-basic-emphasis-60-default: var(
278
- --db-successful-on-bg-basic-emphasis-60-default
279
- );
280
- --db-adaptive-on-bg-basic-emphasis-50-default: var(
281
- --db-successful-on-bg-basic-emphasis-50-default
282
- );
283
- --db-adaptive-bg-inverted-contrast-max-default: var(
284
- --db-successful-bg-inverted-contrast-max-default
285
- );
286
- --db-adaptive-bg-inverted-contrast-max-hovered: var(
287
- --db-successful-bg-inverted-contrast-max-hovered
288
- );
289
- --db-adaptive-bg-inverted-contrast-max-pressed: var(
290
- --db-successful-bg-inverted-contrast-max-pressed
291
- );
292
- --db-adaptive-bg-inverted-contrast-high-default: var(
293
- --db-successful-bg-inverted-contrast-high-default
294
- );
295
- --db-adaptive-bg-inverted-contrast-high-hovered: var(
296
- --db-successful-bg-inverted-contrast-high-hovered
297
- );
298
- --db-adaptive-bg-inverted-contrast-high-pressed: var(
299
- --db-successful-bg-inverted-contrast-high-pressed
300
- );
301
- --db-adaptive-bg-inverted-contrast-low-default: var(
302
- --db-successful-bg-inverted-contrast-low-default
303
- );
304
- --db-adaptive-bg-inverted-contrast-low-hovered: var(
305
- --db-successful-bg-inverted-contrast-low-hovered
306
- );
307
- --db-adaptive-bg-inverted-contrast-low-pressed: var(
308
- --db-successful-bg-inverted-contrast-low-pressed
309
- );
310
- --db-adaptive-on-bg-inverted-default: var(
311
- --db-successful-on-bg-inverted-default
312
- );
313
- --db-adaptive-on-bg-inverted-hovered: var(
314
- --db-successful-on-bg-inverted-hovered
315
- );
316
- --db-adaptive-on-bg-inverted-pressed: var(
317
- --db-successful-on-bg-inverted-pressed
318
- );
319
- --db-adaptive-origin-default: var(--db-successful-origin-default);
320
- --db-adaptive-origin-hovered: var(--db-successful-origin-hovered);
321
- --db-adaptive-origin-pressed: var(--db-successful-origin-pressed);
322
- --db-adaptive-on-origin-default: var(
323
- --db-successful-on-origin-default
324
- );
325
- --db-adaptive-bg-vibrant-default: var(
326
- --db-successful-bg-vibrant-default
327
- );
328
- --db-adaptive-bg-vibrant-hovered: var(
329
- --db-successful-bg-vibrant-hovered
330
- );
331
- --db-adaptive-bg-vibrant-pressed: var(
332
- --db-successful-bg-vibrant-pressed
333
- );
334
- --db-adaptive-on-bg-vibrant-default: var(
335
- --db-successful-on-bg-vibrant-default
336
- );
337
- --db-adaptive-on-bg-vibrant-hovered: var(
338
- --db-successful-on-bg-vibrant-hovered
339
- );
340
- --db-adaptive-on-bg-vibrant-pressed: var(
341
- --db-successful-on-bg-vibrant-pressed
342
- );
343
- }
344
- }
38
+ @layer variables {}
345
39
 
346
40
  @layer variables {}
347
41
 
@@ -417,12 +111,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
417
111
 
418
112
  @layer variables {}
419
113
 
420
- .db-switch[data-size=small], .db-switch > input {
114
+ .db-switch[data-size=small], .db-switch input {
421
115
  font: var(--db-type-body-sm);
422
116
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
423
117
  }
424
118
  @layer variables {
425
- .db-switch[data-size=small], .db-switch > input {
119
+ .db-switch[data-size=small], .db-switch input {
426
120
  /* Those variables are only for components to calculate heights and change icons */
427
121
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
428
122
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
@@ -433,12 +127,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
433
127
 
434
128
  @layer variables {}
435
129
 
436
- .db-switch[data-size=small] > input {
130
+ .db-switch[data-size=small] input {
437
131
  font: var(--db-type-body-xs);
438
132
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
439
133
  }
440
134
  @layer variables {
441
- .db-switch[data-size=small] > input {
135
+ .db-switch[data-size=small] input {
442
136
  /* Those variables are only for components to calculate heights and change icons */
443
137
  --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
444
138
  --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
@@ -459,7 +153,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
459
153
 
460
154
  @layer variables {}
461
155
 
462
- .db-switch > input:not([data-show-icon-trailing=false])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
156
+ /* Use for body tags like <p> */
157
+ /* Use for headline tags like <h1> */
158
+ .db-switch input:not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
463
159
  color: var(--db-icon-color, inherit);
464
160
  display: inline-block;
465
161
  /*** icon - placeholder ***/
@@ -479,21 +175,22 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
479
175
  overflow: clip;
480
176
  vertical-align: var(--db-icon-vertical-align, middle);
481
177
  block-size: var(--db-icon-font-size, 1.5rem);
482
- inline-size: var(--db-icon-font-size, 1.5rem);
178
+ aspect-ratio: 1;
179
+ flex-shrink: 0;
483
180
  content: var(--db-icon, attr(data-icon));
484
181
  }
485
182
  @supports (content: ""/"") {
486
- .db-switch > input:not([data-show-icon-trailing=false])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
183
+ .db-switch input:not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
487
184
  content: var(--db-icon, attr(data-icon))/"";
488
185
  }
489
186
  }
490
187
  @media aural {
491
- .db-switch > input:not([data-show-icon-trailing=false])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
188
+ .db-switch input:not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
492
189
  content: none;
493
190
  }
494
191
  }
495
192
  @media speech {
496
- .db-switch > input:not([data-show-icon-trailing=false])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
193
+ .db-switch input:not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
497
194
  content: none;
498
195
  }
499
196
  }
@@ -502,6 +199,15 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
502
199
  * @mixin screen-min-max
503
200
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
504
201
  */
202
+ .db-switch > db-infotext > .db-infotext,
203
+ .db-switch > .db-infotext {
204
+ margin-block-start: var(--db-spacing-fixed-2xs);
205
+ }
206
+ .db-switch > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]),
207
+ .db-switch > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]) {
208
+ display: none;
209
+ }
210
+
505
211
  /* stylelint-disable-next-line db-ux/use-spacings */
506
212
  .db-switch:not(:has(input:disabled)):has(input:active, > label:active, :is(label):active) input::before {
507
213
  inline-size: calc(calc(var(--db-icon-font-size)) - 0.125rem * 2 + var(--db-spacing-fixed-2xs));
@@ -513,6 +219,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
513
219
 
514
220
  .db-switch {
515
221
  user-select: none;
222
+ /* stylelint-disable-next-line at-rule-empty-line-before */
223
+ /* stylelint-disable-next-line at-rule-empty-line-before */
224
+ /* Label position (leading/trailing) */
516
225
  }
517
226
  .db-switch:not([data-hide-asterisk=true]):has(input:required):is(label)::after,
518
227
  .db-switch:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-switch:not([data-hide-asterisk=true])[data-required=true]:is(label)::after,
@@ -588,10 +297,212 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
588
297
  cursor: var(--db-overwrite-cursor, pointer);
589
298
  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
590
299
  }
591
- .db-switch > input {
300
+ .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) {
301
+ --db-check-element-border-color: var(
302
+ --db-successful-on-bg-basic-emphasis-70-default
303
+ );
304
+ --db-adaptive-on-bg-basic-emphasis-100-default: var(
305
+ --db-successful-on-bg-basic-emphasis-80-default
306
+ );
307
+ --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
308
+ --db-successful-on-bg-basic-emphasis-80-hovered
309
+ );
310
+ --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
311
+ --db-successful-on-bg-basic-emphasis-80-pressed
312
+ );
313
+ --db-adaptive-on-bg-inverted-default: var(
314
+ --db-successful-on-bg-inverted-default
315
+ );
316
+ }
317
+ .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
318
+ .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext {
319
+ /* stylelint-disable-next-line at-rule-empty-line-before */
320
+ }
321
+ .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
322
+ .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
323
+ display: flex;
324
+ }
325
+ .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
326
+ .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
327
+ display: none;
328
+ }
329
+ .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not(:checked) {
330
+ --db-adaptive-bg-basic-transparent-full-default: var(
331
+ --db-successful-bg-basic-transparent-full-default
332
+ );
333
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
334
+ --db-successful-bg-basic-transparent-full-hovered
335
+ );
336
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
337
+ --db-successful-bg-basic-transparent-full-pressed
338
+ );
339
+ }
340
+ .db-switch:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:checked {
341
+ --db-adaptive-bg-basic-transparent-full-default: var(
342
+ --db-successful-bg-inverted-contrast-low-default
343
+ );
344
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
345
+ --db-successful-bg-inverted-contrast-low-hovered
346
+ );
347
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
348
+ --db-successful-bg-inverted-contrast-low-pressed
349
+ );
350
+ }
351
+ .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]), .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) {
352
+ --db-check-element-border-color: var(
353
+ --db-successful-on-bg-basic-emphasis-70-default
354
+ );
355
+ --db-adaptive-on-bg-basic-emphasis-100-default: var(
356
+ --db-successful-on-bg-basic-emphasis-80-default
357
+ );
358
+ --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
359
+ --db-successful-on-bg-basic-emphasis-80-hovered
360
+ );
361
+ --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
362
+ --db-successful-on-bg-basic-emphasis-80-pressed
363
+ );
364
+ --db-adaptive-on-bg-inverted-default: var(
365
+ --db-successful-on-bg-inverted-default
366
+ );
367
+ }
368
+ .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
369
+ .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext, .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext,
370
+ .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext {
371
+ /* stylelint-disable-next-line at-rule-empty-line-before */
372
+ }
373
+ .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
374
+ .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
375
+ .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
376
+ display: flex;
377
+ }
378
+ .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
379
+ .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]), .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
380
+ .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
381
+ display: none;
382
+ }
383
+ .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not(:checked), .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not(:checked) {
384
+ --db-adaptive-bg-basic-transparent-full-default: var(
385
+ --db-successful-bg-basic-transparent-full-default
386
+ );
387
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
388
+ --db-successful-bg-basic-transparent-full-hovered
389
+ );
390
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
391
+ --db-successful-bg-basic-transparent-full-pressed
392
+ );
393
+ }
394
+ .db-switch:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:checked, .db-switch[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:checked {
395
+ --db-adaptive-bg-basic-transparent-full-default: var(
396
+ --db-successful-bg-inverted-contrast-low-default
397
+ );
398
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
399
+ --db-successful-bg-inverted-contrast-low-hovered
400
+ );
401
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
402
+ --db-successful-bg-inverted-contrast-low-pressed
403
+ );
404
+ }
405
+ .db-switch:has(input:not([data-custom-validity]):required:user-invalid) {
406
+ --db-check-element-border-color: var(
407
+ --db-critical-on-bg-basic-emphasis-70-default
408
+ );
409
+ --db-adaptive-on-bg-basic-emphasis-100-default: var(
410
+ --db-critical-on-bg-basic-emphasis-80-default
411
+ );
412
+ --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
413
+ --db-critical-on-bg-basic-emphasis-80-hovered
414
+ );
415
+ --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
416
+ --db-critical-on-bg-basic-emphasis-80-pressed
417
+ );
418
+ --db-adaptive-on-bg-inverted-default: var(
419
+ --db-critical-on-bg-inverted-default
420
+ );
421
+ }
422
+ .db-switch:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
423
+ .db-switch:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
424
+ display: flex;
425
+ }
426
+ .db-switch:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
427
+ .db-switch:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext:not([data-semantic]):not([hidden]) {
428
+ display: none;
429
+ }
430
+ .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:not(:checked) {
431
+ --db-adaptive-bg-basic-transparent-full-default: var(
432
+ --db-critical-bg-basic-transparent-full-default
433
+ );
434
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
435
+ --db-critical-bg-basic-transparent-full-hovered
436
+ );
437
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
438
+ --db-critical-bg-basic-transparent-full-pressed
439
+ );
440
+ }
441
+ .db-switch:has(input:not([data-custom-validity]):required:user-invalid) input:checked {
442
+ --db-adaptive-bg-basic-transparent-full-default: var(
443
+ --db-critical-bg-inverted-contrast-low-default
444
+ );
445
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
446
+ --db-critical-bg-inverted-contrast-low-hovered
447
+ );
448
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
449
+ --db-critical-bg-inverted-contrast-low-pressed
450
+ );
451
+ }
452
+ .db-switch:has(input[data-custom-validity=invalid]), .db-switch[data-custom-validity=invalid] {
453
+ --db-check-element-border-color: var(
454
+ --db-critical-on-bg-basic-emphasis-70-default
455
+ );
456
+ --db-adaptive-on-bg-basic-emphasis-100-default: var(
457
+ --db-critical-on-bg-basic-emphasis-80-default
458
+ );
459
+ --db-adaptive-on-bg-basic-emphasis-100-hovered: var(
460
+ --db-critical-on-bg-basic-emphasis-80-hovered
461
+ );
462
+ --db-adaptive-on-bg-basic-emphasis-100-pressed: var(
463
+ --db-critical-on-bg-basic-emphasis-80-pressed
464
+ );
465
+ --db-adaptive-on-bg-inverted-default: var(
466
+ --db-critical-on-bg-inverted-default
467
+ );
468
+ }
469
+ .db-switch:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
470
+ .db-switch:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-switch[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
471
+ .db-switch[data-custom-validity=invalid] > .db-infotext[data-semantic=critical]:not([hidden]) {
472
+ display: flex;
473
+ }
474
+ .db-switch:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
475
+ .db-switch:has(input[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-switch[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
476
+ .db-switch[data-custom-validity=invalid] > .db-infotext:not([data-semantic]):not([hidden]) {
477
+ display: none;
478
+ }
479
+ .db-switch:has(input[data-custom-validity=invalid]) input:not(:checked), .db-switch[data-custom-validity=invalid] input:not(:checked) {
480
+ --db-adaptive-bg-basic-transparent-full-default: var(
481
+ --db-critical-bg-basic-transparent-full-default
482
+ );
483
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
484
+ --db-critical-bg-basic-transparent-full-hovered
485
+ );
486
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
487
+ --db-critical-bg-basic-transparent-full-pressed
488
+ );
489
+ }
490
+ .db-switch:has(input[data-custom-validity=invalid]) input:checked, .db-switch[data-custom-validity=invalid] input:checked {
491
+ --db-adaptive-bg-basic-transparent-full-default: var(
492
+ --db-critical-bg-inverted-contrast-low-default
493
+ );
494
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
495
+ --db-critical-bg-inverted-contrast-low-hovered
496
+ );
497
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
498
+ --db-critical-bg-inverted-contrast-low-pressed
499
+ );
500
+ }
501
+ .db-switch input {
592
502
  --db-icon-margin-start: 0;
593
503
  --thumb-offset-x: 0.125rem;
594
504
  appearance: none;
505
+ margin-inline-end: 0;
595
506
  inline-size: calc(var(--db-icon-font-size) * 2 + 0.125rem);
596
507
  block-size: var(--db-icon-font-size);
597
508
  box-sizing: content-box;
@@ -601,188 +512,136 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
601
512
  border-radius: var(--db-border-radius-full);
602
513
  /* positioned at the end of the track: track length - 100% (thumb width) */
603
514
  }
604
- .db-switch > input:not([hidden]) {
515
+ .db-switch input:not([hidden]) {
605
516
  display: flex;
606
517
  }
607
- .db-switch > input:not([data-show-icon-trailing=false])::after {
518
+ .db-switch input:not([data-show-icon-trailing=false])::after {
608
519
  --db-icon-trailing: "cross";
609
520
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
610
521
  content: var(--db-icon-trailing, attr(data-icon-trailing));
611
522
  }
612
523
  @supports (content: ""/"") {
613
- .db-switch > input:not([data-show-icon-trailing=false])::after {
524
+ .db-switch input:not([data-show-icon-trailing=false])::after {
614
525
  content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
615
526
  }
616
527
  }
617
- .db-switch > input::after {
528
+ .db-switch input::after {
618
529
  --db-icon-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
619
530
  visibility: hidden;
620
531
  align-self: center;
621
532
  aspect-ratio: 1;
622
533
  }
623
- .db-switch > input::before {
534
+ .db-switch input::before {
624
535
  content: "°"/"";
625
536
  text-align: center;
626
537
  align-content: center;
627
538
  aspect-ratio: 1;
628
539
  block-size: calc(var(--db-icon-font-size) - 0.125rem * 2);
629
- background-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
630
- color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
540
+ background-color: var(--db-check-element-border-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
541
+ color: var(--db-check-element-border-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
631
542
  border-radius: var(--db-border-radius-full);
632
543
  transform: translateX(var(--thumb-offset-x));
633
544
  margin-inline-end: calc(calc(var(--db-icon-font-size)) - calc(var(--db-icon-font-size) - 0.125rem * 2));
634
545
  }
635
546
  @media screen and (prefers-reduced-motion: no-preference) {
636
- .db-switch > input::before {
637
- transition: margin var(--db-transition-duration-fast) var(--db-transition-timing-emotional), inline-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), block-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), transform var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
547
+ .db-switch input::before {
548
+ transition: margin var(--db-transition-duration-fast) var(--db-transition-timing-emotional), inline-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), block-size var(--db-transition-duration-fast) var(--db-transition-timing-emotional), transform var(--db-transition-duration-fast) var(--db-transition-timing-emotional), visibility var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
638
549
  }
639
550
  }
640
- .db-switch > input:checked {
551
+ .db-switch input:checked {
641
552
  --thumb-offset-x: calc(100% + 0.125rem);
642
- background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
643
- color: var(--db-adaptive-on-bg-inverted-default);
644
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
645
- border-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
646
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
647
- }
648
- .db-switch > input:checked::before, .db-switch > input:checked::after {
649
553
  --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
554
+ --db-adaptive-bg-basic-transparent-full-default: var(
555
+ --db-adaptive-bg-inverted-contrast-max-default
556
+ );
557
+ --db-adaptive-bg-basic-transparent-full-hovered: var(
558
+ --db-adaptive-bg-inverted-contrast-max-hovered
559
+ );
560
+ --db-adaptive-bg-basic-transparent-full-pressed: var(
561
+ --db-adaptive-bg-inverted-contrast-max-pressed
562
+ );
650
563
  }
651
- .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]) {
652
- cursor: var(--db-overwrite-cursor, pointer);
653
- background-color: var(--db-adaptive-bg-inverted-contrast-max-hovered);
654
- }
655
- .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
656
- cursor: initial;
657
- }
658
- .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
659
- cursor: pointer;
660
- }
661
- .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]) {
662
- cursor: var(--db-overwrite-cursor, pointer);
663
- background-color: var(--db-adaptive-bg-inverted-contrast-max-pressed);
664
- }
665
- .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(input) {
666
- cursor: initial;
667
- }
668
- .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
669
- cursor: pointer;
670
- }
671
- .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]) {
672
- cursor: var(--db-overwrite-cursor, pointer);
673
- border-color: var(--db-adaptive-on-bg-basic-emphasis-100-hovered);
674
- }
675
- .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]):is(input) {
676
- cursor: initial;
677
- }
678
- .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch > input:checked:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
679
- cursor: pointer;
680
- }
681
- .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]) {
682
- cursor: var(--db-overwrite-cursor, pointer);
683
- border-color: var(--db-adaptive-on-bg-basic-emphasis-100-pressed);
684
- }
685
- .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(input) {
686
- cursor: initial;
687
- }
688
- .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch > input:checked:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
689
- cursor: pointer;
690
- }
691
- .db-switch > input:checked::after {
564
+ .db-switch input:checked::after {
692
565
  --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
693
566
  }
694
- .db-switch > input:checked::before {
567
+ .db-switch input:checked::before {
695
568
  block-size: calc(var(--db-icon-font-size));
696
569
  background-color: var(--db-adaptive-on-bg-inverted-default);
697
570
  color: var(--db-adaptive-on-bg-inverted-default);
698
571
  margin: 0;
699
572
  }
700
- .db-switch > input:focus-visible {
573
+ .db-switch input:focus-visible {
701
574
  border-radius: var(--db-border-radius-full);
702
575
  }
703
- .db-switch > input[data-aid-icon]:not(:checked)::after {
576
+ .db-switch input[data-aid-icon]:not(:checked)::after {
704
577
  --db-icon-trailing: attr(data-aid-icon);
705
578
  }
706
- .db-switch > input[data-aid-icon-trailing]:checked::after {
579
+ .db-switch input[data-aid-icon-trailing]:checked::after {
707
580
  --db-icon-trailing: attr(data-aid-icon-trailing);
708
581
  }
709
582
  @media screen and (prefers-reduced-motion: no-preference) {
710
- .db-switch > input {
583
+ .db-switch input {
711
584
  transition: none;
712
585
  }
713
586
  }
714
- .db-switch[data-hide-label=true] {
715
- gap: 0;
716
- }
717
- .db-switch[data-size=small] {
718
- gap: var(--db-spacing-fixed-2xs);
719
- }
720
- .db-switch[data-emphasis=strong] > input {
721
- --db-check-element-border-color: var(--db-adaptive-bg-basic-transparent-full-default);
722
- background-color: var(--db-adaptive-bg-inverted-contrast-low-default);
723
- color: var(--db-adaptive-on-bg-inverted-default);
724
- border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
725
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
726
- }
727
- .db-switch[data-emphasis=strong] > input:hover:not(:disabled, [aria-disabled=true]) {
728
- cursor: var(--db-overwrite-cursor, pointer);
729
- background-color: var(--db-adaptive-bg-inverted-contrast-low-hovered);
730
- border-color: var(--db-adaptive-on-bg-basic-emphasis-70-hovered);
731
- }
732
- .db-switch[data-emphasis=strong] > input:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch[data-emphasis=strong] > input:hover:not(:disabled, [aria-disabled=true]):is(input) {
733
- cursor: initial;
587
+ .db-switch[data-hide-label=true] > label {
588
+ margin: 0;
734
589
  }
735
- .db-switch[data-emphasis=strong] > input:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch[data-emphasis=strong] > input:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
736
- cursor: pointer;
590
+ .db-switch[data-hide-label=true] > label > span {
591
+ font-size: 0;
737
592
  }
738
- .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true]) {
739
- cursor: var(--db-overwrite-cursor, pointer);
740
- background-color: var(--db-adaptive-bg-inverted-contrast-low-pressed);
741
- border-color: var(--db-adaptive-on-bg-basic-emphasis-70-pressed);
593
+ .db-switch[data-size=small] > label {
594
+ gap: var(--db-spacing-fixed-2xs);
742
595
  }
743
- .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true])::before {
744
- block-size: calc(var(--db-icon-font-size) - 0.125rem * 2);
596
+ .db-switch[data-visual-aid=true] input::after {
597
+ visibility: visible;
598
+ block-size: calc(var(--db-icon-font-size));
745
599
  }
746
- .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true]):is(input) {
747
- cursor: initial;
600
+ @media screen and (prefers-reduced-motion: no-preference) {
601
+ .db-switch[data-visual-aid=true] input::after {
602
+ transition: transform var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
603
+ }
748
604
  }
749
- .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-switch[data-emphasis=strong] > input:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
750
- cursor: pointer;
605
+ .db-switch[data-visual-aid=true] input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
606
+ --db-icon-trailing: "check";
607
+ margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
608
+ content: var(--db-icon-trailing, attr(data-icon-trailing));
751
609
  }
752
- .db-switch[data-emphasis=strong] > input:not(:checked) {
753
- --thumb-offset-x: 0;
610
+ @supports (content: ""/"") {
611
+ .db-switch[data-visual-aid=true] input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
612
+ content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
613
+ }
754
614
  }
755
- .db-switch[data-emphasis=strong] > input:checked::before {
756
- background-color: var(--db-adaptive-on-bg-inverted-default);
757
- color: var(--db-adaptive-on-bg-inverted-default);
615
+ .db-switch[data-visual-aid=true] input:checked::after {
616
+ transform: translateX(calc(-100% - 0.125rem));
617
+ transform-origin: center right;
758
618
  }
759
- .db-switch[data-emphasis=strong] > input:checked::after {
760
- --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
619
+ .db-switch:not([data-variant=leading]) > label {
620
+ flex-direction: row;
761
621
  }
762
- .db-switch[data-emphasis=strong] > input::after {
763
- --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
622
+ .db-switch:not([data-variant=leading]) input {
623
+ margin-inline-end: var(--db-spacing-fixed-xs);
764
624
  }
765
- .db-switch[data-emphasis=strong] > input::before {
766
- background-color: var(--db-adaptive-on-bg-inverted-default);
767
- color: var(--db-adaptive-on-bg-inverted-default);
768
- block-size: calc(var(--db-icon-font-size));
769
- margin: 0;
625
+ .db-switch:not([data-variant=leading])[data-size=small] input {
626
+ margin-inline-end: var(--db-spacing-fixed-xs);
770
627
  }
771
- .db-switch[data-emphasis=strong] > input::after, .db-switch[data-visual-aid=true] > input::after {
772
- visibility: visible;
773
- block-size: calc(var(--db-icon-font-size));
628
+ .db-switch[data-variant=leading]:not([data-hide-asterisk=true]):has(input:required) > label::after, .db-switch[data-variant=leading]:not([data-hide-asterisk=true])[data-required=true] > label::after {
629
+ /* We remove default asterisk because we need a wrapping span for switch */
630
+ content: none;
774
631
  }
775
- .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
776
- --db-icon-trailing: "check";
777
- margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
778
- content: var(--db-icon-trailing, attr(data-icon-trailing));
632
+ .db-switch[data-variant=leading]:not([data-hide-asterisk=true]):has(input:required) > label::before, .db-switch[data-variant=leading]:not([data-hide-asterisk=true])[data-required=true] > label::before {
633
+ order: 1;
634
+ content: "*";
779
635
  }
780
636
  @supports (content: ""/"") {
781
- .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
782
- content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
637
+ .db-switch[data-variant=leading]:not([data-hide-asterisk=true]):has(input:required) > label::before, .db-switch[data-variant=leading]:not([data-hide-asterisk=true])[data-required=true] > label::before {
638
+ content: "*"/"";
783
639
  }
784
640
  }
785
- .db-switch[data-emphasis=strong] > input:checked::after, .db-switch[data-visual-aid=true] > input:checked::after {
786
- transform: translateX(calc(-100% - 0.125rem));
787
- block-size: calc(var(--db-icon-font-size));
641
+ .db-switch[data-variant=leading] input {
642
+ order: 2;
643
+ margin-inline-start: var(--db-spacing-fixed-xs);
644
+ }
645
+ .db-switch[data-variant=leading][data-size=small] input {
646
+ margin-inline-start: var(--db-spacing-fixed-2xs);
788
647
  }