@db-ux/core-components 4.9.1 → 4.10.0-esm-f121fc3

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 (37) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/build/components/accordion-item/accordion-item.css +4 -44
  3. package/build/components/accordion-item/accordion-item.scss +7 -5
  4. package/build/components/badge/badge.css +3 -75
  5. package/build/components/button/button.css +12 -222
  6. package/build/components/card/card.css +10 -106
  7. package/build/components/card/card.scss +18 -14
  8. package/build/components/custom-button/custom-button.css +15 -597
  9. package/build/components/custom-button/custom-button.scss +7 -5
  10. package/build/components/custom-select/custom-select.css +5 -24
  11. package/build/components/custom-select-list-item/custom-select-list-item.css +3 -45
  12. package/build/components/custom-select-list-item/custom-select-list-item.scss +8 -6
  13. package/build/components/header/header.css +3 -3
  14. package/build/components/header/header.scss +16 -16
  15. package/build/components/input/input.css +5 -24
  16. package/build/components/link/link.css +8 -88
  17. package/build/components/link/link.scss +8 -6
  18. package/build/components/navigation-item/navigation-item.css +6 -116
  19. package/build/components/navigation-item/navigation-item.scss +7 -5
  20. package/build/components/notification/notification.css +4 -44
  21. package/build/components/select/select.css +5 -24
  22. package/build/components/tab-item/tab-item.css +7 -69
  23. package/build/components/tab-item/tab-item.scss +6 -12
  24. package/build/components/tag/tag.css +40 -875
  25. package/build/components/tag/tag.scss +4 -0
  26. package/build/components/textarea/textarea.css +5 -24
  27. package/build/styles/absolute.css +7 -7
  28. package/build/styles/bundle.css +7 -7
  29. package/build/styles/index.css +6 -6
  30. package/build/styles/internal/_button-components.scss +23 -17
  31. package/build/styles/internal/_form-components.scss +6 -3
  32. package/build/styles/internal/_link-components.scss +15 -13
  33. package/build/styles/internal/_tag-components.scss +21 -15
  34. package/build/styles/relative.css +7 -7
  35. package/build/styles/rollup.css +7 -7
  36. package/build/styles/webpack.css +7 -7
  37. package/package.json +8 -8
package/build/components/custom-button/custom-button.css CHANGED
@@ -74,477 +74,37 @@
74
74
 
75
75
  .db-custom-button[data-variant=outlined] label, .db-custom-button[data-variant=outlined] button, .db-custom-button[data-variant=outlined] a, .db-custom-button:not([data-variant]) label, .db-custom-button:not([data-variant]) button, .db-custom-button:not([data-variant]) a, .db-custom-button[data-variant=""] label, .db-custom-button[data-variant=""] button, .db-custom-button[data-variant=""] a, .db-custom-button[data-variant=ghost] label, .db-custom-button[data-variant=ghost] button, .db-custom-button[data-variant=ghost] a, .db-custom-button[data-variant=brand] label {
76
76
  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
77
+ }
78
+ .db-custom-button[data-variant=outlined] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button[data-variant=outlined] button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button[data-variant=outlined] a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button:not([data-variant]) label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button:not([data-variant]) button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button:not([data-variant]) a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button[data-variant=""] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button[data-variant=""] button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button[data-variant=""] a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button[data-variant=ghost] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button[data-variant=ghost] button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button[data-variant=ghost] a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button[data-variant=brand] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
77
79
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
78
80
  }
79
- .db-custom-button[data-variant=outlined] label:hover:not(:disabled,
80
- [aria-disabled=true],
81
- [tabindex="-1"],
82
- :has(:disabled)), .db-custom-button[data-variant=outlined] button:hover:not(:disabled,
83
- [aria-disabled=true],
84
- [tabindex="-1"],
85
- :has(:disabled)), .db-custom-button[data-variant=outlined] a:hover:not(:disabled,
86
- [aria-disabled=true],
87
- [tabindex="-1"],
88
- :has(:disabled)), .db-custom-button:not([data-variant]) label:hover:not(:disabled,
89
- [aria-disabled=true],
90
- [tabindex="-1"],
91
- :has(:disabled)), .db-custom-button:not([data-variant]) button:hover:not(:disabled,
92
- [aria-disabled=true],
93
- [tabindex="-1"],
94
- :has(:disabled)), .db-custom-button:not([data-variant]) a:hover:not(:disabled,
95
- [aria-disabled=true],
96
- [tabindex="-1"],
97
- :has(:disabled)), .db-custom-button[data-variant=""] label:hover:not(:disabled,
98
- [aria-disabled=true],
99
- [tabindex="-1"],
100
- :has(:disabled)), .db-custom-button[data-variant=""] button:hover:not(:disabled,
101
- [aria-disabled=true],
102
- [tabindex="-1"],
103
- :has(:disabled)), .db-custom-button[data-variant=""] a:hover:not(:disabled,
104
- [aria-disabled=true],
105
- [tabindex="-1"],
106
- :has(:disabled)), .db-custom-button[data-variant=ghost] label:hover:not(:disabled,
107
- [aria-disabled=true],
108
- [tabindex="-1"],
109
- :has(:disabled)), .db-custom-button[data-variant=ghost] button:hover:not(:disabled,
110
- [aria-disabled=true],
111
- [tabindex="-1"],
112
- :has(:disabled)), .db-custom-button[data-variant=ghost] a:hover:not(:disabled,
113
- [aria-disabled=true],
114
- [tabindex="-1"],
115
- :has(:disabled)), .db-custom-button[data-variant=brand] label:hover:not(:disabled,
116
- [aria-disabled=true],
117
- [tabindex="-1"],
118
- :has(:disabled)) {
81
+ .db-custom-button[data-variant=outlined] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button[data-variant=outlined] button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button[data-variant=outlined] a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button:not([data-variant]) label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button:not([data-variant]) button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button:not([data-variant]) a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button[data-variant=""] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button[data-variant=""] button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button[data-variant=""] a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button[data-variant=ghost] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button[data-variant=ghost] button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button[data-variant=ghost] a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button[data-variant=brand] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
119
82
  cursor: var(--db-overwrite-cursor, pointer);
120
83
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
121
84
  }
122
- .db-custom-button[data-variant=outlined] label:hover:not(:disabled,
123
- [aria-disabled=true],
124
- [tabindex="-1"],
125
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=outlined] button:hover:not(:disabled,
126
- [aria-disabled=true],
127
- [tabindex="-1"],
128
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=outlined] a:hover:not(:disabled,
129
- [aria-disabled=true],
130
- [tabindex="-1"],
131
- :has(:disabled)):is(textarea), .db-custom-button:not([data-variant]) label:hover:not(:disabled,
132
- [aria-disabled=true],
133
- [tabindex="-1"],
134
- :has(:disabled)):is(textarea), .db-custom-button:not([data-variant]) button:hover:not(:disabled,
135
- [aria-disabled=true],
136
- [tabindex="-1"],
137
- :has(:disabled)):is(textarea), .db-custom-button:not([data-variant]) a:hover:not(:disabled,
138
- [aria-disabled=true],
139
- [tabindex="-1"],
140
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=""] label:hover:not(:disabled,
141
- [aria-disabled=true],
142
- [tabindex="-1"],
143
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=""] button:hover:not(:disabled,
144
- [aria-disabled=true],
145
- [tabindex="-1"],
146
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=""] a:hover:not(:disabled,
147
- [aria-disabled=true],
148
- [tabindex="-1"],
149
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=ghost] label:hover:not(:disabled,
150
- [aria-disabled=true],
151
- [tabindex="-1"],
152
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=ghost] button:hover:not(:disabled,
153
- [aria-disabled=true],
154
- [tabindex="-1"],
155
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=ghost] a:hover:not(:disabled,
156
- [aria-disabled=true],
157
- [tabindex="-1"],
158
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=brand] label:hover:not(:disabled,
159
- [aria-disabled=true],
160
- [tabindex="-1"],
161
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=outlined] label:hover:not(:disabled,
162
- [aria-disabled=true],
163
- [tabindex="-1"],
164
- :has(:disabled)):is(input), .db-custom-button[data-variant=outlined] button:hover:not(:disabled,
165
- [aria-disabled=true],
166
- [tabindex="-1"],
167
- :has(:disabled)):is(input), .db-custom-button[data-variant=outlined] a:hover:not(:disabled,
168
- [aria-disabled=true],
169
- [tabindex="-1"],
170
- :has(:disabled)):is(input), .db-custom-button:not([data-variant]) label:hover:not(:disabled,
171
- [aria-disabled=true],
172
- [tabindex="-1"],
173
- :has(:disabled)):is(input), .db-custom-button:not([data-variant]) button:hover:not(:disabled,
174
- [aria-disabled=true],
175
- [tabindex="-1"],
176
- :has(:disabled)):is(input), .db-custom-button:not([data-variant]) a:hover:not(:disabled,
177
- [aria-disabled=true],
178
- [tabindex="-1"],
179
- :has(:disabled)):is(input), .db-custom-button[data-variant=""] label:hover:not(:disabled,
180
- [aria-disabled=true],
181
- [tabindex="-1"],
182
- :has(:disabled)):is(input), .db-custom-button[data-variant=""] button:hover:not(:disabled,
183
- [aria-disabled=true],
184
- [tabindex="-1"],
185
- :has(:disabled)):is(input), .db-custom-button[data-variant=""] a:hover:not(:disabled,
186
- [aria-disabled=true],
187
- [tabindex="-1"],
188
- :has(:disabled)):is(input), .db-custom-button[data-variant=ghost] label:hover:not(:disabled,
189
- [aria-disabled=true],
190
- [tabindex="-1"],
191
- :has(:disabled)):is(input), .db-custom-button[data-variant=ghost] button:hover:not(:disabled,
192
- [aria-disabled=true],
193
- [tabindex="-1"],
194
- :has(:disabled)):is(input), .db-custom-button[data-variant=ghost] a:hover:not(:disabled,
195
- [aria-disabled=true],
196
- [tabindex="-1"],
197
- :has(:disabled)):is(input), .db-custom-button[data-variant=brand] label:hover:not(:disabled,
198
- [aria-disabled=true],
199
- [tabindex="-1"],
200
- :has(:disabled)):is(input) {
201
- cursor: initial;
202
- }
203
- .db-custom-button[data-variant=outlined] label:hover:not(:disabled,
204
- [aria-disabled=true],
205
- [tabindex="-1"],
206
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=outlined] button:hover:not(:disabled,
207
- [aria-disabled=true],
208
- [tabindex="-1"],
209
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=outlined] a:hover:not(:disabled,
210
- [aria-disabled=true],
211
- [tabindex="-1"],
212
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button:not([data-variant]) label:hover:not(:disabled,
213
- [aria-disabled=true],
214
- [tabindex="-1"],
215
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button:not([data-variant]) button:hover:not(:disabled,
216
- [aria-disabled=true],
217
- [tabindex="-1"],
218
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button:not([data-variant]) a:hover:not(:disabled,
219
- [aria-disabled=true],
220
- [tabindex="-1"],
221
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=""] label:hover:not(:disabled,
222
- [aria-disabled=true],
223
- [tabindex="-1"],
224
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=""] button:hover:not(:disabled,
225
- [aria-disabled=true],
226
- [tabindex="-1"],
227
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=""] a:hover:not(:disabled,
228
- [aria-disabled=true],
229
- [tabindex="-1"],
230
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=ghost] label:hover:not(:disabled,
231
- [aria-disabled=true],
232
- [tabindex="-1"],
233
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=ghost] button:hover:not(:disabled,
234
- [aria-disabled=true],
235
- [tabindex="-1"],
236
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=ghost] a:hover:not(:disabled,
237
- [aria-disabled=true],
238
- [tabindex="-1"],
239
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=brand] label:hover:not(:disabled,
240
- [aria-disabled=true],
241
- [tabindex="-1"],
242
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=outlined] label:hover:not(:disabled,
243
- [aria-disabled=true],
244
- [tabindex="-1"],
245
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=outlined] button:hover:not(:disabled,
246
- [aria-disabled=true],
247
- [tabindex="-1"],
248
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=outlined] a:hover:not(:disabled,
249
- [aria-disabled=true],
250
- [tabindex="-1"],
251
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button:not([data-variant]) label:hover:not(:disabled,
252
- [aria-disabled=true],
253
- [tabindex="-1"],
254
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button:not([data-variant]) button:hover:not(:disabled,
255
- [aria-disabled=true],
256
- [tabindex="-1"],
257
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button:not([data-variant]) a:hover:not(:disabled,
258
- [aria-disabled=true],
259
- [tabindex="-1"],
260
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=""] label:hover:not(:disabled,
261
- [aria-disabled=true],
262
- [tabindex="-1"],
263
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=""] button:hover:not(:disabled,
264
- [aria-disabled=true],
265
- [tabindex="-1"],
266
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=""] a:hover:not(:disabled,
267
- [aria-disabled=true],
268
- [tabindex="-1"],
269
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=ghost] label:hover:not(:disabled,
270
- [aria-disabled=true],
271
- [tabindex="-1"],
272
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=ghost] button:hover:not(:disabled,
273
- [aria-disabled=true],
274
- [tabindex="-1"],
275
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=ghost] a:hover:not(:disabled,
276
- [aria-disabled=true],
277
- [tabindex="-1"],
278
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=brand] label:hover:not(:disabled,
279
- [aria-disabled=true],
280
- [tabindex="-1"],
281
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
282
- cursor: pointer;
283
- }
284
- .db-custom-button[data-variant=outlined] label:active:not(:disabled,
285
- [aria-disabled=true],
286
- [tabindex="-1"],
287
- :has(:disabled)), .db-custom-button[data-variant=outlined] button:active:not(:disabled,
288
- [aria-disabled=true],
289
- [tabindex="-1"],
290
- :has(:disabled)), .db-custom-button[data-variant=outlined] a:active:not(:disabled,
291
- [aria-disabled=true],
292
- [tabindex="-1"],
293
- :has(:disabled)), .db-custom-button:not([data-variant]) label:active:not(:disabled,
294
- [aria-disabled=true],
295
- [tabindex="-1"],
296
- :has(:disabled)), .db-custom-button:not([data-variant]) button:active:not(:disabled,
297
- [aria-disabled=true],
298
- [tabindex="-1"],
299
- :has(:disabled)), .db-custom-button:not([data-variant]) a:active:not(:disabled,
300
- [aria-disabled=true],
301
- [tabindex="-1"],
302
- :has(:disabled)), .db-custom-button[data-variant=""] label:active:not(:disabled,
303
- [aria-disabled=true],
304
- [tabindex="-1"],
305
- :has(:disabled)), .db-custom-button[data-variant=""] button:active:not(:disabled,
306
- [aria-disabled=true],
307
- [tabindex="-1"],
308
- :has(:disabled)), .db-custom-button[data-variant=""] a:active:not(:disabled,
309
- [aria-disabled=true],
310
- [tabindex="-1"],
311
- :has(:disabled)), .db-custom-button[data-variant=ghost] label:active:not(:disabled,
312
- [aria-disabled=true],
313
- [tabindex="-1"],
314
- :has(:disabled)), .db-custom-button[data-variant=ghost] button:active:not(:disabled,
315
- [aria-disabled=true],
316
- [tabindex="-1"],
317
- :has(:disabled)), .db-custom-button[data-variant=ghost] a:active:not(:disabled,
318
- [aria-disabled=true],
319
- [tabindex="-1"],
320
- :has(:disabled)), .db-custom-button[data-variant=brand] label:active:not(:disabled,
321
- [aria-disabled=true],
322
- [tabindex="-1"],
323
- :has(:disabled)) {
85
+ .db-custom-button[data-variant=outlined] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button[data-variant=outlined] button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button[data-variant=outlined] a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button:not([data-variant]) label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button:not([data-variant]) button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button:not([data-variant]) a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button[data-variant=""] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button[data-variant=""] button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button[data-variant=""] a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button[data-variant=ghost] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button[data-variant=ghost] button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button[data-variant=ghost] a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button[data-variant=brand] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
324
86
  cursor: var(--db-overwrite-cursor, pointer);
325
87
  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
326
88
  }
327
- .db-custom-button[data-variant=outlined] label:active:not(:disabled,
328
- [aria-disabled=true],
329
- [tabindex="-1"],
330
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=outlined] button:active:not(:disabled,
331
- [aria-disabled=true],
332
- [tabindex="-1"],
333
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=outlined] a:active:not(:disabled,
334
- [aria-disabled=true],
335
- [tabindex="-1"],
336
- :has(:disabled)):is(textarea), .db-custom-button:not([data-variant]) label:active:not(:disabled,
337
- [aria-disabled=true],
338
- [tabindex="-1"],
339
- :has(:disabled)):is(textarea), .db-custom-button:not([data-variant]) button:active:not(:disabled,
340
- [aria-disabled=true],
341
- [tabindex="-1"],
342
- :has(:disabled)):is(textarea), .db-custom-button:not([data-variant]) a:active:not(:disabled,
343
- [aria-disabled=true],
344
- [tabindex="-1"],
345
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=""] label:active:not(:disabled,
346
- [aria-disabled=true],
347
- [tabindex="-1"],
348
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=""] button:active:not(:disabled,
349
- [aria-disabled=true],
350
- [tabindex="-1"],
351
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=""] a:active:not(:disabled,
352
- [aria-disabled=true],
353
- [tabindex="-1"],
354
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=ghost] label:active:not(:disabled,
355
- [aria-disabled=true],
356
- [tabindex="-1"],
357
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=ghost] button:active:not(:disabled,
358
- [aria-disabled=true],
359
- [tabindex="-1"],
360
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=ghost] a:active:not(:disabled,
361
- [aria-disabled=true],
362
- [tabindex="-1"],
363
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=brand] label:active:not(:disabled,
364
- [aria-disabled=true],
365
- [tabindex="-1"],
366
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=outlined] label:active:not(:disabled,
367
- [aria-disabled=true],
368
- [tabindex="-1"],
369
- :has(:disabled)):is(input), .db-custom-button[data-variant=outlined] button:active:not(:disabled,
370
- [aria-disabled=true],
371
- [tabindex="-1"],
372
- :has(:disabled)):is(input), .db-custom-button[data-variant=outlined] a:active:not(:disabled,
373
- [aria-disabled=true],
374
- [tabindex="-1"],
375
- :has(:disabled)):is(input), .db-custom-button:not([data-variant]) label:active:not(:disabled,
376
- [aria-disabled=true],
377
- [tabindex="-1"],
378
- :has(:disabled)):is(input), .db-custom-button:not([data-variant]) button:active:not(:disabled,
379
- [aria-disabled=true],
380
- [tabindex="-1"],
381
- :has(:disabled)):is(input), .db-custom-button:not([data-variant]) a:active:not(:disabled,
382
- [aria-disabled=true],
383
- [tabindex="-1"],
384
- :has(:disabled)):is(input), .db-custom-button[data-variant=""] label:active:not(:disabled,
385
- [aria-disabled=true],
386
- [tabindex="-1"],
387
- :has(:disabled)):is(input), .db-custom-button[data-variant=""] button:active:not(:disabled,
388
- [aria-disabled=true],
389
- [tabindex="-1"],
390
- :has(:disabled)):is(input), .db-custom-button[data-variant=""] a:active:not(:disabled,
391
- [aria-disabled=true],
392
- [tabindex="-1"],
393
- :has(:disabled)):is(input), .db-custom-button[data-variant=ghost] label:active:not(:disabled,
394
- [aria-disabled=true],
395
- [tabindex="-1"],
396
- :has(:disabled)):is(input), .db-custom-button[data-variant=ghost] button:active:not(:disabled,
397
- [aria-disabled=true],
398
- [tabindex="-1"],
399
- :has(:disabled)):is(input), .db-custom-button[data-variant=ghost] a:active:not(:disabled,
400
- [aria-disabled=true],
401
- [tabindex="-1"],
402
- :has(:disabled)):is(input), .db-custom-button[data-variant=brand] label:active:not(:disabled,
403
- [aria-disabled=true],
404
- [tabindex="-1"],
405
- :has(:disabled)):is(input) {
406
- cursor: initial;
407
- }
408
- .db-custom-button[data-variant=outlined] label:active:not(:disabled,
409
- [aria-disabled=true],
410
- [tabindex="-1"],
411
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=outlined] button:active:not(:disabled,
412
- [aria-disabled=true],
413
- [tabindex="-1"],
414
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=outlined] a:active:not(:disabled,
415
- [aria-disabled=true],
416
- [tabindex="-1"],
417
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button:not([data-variant]) label:active:not(:disabled,
418
- [aria-disabled=true],
419
- [tabindex="-1"],
420
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button:not([data-variant]) button:active:not(:disabled,
421
- [aria-disabled=true],
422
- [tabindex="-1"],
423
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button:not([data-variant]) a:active:not(:disabled,
424
- [aria-disabled=true],
425
- [tabindex="-1"],
426
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=""] label:active:not(:disabled,
427
- [aria-disabled=true],
428
- [tabindex="-1"],
429
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=""] button:active:not(:disabled,
430
- [aria-disabled=true],
431
- [tabindex="-1"],
432
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=""] a:active:not(:disabled,
433
- [aria-disabled=true],
434
- [tabindex="-1"],
435
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=ghost] label:active:not(:disabled,
436
- [aria-disabled=true],
437
- [tabindex="-1"],
438
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=ghost] button:active:not(:disabled,
439
- [aria-disabled=true],
440
- [tabindex="-1"],
441
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=ghost] a:active:not(:disabled,
442
- [aria-disabled=true],
443
- [tabindex="-1"],
444
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=brand] label:active:not(:disabled,
445
- [aria-disabled=true],
446
- [tabindex="-1"],
447
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=outlined] label:active:not(:disabled,
448
- [aria-disabled=true],
449
- [tabindex="-1"],
450
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=outlined] button:active:not(:disabled,
451
- [aria-disabled=true],
452
- [tabindex="-1"],
453
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=outlined] a:active:not(:disabled,
454
- [aria-disabled=true],
455
- [tabindex="-1"],
456
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button:not([data-variant]) label:active:not(:disabled,
457
- [aria-disabled=true],
458
- [tabindex="-1"],
459
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button:not([data-variant]) button:active:not(:disabled,
460
- [aria-disabled=true],
461
- [tabindex="-1"],
462
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button:not([data-variant]) a:active:not(:disabled,
463
- [aria-disabled=true],
464
- [tabindex="-1"],
465
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=""] label:active:not(:disabled,
466
- [aria-disabled=true],
467
- [tabindex="-1"],
468
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=""] button:active:not(:disabled,
469
- [aria-disabled=true],
470
- [tabindex="-1"],
471
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=""] a:active:not(:disabled,
472
- [aria-disabled=true],
473
- [tabindex="-1"],
474
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=ghost] label:active:not(:disabled,
475
- [aria-disabled=true],
476
- [tabindex="-1"],
477
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=ghost] button:active:not(:disabled,
478
- [aria-disabled=true],
479
- [tabindex="-1"],
480
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=ghost] a:active:not(:disabled,
481
- [aria-disabled=true],
482
- [tabindex="-1"],
483
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=brand] label:active:not(:disabled,
484
- [aria-disabled=true],
485
- [tabindex="-1"],
486
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
487
- cursor: pointer;
488
- }
489
89
 
490
90
  .db-custom-button[data-variant=brand] :is(a, button) {
491
91
  background-color: var(--db-brand-origin-default);
492
92
  color: var(--db-brand-on-origin-default);
493
93
  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
94
+ }
95
+ .db-custom-button[data-variant=brand] :not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):is(a, button) {
494
96
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
495
97
  }
496
- .db-custom-button[data-variant=brand] :hover:not(:disabled,
497
- [aria-disabled=true],
498
- [tabindex="-1"],
499
- :has(:disabled)):is(a, button) {
98
+ .db-custom-button[data-variant=brand] :not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover:is(a, button) {
500
99
  cursor: var(--db-overwrite-cursor, pointer);
501
100
  background-color: var(--db-brand-origin-hovered);
502
101
  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
503
102
  }
504
- .db-custom-button[data-variant=brand] :hover:not(:disabled,
505
- [aria-disabled=true],
506
- [tabindex="-1"],
507
- :has(:disabled)):is(textarea):is(a, button), .db-custom-button[data-variant=brand] :hover:not(:disabled,
508
- [aria-disabled=true],
509
- [tabindex="-1"],
510
- :has(:disabled)):is(input):is(a, button) {
511
- cursor: initial;
512
- }
513
- .db-custom-button[data-variant=brand] :hover:not(:disabled,
514
- [aria-disabled=true],
515
- [tabindex="-1"],
516
- :has(:disabled)):is(input[type=checkbox]):is(a, button), .db-custom-button[data-variant=brand] :hover:not(:disabled,
517
- [aria-disabled=true],
518
- [tabindex="-1"],
519
- :has(:disabled)):is(input[type=radio]:not(:checked)):is(a, button) {
520
- cursor: pointer;
521
- }
522
- .db-custom-button[data-variant=brand] :active:not(:disabled,
523
- [aria-disabled=true],
524
- [tabindex="-1"],
525
- :has(:disabled)):is(a, button) {
103
+ .db-custom-button[data-variant=brand] :not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active:is(a, button) {
526
104
  cursor: var(--db-overwrite-cursor, pointer);
527
105
  background-color: var(--db-brand-origin-pressed);
528
106
  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
529
107
  }
530
- .db-custom-button[data-variant=brand] :active:not(:disabled,
531
- [aria-disabled=true],
532
- [tabindex="-1"],
533
- :has(:disabled)):is(textarea):is(a, button), .db-custom-button[data-variant=brand] :active:not(:disabled,
534
- [aria-disabled=true],
535
- [tabindex="-1"],
536
- :has(:disabled)):is(input):is(a, button) {
537
- cursor: initial;
538
- }
539
- .db-custom-button[data-variant=brand] :active:not(:disabled,
540
- [aria-disabled=true],
541
- [tabindex="-1"],
542
- :has(:disabled)):is(input[type=checkbox]):is(a, button), .db-custom-button[data-variant=brand] :active:not(:disabled,
543
- [aria-disabled=true],
544
- [tabindex="-1"],
545
- :has(:disabled)):is(input[type=radio]:not(:checked)):is(a, button) {
546
- cursor: pointer;
547
- }
548
108
 
549
109
  .db-custom-button {
550
110
  position: relative;
@@ -597,118 +157,18 @@
597
157
  }
598
158
  .db-custom-button[data-variant=filled] label, .db-custom-button[data-variant=filled] button, .db-custom-button[data-variant=filled] a {
599
159
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
160
+ }
161
+ .db-custom-button[data-variant=filled] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button[data-variant=filled] button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-custom-button[data-variant=filled] a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
600
162
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
601
163
  }
602
- .db-custom-button[data-variant=filled] label:hover:not(:disabled,
603
- [aria-disabled=true],
604
- [tabindex="-1"],
605
- :has(:disabled)), .db-custom-button[data-variant=filled] button:hover:not(:disabled,
606
- [aria-disabled=true],
607
- [tabindex="-1"],
608
- :has(:disabled)), .db-custom-button[data-variant=filled] a:hover:not(:disabled,
609
- [aria-disabled=true],
610
- [tabindex="-1"],
611
- :has(:disabled)) {
164
+ .db-custom-button[data-variant=filled] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button[data-variant=filled] button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-custom-button[data-variant=filled] a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
612
165
  cursor: var(--db-overwrite-cursor, pointer);
613
166
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
614
167
  }
615
- .db-custom-button[data-variant=filled] label:hover:not(:disabled,
616
- [aria-disabled=true],
617
- [tabindex="-1"],
618
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=filled] label:hover:not(:disabled,
619
- [aria-disabled=true],
620
- [tabindex="-1"],
621
- :has(:disabled)):is(input), .db-custom-button[data-variant=filled] button:hover:not(:disabled,
622
- [aria-disabled=true],
623
- [tabindex="-1"],
624
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=filled] button:hover:not(:disabled,
625
- [aria-disabled=true],
626
- [tabindex="-1"],
627
- :has(:disabled)):is(input), .db-custom-button[data-variant=filled] a:hover:not(:disabled,
628
- [aria-disabled=true],
629
- [tabindex="-1"],
630
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=filled] a:hover:not(:disabled,
631
- [aria-disabled=true],
632
- [tabindex="-1"],
633
- :has(:disabled)):is(input) {
634
- cursor: initial;
635
- }
636
- .db-custom-button[data-variant=filled] label:hover:not(:disabled,
637
- [aria-disabled=true],
638
- [tabindex="-1"],
639
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=filled] label:hover:not(:disabled,
640
- [aria-disabled=true],
641
- [tabindex="-1"],
642
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=filled] button:hover:not(:disabled,
643
- [aria-disabled=true],
644
- [tabindex="-1"],
645
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=filled] button:hover:not(:disabled,
646
- [aria-disabled=true],
647
- [tabindex="-1"],
648
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=filled] a:hover:not(:disabled,
649
- [aria-disabled=true],
650
- [tabindex="-1"],
651
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=filled] a:hover:not(:disabled,
652
- [aria-disabled=true],
653
- [tabindex="-1"],
654
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
655
- cursor: pointer;
656
- }
657
- .db-custom-button[data-variant=filled] label:active:not(:disabled,
658
- [aria-disabled=true],
659
- [tabindex="-1"],
660
- :has(:disabled)), .db-custom-button[data-variant=filled] button:active:not(:disabled,
661
- [aria-disabled=true],
662
- [tabindex="-1"],
663
- :has(:disabled)), .db-custom-button[data-variant=filled] a:active:not(:disabled,
664
- [aria-disabled=true],
665
- [tabindex="-1"],
666
- :has(:disabled)) {
168
+ .db-custom-button[data-variant=filled] label:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button[data-variant=filled] button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-custom-button[data-variant=filled] a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
667
169
  cursor: var(--db-overwrite-cursor, pointer);
668
170
  background-color: var(--db-adaptive-bg-basic-transparent-semi-pressed);
669
171
  }
670
- .db-custom-button[data-variant=filled] label:active:not(:disabled,
671
- [aria-disabled=true],
672
- [tabindex="-1"],
673
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=filled] label:active:not(:disabled,
674
- [aria-disabled=true],
675
- [tabindex="-1"],
676
- :has(:disabled)):is(input), .db-custom-button[data-variant=filled] button:active:not(:disabled,
677
- [aria-disabled=true],
678
- [tabindex="-1"],
679
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=filled] button:active:not(:disabled,
680
- [aria-disabled=true],
681
- [tabindex="-1"],
682
- :has(:disabled)):is(input), .db-custom-button[data-variant=filled] a:active:not(:disabled,
683
- [aria-disabled=true],
684
- [tabindex="-1"],
685
- :has(:disabled)):is(textarea), .db-custom-button[data-variant=filled] a:active:not(:disabled,
686
- [aria-disabled=true],
687
- [tabindex="-1"],
688
- :has(:disabled)):is(input) {
689
- cursor: initial;
690
- }
691
- .db-custom-button[data-variant=filled] label:active:not(:disabled,
692
- [aria-disabled=true],
693
- [tabindex="-1"],
694
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=filled] label:active:not(:disabled,
695
- [aria-disabled=true],
696
- [tabindex="-1"],
697
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=filled] button:active:not(:disabled,
698
- [aria-disabled=true],
699
- [tabindex="-1"],
700
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=filled] button:active:not(:disabled,
701
- [aria-disabled=true],
702
- [tabindex="-1"],
703
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=filled] a:active:not(:disabled,
704
- [aria-disabled=true],
705
- [tabindex="-1"],
706
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=filled] a:active:not(:disabled,
707
- [aria-disabled=true],
708
- [tabindex="-1"],
709
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
710
- cursor: pointer;
711
- }
712
172
  .db-custom-button[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-custom-button[data-icon]:not([data-show-icon=false])::before {
713
173
  position: absolute;
714
174
  inset-block-start: calc(50% - 0.5em);
@@ -745,59 +205,17 @@
745
205
  color: var(--db-adaptive-on-bg-inverted-default);
746
206
  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
747
207
  }
748
- .db-custom-button label:has(input[type=checkbox]:checked) {
208
+ .db-custom-button label:has(input[type=checkbox]:checked):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
749
209
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
750
210
  }
751
- .db-custom-button label:has(input[type=checkbox]:checked):hover:not(:disabled,
752
- [aria-disabled=true],
753
- [tabindex="-1"],
754
- :has(:disabled)) {
211
+ .db-custom-button label:has(input[type=checkbox]:checked):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
755
212
  cursor: var(--db-overwrite-cursor, pointer);
756
213
  background-color: var(--db-adaptive-bg-inverted-contrast-max-hovered);
757
214
  }
758
- .db-custom-button label:has(input[type=checkbox]:checked):hover:not(:disabled,
759
- [aria-disabled=true],
760
- [tabindex="-1"],
761
- :has(:disabled)):is(textarea), .db-custom-button label:has(input[type=checkbox]:checked):hover:not(:disabled,
762
- [aria-disabled=true],
763
- [tabindex="-1"],
764
- :has(:disabled)):is(input) {
765
- cursor: initial;
766
- }
767
- .db-custom-button label:has(input[type=checkbox]:checked):hover:not(:disabled,
768
- [aria-disabled=true],
769
- [tabindex="-1"],
770
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button label:has(input[type=checkbox]:checked):hover:not(:disabled,
771
- [aria-disabled=true],
772
- [tabindex="-1"],
773
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
774
- cursor: pointer;
775
- }
776
- .db-custom-button label:has(input[type=checkbox]:checked):active:not(:disabled,
777
- [aria-disabled=true],
778
- [tabindex="-1"],
779
- :has(:disabled)) {
215
+ .db-custom-button label:has(input[type=checkbox]:checked):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
780
216
  cursor: var(--db-overwrite-cursor, pointer);
781
217
  background-color: var(--db-adaptive-bg-inverted-contrast-max-pressed);
782
218
  }
783
- .db-custom-button label:has(input[type=checkbox]:checked):active:not(:disabled,
784
- [aria-disabled=true],
785
- [tabindex="-1"],
786
- :has(:disabled)):is(textarea), .db-custom-button label:has(input[type=checkbox]:checked):active:not(:disabled,
787
- [aria-disabled=true],
788
- [tabindex="-1"],
789
- :has(:disabled)):is(input) {
790
- cursor: initial;
791
- }
792
- .db-custom-button label:has(input[type=checkbox]:checked):active:not(:disabled,
793
- [aria-disabled=true],
794
- [tabindex="-1"],
795
- :has(:disabled)):is(input[type=checkbox]), .db-custom-button label:has(input[type=checkbox]:checked):active:not(:disabled,
796
- [aria-disabled=true],
797
- [tabindex="-1"],
798
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
799
- cursor: pointer;
800
- }
801
219
  .db-custom-button a[tabindex="-1"] {
802
220
  cursor: default;
803
221
  pointer-events: none;