@siemens/ix 4.4.0 → 5.0.0

package/dist/collection/components/menu/menu-expand-icon.js

@@ -9,43 +9,41 @@
 import { iconDoubleChevronLeft, iconDoubleChevronRight, } from "@siemens/ix-icons/icons";
 import { h, Host } from "@stencil/core";
 import { getButtonClasses } from "../button/base-button";
+import { a11yBoolean } from "../utils/a11y";
 /**
  * @internal
  */
 export class MenuExpandIcon {
-    constructor() {
-        /** Whether the menu expand icon displays the expanded state or not */
-        this.expanded = false;
-        /** Display as pinned */
-        this.pinned = false;
-        /**
-         * Accessibility label for the menu expand icon
-         * @deprecated This prop is no longer used as the component is hidden from screen readers (aria-hidden="true"). Will be removed in 5.0.0
-         */
-        this.ixAriaLabel = 'Expand';
-    }
+    /** i18n label for 'Expand' button */
+    i18nExpand = 'Expand';
+    /** i18n label for 'Collapse' button */
+    i18nCollapse = 'Collapse';
+    /** Whether the menu expand icon displays the expanded state or not */
+    expanded = false;
+    /** Controls which icon is displayed */
+    breakpoint;
+    /** Display as pinned */
+    pinned = false;
     getSmallScreenIcon() {
-        return (h("button", { tabindex: -1, class: Object.assign(Object.assign({}, getButtonClasses('subtle-tertiary', true, false, false, false)), { 'menu-expand-button': true }) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))));
+        return (h("button", { "aria-label": this.expanded ? this.i18nCollapse : this.i18nExpand, "aria-pressed": a11yBoolean(this.expanded), class: {
+                ...getButtonClasses('subtle-tertiary', true, false, false, false),
+                'menu-expand-button': true,
+            } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))));
     }
     getLargeScreenIcon() {
-        return (h("ix-icon-button", { tabindex: -1, icon: this.expanded ? iconDoubleChevronLeft : iconDoubleChevronRight, variant: "subtle-tertiary", "aria-label": this.expanded ? 'Collapse menu' : 'Expand menu' }));
+        return (h("ix-icon-button", { "aria-pressed": a11yBoolean(this.expanded), "aria-label": this.expanded ? this.i18nCollapse : this.i18nExpand, icon: this.expanded ? iconDoubleChevronLeft : iconDoubleChevronRight, variant: "subtle-tertiary" }));
     }
     getMenuIcon() {
-        if (this.pinned) {
-            return this.getLargeScreenIcon();
-        }
-        if (this.breakpoint === 'md') {
-            return this.getLargeScreenIcon();
-        }
-        if (this.breakpoint === 'lg') {
+        if (this.pinned || this.breakpoint === 'lg' || this.breakpoint === 'md') {
             return this.getLargeScreenIcon();
         }
         return this.getSmallScreenIcon();
     }
     render() {
-        return (h(Host, { key: 'd0b7b4a7a64641d68b291468ff4e9de612461b62', class: {
+        return (h(Host, { key: '45cdd3674fa759b54c5d0788cbd8711b4339bc2f', class: {
                 expanded: this.expanded,
-            }, "aria-hidden": "true" }, this.getMenuIcon()));
+                'ix-focusable': true,
+            } }, this.getMenuIcon()));
     }
     static get is() { return "ix-menu-expand-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -61,6 +59,46 @@ export class MenuExpandIcon {
     }
     static get properties() {
         return {
+            "i18nExpand": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "i18n label for 'Expand' button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "i18n-expand",
+                "defaultValue": "'Expand'"
+            },
+            "i18nCollapse": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "i18n label for 'Collapse' button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "i18n-collapse",
+                "defaultValue": "'Collapse'"
+            },
             "expanded": {
                 "type": "boolean",
                 "mutable": false,
@@ -126,29 +164,6 @@ export class MenuExpandIcon {
                 "reflect": false,
                 "attribute": "pinned",
                 "defaultValue": "false"
-            },
-            "ixAriaLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop is no longer used as the component is hidden from screen readers (aria-hidden=\"true\"). Will be removed in 5.0.0"
-                        }],
-                    "text": "Accessibility label for the menu expand icon"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ix-aria-label",
-                "defaultValue": "'Expand'"
             }
         };
     }

package/dist/collection/components/menu/menu.js

@@ -6,10 +6,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { iconApps, iconCogwheel, iconInfo, iconLightDark, iconNavigationLeft, iconNavigationRight, } from "@siemens/ix-icons/icons";
+import { iconApps, iconCogwheel, iconInfo, iconLightDark, } from "@siemens/ix-icons/icons";
 import { h, Host, } from "@stencil/core";
 import { animate } from "animejs";
-import { ApplicationSidebarToggleEvent } from "../application-sidebar/events";
 import Animation from "../utils/animation";
 import { showAppSwitch } from "../utils/app-switch";
 import { ApplicationLayoutContext } from "../utils/application-layout/context";
@@ -19,82 +18,45 @@ import { menuController } from "../utils/menu-service/menu-service";
 import { convertToRemString } from "../utils/rwd.util";
 import { themeSwitcher } from "../utils/theme-switcher";
 export class Menu {
-    constructor() {
-        /**
-         * Is settings tab visible
-         */
-        this.showSettings = false;
-        /**
-         * Is about tab visible
-         */
-        this.showAbout = false;
-        /**
-         * Show toggle between light and dark variant. Only if the provided theme have implemented both!
-         */
-        this.enableToggleTheme = false;
-        /** @internal */
-        this.enableMapExpand = false;
-        /**
-         * Should only be set if you use ix-menu standalone
-         */
-        this.applicationDescription = '';
-        /**
-         * Accessibility i18n label for the burger menu of the sidebar
-         * @deprecated Since 4.2.0. Will be removed in 5.0.0. The expand button is now hidden from screen readers with aria-hidden="true".
-         */
-        this.i18nExpandSidebar = 'Expand sidebar';
-        /**
-         *  Toggle the expand state of the menu
-         */
-        this.expand = false;
-        /**
-         *  If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.
-         */
-        this.startExpanded = false;
-        /**
-         * Menu stays pinned to the left
-         */
-        this.pinned = false;
-        /**
-         *  i18n label for 'About & legal information' button
-         */
-        this.i18nLegal = 'About & legal information';
-        /**
-         * i18n label for 'Settings' button
-         */
-        this.i18nSettings = 'Settings';
-        /**
-         * i18n label for 'Toggle theme' button
-         */
-        this.i18nToggleTheme = 'Toggle theme';
-        /**
-         * i18n label for 'Expand' button
-         */
-        this.i18nExpand = ' Expand';
-        /**
-         * i18n label for 'Collapse' button
-         */
-        this.i18nCollapse = 'Collapse';
-        this.showPinned = false;
-        this.mapExpand = true;
-        this.breakpoint = 'lg';
-        this.itemsScrollShadowTop = false;
-        this.itemsScrollShadowBottom = false;
-        this.isDarkMode = false;
-        this.isTransitionDisabled = false;
-        // FBC IAM workaround #488
-        this.isVisible = (elm) => {
-            var _a, _b;
-            return (elm.style.display !== 'none' &&
-                ((_b = (_a = elm.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.style.display) !== 'none');
-        };
-    }
+    hostElement;
+    /**
+     * Is settings tab visible
+     */
+    showSettings = false;
+    /**
+     * Is about tab visible
+     */
+    showAbout = false;
+    /**
+     * Show toggle between light and dark variant. Only if the provided theme have implemented both!
+     */
+    enableToggleTheme = false;
+    /**
+     * Should only be set if you use ix-menu standalone
+     */
+    applicationName;
+    /**
+     * Should only be set if you use ix-menu standalone
+     */
+    applicationDescription = '';
+    /**
+     *  Toggle the expand state of the menu
+     */
+    expand = false;
     expandChanged(newExpand, oldExpand) {
         if (newExpand === oldExpand) {
             return;
         }
         this.toggleMenu(newExpand);
     }
+    /**
+     *  If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.
+     */
+    startExpanded = false;
+    /**
+     * Menu stays pinned to the left
+     */
+    pinned = false;
     pinnedChange(newPinned) {
         this.setPinned(this.pinned);
         if (newPinned) {
@@ -104,6 +66,64 @@ export class Menu {
         }
         applicationLayoutService.enableBreakpointDetection();
     }
+    /**
+     *  i18n label for 'About & legal information' button
+     */
+    i18nLegal = 'About & legal information';
+    /**
+     * i18n label for 'Settings' button
+     */
+    i18nSettings = 'Settings';
+    /**
+     * i18n label for 'Toggle theme' button
+     */
+    i18nToggleTheme = 'Toggle theme';
+    /**
+     * i18n label for 'Expand' button
+     */
+    i18nExpand = 'Expand';
+    /**
+     * i18n label for 'Collapse' button
+     */
+    i18nCollapse = 'Collapse';
+    /**
+     * Menu expanded
+     */
+    expandChange;
+    /**
+     * Map Sidebar expanded
+     */
+    mapExpandChange;
+    /**
+     * Event emitted when the app switch button is clicked
+     *
+     * @since 3.0.0
+     */
+    openAppSwitch;
+    /**
+     * Event emitted when the settings button is clicked
+     * @since 3.0.0
+     */
+    openSettings;
+    /**
+     * Event emitted when the about button is clicked
+     * @since 3.0.0
+     */
+    openAbout;
+    showPinned = false;
+    mapExpand = true;
+    breakpoint = 'lg';
+    itemsScrollShadowTop = false;
+    itemsScrollShadowBottom = false;
+    applicationLayoutContext;
+    isDarkMode = false;
+    isTransitionDisabled = false;
+    themeNameDisposer;
+    // FBC IAM workaround #488
+    isVisible = (elm) => {
+        return (elm.style.display !== 'none' &&
+            elm.parentElement?.parentElement?.style.display !== 'none');
+    };
     get popoverArea() {
         return this.hostElement.shadowRoot.querySelector('#popover-area');
     }
@@ -144,8 +164,8 @@ export class Menu {
         return this.hostElement.querySelector('.about-news');
     }
     get aboutNewsPopover() {
-        var _a;
-        return ((_a = document.querySelector('ix-menu-about-news')) !== null && _a !== void 0 ? _a : this.hostElement.querySelector('ix-menu-about-news'));
+        return (document.querySelector('ix-menu-about-news') ??
+            this.hostElement.querySelector('ix-menu-about-news'));
     }
     get aboutTab() {
         return this.hostElement.shadowRoot.querySelector('#aboutAndLegal');
@@ -183,9 +203,6 @@ export class Menu {
         applicationLayoutService.onChange.on((breakpoint) => this.onBreakpointChange(breakpoint));
         this.onBreakpointChange(applicationLayoutService.breakpoint, true);
         this.updateThemeState();
-        this.themeDisposer = themeSwitcher.schemaChanged.on(() => {
-            this.updateThemeState();
-        });
         this.themeNameDisposer = themeSwitcher.themeChanged.on(() => {
             this.updateThemeState();
         });
@@ -197,9 +214,7 @@ export class Menu {
         this.appendFragments();
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.themeDisposer) === null || _a === void 0 ? void 0 : _a.dispose();
-        (_b = this.themeNameDisposer) === null || _b === void 0 ? void 0 : _b.dispose();
+        this.themeNameDisposer?.dispose();
     }
     updateThemeState() {
         this.isDarkMode = themeSwitcher.getMode() === 'dark';
@@ -227,10 +242,9 @@ export class Menu {
         this.appendAboutNewsPopover();
     }
     getAboutPopoverVerticalPosition() {
-        var _a;
         const heightArrow = 12;
         const offsetArrow = 6;
-        const rectAbout = ((_a = this.aboutTab) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {
+        const rectAbout = this.aboutTab?.getBoundingClientRect() || {
             bottom: -window.innerHeight,
             height: 0,
         };
@@ -239,20 +253,18 @@ export class Menu {
         return convertToRemString(offset);
     }
     appendAboutNewsPopover() {
-        var _a;
         if (!this.aboutNewsPopover || !this.about) {
             return;
         }
         this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();
-        if (!((_a = this.popoverArea) === null || _a === void 0 ? void 0 : _a.contains(this.aboutNewsPopover))) {
+        if (!this.popoverArea?.contains(this.aboutNewsPopover)) {
             const showMore = () => {
-                var _a;
-                if (((_a = this.aboutNewsPopover) === null || _a === void 0 ? void 0 : _a.aboutItemLabel) && this.about) {
-                    this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;
+                if (this.aboutNewsPopover?.activeAboutTabKey && this.about) {
+                    this.about.activeTabKey = this.aboutNewsPopover.activeAboutTabKey;
                     this.toggleAbout(true);
                 }
             };
-            this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));
+            this.aboutNewsPopover.addEventListener('showMore', () => showMore());
             document.body.appendChild(this.aboutNewsPopover);
         }
     }
@@ -375,12 +387,6 @@ export class Menu {
             this.about.show = false;
         }
     }
-    getCollapseText() {
-        return this.mapExpand ? this.i18nCollapse : this.i18nExpand;
-    }
-    getCollapseIcon() {
-        return this.mapExpand ? iconNavigationLeft : iconNavigationRight;
-    }
     isMenuItemClicked(event) {
         if (event.target instanceof HTMLElement) {
             return event.target.tagName === 'IX-MENU-ITEM';
@@ -438,22 +444,16 @@ export class Menu {
     isHiddenFromViewport() {
         return this.breakpoint === 'sm' && this.expand === false;
     }
-    sidebarToggle() {
-        this.mapExpandChange.emit(this.mapExpand);
-        this.hostElement.dispatchEvent(new ApplicationSidebarToggleEvent(this.mapExpand));
-    }
     async showAppSwitch() {
-        var _a;
         const { defaultPrevented } = this.openAppSwitch.emit();
         if (defaultPrevented) {
             return;
         }
-        if ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) {
+        if (this.applicationLayoutContext?.appSwitchConfig) {
             showAppSwitch(this.applicationLayoutContext.appSwitchConfig);
         }
     }
     render() {
-        var _a, _b;
         let overlayLabel;
         if (this.showSettings) {
             overlayLabel = this.i18nSettings;
@@ -461,44 +461,44 @@ export class Menu {
         else if (this.showAbout) {
             overlayLabel = this.i18nLegal;
         }
-        return (h(Host, { key: 'f110c37a48450f5c2503f7d22aa2ec89ab3e2a2b', class: {
+        return (h(Host, { key: '1aebc8f8c0ac09e4a0a01f30ba769f1974958cf9', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, h("nav", { key: 'ba8f5ebdf01e3971944d12bf7559920a30de630b', "aria-label": this.applicationName, class: {
+            }, slot: "menu" }, h("nav", { key: 'b23730df88ec2d76724c4c7920fa6993a24fe91b', "aria-label": this.applicationName, class: {
                 menu: true,
                 expanded: this.expand,
-            } }, h("div", { key: 'ded53cf75d43d7470b414c9a79470c08e84cdafc', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: 'affe4bd90b5d89e8bbfe84e0721f47c089f939c1', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
-            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (h("ix-icon-button", { key: 'eb491ad150526feffc353aa3bc0facad5c022f59', onClick: () => {
+            } }, h("div", { key: 'dc91ac2d007de0e97ed1ba9d3a6d103b5b05868f', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: '19aff43787702fd8cdca2a3d51981538f0d36b38', breakpoint: this.breakpoint, expanded: this.expand, "i18n-expand": this.i18nExpand, "i18n-collapse": this.i18nCollapse, pinned: this.pinned, class: "menu-expand-icon", onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
+            this.applicationLayoutContext?.appSwitchConfig && (h("ix-icon-button", { key: '7adcf4e6a6436022dcfc61c7512a94229fbcc4bb', onClick: () => {
                 this.showAppSwitch();
-            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: 'c011962c8617669d512a5819d8fdd0426b889597', id: "menu-tabs", style: {
+            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: '387bac9de2fec8e79fabf6d1130c4d6b22dd9258', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '0a2bf780cff17852ebee73236cb9361cda69eae7', class: "tabs-shadow-container" }, h("div", { key: '89e91e3921a72d4fc38fbcfd9bcf7b1dc86b65f3', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: 'bec523ac0b17d45d73c007cd7ca82193c8e25668', class: "tabs-shadow-container" }, h("div", { key: 'c69d499b1aac3d5ff2ce3cbacaea89f96873f94b', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), h("div", { key: '576ea9d478068b06c44fdaa0d0ea85291351f50e', class: {
+            } }), h("div", { key: '1bf7e6500511ee7404101d110161f105e5f43fe9', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '93207553be4b6ea5c2ee10e4199dea100c571632', class: "menu-avatar" }, h("slot", { key: '9a10f155385fe009c6af637bd2b21162670df08f', name: "ix-menu-avatar" })), h("slot", { key: 'c6ee9852f5c1891f6192654ce0a8b2dc5a6828f7', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: 'd9ddb5926de8faf8c5bbea2f87e4799c0467884b', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '99f9994c254898d82ad98665881531105b298138', class: "menu-avatar" }, h("slot", { key: '180c3410631d5a78132b89b7e11db4f13d238867', name: "ix-menu-avatar" })), h("slot", { key: '38a1e0ea97e9889dc160be815c46ee4558d4078f', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: '338d93258911beb1bf3f98a8df7bde1d24b45b60', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), h("div", { key: '2bbe5f772c8d634b57a8d5d0e042bca39d85fb34', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), h("div", { key: '815181e90fd29218e43d04b1ea4dfc5f9c68cec6', class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
-            }, icon: iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings, "aria-expanded": this.showSettings.toString(), "aria-controls": "menu-overlay" })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: iconLightDark, label: this.i18nToggleTheme, role: "switch", "aria-checked": this.isDarkMode.toString() })) : null, h("div", { key: 'cb0c86250320b703ef016097137c3f95cf274163', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '5c22657279384b7fbc82b3728156ec11cc4494e7', name: "bottom" })), h("div", { key: 'a34655b9fbfeecadd26ed3b73b340b56c8481c63', id: "popover-area" }), this.enableMapExpand || ((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.sidebar) ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null, this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, icon: iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings, "aria-expanded": this.showSettings.toString(), "aria-controls": "menu-overlay" })) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: iconLightDark, label: this.i18nToggleTheme, role: "switch", "aria-checked": this.isDarkMode.toString() })) : null, h("div", { key: '5f90277b54ee68fa14b41d210eb52bcb04b72dbb', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: 'f11a76b89e66b2b5d7068011ee3b076b6464a87a', name: "bottom" })), h("div", { key: '737628853dc8a66a8b3b79bfe835efb37f24bb92', id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal, "aria-expanded": this.showAbout.toString(), "aria-controls": "menu-overlay" })) : null), h("section", { key: '596600987bd9b245b44d7d725ba06a0266869fc0', id: "menu-overlay", "aria-label": overlayLabel, class: {
+            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal, "aria-expanded": this.showAbout.toString(), "aria-controls": "menu-overlay" })) : null), h("section", { key: '756fd1ff3ec02a40f6fd9cfabee6e3b2c9815e7c', id: "menu-overlay", "aria-label": overlayLabel, class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, h("div", { key: '13b89027a0240f22981b9e6ae41f3e62dbcdc8c9', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: 'a9e17821bc23eef2717fff6a3c9514b54b2bf00f', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
+            } }, h("div", { key: '472fa2edfcbad244714c8e77ae30a1a3be0e82c8', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '220927c09a1e9f9d280cf096870b89e30a9131c3', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
     }
     static get is() { return "ix-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -574,29 +574,6 @@ export class Menu {
                 "attribute": "enable-toggle-theme",
                 "defaultValue": "false"
             },
-            "enableMapExpand": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "enable-map-expand",
-                "defaultValue": "false"
-            },
             "applicationName": {
                 "type": "string",
                 "mutable": false,
@@ -636,29 +613,6 @@ export class Menu {
                 "attribute": "application-description",
                 "defaultValue": "''"
             },
-            "i18nExpandSidebar": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Since 4.2.0. Will be removed in 5.0.0. The expand button is now hidden from screen readers with aria-hidden=\"true\"."
-                        }],
-                    "text": "Accessibility i18n label for the burger menu of the sidebar"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "i18n-expand-sidebar",
-                "defaultValue": "'Expand sidebar'"
-            },
             "expand": {
                 "type": "boolean",
                 "mutable": true,
@@ -797,7 +751,7 @@ export class Menu {
                 "setter": false,
                 "reflect": false,
                 "attribute": "i18n-expand",
-                "defaultValue": "' Expand'"
+                "defaultValue": "'Expand'"
             },
             "i18nCollapse": {
                 "type": "string",

package/dist/collection/components/menu-about/menu-about.css

@@ -185,6 +185,22 @@ a {
   color: var(--theme-color-primary);
 }
 
+/*
+* SPDX-FileCopyrightText: 2024 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.
+*/
+/*
+* SPDX-FileCopyrightText: 2024 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.
+*/
 :host {
   display: block;
   background-color: var(--theme-nav-overlay--background);
@@ -194,6 +210,53 @@ a {
   width: 100%;
   height: 100%;
 }
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host {
+  /* width */
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host {
+  /* Track */
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host {
+  /* Handle */
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host {
+  /* Handle on hover */
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host .about-header {
   display: flex;
   justify-content: space-between;
@@ -208,7 +271,4 @@ a {
 }
 :host ix-tabs {
   margin-bottom: 1.5rem;
-}
-:host ix-menu-about-item {
-  display: none;
 }