@siemens/ix 5.0.0 → 5.1.0

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

@@ -14,12 +14,15 @@ 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;
+export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
         super();
     }
@@ -48,11 +51,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 +72,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 +139,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 +191,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 +237,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 +272,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 +311,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: '593b29c5f5cf2e63cc6c1492f6f90fc7bddb3bd8', 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: '35bfb38e90317bf2459bce59860ba0f74e8174f1', ...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: '2ea2e12dad87e97ebb8ebac718cae45309e42eb2', class: "category" }, h("span", { key: '9ffeb1f8b799f59228a43d1d5c8c850a45ce3c25', class: "category-text" }, this.label), h("ix-icon", { key: '47cceda4005228068e13a36addcd60c01a1d1efc', 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: '5dff5d2e58da8af82e56d927cdec4c2d8d52ee67', 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: '17963ff7cb90f56843d13b8d10a34d2efe56427d', 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 +348,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: '76a24a1e7fdaa4cb8263fd3fc2a0f65e3bdb9674', class: 'category-dropdown-header', tabindex: -1, "aria-hidden": "true" }, h("ix-typography", { key: '5d11df71fc842c0968c9069340b0f208500e0d25', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: '3bb9b931667a4ed2ee32a230ffe6a7f8bae8e2b7' }), h("slot", { key: 'c37ca19af5209ec8129527e0c41c62f2b3f5d809' }))));
     }
     static get is() { return "ix-menu-category"; }
     static get encapsulation() { return "shadow"; }
@@ -413,6 +475,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
  */
-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: '64307467f954284272278cca78a80ae4f9c3b95a', 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: '1fd2d64f4f8487cb81ad7b981d4f8a0c5ebfb312', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: '571294f967aae798c6a63f3fbcd46aa4453e1263' })),
         ];
-        return (h(Host, { key: 'df2f4deb5b013e2d34b971ee532c9d0a10859372', class: {
+        const ariaLabel = this.getAriaLabel();
+        return (h(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 ? (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: '94f61e508c2c4653a40462f0a3e86ee86356e687', 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

@@ -76,10 +76,10 @@ export class MenuSettings {
         forceUpdate(this);
     }
     render() {
-        return (h(Host, { key: '848591f6959a970ef5f9aaf19f5536c5339d7110', slot: 'ix-menu-settings', class: {
+        return (h(Host, { key: '05f98cf864c61b155446992713cd31408c3182fa', 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: 'a119043ecdf9710d73186650b91ee67677000e5b', class: 'settings-header' }, h("h2", { key: '289bef2c46bf0856677dd810b589048db3a4161c', class: "text-h2" }, this.label), h("ix-icon-button", { key: '9c38c31c8f46b777de1dba7a48e27e03870c11bb', 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

@@ -31,7 +31,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: '48c4f2a2e07a0dc0006d6cac683869439b06faa0' }, h("ix-tab-panel", { key: '04e2fb1c063f897c6c3982645fc977eb1ce7ea82', tabKey: this.tabKey }, h("slot", { key: '34874508577ce1773af32ee09c73b2b9219a2d1e' }))));
     }
     static get is() { return "ix-menu-settings-item"; }
     static get properties() {

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

@@ -62,7 +62,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: '958c28d0bae524a1041a8118d9313972139f1f4a' }, h("div", { key: '8e619088864f0475559795ac309e1fbfc8bc1bb3', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: 'e21c8715adb8ec071aebb393896b20ae41f0cab5', color: this.color, name: this.icon }), h("div", { key: '060da1ce54e588666ec3c8be27b322bef8cbc85d', class: "message-content" }, h("slot", { key: '0d7485fcf2b06989e6a385050622236ad71d96e3' })), !this.persistent && (h("ix-icon-button", { key: 'dab714f06d4f20c379c661f638bffe809778d1d8', 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

@@ -197,12 +197,12 @@ export class Modal {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '0a2ab5326fb5cbadf863bd8e3a38cce5be19c0df', class: {
+        return (h(Host, { key: 'b40ae3d2505764659681551aaab811b4c8bfcc6f', 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: '5985f073d9b74b75838b3e592fe5254dfec3ea11', class: "dialog-backdrop" }, h("dialog", { key: '372dd029f7d41622559568d99fe28608e1806cab', "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 +214,7 @@ export class Modal {
             }, onCancel: (e) => {
                 e.preventDefault();
                 void this.dismissModal();
-            } }, h("slot", { key: 'c8523949dec6428eb1c840240f5ac49e240c80c4' })))));
+            } }, h("slot", { key: '405cfdcead12f17c5bc3534d9d160fddd69106a7' })))));
     }
     static get is() { return "ix-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class ModalContent {
     render() {
-        return (h(Host, { key: '91592e2a2681326a99cafd1709581a29ecf48d61' }, h("slot", { key: '259ab95ce19cafdc7dbbe67c362e424590fe02c8' })));
+        return (h(Host, { key: 'bdcc31e92318ad5f9b10a5ece22fc01f2506e200' }, h("slot", { key: 'a7af3070d7d9766ea450e4a75417b4ae0f1137d3' })));
     }
     static get is() { return "ix-modal-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class ModalFooter {
     render() {
-        return (h(Host, { key: 'bab5a43ac92a13caca46d241091c27c773990aba' }, h("slot", { key: 'fefe386636d486a7e1d4b35a23eafe0d04b7270c' })));
+        return (h(Host, { key: '6d10985e1922b6bffbc82d758fc2c5d64e0af761' }, h("slot", { key: '438d07e19d688048e331c64ca62f08c67b7ce0ae' })));
     }
     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

@@ -62,7 +62,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: '2840ba385c7ad659786f48564bf307c2290049ca' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '5e6ce56e0e76e527a3e71e66ea2a4ec2d22a2ed7', class: "modal-title" }, h("ix-typography", { key: 'cd8c3d8cdfbdfed8a1ab2285328c88985843a8b5', format: "h5" }, h("slot", { key: '1de70c68751fb8ece53890adf94b95c2bfcbd66d' }))), !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"; }

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

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalLoading {
     render() {
-        return (h(Host, { key: 'dac65dc36124b038728e843240d126432d85e987' }, h("ix-spinner", { key: '639371732304b733f79cf8498e46442ff6a442df', variant: "primary" }), h("span", { key: 'a9bf046b8c00552a4135cc5046789027abd1803e', class: 'loading-text' }, h("slot", { key: '362185ef3806ddb57c90f6fdf776cb3563baf903' }))));
+        return (h(Host, { key: 'dc1f6ceb8a80533b033c8a942ad226a827797f5e' }, h("ix-spinner", { key: 'cba70b4acd7faac7076ccab3505ba3bf77b43294', variant: "primary" }), h("span", { key: '7e391743781992496039e4d71e2344c79bc134df', class: 'loading-text' }, h("slot", { key: '5c08f0076249ca3d16b80e2d107cf2fb975e7e5b' }))));
     }
     static get is() { return "ix-modal-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.css

@@ -387,7 +387,7 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;
@@ -498,7 +498,7 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;

package/dist/collection/components/pagination/pagination.js

@@ -199,7 +199,7 @@ export class Pagination {
         }
     }
     render() {
-        return (h(Host, { key: '8ee910b6e83aa8ea187f6ae5fb488fec20610976' }, h("ix-icon-button", { key: 'c2d3870465e0882cfb6b6920060fedbadaf4bda6', disabled: !this.count || this.selectedPage === 0, variant: "subtle-tertiary", icon: iconChevronLeftSmall, onClick: () => this.decrease(), "aria-label": this.ariaLabelChevronLeftIconButton }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { format: "body" }, this.i18nPage), h("input", { "aria-label": this.ariaLabelPageSelection, class: "ix-form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (event) => {
+        return (h(Host, { key: 'f1a9fa92967db3108ec88ea95ebd27baeb11a801' }, h("ix-icon-button", { key: '6cd70b1d8cf6e8a65056ef4af191d31152bce887', disabled: !this.count || this.selectedPage === 0, variant: "subtle-tertiary", icon: iconChevronLeftSmall, onClick: () => this.decrease(), "aria-label": this.ariaLabelChevronLeftIconButton }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { format: "body" }, this.i18nPage), h("input", { "aria-label": this.ariaLabelPageSelection, class: "ix-form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (event) => {
                 const inputElement = event.target;
                 this.handlePageInput(inputElement.value);
             }, onKeyDown: (event) => {
@@ -213,7 +213,7 @@ export class Pagination {
             }, onBlur: (e) => {
                 const inputElement = e.target;
                 inputElement.value = (this.selectedPage + 1).toString();
-            } }), h("span", { class: "total-count" }, h("ix-typography", { format: "body" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: '9f129654625aabdf2d325559938ffdc2ddb866bb', disabled: !this.count || this.selectedPage === this.count - 1, variant: "subtle-tertiary", icon: iconChevronRightSmall, onClick: () => this.increase(), "aria-label": this.ariaLabelChevronRightIconButton }), this.advanced && !this.hideItemCount && (h("span", { key: '470c8a4fddb59f8af7d7faa7bcb663a7505898c6', class: "item-count" }, h("ix-typography", { key: '08e9e48a77c86cc5edde0df9dbbe34ab3ed86f91', format: "body" }, this.i18nItems), h("ix-select", { key: '3a770912a515cc0739ab54007c8fb46f2b8a9aff', hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), h("span", { class: "total-count" }, h("ix-typography", { format: "body" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: '85cefcfb2c0e1bdfcff3bb442bab8a7de5f61ecc', disabled: !this.count || this.selectedPage === this.count - 1, variant: "subtle-tertiary", icon: iconChevronRightSmall, onClick: () => this.increase(), "aria-label": this.ariaLabelChevronRightIconButton }), this.advanced && !this.hideItemCount && (h("span", { key: '4bb3f7a6c527a2c9ad29a2d9cffa3cff15c1df0e', class: "item-count" }, h("ix-typography", { key: '8df743fae7237037043cdbae1295a23c797e3a8e', format: "body" }, this.i18nItems), h("ix-select", { key: 'd4b5d9def930824bb7630849e9c7f61beb6e6924', hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
                 const count = Number.parseInt(Array.isArray(e.detail) ? e.detail[0] : e.detail);
                 this.itemCountChanged.emit(count);
             } }, this.itemCountOptions.map((option) => (h("ix-select-item", { label: `${option}`, value: `${option}` }))))))));