@siemens/ix 5.1.1 → 5.2.0

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

@@ -44,7 +44,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -53,37 +53,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .wrapper {

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: '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: {
+        return (h(Host, { key: 'dcc719533d7ebad6ebfc175db7fcce81ca432f6c', ...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: 'd712114dae9e0316346e6fb20b3ae28678308788', class: "wrapper" }, h("div", { key: '433f2624d9b2b619961a893c5ca4c13f628fa3a6', class: {
+            } }, h("div", { key: '86cac25e18858e76e535df0c0a66e94dc5ca4c30', class: "wrapper" }, h("div", { key: '63eb080dd311b49c211e57abc8b1b5830a8fb81c', class: {
                 switch: true,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
-            }, "aria-hidden": "true" }, h("div", { key: '02272dc7dad538380fe15e57835ac470e1327c4e', class: "slider" })), !this.hideText && (h("ix-typography", { key: '1917d18ba54dbcacb7995dafa45082d3ce7bc36d', class: "label", "aria-hidden": "true" }, toggleText)))));
+            }, "aria-hidden": "true" }, h("div", { key: 'a2f46d4412c3f51d93ffe20d9e8e7681c50f2fa8', class: "slider" })), !this.hideText && (h("ix-typography", { key: '8ed5848b4641a0152b937e8e3fdb9ce4d45ff1d3', 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

@@ -73,6 +73,14 @@
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
+/*
+* SPDX-FileCopyrightText: 2026 Siemens AG
+*
+* SPDX-License-Identifier: MIT
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
 :host {
   --ix-button-border-radius-left: var(--theme-btn--border-radius);
   --ix-button-border-radius-right: var(--theme-btn--border-radius);
@@ -93,7 +101,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -102,37 +110,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host button,
@@ -204,7 +212,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -213,37 +221,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host button,
@@ -865,7 +873,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -874,37 +882,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .btn {

package/dist/collection/components/tooltip/tooltip.js

@@ -369,7 +369,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '0f6b71f1d7096159c1e46db95ef86bdb36a44a89', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: '18b008f2893571c2bc622ce1d38b689249d2ee69', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: 'c9187964c594fbea4db6b1cebbfe98d67d65313a', class: "tooltip-container" }, h("div", { key: '0985c556e7d2e9e8724ce4c26e5ead76c05f4cd4', class: "content-wrapper" }, h("div", { key: '5e591fc49ce4d3c024ac5d36f5cf72ca7dcb7378', class: 'tooltip-title' }, h("slot", { key: '0272be6880ecc327d2bc0ee522ee1463eed46a27', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), h("ix-typography", { key: '0ab372fdaa7e58f13cfcf7f12386a85dfef017bc', format: "h5" }, this.titleContent, h("slot", { key: '2b894def397eb375849718fa7cb823dbf2e23209', name: "title-content" }))), h("slot", { key: '58421e3dc922c33c96f9335a3972c821e29368b2' }), h("div", { key: 'c0c7cf5776e4db777af7f635b042178814973dd1', class: "arrow" }))))));
+        return (h(Host, { key: '59edeeb4c78daf4679cb73e1639781e2df1d57c0', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: 'c1e5d1fcddb87609654c945e42b04379a94cae79', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: '3e24a73fb904b4a8861322e84a97ed72234c672c', class: "tooltip-container" }, h("div", { key: 'aa68b5bbe623e094fa5311ee19dbd96090776779', class: "content-wrapper" }, h("div", { key: 'c3304e93fc6fa38c3f31ebf3773054247bfa1c61', class: 'tooltip-title' }, h("slot", { key: '5859428cdc8a2502930760a2cb8491ba506200e0', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), h("ix-typography", { key: 'dcb18580a59c5cf0200b89d176e8ca56fca98b24', format: "h5" }, this.titleContent, h("slot", { key: 'b495bec36b40b39538f54aeee58591b3815e3cf6', name: "title-content" }))), h("slot", { key: '59970a04ae9909460aeb2c4f9a515ed1ce7b2863' }), h("div", { key: 'ff994a212b5b355ed18a002f2e8aaadaaae09b1b', class: "arrow" }))))));
     }
     static get is() { return "ix-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -304,7 +304,7 @@ export class Tree {
         this.nodeClicked.emit(id);
     }
     render() {
-        return (h(Host, { key: '8ec158ba41c5aa8e4577e9904ba250dc02ec9256', onClick: (event) => this.onTreeItemClick(event) }, h("slot", { key: 'a2f2c325f7c54b7f1271d0ced1da60e0a211bb3b' })));
+        return (h(Host, { key: '855ec01de8c175c0248069737dcfa240d3848264', onClick: (event) => this.onTreeItemClick(event) }, h("slot", { key: 'ffc4b5117f8bda3710030ee85cdbceed417133c0' })));
     }
     static get is() { return "ix-tree"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -62,37 +62,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .tree-node-container {

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

@@ -44,10 +44,10 @@ export class TreeItem {
     itemClick;
     render() {
         const isDisabled = this.disabled || this.context?.isDisabled;
-        return (h(Host, { key: 'ac797ebd4ea5c58ef304f89f2c9dd2652e718467', class: {
+        return (h(Host, { key: 'f59b4c0d450339118b34d3b61b340a10ca988930', class: {
                 selected: !!this.context?.isSelected,
                 disabled: !!isDisabled,
-            } }, h("div", { key: '065f2f10272bcc61c56455f52ed3c9d2653f16d4', class: "icon-toggle-container" }, this.hasChildren ? (h("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
+            } }, h("div", { key: 'd2a671021cc391d53bd120b81a436a84aded80b7', 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) {
@@ -59,12 +59,12 @@ export class TreeItem {
             }, "aria-label": this.ariaLabelChevronIcon ??
                 (this.context?.isExpanded
                     ? 'Collapse tree item'
-                    : 'Expand tree item') })) : null), h("div", { key: '915c6b8ac6b26b1696bb2f181cd5b3c99301c22d', class: "tree-node-container", onClick: () => {
+                    : 'Expand tree item') })) : null), h("div", { key: '9f8858524c797a1bccc7f282fd916024f660b09b', class: "tree-node-container", onClick: () => {
                 if (isDisabled) {
                     return;
                 }
                 this.itemClick.emit();
-            } }, h("div", { key: '7e138f1ce37dbad892e93d4434fbde49b1552c73', class: "tree-node-text" }, this.text), h("slot", { key: 'ac6ea5f2b4e396f022dfe6270c7d195ed70fd1cb' }))));
+            } }, h("div", { key: 'b0f742b8aeea57c22eefe520e0bff25dabe49b40', class: "tree-node-text" }, this.text), h("slot", { key: 'd18611d1682b05902d218993d2733f86be879b74' }))));
     }
     static get is() { return "ix-tree-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/typography/typography.css

@@ -419,7 +419,7 @@ a {
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -428,37 +428,37 @@ a {
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 

package/dist/collection/components/typography/typography.js

@@ -46,7 +46,7 @@ export class IxTypography {
                 color: IxTypography.getTextColor(this.textColor),
             };
         }
-        return (h(Host, { key: '205751c8dc3619824eee5a25c27b3435fb4cadd6', class: typographyClass, style: style }, h("slot", { key: '91b2957256c5707bca18cf3460e3efbf60570a22' })));
+        return (h(Host, { key: 'dcc0f169666286fcce7f0f0f5808e1e0d72bca90', class: typographyClass, style: style }, h("slot", { key: '9da2618e58af8dd12536c7d535d628173b33e956' })));
     }
     static get is() { return "ix-typography"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/upload/upload.css

@@ -51,7 +51,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -60,37 +60,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .file-upload-area {

package/dist/collection/components/upload/upload.js

@@ -175,7 +175,7 @@ export class Upload {
             ? 'Upload folder'
             : 'Upload files';
         const { 'aria-label': ariaLabel = defaultAriaLabel, ...a11y } = this.a11y;
-        return (h(Host, { key: '9a21dd00faf48cd80ae13e84af47e09135f35ff8', ...a11y, "aria-disabled": disabled }, h("div", { key: 'd94f8f4756bc8fc6484adde5928020dd0d024b41', class: {
+        return (h(Host, { key: '183f8abe7ec5d6fd3427e01b9b03216fa12d41ac', ...a11y, "aria-disabled": disabled }, h("div", { key: '333b66856dcb9e55b2b2658f260cfbcf00b0323c', class: {
                 'file-upload-area': true,
                 'file-over': this.state !== UploadFileState.LOADING && this.isFileOver,
                 checking: this.state === UploadFileState.LOADING,
@@ -185,9 +185,9 @@ export class Upload {
                 if (this.state !== UploadFileState.LOADING) {
                     this.fileDropped(e);
                 }
-            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave() }, this.renderUploadState(), h("div", { key: '9e3ca61924cca20b05afe9a9839be43ff4d4df0c' }, h("input", { key: '5a237001c511dbfd0b7fb21a6b5986e07fab0915', "aria-label": ariaLabel, "aria-disabled": disabled, multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", ...directoryAttributes, tabindex: "-1", onChange: (e) => {
+            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave() }, this.renderUploadState(), h("div", { key: '8934a20d5a8ab01a8e18523d1d533eda1ae47bd6' }, h("input", { key: '44e78de7cc78501f559102f9c11e5def89f357c7', "aria-label": ariaLabel, "aria-disabled": disabled, multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", ...directoryAttributes, tabindex: "-1", onChange: (e) => {
                 this.fileChangeEvent(e);
-            }, accept: this.accept, disabled: disabled }), h("ix-button", { key: '0e597ad0b6dbadad5097258e6e5ebf8cca4cd409', variant: "secondary", "aria-disabled": disabled, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile ??
+            }, accept: this.accept, disabled: disabled }), h("ix-button", { key: '2847f32277c81f54a265e02c0ea03f8301527cad', variant: "secondary", "aria-disabled": disabled, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile ??
             (this.directoryUpload ? 'Upload folder…' : 'Upload file…'))))));
     }
     static get is() { return "ix-upload"; }

package/dist/collection/components/utils/input/validation.js

@@ -52,25 +52,60 @@ export function checkFieldClasses(hostElement, includeChildren = false) {
         isWarning: classListContains(hostElement, 'ix-warning', includeChildren),
     };
 }
+/**
+ * Thrown when a form control’s native input is not available yet (or already gone).
+ */
+export class NativeInputNotFoundError extends Error {
+    constructor(message = 'Input element not found') {
+        super(message);
+        this.name = 'NativeInputNotFoundError';
+    }
+}
+function isMissingNativeInputError(error) {
+    return (error instanceof NativeInputNotFoundError ||
+        // Cross-bundle / duplicated class copies still carry the stable name.
+        (error instanceof Error && error.name === 'NativeInputNotFoundError'));
+}
 export function HookValidationLifecycle(options) {
     return (proto, methodName) => {
         let checkIfRequiredFunction;
         let classMutationObserver;
+        let checkTimeoutId = null;
         const { componentWillLoad, disconnectedCallback, connectedCallback } = proto;
         proto.connectedCallback = function () {
             const host = getElement(this);
+            if (checkTimeoutId != null) {
+                clearTimeout(checkTimeoutId);
+                checkTimeoutId = null;
+            }
             checkIfRequiredFunction = async () => {
                 const skipValidation = await shouldSuppressInternalValidation(host);
-                if (skipValidation) {
+                if (skipValidation || !host.isConnected) {
                     return;
                 }
                 if (!isIxInputFieldComponent(host)) {
                     return;
                 }
-                const validationElement = await host.getNativeInputElement?.();
+                let validationElement;
+                try {
+                    validationElement = await host.getNativeInputElement?.();
+                }
+                catch (error) {
+                    // Expected during connect/teardown when the native input is unset (e.g. ix-select).
+                    if (!isMissingNativeInputError(error)) {
+                        throw error;
+                    }
+                    validationElement = undefined;
+                }
+                if (!host.isConnected) {
+                    return;
+                }
                 if (host.hasValidValue && typeof host.hasValidValue === 'function') {
                     const hasValue = await host.hasValidValue();
                     const touched = await isTouched(host);
+                    if (!host.isConnected) {
+                        return;
+                    }
                     if (host.required) {
                         host.classList.toggle('ix-invalid--required', !hasValue && touched);
                     }
@@ -82,12 +117,18 @@ export function HookValidationLifecycle(options) {
                     typeof host.getValidityState === 'function') {
                     const validityState = await host.getValidityState();
                     const touched = await isTouched(host);
+                    if (!host.isConnected) {
+                        return;
+                    }
                     host.classList.toggle(`ix-invalid--validity-patternMismatch`, validityState.patternMismatch);
                     host.classList.toggle('ix-invalid--validity-invalid', !validityState.valid && touched);
                     const fieldWrapper = host.shadowRoot?.querySelector('ix-field-wrapper');
                     if (validationElement && fieldWrapper) {
                         const ariaErrorMessageElement = await fieldWrapper.getAriaErrorMessageElement();
                         const ariaHelperMessageElement = await fieldWrapper.getAriaHelperMessageElement();
+                        if (!host.isConnected) {
+                            return;
+                        }
                         if (ariaHelperMessageElement) {
                             validationElement.setAttribute('aria-describedby', `${ariaHelperMessageElement.id}`);
                         }
@@ -107,7 +148,17 @@ export function HookValidationLifecycle(options) {
             host.addEventListener('checkedChange', checkIfRequiredFunction);
             host.addEventListener('valueChange', checkIfRequiredFunction);
             host.addEventListener('ixBlur', checkIfRequiredFunction);
-            setTimeout(checkIfRequiredFunction);
+            checkTimeoutId = setTimeout(() => {
+                checkTimeoutId = null;
+                if (checkIfRequiredFunction) {
+                    void checkIfRequiredFunction().catch((error) => {
+                        if (isMissingNativeInputError(error)) {
+                            return;
+                        }
+                        console.error(error);
+                    });
+                }
+            });
             return connectedCallback?.call(this);
         };
         proto.componentWillLoad = function () {
@@ -122,6 +173,10 @@ export function HookValidationLifecycle(options) {
         };
         proto.disconnectedCallback = function () {
             const host = getElement(this);
+            if (checkTimeoutId != null) {
+                clearTimeout(checkTimeoutId);
+                checkTimeoutId = null;
+            }
             if (host && classMutationObserver) {
                 classMutationObserver.destroy();
                 classMutationObserver = null;