@db-ux/core-components 4.4.2 → 4.5.0

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 (63) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/build/components/accordion/accordion.css +0 -14
  3. package/build/components/accordion-item/accordion-item.css +38 -29
  4. package/build/components/accordion-item/accordion-item.scss +1 -1
  5. package/build/components/badge/badge.css +75 -33
  6. package/build/components/badge/badge.scss +6 -1
  7. package/build/components/brand/brand.css +2 -18
  8. package/build/components/brand/brand.scss +2 -0
  9. package/build/components/button/button.css +245 -82
  10. package/build/components/button/button.scss +1 -105
  11. package/build/components/card/card.css +88 -30
  12. package/build/components/checkbox/checkbox.css +1 -22
  13. package/build/components/custom-button/custom-button.css +892 -0
  14. package/build/components/custom-button/custom-button.scss +78 -0
  15. package/build/components/custom-select/custom-select.css +19 -25
  16. package/build/components/custom-select-dropdown/custom-select-dropdown.css +1 -22
  17. package/build/components/custom-select-dropdown/custom-select-dropdown.scss +1 -0
  18. package/build/components/custom-select-form-field/custom-select-form-field.css +0 -22
  19. package/build/components/custom-select-list/custom-select-list.css +0 -22
  20. package/build/components/custom-select-list-item/custom-select-list-item.css +36 -28
  21. package/build/components/divider/divider.css +0 -10
  22. package/build/components/drawer/drawer.css +4 -14
  23. package/build/components/drawer/drawer.scss +4 -0
  24. package/build/components/header/header.css +0 -22
  25. package/build/components/icon/icon.css +0 -10
  26. package/build/components/infotext/infotext.css +4 -18
  27. package/build/components/infotext/infotext.scss +4 -0
  28. package/build/components/input/input.css +19 -25
  29. package/build/components/link/link.css +73 -34
  30. package/build/components/navigation/navigation.css +0 -22
  31. package/build/components/navigation-item/navigation-item.css +111 -43
  32. package/build/components/navigation-item/navigation-item.scss +2 -1
  33. package/build/components/notification/notification.css +37 -28
  34. package/build/components/page/page.css +0 -10
  35. package/build/components/popover/popover.css +26 -14
  36. package/build/components/radio/radio.css +0 -22
  37. package/build/components/section/section.css +0 -14
  38. package/build/components/select/select.css +19 -25
  39. package/build/components/stack/stack-web-component.css +0 -10
  40. package/build/components/stack/stack.css +0 -10
  41. package/build/components/switch/switch.css +1 -22
  42. package/build/components/tab-item/tab-item.css +52 -32
  43. package/build/components/tab-list/tab-list.css +0 -22
  44. package/build/components/tab-panel/tab-panel.css +0 -10
  45. package/build/components/tabs/tabs.css +2 -22
  46. package/build/components/tabs/tabs.scss +2 -0
  47. package/build/components/tag/tag.css +859 -150
  48. package/build/components/textarea/textarea.css +18 -25
  49. package/build/components/tooltip/tooltip.css +30 -23
  50. package/build/components/tooltip/tooltip.scss +12 -10
  51. package/build/styles/absolute.css +10 -10
  52. package/build/styles/index.css +9 -9
  53. package/build/styles/index.scss +1 -0
  54. package/build/styles/internal/_button-components.scss +140 -2
  55. package/build/styles/internal/_custom-elements.scss +1 -1
  56. package/build/styles/internal/_icon-passing.scss +23 -3
  57. package/build/styles/internal/_popover-component.scss +19 -9
  58. package/build/styles/internal/_tag-components.scss +1 -0
  59. package/build/styles/relative.css +10 -10
  60. package/build/styles/rollup.css +10 -10
  61. package/build/styles/wc-workarounds.css +1 -1
  62. package/build/styles/webpack.css +10 -10
  63. package/package.json +10 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @db-ux/core-components
2
2
 
3
+ ## 4.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - feat: add `wrap` property for possible inline components (badge, button, infotext, tooltip) besides link and navigation-item, which already have the `wrap` property - [see commit c08970c](https://github.com/db-ux-design-system/core-web/commit/c08970c640f24abee93ed17de258f4e15fa7cb7f)
8
+
9
+ - feat: add DBCustomButton for development to style `<a>` or `<label><input/>` children - [see commit a50323b](https://github.com/db-ux-design-system/core-web/commit/a50323b21363981c02bbabf7828a6f2d94f11e4d)
10
+
11
+ ## 4.4.3
12
+
13
+ ### Patch Changes
14
+
15
+ - fix: icon color for DBTag with semantic property set - [see commit 89c4ad7](https://github.com/db-ux-design-system/core-web/commit/89c4ad7274cdadaccc0aedc106d6f2c781e6ce8a)
16
+
17
+ - fix: issue with DBCustomSelect not working properly with customValidity="no-validation" - [see commit 758ecb9](https://github.com/db-ux-design-system/core-web/commit/758ecb90f82a6c3d648728fa92c92474600b9941)
18
+
19
+ - fix: issue with floating-components (tooltip, popover, etc.) inside other absolute or fixed elements - [see commit e6d934f](https://github.com/db-ux-design-system/core-web/commit/e6d934f0c0a4af0b6dd57f81773831a2431b94e1)
20
+
3
21
  ## 4.4.2
4
22
 
5
23
  ### Patch Changes
package/build/components/accordion/accordion.css CHANGED
@@ -1,13 +1,3 @@
1
- /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
2
- /* Use fixed spacings for all kind of distances (margin, padding, ...) */
3
- /* The primary use-case for responsive spacings are
4
- paddings/gaps in an application e.g. the <main> should have a responsive padding. */
5
- /* Elevation */
6
- /* Border */
7
- /* Opacity */
8
- /* Transitions */
9
- /* Screen sizes */
10
- /* Container sizes */
11
1
  /* Variants for adaptive components like input, select, notification, ... */
12
2
  @layer variables {}
13
3
 
@@ -43,10 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
43
33
 
44
34
  @layer variables {}
45
35
 
46
- /**
47
- * @mixin screen-min-max
48
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
49
- */
50
36
  .db-accordion[data-variant=card] .db-accordion-item::after {
51
37
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
52
38
  }
package/build/components/accordion-item/accordion-item.css CHANGED
@@ -1,13 +1,3 @@
1
- /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
2
- /* Use fixed spacings for all kind of distances (margin, padding, ...) */
3
- /* The primary use-case for responsive spacings are
4
- paddings/gaps in an application e.g. the <main> should have a responsive padding. */
5
- /* Elevation */
6
- /* Border */
7
- /* Opacity */
8
- /* Transitions */
9
- /* Screen sizes */
10
- /* Container sizes */
11
1
  .db-visually-hidden,
12
2
  [data-visually-hidden=true] {
13
3
  clip: rect(0, 0, 0, 0) !important;
@@ -96,6 +86,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
96
86
  text-transform: none;
97
87
  overflow: clip;
98
88
  vertical-align: var(--db-icon-vertical-align, middle);
89
+ /* stylelint-disable-next-line db-ux/use-sizing */
99
90
  block-size: var(--db-icon-font-size, 1.5rem);
100
91
  aspect-ratio: 1;
101
92
  flex-shrink: 0;
@@ -117,12 +108,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
117
108
  }
118
109
  }
119
110
 
120
- /**
121
- Generates 3 types of placeholders, e.g:
122
- - %db-component-variables-md
123
- - %db-font-size-md
124
- - %db-overwrite-font-size-md
125
- */
126
111
  @layer variables {}
127
112
 
128
113
  @layer variables {}
@@ -187,12 +172,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
187
172
 
188
173
  @layer variables {}
189
174
 
190
- /* Use for body tags like <p> */
191
- /* Use for headline tags like <h1> */
192
- /**
193
- * @mixin screen-min-max
194
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
195
- */
196
175
  .db-accordion-item > details > summary:not([data-show-icon-trailing=false])::after {
197
176
  --db-icon-trailing: "chevron_down";
198
177
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
@@ -220,7 +199,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
220
199
  }
221
200
  .db-accordion-item > details[open] > summary + div {
222
201
  block-size: auto;
223
- /* stylelint-disable-next-line declaration-property-value-no-unknown */
202
+ /* stylelint-disable-next-line declaration-property-value-no-unknown, db-ux/use-sizing */
224
203
  block-size: calc-size(auto, size);
225
204
  }
226
205
  .db-accordion-item > details[open] > summary::after {
@@ -253,24 +232,54 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
253
232
  .db-accordion-item > details > summary:not([hidden]) {
254
233
  display: flex;
255
234
  }
256
- .db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]) {
235
+ .db-accordion-item > details > summary:hover:not(:disabled,
236
+ [aria-disabled=true],
237
+ [tabindex="-1"],
238
+ :has(:disabled)) {
257
239
  cursor: var(--db-overwrite-cursor, pointer);
258
240
  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
259
241
  }
260
- .db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(input) {
242
+ .db-accordion-item > details > summary:hover:not(:disabled,
243
+ [aria-disabled=true],
244
+ [tabindex="-1"],
245
+ :has(:disabled)):is(textarea), .db-accordion-item > details > summary:hover:not(:disabled,
246
+ [aria-disabled=true],
247
+ [tabindex="-1"],
248
+ :has(:disabled)):is(input) {
261
249
  cursor: initial;
262
250
  }
263
- .db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item > details > summary:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
251
+ .db-accordion-item > details > summary:hover:not(:disabled,
252
+ [aria-disabled=true],
253
+ [tabindex="-1"],
254
+ :has(:disabled)):is(input[type=checkbox]), .db-accordion-item > details > summary:hover:not(:disabled,
255
+ [aria-disabled=true],
256
+ [tabindex="-1"],
257
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
264
258
  cursor: pointer;
265
259
  }
266
- .db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]) {
260
+ .db-accordion-item > details > summary:active:not(:disabled,
261
+ [aria-disabled=true],
262
+ [tabindex="-1"],
263
+ :has(:disabled)) {
267
264
  cursor: var(--db-overwrite-cursor, pointer);
268
265
  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
269
266
  }
270
- .db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(input) {
267
+ .db-accordion-item > details > summary:active:not(:disabled,
268
+ [aria-disabled=true],
269
+ [tabindex="-1"],
270
+ :has(:disabled)):is(textarea), .db-accordion-item > details > summary:active:not(:disabled,
271
+ [aria-disabled=true],
272
+ [tabindex="-1"],
273
+ :has(:disabled)):is(input) {
271
274
  cursor: initial;
272
275
  }
273
- .db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-accordion-item > details > summary:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
276
+ .db-accordion-item > details > summary:active:not(:disabled,
277
+ [aria-disabled=true],
278
+ [tabindex="-1"],
279
+ :has(:disabled)):is(input[type=checkbox]), .db-accordion-item > details > summary:active:not(:disabled,
280
+ [aria-disabled=true],
281
+ [tabindex="-1"],
282
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
274
283
  cursor: pointer;
275
284
  }
276
285
  .db-accordion-item > details > summary::-webkit-details-marker {
package/build/components/accordion-item/accordion-item.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  &[open] {
16
16
  > summary + div {
17
17
  block-size: auto;
18
- /* stylelint-disable-next-line declaration-property-value-no-unknown */
18
+ /* stylelint-disable-next-line declaration-property-value-no-unknown, db-ux/use-sizing */
19
19
  block-size: calc-size(auto, size);
20
20
  }
21
21
 
package/build/components/badge/badge.css CHANGED
@@ -1,13 +1,3 @@
1
- /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
2
- /* Use fixed spacings for all kind of distances (margin, padding, ...) */
3
- /* The primary use-case for responsive spacings are
4
- paddings/gaps in an application e.g. the <main> should have a responsive padding. */
5
- /* Elevation */
6
- /* Border */
7
- /* Opacity */
8
- /* Transitions */
9
- /* Screen sizes */
10
- /* Container sizes */
11
1
  /* Variants for adaptive components like input, select, notification, ... */
12
2
  @layer variables {}
13
3
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
43
33
 
44
34
  @layer variables {}
45
35
 
46
- /**
47
- Generates 3 types of placeholders, e.g:
48
- - %db-component-variables-md
49
- - %db-font-size-md
50
- - %db-overwrite-font-size-md
51
- */
52
36
  @layer variables {}
53
37
 
54
38
  @layer variables {}
@@ -127,8 +111,10 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
127
111
 
128
112
  @layer variables {}
129
113
 
130
- /* Use for body tags like <p> */
131
- /* Use for headline tags like <h1> */
114
+ .db-badge {
115
+ border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
116
+ }
117
+
132
118
  .db-badge {
133
119
  font-weight: 700;
134
120
  overflow-wrap: break-word;
@@ -142,14 +128,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
142
128
  display: inline-flex;
143
129
  }
144
130
 
145
- /**
146
- * @mixin screen-min-max
147
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
148
- */
149
- .db-badge {
150
- border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
151
- }
152
-
153
131
  .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button {
154
132
  --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
155
133
  border-color: var(--db-tag-border-color);
@@ -160,24 +138,84 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
160
138
  .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::before, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::before, .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::after, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::after {
161
139
  --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
162
140
  }
163
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]) {
141
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
142
+ [aria-disabled=true],
143
+ [tabindex="-1"],
144
+ :has(:disabled)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
145
+ [aria-disabled=true],
146
+ [tabindex="-1"],
147
+ :has(:disabled)) {
164
148
  cursor: var(--db-overwrite-cursor, pointer);
165
149
  background-color: var(--db-adaptive-bg-vibrant-hovered);
166
150
  }
167
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input) {
151
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
152
+ [aria-disabled=true],
153
+ [tabindex="-1"],
154
+ :has(:disabled)):is(textarea), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
155
+ [aria-disabled=true],
156
+ [tabindex="-1"],
157
+ :has(:disabled)):is(textarea), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
158
+ [aria-disabled=true],
159
+ [tabindex="-1"],
160
+ :has(:disabled)):is(input), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
161
+ [aria-disabled=true],
162
+ [tabindex="-1"],
163
+ :has(:disabled)):is(input) {
168
164
  cursor: initial;
169
165
  }
170
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
166
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
167
+ [aria-disabled=true],
168
+ [tabindex="-1"],
169
+ :has(:disabled)):is(input[type=checkbox]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
170
+ [aria-disabled=true],
171
+ [tabindex="-1"],
172
+ :has(:disabled)):is(input[type=checkbox]), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
173
+ [aria-disabled=true],
174
+ [tabindex="-1"],
175
+ :has(:disabled)):is(input[type=radio]:not(:checked)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
176
+ [aria-disabled=true],
177
+ [tabindex="-1"],
178
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
171
179
  cursor: pointer;
172
180
  }
173
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]) {
181
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
182
+ [aria-disabled=true],
183
+ [tabindex="-1"],
184
+ :has(:disabled)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
185
+ [aria-disabled=true],
186
+ [tabindex="-1"],
187
+ :has(:disabled)) {
174
188
  cursor: var(--db-overwrite-cursor, pointer);
175
189
  background-color: var(--db-adaptive-bg-vibrant-pressed);
176
190
  }
177
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input) {
191
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
192
+ [aria-disabled=true],
193
+ [tabindex="-1"],
194
+ :has(:disabled)):is(textarea), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
195
+ [aria-disabled=true],
196
+ [tabindex="-1"],
197
+ :has(:disabled)):is(textarea), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
198
+ [aria-disabled=true],
199
+ [tabindex="-1"],
200
+ :has(:disabled)):is(input), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
201
+ [aria-disabled=true],
202
+ [tabindex="-1"],
203
+ :has(:disabled)):is(input) {
178
204
  cursor: initial;
179
205
  }
180
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
206
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
207
+ [aria-disabled=true],
208
+ [tabindex="-1"],
209
+ :has(:disabled)):is(input[type=checkbox]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
210
+ [aria-disabled=true],
211
+ [tabindex="-1"],
212
+ :has(:disabled)):is(input[type=checkbox]), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
213
+ [aria-disabled=true],
214
+ [tabindex="-1"],
215
+ :has(:disabled)):is(input[type=radio]:not(:checked)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
216
+ [aria-disabled=true],
217
+ [tabindex="-1"],
218
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
181
219
  cursor: pointer;
182
220
  }
183
221
 
@@ -342,6 +380,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
342
380
  .db-badge:has(.db-icon) {
343
381
  padding: var(--db-spacing-fixed-3xs);
344
382
  }
383
+ .db-badge[data-wrap=false] {
384
+ white-space: nowrap;
385
+ }
345
386
  .db-badge[data-size=medium] {
346
387
  --badge-size: var(--db-spacing-fixed-sm);
347
388
  padding-inline: var(--db-spacing-fixed-xs);
@@ -352,8 +393,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
352
393
  }
353
394
  .db-badge:empty,
354
395
  .db-badge > span:empty {
396
+ /* stylelint-disable-next-line db-ux/use-sizing */
355
397
  block-size: var(--badge-size);
356
- inline-size: var(--badge-size);
398
+ aspect-ratio: 1;
357
399
  padding: 0;
358
400
  }
359
401
  .db-badge[data-placement^=corner][data-label]::before {
package/build/components/badge/badge.scss CHANGED
@@ -70,6 +70,10 @@
70
70
  @extend %db-overwrite-font-size-2xs;
71
71
  }
72
72
 
73
+ &[data-wrap="false"] {
74
+ white-space: nowrap;
75
+ }
76
+
73
77
  &[data-size="medium"] {
74
78
  --badge-size: #{variables.$db-spacing-fixed-sm};
75
79
 
@@ -90,8 +94,9 @@
90
94
 
91
95
  &:empty,
92
96
  > span:empty {
97
+ /* stylelint-disable-next-line db-ux/use-sizing */
93
98
  block-size: var(--badge-size);
94
- inline-size: var(--badge-size);
99
+ aspect-ratio: 1;
95
100
  padding: 0;
96
101
  }
97
102
 
package/build/components/brand/brand.css CHANGED
@@ -1,13 +1,3 @@
1
- /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
2
- /* Use fixed spacings for all kind of distances (margin, padding, ...) */
3
- /* The primary use-case for responsive spacings are
4
- paddings/gaps in an application e.g. the <main> should have a responsive padding. */
5
- /* Elevation */
6
- /* Border */
7
- /* Opacity */
8
- /* Transitions */
9
- /* Screen sizes */
10
- /* Container sizes */
11
1
  /* Variants for adaptive components like input, select, notification, ... */
12
2
  @layer variables {}
13
3
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
43
33
 
44
34
  @layer variables {}
45
35
 
46
- /**
47
- Generates 3 types of placeholders, e.g:
48
- - %db-component-variables-md
49
- - %db-font-size-md
50
- - %db-overwrite-font-size-md
51
- */
52
36
  @layer variables {}
53
37
 
54
38
  @layer variables {}
@@ -113,8 +97,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
113
97
 
114
98
  @layer variables {}
115
99
 
116
- /* Use for body tags like <p> */
117
- /* Use for headline tags like <h1> */
118
100
  .db-brand {
119
101
  gap: var(--db-spacing-fixed-sm);
120
102
  align-items: center;
@@ -129,7 +111,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
129
111
  --db-icon-color: var(--db-brand-origin-default);
130
112
  }
131
113
  .db-brand img {
114
+ /* stylelint-disable-next-line db-ux/use-sizing */
132
115
  inline-size: calc(var(--db-sizing-md) - var(--db-sizing-3xs));
116
+ /* stylelint-disable-next-line db-ux/use-sizing */
133
117
  max-block-size: calc(var(--db-sizing-md) - var(--db-sizing-3xs));
134
118
  }
135
119
  .db-brand a {
package/build/components/brand/brand.scss CHANGED
@@ -22,7 +22,9 @@
22
22
  #{variables.$db-sizing-md} - #{variables.$db-sizing-3xs}
23
23
  );
24
24
 
25
+ /* stylelint-disable-next-line db-ux/use-sizing */
25
26
  inline-size: $logo-size;
27
+ /* stylelint-disable-next-line db-ux/use-sizing */
26
28
  max-block-size: $logo-size;
27
29
  }
28
30