@db-ux/core-components 4.4.3 → 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 (47) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/build/components/accordion-item/accordion-item.css +38 -7
  3. package/build/components/accordion-item/accordion-item.scss +1 -1
  4. package/build/components/badge/badge.css +75 -11
  5. package/build/components/badge/badge.scss +6 -1
  6. package/build/components/brand/brand.css +2 -0
  7. package/build/components/brand/brand.scss +2 -0
  8. package/build/components/button/button.css +245 -60
  9. package/build/components/button/button.scss +1 -105
  10. package/build/components/card/card.css +88 -16
  11. package/build/components/checkbox/checkbox.css +1 -0
  12. package/build/components/custom-button/custom-button.css +892 -0
  13. package/build/components/custom-button/custom-button.scss +78 -0
  14. package/build/components/custom-select/custom-select.css +19 -3
  15. package/build/components/custom-select-dropdown/custom-select-dropdown.css +1 -0
  16. package/build/components/custom-select-dropdown/custom-select-dropdown.scss +1 -0
  17. package/build/components/custom-select-list-item/custom-select-list-item.css +36 -6
  18. package/build/components/drawer/drawer.css +4 -0
  19. package/build/components/drawer/drawer.scss +4 -0
  20. package/build/components/infotext/infotext.css +4 -0
  21. package/build/components/infotext/infotext.scss +4 -0
  22. package/build/components/input/input.css +19 -3
  23. package/build/components/link/link.css +73 -12
  24. package/build/components/navigation-item/navigation-item.css +111 -21
  25. package/build/components/navigation-item/navigation-item.scss +2 -1
  26. package/build/components/notification/notification.css +37 -6
  27. package/build/components/select/select.css +19 -3
  28. package/build/components/switch/switch.css +1 -0
  29. package/build/components/tab-item/tab-item.css +52 -10
  30. package/build/components/tabs/tabs.css +2 -0
  31. package/build/components/tabs/tabs.scss +2 -0
  32. package/build/components/tag/tag.css +856 -125
  33. package/build/components/textarea/textarea.css +18 -3
  34. package/build/components/tooltip/tooltip.css +4 -1
  35. package/build/components/tooltip/tooltip.scss +12 -10
  36. package/build/styles/absolute.css +9 -9
  37. package/build/styles/index.css +8 -8
  38. package/build/styles/index.scss +1 -0
  39. package/build/styles/internal/_button-components.scss +140 -2
  40. package/build/styles/internal/_custom-elements.scss +1 -1
  41. package/build/styles/internal/_icon-passing.scss +23 -3
  42. package/build/styles/internal/_popover-component.scss +4 -4
  43. package/build/styles/relative.css +9 -9
  44. package/build/styles/rollup.css +9 -9
  45. package/build/styles/wc-workarounds.css +1 -1
  46. package/build/styles/webpack.css +9 -9
  47. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
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
+
3
11
  ## 4.4.3
4
12
 
5
13
  ### Patch Changes
package/build/components/accordion-item/accordion-item.css CHANGED
@@ -86,6 +86,7 @@
86
86
  text-transform: none;
87
87
  overflow: clip;
88
88
  vertical-align: var(--db-icon-vertical-align, middle);
89
+ /* stylelint-disable-next-line db-ux/use-sizing */
89
90
  block-size: var(--db-icon-font-size, 1.5rem);
90
91
  aspect-ratio: 1;
91
92
  flex-shrink: 0;
@@ -198,7 +199,7 @@
198
199
  }
199
200
  .db-accordion-item > details[open] > summary + div {
200
201
  block-size: auto;
201
- /* stylelint-disable-next-line declaration-property-value-no-unknown */
202
+ /* stylelint-disable-next-line declaration-property-value-no-unknown, db-ux/use-sizing */
202
203
  block-size: calc-size(auto, size);
203
204
  }
204
205
  .db-accordion-item > details[open] > summary::after {
@@ -231,24 +232,54 @@
231
232
  .db-accordion-item > details > summary:not([hidden]) {
232
233
  display: flex;
233
234
  }
234
- .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)) {
235
239
  cursor: var(--db-overwrite-cursor, pointer);
236
240
  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
237
241
  }
238
- .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) {
239
249
  cursor: initial;
240
250
  }
241
- .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)) {
242
258
  cursor: pointer;
243
259
  }
244
- .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)) {
245
264
  cursor: var(--db-overwrite-cursor, pointer);
246
265
  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
247
266
  }
248
- .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) {
249
274
  cursor: initial;
250
275
  }
251
- .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)) {
252
283
  cursor: pointer;
253
284
  }
254
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
@@ -111,6 +111,10 @@
111
111
 
112
112
  @layer variables {}
113
113
 
114
+ .db-badge {
115
+ border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
116
+ }
117
+
114
118
  .db-badge {
115
119
  font-weight: 700;
116
120
  overflow-wrap: break-word;
@@ -124,10 +128,6 @@
124
128
  display: inline-flex;
125
129
  }
126
130
 
127
- .db-badge {
128
- border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
129
- }
130
-
131
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 {
132
132
  --db-tag-border-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
133
133
  border-color: var(--db-tag-border-color);
@@ -138,24 +138,84 @@
138
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 {
139
139
  --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
140
140
  }
141
- .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)) {
142
148
  cursor: var(--db-overwrite-cursor, pointer);
143
149
  background-color: var(--db-adaptive-bg-vibrant-hovered);
144
150
  }
145
- .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) {
146
164
  cursor: initial;
147
165
  }
148
- .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)) {
149
179
  cursor: pointer;
150
180
  }
151
- .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)) {
152
188
  cursor: var(--db-overwrite-cursor, pointer);
153
189
  background-color: var(--db-adaptive-bg-vibrant-pressed);
154
190
  }
155
- .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) {
156
204
  cursor: initial;
157
205
  }
158
- .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)) {
159
219
  cursor: pointer;
160
220
  }
161
221
 
@@ -320,6 +380,9 @@
320
380
  .db-badge:has(.db-icon) {
321
381
  padding: var(--db-spacing-fixed-3xs);
322
382
  }
383
+ .db-badge[data-wrap=false] {
384
+ white-space: nowrap;
385
+ }
323
386
  .db-badge[data-size=medium] {
324
387
  --badge-size: var(--db-spacing-fixed-sm);
325
388
  padding-inline: var(--db-spacing-fixed-xs);
@@ -330,8 +393,9 @@
330
393
  }
331
394
  .db-badge:empty,
332
395
  .db-badge > span:empty {
396
+ /* stylelint-disable-next-line db-ux/use-sizing */
333
397
  block-size: var(--badge-size);
334
- inline-size: var(--badge-size);
398
+ aspect-ratio: 1;
335
399
  padding: 0;
336
400
  }
337
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
@@ -111,7 +111,9 @@
111
111
  --db-icon-color: var(--db-brand-origin-default);
112
112
  }
113
113
  .db-brand img {
114
+ /* stylelint-disable-next-line db-ux/use-sizing */
114
115
  inline-size: calc(var(--db-sizing-md) - var(--db-sizing-3xs));
116
+ /* stylelint-disable-next-line db-ux/use-sizing */
115
117
  max-block-size: calc(var(--db-sizing-md) - var(--db-sizing-3xs));
116
118
  }
117
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
 
package/build/components/button/button.css CHANGED
@@ -132,118 +132,303 @@
132
132
  display: inline-flex;
133
133
  }
134
134
 
135
- .db-button {
136
- max-inline-size: 100%;
137
- color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
138
- min-block-size: var(--db-sizing-md);
139
- block-size: max-content;
140
- inline-size: fit-content;
141
- padding: var(--db-spacing-fixed-2xs) var(--db-spacing-fixed-md);
142
- text-decoration: none;
143
- }
144
- .db-button[data-no-text=true] {
145
- font-size: 0 !important;
146
- /* stylelint-disable-next-line at-rule-empty-line-before */
147
- padding: 0;
148
- aspect-ratio: 1;
149
- inline-size: var(--db-sizing-md);
150
- }
151
- .db-button[data-no-text=true]::before {
152
- --db-icon-margin-end: 0;
135
+ .db-button[data-variant=outlined], .db-button:not([data-variant]), .db-button[data-variant=""], .db-button[data-variant=ghost] {
136
+ background-color: var(--db-adaptive-bg-basic-transparent-full-default);
137
+ /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
153
138
  }
154
- .db-button[data-no-text=true]::before {
155
- margin: auto;
139
+ .db-button[data-variant=outlined]:hover:not(:disabled,
140
+ [aria-disabled=true],
141
+ [tabindex="-1"],
142
+ :has(:disabled)), .db-button:hover:not(:disabled,
143
+ [aria-disabled=true],
144
+ [tabindex="-1"],
145
+ :has(:disabled)):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
146
+ [aria-disabled=true],
147
+ [tabindex="-1"],
148
+ :has(:disabled)), .db-button[data-variant=ghost]:hover:not(:disabled,
149
+ [aria-disabled=true],
150
+ [tabindex="-1"],
151
+ :has(:disabled)) {
152
+ cursor: var(--db-overwrite-cursor, pointer);
153
+ background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
156
154
  }
157
- .db-button[data-size=small] {
158
- font-weight: 700;
159
- min-block-size: var(--db-sizing-sm);
155
+ .db-button[data-variant=outlined]:hover:not(:disabled,
156
+ [aria-disabled=true],
157
+ [tabindex="-1"],
158
+ :has(:disabled)):is(textarea), .db-button:hover:not(:disabled,
159
+ [aria-disabled=true],
160
+ [tabindex="-1"],
161
+ :has(:disabled)):is(textarea):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
162
+ [aria-disabled=true],
163
+ [tabindex="-1"],
164
+ :has(:disabled)):is(textarea), .db-button[data-variant=ghost]:hover:not(:disabled,
165
+ [aria-disabled=true],
166
+ [tabindex="-1"],
167
+ :has(:disabled)):is(textarea), .db-button[data-variant=outlined]:hover:not(:disabled,
168
+ [aria-disabled=true],
169
+ [tabindex="-1"],
170
+ :has(:disabled)):is(input), .db-button:hover:not(:disabled,
171
+ [aria-disabled=true],
172
+ [tabindex="-1"],
173
+ :has(:disabled)):is(input):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
174
+ [aria-disabled=true],
175
+ [tabindex="-1"],
176
+ :has(:disabled)):is(input), .db-button[data-variant=ghost]:hover:not(:disabled,
177
+ [aria-disabled=true],
178
+ [tabindex="-1"],
179
+ :has(:disabled)):is(input) {
180
+ cursor: initial;
160
181
  }
161
- .db-button[data-size=small]:not([data-no-text=true]) {
162
- padding: 1px var(--db-spacing-fixed-sm);
182
+ .db-button[data-variant=outlined]:hover:not(:disabled,
183
+ [aria-disabled=true],
184
+ [tabindex="-1"],
185
+ :has(:disabled)):is(input[type=checkbox]), .db-button:hover:not(:disabled,
186
+ [aria-disabled=true],
187
+ [tabindex="-1"],
188
+ :has(:disabled)):is(input[type=checkbox]):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
189
+ [aria-disabled=true],
190
+ [tabindex="-1"],
191
+ :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=ghost]:hover:not(:disabled,
192
+ [aria-disabled=true],
193
+ [tabindex="-1"],
194
+ :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=outlined]:hover:not(:disabled,
195
+ [aria-disabled=true],
196
+ [tabindex="-1"],
197
+ :has(:disabled)):is(input[type=radio]:not(:checked)), .db-button:hover:not(:disabled,
198
+ [aria-disabled=true],
199
+ [tabindex="-1"],
200
+ :has(:disabled)):is(input[type=radio]:not(:checked)):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
201
+ [aria-disabled=true],
202
+ [tabindex="-1"],
203
+ :has(:disabled)):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:hover:not(:disabled,
204
+ [aria-disabled=true],
205
+ [tabindex="-1"],
206
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
207
+ cursor: pointer;
163
208
  }
164
- .db-button[data-size=small]:not([data-no-text=true])::before {
165
- margin-inline-end: var(--db-spacing-fixed-2xs);
209
+ .db-button[data-variant=outlined]:active:not(:disabled,
210
+ [aria-disabled=true],
211
+ [tabindex="-1"],
212
+ :has(:disabled)), .db-button:active:not(:disabled,
213
+ [aria-disabled=true],
214
+ [tabindex="-1"],
215
+ :has(:disabled)):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
216
+ [aria-disabled=true],
217
+ [tabindex="-1"],
218
+ :has(:disabled)), .db-button[data-variant=ghost]:active:not(:disabled,
219
+ [aria-disabled=true],
220
+ [tabindex="-1"],
221
+ :has(:disabled)) {
222
+ cursor: var(--db-overwrite-cursor, pointer);
223
+ background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
166
224
  }
167
- .db-button[data-size=small][data-no-text=true] {
168
- inline-size: var(--db-sizing-sm);
225
+ .db-button[data-variant=outlined]:active:not(:disabled,
226
+ [aria-disabled=true],
227
+ [tabindex="-1"],
228
+ :has(:disabled)):is(textarea), .db-button:active:not(:disabled,
229
+ [aria-disabled=true],
230
+ [tabindex="-1"],
231
+ :has(:disabled)):is(textarea):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
232
+ [aria-disabled=true],
233
+ [tabindex="-1"],
234
+ :has(:disabled)):is(textarea), .db-button[data-variant=ghost]:active:not(:disabled,
235
+ [aria-disabled=true],
236
+ [tabindex="-1"],
237
+ :has(:disabled)):is(textarea), .db-button[data-variant=outlined]:active:not(:disabled,
238
+ [aria-disabled=true],
239
+ [tabindex="-1"],
240
+ :has(:disabled)):is(input), .db-button:active:not(:disabled,
241
+ [aria-disabled=true],
242
+ [tabindex="-1"],
243
+ :has(:disabled)):is(input):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
244
+ [aria-disabled=true],
245
+ [tabindex="-1"],
246
+ :has(:disabled)):is(input), .db-button[data-variant=ghost]:active:not(:disabled,
247
+ [aria-disabled=true],
248
+ [tabindex="-1"],
249
+ :has(:disabled)):is(input) {
250
+ cursor: initial;
169
251
  }
170
- .db-button[data-width=full] {
171
- inline-size: 100%;
252
+ .db-button[data-variant=outlined]:active:not(:disabled,
253
+ [aria-disabled=true],
254
+ [tabindex="-1"],
255
+ :has(:disabled)):is(input[type=checkbox]), .db-button:active:not(:disabled,
256
+ [aria-disabled=true],
257
+ [tabindex="-1"],
258
+ :has(:disabled)):is(input[type=checkbox]):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
259
+ [aria-disabled=true],
260
+ [tabindex="-1"],
261
+ :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=ghost]:active:not(:disabled,
262
+ [aria-disabled=true],
263
+ [tabindex="-1"],
264
+ :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=outlined]:active:not(:disabled,
265
+ [aria-disabled=true],
266
+ [tabindex="-1"],
267
+ :has(:disabled)):is(input[type=radio]:not(:checked)), .db-button:active:not(:disabled,
268
+ [aria-disabled=true],
269
+ [tabindex="-1"],
270
+ :has(:disabled)):is(input[type=radio]:not(:checked)):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
271
+ [aria-disabled=true],
272
+ [tabindex="-1"],
273
+ :has(:disabled)):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:active:not(:disabled,
274
+ [aria-disabled=true],
275
+ [tabindex="-1"],
276
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
277
+ cursor: pointer;
172
278
  }
279
+
173
280
  .db-button[data-variant=brand] {
174
281
  background-color: var(--db-brand-origin-default);
175
282
  color: var(--db-brand-on-origin-default);
176
283
  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
177
284
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
178
285
  }
179
- .db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]) {
286
+ .db-button[data-variant=brand]:hover:not(:disabled,
287
+ [aria-disabled=true],
288
+ [tabindex="-1"],
289
+ :has(:disabled)) {
180
290
  cursor: var(--db-overwrite-cursor, pointer);
181
291
  background-color: var(--db-brand-origin-hovered);
182
292
  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
183
293
  }
184
- .db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input) {
294
+ .db-button[data-variant=brand]:hover:not(:disabled,
295
+ [aria-disabled=true],
296
+ [tabindex="-1"],
297
+ :has(:disabled)):is(textarea), .db-button[data-variant=brand]:hover:not(:disabled,
298
+ [aria-disabled=true],
299
+ [tabindex="-1"],
300
+ :has(:disabled)):is(input) {
185
301
  cursor: initial;
186
302
  }
187
- .db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=brand]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
303
+ .db-button[data-variant=brand]:hover:not(:disabled,
304
+ [aria-disabled=true],
305
+ [tabindex="-1"],
306
+ :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=brand]:hover:not(:disabled,
307
+ [aria-disabled=true],
308
+ [tabindex="-1"],
309
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
188
310
  cursor: pointer;
189
311
  }
190
- .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]) {
312
+ .db-button[data-variant=brand]:active:not(:disabled,
313
+ [aria-disabled=true],
314
+ [tabindex="-1"],
315
+ :has(:disabled)) {
191
316
  cursor: var(--db-overwrite-cursor, pointer);
192
317
  background-color: var(--db-brand-origin-pressed);
193
318
  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
194
319
  }
195
- .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input) {
320
+ .db-button[data-variant=brand]:active:not(:disabled,
321
+ [aria-disabled=true],
322
+ [tabindex="-1"],
323
+ :has(:disabled)):is(textarea), .db-button[data-variant=brand]:active:not(:disabled,
324
+ [aria-disabled=true],
325
+ [tabindex="-1"],
326
+ :has(:disabled)):is(input) {
196
327
  cursor: initial;
197
328
  }
198
- .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=brand]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
329
+ .db-button[data-variant=brand]:active:not(:disabled,
330
+ [aria-disabled=true],
331
+ [tabindex="-1"],
332
+ :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=brand]:active:not(:disabled,
333
+ [aria-disabled=true],
334
+ [tabindex="-1"],
335
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
199
336
  cursor: pointer;
200
337
  }
201
- .db-button[data-variant=outlined], .db-button:not([data-variant]), .db-button[data-variant=""], .db-button[data-variant=ghost] {
202
- background-color: var(--db-adaptive-bg-basic-transparent-full-default);
203
- /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
338
+
339
+ .db-button {
340
+ max-inline-size: 100%;
341
+ color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
342
+ min-block-size: var(--db-sizing-md);
343
+ block-size: max-content;
344
+ inline-size: fit-content;
345
+ padding: var(--db-spacing-fixed-2xs) var(--db-spacing-fixed-md);
346
+ text-decoration: none;
204
347
  }
205
- .db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]) {
206
- cursor: var(--db-overwrite-cursor, pointer);
207
- background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
348
+ .db-button[data-no-text=true] {
349
+ padding: 0;
350
+ aspect-ratio: 1;
351
+ inline-size: var(--db-sizing-md);
352
+ font-size: 0 !important;
353
+ /* stylelint-disable-next-line at-rule-empty-line-before */
208
354
  }
209
- .db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(input), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(input) {
210
- cursor: initial;
355
+ .db-button[data-no-text=true]::before {
356
+ --db-icon-margin-end: 0;
211
357
  }
212
- .db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=outlined]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button:not([data-variant]):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=""]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=ghost]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
213
- cursor: pointer;
358
+ .db-button[data-no-text=true]::before {
359
+ margin: auto;
214
360
  }
215
- .db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]) {
216
- cursor: var(--db-overwrite-cursor, pointer);
217
- background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
361
+ .db-button[data-wrap=false] {
362
+ white-space: nowrap;
218
363
  }
219
- .db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(input), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(input), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(input) {
220
- cursor: initial;
364
+ .db-button[data-size=small] {
365
+ font-weight: 700;
366
+ min-block-size: var(--db-sizing-sm);
221
367
  }
222
- .db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=outlined]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button:not([data-variant]):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=""]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=ghost]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
223
- cursor: pointer;
368
+ .db-button[data-size=small]:not([data-no-text=true]) {
369
+ padding: 1px var(--db-spacing-fixed-sm);
370
+ }
371
+ .db-button[data-size=small]:not([data-no-text=true])::before {
372
+ margin-inline-end: var(--db-spacing-fixed-2xs);
373
+ }
374
+ .db-button[data-size=small][data-no-text=true] {
375
+ inline-size: var(--db-sizing-sm);
376
+ }
377
+ .db-button[data-width=full] {
378
+ inline-size: 100%;
224
379
  }
225
380
  .db-button[data-variant=filled] {
226
381
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
227
382
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
228
383
  }
229
- .db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]) {
384
+ .db-button[data-variant=filled]:hover:not(:disabled,
385
+ [aria-disabled=true],
386
+ [tabindex="-1"],
387
+ :has(:disabled)) {
230
388
  cursor: var(--db-overwrite-cursor, pointer);
231
389
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
232
390
  }
233
- .db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(input) {
391
+ .db-button[data-variant=filled]:hover:not(:disabled,
392
+ [aria-disabled=true],
393
+ [tabindex="-1"],
394
+ :has(:disabled)):is(textarea), .db-button[data-variant=filled]:hover:not(:disabled,
395
+ [aria-disabled=true],
396
+ [tabindex="-1"],
397
+ :has(:disabled)):is(input) {
234
398
  cursor: initial;
235
399
  }
236
- .db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=filled]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
400
+ .db-button[data-variant=filled]:hover:not(:disabled,
401
+ [aria-disabled=true],
402
+ [tabindex="-1"],
403
+ :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=filled]:hover:not(:disabled,
404
+ [aria-disabled=true],
405
+ [tabindex="-1"],
406
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
237
407
  cursor: pointer;
238
408
  }
239
- .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]) {
409
+ .db-button[data-variant=filled]:active:not(:disabled,
410
+ [aria-disabled=true],
411
+ [tabindex="-1"],
412
+ :has(:disabled)) {
240
413
  cursor: var(--db-overwrite-cursor, pointer);
241
414
  background-color: var(--db-adaptive-bg-basic-transparent-semi-pressed);
242
415
  }
243
- .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input) {
416
+ .db-button[data-variant=filled]:active:not(:disabled,
417
+ [aria-disabled=true],
418
+ [tabindex="-1"],
419
+ :has(:disabled)):is(textarea), .db-button[data-variant=filled]:active:not(:disabled,
420
+ [aria-disabled=true],
421
+ [tabindex="-1"],
422
+ :has(:disabled)):is(input) {
244
423
  cursor: initial;
245
424
  }
246
- .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-button[data-variant=filled]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
425
+ .db-button[data-variant=filled]:active:not(:disabled,
426
+ [aria-disabled=true],
427
+ [tabindex="-1"],
428
+ :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=filled]:active:not(:disabled,
429
+ [aria-disabled=true],
430
+ [tabindex="-1"],
431
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
247
432
  cursor: pointer;
248
433
  }
249
434
  .db-button:is(:disabled, [aria-disabled=true]) {