@db-ux/core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

package/build/components/navigation/navigation.css

@@ -66,6 +66,123 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
  */
+.db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-trailing=false])::after, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-trailing=false])::after, .db-navigation[data-variant=tree] .db-navigation-item:not([data-icon]) a:not([data-show-icon-leading=false])::before, .db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-leading=false])::before {
+  color: var(--db-icon-color, inherit);
+  display: inline-block;
+  /*** icon - placeholder ***/
+  font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
+  font-size: var(--db-icon-font-size, 1.5rem);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: var(--db-icon-font-weight, normal);
+  line-height: 1;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  speak: none;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  speak: never;
+  text-transform: none;
+  vertical-align: var(--db-icon-vertical-align, middle);
+  block-size: var(--db-icon-font-size, 1.5rem);
+  inline-size: var(--db-icon-font-size, 1.5rem);
+  content: var(--db-icon, attr(data-icon));
+}
+@supports (content: ""/"") {
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-trailing=false])::after, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-trailing=false])::after, .db-navigation[data-variant=tree] .db-navigation-item:not([data-icon]) a:not([data-show-icon-leading=false])::before, .db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-leading=false])::before {
+    content: var(--db-icon, attr(data-icon))/"";
+  }
+}
+@media aural {
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-trailing=false])::after, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-trailing=false])::after, .db-navigation[data-variant=tree] .db-navigation-item:not([data-icon]) a:not([data-show-icon-leading=false])::before, .db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-leading=false])::before {
+    content: none;
+  }
+}
+@media speech {
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-trailing=false])::after, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-trailing=false])::after, .db-navigation[data-variant=tree] .db-navigation-item:not([data-icon]) a:not([data-show-icon-leading=false])::before, .db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-leading=false])::before {
+    content: none;
+  }
+}
+
+@keyframes show-right-to-left {
+  from {
+    transform: translateX(110%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes hide-right-to-left {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(110%);
+  }
+}
+@keyframes show-left-to-right {
+  from {
+    transform: translateX(-110%);
+  }
+  to {
+    transform: translateX(0%);
+  }
+}
+@keyframes hide-left-to-right {
+  from {
+    transform: translateX(0%);
+  }
+  to {
+    transform: translateX(-110%);
+  }
+}
+@keyframes show-bottom-to-top {
+  from {
+    transform: translateY(110%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes hide-bottom-to-top {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(110%);
+  }
+}
+@keyframes show-top-to-bottom {
+  from {
+    transform: translateY(-110%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes hide-top-to-bottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(-110%);
+  }
+}
+@keyframes popover-animation {
+  0% {
+    opacity: 0;
+    transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
+  }
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md
@@ -126,167 +243,321 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
 
 @layer variables {}
 
-.db-navigation > menu .db-navigation-item::after {
-  content: "";
-  position: absolute;
-  border-radius: var(--db-border-radius-xs);
-}
-@media screen and (prefers-reduced-motion: no-preference) {
-  .db-navigation > menu .db-navigation-item::after {
-    transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
-  }
+.db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu {
+  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
 }
 
-.db-navigation > menu .db-navigation-item {
+/* Sub components for shell */
+.db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu {
+  --db-popover-distance: var(--db-spacing-fixed-xs);
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  z-index: 70;
+  inset-inline-start: 0;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  visibility: hidden;
+  max-block-size: 100vh;
+  /* stylelint-disable-next-line media-query-no-invalid */
   /* stylelint-disable-next-line media-query-no-invalid */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-navigation > menu .db-navigation-item::after {
-  block-size: 0;
-  inline-size: var(--db-border-width-xs);
-  transform: translate(0, -50%);
-  inset-block: 50% auto;
-  background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
-  inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
+.db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu:empty, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu:empty {
+  display: none;
+}
+.db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu .db-navigation-item, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu .db-navigation-item,
+.db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu .db-navigation-item-group,
+.db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu .db-navigation-item-group {
+  inline-size: 100%;
+}
+.db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu .db-navigation-item::after, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu .db-navigation-item::after,
+.db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu .db-navigation-item-group::after,
+.db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu .db-navigation-item-group::after {
+  margin-inline-start: auto;
+}
+.db-navigation:not([data-variant]) .db-navigation-item-group [data-force-mobile=true].db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group [data-force-mobile=true].db-navigation-item-group-menu {
+  --db-navigation-item-group-menu-mobile: 1;
+  padding: var(--db-spacing-fixed-md);
+  border: 0;
+  inline-size: 100%;
+  position: fixed;
+  overflow: hidden auto;
+  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);
+}
+@media screen and (max-width: 63.9375em) {
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu {
+    --db-navigation-item-group-menu-mobile: 1;
+    padding: var(--db-spacing-fixed-md);
+    border: 0;
+    inline-size: 100%;
+    position: fixed;
+    overflow: hidden auto;
+    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);
+  }
 }
 @media screen and (min-width: 64em) {
-  .db-navigation > menu .db-navigation-item:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item::after {
-    block-size: var(--db-border-width-xs);
-    inline-size: 0;
-    transform: translate(-50%, 0);
-    inset-inline-start: 50%;
-    background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
-    inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]), .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]), .db-navigation:not([data-variant]) .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu {
+    border-radius: var(--db-border-radius-sm);
+    box-shadow: var(--db-elevation-md);
+    padding: var(--db-spacing-fixed-sm);
+    block-size: fit-content;
+    inline-size: fit-content;
+    position: absolute;
+    min-inline-size: var(--db-container-xs);
+    transition: visibility 1ms linear;
+  }
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-back-button, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-back-button, .db-navigation:not([data-variant]) .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-back-button, .db-navigation[data-variant=popover] .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-back-button {
+    display: none;
+  }
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]):is(:hover, :focus-within):not([data-force-close=true]), .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]):is(:hover, :focus-within):not([data-force-close=true]), .db-navigation:not([data-variant]) .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu:is(:hover, :focus-within):not([data-force-close=true]), .db-navigation[data-variant=popover] .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu:is(:hover, :focus-within):not([data-force-close=true]) {
+    visibility: visible;
+  }
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile])[data-force-close=true], .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile])[data-force-close=true], .db-navigation:not([data-variant]) .db-navigation-item-group [data-force-mobile=false][data-force-close=true].db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group [data-force-mobile=false][data-force-close=true].db-navigation-item-group-menu {
+    pointer-events: none;
+  }
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu, .db-navigation:not([data-variant]) .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu {
+    inset-block-start: calc(-50% + var(--db-spacing-fixed-xs) + 1px);
+    inset-inline-start: calc(100% + var(--db-spacing-fixed-xs));
+  }
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu::before, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu::before, .db-navigation:not([data-variant]) .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu::before, .db-navigation[data-variant=popover] .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    block-size: 100%;
+    inline-size: var(--db-navigation-item-inline-size, 100%);
+    background: transparent;
+    transform: translateX(-100%);
+    clip-path: var(--db-navigation-item-clip-path, polygon(10% 30px, 100% 0, 100% 100%));
+  }
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu::after, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu::after, .db-navigation:not([data-variant]) .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu::after, .db-navigation[data-variant=popover] .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu::after {
+    content: "";
+    position: absolute;
+    padding: var(--db-spacing-fixed-xs);
+    inset-block-start: var(--db-spacing-fixed-3xs);
+    inset-inline-end: calc(-1 * var(--db-spacing-fixed-xs));
+    block-size: calc(100% - 2 * var(--db-spacing-fixed-3xs));
+    inline-size: var(--db-spacing-fixed-xs);
+  }
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu[data-outside-vy=bottom], .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu[data-outside-vy=bottom], .db-navigation:not([data-variant]) .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu[data-outside-vy=bottom], .db-navigation[data-variant=popover] .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu[data-outside-vy=bottom] {
+    transform: translateY(calc(-200% + var(--db-spacing-fixed-xs)));
+  }
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu[data-outside-vx=right], .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu[data-outside-vx=right], .db-navigation:not([data-variant]) .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu[data-outside-vx=right], .db-navigation[data-variant=popover] .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu[data-outside-vx=right] {
+    transform: translateX(calc(-200% + var(--db-spacing-fixed-xs)));
+  }
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu[data-outside-vx=right][data-outside-vy=bottom], .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu[data-outside-vx=right][data-outside-vy=bottom], .db-navigation:not([data-variant]) .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu[data-outside-vx=right][data-outside-vy=bottom], .db-navigation[data-variant=popover] .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu[data-outside-vx=right][data-outside-vy=bottom] {
+    transform: translate(calc(-200% + var(--db-spacing-fixed-xs)), calc(-200% + var(--db-spacing-fixed-xs)));
+  }
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu[data-outside-vx=right]::before, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-menu:not([data-force-mobile]) .db-navigation-item-group-menu[data-outside-vx=right]::before, .db-navigation:not([data-variant]) .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu[data-outside-vx=right]::before, .db-navigation[data-variant=popover] .db-navigation-item-group [data-force-mobile=false].db-navigation-item-group-menu .db-navigation-item-group-menu[data-outside-vx=right]::before {
+    inset-block: auto 0;
+    transform: translateX(100%) scaleX(-1);
   }
 }
 
-.db-navigation > menu .db-navigation-item:has([aria-current=page]), .db-navigation > menu .db-navigation-item:has([data-active=true]), .db-navigation > menu .db-navigation-item[aria-current=page], .db-navigation > menu .db-navigation-item[data-active=true] {
+.db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-menu {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  block-size: 0;
+  visibility: hidden;
+  overflow: hidden;
+  margin-inline-start: calc(var(--db-icon-font-size));
+  gap: var(--db-spacing-fixed-xs);
+  margin-block-start: var(--db-spacing-fixed-xs);
   /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-.db-navigation > menu .db-navigation-item:has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]::after, .db-navigation > menu .db-navigation-item[data-active=true]::after {
-  block-size: 100%;
-  inline-size: var(--db-border-width-xs);
-}
-@media (forced-colors: active) {
-  .db-navigation > menu .db-navigation-item:has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]::after, .db-navigation > menu .db-navigation-item[data-active=true]::after {
-    border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-menu {
+    transition: block-size var(--db-transition-straight-emotional);
   }
 }
-@media screen and (min-width: 64em) {
-  .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]:not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item[data-active=true]:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([aria-current=page])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([data-active=true])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[aria-current=page]::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[data-active=true]::after {
-    block-size: var(--db-border-width-xs);
-    inline-size: 100%;
-  }
+.db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-menu:empty {
+  display: none;
+}
+.db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-menu .db-navigation-item-group-back-button {
+  display: none;
 }
-@media screen and (min-width: 64em) and (forced-colors: active) {
-  .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]:not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item[data-active=true]:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([aria-current=page])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([data-active=true])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[aria-current=page]::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[data-active=true]::after {
-    border: calc(var(--db-border-width-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
+.db-navigation[data-variant=tree] .db-navigation-item-group [data-force-mobile=true].db-navigation-item-group-menu {
+  --db-navigation-item-group-menu-mobile: 1;
+}
+@media screen and (max-width: 63.9375em) {
+  .db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-menu {
+    --db-navigation-item-group-menu-mobile: 1;
   }
 }
 
-.db-navigation {
-  -webkit-tap-highlight-color: transparent; /* for removing the highlight */
-  inline-size: 100%;
+.db-navigation:not([data-variant]) .db-navigation-item, .db-navigation[data-variant=popover] .db-navigation-item {
+  /* a {
+  	block-size: variables.$db-sizing-md;
+  } */
+}
+.db-navigation:not([data-variant]) .db-navigation-item[data-icon]:not([data-show-icon=false])::before, .db-navigation[data-variant=popover] .db-navigation-item[data-icon]:not([data-show-icon=false])::before {
+  position: absolute;
+  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:not([data-variant]) .db-navigation-item[data-icon]:not([data-show-icon=false]) a, .db-navigation[data-variant=popover] .db-navigation-item[data-icon]:not([data-show-icon=false]) a,
+.db-navigation:not([data-variant]) .db-navigation-item[data-icon]:not([data-show-icon=false]) button,
+.db-navigation[data-variant=popover] .db-navigation-item[data-icon]:not([data-show-icon=false]) button,
+.db-navigation:not([data-variant]) .db-navigation-item[data-icon]:not([data-show-icon=false]) label,
+.db-navigation[data-variant=popover] .db-navigation-item[data-icon]:not([data-show-icon=false]) label {
+  /* 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)));
+}
+.db-navigation:not([data-variant]) .db-navigation-item-group, .db-navigation[data-variant=popover] .db-navigation-item-group {
+  /* stylelint-disable-next-line media-query-no-invalid */
+  /* stylelint-disable-next-line at-rule-empty-line-before */
   /* stylelint-disable-next-line media-query-no-invalid */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
-@media screen and (min-width: 64em) {
-  .db-navigation:not([data-force-mobile]), .db-navigation[data-force-mobile=false] {
-    -webkit-tap-highlight-color: inherit;
-    inline-size: auto;
+.db-navigation:not([data-variant]) .db-navigation-item-group[data-icon]:not([data-show-icon=false])::before, .db-navigation[data-variant=popover] .db-navigation-item-group[data-icon]:not([data-show-icon=false])::before {
+  position: absolute;
+  inset-block-start: var(--db-icon-passing-inset-block-start, var(--db-spacing-fixed-xs));
+  inset-inline-start: var(--db-icon-passing-inset-inline-start, var(--db-spacing-fixed-sm));
+  pointer-events: none;
+  z-index: 1;
+}
+.db-navigation:not([data-variant]) .db-navigation-item-group[data-icon]:not([data-show-icon=false]) a, .db-navigation[data-variant=popover] .db-navigation-item-group[data-icon]:not([data-show-icon=false]) a,
+.db-navigation:not([data-variant]) .db-navigation-item-group[data-icon]:not([data-show-icon=false]) button,
+.db-navigation[data-variant=popover] .db-navigation-item-group[data-icon]:not([data-show-icon=false]) button,
+.db-navigation:not([data-variant]) .db-navigation-item-group[data-icon]:not([data-show-icon=false]) label,
+.db-navigation[data-variant=popover] .db-navigation-item-group[data-icon]:not([data-show-icon=false]) label {
+  /* 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)));
+}
+@media screen and (width <= 48em) {
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true] ~ .db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true] ~ .db-navigation-item-group-menu {
+    visibility: visible;
+  }
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true] ~ .db-navigation-item-group-menu .db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true] ~ .db-navigation-item-group-menu .db-navigation-item-group-menu {
+    inset-block: 0;
   }
 }
-.db-navigation > menu {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  gap: var(--db-spacing-fixed-sm);
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+@media screen and (width <= 48em) and (prefers-reduced-motion: no-preference) {
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true] ~ .db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true] ~ .db-navigation-item-group-menu {
+    transition: visibility 0ms linear 0ms;
+    animation: show-right-to-left var(--db-transition-straight-show);
+  }
 }
-@media screen and (min-width: 64em) {
-  .db-navigation > menu:not([data-force-mobile]), .db-navigation > menu[data-force-mobile=false] {
-    flex-direction: row;
+@media screen and (width <= 48em) and (prefers-reduced-motion: no-preference) {
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button:not(.db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true]):not(.db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true]) ~ .db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button:not(.db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true]):not(.db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true]) ~ .db-navigation-item-group-menu {
+    transition: visibility 0ms linear 410ms;
+    animation: hide-right-to-left var(--db-transition-straight-hide);
   }
 }
-.db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button),
-.db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button {
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
+@media screen and (48em < width) {
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button:is(:hover, :focus-visible):not(:has(~ .db-navigation-item-group-menu[data-force-close=true])) ~ .db-navigation-item-group-menu, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button:is(:hover, :focus-visible):not(:has(~ .db-navigation-item-group-menu[data-force-close=true])) ~ .db-navigation-item-group-menu {
+    visibility: visible;
+  }
 }
-@media screen and (min-width: 64em) {
-  .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";
+@media screen and (48em < width) and (prefers-reduced-motion: no-preference) {
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button::after, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button::after {
+    transition: transform var(--db-transition-straight-emotional);
+  }
+}
+.db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-trailing=false])::after, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-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: ""/"") {
+  .db-navigation:not([data-variant]) .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-trailing=false])::after, .db-navigation[data-variant=popover] .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
   }
 }
-@media screen and (min-width: 64em) and (prefers-reduced-motion: no-preference) {
-  .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-navigation[data-variant=tree] .db-navigation-item:not([data-icon])::before {
+  content: none;
+}
+.db-navigation[data-variant=tree] .db-navigation-item:not([data-icon]) a:not([data-show-icon-leading=false])::before {
+  --db-icon: "intermediary_stop";
+  margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
+}
+.db-navigation[data-variant=tree] .db-navigation-item[data-icon][data-icon]:not([data-show-icon=false])::before {
+  position: absolute;
+  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[data-variant=tree] .db-navigation-item[data-icon][data-icon]:not([data-show-icon=false]) a,
+.db-navigation[data-variant=tree] .db-navigation-item[data-icon][data-icon]:not([data-show-icon=false]) button,
+.db-navigation[data-variant=tree] .db-navigation-item[data-icon][data-icon]:not([data-show-icon=false]) label {
+  /* 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)));
+}
+.db-navigation[data-variant=tree] a,
+.db-navigation[data-variant=tree] button {
+  justify-content: start;
+}
+.db-navigation[data-variant=tree] .db-navigation-item-group {
+  display: flex;
+  flex-direction: column;
+}
+.db-navigation[data-variant=tree] .db-navigation-item-group::before {
+  content: none;
+}
+.db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-expand-button:not([data-show-icon-leading=false])::before {
+  --db-icon: "chevron_right";
+  margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
+}
+.db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true]::before {
+  transform: rotate(90deg);
+  pointer-events: none;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true]::before {
     transition: transform var(--db-transition-straight-emotional);
   }
 }
-@media screen and (min-width: 64em) {
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile]):is(:hover, :focus-visible)::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile]):has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]:is(:hover, :focus-visible)::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]:has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after,
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile]):is(:hover, :focus-visible)::after,
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile]):has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after,
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]:is(:hover, :focus-visible)::after,
-  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]:has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after {
-    transform: rotate(-180deg);
-  }
-}
-.db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button),
-.db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button {
-  /* stylelint-disable-next-line media-query-no-invalid */
+.db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-expand-button[aria-expanded=true] ~ .db-navigation-item-group-menu {
+  visibility: visible;
+  block-size: auto;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  block-size: calc-size(auto, size);
+}
+[data-show-tree-line=true].db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-menu {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
+  position: var(--db-tooltip-parent-position, relative);
+}
+[data-show-tree-line=true].db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-menu[data-emphasis=strong] {
+  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
+}
+[data-show-tree-line=true].db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-menu::before {
+  content: "";
+  background-color: var(--db-divider-bg-color);
+  position: absolute;
+  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 */
 }
-@media screen and (min-width: 64em) {
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
-  .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;
-  }
-  .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,
-  :focus-visible,
-  :focus-within))::after, .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button)[data-force-mobile=false]:is(:hover, :focus-visible)::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button)[data-force-mobile=false] :has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button:not([data-force-mobile]):is(:hover, :focus-visible)::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button:not([data-force-mobile]) :has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button[data-force-mobile=false]:is(:hover, :focus-visible)::after,
-  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button[data-force-mobile=false] :has(~ .db-sub-navigation:is(:hover,
-  :focus-visible,
-  :focus-within))::after {
-    transform: none;
-  }
-}
-.db-navigation > menu .db-navigation-item .db-navigation-item::after {
-  display: none;
+@media (forced-colors: active) {
+  [data-show-tree-line=true].db-navigation[data-variant=tree] .db-navigation-item-group .db-navigation-item-group-menu::before {
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
 }
-.db-navigation[data-force-close=true] > menu menu {
+
+.db-navigation {
+  -webkit-tap-highlight-color: transparent; /* for removing the highlight */
+  inline-size: 100%;
+  position: relative;
   /* stylelint-disable-next-line media-query-no-invalid */
   /* stylelint-disable-next-line at-rule-empty-line-before */
 }
 @media screen and (min-width: 64em) {
-  .db-navigation[data-force-close=true] > menu menu:not([data-force-mobile]), .db-navigation[data-force-close=true] > menu menu[data-force-mobile=false] {
-    display: none;
+  .db-navigation:not([data-force-mobile]), .db-navigation[data-force-mobile=false] {
+    -webkit-tap-highlight-color: inherit;
+    inline-size: auto;
   }
 }
+.db-navigation > menu {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  gap: var(--db-spacing-fixed-sm);
+}