@db-ux/core-components 4.5.0 → 4.5.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @db-ux/core-components
 
+## 4.5.1
+
+### Patch Changes
+
+- 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)
+
+- 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)
+
+- 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)
+
+- 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)
+
 ## 4.5.0
 
 ### Minor Changes

package/build/components/accordion-item/accordion-item.css

@@ -54,10 +54,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }

package/build/components/button/button.css

@@ -347,8 +347,8 @@
 }
 .db-button[data-no-text=true] {
   padding: 0;
-  aspect-ratio: 1;
   inline-size: var(--db-sizing-md);
+  block-size: var(--db-sizing-md);
   font-size: 0 !important;
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
@@ -373,8 +373,9 @@
 }
 .db-button[data-size=small][data-no-text=true] {
   inline-size: var(--db-sizing-sm);
+  block-size: var(--db-sizing-sm);
 }
-.db-button[data-width=full] {
+.db-button[data-width=full]:not([data-no-text=true]) {
   inline-size: 100%;
 }
 .db-button[data-variant=filled] {

package/build/components/custom-button/custom-button.css

@@ -654,8 +654,8 @@
 }
 .db-custom-button[data-no-text=true] label, .db-custom-button[data-no-text=true] button, .db-custom-button[data-no-text=true] a {
   padding: 0;
-  aspect-ratio: 1;
   inline-size: var(--db-sizing-md);
+  block-size: var(--db-sizing-md);
   font-size: 0 !important;
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
@@ -680,8 +680,9 @@
 }
 .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] {
   inline-size: var(--db-sizing-sm);
+  block-size: var(--db-sizing-sm);
 }
-.db-custom-button[data-width=full] label, .db-custom-button[data-width=full] button, .db-custom-button[data-width=full] a {
+.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 {
   inline-size: 100%;
 }
 .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

@@ -207,10 +207,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }

package/build/components/drawer/drawer.css

@@ -35,10 +35,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }

package/build/components/input/input.css

@@ -718,6 +718,7 @@ input[type=radio]:checked) input:is([type=date],
   }
 }
 .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) {
+  --db-icon-color: var(--db-successful-on-bg-basic-emphasis-100-default);
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .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],
   display: none;
 }
 .db-input:has(input[data-custom-validity=valid]), .db-input[data-custom-validity=valid] {
+  --db-icon-color: var(--db-successful-on-bg-basic-emphasis-100-default);
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-input:has(input[data-custom-validity=valid]) input,
@@ -768,6 +770,7 @@ input[type=radio]:checked) input:is([type=date],
   display: none;
 }
 .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) {
+  --db-icon-color: var(--db-critical-on-bg-basic-emphasis-100-default);
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .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],
   display: none;
 }
 .db-input:has(input[data-custom-validity=invalid]), .db-input[data-custom-validity=invalid] {
+  --db-icon-color: var(--db-critical-on-bg-basic-emphasis-100-default);
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 .db-input:has(input[data-custom-validity=invalid]) input,
@@ -964,6 +968,14 @@ input:focus-visible)::after {
   opacity: 1;
 }
 @supports selector(::-webkit-calendar-picker-indicator) {
+  .db-input:has(input[type=week]) {
+    --db-form-component-padding-inline-end: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs));
+  }
+  .db-input:has(input[type=date]), .db-input:has(input[type=datetime-local]) {
+    --db-form-component-padding-inline-end: calc(
+    	1lh + var(--db-spacing-fixed-xs)
+    );
+  }
   .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 {
     --db-icon-trailing: "calendar";
     margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));

package/build/components/input/input.scss

@@ -70,6 +70,17 @@ $icon-padding: calc(
 	// This @supports should exclude Mozilla Firefox
 	// TODO: Reevaluate after Mozilla is supporting week and month input types
 	@supports selector(::-webkit-calendar-picker-indicator) {
+		&:has(input[type="week"]) {
+			--db-form-component-padding-inline-end: #{$icon-padding};
+		}
+
+		&:has(input[type="date"]),
+		&:has(input[type="datetime-local"]) {
+			--db-form-component-padding-inline-end: calc(
+				1lh + #{variables.$db-spacing-fixed-xs}
+			);
+		}
+
 		&:has(input[type="date"]),
 		&:has(input[type="week"]),
 		&:has(input[type="datetime-local"]),

package/build/components/link/link.css

@@ -113,10 +113,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }

package/build/components/navigation-item/navigation-item.css

@@ -101,10 +101,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }

package/build/components/notification/notification.css

@@ -946,10 +946,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }

package/build/components/popover/popover.css

@@ -35,10 +35,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }

package/build/components/tab-list/tab-list.css

@@ -58,10 +58,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }

package/build/components/tag/tag.css

@@ -4,10 +4,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }

package/build/components/textarea/textarea.css

@@ -181,10 +181,12 @@ input[type=radio]:checked) > label {
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }

package/build/components/tooltip/tooltip.css

@@ -99,10 +99,12 @@
 
 @keyframes popover-animation {
   0% {
+    pointer-events: none;
     opacity: 0;
     transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
   }
   100% {
+    pointer-events: auto;
     opacity: 1;
     transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
   }