@db-ux/core-components 4.10.0 → 4.10.1

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 (35) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/build/components/accordion-item/accordion-item.css +4 -44
  3. package/build/components/accordion-item/accordion-item.scss +7 -5
  4. package/build/components/badge/badge.css +3 -75
  5. package/build/components/button/button.css +12 -222
  6. package/build/components/card/card.css +10 -106
  7. package/build/components/card/card.scss +18 -14
  8. package/build/components/custom-button/custom-button.css +15 -597
  9. package/build/components/custom-button/custom-button.scss +7 -5
  10. package/build/components/custom-select/custom-select.css +4 -23
  11. package/build/components/custom-select-list-item/custom-select-list-item.css +3 -45
  12. package/build/components/custom-select-list-item/custom-select-list-item.scss +8 -6
  13. package/build/components/input/input.css +4 -23
  14. package/build/components/link/link.css +8 -88
  15. package/build/components/link/link.scss +8 -6
  16. package/build/components/navigation-item/navigation-item.css +6 -116
  17. package/build/components/navigation-item/navigation-item.scss +7 -5
  18. package/build/components/notification/notification.css +4 -44
  19. package/build/components/select/select.css +4 -23
  20. package/build/components/tab-item/tab-item.css +7 -69
  21. package/build/components/tab-item/tab-item.scss +6 -12
  22. package/build/components/tag/tag.css +40 -875
  23. package/build/components/tag/tag.scss +4 -0
  24. package/build/components/textarea/textarea.css +4 -23
  25. package/build/styles/absolute.css +7 -7
  26. package/build/styles/bundle.css +7 -7
  27. package/build/styles/index.css +6 -6
  28. package/build/styles/internal/_button-components.scss +23 -17
  29. package/build/styles/internal/_form-components.scss +5 -2
  30. package/build/styles/internal/_link-components.scss +15 -13
  31. package/build/styles/internal/_tag-components.scss +21 -15
  32. package/build/styles/relative.css +7 -7
  33. package/build/styles/rollup.css +7 -7
  34. package/build/styles/webpack.css +7 -7
  35. package/package.json +2 -2
@@ -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
 
@@ -950,33 +950,14 @@ input[type=radio]:checked) summary:is([type=date],
950
950
  min-inline-size: var(--db-form-component-min-inline-size, var(--db-sizing-lg));
951
951
  /* stylelint-disable-next-line db-ux/use-spacings */
952
952
  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));
953
+ }
954
+ .db-custom-select summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
953
955
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
954
956
  }
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);
957
+ .db-custom-select summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
958
+ cursor: var(--db-overwrite-cursor, revert);
960
959
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
961
960
  }
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
961
  .db-custom-select > label {
981
962
  padding-block-end: var(--db-spacing-fixed-xs);
982
963
  max-inline-size: var(--db-label-max-size, 100%);
@@ -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
  }
@@ -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
  }
@@ -738,33 +738,14 @@ input[type=radio]:checked) input:is([type=date],
738
738
  min-inline-size: var(--db-form-component-min-inline-size, var(--db-sizing-lg));
739
739
  /* stylelint-disable-next-line db-ux/use-spacings */
740
740
  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));
741
+ }
742
+ .db-input input:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
741
743
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
742
744
  }
743
- .db-input input:hover:not(:disabled,
744
- [aria-disabled=true],
745
- [tabindex="-1"],
746
- :has(:disabled)) {
747
- cursor: var(--db-overwrite-cursor, pointer);
745
+ .db-input input:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
746
+ cursor: var(--db-overwrite-cursor, revert);
748
747
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
749
748
  }
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
749
  .db-input input {
769
750
  /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
770
751
  }
@@ -86,58 +86,18 @@
86
86
 
87
87
  .db-link {
88
88
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
89
+ }
90
+ .db-link:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
89
91
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
90
92
  }
91
- .db-link:hover:not(:disabled,
92
- [aria-disabled=true],
93
- [tabindex="-1"],
94
- :has(:disabled)) {
93
+ .db-link:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
95
94
  cursor: var(--db-overwrite-cursor, pointer);
96
95
  color: color-mix(in srgb, transparent 25%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
97
96
  }
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)) {
97
+ .db-link:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
120
98
  cursor: var(--db-overwrite-cursor, pointer);
121
99
  color: color-mix(in srgb, transparent 50%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
122
100
  }
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
101
 
142
102
  .db-link {
143
103
  inline-size: fit-content;
@@ -185,58 +145,18 @@
185
145
  }
186
146
  .db-link[data-variant=brand] {
187
147
  color: var(--db-brand-on-bg-basic-emphasis-80-default);
148
+ }
149
+ .db-link[data-variant=brand]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
188
150
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
189
151
  }
190
- .db-link[data-variant=brand]:hover:not(:disabled,
191
- [aria-disabled=true],
192
- [tabindex="-1"],
193
- :has(:disabled)) {
152
+ .db-link[data-variant=brand]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
194
153
  cursor: var(--db-overwrite-cursor, pointer);
195
154
  color: var(--db-brand-on-bg-basic-emphasis-80-hovered);
196
155
  }
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)) {
156
+ .db-link[data-variant=brand]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
219
157
  cursor: var(--db-overwrite-cursor, pointer);
220
158
  color: var(--db-brand-on-bg-basic-emphasis-80-pressed);
221
159
  }
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
160
  .db-link[data-size=small] {
241
161
  --db-icon-margin-start: var(--db-spacing-fixed-3xs);
242
162
  }
@@ -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
 
@@ -122,130 +122,20 @@
122
122
  .db-navigation-item .db-navigation-item-expand-button > button:not([hidden]), .db-navigation-item a:not([hidden]) {
123
123
  display: inline-flex;
124
124
  }
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 {
125
+ .db-navigation-item .db-navigation-item-expand-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):is(button),
126
+ .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
127
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
128
128
  }
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)) {
129
+ .db-navigation-item .db-navigation-item-expand-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover:is(button),
130
+ .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
131
  cursor: var(--db-overwrite-cursor, pointer);
141
132
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
142
133
  }
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)) {
134
+ .db-navigation-item .db-navigation-item-expand-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active:is(button),
135
+ .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
136
  cursor: var(--db-overwrite-cursor, pointer);
201
137
  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
202
138
  }
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
139
  .db-navigation-item .db-navigation-item-expand-button:has(~ .db-sub-navigation:is(:hover, :focus)):is(button),
250
140
  .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
141
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
@@ -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)) {
@@ -845,58 +845,18 @@
845
845
 
846
846
  .db-notification a[data-variant=brand], .db-notification a {
847
847
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
848
+ }
849
+ .db-notification a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
848
850
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
849
851
  }
850
- .db-notification a:hover:not(:disabled,
851
- [aria-disabled=true],
852
- [tabindex="-1"],
853
- :has(:disabled)) {
852
+ .db-notification a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
854
853
  cursor: var(--db-overwrite-cursor, pointer);
855
854
  color: color-mix(in srgb, transparent 25%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
856
855
  }
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)) {
856
+ .db-notification a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
879
857
  cursor: var(--db-overwrite-cursor, pointer);
880
858
  color: color-mix(in srgb, transparent 50%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
881
859
  }
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
860
 
901
861
  .db-notification a {
902
862
  inline-size: fit-content;
@@ -751,33 +751,14 @@ input[type=radio]:checked) select:is([type=date],
751
751
  min-inline-size: var(--db-form-component-min-inline-size, var(--db-sizing-lg));
752
752
  /* stylelint-disable-next-line db-ux/use-spacings */
753
753
  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));
754
+ }
755
+ .db-select select:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
754
756
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
755
757
  }
756
- .db-select select:hover:not(:disabled,
757
- [aria-disabled=true],
758
- [tabindex="-1"],
759
- :has(:disabled)) {
760
- cursor: var(--db-overwrite-cursor, pointer);
758
+ .db-select select:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
759
+ cursor: var(--db-overwrite-cursor, revert);
761
760
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
762
761
  }
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
762
  .db-select > label {
782
763
  padding-block-end: var(--db-spacing-fixed-xs);
783
764
  max-inline-size: var(--db-label-max-size, 100%);