@db-ux/core-components 4.13.1-angular-signal-forms12-ac097f6 → 4.14.0-shell-52d18db

package/build/components/header/header.css

@@ -320,6 +320,7 @@
 }
 .db-header {
   /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-start */
 }
 .db-header[data-width=small] {
   margin-inline: auto;
@@ -333,6 +334,9 @@
   margin-inline: auto;
   max-inline-size: 90em;
 }
+.db-header {
+  /* jscpd:ignore-end */
+}
 .db-header .db-link:not([hidden]) {
   display: inline-block;
 }
@@ -391,17 +395,22 @@
   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 at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-header-meta-navigation {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .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-meta-navigation::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-header-meta-navigation {
   /* stylelint-disable-next-line media-query-no-invalid */
 }
@@ -448,16 +457,19 @@
     content: "";
     background-color: var(--db-divider-bg-color);
     position: absolute;
+    /* jscpd:ignore-start */
     inline-size: var(--db-border-width-3xs);
     inset-inline-start: 0;
     inset-block: 0;
+    /* stylelint-disable-next-line db-ux/use-border-color */
     /* stylelint-disable-next-line at-rule-empty-line-before */
+    /* jscpd:ignore-end */
   }
 }
 @media (min-width: 64em) and (forced-colors: active) {
-  .db-header-navigation-container:not([data-force-mobile]), .db-header-navigation-container[data-force-mobile=false] {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-header-navigation-container:not([data-force-mobile])::before, .db-header-navigation-container[data-force-mobile=false]::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
 @media (min-width: 64em) {
@@ -506,17 +518,22 @@
   content: "";
   background-color: var(--db-divider-bg-color);
   position: absolute;
+  /* jscpd:ignore-start */
   inline-size: var(--db-border-width-3xs);
   inset-inline-start: 0;
   inset-block: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-header-action-container {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-header-action-container::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
   }
 }
+.db-header-action-container::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
 .db-header-action-container {
   /* stylelint-disable-next-line media-query-no-invalid */
 }
@@ -551,38 +568,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;
-  block-size: var(--db-border-width-3xs);
-  inset-block-start: 0;
-  inset-inline: 0;
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media (forced-colors: active) {
-  .db-header-secondary-action {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
-  }
-}
 .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 {
@@ -601,7 +595,6 @@
 }
 
 .db-header-navigation {
-  padding-block: var(--db-spacing-fixed-md);
   /* stylelint-disable-next-line media-query-no-invalid */
 }
 @media (min-width: 64em) {
@@ -620,7 +613,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) {
@@ -637,11 +629,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;
@@ -651,6 +639,53 @@
   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 {
+  /* jscpd:ignore-start */
+}
+.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-content {
+  /* jscpd:ignore-end */
+}
+.db-header-drawer .db-drawer-footer:has(.db-header-secondary-action:empty) {
+  display: none;
+}
 
 /* Only for Desktop */
 .db-header-meta-navigation:not([hidden]),

package/build/components/header/header.scss

@@ -20,6 +20,7 @@
 		--db-drawer-max-width: #{screen-sizes.$db-breakpoint-sm};
 	}
 
+	/* jscpd:ignore-start */
 	&[data-width="small"] {
 		margin-inline: auto;
 		max-inline-size: screen-sizes.$db-breakpoint-sm;
@@ -35,6 +36,8 @@
 		max-inline-size: screen-sizes.$db-breakpoint-lg;
 	}
 
+	/* jscpd:ignore-end */
+
 	.db-link {
 		@include helpers.display(inline-block);
 	}
@@ -186,17 +189,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 +208,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 +218,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 +226,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 +234,32 @@
 		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;
+		}
+
+		/* jscpd:ignore-start */
+		.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");
+		}
+
+		/* jscpd:ignore-end */
+	}
+
+	.db-drawer-footer:has(.db-header-secondary-action:empty) {
+		display: none;
 	}
 }
 

package/build/components/input/input.css

@@ -1,18 +1,13 @@
 .db-input[data-hide-label=true] > label, .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }

package/build/components/link/link.css

@@ -82,10 +82,17 @@
 }
 
 .db-link a:not([hidden]), .db-link:not([hidden]) {
-  display: inline-block;
+  display: inline-flex;
+}
+.db-link a, .db-link {
+  align-items: center;
+}
+.db-link a:not([data-wrap=true]):not([hidden]), .db-link:not([data-wrap=true]):not([hidden]) {
+  display: inline-flex;
 }
 .db-link a:not([data-wrap=true]), .db-link:not([data-wrap=true]) {
-  block-size: var(--db-sizing-sm);
+  block-size: 1lh;
+  align-items: center;
 }
 
 .db-link {
@@ -122,6 +129,9 @@
   opacity: var(--db-opacity-md);
   pointer-events: none;
 }
+.db-link::after {
+  text-decoration: none;
+}
 
 .db-link {
   --db-icon-margin-start: var(--db-spacing-fixed-2xs);

package/build/components/navigation/navigation.css

@@ -1,18 +1,13 @@
 .db-visually-hidden,
 [data-visually-hidden=true] {
-  clip: rect(0, 0, 0, 0) !important;
-  overflow: hidden !important;
-  white-space: nowrap !important;
-  font-size: 0 !important;
-  all: initial;
-  inset-block-start: 0 !important;
-  block-size: 1px !important;
   position: absolute !important;
+  inset-block-start: 0 !important;
   inline-size: 1px !important;
-  border-width: 0 !important;
-  border-style: initial !important;
-  border-color: initial !important;
-  border-image: initial !important;
+  block-size: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
   padding: 0 !important;
   pointer-events: none !important;
 }

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

@@ -148,17 +148,16 @@
 }
 .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-navigation-item[data-icon]:not([data-show-icon=false])::before {
   position: absolute;
-  inset-block-start: calc(50% - 0.5em);
-  inset-inline-start: var(--db-icon-passing-inline-start, var(--db-spacing-fixed-sm));
+  inset-block-start: var(--db-icon-passing-inset-block-start, calc(50% - 0.5em));
+  inset-inline-start: var(--db-icon-passing-inset-inline-start, var(--db-spacing-fixed-sm));
   pointer-events: none;
   z-index: 1;
 }
-.db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) label, .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) button, .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) a, .db-navigation-item[data-icon]:not([data-show-icon=false]) label, .db-navigation-item[data-icon]:not([data-show-icon=false]) button, .db-navigation-item[data-icon]:not([data-show-icon=false]) a {
-  --db-padding-inline-start: calc(
-  	var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + 1lh
-  );
+.db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) > :is(label, button, a),
+.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-padding-inline-start);
+  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)));
 }
 .db-navigation-item:not([hidden]) {
   display: inline-flex;
@@ -261,12 +260,18 @@
     content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
+.db-navigation-item {
+  /* jscpd:ignore-start */
+}
 .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 {
+  /* jscpd:ignore-end */
+}
 .db-navigation-item[data-width=full] {
   inline-size: 100%;
 }
@@ -278,6 +283,8 @@
   pointer-events: none;
 }
 
+/* jscpd:ignore-start */
+/* jscpd:ignore-end */
 .db-sub-navigation {
   margin: 0;
 }
@@ -287,39 +294,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 {
@@ -354,6 +352,9 @@
   .db-sub-navigation:not([data-force-mobile])[data-force-close=true], .db-sub-navigation[data-force-mobile=false][data-force-close=true] {
     pointer-events: none;
   }
+  .db-sub-navigation:not([data-force-mobile]), .db-sub-navigation[data-force-mobile=false] {
+    /* jscpd:ignore-start */
+  }
   .db-sub-navigation:not([data-force-mobile])::before, .db-sub-navigation[data-force-mobile=false]::before {
     content: "";
     position: absolute;
@@ -362,6 +363,9 @@
     block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-md));
     inset-block-start: calc(-1 * var(--db-spacing-fixed-md) - var(--db-spacing-fixed-3xs));
   }
+  .db-sub-navigation:not([data-force-mobile]), .db-sub-navigation[data-force-mobile=false] {
+    /* jscpd:ignore-end */
+  }
   .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation {
     inset-block-start: calc(-50% + var(--db-spacing-fixed-xs) + 1px);
     inset-inline-start: calc(100% + var(--db-spacing-fixed-xs));
@@ -381,6 +385,9 @@
     inset-block: auto 0;
     transform: translateX(100%) scaleX(-1);
   }
+  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation {
+    /* jscpd:ignore-start */
+  }
   .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation::before, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation::before {
     content: "";
     position: absolute;
@@ -402,6 +409,9 @@
     block-size: 100%;
     inline-size: var(--db-spacing-fixed-xs);
   }
+  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation {
+    /* jscpd:ignore-end */
+  }
 }
 .db-sub-navigation {
   /* stylelint-disable-next-line at-rule-empty-line-before */
@@ -434,14 +444,19 @@
   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 at-rule-empty-line-before */
+  /* stylelint-disable-next-line db-ux/use-border-color */
 }
 @media (forced-colors: active) {
-  .db-mobile-navigation-back {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  .db-mobile-navigation-back::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-mobile-navigation-back::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}

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

@@ -140,6 +140,7 @@
 		}
 	}
 
+	/* jscpd:ignore-start */
 	&:has([aria-current="page"]),
 	&:has([data-active="true"]),
 	&[aria-current="page"],
@@ -157,6 +158,8 @@
 		}
 	}
 
+	/* jscpd:ignore-end */
+
 	&[data-width="full"] {
 		inline-size: 100%;
 
@@ -173,21 +176,28 @@
 	}
 }
 
-@mixin sub-navigation-mobile() {
-	padding: variables.$db-spacing-fixed-md;
-	inline-size: calc(100% - #{variables.$db-spacing-fixed-xl});
+/* jscpd:ignore-start */
+@mixin sub-navigation-item-mobile() {
+	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)
+		);
 }
 
+/* jscpd:ignore-end */
+
 .db-sub-navigation {
 	@extend %component-border;
 
@@ -197,12 +207,11 @@
 
 	flex-direction: column;
 	z-index: 70;
-	inset-inline-start: 0;
 	background-color: colors.$db-adaptive-bg-basic-level-1-default;
 	visibility: hidden;
 
 	@include screen-sizes.screen("md", "max") {
-		@include sub-navigation-mobile;
+		@include sub-navigation-item-mobile;
 	}
 
 	@include screen-sizes.screen("md") {
@@ -233,6 +242,7 @@
 			pointer-events: none;
 		}
 
+		/* jscpd:ignore-start */
 		&::before {
 			content: "";
 			position: absolute;
@@ -250,6 +260,8 @@
 			);
 		}
 
+		/* jscpd:ignore-end */
+
 		.db-sub-navigation {
 			// 1px for box shadow
 			inset-block-start: calc(
@@ -282,6 +294,7 @@
 				}
 			}
 
+			/* jscpd:ignore-start */
 			&::before {
 				content: "";
 				position: absolute;
@@ -309,6 +322,8 @@
 				block-size: 100%;
 				inline-size: variables.$db-spacing-fixed-xs;
 			}
+
+			/* jscpd:ignore-end */
 		}
 	}