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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/build/components/accordion-item/accordion-item.css +4 -44
  3. package/build/components/accordion-item/accordion-item.scss +7 -5
  4. package/build/components/badge/badge.css +3 -75
  5. package/build/components/button/button.css +12 -222
  6. package/build/components/card/card.css +10 -106
  7. package/build/components/card/card.scss +18 -14
  8. package/build/components/custom-button/custom-button.css +15 -597
  9. package/build/components/custom-button/custom-button.scss +7 -5
  10. package/build/components/custom-select/custom-select.css +5 -24
  11. package/build/components/custom-select-list-item/custom-select-list-item.css +3 -45
  12. package/build/components/custom-select-list-item/custom-select-list-item.scss +8 -6
  13. package/build/components/header/header.css +3 -3
  14. package/build/components/header/header.scss +16 -16
  15. package/build/components/input/input.css +5 -24
  16. package/build/components/link/link.css +8 -88
  17. package/build/components/link/link.scss +8 -6
  18. package/build/components/navigation-item/navigation-item.css +6 -116
  19. package/build/components/navigation-item/navigation-item.scss +7 -5
  20. package/build/components/notification/notification.css +4 -44
  21. package/build/components/select/select.css +5 -24
  22. package/build/components/tab-item/tab-item.css +7 -69
  23. package/build/components/tab-item/tab-item.scss +6 -12
  24. package/build/components/tag/tag.css +40 -875
  25. package/build/components/tag/tag.scss +4 -0
  26. package/build/components/textarea/textarea.css +5 -24
  27. package/build/styles/absolute.css +7 -7
  28. package/build/styles/bundle.css +7 -7
  29. package/build/styles/index.css +6 -6
  30. package/build/styles/internal/_button-components.scss +23 -17
  31. package/build/styles/internal/_form-components.scss +6 -3
  32. package/build/styles/internal/_link-components.scss +15 -13
  33. package/build/styles/internal/_tag-components.scss +21 -15
  34. package/build/styles/relative.css +7 -7
  35. package/build/styles/rollup.css +7 -7
  36. package/build/styles/webpack.css +7 -7
  37. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @db-ux/core-components
2
2
 
3
+ ## 4.10.0
4
+
5
+ ### Minor Changes
6
+
7
+ - feat(`DBAccordionItem`): add `open` prop to control the expanded state of an accordion item programmatically. - [see commit 8e7c85d](https://github.com/db-ux-design-system/core-web/commit/8e7c85dfba9e0b013fce9db2151545b8f336a29a)
8
+
9
+ - refactor(form components): replace hard 25ch label width limit with customizable CSS variable `--db-label-max-size` (defaults to `100%`). To restore the previous behavior, set `--db-label-max-size: 25ch;` in your project styles. - [see commit 08b1234](https://github.com/db-ux-design-system/core-web/commit/08b1234342e3c0d622116d528a979ff53d7e2356)
10
+
3
11
  ## 4.9.1
4
12
 
5
13
  ### Patch Changes
package/build/components/accordion-item/accordion-item.css CHANGED
@@ -145,58 +145,18 @@
145
145
  padding: var(--db-spacing-fixed-md);
146
146
  gap: var(--db-spacing-fixed-md);
147
147
  border-radius: var(--db-border-radius-sm);
148
+ }
149
+ .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
148
150
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
149
151
  }
150
- .db-accordion-item > details > summary:hover:not(:disabled,
151
- [aria-disabled=true],
152
- [tabindex="-1"],
153
- :has(:disabled)) {
152
+ .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
154
153
  cursor: var(--db-overwrite-cursor, pointer);
155
154
  background-color: var(--db-adaptive-bg-basic-level-1-hovered);
156
155
  }
157
- .db-accordion-item > details > summary:hover:not(:disabled,
158
- [aria-disabled=true],
159
- [tabindex="-1"],
160
- :has(:disabled)):is(textarea), .db-accordion-item > details > summary:hover:not(:disabled,
161
- [aria-disabled=true],
162
- [tabindex="-1"],
163
- :has(:disabled)):is(input) {
164
- cursor: initial;
165
- }
166
- .db-accordion-item > details > summary:hover:not(:disabled,
167
- [aria-disabled=true],
168
- [tabindex="-1"],
169
- :has(:disabled)):is(input[type=checkbox]), .db-accordion-item > details > summary:hover:not(:disabled,
170
- [aria-disabled=true],
171
- [tabindex="-1"],
172
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
173
- cursor: pointer;
174
- }
175
- .db-accordion-item > details > summary:active:not(:disabled,
176
- [aria-disabled=true],
177
- [tabindex="-1"],
178
- :has(:disabled)) {
156
+ .db-accordion-item > details > summary:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
179
157
  cursor: var(--db-overwrite-cursor, pointer);
180
158
  background-color: var(--db-adaptive-bg-basic-level-1-pressed);
181
159
  }
182
- .db-accordion-item > details > summary:active:not(:disabled,
183
- [aria-disabled=true],
184
- [tabindex="-1"],
185
- :has(:disabled)):is(textarea), .db-accordion-item > details > summary:active:not(:disabled,
186
- [aria-disabled=true],
187
- [tabindex="-1"],
188
- :has(:disabled)):is(input) {
189
- cursor: initial;
190
- }
191
- .db-accordion-item > details > summary:active:not(:disabled,
192
- [aria-disabled=true],
193
- [tabindex="-1"],
194
- :has(:disabled)):is(input[type=checkbox]), .db-accordion-item > details > summary:active:not(:disabled,
195
- [aria-disabled=true],
196
- [tabindex="-1"],
197
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
198
- cursor: pointer;
199
- }
200
160
  .db-accordion-item > details > summary::-webkit-details-marker {
201
161
  display: none;
202
162
  }
package/build/components/accordion-item/accordion-item.scss CHANGED
@@ -57,12 +57,14 @@
57
57
  gap: variables.$db-spacing-fixed-md;
58
58
  border-radius: variables.$db-border-radius-sm;
59
59
 
60
- @include helpers.hover {
61
- background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
62
- }
60
+ @include helpers.not-disabled {
61
+ @include helpers.hover {
62
+ background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
63
+ }
63
64
 
64
- @include helpers.active {
65
- background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
65
+ @include helpers.active {
66
+ background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
67
+ }
66
68
  }
67
69
 
68
70
  &::-webkit-details-marker {
package/build/components/badge/badge.css CHANGED
@@ -43,89 +43,17 @@
43
43
  .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::before, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::before, .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button::after, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button::after {
44
44
  --db-icon-color: var(--db-adaptive-on-bg-vibrant-default);
45
45
  }
46
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button {
46
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
47
47
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
48
48
  }
49
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
50
- [aria-disabled=true],
51
- [tabindex="-1"],
52
- :has(:disabled)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
53
- [aria-disabled=true],
54
- [tabindex="-1"],
55
- :has(:disabled)) {
49
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
56
50
  cursor: var(--db-overwrite-cursor, pointer);
57
51
  background-color: var(--db-adaptive-bg-vibrant-hovered);
58
52
  }
59
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
60
- [aria-disabled=true],
61
- [tabindex="-1"],
62
- :has(:disabled)):is(textarea), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
63
- [aria-disabled=true],
64
- [tabindex="-1"],
65
- :has(:disabled)):is(textarea), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
66
- [aria-disabled=true],
67
- [tabindex="-1"],
68
- :has(:disabled)):is(input), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
69
- [aria-disabled=true],
70
- [tabindex="-1"],
71
- :has(:disabled)):is(input) {
72
- cursor: initial;
73
- }
74
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
75
- [aria-disabled=true],
76
- [tabindex="-1"],
77
- :has(:disabled)):is(input[type=checkbox]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
78
- [aria-disabled=true],
79
- [tabindex="-1"],
80
- :has(:disabled)):is(input[type=checkbox]), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
81
- [aria-disabled=true],
82
- [tabindex="-1"],
83
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:hover:not(:disabled,
84
- [aria-disabled=true],
85
- [tabindex="-1"],
86
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
87
- cursor: pointer;
88
- }
89
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
90
- [aria-disabled=true],
91
- [tabindex="-1"],
92
- :has(:disabled)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
93
- [aria-disabled=true],
94
- [tabindex="-1"],
95
- :has(:disabled)) {
53
+ .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
96
54
  cursor: var(--db-overwrite-cursor, pointer);
97
55
  background-color: var(--db-adaptive-bg-vibrant-pressed);
98
56
  }
99
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
100
- [aria-disabled=true],
101
- [tabindex="-1"],
102
- :has(:disabled)):is(textarea), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
103
- [aria-disabled=true],
104
- [tabindex="-1"],
105
- :has(:disabled)):is(textarea), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
106
- [aria-disabled=true],
107
- [tabindex="-1"],
108
- :has(:disabled)):is(input), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
109
- [aria-disabled=true],
110
- [tabindex="-1"],
111
- :has(:disabled)):is(input) {
112
- cursor: initial;
113
- }
114
- .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
115
- [aria-disabled=true],
116
- [tabindex="-1"],
117
- :has(:disabled)):is(input[type=checkbox]), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
118
- [aria-disabled=true],
119
- [tabindex="-1"],
120
- :has(:disabled)):is(input[type=checkbox]), .db-badge:not([data-semantic])[data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
121
- [aria-disabled=true],
122
- [tabindex="-1"],
123
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-badge[data-semantic=adaptive][data-emphasis=strong] .db-tab-remove-button:active:not(:disabled,
124
- [aria-disabled=true],
125
- [tabindex="-1"],
126
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
127
- cursor: pointer;
128
- }
129
57
 
130
58
  .db-badge[data-placement^=corner] {
131
59
  position: absolute;
package/build/components/button/button.css CHANGED
@@ -42,207 +42,37 @@
42
42
 
43
43
  .db-button[data-variant=outlined], .db-button:not([data-variant]), .db-button[data-variant=""], .db-button[data-variant=ghost] {
44
44
  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
45
+ }
46
+ .db-button[data-variant=outlined]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):not([data-variant]), .db-button[data-variant=""]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-button[data-variant=ghost]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
45
47
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
46
48
  }
47
- .db-button[data-variant=outlined]:hover:not(:disabled,
48
- [aria-disabled=true],
49
- [tabindex="-1"],
50
- :has(:disabled)), .db-button:hover:not(:disabled,
51
- [aria-disabled=true],
52
- [tabindex="-1"],
53
- :has(:disabled)):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
54
- [aria-disabled=true],
55
- [tabindex="-1"],
56
- :has(:disabled)), .db-button[data-variant=ghost]:hover:not(:disabled,
57
- [aria-disabled=true],
58
- [tabindex="-1"],
59
- :has(:disabled)) {
49
+ .db-button[data-variant=outlined]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover:not([data-variant]), .db-button[data-variant=""]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-button[data-variant=ghost]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
60
50
  cursor: var(--db-overwrite-cursor, pointer);
61
51
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
62
52
  }
63
- .db-button[data-variant=outlined]:hover:not(:disabled,
64
- [aria-disabled=true],
65
- [tabindex="-1"],
66
- :has(:disabled)):is(textarea), .db-button:hover:not(:disabled,
67
- [aria-disabled=true],
68
- [tabindex="-1"],
69
- :has(:disabled)):is(textarea):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
70
- [aria-disabled=true],
71
- [tabindex="-1"],
72
- :has(:disabled)):is(textarea), .db-button[data-variant=ghost]:hover:not(:disabled,
73
- [aria-disabled=true],
74
- [tabindex="-1"],
75
- :has(:disabled)):is(textarea), .db-button[data-variant=outlined]:hover:not(:disabled,
76
- [aria-disabled=true],
77
- [tabindex="-1"],
78
- :has(:disabled)):is(input), .db-button:hover:not(:disabled,
79
- [aria-disabled=true],
80
- [tabindex="-1"],
81
- :has(:disabled)):is(input):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
82
- [aria-disabled=true],
83
- [tabindex="-1"],
84
- :has(:disabled)):is(input), .db-button[data-variant=ghost]:hover:not(:disabled,
85
- [aria-disabled=true],
86
- [tabindex="-1"],
87
- :has(:disabled)):is(input) {
88
- cursor: initial;
89
- }
90
- .db-button[data-variant=outlined]:hover:not(:disabled,
91
- [aria-disabled=true],
92
- [tabindex="-1"],
93
- :has(:disabled)):is(input[type=checkbox]), .db-button:hover:not(:disabled,
94
- [aria-disabled=true],
95
- [tabindex="-1"],
96
- :has(:disabled)):is(input[type=checkbox]):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
97
- [aria-disabled=true],
98
- [tabindex="-1"],
99
- :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=ghost]:hover:not(:disabled,
100
- [aria-disabled=true],
101
- [tabindex="-1"],
102
- :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=outlined]:hover:not(:disabled,
103
- [aria-disabled=true],
104
- [tabindex="-1"],
105
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-button:hover:not(:disabled,
106
- [aria-disabled=true],
107
- [tabindex="-1"],
108
- :has(:disabled)):is(input[type=radio]:not(:checked)):not([data-variant]), .db-button[data-variant=""]:hover:not(:disabled,
109
- [aria-disabled=true],
110
- [tabindex="-1"],
111
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:hover:not(:disabled,
112
- [aria-disabled=true],
113
- [tabindex="-1"],
114
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
115
- cursor: pointer;
116
- }
117
- .db-button[data-variant=outlined]:active:not(:disabled,
118
- [aria-disabled=true],
119
- [tabindex="-1"],
120
- :has(:disabled)), .db-button:active:not(:disabled,
121
- [aria-disabled=true],
122
- [tabindex="-1"],
123
- :has(:disabled)):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
124
- [aria-disabled=true],
125
- [tabindex="-1"],
126
- :has(:disabled)), .db-button[data-variant=ghost]:active:not(:disabled,
127
- [aria-disabled=true],
128
- [tabindex="-1"],
129
- :has(:disabled)) {
53
+ .db-button[data-variant=outlined]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active:not([data-variant]), .db-button[data-variant=""]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-button[data-variant=ghost]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
130
54
  cursor: var(--db-overwrite-cursor, pointer);
131
55
  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
132
56
  }
133
- .db-button[data-variant=outlined]:active:not(:disabled,
134
- [aria-disabled=true],
135
- [tabindex="-1"],
136
- :has(:disabled)):is(textarea), .db-button:active:not(:disabled,
137
- [aria-disabled=true],
138
- [tabindex="-1"],
139
- :has(:disabled)):is(textarea):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
140
- [aria-disabled=true],
141
- [tabindex="-1"],
142
- :has(:disabled)):is(textarea), .db-button[data-variant=ghost]:active:not(:disabled,
143
- [aria-disabled=true],
144
- [tabindex="-1"],
145
- :has(:disabled)):is(textarea), .db-button[data-variant=outlined]:active:not(:disabled,
146
- [aria-disabled=true],
147
- [tabindex="-1"],
148
- :has(:disabled)):is(input), .db-button:active:not(:disabled,
149
- [aria-disabled=true],
150
- [tabindex="-1"],
151
- :has(:disabled)):is(input):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
152
- [aria-disabled=true],
153
- [tabindex="-1"],
154
- :has(:disabled)):is(input), .db-button[data-variant=ghost]:active:not(:disabled,
155
- [aria-disabled=true],
156
- [tabindex="-1"],
157
- :has(:disabled)):is(input) {
158
- cursor: initial;
159
- }
160
- .db-button[data-variant=outlined]:active:not(:disabled,
161
- [aria-disabled=true],
162
- [tabindex="-1"],
163
- :has(:disabled)):is(input[type=checkbox]), .db-button:active:not(:disabled,
164
- [aria-disabled=true],
165
- [tabindex="-1"],
166
- :has(:disabled)):is(input[type=checkbox]):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
167
- [aria-disabled=true],
168
- [tabindex="-1"],
169
- :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=ghost]:active:not(:disabled,
170
- [aria-disabled=true],
171
- [tabindex="-1"],
172
- :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=outlined]:active:not(:disabled,
173
- [aria-disabled=true],
174
- [tabindex="-1"],
175
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-button:active:not(:disabled,
176
- [aria-disabled=true],
177
- [tabindex="-1"],
178
- :has(:disabled)):is(input[type=radio]:not(:checked)):not([data-variant]), .db-button[data-variant=""]:active:not(:disabled,
179
- [aria-disabled=true],
180
- [tabindex="-1"],
181
- :has(:disabled)):is(input[type=radio]:not(:checked)), .db-button[data-variant=ghost]:active:not(:disabled,
182
- [aria-disabled=true],
183
- [tabindex="-1"],
184
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
185
- cursor: pointer;
186
- }
187
57
 
188
58
  .db-button[data-variant=brand] {
189
59
  background-color: var(--db-brand-origin-default);
190
60
  color: var(--db-brand-on-origin-default);
191
61
  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
62
+ }
63
+ .db-button[data-variant=brand]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
192
64
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
193
65
  }
194
- .db-button[data-variant=brand]:hover:not(:disabled,
195
- [aria-disabled=true],
196
- [tabindex="-1"],
197
- :has(:disabled)) {
66
+ .db-button[data-variant=brand]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
198
67
  cursor: var(--db-overwrite-cursor, pointer);
199
68
  background-color: var(--db-brand-origin-hovered);
200
69
  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
201
70
  }
202
- .db-button[data-variant=brand]:hover:not(:disabled,
203
- [aria-disabled=true],
204
- [tabindex="-1"],
205
- :has(:disabled)):is(textarea), .db-button[data-variant=brand]:hover:not(:disabled,
206
- [aria-disabled=true],
207
- [tabindex="-1"],
208
- :has(:disabled)):is(input) {
209
- cursor: initial;
210
- }
211
- .db-button[data-variant=brand]:hover:not(:disabled,
212
- [aria-disabled=true],
213
- [tabindex="-1"],
214
- :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=brand]:hover:not(:disabled,
215
- [aria-disabled=true],
216
- [tabindex="-1"],
217
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
218
- cursor: pointer;
219
- }
220
- .db-button[data-variant=brand]:active:not(:disabled,
221
- [aria-disabled=true],
222
- [tabindex="-1"],
223
- :has(:disabled)) {
71
+ .db-button[data-variant=brand]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
224
72
  cursor: var(--db-overwrite-cursor, pointer);
225
73
  background-color: var(--db-brand-origin-pressed);
226
74
  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
227
75
  }
228
- .db-button[data-variant=brand]:active:not(:disabled,
229
- [aria-disabled=true],
230
- [tabindex="-1"],
231
- :has(:disabled)):is(textarea), .db-button[data-variant=brand]:active:not(:disabled,
232
- [aria-disabled=true],
233
- [tabindex="-1"],
234
- :has(:disabled)):is(input) {
235
- cursor: initial;
236
- }
237
- .db-button[data-variant=brand]:active:not(:disabled,
238
- [aria-disabled=true],
239
- [tabindex="-1"],
240
- :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=brand]:active:not(:disabled,
241
- [aria-disabled=true],
242
- [tabindex="-1"],
243
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
244
- cursor: pointer;
245
- }
246
76
 
247
77
  .db-button {
248
78
  max-inline-size: 100%;
@@ -290,58 +120,18 @@
290
120
  }
291
121
  .db-button[data-variant=filled] {
292
122
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
123
+ }
124
+ .db-button[data-variant=filled]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
293
125
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
294
126
  }
295
- .db-button[data-variant=filled]:hover:not(:disabled,
296
- [aria-disabled=true],
297
- [tabindex="-1"],
298
- :has(:disabled)) {
127
+ .db-button[data-variant=filled]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
299
128
  cursor: var(--db-overwrite-cursor, pointer);
300
129
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
301
130
  }
302
- .db-button[data-variant=filled]:hover:not(:disabled,
303
- [aria-disabled=true],
304
- [tabindex="-1"],
305
- :has(:disabled)):is(textarea), .db-button[data-variant=filled]:hover:not(:disabled,
306
- [aria-disabled=true],
307
- [tabindex="-1"],
308
- :has(:disabled)):is(input) {
309
- cursor: initial;
310
- }
311
- .db-button[data-variant=filled]:hover:not(:disabled,
312
- [aria-disabled=true],
313
- [tabindex="-1"],
314
- :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=filled]:hover:not(:disabled,
315
- [aria-disabled=true],
316
- [tabindex="-1"],
317
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
318
- cursor: pointer;
319
- }
320
- .db-button[data-variant=filled]:active:not(:disabled,
321
- [aria-disabled=true],
322
- [tabindex="-1"],
323
- :has(:disabled)) {
131
+ .db-button[data-variant=filled]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
324
132
  cursor: var(--db-overwrite-cursor, pointer);
325
133
  background-color: var(--db-adaptive-bg-basic-transparent-semi-pressed);
326
134
  }
327
- .db-button[data-variant=filled]:active:not(:disabled,
328
- [aria-disabled=true],
329
- [tabindex="-1"],
330
- :has(:disabled)):is(textarea), .db-button[data-variant=filled]:active:not(:disabled,
331
- [aria-disabled=true],
332
- [tabindex="-1"],
333
- :has(:disabled)):is(input) {
334
- cursor: initial;
335
- }
336
- .db-button[data-variant=filled]:active:not(:disabled,
337
- [aria-disabled=true],
338
- [tabindex="-1"],
339
- :has(:disabled)):is(input[type=checkbox]), .db-button[data-variant=filled]:active:not(:disabled,
340
- [aria-disabled=true],
341
- [tabindex="-1"],
342
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
343
- cursor: pointer;
344
- }
345
135
  .db-button:is(:disabled, [aria-disabled=true]) {
346
136
  opacity: var(--db-opacity-md);
347
137
  }
package/build/components/card/card.css CHANGED
@@ -18,77 +18,23 @@
18
18
  padding: unset;
19
19
  font: inherit;
20
20
  }
21
- :is(a[href], button) {
21
+ :is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
22
22
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
23
23
  }
24
- :is(a[href], button):hover:not(:disabled,
25
- [aria-disabled=true],
26
- [tabindex="-1"],
27
- :has(:disabled)) {
24
+ :is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
28
25
  cursor: var(--db-overwrite-cursor, pointer);
29
26
  }
30
- :is(a[href], button):hover:not(:disabled,
31
- [aria-disabled=true],
32
- [tabindex="-1"],
33
- :has(:disabled)) > .db-card,
34
- :is(a[href], button):hover:not(:disabled,
35
- [aria-disabled=true],
36
- [tabindex="-1"],
37
- :has(:disabled)) > db-card > .db-card {
27
+ :is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover > .db-card,
28
+ :is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover > db-card > .db-card {
38
29
  background-color: var(--db-card-background-color-hovered);
39
30
  }
40
- :is(a[href], button):hover:not(:disabled,
41
- [aria-disabled=true],
42
- [tabindex="-1"],
43
- :has(:disabled)):is(textarea), :is(a[href], button):hover:not(:disabled,
44
- [aria-disabled=true],
45
- [tabindex="-1"],
46
- :has(:disabled)):is(input) {
47
- cursor: initial;
48
- }
49
- :is(a[href], button):hover:not(:disabled,
50
- [aria-disabled=true],
51
- [tabindex="-1"],
52
- :has(:disabled)):is(input[type=checkbox]), :is(a[href], button):hover:not(:disabled,
53
- [aria-disabled=true],
54
- [tabindex="-1"],
55
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
56
- cursor: pointer;
57
- }
58
- :is(a[href], button):active:not(:disabled,
59
- [aria-disabled=true],
60
- [tabindex="-1"],
61
- :has(:disabled)) {
31
+ :is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
62
32
  cursor: var(--db-overwrite-cursor, pointer);
63
33
  }
64
- :is(a[href], button):active:not(:disabled,
65
- [aria-disabled=true],
66
- [tabindex="-1"],
67
- :has(:disabled)) > .db-card,
68
- :is(a[href], button):active:not(:disabled,
69
- [aria-disabled=true],
70
- [tabindex="-1"],
71
- :has(:disabled)) > db-card > .db-card {
34
+ :is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active > .db-card,
35
+ :is(a[href], button):not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active > db-card > .db-card {
72
36
  background-color: var(--db-card-background-color-pressed);
73
37
  }
74
- :is(a[href], button):active:not(:disabled,
75
- [aria-disabled=true],
76
- [tabindex="-1"],
77
- :has(:disabled)):is(textarea), :is(a[href], button):active:not(:disabled,
78
- [aria-disabled=true],
79
- [tabindex="-1"],
80
- :has(:disabled)):is(input) {
81
- cursor: initial;
82
- }
83
- :is(a[href], button):active:not(:disabled,
84
- [aria-disabled=true],
85
- [tabindex="-1"],
86
- :has(:disabled)):is(input[type=checkbox]), :is(a[href], button):active:not(:disabled,
87
- [aria-disabled=true],
88
- [tabindex="-1"],
89
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
90
- cursor: pointer;
91
- }
92
38
 
93
39
  .db-card {
94
40
  --db-card-background-color-default: var(--db-adaptive-bg-basic-level-1-default);
@@ -120,59 +66,17 @@
120
66
  flex-direction: column;
121
67
  background-color: var(--db-card-background-color-default);
122
68
  }
123
- .db-card[data-behavior=interactive] {
69
+ .db-card[data-behavior=interactive]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
124
70
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
125
71
  }
126
- .db-card[data-behavior=interactive]:hover:not(:disabled,
127
- [aria-disabled=true],
128
- [tabindex="-1"],
129
- :has(:disabled)) {
72
+ .db-card[data-behavior=interactive]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
130
73
  cursor: var(--db-overwrite-cursor, pointer);
131
74
  background-color: var(--db-card-background-color-hovered);
132
75
  }
133
- .db-card[data-behavior=interactive]:hover:not(:disabled,
134
- [aria-disabled=true],
135
- [tabindex="-1"],
136
- :has(:disabled)):is(textarea), .db-card[data-behavior=interactive]:hover:not(:disabled,
137
- [aria-disabled=true],
138
- [tabindex="-1"],
139
- :has(:disabled)):is(input) {
140
- cursor: initial;
141
- }
142
- .db-card[data-behavior=interactive]:hover:not(:disabled,
143
- [aria-disabled=true],
144
- [tabindex="-1"],
145
- :has(:disabled)):is(input[type=checkbox]), .db-card[data-behavior=interactive]:hover:not(:disabled,
146
- [aria-disabled=true],
147
- [tabindex="-1"],
148
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
149
- cursor: pointer;
150
- }
151
- .db-card[data-behavior=interactive]:active:not(:disabled,
152
- [aria-disabled=true],
153
- [tabindex="-1"],
154
- :has(:disabled)) {
76
+ .db-card[data-behavior=interactive]:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
155
77
  cursor: var(--db-overwrite-cursor, pointer);
156
78
  background-color: var(--db-card-background-color-pressed);
157
79
  }
158
- .db-card[data-behavior=interactive]:active:not(:disabled,
159
- [aria-disabled=true],
160
- [tabindex="-1"],
161
- :has(:disabled)):is(textarea), .db-card[data-behavior=interactive]:active:not(:disabled,
162
- [aria-disabled=true],
163
- [tabindex="-1"],
164
- :has(:disabled)):is(input) {
165
- cursor: initial;
166
- }
167
- .db-card[data-behavior=interactive]:active:not(:disabled,
168
- [aria-disabled=true],
169
- [tabindex="-1"],
170
- :has(:disabled)):is(input[type=checkbox]), .db-card[data-behavior=interactive]:active:not(:disabled,
171
- [aria-disabled=true],
172
- [tabindex="-1"],
173
- :has(:disabled)):is(input[type=radio]:not(:checked)) {
174
- cursor: pointer;
175
- }
176
80
  .db-card[data-elevation-level="2"] {
177
81
  --db-card-background-color-default: var(--db-adaptive-bg-basic-level-2-default);
178
82
  --db-card-background-color-hovered: var(--db-adaptive-bg-basic-level-2-hovered);
package/build/components/card/card.scss CHANGED
@@ -14,17 +14,19 @@
14
14
  font: inherit;
15
15
  }
16
16
 
17
- @include helpers.hover {
18
- > .db-card,
19
- > db-card > .db-card {
20
- background-color: var(--db-card-background-color-hovered);
17
+ @include helpers.not-disabled {
18
+ @include helpers.hover {
19
+ > .db-card,
20
+ > db-card > .db-card {
21
+ background-color: var(--db-card-background-color-hovered);
22
+ }
21
23
  }
22
- }
23
24
 
24
- @include helpers.active {
25
- > .db-card,
26
- > db-card > .db-card {
27
- background-color: var(--db-card-background-color-pressed);
25
+ @include helpers.active {
26
+ > .db-card,
27
+ > db-card > .db-card {
28
+ background-color: var(--db-card-background-color-pressed);
29
+ }
28
30
  }
29
31
  }
30
32
  }
@@ -42,12 +44,14 @@
42
44
  background-color: var(--db-card-background-color-default);
43
45
 
44
46
  &[data-behavior="interactive"] {
45
- @include helpers.hover {
46
- background-color: var(--db-card-background-color-hovered);
47
- }
47
+ @include helpers.not-disabled {
48
+ @include helpers.hover {
49
+ background-color: var(--db-card-background-color-hovered);
50
+ }
48
51
 
49
- @include helpers.active {
50
- background-color: var(--db-card-background-color-pressed);
52
+ @include helpers.active {
53
+ background-color: var(--db-card-background-color-pressed);
54
+ }
51
55
  }
52
56
  }
53
57