@db-ux/core-components 4.14.0-shell-52d18db → 5.0.0

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

@@ -1,402 +0,0 @@
-.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 {
-  /* jscpd:ignore-start */
-  /* 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 */
-  /* jscpd:ignore-end */
-  /* 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-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),
-.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-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),
-.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-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),
-.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

@@ -1,186 +0,0 @@
-@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;
-	}
-}