@db-ux/core-components 4.5.0 → 4.5.2-0-eff2227

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 (25) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/build/components/accordion-item/accordion-item.css +2 -0
  3. package/build/components/button/button.css +3 -2
  4. package/build/components/custom-button/custom-button.css +3 -2
  5. package/build/components/custom-select-dropdown/custom-select-dropdown.css +2 -0
  6. package/build/components/drawer/drawer.css +2 -0
  7. package/build/components/input/input.css +12 -0
  8. package/build/components/input/input.scss +11 -0
  9. package/build/components/link/link.css +2 -0
  10. package/build/components/navigation-item/navigation-item.css +2 -0
  11. package/build/components/notification/notification.css +2 -0
  12. package/build/components/popover/popover.css +2 -0
  13. package/build/components/tab-list/tab-list.css +2 -0
  14. package/build/components/tag/tag.css +2 -0
  15. package/build/components/textarea/textarea.css +2 -0
  16. package/build/components/tooltip/tooltip.css +2 -0
  17. package/build/styles/absolute.css +2 -2
  18. package/build/styles/component-animations.css +1 -1
  19. package/build/styles/index.css +2 -2
  20. package/build/styles/internal/_button-components.scss +3 -2
  21. package/build/styles/internal/_form-components.scss +5 -1
  22. package/build/styles/relative.css +2 -2
  23. package/build/styles/rollup.css +2 -2
  24. package/build/styles/webpack.css +2 -2
  25. package/package.json +7 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @db-ux/core-components
2
2
 
3
+ ## 4.5.1
4
+
5
+ ### Patch Changes
6
+
7
+ - fix: issue with DBButton `noText` and `width="full"` not having fixed size - [see commit bc81b40](https://github.com/db-ux-design-system/core-web/commit/bc81b402660871d706b1bf8d3fbac6713a7c9670)
8
+
9
+ - fix: issue with hover state when using DBPopover/Tooltip with animation - [see commit bc4801b](https://github.com/db-ux-design-system/core-web/commit/bc4801bf0b32d5dc4fd8e29626a6122e34fb6ada)
10
+
11
+ - fix: issue with DBCustomSelect inside DBDrawer (or other `<dialog>` based) components, which has a problem with top-layer and focus - [see commit 6547ada](https://github.com/db-ux-design-system/core-web/commit/6547ada44844cbed1b8207db742a5119edb945f6)
12
+
13
+ - fix(`input type="date"`): wrong padding and color for successful and critical state - [see commit 4f3db42](https://github.com/db-ux-design-system/core-web/commit/4f3db4262a652ac8d6353bd1a0a92a4a62b6ff86)
14
+
3
15
  ## 4.5.0
4
16
 
5
17
  ### Minor Changes
package/build/components/accordion-item/accordion-item.css CHANGED
@@ -54,10 +54,12 @@
54
54
 
55
55
  @keyframes popover-animation {
56
56
  0% {
57
+ pointer-events: none;
57
58
  opacity: 0;
58
59
  transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
59
60
  }
60
61
  100% {
62
+ pointer-events: auto;
61
63
  opacity: 1;
62
64
  transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
63
65
  }
package/build/components/button/button.css CHANGED
@@ -347,8 +347,8 @@
347
347
  }
348
348
  .db-button[data-no-text=true] {
349
349
  padding: 0;
350
- aspect-ratio: 1;
351
350
  inline-size: var(--db-sizing-md);
351
+ block-size: var(--db-sizing-md);
352
352
  font-size: 0 !important;
353
353
  /* stylelint-disable-next-line at-rule-empty-line-before */
354
354
  }
@@ -373,8 +373,9 @@
373
373
  }
374
374
  .db-button[data-size=small][data-no-text=true] {
375
375
  inline-size: var(--db-sizing-sm);
376
+ block-size: var(--db-sizing-sm);
376
377
  }
377
- .db-button[data-width=full] {
378
+ .db-button[data-width=full]:not([data-no-text=true]) {
378
379
  inline-size: 100%;
379
380
  }
380
381
  .db-button[data-variant=filled] {
package/build/components/custom-button/custom-button.css CHANGED
@@ -654,8 +654,8 @@
654
654
  }
655
655
  .db-custom-button[data-no-text=true] label, .db-custom-button[data-no-text=true] button, .db-custom-button[data-no-text=true] a {
656
656
  padding: 0;
657
- aspect-ratio: 1;
658
657
  inline-size: var(--db-sizing-md);
658
+ block-size: var(--db-sizing-md);
659
659
  font-size: 0 !important;
660
660
  /* stylelint-disable-next-line at-rule-empty-line-before */
661
661
  }
@@ -680,8 +680,9 @@
680
680
  }
681
681
  .db-custom-button[data-size=small] label[data-no-text=true], .db-custom-button[data-size=small] button[data-no-text=true], .db-custom-button[data-size=small] a[data-no-text=true] {
682
682
  inline-size: var(--db-sizing-sm);
683
+ block-size: var(--db-sizing-sm);
683
684
  }
684
- .db-custom-button[data-width=full] label, .db-custom-button[data-width=full] button, .db-custom-button[data-width=full] a {
685
+ .db-custom-button[data-width=full]:not([data-no-text=true]) label, .db-custom-button[data-width=full]:not([data-no-text=true]) button, .db-custom-button[data-width=full]:not([data-no-text=true]) a {
685
686
  inline-size: 100%;
686
687
  }
687
688
  .db-custom-button[data-variant=filled] label, .db-custom-button[data-variant=filled] button, .db-custom-button[data-variant=filled] a {
package/build/components/custom-select-dropdown/custom-select-dropdown.css CHANGED
@@ -207,10 +207,12 @@
207
207
 
208
208
  @keyframes popover-animation {
209
209
  0% {
210
+ pointer-events: none;
210
211
  opacity: 0;
211
212
  transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
212
213
  }
213
214
  100% {
215
+ pointer-events: auto;
214
216
  opacity: 1;
215
217
  transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
216
218
  }
package/build/components/drawer/drawer.css CHANGED
@@ -35,10 +35,12 @@
35
35
 
36
36
  @keyframes popover-animation {
37
37
  0% {
38
+ pointer-events: none;
38
39
  opacity: 0;
39
40
  transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
40
41
  }
41
42
  100% {
43
+ pointer-events: auto;
42
44
  opacity: 1;
43
45
  transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
44
46
  }
package/build/components/input/input.css CHANGED
@@ -718,6 +718,7 @@ input[type=radio]:checked) input:is([type=date],
718
718
  }
719
719
  }
720
720
  .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) {
721
+ --db-icon-color: var(--db-successful-on-bg-basic-emphasis-100-default);
721
722
  /* stylelint-disable-next-line at-rule-empty-line-before */
722
723
  }
723
724
  .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-valid) input,
@@ -741,6 +742,7 @@ input[type=radio]:checked) input:is([type=date],
741
742
  display: none;
742
743
  }
743
744
  .db-input:has(input[data-custom-validity=valid]), .db-input[data-custom-validity=valid] {
745
+ --db-icon-color: var(--db-successful-on-bg-basic-emphasis-100-default);
744
746
  /* stylelint-disable-next-line at-rule-empty-line-before */
745
747
  }
746
748
  .db-input:has(input[data-custom-validity=valid]) input,
@@ -768,6 +770,7 @@ input[type=radio]:checked) input:is([type=date],
768
770
  display: none;
769
771
  }
770
772
  .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) {
773
+ --db-icon-color: var(--db-critical-on-bg-basic-emphasis-100-default);
771
774
  /* stylelint-disable-next-line at-rule-empty-line-before */
772
775
  }
773
776
  .db-input:has(input:not([data-custom-validity]):is(:required, [minlength], [maxlength], [pattern], [type=color], [type=date], [type=datetime-local], [type=email], [type=file], [type=hidden], [type=month], [type=number], [type=range], [type=tel], [type=time], [type=url], [type=week]):user-invalid) input,
@@ -787,6 +790,7 @@ input[type=radio]:checked) input:is([type=date],
787
790
  display: none;
788
791
  }
789
792
  .db-input:has(input[data-custom-validity=invalid]), .db-input[data-custom-validity=invalid] {
793
+ --db-icon-color: var(--db-critical-on-bg-basic-emphasis-100-default);
790
794
  /* stylelint-disable-next-line at-rule-empty-line-before */
791
795
  }
792
796
  .db-input:has(input[data-custom-validity=invalid]) input,
@@ -964,6 +968,14 @@ input:focus-visible)::after {
964
968
  opacity: 1;
965
969
  }
966
970
  @supports selector(::-webkit-calendar-picker-indicator) {
971
+ .db-input:has(input[type=week]) {
972
+ --db-form-component-padding-inline-end: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
973
+ }
974
+ .db-input:has(input[type=date]), .db-input:has(input[type=datetime-local]) {
975
+ --db-form-component-padding-inline-end: calc(
976
+ 1lh + var(--db-spacing-fixed-xs)
977
+ );
978
+ }
967
979
  .db-input:has(input[type=date]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=week]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=datetime-local]):not([data-show-icon-trailing=false])::after, .db-input:has(input[type=month]):not([data-show-icon-trailing=false])::after {
968
980
  --db-icon-trailing: "calendar";
969
981
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
package/build/components/input/input.scss CHANGED
@@ -70,6 +70,17 @@ $icon-padding: calc(
70
70
  // This @supports should exclude Mozilla Firefox
71
71
  // TODO: Reevaluate after Mozilla is supporting week and month input types
72
72
  @supports selector(::-webkit-calendar-picker-indicator) {
73
+ &:has(input[type="week"]) {
74
+ --db-form-component-padding-inline-end: #{$icon-padding};
75
+ }
76
+
77
+ &:has(input[type="date"]),
78
+ &:has(input[type="datetime-local"]) {
79
+ --db-form-component-padding-inline-end: calc(
80
+ 1lh + #{variables.$db-spacing-fixed-xs}
81
+ );
82
+ }
83
+
73
84
  &:has(input[type="date"]),
74
85
  &:has(input[type="week"]),
75
86
  &:has(input[type="datetime-local"]),
package/build/components/link/link.css CHANGED
@@ -113,10 +113,12 @@
113
113
 
114
114
  @keyframes popover-animation {
115
115
  0% {
116
+ pointer-events: none;
116
117
  opacity: 0;
117
118
  transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
118
119
  }
119
120
  100% {
121
+ pointer-events: auto;
120
122
  opacity: 1;
121
123
  transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
122
124
  }
package/build/components/navigation-item/navigation-item.css CHANGED
@@ -101,10 +101,12 @@
101
101
 
102
102
  @keyframes popover-animation {
103
103
  0% {
104
+ pointer-events: none;
104
105
  opacity: 0;
105
106
  transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
106
107
  }
107
108
  100% {
109
+ pointer-events: auto;
108
110
  opacity: 1;
109
111
  transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
110
112
  }
package/build/components/notification/notification.css CHANGED
@@ -946,10 +946,12 @@
946
946
 
947
947
  @keyframes popover-animation {
948
948
  0% {
949
+ pointer-events: none;
949
950
  opacity: 0;
950
951
  transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
951
952
  }
952
953
  100% {
954
+ pointer-events: auto;
953
955
  opacity: 1;
954
956
  transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
955
957
  }
package/build/components/popover/popover.css CHANGED
@@ -35,10 +35,12 @@
35
35
 
36
36
  @keyframes popover-animation {
37
37
  0% {
38
+ pointer-events: none;
38
39
  opacity: 0;
39
40
  transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
40
41
  }
41
42
  100% {
43
+ pointer-events: auto;
42
44
  opacity: 1;
43
45
  transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
44
46
  }
package/build/components/tab-list/tab-list.css CHANGED
@@ -58,10 +58,12 @@
58
58
 
59
59
  @keyframes popover-animation {
60
60
  0% {
61
+ pointer-events: none;
61
62
  opacity: 0;
62
63
  transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
63
64
  }
64
65
  100% {
66
+ pointer-events: auto;
65
67
  opacity: 1;
66
68
  transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
67
69
  }
package/build/components/tag/tag.css CHANGED
@@ -4,10 +4,12 @@
4
4
 
5
5
  @keyframes popover-animation {
6
6
  0% {
7
+ pointer-events: none;
7
8
  opacity: 0;
8
9
  transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
9
10
  }
10
11
  100% {
12
+ pointer-events: auto;
11
13
  opacity: 1;
12
14
  transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
13
15
  }
package/build/components/textarea/textarea.css CHANGED
@@ -181,10 +181,12 @@ input[type=radio]:checked) > label {
181
181
 
182
182
  @keyframes popover-animation {
183
183
  0% {
184
+ pointer-events: none;
184
185
  opacity: 0;
185
186
  transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
186
187
  }
187
188
  100% {
189
+ pointer-events: auto;
188
190
  opacity: 1;
189
191
  transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
190
192
  }
package/build/components/tooltip/tooltip.css CHANGED
@@ -99,10 +99,12 @@
99
99
 
100
100
  @keyframes popover-animation {
101
101
  0% {
102
+ pointer-events: none;
102
103
  opacity: 0;
103
104
  transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
104
105
  }
105
106
  100% {
107
+ pointer-events: auto;
106
108
  opacity: 1;
107
109
  transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
108
110
  }