@db-ux/core-components 2.1.1 → 2.2.0

package/build/styles/internal/_component.scss

@@ -7,9 +7,6 @@ $min-mobile-header-height: calc(
 	#{variables.$db-sizing-md} + 2 * #{variables.$db-spacing-fixed-xs}
 );
 
-$default-disabled: 0.4;
-$placeholder-disabled: 0.75;
-
 $component-border: variables.$db-border-width-3xs solid
 	colors.$db-adaptive-on-bg-basic-emphasis-60-default;
 

package/build/styles/internal/_form-components.scss

@@ -79,7 +79,7 @@ $db-min-inline-size: var(
 		> label {
 			@extend %db-overwrite-font-size-md;
 
-			opacity: component.$placeholder-disabled;
+			opacity: variables.$db-opacity-xl;
 			position: absolute;
 			z-index: 2;
 			inset-block-start: calc(
@@ -138,7 +138,7 @@ $db-min-inline-size: var(
 			}
 
 			@include placeholder-content($selector) {
-				opacity: component.$placeholder-disabled;
+				opacity: variables.$db-opacity-xl;
 				font-family: var(--db-font-family-sans);
 				font-style: italic;
 
@@ -332,7 +332,7 @@ $input-valid-types:
 	}
 
 	@include placeholder-content($selector) {
-		opacity: component.$placeholder-disabled;
+		opacity: variables.$db-opacity-xl;
 		font-family: var(--db-font-family-sans);
 		font-style: italic;
 	}
@@ -363,6 +363,17 @@ $input-valid-types:
 			background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
 		}
 
+		&:is(input, textarea) {
+			/* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
+			&[data-field-sizing="content"] {
+				field-sizing: content;
+			}
+
+			&[data-field-sizing="fixed"] {
+				field-sizing: fixed;
+			}
+		}
+
 		&:is(input, textarea):not(:disabled):read-only {
 			background-color: var(
 				--db-textarea-read-only,
@@ -401,7 +412,7 @@ $input-valid-types:
 			#{$selector}[aria-disabled="true"]
 		) {
 		// Decided against cursor: not-allowed, compare to e.g. https://phabricator.wikimedia.org/T121960
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 		pointer-events: none;
 	}
 
@@ -484,7 +495,7 @@ $input-valid-types:
 	@include set-required-label(input);
 
 	&:has(input:disabled) {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 	}
 
 	&:is(label),

package/build/styles/internal/_link-components.scss

@@ -56,7 +56,7 @@
 
 	// "disabled" links
 	&[aria-disabled="true"] {
-		opacity: component.$default-disabled;
+		opacity: variables.$db-opacity-md;
 		pointer-events: none;
 	}
 }

package/build/styles/internal/_popover-component.scss

@@ -1,36 +1,24 @@
 @use "@db-ux/core-foundations/build/styles/variables";
 @use "@db-ux/core-foundations/build/styles/colors";
 @use "@db-ux/core-foundations/build/styles/animation";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
 @use "component";
 
-$popover-gap-size: var(--db-popover-distance);
-$popover-inset: calc(100% + #{$popover-gap-size} * var(--db-popover-gap, 0));
-$popover-gap-inset: calc(-1 * #{$popover-gap-size});
-
 %popover-center {
-	&:not([data-placement]),
-	&[data-placement="bottom"]:not([data-outside-vy]),
-	&[data-placement="top"]:not([data-outside-vy]),
-	&:is([data-outside-vy="bottom"], [data-outside-vy="top"]):not(
-			[data-outside-vx],
-			[data-placement$="end"],
-			[data-placement$="start"]
-		) {
+	&:not([data-placement], [data-corrected-placement]),
+	&[data-placement="bottom"]:not([data-corrected-placement]),
+	&[data-placement="top"]:not([data-corrected-placement]),
+	&[data-corrected-placement="bottom"],
+	&[data-corrected-placement="top"] {
 		--db-popover-center-x: -50%;
 
 		inset-inline-start: 50%;
 	}
 
-	&[data-placement="left"]:not([data-outside-vx]),
-	&[data-placement="right"]:not([data-outside-vx]),
-	&[data-outside-vx="left"]:not(
-			[data-placement$="end"],
-			[data-placement$="start"]
-		),
-	&[data-outside-vx="right"]:not(
-			[data-placement$="end"],
-			[data-placement$="start"]
-		) {
+	&[data-corrected-placement="left"],
+	&[data-corrected-placement="right"],
+	&[data-placement="left"]:not([data-corrected-placement]),
+	&[data-placement="right"]:not([data-corrected-placement]) {
 		--db-popover-center-y: -50%;
 
 		inset-block-start: 50%;
@@ -46,88 +34,50 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 		position: absolute;
 	}
 
-	&[data-gap="true"] {
-		--db-popover-gap: 1;
-		--db-popover-distance: #{variables.$db-spacing-fixed-md};
-	}
-
-	&:is(.db-tooltip) {
-		--db-popover-distance: #{variables.$db-spacing-fixed-sm};
-	}
-
-	&[data-placement^="bottom"]:not([data-outside-vy]),
-	&[data-placement^="top"]:not([data-outside-vy]),
-	&[data-outside-vy="bottom"]:not([data-outside-vx]),
-	&[data-outside-vy="top"]:not([data-outside-vx]) {
-		&[data-placement$="end"] {
-			inset-inline-end: 0;
-		}
-
-		&[data-placement$="start"] {
-			inset-inline-start: 0;
-		}
-	}
-
-	&[data-placement^="left"]:not([data-outside-vx]),
-	&[data-placement^="right"]:not([data-outside-vx]),
-	&[data-outside-vx="left"],
-	&[data-outside-vx="right"] {
-		&[data-placement$="end"] {
-			inset-block-end: 0;
-		}
-
-		&[data-placement$="start"] {
-			inset-block-start: 0;
+	&:not([data-placement], [data-corrected-placement]),
+	&[data-placement^="bottom"]:not([data-corrected-placement]),
+	&[data-corrected-placement^="bottom"] {
+		&::before {
+			inset-block-end: 100%;
+			inset-inline: 0;
+			block-size: var(--db-popover-distance);
 		}
 	}
 
-	&:not([data-placement], [data-outside-vy]),
-	&[data-placement^="bottom"]:not([data-outside-vy]),
-	&[data-outside-vy="top"]:not([data-outside-vx]) {
-		inset-block-start: $popover-inset;
-
+	&[data-placement^="top"]:not([data-corrected-placement]),
+	&[data-corrected-placement^="top"] {
 		&::before {
-			inset-inline-start: 0;
-			inline-size: 100%;
-			block-size: $popover-gap-size;
-			inset-block-start: $popover-gap-inset;
+			inset-block-start: 100%;
+			inset-inline: 0;
+			block-size: var(--db-popover-distance);
 		}
 	}
 
-	&[data-placement^="top"]:not([data-outside-vy]),
-	&[data-outside-vy="bottom"]:not([data-outside-vx]) {
-		inset-block-end: $popover-inset;
-
+	&[data-placement^="right"]:not([data-corrected-placement]),
+	&[data-corrected-placement^="right"] {
 		&::before {
-			inset-inline-end: 0;
-			inline-size: 100%;
-			block-size: $popover-gap-size;
-			inset-block-end: $popover-gap-inset;
+			inset-inline-end: 100%;
+			inset-block: 0;
+			inline-size: var(--db-popover-distance);
 		}
 	}
 
-	&[data-placement^="left"]:not([data-outside-vx]),
-	&[data-outside-vx="right"] {
-		inset-inline-end: $popover-inset;
-
+	&[data-placement^="left"]:not([data-corrected-placement]),
+	&[data-corrected-placement^="left"] {
 		&::before {
-			inset-block-end: 0;
-			block-size: 100%;
-			inline-size: $popover-gap-size;
-			inset-inline-end: $popover-gap-inset;
+			inset-inline-start: 100%;
+			inset-block: 0;
+			inline-size: var(--db-popover-distance);
 		}
 	}
 
-	&[data-placement^="right"]:not([data-outside-vx]),
-	&[data-outside-vx="left"] {
-		inset-inline-start: $popover-inset;
+	&[data-gap="true"] {
+		--db-popover-gap: 1;
+		--db-popover-distance: #{variables.$db-spacing-fixed-md};
+	}
 
-		&::before {
-			inset-block-start: 0;
-			block-size: 100%;
-			inline-size: $popover-gap-size;
-			inset-inline-start: $popover-gap-inset;
-		}
+	&:is(.db-tooltip) {
+		--db-popover-distance: #{variables.$db-spacing-fixed-sm};
 	}
 }
 
@@ -151,47 +101,58 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 			}
 
 			&[data-delay="fast"] {
-				animation-delay: calc(
-					#{variables.$db-transition-duration-medium}
-				);
+				animation-delay: variables.$db-transition-duration-medium;
+			}
+
+			@include screen-sizes.screen-min-max(
+				(
+					max: "md"
+				)
+			) {
+				// If we are in mobile and have no delay set we force some delay to avoid layout shift
+				&:not([data-delay]) {
+					animation-delay: variables.$db-transition-duration-medium;
+				}
 			}
 		}
 	}
 }
 
 %show-popover {
-	display: revert;
+	visibility: var(--db-show-popover-visibility, visible);
 
-	&:not([data-placement], [data-outside-vy]),
-	&[data-placement^="bottom"]:not([data-outside-vy]),
-	&[data-outside-vy="top"]:not([data-outside-vx]) {
+	&:not([data-placement], [data-corrected-placement]),
+	&[data-placement^="bottom"]:not([data-corrected-placement]),
+	&[data-corrected-placement^="bottom"] {
 		--db-popover-translate-y: -25%;
 
 		@include get-popover-show();
 	}
 
-	&[data-placement^="top"]:not([data-outside-vy]),
-	&[data-outside-vy="bottom"]:not([data-outside-vx]) {
+	&[data-placement^="top"]:not([data-corrected-placement]),
+	&[data-corrected-placement^="top"] {
 		--db-popover-translate-y: 25%;
 
 		@include get-popover-show();
 	}
 
-	&[data-placement^="right"]:not([data-outside-vx]),
-	&[data-outside-vx="left"] {
+	&[data-placement^="right"]:not([data-corrected-placement]),
+	&[data-corrected-placement^="right"] {
 		--db-popover-translate-x: -25%;
 
 		@include get-popover-show();
 	}
 
-	&[data-placement^="left"]:not([data-outside-vx]),
-	&[data-outside-vx="right"] {
+	&[data-placement^="left"]:not([data-corrected-placement]),
+	&[data-corrected-placement^="left"] {
 		--db-popover-translate-x: 25%;
 
 		@include get-popover-show();
 	}
 }
 
+$max-mobile-size: calc(100vw - 2 * #{variables.$db-spacing-fixed-md});
+
 %default-popover {
 	@extend %default-card;
 	@extend %popover-placement;
@@ -199,15 +160,17 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 	position: absolute;
 	background-color: colors.$db-adaptive-bg-basic-level-1-default;
 	box-shadow: variables.$db-elevation-md;
-	display: none;
+	visibility: hidden;
 	z-index: 1337;
-	white-space: nowrap;
+	// revert this if popover is included in button
+	white-space: normal;
+	max-inline-size: $max-mobile-size;
+	block-size: fit-content;
+	inline-size: fit-content;
 
 	&[data-width="fixed"] {
 		inline-size: max-content;
-		max-inline-size: variables.$db-sizing-3xl;
-		// revert this if popover is included in button
-		white-space: normal;
+		max-inline-size: min(#{variables.$db-sizing-3xl}, #{$max-mobile-size});
 		text-align: initial;
 	}
 }

package/build/styles/internal/_scrollbar.scss

@@ -7,6 +7,15 @@
 $scrollbar-width: helpers.px-to-rem(8);
 
 %scrollbar {
+	&[data-field-sizing="content"] {
+		&:is([data-hide-resizer="true"], [data-resize="none"]) {
+			@supports (field-sizing: content) {
+				/* We don't show a scrollbar if we use field-sizing: content and no resizer is available */
+				scrollbar-width: none;
+			}
+		}
+	}
+
 	&::-webkit-scrollbar {
 		@extend %default-transition;