@db-ux/core-components 4.14.0 → 5.0.0

package/build/components/header/header.scss

@@ -186,17 +186,11 @@
 }
 
 .db-header-secondary-action {
-	flex: 0 1 auto;
-	flex-grow: 0;
-	flex-shrink: 0;
-	padding-block-start: variables.$db-spacing-fixed-xs;
-
-	@include helpers.divider("top");
-
 	@include screen-sizes.screen("md") {
-		&::before {
-			display: none;
-		}
+		flex: 0 1 auto;
+		flex-grow: 0;
+		flex-shrink: 0;
+		padding-block-start: variables.$db-spacing-fixed-xs;
 	}
 }
 
@@ -211,8 +205,6 @@
 }
 
 .db-header-navigation {
-	padding-block: variables.$db-spacing-fixed-md;
-
 	@include screen-sizes.screen("md") {
 		margin-inline: variables.$db-spacing-fixed-lg;
 	}
@@ -223,7 +215,6 @@
 	@include helpers.display(flex);
 
 	gap: variables.$db-spacing-fixed-sm;
-	padding-inline: variables.$db-spacing-fixed-md;
 
 	@include screen-sizes.screen("md") {
 		gap: variables.$db-spacing-fixed-xs;
@@ -232,14 +223,7 @@
 }
 
 .db-header-drawer {
-	--db-drawer-content-padding-inline: 0;
-
-	// 1px for box shadow of header
-	--db-drawer-header-padding-block-end: calc(
-		1px + #{variables.$db-spacing-fixed-xs}
-	);
-
-	padding-block-end: 0;
+	--db-drawer-content-padding: 0;
 
 	.db-drawer-content {
 		@include helpers.display(flex);
@@ -247,6 +231,36 @@
 		flex-direction: column;
 		block-size: 100%;
 		overflow: hidden;
+
+		.db-header-navigation {
+			display: flex;
+			flex-direction: column;
+			block-size: 100%;
+			overflow-x: hidden;
+			padding: variables.$db-spacing-fixed-xs
+				component.$drawer-content-padding-inline;
+		}
+
+		.db-header-meta-navigation {
+			/* stylelint-disable-next-line db-ux/use-spacings */
+			padding: variables.$db-spacing-fixed-xs
+				component.$drawer-content-padding-inline;
+			margin-block-start: auto;
+			flex-flow: column nowrap;
+
+			@include helpers.divider("top");
+		}
+	}
+
+	.db-drawer-footer:has(.db-header-secondary-action:empty) {
+		display: none;
+	}
+
+	// When footer is hidden (empty secondaryAction), content needs safe-area spacing
+	&:has(.db-drawer-footer:has(.db-header-secondary-action:empty)) {
+		.db-drawer-content {
+			margin-block-end: env(safe-area-inset-bottom);
+		}
 	}
 }
 

package/build/components/icon/icon.css

@@ -3,12 +3,6 @@
 /* Variants for adaptive components like input, select, notification, ... */
 .db-icon {
   font-size: 0 !important;
-}
-.db-icon::before {
-  --db-icon-margin-end: 0;
-}
-.db-icon {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
   /* Safari hack */
 }
 @supports (-webkit-hyphens: none) {

package/build/components/infotext/infotext.css

@@ -58,9 +58,6 @@
   }
 }
 
-.db-infotext {
-  --db-icon-margin-end: 0;
-}
 .db-infotext:not([hidden]) {
   display: flex;
 }
@@ -76,7 +73,6 @@
 }
 .db-infotext:not([data-icon]):not([data-show-icon-leading=false])::before {
   --db-icon: "information_circle";
-  margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
 }
 .db-infotext[data-semantic=adaptive], .db-infotext:not([data-semantic]) {
   color: var(--db-adaptive-on-bg-basic-emphasis-80-default);

package/build/components/infotext/infotext.scss

@@ -6,8 +6,6 @@
 @use "@db-ux/core-foundations/build/styles/icons";
 
 .db-infotext {
-	--db-icon-margin-end: 0;
-
 	@extend %db-overwrite-font-size-sm;
 	@include helpers.display(flex);
 

package/build/components/input/input.css

@@ -404,7 +404,6 @@ input[type=radio]:checked) > label {
 
 .db-input:not([data-show-icon-trailing=false]):has(datalist)::after {
   --db-icon-trailing: "chevron_down";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -815,11 +814,9 @@ input[type=time]) {
 }
 .db-input:has(input[type=search]):not([data-show-icon-leading=false])::before {
   --db-icon: "magnifying_glass";
-  margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
 }
 .db-input:has(input[type=search]):not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "cross";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -850,7 +847,6 @@ input:focus-visible)::after {
   }
   .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));
     content: var(--db-icon-trailing, attr(data-icon-trailing));
   }
   @supports (content: ""/"") {
@@ -860,7 +856,6 @@ input:focus-visible)::after {
   }
   .db-input:has(input[type=time]):not([data-show-icon-trailing=false])::after {
     --db-icon-trailing: "clock";
-    margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
     content: var(--db-icon-trailing, attr(data-icon-trailing));
   }
   @supports (content: ""/"") {

package/build/components/link/link.css

@@ -131,12 +131,10 @@
 }
 
 .db-link {
-  --db-icon-margin-start: var(--db-spacing-fixed-2xs);
   --db-icon-vertical-align: top;
 }
 .db-link[data-content=internal]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "arrow_right";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -146,7 +144,6 @@
 }
 .db-link[data-content=external]:not([data-variant=inline]):not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "arrow_up_right";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -154,6 +151,9 @@
     content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
+.db-link::after {
+  margin-inline-start: var(--db-spacing-fixed-2xs);
+}
 .db-link[data-variant=brand] {
   color: var(--db-brand-on-bg-basic-emphasis-80-default);
 }
@@ -168,6 +168,6 @@
   cursor: var(--db-overwrite-cursor, pointer);
   color: var(--db-brand-on-bg-basic-emphasis-80-pressed);
 }
-.db-link[data-size=small] {
-  --db-icon-margin-start: var(--db-spacing-fixed-3xs);
+.db-link[data-size=small]::after {
+  margin-inline-start: var(--db-spacing-fixed-3xs);
 }

package/build/components/link/link.scss

@@ -8,7 +8,6 @@
 @use "../../styles/internal/link-components";
 
 .db-link {
-	--db-icon-margin-start: #{variables.$db-spacing-fixed-2xs};
 	--db-icon-vertical-align: top;
 
 	@extend %db-default-link;
@@ -31,6 +30,10 @@
 		}
 	}
 
+	&::after {
+		margin-inline-start: variables.$db-spacing-fixed-2xs;
+	}
+
 	// We couldn't extend any existing SCSS placeholders, as this is a special construct
 	&[data-variant="brand"] {
 		color: colors.$db-brand-on-bg-basic-emphasis-80-default;
@@ -47,8 +50,10 @@
 	}
 
 	&[data-size="small"] {
-		--db-icon-margin-start: #{variables.$db-spacing-fixed-3xs};
-
 		@extend %db-overwrite-font-size-sm;
+
+		&::after {
+			margin-inline-start: variables.$db-spacing-fixed-3xs;
+		}
 	}
 }

package/build/components/navigation/navigation.css

@@ -115,7 +115,6 @@
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
   .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
-    --db-icon-margin-start: var(--db-spacing-fixed-sm);
     --db-icon-trailing: "chevron_down";
   }
 }
@@ -156,7 +155,7 @@
   .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
   .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
     --db-icon-trailing: "chevron_right";
-    --db-icon-margin-start: auto;
+    margin-inline-start: auto;
   }
   .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile]):is(:hover, :focus-visible)::after,
   .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile]) :has(~ .db-sub-navigation:is(:hover,

package/build/components/navigation/navigation.scss

@@ -33,7 +33,6 @@
 				// overwrite for navigation items
 				@include screen-sizes.screen("md") {
 					&::after {
-						--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
 						--db-icon-trailing: "chevron_down";
 
 						@media (prefers-reduced-motion: no-preference) {
@@ -63,7 +62,8 @@
 					@include screen-sizes.screen("md") {
 						&::after {
 							--db-icon-trailing: "chevron_right";
-							--db-icon-margin-start: auto;
+
+							margin-inline-start: auto;
 						}
 
 						&:is(:hover, :focus-visible),

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

@@ -119,6 +119,7 @@
   text-align: center;
   align-items: center;
   justify-content: space-between;
+  gap: var(--db-spacing-fixed-sm);
 }
 .db-navigation-item .db-navigation-item-expand-button:not([hidden]):is(button),
 .db-navigation-item .db-navigation-item-expand-button > button:not([hidden]), .db-navigation-item a:not([hidden]) {
@@ -157,7 +158,7 @@
 .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) > * > :is(label, button, a), .db-navigation-item[data-icon]:not([data-show-icon=false]) > :is(label, button, a),
 .db-navigation-item[data-icon]:not([data-show-icon=false]) > * > :is(label, button, a) {
   /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: var(--db-icon-passing-padding-inline-start, calc(var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + var(--db-icon-font-size)));
+  padding-inline-start: var(--db-icon-passing-padding-inline-start, calc(var(--db-spacing-fixed-sm) + var(--db-spacing-fixed-xs) + var(--db-icon-font-size, 1lh)));
 }
 .db-navigation-item:not([hidden]) {
   display: inline-flex;
@@ -174,7 +175,7 @@
   inline-size: 100%;
 }
 .db-navigation-item[data-force-mobile=true]:not([data-width=full]) .db-navigation-item-expand-button::after {
-  --db-icon-margin-start: auto;
+  margin-inline-start: auto;
 }
 .db-navigation-item {
   /* stylelint-disable-next-line media-query-no-invalid */
@@ -184,7 +185,7 @@
     inline-size: 100%;
   }
   .db-navigation-item:not([data-width=full]) .db-navigation-item-expand-button::after {
-    --db-icon-margin-start: auto;
+    margin-inline-start: auto;
   }
 }
 .db-navigation-item a {
@@ -251,7 +252,6 @@
 .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
 .db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "chevron_right";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -263,14 +263,11 @@
 .db-navigation-item:has([aria-current=page]) > :is(a, button), .db-navigation-item:has([data-active=true]) > :is(a, button), .db-navigation-item[aria-current=page] > :is(a, button), .db-navigation-item[data-active=true] > :is(a, button) {
   font-weight: 700;
 }
-.db-navigation-item:not([data-width=full]) .db-navigation-item-expand-button::after {
-  --db-icon-margin-start: var(--db-spacing-fixed-sm);
-}
 .db-navigation-item[data-width=full] {
   inline-size: 100%;
 }
 .db-navigation-item[data-width=full] .db-navigation-item-expand-button::after {
-  --db-icon-margin-start: auto;
+  margin-inline-start: auto;
 }
 .db-navigation-item[aria-disabled=true] {
   opacity: var(--db-opacity-md);
@@ -286,39 +283,30 @@
 .db-sub-navigation {
   flex-direction: column;
   z-index: 70;
-  inset-inline-start: 0;
   background-color: var(--db-adaptive-bg-basic-level-1-default);
   visibility: hidden;
 }
 .db-sub-navigation[data-force-mobile=true] {
-  padding: var(--db-spacing-fixed-md);
-  inline-size: calc(100% - var(--db-spacing-fixed-xl));
+  padding: var(--db-spacing-fixed-xs) max(var(--db-spacing-fixed-sm), max(env(safe-area-inset-left), env(safe-area-inset-right)));
+  inline-size: 100%;
+  max-inline-size: var(--db-drawer-max-width, var(--db-drawer-max-width-horizontal));
   position: fixed;
   overflow: hidden auto;
-  inset-inline-start: var(--db-spacing-fixed-xl);
-}
-.db-drawer-container[data-direction=left] .db-sub-navigation[data-force-mobile=true] {
-  inset-inline: auto var(--db-spacing-fixed-xl);
-}
-.db-sub-navigation[data-force-mobile=true] {
-  inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs))) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2);
+  inset-inline-end: 0;
+  inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs)) + env(safe-area-inset-top)) calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs)) + env(safe-area-inset-bottom));
 }
 .db-sub-navigation {
   /* stylelint-disable-next-line media-query-no-invalid */
 }
 @media (max-width: 63.9375em) {
   .db-sub-navigation {
-    padding: var(--db-spacing-fixed-md);
-    inline-size: calc(100% - var(--db-spacing-fixed-xl));
+    padding: var(--db-spacing-fixed-xs) max(var(--db-spacing-fixed-sm), max(env(safe-area-inset-left), env(safe-area-inset-right)));
+    inline-size: 100%;
+    max-inline-size: var(--db-drawer-max-width, var(--db-drawer-max-width-horizontal));
     position: fixed;
     overflow: hidden auto;
-    inset-inline-start: var(--db-spacing-fixed-xl);
-  }
-  .db-drawer-container[data-direction=left] .db-sub-navigation {
-    inset-inline: auto var(--db-spacing-fixed-xl);
-  }
-  .db-sub-navigation {
-    inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs))) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2);
+    inset-inline-end: 0;
+    inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs)) + env(safe-area-inset-top)) calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs)) + env(safe-area-inset-bottom));
   }
 }
 .db-sub-navigation {

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

@@ -71,6 +71,7 @@
 	text-align: center;
 	align-items: center; // Centering the content vertically and horizontally
 	justify-content: space-between;
+	gap: variables.$db-spacing-fixed-sm;
 
 	@include helpers.display(inline-flex);
 	@include helpers.interactive-bg(
@@ -106,7 +107,7 @@
 
 			.db-navigation-item-expand-button {
 				&::after {
-					--db-icon-margin-start: auto;
+					margin-inline-start: auto;
 				}
 			}
 		}
@@ -149,20 +150,12 @@
 		}
 	}
 
-	&:not([data-width="full"]) {
-		.db-navigation-item-expand-button {
-			&::after {
-				--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
-			}
-		}
-	}
-
 	&[data-width="full"] {
 		inline-size: 100%;
 
 		.db-navigation-item-expand-button {
 			&::after {
-				--db-icon-margin-start: auto;
+				margin-inline-start: auto;
 			}
 		}
 	}
@@ -174,18 +167,22 @@
 }
 
 @mixin sub-navigation-mobile() {
-	padding: variables.$db-spacing-fixed-md;
-	inline-size: calc(100% - #{variables.$db-spacing-fixed-xl});
+	padding: variables.$db-spacing-fixed-xs
+		component.$drawer-content-padding-inline;
+	inline-size: 100%;
+	max-inline-size: var(
+		--db-drawer-max-width,
+		var(--db-drawer-max-width-horizontal)
+	);
 	position: fixed;
 	overflow: hidden auto;
-	inset-inline-start: variables.$db-spacing-fixed-xl;
-
-	.db-drawer-container[data-direction="left"] & {
-		inset-inline: auto variables.$db-spacing-fixed-xl;
-	}
-
-	inset-block: calc(#{component.$min-mobile-header-height})
-		calc(#{variables.$db-sizing-md} + #{variables.$db-spacing-fixed-xs} * 2);
+	inset-inline-end: 0;
+	inset-block: calc(
+			#{component.$min-mobile-header-height} + env(safe-area-inset-top)
+		)
+		calc(
+			#{component.$min-mobile-header-height} + env(safe-area-inset-bottom)
+		);
 }
 
 .db-sub-navigation {
@@ -197,7 +194,6 @@
 
 	flex-direction: column;
 	z-index: 70;
-	inset-inline-start: 0;
 	background-color: colors.$db-adaptive-bg-basic-level-1-default;
 	visibility: hidden;
 

package/build/components/notification/notification.css

@@ -1189,7 +1189,6 @@
   white-space: nowrap;
 }
 .db-notification[data-icon]::before, .db-notification::before {
-  --db-icon-margin-end: 0;
   --db-icon-font-family: var(
   	--db-icon-filled-font-family,
   	"db-ux-filled",

package/build/components/notification/notification.scss

@@ -147,8 +147,6 @@
 	// Icon grid positioning
 	&[data-icon]::before,
 	&::before {
-		--db-icon-margin-end: 0;
-
 		@include icons.to-filled-icon;
 
 		grid-area: icon;

package/build/components/select/select.css

@@ -404,7 +404,6 @@ input[type=radio]:checked) > label {
 
 .db-select:not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "chevron_down";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {

package/build/components/switch/switch.css

@@ -383,7 +383,6 @@
   );
 }
 .db-switch input {
-  --db-icon-margin-start: 0;
   --thumb-offset-x: 0.125rem;
   appearance: none;
   margin-inline-end: 0;
@@ -403,7 +402,6 @@
 }
 .db-switch input:not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "cross";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {
@@ -495,7 +493,6 @@
 }
 .db-switch[data-visual-aid=true] input:checked:not([data-aid-icon]):not([data-show-icon-trailing=false])::after {
   --db-icon-trailing: "check";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
   content: var(--db-icon-trailing, attr(data-icon-trailing));
 }
 @supports (content: ""/"") {

package/build/components/switch/switch.scss

@@ -61,7 +61,6 @@ $switch-inline-size: calc(2lh + #{$switch-fixed-padding});
 	// jscpd:ignore-end
 
 	input {
-		--db-icon-margin-start: 0;
 		--thumb-offset-x: #{$switch-fixed-padding};
 
 		@extend %db-overwrite-font-size-sm;