@siemens/ix 5.2.0 → 5.2.1

package/dist/collection/components/icon-toggle-button/icon-toggle-button.css

@@ -361,6 +361,12 @@
   color: var(--theme-btn-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -423,6 +429,12 @@
   color: var(--theme-btn-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -485,6 +497,12 @@
   color: var(--theme-btn-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-tertiary--border-color--active);
+  background-color: var(--theme-btn-tertiary--background--active);
+  color: var(--theme-btn-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -547,6 +565,12 @@
   color: var(--theme-btn-subtle-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-primary--border-color--active);
+  background-color: var(--theme-btn-subtle-primary--background--active);
+  color: var(--theme-btn-subtle-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -609,6 +633,12 @@
   color: var(--theme-btn-subtle-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-secondary--border-color--active);
+  background-color: var(--theme-btn-subtle-secondary--background--active);
+  color: var(--theme-btn-subtle-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -671,6 +701,12 @@
   color: var(--theme-btn-subtle-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-tertiary--border-color--active);
+  background-color: var(--theme-btn-subtle-tertiary--background--active);
+  color: var(--theme-btn-subtle-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -733,6 +769,12 @@
   color: var(--theme-btn-danger-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-primary--border-color--active);
+  background-color: var(--theme-btn-danger-primary--background--active);
+  color: var(--theme-btn-danger-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -795,6 +837,12 @@
   color: var(--theme-btn-danger-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-secondary--border-color--active);
+  background-color: var(--theme-btn-danger-secondary--background--active);
+  color: var(--theme-btn-danger-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -857,6 +905,12 @@
   color: var(--theme-btn-danger-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-tertiary--border-color--active);
+  background-color: var(--theme-btn-danger-tertiary--background--active);
+  color: var(--theme-btn-danger-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }

package/dist/collection/components/input/input.util.js

@@ -148,7 +148,12 @@ export function onInputFocus(comp, currentValue) {
 export function onInputBlurWithChange(comp, input, currentValue) {
     onInputBlur(comp, input);
     if (comp.initialValue !== currentValue) {
-        comp.ixChange.emit(currentValue);
+        if (currentValue === undefined) {
+            comp.ixChange.emit();
+        }
+        else {
+            comp.ixChange.emit(currentValue);
+        }
         comp.initialValue = currentValue;
     }
 }

package/dist/collection/components/input/number-input.js

@@ -156,13 +156,13 @@ export class NumberInput {
     initialValue;
     disposableChangesAndVisibilityObservers;
     onValueChange(newValue) {
-        this.updateFormInternalValue(newValue);
+        this.updateOptionalFormInternalValue(newValue);
     }
     updateClassMappings(result) {
         mapValidationResult(this, result);
     }
     componentWillLoad() {
-        this.updateFormInternalValue(this.value);
+        this.updateOptionalFormInternalValue(this.value);
     }
     connectedCallback() {
         this.disposableChangesAndVisibilityObservers =
@@ -195,6 +195,9 @@ export class NumberInput {
         this.valueChange.emit(this.allowEmptyValueChange ? value : (value ?? 0));
     }
     updateFormInternalValue(value) {
+        this.updateOptionalFormInternalValue(value);
+    }
+    updateOptionalFormInternalValue(value) {
         const formValue = value !== undefined && value !== null ? value.toString() : '';
         this.formInternals.setFormValue(formValue);
         this.value = value;
@@ -215,11 +218,11 @@ export class NumberInput {
             return;
         const inputValue = this.inputRef.current.value;
         const parsedValue = this.convertNumberStringToFloat(inputValue);
-        this.updateFormInternalValue(parsedValue);
+        this.updateOptionalFormInternalValue(parsedValue);
         if (parsedValue !== undefined && this.inputRef.current) {
             this.inputRef.current.value = this.formatValue(parsedValue);
         }
-        this.updateFormInternalValue(parsedValue);
+        this.updateOptionalFormInternalValue(parsedValue);
         onInputBlurWithChange(this, this.inputRef.current, parsedValue);
         this.touched = true;
     };
@@ -337,13 +340,13 @@ export class NumberInput {
     }
     render() {
         const showStepperButtons = this.showStepperButtons && (this.disabled || this.readonly) === false;
-        return (h(Host, { key: '0c2af6d414c208f7ef1d32e09fe74ee2c5d4950a', class: {
+        return (h(Host, { key: 'd7300e47cdcb3c0923b9a72874ed62e4bb1461d3', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '9319df314ff21bb6c812143ba94237531a538b43', id: this.numberInputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '0c34666c47d8c40fd7e5f2028025d64ce67f436f', class: {
+            } }, h("ix-field-wrapper", { key: '2f970edda1da48d2075ab520e17668e3a0bce8ab', id: this.numberInputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '20b3fe528654eba138465af45233bfc2e842b7de', class: {
                 'input-wrapper': true,
                 'show-stepper-buttons': !!this.showStepperButtons,
-            } }, h(SlotStart, { key: '9408c97e2d796ae15548715ad754b88bf5d1e9b0', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '30a21cb357e62ca8d5a6858674fdbf303b3ffa3b', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, step: this.step, min: this.min, max: this.max, pattern: this.pattern, type: 'number', isInvalid: this.isInvalid, required: this.required, value: this.formatValue(this.value), placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), onKeyDown: (event) => this.handleKeyDown(event), onBeforeInput: (event) => this.handleBeforeInput(event), onPaste: (event) => this.handlePaste(event), onFocus: () => onInputFocus(this, this.value), onEnterKeyChange: (event) => onEnterKeyChangeEmit(event, this, this.value), valueChange: this.handleInputChange, updateFormInternalValue: (value) => {
+            } }, h(SlotStart, { key: '37d19aa438f13b76faf7dc79d3a64ac1a4c856e8', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: '89493aabca135cb7a6ee332d017c3d973fe44ef7', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, step: this.step, min: this.min, max: this.max, pattern: this.pattern, type: 'number', isInvalid: this.isInvalid, required: this.required, value: this.formatValue(this.value), placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), onKeyDown: (event) => this.handleKeyDown(event), onBeforeInput: (event) => this.handleBeforeInput(event), onPaste: (event) => this.handlePaste(event), onFocus: () => onInputFocus(this, this.value), onEnterKeyChange: (event) => onEnterKeyChangeEmit(event, this, this.value), valueChange: this.handleInputChange, updateFormInternalValue: (value) => {
                 const parsedValue = this.convertNumberStringToFloat(value);
                 const isScientificNotation = this.isScientificNotation(value.trim());
                 if (isScientificNotation) {
@@ -353,12 +356,12 @@ export class NumberInput {
                     this.value = parsedValue;
                 }
                 else {
-                    this.updateFormInternalValue(parsedValue);
+                    this.updateOptionalFormInternalValue(parsedValue);
                 }
-            }, onBlur: this.handleBlur, form: this.formInternals.form ?? undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: '260756858357f96bf468348af5907e5fac7bd471', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("div", { key: '90264008de7532c8f6220abcea4fd6b69bd1d605', class: {
+            }, onBlur: this.handleBlur, form: this.formInternals.form ?? undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: 'f23f2c74423302aab3a4257858e5dac5b27fd5d1', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("div", { key: '98452a75169f12a0d156d07601fd8305e4cc1129', class: {
                 'number-stepper-container': true,
                 'container-hidden': !showStepperButtons,
-            } }, h("ix-icon-button", { key: '35ad3af7d1c6925dd014f721165ff68e5f768bb5', variant: "subtle-tertiary", icon: iconMinus, size: "16", class: "number-stepper-button step-minus", "aria-label": "decrement number", onClick: () => this.handleStepOperation('down') }), h("ix-icon-button", { key: '627f6b42c4dab1517bfca5059daebb0d5d8d363d', variant: "subtle-tertiary", icon: iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => this.handleStepOperation('up') })))))));
+            } }, h("ix-icon-button", { key: '1245a51baa0f92b48b75caae24bc04f7ca159fa3', variant: "subtle-tertiary", icon: iconMinus, size: "16", class: "number-stepper-button step-minus", "aria-label": "decrement number", onClick: () => this.handleStepOperation('down') }), h("ix-icon-button", { key: '491dec7ae6b0f7a709f6e0a8c7ffcf4c3a5fd3de', variant: "subtle-tertiary", icon: iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => this.handleStepOperation('up') })))))));
     }
     static get is() { return "ix-number-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -234,6 +234,12 @@
   color: var(--theme-btn-subtle-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-tertiary--border-color--active);
+  background-color: var(--theme-btn-subtle-tertiary--background--active);
+  color: var(--theme-btn-subtle-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }

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

@@ -154,10 +154,22 @@ export class Menu {
         return this.hostElement.shadowRoot.querySelector('.menu');
     }
     get menuItemsContainer() {
-        return this.menu.querySelector('.tabs');
+        const menuItemsContainer = this.menu?.querySelector('.tabs');
+        if (!menuItemsContainer) {
+            throw new Error('Menu items container not found');
+        }
+        return menuItemsContainer;
     }
     get menuNavigationContainer() {
-        return this.menu.querySelector('.menu-navigation');
+        const menu = this.menu;
+        if (!menu) {
+            throw new Error('Menu element not found');
+        }
+        const menuNavigationContainer = menu.querySelector('.menu-navigation');
+        if (!menuNavigationContainer) {
+            throw new Error('Menu navigation container not found');
+        }
+        return menuNavigationContainer;
     }
     get overlayContainer() {
         return this.hostElement.shadowRoot.querySelector('.menu-overlay');
@@ -461,7 +473,11 @@ export class Menu {
     }
     animateOverlayFadeIn() {
         requestAnimationFrame(() => {
-            animate(this.overlayContainer, {
+            const overlayContainer = this.overlayContainer;
+            if (!overlayContainer) {
+                return;
+            }
+            animate(overlayContainer, {
                 duration: Animation.mediumTime,
                 backdropFilter: [0, 'blur(1rem)'],
                 translateX: ['-4rem', 0],
@@ -478,7 +494,12 @@ export class Menu {
     }
     animateOverlayFadeOut(onComplete) {
         requestAnimationFrame(() => {
-            animate(this.overlayContainer, {
+            const overlayContainer = this.overlayContainer;
+            if (!overlayContainer) {
+                onComplete();
+                return;
+            }
+            animate(overlayContainer, {
                 duration: Animation.mediumTime,
                 backdropFilter: ['blur(1rem)', 0],
                 translateX: [0, '-4rem'],
@@ -584,7 +605,8 @@ export class Menu {
         }
         event.preventDefault();
         if (isMenuNavigationFocused) {
-            let index = items.indexOf(this.lastFocusedMenuItem);
+            const lastFocusedMenuItem = this.lastFocusedMenuItem;
+            let index = lastFocusedMenuItem ? items.indexOf(lastFocusedMenuItem) : -1;
             if (event.key === 'Home') {
                 index = 0;
             }
@@ -643,32 +665,32 @@ export class Menu {
         else if (this.showAbout) {
             overlayLabel = this.i18nLegal;
         }
-        return (h(Host, { key: '5f6815b9abd45243d81f776dd85efd9aab656588', class: {
+        return (h(Host, { key: '449ca7a0f94dfaf9394fdeaaa6e56d974fe9aea8', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, h("nav", { key: '7015050bc75040e5b8108a69192a1bdcbff57846', "aria-label": this.applicationName, class: {
+            }, slot: "menu" }, h("nav", { key: 'bb57a2c2efc023be57d3d0038c60e62ab8eb6b49', "aria-label": this.applicationName, class: {
                 menu: true,
                 expanded: this.expand,
-            } }, h("div", { key: '3a114469dd32955a38cdca3a5e2e03cd5b2471db', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: '89f1c89efa15f828a257d275850dd26de4ee36b2', breakpoint: this.breakpoint, expanded: this.expand, "i18n-expand": this.i18nExpand, "i18n-collapse": this.i18nCollapse, pinned: this.pinned, class: "menu-expand-icon", onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
-            this.applicationLayoutContext?.appSwitchConfig && (h("ix-icon-button", { key: '469adcac94c793d8d23296a97037e33027ef6101', onClick: () => {
+            } }, h("div", { key: '0fcf66d57abbaad7223bdd9e5feb4b77bafd9431', class: "menu-buttons" }, this.breakpoint !== 'sm' && (h("ix-menu-expand-icon", { key: '89c12c219b3fb73b0de5dc6ae3d0c6d10bb64758', breakpoint: this.breakpoint, expanded: this.expand, "i18n-expand": this.i18nExpand, "i18n-collapse": this.i18nCollapse, pinned: this.pinned, class: "menu-expand-icon", onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
+            this.applicationLayoutContext?.appSwitchConfig && (h("ix-icon-button", { key: '51f3c2912ebb9b09c0af23079c66be10affd6960', onClick: () => {
                 this.showAppSwitch();
-            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: 'd7845606dc164ac287c1eb9fbbbc5182df51b3d6', role: "menubar", "aria-orientation": "vertical", "aria-label": this.i18nAriaLabelMenu, "aria-description": this.i18nNavigationHint, class: {
+            }, icon: iconApps, variant: "subtle-tertiary" }))), h("div", { key: '57d9f0e01c35828de9d4fad3cfdcca2fe517b7be', role: "menubar", "aria-orientation": "vertical", "aria-label": this.i18nAriaLabelMenu, "aria-description": this.i18nNavigationHint, class: {
                 'menu-navigation': true,
                 'menu-navigation--fill': this.shouldFillMenuNavigation,
-            }, tabIndex: 0, onKeyDown: (e) => this.handleMenuKeyDown(e), onFocusin: (e) => this.handleMenuFocusIn(e), onFocusout: () => this.resetRovingTabIndex() }, h("div", { key: 'a9b2b9fb987fe35e89c79d48084188d352186a5d', id: "menu-tabs", style: {
+            }, tabIndex: 0, onKeyDown: (e) => this.handleMenuKeyDown(e), onFocusin: (e) => this.handleMenuFocusIn(e), onFocusout: () => this.resetRovingTabIndex() }, h("div", { key: '59e46b324cbd55621602a2181226bc68d90387e0', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '9873540581ae3a56946aa25df1226f49cd8263dd', class: "tabs-shadow-container" }, h("div", { key: '455bab2823a08e5986b49cddee42f4ab6693fdf5', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, h("div", { key: '0de02c5ad2c3542e2d151749f03b3fb146bf2af8', class: "tabs-shadow-container" }, h("div", { key: '5e0d14aa34ed1eeb8e73d584736cadeb61bb8470', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), h("div", { key: 'f9bfcef1a3c9da55668a9fcd3d1525eb93027c7a', class: {
+            } }), h("div", { key: '7155a5ce55051a5af41d9d10846dea97c709195f', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '02b8d8fc871e63599af9da6671add34cdb6d44e9', class: "menu-avatar" }, h("slot", { key: 'd09ba12af87e88c37ef4191a93cf34e020b81697', name: "ix-menu-avatar" })), h("slot", { key: 'a5ba3a6342eb7fed67c335ce3e78827c5177cc00', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: 'e1a3055be90a4db89191c93fccd7639191864c92', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, h("div", { key: '517ce6c97a8849e3b5fe6fa94709961d405d4c31', class: "menu-avatar" }, h("slot", { key: '88390e60feda388e9a8111e79b3a6dc580b5c245', name: "ix-menu-avatar" })), h("slot", { key: 'd78f3b4d691725a0a40900f7ea1320ac9559337f', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { key: '148bb19403ce4054bfc9203daecf9170345cfb44', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), h("div", { key: '47ad3e4151532503b1615f09bd72ce817ac9cf78', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: '06f18d87d99292f05df3456f0b6fb51df2635a4d', name: "bottom", onSlotchange: () => this.updateBottomSlotState() })), h("div", { key: '538aa364e048d96ecca787ce0e38e8307af99ef5', class: "bottom-tab-divider" }), h("div", { key: '3452cd5dcea04f81b23fe9ee7d761dcd8f34936f', class: "menu-utility-controls" }, this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), h("div", { key: '39d0cf6c66d182b50f2e557a3b6a90da69d4ee79', onClick: (e) => this.onMenuItemsClick(e) }, h("slot", { key: 'cb990a09fb2691d7773acf6da632bce51376a93f', name: "bottom", onSlotchange: () => this.updateBottomSlotState() })), h("div", { key: '864ddfdd85e2262151aea546e9c9c8e754d70d58', class: "bottom-tab-divider" }), h("div", { key: '73ee7628abee073af7f8479e4aba31dc7319ba6d', class: "menu-utility-controls" }, this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
@@ -676,14 +698,14 @@ export class Menu {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal, "aria-haspopup": "dialog", "aria-expanded": this.showAbout.toString(), "aria-controls": "menu-overlay" })) : null)), h("div", { key: 'b5b1d58232534c81c79591bf0df1c5e508551394', id: "popover-area" })), h("section", { key: 'e8b48131b814163ab7c23637e55b6991b7e2a3cb', id: "menu-overlay", role: "dialog", "aria-label": overlayLabel, class: {
+            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal, "aria-haspopup": "dialog", "aria-expanded": this.showAbout.toString(), "aria-controls": "menu-overlay" })) : null)), h("div", { key: 'cb0da1257fdf75a09a878c5be78065f0936238f1', id: "popover-area" })), h("section", { key: 'c0baf0bd660819f8039a0ee8dcf4b7866e80f02c', id: "menu-overlay", role: "dialog", "aria-label": overlayLabel, class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, h("div", { key: '10e5137c8069b962c9114033c404f54bb9c60a63', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '975b5fdb40e76a00061e9e9744a53df4ea2055fb', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
+            } }, h("div", { key: '22297492769c540256fdf4b508ec8fec904886bf', class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { key: '271f5f0e12d342e41d439113e69d5820e885522b', class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
     }
     static get is() { return "ix-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -92,6 +92,9 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
     }
     animateFadeOut() {
         const slotHideThresholdMs = 25;
+        if (!this.menuItemsContainer) {
+            return;
+        }
         animate(this.menuItemsContainer, {
             duration: DefaultAnimationTimeout,
             easing: 'easeInSine',
@@ -108,11 +111,17 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
     animateFadeIn() {
         this.showItems = true;
         this.showDropdown = false;
+        if (!this.menuItemsContainer) {
+            return;
+        }
         animate(this.menuItemsContainer, {
             duration: DefaultAnimationTimeout,
             easing: 'easeInSine',
             opacity: [0, 1],
             maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],
+            onComplete: () => {
+                this.clearMenuItemsContainerStyles();
+            },
         });
     }
     showMenuItemDropdown() {
@@ -120,8 +129,9 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
             return;
         }
         this.closeOtherCategories.emit(this.categoryId);
-        if (this.dropdownRef.current) {
-            const ref = dropdownController.getDropdownById(this.dropdownRef.current.dataset.ixDropdown);
+        const dropdownId = this.dropdownRef.current?.dataset.ixDropdown;
+        if (dropdownId) {
+            const ref = dropdownController.getDropdownById(dropdownId);
             if (ref) {
                 dropdownController.present(ref);
             }
@@ -131,8 +141,9 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
         if (event?.detail === this.categoryId) {
             return;
         }
-        if (this.dropdownRef.current) {
-            const ref = dropdownController.getDropdownById(this.dropdownRef.current.dataset.ixDropdown);
+        const dropdownId = this.dropdownRef.current?.dataset.ixDropdown;
+        if (dropdownId) {
+            const ref = dropdownController.getDropdownById(dropdownId);
             if (ref) {
                 dropdownController.dismiss(ref);
             }
@@ -302,12 +313,12 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
         this.ixMenu?.addEventListener('expandChange', ({ detail: menuExpand }) => {
             this.menuExpand = menuExpand;
             if (!menuExpand) {
-                this.clearMenuItemStyles();
+                this.clearMenuItemsContainerStyles();
             }
             this.showItems = this.isCategoryItemListVisible();
         });
     }
-    clearMenuItemStyles() {
+    clearMenuItemsContainerStyles() {
         this.menuItemsContainer?.style.removeProperty('max-height');
         this.menuItemsContainer?.style.removeProperty('opacity');
     }
@@ -327,7 +338,7 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
             ...this.inheritAriaAttributes,
         };
         delete inheritedA11yWithoutRole.role;
-        return (h(Host, { key: '16e92aa31c97226ac110248e58ee4e8cf6e686cb', class: {
+        return (h(Host, { key: '0b54b4b98d9630b70224a566eb6b6abd86f69139', class: {
                 expanded: this.showItems,
             }, onIxMenuCategoryItemSelect: () => this.onNestedItemSelect(), onPointerEnter: () => {
                 this.showMenuItemDropdown();
@@ -336,14 +347,14 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
                     return;
                 }
                 this.hideMenuItemDropdown();
-            } }, h("ix-menu-item", { key: 'bfce7e95d4e994a53d20016b1108f26248c19de9', ...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: '1700d1f6d3c93e66ede8e96ab6f6ed126b255220', class: "category" }, h("span", { key: '6f56b33cbf5be34051d2466c9b99d012664ad1c9', class: "category-text" }, this.label), h("ix-icon", { key: 'b971ca95e49344cc3f60c72430701c6a8c06a21c', name: iconChevronDownSmall, class: {
+            } }, h("ix-menu-item", { key: '50e63e3d3002e6551336d04e608f8c3f7d51ff3d', ...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: 'feeb581bf824de38b25d164e9c8ddabb5afbea51', class: "category" }, h("span", { key: '096f4f45fadd93317bc67be9d449c1d610096155', class: "category-text" }, this.label), h("ix-icon", { key: '03c15e2624ed0580e513c2d361af37f02afd9c9c', name: iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            }, "aria-hidden": "true" }))), h("div", { key: '36f61ae3b2b0e52fa67380216d46b5386c446f30', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            }, "aria-hidden": "true" }))), h("div", { key: '4c2a38f8d7f63cb0d400983a70c2ca0cbc7d7da9', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            }, role: "menu", "aria-labelledby": this.categoryId, onKeyDown: (e) => this.onMenuItemsKeyDown(e) }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: 'a89d90584e563751f4e8c5705be94e2e52cd801a', 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: {
+            }, role: "menu", "aria-labelledby": this.categoryId, onKeyDown: (e) => this.onMenuItemsKeyDown(e) }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '541fc21db5cf52b0854a517525a636a8bd82d436', 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) {
@@ -354,7 +365,7 @@ export class MenuCategory extends Mixin(...DefaultMixins, InheritAriaAttributesM
                         e.preventDefault();
                     }
                 }
-            }, onFocusout: () => this.onDropdownFocusOut() }, h("ix-dropdown-item", { key: '437c4dfccac1e17d515cc1095b9b2d2ded520ae6', class: 'category-dropdown-header', tabindex: -1, "aria-hidden": "true" }, h("ix-typography", { key: 'a72c3c3f9db4d7330f7876518f2e0d26b3718f02', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: 'f743e54cbdbd27b56030f2a8f44073fe12ea1564' }), h("slot", { key: '37394a8edb8a0eeffa8b2ed4aaeb5d913249f2d5' }))));
+            }, onFocusout: () => this.onDropdownFocusOut() }, h("ix-dropdown-item", { key: 'b277224530668e11c773ba48ef6a9c16e65a872d', class: 'category-dropdown-header', tabindex: -1, "aria-hidden": "true" }, h("ix-typography", { key: '4727fd4f5311c9aacdf5bf6745c625906e0ea6e5', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: 'e9aef75055efc7168309041d981596a817e21fc9' }), h("slot", { key: '13c5d736008e47b8359877e3efb7d5db3c4b1018' }))));
     }
     static get is() { return "ix-menu-category"; }
     static get encapsulation() { return "shadow"; }

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

@@ -125,6 +125,7 @@ export class MenuItem extends Mixin(...DefaultMixins, InheritAriaAttributesMixin
                 undefined;
     }
     connectedCallback() {
+        super.connectedCallback();
         this.observer.observe(this.hostElement, {
             subtree: true,
             childList: true,
@@ -158,7 +159,10 @@ export class MenuItem extends Mixin(...DefaultMixins, InheritAriaAttributesMixin
             this.tooltipText !== this.label &&
             this.tooltipText !== this.hostElement.textContent;
         if (hasDistinctTooltip) {
-            return `${this.label ?? this.menuCategoryLabel ?? this.hostElement.textContent ?? ''} ${this.tooltipText}`;
+            return `${this.label ??
+                this.menuCategoryLabel ??
+                this.hostElement.textContent ??
+                ''} ${this.tooltipText}`;
         }
         return undefined;
     }
@@ -196,12 +200,12 @@ export class MenuItem extends Mixin(...DefaultMixins, InheritAriaAttributesMixin
             ...inheritedA11yWithoutRole,
         };
         const menuContent = [
-            this.icon && (h("ix-icon", { key: 'e319ac5c518ad11e6dee70251088c6f327f49827', class: 'tab-icon', name: this.icon, "aria-hidden": "true" })),
+            this.icon && (h("ix-icon", { key: 'a419f5c94d24c852e00387f916108cefae727cf0', 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: 'c8e17fa4cb154eff4a2c524bc2118acb694d5d25', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: 'd747ad50df0926969025d4aaa60d0c47b7ca2602' })),
+            h("span", { key: '95833b6a1e057c688a612455889aee0f6aab388e', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: '94628460eddc3c008ce9878a3cfd275fe2ced889' })),
         ];
         const ariaLabel = this.getAriaLabel();
-        return (h(Host, { key: '38dbbe9a89ab0a1063063d986c107eb0b4ecb92d', class: {
+        return (h(Host, { key: 'dd42494be7e2e0d4a109e137f53a21c05696a3b9', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
@@ -217,7 +221,7 @@ export class MenuItem extends Mixin(...DefaultMixins, InheritAriaAttributesMixin
                 }
             }, "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: '4fdc4aa9b1944ec3f43d12b71c81e0518d29ae75', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": "true", "aria-labelledby": this.internalItemId }, this.tooltip)));
+                : 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: '4323e540c6d50894126a913ea1eb2a6101c27777', 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"; }

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

@@ -65,8 +65,15 @@ export class Modal {
     get dialog() {
         return this.hostElement.shadowRoot.querySelector('dialog');
     }
-    slideInModal() {
+    getDialogElement() {
         const dialog = this.dialog;
+        if (!dialog) {
+            throw new Error('Modal dialog element not found');
+        }
+        return dialog;
+    }
+    slideInModal() {
+        const dialog = this.getDialogElement();
         dialog.classList.remove('modal-open-settled');
         const duration = this.disableAnimation ? 0 : Animation.mediumTime;
         const translateY = this.centered ? ['-90%', '-50%'] : [0, 40];
@@ -84,7 +91,7 @@ export class Modal {
         }
     }
     slideOutModal(completeCallback) {
-        const dialog = this.dialog;
+        const dialog = this.getDialogElement();
         dialog.classList.remove('modal-open-settled');
         const duration = this.disableAnimation ? 0 : Animation.mediumTime;
         const translateY = this.centered ? ['-50%', '-90%'] : [40, 0];
@@ -104,7 +111,7 @@ export class Modal {
     closeDialog(type, reason, emitter) {
         this.slideOutModal(() => {
             this.modalVisible = false;
-            this.dialog.close(JSON.stringify({ type, reason }, null, 2));
+            this.getDialogElement().close(JSON.stringify({ type, reason }, null, 2));
             emitter.emit(reason);
         });
     }
@@ -200,12 +207,12 @@ export class Modal {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '1b9c4c03e9fad75ac84ab6854f51c4ff9cbf752a', class: {
+        return (h(Host, { key: '2180a5dec01b447918c6a62820ebdebb32bbfb69', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.hideBackdrop,
                 'align-center': this.centered,
                 'non-blocking': this.isNonBlocking,
-            } }, h("div", { key: 'd5f089500fae809e0080a262d5a4d54101fee727', class: "dialog-backdrop" }, h("dialog", { key: '1a124dda3c4961c8cdc0c81a5698f5f932145f22', "aria-modal": a11yBoolean(!this.isNonBlocking), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: '132b7e41099bf050a6f1fc5a212b836c7be4ac1e', class: "dialog-backdrop" }, h("dialog", { key: '07ade6cf27df03233bd1755f2a7fc427e28c6a78', "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) => {
@@ -217,7 +224,7 @@ export class Modal {
             }, onCancel: (e) => {
                 e.preventDefault();
                 void this.dismissModal();
-            } }, h("slot", { key: 'd24dd84c8f50b1542b4c992af079b0cdfbc50e15' })))));
+            } }, h("slot", { key: '09b7b0f877ce103d4af3f10e1c774b19c1201322' })))));
     }
     static get is() { return "ix-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,10 +62,10 @@ export class ModalHeader {
         if (ce.defaultPrevented || event.defaultPrevented) {
             return;
         }
-        this.parentDialog.dismissModal();
+        this.parentDialog?.dismissModal();
     }
     render() {
-        return (h(Host, { key: '507ee77667cf755dd2c36c02437b8c345bd9dffb' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: 'e525b0e45c254793c69263f6f910255b96b99909', class: "modal-title" }, h("ix-typography", { key: 'bff18e37ae4ff51bdbac61adb7e16e13f8be7612', format: "h5" }, h("slot", { key: '2081bf8ae9df7f5b3d6c74e8cd4c2842202696f4' }))), !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: '9f03264844ac63ce55494f2177d1ea38179e736a' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '62cd301023d42678376d6c064f280970185f29d3', class: "modal-title" }, h("ix-typography", { key: '7d816462cfca738fca02746590548256bd0d529f', format: "h5" }, h("slot", { key: '946ddbbb1dfc674038d618a68e7c4a204d69d6e1' }))), !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"; }