@db-ux/core-components 2.0.1 → 2.0.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 (20) hide show
  1. package/build/components/accordion-item/accordion-item.css +10 -2
  2. package/build/components/checkbox/checkbox.css +12 -2
  3. package/build/components/custom-select/custom-select.css +17 -3
  4. package/build/components/infotext/infotext.css +5 -1
  5. package/build/components/input/input.css +32 -6
  6. package/build/components/link/link.css +15 -3
  7. package/build/components/navigation-item/navigation-item.css +12 -2
  8. package/build/components/notification/notification.css +5 -1
  9. package/build/components/radio/radio.css +7 -1
  10. package/build/components/select/select.css +17 -3
  11. package/build/components/switch/switch.css +22 -4
  12. package/build/components/tab-item/tab-item.scss +0 -1
  13. package/build/components/tag/tag.css +15 -3
  14. package/build/components/textarea/textarea.css +7 -1
  15. package/build/styles/absolute.css +7 -7
  16. package/build/styles/index.css +6 -6
  17. package/build/styles/relative.css +7 -7
  18. package/build/styles/rollup.css +7 -7
  19. package/build/styles/webpack.css +7 -7
  20. package/package.json +4 -4
package/build/components/accordion-item/accordion-item.css CHANGED
@@ -136,7 +136,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
136
136
  }
137
137
  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
138
138
  content: var(--db-icon, attr(data-icon));
139
- content: var(--db-icon, attr(data-icon))/"";
140
139
  -webkit-alt: "";
141
140
  alt: "";
142
141
  color: var(--db-icon-color, inherit);
@@ -159,6 +158,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
159
158
  block-size: var(--db-icon-font-size, 1.5rem);
160
159
  inline-size: var(--db-icon-font-size, 1.5rem);
161
160
  }
161
+ @supports (content: ""/"") {
162
+ .db-accordion-item summary:not([data-hide-icon-after=true])::after {
163
+ content: var(--db-icon, attr(data-icon))/"";
164
+ }
165
+ }
162
166
  @media aural {
163
167
  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
164
168
  content: none;
@@ -247,9 +251,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
247
251
  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
248
252
  --db-icon-after: "chevron_down";
249
253
  content: var(--db-icon-after, attr(data-icon-after));
250
- content: var(--db-icon-after, attr(data-icon-after))/"";
251
254
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
252
255
  }
256
+ @supports (content: ""/"") {
257
+ .db-accordion-item summary:not([data-hide-icon-after=true])::after {
258
+ content: var(--db-icon-after, attr(data-icon-after))/"";
259
+ }
260
+ }
253
261
  .db-accordion-item summary::after {
254
262
  pointer-events: none;
255
263
  }
package/build/components/checkbox/checkbox.css CHANGED
@@ -57,7 +57,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
57
57
 
58
58
  .db-checkbox input:checked:not([data-hide-icon-before=true])::before, .db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before {
59
59
  content: var(--db-icon, attr(data-icon));
60
- content: var(--db-icon, attr(data-icon))/"";
61
60
  -webkit-alt: "";
62
61
  alt: "";
63
62
  color: var(--db-icon-color, inherit);
@@ -80,6 +79,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
80
79
  block-size: var(--db-icon-font-size, 1.5rem);
81
80
  inline-size: var(--db-icon-font-size, 1.5rem);
82
81
  }
82
+ @supports (content: ""/"") {
83
+ .db-checkbox input:checked:not([data-hide-icon-before=true])::before, .db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before {
84
+ content: var(--db-icon, attr(data-icon))/"";
85
+ }
86
+ }
83
87
  @media aural {
84
88
  .db-checkbox input:checked:not([data-hide-icon-before=true])::before, .db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before {
85
89
  content: none;
@@ -199,10 +203,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
199
203
  .db-checkbox:has(input:required) > label::after, .db-checkbox[data-required=true]:is(label)::after,
200
204
  .db-checkbox[data-required=true] > label::after {
201
205
  content: "*";
202
- content: "*"/"";
203
206
  /* stylelint-disable-next-line db-ux/use-spacings */
204
207
  padding-inline-start: 1px;
205
208
  }
209
+ @supports (content: ""/"") {
210
+ .db-checkbox:has(input:required):is(label)::after,
211
+ .db-checkbox:has(input:required) > label::after, .db-checkbox[data-required=true]:is(label)::after,
212
+ .db-checkbox[data-required=true] > label::after {
213
+ content: "*"/"";
214
+ }
215
+ }
206
216
  .db-checkbox:has(input:not([data-custom-validity]):required:user-valid) {
207
217
  /* stylelint-disable-next-line at-rule-empty-line-before */
208
218
  }
package/build/components/custom-select/custom-select.css CHANGED
@@ -502,7 +502,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
502
502
  */
503
503
  .db-custom-select:not([data-hide-icon-after=true])::after {
504
504
  content: var(--db-icon, attr(data-icon));
505
- content: var(--db-icon, attr(data-icon))/"";
506
505
  -webkit-alt: "";
507
506
  alt: "";
508
507
  color: var(--db-icon-color, inherit);
@@ -525,6 +524,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
525
524
  block-size: var(--db-icon-font-size, 1.5rem);
526
525
  inline-size: var(--db-icon-font-size, 1.5rem);
527
526
  }
527
+ @supports (content: ""/"") {
528
+ .db-custom-select:not([data-hide-icon-after=true])::after {
529
+ content: var(--db-icon, attr(data-icon))/"";
530
+ }
531
+ }
528
532
  @media aural {
529
533
  .db-custom-select:not([data-hide-icon-after=true])::after {
530
534
  content: none;
@@ -659,9 +663,13 @@ input[type=radio]:checked) > label {
659
663
  .db-custom-select:not([data-hide-icon-after=true])::after {
660
664
  --db-icon-after: "chevron_down";
661
665
  content: var(--db-icon-after, attr(data-icon-after));
662
- content: var(--db-icon-after, attr(data-icon-after))/"";
663
666
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
664
667
  }
668
+ @supports (content: ""/"") {
669
+ .db-custom-select:not([data-hide-icon-after=true])::after {
670
+ content: var(--db-icon-after, attr(data-icon-after))/"";
671
+ }
672
+ }
665
673
  .db-custom-select::after {
666
674
  pointer-events: none;
667
675
  }
@@ -973,10 +981,16 @@ input[type=radio]:checked) [id$=-placeholder] {
973
981
  .db-custom-select:has(summary:required) > label::after, .db-custom-select[data-required=true]:is(label)::after,
974
982
  .db-custom-select[data-required=true] > label::after {
975
983
  content: "*";
976
- content: "*"/"";
977
984
  /* stylelint-disable-next-line db-ux/use-spacings */
978
985
  padding-inline-start: 1px;
979
986
  }
987
+ @supports (content: ""/"") {
988
+ .db-custom-select:has(summary:required):is(label)::after,
989
+ .db-custom-select:has(summary:required) > label::after, .db-custom-select[data-required=true]:is(label)::after,
990
+ .db-custom-select[data-required=true] > label::after {
991
+ content: "*"/"";
992
+ }
993
+ }
980
994
  .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) {
981
995
  /* stylelint-disable-next-line at-rule-empty-line-before */
982
996
  }
package/build/components/infotext/infotext.css CHANGED
@@ -118,7 +118,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
118
118
 
119
119
  .db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
120
120
  content: var(--db-icon, attr(data-icon));
121
- content: var(--db-icon, attr(data-icon))/"";
122
121
  -webkit-alt: "";
123
122
  alt: "";
124
123
  color: var(--db-icon-color, inherit);
@@ -141,6 +140,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
141
140
  block-size: var(--db-icon-font-size, 1.5rem);
142
141
  inline-size: var(--db-icon-font-size, 1.5rem);
143
142
  }
143
+ @supports (content: ""/"") {
144
+ .db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
145
+ content: var(--db-icon, attr(data-icon))/"";
146
+ }
147
+ }
144
148
  @media aural {
145
149
  .db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
146
150
  content: none;
package/build/components/input/input.css CHANGED
@@ -351,7 +351,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
351
351
 
352
352
  .db-input:has(input[type=search]):not([data-hide-icon-before=true])::before, .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after, .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
353
353
  content: var(--db-icon, attr(data-icon));
354
- content: var(--db-icon, attr(data-icon))/"";
355
354
  -webkit-alt: "";
356
355
  alt: "";
357
356
  color: var(--db-icon-color, inherit);
@@ -374,6 +373,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
374
373
  block-size: var(--db-icon-font-size, 1.5rem);
375
374
  inline-size: var(--db-icon-font-size, 1.5rem);
376
375
  }
376
+ @supports (content: ""/"") {
377
+ .db-input:has(input[type=search]):not([data-hide-icon-before=true])::before, .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after, .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
378
+ content: var(--db-icon, attr(data-icon))/"";
379
+ }
380
+ }
377
381
  @media aural {
378
382
  .db-input:has(input[type=search]):not([data-hide-icon-before=true])::before, .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after, .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
379
383
  content: none;
@@ -512,9 +516,13 @@ input[type=radio]:checked) > label {
512
516
  .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
513
517
  --db-icon-after: "chevron_down";
514
518
  content: var(--db-icon-after, attr(data-icon-after));
515
- content: var(--db-icon-after, attr(data-icon-after))/"";
516
519
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
517
520
  }
521
+ @supports (content: ""/"") {
522
+ .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
523
+ content: var(--db-icon-after, attr(data-icon-after))/"";
524
+ }
525
+ }
518
526
  .db-input:has(datalist)::after {
519
527
  pointer-events: none;
520
528
  }
@@ -615,10 +623,16 @@ input[type=radio]:checked) [id$=-placeholder] {
615
623
  .db-input:has(input:required) > label::after, .db-input[data-required=true]:is(label)::after,
616
624
  .db-input[data-required=true] > label::after {
617
625
  content: "*";
618
- content: "*"/"";
619
626
  /* stylelint-disable-next-line db-ux/use-spacings */
620
627
  padding-inline-start: 1px;
621
628
  }
629
+ @supports (content: ""/"") {
630
+ .db-input:has(input:required):is(label)::after,
631
+ .db-input:has(input:required) > label::after, .db-input[data-required=true]:is(label)::after,
632
+ .db-input[data-required=true] > label::after {
633
+ content: "*"/"";
634
+ }
635
+ }
622
636
  .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid):has(.db-infotext[data-semantic=successful]) {
623
637
  /* stylelint-disable-next-line at-rule-empty-line-before */
624
638
  }
@@ -777,9 +791,13 @@ input[type=time]) {
777
791
  .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after {
778
792
  --db-icon-after: "cross";
779
793
  content: var(--db-icon-after, attr(data-icon-after));
780
- content: var(--db-icon-after, attr(data-icon-after))/"";
781
794
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
782
795
  }
796
+ @supports (content: ""/"") {
797
+ .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after {
798
+ content: var(--db-icon-after, attr(data-icon-after))/"";
799
+ }
800
+ }
783
801
  .db-input:has(input[type=search])::after {
784
802
  opacity: 0;
785
803
  }
@@ -795,15 +813,23 @@ input:focus-visible)::after {
795
813
  .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after {
796
814
  --db-icon-after: "calendar";
797
815
  content: var(--db-icon-after, attr(data-icon-after));
798
- content: var(--db-icon-after, attr(data-icon-after))/"";
799
816
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
800
817
  }
818
+ @supports (content: ""/"") {
819
+ .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after {
820
+ content: var(--db-icon-after, attr(data-icon-after))/"";
821
+ }
822
+ }
801
823
  .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
802
824
  --db-icon-after: "clock";
803
825
  content: var(--db-icon-after, attr(data-icon-after));
804
- content: var(--db-icon-after, attr(data-icon-after))/"";
805
826
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
806
827
  }
828
+ @supports (content: ""/"") {
829
+ .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
830
+ content: var(--db-icon-after, attr(data-icon-after))/"";
831
+ }
832
+ }
807
833
  .db-input:has(input[type=file]) input {
808
834
  padding-block-start: var(--db-spacing-fixed-xs);
809
835
  }
package/build/components/link/link.css CHANGED
@@ -201,7 +201,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
201
201
  }
202
202
  .db-link[data-content=internal]:not([data-hide-icon-after=true])::after, .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
203
203
  content: var(--db-icon, attr(data-icon));
204
- content: var(--db-icon, attr(data-icon))/"";
205
204
  -webkit-alt: "";
206
205
  alt: "";
207
206
  color: var(--db-icon-color, inherit);
@@ -224,6 +223,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
224
223
  block-size: var(--db-icon-font-size, 1.5rem);
225
224
  inline-size: var(--db-icon-font-size, 1.5rem);
226
225
  }
226
+ @supports (content: ""/"") {
227
+ .db-link[data-content=internal]:not([data-hide-icon-after=true])::after, .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
228
+ content: var(--db-icon, attr(data-icon))/"";
229
+ }
230
+ }
227
231
  @media aural {
228
232
  .db-link[data-content=internal]:not([data-hide-icon-after=true])::after, .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
229
233
  content: none;
@@ -292,18 +296,26 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
292
296
  .db-link[data-content=internal]:not([data-hide-icon-after=true])::after {
293
297
  --db-icon-after: "arrow_right";
294
298
  content: var(--db-icon-after, attr(data-icon-after));
295
- content: var(--db-icon-after, attr(data-icon-after))/"";
296
299
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
297
300
  }
301
+ @supports (content: ""/"") {
302
+ .db-link[data-content=internal]:not([data-hide-icon-after=true])::after {
303
+ content: var(--db-icon-after, attr(data-icon-after))/"";
304
+ }
305
+ }
298
306
  .db-link[data-content=internal]:not([data-hide-icon-after=true])::after {
299
307
  vertical-align: top;
300
308
  }
301
309
  .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
302
310
  --db-icon-after: "arrow_up_right";
303
311
  content: var(--db-icon-after, attr(data-icon-after));
304
- content: var(--db-icon-after, attr(data-icon-after))/"";
305
312
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
306
313
  }
314
+ @supports (content: ""/"") {
315
+ .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
316
+ content: var(--db-icon-after, attr(data-icon-after))/"";
317
+ }
318
+ }
307
319
  .db-link[data-content=internal], .db-link[data-content=external] {
308
320
  --db-icon-margin-start: var(--db-spacing-fixed-2xs);
309
321
  }
package/build/components/navigation-item/navigation-item.css CHANGED
@@ -194,7 +194,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
194
194
  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
195
195
  .db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
196
196
  content: var(--db-icon, attr(data-icon));
197
- content: var(--db-icon, attr(data-icon))/"";
198
197
  -webkit-alt: "";
199
198
  alt: "";
200
199
  color: var(--db-icon-color, inherit);
@@ -217,6 +216,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
217
216
  block-size: var(--db-icon-font-size, 1.5rem);
218
217
  inline-size: var(--db-icon-font-size, 1.5rem);
219
218
  }
219
+ @supports (content: ""/"") {
220
+ .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
221
+ .db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
222
+ content: var(--db-icon, attr(data-icon))/"";
223
+ }
224
+ }
220
225
  @media aural {
221
226
  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
222
227
  .db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
@@ -403,9 +408,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
403
408
  .db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
404
409
  --db-icon-after: "chevron_right";
405
410
  content: var(--db-icon-after, attr(data-icon-after));
406
- content: var(--db-icon-after, attr(data-icon-after))/"";
407
411
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
408
412
  }
413
+ @supports (content: ""/"") {
414
+ .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
415
+ .db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
416
+ content: var(--db-icon-after, attr(data-icon-after))/"";
417
+ }
418
+ }
409
419
  .db-navigation-item:has([aria-current=page]) > :is(a, button), .db-navigation-item:has([data-active=true]) > :is(a, button), .db-navigation-item[aria-current=page] > :is(a, button), .db-navigation-item[data-active=true] > :is(a, button) {
410
420
  font-weight: 700;
411
421
  }
package/build/components/notification/notification.css CHANGED
@@ -875,7 +875,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
875
875
 
876
876
  .db-notification[data-semantic=neutral]::before, .db-notification[data-semantic=critical]::before, .db-notification[data-semantic=successful]::before, .db-notification[data-semantic=warning]::before, .db-notification[data-semantic=informational]::before {
877
877
  content: var(--db-icon, attr(data-icon));
878
- content: var(--db-icon, attr(data-icon))/"";
879
878
  -webkit-alt: "";
880
879
  alt: "";
881
880
  color: var(--db-icon-color, inherit);
@@ -898,6 +897,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
898
897
  block-size: var(--db-icon-font-size, 1.5rem);
899
898
  inline-size: var(--db-icon-font-size, 1.5rem);
900
899
  }
900
+ @supports (content: ""/"") {
901
+ .db-notification[data-semantic=neutral]::before, .db-notification[data-semantic=critical]::before, .db-notification[data-semantic=successful]::before, .db-notification[data-semantic=warning]::before, .db-notification[data-semantic=informational]::before {
902
+ content: var(--db-icon, attr(data-icon))/"";
903
+ }
904
+ }
901
905
  @media aural {
902
906
  .db-notification[data-semantic=neutral]::before, .db-notification[data-semantic=critical]::before, .db-notification[data-semantic=successful]::before, .db-notification[data-semantic=warning]::before, .db-notification[data-semantic=informational]::before {
903
907
  content: none;
package/build/components/radio/radio.css CHANGED
@@ -147,10 +147,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
147
147
  .db-radio:has(input:required) > label::after, .db-radio[data-required=true]:is(label)::after,
148
148
  .db-radio[data-required=true] > label::after {
149
149
  content: "*";
150
- content: "*"/"";
151
150
  /* stylelint-disable-next-line db-ux/use-spacings */
152
151
  padding-inline-start: 1px;
153
152
  }
153
+ @supports (content: ""/"") {
154
+ .db-radio:has(input:required):is(label)::after,
155
+ .db-radio:has(input:required) > label::after, .db-radio[data-required=true]:is(label)::after,
156
+ .db-radio[data-required=true] > label::after {
157
+ content: "*"/"";
158
+ }
159
+ }
154
160
  .db-radio:has(input:not([data-custom-validity]):required:valid) .db-infotext {
155
161
  /* stylelint-disable-next-line at-rule-empty-line-before */
156
162
  }
package/build/components/select/select.css CHANGED
@@ -351,7 +351,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
351
351
 
352
352
  .db-select:not([data-hide-icon-after=true])::after {
353
353
  content: var(--db-icon, attr(data-icon));
354
- content: var(--db-icon, attr(data-icon))/"";
355
354
  -webkit-alt: "";
356
355
  alt: "";
357
356
  color: var(--db-icon-color, inherit);
@@ -374,6 +373,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
374
373
  block-size: var(--db-icon-font-size, 1.5rem);
375
374
  inline-size: var(--db-icon-font-size, 1.5rem);
376
375
  }
376
+ @supports (content: ""/"") {
377
+ .db-select:not([data-hide-icon-after=true])::after {
378
+ content: var(--db-icon, attr(data-icon))/"";
379
+ }
380
+ }
377
381
  @media aural {
378
382
  .db-select:not([data-hide-icon-after=true])::after {
379
383
  content: none;
@@ -512,9 +516,13 @@ input[type=radio]:checked) > label {
512
516
  .db-select:not([data-hide-icon-after=true])::after {
513
517
  --db-icon-after: "chevron_down";
514
518
  content: var(--db-icon-after, attr(data-icon-after));
515
- content: var(--db-icon-after, attr(data-icon-after))/"";
516
519
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
517
520
  }
521
+ @supports (content: ""/"") {
522
+ .db-select:not([data-hide-icon-after=true])::after {
523
+ content: var(--db-icon-after, attr(data-icon-after))/"";
524
+ }
525
+ }
518
526
  .db-select::after {
519
527
  pointer-events: none;
520
528
  }
@@ -663,10 +671,16 @@ input[type=radio]:checked) [id$=-placeholder] {
663
671
  .db-select:has(select:required) > label::after, .db-select[data-required=true]:is(label)::after,
664
672
  .db-select[data-required=true] > label::after {
665
673
  content: "*";
666
- content: "*"/"";
667
674
  /* stylelint-disable-next-line db-ux/use-spacings */
668
675
  padding-inline-start: 1px;
669
676
  }
677
+ @supports (content: ""/"") {
678
+ .db-select:has(select:required):is(label)::after,
679
+ .db-select:has(select:required) > label::after, .db-select[data-required=true]:is(label)::after,
680
+ .db-select[data-required=true] > label::after {
681
+ content: "*"/"";
682
+ }
683
+ }
670
684
  .db-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(.db-infotext[data-semantic=successful]) {
671
685
  /* stylelint-disable-next-line at-rule-empty-line-before */
672
686
  }
package/build/components/switch/switch.css CHANGED
@@ -442,7 +442,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
442
442
 
443
443
  .db-switch > input:not([data-hide-icon-after=true])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after {
444
444
  content: var(--db-icon, attr(data-icon));
445
- content: var(--db-icon, attr(data-icon))/"";
446
445
  -webkit-alt: "";
447
446
  alt: "";
448
447
  color: var(--db-icon-color, inherit);
@@ -465,6 +464,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
465
464
  block-size: var(--db-icon-font-size, 1.5rem);
466
465
  inline-size: var(--db-icon-font-size, 1.5rem);
467
466
  }
467
+ @supports (content: ""/"") {
468
+ .db-switch > input:not([data-hide-icon-after=true])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after {
469
+ content: var(--db-icon, attr(data-icon))/"";
470
+ }
471
+ }
468
472
  @media aural {
469
473
  .db-switch > input:not([data-hide-icon-after=true])::after, .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after {
470
474
  content: none;
@@ -498,10 +502,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
498
502
  .db-switch:has(input:required) > label::after, .db-switch[data-required=true]:is(label)::after,
499
503
  .db-switch[data-required=true] > label::after {
500
504
  content: "*";
501
- content: "*"/"";
502
505
  /* stylelint-disable-next-line db-ux/use-spacings */
503
506
  padding-inline-start: 1px;
504
507
  }
508
+ @supports (content: ""/"") {
509
+ .db-switch:has(input:required):is(label)::after,
510
+ .db-switch:has(input:required) > label::after, .db-switch[data-required=true]:is(label)::after,
511
+ .db-switch[data-required=true] > label::after {
512
+ content: "*"/"";
513
+ }
514
+ }
505
515
  .db-switch:has(input:not([data-custom-validity]):required:user-valid) .db-infotext {
506
516
  /* stylelint-disable-next-line at-rule-empty-line-before */
507
517
  }
@@ -836,9 +846,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
836
846
  .db-switch > input:not([data-hide-icon-after=true])::after {
837
847
  --db-icon-after: "cross";
838
848
  content: var(--db-icon-after, attr(data-icon-after));
839
- content: var(--db-icon-after, attr(data-icon-after))/"";
840
849
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
841
850
  }
851
+ @supports (content: ""/"") {
852
+ .db-switch > input:not([data-hide-icon-after=true])::after {
853
+ content: var(--db-icon-after, attr(data-icon-after))/"";
854
+ }
855
+ }
842
856
  .db-switch > input::after {
843
857
  visibility: hidden;
844
858
  align-self: center;
@@ -990,9 +1004,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
990
1004
  .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after {
991
1005
  --db-icon-after: "check";
992
1006
  content: var(--db-icon-after, attr(data-icon-after));
993
- content: var(--db-icon-after, attr(data-icon-after))/"";
994
1007
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
995
1008
  }
1009
+ @supports (content: ""/"") {
1010
+ .db-switch[data-emphasis=strong] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after, .db-switch[data-visual-aid=true] > input:checked:not([data-aid-icon]):not([data-hide-icon-after=true])::after {
1011
+ content: var(--db-icon-after, attr(data-icon-after))/"";
1012
+ }
1013
+ }
996
1014
  .db-switch[data-emphasis=strong] > input:checked::after, .db-switch[data-visual-aid=true] > input:checked::after {
997
1015
  transform: translateX(calc(-100% - 0.125rem));
998
1016
  block-size: calc(var(--db-icon-font-size));
package/build/components/tab-item/tab-item.scss CHANGED
@@ -11,7 +11,6 @@ $with-icon-padding-calc: calc(
11
11
  #{form-components.$font-size-height}
12
12
  );
13
13
 
14
-
15
14
  .db-tab-item {
16
15
  position: relative;
17
16
  display: inline-flex;
package/build/components/tag/tag.css CHANGED
@@ -930,7 +930,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
930
930
 
931
931
  .db-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
932
932
  content: var(--db-icon, attr(data-icon));
933
- content: var(--db-icon, attr(data-icon))/"";
934
933
  -webkit-alt: "";
935
934
  alt: "";
936
935
  color: var(--db-icon-color, inherit);
@@ -953,6 +952,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
953
952
  block-size: var(--db-icon-font-size, 1.5rem);
954
953
  inline-size: var(--db-icon-font-size, 1.5rem);
955
954
  }
955
+ @supports (content: ""/"") {
956
+ .db-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
957
+ content: var(--db-icon, attr(data-icon))/"";
958
+ }
959
+ }
956
960
  @media aural {
957
961
  .db-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after, .db-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
958
962
  content: none;
@@ -1363,15 +1367,23 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1363
1367
  .db-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after {
1364
1368
  --db-icon-after: "circle";
1365
1369
  content: var(--db-icon-after, attr(data-icon-after));
1366
- content: var(--db-icon-after, attr(data-icon-after))/"";
1367
1370
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
1368
1371
  }
1372
+ @supports (content: ""/"") {
1373
+ .db-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after {
1374
+ content: var(--db-icon-after, attr(data-icon-after))/"";
1375
+ }
1376
+ }
1369
1377
  .db-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
1370
1378
  --db-icon-after: "check_circle";
1371
1379
  content: var(--db-icon-after, attr(data-icon-after));
1372
- content: var(--db-icon-after, attr(data-icon-after))/"";
1373
1380
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
1374
1381
  }
1382
+ @supports (content: ""/"") {
1383
+ .db-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
1384
+ content: var(--db-icon-after, attr(data-icon-after))/"";
1385
+ }
1386
+ }
1375
1387
  .db-tag label {
1376
1388
  inline-size: 100%;
1377
1389
  margin-inline-start: 0;
package/build/components/textarea/textarea.css CHANGED
@@ -427,10 +427,16 @@ input[type=radio]:checked) [id$=-placeholder] {
427
427
  .db-textarea:has(textarea:required) > label::after, .db-textarea[data-required=true]:is(label)::after,
428
428
  .db-textarea[data-required=true] > label::after {
429
429
  content: "*";
430
- content: "*"/"";
431
430
  /* stylelint-disable-next-line db-ux/use-spacings */
432
431
  padding-inline-start: 1px;
433
432
  }
433
+ @supports (content: ""/"") {
434
+ .db-textarea:has(textarea:required):is(label)::after,
435
+ .db-textarea:has(textarea:required) > label::after, .db-textarea[data-required=true]:is(label)::after,
436
+ .db-textarea[data-required=true] > label::after {
437
+ content: "*"/"";
438
+ }
439
+ }
434
440
  .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(.db-infotext[data-semantic=successful]) {
435
441
  --db-textarea-read-only: var(--db-successful-bg-basic-level-1-default);
436
442
  --db-adaptive-bg-basic-transparent-full-default: var(