@db-ux/core-components 4.14.0 → 5.0.1

package/build/components/drawer/drawer.scss

@@ -6,176 +6,181 @@
 @use "../../styles/internal/component";
 @use "../../styles/dialog-init";
 
-%direction-right {
-	transform: translateX(110%);
-	inset-inline: auto 0;
+%container-size-horizontal {
+	inline-size: calc(
+		var(--db-drawer-inline-size) - var(
+				--db-drawer-container-backdrop-spacing,
+				0px
+			)
+	);
+	min-inline-size: var(--db-drawer-min-width, auto);
+	max-inline-size: var(
+		--db-drawer-max-width,
+		var(--db-drawer-max-width-horizontal)
+	);
+
+	&:not([data-container-size]),
+	&[data-container-size="small"] {
+		--db-drawer-max-width-horizontal: #{variables.$db-container-xs};
+	}
 
-	&[data-rounded="true"] {
-		border-start-start-radius: variables.$db-border-radius-sm;
-		border-end-start-radius: variables.$db-border-radius-sm;
+	&[data-container-size="medium"] {
+		--db-drawer-max-width-horizontal: #{variables.$db-container-lg};
+	}
+
+	&[data-container-size="large"] {
+		--db-drawer-max-width-horizontal: #{variables.$db-container-3xl};
 	}
 }
 
-%direction-left {
-	transform: translateX(-110%);
-	inset-inline: 0 auto;
+%container-size-vertical {
+	block-size: calc(
+		var(--db-drawer-block-size) - var(
+				--db-drawer-container-backdrop-spacing,
+				0px
+			)
+	);
+	min-block-size: var(--db-drawer-min-height, auto);
+	max-block-size: var(
+		--db-drawer-max-height,
+		var(--db-drawer-max-height-vertical)
+	);
+
+	&[data-container-size="small"] {
+		--db-drawer-max-height-vertical: calc(var(--db-drawer-block-size) / 3);
+	}
 
-	&[data-rounded="true"] {
-		border-start-end-radius: variables.$db-border-radius-sm;
-		border-end-end-radius: variables.$db-border-radius-sm;
+	&[data-container-size="medium"] {
+		--db-drawer-max-height-vertical: calc(var(--db-drawer-block-size) / 2);
 	}
-}
 
-%full-horizontal {
-	&:not([data-width="full"]) {
-		/// Sets the maximum height of the drawer
-		/// @propertyname max-block-size
-		/// @cssprop --db-drawer-max-height
-		/// @default calc(100% - #{variables.$db-spacing-fixed-xl})
-		/* stylelint-disable-next-line db-ux/use-sizing */
-		max-block-size: var(
-			--db-drawer-max-height,
-			calc(100% - #{variables.$db-spacing-fixed-xl})
+	&:not([data-container-size]),
+	&[data-container-size="large"] {
+		--db-drawer-max-height-vertical: calc(
+			(var(--db-drawer-block-size) / 3) * 2
 		);
-		/* stylelint-disable-next-line db-ux/use-sizing */
-		min-block-size: var(--db-drawer-min-height, auto);
-		max-inline-size: none;
 	}
 }
 
-%direction-up {
-	@extend %full-horizontal;
+%direction-from-left-to-right {
+	@extend %container-size-horizontal;
 
-	transform: translateY(110%);
-	inset: auto 0 0;
+	&:not([data-transition="open"]) {
+		transform: translateX(-110%);
+	}
+
+	inset-inline: 0 auto;
 
 	&[data-rounded="true"] {
 		border-start-end-radius: variables.$db-border-radius-sm;
-		border-start-start-radius: variables.$db-border-radius-sm;
+		border-end-end-radius: variables.$db-border-radius-sm;
 	}
 }
 
-%direction-down {
-	@extend %full-horizontal;
+%direction-from-right-to-left {
+	@extend %container-size-horizontal;
 
-	transform: translateY(-110%);
-	inset: 0 0 auto;
+	&:not([data-transition="open"]) {
+		transform: translateX(110%);
+	}
+
+	inset-inline: auto 0;
 
 	&[data-rounded="true"] {
-		border-end-end-radius: variables.$db-border-radius-sm;
+		border-start-start-radius: variables.$db-border-radius-sm;
 		border-end-start-radius: variables.$db-border-radius-sm;
 	}
 }
 
-$spacings: (
-	"small": (
-		"block": variables.$db-spacing-fixed-xs,
-		"inline": variables.$db-spacing-fixed-md
-	),
-	"medium": (
-		"block": variables.$db-spacing-fixed-sm,
-		"inline": variables.$db-spacing-fixed-lg
-	),
-	"large": (
-		"block": variables.$db-spacing-fixed-md,
-		"inline": variables.$db-spacing-fixed-xl
-	),
-	"none": (
-		"block": 0,
-		"inline": 0
-	)
-);
-
-@mixin get-spacing($spacing) {
-	/* stylelint-disable-next-line block-no-redundant-nested-style-rules */
-	& {
-		padding-block: map.get($spacing, "block");
+%direction-from-bottom-to-top {
+	@extend %container-size-vertical;
+
+	&:not([data-transition="open"]) {
+		transform: translateY(110%);
 	}
 
-	.db-drawer-header {
-		// We need this variable to overwrite it inside the header
-		/// Controls the bottom padding inside the drawer header
-		/// @propertyname padding-block-end
-		/// @cssprop --db-drawer-header-padding-block-end
-		/// @default #{map.get($spacing, "block")}
-		/* stylelint-disable-next-line db-ux/use-spacings */
-		padding-block-end: var(
-			--db-drawer-header-padding-block-end,
-			#{map.get($spacing, "block")}
-		);
-		padding-inline: map.get($spacing, "inline");
+	inset: auto 0 0;
+
+	&[data-rounded="true"] {
+		border-start-end-radius: variables.$db-border-radius-sm;
+		border-start-start-radius: variables.$db-border-radius-sm;
 	}
+}
 
-	.db-drawer-content {
-		// We need this variable to overwrite it inside the header
-		/// Controls left/right padding inside the drawer content area
-		/// @propertyname padding-inline
-		/// @cssprop --db-drawer-content-padding-inline
-		/// @default #{map.get($spacing, "inline")}
-		/* stylelint-disable-next-line db-ux/use-spacings */
-		padding-inline: var(
-			--db-drawer-content-padding-inline,
-			#{map.get($spacing, "inline")}
-		);
+%direction-from-top-to-bottom {
+	@extend %container-size-vertical;
 
-		// TODO: Evaluate whether we need overflow: hidden and that for only specifically set y here.
-		overflow-y: auto;
-		overflow-block: auto;
+	&:not([data-transition="open"]) {
+		transform: translateY(-110%);
+	}
+
+	inset: 0 0 auto;
+
+	&[data-rounded="true"] {
+		border-end-end-radius: variables.$db-border-radius-sm;
+		border-end-start-radius: variables.$db-border-radius-sm;
 	}
 }
 
-%spacing-drawer {
-	@each $name, $spacing in $spacings {
-		@if $name == "medium" {
-			@include get-spacing($spacing);
+%drawer-safe-area {
+	&:not(:has(.db-drawer-footer)) {
+		> .db-drawer-content {
+			margin-block-end: env(safe-area-inset-bottom);
 		}
+	}
 
-		&[data-spacing="#{$name}"] {
-			@include get-spacing($spacing);
+	&:has(.db-drawer-footer) {
+		.db-drawer-footer {
+			padding-block-end: calc(
+				#{variables.$db-spacing-fixed-xs} + env(safe-area-inset-bottom)
+			);
 		}
 	}
 }
 
 .db-drawer {
 	.db-drawer-container {
-		@extend %spacing-drawer;
+		@extend %drawer-safe-area;
 
-		display: flex;
-		flex-direction: column;
+		// Close delay: 0s by default (reduced motion), set to transition duration
+		// when motion is allowed. Read by JS to schedule dialog.close().
+		--db-drawer-close-delay: 0;
+
+		@media (prefers-reduced-motion: no-preference) {
+			--db-drawer-close-delay: #{variables.$db-transition-duration-extra-slow};
+		}
+
+		display: grid;
+		grid-template-rows:
+			[header] auto
+			[main] 1fr
+			[footer] auto;
 		background-color: colors.$db-adaptive-bg-basic-level-1-default;
-		block-size: 100%;
-		inline-size: 100%;
+		inline-size: var(--db-drawer-inline-size);
+		block-size: var(--db-drawer-block-size);
 		position: fixed;
 		box-shadow: variables.$db-elevation-md;
 
-		&:not([data-width="full"]) {
-			/// Sets the maximum width of the drawer
-			/// and some default values for the drawer
-			/// @propertyname max-inline-size
-			/// @cssprop --db-drawer-max-width
-			/// @default calc(100% - #{variables.$db-spacing-fixed-xl})
-			///
-			/// @example css - Wide drawer
-			///   .db-drawer-wide {
-			///     --db-drawer-max-width: 800px;
-			///   }
-			///   <div class="db-drawer db-drawer-wide">
-			///     <!-- wide drawer -->
-			///   </div>
-			/* stylelint-disable-next-line db-ux/use-sizing */
-			max-inline-size: var(
-				--db-drawer-max-width,
-				calc(100% - #{variables.$db-spacing-fixed-xl})
+		> .db-drawer-content {
+			overflow-y: auto;
+			overscroll-behavior: contain;
+			padding: var(
+				--db-drawer-content-padding,
+				variables.$db-spacing-fixed-xs
+					component.$drawer-content-padding-inline
 			);
-			/* stylelint-disable-next-line db-ux/use-sizing */
-			min-inline-size: var(--db-drawer-min-width, auto);
+		}
+
+		&[data-show-spacing="true"] {
+			// We use the size of a button for this spacing to make sure backdrop is clickable
+			--db-drawer-container-backdrop-spacing: #{variables.$db-sizing-md};
 
 			&:not([data-direction]),
-			&[data-direction="right"] {
+			&[data-direction="to-left"] {
 				border-inline-start: component.$component-border;
 			}
 
-			&[data-direction="left"] {
+			&[data-direction="to-right"] {
 				border-inline-end: component.$component-border;
 			}
 
@@ -198,104 +203,83 @@ $spacings: (
 				#{variables.$db-transition-timing-emotional};
 		}
 
-		&:not([data-direction]),
-		&[data-direction="right"] {
-			@extend %direction-right;
+		&[data-direction="to-right"] {
+			@extend %direction-from-left-to-right;
 		}
 
-		&[data-direction="left"] {
-			@extend %direction-left;
+		&:not([data-direction]),
+		&[data-direction="to-left"] {
+			@extend %direction-from-right-to-left;
 		}
 
 		&[data-direction="up"] {
-			@extend %direction-up;
+			@extend %direction-from-bottom-to-top;
 		}
 
 		&[data-direction="down"] {
-			@extend %direction-down;
+			@extend %direction-from-top-to-bottom;
 		}
+	}
 
-		.db-drawer-header {
-			display: none;
-
-			@include helpers.divider("bottom");
-
-			.db-drawer-header-text {
-				margin-block: auto;
-				font-weight: 700;
-			}
-
-			.button-close-drawer {
-				margin-inline-start: auto;
+	&:not([data-position="absolute"]) {
+		--db-drawer-inline-size: 100lvw;
+		--db-drawer-block-size: 100lvh;
 
-				// angular-workaround
-				button {
-					margin-inline-start: auto;
+		&[open] {
+			.db-drawer-container {
+				&[data-transition="open"] {
+					transform: none;
 				}
-			}
 
-			&:has(.button-close-drawer),
-			&:has(:not(.db-drawer-header-text:empty)) {
-				display: flex;
+				&[data-transition="close"] {
+					@media (prefers-reduced-motion: no-preference) {
+						transition: transform var(--db-drawer-close-delay)
+							#{variables.$db-transition-timing-emotional};
+					}
+				}
 			}
 		}
 	}
 
 	&[data-position="absolute"] {
+		--db-drawer-inline-size: 100%;
+		--db-drawer-block-size: 100%;
+
 		position: absolute;
 		z-index: 3;
 		inset: 0;
-		block-size: 100%;
-		inline-size: 100%;
 		background-color: transparent;
+		inline-size: var(--db-drawer-inline-size);
+		block-size: var(--db-drawer-block-size);
 
 		&[open] {
 			display: flex;
+
+			.db-drawer-container[data-transition="close"] {
+				position: relative;
+			}
 		}
 
 		&:not([data-direction]),
-		&[data-direction="right"],
-		&[data-direction="left"] {
+		&[data-direction="to-right"],
+		&[data-direction="to-left"] {
 			flex-direction: column;
 		}
 
-		&[data-direction="left"],
+		&[data-direction="to-right"],
 		&[data-direction="down"] {
-			align-items: start;
+			align-items: flex-start;
 		}
 
 		&:not([data-direction]),
-		&[data-direction="right"],
+		&[data-direction="to-left"],
 		&[data-direction="up"] {
-			align-items: end;
-		}
-
-		.db-drawer-container {
-			position: relative;
+			align-items: flex-end;
 		}
-	}
 
-	&[open] {
 		.db-drawer-container {
 			&[data-transition="open"] {
-				&:not([data-direction]),
-				&[data-direction="right"],
-				&[data-direction="left"] {
-					transform: none;
-				}
-
-				&[data-direction="up"],
-				&[data-direction="down"] {
-					transform: none;
-				}
-			}
-
-			&[data-transition="close"] {
-				@media (prefers-reduced-motion: no-preference) {
-					transition: transform
-						#{variables.$db-transition-duration-slow}
-						#{variables.$db-transition-timing-emotional};
-				}
+				position: relative;
 			}
 		}
 	}

package/build/components/drawer-footer/drawer-footer.css

@@ -0,0 +1,34 @@
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+/* Variants for adaptive components like input, select, notification, ... */
+.db-drawer-footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--db-spacing-fixed-sm);
+  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-sm);
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-drawer-footer[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-drawer-footer::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  /* jscpd:ignore-start */
+  block-size: var(--db-border-width-3xs);
+  inset-block-start: 0;
+  inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
+}
+@media (forced-colors: active) {
+  .db-drawer-footer::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-drawer-footer::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}

package/build/components/drawer-footer/drawer-footer.scss

@@ -0,0 +1,11 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers";
+
+.db-drawer-footer {
+	display: flex;
+	flex-direction: column;
+	gap: variables.$db-spacing-fixed-sm;
+	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-sm;
+
+	@include helpers.divider("top");
+}

package/build/components/drawer-header/drawer-header.css

@@ -0,0 +1,38 @@
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
+/* Variants for adaptive components like input, select, notification, ... */
+.db-drawer-header {
+  display: flex;
+  gap: var(--db-spacing-fixed-sm);
+  align-items: center;
+  padding: calc(var(--db-spacing-fixed-xs) + env(safe-area-inset-top)) var(--db-spacing-fixed-sm) var(--db-spacing-fixed-xs);
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-drawer-header[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-drawer-header::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  /* jscpd:ignore-start */
+  block-size: var(--db-border-width-3xs);
+  inset-block-end: 0;
+  inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
+}
+@media (forced-colors: active) {
+  .db-drawer-header::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-drawer-header::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
+.db-drawer-header .db-drawer-header-container {
+  font-weight: bold;
+  margin-inline-end: auto;
+}

package/build/components/drawer-header/drawer-header.scss

@@ -0,0 +1,17 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers";
+
+.db-drawer-header {
+	display: flex;
+	gap: variables.$db-spacing-fixed-sm;
+	align-items: center;
+	padding: calc(#{variables.$db-spacing-fixed-xs} + env(safe-area-inset-top))
+		variables.$db-spacing-fixed-sm variables.$db-spacing-fixed-xs;
+
+	@include helpers.divider("bottom");
+
+	.db-drawer-header-container {
+		font-weight: bold;
+		margin-inline-end: auto;
+	}
+}

package/build/components/header/header.css

@@ -564,43 +564,15 @@
   flex-shrink: 0;
 }
 
-.db-header-secondary-action {
-  flex: 0 1 auto;
-  flex-grow: 0;
-  flex-shrink: 0;
-  padding-block-start: var(--db-spacing-fixed-xs);
-  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-  position: var(--db-tooltip-parent-position, relative);
-}
-.db-header-secondary-action[data-emphasis=strong] {
-  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
-}
-.db-header-secondary-action::before {
-  content: "";
-  background-color: var(--db-divider-bg-color);
-  position: absolute;
-  /* jscpd:ignore-start */
-  block-size: var(--db-border-width-3xs);
-  inset-block-start: 0;
-  inset-inline: 0;
-  /* stylelint-disable-next-line db-ux/use-border-color */
-}
-@media (forced-colors: active) {
-  .db-header-secondary-action::before {
-    /* stylelint-disable-next-line db-ux/use-border-color */
-    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
-  }
-}
-.db-header-secondary-action::before {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* jscpd:ignore-end */
-}
 .db-header-secondary-action {
   /* stylelint-disable-next-line media-query-no-invalid */
 }
 @media (min-width: 64em) {
-  .db-header-secondary-action:not([data-force-mobile])::before, .db-header-secondary-action[data-force-mobile=false]::before {
-    display: none;
+  .db-header-secondary-action:not([data-force-mobile]), .db-header-secondary-action[data-force-mobile=false] {
+    flex: 0 1 auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+    padding-block-start: var(--db-spacing-fixed-xs);
   }
 }
 .db-header-secondary-action {
@@ -619,7 +591,6 @@
 }
 
 .db-header-navigation {
-  padding-block: var(--db-spacing-fixed-md);
   /* stylelint-disable-next-line media-query-no-invalid */
 }
 @media (min-width: 64em) {
@@ -638,7 +609,6 @@
 .db-header-navigation,
 .db-header-secondary-action {
   gap: var(--db-spacing-fixed-sm);
-  padding-inline: var(--db-spacing-fixed-md);
   /* stylelint-disable-next-line media-query-no-invalid */
 }
 @media (min-width: 64em) {
@@ -655,11 +625,7 @@
 }
 
 .db-header-drawer {
-  --db-drawer-content-padding-inline: 0;
-  --db-drawer-header-padding-block-end: calc(
-  	1px + var(--db-spacing-fixed-xs)
-  );
-  padding-block-end: 0;
+  --db-drawer-content-padding: 0;
 }
 .db-header-drawer .db-drawer-content:not([hidden]) {
   display: flex;
@@ -669,6 +635,50 @@
   block-size: 100%;
   overflow: hidden;
 }
+.db-header-drawer .db-drawer-content .db-header-navigation {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+  overflow-x: hidden;
+  padding: var(--db-spacing-fixed-xs) max(var(--db-spacing-fixed-sm), max(env(safe-area-inset-left), env(safe-area-inset-right)));
+}
+.db-header-drawer .db-drawer-content .db-header-meta-navigation {
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding: var(--db-spacing-fixed-xs) max(var(--db-spacing-fixed-sm), max(env(safe-area-inset-left), env(safe-area-inset-right)));
+  margin-block-start: auto;
+  flex-flow: column nowrap;
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+.db-header-drawer .db-drawer-content .db-header-meta-navigation[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+.db-header-drawer .db-drawer-content .db-header-meta-navigation::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  /* jscpd:ignore-start */
+  block-size: var(--db-border-width-3xs);
+  inset-block-start: 0;
+  inset-inline: 0;
+  /* stylelint-disable-next-line db-ux/use-border-color */
+}
+@media (forced-colors: active) {
+  .db-header-drawer .db-drawer-content .db-header-meta-navigation::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+.db-header-drawer .db-drawer-content .db-header-meta-navigation::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
+.db-header-drawer .db-drawer-footer:has(.db-header-secondary-action:empty) {
+  display: none;
+}
+.db-header-drawer:has(.db-drawer-footer:has(.db-header-secondary-action:empty)) .db-drawer-content {
+  margin-block-end: env(safe-area-inset-bottom);
+}
 
 /* Only for Desktop */
 .db-header-meta-navigation:not([hidden]),