@db-ux/core-components 4.4.3 → 4.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/build/components/accordion-item/accordion-item.css +38 -7
  3. package/build/components/accordion-item/accordion-item.scss +1 -1
  4. package/build/components/badge/badge.css +75 -11
  5. package/build/components/badge/badge.scss +6 -1
  6. package/build/components/brand/brand.css +2 -0
  7. package/build/components/brand/brand.scss +2 -0
  8. package/build/components/button/button.css +245 -60
  9. package/build/components/button/button.scss +1 -105
  10. package/build/components/card/card.css +88 -16
  11. package/build/components/checkbox/checkbox.css +1 -0
  12. package/build/components/custom-button/custom-button.css +892 -0
  13. package/build/components/custom-button/custom-button.scss +78 -0
  14. package/build/components/custom-select/custom-select.css +19 -3
  15. package/build/components/custom-select-dropdown/custom-select-dropdown.css +1 -0
  16. package/build/components/custom-select-dropdown/custom-select-dropdown.scss +1 -0
  17. package/build/components/custom-select-list-item/custom-select-list-item.css +36 -6
  18. package/build/components/drawer/drawer.css +4 -0
  19. package/build/components/drawer/drawer.scss +4 -0
  20. package/build/components/infotext/infotext.css +4 -0
  21. package/build/components/infotext/infotext.scss +4 -0
  22. package/build/components/input/input.css +19 -3
  23. package/build/components/link/link.css +73 -12
  24. package/build/components/navigation-item/navigation-item.css +111 -21
  25. package/build/components/navigation-item/navigation-item.scss +2 -1
  26. package/build/components/notification/notification.css +37 -6
  27. package/build/components/select/select.css +19 -3
  28. package/build/components/switch/switch.css +1 -0
  29. package/build/components/tab-item/tab-item.css +52 -10
  30. package/build/components/tabs/tabs.css +2 -0
  31. package/build/components/tabs/tabs.scss +2 -0
  32. package/build/components/tag/tag.css +856 -125
  33. package/build/components/textarea/textarea.css +18 -3
  34. package/build/components/tooltip/tooltip.css +4 -1
  35. package/build/components/tooltip/tooltip.scss +12 -10
  36. package/build/styles/absolute.css +9 -9
  37. package/build/styles/index.css +8 -8
  38. package/build/styles/index.scss +1 -0
  39. package/build/styles/internal/_button-components.scss +140 -2
  40. package/build/styles/internal/_custom-elements.scss +1 -1
  41. package/build/styles/internal/_icon-passing.scss +23 -3
  42. package/build/styles/internal/_popover-component.scss +4 -4
  43. package/build/styles/relative.css +9 -9
  44. package/build/styles/rollup.css +9 -9
  45. package/build/styles/wc-workarounds.css +1 -1
  46. package/build/styles/webpack.css +9 -9
  47. package/package.json +5 -5
package/build/components/notification/notification.css CHANGED
@@ -909,6 +909,7 @@
909
909
  text-transform: none;
910
910
  overflow: clip;
911
911
  vertical-align: var(--db-icon-vertical-align, middle);
912
+ /* stylelint-disable-next-line db-ux/use-sizing */
912
913
  block-size: var(--db-icon-font-size, 1.5rem);
913
914
  aspect-ratio: 1;
914
915
  flex-shrink: 0;
@@ -969,24 +970,54 @@
969
970
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
970
971
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
971
972
  }
972
- .db-notification a:hover:not(:disabled, [aria-disabled=true]) {
973
+ .db-notification a:hover:not(:disabled,
974
+ [aria-disabled=true],
975
+ [tabindex="-1"],
976
+ :has(:disabled)) {
973
977
  cursor: var(--db-overwrite-cursor, pointer);
974
978
  color: color-mix(in srgb, transparent 25%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
975
979
  }
976
- .db-notification a:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-notification a:hover:not(:disabled, [aria-disabled=true]):is(input) {
980
+ .db-notification a:hover:not(:disabled,
981
+ [aria-disabled=true],
982
+ [tabindex="-1"],
983
+ :has(:disabled)):is(textarea), .db-notification a:hover:not(:disabled,
984
+ [aria-disabled=true],
985
+ [tabindex="-1"],
986
+ :has(:disabled)):is(input) {
977
987
  cursor: initial;
978
988
  }
979
- .db-notification a:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-notification a:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
989
+ .db-notification a:hover:not(:disabled,
990
+ [aria-disabled=true],
991
+ [tabindex="-1"],
992
+ :has(:disabled)):is(input[type=checkbox]), .db-notification a:hover:not(:disabled,
993
+ [aria-disabled=true],
994
+ [tabindex="-1"],
995
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
980
996
  cursor: pointer;
981
997
  }
982
- .db-notification a:active:not(:disabled, [aria-disabled=true]) {
998
+ .db-notification a:active:not(:disabled,
999
+ [aria-disabled=true],
1000
+ [tabindex="-1"],
1001
+ :has(:disabled)) {
983
1002
  cursor: var(--db-overwrite-cursor, pointer);
984
1003
  color: color-mix(in srgb, transparent 50%, var(--db-adaptive-on-bg-basic-emphasis-100-default));
985
1004
  }
986
- .db-notification a:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-notification a:active:not(:disabled, [aria-disabled=true]):is(input) {
1005
+ .db-notification a:active:not(:disabled,
1006
+ [aria-disabled=true],
1007
+ [tabindex="-1"],
1008
+ :has(:disabled)):is(textarea), .db-notification a:active:not(:disabled,
1009
+ [aria-disabled=true],
1010
+ [tabindex="-1"],
1011
+ :has(:disabled)):is(input) {
987
1012
  cursor: initial;
988
1013
  }
989
- .db-notification a:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-notification a:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
1014
+ .db-notification a:active:not(:disabled,
1015
+ [aria-disabled=true],
1016
+ [tabindex="-1"],
1017
+ :has(:disabled)):is(input[type=checkbox]), .db-notification a:active:not(:disabled,
1018
+ [aria-disabled=true],
1019
+ [tabindex="-1"],
1020
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
990
1021
  cursor: pointer;
991
1022
  }
992
1023
 
package/build/components/select/select.css CHANGED
@@ -377,6 +377,7 @@
377
377
  text-transform: none;
378
378
  overflow: clip;
379
379
  vertical-align: var(--db-icon-vertical-align, middle);
380
+ /* stylelint-disable-next-line db-ux/use-sizing */
380
381
  block-size: var(--db-icon-font-size, 1.5rem);
381
382
  aspect-ratio: 1;
382
383
  flex-shrink: 0;
@@ -860,14 +861,29 @@ input[type=radio]:checked) select:is([type=date],
860
861
  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));
861
862
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
862
863
  }
863
- .db-select select:hover:not(:disabled, [aria-disabled=true]) {
864
+ .db-select select:hover:not(:disabled,
865
+ [aria-disabled=true],
866
+ [tabindex="-1"],
867
+ :has(:disabled)) {
864
868
  cursor: var(--db-overwrite-cursor, pointer);
865
869
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
866
870
  }
867
- .db-select select:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-select select:hover:not(:disabled, [aria-disabled=true]):is(input) {
871
+ .db-select select:hover:not(:disabled,
872
+ [aria-disabled=true],
873
+ [tabindex="-1"],
874
+ :has(:disabled)):is(textarea), .db-select select:hover:not(:disabled,
875
+ [aria-disabled=true],
876
+ [tabindex="-1"],
877
+ :has(:disabled)):is(input) {
868
878
  cursor: initial;
869
879
  }
870
- .db-select select:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-select select:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
880
+ .db-select select:hover:not(:disabled,
881
+ [aria-disabled=true],
882
+ [tabindex="-1"],
883
+ :has(:disabled)):is(input[type=checkbox]), .db-select select:hover:not(:disabled,
884
+ [aria-disabled=true],
885
+ [tabindex="-1"],
886
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
871
887
  cursor: pointer;
872
888
  }
873
889
  .db-select > label {
package/build/components/switch/switch.css CHANGED
@@ -156,6 +156,7 @@
156
156
  text-transform: none;
157
157
  overflow: clip;
158
158
  vertical-align: var(--db-icon-vertical-align, middle);
159
+ /* stylelint-disable-next-line db-ux/use-sizing */
159
160
  block-size: var(--db-icon-font-size, 1.5rem);
160
161
  aspect-ratio: 1;
161
162
  flex-shrink: 0;
package/build/components/tab-item/tab-item.css CHANGED
@@ -146,34 +146,76 @@
146
146
  .db-tab-item label:not([hidden]) {
147
147
  display: inline-block;
148
148
  }
149
- .db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
149
+ .db-tab-item label:hover:not(:disabled,
150
+ [aria-disabled=true],
151
+ [tabindex="-1"],
152
+ :has(:disabled)) {
150
153
  cursor: var(--db-overwrite-cursor, pointer);
151
154
  }
152
- .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
155
+ .db-tab-item label:hover:not(:disabled,
156
+ [aria-disabled=true],
157
+ [tabindex="-1"],
158
+ :has(:disabled)):has(:not(input:disabled)) {
153
159
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
154
160
  }
155
- .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
161
+ .db-tab-item label:hover:not(:disabled,
162
+ [aria-disabled=true],
163
+ [tabindex="-1"],
164
+ :has(:disabled)):has(input:disabled) {
156
165
  cursor: initial;
157
166
  }
158
- .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input) {
167
+ .db-tab-item label:hover:not(:disabled,
168
+ [aria-disabled=true],
169
+ [tabindex="-1"],
170
+ :has(:disabled)):is(textarea), .db-tab-item label:hover:not(:disabled,
171
+ [aria-disabled=true],
172
+ [tabindex="-1"],
173
+ :has(:disabled)):is(input) {
159
174
  cursor: initial;
160
175
  }
161
- .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
176
+ .db-tab-item label:hover:not(:disabled,
177
+ [aria-disabled=true],
178
+ [tabindex="-1"],
179
+ :has(:disabled)):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled,
180
+ [aria-disabled=true],
181
+ [tabindex="-1"],
182
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
162
183
  cursor: pointer;
163
184
  }
164
- .db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
185
+ .db-tab-item label:hover:not(:disabled,
186
+ [aria-disabled=true],
187
+ [tabindex="-1"],
188
+ :has(:disabled)) {
165
189
  cursor: var(--db-overwrite-cursor, pointer);
166
190
  }
167
- .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
191
+ .db-tab-item label:hover:not(:disabled,
192
+ [aria-disabled=true],
193
+ [tabindex="-1"],
194
+ :has(:disabled)):has(:not(input:disabled)) {
168
195
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
169
196
  }
170
- .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
197
+ .db-tab-item label:hover:not(:disabled,
198
+ [aria-disabled=true],
199
+ [tabindex="-1"],
200
+ :has(:disabled)):has(input:disabled) {
171
201
  cursor: initial;
172
202
  }
173
- .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input) {
203
+ .db-tab-item label:hover:not(:disabled,
204
+ [aria-disabled=true],
205
+ [tabindex="-1"],
206
+ :has(:disabled)):is(textarea), .db-tab-item label:hover:not(:disabled,
207
+ [aria-disabled=true],
208
+ [tabindex="-1"],
209
+ :has(:disabled)):is(input) {
174
210
  cursor: initial;
175
211
  }
176
- .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
212
+ .db-tab-item label:hover:not(:disabled,
213
+ [aria-disabled=true],
214
+ [tabindex="-1"],
215
+ :has(:disabled)):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled,
216
+ [aria-disabled=true],
217
+ [tabindex="-1"],
218
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
177
219
  cursor: pointer;
178
220
  }
179
221
  .db-tab-item label:has(input:checked) {
package/build/components/tabs/tabs.css CHANGED
@@ -335,7 +335,9 @@
335
335
  - min-inline-size: tab-list is not displayed narrower than defined
336
336
  - max-inline-size: tab-list is not displayed wider than defined
337
337
  */
338
+ /* stylelint-disable-next-line db-ux/use-sizing */
338
339
  min-inline-size: var(--db-tab-list-vertical-width, var(--db-sizing-3xl));
340
+ /* stylelint-disable-next-line db-ux/use-sizing */
339
341
  max-inline-size: var(--db-tab-list-vertical-width, var(--db-sizing-3xl));
340
342
  /* horizontal space to the tab panels */
341
343
  padding-inline-end: var(--db-spacing-fixed-xs);
package/build/components/tabs/tabs.scss CHANGED
@@ -191,7 +191,9 @@ $max-tabs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
191
191
  - min-inline-size: tab-list is not displayed narrower than defined
192
192
  - max-inline-size: tab-list is not displayed wider than defined
193
193
  */
194
+ /* stylelint-disable-next-line db-ux/use-sizing */
194
195
  min-inline-size: $width;
196
+ /* stylelint-disable-next-line db-ux/use-sizing */
195
197
  max-inline-size: $width;
196
198
 
197
199
  /* horizontal space to the tab panels */