@db-ux/core-components 4.12.0 → 4.13.0-shell-f221975

package/build/components/control-panel-navigation/control-panel-navigation.css

@@ -0,0 +1,390 @@
+.db-visually-hidden,
+[data-visually-hidden=true] {
+  position: absolute !important;
+  inset-block-start: 0 !important;
+  inline-size: 1px !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;
+}
+
+/* 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-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button-end-slot-container:not([data-show-icon-trailing=false])::after, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button-end-slot-container:not([data-show-icon-trailing=false])::after, .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item:not([data-icon]) a:not([data-show-icon-leading=false])::before, .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-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", "icon-font-fallback")) !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;
+  overflow: clip;
+  vertical-align: var(--db-icon-vertical-align, middle);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  block-size: var(--db-icon-font-size, 1.5rem);
+  /* stylelint-disable-next-line db-ux/use-sizing */
+  inline-size: var(--db-icon-font-size, 1.5rem);
+  aspect-ratio: 1;
+  flex-shrink: 0;
+  content: var(--db-icon, attr(data-icon));
+}
+@supports (content: ""/"") {
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button-end-slot-container:not([data-show-icon-trailing=false])::after, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button-end-slot-container:not([data-show-icon-trailing=false])::after, .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item:not([data-icon]) a:not([data-show-icon-leading=false])::before, .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button:not([data-show-icon-leading=false])::before {
+    content: var(--db-icon, attr(data-icon))/"";
+  }
+}
+@media aural {
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button-end-slot-container:not([data-show-icon-trailing=false])::after, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button-end-slot-container:not([data-show-icon-trailing=false])::after, .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item:not([data-icon]) a:not([data-show-icon-leading=false])::before, .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button:not([data-show-icon-leading=false])::before {
+    content: none;
+  }
+}
+@media speech {
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button-end-slot-container:not([data-show-icon-trailing=false])::after, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button-end-slot-container:not([data-show-icon-trailing=false])::after, .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item:not([data-icon]) a:not([data-show-icon-leading=false])::before, .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button:not([data-show-icon-leading=false])::before {
+    content: none;
+  }
+}
+
+@keyframes popover-animation {
+  0% {
+    pointer-events: none;
+    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% {
+    pointer-events: auto;
+    opacity: 1;
+    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
+  }
+}
+@keyframes rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+/* Sub components for shell */
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu {
+  --db-popover-distance: var(--db-spacing-fixed-xs);
+  --db-control-panel-navigation-item-group-menu-popover: 1;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  z-index: 70;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+  visibility: hidden;
+  max-block-size: 100vh;
+}
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu:empty, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu:empty {
+  display: none;
+}
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item,
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group,
+.db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group {
+  inline-size: 100%;
+}
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item::after, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item::after,
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group::after,
+.db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group::after {
+  margin-inline-start: auto;
+}
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu {
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (width <= 48em) {
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu {
+    --db-control-panel-navigation-item-group-menu-mobile: 1;
+    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-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-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (48em < width) {
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu {
+    inset-inline-start: 0;
+    border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
+    border-radius: var(--db-border-radius-sm);
+    box-shadow: var(--db-elevation-md);
+    padding: var(--db-spacing-fixed-sm);
+    block-size: fit-content;
+    position: absolute;
+    inline-size: var(--db-container-xs);
+    gap: var(--db-spacing-fixed-xs);
+    transition: visibility 1ms linear;
+  }
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-back-button, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-back-button {
+    display: none;
+  }
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu:is(:hover, :focus-within):not([data-force-close=true]), .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu:is(:hover, :focus-within):not([data-force-close=true]) {
+    visibility: visible;
+  }
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group [data-force-close=true].db-control-panel-navigation-item-group-menu, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group [data-force-close=true].db-control-panel-navigation-item-group-menu {
+    pointer-events: none;
+  }
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-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-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu::before, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    block-size: 100%;
+    inline-size: var(--db-control-panel-navigation-item-inline-size, 100%);
+    background-color: transparent;
+    transform: translateX(-100%);
+    clip-path: var(--db-control-panel-navigation-item-clip-path, polygon(10% calc(1lh + var(--db-spacing-fixed-2xs)), 100% 0, 100% 100%));
+  }
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu::after, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-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-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu[data-outside-vy=bottom], .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu[data-outside-vy=bottom] {
+    transform: translateY(calc(-200% + var(--db-spacing-fixed-xs)));
+  }
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu[data-outside-vx=right], .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu[data-outside-vx=right] {
+    transform: translateX(calc(-200% + var(--db-spacing-fixed-xs)));
+  }
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu[data-outside-vx=right][data-outside-vy=bottom], .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-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-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu[data-outside-vx=right]::before, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu[data-outside-vx=right]::before {
+    inset-block: auto 0;
+    transform: translateX(100%) scaleX(-1);
+  }
+}
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  block-size: 0;
+  visibility: hidden;
+  overflow: hidden;
+  gap: var(--db-spacing-fixed-xs);
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline-start: 1lh;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu {
+    transition: block-size var(--db-transition-straight-emotional);
+  }
+}
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu:empty {
+  display: none;
+}
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-back-button {
+  display: none;
+}
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group [data-force-mobile=true].db-control-panel-navigation-item-group-menu {
+  --db-control-panel-navigation-item-group-menu-mobile: 1;
+}
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu {
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (max-width: 63.9375em) {
+  .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu {
+    --db-control-panel-navigation-item-group-menu-mobile: 1;
+  }
+}
+
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item[data-icon]:not([data-show-icon=false])::before, .db-control-panel-navigation[data-variant=popover] .db-control-panel-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-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) > :is(label, button, a), .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) > :is(label, button, a), .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item[data-icon]:not([data-show-icon=false]) > :is(label, button, a), .db-control-panel-navigation[data-variant=popover] .db-control-panel-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)));
+}
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group[data-icon]:not([data-show-icon=false])::before, .db-control-panel-navigation[data-variant=popover] .db-control-panel-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-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group[data-icon-leading]:not([data-show-icon-leading=false]) > :is(label, button, a), .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group[data-icon-leading]:not([data-show-icon-leading=false]) > :is(label, button, a), .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group[data-icon]:not([data-show-icon=false]) > :is(label, button, a), .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group[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)));
+}
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group {
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (width <= 48em) {
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button {
+    /* Remove the highlight here because we have an overlay for sub-navigations */
+    -webkit-tap-highlight-color: transparent;
+  }
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button[aria-expanded=true] ~ .db-control-panel-navigation-item-group-menu, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button[aria-expanded=true] ~ .db-control-panel-navigation-item-group-menu {
+    visibility: visible;
+  }
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button[aria-expanded=true] ~ .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button[aria-expanded=true] ~ .db-control-panel-navigation-item-group-menu .db-control-panel-navigation-item-group-menu {
+    inset-block: 0;
+  }
+}
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (48em < width) {
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button:is(:hover, :focus-visible):not(:has(~ .db-control-panel-navigation-item-group-menu[data-force-close=true])) ~ .db-control-panel-navigation-item-group-menu, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button:is(:hover, :focus-visible):not(:has(~ .db-control-panel-navigation-item-group-menu[data-force-close=true])) ~ .db-control-panel-navigation-item-group-menu {
+    visibility: visible;
+  }
+}
+@media screen and (48em < width) and (prefers-reduced-motion: no-preference) {
+  .db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button::after, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button::after {
+    transition: transform var(--db-transition-straight-emotional);
+  }
+}
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button-end-slot-container:not([data-show-icon-trailing=false])::after, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button-end-slot-container: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-control-panel-navigation:not([data-variant]) .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button-end-slot-container:not([data-show-icon-trailing=false])::after, .db-control-panel-navigation[data-variant=popover] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button-end-slot-container:not([data-show-icon-trailing=false])::after {
+    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
+  }
+}
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item:not([data-icon])::before {
+  content: none;
+}
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item:not([data-icon]) a:not([data-show-icon-leading=false])::before {
+  --db-icon: "circle_small";
+  margin-inline-end: var(--db-icon-margin-end, var(--db-spacing-fixed-xs));
+}
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item[data-icon][data-icon-leading]:not([data-show-icon-leading=false])::before, .db-control-panel-navigation[data-variant=tree] .db-control-panel-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-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item[data-icon][data-icon-leading]:not([data-show-icon-leading=false]) > :is(label, button, a), .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item[data-icon][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)));
+}
+.db-control-panel-navigation[data-variant=tree] a,
+.db-control-panel-navigation[data-variant=tree] button {
+  justify-content: flex-start;
+}
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group {
+  display: flex;
+  flex-direction: column;
+}
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group::before {
+  content: none;
+}
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-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-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button[aria-expanded=true]::before {
+  transform: rotate(90deg);
+  pointer-events: none;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button[aria-expanded=true]::before {
+    transition: transform var(--db-transition-straight-emotional);
+  }
+}
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button[aria-expanded=true] ~ .db-control-panel-navigation-item-group-menu {
+  visibility: visible;
+  block-size: auto;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown,db-ux/use-sizing */
+  block-size: calc-size(auto, size);
+}
+.db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-expand-button[aria-expanded=true] + .db-control-panel-navigation-item-group-menu {
+  padding-block: var(--db-spacing-fixed-xs);
+}
+[data-show-tree-line=true].db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-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-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-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-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu::before {
+  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 */
+}
+@media (forced-colors: active) {
+  [data-show-tree-line=true].db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu::before {
+    /* stylelint-disable-next-line db-ux/use-border-color */
+    border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
+  }
+}
+[data-show-tree-line=true].db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu::before {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* jscpd:ignore-end */
+}
+[data-show-tree-line=true].db-control-panel-navigation[data-variant=tree] .db-control-panel-navigation-item-group .db-control-panel-navigation-item-group-menu::before {
+  inset-inline-start: 1lh;
+  inset-block: var(--db-spacing-fixed-xs);
+}
+
+.db-control-panel-navigation {
+  inline-size: 100%;
+  position: relative;
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (min-width: 64em) {
+  .db-control-panel-navigation:not([data-force-mobile]), .db-control-panel-navigation[data-force-mobile=false] {
+    inline-size: auto;
+  }
+}
+.db-control-panel-navigation {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-control-panel-navigation > menu {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  gap: var(--db-spacing-fixed-xs);
+}
+.db-control-panel-navigation .overflow-scroll-left-button,
+.db-control-panel-navigation .overflow-scroll-right-button {
+  display: none;
+}

package/build/components/control-panel-navigation/control-panel-navigation.scss

@@ -0,0 +1,186 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/animation";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "../../styles/internal/form-components";
+@use "../../styles/internal/icon-passing";
+@use "../control-panel-navigation-item-group/control-panel-navigation-item-group-menu-popover";
+@use "../control-panel-navigation-item-group/control-panel-navigation-item-group-menu-tree";
+
+%popover-navigation {
+	.db-control-panel-navigation-item {
+		@include icon-passing.icon-passing;
+	}
+
+	.db-control-panel-navigation-item-group {
+		@include icon-passing.icon-passing(
+			variables.$db-spacing-fixed-sm,
+			variables.$db-spacing-fixed-xs
+		);
+
+		// MOBILE Sliding
+		@include screen-sizes.screen-min-max(
+			(
+				max: "sm"
+			)
+		) {
+			.db-control-panel-navigation-item-group-expand-button {
+				/* Remove the highlight here because we have an overlay for sub-navigations */
+				-webkit-tap-highlight-color: transparent;
+
+				// show/hide sub-navigation by click
+				&[aria-expanded="true"] {
+					~ .db-control-panel-navigation-item-group-menu {
+						visibility: visible;
+
+						.db-control-panel-navigation-item-group-menu {
+							inset-block: 0;
+						}
+					}
+				}
+			}
+		}
+
+		// DESKTOP: show sub-navigation on hover
+		@include screen-sizes.screen-min-max(
+			(
+				min: "sm"
+			)
+		) {
+			.db-control-panel-navigation-item-group-expand-button {
+				&::after {
+					@media screen and (prefers-reduced-motion: no-preference) {
+						transition: form-components.$dropdown-icon-transition;
+					}
+				}
+
+				&:is(:hover, :focus-visible):not(
+						:has(
+							~ .db-control-panel-navigation-item-group-menu[data-force-close="true"]
+						)
+					) {
+					~ .db-control-panel-navigation-item-group-menu {
+						visibility: visible;
+					}
+				}
+			}
+		}
+
+		.db-control-panel-navigation-item-group-expand-button-end-slot-container {
+			// default icon for navigation
+			@include icons.set-icon("chevron_right", "after");
+		}
+
+		.db-control-panel-navigation-item-group-menu {
+			@extend %db-control-panel-navigation-item-group-menu-popover;
+		}
+	}
+}
+
+%tree-navigation {
+	.db-control-panel-navigation-item {
+		&:not([data-icon]) {
+			&::before {
+				content: none;
+			}
+
+			a {
+				@include icons.set-icon("circle_small");
+			}
+		}
+
+		&[data-icon] {
+			@include icon-passing.icon-passing;
+		}
+	}
+
+	a,
+	button {
+		justify-content: flex-start;
+	}
+
+	.db-control-panel-navigation-item-group {
+		display: flex;
+		flex-direction: column;
+
+		&::before {
+			content: none;
+		}
+
+		.db-control-panel-navigation-item-group-expand-button {
+			@include icons.set-icon("chevron_right");
+
+			&[aria-expanded="true"] {
+				&::before {
+					transform: rotate(90deg);
+					pointer-events: none;
+
+					@media screen and (prefers-reduced-motion: no-preference) {
+						transition: form-components.$dropdown-icon-transition;
+					}
+				}
+
+				~ .db-control-panel-navigation-item-group-menu {
+					visibility: visible;
+					block-size: auto;
+					/* stylelint-disable-next-line declaration-property-value-no-unknown,db-ux/use-sizing */
+					block-size: calc-size(auto, size);
+				}
+
+				+ .db-control-panel-navigation-item-group-menu {
+					padding-block: variables.$db-spacing-fixed-xs;
+				}
+			}
+		}
+
+		.db-control-panel-navigation-item-group-menu {
+			@extend %db-control-panel-navigation-item-group-menu-tree;
+		}
+	}
+
+	&[data-show-tree-line="true"] {
+		.db-control-panel-navigation-item-group {
+			.db-control-panel-navigation-item-group-menu {
+				@include helpers.divider("left");
+
+				&::before {
+					inset-inline-start: 1lh;
+					inset-block: variables.$db-spacing-fixed-xs;
+				}
+			}
+		}
+	}
+}
+
+.db-control-panel-navigation {
+	inline-size: 100%;
+	position: relative;
+
+	@include screen-sizes.screen("md") {
+		inline-size: auto;
+	}
+
+	> menu {
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+		margin: 0;
+		gap: variables.$db-spacing-fixed-xs;
+	}
+
+	&:not([data-variant]),
+	&[data-variant="popover"] {
+		@extend %popover-navigation;
+	}
+
+	&[data-variant="tree"] {
+		@extend %tree-navigation;
+	}
+
+	.overflow-scroll-left-button,
+	.overflow-scroll-right-button {
+		// We hide the overflow buttons, only showing them in horizontal desktop
+		display: none;
+	}
+}

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

@@ -0,0 +1,87 @@
+/* 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-control-panel-navigation-item, .db-control-panel-navigation-item a {
+  font: var(--db-type-body-md);
+  /* Those variables are only for components to calculate heights and change icons */
+  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+}
+
+/* Sub components for shell */
+.db-control-panel-navigation-item a {
+  border: var(--db-border-width-3xs) solid transparent;
+}
+
+.db-control-panel-navigation-item a {
+  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
+  cursor: pointer;
+  inline-size: 100%;
+  display: inline-flex;
+  border-radius: var(--db-border-radius-sm);
+  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-sm);
+  text-align: start;
+  align-items: center;
+  min-block-size: var(--db-sizing-md);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-control-panel-navigation-item a:hover {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
+}
+.db-control-panel-navigation-item a:active {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
+}
+
+.db-control-panel-navigation-item {
+  position: relative;
+  display: flex;
+  block-size: fit-content;
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (width <= 48em) {
+  .db-control-panel-navigation-item {
+    inline-size: 100%;
+  }
+}
+.db-control-panel-navigation-item {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+  /* stylelint-disable-next-line media-query-no-invalid */
+}
+@media (48em < width) {
+  .db-control-panel-navigation-item {
+    inline-size: fit-content;
+  }
+}
+.db-control-panel-navigation-item {
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-control-panel-navigation-item:has([aria-current=page]) > :is(a, button), .db-control-panel-navigation-item:has([data-active=true]) > :is(a, button), [aria-current=page].db-control-panel-navigation-item > :is(a, button), [data-active=true].db-control-panel-navigation-item > :is(a, button) {
+  font-weight: 700;
+}
+[aria-disabled=true].db-control-panel-navigation-item {
+  opacity: var(--db-opacity-md);
+  pointer-events: none;
+}
+
+.db-control-panel-navigation-item a {
+  text-decoration: none;
+}
+.db-control-panel-navigation-item a:focus-visible {
+  z-index: 1;
+}
+.db-control-panel-navigation-item .db-tooltip {
+  --db-show-popover-visibility: hidden;
+}
+.db-control-panel-navigation-item .db-control-panel-navigation-item-end-slot-container {
+  position: absolute;
+  display: flex;
+  inset-block: 0;
+  inset-inline-end: 0;
+  align-items: center;
+  pointer-events: none;
+}
+.db-control-panel-navigation-item .db-control-panel-navigation-item-end-slot-container:empty {
+  display: none;
+}