@siemens/ix 5.0.0 → 5.1.0

package/dist/cjs/ix-menu-item.cjs.entry.js

@@ -1,30 +1,24 @@
 'use strict';
 
-var index = require('./index-BKQkUbyE.js');
-var index$1 = require('./index-Dw-NwUuT.js');
-var a11y = require('./a11y-C_6YiIMa.js');
+var index = require('./index-DnclGKUw.js');
+var index$1 = require('./index-CwJ-mkQd.js');
+var component = require('./component-DgA9FH-W.js');
+var inheritAriaAttributes_mixin = require('./inherit-aria-attributes.mixin-EyRU0cDO.js');
 var makeRef = require('./make-ref-CHsa3FY7.js');
-var menuService = require('./menu-service-D_QsHUgR.js');
+var menuService = require('./menu-service-DBg-0e5W.js');
 var mutationObserver = require('./mutation-observer-DE0YMfYu.js');
+var uuid = require('./uuid-Bo2QzEg9.js');
+var a11y = require('./a11y-_XjpTo2w.js');
+require('./focus-utilities-5SZMxJg4.js');
+require('./shadow-dom-BL5F7RFW.js');
 require('./typed-event-Bw4IfJC0.js');
 
-/*
- * 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.
- */
-const createSequentialId = (prefix, sequenceId) => {
-    return `${prefix}-${sequenceId++}`;
-};
-
 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{all:unset;box-sizing:border-box;display:flex;position:relative;align-items:center;height:var(--ix-menu-item-height, 3rem);width:100%;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 .tab-icon{color:var(--theme-nav-item-primary-icon--color);position:relative;pointer-events:none}:host .tab:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:-1px}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.5rem}: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);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{display:block;color:var(--theme-nav-item-primary--color);margin:0 1rem 0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}: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>.tab-icon{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)}:host(.tab-nested) .tab{flex-direction:row;padding-left:1.375rem}:host(.tab-nested) .tab .notification{position:relative;top:0;left:0;padding-left:0.5rem}:host(.tab-nested) .tab .tab-icon{padding-left:0.5rem;padding-right:0.5rem}:host(.tab-nested) .tab .tab-text{margin-left:0.5rem}:host(.tab-nested) .tab::before{display:none}`;
 
 let sequenceId = 0;
-const MenuItem = class {
+const MenuItem = class extends index.Mixin(...component.DefaultMixins, inheritAriaAttributes_mixin.InheritAriaAttributesMixin) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
     }
     /**
@@ -83,11 +77,18 @@ const MenuItem = class {
     rel;
     /** @internal */
     isCategory = false;
+    /** @internal */
+    menuCategoryLabel;
     get hostElement() { return index.getElement(this); }
     tooltip;
-    ariaHiddenTooltip = false;
     menuExpanded = false;
-    internalItemId = createSequentialId('ix-menu-item-', sequenceId++);
+    isInMenuContext = false;
+    hostTabIndex = -1;
+    /** @internal */
+    async setTabIndex(value) {
+        this.hostTabIndex = value;
+    }
+    internalItemId = uuid.createSequentialId('ix-menu-item-', sequenceId++);
     buttonRef = makeRef.makeRef();
     isHostedInsideCategory = false;
     menuExpandedDisposer;
@@ -95,8 +96,18 @@ const MenuItem = class {
         this.setTooltip();
     });
     componentWillLoad() {
+        super.componentWillLoad();
         this.isHostedInsideCategory =
             !!this.hostElement.closest('ix-menu-category');
+        const rootNode = this.hostElement.getRootNode();
+        const isInMenuShadowDOM = rootNode instanceof ShadowRoot &&
+            rootNode.host?.tagName?.toLowerCase() === 'ix-menu';
+        const directParent = this.hostElement.parentElement;
+        const isMenuChild = !this.isHostedInsideCategory &&
+            (directParent?.tagName?.toLowerCase() === 'ix-menu' ||
+                (directParent?.tagName?.toLowerCase() === 'a' &&
+                    directParent?.parentElement?.tagName?.toLowerCase() === 'ix-menu'));
+        this.isInMenuContext = isInMenuShadowDOM || isMenuChild;
         this.onIconChange();
         this.menuExpanded = menuService.menuController.nativeElement?.expand || false;
         this.menuExpandedDisposer = menuService.menuController.expandChange.on((expand) => (this.menuExpanded = expand));
@@ -110,9 +121,6 @@ const MenuItem = class {
                 this.label ??
                 this.hostElement.textContent ??
                 undefined;
-        this.ariaHiddenTooltip =
-            this.tooltipText === this.label ||
-                this.tooltipText === this.hostElement.textContent;
     }
     connectedCallback() {
         this.observer.observe(this.hostElement, {
@@ -122,6 +130,7 @@ const MenuItem = class {
         });
     }
     disconnectedCallback() {
+        super.disconnectedCallback();
         if (this.observer) {
             this.observer.disconnect();
         }
@@ -139,10 +148,31 @@ const MenuItem = class {
             this.returnFocusToParentCategoryMenuItem();
         }
     }
+    getAriaLabel() {
+        if ('aria-label' in this.inheritAriaAttributes) {
+            return this.inheritAriaAttributes['aria-label'];
+        }
+        const hasDistinctTooltip = this.tooltipText &&
+            this.tooltipText !== this.label &&
+            this.tooltipText !== this.hostElement.textContent;
+        if (hasDistinctTooltip) {
+            return `${this.label ?? this.menuCategoryLabel ?? this.hostElement.textContent ?? ''} ${this.tooltipText}`;
+        }
+        return undefined;
+    }
+    getEffectiveRole(externalRole) {
+        const internalRole = this.isHostedInsideCategory || this.isCategory || this.isInMenuContext
+            ? 'menuitem'
+            : undefined;
+        return externalRole ?? internalRole;
+    }
     returnFocusToParentCategoryMenuItem() {
-        const categoryMenuItem = this.hostElement
-            .closest('ix-menu-category')
-            ?.shadowRoot?.querySelector('ix-menu-item.category-parent');
+        const categoryElement = this.hostElement.closest('ix-menu-category');
+        const categoryMenuItem = categoryElement?.shadowRoot?.querySelector('ix-menu-item.category-parent');
+        categoryElement?.dispatchEvent(new CustomEvent('ixMenuCategoryItemSelect', {
+            bubbles: true,
+            composed: true,
+        }));
         categoryMenuItem?.focus();
     }
     render() {
@@ -157,32 +187,191 @@ const MenuItem = class {
                 slot: 'bottom',
             };
         }
-        const hostA11y = a11y.a11yHostAttributes(this.hostElement);
+        const { role: externalRole, ...inheritedA11yWithoutRole } = this.inheritAriaAttributes;
+        const effectiveRole = this.getEffectiveRole(externalRole);
         const commonAttributes = {
             class: 'tab',
-            ...hostA11y,
+            ...inheritedA11yWithoutRole,
         };
         const menuContent = [
-            this.icon && (index.h("ix-icon", { key: 'ede9e4b1fa44d9e04403a52de0d76d68b2632c1d', class: 'tab-icon', name: this.icon, "aria-hidden": "true" })),
+            this.icon && (index.h("ix-icon", { key: '64307467f954284272278cca78a80ae4f9c3b95a', class: 'tab-icon', name: this.icon, "aria-hidden": "true" })),
             this.notifications ? (index.h("div", { class: "notification" }, index.h("div", { class: "pill" }, this.notifications))) : null,
-            index.h("span", { key: '4a936a1ec12559ea2aad0f18bfffa2c63113377e', id: this.internalItemId, class: "tab-text text-default" }, this.label, index.h("slot", { key: '342c1995e13133c3f359e1d485ac604aea4f49ae' })),
+            index.h("span", { key: '1fd2d64f4f8487cb81ad7b981d4f8a0c5ebfb312', id: this.internalItemId, class: "tab-text text-default" }, this.label, index.h("slot", { key: '571294f967aae798c6a63f3fbcd46aa4453e1263' })),
         ];
-        return (index.h(index.Host, { key: 'df2f4deb5b013e2d34b971ee532c9d0a10859372', class: {
+        const ariaLabel = this.getAriaLabel();
+        return (index.h(index.Host, { key: 'b3583fa356cc996792724ff03627f1a2fc6f9abd', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
                 active: this.active,
                 'tab-nested': this.isHostedInsideCategory,
                 'ix-focusable': !this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : null, tabIndex: this.disabled ? -1 : 0, role: this.isHostedInsideCategory ? 'menuitem' : undefined, ...extendedAttributes }, this.href ? (index.h("a", { ...commonAttributes, href: this.disabled ? undefined : this.href, target: this.target, rel: this.rel, ref: this.buttonRef, onKeyDown: (e) => this.handleCategoryKeyDown(e), onClick: (e) => {
+            }, ...extendedAttributes }, this.href ? (index.h("a", { ...commonAttributes, role: effectiveRole, href: this.disabled ? undefined : this.href, target: this.target, rel: this.rel, tabIndex: this.isInMenuContext || this.isCategory
+                ? this.hostTabIndex
+                : undefined, ref: this.buttonRef, onKeyDown: (e) => this.handleCategoryKeyDown(e), onClick: (e) => {
                 if (this.disabled) {
                     e.preventDefault();
                     e.stopPropagation();
                 }
-            } }, menuContent)) : (index.h("button", { ...commonAttributes, ref: this.buttonRef, onKeyDown: (e) => this.handleCategoryKeyDown(e) }, menuContent)), index.h("ix-tooltip", { key: '58a9cc7702130b9a1c023ec55b85bda0cff48ea7', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11y.a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
+            }, "aria-disabled": a11y.a11yBoolean(this.disabled), "aria-label": ariaLabel, "aria-current": this.active ? 'page' : undefined }, menuContent)) : (index.h("button", { ...commonAttributes, role: effectiveRole, tabIndex: this.isInMenuContext || this.isCategory
+                ? this.hostTabIndex
+                : undefined, ref: this.buttonRef, onKeyDown: (e) => this.handleCategoryKeyDown(e), "aria-disabled": a11y.a11yBoolean(this.disabled), "aria-label": ariaLabel, "aria-current": this.active ? 'page' : undefined }, menuContent)), index.h("ix-tooltip", { key: '94f61e508c2c4653a40462f0a3e86ee86356e687', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": "true", "aria-labelledby": this.internalItemId }, this.tooltip)));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {
+        "role": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-activedescendant": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-atomic": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-autocomplete": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-braillelabel": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-brailleroledescription": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-busy": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-checked": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-colcount": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-colindex": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-colindextext": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-colspan": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-controls": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-current": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-describedby": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-description": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-details": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-disabled": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-errormessage": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-expanded": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-flowto": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-haspopup": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-hidden": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-invalid": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-keyshortcuts": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-label": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-labelledby": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-level": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-live": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-multiline": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-multiselectable": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-orientation": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-owns": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-placeholder": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-posinset": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-pressed": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-readonly": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-relevant": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-required": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-roledescription": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-rowcount": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-rowindex": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-rowindextext": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-rowspan": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-selected": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-setsize": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-sort": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-valuemax": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-valuemin": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-valuenow": [{
+                "ariaAttributeChanged": 0
+            }],
+        "aria-valuetext": [{
+                "ariaAttributeChanged": 0
+            }],
         "icon": [{
                 "onIconChange": 0
             }]

package/dist/cjs/ix-menu-settings-item.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BKQkUbyE.js');
-var tab_mixin = require('./tab.mixin-DObUK6A4.js');
+var index = require('./index-DnclGKUw.js');
+var tab_mixin = require('./tab.mixin-C1KwKb64.js');
 
 const MenuSettingsItem = class extends index.Mixin(tab_mixin.BaseTabMixin) {
     constructor(hostRef) {
@@ -25,7 +25,7 @@ const MenuSettingsItem = class extends index.Mixin(tab_mixin.BaseTabMixin) {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '8e3648fc2d1a95f5ae6bae557df77544183980c4' }, index.h("ix-tab-panel", { key: '731b83b26520bc07a61c27699ae19095f71098f5', tabKey: this.tabKey }, index.h("slot", { key: 'a9452a0ea918f74ad222d2b5d1da6a74a387e283' }))));
+        return (index.h(index.Host, { key: '48c4f2a2e07a0dc0006d6cac683869439b06faa0' }, index.h("ix-tab-panel", { key: '04e2fb1c063f897c6c3982645fc977eb1ce7ea82', tabKey: this.tabKey }, index.h("slot", { key: '34874508577ce1773af32ee09c73b2b9219a2d1e' }))));
     }
     static get watchers() { return {
         "label": [{

package/dist/cjs/ix-menu-settings.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BKQkUbyE.js');
-var index$1 = require('./index-Dw-NwUuT.js');
+var index = require('./index-DnclGKUw.js');
+var index$1 = require('./index-CwJ-mkQd.js');
 
 const menuSettingsCss = () => `.text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}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 ::-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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}: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:1rem}:host ix-tabs{margin-bottom:1.5rem}`;
 
@@ -78,10 +78,10 @@ const MenuSettings = class {
         index.forceUpdate(this);
     }
     render() {
-        return (index.h(index.Host, { key: '848591f6959a970ef5f9aaf19f5536c5339d7110', slot: 'ix-menu-settings', class: {
+        return (index.h(index.Host, { key: '05f98cf864c61b155446992713cd31408c3182fa', slot: 'ix-menu-settings', class: {
                 show: this.show,
                 ['legacy-tabs']: !this.suppressLegacyTabs,
-            } }, index.h("div", { key: 'c956793c63354f9da18c454b2c8eff7a87ee7e6b', class: 'settings-header' }, index.h("h2", { key: '9997f069ad979c9e355557e1ae821f6fe9bc2f57', class: "text-h2" }, this.label), index.h("ix-icon-button", { key: '289a2f65031d5787d4a4ea80a955f2e371e6b0ae', variant: "tertiary", size: "24", icon: index$1.iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
+            } }, index.h("div", { key: 'a119043ecdf9710d73186650b91ee67677000e5b', class: 'settings-header' }, index.h("h2", { key: '289bef2c46bf0856677dd810b589048db3a4161c', class: "text-h2" }, this.label), index.h("ix-icon-button", { key: '9c38c31c8f46b777de1dba7a48e27e03870c11bb', variant: "tertiary", size: "24", icon: index$1.iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
                 name: 'ix-menu-settings',
                 nativeEvent: e,
             }) })), !this.suppressLegacyTabs ? (index.h("ix-tab-set", null, index.h("ix-tabs", { activeTabKey: this.activeTabKey }, this.items.map(({ label, tabKey }) => (index.h("ix-tab-item", { tabKey: tabKey, selected: tabKey === this.activeTabKey, label: label })))), index.h("slot", null))) : (index.h("slot", null))));