@db-ux/core-foundations 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 (12) hide show
  1. package/CHANGELOG.md +5 -1
  2. package/build/styles/absolute.css +113 -22
  3. package/build/styles/defaults/default-code.css +1 -1
  4. package/build/styles/defaults/default-elevation.css +1 -1
  5. package/build/styles/helpers/_a11y.scss +1 -1
  6. package/build/styles/helpers/_functions.scss +12 -2
  7. package/build/styles/icons/_icon-helpers.scss +1 -0
  8. package/build/styles/index.css +113 -22
  9. package/build/styles/relative.css +113 -22
  10. package/build/styles/rollup.css +113 -22
  11. package/build/styles/webpack.css +113 -22
  12. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,10 +1,14 @@
1
1
  # @db-ux/core-foundations
2
2
 
3
- ## 4.4.3
3
+ ## 4.5.0
4
4
 
5
5
  _version bump_
6
6
 
7
7
 
8
+ ## 4.4.3
9
+
10
+ _version bump_
11
+
8
12
  ## 4.4.2
9
13
 
10
14
  _version bump_
package/build/styles/absolute.css CHANGED
@@ -300,6 +300,7 @@ select,
300
300
  text-transform: none;
301
301
  overflow: clip;
302
302
  vertical-align: var(--db-icon-vertical-align, middle);
303
+ /* stylelint-disable-next-line db-ux/use-sizing */
303
304
  block-size: var(--db-icon-font-size, 1.5rem);
304
305
  aspect-ratio: 1;
305
306
  flex-shrink: 0;
@@ -6421,34 +6422,94 @@ code {
6421
6422
  transition: box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional);
6422
6423
  }
6423
6424
  }
6424
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]),
6425
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]) {
6425
+ .db-interactive-elevation:hover:not(:disabled,
6426
+ [aria-disabled=true],
6427
+ [tabindex="-1"],
6428
+ :has(:disabled)),
6429
+ [data-interactive=elevation]:hover:not(:disabled,
6430
+ [aria-disabled=true],
6431
+ [tabindex="-1"],
6432
+ :has(:disabled)) {
6426
6433
  cursor: var(--db-overwrite-cursor, pointer);
6427
6434
  box-shadow: var(--db-elevation-lg);
6428
6435
  }
6429
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input),
6430
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(textarea),
6431
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input) {
6436
+ .db-interactive-elevation:hover:not(:disabled,
6437
+ [aria-disabled=true],
6438
+ [tabindex="-1"],
6439
+ :has(:disabled)):is(textarea), .db-interactive-elevation:hover:not(:disabled,
6440
+ [aria-disabled=true],
6441
+ [tabindex="-1"],
6442
+ :has(:disabled)):is(input),
6443
+ [data-interactive=elevation]:hover:not(:disabled,
6444
+ [aria-disabled=true],
6445
+ [tabindex="-1"],
6446
+ :has(:disabled)):is(textarea),
6447
+ [data-interactive=elevation]:hover:not(:disabled,
6448
+ [aria-disabled=true],
6449
+ [tabindex="-1"],
6450
+ :has(:disabled)):is(input) {
6432
6451
  cursor: initial;
6433
6452
  }
6434
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
6435
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
6436
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6453
+ .db-interactive-elevation:hover:not(:disabled,
6454
+ [aria-disabled=true],
6455
+ [tabindex="-1"],
6456
+ :has(:disabled)):is(input[type=checkbox]), .db-interactive-elevation:hover:not(:disabled,
6457
+ [aria-disabled=true],
6458
+ [tabindex="-1"],
6459
+ :has(:disabled)):is(input[type=radio]:not(:checked)),
6460
+ [data-interactive=elevation]:hover:not(:disabled,
6461
+ [aria-disabled=true],
6462
+ [tabindex="-1"],
6463
+ :has(:disabled)):is(input[type=checkbox]),
6464
+ [data-interactive=elevation]:hover:not(:disabled,
6465
+ [aria-disabled=true],
6466
+ [tabindex="-1"],
6467
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6437
6468
  cursor: pointer;
6438
6469
  }
6439
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]),
6440
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]) {
6470
+ .db-interactive-elevation:active:not(:disabled,
6471
+ [aria-disabled=true],
6472
+ [tabindex="-1"],
6473
+ :has(:disabled)),
6474
+ [data-interactive=elevation]:active:not(:disabled,
6475
+ [aria-disabled=true],
6476
+ [tabindex="-1"],
6477
+ :has(:disabled)) {
6441
6478
  cursor: var(--db-overwrite-cursor, pointer);
6442
6479
  box-shadow: var(--db-elevation-sm);
6443
6480
  }
6444
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input),
6445
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(textarea),
6446
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input) {
6481
+ .db-interactive-elevation:active:not(:disabled,
6482
+ [aria-disabled=true],
6483
+ [tabindex="-1"],
6484
+ :has(:disabled)):is(textarea), .db-interactive-elevation:active:not(:disabled,
6485
+ [aria-disabled=true],
6486
+ [tabindex="-1"],
6487
+ :has(:disabled)):is(input),
6488
+ [data-interactive=elevation]:active:not(:disabled,
6489
+ [aria-disabled=true],
6490
+ [tabindex="-1"],
6491
+ :has(:disabled)):is(textarea),
6492
+ [data-interactive=elevation]:active:not(:disabled,
6493
+ [aria-disabled=true],
6494
+ [tabindex="-1"],
6495
+ :has(:disabled)):is(input) {
6447
6496
  cursor: initial;
6448
6497
  }
6449
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
6450
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
6451
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6498
+ .db-interactive-elevation:active:not(:disabled,
6499
+ [aria-disabled=true],
6500
+ [tabindex="-1"],
6501
+ :has(:disabled)):is(input[type=checkbox]), .db-interactive-elevation:active:not(:disabled,
6502
+ [aria-disabled=true],
6503
+ [tabindex="-1"],
6504
+ :has(:disabled)):is(input[type=radio]:not(:checked)),
6505
+ [data-interactive=elevation]:active:not(:disabled,
6506
+ [aria-disabled=true],
6507
+ [tabindex="-1"],
6508
+ :has(:disabled)):is(input[type=checkbox]),
6509
+ [data-interactive=elevation]:active:not(:disabled,
6510
+ [aria-disabled=true],
6511
+ [tabindex="-1"],
6512
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6452
6513
  cursor: pointer;
6453
6514
  }
6454
6515
 
@@ -6597,24 +6658,54 @@ a:has(code:not([class]):only-child) {
6597
6658
  color: var(--db-adaptive-on-bg-inverted-default);
6598
6659
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
6599
6660
  }
6600
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]) {
6661
+ a:has(code:not([class]):only-child):hover:not(:disabled,
6662
+ [aria-disabled=true],
6663
+ [tabindex="-1"],
6664
+ :has(:disabled)) {
6601
6665
  cursor: var(--db-overwrite-cursor, pointer);
6602
6666
  color: var(--db-adaptive-on-bg-inverted-hovered);
6603
6667
  }
6604
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input) {
6668
+ a:has(code:not([class]):only-child):hover:not(:disabled,
6669
+ [aria-disabled=true],
6670
+ [tabindex="-1"],
6671
+ :has(:disabled)):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled,
6672
+ [aria-disabled=true],
6673
+ [tabindex="-1"],
6674
+ :has(:disabled)):is(input) {
6605
6675
  cursor: initial;
6606
6676
  }
6607
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6677
+ a:has(code:not([class]):only-child):hover:not(:disabled,
6678
+ [aria-disabled=true],
6679
+ [tabindex="-1"],
6680
+ :has(:disabled)):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled,
6681
+ [aria-disabled=true],
6682
+ [tabindex="-1"],
6683
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6608
6684
  cursor: pointer;
6609
6685
  }
6610
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]) {
6686
+ a:has(code:not([class]):only-child):active:not(:disabled,
6687
+ [aria-disabled=true],
6688
+ [tabindex="-1"],
6689
+ :has(:disabled)) {
6611
6690
  cursor: var(--db-overwrite-cursor, pointer);
6612
6691
  color: var(--db-adaptive-on-bg-inverted-pressed);
6613
6692
  }
6614
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input) {
6693
+ a:has(code:not([class]):only-child):active:not(:disabled,
6694
+ [aria-disabled=true],
6695
+ [tabindex="-1"],
6696
+ :has(:disabled)):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled,
6697
+ [aria-disabled=true],
6698
+ [tabindex="-1"],
6699
+ :has(:disabled)):is(input) {
6615
6700
  cursor: initial;
6616
6701
  }
6617
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6702
+ a:has(code:not([class]):only-child):active:not(:disabled,
6703
+ [aria-disabled=true],
6704
+ [tabindex="-1"],
6705
+ :has(:disabled)):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled,
6706
+ [aria-disabled=true],
6707
+ [tabindex="-1"],
6708
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6618
6709
  cursor: pointer;
6619
6710
  }
6620
6711
  a:has(code:not([class]):only-child) > code {
package/build/styles/defaults/default-code.css CHANGED
@@ -94,4 +94,4 @@
94
94
  --db-neutral-on-bg-vibrant-hovered
95
95
  );--db-adaptive-on-bg-vibrant-pressed:var(
96
96
  --db-neutral-on-bg-vibrant-pressed
97
- )}}blockquote:not([class]){background-color:var(--db-neutral-bg-basic-transparent-semi-default);color:var(--db-neutral-on-bg-basic-emphasis-100-default)}blockquote:not([class]):after,blockquote:not([class]):before{--db-icon-color:var(--db-neutral-on-bg-basic-emphasis-100-default)}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}pre:not([class]):has(code){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding:var(--db-spacing-fixed-xs)}pre:not([class]):has(code),pre:not([class]):has(code) code,pre:not([class]):has(code) span{font-family:monospace}a:has(code:not([class]):only-child){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default)}a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true]){color:var(--db-adaptive-on-bg-inverted-hovered);cursor:var(--db-overwrite-cursor,pointer)}a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true]):is(input),a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true]){color:var(--db-adaptive-on-bg-inverted-pressed);cursor:var(--db-overwrite-cursor,pointer)}a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true]):is(input),a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code:not([class]):only-child)>code{color:inherit}code:not([class]){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding-block:var(--db-spacing-fixed-3xs);padding-inline:var(--db-spacing-fixed-2xs)}code:not([class]),code:not([class]) span{font-family:monospace}blockquote:not([class]){margin:0;padding:var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md)}
97
+ )}}blockquote:not([class]){background-color:var(--db-neutral-bg-basic-transparent-semi-default);color:var(--db-neutral-on-bg-basic-emphasis-100-default)}blockquote:not([class]):after,blockquote:not([class]):before{--db-icon-color:var(--db-neutral-on-bg-basic-emphasis-100-default)}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}pre:not([class]):has(code){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding:var(--db-spacing-fixed-xs)}pre:not([class]):has(code),pre:not([class]):has(code) code,pre:not([class]):has(code) span{font-family:monospace}a:has(code:not([class]):only-child){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default)}a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)){color:var(--db-adaptive-on-bg-inverted-hovered);cursor:var(--db-overwrite-cursor,pointer)}a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea){cursor:auto}a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),a:has(code:not([class]):only-child):hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)){color:var(--db-adaptive-on-bg-inverted-pressed);cursor:var(--db-overwrite-cursor,pointer)}a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea){cursor:auto}a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),a:has(code:not([class]):only-child):active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)){cursor:pointer}a:has(code:not([class]):only-child)>code{color:inherit}code:not([class]){background-color:var(--db-adaptive-bg-inverted-contrast-max-default);color:var(--db-adaptive-on-bg-inverted-default);padding-block:var(--db-spacing-fixed-3xs);padding-inline:var(--db-spacing-fixed-2xs)}code:not([class]),code:not([class]) span{font-family:monospace}blockquote:not([class]){margin:0;padding:var(--db-spacing-fixed-sm) var(--db-spacing-fixed-md)}
package/build/styles/defaults/default-elevation.css CHANGED
@@ -1 +1 @@
1
- @layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}.db-interactive-elevation,[data-interactive=elevation]{box-shadow:var(--db-elevation-md);cursor:pointer}@media screen and (prefers-reduced-motion:no-preference){.db-interactive-elevation,[data-interactive=elevation]{transition:box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional)}}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]){box-shadow:var(--db-elevation-lg);cursor:var(--db-overwrite-cursor,pointer)}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]):is(input),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]):is(textarea),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]):is(input),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]){box-shadow:var(--db-elevation-sm);cursor:var(--db-overwrite-cursor,pointer)}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]):is(input),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]):is(textarea),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]):is(input),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]):is(textarea){cursor:auto}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]):is(input[type=checkbox]),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true]):is(input[type=radio]:not(:checked)){cursor:pointer}
1
+ @layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}@layer variables{}.db-interactive-elevation,[data-interactive=elevation]{box-shadow:var(--db-elevation-md);cursor:pointer}@media screen and (prefers-reduced-motion:no-preference){.db-interactive-elevation,[data-interactive=elevation]{transition:box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional)}}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)){box-shadow:var(--db-elevation-lg);cursor:var(--db-overwrite-cursor,pointer)}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea){cursor:auto}.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),.db-interactive-elevation:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),[data-interactive=elevation]:hover:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)){cursor:pointer}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)){box-shadow:var(--db-elevation-sm);cursor:var(--db-overwrite-cursor,pointer)}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(textarea){cursor:auto}.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),.db-interactive-elevation:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=checkbox]),[data-interactive=elevation]:active:not(:disabled,[aria-disabled=true],[tabindex="-1"],:has(:disabled)):is(input[type=radio]:not(:checked)){cursor:pointer}
package/build/styles/helpers/_a11y.scss CHANGED
@@ -1,5 +1,5 @@
1
+ // stylelint-disable property-no-deprecated, db-ux/use-sizing
1
2
  %a11y-visually-hidden {
2
- // stylelint-disable-next-line property-no-deprecated
3
3
  clip: rect(0, 0, 0, 0) !important;
4
4
  overflow: hidden !important;
5
5
  white-space: nowrap !important;
package/build/styles/helpers/_functions.scss CHANGED
@@ -29,7 +29,12 @@ $cursor-pointer: var(--db-overwrite-cursor, pointer);
29
29
 
30
30
  @mixin hover() {
31
31
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
32
- &:hover:not(:disabled, [aria-disabled="true"]) {
32
+ &:hover:not(
33
+ :disabled,
34
+ [aria-disabled="true"],
35
+ [tabindex="-1"],
36
+ :has(:disabled)
37
+ ) {
33
38
  @include cursor-pointer {
34
39
  @content;
35
40
  }
@@ -37,7 +42,12 @@ $cursor-pointer: var(--db-overwrite-cursor, pointer);
37
42
  }
38
43
 
39
44
  @mixin active() {
40
- &:active:not(:disabled, [aria-disabled="true"]) {
45
+ &:active:not(
46
+ :disabled,
47
+ [aria-disabled="true"],
48
+ [tabindex="-1"],
49
+ :has(:disabled)
50
+ ) {
41
51
  @include cursor-pointer {
42
52
  @content;
43
53
  }
package/build/styles/icons/_icon-helpers.scss CHANGED
@@ -160,6 +160,7 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
160
160
  text-transform: none;
161
161
  overflow: clip;
162
162
  vertical-align: var(--db-icon-vertical-align, middle);
163
+ /* stylelint-disable-next-line db-ux/use-sizing */
163
164
  block-size: $default-icon-font-size;
164
165
  aspect-ratio: 1;
165
166
  flex-shrink: 0;
package/build/styles/index.css CHANGED
@@ -649,34 +649,94 @@ code {
649
649
  transition: box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional);
650
650
  }
651
651
  }
652
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]),
653
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]) {
652
+ .db-interactive-elevation:hover:not(:disabled,
653
+ [aria-disabled=true],
654
+ [tabindex="-1"],
655
+ :has(:disabled)),
656
+ [data-interactive=elevation]:hover:not(:disabled,
657
+ [aria-disabled=true],
658
+ [tabindex="-1"],
659
+ :has(:disabled)) {
654
660
  cursor: var(--db-overwrite-cursor, pointer);
655
661
  box-shadow: var(--db-elevation-lg);
656
662
  }
657
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input),
658
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(textarea),
659
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input) {
663
+ .db-interactive-elevation:hover:not(:disabled,
664
+ [aria-disabled=true],
665
+ [tabindex="-1"],
666
+ :has(:disabled)):is(textarea), .db-interactive-elevation:hover:not(:disabled,
667
+ [aria-disabled=true],
668
+ [tabindex="-1"],
669
+ :has(:disabled)):is(input),
670
+ [data-interactive=elevation]:hover:not(:disabled,
671
+ [aria-disabled=true],
672
+ [tabindex="-1"],
673
+ :has(:disabled)):is(textarea),
674
+ [data-interactive=elevation]:hover:not(:disabled,
675
+ [aria-disabled=true],
676
+ [tabindex="-1"],
677
+ :has(:disabled)):is(input) {
660
678
  cursor: initial;
661
679
  }
662
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
663
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
664
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
680
+ .db-interactive-elevation:hover:not(:disabled,
681
+ [aria-disabled=true],
682
+ [tabindex="-1"],
683
+ :has(:disabled)):is(input[type=checkbox]), .db-interactive-elevation:hover:not(:disabled,
684
+ [aria-disabled=true],
685
+ [tabindex="-1"],
686
+ :has(:disabled)):is(input[type=radio]:not(:checked)),
687
+ [data-interactive=elevation]:hover:not(:disabled,
688
+ [aria-disabled=true],
689
+ [tabindex="-1"],
690
+ :has(:disabled)):is(input[type=checkbox]),
691
+ [data-interactive=elevation]:hover:not(:disabled,
692
+ [aria-disabled=true],
693
+ [tabindex="-1"],
694
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
665
695
  cursor: pointer;
666
696
  }
667
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]),
668
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]) {
697
+ .db-interactive-elevation:active:not(:disabled,
698
+ [aria-disabled=true],
699
+ [tabindex="-1"],
700
+ :has(:disabled)),
701
+ [data-interactive=elevation]:active:not(:disabled,
702
+ [aria-disabled=true],
703
+ [tabindex="-1"],
704
+ :has(:disabled)) {
669
705
  cursor: var(--db-overwrite-cursor, pointer);
670
706
  box-shadow: var(--db-elevation-sm);
671
707
  }
672
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input),
673
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(textarea),
674
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input) {
708
+ .db-interactive-elevation:active:not(:disabled,
709
+ [aria-disabled=true],
710
+ [tabindex="-1"],
711
+ :has(:disabled)):is(textarea), .db-interactive-elevation:active:not(:disabled,
712
+ [aria-disabled=true],
713
+ [tabindex="-1"],
714
+ :has(:disabled)):is(input),
715
+ [data-interactive=elevation]:active:not(:disabled,
716
+ [aria-disabled=true],
717
+ [tabindex="-1"],
718
+ :has(:disabled)):is(textarea),
719
+ [data-interactive=elevation]:active:not(:disabled,
720
+ [aria-disabled=true],
721
+ [tabindex="-1"],
722
+ :has(:disabled)):is(input) {
675
723
  cursor: initial;
676
724
  }
677
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
678
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
679
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
725
+ .db-interactive-elevation:active:not(:disabled,
726
+ [aria-disabled=true],
727
+ [tabindex="-1"],
728
+ :has(:disabled)):is(input[type=checkbox]), .db-interactive-elevation:active:not(:disabled,
729
+ [aria-disabled=true],
730
+ [tabindex="-1"],
731
+ :has(:disabled)):is(input[type=radio]:not(:checked)),
732
+ [data-interactive=elevation]:active:not(:disabled,
733
+ [aria-disabled=true],
734
+ [tabindex="-1"],
735
+ :has(:disabled)):is(input[type=checkbox]),
736
+ [data-interactive=elevation]:active:not(:disabled,
737
+ [aria-disabled=true],
738
+ [tabindex="-1"],
739
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
680
740
  cursor: pointer;
681
741
  }
682
742
 
@@ -825,24 +885,54 @@ a:has(code:not([class]):only-child) {
825
885
  color: var(--db-adaptive-on-bg-inverted-default);
826
886
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
827
887
  }
828
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]) {
888
+ a:has(code:not([class]):only-child):hover:not(:disabled,
889
+ [aria-disabled=true],
890
+ [tabindex="-1"],
891
+ :has(:disabled)) {
829
892
  cursor: var(--db-overwrite-cursor, pointer);
830
893
  color: var(--db-adaptive-on-bg-inverted-hovered);
831
894
  }
832
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input) {
895
+ a:has(code:not([class]):only-child):hover:not(:disabled,
896
+ [aria-disabled=true],
897
+ [tabindex="-1"],
898
+ :has(:disabled)):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled,
899
+ [aria-disabled=true],
900
+ [tabindex="-1"],
901
+ :has(:disabled)):is(input) {
833
902
  cursor: initial;
834
903
  }
835
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
904
+ a:has(code:not([class]):only-child):hover:not(:disabled,
905
+ [aria-disabled=true],
906
+ [tabindex="-1"],
907
+ :has(:disabled)):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled,
908
+ [aria-disabled=true],
909
+ [tabindex="-1"],
910
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
836
911
  cursor: pointer;
837
912
  }
838
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]) {
913
+ a:has(code:not([class]):only-child):active:not(:disabled,
914
+ [aria-disabled=true],
915
+ [tabindex="-1"],
916
+ :has(:disabled)) {
839
917
  cursor: var(--db-overwrite-cursor, pointer);
840
918
  color: var(--db-adaptive-on-bg-inverted-pressed);
841
919
  }
842
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input) {
920
+ a:has(code:not([class]):only-child):active:not(:disabled,
921
+ [aria-disabled=true],
922
+ [tabindex="-1"],
923
+ :has(:disabled)):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled,
924
+ [aria-disabled=true],
925
+ [tabindex="-1"],
926
+ :has(:disabled)):is(input) {
843
927
  cursor: initial;
844
928
  }
845
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
929
+ a:has(code:not([class]):only-child):active:not(:disabled,
930
+ [aria-disabled=true],
931
+ [tabindex="-1"],
932
+ :has(:disabled)):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled,
933
+ [aria-disabled=true],
934
+ [tabindex="-1"],
935
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
846
936
  cursor: pointer;
847
937
  }
848
938
  a:has(code:not([class]):only-child) > code {
@@ -885,6 +975,7 @@ blockquote:not([class]) {
885
975
  text-transform: none;
886
976
  overflow: clip;
887
977
  vertical-align: var(--db-icon-vertical-align, middle);
978
+ /* stylelint-disable-next-line db-ux/use-sizing */
888
979
  block-size: var(--db-icon-font-size, 1.5rem);
889
980
  aspect-ratio: 1;
890
981
  flex-shrink: 0;
package/build/styles/relative.css CHANGED
@@ -300,6 +300,7 @@ select,
300
300
  text-transform: none;
301
301
  overflow: clip;
302
302
  vertical-align: var(--db-icon-vertical-align, middle);
303
+ /* stylelint-disable-next-line db-ux/use-sizing */
303
304
  block-size: var(--db-icon-font-size, 1.5rem);
304
305
  aspect-ratio: 1;
305
306
  flex-shrink: 0;
@@ -6421,34 +6422,94 @@ code {
6421
6422
  transition: box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional);
6422
6423
  }
6423
6424
  }
6424
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]),
6425
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]) {
6425
+ .db-interactive-elevation:hover:not(:disabled,
6426
+ [aria-disabled=true],
6427
+ [tabindex="-1"],
6428
+ :has(:disabled)),
6429
+ [data-interactive=elevation]:hover:not(:disabled,
6430
+ [aria-disabled=true],
6431
+ [tabindex="-1"],
6432
+ :has(:disabled)) {
6426
6433
  cursor: var(--db-overwrite-cursor, pointer);
6427
6434
  box-shadow: var(--db-elevation-lg);
6428
6435
  }
6429
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input),
6430
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(textarea),
6431
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input) {
6436
+ .db-interactive-elevation:hover:not(:disabled,
6437
+ [aria-disabled=true],
6438
+ [tabindex="-1"],
6439
+ :has(:disabled)):is(textarea), .db-interactive-elevation:hover:not(:disabled,
6440
+ [aria-disabled=true],
6441
+ [tabindex="-1"],
6442
+ :has(:disabled)):is(input),
6443
+ [data-interactive=elevation]:hover:not(:disabled,
6444
+ [aria-disabled=true],
6445
+ [tabindex="-1"],
6446
+ :has(:disabled)):is(textarea),
6447
+ [data-interactive=elevation]:hover:not(:disabled,
6448
+ [aria-disabled=true],
6449
+ [tabindex="-1"],
6450
+ :has(:disabled)):is(input) {
6432
6451
  cursor: initial;
6433
6452
  }
6434
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
6435
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
6436
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6453
+ .db-interactive-elevation:hover:not(:disabled,
6454
+ [aria-disabled=true],
6455
+ [tabindex="-1"],
6456
+ :has(:disabled)):is(input[type=checkbox]), .db-interactive-elevation:hover:not(:disabled,
6457
+ [aria-disabled=true],
6458
+ [tabindex="-1"],
6459
+ :has(:disabled)):is(input[type=radio]:not(:checked)),
6460
+ [data-interactive=elevation]:hover:not(:disabled,
6461
+ [aria-disabled=true],
6462
+ [tabindex="-1"],
6463
+ :has(:disabled)):is(input[type=checkbox]),
6464
+ [data-interactive=elevation]:hover:not(:disabled,
6465
+ [aria-disabled=true],
6466
+ [tabindex="-1"],
6467
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6437
6468
  cursor: pointer;
6438
6469
  }
6439
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]),
6440
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]) {
6470
+ .db-interactive-elevation:active:not(:disabled,
6471
+ [aria-disabled=true],
6472
+ [tabindex="-1"],
6473
+ :has(:disabled)),
6474
+ [data-interactive=elevation]:active:not(:disabled,
6475
+ [aria-disabled=true],
6476
+ [tabindex="-1"],
6477
+ :has(:disabled)) {
6441
6478
  cursor: var(--db-overwrite-cursor, pointer);
6442
6479
  box-shadow: var(--db-elevation-sm);
6443
6480
  }
6444
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input),
6445
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(textarea),
6446
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input) {
6481
+ .db-interactive-elevation:active:not(:disabled,
6482
+ [aria-disabled=true],
6483
+ [tabindex="-1"],
6484
+ :has(:disabled)):is(textarea), .db-interactive-elevation:active:not(:disabled,
6485
+ [aria-disabled=true],
6486
+ [tabindex="-1"],
6487
+ :has(:disabled)):is(input),
6488
+ [data-interactive=elevation]:active:not(:disabled,
6489
+ [aria-disabled=true],
6490
+ [tabindex="-1"],
6491
+ :has(:disabled)):is(textarea),
6492
+ [data-interactive=elevation]:active:not(:disabled,
6493
+ [aria-disabled=true],
6494
+ [tabindex="-1"],
6495
+ :has(:disabled)):is(input) {
6447
6496
  cursor: initial;
6448
6497
  }
6449
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
6450
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
6451
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6498
+ .db-interactive-elevation:active:not(:disabled,
6499
+ [aria-disabled=true],
6500
+ [tabindex="-1"],
6501
+ :has(:disabled)):is(input[type=checkbox]), .db-interactive-elevation:active:not(:disabled,
6502
+ [aria-disabled=true],
6503
+ [tabindex="-1"],
6504
+ :has(:disabled)):is(input[type=radio]:not(:checked)),
6505
+ [data-interactive=elevation]:active:not(:disabled,
6506
+ [aria-disabled=true],
6507
+ [tabindex="-1"],
6508
+ :has(:disabled)):is(input[type=checkbox]),
6509
+ [data-interactive=elevation]:active:not(:disabled,
6510
+ [aria-disabled=true],
6511
+ [tabindex="-1"],
6512
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6452
6513
  cursor: pointer;
6453
6514
  }
6454
6515
 
@@ -6597,24 +6658,54 @@ a:has(code:not([class]):only-child) {
6597
6658
  color: var(--db-adaptive-on-bg-inverted-default);
6598
6659
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
6599
6660
  }
6600
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]) {
6661
+ a:has(code:not([class]):only-child):hover:not(:disabled,
6662
+ [aria-disabled=true],
6663
+ [tabindex="-1"],
6664
+ :has(:disabled)) {
6601
6665
  cursor: var(--db-overwrite-cursor, pointer);
6602
6666
  color: var(--db-adaptive-on-bg-inverted-hovered);
6603
6667
  }
6604
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input) {
6668
+ a:has(code:not([class]):only-child):hover:not(:disabled,
6669
+ [aria-disabled=true],
6670
+ [tabindex="-1"],
6671
+ :has(:disabled)):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled,
6672
+ [aria-disabled=true],
6673
+ [tabindex="-1"],
6674
+ :has(:disabled)):is(input) {
6605
6675
  cursor: initial;
6606
6676
  }
6607
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6677
+ a:has(code:not([class]):only-child):hover:not(:disabled,
6678
+ [aria-disabled=true],
6679
+ [tabindex="-1"],
6680
+ :has(:disabled)):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled,
6681
+ [aria-disabled=true],
6682
+ [tabindex="-1"],
6683
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6608
6684
  cursor: pointer;
6609
6685
  }
6610
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]) {
6686
+ a:has(code:not([class]):only-child):active:not(:disabled,
6687
+ [aria-disabled=true],
6688
+ [tabindex="-1"],
6689
+ :has(:disabled)) {
6611
6690
  cursor: var(--db-overwrite-cursor, pointer);
6612
6691
  color: var(--db-adaptive-on-bg-inverted-pressed);
6613
6692
  }
6614
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input) {
6693
+ a:has(code:not([class]):only-child):active:not(:disabled,
6694
+ [aria-disabled=true],
6695
+ [tabindex="-1"],
6696
+ :has(:disabled)):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled,
6697
+ [aria-disabled=true],
6698
+ [tabindex="-1"],
6699
+ :has(:disabled)):is(input) {
6615
6700
  cursor: initial;
6616
6701
  }
6617
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6702
+ a:has(code:not([class]):only-child):active:not(:disabled,
6703
+ [aria-disabled=true],
6704
+ [tabindex="-1"],
6705
+ :has(:disabled)):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled,
6706
+ [aria-disabled=true],
6707
+ [tabindex="-1"],
6708
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6618
6709
  cursor: pointer;
6619
6710
  }
6620
6711
  a:has(code:not([class]):only-child) > code {
package/build/styles/rollup.css CHANGED
@@ -300,6 +300,7 @@ select,
300
300
  text-transform: none;
301
301
  overflow: clip;
302
302
  vertical-align: var(--db-icon-vertical-align, middle);
303
+ /* stylelint-disable-next-line db-ux/use-sizing */
303
304
  block-size: var(--db-icon-font-size, 1.5rem);
304
305
  aspect-ratio: 1;
305
306
  flex-shrink: 0;
@@ -6421,34 +6422,94 @@ code {
6421
6422
  transition: box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional);
6422
6423
  }
6423
6424
  }
6424
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]),
6425
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]) {
6425
+ .db-interactive-elevation:hover:not(:disabled,
6426
+ [aria-disabled=true],
6427
+ [tabindex="-1"],
6428
+ :has(:disabled)),
6429
+ [data-interactive=elevation]:hover:not(:disabled,
6430
+ [aria-disabled=true],
6431
+ [tabindex="-1"],
6432
+ :has(:disabled)) {
6426
6433
  cursor: var(--db-overwrite-cursor, pointer);
6427
6434
  box-shadow: var(--db-elevation-lg);
6428
6435
  }
6429
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input),
6430
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(textarea),
6431
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input) {
6436
+ .db-interactive-elevation:hover:not(:disabled,
6437
+ [aria-disabled=true],
6438
+ [tabindex="-1"],
6439
+ :has(:disabled)):is(textarea), .db-interactive-elevation:hover:not(:disabled,
6440
+ [aria-disabled=true],
6441
+ [tabindex="-1"],
6442
+ :has(:disabled)):is(input),
6443
+ [data-interactive=elevation]:hover:not(:disabled,
6444
+ [aria-disabled=true],
6445
+ [tabindex="-1"],
6446
+ :has(:disabled)):is(textarea),
6447
+ [data-interactive=elevation]:hover:not(:disabled,
6448
+ [aria-disabled=true],
6449
+ [tabindex="-1"],
6450
+ :has(:disabled)):is(input) {
6432
6451
  cursor: initial;
6433
6452
  }
6434
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
6435
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
6436
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6453
+ .db-interactive-elevation:hover:not(:disabled,
6454
+ [aria-disabled=true],
6455
+ [tabindex="-1"],
6456
+ :has(:disabled)):is(input[type=checkbox]), .db-interactive-elevation:hover:not(:disabled,
6457
+ [aria-disabled=true],
6458
+ [tabindex="-1"],
6459
+ :has(:disabled)):is(input[type=radio]:not(:checked)),
6460
+ [data-interactive=elevation]:hover:not(:disabled,
6461
+ [aria-disabled=true],
6462
+ [tabindex="-1"],
6463
+ :has(:disabled)):is(input[type=checkbox]),
6464
+ [data-interactive=elevation]:hover:not(:disabled,
6465
+ [aria-disabled=true],
6466
+ [tabindex="-1"],
6467
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6437
6468
  cursor: pointer;
6438
6469
  }
6439
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]),
6440
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]) {
6470
+ .db-interactive-elevation:active:not(:disabled,
6471
+ [aria-disabled=true],
6472
+ [tabindex="-1"],
6473
+ :has(:disabled)),
6474
+ [data-interactive=elevation]:active:not(:disabled,
6475
+ [aria-disabled=true],
6476
+ [tabindex="-1"],
6477
+ :has(:disabled)) {
6441
6478
  cursor: var(--db-overwrite-cursor, pointer);
6442
6479
  box-shadow: var(--db-elevation-sm);
6443
6480
  }
6444
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input),
6445
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(textarea),
6446
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input) {
6481
+ .db-interactive-elevation:active:not(:disabled,
6482
+ [aria-disabled=true],
6483
+ [tabindex="-1"],
6484
+ :has(:disabled)):is(textarea), .db-interactive-elevation:active:not(:disabled,
6485
+ [aria-disabled=true],
6486
+ [tabindex="-1"],
6487
+ :has(:disabled)):is(input),
6488
+ [data-interactive=elevation]:active:not(:disabled,
6489
+ [aria-disabled=true],
6490
+ [tabindex="-1"],
6491
+ :has(:disabled)):is(textarea),
6492
+ [data-interactive=elevation]:active:not(:disabled,
6493
+ [aria-disabled=true],
6494
+ [tabindex="-1"],
6495
+ :has(:disabled)):is(input) {
6447
6496
  cursor: initial;
6448
6497
  }
6449
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
6450
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
6451
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6498
+ .db-interactive-elevation:active:not(:disabled,
6499
+ [aria-disabled=true],
6500
+ [tabindex="-1"],
6501
+ :has(:disabled)):is(input[type=checkbox]), .db-interactive-elevation:active:not(:disabled,
6502
+ [aria-disabled=true],
6503
+ [tabindex="-1"],
6504
+ :has(:disabled)):is(input[type=radio]:not(:checked)),
6505
+ [data-interactive=elevation]:active:not(:disabled,
6506
+ [aria-disabled=true],
6507
+ [tabindex="-1"],
6508
+ :has(:disabled)):is(input[type=checkbox]),
6509
+ [data-interactive=elevation]:active:not(:disabled,
6510
+ [aria-disabled=true],
6511
+ [tabindex="-1"],
6512
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6452
6513
  cursor: pointer;
6453
6514
  }
6454
6515
 
@@ -6597,24 +6658,54 @@ a:has(code:not([class]):only-child) {
6597
6658
  color: var(--db-adaptive-on-bg-inverted-default);
6598
6659
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
6599
6660
  }
6600
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]) {
6661
+ a:has(code:not([class]):only-child):hover:not(:disabled,
6662
+ [aria-disabled=true],
6663
+ [tabindex="-1"],
6664
+ :has(:disabled)) {
6601
6665
  cursor: var(--db-overwrite-cursor, pointer);
6602
6666
  color: var(--db-adaptive-on-bg-inverted-hovered);
6603
6667
  }
6604
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input) {
6668
+ a:has(code:not([class]):only-child):hover:not(:disabled,
6669
+ [aria-disabled=true],
6670
+ [tabindex="-1"],
6671
+ :has(:disabled)):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled,
6672
+ [aria-disabled=true],
6673
+ [tabindex="-1"],
6674
+ :has(:disabled)):is(input) {
6605
6675
  cursor: initial;
6606
6676
  }
6607
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6677
+ a:has(code:not([class]):only-child):hover:not(:disabled,
6678
+ [aria-disabled=true],
6679
+ [tabindex="-1"],
6680
+ :has(:disabled)):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled,
6681
+ [aria-disabled=true],
6682
+ [tabindex="-1"],
6683
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6608
6684
  cursor: pointer;
6609
6685
  }
6610
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]) {
6686
+ a:has(code:not([class]):only-child):active:not(:disabled,
6687
+ [aria-disabled=true],
6688
+ [tabindex="-1"],
6689
+ :has(:disabled)) {
6611
6690
  cursor: var(--db-overwrite-cursor, pointer);
6612
6691
  color: var(--db-adaptive-on-bg-inverted-pressed);
6613
6692
  }
6614
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input) {
6693
+ a:has(code:not([class]):only-child):active:not(:disabled,
6694
+ [aria-disabled=true],
6695
+ [tabindex="-1"],
6696
+ :has(:disabled)):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled,
6697
+ [aria-disabled=true],
6698
+ [tabindex="-1"],
6699
+ :has(:disabled)):is(input) {
6615
6700
  cursor: initial;
6616
6701
  }
6617
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6702
+ a:has(code:not([class]):only-child):active:not(:disabled,
6703
+ [aria-disabled=true],
6704
+ [tabindex="-1"],
6705
+ :has(:disabled)):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled,
6706
+ [aria-disabled=true],
6707
+ [tabindex="-1"],
6708
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6618
6709
  cursor: pointer;
6619
6710
  }
6620
6711
  a:has(code:not([class]):only-child) > code {
package/build/styles/webpack.css CHANGED
@@ -300,6 +300,7 @@ select,
300
300
  text-transform: none;
301
301
  overflow: clip;
302
302
  vertical-align: var(--db-icon-vertical-align, middle);
303
+ /* stylelint-disable-next-line db-ux/use-sizing */
303
304
  block-size: var(--db-icon-font-size, 1.5rem);
304
305
  aspect-ratio: 1;
305
306
  flex-shrink: 0;
@@ -6421,34 +6422,94 @@ code {
6421
6422
  transition: box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional);
6422
6423
  }
6423
6424
  }
6424
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]),
6425
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]) {
6425
+ .db-interactive-elevation:hover:not(:disabled,
6426
+ [aria-disabled=true],
6427
+ [tabindex="-1"],
6428
+ :has(:disabled)),
6429
+ [data-interactive=elevation]:hover:not(:disabled,
6430
+ [aria-disabled=true],
6431
+ [tabindex="-1"],
6432
+ :has(:disabled)) {
6426
6433
  cursor: var(--db-overwrite-cursor, pointer);
6427
6434
  box-shadow: var(--db-elevation-lg);
6428
6435
  }
6429
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input),
6430
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(textarea),
6431
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input) {
6436
+ .db-interactive-elevation:hover:not(:disabled,
6437
+ [aria-disabled=true],
6438
+ [tabindex="-1"],
6439
+ :has(:disabled)):is(textarea), .db-interactive-elevation:hover:not(:disabled,
6440
+ [aria-disabled=true],
6441
+ [tabindex="-1"],
6442
+ :has(:disabled)):is(input),
6443
+ [data-interactive=elevation]:hover:not(:disabled,
6444
+ [aria-disabled=true],
6445
+ [tabindex="-1"],
6446
+ :has(:disabled)):is(textarea),
6447
+ [data-interactive=elevation]:hover:not(:disabled,
6448
+ [aria-disabled=true],
6449
+ [tabindex="-1"],
6450
+ :has(:disabled)):is(input) {
6432
6451
  cursor: initial;
6433
6452
  }
6434
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
6435
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
6436
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6453
+ .db-interactive-elevation:hover:not(:disabled,
6454
+ [aria-disabled=true],
6455
+ [tabindex="-1"],
6456
+ :has(:disabled)):is(input[type=checkbox]), .db-interactive-elevation:hover:not(:disabled,
6457
+ [aria-disabled=true],
6458
+ [tabindex="-1"],
6459
+ :has(:disabled)):is(input[type=radio]:not(:checked)),
6460
+ [data-interactive=elevation]:hover:not(:disabled,
6461
+ [aria-disabled=true],
6462
+ [tabindex="-1"],
6463
+ :has(:disabled)):is(input[type=checkbox]),
6464
+ [data-interactive=elevation]:hover:not(:disabled,
6465
+ [aria-disabled=true],
6466
+ [tabindex="-1"],
6467
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6437
6468
  cursor: pointer;
6438
6469
  }
6439
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]),
6440
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]) {
6470
+ .db-interactive-elevation:active:not(:disabled,
6471
+ [aria-disabled=true],
6472
+ [tabindex="-1"],
6473
+ :has(:disabled)),
6474
+ [data-interactive=elevation]:active:not(:disabled,
6475
+ [aria-disabled=true],
6476
+ [tabindex="-1"],
6477
+ :has(:disabled)) {
6441
6478
  cursor: var(--db-overwrite-cursor, pointer);
6442
6479
  box-shadow: var(--db-elevation-sm);
6443
6480
  }
6444
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input),
6445
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(textarea),
6446
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input) {
6481
+ .db-interactive-elevation:active:not(:disabled,
6482
+ [aria-disabled=true],
6483
+ [tabindex="-1"],
6484
+ :has(:disabled)):is(textarea), .db-interactive-elevation:active:not(:disabled,
6485
+ [aria-disabled=true],
6486
+ [tabindex="-1"],
6487
+ :has(:disabled)):is(input),
6488
+ [data-interactive=elevation]:active:not(:disabled,
6489
+ [aria-disabled=true],
6490
+ [tabindex="-1"],
6491
+ :has(:disabled)):is(textarea),
6492
+ [data-interactive=elevation]:active:not(:disabled,
6493
+ [aria-disabled=true],
6494
+ [tabindex="-1"],
6495
+ :has(:disabled)):is(input) {
6447
6496
  cursor: initial;
6448
6497
  }
6449
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)),
6450
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
6451
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6498
+ .db-interactive-elevation:active:not(:disabled,
6499
+ [aria-disabled=true],
6500
+ [tabindex="-1"],
6501
+ :has(:disabled)):is(input[type=checkbox]), .db-interactive-elevation:active:not(:disabled,
6502
+ [aria-disabled=true],
6503
+ [tabindex="-1"],
6504
+ :has(:disabled)):is(input[type=radio]:not(:checked)),
6505
+ [data-interactive=elevation]:active:not(:disabled,
6506
+ [aria-disabled=true],
6507
+ [tabindex="-1"],
6508
+ :has(:disabled)):is(input[type=checkbox]),
6509
+ [data-interactive=elevation]:active:not(:disabled,
6510
+ [aria-disabled=true],
6511
+ [tabindex="-1"],
6512
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6452
6513
  cursor: pointer;
6453
6514
  }
6454
6515
 
@@ -6597,24 +6658,54 @@ a:has(code:not([class]):only-child) {
6597
6658
  color: var(--db-adaptive-on-bg-inverted-default);
6598
6659
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
6599
6660
  }
6600
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]) {
6661
+ a:has(code:not([class]):only-child):hover:not(:disabled,
6662
+ [aria-disabled=true],
6663
+ [tabindex="-1"],
6664
+ :has(:disabled)) {
6601
6665
  cursor: var(--db-overwrite-cursor, pointer);
6602
6666
  color: var(--db-adaptive-on-bg-inverted-hovered);
6603
6667
  }
6604
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input) {
6668
+ a:has(code:not([class]):only-child):hover:not(:disabled,
6669
+ [aria-disabled=true],
6670
+ [tabindex="-1"],
6671
+ :has(:disabled)):is(textarea), a:has(code:not([class]):only-child):hover:not(:disabled,
6672
+ [aria-disabled=true],
6673
+ [tabindex="-1"],
6674
+ :has(:disabled)):is(input) {
6605
6675
  cursor: initial;
6606
6676
  }
6607
- a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6677
+ a:has(code:not([class]):only-child):hover:not(:disabled,
6678
+ [aria-disabled=true],
6679
+ [tabindex="-1"],
6680
+ :has(:disabled)):is(input[type=checkbox]), a:has(code:not([class]):only-child):hover:not(:disabled,
6681
+ [aria-disabled=true],
6682
+ [tabindex="-1"],
6683
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6608
6684
  cursor: pointer;
6609
6685
  }
6610
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]) {
6686
+ a:has(code:not([class]):only-child):active:not(:disabled,
6687
+ [aria-disabled=true],
6688
+ [tabindex="-1"],
6689
+ :has(:disabled)) {
6611
6690
  cursor: var(--db-overwrite-cursor, pointer);
6612
6691
  color: var(--db-adaptive-on-bg-inverted-pressed);
6613
6692
  }
6614
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input) {
6693
+ a:has(code:not([class]):only-child):active:not(:disabled,
6694
+ [aria-disabled=true],
6695
+ [tabindex="-1"],
6696
+ :has(:disabled)):is(textarea), a:has(code:not([class]):only-child):active:not(:disabled,
6697
+ [aria-disabled=true],
6698
+ [tabindex="-1"],
6699
+ :has(:disabled)):is(input) {
6615
6700
  cursor: initial;
6616
6701
  }
6617
- a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
6702
+ a:has(code:not([class]):only-child):active:not(:disabled,
6703
+ [aria-disabled=true],
6704
+ [tabindex="-1"],
6705
+ :has(:disabled)):is(input[type=checkbox]), a:has(code:not([class]):only-child):active:not(:disabled,
6706
+ [aria-disabled=true],
6707
+ [tabindex="-1"],
6708
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
6618
6709
  cursor: pointer;
6619
6710
  }
6620
6711
  a:has(code:not([class]):only-child) > code {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@db-ux/core-foundations",
3
- "version": "4.4.3",
3
+ "version": "4.5.0",
4
4
  "type": "module",
5
5
  "description": "Provides basic tokens and assets based on DB UX Design System (Version 3).",
6
6
  "repository": {
@@ -54,8 +54,8 @@
54
54
  "@playwright/test": "1.58.2",
55
55
  "cpr": "3.0.1",
56
56
  "cssnano": "7.1.2",
57
- "glob": "13.0.5",
58
- "nodemon": "3.1.11",
57
+ "glob": "13.0.6",
58
+ "nodemon": "3.1.14",
59
59
  "prettier": "3.8.1",
60
60
  "sass": "1.85.1",
61
61
  "tsx": "4.21.0",