@siemens/ix 1.6.2 → 2.0.0-beta.0

package/dist/cjs/ix-menu_9.cjs.entry.js

@@ -2,22 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c978628a.js');
-const context = require('./context-a0900b95.js');
+const index = require('./index-e56a1d39.js');
+const anime_es = require('./anime.es-8822f296.js');
+const menuService = require('./menu-service-d1b87142.js');
 const rwd_util = require('./rwd.util-9480f0b5.js');
-const service = require('./service-18dc5907.js');
+const context = require('./context-2ce9a350.js');
+const service = require('./service-0e27b06b.js');
 const themeSwitcher = require('./theme-switcher-bdbd0d30.js');
 const mutationObserver = require('./mutation-observer-eaaa5399.js');
 require('./typed-event-f0f051da.js');
 
-const menuCss = "ix-menu{display:flex;flex-direction:row;position:absolute;height:100%;min-height:22.75rem;z-index:var(--theme-z-index-sticky);width:auto}ix-menu .menu{display:flex;flex-direction:column;position:relative;width:3.25rem;height:100%;-webkit-padding-after:1rem;padding-block-end:1rem;overflow:hidden;background-color:var(--theme-nav--background);transition:width var(--animate-duration)}ix-menu .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}ix-menu .menu .burger-menu{margin:0.75rem 0 1rem 0.35rem}ix-menu .menu-overlay{display:block;position:absolute;width:calc(100vw - 3.25rem);height:100%;left:3.25rem;z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--theme-sidebar-overlay-blur);transition:all 300ms ease-out}ix-menu .menu-overlay-invisible{display:none}ix-menu .menu.expanded{width:16rem}ix-menu .menu-overlay.expanded{width:calc(100vw - 16rem);left:16rem}ix-menu #avatar-tab-placeholder{max-height:3rem}ix-menu .avatar{margin-bottom:2rem}ix-menu #cui-imprint .cui-imprint-product-name{margin-bottom:1rem}ix-menu #cui-imprint .cui-imprint-product-description{margin-bottom:2rem}ix-menu #cui-imprint .cui-imprint-link-container{display:flex;align-items:center}ix-menu .bottom-tab-divider{margin-top:auto}ix-menu.mode-mobile .menu:not(.expanded){width:0}ix-menu.mode-mobile .menu{padding-top:2rem}ix-menu.mode-mobile .menu .burger-menu{display:none}ix-menu.mode-mobile .menu-overlay{left:0px;width:100vw}a[href]:has(>ix-menu-item){text-decoration:none}";
+const menuCss = "/*!\n* animate.css - https://animate.style/\n* Version - 4.1.1\n* Licensed under the MIT license - http://opensource.org/licenses/MIT\n*\n* Copyright (c) 2020 Animate.css\n*/:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{animation-duration:1s;animation-duration:var(--animate-duration);animation-fill-mode:both}.animate__animated.animate__infinite{animation-iteration-count:infinite}.animate__animated.animate__repeat-1{animation-iteration-count:1;animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{animation-iteration-count:2;animation-iteration-count:calc(var(--animate-repeat) * 2)}.animate__animated.animate__repeat-3{animation-iteration-count:3;animation-iteration-count:calc(var(--animate-repeat) * 3)}.animate__animated.animate__delay-1s{animation-delay:1s;animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{animation-delay:2s;animation-delay:calc(var(--animate-delay) * 2)}.animate__animated.animate__delay-3s{animation-delay:3s;animation-delay:calc(var(--animate-delay) * 3)}.animate__animated.animate__delay-4s{animation-delay:4s;animation-delay:calc(var(--animate-delay) * 4)}.animate__animated.animate__delay-5s{animation-delay:5s;animation-delay:calc(var(--animate-delay) * 5)}.animate__animated.animate__faster{animation-duration:0.5s;animation-duration:calc(var(--animate-duration) / 2)}.animate__animated.animate__fast{animation-duration:0.8s;animation-duration:calc(var(--animate-duration) * 0.8)}.animate__animated.animate__slow{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2)}.animate__animated.animate__slower{animation-duration:3s;animation-duration:calc(var(--animate-duration) * 3)}@media (prefers-reduced-motion: reduce), print{.animate__animated{animation-duration:1ms !important;transition-duration:1ms !important;animation-iteration-count:1 !important}.animate__animated[class*=Out]{opacity:0}}@keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}.animate__bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scaleX(1)}}.animate__pulse{animation-name:pulse;animation-timing-function:ease-in-out}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25, 0.75, 1)}40%{transform:scale3d(0.75, 1.25, 1)}50%{transform:scale3d(1.15, 0.85, 1)}65%{transform:scale3d(0.95, 1.05, 1)}75%{transform:scale3d(1.05, 0.95, 1)}to{transform:scaleX(1)}}.animate__rubberBand{animation-name:rubberBand}@keyframes shakeX{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{transform:translate3d(10px, 0, 0)}}.animate__shakeX{animation-name:shakeX}@keyframes shakeY{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(0, -10px, 0)}20%,40%,60%,80%{transform:translate3d(0, 10px, 0)}}.animate__shakeY{animation-name:shakeY}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.animate__headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.animate__swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)}to{transform:scaleX(1)}}.animate__tada{animation-name:tada}@keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate3d(-25%, 0, 0) rotate(-5deg)}30%{transform:translate3d(20%, 0, 0) rotate(3deg)}45%{transform:translate3d(-15%, 0, 0) rotate(-3deg)}60%{transform:translate3d(10%, 0, 0) rotate(2deg)}75%{transform:translate3d(-5%, 0, 0) rotate(-1deg)}to{transform:translateZ(0)}}.animate__wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}.animate__jello{animation-name:jello;transform-origin:center}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.animate__heartBeat{animation-name:heartBeat;animation-duration:1.3s;animation-duration:calc(var(--animate-duration) * 1.3);animation-timing-function:ease-in-out}@keyframes backInDown{0%{transform:translateY(-1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInDown{animation-name:backInDown}@keyframes backInLeft{0%{transform:translateX(-2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInLeft{animation-name:backInLeft}@keyframes backInRight{0%{transform:translateX(2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInRight{animation-name:backInRight}@keyframes backInUp{0%{transform:translateY(1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInUp{animation-name:backInUp}@keyframes backOutDown{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(700px) scale(0.7);opacity:0.7}}.animate__backOutDown{animation-name:backOutDown}@keyframes backOutLeft{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(-2000px) scale(0.7);opacity:0.7}}.animate__backOutLeft{animation-name:backOutLeft}@keyframes backOutRight{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(2000px) scale(0.7);opacity:0.7}}.animate__backOutRight{animation-name:backOutRight}@keyframes backOutUp{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(-700px) scale(0.7);opacity:0.7}}.animate__backOutUp{animation-name:backOutUp}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}20%{transform:scale3d(1.1, 1.1, 1.1)}40%{transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03)}80%{transform:scale3d(0.97, 0.97, 0.97)}to{opacity:1;transform:scaleX(1)}}.animate__bounceIn{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, -3000px, 0) scaleY(3)}60%{opacity:1;transform:translate3d(0, 25px, 0) scaleY(0.9)}75%{transform:translate3d(0, -10px, 0) scaleY(0.95)}90%{transform:translate3d(0, 5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(-3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(25px, 0, 0) scaleX(1)}75%{transform:translate3d(-10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(-25px, 0, 0) scaleX(1)}75%{transform:translate3d(10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(-5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, 3000px, 0) scaleY(5)}60%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}75%{transform:translate3d(0, 10px, 0) scaleY(0.95)}90%{transform:translate3d(0, -5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(0.9, 0.9, 0.9)}50%,55%{opacity:1;transform:scale3d(1.1, 1.1, 1.1)}to{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}}.animate__bounceOut{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0, 10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, 2000px, 0) scaleY(3)}}.animate__bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(-2000px, 0, 0) scaleX(2)}}.animate__bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(2000px, 0, 0) scaleX(2)}}.animate__bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0, -10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, 20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, -2000px, 0) scaleY(3)}}.animate__bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0, -2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0, 2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeInTopLeft{0%{opacity:0;transform:translate3d(-100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopLeft{animation-name:fadeInTopLeft}@keyframes fadeInTopRight{0%{opacity:0;transform:translate3d(100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopRight{animation-name:fadeInTopRight}@keyframes fadeInBottomLeft{0%{opacity:0;transform:translate3d(-100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomLeft{animation-name:fadeInBottomLeft}@keyframes fadeInBottomRight{0%{opacity:0;transform:translate3d(100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomRight{animation-name:fadeInBottomRight}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0, 100%, 0)}}.animate__fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, 2000px, 0)}}.animate__fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%, 0, 0)}}.animate__fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px, 0, 0)}}.animate__fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0)}}.animate__fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px, 0, 0)}}.animate__fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0, -100%, 0)}}.animate__fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, -2000px, 0)}}.animate__fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes fadeOutTopLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, -100%, 0)}}.animate__fadeOutTopLeft{animation-name:fadeOutTopLeft}@keyframes fadeOutTopRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, -100%, 0)}}.animate__fadeOutTopRight{animation-name:fadeOutTopRight}@keyframes fadeOutBottomRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, 100%, 0)}}.animate__fadeOutBottomRight{animation-name:fadeOutBottomRight}@keyframes fadeOutBottomLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, 100%, 0)}}.animate__fadeOutBottomLeft{animation-name:fadeOutBottomLeft}@keyframes flip{0%{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}to{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}}.animate__animated.animate__flip{-webkit-backface-visibility:visible;backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.animate__flipInX{-webkit-backface-visibility:visible !important;backface-visibility:visible !important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.animate__flipInY{-webkit-backface-visibility:visible !important;backface-visibility:visible !important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:flipOutX;-webkit-backface-visibility:visible !important;backface-visibility:visible !important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);-webkit-backface-visibility:visible !important;backface-visibility:visible !important;animation-name:flipOutY}@keyframes lightSpeedInRight{0%{transform:translate3d(100%, 0, 0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInRight{animation-name:lightSpeedInRight;animation-timing-function:ease-out}@keyframes lightSpeedInLeft{0%{transform:translate3d(-100%, 0, 0) skewX(30deg);opacity:0}60%{transform:skewX(-20deg);opacity:1}80%{transform:skewX(5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInLeft{animation-name:lightSpeedInLeft;animation-timing-function:ease-out}@keyframes lightSpeedOutRight{0%{opacity:1}to{transform:translate3d(100%, 0, 0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{animation-name:lightSpeedOutRight;animation-timing-function:ease-in}@keyframes lightSpeedOutLeft{0%{opacity:1}to{transform:translate3d(-100%, 0, 0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{animation-name:lightSpeedOutLeft;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform:rotate(-200deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateIn{animation-name:rotateIn;transform-origin:center}@keyframes rotateInDownLeft{0%{transform:rotate(-45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{animation-name:rotateInDownLeft;transform-origin:left bottom}@keyframes rotateInDownRight{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{animation-name:rotateInDownRight;transform-origin:right bottom}@keyframes rotateInUpLeft{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{animation-name:rotateInUpLeft;transform-origin:left bottom}@keyframes rotateInUpRight{0%{transform:rotate(-90deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{animation-name:rotateInUpRight;transform-origin:right bottom}@keyframes rotateOut{0%{opacity:1}to{transform:rotate(200deg);opacity:0}}.animate__rotateOut{animation-name:rotateOut;transform-origin:center}@keyframes rotateOutDownLeft{0%{opacity:1}to{transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{animation-name:rotateOutDownLeft;transform-origin:left bottom}@keyframes rotateOutDownRight{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{animation-name:rotateOutDownRight;transform-origin:right bottom}@keyframes rotateOutUpLeft{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{animation-name:rotateOutUpLeft;transform-origin:left bottom}@keyframes rotateOutUpRight{0%{opacity:1}to{transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{animation-name:rotateOutUpRight;transform-origin:right bottom}@keyframes hinge{0%{animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0, 700px, 0);opacity:0}}.animate__hinge{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2);animation-name:hinge;transform-origin:top left}@keyframes jackInTheBox{0%{opacity:0;transform:scale(0.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.animate__jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%, 0, 0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}.animate__rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0) rotate(120deg)}}.animate__rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}.animate__zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}to{opacity:0}}.animate__zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutDown{animation-name:zoomOutDown;transform-origin:center bottom}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px, 0, 0)}}.animate__zoomOutLeft{animation-name:zoomOutLeft;transform-origin:left center}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(2000px, 0, 0)}}.animate__zoomOutRight{animation-name:zoomOutRight;transform-origin:right center}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutUp{animation-name:zoomOutUp;transform-origin:center bottom}@keyframes slideInDown{0%{transform:translate3d(0, -100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0, 100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, 100%, 0)}}.animate__slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%, 0, 0)}}.animate__slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%, 0, 0)}}.animate__slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, -100%, 0)}}.animate__slideOutUp{animation-name:slideOutUp}:host{display:flex;flex-direction:row;position:absolute;height:100%;min-height:22.75rem;z-index:var(--theme-z-index-sticky);width:auto;bottom:0px}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .tabs{height:100%;position:relative;overflow-y:auto;pointer-events:all;-ms-overflow-style:none;scrollbar-width:none}:host .tabs::-webkit-scrollbar{display:none}:host .tabs-shadow-container{overflow:hidden;display:block;position:relative;margin-bottom:2rem}:host .tabs--shadow{opacity:0;position:absolute;width:100%;height:0.625rem;background:linear-gradient(var(--theme-color-shadow-1), transparent);pointer-events:none;z-index:var(--theme-z-index-sticky);transition:opacity var(--theme-default-time)}:host .tabs--shadow-top{top:0px;background:linear-gradient(var(--theme-color-shadow-1), transparent)}:host .tabs--shadow-bottom{bottom:0px;background:linear-gradient(transparent, var(--theme-color-shadow-1))}:host .tabs--shadow--show{opacity:1}:host .menu{display:flex;flex-direction:column;position:relative;width:3.25rem;height:100%;-webkit-padding-after:1rem;padding-block-end:1rem;overflow:hidden;background-color:var(--theme-nav--background);transition:width var(--animate-duration) ease-in-out}:host .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}:host .menu .burger-menu{margin:0.75rem 0 1rem 0.35rem}:host .menu-overlay{display:none;position:absolute;width:calc(100vw - 3.25rem);height:100%;left:3.25rem;z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--theme-sidebar-overlay-blur);transition:left var(--animate-duration) ease-in-out}:host .menu-overlay.visible{display:block}:host .menu.expanded{width:16rem}:host .menu-overlay.expanded{width:calc(100vw - 16rem);left:16rem}:host .menu-avatar{max-height:3rem}:host .avatar{margin-bottom:2rem}:host #cui-imprint .cui-imprint-product-name{margin-bottom:1rem}:host #cui-imprint .cui-imprint-product-description{margin-bottom:2rem}:host #cui-imprint .cui-imprint-link-container{display:flex;align-items:center}:host .bottom-tab-divider{margin-top:auto}:host(.mode-small) .menu:not(.expanded){width:0}:host(.mode-small) .menu{padding-top:2rem}:host(.mode-small) .menu .burger-menu{display:none}:host(.mode-small) .menu-overlay{left:0px;width:100vw}:host(.mode-large){position:relative}:host(.mode-large) .menu.expanded{box-shadow:none}:host ::slotted(a[href]){all:unset}";
 
 const Menu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.expandChange = index.createEvent(this, "expandChange", 7);
     this.mapExpandChange = index.createEvent(this, "mapExpandChange", 7);
-    this.domObserver = new MutationObserver(this.onDomChange.bind(this));
+    this.isTransitionDisabled = false;
     // FBC IAM workaround #488
     this.isVisible = (elm) => {
       var _a, _b;
@@ -32,55 +34,58 @@ const Menu = class {
     this.applicationName = undefined;
     this.applicationDescription = '';
     this.maxVisibleMenuItems = 9;
+    this.i18nExpandSidebar = 'Expand sidebar';
+    this.expand = false;
+    this.pinned = false;
+    this.forceLayout = undefined;
+    this.supportedModes = ['small', 'medium', 'large'];
     this.i18nLegal = 'About & legal information';
     this.i18nSettings = 'Settings';
     this.i18nToggleTheme = 'Toggle theme';
     this.i18nExpand = ' Expand';
     this.i18nCollapse = 'Collapse';
-    this.i18nMore = 'More…';
-    this.expand = false;
-    this.showMoreItems = false;
-    this.visibleMenuItems = 0;
-    this.countMoreNotifications = 0;
+    this.showPinned = false;
     this.mapExpand = true;
     this.activeTab = undefined;
-    this.isMoreTabEmpty = false;
-    this.mode = 'desktop';
-  }
-  onWindowResize() {
-    this.visibleMenuItems = this.getMaxTabCount();
-  }
-  handleNodeMutation(node) {
-    if (!(node instanceof HTMLElement)) {
+    this.mode = 'large';
+    this.itemsScrollShadowTop = false;
+    this.itemsScrollShadowBottom = false;
+  }
+  pinnedChange(newPinned) {
+    this.setPinned(this.pinned);
+    if (newPinned) {
+      service.screenMode.disableModeDetection();
+      service.screenMode.setMode('large');
       return;
     }
-    if (node.matches('.tab')) {
-      this.onWindowResize();
-    }
-    if (node.matches('ix-menu-about') && this.menu.contains(node)) {
-      this.appendAbout();
+    service.screenMode.enableModeDetection();
+  }
+  forceLayoutChange(newMode) {
+    if (this.pinned) {
+      console.warn('You cannot force a layout while pinned property is set!');
+      return;
     }
-    if (node.matches('ix-menu-settings') && this.menu.contains(node)) {
-      this.appendSettings();
+    if (!newMode) {
+      service.screenMode.enableModeDetection();
+      return;
     }
+    service.screenMode.disableModeDetection();
+    service.screenMode.setMode(newMode);
   }
-  onDomChange(mutations) {
-    mutations.forEach((mutationRecord) => {
-      mutationRecord.addedNodes.forEach(this.handleNodeMutation.bind(this));
-      mutationRecord.removedNodes.forEach(this.handleNodeMutation.bind(this));
-    });
+  supportedModesChange(modes) {
+    service.screenMode.setSupportedMods(modes);
   }
   get popoverArea() {
-    return this.hostElement.querySelector('#popover-area');
+    return this.hostElement.shadowRoot.querySelector('#popover-area');
   }
-  get overlayContainer() {
-    return this.hostElement.querySelector('.menu-overlay');
+  get menu() {
+    return this.hostElement.shadowRoot.querySelector('.menu');
   }
-  get invisibleContainer() {
-    return this.hostElement.querySelector('.menu-overlay-invisible');
+  get menuItemsContainer() {
+    return this.menu.querySelector('.tabs');
   }
-  get menu() {
-    return this.hostElement.querySelector('.menu');
+  get overlayContainer() {
+    return this.hostElement.shadowRoot.querySelector('.menu-overlay');
   }
   get menuItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot="bottom"])')).filter(this.isVisible);
@@ -92,29 +97,29 @@ const Menu = class {
     return this.hostElement.querySelector('ix-menu-item.home-tab');
   }
   get moreItemsDropdown() {
-    return this.hostElement.querySelector('.internal-tab ix-dropdown');
+    return this.hostElement.shadowRoot.querySelector('.internal-tab ix-dropdown');
   }
   get isMoreItemsDropdownEmpty() {
-    return (this.hostElement.querySelectorAll('.internal-tab ix-dropdown .appended')
-      .length === 0);
+    return (this.hostElement.shadowRoot.querySelectorAll('.internal-tab ix-dropdown .appended').length === 0);
   }
   get moreItemsDropdownItems() {
-    return this.hostElement.querySelectorAll('.internal-tab ix-dropdown ix-menu-item');
+    return this.hostElement.shadowRoot.querySelectorAll('.internal-tab ix-dropdown ix-menu-item');
   }
   get activeMoreTabContainer() {
-    return this.hostElement.querySelector('.active-more-tab');
+    return this.hostElement.shadowRoot.querySelector('.active-more-tab');
   }
   get activeMoreTab() {
-    return this.hostElement.querySelector('.active-more-tab ix-menu-item');
+    return this.hostElement.shadowRoot.querySelector('.active-more-tab ix-menu-item');
   }
   get aboutPopoverContainer() {
     return this.hostElement.querySelector('.about-news');
   }
-  get aboutPopover() {
-    return document.querySelector('ix-menu-about-news');
+  get aboutsNewsPopover() {
+    var _a;
+    return ((_a = document.querySelector('ix-menu-about-news')) !== null && _a !== void 0 ? _a : this.hostElement.querySelector('ix-menu-about-news'));
   }
   get aboutTab() {
-    return this.hostElement.querySelector('#aboutAndLegal');
+    return this.hostElement.shadowRoot.querySelector('#aboutAndLegal');
   }
   get about() {
     return this.hostElement.querySelector('ix-menu-about');
@@ -123,108 +128,64 @@ const Menu = class {
     return this.hostElement.querySelector('ix-menu-settings');
   }
   get isSettingsEmpty() {
-    return (Array.from(this.hostElement.querySelectorAll('ix-menu-settings-item'))
-      .length === 0);
-  }
-  get avatarItem() {
-    return this.hostElement.querySelector('ix-menu-avatar');
+    return (Array.from(this.hostElement.shadowRoot.querySelectorAll('ix-menu-settings-item')).length === 0);
   }
   get tabsContainer() {
-    return this.hostElement.querySelector('#menu-tabs');
-  }
-  showTab(index) {
-    return index + 1 <= this.visibleMenuItems;
+    return this.hostElement;
   }
   componentDidLoad() {
-    var _a, _b, _c, _d;
-    (_a = this.settings) === null || _a === void 0 ? void 0 : _a.addEventListener('close', () => {
-      this.showSettings = false;
-      this.settings.show = this.showSettings;
-    });
-    (_b = this.settings) === null || _b === void 0 ? void 0 : _b.addEventListener('animationend', () => {
-      if (!this.showSettings) {
-        this.settings.classList.add('d-none');
-        this.overlayContainer.classList.add('d-none');
-      }
-    });
-    (_c = this.about) === null || _c === void 0 ? void 0 : _c.addEventListener('close', () => {
-      this.showAbout = false;
-      this.about.show = this.showAbout;
-    });
-    (_d = this.about) === null || _d === void 0 ? void 0 : _d.addEventListener('animationend', () => {
-      if (!this.showAbout) {
-        this.about.classList.add('d-none');
-        this.overlayContainer.classList.add('d-none');
-      }
-    });
-    this.overlayContainer.classList.add('d-none');
-    this.onWindowResize();
-    this.domObserver.observe(this.hostElement, {
-      attributes: false,
-      childList: true,
-      subtree: true,
+    requestAnimationFrame(() => {
+      this.handleOverflowIndicator();
     });
+    if (this.pinned) {
+      this.pinnedChange(this.pinned);
+    }
+    if (this.forceLayout) {
+      this.forceLayoutChange(this.forceLayout);
+    }
+    if (this.supportedModes !== undefined && this.supportedModes.length > 0) {
+      this.supportedModesChange(this.supportedModes);
+    }
   }
   componentWillLoad() {
-    context.menuController.register(this.hostElement);
+    menuService.menuController.register(this.hostElement);
     const layout = context.hostContext('ix-basic-navigation', this.hostElement);
     if (context.isBasicNavigationLayout(layout) && layout.hideHeader === false) {
-      service.screenMode.onChange.on((mode) => (this.mode = mode));
-      this.mode = service.screenMode.mode;
+      service.screenMode.onChange.on((mode) => this.onModeChange(mode));
+      this.onModeChange(service.screenMode.mode);
     }
   }
   componentWillRender() {
     this.appendTabs();
   }
   componentDidRender() {
-    this.visibleMenuItems = this.getMaxTabCount();
     this.appendFragments();
   }
+  setPinned(pinned) {
+    this.showPinned = pinned;
+    menuService.menuController.setIsPinned(pinned);
+  }
+  onModeChange(mode) {
+    if (!this.supportedModes.includes(mode)) {
+      return;
+    }
+    this.mode = mode;
+    if (this.mode === 'large') {
+      this.setPinned(true);
+      this.toggleMenu(true);
+      return;
+    }
+    this.setPinned(false);
+    this.toggleMenu(false);
+  }
   appendFragments() {
-    this.appendAvatar();
-    this.appendAbout();
-    this.appendSettings();
     this.appendAboutNewsPopover();
-    // This lead to none infinite-loops and other bugs.
-    this.isMoreTabEmpty = this.isMoreItemsDropdownEmpty;
-    this.countMoreNotifications = this.getMoreNotificationsCount();
   }
   resetActiveTab() {
     this.activeTab = null;
   }
-  isMenuItemActive(item) {
-    return item.active || item.classList.contains('active');
-  }
   appendTabs() {
     this.activeTab = null;
-    if (this.homeTab) {
-      this.hostElement.querySelector('.tabs-top').appendChild(this.homeTab);
-      this.homeTab.addEventListener('click', this.resetOverlay.bind(this));
-    }
-    this.menuItems.forEach((item, index) => {
-      var _a;
-      if (this.showTab(index)) {
-        item.classList.remove('d-none');
-      }
-      else {
-        item.classList.add('d-none');
-        if (this.isMenuItemActive(item)) {
-          this.activeTab = item;
-        }
-      }
-      // TODO: Find better solution to handle home tab
-      (_a = this.homeTab) === null || _a === void 0 ? void 0 : _a.classList.remove('d-none');
-      item.addEventListener('click', this.resetOverlay.bind(this));
-    });
-  }
-  appendAvatar() {
-    var _a;
-    const avatar = this.avatarItem;
-    if (avatar) {
-      avatar.style.marginBottom = '1rem';
-      (_a = this.hostElement
-        .querySelector('#avatar-tab-placeholder')) === null || _a === void 0 ? void 0 : _a.appendChild(avatar);
-    }
   }
   getAboutPopoverVerticalPosition() {
     const heightArrow = 12;
@@ -236,111 +197,28 @@ const Menu = class {
   }
   appendAboutNewsPopover() {
     var _a;
-    if (!this.aboutPopover) {
+    if (!this.aboutsNewsPopover) {
       return;
     }
-    this.aboutPopover.style.bottom = this.getAboutPopoverVerticalPosition();
-    if (!((_a = this.popoverArea) === null || _a === void 0 ? void 0 : _a.contains(this.aboutPopover))) {
+    this.aboutsNewsPopover.style.bottom =
+      this.getAboutPopoverVerticalPosition();
+    if (!((_a = this.popoverArea) === null || _a === void 0 ? void 0 : _a.contains(this.aboutsNewsPopover))) {
       const showMore = () => {
         var _a;
-        if ((_a = this.aboutPopover) === null || _a === void 0 ? void 0 : _a.aboutItemLabel) {
-          this.about.activeTabLabel = this.aboutPopover.aboutItemLabel;
+        if (((_a = this.aboutsNewsPopover) === null || _a === void 0 ? void 0 : _a.aboutItemLabel) && this.about) {
+          this.about.activeTabLabel = this.aboutsNewsPopover.aboutItemLabel;
           this.toggleAbout(true);
         }
       };
-      this.aboutPopover.addEventListener('showMore', showMore.bind(this));
-      document.body.appendChild(this.aboutPopover);
+      this.aboutsNewsPopover.addEventListener('showMore', showMore.bind(this));
+      document.body.appendChild(this.aboutsNewsPopover);
     }
   }
-  appendSettings() {
-    if (this.settings) {
-      this.overlayContainer.appendChild(this.settings);
-    }
-  }
-  appendAbout() {
-    if (this.about) {
-      this.overlayContainer.appendChild(this.about);
-    }
-  }
-  getMoreNotificationsCount() {
-    var _a;
-    const moreTabs = (_a = this.moreItemsDropdown) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.appended');
-    let count = 0;
-    moreTabs === null || moreTabs === void 0 ? void 0 : moreTabs.forEach((tab) => {
-      if (tab['notifications']) {
-        count += tab['notifications'];
-      }
-    });
-    return count;
-  }
-  getAvailableHeight() {
-    const heightBurgerMenu = 60;
-    const heightHome = 72;
-    const heightAvatar = 56;
-    const heightBottomTab = 36;
-    let availableHeight = this.hostElement.clientHeight;
-    availableHeight -= heightBurgerMenu;
-    if (this.avatarItem) {
-      availableHeight -= heightAvatar;
-    }
-    if (this.homeTab) {
-      availableHeight -= heightHome;
-    }
-    if (this.showAbout) {
-      availableHeight -= heightBottomTab;
-    }
-    if (this.showSettings) {
-      availableHeight -= heightBottomTab;
-    }
-    if (this.menuBottomItems.length) {
-      availableHeight -= this.menuBottomItems.length * heightBottomTab;
-    }
-    if (this.enableMapExpand) {
-      availableHeight -= heightBottomTab;
-    }
-    // Subtract height of imprint and theme toggle tabs
-    availableHeight -= 2 * heightBottomTab;
-    // Subtract bottom margin of bottom tabs
-    availableHeight -= 16;
-    return availableHeight;
-  }
-  getMaxTabCount() {
-    const heightTab = 48;
-    const availableHeight = this.getAvailableHeight();
-    const visibleCount = Math.floor(availableHeight / heightTab);
-    const menuItemCount = this.menuItems.length;
-    if (menuItemCount === 1) {
-      return 1;
-    }
-    if (menuItemCount < this.maxVisibleMenuItems) {
-      if (visibleCount > menuItemCount) {
-        return menuItemCount;
-      }
-      return Math.min(visibleCount - 2, menuItemCount);
-    }
-    if (menuItemCount === this.maxVisibleMenuItems) {
-      if (visibleCount < this.maxVisibleMenuItems) {
-        return visibleCount - 2;
-      }
-      if (visibleCount === this.maxVisibleMenuItems) {
-        return this.maxVisibleMenuItems - 2;
-      }
-      return Math.min(visibleCount, this.maxVisibleMenuItems);
-    }
-    if (visibleCount === this.maxVisibleMenuItems) {
-      return this.maxVisibleMenuItems - 2;
-    }
-    if (visibleCount >= this.maxVisibleMenuItems) {
-      return this.maxVisibleMenuItems - 1;
-    }
-    return Math.min(visibleCount - 2, this.maxVisibleMenuItems);
-  }
   /**
    * Toggle map sidebar expand
    * @param show
    */
   async toggleMapExpand(show) {
-    this.skipAllOverlayAnimations();
     if (show !== undefined) {
       this.mapExpand = show;
     }
@@ -348,166 +226,201 @@ const Menu = class {
       this.mapExpand = !this.mapExpand;
     }
   }
-  skipAllOverlayAnimations() {
-    if (this.about) {
-      this.skipOverlayAnimationFor(this.about);
-    }
-    if (this.settings) {
-      this.skipOverlayAnimationFor(this.settings);
-    }
-  }
-  skipOverlayAnimationFor(element) {
-    const animateClass = 'animate__animated';
-    element === null || element === void 0 ? void 0 : element.classList.remove(animateClass);
-    setTimeout(() => {
-      element === null || element === void 0 ? void 0 : element.classList.add(animateClass);
-    }, 300);
-  }
   /**
    * Toggle menu
    * @param show
    */
   async toggleMenu(show) {
-    this.skipAllOverlayAnimations();
     if (show !== undefined) {
       this.expand = show;
     }
     else {
       this.expand = !this.expand;
     }
-    if (this.aboutPopover) {
-      this.aboutPopover.expanded = this.expand;
+    if (this.aboutsNewsPopover) {
+      this.aboutsNewsPopover.expanded = this.expand;
     }
     this.expandChange.emit(this.expand);
+    this.isTransitionDisabled = false;
+    this.checkTransition();
+  }
+  /**
+   * Disable transition of overlay while menu animation is running.
+   */
+  checkTransition() {
+    const container = this.overlayContainer;
+    if (!container) {
+      return;
+    }
+    if (this.isTransitionDisabled) {
+      container.style.transitionProperty = 'left';
+    }
+    else {
+      container.style.transitionProperty = 'all';
+    }
+  }
+  isOverlayVisible() {
+    return this.showAbout || this.showSettings;
   }
   /**
    * Toggle Settings tabs
    * @param show
    */
   async toggleSettings(show) {
-    var _a;
-    if (this.showAbout) {
-      this.skipAllOverlayAnimations();
+    if (!this.settings) {
+      return;
+    }
+    if (!this.isOverlayVisible()) {
+      this.animateOverlayFadeIn();
+    }
+    if (show) {
+      this.resetOverlay();
+      this.showSettings = show;
+      this.settings.show = this.showSettings;
     }
     else {
-      this.skipOverlayAnimationFor(this.about);
+      this.onOverlayClose();
     }
-    (_a = this.about) === null || _a === void 0 ? void 0 : _a.classList.add('d-none');
-    this.resetOverlay();
-    this.showSettings = show;
-    this.settings.show = this.showSettings;
-    this.settings.classList.remove('d-none');
-    this.overlayContainer.classList.remove('d-none');
   }
   /**
    * Toggle About tabs
    * @param show
    */
   async toggleAbout(show) {
-    var _a;
-    if (this.showSettings) {
-      this.skipAllOverlayAnimations();
+    if (!this.about) {
+      return;
+    }
+    if (!this.isOverlayVisible()) {
+      this.animateOverlayFadeIn();
+    }
+    if (show) {
+      this.resetOverlay();
+      this.showAbout = show;
+      this.about.show = this.showAbout;
     }
     else {
-      this.skipOverlayAnimationFor(this.settings);
+      this.onOverlayClose();
     }
-    (_a = this.settings) === null || _a === void 0 ? void 0 : _a.classList.add('d-none');
-    this.resetOverlay();
-    this.showAbout = show;
-    this.about.show = this.showAbout;
-    this.about.classList.remove('d-none');
-    this.overlayContainer.classList.remove('d-none');
   }
   resetOverlay() {
     this.showSettings = false;
     this.showAbout = false;
     if (this.settings) {
-      this.settings.show = this.showSettings;
+      this.settings.show = false;
     }
     if (this.about) {
-      this.about.show = this.showAbout;
+      this.about.show = false;
     }
-    this.toggleMenu(false);
-  }
-  showMoreButton() {
-    const menuItemCount = this.menuItems.length;
-    if (menuItemCount === 1) {
-      return false;
-    }
-    if (menuItemCount < this.maxVisibleMenuItems) {
-      return this.visibleMenuItems < menuItemCount;
-    }
-    if (menuItemCount > this.maxVisibleMenuItems) {
-      return this.visibleMenuItems < this.maxVisibleMenuItems;
-    }
-    return this.visibleMenuItems <= this.maxVisibleMenuItems - 2;
   }
   getCollapseText() {
     return this.mapExpand ? this.i18nCollapse : this.i18nExpand;
   }
   getCollapseIcon() {
-    return this.mapExpand ? 'double-chevron-left' : 'double-chevron-right';
+    return this.mapExpand ? 'navigation-left' : 'navigation-right';
   }
   isMenuItemClicked(event) {
-    const path = event.composedPath();
-    const menuItems = path
-      .filter((element) => element.id !== 'ix-menu-more-tab')
-      .filter((element) => {
-      return element.tagName === 'IX-MENU-ITEM';
+    if (event.target instanceof index.H) {
+      return event.target.tagName === 'IX-MENU-ITEM';
+    }
+    return false;
+  }
+  handleOverflowIndicator() {
+    const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;
+    this.itemsScrollShadowTop = scrollTop > 0;
+    this.itemsScrollShadowBottom =
+      Math.round(scrollTop + clientHeight) < scrollHeight;
+  }
+  onOverlayClose() {
+    this.animateOverlayFadeOut(() => {
+      this.resetOverlay();
+    });
+  }
+  animateOverlayFadeIn() {
+    requestAnimationFrame(() => {
+      anime_es.anime({
+        targets: this.overlayContainer,
+        duration: 300,
+        backdropFilter: [0, 'blur(1rem)'],
+        translateX: ['-4rem', 0],
+        opacity: [0, 1],
+        easing: 'easeInSine',
+        begin: () => {
+          if (this.showPinned) {
+            return;
+          }
+          this.toggleMenu(false);
+        },
+      });
     });
-    return menuItems.some((menu) => this.tabsContainer.contains(menu));
+  }
+  animateOverlayFadeOut(onComplete) {
+    requestAnimationFrame(() => {
+      anime_es.anime({
+        targets: this.overlayContainer,
+        duration: 300,
+        backdropFilter: ['blur(1rem)', 0],
+        translateX: [0, '-4rem'],
+        opacity: [1, 0],
+        easing: 'easeInSine',
+        complete: () => onComplete(),
+      });
+    });
+  }
+  onMenuItemsClick(event) {
+    if (this.isMenuItemClicked(event)) {
+      if (!this.showPinned) {
+        this.toggleMenu(false);
+      }
+      this.onOverlayClose();
+    }
   }
   render() {
     return (index.h(index.Host, { class: {
         expanded: this.expand,
         [`mode-${this.mode}`]: true,
-      } }, index.h("div", { class: {
+      }, slot: "menu" }, index.h("aside", { class: {
         menu: true,
         expanded: this.expand,
       }, onClick: () => {
         this.resetActiveTab();
-      } }, index.h("ix-burger-menu", { onClick: async () => this.toggleMenu(), expanded: this.expand, class: {
+      } }, index.h("ix-burger-menu", { onClick: async () => this.toggleMenu(), expanded: this.expand, ixAriaLabel: this.i18nExpandSidebar, pinned: this.showPinned, class: {
         'burger-menu': true,
-      } }), index.h("div", { id: "avatar-tab-placeholder" }), index.h("div", { id: "menu-tabs", style: {
+      } }), index.h("div", { class: "menu-avatar" }, index.h("slot", { name: "ix-menu-avatar" })), index.h("div", { id: "menu-tabs", style: {
         display: 'contents',
-      }, onClick: (event) => {
-        if (this.isMenuItemClicked(event)) {
-          this.resetOverlay();
-        }
-      } }, index.h("div", { class: "tabs-top" }), index.h("slot", null), index.h("div", { class: "active-more-tab" }, this.activeTab ? (index.h("ix-menu-item", { class: "internal-tab", active: true, tabIcon: this.activeTab.tabIcon }, this.activeTab.innerText)) : null), index.h("ix-menu-item", { id: "ix-menu-more-tab", tabIcon: "more-menu", class: {
-        'internal-tab': true,
-      }, style: {
-        display: this.showMoreButton() ? 'block' : 'none',
-      }, title: "Show more", notifications: this.countMoreNotifications }, this.i18nMore, index.h("ix-dropdown", { trigger: 'ix-menu-more-tab', positioningStrategy: 'fixed', placement: 'right-start' }, this.menuItems
-      .filter((elm, index) => !this.showTab(index) &&
-      !this.isMenuItemActive(elm) &&
-      this.isVisible(elm))
-      .map((e) => {
-      return (index.h("ix-menu-item", { tabIcon: e.tabIcon, active: e.active, disabled: e.disabled, class: "internal-tab appended", onClick: () => {
-          this.resetOverlay();
-          e.dispatchEvent(new CustomEvent('click'));
-        } }, e.innerText));
-    })))), index.h("div", { class: "bottom-tab-divider" }), this.enableSettings && !this.isSettingsEmpty ? (index.h("ix-menu-item", { id: "settings", class: {
+      }, onClick: (e) => this.onMenuItemsClick(e) }, index.h("div", { class: "tabs-top" }, index.h("slot", { name: "home" })), index.h("div", { class: "tabs-shadow-container" }, index.h("div", { class: {
+        'tabs--shadow': true,
+        'tabs--shadow-top': true,
+        'tabs--shadow--show': this.itemsScrollShadowTop,
+      } }), index.h("div", { class: "tabs", onScroll: () => this.handleOverflowIndicator() }, index.h("slot", null)), index.h("div", { class: {
+        'tabs--shadow': true,
+        'tabs--shadow-bottom': true,
+        'tabs--shadow--show': this.itemsScrollShadowBottom,
+      } }))), index.h("div", { class: "bottom-tab-divider" }), this.settings ? (index.h("ix-menu-item", { id: "settings", class: {
         'internal-tab': true,
         'bottom-tab': true,
         active: this.showSettings,
-      }, tabIcon: "cogwheel", onClick: async () => this.toggleSettings(!this.showSettings) }, this.i18nSettings)) : null, index.h("slot", { name: "bottom" }), index.h("div", { id: "popover-area" }), this.about ? (index.h("ix-menu-item", { id: "aboutAndLegal", class: {
+      }, icon: "cogwheel", onClick: async () => this.toggleSettings(!this.showSettings) }, this.i18nSettings)) : null, index.h("slot", { name: "bottom" }), index.h("div", { id: "popover-area" }), this.about ? (index.h("ix-menu-item", { id: "aboutAndLegal", class: {
         'internal-tab': true,
         'bottom-tab': true,
         active: this.showAbout,
-      }, tabIcon: "info", onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (index.h("ix-menu-item", { id: "toggleTheme", onClick: () => themeSwitcher.themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", tabIcon: "bulb" }, this.i18nToggleTheme)) : null, this.enableMapExpand ? (index.h("ix-menu-item", { id: "menu-collapse", onClick: () => this.mapExpandChange.emit(this.mapExpand), class: "internal-tab bottom-tab", tabIcon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), index.h("div", { class: {
+      }, icon: "info", onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (index.h("ix-menu-item", { id: "toggleTheme", onClick: () => themeSwitcher.themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", tabIcon: "bulb" }, this.i18nToggleTheme)) : null, this.enableMapExpand ? (index.h("ix-menu-item", { id: "menu-collapse", onClick: () => this.mapExpandChange.emit(this.mapExpand), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), index.h("div", { class: {
         'menu-overlay': true,
+        visible: this.isOverlayVisible(),
         expanded: this.expand,
-        'd-block': this.showAbout || this.showSettings,
-      }, style: {
-        opacity: this.showAbout || this.showSettings ? '1' : '0',
-      } }), index.h("div", { class: "menu-overlay-invisible" })));
+      }, onTransitionEnd: () => {
+        this.isTransitionDisabled = true;
+        this.checkTransition();
+      } }, this.showSettings ? index.h("slot", { name: "ix-menu-settings" }) : null, this.showAbout ? index.h("slot", { name: "ix-menu-about" }) : null)));
   }
   get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "pinned": ["pinnedChange"],
+    "supportedModes": ["supportedModesChange"]
+  }; }
 };
 Menu.style = menuCss;
 
-const menuAboutCss = ".text-xs.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a.sc-ix-menu-about{color:var(--theme-color-primary)}.sc-ix-menu-about-h{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}.sc-ix-menu-about-h .about-header.sc-ix-menu-about{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}.sc-ix-menu-about-h .about-header.sc-ix-menu-about h2.sc-ix-menu-about{color:var(--theme-nav-overlay-header--color);margin-bottom:0}.sc-ix-menu-about-h .about-tabs.sc-ix-menu-about{margin-bottom:1.5rem}.sc-ix-menu-about-h ix-menu-about-item.sc-ix-menu-about{display:none}";
+const menuAboutCss = ".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host .about-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .about-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:0}:host .about-tabs{margin-bottom:1.5rem}:host ix-menu-about-item{display:none}";
 
 const MenuAbout$1 = class {
   constructor(hostRef) {
@@ -561,10 +474,11 @@ const MenuAbout$1 = class {
   }
   render() {
     return (index.h(index.Host, { class: {
-        animate__animated: true,
-        animate__fadeInLeft: this.show,
-        animate__fadeOutLeft: !this.show,
-      } }, index.h("div", { class: "about-header" }, index.h("h2", { class: "text-h2" }, this.label), index.h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit(e) })), index.h("ix-tabs", { selected: this.getSelectedTabIndex(this.activeTabLabel), class: "about-tabs" }, this.getTabItems()), index.h("div", { class: "about-items" }, index.h("slot", null))));
+        show: this.show,
+      }, slot: "ix-menu-about" }, index.h("div", { class: "about-header" }, index.h("h2", { class: "text-h2" }, this.label), index.h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit({
+        name: 'ix-menu-about',
+        nativeEvent: e,
+      }) })), index.h("ix-tabs", { selected: this.getSelectedTabIndex(this.activeTabLabel), class: "about-tabs" }, this.getTabItems()), index.h("div", { class: "about-items" }, index.h("slot", null))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -573,7 +487,7 @@ const MenuAbout$1 = class {
 };
 MenuAbout$1.style = menuAboutCss;
 
-const menuAboutItemCss = ".sc-ix-menu-about-item-h{display:block}";
+const menuAboutItemCss = ":host{display:block}";
 
 const MenuAboutItem = class {
   constructor(hostRef) {
@@ -586,7 +500,7 @@ const MenuAboutItem = class {
 };
 MenuAboutItem.style = menuAboutItemCss;
 
-const menuAboutNewsCss = ".sc-ix-menu-about-news-h{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-1);border:var(--theme-weak-bdr-1);border-radius:0.25rem;padding:1rem;left:3.4rem;z-index:10000;transition:left var(--animate-duration);margin-left:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}.expanded.sc-ix-menu-about-news-h{left:calc(3.4rem + 12.7rem)}.show.sc-ix-menu-about-news-h{display:none}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news{position:absolute;top:0.0625rem;left:1rem}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news svg.sc-ix-menu-about-news{position:absolute;height:3.625rem;width:3rem}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news svg.sc-ix-menu-about-news polygon.sc-ix-menu-about-news{fill:var(--theme-color-primary)}.sc-ix-menu-about-news-h .banner-container.sc-ix-menu-about-news ix-icon.sc-ix-menu-about-news{margin:0.5rem;position:absolute;z-index:1}.sc-ix-menu-about-news-h .cui-popover-news-header.sc-ix-menu-about-news{margin-bottom:2rem;margin-left:4rem;margin-top:-0.25rem}.sc-ix-menu-about-news-h .popover-body.sc-ix-menu-about-news{color:var(--theme-color-std-text)}.sc-ix-menu-about-news-h .cui-popover-news-footer.sc-ix-menu-about-news{display:flex;justify-content:flex-end;margin-top:1rem}.sc-ix-menu-about-news-h ix-icon-button.sc-ix-menu-about-news{top:0.5rem;right:0.5rem;position:absolute}.sc-ix-menu-about-news-h #arrow.sc-ix-menu-about-news{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-1);border-left:var(--theme-weak-bdr-1);border-bottom:var(--theme-weak-bdr-1);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}";
+const menuAboutNewsCss = ":host{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-1);border:var(--theme-weak-bdr-1);border-radius:0.25rem;padding:1rem;left:3.4rem;z-index:10000;transition:left var(--animate-duration);margin-left:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .banner-container{position:absolute;top:0.0625rem;left:1rem}:host .banner-container svg{position:absolute;height:3.625rem;width:3rem}:host .banner-container svg polygon{fill:var(--theme-color-primary)}:host .banner-container ix-icon{margin:0.5rem;position:absolute;z-index:1}:host .cui-popover-news-header{margin-bottom:2.5rem;margin-left:4rem;margin-top:-0.25rem}:host .popover-body{color:var(--theme-color-std-text)}:host .cui-popover-news-footer{display:flex;justify-content:flex-end;margin-top:1rem}:host ix-icon-button{top:0.5rem;right:0.5rem;position:absolute}:host #arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-1);border-left:var(--theme-weak-bdr-1);border-bottom:var(--theme-weak-bdr-1);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}:host(.expanded){left:calc(3.4rem + 12.7rem)}:host(.show){display:none}";
 
 const MenuAboutNews = class {
   constructor(hostRef) {
@@ -604,10 +518,10 @@ const MenuAboutNews = class {
     return (index.h(index.Host, { class: {
         expanded: this.expanded,
         show: !this.show,
-      } }, index.h("div", { class: "banner-container" }, index.h("ix-icon", { color: "color-inv-contrast-text", name: "shout", size: "32" }), index.h("svg", { viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, index.h("polygon", { points: "0 0 48 0 48 56 24 48 0 56" }))), index.h("div", { class: "cui-popover-news-header" }, index.h("span", { class: "text-l-title" }, this.label)), index.h("ix-icon-button", { size: "24", icon: "close-small", ghost: true, onClick: () => {
+      } }, index.h("div", { class: "banner-container" }, index.h("ix-icon", { color: "color-inv-contrast-text", name: "shout", size: "32" }), index.h("svg", { viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, index.h("polygon", { points: "0 0 48 0 48 56 24 48 0 56" }))), index.h("div", { class: "cui-popover-news-header" }, index.h("ix-typography", { variant: "default-title-single" }, this.label)), index.h("ix-icon-button", { size: "24", icon: "close-small", ghost: true, onClick: () => {
         this.show = false;
         this.closePopover.emit();
-      } }), index.h("slot", null), this.aboutItemLabel ? (index.h("div", { class: "cui-popover-news-footer" }, index.h("button", { class: "btn btn-primary", onClick: (e) => {
+      } }), index.h("slot", null), this.aboutItemLabel ? (index.h("div", { class: "cui-popover-news-footer" }, index.h("ix-button", { variant: "primary", onClick: (e) => {
         this.show = false;
         this.showMore.emit(e);
       } }, this.i18nShowMore))) : null, index.h("div", { id: "arrow" })));
@@ -615,23 +529,8 @@ const MenuAboutNews = class {
 };
 MenuAboutNews.style = menuAboutNewsCss;
 
-const menuAvatarCss = ".sc-ix-menu-avatar-h{display:block;position:relative;margin-bottom:0.5rem}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar{display:flex;align-items:center;height:2.5rem;max-height:2.5rem;padding-left:0.25rem;margin-left:0.41rem;margin-right:0.35rem;transition:0.15s;border-radius:1.25rem}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar>.avatar-image.sc-ix-menu-avatar{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar>.avatar-initials.sc-ix-menu-avatar{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-color-component-3)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar #avatar-path-background.sc-ix-menu-avatar{fill:var(--theme-avatar--background)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar #avatar-path-person.sc-ix-menu-avatar{fill:var(--theme-color-4)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar .avatar-name.sc-ix-menu-avatar{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar .avatar-name.sc-ix-menu-avatar .text-default-single.sc-ix-menu-avatar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-avatar-btn--background--hover);color:var(--theme-avatar-btn--color--hover)}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-menu-avatar-h .avatar.sc-ix-menu-avatar:not(.disabled):not(:disabled):active{background-color:var(--theme-avatar-btn--background--active);color:var(--theme-avatar-btn--color--active)}";
+const menuAvatarCss = ":host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .avatar{display:flex;align-items:center;height:2.5rem;max-height:2.5rem;padding-left:0.25rem;margin-left:0.41rem;margin-right:0.35rem;transition:0.15s;border-radius:1.25rem}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-color-component-3)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-color-4)}:host .avatar .avatar-name{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap;margin-left:1rem;line-height:1.14}:host .avatar .avatar-name .text-default-single{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-avatar-btn--background--hover);color:var(--theme-avatar-btn--color--hover)}:host .avatar:not(.disabled):not(:disabled){cursor:pointer}:host .avatar:not(.disabled):not(:disabled):active{background-color:var(--theme-avatar-btn--background--active);color:var(--theme-avatar-btn--color--active)}";
 
-/*
- * SPDX-FileCopyrightText: 2023 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-function DefaultAvatar(props) {
-  const { initials } = props;
-  if (initials) {
-    return index.h("div", { class: 'avatar-initials' }, initials);
-  }
-  return (index.h("svg", { class: 'avatar-image', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" }, index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }), index.h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" }))));
-}
 const MenuAvatar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -644,7 +543,7 @@ const MenuAvatar = class {
     this.i18nLogout = 'Logout';
   }
   render() {
-    return (index.h(index.Host, null, index.h("li", { class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId }, this.image ? (index.h("img", { src: this.image, class: "avatar-image" })) : (index.h(DefaultAvatar, { initials: this.initials })), index.h("div", { class: "avatar-name" }, index.h("span", { class: "text-default-single", title: this.top }, this.top), index.h("span", { class: "text-default-single", title: this.bottom }, this.bottom))), index.h("ix-dropdown", { trigger: this.avatarElementId, placement: 'right-start', offset: {
+    return (index.h(index.Host, { slot: "ix-menu-avatar" }, index.h("li", { class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId }, index.h("ix-avatar", { image: this.image, initials: this.initials }), index.h("div", { class: "avatar-name" }, index.h("span", { class: "text-default-single", title: this.top }, this.top), index.h("span", { class: "text-default-single", title: this.bottom }, this.bottom))), index.h("ix-dropdown", { trigger: this.hostElement, placement: 'right-start', offset: {
         mainAxis: 6,
       } }, index.h("slot", null), index.h("ix-menu-avatar-item", { label: this.i18nLogout, icon: "log-out", onClick: (e) => {
         this.logoutClick.emit(e);
@@ -654,7 +553,7 @@ const MenuAvatar = class {
 };
 MenuAvatar.style = menuAvatarCss;
 
-const menuAvatarItemCss = ".sc-ix-menu-avatar-item-h{display:block}";
+const menuAvatarItemCss = ":host{display:block}:host *,:host *::after,:host *::before{box-sizing:border-box}";
 
 const MenuAvatarItem = class {
   constructor(hostRef) {
@@ -670,7 +569,7 @@ const MenuAvatarItem = class {
 };
 MenuAvatarItem.style = menuAvatarItemCss;
 
-const menuItemCss = ":host{position:relative;display:block;cursor:pointer;height:3rem;min-height:3rem;max-height:3rem}:host .tab{display:flex;position:relative;align-items:center;height:3rem;z-index:500;padding-left:0.875rem}:host .tab:not(.disabled):not(:disabled).hover,:host .tab:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .tab:not(.disabled):not(:disabled).active,:host .tab:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host i.glyph{color:var(--theme-nav-item-primary-icon--color);position:relative}:host .tab:focus-visible{outline:none}:host:focus-visible{outline:none}:host .tab:not(:last-child){margin-bottom:0.5rem}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.75rem}:host .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:0.5rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}:host .tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host(.active) .tab,:host(.selected) .tab{background-color:var(--theme-nav-item-primary--background--selected)}:host(.active) .tab::before,:host(.selected) .tab::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:3rem;width:0.25rem;left:0;position:absolute}:host(.active) .tab>.glyph,:host(.selected) .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}:host(.disabled){color:var(--theme-color-weak-text);pointer-events:none;cursor:default}:host(.disabled) .tab>.glyph{color:var(--theme-color-weak-text)}:host(.disabled) .tab-text{color:var(--theme-color-weak-text)}:host(.home-tab),:host([slot=home]){margin-bottom:1.5rem}:host(.bottom-tab),:host([slot=bottom]){min-height:2.25rem;height:2.25rem;max-height:2.25rem}:host(.bottom-tab) .tab,:host([slot=bottom]) .tab{height:2.25rem}:host(.bottom-tab) .tab::before,:host([slot=bottom]) .tab::before{height:2.25rem;background-color:transparent}:host(.bottom-tab).active:hover,:host(.bottom-tab).selected:hover,:host([slot=bottom]).active:hover,:host([slot=bottom]).selected:hover{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab).active:active,:host(.bottom-tab).selected:active,:host([slot=bottom]).active:active,:host([slot=bottom]).selected:active{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab.active) .tab,:host(.bottom-tab.selected) .tab,:host(.active[slot=bottom]) .tab,:host(.selected[slot=bottom]) .tab{background-color:var(--theme-nav-item-secondary--background--selected)}";
+const menuItemCss = ":host{position:relative;display:block;cursor:pointer;height:var(--ix-menu-item-height, 3rem);min-height:var(--ix-menu-item-height, 3rem);max-height:var(--ix-menu-item-height, 3rem)}:host .tab{display:flex;position:relative;align-items:center;height:var(--ix-menu-item-height, 3rem);z-index:500;padding-left:0.875rem}:host .tab:not(.disabled):not(:disabled).hover,:host .tab:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .tab:not(.disabled):not(:disabled).active,:host .tab:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host i.glyph{color:var(--theme-nav-item-primary-icon--color);position:relative}:host .tab:focus-visible{outline:none}:host:focus-visible{outline:none}:host .tab:not(:last-child){margin-bottom:0.5rem}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.75rem}:host .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:0.5rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}:host .tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}:host(.active) .tab,:host(.selected) .tab{background-color:var(--theme-nav-item-primary--background--selected)}:host(.active) .tab::before,:host(.selected) .tab::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:var(--ix-menu-item-height, 3rem);width:0.25rem;left:0;position:absolute}:host(.active) .tab>.glyph,:host(.selected) .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}:host(.disabled){color:var(--theme-color-weak-text);pointer-events:none;cursor:default}:host(.disabled) .tab>.glyph{color:var(--theme-color-weak-text)}:host(.disabled) .tab-text{color:var(--theme-color-weak-text)}:host(.bottom-tab),:host([slot=bottom]){min-height:2.25rem;height:2.25rem;max-height:2.25rem}:host(.bottom-tab) .tab,:host([slot=bottom]) .tab{height:2.25rem}:host(.bottom-tab) .tab::before,:host([slot=bottom]) .tab::before{height:2.25rem;background-color:transparent}:host(.bottom-tab).active:hover,:host(.bottom-tab).selected:hover,:host([slot=bottom]).active:hover,:host([slot=bottom]).selected:hover{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab).active:active,:host(.bottom-tab).selected:active,:host([slot=bottom]).active:active,:host([slot=bottom]).selected:active{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab.active) .tab,:host(.bottom-tab.selected) .tab,:host(.active[slot=bottom]) .tab,:host(.selected[slot=bottom]) .tab{background-color:var(--theme-nav-item-secondary--background--selected)}";
 
 const MenuItem = class {
   constructor(hostRef) {
@@ -678,6 +577,7 @@ const MenuItem = class {
     this.home = false;
     this.bottom = false;
     this.tabIcon = 'document';
+    this.icon = undefined;
     this.notifications = undefined;
     this.active = undefined;
     this.disabled = undefined;
@@ -702,18 +602,30 @@ const MenuItem = class {
     }
   }
   render() {
-    return (index.h(index.Host, { class: {
+    var _a;
+    let extendedAttributes = {};
+    if (this.home) {
+      extendedAttributes = {
+        slot: 'home',
+      };
+    }
+    if (this.bottom) {
+      extendedAttributes = {
+        slot: 'bottom',
+      };
+    }
+    return (index.h(index.Host, Object.assign({ class: {
         disabled: this.disabled,
         'home-tab': this.home,
         'bottom-tab': this.bottom,
         active: this.active,
-      } }, index.h("li", { class: "tab", title: this.title }, index.h("ix-icon", { name: this.tabIcon }), index.h("div", { class: "notification" }, this.notifications ? (index.h("div", { class: "pill" }, this.notifications)) : null), index.h("span", { class: "tab-text text-default" }, index.h("slot", null)))));
+      } }, extendedAttributes), index.h("li", { class: "tab", title: this.title }, index.h("ix-icon", { name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon }), index.h("div", { class: "notification" }, this.notifications ? (index.h("div", { class: "pill" }, this.notifications)) : null), index.h("span", { class: "tab-text text-default" }, index.h("slot", null)))));
   }
   get hostElement() { return index.getElement(this); }
 };
 MenuItem.style = menuItemCss;
 
-const menuSettingsCss = ".text-xs.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl.sc-ix-menu-settings{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a.sc-ix-menu-settings{color:var(--theme-color-primary)}.sc-ix-menu-settings-h{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}.sc-ix-menu-settings-h .settings-header.sc-ix-menu-settings{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}.sc-ix-menu-settings-h .settings-header.sc-ix-menu-settings h2.sc-ix-menu-settings{color:var(--theme-nav-overlay-header--color);margin-bottom:0}.sc-ix-menu-settings-h .settings-tabs.sc-ix-menu-settings{margin-bottom:1.5rem}";
+const menuSettingsCss = ".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .settings-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .settings-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:0}:host .settings-tabs{margin-bottom:1.5rem}";
 
 const MenuAbout = class {
   constructor(hostRef) {
@@ -754,11 +666,12 @@ const MenuAbout = class {
     });
   }
   render() {
-    return (index.h(index.Host, { class: {
-        animate__animated: true,
-        animate__fadeInLeft: this.show,
-        animate__fadeOutLeft: !this.show,
-      } }, index.h("div", { class: "settings-header" }, index.h("h2", { class: "text-h2" }, this.label), index.h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit(e) })), index.h("ix-tabs", null, this.getTabItems()), index.h("slot", null)));
+    return (index.h(index.Host, { slot: "ix-menu-settings", class: {
+        show: this.show,
+      } }, index.h("div", { class: "settings-header" }, index.h("h2", { class: "text-h2" }, this.label), index.h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit({
+        nativeEvent: e,
+        name: 'ix-menu-settings',
+      }) })), index.h("ix-tabs", null, this.getTabItems()), index.h("slot", null)));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -767,7 +680,7 @@ const MenuAbout = class {
 };
 MenuAbout.style = menuSettingsCss;
 
-const menuSettingsItemCss = ".sc-ix-menu-settings-item-h{display:block}";
+const menuSettingsItemCss = ":host{display:block}";
 
 const MenuSettingsItem = class {
   constructor(hostRef) {