@db-ux/core-components 4.10.0 → 4.10.2

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 (39) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +1 -1
  3. package/build/components/accordion-item/accordion-item.css +6 -44
  4. package/build/components/accordion-item/accordion-item.scss +7 -5
  5. package/build/components/badge/badge.css +3 -75
  6. package/build/components/button/button.css +12 -222
  7. package/build/components/card/card.css +10 -106
  8. package/build/components/card/card.scss +18 -14
  9. package/build/components/checkbox/checkbox.css +2 -0
  10. package/build/components/custom-button/custom-button.css +15 -597
  11. package/build/components/custom-button/custom-button.scss +7 -5
  12. package/build/components/custom-select/custom-select.css +6 -23
  13. package/build/components/custom-select-list-item/custom-select-list-item.css +3 -45
  14. package/build/components/custom-select-list-item/custom-select-list-item.scss +8 -6
  15. package/build/components/infotext/infotext.css +2 -0
  16. package/build/components/input/input.css +6 -23
  17. package/build/components/link/link.css +10 -88
  18. package/build/components/link/link.scss +8 -6
  19. package/build/components/navigation-item/navigation-item.css +8 -116
  20. package/build/components/navigation-item/navigation-item.scss +7 -5
  21. package/build/components/notification/notification.css +6 -44
  22. package/build/components/select/select.css +6 -23
  23. package/build/components/switch/switch.css +2 -0
  24. package/build/components/tab-item/tab-item.css +7 -69
  25. package/build/components/tab-item/tab-item.scss +6 -12
  26. package/build/components/tag/tag.css +42 -875
  27. package/build/components/tag/tag.scss +4 -0
  28. package/build/components/textarea/textarea.css +4 -23
  29. package/build/styles/absolute.css +7 -7
  30. package/build/styles/bundle.css +7 -7
  31. package/build/styles/index.css +6 -6
  32. package/build/styles/internal/_button-components.scss +23 -17
  33. package/build/styles/internal/_form-components.scss +5 -2
  34. package/build/styles/internal/_link-components.scss +15 -13
  35. package/build/styles/internal/_tag-components.scss +21 -15
  36. package/build/styles/relative.css +7 -7
  37. package/build/styles/rollup.css +7 -7
  38. package/build/styles/webpack.css +7 -7
  39. package/package.json +7 -7
package/build/components/custom-button/custom-button.scss CHANGED
@@ -58,12 +58,14 @@ $icon-padding-custom-button: calc(
58
58
  }
59
59
 
60
60
  label:has(input[type="checkbox"]:checked) {
61
- @include helpers.hover {
62
- background-color: colors.$db-adaptive-bg-inverted-contrast-max-hovered;
63
- }
61
+ @include helpers.not-disabled {
62
+ @include helpers.hover {
63
+ background-color: colors.$db-adaptive-bg-inverted-contrast-max-hovered;
64
+ }
64
65
 
65
- @include helpers.active {
66
- background-color: colors.$db-adaptive-bg-inverted-contrast-max-pressed;
66
+ @include helpers.active {
67
+ background-color: colors.$db-adaptive-bg-inverted-contrast-max-pressed;
68
+ }
67
69
  }
68
70
  }
69
71
 
package/build/components/custom-select/custom-select.css CHANGED
@@ -491,6 +491,8 @@
491
491
  vertical-align: var(--db-icon-vertical-align, middle);
492
492
  /* stylelint-disable-next-line db-ux/use-sizing */
493
493
  block-size: var(--db-icon-font-size, 1.5rem);
494
+ /* stylelint-disable-next-line db-ux/use-sizing */
495
+ inline-size: var(--db-icon-font-size, 1.5rem);
494
496
  aspect-ratio: 1;
495
497
  flex-shrink: 0;
496
498
  content: var(--db-icon, attr(data-icon));
@@ -950,33 +952,14 @@ input[type=radio]:checked) summary:is([type=date],
950
952
  min-inline-size: var(--db-form-component-min-inline-size, var(--db-sizing-lg));
951
953
  /* stylelint-disable-next-line db-ux/use-spacings */
952
954
  padding-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm)) var(--db-form-component-padding-inline-end, var(--db-spacing-fixed-sm));
955
+ }
956
+ .db-custom-select summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
953
957
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
954
958
  }
955
- .db-custom-select summary:hover:not(:disabled,
956
- [aria-disabled=true],
957
- [tabindex="-1"],
958
- :has(:disabled)) {
959
- cursor: var(--db-overwrite-cursor, pointer);
959
+ .db-custom-select summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
960
+ cursor: var(--db-overwrite-cursor, revert);
960
961
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
961
962
  }
962
- .db-custom-select summary:hover:not(:disabled,
963
- [aria-disabled=true],
964
- [tabindex="-1"],
965
- :has(:disabled)):is(textarea), .db-custom-select summary:hover:not(:disabled,
966
- [aria-disabled=true],
967
- [tabindex="-1"],
968
- :has(:disabled)):is(input) {
969
- cursor: initial;
970
- }
971
- .db-custom-select summary:hover:not(:disabled,
972
- [aria-disabled=true],
973
- [tabindex="-1"],
974
- :has(:disabled)):is(input[type=checkbox]), .db-custom-select summary:hover:not(:disabled,
975
- [aria-disabled=true],
976
- [tabindex="-1"],
977
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
978
- cursor: pointer;
979
- }
980
963
  .db-custom-select > label {
981
964
  padding-block-end: var(--db-spacing-fixed-xs);
982
965
  max-inline-size: var(--db-label-max-size, 100%);
package/build/components/custom-select-list-item/custom-select-list-item.css CHANGED
@@ -75,59 +75,17 @@ db-custom-select-list-item:not(:last-of-type) .db-custom-select-list-item[data-d
75
75
  border-radius: var(--db-border-radius-xs);
76
76
  box-sizing: border-box;
77
77
  }
78
- .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)) {
78
+ .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
79
79
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
80
80
  }
81
- .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
82
- [aria-disabled=true],
83
- [tabindex="-1"],
84
- :has(:disabled)) {
81
+ .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
85
82
  cursor: var(--db-overwrite-cursor, pointer);
86
83
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
87
84
  }
88
- .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
89
- [aria-disabled=true],
90
- [tabindex="-1"],
91
- :has(:disabled)):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
92
- [aria-disabled=true],
93
- [tabindex="-1"],
94
- :has(:disabled)):is(input) {
95
- cursor: initial;
96
- }
97
- .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
98
- [aria-disabled=true],
99
- [tabindex="-1"],
100
- :has(:disabled)):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):hover:not(:disabled,
101
- [aria-disabled=true],
102
- [tabindex="-1"],
103
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
104
- cursor: pointer;
105
- }
106
- .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
107
- [aria-disabled=true],
108
- [tabindex="-1"],
109
- :has(:disabled)) {
85
+ .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
110
86
  cursor: var(--db-overwrite-cursor, pointer);
111
87
  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
112
88
  }
113
- .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
114
- [aria-disabled=true],
115
- [tabindex="-1"],
116
- :has(:disabled)):is(textarea), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
117
- [aria-disabled=true],
118
- [tabindex="-1"],
119
- :has(:disabled)):is(input) {
120
- cursor: initial;
121
- }
122
- .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
123
- [aria-disabled=true],
124
- [tabindex="-1"],
125
- :has(:disabled)):is(input[type=checkbox]), .db-custom-select-list-item:has(> label):not(:has(input[type=radio]:checked)):active:not(:disabled,
126
- [aria-disabled=true],
127
- [tabindex="-1"],
128
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
129
- cursor: pointer;
130
- }
131
89
  .db-custom-select-list-item span {
132
90
  color: var(--db-adaptive-on-bg-basic-emphasis-80-default);
133
91
  }
package/build/components/custom-select-list-item/custom-select-list-item.scss CHANGED
@@ -25,12 +25,14 @@ db-custom-select-list-item:not(:last-of-type) {
25
25
 
26
26
  &:has(> label) {
27
27
  &:not(:has(input[type="radio"]:checked)) {
28
- @include helpers.hover {
29
- background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
30
- }
31
-
32
- @include helpers.active {
33
- background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
28
+ @include helpers.not-disabled {
29
+ @include helpers.hover {
30
+ background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
31
+ }
32
+
33
+ @include helpers.active {
34
+ background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
35
+ }
34
36
  }
35
37
  }
36
38
  }
package/build/components/infotext/infotext.css CHANGED
@@ -36,6 +36,8 @@
36
36
  vertical-align: var(--db-icon-vertical-align, middle);
37
37
  /* stylelint-disable-next-line db-ux/use-sizing */
38
38
  block-size: var(--db-icon-font-size, 1.5rem);
39
+ /* stylelint-disable-next-line db-ux/use-sizing */
40
+ inline-size: var(--db-icon-font-size, 1.5rem);
39
41
  aspect-ratio: 1;
40
42
  flex-shrink: 0;
41
43
  content: var(--db-icon, attr(data-icon));
package/build/components/input/input.css CHANGED
@@ -341,6 +341,8 @@
341
341
  vertical-align: var(--db-icon-vertical-align, middle);
342
342
  /* stylelint-disable-next-line db-ux/use-sizing */
343
343
  block-size: var(--db-icon-font-size, 1.5rem);
344
+ /* stylelint-disable-next-line db-ux/use-sizing */
345
+ inline-size: var(--db-icon-font-size, 1.5rem);
344
346
  aspect-ratio: 1;
345
347
  flex-shrink: 0;
346
348
  content: var(--db-icon, attr(data-icon));
@@ -738,33 +740,14 @@ input[type=radio]:checked) input:is([type=date],
738
740
  min-inline-size: var(--db-form-component-min-inline-size, var(--db-sizing-lg));
739
741
  /* stylelint-disable-next-line db-ux/use-spacings */
740
742
  padding-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm)) var(--db-form-component-padding-inline-end, var(--db-spacing-fixed-sm));
743
+ }
744
+ .db-input input:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
741
745
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
742
746
  }
743
- .db-input input:hover:not(:disabled,
744
- [aria-disabled=true],
745
- [tabindex="-1"],
746
- :has(:disabled)) {
747
- cursor: var(--db-overwrite-cursor, pointer);
747
+ .db-input input:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
748
+ cursor: var(--db-overwrite-cursor, revert);
748
749
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
749
750
  }
750
- .db-input input:hover:not(:disabled,
751
- [aria-disabled=true],
752
- [tabindex="-1"],
753
- :has(:disabled)):is(textarea), .db-input input:hover:not(:disabled,
754
- [aria-disabled=true],
755
- [tabindex="-1"],
756
- :has(:disabled)):is(input) {
757
- cursor: initial;
758
- }
759
- .db-input input:hover:not(:disabled,
760
- [aria-disabled=true],
761
- [tabindex="-1"],
762
- :has(:disabled)):is(input[type=checkbox]), .db-input input:hover:not(:disabled,
763
- [aria-disabled=true],
764
- [tabindex="-1"],
765
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
766
- cursor: pointer;
767
- }
768
751
  .db-input input {
769
752
  /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
770
753
  }
package/build/components/link/link.css CHANGED
@@ -57,6 +57,8 @@
57
57
  vertical-align: var(--db-icon-vertical-align, middle);
58
58
  /* stylelint-disable-next-line db-ux/use-sizing */
59
59
  block-size: var(--db-icon-font-size, 1.5rem);
60
+ /* stylelint-disable-next-line db-ux/use-sizing */
61
+ inline-size: var(--db-icon-font-size, 1.5rem);
60
62
  aspect-ratio: 1;
61
63
  flex-shrink: 0;
62
64
  content: var(--db-icon, attr(data-icon));
@@ -86,58 +88,18 @@
86
88
 
87
89
  .db-link {
88
90
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
91
+ }
92
+ .db-link:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
89
93
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
90
94
  }
91
- .db-link:hover:not(:disabled,
92
- [aria-disabled=true],
93
- [tabindex="-1"],
94
- :has(:disabled)) {
95
+ .db-link:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
95
96
  cursor: var(--db-overwrite-cursor, pointer);
96
97
  color: color-mix(in srgb, transparent 25%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
97
98
  }
98
- .db-link:hover:not(:disabled,
99
- [aria-disabled=true],
100
- [tabindex="-1"],
101
- :has(:disabled)):is(textarea), .db-link:hover:not(:disabled,
102
- [aria-disabled=true],
103
- [tabindex="-1"],
104
- :has(:disabled)):is(input) {
105
- cursor: initial;
106
- }
107
- .db-link:hover:not(:disabled,
108
- [aria-disabled=true],
109
- [tabindex="-1"],
110
- :has(:disabled)):is(input[type=checkbox]), .db-link:hover:not(:disabled,
111
- [aria-disabled=true],
112
- [tabindex="-1"],
113
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
114
- cursor: pointer;
115
- }
116
- .db-link:active:not(:disabled,
117
- [aria-disabled=true],
118
- [tabindex="-1"],
119
- :has(:disabled)) {
99
+ .db-link:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
120
100
  cursor: var(--db-overwrite-cursor, pointer);
121
101
  color: color-mix(in srgb, transparent 50%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
122
102
  }
123
- .db-link:active:not(:disabled,
124
- [aria-disabled=true],
125
- [tabindex="-1"],
126
- :has(:disabled)):is(textarea), .db-link:active:not(:disabled,
127
- [aria-disabled=true],
128
- [tabindex="-1"],
129
- :has(:disabled)):is(input) {
130
- cursor: initial;
131
- }
132
- .db-link:active:not(:disabled,
133
- [aria-disabled=true],
134
- [tabindex="-1"],
135
- :has(:disabled)):is(input[type=checkbox]), .db-link:active:not(:disabled,
136
- [aria-disabled=true],
137
- [tabindex="-1"],
138
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
139
- cursor: pointer;
140
- }
141
103
 
142
104
  .db-link {
143
105
  inline-size: fit-content;
@@ -185,58 +147,18 @@
185
147
  }
186
148
  .db-link[data-variant=brand] {
187
149
  color: var(--db-brand-on-bg-basic-emphasis-80-default);
150
+ }
151
+ .db-link[data-variant=brand]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
188
152
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
189
153
  }
190
- .db-link[data-variant=brand]:hover:not(:disabled,
191
- [aria-disabled=true],
192
- [tabindex="-1"],
193
- :has(:disabled)) {
154
+ .db-link[data-variant=brand]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
194
155
  cursor: var(--db-overwrite-cursor, pointer);
195
156
  color: var(--db-brand-on-bg-basic-emphasis-80-hovered);
196
157
  }
197
- .db-link[data-variant=brand]:hover:not(:disabled,
198
- [aria-disabled=true],
199
- [tabindex="-1"],
200
- :has(:disabled)):is(textarea), .db-link[data-variant=brand]:hover:not(:disabled,
201
- [aria-disabled=true],
202
- [tabindex="-1"],
203
- :has(:disabled)):is(input) {
204
- cursor: initial;
205
- }
206
- .db-link[data-variant=brand]:hover:not(:disabled,
207
- [aria-disabled=true],
208
- [tabindex="-1"],
209
- :has(:disabled)):is(input[type=checkbox]), .db-link[data-variant=brand]:hover:not(:disabled,
210
- [aria-disabled=true],
211
- [tabindex="-1"],
212
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
213
- cursor: pointer;
214
- }
215
- .db-link[data-variant=brand]:active:not(:disabled,
216
- [aria-disabled=true],
217
- [tabindex="-1"],
218
- :has(:disabled)) {
158
+ .db-link[data-variant=brand]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
219
159
  cursor: var(--db-overwrite-cursor, pointer);
220
160
  color: var(--db-brand-on-bg-basic-emphasis-80-pressed);
221
161
  }
222
- .db-link[data-variant=brand]:active:not(:disabled,
223
- [aria-disabled=true],
224
- [tabindex="-1"],
225
- :has(:disabled)):is(textarea), .db-link[data-variant=brand]:active:not(:disabled,
226
- [aria-disabled=true],
227
- [tabindex="-1"],
228
- :has(:disabled)):is(input) {
229
- cursor: initial;
230
- }
231
- .db-link[data-variant=brand]:active:not(:disabled,
232
- [aria-disabled=true],
233
- [tabindex="-1"],
234
- :has(:disabled)):is(input[type=checkbox]), .db-link[data-variant=brand]:active:not(:disabled,
235
- [aria-disabled=true],
236
- [tabindex="-1"],
237
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
238
- cursor: pointer;
239
- }
240
162
  .db-link[data-size=small] {
241
163
  --db-icon-margin-start: var(--db-spacing-fixed-3xs);
242
164
  }
package/build/components/link/link.scss CHANGED
@@ -35,12 +35,14 @@
35
35
  &[data-variant="brand"] {
36
36
  color: colors.$db-brand-on-bg-basic-emphasis-80-default;
37
37
 
38
- @include helpers.hover {
39
- color: #{colors.$db-brand-on-bg-basic-emphasis-80-hovered};
40
- }
41
-
42
- @include helpers.active {
43
- color: #{colors.$db-brand-on-bg-basic-emphasis-80-pressed};
38
+ @include helpers.not-disabled {
39
+ @include helpers.hover {
40
+ color: #{colors.$db-brand-on-bg-basic-emphasis-80-hovered};
41
+ }
42
+
43
+ @include helpers.active {
44
+ color: #{colors.$db-brand-on-bg-basic-emphasis-80-pressed};
45
+ }
44
46
  }
45
47
  }
46
48
 
package/build/components/navigation-item/navigation-item.css CHANGED
@@ -48,6 +48,8 @@
48
48
  vertical-align: var(--db-icon-vertical-align, middle);
49
49
  /* stylelint-disable-next-line db-ux/use-sizing */
50
50
  block-size: var(--db-icon-font-size, 1.5rem);
51
+ /* stylelint-disable-next-line db-ux/use-sizing */
52
+ inline-size: var(--db-icon-font-size, 1.5rem);
51
53
  aspect-ratio: 1;
52
54
  flex-shrink: 0;
53
55
  content: var(--db-icon, attr(data-icon));
@@ -122,130 +124,20 @@
122
124
  .db-navigation-item .db-navigation-item-expand-button > button:not([hidden]), .db-navigation-item a:not([hidden]) {
123
125
  display: inline-flex;
124
126
  }
125
- .db-navigation-item .db-navigation-item-expand-button:is(button),
126
- .db-navigation-item .db-navigation-item-expand-button > button, .db-navigation-item a {
127
+ .db-navigation-item .db-navigation-item-expand-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):is(button),
128
+ .db-navigation-item .db-navigation-item-expand-button > button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-navigation-item a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
127
129
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
128
130
  }
129
- .db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled,
130
- [aria-disabled=true],
131
- [tabindex="-1"],
132
- :has(:disabled)):is(button),
133
- .db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled,
134
- [aria-disabled=true],
135
- [tabindex="-1"],
136
- :has(:disabled)), .db-navigation-item a:hover:not(:disabled,
137
- [aria-disabled=true],
138
- [tabindex="-1"],
139
- :has(:disabled)) {
131
+ .db-navigation-item .db-navigation-item-expand-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover:is(button),
132
+ .db-navigation-item .db-navigation-item-expand-button > button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-navigation-item a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
140
133
  cursor: var(--db-overwrite-cursor, pointer);
141
134
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
142
135
  }
143
- .db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled,
144
- [aria-disabled=true],
145
- [tabindex="-1"],
146
- :has(:disabled)):is(textarea):is(button),
147
- .db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled,
148
- [aria-disabled=true],
149
- [tabindex="-1"],
150
- :has(:disabled)):is(textarea), .db-navigation-item a:hover:not(:disabled,
151
- [aria-disabled=true],
152
- [tabindex="-1"],
153
- :has(:disabled)):is(textarea), .db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled,
154
- [aria-disabled=true],
155
- [tabindex="-1"],
156
- :has(:disabled)):is(input):is(button),
157
- .db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled,
158
- [aria-disabled=true],
159
- [tabindex="-1"],
160
- :has(:disabled)):is(input), .db-navigation-item a:hover:not(:disabled,
161
- [aria-disabled=true],
162
- [tabindex="-1"],
163
- :has(:disabled)):is(input) {
164
- cursor: initial;
165
- }
166
- .db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled,
167
- [aria-disabled=true],
168
- [tabindex="-1"],
169
- :has(:disabled)):is(input[type=checkbox]):is(button),
170
- .db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled,
171
- [aria-disabled=true],
172
- [tabindex="-1"],
173
- :has(:disabled)):is(input[type=checkbox]), .db-navigation-item a:hover:not(:disabled,
174
- [aria-disabled=true],
175
- [tabindex="-1"],
176
- :has(:disabled)):is(input[type=checkbox]), .db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled,
177
- [aria-disabled=true],
178
- [tabindex="-1"],
179
- :has(:disabled)):is(input[type=radio]:not(:checked)):is(button),
180
- .db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled,
181
- [aria-disabled=true],
182
- [tabindex="-1"],
183
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-navigation-item a:hover:not(:disabled,
184
- [aria-disabled=true],
185
- [tabindex="-1"],
186
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
187
- cursor: pointer;
188
- }
189
- .db-navigation-item .db-navigation-item-expand-button:active:not(:disabled,
190
- [aria-disabled=true],
191
- [tabindex="-1"],
192
- :has(:disabled)):is(button),
193
- .db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled,
194
- [aria-disabled=true],
195
- [tabindex="-1"],
196
- :has(:disabled)), .db-navigation-item a:active:not(:disabled,
197
- [aria-disabled=true],
198
- [tabindex="-1"],
199
- :has(:disabled)) {
136
+ .db-navigation-item .db-navigation-item-expand-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active:is(button),
137
+ .db-navigation-item .db-navigation-item-expand-button > button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-navigation-item a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
200
138
  cursor: var(--db-overwrite-cursor, pointer);
201
139
  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
202
140
  }
203
- .db-navigation-item .db-navigation-item-expand-button:active:not(:disabled,
204
- [aria-disabled=true],
205
- [tabindex="-1"],
206
- :has(:disabled)):is(textarea):is(button),
207
- .db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled,
208
- [aria-disabled=true],
209
- [tabindex="-1"],
210
- :has(:disabled)):is(textarea), .db-navigation-item a:active:not(:disabled,
211
- [aria-disabled=true],
212
- [tabindex="-1"],
213
- :has(:disabled)):is(textarea), .db-navigation-item .db-navigation-item-expand-button:active:not(:disabled,
214
- [aria-disabled=true],
215
- [tabindex="-1"],
216
- :has(:disabled)):is(input):is(button),
217
- .db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled,
218
- [aria-disabled=true],
219
- [tabindex="-1"],
220
- :has(:disabled)):is(input), .db-navigation-item a:active:not(:disabled,
221
- [aria-disabled=true],
222
- [tabindex="-1"],
223
- :has(:disabled)):is(input) {
224
- cursor: initial;
225
- }
226
- .db-navigation-item .db-navigation-item-expand-button:active:not(:disabled,
227
- [aria-disabled=true],
228
- [tabindex="-1"],
229
- :has(:disabled)):is(input[type=checkbox]):is(button),
230
- .db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled,
231
- [aria-disabled=true],
232
- [tabindex="-1"],
233
- :has(:disabled)):is(input[type=checkbox]), .db-navigation-item a:active:not(:disabled,
234
- [aria-disabled=true],
235
- [tabindex="-1"],
236
- :has(:disabled)):is(input[type=checkbox]), .db-navigation-item .db-navigation-item-expand-button:active:not(:disabled,
237
- [aria-disabled=true],
238
- [tabindex="-1"],
239
- :has(:disabled)):is(input[type=radio]:not(:checked)):is(button),
240
- .db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled,
241
- [aria-disabled=true],
242
- [tabindex="-1"],
243
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-navigation-item a:active:not(:disabled,
244
- [aria-disabled=true],
245
- [tabindex="-1"],
246
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
247
- cursor: pointer;
248
- }
249
141
  .db-navigation-item .db-navigation-item-expand-button:has(~ .db-sub-navigation:is(:hover, :focus)):is(button),
250
142
  .db-navigation-item .db-navigation-item-expand-button > button:has(~ .db-sub-navigation:is(:hover, :focus)), .db-navigation-item a:has(~ .db-sub-navigation:is(:hover, :focus)) {
251
143
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
package/build/components/navigation-item/navigation-item.scss CHANGED
@@ -74,12 +74,14 @@
74
74
 
75
75
  @include helpers.display(inline-flex);
76
76
 
77
- @include helpers.hover {
78
- background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
79
- }
77
+ @include helpers.not-disabled {
78
+ @include helpers.hover {
79
+ background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
80
+ }
80
81
 
81
- @include helpers.active {
82
- background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
82
+ @include helpers.active {
83
+ background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
84
+ }
83
85
  }
84
86
 
85
87
  &:has(~ .db-sub-navigation:is(:hover, :focus)) {
package/build/components/notification/notification.css CHANGED
@@ -786,6 +786,8 @@
786
786
  vertical-align: var(--db-icon-vertical-align, middle);
787
787
  /* stylelint-disable-next-line db-ux/use-sizing */
788
788
  block-size: var(--db-icon-font-size, 1.5rem);
789
+ /* stylelint-disable-next-line db-ux/use-sizing */
790
+ inline-size: var(--db-icon-font-size, 1.5rem);
789
791
  aspect-ratio: 1;
790
792
  flex-shrink: 0;
791
793
  content: var(--db-icon, attr(data-icon));
@@ -845,58 +847,18 @@
845
847
 
846
848
  .db-notification a[data-variant=brand], .db-notification a {
847
849
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
850
+ }
851
+ .db-notification a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
848
852
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
849
853
  }
850
- .db-notification a:hover:not(:disabled,
851
- [aria-disabled=true],
852
- [tabindex="-1"],
853
- :has(:disabled)) {
854
+ .db-notification a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
854
855
  cursor: var(--db-overwrite-cursor, pointer);
855
856
  color: color-mix(in srgb, transparent 25%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
856
857
  }
857
- .db-notification a:hover:not(:disabled,
858
- [aria-disabled=true],
859
- [tabindex="-1"],
860
- :has(:disabled)):is(textarea), .db-notification a:hover:not(:disabled,
861
- [aria-disabled=true],
862
- [tabindex="-1"],
863
- :has(:disabled)):is(input) {
864
- cursor: initial;
865
- }
866
- .db-notification a:hover:not(:disabled,
867
- [aria-disabled=true],
868
- [tabindex="-1"],
869
- :has(:disabled)):is(input[type=checkbox]), .db-notification a:hover:not(:disabled,
870
- [aria-disabled=true],
871
- [tabindex="-1"],
872
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
873
- cursor: pointer;
874
- }
875
- .db-notification a:active:not(:disabled,
876
- [aria-disabled=true],
877
- [tabindex="-1"],
878
- :has(:disabled)) {
858
+ .db-notification a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
879
859
  cursor: var(--db-overwrite-cursor, pointer);
880
860
  color: color-mix(in srgb, transparent 50%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
881
861
  }
882
- .db-notification a:active:not(:disabled,
883
- [aria-disabled=true],
884
- [tabindex="-1"],
885
- :has(:disabled)):is(textarea), .db-notification a:active:not(:disabled,
886
- [aria-disabled=true],
887
- [tabindex="-1"],
888
- :has(:disabled)):is(input) {
889
- cursor: initial;
890
- }
891
- .db-notification a:active:not(:disabled,
892
- [aria-disabled=true],
893
- [tabindex="-1"],
894
- :has(:disabled)):is(input[type=checkbox]), .db-notification a:active:not(:disabled,
895
- [aria-disabled=true],
896
- [tabindex="-1"],
897
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
898
- cursor: pointer;
899
- }
900
862
 
901
863
  .db-notification a {
902
864
  inline-size: fit-content;
package/build/components/select/select.css CHANGED
@@ -341,6 +341,8 @@
341
341
  vertical-align: var(--db-icon-vertical-align, middle);
342
342
  /* stylelint-disable-next-line db-ux/use-sizing */
343
343
  block-size: var(--db-icon-font-size, 1.5rem);
344
+ /* stylelint-disable-next-line db-ux/use-sizing */
345
+ inline-size: var(--db-icon-font-size, 1.5rem);
344
346
  aspect-ratio: 1;
345
347
  flex-shrink: 0;
346
348
  content: var(--db-icon, attr(data-icon));
@@ -751,33 +753,14 @@ input[type=radio]:checked) select:is([type=date],
751
753
  min-inline-size: var(--db-form-component-min-inline-size, var(--db-sizing-lg));
752
754
  /* stylelint-disable-next-line db-ux/use-spacings */
753
755
  padding-inline: var(--db-form-component-padding-inline-start, var(--db-spacing-fixed-sm)) var(--db-form-component-padding-inline-end, var(--db-spacing-fixed-sm));
756
+ }
757
+ .db-select select:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
754
758
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
755
759
  }
756
- .db-select select:hover:not(:disabled,
757
- [aria-disabled=true],
758
- [tabindex="-1"],
759
- :has(:disabled)) {
760
- cursor: var(--db-overwrite-cursor, pointer);
760
+ .db-select select:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
761
+ cursor: var(--db-overwrite-cursor, revert);
761
762
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
762
763
  }
763
- .db-select select:hover:not(:disabled,
764
- [aria-disabled=true],
765
- [tabindex="-1"],
766
- :has(:disabled)):is(textarea), .db-select select:hover:not(:disabled,
767
- [aria-disabled=true],
768
- [tabindex="-1"],
769
- :has(:disabled)):is(input) {
770
- cursor: initial;
771
- }
772
- .db-select select:hover:not(:disabled,
773
- [aria-disabled=true],
774
- [tabindex="-1"],
775
- :has(:disabled)):is(input[type=checkbox]), .db-select select:hover:not(:disabled,
776
- [aria-disabled=true],
777
- [tabindex="-1"],
778
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
779
- cursor: pointer;
780
- }
781
764
  .db-select > label {
782
765
  padding-block-end: var(--db-spacing-fixed-xs);
783
766
  max-inline-size: var(--db-label-max-size, 100%);
package/build/components/switch/switch.css CHANGED
@@ -63,6 +63,8 @@
63
63
  vertical-align: var(--db-icon-vertical-align, middle);
64
64
  /* stylelint-disable-next-line db-ux/use-sizing */
65
65
  block-size: var(--db-icon-font-size, 1.5rem);
66
+ /* stylelint-disable-next-line db-ux/use-sizing */
67
+ inline-size: var(--db-icon-font-size, 1.5rem);
66
68
  aspect-ratio: 1;
67
69
  flex-shrink: 0;
68
70
  content: var(--db-icon, attr(data-icon));