@db-ux/core-components 4.4.3 → 4.5.1

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%));
   }
@@ -685,14 +687,29 @@ input[type=radio]:checked) textarea:is([type=date],
   /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
   /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
 }
-.db-textarea textarea:hover:not(:disabled, [aria-disabled=true]) {
+.db-textarea textarea:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
   cursor: var(--db-overwrite-cursor, pointer);
   background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
 }
-.db-textarea textarea:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-textarea textarea:hover:not(:disabled, [aria-disabled=true]):is(input) {
+.db-textarea textarea:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-textarea textarea:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
   cursor: initial;
 }
-.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)) {
+.db-textarea textarea:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-textarea textarea:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
   cursor: pointer;
 }
 .db-textarea textarea[data-field-sizing=content] {

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%));
   }
@@ -378,7 +380,7 @@
   position: absolute;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   inline-size: var(--db-sizing-2xs);
-  block-size: var(--db-sizing-2xs);
+  aspect-ratio: 1;
   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)));
   /* stylelint-disable-next-line db-ux/use-border-radius */
   border-radius: 0 2px;
@@ -418,6 +420,9 @@
 .db-tooltip[data-emphasis=strong]::after {
   background-color: var(--db-adaptive-bg-inverted-contrast-high-default);
 }
+.db-tooltip[data-wrap=false] {
+  white-space: nowrap;
+}
 
 [data-has-tooltip=true] {
   position: var(--db-tooltip-parent-position, relative);

package/build/components/tooltip/tooltip.scss

@@ -5,8 +5,6 @@
 @use "../../styles/internal/popover-component";
 @use "../../styles/internal/component";
 
-$tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
-
 .db-tooltip {
 	--default-card-elevation: #{variables.$db-elevation-sm};
 	--default-card-border-radius: #{variables.$db-border-radius-xs};
@@ -43,15 +41,15 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
 			box-shadow: variables.$db-elevation-md;
 			position: absolute;
 			background-color: colors.$db-adaptive-bg-basic-level-1-default;
-			inline-size: $tooltip-arrow-shadow-size;
-			block-size: $tooltip-arrow-shadow-size;
+			inline-size: variables.$db-sizing-2xs;
+			aspect-ratio: 1;
 			clip-path: polygon(
-				calc(#{$tooltip-arrow-shadow-size} * -1)
-					calc(#{$tooltip-arrow-shadow-size} * -1),
-				calc(100% + #{$tooltip-arrow-shadow-size})
-					calc(#{$tooltip-arrow-shadow-size} * -1),
-				calc(100% + #{$tooltip-arrow-shadow-size})
-					calc(100% + #{$tooltip-arrow-shadow-size})
+				calc(#{variables.$db-sizing-2xs} * -1)
+					calc(#{variables.$db-sizing-2xs} * -1),
+				calc(100% + #{variables.$db-sizing-2xs})
+					calc(#{variables.$db-sizing-2xs} * -1),
+				calc(100% + #{variables.$db-sizing-2xs})
+					calc(100% + #{variables.$db-sizing-2xs})
 			);
 			/* stylelint-disable-next-line db-ux/use-border-radius */
 			border-radius: 0 2px;
@@ -112,6 +110,10 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
 			background-color: colors.$db-adaptive-bg-inverted-contrast-high-default;
 		}
 	}
+
+	&[data-wrap="false"] {
+		white-space: nowrap;
+	}
 }
 
 // Global styles