@siemens/ix 5.0.0 → 5.1.1

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

@@ -14,12 +14,18 @@ import { createMutationObserver } from "../utils/mutation-observer";
 import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
 import { hasKeyboardMode } from "../utils/internal/mixins/setup.mixin";
 import { DefaultMixins } from "../utils/internal/component";
+import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
 import { getComposedPath } from "../utils/shadow-dom";
 import { makeRef } from "../utils/make-ref";
 import { dropdownController } from "../dropdown/dropdown-controller";
+import { createSequentialId } from "../utils/uuid";
 const DefaultIxMenuItemHeight = 40;
 const DefaultAnimationTimeout = 150;
-export class MenuCategory extends Mixin(...DefaultMixins) {
+let categorySequenceId = 0;
+/**
+ * @slot default - Menu items in the category.
+ */
+export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
         super();
     }
@@ -48,11 +54,17 @@ export class MenuCategory extends Mixin(...DefaultMixins) {
     showItems = false;
     showDropdown = false;
     nestedItems = [];
+    /** @internal */
+    async setTabIndex(value) {
+        await this.categoryParentRef.current?.setTabIndex(value);
+    }
     observer;
     menuItemsContainer;
     ixMenu;
     dropdownRef = makeRef();
     categoryParentRef = makeRef();
+    categoryId = createSequentialId('ix-menu-category-', categorySequenceId++);
+    focusFirstItemOnDropdownOpen = false;
     isNestedItemActive() {
         return this.getNestedItems().some((item) => item.active);
     }
@@ -63,6 +75,13 @@ export class MenuCategory extends Mixin(...DefaultMixins) {
         const items = this.getNestedItems();
         return items.length * DefaultIxMenuItemHeight;
     }
+    focusFirstItem() {
+        const items = this.getNestedItems();
+        const firstItem = items[0];
+        if (firstItem) {
+            requestAnimationFrameNoNgZone(() => firstItem.focus());
+        }
+    }
     onExpandCategory(showItems) {
         if (showItems) {
             this.animateFadeIn();
@@ -123,6 +142,50 @@ export class MenuCategory extends Mixin(...DefaultMixins) {
         }
         this.showMenuItemDropdown();
     }
+    onDropdownShowChange(dropdownShow) {
+        if (dropdownShow) {
+            return;
+        }
+        const activeElement = document.activeElement;
+        const isFocused = getComposedPath(activeElement).includes(this.hostElement);
+        if (hasKeyboardMode() && isFocused) {
+            // Ugly workaround to restore focus to the category after the dropdown is closed,
+            // because focus gets lost when the dropdown is removed from the DOM.
+            // This is needed to ensure keyboard users can continue navigating after closing the dropdown with the keyboard.
+            requestAnimationFrameNoNgZone(() => requestAnimationFrameNoNgZone(() => this.hostElement.focus()));
+        }
+    }
+    onDropdownShowChanged(dropdownShown) {
+        this.showDropdown = dropdownShown;
+        if (!dropdownShown) {
+            this.focusFirstItemOnDropdownOpen = false;
+            return;
+        }
+        if (this.focusFirstItemOnDropdownOpen) {
+            this.focusFirstItemOnDropdownOpen = false;
+            this.focusFirstItem();
+        }
+    }
+    onDropdownFocusOut() {
+        requestAnimationFrameNoNgZone(() => {
+            const activeElement = document.activeElement;
+            if (!activeElement) {
+                return;
+            }
+            const activePath = getComposedPath(activeElement);
+            const focusInsideCategory = activePath.includes(this.hostElement);
+            const focusInsideDropdown = !!this.dropdownRef.current &&
+                activePath.includes(this.dropdownRef.current);
+            if (!focusInsideCategory && !focusInsideDropdown) {
+                this.showDropdown = false;
+            }
+        });
+    }
+    onNestedItemSelect() {
+        if (!this.ixMenu?.expand) {
+            this.showDropdown = false;
+        }
+    }
     onCategoryClick(event) {
         event.stopPropagation();
         this.handleCategoryVisibility();
@@ -131,14 +194,21 @@ export class MenuCategory extends Mixin(...DefaultMixins) {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             const isClosingPanel = this.ixMenu?.expand && this.showItems;
+            const isCollapsedMenu = !this.ixMenu?.expand;
             this.handleCategoryVisibility();
             if (!isClosingPanel) {
-                const items = this.getNestedItems();
-                const firstItem = items[0];
-                if (firstItem) {
-                    requestAnimationFrameNoNgZone(() => requestAnimationFrameNoNgZone(() => firstItem.focus()));
+                if (isCollapsedMenu) {
+                    // In collapsed mode, wait until the dropdown is fully shown before moving focus.
+                    this.focusFirstItemOnDropdownOpen = true;
+                    return;
                 }
+                this.focusFirstItem();
             }
+            return;
+        }
+        if (event.key === 'ArrowDown' && this.showItems) {
+            event.preventDefault();
+            this.focusFirstItem();
         }
     }
     onMenuItemsKeyDown(event) {
@@ -170,7 +240,17 @@ export class MenuCategory extends Mixin(...DefaultMixins) {
             items[(currentIndex - 1 + items.length) % items.length].focus();
         }
     }
+    suppressAnchorWrapperTabStops() {
+        Array.from(this.hostElement.querySelectorAll(':scope > a'))
+            .filter((a) => a.querySelector('ix-menu-item'))
+            .forEach((a) => {
+            if (a.getAttribute('tabindex') !== '-1') {
+                a.setAttribute('tabindex', '-1');
+            }
+        });
+    }
     onNestedItemsChanged(mutations) {
+        this.suppressAnchorWrapperTabStops();
         const oldNestedItemsLength = this.nestedItems.length;
         this.nestedItems = this.getNestedItems();
         if (this.showItems &&
@@ -195,6 +275,7 @@ export class MenuCategory extends Mixin(...DefaultMixins) {
         return this.menuExpand && (this.showItems || this.isNestedItemActive());
     }
     componentWillLoad() {
+        super.componentWillLoad();
         const closestMenu = closestIxMenu(this.hostElement);
         if (!closestMenu) {
             throw Error('ix-menu-category can only be used as a child of ix-menu');
@@ -233,42 +314,33 @@ export class MenuCategory extends Mixin(...DefaultMixins) {
         });
     }
     disconnectedCallback() {
+        super.disconnectedCallback();
         if (this.observer) {
             this.observer.disconnect();
         }
     }
     render() {
-        return (h(Host, { key: 'e775a045a05963df9bf1cad8af41cde3ba0024fc', class: {
+        const inheritedA11yWithoutRole = {
+            ...this.inheritAriaAttributes,
+        };
+        delete inheritedA11yWithoutRole.role;
+        return (h(Host, { key: 'b13967728dd925cf23d59525997326e3cae1d883', class: {
                 expanded: this.showItems,
-            }, onPointerEnter: () => {
+            }, onIxMenuCategoryItemSelect: () => this.onNestedItemSelect(), onPointerEnter: () => {
                 this.showMenuItemDropdown();
             }, onPointerLeave: (event) => {
                 if (event.pointerType === 'touch') {
                     return;
                 }
                 this.hideMenuItemDropdown();
-            } }, h("ix-menu-item", { key: '55481bde3309e80823c3e1efcbd079b4c149607f', "aria-haspopup": 'true', "aria-expanded": this.showItems || this.showDropdown ? 'true' : 'false', ref: this.categoryParentRef, class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onKeyDown: (event) => this.onKeyDown(event), tooltipText: this.tooltipText, isCategory: true }, h("span", { key: '5d12c486d64aa42633db1250016d8471c9f4d63a', class: "category" }, h("span", { key: '3a7b5b3cb0bb27a140ea0d3522aa4b0735aff00b', class: "category-text" }, this.label), h("ix-icon", { key: '2fffdfadde0f86b453746cd785a69bcf72523f92', name: iconChevronDownSmall, class: {
+            } }, h("ix-menu-item", { key: '83115990b35fd94f74c054fca190e85c8ec62010', ...inheritedA11yWithoutRole, "aria-haspopup": 'menu', "aria-expanded": this.showItems || this.showDropdown ? 'true' : 'false', id: this.categoryId, ref: this.categoryParentRef, class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onKeyDown: (event) => this.onKeyDown(event), tooltipText: this.tooltipText, isCategory: true, menuCategoryLabel: this.label }, h("span", { key: 'bbd0030c37c6931a742b9b95aff810b6bf54ba3d', class: "category" }, h("span", { key: '2de8dabb7dcad0b3d6d431961dc78f9fee737f9c', class: "category-text" }, this.label), h("ix-icon", { key: 'dadaef3f921796b4af1bdc2127d5cf85ae8d3d50', name: iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            }, "aria-hidden": "true" }))), h("div", { key: '005a89c89004c7cf7a7f6621fbcdcf19f1d98fb6', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            }, "aria-hidden": "true" }))), h("div", { key: '4f05e07d484bcafccacb6e52b16ed1d428fafd6e', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            }, role: "menu", onKeyDown: (e) => this.onMenuItemsKeyDown(e) }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: 'b8fbeea12f40ad51d832be57644672f69a2c61fb', ref: this.dropdownRef, hostRole: "menu", "aria-label": this.label, closeBehavior: 'both', show: this.showDropdown, onShowChange: ({ detail: dropdownShow }) => {
-                if (dropdownShow) {
-                    return;
-                }
-                const activeElement = document.activeElement;
-                const isFocused = getComposedPath(activeElement).includes(this.hostElement);
-                if (hasKeyboardMode() && isFocused) {
-                    // Ugly workaround to restore focus to the category after the dropdown is closed,
-                    // because focus gets lost when the dropdown is removed from the DOM.
-                    // This is needed to ensure keyboard users can continue navigating after closing the dropdown with the keyboard.
-                    requestAnimationFrameNoNgZone(() => requestAnimationFrameNoNgZone(() => this.hostElement.focus()));
-                }
-            }, onShowChanged: ({ detail: dropdownShown }) => {
-                this.showDropdown = dropdownShown;
-            }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
+            }, role: "menu", "aria-labelledby": this.categoryId, onKeyDown: (e) => this.onMenuItemsKeyDown(e) }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '9574783d83639a13003ef13a01aea92ae85b61c7', ref: this.dropdownRef, hostRole: "menu", "aria-label": this.label, closeBehavior: 'both', show: this.showDropdown, onShowChange: ({ detail }) => this.onDropdownShowChange(detail), onShowChanged: ({ detail }) => this.onDropdownShowChanged(detail), class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
             }, focusHost: this.hostElement, onClick: (e) => {
                 if (e.target instanceof HTMLElement) {
@@ -279,14 +351,7 @@ export class MenuCategory extends Mixin(...DefaultMixins) {
                         e.preventDefault();
                     }
                 }
-            }, onFocusout: (event) => {
-                const relatedTarget = event.relatedTarget;
-                if (relatedTarget &&
-                    relatedTarget !== this.hostElement &&
-                    !this.hostElement.contains(relatedTarget)) {
-                    this.showDropdown = false;
-                }
-            } }, h("ix-dropdown-item", { key: 'cec1683aa36e2c5db9abe748e6fcb2f901b61028', class: 'category-dropdown-header', tabindex: -1, "aria-hidden": "true" }, h("ix-typography", { key: 'ea96b374abdc5e8dd79ac993782749bc217bfd0a', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: 'aa0cae17e78ddcaa6db6822c3f3e27ca35977e07' }), h("slot", { key: '8fe5b81ea58e6f9ec316c06f002a5ff84552d3ff' }))));
+            }, onFocusout: () => this.onDropdownFocusOut() }, h("ix-dropdown-item", { key: '6844b7dd6cea9c3290060a0fc3b5d726272f99a5', class: 'category-dropdown-header', tabindex: -1, "aria-hidden": "true" }, h("ix-typography", { key: 'f06f3b478802a827589415b5025085c6f2825326', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: 'a0f540c48caaf3ea256edfc12c73ec8a95c7e210' }), h("slot", { key: '9dd47bc65bd63d610c936fe5f5c196764704443d' }))));
     }
     static get is() { return "ix-menu-category"; }
     static get encapsulation() { return "shadow"; }
@@ -413,6 +478,34 @@ export class MenuCategory extends Mixin(...DefaultMixins) {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "setTabIndex": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{

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

@@ -7,17 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { iconDocument } from "@siemens/ix-icons/icons";
-import { h, Host } from "@stencil/core";
-import { a11yBoolean, a11yHostAttributes } from "../utils/a11y";
+import { h, Host, Mixin, } from "@stencil/core";
+import { DefaultMixins } from "../utils/internal/component";
+import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
 import { makeRef } from "../utils/make-ref";
 import { menuController } from "../utils/menu-service/menu-service";
 import { createMutationObserver } from "../utils/mutation-observer";
 import { createSequentialId } from "../utils/uuid";
+import { a11yBoolean } from "../utils/a11y";
 let sequenceId = 0;
 /**
- * @slot menu-item-label Custom label
+ * @slot default - Custom menu item label.
  */
-export class MenuItem {
+export class MenuItem extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
+    constructor() {
+        super();
+    }
     /**
      * Label of the menu item. Will also be used as tooltip text
      */
@@ -74,10 +79,17 @@ export class MenuItem {
     rel;
     /** @internal */
     isCategory = false;
+    /** @internal */
+    menuCategoryLabel;
     hostElement;
     tooltip;
-    ariaHiddenTooltip = false;
     menuExpanded = false;
+    isInMenuContext = false;
+    hostTabIndex = -1;
+    /** @internal */
+    async setTabIndex(value) {
+        this.hostTabIndex = value;
+    }
     internalItemId = createSequentialId('ix-menu-item-', sequenceId++);
     buttonRef = makeRef();
     isHostedInsideCategory = false;
@@ -86,8 +98,18 @@ export class MenuItem {
         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 = menuController.nativeElement?.expand || false;
         this.menuExpandedDisposer = menuController.expandChange.on((expand) => (this.menuExpanded = expand));
@@ -101,9 +123,6 @@ export class MenuItem {
                 this.label ??
                 this.hostElement.textContent ??
                 undefined;
-        this.ariaHiddenTooltip =
-            this.tooltipText === this.label ||
-                this.tooltipText === this.hostElement.textContent;
     }
     connectedCallback() {
         this.observer.observe(this.hostElement, {
@@ -113,6 +132,7 @@ export class MenuItem {
         });
     }
     disconnectedCallback() {
+        super.disconnectedCallback();
         if (this.observer) {
             this.observer.disconnect();
         }
@@ -130,10 +150,31 @@ export class MenuItem {
             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() {
@@ -148,29 +189,35 @@ export class MenuItem {
                 slot: 'bottom',
             };
         }
-        const hostA11y = a11yHostAttributes(this.hostElement);
+        const { role: externalRole, ...inheritedA11yWithoutRole } = this.inheritAriaAttributes;
+        const effectiveRole = this.getEffectiveRole(externalRole);
         const commonAttributes = {
             class: 'tab',
-            ...hostA11y,
+            ...inheritedA11yWithoutRole,
         };
         const menuContent = [
-            this.icon && (h("ix-icon", { key: 'ede9e4b1fa44d9e04403a52de0d76d68b2632c1d', class: 'tab-icon', name: this.icon, "aria-hidden": "true" })),
+            this.icon && (h("ix-icon", { key: 'ba48d5b4a4fa45012b05c0c48f93b95406fcf668', class: 'tab-icon', name: this.icon, "aria-hidden": "true" })),
             this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null,
-            h("span", { key: '4a936a1ec12559ea2aad0f18bfffa2c63113377e', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: '342c1995e13133c3f359e1d485ac604aea4f49ae' })),
+            h("span", { key: '7d851e398086593b8a950004fa309aa8e85ab293', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: 'f57c890242be1a0ea5bdd52b807ff17a54e01dae' })),
         ];
-        return (h(Host, { key: 'df2f4deb5b013e2d34b971ee532c9d0a10859372', class: {
+        const ariaLabel = this.getAriaLabel();
+        return (h(Host, { key: '52c4274a785714911f6c55be30aef4e32d83eac6', 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 ? (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 ? (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)) : (h("button", { ...commonAttributes, ref: this.buttonRef, onKeyDown: (e) => this.handleCategoryKeyDown(e) }, menuContent)), h("ix-tooltip", { key: '58a9cc7702130b9a1c023ec55b85bda0cff48ea7', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
+            }, "aria-disabled": a11yBoolean(this.disabled), "aria-label": ariaLabel, "aria-current": this.active ? 'page' : undefined }, menuContent)) : (h("button", { ...commonAttributes, role: effectiveRole, tabIndex: this.isInMenuContext || this.isCategory
+                ? this.hostTabIndex
+                : undefined, ref: this.buttonRef, onKeyDown: (e) => this.handleCategoryKeyDown(e), "aria-disabled": a11yBoolean(this.disabled), "aria-label": ariaLabel, "aria-current": this.active ? 'page' : undefined }, menuContent)), h("ix-tooltip", { key: '20b8f84afa73ab32c01a1afb65b74eab640f1b36', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": "true", "aria-labelledby": this.internalItemId }, this.tooltip)));
     }
     static get is() { return "ix-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -442,14 +489,65 @@ export class MenuItem {
                 "reflect": false,
                 "attribute": "is-category",
                 "defaultValue": "false"
+            },
+            "menuCategoryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "menu-category-label"
             }
         };
     }
     static get states() {
         return {
             "tooltip": {},
-            "ariaHiddenTooltip": {},
-            "menuExpanded": {}
+            "menuExpanded": {},
+            "isInMenuContext": {},
+            "hostTabIndex": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setTabIndex": {
+                "complexType": {
+                    "signature": "(value: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
         };
     }
     static get elementRef() { return "hostElement"; }

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

@@ -8,6 +8,9 @@
  */
 import { iconClose } from "@siemens/ix-icons/icons";
 import { forceUpdate, h, Host, } from "@stencil/core";
+/**
+ * @slot default - Settings overlay content.
+ */
 export class MenuSettings {
     hostElement;
     /**
@@ -76,10 +79,10 @@ export class MenuSettings {
         forceUpdate(this);
     }
     render() {
-        return (h(Host, { key: '848591f6959a970ef5f9aaf19f5536c5339d7110', slot: 'ix-menu-settings', class: {
+        return (h(Host, { key: '64e54666ce3cbe2673deb203de0a1ca5cd79a784', slot: 'ix-menu-settings', class: {
                 show: this.show,
                 ['legacy-tabs']: !this.suppressLegacyTabs,
-            } }, h("div", { key: 'c956793c63354f9da18c454b2c8eff7a87ee7e6b', class: 'settings-header' }, h("h2", { key: '9997f069ad979c9e355557e1ae821f6fe9bc2f57', class: "text-h2" }, this.label), h("ix-icon-button", { key: '289a2f65031d5787d4a4ea80a955f2e371e6b0ae', variant: "tertiary", size: "24", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
+            } }, h("div", { key: '11b48733718704c04e86ba7c5ffcf62122a8a0f7', class: 'settings-header' }, h("h2", { key: '356d053dcc9d393bb9eb5d369778347f4042d7f6', class: "text-h2" }, this.label), h("ix-icon-button", { key: '29755f5ecc2ff8539985662e4a6d3143984b5618', variant: "tertiary", size: "24", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
                 name: 'ix-menu-settings',
                 nativeEvent: e,
             }) })), !this.suppressLegacyTabs ? (h("ix-tab-set", null, h("ix-tabs", { activeTabKey: this.activeTabKey }, this.items.map(({ label, tabKey }) => (h("ix-tab-item", { tabKey: tabKey, selected: tabKey === this.activeTabKey, label: label })))), h("slot", null))) : (h("slot", null))));

package/dist/collection/components/menu-settings-item/menu-settings-item.js

@@ -10,6 +10,7 @@ import { h, Host, Mixin, } from "@stencil/core";
 import { BaseTabMixin } from "../tab-item/tab.mixin";
 /**
  * @deprecated since 5.0.0, use ix-tab-item instead of ix-menu-settings-item
+ * @slot default - Settings menu item content.
  */
 export class MenuSettingsItem extends Mixin(BaseTabMixin) {
     constructor() {
@@ -31,7 +32,7 @@ export class MenuSettingsItem extends Mixin(BaseTabMixin) {
         });
     }
     render() {
-        return (h(Host, { key: '8e3648fc2d1a95f5ae6bae557df77544183980c4' }, h("ix-tab-panel", { key: '731b83b26520bc07a61c27699ae19095f71098f5', tabKey: this.tabKey }, h("slot", { key: 'a9452a0ea918f74ad222d2b5d1da6a74a387e283' }))));
+        return (h(Host, { key: 'fa1bed6ac28c778764d18f1074f77aa172501927' }, h("ix-tab-panel", { key: '7a2e3342ffb372598f84c7d11310c178dac6c455', tabKey: this.tabKey }, h("slot", { key: '94818c886c66864c067b6ac3a079c6938c87d6f4' }))));
     }
     static get is() { return "ix-menu-settings-item"; }
     static get properties() {

package/dist/collection/components/message-bar/message-bar.js

@@ -9,6 +9,9 @@
 import { h, Host, } from "@stencil/core";
 import { animate } from "animejs";
 import { iconClose, iconError, iconInfo, iconNotification, iconSuccess, iconWarning, iconWarningRhomb, } from "@siemens/ix-icons/icons";
+/**
+ * @slot default - Message content.
+ */
 export class MessageBar {
     /**
      * Specifies the type of the alert.
@@ -62,7 +65,7 @@ export class MessageBar {
         }
     }
     render() {
-        return (h(Host, { key: '22bbc355ba3fca3209fab0491ae186f59bb64b02' }, h("div", { key: 'a84b47392ddfd8a8b0863ce99aa17985fbf39b4d', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '6528c7bd5a8b484858c97ca0e072704dcf37ad1c', color: this.color, name: this.icon }), h("div", { key: '07eed52e33baa107ebdebb10ef478d775901faf3', class: "message-content" }, h("slot", { key: 'cd5981304f6998d55edc38fa3fb0c67e139b8278' })), !this.persistent && (h("ix-icon-button", { key: 'ac6a235e1080bbb942c102f7c0e5c04672176557', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
+        return (h(Host, { key: 'e2bbf611295113afe3ed6822a52d8d79e18be29b' }, h("div", { key: '3c05cd3b7309cde0ab647c0c7a24a142028e4880', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '214fc88a38ad4d8c9006faf170cd009afcffecb6', color: this.color, name: this.icon }), h("div", { key: 'b964803205ff9939d5046d71038bf51f17a981bc', class: "message-content" }, h("slot", { key: '5bad561a856f58bc9ba25e6add50d7354d16bb37' })), !this.persistent && (h("ix-icon-button", { key: 'e3d36f9b646257cd338201d3bfb371a23b377772', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }

package/dist/collection/components/modal/modal.js

@@ -13,6 +13,9 @@ import Animation from "../utils/animation";
 import { tryFocusElement } from "../utils/focus/focus-utilities";
 import { IX_MODAL_AUTOFOCUS_SELECTOR } from "../utils/modal/modal";
 import { waitForElement } from "../utils/waitForElement";
+/**
+ * @slot default - Modal sections and content.
+ */
 export class Modal {
     ariaAttributes = {};
     isMouseDownInsideDialog = false;
@@ -197,12 +200,12 @@ export class Modal {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '0a2ab5326fb5cbadf863bd8e3a38cce5be19c0df', class: {
+        return (h(Host, { key: '28c4d56440766ceccf75d3cafc229c6d640c5e8e', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.hideBackdrop,
                 'align-center': this.centered,
                 'non-blocking': this.isNonBlocking,
-            } }, h("div", { key: '2e433b7bdb5aac5e38e96e725742868ca94f11be', class: "dialog-backdrop" }, h("dialog", { key: '39497dada9d70730da3b25f8693945c0daf3592f', "aria-modal": a11yBoolean(!this.isNonBlocking), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: 'f028e5780d37451c282a0eae8615cae3b5996b56', class: "dialog-backdrop" }, h("dialog", { key: '754e476f2e39b3ca4d73d776c1ef430b28a62088', "aria-modal": a11yBoolean(!this.isNonBlocking), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
                 modal: true,
                 [`modal-size-${this.size}`]: true,
             }, onClose: () => this.dismissModal(), onMouseDown: (event) => this.onMouseDown(event), onMouseUp: (event) => this.onMouseUp(event), onKeyDown: (e) => {
@@ -214,7 +217,7 @@ export class Modal {
             }, onCancel: (e) => {
                 e.preventDefault();
                 void this.dismissModal();
-            } }, h("slot", { key: 'c8523949dec6428eb1c840240f5ac49e240c80c4' })))));
+            } }, h("slot", { key: 'a3aa26a26d244f4795b910764a316e6f8d71e255' })))));
     }
     static get is() { return "ix-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-content/modal-content.js

@@ -7,9 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Modal body content.
+ */
 export class ModalContent {
     render() {
-        return (h(Host, { key: '91592e2a2681326a99cafd1709581a29ecf48d61' }, h("slot", { key: '259ab95ce19cafdc7dbbe67c362e424590fe02c8' })));
+        return (h(Host, { key: '090635e20ba7a130412a560db4329a045f13a8dd' }, h("slot", { key: '71a6820650c0997dc09f309fdf70188b936f7434' })));
     }
     static get is() { return "ix-modal-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-footer/modal-footer.js

@@ -7,9 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Modal footer actions.
+ */
 export class ModalFooter {
     render() {
-        return (h(Host, { key: 'bab5a43ac92a13caca46d241091c27c773990aba' }, h("slot", { key: 'fefe386636d486a7e1d4b35a23eafe0d04b7270c' })));
+        return (h(Host, { key: 'fbfacdb34450ce3cfbab374acfb09126c731d57d' }, h("slot", { key: 'f07cfe797970762196e720bb99294bf1b708e688' })));
     }
     static get is() { return "ix-modal-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-header/modal-header.css

@@ -77,6 +77,7 @@
 }
 :host .modal-title {
   flex-grow: 1;
+  overflow-wrap: anywhere;
 }
 :host .modal-close {
   align-self: flex-start;

package/dist/collection/components/modal-header/modal-header.js

@@ -9,6 +9,9 @@
 import { h, Host, } from "@stencil/core";
 import { closestPassShadow } from "../utils/shadow-dom";
 import { iconClose } from "@siemens/ix-icons/icons";
+/**
+ * @slot default - Modal header content.
+ */
 export class ModalHeader {
     hostElement;
     /**
@@ -62,7 +65,7 @@ export class ModalHeader {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (h(Host, { key: 'a0e2437fa84c933cb035e3f756f35c852a629411' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: 'ed879eadde24489324a857524b2dcdda2daf553d', class: "modal-title" }, h("ix-typography", { key: 'f6058f099376e581e2c9d34f880dca129cb83e04', format: "h5" }, h("slot", { key: '25d3602826270d81e5d8c423fc197bc0e5fa6209' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (h(Host, { key: '9be78d439e0240e95098199371f8c17a5c64cb49' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '7fb5bb78edaf86f7b26a7a6868e761f07870e1e0', class: "modal-title" }, h("ix-typography", { key: 'd350c239268ef025e5d99a84bd58f662518b2d85', format: "h5" }, h("slot", { key: 'f48e9917464a73998b49a799a792cf0eacc43ecc' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     static get is() { return "ix-modal-header"; }
     static get encapsulation() { return "shadow"; }