@db-ux/core-components 3.1.16 → 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 +2 -2
package/build/components/tab-panel/tab-panel.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "@db-ux/core-foundations/build/styles/variables";
2
+ @use "@db-ux/core-foundations/build/styles/helpers/display";
2
3
 
3
4
  .db-tab-panel {
4
- display: none;
5
+ @include display.display(none);
5
6
  }
package/build/components/tabs/tabs.css CHANGED
@@ -137,70 +137,70 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
137
137
  }
138
138
  }
139
139
 
140
- .db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0],
141
- .db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0],
142
- .db-tabs dbtablist:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0],
143
- .db-tabs dbtablist:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0] {
140
+ .db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0]:not([hidden]),
141
+ .db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0]:not([hidden]),
142
+ .db-tabs dbtablist:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0]:not([hidden]),
143
+ .db-tabs dbtablist:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0]:not([hidden]) {
144
144
  display: block;
145
145
  }
146
- .db-tabs db-tab-list:has([id$=-tab-1]:checked) ~ dbtabpanel > [id$=-tab-panel-1],
147
- .db-tabs db-tab-list:has([id$=-tab-1]:checked) ~ db-tab-panel > [id$=-tab-panel-1],
148
- .db-tabs dbtablist:has([id$=-tab-1]:checked) ~ dbtabpanel > [id$=-tab-panel-1],
149
- .db-tabs dbtablist:has([id$=-tab-1]:checked) ~ db-tab-panel > [id$=-tab-panel-1] {
146
+ .db-tabs db-tab-list:has([id$=-tab-1]:checked) ~ dbtabpanel > [id$=-tab-panel-1]:not([hidden]),
147
+ .db-tabs db-tab-list:has([id$=-tab-1]:checked) ~ db-tab-panel > [id$=-tab-panel-1]:not([hidden]),
148
+ .db-tabs dbtablist:has([id$=-tab-1]:checked) ~ dbtabpanel > [id$=-tab-panel-1]:not([hidden]),
149
+ .db-tabs dbtablist:has([id$=-tab-1]:checked) ~ db-tab-panel > [id$=-tab-panel-1]:not([hidden]) {
150
150
  display: block;
151
151
  }
152
- .db-tabs db-tab-list:has([id$=-tab-2]:checked) ~ dbtabpanel > [id$=-tab-panel-2],
153
- .db-tabs db-tab-list:has([id$=-tab-2]:checked) ~ db-tab-panel > [id$=-tab-panel-2],
154
- .db-tabs dbtablist:has([id$=-tab-2]:checked) ~ dbtabpanel > [id$=-tab-panel-2],
155
- .db-tabs dbtablist:has([id$=-tab-2]:checked) ~ db-tab-panel > [id$=-tab-panel-2] {
152
+ .db-tabs db-tab-list:has([id$=-tab-2]:checked) ~ dbtabpanel > [id$=-tab-panel-2]:not([hidden]),
153
+ .db-tabs db-tab-list:has([id$=-tab-2]:checked) ~ db-tab-panel > [id$=-tab-panel-2]:not([hidden]),
154
+ .db-tabs dbtablist:has([id$=-tab-2]:checked) ~ dbtabpanel > [id$=-tab-panel-2]:not([hidden]),
155
+ .db-tabs dbtablist:has([id$=-tab-2]:checked) ~ db-tab-panel > [id$=-tab-panel-2]:not([hidden]) {
156
156
  display: block;
157
157
  }
158
- .db-tabs db-tab-list:has([id$=-tab-3]:checked) ~ dbtabpanel > [id$=-tab-panel-3],
159
- .db-tabs db-tab-list:has([id$=-tab-3]:checked) ~ db-tab-panel > [id$=-tab-panel-3],
160
- .db-tabs dbtablist:has([id$=-tab-3]:checked) ~ dbtabpanel > [id$=-tab-panel-3],
161
- .db-tabs dbtablist:has([id$=-tab-3]:checked) ~ db-tab-panel > [id$=-tab-panel-3] {
158
+ .db-tabs db-tab-list:has([id$=-tab-3]:checked) ~ dbtabpanel > [id$=-tab-panel-3]:not([hidden]),
159
+ .db-tabs db-tab-list:has([id$=-tab-3]:checked) ~ db-tab-panel > [id$=-tab-panel-3]:not([hidden]),
160
+ .db-tabs dbtablist:has([id$=-tab-3]:checked) ~ dbtabpanel > [id$=-tab-panel-3]:not([hidden]),
161
+ .db-tabs dbtablist:has([id$=-tab-3]:checked) ~ db-tab-panel > [id$=-tab-panel-3]:not([hidden]) {
162
162
  display: block;
163
163
  }
164
- .db-tabs db-tab-list:has([id$=-tab-4]:checked) ~ dbtabpanel > [id$=-tab-panel-4],
165
- .db-tabs db-tab-list:has([id$=-tab-4]:checked) ~ db-tab-panel > [id$=-tab-panel-4],
166
- .db-tabs dbtablist:has([id$=-tab-4]:checked) ~ dbtabpanel > [id$=-tab-panel-4],
167
- .db-tabs dbtablist:has([id$=-tab-4]:checked) ~ db-tab-panel > [id$=-tab-panel-4] {
164
+ .db-tabs db-tab-list:has([id$=-tab-4]:checked) ~ dbtabpanel > [id$=-tab-panel-4]:not([hidden]),
165
+ .db-tabs db-tab-list:has([id$=-tab-4]:checked) ~ db-tab-panel > [id$=-tab-panel-4]:not([hidden]),
166
+ .db-tabs dbtablist:has([id$=-tab-4]:checked) ~ dbtabpanel > [id$=-tab-panel-4]:not([hidden]),
167
+ .db-tabs dbtablist:has([id$=-tab-4]:checked) ~ db-tab-panel > [id$=-tab-panel-4]:not([hidden]) {
168
168
  display: block;
169
169
  }
170
- .db-tabs db-tab-list:has([id$=-tab-5]:checked) ~ dbtabpanel > [id$=-tab-panel-5],
171
- .db-tabs db-tab-list:has([id$=-tab-5]:checked) ~ db-tab-panel > [id$=-tab-panel-5],
172
- .db-tabs dbtablist:has([id$=-tab-5]:checked) ~ dbtabpanel > [id$=-tab-panel-5],
173
- .db-tabs dbtablist:has([id$=-tab-5]:checked) ~ db-tab-panel > [id$=-tab-panel-5] {
170
+ .db-tabs db-tab-list:has([id$=-tab-5]:checked) ~ dbtabpanel > [id$=-tab-panel-5]:not([hidden]),
171
+ .db-tabs db-tab-list:has([id$=-tab-5]:checked) ~ db-tab-panel > [id$=-tab-panel-5]:not([hidden]),
172
+ .db-tabs dbtablist:has([id$=-tab-5]:checked) ~ dbtabpanel > [id$=-tab-panel-5]:not([hidden]),
173
+ .db-tabs dbtablist:has([id$=-tab-5]:checked) ~ db-tab-panel > [id$=-tab-panel-5]:not([hidden]) {
174
174
  display: block;
175
175
  }
176
- .db-tabs db-tab-list:has([id$=-tab-6]:checked) ~ dbtabpanel > [id$=-tab-panel-6],
177
- .db-tabs db-tab-list:has([id$=-tab-6]:checked) ~ db-tab-panel > [id$=-tab-panel-6],
178
- .db-tabs dbtablist:has([id$=-tab-6]:checked) ~ dbtabpanel > [id$=-tab-panel-6],
179
- .db-tabs dbtablist:has([id$=-tab-6]:checked) ~ db-tab-panel > [id$=-tab-panel-6] {
176
+ .db-tabs db-tab-list:has([id$=-tab-6]:checked) ~ dbtabpanel > [id$=-tab-panel-6]:not([hidden]),
177
+ .db-tabs db-tab-list:has([id$=-tab-6]:checked) ~ db-tab-panel > [id$=-tab-panel-6]:not([hidden]),
178
+ .db-tabs dbtablist:has([id$=-tab-6]:checked) ~ dbtabpanel > [id$=-tab-panel-6]:not([hidden]),
179
+ .db-tabs dbtablist:has([id$=-tab-6]:checked) ~ db-tab-panel > [id$=-tab-panel-6]:not([hidden]) {
180
180
  display: block;
181
181
  }
182
- .db-tabs db-tab-list:has([id$=-tab-7]:checked) ~ dbtabpanel > [id$=-tab-panel-7],
183
- .db-tabs db-tab-list:has([id$=-tab-7]:checked) ~ db-tab-panel > [id$=-tab-panel-7],
184
- .db-tabs dbtablist:has([id$=-tab-7]:checked) ~ dbtabpanel > [id$=-tab-panel-7],
185
- .db-tabs dbtablist:has([id$=-tab-7]:checked) ~ db-tab-panel > [id$=-tab-panel-7] {
182
+ .db-tabs db-tab-list:has([id$=-tab-7]:checked) ~ dbtabpanel > [id$=-tab-panel-7]:not([hidden]),
183
+ .db-tabs db-tab-list:has([id$=-tab-7]:checked) ~ db-tab-panel > [id$=-tab-panel-7]:not([hidden]),
184
+ .db-tabs dbtablist:has([id$=-tab-7]:checked) ~ dbtabpanel > [id$=-tab-panel-7]:not([hidden]),
185
+ .db-tabs dbtablist:has([id$=-tab-7]:checked) ~ db-tab-panel > [id$=-tab-panel-7]:not([hidden]) {
186
186
  display: block;
187
187
  }
188
- .db-tabs db-tab-list:has([id$=-tab-8]:checked) ~ dbtabpanel > [id$=-tab-panel-8],
189
- .db-tabs db-tab-list:has([id$=-tab-8]:checked) ~ db-tab-panel > [id$=-tab-panel-8],
190
- .db-tabs dbtablist:has([id$=-tab-8]:checked) ~ dbtabpanel > [id$=-tab-panel-8],
191
- .db-tabs dbtablist:has([id$=-tab-8]:checked) ~ db-tab-panel > [id$=-tab-panel-8] {
188
+ .db-tabs db-tab-list:has([id$=-tab-8]:checked) ~ dbtabpanel > [id$=-tab-panel-8]:not([hidden]),
189
+ .db-tabs db-tab-list:has([id$=-tab-8]:checked) ~ db-tab-panel > [id$=-tab-panel-8]:not([hidden]),
190
+ .db-tabs dbtablist:has([id$=-tab-8]:checked) ~ dbtabpanel > [id$=-tab-panel-8]:not([hidden]),
191
+ .db-tabs dbtablist:has([id$=-tab-8]:checked) ~ db-tab-panel > [id$=-tab-panel-8]:not([hidden]) {
192
192
  display: block;
193
193
  }
194
- .db-tabs db-tab-list:has([id$=-tab-9]:checked) ~ dbtabpanel > [id$=-tab-panel-9],
195
- .db-tabs db-tab-list:has([id$=-tab-9]:checked) ~ db-tab-panel > [id$=-tab-panel-9],
196
- .db-tabs dbtablist:has([id$=-tab-9]:checked) ~ dbtabpanel > [id$=-tab-panel-9],
197
- .db-tabs dbtablist:has([id$=-tab-9]:checked) ~ db-tab-panel > [id$=-tab-panel-9] {
194
+ .db-tabs db-tab-list:has([id$=-tab-9]:checked) ~ dbtabpanel > [id$=-tab-panel-9]:not([hidden]),
195
+ .db-tabs db-tab-list:has([id$=-tab-9]:checked) ~ db-tab-panel > [id$=-tab-panel-9]:not([hidden]),
196
+ .db-tabs dbtablist:has([id$=-tab-9]:checked) ~ dbtabpanel > [id$=-tab-panel-9]:not([hidden]),
197
+ .db-tabs dbtablist:has([id$=-tab-9]:checked) ~ db-tab-panel > [id$=-tab-panel-9]:not([hidden]) {
198
198
  display: block;
199
199
  }
200
- .db-tabs db-tab-list:has([id$=-tab-10]:checked) ~ dbtabpanel > [id$=-tab-panel-10],
201
- .db-tabs db-tab-list:has([id$=-tab-10]:checked) ~ db-tab-panel > [id$=-tab-panel-10],
202
- .db-tabs dbtablist:has([id$=-tab-10]:checked) ~ dbtabpanel > [id$=-tab-panel-10],
203
- .db-tabs dbtablist:has([id$=-tab-10]:checked) ~ db-tab-panel > [id$=-tab-panel-10] {
200
+ .db-tabs db-tab-list:has([id$=-tab-10]:checked) ~ dbtabpanel > [id$=-tab-panel-10]:not([hidden]),
201
+ .db-tabs db-tab-list:has([id$=-tab-10]:checked) ~ db-tab-panel > [id$=-tab-panel-10]:not([hidden]),
202
+ .db-tabs dbtablist:has([id$=-tab-10]:checked) ~ dbtabpanel > [id$=-tab-panel-10]:not([hidden]),
203
+ .db-tabs dbtablist:has([id$=-tab-10]:checked) ~ db-tab-panel > [id$=-tab-panel-10]:not([hidden]) {
204
204
  display: block;
205
205
  }
206
206
 
@@ -255,7 +255,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
255
255
  }
256
256
 
257
257
  .db-tabs {
258
- display: flex;
259
258
  inline-size: 100%;
260
259
  position: relative;
261
260
  /*
@@ -265,6 +264,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
265
264
  Variant Orientation VERTICAL
266
265
  */
267
266
  }
267
+ .db-tabs:not([hidden]) {
268
+ display: flex;
269
+ }
268
270
  .db-tabs .db-tab-panel {
269
271
  padding: 0 var(--db-spacing-fixed-xs);
270
272
  }
@@ -272,37 +274,37 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
272
274
  max-inline-size: 100%;
273
275
  z-index: 20;
274
276
  }
275
- .db-tabs .db-tab-list:has([id$=-tab-0]:checked) ~ [id$=-tab-panel-0] {
277
+ .db-tabs .db-tab-list:has([id$=-tab-0]:checked) ~ [id$=-tab-panel-0]:not([hidden]) {
276
278
  display: block;
277
279
  }
278
- .db-tabs .db-tab-list:has([id$=-tab-1]:checked) ~ [id$=-tab-panel-1] {
280
+ .db-tabs .db-tab-list:has([id$=-tab-1]:checked) ~ [id$=-tab-panel-1]:not([hidden]) {
279
281
  display: block;
280
282
  }
281
- .db-tabs .db-tab-list:has([id$=-tab-2]:checked) ~ [id$=-tab-panel-2] {
283
+ .db-tabs .db-tab-list:has([id$=-tab-2]:checked) ~ [id$=-tab-panel-2]:not([hidden]) {
282
284
  display: block;
283
285
  }
284
- .db-tabs .db-tab-list:has([id$=-tab-3]:checked) ~ [id$=-tab-panel-3] {
286
+ .db-tabs .db-tab-list:has([id$=-tab-3]:checked) ~ [id$=-tab-panel-3]:not([hidden]) {
285
287
  display: block;
286
288
  }
287
- .db-tabs .db-tab-list:has([id$=-tab-4]:checked) ~ [id$=-tab-panel-4] {
289
+ .db-tabs .db-tab-list:has([id$=-tab-4]:checked) ~ [id$=-tab-panel-4]:not([hidden]) {
288
290
  display: block;
289
291
  }
290
- .db-tabs .db-tab-list:has([id$=-tab-5]:checked) ~ [id$=-tab-panel-5] {
292
+ .db-tabs .db-tab-list:has([id$=-tab-5]:checked) ~ [id$=-tab-panel-5]:not([hidden]) {
291
293
  display: block;
292
294
  }
293
- .db-tabs .db-tab-list:has([id$=-tab-6]:checked) ~ [id$=-tab-panel-6] {
295
+ .db-tabs .db-tab-list:has([id$=-tab-6]:checked) ~ [id$=-tab-panel-6]:not([hidden]) {
294
296
  display: block;
295
297
  }
296
- .db-tabs .db-tab-list:has([id$=-tab-7]:checked) ~ [id$=-tab-panel-7] {
298
+ .db-tabs .db-tab-list:has([id$=-tab-7]:checked) ~ [id$=-tab-panel-7]:not([hidden]) {
297
299
  display: block;
298
300
  }
299
- .db-tabs .db-tab-list:has([id$=-tab-8]:checked) ~ [id$=-tab-panel-8] {
301
+ .db-tabs .db-tab-list:has([id$=-tab-8]:checked) ~ [id$=-tab-panel-8]:not([hidden]) {
300
302
  display: block;
301
303
  }
302
- .db-tabs .db-tab-list:has([id$=-tab-9]:checked) ~ [id$=-tab-panel-9] {
304
+ .db-tabs .db-tab-list:has([id$=-tab-9]:checked) ~ [id$=-tab-panel-9]:not([hidden]) {
303
305
  display: block;
304
306
  }
305
- .db-tabs .db-tab-list:has([id$=-tab-10]:checked) ~ [id$=-tab-panel-10] {
307
+ .db-tabs .db-tab-list:has([id$=-tab-10]:checked) ~ [id$=-tab-panel-10]:not([hidden]) {
306
308
  display: block;
307
309
  }
308
310
  .db-tabs:not([data-orientation=vertical]) {
package/build/components/tabs/tabs.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @use "@db-ux/core-foundations/build/styles/colors";
3
3
  @use "../../styles/internal/form-components";
4
4
  @use "../../styles/internal/db-puls";
5
+ @use "@db-ux/core-foundations/build/styles/helpers/display";
5
6
 
6
7
  $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
7
8
 
@@ -12,7 +13,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
12
13
  &:has([id$="-tab-#{$index}"]:checked) {
13
14
  ~ dbtabpanel > [id$="-tab-panel-#{$index}"],
14
15
  ~ db-tab-panel > [id$="-tab-panel-#{$index}"] {
15
- display: block;
16
+ @include display.display(block);
16
17
  }
17
18
  }
18
19
  }
@@ -74,8 +75,8 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
74
75
  $db-tabs-z-index-button: 22;
75
76
 
76
77
  @extend %angular-workaround;
78
+ @include display.display(flex);
77
79
 
78
- display: flex;
79
80
  inline-size: 100%;
80
81
  position: relative;
81
82
 
@@ -90,7 +91,7 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
90
91
  @each $index in $max-tabs {
91
92
  &:has([id$="-tab-#{$index}"]:checked)
92
93
  ~ [id$="-tab-panel-#{$index}"] {
93
- display: block;
94
+ @include display.display(block);
94
95
  }
95
96
  }
96
97
  }
package/build/components/tag/tag.css CHANGED
@@ -1008,10 +1008,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1008
1008
  white-space: nowrap;
1009
1009
  justify-content: center;
1010
1010
  text-align: center;
1011
- display: inline-flex;
1012
1011
  align-items: center;
1013
1012
  vertical-align: top;
1014
1013
  }
1014
+ .db-tag:not([hidden]) {
1015
+ display: inline-flex;
1016
+ }
1015
1017
 
1016
1018
  /**
1017
1019
  * @mixin screen-min-max
@@ -1433,8 +1435,8 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1433
1435
  .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=radio]:checked)::before, .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-emphasis=strong] label:has(input[type=radio]:checked)::after {
1434
1436
  --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
1435
1437
  }
1436
- .db-tag button:nth-of-type(2),
1437
- .db-tag dbbutton:nth-of-type(2), .db-tag:has(db-button):has(dbbutton) .db-tab-remove-button {
1438
+ .db-tag button:nth-of-type(2):not([hidden]),
1439
+ .db-tag dbbutton:nth-of-type(2):not([hidden]), .db-tag:has(db-button):has(dbbutton) .db-tab-remove-button:not([hidden]) {
1438
1440
  display: none;
1439
1441
  }
1440
1442
  .db-tag > :is([class=db-checkbox],
@@ -1471,9 +1473,11 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1471
1473
  .db-tag label {
1472
1474
  inline-size: 100%;
1473
1475
  margin-inline-start: 0;
1474
- display: flex;
1475
1476
  align-items: center;
1476
1477
  }
1478
+ .db-tag label:not([hidden]) {
1479
+ display: flex;
1480
+ }
1477
1481
  @media (forced-colors: active) {
1478
1482
  .db-tag label:not(:has(input:checked)) {
1479
1483
  border-style: dashed;
@@ -1511,10 +1515,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
1511
1515
  content: none;
1512
1516
  }
1513
1517
  .db-tag a {
1514
- display: inline-flex;
1515
1518
  align-items: center;
1516
1519
  text-decoration: none;
1517
1520
  }
1521
+ .db-tag a:not([hidden]) {
1522
+ display: inline-flex;
1523
+ }
1518
1524
  .db-tag a::after {
1519
1525
  --db-icon-margin-start: 0;
1520
1526
  --db-icon-font-size: 0;
package/build/components/tag/tag.scss CHANGED
@@ -77,7 +77,7 @@
77
77
  button:nth-of-type(2),
78
78
  dbbutton:nth-of-type(2),
79
79
  &:has(db-button):has(dbbutton) .db-tab-remove-button {
80
- display: none;
80
+ @include helpers.display(none);
81
81
  }
82
82
 
83
83
  > :is(
@@ -111,7 +111,9 @@
111
111
 
112
112
  inline-size: 100%;
113
113
  margin-inline-start: 0;
114
- display: flex;
114
+
115
+ @include helpers.display(flex);
116
+
115
117
  align-items: center;
116
118
 
117
119
  @media (forced-colors: active) {
@@ -157,8 +159,8 @@
157
159
 
158
160
  a {
159
161
  @extend %default-transition;
162
+ @include helpers.display(inline-flex);
160
163
 
161
- display: inline-flex;
162
164
  align-items: center;
163
165
  text-decoration: none;
164
166
 
package/build/components/textarea/textarea.css CHANGED
@@ -190,8 +190,8 @@ input[type=radio]:checked) > label {
190
190
  .db-textarea > .db-infotext {
191
191
  margin-block-start: var(--db-spacing-fixed-2xs);
192
192
  }
193
- .db-textarea > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]),
194
- .db-textarea > .db-infotext:is([data-semantic=successful], [data-semantic=critical]) {
193
+ .db-textarea > db-infotext > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]),
194
+ .db-textarea > .db-infotext:is([data-semantic=successful], [data-semantic=critical]):not([hidden]) {
195
195
  display: none;
196
196
  }
197
197
 
@@ -377,9 +377,11 @@ input[type=radio]:checked) > label {
377
377
  .db-textarea {
378
378
  --db-form-has-before: 0;
379
379
  position: relative;
380
- display: flex;
381
380
  flex-direction: column;
382
381
  }
382
+ .db-textarea:not([hidden]) {
383
+ display: flex;
384
+ }
383
385
  .db-textarea[data-variant=floating], .db-textarea[data-hide-label=true] {
384
386
  --db-label-visible-above: 0;
385
387
  }
@@ -497,15 +499,15 @@ input[type=radio]:checked) [id$=-placeholder] {
497
499
  /* stylelint-disable-next-line at-rule-empty-line-before */
498
500
  }
499
501
  .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
500
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
502
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
501
503
  .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
502
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
504
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
503
505
  display: flex;
504
506
  }
505
507
  .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
506
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
508
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
507
509
  .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-valid):has(> .db-infotext[data-semantic=successful],
508
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
510
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
509
511
  display: none;
510
512
  }
511
513
  .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
@@ -557,21 +559,21 @@ input[type=radio]:checked) [id$=-placeholder] {
557
559
  /* stylelint-disable-next-line at-rule-empty-line-before */
558
560
  }
559
561
  .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
560
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
562
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
561
563
  .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
562
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful], .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
563
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful],
564
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]), .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
565
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext[data-semantic=successful]:not([hidden]),
564
566
  .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
565
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful] {
567
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext[data-semantic=successful]:not([hidden]) {
566
568
  display: flex;
567
569
  }
568
570
  .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
569
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
571
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
570
572
  .db-textarea:has(textarea[data-custom-validity=valid]):has(> .db-infotext[data-semantic=successful],
571
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]), .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
572
- > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]),
573
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]), .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
574
+ > db-infotext > .db-infotext[data-semantic=successful]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
573
575
  .db-textarea[data-custom-validity=valid]:has(> .db-infotext[data-semantic=successful],
574
- > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]) {
576
+ > db-infotext > .db-infotext[data-semantic=successful]) > .db-infotext:not([data-semantic]):not([hidden]) {
575
577
  display: none;
576
578
  }
577
579
  .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) {
@@ -606,12 +608,12 @@ input[type=radio]:checked) [id$=-placeholder] {
606
608
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
607
609
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
608
610
  }
609
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > db-infotext > .db-infotext[data-semantic=critical],
610
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > .db-infotext[data-semantic=critical] {
611
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
612
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > .db-infotext[data-semantic=critical]:not([hidden]) {
611
613
  display: flex;
612
614
  }
613
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > db-infotext > .db-infotext:not([data-semantic]),
614
- .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > .db-infotext:not([data-semantic]) {
615
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
616
+ .db-textarea:has(textarea:not([data-custom-validity]):is(:required, [minlength], [maxlength]):user-invalid) > .db-infotext:not([data-semantic]):not([hidden]) {
615
617
  display: none;
616
618
  }
617
619
  .db-textarea:has(textarea[data-custom-validity=invalid]), .db-textarea[data-custom-validity=invalid] {
@@ -647,14 +649,14 @@ input[type=radio]:checked) [id$=-placeholder] {
647
649
  color: var(--db-critical-on-bg-basic-emphasis-100-default);
648
650
  caret-color: var(--db-critical-on-bg-basic-emphasis-100-default);
649
651
  }
650
- .db-textarea:has(textarea[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical],
651
- .db-textarea:has(textarea[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical], .db-textarea[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical],
652
- .db-textarea[data-custom-validity=invalid] > .db-infotext[data-semantic=critical] {
652
+ .db-textarea:has(textarea[data-custom-validity=invalid]) > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
653
+ .db-textarea:has(textarea[data-custom-validity=invalid]) > .db-infotext[data-semantic=critical]:not([hidden]), .db-textarea[data-custom-validity=invalid] > db-infotext > .db-infotext[data-semantic=critical]:not([hidden]),
654
+ .db-textarea[data-custom-validity=invalid] > .db-infotext[data-semantic=critical]:not([hidden]) {
653
655
  display: flex;
654
656
  }
655
- .db-textarea:has(textarea[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]),
656
- .db-textarea:has(textarea[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]), .db-textarea[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]),
657
- .db-textarea[data-custom-validity=invalid] > .db-infotext:not([data-semantic]) {
657
+ .db-textarea:has(textarea[data-custom-validity=invalid]) > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
658
+ .db-textarea:has(textarea[data-custom-validity=invalid]) > .db-infotext:not([data-semantic]):not([hidden]), .db-textarea[data-custom-validity=invalid] > db-infotext > .db-infotext:not([data-semantic]):not([hidden]),
659
+ .db-textarea[data-custom-validity=invalid] > .db-infotext:not([data-semantic]):not([hidden]) {
658
660
  display: none;
659
661
  }
660
662
  .db-textarea textarea::placeholder,