@siemens/ix 5.0.0 → 5.1.0

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

@@ -33,6 +33,13 @@ export class SelectItem extends Mixin(...DefaultMixins, FocusVisibleMixin, Compo
      * Flag indicating whether the item is selected
      */
     selected = false;
+    /**
+     * Disable the item. A disabled item cannot be selected via mouse or keyboard
+     * and is excluded from the focusable items of the parent ix-select.
+     *
+     * @since 5.1.0
+     */
+    disabled = false;
     /**
      * @internal
      */
@@ -78,12 +85,12 @@ export class SelectItem extends Mixin(...DefaultMixins, FocusVisibleMixin, Compo
             ...this.inheritAriaAttributes,
             'aria-label': this.inheritAriaAttributes['aria-label'] ?? this.label,
         };
-        return (h(Host, { key: '41ab96fb19faa443d399c320bb1fd0ddfd436afb', ...ariaAttributes, id: this.getHostElementId(), disableAriaSelectHandling: true, class: {
+        return (h(Host, { key: 'adb8da016414dafc839fff44acbe5dd7d254c188', ...ariaAttributes, id: this.getHostElementId(), disableAriaSelectHandling: true, class: {
                 [IX_FOCUS_VISIBLE]: true,
-            }, "aria-hidden": "true", role: "presentation" }, h("ix-dropdown-item", { key: 'b346f53bce7b1294fb31f723b5446f4bcf133d88', "aria-hidden": "true", itemRole: "option", class: {
+            }, "aria-hidden": "true", role: "presentation" }, h("ix-dropdown-item", { key: '156824791385b920b04cb389553e020cf3f3183b', "aria-hidden": "true", itemRole: "option", class: {
                 'select-item-checked': this.selected,
                 [IX_FOCUS_VISIBLE_ACTIVE]: this.ixFocusVisible,
-            }, checked: this.selected, label: this.label ? this.label : this.value, ref: this.dropdownItemRef })));
+            }, checked: this.selected, disabled: this.disabled, label: this.label ? this.label : this.value, ref: this.dropdownItemRef })));
     }
     static get is() { return "ix-select-item"; }
     static get encapsulation() { return "shadow"; }
@@ -157,6 +164,29 @@ export class SelectItem extends Mixin(...DefaultMixins, FocusVisibleMixin, Compo
                 "attribute": "selected",
                 "defaultValue": "false"
             },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Disable the item. A disabled item cannot be selected via mouse or keyboard\nand is excluded from the focusable items of the parent ix-select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
             "hover": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/slider/slider.js

@@ -233,15 +233,15 @@ export class Slider {
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (h(Host, { key: '4e158f7b4af6a8786274b094fcbdc26a00ec19ed', class: {
+        return (h(Host, { key: '5eed909b2857b9bfbea41402736fe01d7ad9a434', class: {
                 disabled: this.disabled,
                 invalid: this.isInvalid,
                 info: this.isInfo,
                 valid: this.isValid,
                 warning: this.isWarning,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("ix-field-wrapper", { key: 'a18bd3265b8f50d1a3383b59e70efe0bfb829f39', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.controlRef }, h("div", { key: 'e01718c2e79b41df00aff2cafd6c8e5becdba85d', class: "slider-container" }, h("div", { key: '8b83be7e28cac0484b54768c6283d1d37a74e857', class: "slider" }, h("div", { key: '9fa8db2173cd87de771d6a0d5a2ace01820fe128', class: "track" }, h("div", { key: '46b3b6487f23f4a9219420642587813906c53ce8', ref: this.thumbRef, class: "thumb", style: {
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("ix-field-wrapper", { key: '6f5ef62c132260787b91ea5b5f08faf21153735f', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.controlRef }, h("div", { key: 'c67536334750605b342859dbf6c38abcc730c6a6', class: "slider-container" }, h("div", { key: '33649db602e05ea4f2496c6b7b5a3620eca81a49', class: "slider" }, h("div", { key: 'f282b195ad420d036e90b4cc45c59fe9232b5919', class: "track" }, h("div", { key: 'f68211f2d377f2741eaedcdc4ca7fcbcd0f1bbfb', ref: this.thumbRef, class: "thumb", style: {
                 left: `calc(${valueInPercentage} * (100% - 1rem))`,
-            } }), h("svg", { key: '53a69bb9f7e79558323d7558d60655293a467012', class: "ticks", xmlns: "http://www.w3.org/2000/svg" }, this.marker
+            } }), h("svg", { key: '50576c072bbd33c8689017d7f67b83694d73516c', class: "ticks", xmlns: "http://www.w3.org/2000/svg" }, this.marker
             ?.filter((markerValue) => markerValue >= this.min && markerValue <= this.max)
             .map((markerValue) => {
             const markerPosition = (markerValue - this.rangeMin) / range;
@@ -253,7 +253,7 @@ export class Slider {
                 }, cx: "0", cy: "0", style: {
                     '--tick-value': `${markerPosition}`,
                 } }));
-        }))), h("input", { key: 'e92242dc3fa7207e1d86071369e76178c9ae6ddf', id: "slider", ref: this.controlRef, type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), onFocus: () => {
+        }))), h("input", { key: '3ee47514d9a51488410c2b0984f05f39e74153a7', id: "slider", ref: this.controlRef, type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), onFocus: () => {
                 this.showTooltip = true;
                 this.touched = true;
             }, onBlur: () => {
@@ -269,9 +269,9 @@ export class Slider {
                 'hide-trace-reference': this.trace &&
                     (this.traceReference <= this.min ||
                         this.traceReference >= this.max),
-            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max, ...this.a11yAttributes }), h("ix-tooltip", { key: 'aff89362b88b37ec1d9b6bd9f6ba59646dd538a0', ref: this.tooltipRef, class: {
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max, ...this.a11yAttributes }), h("ix-tooltip", { key: '740ea0d7cf7a200c7db7ea8ac70fd2537b84b4a5', ref: this.tooltipRef, class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && (h("div", { key: '34feab8797c1338f3063e17e145811ea33518f4e', class: "label" }, h("div", { key: 'c95ca806e153beab2c91451859b12c82f2e89a65' }, h("slot", { key: 'e49498aba11ed8f8711db171308f4979a942a93c', name: "label-start" })), h("div", { key: 'ac2e3855bc845f00f3ac8f79022c767befa2c7ea' }, h("slot", { key: 'a21bc3e1329c8467762e5b44801fc8db0868ec13', name: "label-end" }))))))));
+            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && (h("div", { key: 'd5264eaabacd9f667600df1f0cdf8e89b24d7730', class: "label" }, h("div", { key: '4ac2ebda49543e04e619452bd59c3f30a0404879' }, h("slot", { key: 'dcc9ecd173f1d49133e1070b72b34b8485cc9860', name: "label-start" })), h("div", { key: '022869a430a0644e24932553a321da5fa8dd4df2' }, h("slot", { key: '4da9fdcb1d570657a3796a32d0925025e16dc4b7', name: "label-end" }))))))));
     }
     static get is() { return "ix-slider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -29,7 +29,7 @@ export class Spinner {
         }
         ariaProperties.role = 'status';
         ariaProperties['aria-busy'] = 'true';
-        return (h(Host, { key: '835ff861b90c96a284b144cd4b7df3bd19c547be', ...ariaProperties }, h("div", { key: '0fd777eaca9341e38e0e19bd73b03af5bd188eb8', class: {
+        return (h(Host, { key: '236bf23ec447ee60e3d328f3b90c8fc53a2a249b', ...ariaProperties }, h("div", { key: '7d6c7fdd2167cf509ef6bb1dfec369b4bedeee14', class: {
                 primary: this.variant === 'primary',
                 [this.size]: true,
                 'hide-track': this.hideTrack,

package/dist/collection/components/split-button/split-button.js

@@ -136,7 +136,7 @@ export class SplitButton extends Mixin(...DefaultMixins, AriaActiveDescendantMix
                 'left-button-border': !hasOutline,
             },
         };
-        return (h(Host, { key: '4e8f8a306c40e3d6d5d95d86ecbc6f868cb19c1e' }, this.label ? (h("ix-button", { ...buttonAttributes, icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }, this.label)) : (h("ix-icon-button", { ...buttonAttributes, icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton })), h("ix-dropdown-button", { key: '5dff21af4a06267188147000d77ead850d879339', class: "right-button", "aria-label": this.ariaLabelSplitIconButton, icon: this.splitIcon ?? iconContextMenu, enableTopLayer: this.enableTopLayer, closeBehavior: this.closeBehavior, disabled: this.isDisabledIcon, suppressAriaActiveDescendant: true, onShowChanged: ({ detail }) => (this.showDropdown = detail), "aria-controls": `${this.internalId}-${PROXY_LIST_ID_SUFFIX}` }, h(FocusProxy, { key: '667a0a407632385534a22e7e3e136a9cb29ba317', hostId: this.internalId, otherProps: {} }), h("slot", { key: 'e1b22d82b508dde989decb1a93047a8a78f31449' }))));
+        return (h(Host, { key: '1b867c8b33fe52356804497afd93bb1bf26afb69' }, this.label ? (h("ix-button", { ...buttonAttributes, icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }, this.label)) : (h("ix-icon-button", { ...buttonAttributes, icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton })), h("ix-dropdown-button", { key: '9b2400c1a1b84369af89a9709e36fc743af4a8e5', class: "right-button", "aria-label": this.ariaLabelSplitIconButton, icon: this.splitIcon ?? iconContextMenu, enableTopLayer: this.enableTopLayer, closeBehavior: this.closeBehavior, disabled: this.isDisabledIcon, suppressAriaActiveDescendant: true, onShowChanged: ({ detail }) => (this.showDropdown = detail), "aria-controls": `${this.internalId}-${PROXY_LIST_ID_SUFFIX}` }, h(FocusProxy, { key: 'b2e0e0547df9f6f19ed110629189bfc27a8c1876', hostId: this.internalId, otherProps: {} }), h("slot", { key: 'b54b7d8c86e66b60f9e71f63965561a84c437707' }))));
     }
     static get is() { return "ix-split-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,7 +99,7 @@ export class TabItem extends Mixin(...DefaultMixins, ComponentIdMixin, BaseTabMi
         else {
             variant = 'normal';
         }
-        return (h(Host, { key: '38ee3ed8b3819d38144608d31446ba60f32658b3', id: this.getHostElementId(), role: "tab", "aria-selected": a11yBoolean(this.selected), tabIndex: this.selected && !this.disabled ? 0 : -1, class: {
+        return (h(Host, { key: 'cbb2004638023c1beeb4af192ba6219380c8f0e6', id: this.getHostElementId(), role: "tab", "aria-selected": a11yBoolean(this.selected), tabIndex: this.selected && !this.disabled ? 0 : -1, class: {
                 selected: this.selected,
                 disabled: this.disabled,
                 'small-tab': this.small,
@@ -119,17 +119,17 @@ export class TabItem extends Mixin(...DefaultMixins, ComponentIdMixin, BaseTabMi
                         nativeEvent: event,
                     });
                 }
-            } }, variant === 'rounded' && (h("div", { key: 'd5273f2315118f712fc4c25d3d286dca1166fb73', class: {
+            } }, variant === 'rounded' && (h("div", { key: '1f98b9019ba76864d03c491435a60e913f566584', class: {
                 circle: true,
-            } }, this.icon && h("ix-icon", { key: '52cfcee729debba7d264af7ff4d4ea030575925e', name: this.icon, size: "24" }), h("slot", { key: 'b5e14c4b4cb69b1bbb4caa5c15c4355db8caf510' }))), this.icon && variant !== 'rounded' && (h("ix-icon", { key: '827b6cd5390799f361f726a455d94c58f9a542c1', name: this.icon, size: "16", class: 'tab-icon' })), variant === 'normal' && (h("div", { key: '9be6aeb959a037a951cd7b108eb3d217e1504dc1', class: {
+            } }, this.icon && h("ix-icon", { key: '6849def7bdb3dba05f4a1b84f9067777bede78c5', name: this.icon, size: "24" }), h("slot", { key: '41b3464f6fc45ad5b853223c5a8819a00dcca841' }))), this.icon && variant !== 'rounded' && (h("ix-icon", { key: 'b9af7159f9306c2b841066a726008afdee58e472', name: this.icon, size: "16", class: 'tab-icon' })), variant === 'normal' && (h("div", { key: '87d1993bfa9bf76dff49f15b9a1e5e4f7dfe9a56', class: {
                 text: !!this.label,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, this.label, h("slot", { key: '62f22936b12a97234c2ec3d5210e7d3f2435fa11' }))), variant === 'rounded' && this.counter !== undefined && (h("div", { key: '023ac330510e532464624dd78ea8bf3fd06922f0', class: {
+            } }, this.label, h("slot", { key: '328e393a77d1c24b487ef874e07bf7772cc24820' }))), variant === 'rounded' && this.counter !== undefined && (h("div", { key: '2758fc1447296c9c2cc04ce92905e5ba4fca9a1b', class: {
                 counter: true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, this.counter)), this.counter && variant !== 'rounded' && (h("ix-pill", { key: '98ce5d4ee78b06cd252ab0550b3be543d17df4d7', variant: "primary", outline: true, class: 'tab-counter' }, this.counter)), this.closable && variant !== 'rounded' && (h("ix-icon-button", { key: 'c00ea1fc9869cbd4d503b1060b8161812e69c1df', "aria-label": this.ariaLabelCloseButton, class: 'close-tab', size: "12", variant: "subtle-tertiary", icon: iconClose, onClick: (event) => {
+            } }, this.counter)), this.counter && variant !== 'rounded' && (h("ix-pill", { key: '6a749ea40148e1d5ca319b7cfa52176e1303d1bd', variant: "primary", outline: true, class: 'tab-counter' }, this.counter)), this.closable && variant !== 'rounded' && (h("ix-icon-button", { key: '35fdcd1095f49cb083e10ce3aeb33e54458968d9', "aria-label": this.ariaLabelCloseButton, class: 'close-tab', size: "12", variant: "subtle-tertiary", icon: iconClose, onClick: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
                 this.tabClose.emit({

package/dist/collection/components/tab-panel/tab-panel.js

@@ -26,7 +26,7 @@ export class TabPanel extends Mixin(...DefaultMixins, ComponentIdMixin) {
         this.hostElement.hidden = true;
     }
     render() {
-        return (h(Host, { key: '0e16dade71f0bf2b5cd3d68f69f6e0676ddf0875', role: "tabpanel", id: this.getHostElementId() }, h("slot", { key: '6ec679d5f971e120661ef540b1601f8ebc567a81' })));
+        return (h(Host, { key: 'e2288e5376cca74e2ef8323f4d11928fbad0be76', role: "tabpanel", id: this.getHostElementId() }, h("slot", { key: '67c9634adbe0a40525e6b6ca7eb2ec774ad49b37' })));
     }
     static get is() { return "ix-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-set/tab-set.js

@@ -74,7 +74,7 @@ export class TabSet {
         });
     }
     render() {
-        return (h(Host, { key: '139dd7a9fbd2a12a67de5db64d0731a86ba1c355', onTabChange: () => this.checkPanelsVisibility() }, h("slot", { key: '8feff5e84cf1f1576df78077a022d2832a51b602' })));
+        return (h(Host, { key: '90be74d89acb43edb6eec575f07a3877ec90ac45', onTabChange: () => this.checkPanelsVisibility() }, h("slot", { key: '047c26c15f8b43312a25a35dddadd364a5b9f839' })));
     }
     static get is() { return "ix-tab-set"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js

@@ -227,19 +227,19 @@ export class Tabs extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
         }
     }
     render() {
-        return (h(Host, { key: '693c87dc0f9b96e5a18ddb2d84ddc71c94ef29b0', onTabClick: (event) => this.onTabClick(event), class: {
+        return (h(Host, { key: '2e8b5f9f4d3658bd219e6ca5d5a829d16f0c1977', onTabClick: (event) => this.onTabClick(event), class: {
                 small: this.small,
-            } }, h("div", { key: 'b76d32b5429e62d1d11808901e828c3630685f83', ref: this.tabsContainerRef, class: {
+            } }, h("div", { key: '8e45e2d46485c6e3147b2237f6109d63cd02758c', ref: this.tabsContainerRef, class: {
                 'tabs-container': true,
                 top: this.placement === 'top',
                 bottom: this.placement === 'bottom',
-            } }, h("div", { key: 'cf4ab3c93c03ca431b2b46a24bf767f723691f44', class: {
+            } }, h("div", { key: '69b6177b0c8c7c20d039a434866f93135e168155', class: {
                 'overflow-shadow-container': true,
                 'overflow-shadow': this.isTabsOverflow,
-            } }, h("div", { key: '9d185cf8802e1b24f14b591ac99087f9a4acdec9', role: "tablist", ...this.inheritAriaAttributes, ref: this.tabsRef, class: {
+            } }, h("div", { key: '97d6ccbe5e623cbedf6be21de05005599b9a2bcd', role: "tablist", ...this.inheritAriaAttributes, ref: this.tabsRef, class: {
                 tabs: true,
                 'tabs-stretched': this.layout === 'stretched',
-            }, tabIndex: this.isTabsOverflow ? 0 : -1, onKeyDown: (event) => this.onTabsNavigate(event) }, h("slot", { key: '8a697543efbf5c125296d5619e820ea2d1fe26b8' }))), this.isTabsOverflow && this.layout !== 'stretched' && (h("ix-dropdown-button", { key: '7403b1b2d55cecc918a4ab32a7e5b680a12226bd', ariaLabel: this.ariaLabelMoreTabs, icon: iconMoreMenu, class: {
+            }, tabIndex: this.isTabsOverflow ? 0 : -1, onKeyDown: (event) => this.onTabsNavigate(event) }, h("slot", { key: '2ceb8d8dc886c9784e244172750192297f077360' }))), this.isTabsOverflow && this.layout !== 'stretched' && (h("ix-dropdown-button", { key: 'a7041a35c2dcac4f86eefbfbae5ac36ba9c45436', ariaLabel: this.ariaLabelMoreTabs, icon: iconMoreMenu, class: {
                 'tabs-context-menu': true,
             }, variant: "subtle-tertiary" }, this.overflowMenuItems.map((item) => (h("ix-dropdown-item", { key: item.tabKey, checked: item.tabKey === this.activeTabKey, icon: item.icon, label: item.label, disabled: item.disabled, onClick: () => (this.activeTabKey = item.tabKey) }))))))));
     }

package/dist/collection/components/tile/tile.js

@@ -22,17 +22,17 @@ export class Tile {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: 'c57941571e070a94be7dbbb781950c22a8be3803', class: {
+        return (h(Host, { key: '8f679fa7052569f04f32e97794296dcb29cf7674', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: '3bfa12c4510191a93ae9bdbb811099a4787319ce', class: {
+            } }, h("div", { key: 'd5d8cd568dfab0d8d4792cb598a062bd55b03845', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: 'd7b682647b2dbbd4a430fa84cf28942497816057', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '1965567486b35ce2ff87e0ffeeaa9b33837f5345', class: "tile-subheader" }, h("slot", { key: 'c03ba4fdec33cf0821d1c90a05b344f26a69ff89', name: "subheader" })), h("div", { key: '8e834709f24eba9f1161be7b736f38fabb9b88d9', class: "tile-content" }, h("slot", { key: '69c7deddb575649a4943f3592aceacdf1cd7fcf7' })), h("div", { key: '853de711d9edc48b16290f294d7f88af626ba815', class: {
+            } }, h("slot", { key: 'cc289070975b9035d0a845e18fcdf73e877ca8eb', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '75ab8313010bc8716ed397aade9f3b21ae836d29', class: "tile-subheader" }, h("slot", { key: 'f4097db4fd6421f0482b00c66ab1c0b60097d935', name: "subheader" })), h("div", { key: '994f70d4c88f781e2cb5e10edda3cca65bc39e16', class: "tile-content" }, h("slot", { key: '71de26e86af5c6e180c555111079e106e433c4bb' })), h("div", { key: '28811550fcc1e2bb2f9fc1f5570e0473e96506d3', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: 'f87ebc8a0de54427400fea4cd37ed2a75eae119f', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: '2723caa0308e311ad05a0b89806358c6fd60bf61', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     static get is() { return "ix-tile"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,6 +28,7 @@ import { DefaultMixins } from "../utils/internal/component";
 import { InputPickerMixin, } from "../utils/internal/mixins/input/input-picker.mixin";
 import { makeRef } from "../utils/make-ref";
 import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
+import { forceTabIndex } from "../utils/a11y";
 /**
  * @since 3.2.0
  * @form-ready
@@ -382,7 +383,7 @@ export class TimeInput extends Mixin(...DefaultMixins, InputPickerMixin) {
                 onInputBlurWithChange(this, this.inputElementRef.current, this.value);
                 this.touched = true;
                 this.emitValidityStateChangeIfChanged();
-            }, onKeyDown: (event) => this.handleInputKeyDown(event) }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { tabindex: -1, ref: (ref) => (ref.tabIndex = -1), "data-testid": "open-time-picker", class: { 'time-icon-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", size: "16", icon: iconClock, onClick: (event) => this.onTimeIconClick(event), "aria-label": this.ariaLabelTimeToggleButton, "aria-expanded": this.show }))));
+            }, onKeyDown: (event) => this.handleInputKeyDown(event) }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { tabindex: -1, ref: (ref) => forceTabIndex(ref, -1), "data-testid": "open-time-picker", class: { 'time-icon-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", size: "16", icon: iconClock, onClick: (event) => this.onTimeIconClick(event), "aria-label": this.ariaLabelTimeToggleButton, "aria-expanded": this.show }))));
     }
     hookValidationLifecycle({ isInfo, isInvalid, isInvalidByRequired, isValid, isWarning, }) {
         this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;
@@ -421,17 +422,17 @@ export class TimeInput extends Mixin(...DefaultMixins, InputPickerMixin) {
     }
     render() {
         const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorTimeUnparsable);
-        return (h(Host, { key: '293a527e1b0337b962eb6c24680df978c9b1356d', class: {
+        return (h(Host, { key: 'ad852f1bdf16618d065d1fbab17420c11b3e5915', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
             }, onFocusout: () => {
                 this.closeDropdown();
-            } }, h("ix-field-wrapper", { key: '103566ac44e0dacb9f8e979c16c5ebb53cc144d9', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), h("ix-dropdown", { key: '7cdaaa66afbf87e052b8b2548e002b901c1879e5', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+            } }, h("ix-field-wrapper", { key: 'cf0d1f5e6fef2a1391ca1fb9b748eb7c75af3d18', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), h("ix-dropdown", { key: '51ba0327ea62439e121ffbc1f6aa8a6a69564481', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
                 this.show = event.detail;
             }, focusTrapOptions: {
                 targetElement: this.timePickerRef,
                 trapFocusInShadowDom: true,
-            } }, h("ix-time-picker", { key: '6018c8f9c77ffb1f37f9ca3e4d8b789b28076323', ref: this.timePickerRef, format: this.format, time: this.time ?? '', minTime: this.minTime, maxTime: this.maxTime, hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
+            } }, h("ix-time-picker", { key: '9d994dfdd9b7d58ba305dcff031397a3486a5d64', ref: this.timePickerRef, format: this.format, time: this.time ?? '', minTime: this.minTime, maxTime: this.maxTime, hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
                 this.onInput(event.detail);
                 if (this.initialValue !== event.detail) {
                     this.ixChange.emit(event.detail);

package/dist/collection/components/time-picker/time-picker.js

@@ -33,8 +33,6 @@ const HOUR_INTERVAL_DEFAULT = 1;
 const MINUTE_INTERVAL_DEFAULT = 1;
 const SECOND_INTERVAL_DEFAULT = 1;
 const MILLISECOND_INTERVAL_DEFAULT = 100;
-const CONFIRM_BUTTON_DEFAULT = 'Confirm';
-const HEADER_DEFAULT = 'Time';
 const FORMATTED_TIME_EMPTY = {
     hour: '',
     minute: '',
@@ -82,7 +80,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
      *
      * @since 3.2.0
      */
-    hourInterval = HOUR_INTERVAL_DEFAULT;
+    hourInterval = 1;
     watchHourIntervalPropHandler(newValue) {
         if (Number.isInteger(newValue) &&
             newValue >= 0 &&
@@ -98,7 +96,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
      *
      * @since 3.2.0
      */
-    minuteInterval = MINUTE_INTERVAL_DEFAULT;
+    minuteInterval = 1;
     watchMinuteIntervalPropHandler(newValue) {
         if (newValue >= 0 && newValue <= 59) {
             this.setTimePickerDescriptors();
@@ -112,7 +110,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
      *
      * @since 3.2.0
      */
-    secondInterval = SECOND_INTERVAL_DEFAULT;
+    secondInterval = 1;
     watchSecondIntervalPropHandler(newValue) {
         if (newValue >= 0 && newValue <= 59) {
             this.setTimePickerDescriptors();
@@ -126,7 +124,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
      *
      * @since 3.2.0
      */
-    millisecondInterval = MILLISECOND_INTERVAL_DEFAULT;
+    millisecondInterval = 100;
     watchMillisecondIntervalPropHandler(newValue) {
         if (newValue >= 0 && newValue <= 999) {
             this.setTimePickerDescriptors();
@@ -221,11 +219,11 @@ export class TimePicker extends Mixin(...DefaultMixins) {
     /**
      * Text of the time confirm button.
      */
-    i18nConfirmTime = CONFIRM_BUTTON_DEFAULT;
+    i18nConfirmTime = 'Confirm';
     /**
      * Text for the top header.
      */
-    i18nHeader = HEADER_DEFAULT;
+    i18nHeader = 'Time';
     /**
      * Text for the hour column header.
      */
@@ -848,7 +846,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
     }
     render() {
         const { bounds } = this.getUnitSelectionContext();
-        return (h(Host, { key: '148f502158a23cb3653c1f062a69cff199e93fdc' }, h("ix-date-time-card", { key: '5612a12cfb0a8b3c55c3491fcae620d63fa0bbd7', embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: !this.dateTimePickerAppearance, hideHeader: this.hideHeader }, h("div", { key: '80c1720b837cc3cef4fb4590f68dfe1ab23b8370', class: "header", slot: "header" }, h("ix-typography", { key: '087b23019ec2213c3a23b0c1c08da2328af144be', format: "body" }, this.i18nHeader)), h("div", { key: '1c4c0a0ca82ae0633fbecd5ed9453493c7b9cf98', class: "clock" }, this.timePickerDescriptors.map((descriptor, index) => {
+        return (h(Host, { key: 'd82a36e9f2570227537fa27a4613728b14eb7728' }, h("ix-date-time-card", { key: '3176395745458739b9fb9de1b4b1d4f39b1f6d2f', embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: !this.dateTimePickerAppearance, hideHeader: this.hideHeader }, h("div", { key: '9defe01ecd678617fa2ecf70c891e6e257a92d65', class: "header", slot: "header" }, h("ix-typography", { key: '28e6bc8abc536182d3b63d231913316df54058f0', format: "body" }, this.i18nHeader)), h("div", { key: '3aa7571fd61469deadb3ccecb871456926b4f0ca', class: "clock" }, this.timePickerDescriptors.map((descriptor, index) => {
             return (h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden }, hidden: descriptor.hidden }, h("div", { class: "column-header", title: descriptor.header }, descriptor.header), h("div", { role: "listbox", "aria-label": descriptor.header, "data-element-list-id": descriptor.unit, class: "element-list", tabindex: -1 }, descriptor.numberArray.map((number) => {
                 const cellTabIndex = this.getUnitCellTabIndex(descriptor.unit, number);
                 const disabled = !this.canSelectUnitValue(descriptor.unit, number, bounds, this.buildCandidateBaseBeforeUnit(descriptor.unit));
@@ -864,16 +862,16 @@ export class TimePicker extends Mixin(...DefaultMixins) {
                     'column-separator': true,
                     hidden: descriptor.hidden,
                 } }, this.getColumnSeparator(index)))));
-        }), this.timeRef && (h("div", { key: 'aee3e153f67ba1365ff56d36a72d1d5561d30e2a', class: "flex" }, h("div", { key: 'd18821a7a032522e161fdd1e74a5812d2111a6ae', class: "column-separator" }), h("div", { key: '57db4e6409de2fbf5d13647304af280866845695', class: "columns" }, h("div", { key: 'd60b46a2bc28606c7708eb3dbccee6fe76df8cc5', class: "column-header", title: "AM/PM" }), h("div", { key: '2d33c518b011e25fb334cd8e1f1efa9b79cd35ff', role: "listbox", "aria-label": "AM/PM", class: "element-list", tabindex: -1 }, h("button", { key: '0ee352467596e646e3afc588ccaa80cad649c551', role: "option", "aria-selected": this.timeRef === 'AM' ? 'true' : 'false', "data-am-pm-id": "AM", class: {
+        }), this.timeRef && (h("div", { key: 'f9fe74b09d9de0a95f2472d49faf5d675f8732ba', class: "flex" }, h("div", { key: '61323b760556dd2de6b55dc92ed4ce1f48d0e184', class: "column-separator" }), h("div", { key: 'e4c888487a559ef191dfcf76014251e217a6f00e', class: "columns" }, h("div", { key: '0ef38a3e63f0bff2f5ef6774eea41e07d68fd1f4', class: "column-header", title: "AM/PM" }), h("div", { key: '47cd9041e31b25c6d08ccb0eed005a6b9963eaec', role: "listbox", "aria-label": "AM/PM", class: "element-list", tabindex: -1 }, h("button", { key: 'd414632d382a84aa0db2c6f27c18f5b123c0d46a', role: "option", "aria-selected": this.timeRef === 'AM' ? 'true' : 'false', "data-am-pm-id": "AM", class: {
                 selected: this.timeRef === 'AM',
                 'element-container': true,
-            }, onClick: () => this.changeTimeReference('AM'), tabindex: "0", "aria-label": "AM" }, "AM"), h("button", { key: '3c207b5fb9f759a101ce7d1959f93cbfda487274', role: "option", "aria-selected": this.timeRef === 'PM' ? 'true' : 'false', "data-am-pm-id": "PM", class: {
+            }, onClick: () => this.changeTimeReference('AM'), tabindex: "0", "aria-label": "AM" }, "AM"), h("button", { key: '1f288055298d5ec21b30137b82c9c729705dd989', role: "option", "aria-selected": this.timeRef === 'PM' ? 'true' : 'false', "data-am-pm-id": "PM", class: {
                 selected: this.timeRef === 'PM',
                 'element-container': true,
-            }, onClick: () => this.changeTimeReference('PM'), tabindex: "0", "aria-label": "PM" }, "PM")))))), h("div", { key: 'fc56aa00e3d0280045272303181d49fbcf473bc6', class: {
+            }, onClick: () => this.changeTimeReference('PM'), tabindex: "0", "aria-label": "PM" }, "PM")))))), h("div", { key: 'afc8804b5164b9fb2606c03fc6fc518ef6b703ed', class: {
                 footer: true,
                 'footer--compact': this.timePickerDescriptors.length <= 2,
-            }, slot: "footer" }, h("ix-button", { key: '1c2361d8241d53b5f902f203b43a8bf768f8d1af', class: "confirm-button", disabled: this.isConfirmDisabled(), onClick: () => {
+            }, slot: "footer" }, h("ix-button", { key: '743e3b4f53dd35e9a4bfd4b11dce8a524c66f581', class: "confirm-button", disabled: this.isConfirmDisabled(), onClick: () => {
                 this.timeSelect.emit(this._time?.toFormat(this.format));
             } }, this.i18nConfirmTime)))));
     }
@@ -1026,7 +1024,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
                 "setter": false,
                 "reflect": false,
                 "attribute": "hour-interval",
-                "defaultValue": "HOUR_INTERVAL_DEFAULT"
+                "defaultValue": "1"
             },
             "minuteInterval": {
                 "type": "number",
@@ -1049,7 +1047,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
                 "setter": false,
                 "reflect": false,
                 "attribute": "minute-interval",
-                "defaultValue": "MINUTE_INTERVAL_DEFAULT"
+                "defaultValue": "1"
             },
             "secondInterval": {
                 "type": "number",
@@ -1072,7 +1070,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
                 "setter": false,
                 "reflect": false,
                 "attribute": "second-interval",
-                "defaultValue": "SECOND_INTERVAL_DEFAULT"
+                "defaultValue": "1"
             },
             "millisecondInterval": {
                 "type": "number",
@@ -1095,7 +1093,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
                 "setter": false,
                 "reflect": false,
                 "attribute": "millisecond-interval",
-                "defaultValue": "MILLISECOND_INTERVAL_DEFAULT"
+                "defaultValue": "100"
             },
             "time": {
                 "type": "string",
@@ -1178,7 +1176,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
                 "setter": false,
                 "reflect": false,
                 "attribute": "i18n-confirm-time",
-                "defaultValue": "CONFIRM_BUTTON_DEFAULT"
+                "defaultValue": "'Confirm'"
             },
             "i18nHeader": {
                 "type": "string",
@@ -1198,7 +1196,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
                 "setter": false,
                 "reflect": false,
                 "attribute": "i18n-header",
-                "defaultValue": "HEADER_DEFAULT"
+                "defaultValue": "'Time'"
             },
             "i18nHourColumnHeader": {
                 "type": "string",

package/dist/collection/components/toast/toast-container.js

@@ -66,10 +66,10 @@ export class ToastContainer {
         };
     }
     render() {
-        return (h(Host, { key: '4b9172f4e2ab91db264b4cef1fe7615e056321b4', class: {
+        return (h(Host, { key: '87023a7ec041ea773611f6cd2f775a0b5bc0d487', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
-            } }, h("slot", { key: 'd0c16ca7a92081b30e7e23148c4f2aca00983b50' })));
+            } }, h("slot", { key: '2f5a7d0cc8277b74e8965bd28979af5ae2bcf8d0' })));
     }
     static get is() { return "ix-toast-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.js

@@ -104,11 +104,11 @@ export class Toast {
             animationPlayState: this.touched || this.paused ? 'paused' : 'running',
         };
         progressBarClass.push('toast-progress-bar--animated');
-        return (h(Host, { key: 'b8d17f5af7fe134a6244d2ee7c3c630de0b7bc4f', role: "alert", "aria-live": "polite", "aria-atomic": "true", class: "animate__animated animate__fadeIn" }, h("div", { key: '3d72be10db7039191dfc39e48ab4c9525c68b367', class: "toast-body", onPointerLeave: () => {
+        return (h(Host, { key: 'd1d8b347562ec19da710d70d55ae49b6d1a3de72', role: "alert", "aria-live": "polite", "aria-atomic": "true", class: "animate__animated animate__fadeIn" }, h("div", { key: 'bef026521215c457e713eb33d5e0b424a5fb5e1a', class: "toast-body", onPointerLeave: () => {
                 this.touched = false;
             }, onPointerEnter: () => {
                 this.touched = true;
-            } }, (this.type || this.icon) && !this.hideIcon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: '5f85fcc437199930bf97018d09ce04691d3c295e', class: "toast-content" }, this.toastTitle ? (h("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, h("div", { key: '1aea698221eed9809125a1edd89a73ba080a62f6', class: "toast-message" }, h("slot", { key: '3c6a838dec067a6e88da09433336d64294349b7a' })), h("div", { key: 'c0cdccd9a8bf9b08d3cc8dd482533026b62981eb', class: "toast-action" }, h("slot", { key: 'c74f4cfb92d867dbe19a189b2040033fe9f26eeb', name: "action" }))), h("div", { key: '1f8316a4368fe7b53a561376f60b414f03563007', class: "toast-close" }, h("ix-icon-button", { key: 'b60f578a28bdf1dd939cebda3066527fb4900c3f', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), !this.preventAutoClose && (h("div", { key: '0b6edfd0fc364f33165be5145ef09f540e03d841', class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+            } }, (this.type || this.icon) && !this.hideIcon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { key: 'f7c486254ea1e82a1dd3f70424cdc02ea5d6cc08', class: "toast-content" }, this.toastTitle ? (h("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, h("div", { key: '80b15dbaa38fc4ec0803af9a9a19e45d979ec2fb', class: "toast-message" }, h("slot", { key: 'de6bb9039690a987e2b0915ef5430eca6cdda681' })), h("div", { key: 'dd88a6baa8fb34e871c2391f9d740dd2c5c64c9b', class: "toast-action" }, h("slot", { key: '47f87d3ba3d6e16bc5367529b1e3ad5102e001de', name: "action" }))), h("div", { key: '6d63eb42fac0c5d05c073071169e574d20627878', class: "toast-close" }, h("ix-icon-button", { key: '3b81c1dd6dc012e46912f6d7356078d90f48f397', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), !this.preventAutoClose && (h("div", { key: '9b6712243f444d7d55bdd172b64676b5aba7c2a8', class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
                 this.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {

package/dist/collection/components/toggle/toggle.js

@@ -148,7 +148,7 @@ export class Toggle extends Mixin(...DefaultMixins, InheritAriaAttributesMixin)
         const ariaChecked = this.indeterminate
             ? 'mixed'
             : a11yBoolean(this.checked);
-        return (h(Host, { key: 'f04221cc34cc579df99e90487157323b582ffa88', ...this.inheritAriaAttributes, role: "switch", tabindex: this.disabled ? -1 : 0, "aria-label": ariaLabel, "aria-checked": ariaChecked, "aria-disabled": a11yBoolean(this.disabled), "aria-required": a11yBoolean(this.required), class: {
+        return (h(Host, { key: '41d91ada6ad7f8f0000ff5c636274df99b5bcec3', ...this.inheritAriaAttributes, role: "switch", tabindex: this.disabled ? -1 : 0, "aria-label": ariaLabel, "aria-checked": ariaChecked, "aria-disabled": a11yBoolean(this.disabled), "aria-required": a11yBoolean(this.required), class: {
                 disabled: this.disabled,
             }, onBlur: () => this.ixBlur.emit(), onFocus: () => (this.touched = true), onKeyDown: (e) => {
                 if (this.disabled)
@@ -161,11 +161,11 @@ export class Toggle extends Mixin(...DefaultMixins, InheritAriaAttributesMixin)
                 if (!this.disabled) {
                     this.onCheckedChange(!this.checked);
                 }
-            } }, h("div", { key: '4245387d288d1fe68551ab59ac12af32c977ee96', class: "wrapper" }, h("div", { key: '53fb838a752b34fd73947aaee99abbe6700a9654', class: {
+            } }, h("div", { key: 'd712114dae9e0316346e6fb20b3ae28678308788', class: "wrapper" }, h("div", { key: '433f2624d9b2b619961a893c5ca4c13f628fa3a6', class: {
                 switch: true,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
-            }, "aria-hidden": "true" }, h("div", { key: 'dc000096dd4bccc837b70861b113727b2fa8511e', class: "slider" })), !this.hideText && (h("ix-typography", { key: 'c869cdc3cc704a35f82146c69e08f2fce7c50149', class: "label", "aria-hidden": "true" }, toggleText)))));
+            }, "aria-hidden": "true" }, h("div", { key: '02272dc7dad538380fe15e57835ac470e1327c4e', class: "slider" })), !this.hideText && (h("ix-typography", { key: '1917d18ba54dbcacb7995dafa45082d3ce7bc36d', class: "label", "aria-hidden": "true" }, toggleText)))));
     }
     static get is() { return "ix-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -147,7 +147,7 @@
   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;
@@ -258,7 +258,7 @@
   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/tooltip/tooltip.js

@@ -52,6 +52,7 @@ export class Tooltip {
     disposeTriggerListener;
     disposeTooltipListener;
     disposeDomChangeListener;
+    hasDisconnected = false;
     instance = tooltipInstance++;
     dialogRef = makeRef();
     get arrowElement() {
@@ -311,6 +312,7 @@ export class Tooltip {
         ]);
     }
     registerDomChangeListener() {
+        this.disposeDomChangeListener?.();
         const observer = new MutationObserver(() => {
             this.registerTriggerListener();
         });
@@ -342,7 +344,14 @@ export class Tooltip {
     componentDidLoad() {
         this.registerDomChangeListener();
     }
+    connectedCallback() {
+        if (this.hasDisconnected) {
+            this.registerTriggerListener();
+            this.registerDomChangeListener();
+        }
+    }
     disconnectedCallback() {
+        this.hasDisconnected = true;
         this.clearTimeouts();
         this.disposeAutoUpdate?.();
         this.disposeTriggerListener?.();
@@ -359,7 +368,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '5327a81a35b5b7b02f301e241ee2f002f4bd44d8', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: 'e6196e83ab381de6eb75e53e7b763916a0cb2848', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: '1a67af364a20c0e11cb0eb89ad60fe0811affd07', class: "tooltip-container" }, h("div", { key: '2dd620324b6025bd5957a81b6aa0454eb4c7bb6e', class: "content-wrapper" }, h("div", { key: '7f1d40ea0cfc81b883cc4bbde53c2dc4223987cc', class: 'tooltip-title' }, h("slot", { key: '7056f34a3999f0e38c097359ec23fa8b9e22aa68', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), h("ix-typography", { key: 'cdaa694af6adc24aef201cffe93d9aadc32a48d9', format: "h5" }, this.titleContent, h("slot", { key: '3f358d3931d3cc12bf858c331a160bbf1e616152', name: "title-content" }))), h("slot", { key: '6077989200f829d7cb2eec01d0fc5b60fb1d43d6' }), h("div", { key: '2f439327319e891070266b1cc8a51e77c45b4c58', class: "arrow" }))))));
+        return (h(Host, { key: '8aed42852f615787c48fa06b0682738a1f330440', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: 'f9291fb22d6a57c8cb4e6a2ad00b93291e21ba8e', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: 'b3549060bdc5e21ce10c3a131d96172b156e4b15', class: "tooltip-container" }, h("div", { key: '9faaaf7ad71f73267270b97d2d4ba06de1c9db15', class: "content-wrapper" }, h("div", { key: '2613a69b5ade812a9bf6850c40ea0b6c3b231c29', class: 'tooltip-title' }, h("slot", { key: 'b4e2bd1cbefd7a1e684967e876404e9df78b3c2b', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), h("ix-typography", { key: 'ad34b68a4b538da01990d41b8ba5f35e6f54f71a', format: "h5" }, this.titleContent, h("slot", { key: '670455a0bfda60771c9af9b1b1890826f9a9431f', name: "title-content" }))), h("slot", { key: '82e0591cfb4861702b6a65f8e598d6475e5054f6' }), h("div", { key: '19145d17a5db3aaaf1750f3e6fcb0091d4baad4c', class: "arrow" }))))));
     }
     static get is() { return "ix-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -554,7 +563,7 @@ export class Tooltip {
                         "Element": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": "../../node_modules/.pnpm/@stencil+core@4.43.4_patch_hash=5b7b26f1b6644ca4134fe78af13f89b6653dffeffd2c09206b7c9402d0470193/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element",
+                            "id": "../../node_modules/.pnpm/@stencil+core@4.43.5_patch_hash=5b7b26f1b6644ca4134fe78af13f89b6653dffeffd2c09206b7c9402d0470193/node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element",
                             "referenceLocation": "Element"
                         }
                     },

package/dist/collection/components/tree/tree.js

@@ -301,7 +301,7 @@ export class Tree {
         this.nodeClicked.emit(id);
     }
     render() {
-        return (h(Host, { key: 'a1fa7eaef9868fd912800c99a8f168dd00e27944', onClick: (event) => this.onTreeItemClick(event) }, h("slot", { key: '8a61ead359019d6ebd9c8da77d1a7d0bcb393cde' })));
+        return (h(Host, { key: '2559d80cdc3622837771d6f9484117b5d8ae15db', onClick: (event) => this.onTreeItemClick(event) }, h("slot", { key: 'f1b3e2121e4833481dcf91594f38434318de84bc' })));
     }
     static get is() { return "ix-tree"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,10 +41,10 @@ export class TreeItem {
     itemClick;
     render() {
         const isDisabled = this.disabled || this.context?.isDisabled;
-        return (h(Host, { key: '61103bf87d16f171025cb5ec3db6a79fcaf47ee1', class: {
+        return (h(Host, { key: 'e7e34e163bd93d7cd473167c20f6fe5cfc7a555b', class: {
                 selected: !!this.context?.isSelected,
                 disabled: !!isDisabled,
-            } }, h("div", { key: '376a5bdcaf6367c959d5819d1b0ed6876aa95c03', class: "icon-toggle-container" }, this.hasChildren ? (h("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
+            } }, h("div", { key: 'ad4deffb89068a0e74f3b0596f59de1262f549b3', class: "icon-toggle-container" }, this.hasChildren ? (h("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
                 ['icon-toggle-down']: !!this.context?.isExpanded,
             }, color: "color-std-text", onClick: (e) => {
                 if (isDisabled) {
@@ -56,12 +56,12 @@ export class TreeItem {
             }, "aria-label": this.ariaLabelChevronIcon ??
                 (this.context?.isExpanded
                     ? 'Collapse tree item'
-                    : 'Expand tree item') })) : null), h("div", { key: 'deddcd5f96e7d93b163e1c941ed53f58b77f8f67', class: "tree-node-container", onClick: () => {
+                    : 'Expand tree item') })) : null), h("div", { key: '632ac5edca96314ec279e229eb77c1b12fbc9af1', class: "tree-node-container", onClick: () => {
                 if (isDisabled) {
                     return;
                 }
                 this.itemClick.emit();
-            } }, h("div", { key: '3e67b399af3770f38a7613bde42a219a6ab4d38d', class: "tree-node-text" }, this.text), h("slot", { key: '9252cecaabba056e57720efd5c904e72c0266bca' }))));
+            } }, h("div", { key: 'b2532d4c136111a563c4e54cbe1d8d6bfae3a20b', class: "tree-node-text" }, this.text), h("slot", { key: 'daf4d0a32bba8574b11903205fb8cecdf8ab3d11' }))));
     }
     static get is() { return "ix-tree-item"; }
     static get encapsulation() { return "shadow"; }