@db-ux/core-components 3.1.15 → 3.1.17

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 (69) hide show
  1. package/build/components/accordion-item/accordion-item.css +3 -1
  2. package/build/components/accordion-item/accordion-item.scss +3 -1
  3. package/build/components/badge/badge.css +3 -1
  4. package/build/components/brand/brand.css +3 -1
  5. package/build/components/brand/brand.scss +2 -1
  6. package/build/components/button/button.css +3 -1
  7. package/build/components/card/card.css +3 -1
  8. package/build/components/card/card.scss +1 -1
  9. package/build/components/checkbox/checkbox.css +29 -24
  10. package/build/components/checkbox/checkbox.scss +2 -1
  11. package/build/components/custom-select/custom-select.css +28 -26
  12. package/build/components/custom-select/custom-select.scss +1 -1
  13. package/build/components/custom-select-dropdown/custom-select-dropdown.css +3 -3
  14. package/build/components/custom-select-dropdown/custom-select-dropdown.scss +1 -1
  15. package/build/components/custom-select-form-field/custom-select-form-field.css +6 -2
  16. package/build/components/custom-select-form-field/custom-select-form-field.scss +5 -2
  17. package/build/components/custom-select-list/custom-select-list.css +3 -1
  18. package/build/components/custom-select-list/custom-select-list.scss +4 -1
  19. package/build/components/custom-select-list-item/custom-select-list-item.css +3 -1
  20. package/build/components/custom-select-list-item/custom-select-list-item.scss +2 -1
  21. package/build/components/drawer/drawer.css +8 -4
  22. package/build/components/drawer/drawer.scss +4 -5
  23. package/build/components/header/header.css +46 -24
  24. package/build/components/header/header.scss +27 -18
  25. package/build/components/icon/icon.css +1 -1
  26. package/build/components/icon/icon.scss +2 -1
  27. package/build/components/infotext/infotext.css +2 -0
  28. package/build/components/infotext/infotext.scss +2 -2
  29. package/build/components/input/input.css +30 -26
  30. package/build/components/link/link.css +2 -2
  31. package/build/components/navigation/navigation.css +4 -2
  32. package/build/components/navigation/navigation.scss +4 -2
  33. package/build/components/navigation-item/navigation-item.css +15 -6
  34. package/build/components/navigation-item/navigation-item.scss +10 -6
  35. package/build/components/notification/notification-grid-non-overlay.scss +3 -1
  36. package/build/components/notification/notification.css +6 -4
  37. package/build/components/notification/notification.scss +2 -1
  38. package/build/components/page/page.css +12 -4
  39. package/build/components/page/page.scss +8 -3
  40. package/build/components/popover/popover.css +3 -1
  41. package/build/components/popover/popover.scss +4 -1
  42. package/build/components/radio/radio.css +4 -1
  43. package/build/components/select/select.css +28 -26
  44. package/build/components/select/select.scss +2 -1
  45. package/build/components/stack/stack-web-component.css +3 -1
  46. package/build/components/stack/stack.css +3 -1
  47. package/build/components/switch/switch.css +7 -2
  48. package/build/components/switch/switch.scss +3 -1
  49. package/build/components/tab-item/tab-item.css +6 -2
  50. package/build/components/tab-item/tab-item.scss +6 -2
  51. package/build/components/tab-list/tab-list.css +3 -1
  52. package/build/components/tab-list/tab-list.scss +2 -1
  53. package/build/components/tab-panel/tab-panel.css +1 -1
  54. package/build/components/tab-panel/tab-panel.scss +2 -1
  55. package/build/components/tabs/tabs.css +58 -56
  56. package/build/components/tabs/tabs.scss +4 -3
  57. package/build/components/tag/tag.css +11 -5
  58. package/build/components/tag/tag.scss +5 -3
  59. package/build/components/textarea/textarea.css +27 -25
  60. package/build/styles/absolute.css +16 -16
  61. package/build/styles/index.css +15 -15
  62. package/build/styles/internal/_button-components.scss +5 -1
  63. package/build/styles/internal/_form-components.scss +8 -6
  64. package/build/styles/internal/_link-components.scss +2 -2
  65. package/build/styles/internal/_stack-components.scss +2 -1
  66. package/build/styles/relative.css +16 -16
  67. package/build/styles/rollup.css +16 -16
  68. package/build/styles/webpack.css +16 -16
  69. package/package.json +4 -3
package/build/components/accordion-item/accordion-item.css CHANGED
@@ -304,13 +304,15 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
304
304
  .db-accordion-item > details > summary {
305
305
  background-color: var(--db-adaptive-bg-basic-level-1-default);
306
306
  list-style: none;
307
- display: flex;
308
307
  justify-content: space-between;
309
308
  padding: var(--db-spacing-fixed-md);
310
309
  gap: var(--db-spacing-fixed-md);
311
310
  border-radius: var(--db-border-radius-sm);
312
311
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
313
312
  }
313
+ .db-accordion-item > details > summary:not([hidden]) {
314
+ display: flex;
315
+ }
314
316
  .db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]) {
315
317
  cursor: var(--db-overwrite-cursor, pointer);
316
318
  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
package/build/components/accordion-item/accordion-item.scss CHANGED
@@ -49,7 +49,9 @@
49
49
 
50
50
  background-color: colors.$db-adaptive-bg-basic-level-1-default;
51
51
  list-style: none;
52
- display: flex;
52
+
53
+ @include helpers.display(flex);
54
+
53
55
  justify-content: space-between;
54
56
  padding: variables.$db-spacing-fixed-md;
55
57
  gap: variables.$db-spacing-fixed-md;
package/build/components/badge/badge.css CHANGED
@@ -132,10 +132,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
132
132
  white-space: nowrap;
133
133
  justify-content: center;
134
134
  text-align: center;
135
- display: inline-flex;
136
135
  align-items: center;
137
136
  vertical-align: top;
138
137
  }
138
+ .db-badge:not([hidden]) {
139
+ display: inline-flex;
140
+ }
139
141
 
140
142
  /**
141
143
  * @mixin screen-min-max
package/build/components/brand/brand.css CHANGED
@@ -114,11 +114,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
114
114
  @layer variables {}
115
115
 
116
116
  .db-brand {
117
- display: flex;
118
117
  gap: var(--db-spacing-fixed-sm);
119
118
  align-items: center;
120
119
  font-weight: 700;
121
120
  }
121
+ .db-brand:not([hidden]) {
122
+ display: flex;
123
+ }
122
124
  .db-brand::before {
123
125
  --db-icon-font-size: var(--db-sizing-md);
124
126
  --db-icon-margin-end: 0;
package/build/components/brand/brand.scss CHANGED
@@ -1,11 +1,12 @@
1
1
  @use "@db-ux/core-foundations/build/styles/variables";
2
2
  @use "@db-ux/core-foundations/build/styles/colors";
3
3
  @use "@db-ux/core-foundations/build/styles/fonts";
4
+ @use "@db-ux/core-foundations/build/styles/helpers/display";
4
5
 
5
6
  .db-brand {
6
7
  @extend %db-overwrite-font-size-md;
8
+ @include display.display(flex);
7
9
 
8
- display: flex;
9
10
  gap: variables.$db-spacing-fixed-sm;
10
11
  align-items: center;
11
12
  font-weight: 700;
package/build/components/button/button.css CHANGED
@@ -144,10 +144,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
144
144
  white-space: nowrap;
145
145
  justify-content: center;
146
146
  text-align: center;
147
- display: inline-flex;
148
147
  align-items: center;
149
148
  vertical-align: top;
150
149
  }
150
+ .db-button:not([hidden]) {
151
+ display: inline-flex;
152
+ }
151
153
 
152
154
  .db-button {
153
155
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
package/build/components/card/card.css CHANGED
@@ -94,7 +94,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
94
94
  --db-card-background-color-hovered: var(--db-adaptive-bg-basic-level-1-hovered);
95
95
  --db-card-background-color-pressed: var(--db-adaptive-bg-basic-level-1-pressed);
96
96
  /* stylelint-disable-next-line at-rule-empty-line-before */
97
- display: flex;
98
97
  flex-direction: column;
99
98
  background-color: var(--db-card-background-color-default);
100
99
  }
@@ -113,6 +112,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
113
112
  .db-card[data-spacing=none] {
114
113
  padding: 0;
115
114
  }
115
+ .db-card:not([hidden]) {
116
+ display: flex;
117
+ }
116
118
  .db-card[data-behavior=interactive] {
117
119
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
118
120
  }
package/build/components/card/card.scss CHANGED
@@ -30,8 +30,8 @@
30
30
 
31
31
  @extend %default-card;
32
32
  @include component.get-data-spacing;
33
+ @include helpers.display(flex);
33
34
 
34
- display: flex;
35
35
  flex-direction: column;
36
36
  background-color: var(--db-card-background-color-default);
37
37
 
package/build/components/checkbox/checkbox.css CHANGED
@@ -188,8 +188,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
188
188
  .db-checkbox > .db-infotext {
189
189
  margin-block-start: var(--db-spacing-fixed-2xs);
190
190
  }
191
- .db-checkbox > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
192
- .db-checkbox > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
191
+ .db-checkbox > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]),
192
+ .db-checkbox > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]) {
193
193
  display: none;
194
194
  }
195
195
 
@@ -225,11 +225,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
225
225
  }
226
226
  .db-checkbox:is(label),
227
227
  .db-checkbox > label {
228
- display: flex;
229
228
  align-items: flex-start;
230
229
  position: relative;
231
230
  color: var(--db-check-element-label-color, var(--db-adaptive-on-bg-basic-emphasis-100-default));
232
231
  }
232
+ .db-checkbox:is(label):not([hidden]),
233
+ .db-checkbox > label:not([hidden]) {
234
+ display: flex;
235
+ }
233
236
  .db-checkbox input {
234
237
  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
235
238
  place-content: center center;
@@ -295,12 +298,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
295
298
  .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext {
296
299
  /* stylelint-disable-next-line at-rule-empty-line-before */
297
300
  }
298
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
299
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
301
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
302
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
300
303
  display: flex;
301
304
  }
302
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
303
- .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
305
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
306
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
304
307
  display: none;
305
308
  }
306
309
  .db-checkbox:has(input:not([data-custom-validity]):required:user-valid):has(.db-infotext[data-semantic=successful]) input:not(:checked) {
@@ -345,14 +348,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
345
348
  .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext {
346
349
  /* stylelint-disable-next-line at-rule-empty-line-before */
347
350
  }
348
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
349
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
350
- .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
351
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
352
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
353
+ .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
351
354
  display: flex;
352
355
  }
353
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
354
- .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
355
- .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
356
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
357
+ .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
358
+ .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
356
359
  display: none;
357
360
  }
358
361
  .db-checkbox:has(input[data-custom-validity=valid]):has(.db-infotext[data-semantic=successful]) input:not(:checked), .db-checkbox[data-custom-validity=valid]:has(.db-infotext[data-semantic=successful]) input:not(:checked) {
@@ -392,12 +395,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
392
395
  --db-critical-on-bg-basic-emphasis-80-pressed
393
396
  );
394
397
  }
395
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
396
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext[data-semantic=critical] {
398
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
399
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
397
400
  display: flex;
398
401
  }
399
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
400
- .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext:not([data-semantic]) {
402
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
403
+ .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) > .db-infotext:not([data-semantic]):not([hidden]) {
401
404
  display: none;
402
405
  }
403
406
  .db-checkbox:has(input:not([data-custom-validity]):required:user-invalid) input:not(:checked) {
@@ -437,14 +440,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
437
440
  --db-critical-on-bg-basic-emphasis-80-pressed
438
441
  );
439
442
  }
440
- .db-checkbox:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
441
- .db-checkbox:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical], .db-checkbox[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical],
442
- .db-checkbox[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
443
+ .db-checkbox:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
444
+ .db-checkbox:has(input[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-checkbox[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
445
+ .db-checkbox[data-custom-validity=invalid] > .db-infotext[data-semantic=critical]:not([hidden]) {
443
446
  display: flex;
444
447
  }
445
- .db-checkbox:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
446
- .db-checkbox:has(input[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]), .db-checkbox[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]),
447
- .db-checkbox[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
448
+ .db-checkbox:has(input[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
449
+ .db-checkbox:has(input[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-checkbox[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
450
+ .db-checkbox[data-custom-validity=invalid] > .db-infotext:not([data-semantic]):not([hidden]) {
448
451
  display: none;
449
452
  }
450
453
  .db-checkbox:has(input[data-custom-validity=invalid]) input:not(:checked), .db-checkbox[data-custom-validity=invalid] input:not(:checked) {
@@ -471,11 +474,13 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
471
474
  );
472
475
  }
473
476
  .db-checkbox input {
474
- display: flex;
475
477
  border-radius: var(--db-border-radius-2xs);
476
478
  align-items: center;
477
479
  justify-content: center;
478
480
  }
481
+ .db-checkbox input:not([hidden]) {
482
+ display: flex;
483
+ }
479
484
  .db-checkbox input:checked {
480
485
  --db-check-element-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
481
486
  --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
package/build/components/checkbox/checkbox.scss CHANGED
@@ -94,7 +94,8 @@
94
94
  }
95
95
 
96
96
  input {
97
- display: flex;
97
+ @include helpers.display(flex);
98
+
98
99
  border-radius: variables.$db-border-radius-2xs;
99
100
  align-items: center;
100
101
  justify-content: center;
package/build/components/custom-select/custom-select.css CHANGED
@@ -712,8 +712,8 @@ input[type=radio]:checked) > label {
712
712
  .db-custom-select > .db-infotext {
713
713
  margin-block-start: var(--db-spacing-fixed-2xs);
714
714
  }
715
- .db-custom-select > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
716
- .db-custom-select > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
715
+ .db-custom-select > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]),
716
+ .db-custom-select > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]) {
717
717
  display: none;
718
718
  }
719
719
 
@@ -804,9 +804,11 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
804
804
  .db-custom-select {
805
805
  --db-form-has-before: 0;
806
806
  position: relative;
807
- display: flex;
808
807
  flex-direction: column;
809
808
  }
809
+ .db-custom-select:not([hidden]) {
810
+ display: flex;
811
+ }
810
812
  .db-custom-select[data-variant=floating], .db-custom-select[data-hide-label=true] {
811
813
  --db-label-visible-above: 0;
812
814
  }
@@ -902,15 +904,15 @@ input[type=radio]:checked) [id$=-placeholder] {
902
904
  /* stylelint-disable-next-line at-rule-empty-line-before */
903
905
  }
904
906
  .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
905
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
907
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
906
908
  .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
907
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
909
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
908
910
  display: flex;
909
911
  }
910
912
  .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
911
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
913
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
912
914
  .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-valid):has(> .db-infotext[data-semantic=successful],
913
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
915
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
914
916
  display: none;
915
917
  }
916
918
  .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
@@ -938,21 +940,21 @@ input[type=radio]:checked) [id$=-placeholder] {
938
940
  /* stylelint-disable-next-line at-rule-empty-line-before */
939
941
  }
940
942
  .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
941
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
943
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
942
944
  .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
943
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
944
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
945
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
946
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
945
947
  .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
946
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
948
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
947
949
  display: flex;
948
950
  }
949
951
  .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
950
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
952
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
951
953
  .db-custom-select:has(select[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
952
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
953
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
954
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]), .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
955
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
954
956
  .db-custom-select[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
955
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
957
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
956
958
  display: none;
957
959
  }
958
960
  .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) {
@@ -963,12 +965,12 @@ input[type=radio]:checked) [id$=-placeholder] {
963
965
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
964
966
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
965
967
  }
966
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
967
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext[data-semantic=critical] {
968
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
969
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
968
970
  display: flex;
969
971
  }
970
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
971
- .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext:not([data-semantic]) {
972
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
973
+ .db-custom-select:has(select:not([data-custom-validity]):is(:required):user-invalid) > .db-infotext:not([data-semantic]):not([hidden]) {
972
974
  display: none;
973
975
  }
974
976
  .db-custom-select:has(select[data-custom-validity=invalid]), .db-custom-select[data-custom-validity=invalid] {
@@ -980,14 +982,14 @@ input[type=radio]:checked) [id$=-placeholder] {
980
982
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
981
983
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
982
984
  }
983
- .db-custom-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
984
- .db-custom-select:has(select[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical], .db-custom-select[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical],
985
- .db-custom-select[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
985
+ .db-custom-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
986
+ .db-custom-select:has(select[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-custom-select[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
987
+ .db-custom-select[data-custom-validity=invalid] > .db-infotext[data-semantic=critical]:not([hidden]) {
986
988
  display: flex;
987
989
  }
988
- .db-custom-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
989
- .db-custom-select:has(select[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]), .db-custom-select[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]),
990
- .db-custom-select[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
990
+ .db-custom-select:has(select[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
991
+ .db-custom-select:has(select[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-custom-select[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
992
+ .db-custom-select[data-custom-validity=invalid] > .db-infotext:not([data-semantic]):not([hidden]) {
991
993
  display: none;
992
994
  }
993
995
  .db-custom-select summary::placeholder,
@@ -1062,7 +1064,7 @@ summary[aria-disabled=true]) {
1062
1064
  --db-form-component-padding-inline-end: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
1063
1065
  margin-inline-end: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm));
1064
1066
  }
1065
- .db-custom-select:has(summary span) [id$=-placeholder] {
1067
+ .db-custom-select:has(summary span) [id$=-placeholder]:not([hidden]) {
1066
1068
  display: none;
1067
1069
  }
1068
1070
  .db-custom-select > db-button > .db-button[data-icon=cross][data-variant=ghost],
package/build/components/custom-select/custom-select.scss CHANGED
@@ -57,7 +57,7 @@
57
57
 
58
58
  &:has(summary span) {
59
59
  [id$="-placeholder"] {
60
- display: none;
60
+ @include helpers.display(none);
61
61
  }
62
62
  }
63
63
 
package/build/components/custom-select-dropdown/custom-select-dropdown.css CHANGED
@@ -483,9 +483,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
483
483
  }
484
484
  }
485
485
  @media screen and (min-width: 48em) {
486
- .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button):not([data-force-mobile]), .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button)[data-force-mobile=false],
487
- .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button):not([data-force-mobile]),
488
- .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button)[data-force-mobile=false] {
486
+ .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button):not([data-force-mobile]):not([hidden]), .db-custom-select-dropdown > db-custom-select-list > div:not([class~=db-custom-select-list]):has(.db-button)[data-force-mobile=false]:not([hidden]),
487
+ .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button):not([data-force-mobile]):not([hidden]),
488
+ .db-custom-select-dropdown > div:not([class~=db-custom-select-list]):has(.db-button)[data-force-mobile=false]:not([hidden]) {
489
489
  display: none;
490
490
  }
491
491
  }
package/build/components/custom-select-dropdown/custom-select-dropdown.scss CHANGED
@@ -64,7 +64,7 @@
64
64
  @include helpers.divider("top", "after");
65
65
 
66
66
  @include screen-sizes.screen("sm") {
67
- display: none;
67
+ @include helpers.display(none);
68
68
  }
69
69
  }
70
70
  }
package/build/components/custom-select-form-field/custom-select-form-field.css CHANGED
@@ -128,17 +128,21 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
128
128
  */
129
129
  .db-custom-select-form-field:is(summary) {
130
130
  list-style: none;
131
- display: flex;
132
131
  align-items: center;
133
132
  justify-content: space-between;
134
133
  gap: var(--db-spacing-fixed-sm);
135
134
  }
135
+ .db-custom-select-form-field:is(summary):not([hidden]) {
136
+ display: flex;
137
+ }
136
138
  .db-custom-select-form-field:is(summary) span {
137
139
  text-overflow: ellipsis;
138
140
  overflow: hidden;
139
141
  text-wrap: nowrap;
140
142
  }
141
143
  .db-custom-select-form-field:is(summary) > div {
142
- display: flex;
143
144
  gap: var(--db-spacing-fixed-sm);
144
145
  }
146
+ .db-custom-select-form-field:is(summary) > div:not([hidden]) {
147
+ display: flex;
148
+ }
package/build/components/custom-select-form-field/custom-select-form-field.scss CHANGED
@@ -5,7 +5,9 @@
5
5
  .db-custom-select-form-field {
6
6
  &:is(summary) {
7
7
  list-style: none;
8
- display: flex;
8
+
9
+ @include helpers.display(flex);
10
+
9
11
  align-items: center;
10
12
  justify-content: space-between;
11
13
  gap: variables.$db-spacing-fixed-sm;
@@ -17,7 +19,8 @@
17
19
  }
18
20
 
19
21
  > div {
20
- display: flex;
22
+ @include helpers.display(flex);
23
+
21
24
  gap: variables.$db-spacing-fixed-sm;
22
25
  }
23
26
  }
package/build/components/custom-select-list/custom-select-list.css CHANGED
@@ -139,9 +139,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
139
139
  }
140
140
  .db-custom-select-list > ul {
141
141
  all: unset;
142
- display: flex;
143
142
  flex-direction: column;
144
143
  }
144
+ .db-custom-select-list > ul:not([hidden]) {
145
+ display: flex;
146
+ }
145
147
  .db-custom-select-list > ul:has(span) {
146
148
  --db-custom-select-list-item-group-padding: 1;
147
149
  }
package/build/components/custom-select-list/custom-select-list.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "@db-ux/core-foundations/build/styles/variables";
2
2
  @use "../../styles/internal/form-components";
3
+ @use "@db-ux/core-foundations/build/styles/helpers/display";
3
4
 
4
5
  .db-custom-select-list {
5
6
  all: unset;
@@ -26,7 +27,9 @@
26
27
 
27
28
  > ul {
28
29
  all: unset;
29
- display: flex;
30
+
31
+ @include display.display(flex);
32
+
30
33
  flex-direction: column;
31
34
 
32
35
  &:has(span) {
package/build/components/custom-select-list-item/custom-select-list-item.css CHANGED
@@ -174,7 +174,6 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
174
174
  }
175
175
 
176
176
  .db-custom-select-list-item {
177
- display: flex;
178
177
  block-size: 100%;
179
178
  position: relative;
180
179
  padding: var(--db-spacing-fixed-sm);
@@ -182,6 +181,9 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
182
181
  border-radius: var(--db-border-radius-xs);
183
182
  box-sizing: border-box;
184
183
  }
184
+ .db-custom-select-list-item:not([hidden]) {
185
+ display: flex;
186
+ }
185
187
  .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)) {
186
188
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
187
189
  }
package/build/components/custom-select-list-item/custom-select-list-item.scss CHANGED
@@ -14,7 +14,8 @@ db-custom-select-list-item:not(:last-of-type) {
14
14
  }
15
15
 
16
16
  .db-custom-select-list-item {
17
- display: flex;
17
+ @include helpers.display(flex);
18
+
18
19
  block-size: 100%;
19
20
  position: relative;
20
21
  padding: variables.$db-spacing-fixed-sm;
package/build/components/drawer/drawer.css CHANGED
@@ -278,7 +278,6 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
278
278
  }
279
279
 
280
280
  .db-drawer .db-drawer-container {
281
- display: flex;
282
281
  flex-direction: column;
283
282
  background-color: var(--db-adaptive-bg-basic-level-1-default);
284
283
  block-size: 100%;
@@ -286,6 +285,9 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
286
285
  position: fixed;
287
286
  box-shadow: var(--db-elevation-md);
288
287
  }
288
+ .db-drawer .db-drawer-container:not([hidden]) {
289
+ display: flex;
290
+ }
289
291
  .db-drawer .db-drawer-container:not([data-width=full]) {
290
292
  max-inline-size: var(--db-drawer-max-width, calc(100% - var(--db-spacing-fixed-xl)));
291
293
  min-inline-size: var(--db-drawer-min-width, calc(100% - var(--db-spacing-fixed-xl)));
@@ -306,10 +308,12 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
306
308
  box-shadow: var(--db-elevation-md);
307
309
  }
308
310
  .db-drawer .db-drawer-container .db-drawer-header {
309
- display: none;
310
311
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
311
312
  position: var(--db-tooltip-parent-position, relative);
312
313
  }
314
+ .db-drawer .db-drawer-container .db-drawer-header:not([hidden]) {
315
+ display: none;
316
+ }
313
317
  .db-drawer .db-drawer-container .db-drawer-header[data-emphasis=strong] {
314
318
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
315
319
  }
@@ -338,7 +342,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
338
342
  .db-drawer .db-drawer-container .db-drawer-header .button-close-drawer button {
339
343
  margin-inline-start: auto;
340
344
  }
341
- .db-drawer .db-drawer-container .db-drawer-header:has(.button-close-drawer), .db-drawer .db-drawer-container .db-drawer-header:has(:not(.db-drawer-header-text:empty)) {
345
+ .db-drawer .db-drawer-container .db-drawer-header:has(.button-close-drawer):not([hidden]), .db-drawer .db-drawer-container .db-drawer-header:has(:not(.db-drawer-header-text:empty)):not([hidden]) {
342
346
  display: flex;
343
347
  }
344
348
  .db-drawer[data-position=absolute] {
@@ -349,7 +353,7 @@ dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data
349
353
  inline-size: 100%;
350
354
  background-color: transparent;
351
355
  }
352
- .db-drawer[data-position=absolute][open] {
356
+ .db-drawer[data-position=absolute][open]:not([hidden]) {
353
357
  display: flex;
354
358
  }
355
359
  .db-drawer[data-position=absolute]:not([data-direction]), .db-drawer[data-position=absolute][data-direction=right], .db-drawer[data-position=absolute][data-direction=left] {
package/build/components/drawer/drawer.scss CHANGED
@@ -125,8 +125,8 @@ $spacings: (
125
125
  .db-drawer-container {
126
126
  @extend %direction-right;
127
127
  @extend %spacing-drawer;
128
+ @include helpers.display(flex);
128
129
 
129
- display: flex;
130
130
  flex-direction: column;
131
131
  background-color: colors.$db-adaptive-bg-basic-level-1-default;
132
132
  block-size: 100%;
@@ -179,8 +179,7 @@ $spacings: (
179
179
  }
180
180
 
181
181
  .db-drawer-header {
182
- display: none;
183
-
182
+ @include helpers.display(none);
184
183
  @include helpers.divider("bottom");
185
184
 
186
185
  .db-drawer-header-text {
@@ -199,7 +198,7 @@ $spacings: (
199
198
 
200
199
  &:has(.button-close-drawer),
201
200
  &:has(:not(.db-drawer-header-text:empty)) {
202
- display: flex;
201
+ @include helpers.display(flex);
203
202
  }
204
203
  }
205
204
  }
@@ -213,7 +212,7 @@ $spacings: (
213
212
  background-color: transparent;
214
213
 
215
214
  &[open] {
216
- display: flex;
215
+ @include helpers.display(flex);
217
216
  }
218
217
 
219
218
  &:not([data-direction]),