@db-ux/core-components 4.4.2 → 4.5.0

package/build/components/textarea/textarea.css

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 .db-textarea[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
   clip: rect(0, 0, 0, 0) !important;
@@ -62,12 +52,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -170,12 +154,6 @@ input[type=radio]:checked) > label {
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-textarea textarea {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
 }
@@ -707,14 +685,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

@@ -1,13 +1,3 @@
-/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
-/* Use fixed spacings for all kind of distances (margin, padding, ...) */
-/* The primary use-case for responsive spacings are
-paddings/gaps in an application e.g. the <main> should have a responsive padding. */
-/* Elevation */
-/* Border */
-/* Opacity */
-/* Transitions */
-/* Screen sizes */
-/* Container sizes */
 /* Variants for adaptive components like input, select, notification, ... */
 @layer variables {}
 
@@ -43,12 +33,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/**
-	Generates 3 types of placeholders, e.g:
-	- %db-component-variables-md
-	- %db-font-size-md
-	- %db-overwrite-font-size-md
- */
 @layer variables {}
 
 @layer variables {}
@@ -113,8 +97,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-/* Use for body tags like <p> */
-/* Use for headline tags like <h1> */
 @keyframes popover-animation {
   0% {
     opacity: 0;
@@ -130,10 +112,6 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
 .db-tooltip[data-show-arrow=true]::after, .db-tooltip {
   border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
 }
@@ -146,10 +124,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .db-tooltip:not([data-placement], [data-corrected-placement]), [data-placement=bottom].db-tooltip:not([data-corrected-placement]), [data-placement=top].db-tooltip:not([data-corrected-placement]), [data-corrected-placement=bottom].db-tooltip, [data-corrected-placement=top].db-tooltip {
   --db-popover-center-x: -50%;
   inset-inline-start: 50%;
+  transform: translateX(var(--db-popover-center-x, 0));
 }
 [data-corrected-placement=left].db-tooltip, [data-corrected-placement=right].db-tooltip, [data-placement=left].db-tooltip:not([data-corrected-placement]), [data-placement=right].db-tooltip:not([data-corrected-placement]) {
   --db-popover-center-y: -50%;
   inset-block-start: 50%;
+  transform: translateY(var(--db-popover-center-y, 0));
 }
 
 .db-tooltip {
@@ -246,6 +226,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=bottom].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom].db-tooltip:first-of-type {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=bottom][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=true].db-tooltip:first-of-type {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -271,6 +257,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=top].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top].db-tooltip:first-of-type {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=top][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=true].db-tooltip:first-of-type {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -296,6 +288,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=right].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right].db-tooltip:first-of-type {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=right][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=true].db-tooltip:first-of-type {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -321,6 +319,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   opacity: 1;
   transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
 }
+@media screen and (prefers-reduced-motion: reduce) {
+  [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=left].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left].db-tooltip:first-of-type {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
+  }
+}
 @media screen and (prefers-reduced-motion: no-preference) {
   [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=left][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=true].db-tooltip:first-of-type {
     animation: popover-animation var(--db-transition-straight-emotional) normal both;
@@ -374,7 +378,7 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
   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;
@@ -414,6 +418,9 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 .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