@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/textarea/textarea.css CHANGED
@@ -685,14 +685,29 @@ input[type=radio]:checked) textarea:is([type=date],
685
685
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
686
686
  /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
687
687
  }
688
- .db-textarea textarea:hover:not(:disabled, [aria-disabled=true]) {
688
+ .db-textarea textarea:hover:not(:disabled,
689
+ [aria-disabled=true],
690
+ [tabindex="-1"],
691
+ :has(:disabled)) {
689
692
  cursor: var(--db-overwrite-cursor, pointer);
690
693
  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
691
694
  }
692
- .db-textarea textarea:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-textarea textarea:hover:not(:disabled, [aria-disabled=true]):is(input) {
695
+ .db-textarea textarea:hover:not(:disabled,
696
+ [aria-disabled=true],
697
+ [tabindex="-1"],
698
+ :has(:disabled)):is(textarea), .db-textarea textarea:hover:not(:disabled,
699
+ [aria-disabled=true],
700
+ [tabindex="-1"],
701
+ :has(:disabled)):is(input) {
693
702
  cursor: initial;
694
703
  }
695
- .db-textarea textarea:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-textarea textarea:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
704
+ .db-textarea textarea:hover:not(:disabled,
705
+ [aria-disabled=true],
706
+ [tabindex="-1"],
707
+ :has(:disabled)):is(input[type=checkbox]), .db-textarea textarea:hover:not(:disabled,
708
+ [aria-disabled=true],
709
+ [tabindex="-1"],
710
+ :has(:disabled)):is(input[type=radio]:not(:checked)) {
696
711
  cursor: pointer;
697
712
  }
698
713
  .db-textarea textarea[data-field-sizing=content] {
package/build/components/tooltip/tooltip.css CHANGED
@@ -378,7 +378,7 @@
378
378
  position: absolute;
379
379
  background-color: var(--db-adaptive-bg-basic-level-1-default);
380
380
  inline-size: var(--db-sizing-2xs);
381
- block-size: var(--db-sizing-2xs);
381
+ aspect-ratio: 1;
382
382
  clip-path: polygon(calc(var(--db-sizing-2xs) * -1) calc(var(--db-sizing-2xs) * -1), calc(100% + var(--db-sizing-2xs)) calc(var(--db-sizing-2xs) * -1), calc(100% + var(--db-sizing-2xs)) calc(100% + var(--db-sizing-2xs)));
383
383
  /* stylelint-disable-next-line db-ux/use-border-radius */
384
384
  border-radius: 0 2px;
@@ -418,6 +418,9 @@
418
418
  .db-tooltip[data-emphasis=strong]::after {
419
419
  background-color: var(--db-adaptive-bg-inverted-contrast-high-default);
420
420
  }
421
+ .db-tooltip[data-wrap=false] {
422
+ white-space: nowrap;
423
+ }
421
424
 
422
425
  [data-has-tooltip=true] {
423
426
  position: var(--db-tooltip-parent-position, relative);
package/build/components/tooltip/tooltip.scss CHANGED
@@ -5,8 +5,6 @@
5
5
  @use "../../styles/internal/popover-component";
6
6
  @use "../../styles/internal/component";
7
7
 
8
- $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
9
-
10
8
  .db-tooltip {
11
9
  --default-card-elevation: #{variables.$db-elevation-sm};
12
10
  --default-card-border-radius: #{variables.$db-border-radius-xs};
@@ -43,15 +41,15 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
43
41
  box-shadow: variables.$db-elevation-md;
44
42
  position: absolute;
45
43
  background-color: colors.$db-adaptive-bg-basic-level-1-default;
46
- inline-size: $tooltip-arrow-shadow-size;
47
- block-size: $tooltip-arrow-shadow-size;
44
+ inline-size: variables.$db-sizing-2xs;
45
+ aspect-ratio: 1;
48
46
  clip-path: polygon(
49
- calc(#{$tooltip-arrow-shadow-size} * -1)
50
- calc(#{$tooltip-arrow-shadow-size} * -1),
51
- calc(100% + #{$tooltip-arrow-shadow-size})
52
- calc(#{$tooltip-arrow-shadow-size} * -1),
53
- calc(100% + #{$tooltip-arrow-shadow-size})
54
- calc(100% + #{$tooltip-arrow-shadow-size})
47
+ calc(#{variables.$db-sizing-2xs} * -1)
48
+ calc(#{variables.$db-sizing-2xs} * -1),
49
+ calc(100% + #{variables.$db-sizing-2xs})
50
+ calc(#{variables.$db-sizing-2xs} * -1),
51
+ calc(100% + #{variables.$db-sizing-2xs})
52
+ calc(100% + #{variables.$db-sizing-2xs})
55
53
  );
56
54
  /* stylelint-disable-next-line db-ux/use-border-radius */
57
55
  border-radius: 0 2px;
@@ -112,6 +110,10 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
112
110
  background-color: colors.$db-adaptive-bg-inverted-contrast-high-default;
113
111
  }
114
112
  }
113
+
114
+ &[data-wrap="false"] {
115
+ white-space: nowrap;
116
+ }
115
117
  }
116
118
 
117
119
  // Global styles