@db-ux/core-components 2.0.4 → 2.0.6

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 (21) hide show
  1. package/build/components/accordion-item/accordion-item.css +2 -4
  2. package/build/components/checkbox/checkbox.css +2 -4
  3. package/build/components/custom-select/custom-select.css +3 -5
  4. package/build/components/infotext/infotext.css +1 -3
  5. package/build/components/input/input.css +6 -8
  6. package/build/components/link/link.css +3 -5
  7. package/build/components/navigation-item/navigation-item.css +2 -4
  8. package/build/components/notification/notification.css +1 -3
  9. package/build/components/radio/radio.css +1 -1
  10. package/build/components/select/select.css +3 -5
  11. package/build/components/switch/switch.css +5 -7
  12. package/build/components/switch/switch.scss +4 -4
  13. package/build/components/tag/tag.css +3 -5
  14. package/build/components/textarea/textarea.css +1 -1
  15. package/build/styles/absolute.css +4 -4
  16. package/build/styles/index.css +1 -1
  17. package/build/styles/internal/_form-components.scss +2 -2
  18. package/build/styles/relative.css +4 -4
  19. package/build/styles/rollup.css +4 -4
  20. package/build/styles/webpack.css +4 -4
  21. package/package.json +7 -7
package/build/components/accordion-item/accordion-item.css CHANGED
@@ -135,9 +135,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
135
135
  }
136
136
  }
137
137
  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
138
- content: var(--db-icon, attr(data-icon));
139
- -webkit-alt: "";
140
- alt: "";
141
138
  color: var(--db-icon-color, inherit);
142
139
  display: inline-block;
143
140
  /*** icon - placeholder ***/
@@ -157,6 +154,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
157
154
  vertical-align: middle;
158
155
  block-size: var(--db-icon-font-size, 1.5rem);
159
156
  inline-size: var(--db-icon-font-size, 1.5rem);
157
+ content: var(--db-icon, attr(data-icon));
160
158
  }
161
159
  @supports (content: ""/"") {
162
160
  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
@@ -250,8 +248,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
250
248
  */
251
249
  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
252
250
  --db-icon-after: "chevron_down";
253
- content: var(--db-icon-after, attr(data-icon-after));
254
251
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
252
+ content: var(--db-icon-after, attr(data-icon-after));
255
253
  }
256
254
  @supports (content: ""/"") {
257
255
  .db-accordion-item summary:not([data-hide-icon-after=true])::after {
package/build/components/checkbox/checkbox.css CHANGED
@@ -56,9 +56,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
56
56
  @layer variables {}
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
- content: var(--db-icon, attr(data-icon));
60
- -webkit-alt: "";
61
- alt: "";
62
59
  color: var(--db-icon-color, inherit);
63
60
  display: inline-block;
64
61
  /*** icon - placeholder ***/
@@ -78,6 +75,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
78
75
  vertical-align: middle;
79
76
  block-size: var(--db-icon-font-size, 1.5rem);
80
77
  inline-size: var(--db-icon-font-size, 1.5rem);
78
+ content: var(--db-icon, attr(data-icon));
81
79
  }
82
80
  @supports (content: ""/"") {
83
81
  .db-checkbox input:checked:not([data-hide-icon-before=true])::before, .db-checkbox input:indeterminate:not([data-hide-icon-before=true])::before {
@@ -202,9 +200,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
202
200
  .db-checkbox:has(input:required):is(label)::after,
203
201
  .db-checkbox:has(input:required) > label::after, .db-checkbox[data-required=true]:is(label)::after,
204
202
  .db-checkbox[data-required=true] > label::after {
205
- content: "*";
206
203
  /* stylelint-disable-next-line db-ux/use-spacings */
207
204
  padding-inline-start: 1px;
205
+ content: "*";
208
206
  }
209
207
  @supports (content: ""/"") {
210
208
  .db-checkbox:has(input:required):is(label)::after,
package/build/components/custom-select/custom-select.css CHANGED
@@ -501,9 +501,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
501
501
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
502
502
  */
503
503
  .db-custom-select:not([data-hide-icon-after=true])::after {
504
- content: var(--db-icon, attr(data-icon));
505
- -webkit-alt: "";
506
- alt: "";
507
504
  color: var(--db-icon-color, inherit);
508
505
  display: inline-block;
509
506
  /*** icon - placeholder ***/
@@ -523,6 +520,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
523
520
  vertical-align: middle;
524
521
  block-size: var(--db-icon-font-size, 1.5rem);
525
522
  inline-size: var(--db-icon-font-size, 1.5rem);
523
+ content: var(--db-icon, attr(data-icon));
526
524
  }
527
525
  @supports (content: ""/"") {
528
526
  .db-custom-select:not([data-hide-icon-after=true])::after {
@@ -662,8 +660,8 @@ input[type=radio]:checked) > label {
662
660
 
663
661
  .db-custom-select:not([data-hide-icon-after=true])::after {
664
662
  --db-icon-after: "chevron_down";
665
- content: var(--db-icon-after, attr(data-icon-after));
666
663
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
664
+ content: var(--db-icon-after, attr(data-icon-after));
667
665
  }
668
666
  @supports (content: ""/"") {
669
667
  .db-custom-select:not([data-hide-icon-after=true])::after {
@@ -980,9 +978,9 @@ input[type=radio]:checked) [id$=-placeholder] {
980
978
  .db-custom-select:has(summary:required):is(label)::after,
981
979
  .db-custom-select:has(summary:required) > label::after, .db-custom-select[data-required=true]:is(label)::after,
982
980
  .db-custom-select[data-required=true] > label::after {
983
- content: "*";
984
981
  /* stylelint-disable-next-line db-ux/use-spacings */
985
982
  padding-inline-start: 1px;
983
+ content: "*";
986
984
  }
987
985
  @supports (content: ""/"") {
988
986
  .db-custom-select:has(summary:required):is(label)::after,
package/build/components/infotext/infotext.css CHANGED
@@ -117,9 +117,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
117
117
  @layer variables {}
118
118
 
119
119
  .db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
120
- content: var(--db-icon, attr(data-icon));
121
- -webkit-alt: "";
122
- alt: "";
123
120
  color: var(--db-icon-color, inherit);
124
121
  display: inline-block;
125
122
  /*** icon - placeholder ***/
@@ -139,6 +136,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
139
136
  vertical-align: middle;
140
137
  block-size: var(--db-icon-font-size, 1.5rem);
141
138
  inline-size: var(--db-icon-font-size, 1.5rem);
139
+ content: var(--db-icon, attr(data-icon));
142
140
  }
143
141
  @supports (content: ""/"") {
144
142
  .db-infotext:not([data-icon]):not([data-hide-icon-before=true])::before {
package/build/components/input/input.css CHANGED
@@ -350,9 +350,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
350
350
  @layer variables {}
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
- content: var(--db-icon, attr(data-icon));
354
- -webkit-alt: "";
355
- alt: "";
356
353
  color: var(--db-icon-color, inherit);
357
354
  display: inline-block;
358
355
  /*** icon - placeholder ***/
@@ -372,6 +369,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
372
369
  vertical-align: middle;
373
370
  block-size: var(--db-icon-font-size, 1.5rem);
374
371
  inline-size: var(--db-icon-font-size, 1.5rem);
372
+ content: var(--db-icon, attr(data-icon));
375
373
  }
376
374
  @supports (content: ""/"") {
377
375
  .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 {
@@ -515,8 +513,8 @@ input[type=radio]:checked) > label {
515
513
 
516
514
  .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
517
515
  --db-icon-after: "chevron_down";
518
- content: var(--db-icon-after, attr(data-icon-after));
519
516
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
517
+ content: var(--db-icon-after, attr(data-icon-after));
520
518
  }
521
519
  @supports (content: ""/"") {
522
520
  .db-input:not([data-hide-icon-after=true]):has(datalist)::after {
@@ -622,9 +620,9 @@ input[type=radio]:checked) [id$=-placeholder] {
622
620
  .db-input:has(input:required):is(label)::after,
623
621
  .db-input:has(input:required) > label::after, .db-input[data-required=true]:is(label)::after,
624
622
  .db-input[data-required=true] > label::after {
625
- content: "*";
626
623
  /* stylelint-disable-next-line db-ux/use-spacings */
627
624
  padding-inline-start: 1px;
625
+ content: "*";
628
626
  }
629
627
  @supports (content: ""/"") {
630
628
  .db-input:has(input:required):is(label)::after,
@@ -790,8 +788,8 @@ input[type=time]) {
790
788
  }
791
789
  .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after {
792
790
  --db-icon-after: "cross";
793
- content: var(--db-icon-after, attr(data-icon-after));
794
791
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
792
+ content: var(--db-icon-after, attr(data-icon-after));
795
793
  }
796
794
  @supports (content: ""/"") {
797
795
  .db-input:has(input[type=search]):not([data-hide-icon-after=true])::after {
@@ -812,8 +810,8 @@ input:focus-visible)::after {
812
810
  }
813
811
  .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 {
814
812
  --db-icon-after: "calendar";
815
- content: var(--db-icon-after, attr(data-icon-after));
816
813
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
814
+ content: var(--db-icon-after, attr(data-icon-after));
817
815
  }
818
816
  @supports (content: ""/"") {
819
817
  .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 {
@@ -822,8 +820,8 @@ input:focus-visible)::after {
822
820
  }
823
821
  .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
824
822
  --db-icon-after: "clock";
825
- content: var(--db-icon-after, attr(data-icon-after));
826
823
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
824
+ content: var(--db-icon-after, attr(data-icon-after));
827
825
  }
828
826
  @supports (content: ""/"") {
829
827
  .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
package/build/components/link/link.css CHANGED
@@ -200,9 +200,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
200
200
  }
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
- content: var(--db-icon, attr(data-icon));
204
- -webkit-alt: "";
205
- alt: "";
206
203
  color: var(--db-icon-color, inherit);
207
204
  display: inline-block;
208
205
  /*** icon - placeholder ***/
@@ -222,6 +219,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
222
219
  vertical-align: middle;
223
220
  block-size: var(--db-icon-font-size, 1.5rem);
224
221
  inline-size: var(--db-icon-font-size, 1.5rem);
222
+ content: var(--db-icon, attr(data-icon));
225
223
  }
226
224
  @supports (content: ""/"") {
227
225
  .db-link[data-content=internal]:not([data-hide-icon-after=true])::after, .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
@@ -295,8 +293,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
295
293
 
296
294
  .db-link[data-content=internal]:not([data-hide-icon-after=true])::after {
297
295
  --db-icon-after: "arrow_right";
298
- content: var(--db-icon-after, attr(data-icon-after));
299
296
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
297
+ content: var(--db-icon-after, attr(data-icon-after));
300
298
  }
301
299
  @supports (content: ""/"") {
302
300
  .db-link[data-content=internal]:not([data-hide-icon-after=true])::after {
@@ -308,8 +306,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
308
306
  }
309
307
  .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
310
308
  --db-icon-after: "arrow_up_right";
311
- content: var(--db-icon-after, attr(data-icon-after));
312
309
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
310
+ content: var(--db-icon-after, attr(data-icon-after));
313
311
  }
314
312
  @supports (content: ""/"") {
315
313
  .db-link[data-content=external]:not([data-hide-icon-after=true])::after {
package/build/components/navigation-item/navigation-item.css CHANGED
@@ -193,9 +193,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
193
193
  }
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
- content: var(--db-icon, attr(data-icon));
197
- -webkit-alt: "";
198
- alt: "";
199
196
  color: var(--db-icon-color, inherit);
200
197
  display: inline-block;
201
198
  /*** icon - placeholder ***/
@@ -215,6 +212,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
215
212
  vertical-align: middle;
216
213
  block-size: var(--db-icon-font-size, 1.5rem);
217
214
  inline-size: var(--db-icon-font-size, 1.5rem);
215
+ content: var(--db-icon, attr(data-icon));
218
216
  }
219
217
  @supports (content: ""/"") {
220
218
  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
@@ -408,8 +406,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
408
406
  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
409
407
  .db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
410
408
  --db-icon-after: "chevron_right";
411
- content: var(--db-icon-after, attr(data-icon-after));
412
409
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
410
+ content: var(--db-icon-after, attr(data-icon-after));
413
411
  }
414
412
  @supports (content: ""/"") {
415
413
  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
package/build/components/notification/notification.css CHANGED
@@ -874,9 +874,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
874
874
  @layer variables {}
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
- content: var(--db-icon, attr(data-icon));
878
- -webkit-alt: "";
879
- alt: "";
880
877
  color: var(--db-icon-color, inherit);
881
878
  display: inline-block;
882
879
  /*** icon - placeholder ***/
@@ -896,6 +893,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
896
893
  vertical-align: middle;
897
894
  block-size: var(--db-icon-font-size, 1.5rem);
898
895
  inline-size: var(--db-icon-font-size, 1.5rem);
896
+ content: var(--db-icon, attr(data-icon));
899
897
  }
900
898
  @supports (content: ""/"") {
901
899
  .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 {
package/build/components/radio/radio.css CHANGED
@@ -146,9 +146,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
146
146
  .db-radio:has(input:required):is(label)::after,
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
- content: "*";
150
149
  /* stylelint-disable-next-line db-ux/use-spacings */
151
150
  padding-inline-start: 1px;
151
+ content: "*";
152
152
  }
153
153
  @supports (content: ""/"") {
154
154
  .db-radio:has(input:required):is(label)::after,
package/build/components/select/select.css CHANGED
@@ -350,9 +350,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
350
350
  @layer variables {}
351
351
 
352
352
  .db-select:not([data-hide-icon-after=true])::after {
353
- content: var(--db-icon, attr(data-icon));
354
- -webkit-alt: "";
355
- alt: "";
356
353
  color: var(--db-icon-color, inherit);
357
354
  display: inline-block;
358
355
  /*** icon - placeholder ***/
@@ -372,6 +369,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
372
369
  vertical-align: middle;
373
370
  block-size: var(--db-icon-font-size, 1.5rem);
374
371
  inline-size: var(--db-icon-font-size, 1.5rem);
372
+ content: var(--db-icon, attr(data-icon));
375
373
  }
376
374
  @supports (content: ""/"") {
377
375
  .db-select:not([data-hide-icon-after=true])::after {
@@ -515,8 +513,8 @@ input[type=radio]:checked) > label {
515
513
 
516
514
  .db-select:not([data-hide-icon-after=true])::after {
517
515
  --db-icon-after: "chevron_down";
518
- content: var(--db-icon-after, attr(data-icon-after));
519
516
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
517
+ content: var(--db-icon-after, attr(data-icon-after));
520
518
  }
521
519
  @supports (content: ""/"") {
522
520
  .db-select:not([data-hide-icon-after=true])::after {
@@ -670,9 +668,9 @@ input[type=radio]:checked) [id$=-placeholder] {
670
668
  .db-select:has(select:required):is(label)::after,
671
669
  .db-select:has(select:required) > label::after, .db-select[data-required=true]:is(label)::after,
672
670
  .db-select[data-required=true] > label::after {
673
- content: "*";
674
671
  /* stylelint-disable-next-line db-ux/use-spacings */
675
672
  padding-inline-start: 1px;
673
+ content: "*";
676
674
  }
677
675
  @supports (content: ""/"") {
678
676
  .db-select:has(select:required):is(label)::after,
package/build/components/switch/switch.css CHANGED
@@ -441,9 +441,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
441
441
  @layer variables {}
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
- content: var(--db-icon, attr(data-icon));
445
- -webkit-alt: "";
446
- alt: "";
447
444
  color: var(--db-icon-color, inherit);
448
445
  display: inline-block;
449
446
  /*** icon - placeholder ***/
@@ -463,6 +460,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
463
460
  vertical-align: middle;
464
461
  block-size: var(--db-icon-font-size, 1.5rem);
465
462
  inline-size: var(--db-icon-font-size, 1.5rem);
463
+ content: var(--db-icon, attr(data-icon));
466
464
  }
467
465
  @supports (content: ""/"") {
468
466
  .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 {
@@ -494,16 +492,16 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
494
492
  }
495
493
 
496
494
  .db-switch {
495
+ user-select: none;
497
496
  /* stylelint-disable-next-line at-rule-empty-line-before */
498
497
  /* stylelint-disable-next-line at-rule-empty-line-before */
499
- user-select: none;
500
498
  }
501
499
  .db-switch:has(input:required):is(label)::after,
502
500
  .db-switch:has(input:required) > label::after, .db-switch[data-required=true]:is(label)::after,
503
501
  .db-switch[data-required=true] > label::after {
504
- content: "*";
505
502
  /* stylelint-disable-next-line db-ux/use-spacings */
506
503
  padding-inline-start: 1px;
504
+ content: "*";
507
505
  }
508
506
  @supports (content: ""/"") {
509
507
  .db-switch:has(input:required):is(label)::after,
@@ -845,8 +843,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
845
843
  }
846
844
  .db-switch > input:not([data-hide-icon-after=true])::after {
847
845
  --db-icon-after: "cross";
848
- content: var(--db-icon-after, attr(data-icon-after));
849
846
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
847
+ content: var(--db-icon-after, attr(data-icon-after));
850
848
  }
851
849
  @supports (content: ""/"") {
852
850
  .db-switch > input:not([data-hide-icon-after=true])::after {
@@ -1003,8 +1001,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1003
1001
  }
1004
1002
  .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 {
1005
1003
  --db-icon-after: "check";
1006
- content: var(--db-icon-after, attr(data-icon-after));
1007
1004
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
1005
+ content: var(--db-icon-after, attr(data-icon-after));
1008
1006
  }
1009
1007
  @supports (content: ""/"") {
1010
1008
  .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 {
package/build/components/switch/switch.scss CHANGED
@@ -36,10 +36,10 @@ $checked-active-transition-size: calc(
36
36
  }
37
37
 
38
38
  .db-switch {
39
- @include form-components.set-default-check-element(switch);
40
-
41
39
  user-select: none;
42
40
 
41
+ @include form-components.set-default-check-element(switch);
42
+
43
43
  // This is needed when clicking on the label instead of the input
44
44
  @include helpers.active {
45
45
  > input {
@@ -53,8 +53,6 @@ $checked-active-transition-size: calc(
53
53
 
54
54
  @extend %db-overwrite-font-size-sm;
55
55
 
56
- @include icons.set-icon("cross", "after");
57
-
58
56
  appearance: none;
59
57
  inline-size: calc(
60
58
  #{form-components.$font-size-height} * 2 + #{$switch-fixed-padding}
@@ -68,6 +66,8 @@ $checked-active-transition-size: calc(
68
66
  background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
69
67
  border-radius: variables.$db-border-radius-full;
70
68
 
69
+ @include icons.set-icon("cross", "after");
70
+
71
71
  &::after {
72
72
  visibility: hidden;
73
73
  align-self: center;
package/build/components/tag/tag.css CHANGED
@@ -929,9 +929,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
929
929
  @layer variables {}
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
- content: var(--db-icon, attr(data-icon));
933
- -webkit-alt: "";
934
- alt: "";
935
932
  color: var(--db-icon-color, inherit);
936
933
  display: inline-block;
937
934
  /*** icon - placeholder ***/
@@ -951,6 +948,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
951
948
  vertical-align: middle;
952
949
  block-size: var(--db-icon-font-size, 1.5rem);
953
950
  inline-size: var(--db-icon-font-size, 1.5rem);
951
+ content: var(--db-icon, attr(data-icon));
954
952
  }
955
953
  @supports (content: ""/"") {
956
954
  .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 {
@@ -1366,8 +1364,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1366
1364
  }
1367
1365
  .db-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after {
1368
1366
  --db-icon-after: "circle";
1369
- content: var(--db-icon-after, attr(data-icon-after));
1370
1367
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
1368
+ content: var(--db-icon-after, attr(data-icon-after));
1371
1369
  }
1372
1370
  @supports (content: ""/"") {
1373
1371
  .db-tag[data-show-check-state=true] label:not([data-hide-icon-after=true])::after {
@@ -1376,8 +1374,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1376
1374
  }
1377
1375
  .db-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
1378
1376
  --db-icon-after: "check_circle";
1379
- content: var(--db-icon-after, attr(data-icon-after));
1380
1377
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
1378
+ content: var(--db-icon-after, attr(data-icon-after));
1381
1379
  }
1382
1380
  @supports (content: ""/"") {
1383
1381
  .db-tag[data-show-check-state=true] label:has(input:checked):not([data-hide-icon-after=true])::after {
package/build/components/textarea/textarea.css CHANGED
@@ -426,9 +426,9 @@ input[type=radio]:checked) [id$=-placeholder] {
426
426
  .db-textarea:has(textarea:required):is(label)::after,
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
- content: "*";
430
429
  /* stylelint-disable-next-line db-ux/use-spacings */
431
430
  padding-inline-start: 1px;
431
+ content: "*";
432
432
  }
433
433
  @supports (content: ""/"") {
434
434
  .db-textarea:has(textarea:required):is(label)::after,