@db-ux/core-foundations 4.4.2 → 4.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/CHANGELOG.md +9 -1
  2. package/build/styles/_screen-sizes.scss +2 -4
  3. package/build/styles/_variables.scss +10 -10
  4. package/build/styles/absolute.css +113 -45
  5. package/build/styles/colors/_variables.additional-palette.scss +2 -2
  6. package/build/styles/colors/_variables.palette.scss +2 -2
  7. package/build/styles/defaults/default-code.css +1 -1
  8. package/build/styles/defaults/default-elevation.css +1 -1
  9. package/build/styles/defaults/default-required.scss +1 -1
  10. package/build/styles/density/classes/all.css +0 -22
  11. package/build/styles/density/classes/expressive.css +0 -22
  12. package/build/styles/density/classes/functional.css +0 -22
  13. package/build/styles/density/classes/regular.css +0 -22
  14. package/build/styles/fonts/_font-sizes.scss +4 -6
  15. package/build/styles/fonts/_variables.scss +2 -2
  16. package/build/styles/fonts/classes/all.css +0 -19
  17. package/build/styles/fonts/classes/body/2xl.css +0 -19
  18. package/build/styles/fonts/classes/body/2xs.css +0 -19
  19. package/build/styles/fonts/classes/body/3xl.css +0 -19
  20. package/build/styles/fonts/classes/body/3xs.css +0 -19
  21. package/build/styles/fonts/classes/body/all.css +0 -19
  22. package/build/styles/fonts/classes/body/lg.css +0 -19
  23. package/build/styles/fonts/classes/body/md.css +0 -19
  24. package/build/styles/fonts/classes/body/sm.css +0 -19
  25. package/build/styles/fonts/classes/body/xl.css +0 -19
  26. package/build/styles/fonts/classes/body/xs.css +0 -19
  27. package/build/styles/fonts/classes/headline/2xl.css +0 -19
  28. package/build/styles/fonts/classes/headline/2xs.css +0 -19
  29. package/build/styles/fonts/classes/headline/3xl.css +0 -19
  30. package/build/styles/fonts/classes/headline/3xs.css +0 -19
  31. package/build/styles/fonts/classes/headline/all.css +0 -19
  32. package/build/styles/fonts/classes/headline/lg.css +0 -19
  33. package/build/styles/fonts/classes/headline/md.css +0 -19
  34. package/build/styles/fonts/classes/headline/sm.css +0 -19
  35. package/build/styles/fonts/classes/headline/xl.css +0 -19
  36. package/build/styles/fonts/classes/headline/xs.css +0 -19
  37. package/build/styles/helpers/_a11y.scss +1 -1
  38. package/build/styles/helpers/_functions.scss +12 -2
  39. package/build/styles/helpers/classes/all.css +0 -10
  40. package/build/styles/helpers/classes/divider.css +0 -10
  41. package/build/styles/helpers/classes/focus.css +0 -10
  42. package/build/styles/icons/_icon-helpers.scss +1 -0
  43. package/build/styles/index.css +113 -45
  44. package/build/styles/relative.css +113 -45
  45. package/build/styles/rollup.css +113 -45
  46. package/build/styles/webpack.css +113 -45
  47. package/package.json +3 -3
package/build/styles/rollup.css CHANGED
@@ -41,16 +41,6 @@
41
41
  font-weight: 900;
42
42
  src: url("@db-ux/core-foundations/assets/fonts/OpenSans-ExtraBold-EU.woff2") format("woff2");
43
43
  }
44
- /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
45
- /* Use fixed spacings for all kind of distances (margin, padding, ...) */
46
- /* The primary use-case for responsive spacings are
47
- paddings/gaps in an application e.g. the <main> should have a responsive padding. */
48
- /* Elevation */
49
- /* Border */
50
- /* Opacity */
51
- /* Transitions */
52
- /* Screen sizes */
53
- /* Container sizes */
54
44
  /* Variants for adaptive components like input, select, notification, ... */
55
45
  blockquote:not([class]), [data-mode], :root,
56
46
  :host {
@@ -310,6 +300,7 @@ select,
310
300
  text-transform: none;
311
301
  overflow: clip;
312
302
  vertical-align: var(--db-icon-vertical-align, middle);
303
+ /* stylelint-disable-next-line db-ux/use-sizing */
313
304
  block-size: var(--db-icon-font-size, 1.5rem);
314
305
  aspect-ratio: 1;
315
306
  flex-shrink: 0;
@@ -6023,12 +6014,6 @@ html::after {
6023
6014
  inherits: true;
6024
6015
  }
6025
6016
  /* Use this file if you want the default color and density in your project */
6026
- /**
6027
- Generates 3 types of placeholders, e.g:
6028
- - %db-component-variables-md
6029
- - %db-font-size-md
6030
- - %db-overwrite-font-size-md
6031
- */
6032
6017
  @layer variables {}
6033
6018
 
6034
6019
  @layer variables {}
@@ -6112,12 +6097,6 @@ code {
6112
6097
 
6113
6098
  @layer variables {}
6114
6099
 
6115
- /* Use for body tags like <p> */
6116
- /* Use for headline tags like <h1> */
6117
- /**
6118
- * @mixin screen-min-max
6119
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
6120
- */
6121
6100
  @layer variables {}
6122
6101
 
6123
6102
  :root,
@@ -6443,34 +6422,94 @@ code {
6443
6422
  transition: box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional);
6444
6423
  }
6445
6424
  }
6446
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]),
6447
- [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)) {
6448
6433
  cursor: var(--db-overwrite-cursor, pointer);
6449
6434
  box-shadow: var(--db-elevation-lg);
6450
6435
  }
6451
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input),
6452
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(textarea),
6453
- [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) {
6454
6451
  cursor: initial;
6455
6452
  }
6456
- .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)),
6457
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
6458
- [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)) {
6459
6468
  cursor: pointer;
6460
6469
  }
6461
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]),
6462
- [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)) {
6463
6478
  cursor: var(--db-overwrite-cursor, pointer);
6464
6479
  box-shadow: var(--db-elevation-sm);
6465
6480
  }
6466
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input),
6467
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(textarea),
6468
- [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) {
6469
6496
  cursor: initial;
6470
6497
  }
6471
- .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)),
6472
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
6473
- [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)) {
6474
6513
  cursor: pointer;
6475
6514
  }
6476
6515
 
@@ -6619,24 +6658,54 @@ a:has(code:not([class]):only-child) {
6619
6658
  color: var(--db-adaptive-on-bg-inverted-default);
6620
6659
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
6621
6660
  }
6622
- 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)) {
6623
6665
  cursor: var(--db-overwrite-cursor, pointer);
6624
6666
  color: var(--db-adaptive-on-bg-inverted-hovered);
6625
6667
  }
6626
- 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) {
6627
6675
  cursor: initial;
6628
6676
  }
6629
- 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)) {
6630
6684
  cursor: pointer;
6631
6685
  }
6632
- 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)) {
6633
6690
  cursor: var(--db-overwrite-cursor, pointer);
6634
6691
  color: var(--db-adaptive-on-bg-inverted-pressed);
6635
6692
  }
6636
- 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) {
6637
6700
  cursor: initial;
6638
6701
  }
6639
- 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)) {
6640
6709
  cursor: pointer;
6641
6710
  }
6642
6711
  a:has(code:not([class]):only-child) > code {
@@ -10475,7 +10544,6 @@ head:has([name=color-scheme][content=dark]) + body {
10475
10544
  --db-color-scheme: dark;
10476
10545
  }
10477
10546
 
10478
- /* TODO: Switch to attr() as soon as this one is fully supported */
10479
10547
  [data-mode=light] {
10480
10548
  color-scheme: light;
10481
10549
  }
package/build/styles/webpack.css CHANGED
@@ -41,16 +41,6 @@
41
41
  font-weight: 900;
42
42
  src: url("~@db-ux/core-foundations/assets/fonts/OpenSans-ExtraBold-EU.woff2") format("woff2");
43
43
  }
44
- /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
45
- /* Use fixed spacings for all kind of distances (margin, padding, ...) */
46
- /* The primary use-case for responsive spacings are
47
- paddings/gaps in an application e.g. the <main> should have a responsive padding. */
48
- /* Elevation */
49
- /* Border */
50
- /* Opacity */
51
- /* Transitions */
52
- /* Screen sizes */
53
- /* Container sizes */
54
44
  /* Variants for adaptive components like input, select, notification, ... */
55
45
  blockquote:not([class]), [data-mode], :root,
56
46
  :host {
@@ -310,6 +300,7 @@ select,
310
300
  text-transform: none;
311
301
  overflow: clip;
312
302
  vertical-align: var(--db-icon-vertical-align, middle);
303
+ /* stylelint-disable-next-line db-ux/use-sizing */
313
304
  block-size: var(--db-icon-font-size, 1.5rem);
314
305
  aspect-ratio: 1;
315
306
  flex-shrink: 0;
@@ -6023,12 +6014,6 @@ html::after {
6023
6014
  inherits: true;
6024
6015
  }
6025
6016
  /* Use this file if you want the default color and density in your project */
6026
- /**
6027
- Generates 3 types of placeholders, e.g:
6028
- - %db-component-variables-md
6029
- - %db-font-size-md
6030
- - %db-overwrite-font-size-md
6031
- */
6032
6017
  @layer variables {}
6033
6018
 
6034
6019
  @layer variables {}
@@ -6112,12 +6097,6 @@ code {
6112
6097
 
6113
6098
  @layer variables {}
6114
6099
 
6115
- /* Use for body tags like <p> */
6116
- /* Use for headline tags like <h1> */
6117
- /**
6118
- * @mixin screen-min-max
6119
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
6120
- */
6121
6100
  @layer variables {}
6122
6101
 
6123
6102
  :root,
@@ -6443,34 +6422,94 @@ code {
6443
6422
  transition: box-shadow var(--db-transition-duration-fast) var(--db-transition-timing-functional);
6444
6423
  }
6445
6424
  }
6446
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]),
6447
- [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)) {
6448
6433
  cursor: var(--db-overwrite-cursor, pointer);
6449
6434
  box-shadow: var(--db-elevation-lg);
6450
6435
  }
6451
- .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:hover:not(:disabled, [aria-disabled=true]):is(input),
6452
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(textarea),
6453
- [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) {
6454
6451
  cursor: initial;
6455
6452
  }
6456
- .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)),
6457
- [data-interactive=elevation]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
6458
- [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)) {
6459
6468
  cursor: pointer;
6460
6469
  }
6461
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]),
6462
- [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)) {
6463
6478
  cursor: var(--db-overwrite-cursor, pointer);
6464
6479
  box-shadow: var(--db-elevation-sm);
6465
6480
  }
6466
- .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-interactive-elevation:active:not(:disabled, [aria-disabled=true]):is(input),
6467
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(textarea),
6468
- [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) {
6469
6496
  cursor: initial;
6470
6497
  }
6471
- .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)),
6472
- [data-interactive=elevation]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]),
6473
- [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)) {
6474
6513
  cursor: pointer;
6475
6514
  }
6476
6515
 
@@ -6619,24 +6658,54 @@ a:has(code:not([class]):only-child) {
6619
6658
  color: var(--db-adaptive-on-bg-inverted-default);
6620
6659
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
6621
6660
  }
6622
- 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)) {
6623
6665
  cursor: var(--db-overwrite-cursor, pointer);
6624
6666
  color: var(--db-adaptive-on-bg-inverted-hovered);
6625
6667
  }
6626
- 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) {
6627
6675
  cursor: initial;
6628
6676
  }
6629
- 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)) {
6630
6684
  cursor: pointer;
6631
6685
  }
6632
- 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)) {
6633
6690
  cursor: var(--db-overwrite-cursor, pointer);
6634
6691
  color: var(--db-adaptive-on-bg-inverted-pressed);
6635
6692
  }
6636
- 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) {
6637
6700
  cursor: initial;
6638
6701
  }
6639
- 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)) {
6640
6709
  cursor: pointer;
6641
6710
  }
6642
6711
  a:has(code:not([class]):only-child) > code {
@@ -10475,7 +10544,6 @@ head:has([name=color-scheme][content=dark]) + body {
10475
10544
  --db-color-scheme: dark;
10476
10545
  }
10477
10546
 
10478
- /* TODO: Switch to attr() as soon as this one is fully supported */
10479
10547
  [data-mode=light] {
10480
10548
  color-scheme: light;
10481
10549
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@db-ux/core-foundations",
3
- "version": "4.4.2",
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.1",
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",