@siemens/ix 4.2.0 → 4.3.0

package/hydrate/index.js

@@ -4117,6 +4117,146 @@ const iconTriangleFilled = "data:image/svg+xml;utf8,<?xml version='1.0' encoding
 const iconWarningRhomb = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill-rule='evenodd' d='M253.617407,12.4967773 L434.398258,193.277628 C451.060628,209.939998 451.060628,236.955037 434.398258,253.617407 L253.617407,434.398258 C236.955037,451.060628 209.939998,451.060628 193.277628,434.398258 L12.4967773,253.617407 C-4.16559245,236.955037 -4.16559245,209.939998 12.4967773,193.277628 L193.277628,12.4967773 C209.939998,-4.16559245 236.955037,-4.16559245 253.617407,12.4967773 Z M223.447518,42.6666667 L42.6666667,223.447518 L223.447518,404.228369 L404.228369,223.447518 L223.447518,42.6666667 Z M223.447518,282.114184 C238.685613,282.114184 250.114184,293.378184 250.114184,308.738184 C250.114184,324.098184 238.685613,335.362184 223.447518,335.362184 C207.863102,335.362184 196.780851,324.098184 196.780851,308.396851 C196.780851,293.378184 208.209422,282.114184 223.447518,282.114184 Z M244.780851,116.780851 L244.780851,244.780851 L202.114184,244.780851 L202.114184,116.780851 L244.780851,116.780851 Z' transform='translate(32.552 32.552)'/></svg>";
 const iconWarning = "data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(32.000000, 42.666667)'><path d='M246.312928,5.62892705 C252.927596,9.40873724 258.409564,14.8907053 262.189374,21.5053731 L444.667042,340.84129 C456.358134,361.300701 449.250007,387.363834 428.790595,399.054926 C422.34376,402.738832 415.04715,404.676552 407.622001,404.676552 L42.6666667,404.676552 C19.1025173,404.676552 7.10542736e-15,385.574034 7.10542736e-15,362.009885 C7.10542736e-15,354.584736 1.93772021,347.288125 5.62162594,340.84129 L188.099293,21.5053731 C199.790385,1.04596203 225.853517,-6.06216498 246.312928,5.62892705 Z M225.144334,42.6739678 L42.6666667,362.009885 L407.622001,362.009885 L225.144334,42.6739678 Z M224,272 C239.238095,272 250.666667,283.264 250.666667,298.624 C250.666667,313.984 239.238095,325.248 224,325.248 C208.415584,325.248 197.333333,313.984 197.333333,298.282667 C197.333333,283.264 208.761905,272 224,272 Z M245.333333,106.666667 L245.333333,234.666667 L202.666667,234.666667 L202.666667,106.666667 L245.333333,106.666667 Z' id='Combined-Shape'/></g></g></svg>";
 
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+const isHttpUrl = (link) => {
+    if (!link) {
+        return false;
+    }
+    let url;
+    try {
+        url = new URL(link);
+    }
+    catch (e) {
+        return false;
+    }
+    return url.protocol === 'http:' || url.protocol === 'https:';
+};
+const isSvgDataUrl = (url) => {
+    if (!url) {
+        return false;
+    }
+    if (typeof url !== 'string') {
+        return false;
+    }
+    return url.startsWith('data:image/svg+xml');
+};
+
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+const a11yBoolean = (value) => value ? 'true' : 'false';
+const kebabCaseToUpperCaseSentence = (kebabCase) => {
+    const withoutFilledSuffix = kebabCase.replace('-filled', '');
+    const words = withoutFilledSuffix.split('-');
+    const sentence = words
+        .map((word) => {
+        const trimWord = word.trim();
+        const digitLessWord = trimWord.replace(/\d+/g, '');
+        if (digitLessWord.length === 0) {
+            return trimWord;
+        }
+        return digitLessWord;
+    })
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+    return sentence;
+};
+const getFallbackLabelFromIconName = (iconName) => {
+    if (!iconName) {
+        return 'Unknown';
+    }
+    if (isHttpUrl(iconName)) {
+        return 'Unknown';
+    }
+    if (isSvgDataUrl(iconName)) {
+        return 'Unknown';
+    }
+    const label = kebabCaseToUpperCaseSentence(iconName);
+    if (label.length === 0) {
+        return 'Unknown';
+    }
+    return label;
+};
+const a11yHostAttributes = (hostElement, ignoreAttributes = []) => {
+    const attributeObject = {};
+    a11yAttributes.forEach((attr) => {
+        var _a;
+        if (hostElement.hasAttribute(attr)) {
+            const value = hostElement.getAttribute(attr);
+            if (value !== null && !ignoreAttributes.includes(attr)) {
+                attributeObject[attr] = (_a = hostElement.getAttribute(attr)) !== null && _a !== void 0 ? _a : '';
+                hostElement.removeAttribute(attr);
+            }
+        }
+    });
+    return attributeObject;
+};
+const a11yAttributes = [
+    'role',
+    'aria-activedescendant',
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-braillelabel',
+    'aria-brailleroledescription',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colindextext',
+    'aria-colspan',
+    'aria-controls',
+    'aria-current',
+    'aria-describedby',
+    'aria-description',
+    'aria-details',
+    'aria-disabled',
+    'aria-errormessage',
+    'aria-expanded',
+    'aria-flowto',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-labelledby',
+    'aria-level',
+    'aria-live',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-owns',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowindextext',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext',
+];
+
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
         throw new TypeError("Private accessor was defined without a getter");
@@ -4235,6 +4375,9 @@ const getCoreDelegate = () => coreDelegate;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/**
+ * Set accessibility attributes on modal element
+ */
 function setA11yAttributes(element, config) {
     const ariaDescribedby = config.ariaDescribedby;
     const ariaLabelledby = config.ariaLabelledby;
@@ -4250,6 +4393,9 @@ function setA11yAttributes(element, config) {
 function getIxModal(element) {
     return element.closest('ix-modal');
 }
+/**
+ * Dismiss closest ix-modal relative to a provided element
+ */
 function dismissModal(element, dismissResult) {
     const dialog = getIxModal(element);
     if (dialog) {
@@ -4257,6 +4403,9 @@ function dismissModal(element, dismissResult) {
         return;
     }
 }
+/**
+ * Show modal with given configuration
+ */
 async function showModal(config) {
     const delegate = resolveDelegate();
     let dialogRef;
@@ -4326,146 +4475,6 @@ async function showAppSwitch(config) {
     };
 }
 
-/*
- * SPDX-FileCopyrightText: 2024 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.
- */
-const isHttpUrl = (link) => {
-    if (!link) {
-        return false;
-    }
-    let url;
-    try {
-        url = new URL(link);
-    }
-    catch (e) {
-        return false;
-    }
-    return url.protocol === 'http:' || url.protocol === 'https:';
-};
-const isSvgDataUrl = (url) => {
-    if (!url) {
-        return false;
-    }
-    if (typeof url !== 'string') {
-        return false;
-    }
-    return url.startsWith('data:image/svg+xml');
-};
-
-/*
- * SPDX-FileCopyrightText: 2023 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.
- */
-const a11yBoolean = (value) => value ? 'true' : 'false';
-const kebabCaseToUpperCaseSentence = (kebabCase) => {
-    const withoutFilledSuffix = kebabCase.replace('-filled', '');
-    const words = withoutFilledSuffix.split('-');
-    const sentence = words
-        .map((word) => {
-        const trimWord = word.trim();
-        const digitLessWord = trimWord.replace(/\d+/g, '');
-        if (digitLessWord.length === 0) {
-            return trimWord;
-        }
-        return digitLessWord;
-    })
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ');
-    return sentence;
-};
-const getFallbackLabelFromIconName = (iconName) => {
-    if (!iconName) {
-        return 'Unknown';
-    }
-    if (isHttpUrl(iconName)) {
-        return 'Unknown';
-    }
-    if (isSvgDataUrl(iconName)) {
-        return 'Unknown';
-    }
-    const label = kebabCaseToUpperCaseSentence(iconName);
-    if (label.length === 0) {
-        return 'Unknown';
-    }
-    return label;
-};
-const a11yHostAttributes = (hostElement, ignoreAttributes = []) => {
-    const attributeObject = {};
-    a11yAttributes.forEach((attr) => {
-        var _a;
-        if (hostElement.hasAttribute(attr)) {
-            const value = hostElement.getAttribute(attr);
-            if (value !== null && !ignoreAttributes.includes(attr)) {
-                attributeObject[attr] = (_a = hostElement.getAttribute(attr)) !== null && _a !== void 0 ? _a : '';
-                hostElement.removeAttribute(attr);
-            }
-        }
-    });
-    return attributeObject;
-};
-const a11yAttributes = [
-    'role',
-    'aria-activedescendant',
-    'aria-atomic',
-    'aria-autocomplete',
-    'aria-braillelabel',
-    'aria-brailleroledescription',
-    'aria-busy',
-    'aria-checked',
-    'aria-colcount',
-    'aria-colindex',
-    'aria-colindextext',
-    'aria-colspan',
-    'aria-controls',
-    'aria-current',
-    'aria-describedby',
-    'aria-description',
-    'aria-details',
-    'aria-disabled',
-    'aria-errormessage',
-    'aria-expanded',
-    'aria-flowto',
-    'aria-haspopup',
-    'aria-hidden',
-    'aria-invalid',
-    'aria-keyshortcuts',
-    'aria-label',
-    'aria-labelledby',
-    'aria-level',
-    'aria-live',
-    'aria-multiline',
-    'aria-multiselectable',
-    'aria-orientation',
-    'aria-owns',
-    'aria-placeholder',
-    'aria-posinset',
-    'aria-pressed',
-    'aria-readonly',
-    'aria-relevant',
-    'aria-required',
-    'aria-roledescription',
-    'aria-rowcount',
-    'aria-rowindex',
-    'aria-rowindextext',
-    'aria-rowspan',
-    'aria-selected',
-    'aria-setsize',
-    'aria-sort',
-    'aria-valuemax',
-    'aria-valuemin',
-    'aria-valuenow',
-    'aria-valuetext',
-];
-
 const applicationHeaderCss = ":host{display:flex;flex-wrap:nowrap;align-items:end;justify-content:space-between;position:relative;width:100%;min-height:3rem;padding-top:var(--ix-safe-area-inset-top, 0rem);padding-right:calc(0.625rem + var(--ix-safe-area-inset-right, 0rem));padding-left:calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .left-side,:host .right-side{display:flex;flex-direction:row;flex-wrap:nowrap;position:relative;align-items:center;min-width:0;min-height:3rem;height:100%}:host .left-side{flex:0 1 auto}:host .left-side .app-icon{display:block;position:relative;width:2rem;min-width:2rem;max-width:2rem;height:2rem;min-height:2rem;max-height:2rem}:host .left-side .app-icon.app-icon-outline{outline:1px solid var(--theme-app-header-app-icon--outline-color);border-radius:0.125rem}:host .left-side .app-icon img{position:relative;display:block;width:100%;height:100%;border-radius:0.125rem}:host .left-side .app-switch{margin:0 0.625rem}:host .left-side .app-switch.without-app-icon{margin-left:0px}:host .left-side .name{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;margin-left:0.75rem;margin-right:0.75rem;color:var(--theme-app-header--color);min-width:0;gap:0.75rem;overflow:hidden}:host .left-side .application-name,:host .left-side .application-name-suffix{overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:nowrap}:host .left-side .application-name{flex:0 1 auto;min-width:0;flex-shrink:0;max-width:100%}:host .left-side .application-name-suffix{flex:1 1 auto;margin-top:0.4rem;min-width:0;flex-shrink:1;color:var(--theme-app-header-name-suffix--color)}:host .left-side .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color);margin-right:1rem;margin-left:1rem;min-width:-moz-fit-content;min-width:fit-content}:host .left-side .logo.hide-logo{display:none}:host .right-side{flex:1 1 auto;overflow:hidden;justify-content:space-between}:host .right-side .content,:host .right-side .secondary{display:flex;position:relative;align-items:center;justify-content:space-between;flex-direction:row;flex-wrap:nowrap;height:100%}:host .right-side .content{min-width:-moz-max-content;min-width:max-content}:host .right-side .secondary{overflow:hidden}:host .right-side .dropdown{overflow:visible}:host .right-side .dropdown-content>.slot-content-active{padding:0.5rem 1.5rem 0.5rem 1.5rem;border-top:none}:host .right-side .dropdown-content .slot-content-active~.slot-content-active{border-top:1px solid var(--theme-color-x-weak-bdr)}:host .right-side .context-menu{display:none}:host .right-side .context-menu.context-menu-visible{display:block;margin-left:0.5rem}:host .right-side ::slotted(ix-avatar){margin-left:0.5rem}:host .right-side .primary-navigation{align-self:end}:host .right-side.sm{justify-content:end}@media only screen and (max-width: 48em){:host .logo{margin-left:0.5rem;display:none !important}:host .content,:host .secondary,:host .app-icon{display:none}}:host(.hide-bottom-border){border-bottom:none}";
 
 /**
@@ -4498,6 +4507,13 @@ class ApplicationHeader {
          * Conversely, if the header is within the application frame, this property is ineffective.
          */
         this.showMenu = false;
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         this.breakpoint = 'lg';
         this.menuExpanded = false;
         this.suppressResponsive = false;
@@ -4620,31 +4636,31 @@ class ApplicationHeader {
             this.breakpoint !== 'sm' &&
             this.suppressResponsive === false;
         const showCompanyLogoByProperty = this.breakpoint !== 'sm' && !!this.companyLogo;
-        return (hAsync(Host, { key: '0568c65fa9cfe4f1250a5f7704cc19f7e38a5d19', class: {
+        return (hAsync(Host, { key: 'f70c16368414080ba826e2009b1e0f3f65cb2ff1', class: {
                 [`breakpoint-${this.breakpoint}`]: true,
                 'hide-bottom-border': this.hideBottomBorder,
-            }, slot: "application-header" }, hAsync("div", { key: 'a5c4fa84d92bd9ce8e236f117605652bfc92e60d', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (hAsync("div", { key: '0f790883c295875ef6b3f023cd9daa34980c5c96', class: {
+            }, slot: "application-header" }, hAsync("div", { key: 'aa68f775dc1b58aafdf4b4d37700113fbc509e2d', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (hAsync("div", { key: 'ae9b4672c1348d21c9c48421e867634af213a5c7', class: {
                 'app-icon': true,
                 'app-icon-outline': this.appIconOutline,
-            } }, hAsync("img", { key: '3e20234523c716d04e123706912eef1023eb884f', src: this.appIcon, alt: this.appIconAlt }))), (this.showMenu || showMenuByApplicationFrame) && (hAsync("ix-menu-expand-icon", { key: 'b46e806adadc12a7a355691bdb14bb2a3ee0f98f', onClick: () => this.onMenuClick(), expanded: this.menuExpanded, ixAriaLabel: this.ariaLabelMenuExpandIconButton })), showApplicationSwitch && (hAsync("ix-icon-button", { key: '57112cb328fc5231871e18496863ebc3a38f978b', onClick: () => this.showAppSwitch(), icon: iconApps, variant: "subtle-tertiary", class: {
+            } }, hAsync("img", { key: '2bf6e28d9867f08a6d954e132ece2c149e20f1b5', src: this.appIcon, alt: this.appIconAlt }))), (this.showMenu || showMenuByApplicationFrame) && (hAsync("ix-menu-expand-icon", { key: '64ba854155f4ab55ff7aa2f2b15b2feb19145a4e', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (hAsync("ix-icon-button", { key: '265abaec15030ee7dc41a1e0535f09e32b99ff01', onClick: () => this.showAppSwitch(), icon: iconApps, variant: "subtle-tertiary", class: {
                 'app-switch': true,
                 'without-app-icon': !this.appIcon,
-            }, "aria-label": this.ariaLabelAppSwitchIconButton })), showCompanyLogoByProperty && (hAsync("div", { key: 'b622ece9a3c1645141c1cb54d9cb88f0b2b12646', class: "logo" }, hAsync("img", { key: '854a9696190d015ce052c745f9ed7acc206f16d5', src: this.companyLogo, alt: this.companyLogoAlt }))), hAsync("div", { key: '0d5ff7f62bb55cb15d2e15e41279ca671716224c', class: {
+            }, "aria-label": this.ariaLabelAppSwitchIconButton })), showCompanyLogoByProperty && (hAsync("div", { key: '34e1ee388c68ec1e5a4c5ab0a67ae07f66d3b2ef', class: "logo" }, hAsync("img", { key: '86bb6a77c06e0f30ce41de66a4fe813bc236b536', src: this.companyLogo, alt: this.companyLogoAlt }))), hAsync("div", { key: '3391b44a0cdaaa1b8b60e29fe71c9f9a04473919', class: {
                 logo: true,
                 'hide-logo': !this.hasSlottedLogo,
-            } }, hAsync("slot", { key: '42d42aab0493036c165f1d7d969288bc2dc339c8', name: "logo", onSlotchange: () => (this.hasSlottedLogo = this.checkLogoSlot()) })), hAsync("div", { key: 'a388e25471839639f82f2e3d8798d041cdab1f78', class: "name" }, hAsync("ix-typography", { key: 'f7d197105b6609597fa742ca8b85aa2c80b2c25d', format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== 'sm' && (hAsync("ix-typography", { key: '5a78095814f0d39666bbe26bb968d4df72233016', format: "body-xs", class: "application-name-suffix" }, this.nameSuffix)))), hAsync("div", { key: 'e4a01fd2bf06bd9ae064c5f336e7ef2fe2880e1c', class: { 'right-side': true, sm: this.breakpoint === 'sm' } }, this.breakpoint !== 'sm' && (hAsync("div", { key: 'f3c3221c2dbcccf19d23502ff05984815fc8ea1e', class: "secondary" }, hAsync("slot", { key: '9392845b82451cb62b886ab1bafa7ba7ddf21d13', name: "secondary" }))), hAsync("div", { key: 'a288be02d9ee23480339d8de284c186fbc9bfd26', class: "content" }, this.breakpoint !== 'sm' && hAsync("slot", { key: '34dfa9b114c85e3e59183fce1b5a977eabe02d6a' }), hAsync("ix-icon-button", { key: 'c884b249320deb5f105538dd0fd7e47efd6207c0', class: {
+            } }, hAsync("slot", { key: 'e0e554af7fe4746a6b12ada015f0f129b96bdd76', name: "logo", onSlotchange: () => (this.hasSlottedLogo = this.checkLogoSlot()) })), hAsync("div", { key: 'cf3bca529813307e538a13ddc454d01cce5a8689', class: "name" }, hAsync("ix-typography", { key: '9e4d9c3b6a3f45e6ceba918bc17fd4ff4a5453c3', format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== 'sm' && (hAsync("ix-typography", { key: '9f7780499e2fb19e622e16a4f7e46084e5713f68', format: "body-xs", class: "application-name-suffix" }, this.nameSuffix)))), hAsync("div", { key: '3a4dee26b48e356c2652517dd88887d936f926d5', class: { 'right-side': true, sm: this.breakpoint === 'sm' } }, this.breakpoint !== 'sm' && (hAsync("div", { key: 'fd961eea6ec62a745dc2b6c9842a7dcd777c9218', class: "secondary" }, hAsync("slot", { key: 'c214a8d62f28268acb56f1ecb88115d82f14cf0a', name: "secondary" }))), hAsync("div", { key: '48bb5fd5dbb93f25c933436ce5033fbb75db6962', class: "content" }, this.breakpoint !== 'sm' && hAsync("slot", { key: '868289b10946d895af657afb22d047a2864a9e8a' }), hAsync("ix-icon-button", { key: '6b83cf6c6f04a1435c21a6f1a61a54f82531db48', class: {
                 'context-menu': true,
                 'context-menu-visible': this.hasOverflowContextMenu || this.hasOverflowSlotElements,
-            }, "data-context-menu": true, "data-testid": "show-more", icon: iconMoreMenu, variant: "subtle-tertiary", "aria-label": this.ariaLabelMoreMenuIconButton, "aria-hidden": a11yBoolean(!(this.hasOverflowContextMenu || this.hasOverflowSlotElements)) }), hAsync("ix-dropdown", { key: '42ea43e1f28ecdd7651a2f652edb6eb2462a0df3', "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11yBoolean(!(this.hasOverflowContextMenu || this.hasOverflowSlotElements)) }, hAsync("div", { key: 'b57645df48b14862e17510560386dffdc7f918f2', class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === 'sm' && (hAsync("div", { key: 'd27a3ab3dcccb24deea6452aab078975d7657c1f', class: {
+            }, "data-context-menu": true, "data-testid": "show-more", icon: iconMoreMenu, variant: "subtle-tertiary", "aria-label": this.ariaLabelMoreMenuIconButton, "aria-hidden": a11yBoolean(!(this.hasOverflowContextMenu || this.hasOverflowSlotElements)) }), hAsync("ix-dropdown", { key: 'e0c44a160fccfc5d02672b09abff3ea209df4056', "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11yBoolean(!(this.hasOverflowContextMenu || this.hasOverflowSlotElements)), enableTopLayer: this.enableTopLayer }, hAsync("div", { key: 'd17c4e3695fdcc517272552b4420175dfbd2f2c8', class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === 'sm' && (hAsync("div", { key: '6e96017787c861308cd4dbcaca0312dd0601746b', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasSecondarySlotElements,
-            } }, hAsync("slot", { key: '8236935ea329c8650b08c0fbb2be11a4233b54a5', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (hAsync("div", { key: 'd947b3da7b1c2683f319604698550e6deede8bb5', class: {
+            } }, hAsync("slot", { key: 'd078fd257e64da944799047951c8b9ab2d762e0d', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (hAsync("div", { key: '64d3c501c11859ed9c27d3a8f64294a080925ca4', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasDefaultSlotElements,
-            } }, hAsync("slot", { key: '5e60684fe9b2d19e67a4b8c56225be76a2aff668', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), hAsync("div", { key: 'c072ab98aa238e71087064f9ffcbc46a8b43cacd', class: {
+            } }, hAsync("slot", { key: 'aa759b7edbfa50848887dc23e649ffe85fd296fa', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), hAsync("div", { key: 'caf2086cb213c9650e52df3433eac548a7a5510e', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasOverflowSlotElements,
-            } }, hAsync("slot", { key: '99752eacbebd15e6b9dda9b9dc96c919ed8ebcf6', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), hAsync("slot", { key: 'c6c071f3ee91c6f0aa709ba59e979e644f22f22d', name: "ix-application-header-avatar" })))));
+            } }, hAsync("slot", { key: 'e4bf46ff49a8416e405513115db147994a2c6df6', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), hAsync("slot", { key: '17038a34906a10b5f0014a3f9f0e4bf8362f5695', name: "ix-application-header-avatar" })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -4668,6 +4684,7 @@ class ApplicationHeader {
             "ariaLabelMenuExpandIconButton": [1, "aria-label-menu-expand-icon-button"],
             "ariaLabelAppSwitchIconButton": [1, "aria-label-app-switch-icon-button"],
             "ariaLabelMoreMenuIconButton": [1, "aria-label-more-menu-icon-button"],
+            "enableTopLayer": [4, "enable-top-layer"],
             "breakpoint": [32],
             "menuExpanded": [32],
             "suppressResponsive": [32],
@@ -8493,6 +8510,11 @@ const handleOnClick = (e, props) => {
         props.onClick(e);
     }
 };
+const isIconDecorative = (ariaAttributes, children) => {
+    const hasTextContent = children && children.length > 0;
+    const hasAriaLabel = !!(ariaAttributes['aria-label'] || ariaAttributes['aria-labelledby']);
+    return hasTextContent || hasAriaLabel;
+};
 const BaseButton = (props, children) => {
     var _a, _b, _c;
     const extraClasses = (_a = props.extraClasses) !== null && _a !== void 0 ? _a : {};
@@ -8500,15 +8522,16 @@ const BaseButton = (props, children) => {
     if (!ariaAttributes['aria-disabled'] && props.disabled) {
         ariaAttributes['aria-disabled'] = 'true';
     }
+    const iconIsDecorative = isIconDecorative(ariaAttributes, children);
     const commonAttributes = Object.assign(Object.assign({}, ariaAttributes), { tabindex: props.disabled ? -1 : ((_c = props.tabIndex) !== null && _c !== void 0 ? _c : 0), class: Object.assign(Object.assign({}, getButtonClasses(props.variant, props.iconOnly, props.iconOval, props.selected, props.disabled || props.loading)), extraClasses) });
     const buttonContent = [
         props.loading ? (hAsync("ix-spinner", { size: getSpinnerSize(props), hideTrack: true })) : null,
-        props.icon && !props.loading ? (hAsync("ix-icon", { class: "icon", name: props.icon, size: props.iconSize, color: props.iconColor })) : null,
+        props.icon && !props.loading ? (hAsync("ix-icon", { class: "icon", name: props.icon, size: props.iconSize, color: props.iconColor, "aria-hidden": iconIsDecorative ? 'true' : undefined })) : null,
         hAsync("div", { class: {
                 content: true,
                 [`content-${props.alignment}`]: !!props.alignment,
             } }, children),
-        props.iconRight ? (hAsync("ix-icon", { class: "icon-right", name: props.iconRight, size: props.iconSize, color: props.iconColor })) : null,
+        props.iconRight ? (hAsync("ix-icon", { class: "icon-right", name: props.iconRight, size: props.iconSize, color: props.iconColor, "aria-hidden": iconIsDecorative ? 'true' : undefined })) : null,
         props.afterContent ? props.afterContent : null,
     ];
     // If href is provided, render as an anchor tag
@@ -8760,6 +8783,13 @@ class Breadcrumb {
          * with conditionally hidden previous items
          */
         this.ariaLabelPreviousButton = 'previous';
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         this.previousButtonRef = makeRef();
         this.nextButtonRef = makeRef();
         this.items = [];
@@ -8810,9 +8840,9 @@ class Breadcrumb {
     render() {
         var _a, _b, _c, _d;
         const a11y = a11yHostAttributes(this.hostElement);
-        return (hAsync(Host, { key: 'c5457acd786da77d474f83613a2c12910a193779' }, hAsync("ix-dropdown", { key: '3f1e0ae1e4ac1d192ff7c0d5619329cfbcdf8a62', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        return (hAsync(Host, { key: '6c7e20e30924d04854ca78ead9fd98d5ebe346bf' }, hAsync("ix-dropdown", { key: '822c078f94f89e66db61e65f77d5e7bc6fb40aa2', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
                 ? this.previousButtonRef.waitForCurrent()
-                : undefined, onShowChanged: ({ detail }) => {
+                : undefined, enableTopLayer: this.enableTopLayer, onShowChanged: ({ detail }) => {
                 this.isPreviousDropdownExpanded = detail;
                 this.hostElement.shadowRoot.getElementById(this.previousButtonId);
             } }, this.items
@@ -8823,7 +8853,7 @@ class Breadcrumb {
             return (hAsync("ix-dropdown-item", { label: label, onClick: () => {
                     this.onItemClick(label);
                 }, onItemClick: (event) => event.stopPropagation() }));
-        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (hAsync("ix-breadcrumb-item", { id: this.previousButtonId, ref: this.previousButtonRef, label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, hAsync("nav", { key: '11b4a0c0cbad59437fccee34a73cd4e89de39a1c', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, hAsync("ol", { key: 'ad9d8c27e05b76f334f7cf6f79038d339e8d538c' }, hAsync("slot", { key: 'd84c2c0028e22cbfd126b867177ba9b4271e8c24' }))), hAsync("ix-dropdown", { key: '6ba681eb8f116ec287961a7e873b90d381baefdb', trigger: this.nextButtonRef.waitForCurrent() }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (hAsync("ix-dropdown-item", { label: item, onClick: (e) => {
+        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (hAsync("ix-breadcrumb-item", { id: this.previousButtonId, ref: this.previousButtonRef, label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, hAsync("nav", { key: 'e9f69c0666458f34d930bc5e19663fc9a8e69d90', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, hAsync("ol", { key: '2ad3f37c9baffbd9eb8789dc8304dceb6772e0d4' }, hAsync("slot", { key: '2bd136c9714401ddf2ea8bc5e3cb783b128ce795' }))), hAsync("ix-dropdown", { key: 'ce382ec6bd3590e678a03517b31ec15bb7f2528f', trigger: this.nextButtonRef.waitForCurrent(), enableTopLayer: this.enableTopLayer }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (hAsync("ix-dropdown-item", { label: item, onClick: (e) => {
                 this.nextClick.emit({
                     event: e,
                     item,
@@ -8843,6 +8873,7 @@ class Breadcrumb {
             "nextItems": [16, "next-items"],
             "subtle": [4],
             "ariaLabelPreviousButton": [1, "aria-label-previous-button"],
+            "enableTopLayer": [4, "enable-top-layer"],
             "items": [32],
             "isPreviousDropdownExpanded": [32]
         },
@@ -9079,7 +9110,7 @@ class Button {
     }; }
 }
 
-const cardCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;cursor:pointer;width:20rem;border:var(--theme-card--border-width) solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-card--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-card--border-radius);border-top-right-radius:var(--theme-card--border-radius);overflow:hidden}:host .card-content-wrapper{height:100%;width:100%;box-sizing:border-box}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-outline){--ix-card-background:var(--theme-card-outline--background);--ix-card-border-color:var(--theme-card-outline--border-color);color:var(--theme-card-outline--color)}:host(.card-outline) ::slotted(ix-card-accordion){color:var(--theme-color-std-text)}:host(.card-filled){--ix-card-background:var(--theme-card-filled--background);--ix-card-border-color:var(--theme-card-filled--border-color);color:var(--theme-card-filled--color)}:host(.card-filled) ::slotted(ix-card-accordion){color:var(--theme-color-std-text)}:host(.card-alarm){--ix-card-background:var(--theme-card-alarm--background);--ix-card-border-color:var(--theme-card-alarm--border-color);color:var(--theme-card-alarm--color)}:host(.card-critical){--ix-card-background:var(--theme-card-critical--background);--ix-card-border-color:var(--theme-card-critical--border-color);color:var(--theme-card-critical--color)}:host(.card-warning){--ix-card-background:var(--theme-card-warning--background);--ix-card-border-color:var(--theme-card-warning--border-color);color:var(--theme-card-warning--color)}:host(.card-success){--ix-card-background:var(--theme-card-success--background);--ix-card-border-color:var(--theme-card-success--border-color);color:var(--theme-card-success--color)}:host(.card-info){--ix-card-background:var(--theme-card-info--background);--ix-card-border-color:var(--theme-card-info--border-color);color:var(--theme-card-info--color)}:host(.card-neutral){--ix-card-background:var(--theme-card-neutral--background);--ix-card-border-color:var(--theme-card-neutral--border-color);color:var(--theme-card-neutral--color)}:host(.card-primary){--ix-card-background:var(--theme-card-primary--background);--ix-card-border-color:var(--theme-card-primary--border-color);color:var(--theme-card-primary--color)}:host(:not(.card-insight,.card-outline)){--ix-card-border-color:transparent}:host(.card-outline:hover){--ix-card-border-color:var(--theme-card-outline--border-color--hover);--ix-card-background:var(--theme-card-outline--background--hover)}:host(.card-outline:active){--ix-card-border-color:var(--theme-card-outline--border-color--active);--ix-card-background:var(--theme-card-outline--background--active)}:host(.selected.card-outline){--ix-card-border-color:var(\n    --theme-card-outline--border-color--selected\n  );--ix-card-background:var(--theme-card-outline--background--selected)}:host(.card-filled:hover){--ix-card-border-color:var(--theme-card-filled--border-color--hover);--ix-card-background:var(--theme-card-filled--background--hover)}:host(.card-filled:active){--ix-card-border-color:var(--theme-card-filled--border-color--active);--ix-card-background:var(--theme-card-filled--background--active)}:host(.selected.card-filled){--ix-card-border-color:var(\n    --theme-card-filled--border-color--selected\n  );--ix-card-background:var(--theme-card-filled--background--selected)}:host(.card-alarm:hover){--ix-card-border-color:var(--theme-card-alarm--border-color--hover);--ix-card-background:var(--theme-card-alarm--background--hover)}:host(.card-alarm:active){--ix-card-border-color:var(--theme-card-alarm--border-color--active);--ix-card-background:var(--theme-card-alarm--background--active)}:host(.selected.card-alarm){--ix-card-border-color:var(\n    --theme-card-alarm--border-color--selected\n  );--ix-card-background:var(--theme-card-alarm--background--selected)}:host(.card-critical:hover){--ix-card-border-color:var(--theme-card-critical--border-color--hover);--ix-card-background:var(--theme-card-critical--background--hover)}:host(.card-critical:active){--ix-card-border-color:var(--theme-card-critical--border-color--active);--ix-card-background:var(--theme-card-critical--background--active)}:host(.selected.card-critical){--ix-card-border-color:var(\n    --theme-card-critical--border-color--selected\n  );--ix-card-background:var(--theme-card-critical--background--selected)}:host(.card-warning:hover){--ix-card-border-color:var(--theme-card-warning--border-color--hover);--ix-card-background:var(--theme-card-warning--background--hover)}:host(.card-warning:active){--ix-card-border-color:var(--theme-card-warning--border-color--active);--ix-card-background:var(--theme-card-warning--background--active)}:host(.selected.card-warning){--ix-card-border-color:var(\n    --theme-card-warning--border-color--selected\n  );--ix-card-background:var(--theme-card-warning--background--selected)}:host(.card-success:hover){--ix-card-border-color:var(--theme-card-success--border-color--hover);--ix-card-background:var(--theme-card-success--background--hover)}:host(.card-success:active){--ix-card-border-color:var(--theme-card-success--border-color--active);--ix-card-background:var(--theme-card-success--background--active)}:host(.selected.card-success){--ix-card-border-color:var(\n    --theme-card-success--border-color--selected\n  );--ix-card-background:var(--theme-card-success--background--selected)}:host(.card-info:hover){--ix-card-border-color:var(--theme-card-info--border-color--hover);--ix-card-background:var(--theme-card-info--background--hover)}:host(.card-info:active){--ix-card-border-color:var(--theme-card-info--border-color--active);--ix-card-background:var(--theme-card-info--background--active)}:host(.selected.card-info){--ix-card-border-color:var(\n    --theme-card-info--border-color--selected\n  );--ix-card-background:var(--theme-card-info--background--selected)}:host(.card-neutral:hover){--ix-card-border-color:var(--theme-card-neutral--border-color--hover);--ix-card-background:var(--theme-card-neutral--background--hover)}:host(.card-neutral:active){--ix-card-border-color:var(--theme-card-neutral--border-color--active);--ix-card-background:var(--theme-card-neutral--background--active)}:host(.selected.card-neutral){--ix-card-border-color:var(\n    --theme-card-neutral--border-color--selected\n  );--ix-card-background:var(--theme-card-neutral--background--selected)}:host(.card-primary:hover){--ix-card-border-color:var(--theme-card-primary--border-color--hover);--ix-card-background:var(--theme-card-primary--background--hover)}:host(.card-primary:active){--ix-card-border-color:var(--theme-card-primary--border-color--active);--ix-card-background:var(--theme-card-primary--background--active)}:host(.selected.card-primary){--ix-card-border-color:var(\n    --theme-card-primary--border-color--selected\n  );--ix-card-background:var(--theme-card-primary--background--selected)}";
+const cardCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;cursor:pointer;width:20rem;border:var(--theme-card--border-width) solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-card--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-card--border-radius);border-top-right-radius:var(--theme-card--border-radius);overflow:hidden}:host .card-content-wrapper{height:100%;width:100%;box-sizing:border-box}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-outline){--ix-card-background:var(--theme-card-outline--background);--ix-card-border-color:var(--theme-card-outline--border-color);color:var(--theme-card-outline--color)}:host(.card-outline) ::slotted(ix-card-accordion){color:var(--theme-color-std-text)}:host(.card-filled){--ix-card-background:var(--theme-card-filled--background);--ix-card-border-color:var(--theme-card-filled--border-color);color:var(--theme-card-filled--color)}:host(.card-filled) ::slotted(ix-card-accordion){color:var(--theme-color-std-text)}:host(.card-alarm){--ix-card-background:var(--theme-card-alarm--background);--ix-card-border-color:var(--theme-card-alarm--border-color);color:var(--theme-card-alarm--color)}:host(.card-critical){--ix-card-background:var(--theme-card-critical--background);--ix-card-border-color:var(--theme-card-critical--border-color);color:var(--theme-card-critical--color)}:host(.card-warning){--ix-card-background:var(--theme-card-warning--background);--ix-card-border-color:var(--theme-card-warning--border-color);color:var(--theme-card-warning--color)}:host(.card-success){--ix-card-background:var(--theme-card-success--background);--ix-card-border-color:var(--theme-card-success--border-color);color:var(--theme-card-success--color)}:host(.card-info){--ix-card-background:var(--theme-card-info--background);--ix-card-border-color:var(--theme-card-info--border-color);color:var(--theme-card-info--color)}:host(.card-neutral){--ix-card-background:var(--theme-card-neutral--background);--ix-card-border-color:var(--theme-card-neutral--border-color);color:var(--theme-card-neutral--color)}:host(.card-primary){--ix-card-background:var(--theme-card-primary--background);--ix-card-border-color:var(--theme-card-primary--border-color);color:var(--theme-card-primary--color)}:host(:not(.card-insight,.card-outline)){--ix-card-border-color:transparent}:host(.card-outline:hover){--ix-card-border-color:var(--theme-card-outline--border-color--hover);--ix-card-background:var(--theme-card-outline--background--hover)}:host(.card-outline:active){--ix-card-border-color:var(--theme-card-outline--border-color--active);--ix-card-background:var(--theme-card-outline--background--active)}:host(.selected.card-outline){--ix-card-border-color:var(\n    --theme-card-outline--border-color--selected\n  );--ix-card-background:var(--theme-card-outline--background--selected)}:host(.card-filled:hover){--ix-card-border-color:var(--theme-card-filled--border-color--hover);--ix-card-background:var(--theme-card-filled--background--hover)}:host(.card-filled:active){--ix-card-border-color:var(--theme-card-filled--border-color--active);--ix-card-background:var(--theme-card-filled--background--active)}:host(.selected.card-filled){--ix-card-border-color:var(\n    --theme-card-filled--border-color--selected\n  );--ix-card-background:var(--theme-card-filled--background--selected)}:host(.card-alarm:hover){--ix-card-border-color:var(--theme-card-alarm--border-color--hover);--ix-card-background:var(--theme-card-alarm--background--hover)}:host(.card-alarm:active){--ix-card-border-color:var(--theme-card-alarm--border-color--active);--ix-card-background:var(--theme-card-alarm--background--active)}:host(.selected.card-alarm){--ix-card-border-color:var(\n    --theme-card-alarm--border-color--selected\n  );--ix-card-background:var(--theme-card-alarm--background--selected)}:host(.card-critical:hover){--ix-card-border-color:var(--theme-card-critical--border-color--hover);--ix-card-background:var(--theme-card-critical--background--hover)}:host(.card-critical:active){--ix-card-border-color:var(--theme-card-critical--border-color--active);--ix-card-background:var(--theme-card-critical--background--active)}:host(.selected.card-critical){--ix-card-border-color:var(\n    --theme-card-critical--border-color--selected\n  );--ix-card-background:var(--theme-card-critical--background--selected)}:host(.card-warning:hover){--ix-card-border-color:var(--theme-card-warning--border-color--hover);--ix-card-background:var(--theme-card-warning--background--hover)}:host(.card-warning:active){--ix-card-border-color:var(--theme-card-warning--border-color--active);--ix-card-background:var(--theme-card-warning--background--active)}:host(.selected.card-warning){--ix-card-border-color:var(\n    --theme-card-warning--border-color--selected\n  );--ix-card-background:var(--theme-card-warning--background--selected)}:host(.card-success:hover){--ix-card-border-color:var(--theme-card-success--border-color--hover);--ix-card-background:var(--theme-card-success--background--hover)}:host(.card-success:active){--ix-card-border-color:var(--theme-card-success--border-color--active);--ix-card-background:var(--theme-card-success--background--active)}:host(.selected.card-success){--ix-card-border-color:var(\n    --theme-card-success--border-color--selected\n  );--ix-card-background:var(--theme-card-success--background--selected)}:host(.card-info:hover){--ix-card-border-color:var(--theme-card-info--border-color--hover);--ix-card-background:var(--theme-card-info--background--hover)}:host(.card-info:active){--ix-card-border-color:var(--theme-card-info--border-color--active);--ix-card-background:var(--theme-card-info--background--active)}:host(.selected.card-info){--ix-card-border-color:var(\n    --theme-card-info--border-color--selected\n  );--ix-card-background:var(--theme-card-info--background--selected)}:host(.card-neutral:hover){--ix-card-border-color:var(--theme-card-neutral--border-color--hover);--ix-card-background:var(--theme-card-neutral--background--hover)}:host(.card-neutral:active){--ix-card-border-color:var(--theme-card-neutral--border-color--active);--ix-card-background:var(--theme-card-neutral--background--active)}:host(.selected.card-neutral){--ix-card-border-color:var(\n    --theme-card-neutral--border-color--selected\n  );--ix-card-background:var(--theme-card-neutral--background--selected)}:host(.card-primary:hover){--ix-card-border-color:var(--theme-card-primary--border-color--hover);--ix-card-background:var(--theme-card-primary--background--hover)}:host(.card-primary:active){--ix-card-border-color:var(--theme-card-primary--border-color--active);--ix-card-background:var(--theme-card-primary--background--active)}:host(.selected.card-primary){--ix-card-border-color:var(\n    --theme-card-primary--border-color--selected\n  );--ix-card-background:var(--theme-card-primary--background--selected)}:host(.passive){cursor:default}:host(.passive.card-outline){--ix-card-background:var(--theme-card-outline--background);--ix-card-border-color:var(--theme-card-outline--border-color)}:host(.passive.card-filled){--ix-card-background:var(--theme-card-filled--background);--ix-card-border-color:var(--theme-card-filled--border-color)}:host(.passive.card-alarm){--ix-card-background:var(--theme-card-alarm--background);--ix-card-border-color:var(--theme-card-alarm--border-color)}:host(.passive.card-critical){--ix-card-background:var(--theme-card-critical--background);--ix-card-border-color:var(--theme-card-critical--border-color)}:host(.passive.card-warning){--ix-card-background:var(--theme-card-warning--background);--ix-card-border-color:var(--theme-card-warning--border-color)}:host(.passive.card-success){--ix-card-background:var(--theme-card-success--background);--ix-card-border-color:var(--theme-card-success--border-color)}:host(.passive.card-info){--ix-card-background:var(--theme-card-info--background);--ix-card-border-color:var(--theme-card-info--border-color)}:host(.passive.card-neutral){--ix-card-background:var(--theme-card-neutral--background);--ix-card-border-color:var(--theme-card-neutral--border-color)}:host(.passive.card-primary){--ix-card-background:var(--theme-card-primary--background);--ix-card-border-color:var(--theme-card-primary--border-color)}";
 
 class Card {
     constructor(hostRef) {
@@ -9092,12 +9123,17 @@ class Card {
          * Show card in selected state
          */
         this.selected = false;
+        /**
+         * If true, disables hover and active styles and changes cursor to default
+         */
+        this.passive = false;
     }
     render() {
-        return (hAsync(Host, { key: '3b734eddf8516af24b52b1b2ba27766a913f943d', class: {
+        return (hAsync(Host, { key: '3eed87586aed1916f7c1e3c2323a46c794d046d9', class: {
                 selected: this.selected,
                 [`card-${this.variant}`]: true,
-            } }, hAsync("div", { key: '7a2cce1797c1e89c8568e9e196020747f0f4150b', class: "card-content" }, hAsync("slot", { key: 'ea837bde282a62637ed15b96b8ca407219e949ae' })), hAsync("div", { key: 'acc07c72e4a63a671fb945e4c0332825f4781a1d', class: "card-footer" }, hAsync("slot", { key: '870004ea22909180bac56c8b7c040d914e268f1d', name: "card-accordion" }))));
+                passive: this.passive,
+            } }, hAsync("div", { key: '7ae77cffe48272d0acc8cbd0dc7286d0fc835d8d', class: "card-content" }, hAsync("slot", { key: 'ba07f9804dd1af6256ceb0cc972b2cc03a18f558' })), hAsync("div", { key: '72bc9064c1d09188d60e1b9516811a91435f53b4', class: "card-footer" }, hAsync("slot", { key: '7fbacfea4d8308e88b4db025567654a0a4ef0d96', name: "card-accordion" }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return cardCss; }
@@ -9106,7 +9142,8 @@ class Card {
         "$tagName$": "ix-card",
         "$members$": {
             "variant": [1],
-            "selected": [4]
+            "selected": [4],
+            "passive": [4]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9444,6 +9481,25 @@ class CardList {
     }; }
 }
 
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+const addDisposableEventListener = (element, eventType, callback) => {
+    element.addEventListener(eventType, callback);
+    return () => {
+        element.removeEventListener(eventType, callback);
+    };
+};
+const addDisposableEventListenerAsArray = (listener) => {
+    const disposables = listener.map(({ callback, element, eventType }) => addDisposableEventListener(element, eventType, callback));
+    return () => disposables.forEach((dispose) => dispose());
+};
+
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -9477,25 +9533,6 @@ var LogicalFilterOperator;
     LogicalFilterOperator["NOT_EQUAL"] = "Not equal";
 })(LogicalFilterOperator || (LogicalFilterOperator = {}));
 
-/*
- * SPDX-FileCopyrightText: 2024 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.
- */
-const addDisposableEventListener = (element, eventType, callback) => {
-    element.addEventListener(eventType, callback);
-    return () => {
-        element.removeEventListener(eventType, callback);
-    };
-};
-const addDisposableEventListenerAsArray = (listener) => {
-    const disposables = listener.map(({ callback, element, eventType }) => addDisposableEventListener(element, eventType, callback));
-    return () => disposables.forEach((dispose) => dispose());
-};
-
 const categoryFilterCss = ":host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host{--ix-button-border-radius-left:var(--theme-btn--border-radius);--ix-button-border-radius-right:var(--theme-btn--border-radius);display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button,:host a{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none;margin-right:0.25rem}:host .icon-right{margin-left:0.25rem}:host(.disabled){cursor:default}:host .btn-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-btn-primary--background--pressed);color:var(--theme-btn-primary--color--pressed)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-primary--background--pressed-hover);color:var(--theme-btn-primary--color--pressed-hover)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-primary--background--pressed-hover);color:var(--theme-btn-primary--color--pressed-active)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover,:host .btn-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{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}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-btn-secondary--background--pressed);color:var(--theme-btn-secondary--color--pressed)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-secondary--background--pressed-hover);color:var(--theme-btn-secondary--color--pressed-hover)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-secondary--background--pressed-hover);color:var(--theme-btn-secondary--color--pressed-active)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover,:host .btn-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{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}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-tertiary,:host .btn-tertiary.focus,:host .btn-tertiary:focus-visible{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host .btn-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary:not(.disabled):not(:disabled):hover,:host .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-tertiary:not(.disabled):not(:disabled):active,:host .btn-tertiary:not(.disabled):not(:disabled).active{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}:host(.disabled) .btn-tertiary.disabled,:host(.disabled) .btn-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-tertiary--border-color--disabled);background-color:var(--theme-btn-tertiary--background--disabled);color:var(--theme-btn-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-tertiary--color--disabled)}:host .btn-subtle-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-primary,:host .btn-subtle-primary.focus,:host .btn-subtle-primary:focus-visible{background-color:var(--theme-btn-subtle-primary--background);color:var(--theme-btn-subtle-primary--color);--ix-button-color:var(--theme-btn-subtle-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-primary--border-color);border-style:solid}:host .btn-subtle-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-primary.selected{background-color:var(--theme-btn-subtle-primary--background--pressed);color:var(--theme-btn-subtle-primary--color--pressed)}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-primary--background--pressed-hover);color:var(--theme-btn-subtle-primary--color--pressed-hover)}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-primary--background--pressed-hover);color:var(--theme-btn-subtle-primary--color--pressed-active)}:host .btn-subtle-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary:not(.disabled):not(:disabled):hover,:host .btn-subtle-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-primary--border-color--hover);background-color:var(--theme-btn-subtle-primary--background--hover);color:var(--theme-btn-subtle-primary--color--hover)}:host .btn-subtle-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-primary:not(.disabled):not(:disabled):active,:host .btn-subtle-primary:not(.disabled):not(:disabled).active{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}:host(.disabled) .btn-subtle-primary.disabled,:host(.disabled) .btn-subtle-primary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-primary--border-color--disabled);background-color:var(--theme-btn-subtle-primary--background--disabled);color:var(--theme-btn-subtle-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-primary--color--disabled)}:host .btn-subtle-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-secondary,:host .btn-subtle-secondary.focus,:host .btn-subtle-secondary:focus-visible{background-color:var(--theme-btn-subtle-secondary--background);color:var(--theme-btn-subtle-secondary--color);--ix-button-color:var(--theme-btn-subtle-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-secondary--border-color);border-style:solid}:host .btn-subtle-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-secondary.selected{background-color:var(--theme-btn-subtle-secondary--background--pressed);color:var(--theme-btn-subtle-secondary--color--pressed)}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-secondary--background--pressed-hover);color:var(--theme-btn-subtle-secondary--color--pressed-hover)}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-secondary--background--pressed-hover);color:var(--theme-btn-subtle-secondary--color--pressed-active)}:host .btn-subtle-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary:not(.disabled):not(:disabled):hover,:host .btn-subtle-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-secondary--border-color--hover);background-color:var(--theme-btn-subtle-secondary--background--hover);color:var(--theme-btn-subtle-secondary--color--hover)}:host .btn-subtle-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-secondary:not(.disabled):not(:disabled):active,:host .btn-subtle-secondary:not(.disabled):not(:disabled).active{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}:host(.disabled) .btn-subtle-secondary.disabled,:host(.disabled) .btn-subtle-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-secondary--border-color--disabled);background-color:var(--theme-btn-subtle-secondary--background--disabled);color:var(--theme-btn-subtle-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-secondary--color--disabled)}:host .btn-subtle-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-subtle-tertiary,:host .btn-subtle-tertiary.focus,:host .btn-subtle-tertiary:focus-visible{background-color:var(--theme-btn-subtle-tertiary--background);color:var(--theme-btn-subtle-tertiary--color);--ix-button-color:var(--theme-btn-subtle-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-subtle-tertiary--border-color);border-style:solid}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-subtle-tertiary.selected{background-color:var(--theme-btn-subtle-tertiary--background--pressed);color:var(--theme-btn-subtle-tertiary--color--pressed)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-hover)}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-subtle-tertiary--background--pressed-hover);color:var(--theme-btn-subtle-tertiary--color--pressed-active)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):hover,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-subtle-tertiary--border-color--hover);background-color:var(--theme-btn-subtle-tertiary--background--hover);color:var(--theme-btn-subtle-tertiary--color--hover)}:host .btn-subtle-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-subtle-tertiary:not(.disabled):not(:disabled):active,:host .btn-subtle-tertiary:not(.disabled):not(:disabled).active{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}:host(.disabled) .btn-subtle-tertiary.disabled,:host(.disabled) .btn-subtle-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-subtle-tertiary--border-color--disabled);background-color:var(--theme-btn-subtle-tertiary--background--disabled);color:var(--theme-btn-subtle-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-subtle-tertiary--color--disabled)}:host .btn-danger-primary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-primary,:host .btn-danger-primary.focus,:host .btn-danger-primary:focus-visible{background-color:var(--theme-btn-danger-primary--background);color:var(--theme-btn-danger-primary--color);--ix-button-color:var(--theme-btn-danger-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-primary--border-color);border-style:solid}:host .btn-danger-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger-primary.selected{background-color:var(--theme-btn-danger-primary--background--pressed);color:var(--theme-btn-danger-primary--color--pressed)}:host .btn-danger-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-primary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-primary--background--pressed-hover);color:var(--theme-btn-danger-primary--color--pressed-hover)}:host .btn-danger-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-primary--background--pressed-hover);color:var(--theme-btn-danger-primary--color--pressed-active)}:host .btn-danger-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary:not(.disabled):not(:disabled):hover,:host .btn-danger-primary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-primary--border-color--hover);background-color:var(--theme-btn-danger-primary--background--hover);color:var(--theme-btn-danger-primary--color--hover)}:host .btn-danger-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-primary:not(.disabled):not(:disabled):active,:host .btn-danger-primary:not(.disabled):not(:disabled).active{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}:host(.disabled) .btn-danger-primary.disabled,:host(.disabled) .btn-danger-primary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-primary--border-color--disabled);background-color:var(--theme-btn-danger-primary--background--disabled);color:var(--theme-btn-danger-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-primary--color--disabled)}:host .btn-danger-secondary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-secondary,:host .btn-danger-secondary.focus,:host .btn-danger-secondary:focus-visible{background-color:var(--theme-btn-danger-secondary--background);color:var(--theme-btn-danger-secondary--color);--ix-button-color:var(--theme-btn-danger-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-secondary--border-color);border-style:solid}:host .btn-danger-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger-secondary.selected{background-color:var(--theme-btn-danger-secondary--background--pressed);color:var(--theme-btn-danger-secondary--color--pressed)}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-secondary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-secondary--background--pressed-hover);color:var(--theme-btn-danger-secondary--color--pressed-hover)}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-secondary--background--pressed-hover);color:var(--theme-btn-danger-secondary--color--pressed-active)}:host .btn-danger-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary:not(.disabled):not(:disabled):hover,:host .btn-danger-secondary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-secondary--border-color--hover);background-color:var(--theme-btn-danger-secondary--background--hover);color:var(--theme-btn-danger-secondary--color--hover)}:host .btn-danger-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-secondary:not(.disabled):not(:disabled):active,:host .btn-danger-secondary:not(.disabled):not(:disabled).active{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}:host(.disabled) .btn-danger-secondary.disabled,:host(.disabled) .btn-danger-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-secondary--border-color--disabled);background-color:var(--theme-btn-danger-secondary--background--disabled);color:var(--theme-btn-danger-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-secondary--color--disabled)}:host .btn-danger-tertiary{border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host .btn-danger-tertiary,:host .btn-danger-tertiary.focus,:host .btn-danger-tertiary:focus-visible{background-color:var(--theme-btn-danger-tertiary--background);color:var(--theme-btn-danger-tertiary--color);--ix-button-color:var(--theme-btn-danger-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger-tertiary--border-color);border-style:solid}:host .btn-danger-tertiary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger-tertiary.selected{background-color:var(--theme-btn-danger-tertiary--background--pressed);color:var(--theme-btn-danger-tertiary--color--pressed)}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled):hover,:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-danger-tertiary--background--pressed-hover);color:var(--theme-btn-danger-tertiary--color--pressed-hover)}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled):active,:host .btn-danger-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-danger-tertiary--background--pressed-hover);color:var(--theme-btn-danger-tertiary--color--pressed-active)}:host .btn-danger-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary:not(.disabled):not(:disabled):hover,:host .btn-danger-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-danger-tertiary--border-color--hover);background-color:var(--theme-btn-danger-tertiary--background--hover);color:var(--theme-btn-danger-tertiary--color--hover)}:host .btn-danger-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger-tertiary:not(.disabled):not(:disabled):active,:host .btn-danger-tertiary:not(.disabled):not(:disabled).active{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}:host(.disabled) .btn-danger-tertiary.disabled,:host(.disabled) .btn-danger-tertiary:disabled{pointer-events:none;border-color:var(--theme-btn-danger-tertiary--border-color--disabled);background-color:var(--theme-btn-danger-tertiary--background--disabled);color:var(--theme-btn-danger-tertiary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger-tertiary--color--disabled)}:host{min-width:5rem}.dropdown-group{margin:0.687rem;display:block;position:relative;width:21.562rem;border-radius:0.25rem;background-color:#f8f9fa;border:solid 0.062rem rgba(0, 0, 0, 0.25)}.dropdown-group .dropdown-group-title{display:block;position:relative;font-size:0.875rem;text-align:left;margin:0.937rem 0 1.25rem 0.937rem}.dropdown-group .dropdown-group-content{position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:11.562rem;margin:0.937rem 0 0.937rem 0.937rem}.dropdown-group .dropdown-group-content>*{margin-bottom:1rem}.dropdown-group-submit{display:flex;justify-content:space-between;margin:0 0.687rem 0 0.687rem}.dropdown-menu{position:absolute;background-color:var(--theme-menu--background);border:var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);border-radius:var(--theme-menu--border-radius);max-width:100vw;padding:0.25rem 0;transition:background-color var(--theme-default-time);box-shadow:var(--theme-menu--box-shadow);font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.dropdown-menu.xl>.dropdown-item{height:2.5rem;line-height:2.187rem}.dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dropdown-buttons{display:flex;padding:0.25rem 0.5rem}.dropdown-buttons ix-icon-button+ix-icon-button{margin-inline-start:0.5rem}.dropdown-item{display:flex;height:2.5rem;position:relative;align-items:center;cursor:pointer;padding:0 2rem;border:1px solid transparent;color:var(--theme-menu-item--color);background-color:transparent}.dropdown-item:focus-visible{background-color:var(--theme-menu-item--background);color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{outline:none;background-color:var(--theme-menu-item--background);border-color:#119fff;color:var(--theme-menu-item--color--focus)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):hover,.dropdown-item:not(.disabled):not(:disabled).hover{color:var(--theme-menu-item--color--hover);background-color:var(--theme-menu-item--background--hover)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):active,.dropdown-item:not(.disabled):not(:disabled).active{color:var(--theme-menu-item--color--active);background-color:var(--theme-menu-item--background--active)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--theme-menu-item--color--disabled);background-color:var(--theme-menu-item--background--disabled)}.dropdown-item>a,.dropdown-item a:hover,.dropdown-item a:active{color:var(--theme-color-std-text)}.dropdown-item>.glyph{color:var(--theme-menu-item-icon--color)}.dropdown-item>.glyph.disabled{color:var(--color-weak-text)}.dropdown-item>.glyph.glyph-single-check{color:var(--theme-menu-item-icon-check--color)}.dropdown-item>.glyph{margin-inline-end:0.5rem}.dropdown-item>input[type=checkbox]+label{margin-bottom:0px}.dropdown-item>input[type=checkbox]+label::before{margin-right:1rem}.dropdown-divider{border-top:1px solid var(--theme-menu-separator--background);margin:0.25rem 0}button.dropdown-toggle{position:relative;padding-right:1.5rem}button.dropdown-toggle::after{position:absolute;top:45%;right:0.5rem}:host{display:block;position:relative;height:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .reset-button{position:absolute;top:0.25rem;right:0.25rem}:host .reset-button.hide-reset-button{display:none}:host .input-container:not(.readonly):not(.no-icon){min-height:2rem;width:auto;padding:1px 1.5rem 1px 1.75rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host .input-container:not(.readonly):not(.no-icon)[type=number]{text-align:right}:host .input-container:not(.readonly):not(.no-icon)[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}:host .input-container:not(.readonly):not(.no-icon):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}:host .input-container:not(.readonly):not(.no-icon):-webkit-autofill,:host .input-container:not(.readonly):not(.no-icon):autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}:host .input-container:not(.readonly):not(.no-icon)::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.no-icon)::placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.no-icon).hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),:host .input-container:not(.readonly):not(.no-icon):hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly):not(.no-icon).hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),:host .input-container:not(.readonly):not(.no-icon):hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly):not(.no-icon).focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),:host .input-container:not(.readonly):not(.no-icon):focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}:host .input-container:not(.readonly):not(.no-icon).focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),:host .input-container:not(.readonly):not(.no-icon):focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}:host .input-container:not(.readonly):not(.no-icon):disabled,:host .input-container:not(.readonly):not(.no-icon).disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container:not(.readonly):not(.no-icon):disabled::-moz-placeholder,:host .input-container:not(.readonly):not(.no-icon).disabled::-moz-placeholder{color:transparent}:host .input-container:not(.readonly):not(.no-icon):disabled::placeholder,:host .input-container:not(.readonly):not(.no-icon).disabled::placeholder{color:transparent}:host .input-container:not(.readonly).no-icon{min-height:2rem;width:auto;padding:1px 1.5rem 1px 0.25rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host .input-container:not(.readonly).no-icon[type=number]{text-align:right}:host .input-container:not(.readonly).no-icon[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}:host .input-container:not(.readonly).no-icon:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}:host .input-container:not(.readonly).no-icon:-webkit-autofill,:host .input-container:not(.readonly).no-icon:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}:host .input-container:not(.readonly).no-icon::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly).no-icon::placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly).no-icon.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),:host .input-container:not(.readonly).no-icon:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly).no-icon.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),:host .input-container:not(.readonly).no-icon:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly).no-icon.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),:host .input-container:not(.readonly).no-icon:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}:host .input-container:not(.readonly).no-icon.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),:host .input-container:not(.readonly).no-icon:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}:host .input-container:not(.readonly).no-icon:disabled,:host .input-container:not(.readonly).no-icon.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container:not(.readonly).no-icon:disabled::-moz-placeholder,:host .input-container:not(.readonly).no-icon.disabled::-moz-placeholder{color:transparent}:host .input-container:not(.readonly).no-icon:disabled::placeholder,:host .input-container:not(.readonly).no-icon.disabled::placeholder{color:transparent}:host .input-container.readonly:not(.no-icon){min-height:2rem;width:auto;padding:1px 1.5rem 1px 1.75rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host .input-container.readonly:not(.no-icon)[type=number]{text-align:right}:host .input-container.readonly:not(.no-icon)[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}:host .input-container.readonly:not(.no-icon):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}:host .input-container.readonly:not(.no-icon):-webkit-autofill,:host .input-container.readonly:not(.no-icon):autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}:host .input-container.readonly:not(.no-icon)::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly:not(.no-icon)::placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly:not(.no-icon).hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),:host .input-container.readonly:not(.no-icon):hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container.readonly:not(.no-icon).hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),:host .input-container.readonly:not(.no-icon):hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container.readonly:not(.no-icon).focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),:host .input-container.readonly:not(.no-icon):focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}:host .input-container.readonly:not(.no-icon).focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),:host .input-container.readonly:not(.no-icon):focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}:host .input-container.readonly:not(.no-icon):-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly:not(.no-icon).read-only,:host .input-container.readonly:not(.no-icon):read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly:not(.no-icon).read-only::-moz-placeholder,:host .input-container.readonly:not(.no-icon):read-only::-moz-placeholder{color:transparent}:host .input-container.readonly:not(.no-icon):-moz-read-only::placeholder{color:transparent}:host .input-container.readonly:not(.no-icon).read-only::placeholder,:host .input-container.readonly:not(.no-icon):read-only::placeholder{color:transparent}:host .input-container.readonly:not(.no-icon):disabled,:host .input-container.readonly:not(.no-icon).disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.readonly:not(.no-icon):disabled::-moz-placeholder,:host .input-container.readonly:not(.no-icon).disabled::-moz-placeholder{color:transparent}:host .input-container.readonly:not(.no-icon):disabled::placeholder,:host .input-container.readonly:not(.no-icon).disabled::placeholder{color:transparent}:host .input-container.readonly.no-icon{min-height:2rem;width:auto;padding:1px 1.5rem 1px 0.25rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host .input-container.readonly.no-icon[type=number]{text-align:right}:host .input-container.readonly.no-icon[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}:host .input-container.readonly.no-icon:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}:host .input-container.readonly.no-icon:-webkit-autofill,:host .input-container.readonly.no-icon:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}:host .input-container.readonly.no-icon::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly.no-icon::placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly.no-icon.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),:host .input-container.readonly.no-icon:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container.readonly.no-icon.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),:host .input-container.readonly.no-icon:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container.readonly.no-icon.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),:host .input-container.readonly.no-icon:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}:host .input-container.readonly.no-icon.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),:host .input-container.readonly.no-icon:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}:host .input-container.readonly.no-icon:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly.no-icon.read-only,:host .input-container.readonly.no-icon:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly.no-icon.read-only::-moz-placeholder,:host .input-container.readonly.no-icon:read-only::-moz-placeholder{color:transparent}:host .input-container.readonly.no-icon:-moz-read-only::placeholder{color:transparent}:host .input-container.readonly.no-icon.read-only::placeholder,:host .input-container.readonly.no-icon:read-only::placeholder{color:transparent}:host .input-container.readonly.no-icon:disabled,:host .input-container.readonly.no-icon.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.readonly.no-icon:disabled::-moz-placeholder,:host .input-container.readonly.no-icon.disabled::-moz-placeholder{color:transparent}:host .input-container.readonly.no-icon:disabled::placeholder,:host .input-container.readonly.no-icon.disabled::placeholder{color:transparent}:host .input-container:not(.readonly):not(.disabled):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly):not(.disabled).focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}:host .input-container.disabled{color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container{display:flex;height:auto;max-height:3.75rem}:host .token-container{flex-grow:1;overflow:hidden}:host .text-input{width:auto;height:1.75rem;min-height:1.5rem;background:transparent;flex-grow:1;box-shadow:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host .text-input::-moz-placeholder{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;color:var(--theme-color-soft-text)}:host .text-input::placeholder{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;color:var(--theme-color-soft-text)}:host .text-input,:host .text-input:hover,:host .text-input:focus,:host .text-input:focus-visible{border:none !important;outline:none !important}:host .text-input.hide-placeholder::-moz-placeholder{opacity:0}:host .text-input.hide-placeholder::placeholder{opacity:0}:host .list-unstyled{display:flex;flex-wrap:wrap;height:100%;overflow-y:auto}:host ix-icon{position:absolute;top:0.5rem;left:0.5rem}:host ix-filter-chip{margin-right:0.25rem}:host .category-preview{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}:host ul{height:100%}:host .list-unstyled>span:not(.category-preview),:host input{padding-inline-start:0;padding-top:2px;padding-bottom:2px}:host ix-dropdown{min-width:10rem !important}:host ix-dropdown .dropdown-item-container{display:flex;flex-direction:column}:host ix-dropdown .dropdown-item-container .dropdown-item{height:2.5rem;margin:0.25rem 0.5rem;padding-inline:0.5rem;border:1px solid transparent;border-radius:100rem;width:auto;justify-content:flex-start;flex-grow:1;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ix-dropdown .dropdown-item-container .dropdown-item:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr)}:host ix-dropdown .dropdown-item-container .category-item{border-end-end-radius:0;border-start-end-radius:0}:host ix-dropdown .dropdown-item-container .category-item-value{border-start-start-radius:0;border-end-start-radius:0}:host ix-dropdown .btn-toggle-operator{width:2rem;height:2rem;margin-inline:0.5rem}:host .display-none{display:none}";
 
 class CategoryFilter {
@@ -9547,6 +9584,13 @@ class CategoryFilter {
          * i18n label for 'Filter by text'
          */
         this.i18nPlainText = 'Filter by text';
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
     }
     get dropdown() {
         return this.hostElement.shadowRoot.querySelector('ix-dropdown');
@@ -9992,22 +10036,22 @@ class CategoryFilter {
     }
     render() {
         var _a, _b, _c;
-        return (hAsync(Host, { key: '6040e5611b073b5df60b2f021a1fd6521a6de1df' }, hAsync("form", { key: '4baf23174e46355ca7fbd5ecad14145cabaea8d5', ref: (el) => (this.formElement = el) }, hAsync("div", { key: 'adecb78f948b498e0a9f42355ab590e2966958d1', "read-only": this.readonly, class: {
+        return (hAsync(Host, { key: 'c9e7bdba1b9a6c9c368ff11d40ccf41883cc7d6d' }, hAsync("form", { key: '1201a3a234a4c1c49f7897f1461dc9dcc7974c08', ref: (el) => (this.formElement = el) }, hAsync("div", { key: 'f6330fac3e425656ec2e3c1511edd822c091829e', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, hAsync("ix-icon", { key: '4430f91076d6d7d04e1b9beea3a62877835b527f', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), hAsync("div", { key: 'aeaef4cf293c3b6c8baca478ec788ce33ecabfb6', class: "token-container" }, hAsync("div", { key: 'd599d0c8173bef92c64ad71cff0e89dabc7fde99', class: "list-unstyled" }, this.filterTokens.map((value, index) => (hAsync("span", { key: value.toString(), class: {
+            } }, hAsync("ix-icon", { key: 'dd3ba3a48b05fc1ac46e631c133fc58c0bd8b5bc', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), hAsync("div", { key: 'cb89410ee85d600ba5eb8708f635f1fb7324673d', class: "token-container" }, hAsync("div", { key: 'b8b053df9ef5d6ac9db6a0e0c39d231943f7a96e', class: "list-unstyled" }, this.filterTokens.map((value, index) => (hAsync("span", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, hAsync("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (hAsync("span", { class: {
                 'category-preview': true,
                 'display-none': this.category === '',
-            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), hAsync("input", Object.assign({ key: '43eac9a872f30a34780aa702c6905348649018b5', class: {
+            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), hAsync("input", Object.assign({ key: 'e589a93dc007d179d555e65fe655bb89d37f9e0a', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly || this.disabled || this.category !== '',
-            }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder }, this.a11yAttributes, { "aria-label": this.ariaLabelFilterInput })))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (hAsync("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: (_c = this.textInput) === null || _c === void 0 ? void 0 : _c.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader() }, this.renderDropdownContent()))));
+            }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder }, this.a11yAttributes, { "aria-label": this.ariaLabelFilterInput })))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (hAsync("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: (_c = this.textInput) === null || _c === void 0 ? void 0 : _c.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader(), enableTopLayer: this.enableTopLayer }, this.renderDropdownContent()))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -10034,6 +10078,7 @@ class CategoryFilter {
             "ariaLabelResetButton": [1, "aria-label-reset-button"],
             "ariaLabelOperatorButton": [1, "aria-label-operator-button"],
             "ariaLabelFilterInput": [1, "aria-label-filter-input"],
+            "enableTopLayer": [4, "enable-top-layer"],
             "showDropdown": [32],
             "hasFocus": [32],
             "categoryLogicalOperator": [32],
@@ -18703,6 +18748,13 @@ class DateDropdown {
         this.i18nNoRange = 'No range set';
         /** @internal */
         this.today = DateTime.now().toISO();
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         this.selectedDateRangeId = '';
         this.triggerRef = makeRef();
         this.datePickerTouched = false;
@@ -18813,21 +18865,21 @@ class DateDropdown {
     }
     render() {
         var _a, _b, _c;
-        return (hAsync(Host, { key: '2cad55fd1448a2a553abb8bdf50f9245d2cc71bf' }, hAsync("ix-button", { key: '77bd4e5f89d500b0323c5a2771cb2268601a87d3', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ariaLabel: this.ariaLabelDropdownButton }, this.getButtonLabel()), hAsync("ix-dropdown", { key: 'e1108d1cdac327961e3147d10f380f8d9850449c', "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
+        return (hAsync(Host, { key: '34b878eb8221b6c13f235d1b42ec63d3b6dce25c' }, hAsync("ix-button", { key: 'c40cff0539f79b19c0af903edce79de7d52e704e', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ariaLabel: this.ariaLabelDropdownButton }, this.getButtonLabel()), hAsync("ix-dropdown", { key: '3a74d5b8d2f4e7c7487b0bac9af67c3d25d6b75d', "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", enableTopLayer: this.enableTopLayer, onShowChanged: ({ detail: show }) => {
                 if (!show &&
                     this.selectedDateRangeId === 'custom' &&
                     this.datePickerTouched &&
                     this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
                 }
-            } }, hAsync("ix-layout-grid", { key: 'fd7ece26cbcda9da063b1832ca7c010fd508ae8b', noMargin: true }, hAsync("ix-row", { key: '8854518f7534f9c52be1d74373c8a6d822983bca' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (hAsync("ix-col", { key: '8e7e4d96a0e91d91cee20f961b37da7645e0a28e', class: {
+            } }, hAsync("ix-layout-grid", { key: '0aeda647289d651805bdd7eaac3528b5ee6b649b', noMargin: true }, hAsync("ix-row", { key: '43bed15b884d437de29d9879be99e1cc4b48d41a' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (hAsync("ix-col", { key: '3beb46a324a3d12bcb13be28956d7219f708b528', class: {
                 'no-margin': true,
                 'border-right': this.selectedDateRangeId === 'custom',
-            } }, this.dateRangeOptions.map((dateRangeOption) => (hAsync("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), hAsync("div", { key: 'f9e7879a9f2e00c5bbcd7ab454cf491345a2f1ee', hidden: this.customRangeDisabled }, hAsync("ix-dropdown-item", { key: 'e373366109b1ac41af77fc4fcab8aeb4a5cf7a29', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), hAsync("ix-col", { key: '4e4ad3072863235f5dda814f24811e982f407c9b', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (hAsync(Fragment, { key: 'a9c540a66333322c54cf7814231f6213806b86db' }, hAsync("ix-date-picker", { key: '7e59d29e3a49bee9098879b51b23d9c6fbec5c6b', embedded: true, locale: this.locale, onDateChange: (e) => {
+            } }, this.dateRangeOptions.map((dateRangeOption) => (hAsync("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), hAsync("div", { key: 'f0e7910986569a41b7d0ca0419361e7c9e81be2d', hidden: this.customRangeDisabled }, hAsync("ix-dropdown-item", { key: 'c1af0808c290045824cbdba19dc72d46d23e2d66', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), hAsync("ix-col", { key: 'b3b1b70c86b309f2c8572751a30007ef1da9e9f3', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (hAsync(Fragment, { key: '70e07f3dec874213296af70b8ca63e631a247541' }, hAsync("ix-date-picker", { key: '386b034422347098aff8b09255e83368f0d8d106', embedded: true, locale: this.locale, onDateChange: (e) => {
                 e.stopPropagation();
                 this.currentRangeValue = Object.assign(Object.assign({}, e.detail), { id: 'custom' });
                 this.datePickerTouched = true;
-            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), hAsync("div", { key: '837f09d7b578640927e904f4adc2aef7fda7e65e', class: "pull-right" }, hAsync("ix-button", { key: '09e9fbdf94d44bc52832d6787206aaded06a3aeb', onClick: () => {
+            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), hAsync("div", { key: '3f3f115659920a42b192c9f10cdd81af5a0c04ae', class: "pull-right" }, hAsync("ix-button", { key: '2fb0e8b8d6de6244a1d9d60d175226a24c2103ad', onClick: () => {
                 if (this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
                 }
@@ -18866,6 +18918,7 @@ class DateDropdown {
             "i18nDone": [1, "i18n-done"],
             "i18nNoRange": [1, "i18n-no-range"],
             "today": [1],
+            "enableTopLayer": [4, "enable-top-layer"],
             "selectedDateRangeId": [32],
             "currentRangeValue": [32],
             "getDateRange": [64]
@@ -19417,6 +19470,13 @@ class DateInput {
          * Text alignment within the date input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
          */
         this.textAlignment = 'start';
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         this.show = false;
         this.from = null;
         this.isInputInvalid = false;
@@ -19578,12 +19638,12 @@ class DateInput {
     render() {
         var _a;
         const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorDateUnparsable);
-        return (hAsync(Host, { key: '4a7f986c62a82763e46faa0203a5b6ff82415aaf', class: {
+        return (hAsync(Host, { key: 'd5b3002c72ba1337db71f7b03dda27865f4eccf8', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, hAsync("ix-field-wrapper", { key: 'c366d9ef3a538fd71e8d0f33d305e46da824421e', 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()), hAsync("ix-dropdown", { key: '6f10990b1e667f0e079f951d920707c15e24e50e', "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+            } }, hAsync("ix-field-wrapper", { key: '395ca11b4cdb9e1e222a28065a23067eaa728849', 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()), hAsync("ix-dropdown", { key: '0a5b68dcdc401200ea2e063a9eac74cb9bbda5fa', "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
                 this.show = event.detail;
-            } }, hAsync("ix-date-picker", { key: 'df14f590271c8177fa10360e72b0338088ed79be', ref: this.datepickerRef, format: this.format, locale: this.locale, singleSelection: true, from: (_a = this.from) !== null && _a !== void 0 ? _a : '', minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
+            } }, hAsync("ix-date-picker", { key: 'c7a5b6b28719abdde0318af75260c7bc6bb190d1', ref: this.datepickerRef, format: this.format, locale: this.locale, singleSelection: true, from: (_a = this.from) !== null && _a !== void 0 ? _a : '', minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
                 const { from } = event.detail;
                 this.onInput(from);
             }, showWeekNumbers: this.showWeekNumbers, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, embedded: true }))));
@@ -19624,6 +19684,7 @@ class DateInput {
             "ariaLabelNextMonthButton": [1, "aria-label-next-month-button"],
             "suppressSubmitOnEnter": [516, "suppress-submit-on-enter"],
             "textAlignment": [1, "text-alignment"],
+            "enableTopLayer": [4, "enable-top-layer"],
             "show": [32],
             "from": [32],
             "isInputInvalid": [32],
@@ -19786,6 +19847,13 @@ class DatePicker {
         this.embedded = false;
         /** @internal */
         this.today = DateTime.now().toISO();
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         this.selectedYear = 0;
         this.tempYear = 0;
         this.startYear = 0;
@@ -20200,7 +20268,7 @@ class DatePicker {
         return rows;
     }
     render() {
-        return (hAsync(Host, { key: 'ac385bc586d47db0ce5aeb9eab3e7e71e71fe7cf' }, hAsync("ix-date-time-card", { key: 'e1d11ba64aa8b1374c6ded705afa779a9b3966b1', corners: this.corners, embedded: this.embedded }, hAsync("div", { key: 'bc99b5e074709ee8599799814a3bc7fd5ab417a5', class: "header", slot: "header" }, hAsync("ix-icon-button", { key: '6bc172523c9588a3bb1d200d5113b2533117c021', onClick: () => this.changeToAdjacentMonth(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), hAsync("div", { key: 'e3505b87752b9d763ba61286f1091e67e2ee3314', class: "selector" }, hAsync("ix-button", { key: 'f6740c7a4ea82875e876896ab0d311e56edf2c6d', variant: "tertiary", ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, hAsync("span", { key: '0cd1e04f63512e2c8798d3524c2e8cc3e719d853', class: "capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), hAsync("ix-dropdown", { key: '0021b8af9b8ba6b23e9ed49ebb4edcecc55eeb26', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start" }, hAsync("div", { key: 'f00cf88696bec06c49c59962d3dcb4838be3f3f2', class: "wrapper" }, hAsync("div", { key: '0d6b2ca0c9a2f23a7fd1fa24cc05454da9e16af7', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), hAsync("div", { key: 'bff068918a1f31e25f1d22b9e2f4b36e0a2affdd', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (hAsync("div", { key: month, ref: (ref) => {
+        return (hAsync(Host, { key: '3a9fa36ed98d2dc14c9d0bf76f6fcdbc1595c8b2' }, hAsync("ix-date-time-card", { key: 'd6da48a85d0c5cb1a6044c16d064782a3beed0c8', corners: this.corners, embedded: this.embedded }, hAsync("div", { key: '56d86df8ea65f1bcdd988451ddbf276a62a8e52a', class: "header", slot: "header" }, hAsync("ix-icon-button", { key: '1899225180b17d1d5d7aa50599f6af7b2c92a4df', onClick: () => this.changeToAdjacentMonth(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), hAsync("div", { key: 'cf4f3cf8d11665cabc959aad474aad833aa703f6', class: "selector" }, hAsync("ix-button", { key: 'f1aa5c3e87ee65509298de13646a1fd1aaf62c72', variant: "tertiary", ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, hAsync("span", { key: '8a1888092a6360c64b57f71eb52ace9ee1ed03d3', class: "capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), hAsync("ix-dropdown", { key: '0922f29fe071cea744094e9553f38b35f113149c', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start", enableTopLayer: this.enableTopLayer }, hAsync("div", { key: 'e0f0df699dbafb2dbc5f00e03c5d5dc19e73f529', class: "wrapper" }, hAsync("div", { key: 'f34845aec3de4ebf6dc07e869b57c57087ad6fb5', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), hAsync("div", { key: '519b8269d8f3a429fc1f5fdb8f2661f1cafa03b5', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (hAsync("div", { key: month, ref: (ref) => {
                 if (month === this.monthNames[0]) {
                     this.firstMonthRef(ref);
                 }
@@ -20214,10 +20282,10 @@ class DatePicker {
                 hidden: this.tempYear !== this.selectedYear ||
                     this.tempMonth !== index,
                 checkPosition: true,
-            }, name: iconSingleCheck, size: "16" }), hAsync("div", null, hAsync("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), hAsync("ix-icon-button", { key: '42af554f8f382640b60f98b68708e5cb4912bf33', onClick: () => this.changeToAdjacentMonth(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), hAsync("div", { key: '565551cf265951458d43742f5a64e1d3e8107bcc', class: {
+            }, name: iconSingleCheck, size: "16" }), hAsync("div", null, hAsync("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), hAsync("ix-icon-button", { key: '0468474f772750fe7f96af5eb6129eeee5e52ee6', onClick: () => this.changeToAdjacentMonth(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), hAsync("div", { key: '3b788560f65530ebb8faeb2c7e88d24b7f29bb08', class: {
                 grid: true,
                 'grid--show-week-numbers': this.showWeekNumbers,
-            } }, this.showWeekNumbers && hAsync("div", { key: '153664ce89e84909f75d424f3af985f3c8caa22b', class: "calendar-item week-day" }), this.dayNames.map((name) => (hAsync("div", { key: name, class: "calendar-item week-day" }, hAsync("div", { class: "overflow" }, name.slice(0, 3))))), this.calendar.map((week) => {
+            } }, this.showWeekNumbers && hAsync("div", { key: '431517e6490f2fc715dad94b9d7719836df9514a', class: "calendar-item week-day" }), this.dayNames.map((name) => (hAsync("div", { key: name, class: "calendar-item week-day" }, hAsync("div", { class: "overflow" }, name.slice(0, 3))))), this.calendar.map((week) => {
             return (hAsync(Fragment, null, this.showWeekNumbers && (hAsync("div", { class: "calendar-item week-number" }, week.weekNumber)), week.dayNumbers.map((day) => {
                 return day ? (hAsync("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: (e) => {
                         const target = e.currentTarget;
@@ -20229,10 +20297,10 @@ class DatePicker {
                         }
                     }, tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur(), "aria-label": `${this.selectedMonth}: ${day}` }, day)) : (hAsync("div", null));
             })));
-        })), hAsync("div", { key: 'a3eaf5affbf21d93ac0bd2938a544e372ecee2bc', class: {
+        })), hAsync("div", { key: 'd27a5261af7b95549a0d8956f2c267aea0d504fa', class: {
                 button: true,
                 hidden: this.singleSelection || this.embedded,
-            } }, hAsync("ix-button", { key: 'bcbc94626760a7c8e755f4afb52f127d5b49dcd7', onClick: () => this.onDone() }, this.i18nDone)))));
+            } }, hAsync("ix-button", { key: '629a9d41ba40bbc277ea41d1ec35f814949fe42a', onClick: () => this.onDone() }, this.i18nDone)))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -20260,6 +20328,7 @@ class DatePicker {
             "showWeekNumbers": [4, "show-week-numbers"],
             "embedded": [4],
             "today": [1],
+            "enableTopLayer": [4, "enable-top-layer"],
             "currFromDate": [32],
             "currToDate": [32],
             "selectedYear": [32],
@@ -20540,7 +20609,7 @@ class Drawer {
         return Promise.resolve();
     }
     onCloseClicked() {
-        this.toggleDrawer(false);
+        this.show = false;
     }
     clickedOutside(evt) {
         if (!this.closeOnClickOutside) {
@@ -20589,7 +20658,7 @@ class Drawer {
         this.toggleDrawer(this.show);
     }
     render() {
-        return (hAsync(Host, { key: 'f40c42d1e7b7e8420c4a8f804a46b722580dd132', class: {
+        return (hAsync(Host, { key: '97ae2273ad9c603d477907a07cba1e1477e9611d', class: {
                 'drawer-container': true,
                 'display-none': true,
             }, style: {
@@ -20597,15 +20666,15 @@ class Drawer {
                 'max-width': `${this.maxWidth}rem`,
                 height: this.fullHeight ? '100%' : 'auto',
                 overflow: 'hidden',
-            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, hAsync("div", { key: '810a3738ce5350281d758808ba93981914760877', style: {
+            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, hAsync("div", { key: '01ce6e66f3460299967c678cded87b96d6967445', style: {
                 width: this.width === 'auto'
                     ? 'auto'
                     : `${this.getConstrainedWidth(this.width)}rem`,
-            } }, hAsync("div", { key: '5601266a5a02c122d1392234fe1c1a755e440bad', class: "header" }, hAsync("div", { key: 'a43e56c621a03939233e10bb907e6f2bd7a7e176', class: "header-content" }, hAsync("slot", { key: 'ab7c9e45ca78c512c1a242f53a616a16a98187fe', name: "header" })), hAsync("ix-icon-button", { key: 'eaaa6f03ffdf2f5e2d9100ab3f45c4a1f46ef63d', class: "close-button", style: {
+            } }, hAsync("div", { key: 'f4c040460d4917c8289b3746158696ed20c92d20', class: "header" }, hAsync("div", { key: '0a05c91318f6c67c8a802b35970f321dbba55dbe', class: "header-content" }, hAsync("slot", { key: '853415c470b8c34b70ef8e95be2fc44629f6eb62', name: "header" })), hAsync("ix-icon-button", { key: '47cb76743364e504a287c218b62d8ff82f92276b', class: "close-button", style: {
                 display: this.showContent ? 'block' : 'none',
-            }, icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.onCloseClicked(), "data-testid": "close-button", "aria-label": this.ariaLabelCloseButton })), hAsync("div", { key: '170d74d584fb7b641adaa45800144a27f4354d92', class: "content", style: {
+            }, icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.onCloseClicked(), "data-testid": "close-button", "aria-label": this.ariaLabelCloseButton })), hAsync("div", { key: '427f1fea6a16c11291998c40ecfe80599b0dcf75', class: "content", style: {
                 display: this.showContent ? 'block' : 'none',
-            } }, hAsync("slot", { key: 'de087859ac50be70b998ab696698df91f6816f21' })))));
+            } }, hAsync("slot", { key: 'b5471ae2a3a59ede24fcf6deeb323bd2ab6acf4a' })))));
     }
     static get watchers() { return {
         "show": ["onShowChanged"]
@@ -22395,85 +22464,23 @@ const inline = inline$1;
  * next to a given reference element.
  */
 const computePosition = (reference, floating, options) => {
-  // This caches the expensive `getClippingElementAncestors` function so that
-  // multiple lifecycle resets re-use the same result. It only lives for a
-  // single call. If other functions become expensive, we can add them as well.
-  const cache = new Map();
-  const mergedOptions = {
-    platform,
-    ...options
-  };
-  const platformWithCache = {
-    ...mergedOptions.platform,
-    _c: cache
-  };
-  return computePosition$1(reference, floating, {
-    ...mergedOptions,
-    platform: platformWithCache
-  });
-};
-
-/*
- * SPDX-FileCopyrightText: 2023 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.
- */
-class ArrowFocusController {
-    constructor(items, container, callback) {
-        this.wrap = false;
-        this.items = items;
-        this.container = container;
-        this.callback = callback;
-        this.keyListener = addDisposableEventListener(container, 'keydown', (e) => this.onKeyDown(e));
-    }
-    getActiveIndex() {
-        if (!document.activeElement) {
-            return -1;
-        }
-        return this.items.indexOf(document.activeElement);
-    }
-    onKeyDown(e) {
-        var _a, _b, _c, _d;
-        const activeIndex = this.getActiveIndex();
-        if (activeIndex < 0) {
-            return;
-        }
-        switch (e.key) {
-            case 'ArrowDown':
-                if (activeIndex < this.items.length - 1) {
-                    e.preventDefault();
-                    (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, activeIndex + 1);
-                }
-                else if (this.wrap) {
-                    e.preventDefault();
-                    (_b = this.callback) === null || _b === void 0 ? void 0 : _b.call(this, 0);
-                }
-                break;
-            case 'ArrowUp':
-                {
-                    if (activeIndex > 0) {
-                        e.preventDefault();
-                        (_c = this.callback) === null || _c === void 0 ? void 0 : _c.call(this, activeIndex - 1);
-                    }
-                    else if (this.wrap && activeIndex === 0) {
-                        e.preventDefault();
-                        (_d = this.callback) === null || _d === void 0 ? void 0 : _d.call(this, this.items.length - 1);
-                    }
-                }
-                break;
-        }
-    }
-    disconnect() {
-        if (this.keyListener) {
-            this.keyListener();
-        }
-        this.container = undefined;
-        this.callback = undefined;
-    }
-}
+  // This caches the expensive `getClippingElementAncestors` function so that
+  // multiple lifecycle resets re-use the same result. It only lives for a
+  // single call. If other functions become expensive, we can add them as well.
+  const cache = new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = {
+    ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition$1(reference, floating, {
+    ...mergedOptions,
+    platform: platformWithCache
+  });
+};
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
@@ -22574,7 +22581,93 @@ function findElement(element, hostElement) {
     return waitForSelector(selector, document, hostElement);
 }
 
-const dropdownCss = ":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:calc(50vh - 3rem);overflow-y:auto}:host(:not(.show)){display:none}";
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+class ArrowFocusController {
+    constructor(items, container, callback) {
+        this.wrap = false;
+        this.items = items;
+        this.container = container;
+        this.callback = callback;
+        this.keyListener = addDisposableEventListener(container, 'keydown', (e) => this.onKeyDown(e));
+    }
+    getActiveIndex() {
+        if (!document.activeElement) {
+            return -1;
+        }
+        return this.items.indexOf(document.activeElement);
+    }
+    onKeyDown(e) {
+        var _a, _b, _c, _d;
+        const activeIndex = this.getActiveIndex();
+        if (activeIndex < 0) {
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowDown':
+                if (activeIndex < this.items.length - 1) {
+                    e.preventDefault();
+                    (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, activeIndex + 1);
+                }
+                else if (this.wrap) {
+                    e.preventDefault();
+                    (_b = this.callback) === null || _b === void 0 ? void 0 : _b.call(this, 0);
+                }
+                break;
+            case 'ArrowUp':
+                {
+                    if (activeIndex > 0) {
+                        e.preventDefault();
+                        (_c = this.callback) === null || _c === void 0 ? void 0 : _c.call(this, activeIndex - 1);
+                    }
+                    else if (this.wrap && activeIndex === 0) {
+                        e.preventDefault();
+                        (_d = this.callback) === null || _d === void 0 ? void 0 : _d.call(this, this.items.length - 1);
+                    }
+                }
+                break;
+        }
+    }
+    disconnect() {
+        if (this.keyListener) {
+            this.keyListener();
+        }
+        this.container = undefined;
+        this.callback = undefined;
+    }
+}
+
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+/**
+ * Prevents angular from change detection when requesting an animation frame
+ *
+ * Credits goes to:
+ * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts
+ */
+const requestAnimationFrameNoNgZone = (callback) => {
+    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+        return __zone_symbol__requestAnimationFrame(callback);
+    }
+    if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(callback);
+    }
+    return setTimeout(callback);
+};
+
+const dropdownCss = ":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:calc(50vh - 3rem);overflow-y:auto}:host(:not(.show)){display:none}.dialog{margin:0;border:none;outline:none;padding:0.25rem 0px;min-width:0;max-width:100vw;width:-moz-max-content;width:max-content;height:-moz-fit-content;height:fit-content;background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);box-shadow:var(--theme-shadow-4);overflow-x:visible;overflow-y:visible;inset:unset;color-scheme:inherit;color:var(--theme-color-std-text);box-sizing:border-box}.dialog *,.dialog *::after,.dialog *::before{box-sizing:border-box}.dialog .dropdown-container{display:block;position:relative}.dialog .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dialog.overflow{max-height:calc(50vh - 3rem);overflow-y:auto}";
 
 let sequenceId$1 = 0;
 class Dropdown {
@@ -22612,6 +22705,13 @@ class Dropdown {
         this.ignoreRelatedSubmenu = false;
         /** @internal */
         this.suppressOverflowBehavior = false;
+        /**
+         * Enable Popover API rendering for top-layer positioning.
+         *
+         * @default false in v4.x, will default to true in v5.0.0
+         */
+        this.enableTopLayer = false;
+        this.dialogRef = makeRef();
         this.localUId = `dropdown-${sequenceId$1++}`;
         this.assignedSubmenu = [];
         this.itemObserver = new MutationObserver(() => {
@@ -22773,24 +22873,27 @@ class Dropdown {
         }
     }
     async changedShow(newShow) {
-        var _a, _b, _c, _d;
-        if (newShow) {
-            await this.resolveAnchorElement();
-            if (this.anchorElement) {
-                this.applyDropdownPosition();
+        var _a;
+        if (!newShow) {
+            this.cleanupOnHide();
+            if (this.enableTopLayer) {
+                await this.hideDropdownAsync();
             }
-            this.arrowFocusController = new ArrowFocusController(this.dropdownItems, this.hostElement, (index) => this.focusDropdownItem(index));
-            (_a = this.itemObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostElement, {
-                childList: true,
-                subtree: true,
-            });
-            this.registerKeyListener();
+            return;
         }
-        else {
-            this.destroyAutoUpdate();
-            (_b = this.arrowFocusController) === null || _b === void 0 ? void 0 : _b.disconnect();
-            (_c = this.itemObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
-            (_d = this.disposeKeyListener) === null || _d === void 0 ? void 0 : _d.call(this);
+        this.arrowFocusController = new ArrowFocusController(this.dropdownItems, this.hostElement, (index) => this.focusDropdownItem(index));
+        (_a = this.itemObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+        });
+        this.registerKeyListener();
+        if (this.enableTopLayer) {
+            await this.showDropdownAsync();
+            return;
+        }
+        await this.resolveAnchorElement();
+        if (this.anchorElement) {
+            this.applyDropdownPosition();
         }
     }
     changedTrigger(newTriggerValue) {
@@ -22811,6 +22914,42 @@ class Dropdown {
         }
         return true;
     }
+    async showDropdownAsync() {
+        const popover = await this.dialogRef.waitForCurrent();
+        if (!popover) {
+            return;
+        }
+        popover.showPopover();
+        await this.resolveAnchorElement();
+        if (this.anchorElement) {
+            this.applyDropdownPosition();
+        }
+        else {
+            requestAnimationFrameNoNgZone(() => {
+                const referenceElement = this.hostElement.parentElement || this.hostElement;
+                const refRect = referenceElement.getBoundingClientRect();
+                const transform = `translate(${Math.round(refRect.left)}px, ${Math.round(refRect.top)}px)`;
+                Object.assign(popover.style, {
+                    top: '0',
+                    left: '0',
+                    transform,
+                });
+            });
+        }
+    }
+    async hideDropdownAsync() {
+        const popover = await this.dialogRef.waitForCurrent();
+        if (popover === null || popover === void 0 ? void 0 : popover.matches(':popover-open')) {
+            popover.hidePopover();
+        }
+    }
+    cleanupOnHide() {
+        var _a, _b, _c;
+        this.destroyAutoUpdate();
+        (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.itemObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.disposeKeyListener) === null || _c === void 0 ? void 0 : _c.call(this);
+    }
     async applyDropdownPosition() {
         var _a, _b;
         if (!this.show) {
@@ -22819,9 +22958,20 @@ class Dropdown {
         if (!this.anchorElement) {
             return;
         }
+        const referenceElement = this.anchorElement;
         const isSubmenu = this.isAnchorSubmenu();
+        let targetElement = this.hostElement;
+        let strategy = this.positioningStrategy;
+        if (this.enableTopLayer) {
+            const dialog = await this.dialogRef.waitForCurrent();
+            if (!dialog) {
+                return;
+            }
+            targetElement = dialog;
+            strategy = 'fixed';
+        }
         let positionConfig = {
-            strategy: this.positioningStrategy,
+            strategy,
             middleware: [],
         };
         if (!this.suppressAutomaticPlacement) {
@@ -22837,24 +22987,19 @@ class Dropdown {
             positionConfig.middleware.push(offset(this.offset));
         }
         this.destroyAutoUpdate();
-        if (!this.anchorElement) {
-            return;
-        }
-        this.autoUpdateCleanup = autoUpdate(this.anchorElement, this.hostElement, async () => {
-            if (this.anchorElement) {
-                const computeResponse = await computePosition(this.anchorElement, this.hostElement, positionConfig);
-                Object.assign(this.hostElement.style, {
-                    top: '0',
-                    left: '0',
-                    transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(computeResponse.y)}px)`,
-                });
-            }
+        this.autoUpdateCleanup = autoUpdate(referenceElement, targetElement, async () => {
+            const computeResponse = await computePosition(referenceElement, targetElement, positionConfig);
+            Object.assign(targetElement.style, {
+                top: '0',
+                left: '0',
+                transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(computeResponse.y)}px)`,
+            });
             if (this.overwriteDropdownStyle) {
                 const overwriteStyle = await this.overwriteDropdownStyle({
-                    dropdownRef: this.hostElement,
+                    dropdownRef: targetElement,
                     triggerRef: this.triggerElement,
                 });
-                Object.assign(this.hostElement.style, overwriteStyle);
+                Object.assign(targetElement.style, overwriteStyle);
             }
         }, {
             ancestorResize: true,
@@ -22863,7 +23008,7 @@ class Dropdown {
         });
     }
     focusDropdownItem(index) {
-        requestAnimationFrame(() => {
+        requestAnimationFrameNoNgZone(() => {
             var _a, _b;
             const button = (_b = (_a = this.dropdownItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
             if (button) {
@@ -22872,6 +23017,9 @@ class Dropdown {
         });
     }
     async componentDidLoad() {
+        if (this.show) {
+            this.changedShow(true);
+        }
         if (!this.trigger) {
             return;
         }
@@ -22912,7 +23060,16 @@ class Dropdown {
         this.applyDropdownPosition();
     }
     render() {
-        return (hAsync(Host, { key: '04a27e5950bf94cc355c91e0339f9450d46ff103', "data-ix-dropdown": this.localUId, class: {
+        if (this.enableTopLayer) {
+            return (hAsync(Host, { "data-ix-dropdown": this.localUId, class: {
+                    'dropdown-menu': true,
+                    show: this.show,
+                } }, hAsync("dialog", { ref: this.dialogRef, class: {
+                    dialog: true,
+                    overflow: !this.suppressOverflowBehavior,
+                }, popover: "manual", "aria-modal": "true", "aria-label": this.header, tabindex: -1, onClick: (event) => this.onDropdownClick(event) }, hAsync("div", { class: "dropdown-container" }, this.header && hAsync("div", { class: "dropdown-header" }, this.header), this.show && hAsync("slot", null)))));
+        }
+        return (hAsync(Host, { "data-ix-dropdown": this.localUId, class: {
                 'dropdown-menu': true,
                 show: this.show,
                 overflow: !this.suppressOverflowBehavior,
@@ -22920,7 +23077,7 @@ class Dropdown {
                 margin: '0',
                 minWidth: '0px',
                 position: this.positioningStrategy,
-            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, hAsync("div", { key: 'a5a82065838d09c0b0e8aa24887485664d0631b7', style: { display: 'contents' } }, this.header && hAsync("div", { key: '08e34e9d67769670fed4328d59d23de0d0bc1ccb', class: "dropdown-header" }, this.header), this.show && hAsync("slot", { key: 'ecf81415481bb26881fd6976b5e069ac444bb821' }))));
+            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, hAsync("div", { style: { display: 'contents' } }, this.header && hAsync("div", { class: "dropdown-header" }, this.header), this.show && hAsync("slot", null))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -22945,6 +23102,7 @@ class Dropdown {
             "discoverAllSubmenus": [4, "discover-all-submenus"],
             "ignoreRelatedSubmenu": [4, "ignore-related-submenu"],
             "suppressOverflowBehavior": [4, "suppress-overflow-behavior"],
+            "enableTopLayer": [4, "enable-top-layer"],
             "discoverSubmenu": [64],
             "updatePosition": [64]
         },
@@ -22971,9 +23129,19 @@ class DropdownButton {
          * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.
          */
         this.closeBehavior = 'both';
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         this.dropdownShow = false;
         this.dropdownAnchor = makeRef();
         this.onDropdownShowChanged = (event) => {
+            if (this.disabled && event.detail) {
+                return;
+            }
             this.dropdownShow = event.detail;
         };
     }
@@ -22986,11 +23154,11 @@ class DropdownButton {
             } }));
     }
     render() {
-        return (hAsync(Host, { key: '4e4aca39eff13b8f665682b3f2dc9ace533c7ca0', class: {
+        return (hAsync(Host, { key: '2232add1b732f43028df1725baa05a08ce025b69', "aria-disabled": a11yBoolean(this.disabled), class: {
                 disabled: this.disabled,
-            }, ref: this.dropdownAnchor }, hAsync("div", { key: '9583ed2274621e67d779e9668fead87f663b7558', class: "dropdown-button" }, this.label ? (hAsync("ix-button", { variant: this.variant, disabled: this.disabled, alignment: "start", ariaLabel: this.ariaLabelDropdownButton }, hAsync("div", { class: 'content' }, this.icon ? (hAsync("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, hAsync("div", { class: 'button-label' }, this.label), hAsync("ix-icon", { name: this.dropdownShow
+            }, ref: this.dropdownAnchor }, hAsync("div", { key: '0bbbbef21fd826b770c8231e449dd5beb9d799e1', class: "dropdown-button" }, this.label ? (hAsync("ix-button", { variant: this.variant, disabled: this.disabled, alignment: "start", ariaLabel: this.ariaLabelDropdownButton, tabIndex: this.disabled ? -1 : 0 }, hAsync("div", { class: 'content' }, this.icon ? (hAsync("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, hAsync("div", { class: 'button-label' }, this.label), hAsync("ix-icon", { name: this.dropdownShow
                 ? iconChevronUpSmall
-                : iconChevronDownSmall, size: "24" })))) : (hAsync("div", null, hAsync("ix-icon-button", { icon: this.icon, variant: this.variant, disabled: this.disabled }), this.getTriangle()))), hAsync("ix-dropdown", { key: 'e4fd6fb8451d8883fac84764758a90ce6dc4d433', class: "dropdown", trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, onShowChanged: this.onDropdownShowChanged }, hAsync("slot", { key: 'be8d3427e80c326bc7a6993f53190e290b824967' }))));
+                : iconChevronDownSmall, size: "24" })))) : (hAsync("div", null, hAsync("ix-icon-button", { icon: this.icon, variant: this.variant, disabled: this.disabled, tabIndex: this.disabled ? -1 : 0 }), this.getTriangle()))), hAsync("ix-dropdown", { key: 'd5d252fbef9edbf613eab9d1275e4a276582842c', class: "dropdown", trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, enableTopLayer: this.enableTopLayer, onShowChanged: this.onDropdownShowChanged }, hAsync("slot", { key: '648209786997a3ca47955ea921a42dd80ae5a6bc' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return dropdownButtonCss; }
@@ -22999,17 +23167,18 @@ class DropdownButton {
         "$tagName$": "ix-dropdown-button",
         "$members$": {
             "variant": [1],
-            "disabled": [4],
+            "disabled": [516],
             "label": [1],
             "icon": [1],
             "closeBehavior": [8, "close-behavior"],
             "placement": [1],
             "ariaLabelDropdownButton": [1, "aria-label-dropdown-button"],
+            "enableTopLayer": [4, "enable-top-layer"],
             "dropdownShow": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["disabled", "disabled"]]
     }; }
 }
 
@@ -23020,7 +23189,7 @@ class DropdownHeader {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '8c2634f5c46a222e4803fa7ae426fcdf9d8edaf4' }, hAsync("ix-typography", { key: '0951a5b06d746db809529a9149e021696507ade2', class: 'category-text', format: 'h5' }, this.label)));
+        return (hAsync(Host, { key: '6ec911ed6360d3e523a5a871007d874d67cf1334' }, hAsync("ix-typography", { key: 'f1a8142ff1d8212a389649a6b7cc31495ccb9fa0', class: 'category-text', format: 'h5' }, this.label)));
     }
     static get style() { return dropdownHeaderCss; }
     static get cmpMeta() { return {
@@ -23072,15 +23241,20 @@ class DropdownItem {
             this.icon !== undefined);
     }
     render() {
-        return (hAsync(Host, { key: '4683b34a35d26f4cdce448ed24cdc5115f838fed', class: {
+        return (hAsync(Host, { key: '6792db1dd356481085735838df4cfcdf11cee1ba', class: {
                 hover: this.hover,
                 'icon-only': this.isIconOnly(),
                 disabled: this.disabled,
                 submenu: this.isSubMenu,
-            }, role: "listitem" }, hAsync("button", { key: 'a655623c265f18e805a0f60a093dd4ac565ab35c', type: "button", tabIndex: 0, class: {
+            }, role: "listitem" }, hAsync("button", { key: '878eed19e5127942f10f561db2205930a7bb01ef', type: "button", tabIndex: this.disabled ? -1 : 0, class: {
                 'dropdown-item': true,
                 'no-checked-field': this.suppressChecked,
-            }, onClick: () => this.emitItemClick(), "aria-label": this.ariaLabelButton }, !this.suppressChecked ? (hAsync("div", { class: "dropdown-item-checked" }, this.checked ? (hAsync("ix-icon", { class: "checkmark", name: iconSingleCheck, size: "16" })) : null)) : null, this.icon ? (hAsync("ix-icon", { class: "dropdown-item-icon", name: this.icon, "aria-label": this.ariaLabelIcon })) : null, hAsync("div", { key: 'd88e90650387ce4dd0d440fe03bf21c19c785709', class: "dropdown-item-text" }, this.label, hAsync("slot", { key: 'd892aabbb2e268d36c348b800c043d08f2ceef83' })), this.isSubMenu ? (hAsync("ix-icon", { name: iconChevronRightSmall, class: 'submenu-icon' })) : null)));
+                disabled: this.disabled,
+            }, onClick: () => {
+                if (!this.disabled) {
+                    this.emitItemClick();
+                }
+            }, "aria-label": this.ariaLabelButton, "aria-disabled": a11yBoolean(this.disabled), disabled: this.disabled }, !this.suppressChecked ? (hAsync("div", { class: "dropdown-item-checked" }, this.checked ? (hAsync("ix-icon", { class: "checkmark", name: iconSingleCheck, size: "16" })) : null)) : null, this.icon ? (hAsync("ix-icon", { class: "dropdown-item-icon", name: this.icon, "aria-label": this.ariaLabelIcon })) : null, hAsync("div", { key: 'faf59089cf0887b1fc1907b6e98b1f1cd2aa62ab', class: "dropdown-item-text" }, this.label, hAsync("slot", { key: '112c5601bae07f6ab8807b42014a268f7e402d59' })), this.isSubMenu ? (hAsync("ix-icon", { name: iconChevronRightSmall, class: 'submenu-icon' })) : null)));
     }
     get hostElement() { return getElement(this); }
     static get style() { return dropdownItemCss; }
@@ -23093,7 +23267,7 @@ class DropdownItem {
             "ariaLabelIcon": [1, "aria-label-icon"],
             "ariaLabelButton": [1, "aria-label-button"],
             "hover": [4],
-            "disabled": [4],
+            "disabled": [516],
             "checked": [4],
             "isSubMenu": [4, "is-sub-menu"],
             "suppressChecked": [4, "suppress-checked"],
@@ -23102,7 +23276,7 @@ class DropdownItem {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["disabled", "disabled"]]
     }; }
 }
 
@@ -23113,7 +23287,7 @@ class DropdownQuickActions {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '270b8dba8a8b79072beb81301d923f8f8754b70f' }, hAsync("slot", { key: '9970e51c7af36350359311ea217e2a402a35f994' })));
+        return (hAsync(Host, { key: '5b9938da726bfe31dffe1667ff81c1b3a5935e1e' }, hAsync("slot", { key: 'a3f04dc61e5896ede45c0484506b3ee611b413c8' })));
     }
     static get style() { return dropdownQuickActionsCss; }
     static get cmpMeta() { return {
@@ -23138,7 +23312,7 @@ class EmptyState {
         this.layout = 'large';
     }
     render() {
-        return (hAsync(Host, { key: '40044bc561b77f0ca121fec086c4e50959cd84b8', class: `emptyState emptyState--${this.layout}` }, this.icon && (hAsync("div", { key: '4f7caad68b5bfdae9a3becc0d9cb86e6aa121b9a', class: "emptyState__icon" }, hAsync("ix-icon", { key: '4f3540bc8589358f3a81136bf18e37a963ccf8c4', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text", "aria-label": this.ariaLabelEmptyStateIcon }))), hAsync("div", { key: 'aa658e73609ff249ada8b4a11897bc6fd16f3e27', class: "emptyState__content" }, hAsync("div", { key: 'f46a03dcf711bdfc3919d3f94e5b60e64f434173', class: "content__label" }, hAsync("ix-typography", { key: 'dd56a7bc024921adedf792ed956614a13a7dd723', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (hAsync("div", { key: '7813b0fd9e490328b24566ae0abb805dbc2d1b3b', class: "label__subHeader" }, this.subHeader))), this.action && (hAsync("div", { key: '4ffbf8f873bff95e04376dac344cd312d39a68d6', class: "content__action" }, hAsync("ix-button", { key: '20739fd736c3176034dcc6d564c09879f745b9b3', onClick: () => this.actionClick.emit() }, this.action))))));
+        return (hAsync(Host, { key: 'f87d35f9c8ae39f3ed46f8ebf0fe1b0487d91108', class: `emptyState emptyState--${this.layout}` }, this.icon && (hAsync("div", { key: '41eb63bad03958baeb5f683895ea196f883b5312', class: "emptyState__icon" }, hAsync("ix-icon", { key: '3bd1032f996cdf7c046f767ac9fec79756a7b8e5', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text", "aria-label": this.ariaLabelEmptyStateIcon }))), hAsync("div", { key: '1a287d69a879f7dd52e9801e9fd0a973849fc244', class: "emptyState__content" }, hAsync("div", { key: '8e2ff9b6f189e732dd16bf943922b09f32b9adfc', class: "content__label" }, hAsync("ix-typography", { key: '74bc4394d9b94c2d3161091b71fbeb8ca091d6d8', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (hAsync("div", { key: '43e21aec14323f18a4df1116c7841702a945bcfe', class: "label__subHeader" }, this.subHeader))), this.action && (hAsync("div", { key: 'd80c01f388e99df9affc47086ac2f67ef89ca8ca', class: "content__action" }, hAsync("ix-button", { key: '0ba60803afb761fbae046546ed06f6ab07bc728c', onClick: () => this.actionClick.emit() }, this.action))))));
     }
     static get style() { return emptyStateCss; }
     static get cmpMeta() { return {
@@ -23279,11 +23453,11 @@ class EventList {
         });
     }
     render() {
-        return (hAsync(Host, { key: '71648df2cdbbb1951fa970739cdf1a6f4bd1c40f', class: {
+        return (hAsync(Host, { key: 'a21a4d23666ba43d7d10bd569c7a9feb01423b1f', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, hAsync("div", { key: 'ce46bd8d70b502d2dd19ffee75d2f3ae45e95d5a', role: "list" }, hAsync("slot", { key: '016b05cd0e580af2e89232c3f4a0b5ebad8bda62' }))));
+            } }, hAsync("div", { key: 'cbb5ffb72ce1a393c99df6624ffc3e36a3d6a4b5', role: "list" }, hAsync("slot", { key: '50ca67f2071b058ee4e43bfcad1bf23d5fc623d3' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -23340,17 +23514,17 @@ class EventListItem {
         let color = ((_a = this.itemColor) === null || _a === void 0 ? void 0 : _a.startsWith('--theme'))
             ? `var(${this.itemColor})`
             : `var(--theme-${this.itemColor})`;
-        return (hAsync(Host, { key: '76e06ddd63da8e0adec50dcd20bc61e2f2d1e1c0', class: {
+        return (hAsync(Host, { key: '3fa7304c0d114cd65b572e6d7e1a7362d3f63950', class: {
                 disabled: this.disabled,
                 [`event-list-item-${this.variant}`]: true,
-            } }, hAsync("div", { key: 'b04e600de4ca8f82c0ac973f6df2efc6a9c1acdb', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
+            } }, hAsync("div", { key: '9dc5734ea43068e74efc45d89a6fda3bad040cd1', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
                 'event-list-item': true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, hAsync("div", { key: 'e8cbc3d3a7e752fd60fa30b92503d4c7a2b64392', class: `indicator ${!this.itemColor ? 'indicator-empty' : ''}`, style: {
+            } }, hAsync("div", { key: '5fc29826643c430d3f0c82826142b461395d5075', class: `indicator ${!this.itemColor ? 'indicator-empty' : ''}`, style: {
                 'background-color': this.itemColor ? color : 'inherit',
                 opacity: `${this.disabled ? 0.4 : 1}`,
-            } }), hAsync("div", { key: '41e137395c4466be016fd1c97456b040f60de4ab', class: "event-list-item-container" }, hAsync("div", { key: '0a38f7c6f62b877dde4a27db021daff4c47440e0', class: "event-content" }, hAsync("slot", { key: '8867732a5801ab78afc2de8ff60a715608c5f8c7' })), this.chevron && (hAsync("ix-icon", { key: '3a0155d4a8dc6fae7d65c181f0197abe5f78b4af', name: iconChevronRight, size: "16", class: "chevron-icon", "aria-hidden": "true" }))))));
+            } }), hAsync("div", { key: 'c53b6ea99b0744dc6a0d57024853d0627a3963e2', class: "event-list-item-container" }, hAsync("div", { key: '22a50db11d9997caa9df67fea550e1f58224344c', class: "event-content" }, hAsync("slot", { key: '6361d1b0c326919f46ed7eb1b6bcb4b17421258e' })), this.chevron && (hAsync("ix-icon", { key: 'edd5d1e1ef0fa1c85b319f9bdccdf1e2cbe8183a', name: iconChevronRight, size: "16", class: "chevron-icon", "aria-hidden": "true" }))))));
     }
     static get style() { return eventListItemCss; }
     static get cmpMeta() { return {
@@ -23431,20 +23605,20 @@ class ExpandingSearch {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: 'a7502cbddcb136608813c4fe522e868ae3d5806d', class: {
+        return (hAsync(Host, { key: '6fa9475cb63afee99623408a13321b4f01e7e346', class: {
                 expanded: this.expanded,
                 'right-position': this.expanded,
                 fullWidth: this.fullWidth,
-            } }, hAsync("ix-icon-button", { key: 'ad6ed825caea25be04469731e4eb8c33d08b1ad0', size: this.expanded ? '16' : '24', icon: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, variant: this.expanded ? 'tertiary' : this.variant, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+            } }, hAsync("ix-icon-button", { key: 'd4f6f3e8363b84190b6b875775f77e69df958417', size: this.expanded ? '16' : '24', icon: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, variant: this.expanded ? 'tertiary' : this.variant, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
                 'btn-search': true,
                 'btn-search--expanded': this.expanded,
-            }, "aria-label": this.ariaLabelSearchIconButton }), hAsync("div", { key: 'b12d4ab2b26f00564d6edc1c3fd0d0f1ba48a8c2', class: {
+            }, "aria-label": this.ariaLabelSearchIconButton }), hAsync("div", { key: '843d11c6d7ca40c2bf44cbda4a078283d14a9c60', class: {
                 expanded: this.expanded,
                 fullWidth: this.fullWidth,
                 collapsed: !this.expanded,
                 'disable-pointer': !this.expanded,
                 'input-container': true,
-            }, "data-testid": "input-wrapper" }, hAsync("input", { key: '47f11db65a0f58d1fb0c77239062b8414538d200', class: {
+            }, "data-testid": "input-wrapper" }, hAsync("input", { key: 'f4e711d68bb5037be4e0727476433a8483517685', class: {
                 'ix-form-control': true,
                 input: this.expanded,
                 'disable-pointer': !this.expanded,
@@ -23556,9 +23730,9 @@ class FieldWrapper {
             infoText: this.infoText,
             helperText: this.helperText,
         };
-        return (hAsync(Host, { key: 'a27a9cefcce30e8dc30ca6a3fd72164227e86fdf' }, this.label && (hAsync("div", { key: 'ef4a8585d24c3b0400e85b1a21bd9344e01bcb47', class: "field-top" }, hAsync("ix-field-label", { key: '93c9f7cfbbde681956a7676721f1dd0821907e89', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label))), hAsync("div", { key: '3a26cb08a91fc7c0f10de83a5b722b5af66f059f', class: {
+        return (hAsync(Host, { key: '531b08942bf31c36043fb3d7cd3af489f2fe83b0' }, this.label && (hAsync("div", { key: '49b9ef124fc2d69fb2528585d7b232b2e3d6d4b6', class: "field-top" }, hAsync("ix-field-label", { key: '20a089a72de7ee3045c048c19d868ff3b4be2706', required: this.required, htmlFor: this.htmlForLabel, controlRef: this.controlRef, isInvalid: this.isInvalid }, this.label))), hAsync("div", { key: '80c8ce58eb73379755757b2cef6b318cdc279b6b', class: {
                 'slot-wrapper': true,
-            }, ref: this.slotRef }, hAsync("slot", { key: 'fe73a444a23928cee7f7899cc3bb6aef76eefa68' })), hAsync("div", { key: 'bc5fa34c5a05e49427e63a87d70db0735a0a0b80', class: 'field-bottom' }, !this.showTextAsTooltip && hAsync(HelperText$1, Object.assign({ key: '67abdfcf2448d8df422cd0ee39c162f423e5c564' }, textOptions)), hAsync("div", { key: 'fecb02a2e534980491ea776cdc952b1aeea41286', class: "bottom-right" }, hAsync("slot", { key: '9a958f810edf477be93394d887724c9763c57f17', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (hAsync("ix-tooltip", { key: 'd3d8810548d267811e5f298fbb41f657abbae27d', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, hAsync(HelperText$1, Object.assign({ key: '44c241959d5db7e91c00a08a843a51dfc9307256' }, textOptions))))));
+            }, ref: this.slotRef }, hAsync("slot", { key: 'f41f0681742e9f783092bad7484c851e2b987c99' })), hAsync("div", { key: '9db46e23621d508e08fe87cae69a3698491347dc', class: 'field-bottom' }, !this.showTextAsTooltip && hAsync(HelperText$1, Object.assign({ key: '29802c92675a34cd215740a5df6fae77ed36368f' }, textOptions)), hAsync("div", { key: 'b94a1cc2acd5f8379e768fda9f222af6cb85f2b7', class: "bottom-right" }, hAsync("slot", { key: '3c5ba2d9a6d4671b6fadba6e06455ae229894f94', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (hAsync("ix-tooltip", { key: '890c4a39781fbb14b96660691fd6f6fe96a30e0b', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, hAsync(HelperText$1, Object.assign({ key: '638410fd78282cf38065635a79cceeb064a2a10e' }, textOptions))))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return fieldWrapperCss; }
@@ -23608,7 +23782,7 @@ class FilterChip {
         this.closeClick.emit();
     }
     render() {
-        return (hAsync(Host, { key: '03b4a6c34e034efe267406a523a902e85665b351', class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, hAsync("div", { key: '75c8992cf2e8dc2d2ff76d1579219ff4bef46fd2', class: "slot-container" }, hAsync("slot", { key: 'ea52727be5fa2cda2f9ddaa2a7a37a1c7c1f4f91' })), !this.disabled && !this.readonly ? (hAsync("ix-icon-button", { variant: "tertiary", oval: true, icon: iconCloseSmall, size: "16", tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: (e) => this.onCloseClick(e), "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (hAsync(Host, { key: 'e583d14307f98b55f1ff4be4b9c3897776eaae75', class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, hAsync("div", { key: '998751b62b8266368176fe1186a6dd2f311199be', class: "slot-container" }, hAsync("slot", { key: '2861044a08d5b237444cda5bb5fafe0bc0c97790' })), !this.disabled && !this.readonly ? (hAsync("ix-icon-button", { variant: "tertiary", oval: true, icon: iconCloseSmall, size: "16", tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: (e) => this.onCloseClick(e), "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     get hostElement() { return getElement(this); }
     static get style() { return filterChipCss; }
@@ -23735,7 +23909,7 @@ class FlipTile {
         }, 2 * Animation.defaultTime);
     }
     render() {
-        return (hAsync(Host, { key: '32727b4df750f9d1892f365a7e8d729447be05ac', class: {
+        return (hAsync(Host, { key: 'a54038f2dbaeffac796822404e2d186c742a5357', class: {
                 [`flip-tile-variant-${this.variant}`]: true,
             }, style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
@@ -23744,10 +23918,10 @@ class FlipTile {
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, hAsync("div", { key: 'e58093dce55ede49f9f1782327c73918ee21d2c6', class: "flip-tile-container" }, hAsync("div", { key: 'bd60e44b5b04177c4003936aa15d6539cd093883', class: "flip-tile-header" }, hAsync("div", { key: '792d0e39b406fb50561f3c35c0340ee827b568e6', class: "header-slot-container text-l-title" }, hAsync("slot", { key: '9e320aef9f89689b594c9555e154c8795dbdb233', name: "header" })), hAsync("ix-icon-button", { key: 'dc0a042565001a79ea17e33671f4c2486b702ebf', icon: iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), hAsync("div", { key: 'fa61544ccf0e16884c4d747e0e7cc174216d7906', class: "content-container" }, hAsync("slot", { key: '1ed79120c3e926bb5f48a0e1980f5dfb785050f8' })), hAsync("div", { key: '543216df0a9e93c9a739b921259e529eb494e751', class: {
+            } }, hAsync("div", { key: '0bf12231b1cdeb0afe41d9d45c06fdef4cdedaf4', class: "flip-tile-container" }, hAsync("div", { key: '3e9da89ed0b9cf7595e4c1d317d21ed1b55aa9d7', class: "flip-tile-header" }, hAsync("div", { key: 'd4e7cc2a8162254ea3c7c4a0a031346b7a35e3d9', class: "header-slot-container text-l-title" }, hAsync("slot", { key: 'dd9e2244a75179ceb4ac9647b403a5e2b01fd2ae', name: "header" })), hAsync("ix-icon-button", { key: '74a5abdba3bf0c90222fc7bf7064742c0ea85b80', icon: iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), hAsync("div", { key: '636884dbf0b0143e4f30061cd6e0472c83fe698a', class: "content-container" }, hAsync("slot", { key: 'b94b3a488e7a137b06505290ab351724c5f01fca' })), hAsync("div", { key: 'a15153c86848df2dd14b1423c686b9655d6fcdc1', class: {
                 footer: true,
                 'show-footer': this.hasFooterSlot,
-            } }, hAsync("slot", { key: '271f61fc236be2813cec900c788fe4bfcb2c285d', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
+            } }, hAsync("slot", { key: '68d0585ff19d8a29fc8ccfdb2ec6302f767e3a94', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -23785,7 +23959,7 @@ class FlipTileContent {
         this.contentVisible = false;
     }
     render() {
-        return hAsync(Host, { key: '264e3539d6c5abcd8716968a4128da99ca191375' }, this.contentVisible ? hAsync("slot", null) : null);
+        return hAsync(Host, { key: '002fbfde1a46839d622af7fb2be6dff5ca99aa87' }, this.contentVisible ? hAsync("slot", null) : null);
     }
     static get style() { return flipTileContentCss; }
     static get cmpMeta() { return {
@@ -23807,10 +23981,14 @@ class FormFieldLabel {
         registerInstance(this, hostRef);
         /** @internal */
         this.isInvalid = false;
+        this.explicitIsInvalid = undefined;
         this.htmlForObserver = new MutationObserver(() => this.checkForInternalState());
         this.a11yAttributes = {};
         this.labelRef = makeRef();
     }
+    isInvalidChanged(newValue) {
+        this.explicitIsInvalid = newValue;
+    }
     connectedCallback() {
         this.registerHtmlForObserver();
         this.registerControlRefObserver();
@@ -23853,7 +24031,7 @@ class FormFieldLabel {
         if (this.controlRefClassObserver) {
             this.controlRefClassObserver.destroy();
         }
-        if (this.controlRef) {
+        if (this.controlRef && !this.htmlFor) {
             const input = await this.controlRef.waitForCurrent();
             this.controlRefClassObserver = createClassMutationObserver(input, () => this.checkForInvalidState(input));
         }
@@ -23865,9 +24043,10 @@ class FormFieldLabel {
         this.htmlForClassObserver = createClassMutationObserver(forElement, () => this.checkForInvalidState(forElement));
     }
     checkForInvalidState(elementToCheck) {
-        this.isInvalid =
-            elementToCheck.classList.contains('is-invalid') ||
-                elementToCheck.classList.contains('ix-invalid');
+        var _a;
+        const hasInvalidClass = elementToCheck.classList.contains('is-invalid') ||
+            elementToCheck.classList.contains('ix-invalid');
+        this.isInvalid = (_a = this.explicitIsInvalid) !== null && _a !== void 0 ? _a : hasInvalidClass;
     }
     async checkForInternalState() {
         if (this.htmlFor) {
@@ -23878,6 +24057,7 @@ class FormFieldLabel {
                 }
                 this.registerHtmlForClassObserver(forElement);
                 this.checkForInvalidState(forElement);
+                return;
             }
         }
         if (this.controlRef) {
@@ -23906,10 +24086,11 @@ class FormFieldLabel {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'ca4f1ba84a3a19a4d15aa517272c90bebf782e13', onClick: () => this.focusOnClick() }, hAsync("label", Object.assign({ key: '44e2386d5dd7c51d3b5a9e1530e986b15ba64d23', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), hAsync("ix-typography", { key: 'ab97048f7a521ad398438795ba7a5ccba2571f4c', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, hAsync("slot", { key: 'faf628440f832acb412c7f5b40dab4620da785d7' }), this.required && hAsync("span", { key: 'd15676e3bf2d645ce2e1fc8f3bd91af23b6ec725' }, "*")))));
+        return (hAsync(Host, { key: '1a8134a30a1b101f6bfd678f905eb88e927e47d6', onClick: () => this.focusOnClick() }, hAsync("label", Object.assign({ key: 'ef6df6072485fb72ea02a0a9800be3be15e84314', htmlFor: this.htmlFor }, this.a11yAttributes, { ref: this.labelRef }), hAsync("ix-typography", { key: '572975edeae54d15932c3b6091ed63dfff8bb231', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, hAsync("slot", { key: '452847ea7365cefc945bc6166bf2e8fd44d3f530' }), this.required && hAsync("span", { key: '5e85f801d6fe8a01d6595a55bb263d0bcf91a888' }, "*")))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
+        "isInvalid": ["isInvalidChanged"],
         "htmlFor": ["registerHtmlForObserver"],
         "controlRef": ["registerControlRefObserver"]
     }; }
@@ -24062,27 +24243,27 @@ class Group {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'b93d2c8f1290baa2983945ce349b90e95bf18696' }, hAsync("div", { key: '3e9ce7ce3402f48bb17612a97bf9bee85767c6aa', class: {
+        return (hAsync(Host, { key: '99b00ca8c88730036688974abd67ff0534dd4d17' }, hAsync("div", { key: '47384431d36ce7cdc5a2e81ecd682d6a0dd13b53', class: {
                 'group-header': true,
                 expand: this.expanded,
                 selected: this.selected,
-            }, tabindex: "0" }, hAsync("div", { key: 'daeb1087643b9f0267b3e2ba13a3973486730888', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, hAsync("div", { key: '9771b2df1e5b68339aa9c4689de4b2d24bc09341', class: {
+            }, tabindex: "0" }, hAsync("div", { key: '68968fc5816ca0fef0ae658a6925cc6b8ee3479a', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, hAsync("div", { key: 'a26153957aa76d882d95a3f88318c01517078a64', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), hAsync("div", { key: 'e0e1454e780614a31955720bd7b62d7bfec1b7e0', class: "btn-expand-header" }, hAsync("ix-icon", { key: '0742c7515bbac3d3ba0221a5c3b0860d6a1792a2', "data-testid": "expand-collapsed-icon", class: {
+            } }), hAsync("div", { key: '01427b28c1b873a1875bd4c2093fee6d900bdf89', class: "btn-expand-header" }, hAsync("ix-icon", { key: '1feb76e98b4ebda01d902b76065cdcefa0dde5a4', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), hAsync("div", { key: '4aa355b5a3a7f70977275139779000b2474a4a91', class: "group-header-content" }, this.header ? (hAsync("div", { class: "group-header-props-container" }, hAsync("div", { class: "group-header-title" }, hAsync("span", { title: this.header }, this.header)), hAsync("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, hAsync("slot", { key: 'c782251ecc1044aa3f7923d8f58b7f9c28700b4f', name: "header" }))), this.hasDropdown && (hAsync("ix-group-context-menu", { key: '0899d27a51f412aea136b00fcae9ab32859670f4' }, hAsync("slot", { key: '76f9b3b94312879ac5e349546172e3d95aefce78', name: "dropdown" })))), hAsync("div", { key: 'f6a6aac17d8685244c28b8c6ecd24c966985ba1b', class: {
+            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), hAsync("div", { key: '5c6232f9b9a36ccbfa2f0e9352a5e739e202e275', class: "group-header-content" }, this.header ? (hAsync("div", { class: "group-header-props-container" }, hAsync("div", { class: "group-header-title" }, hAsync("span", { title: this.header }, this.header)), hAsync("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, hAsync("slot", { key: '592d03499639a45183c8837b421a33bbffbae954', name: "header" }))), this.hasDropdown && (hAsync("ix-group-context-menu", { key: 'f666ce19d8441bd3afc40800128e6326da14615e' }, hAsync("slot", { key: '96d9509e35fbf388d31fbc832fc31dd2167842a8', name: "dropdown" })))), hAsync("div", { key: '3d6f649530d00fd19761bb84ed4bf8769b0bec14', class: {
                 'group-content': true,
-            } }, hAsync("div", { key: 'f805cc015b7bf9c919ea9129500e4af8773b7f63', style: {
+            } }, hAsync("div", { key: 'cad4a7c42f5402400add10d1d5ac57174aa34b6e', style: {
                 display: this.expanded ? 'contents' : 'none',
-            } }, hAsync("slot", { key: '703791e124429a91a5798429443c3494d18b262d', onSlotchange: () => {
+            } }, hAsync("slot", { key: '305a97c24f58db1e1d1264876c99316aceda6e8d', onSlotchange: () => {
                 var _a;
                 const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), hAsync("ix-group-item", { key: '5e471c137730667bd459ac80943369b59f81c544', class: {
+            } }), hAsync("ix-group-item", { key: 'f19cce4aad2fc8465f57d94bb6a6b228204120e6', class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            }, groupFooter: true, suppressSelection: true }, hAsync("slot", { key: '84526685ab81de426a70ecfb52db3211b4a3219b', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            }, groupFooter: true, suppressSelection: true }, hAsync("slot", { key: 'c073314bc4528f7559c8c1cfa43b88881d7a4e49', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -24144,7 +24325,7 @@ class GroupContextMenu {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (hAsync(Host, { key: '13eed06b9866e6d59f3972d2940f752d8f245b52' }, hAsync("ix-icon-button", { key: '6fc57583df2308b3fa234d8fd675cbcb05a55974', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), hAsync("slot", { key: 'b56d53e0b2154c0eefcd99fdd8eeb508457b7641', onSlotchange: () => this.onSlotChange() })));
+        return (hAsync(Host, { key: 'd3b00dddd05f3ac944f61b8a4098883dffe2acc2' }, hAsync("ix-icon-button", { key: '0d427b8b754020e83b4aa03686a9fea1d8fbffc0', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), hAsync("slot", { key: 'baef7854222010ff76fc784c50804e4f343eafc3', onSlotchange: () => this.onSlotChange() })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return groupContextMenuCss; }
@@ -24268,7 +24449,7 @@ class HelperText {
         this.validationResults = checkFieldClasses(forElement);
     }
     render() {
-        return (hAsync(Host, { key: '95d6dfb6a163ee5e6b4d7d478780af394427548c' }, hAsync(HelperText$1, Object.assign({ key: 'dc7f97b4cb8b2563c1a1089764e25eb63c75b583', helperText: this.helperText,
+        return (hAsync(Host, { key: 'aa99794dc7b9c59abf2fdd8f2ac8112cf705a5ad' }, hAsync(HelperText$1, Object.assign({ key: 'c3e36ebbae8617aa43cf2616242b035739ab4cc7', helperText: this.helperText,
             invalidText: this.invalidText,
             validText: this.validText,
             infoText: this.infoText,
@@ -24378,8 +24559,11 @@ class IconButton {
             onClick: () => this.dispatchFormEvents(),
             type: this.type,
             extraClasses: this.getIconSizeClass(),
+            tabIndex: this.hostElement.hasAttribute('tabindex')
+                ? this.hostElement.tabIndex
+                : undefined,
         };
-        return (hAsync(Host, { key: '04486b7d26d2b34a920b53f683b3b1b591b95311', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, hAsync(BaseIconButton, Object.assign({ key: '94936955261d6fc13e78ea98ddb3cf98d3fda058' }, baseButtonProps))));
+        return (hAsync(Host, { key: '2acf097d64918e4f19ead5560414cb07e791fe8c', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, hAsync(BaseIconButton, Object.assign({ key: 'b7e2432d7cc3362048c1e65d642e3abef43dec82' }, baseButtonProps))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return iconButtonCss; }
@@ -24473,7 +24657,7 @@ class IconToggleButton {
             },
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
-        return (hAsync(Host, { key: 'cac43636bbec0b7a783309bc8acfff59dc899077', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, hAsync(BaseIconButton, Object.assign({ key: 'c1476c415753b630b480542ea220854ecb8c56a9' }, baseButtonProps))));
+        return (hAsync(Host, { key: '7e569390966cec8f23e66418506df999e26aeebd', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, hAsync(BaseIconButton, Object.assign({ key: 'b055971a9ea7d2bd859c5c71ceaf0d39e05e1b54' }, baseButtonProps))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return iconToggleButtonCss; }
@@ -24640,13 +24824,13 @@ class Input {
     render() {
         var _a, _b;
         const inputAria = getAriaAttributesForInput(this);
-        return (hAsync(Host, { key: '07337a899a3b73d3cb37b1fc84da266d95cff84a', class: {
+        return (hAsync(Host, { key: '406a4e193377deed02588cf4472f5a9cdadee3f2', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, hAsync("ix-field-wrapper", { key: '64461a842b4a784192fd7ab9fdc972bd4810785a', htmlForLabel: this.inputId, 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 }, hAsync("div", { key: 'aac87eb96cb2cba4b9f86527b6d7784d0a015474', class: "input-wrapper" }, hAsync(SlotStart, { key: '87bcf8d63bd1a4020a680bc2b6def8034a9d65de', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), hAsync(InputElement, { key: 'f6b81c671a36b00bde716d72a40c17b6cd409c24', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+            } }, hAsync("ix-field-wrapper", { key: 'cc104d9630112c8d688417accf37b0e94f1bd1c1', htmlForLabel: this.inputId, 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 }, hAsync("div", { key: 'ddf0d5030a06eb966a6853ada6ab52ad0c2661d2', class: "input-wrapper" }, hAsync(SlotStart, { key: 'e3cec3c75def9eef6fd0b66a28ac5e844663a813', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), hAsync(InputElement, { key: '78fcf785c85c7260ac7d04e7e6e63e14dacba886', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
                 onInputBlur(this, this.inputRef.current);
                 this.touched = true;
-            }, ariaAttributes: inputAria, form: (_a = this.formInternals.form) !== null && _a !== void 0 ? _a : undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), hAsync(SlotEnd, { key: 'c8f10373d93bba50d0c633b77fd7ec548e4590d5', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, hAsync("ix-icon-button", { key: '169c36e6719204de19756a1cf8c0a7c141119417', color: "color-weak-text", class: {
+            }, ariaAttributes: inputAria, form: (_a = this.formInternals.form) !== null && _a !== void 0 ? _a : undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), hAsync(SlotEnd, { key: '3f3add18b0970f05509463b7fcccc64bf06cae96', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, hAsync("ix-icon-button", { key: 'adc28dadd45db5e1cd2ba351aca4478585b4d850', color: "color-weak-text", class: {
                 'password-eye': true,
                 'eye-hidden': this.type !== 'password' || this.disabled,
             }, variant: "tertiary", icon: this.inputType === 'password' ? iconEye : iconEyeCancelled, onClick: () => {
@@ -24655,7 +24839,7 @@ class Input {
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (hAsync("ix-typography", { key: 'd4041de277ec45534274a6a4a739ff90cd4b98c1', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_b = this.value) !== null && _b !== void 0 ? _b : '').length, "/", this.maxLength)))));
+            } }))), !!this.maxLength && this.maxLength > 0 && (hAsync("ix-typography", { key: '0990225bc71107d2863aef15564fee5bef14a7b0', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_b = this.value) !== null && _b !== void 0 ? _b : '').length, "/", this.maxLength)))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
@@ -24831,7 +25015,7 @@ class InputGroup {
         return width;
     }
     render() {
-        return (hAsync(Host, { key: 'c47a7aab493e832b0d2c14d81bbf10b666f23f6c', class: { disabled: this.disabled } }, hAsync("div", { key: '44cac00e7f527e3a8f12fbb6a0698cbc4e81feeb', class: "group group-start" }, hAsync("slot", { key: '030a2cc484426f92ac56570567d3b6dbec70c615', ref: (el) => (this.startSlotRef = el), name: "input-start" })), hAsync("slot", { key: '36a4cd0a41f2dc250cc24024b2f6470d29948e9b' }), hAsync("div", { key: 'b6f0a7c2651d27bfd8392176c239190d4fe26d9c', class: "group group-end" }, hAsync("slot", { key: '9d9dbff6897c41627ca0d7e133bdecbd68a373b8', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
+        return (hAsync(Host, { key: 'b148a7e4ed2a11c543a98a6247797da3415b9bba', class: { disabled: this.disabled } }, hAsync("div", { key: '6aac120f6d3cad989a4409978760fb752c556711', class: "group group-start" }, hAsync("slot", { key: 'f2b68f9fd6b449b560823db825f04a6d154baf91', ref: (el) => (this.startSlotRef = el), name: "input-start" })), hAsync("slot", { key: '7aa651f145806d7c24ad00af93d9dfd267a9ce02' }), hAsync("div", { key: 'd6214bd6949bd22bdc62582d0f0089f884b5c6af', class: "group group-end" }, hAsync("slot", { key: '8eb65c2a35f67a2436c58cc8b04605f4d80b74f2', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return inputGroupCss; }
@@ -24866,6 +25050,10 @@ class IxActionCard {
          * Card selection
          */
         this.selected = false;
+        /**
+         * If true, disables hover and active styles and changes cursor to default
+         */
+        this.passive = false;
     }
     getSubheadingTextColor() {
         return this.variant === 'outline' || this.variant === 'filled'
@@ -24876,7 +25064,7 @@ class IxActionCard {
         const ariaLabelledBy = !this.ariaLabelCard && this.heading
             ? 'ix-action-card-heading'
             : undefined;
-        return (hAsync(Host, { key: '167db61afb0880052edd6e28ec9e907dbe98a186' }, hAsync("ix-card", { key: 'e8014c544dbadee66135b8def9b868488a07773b', selected: this.selected, variant: this.variant, class: 'pointer', "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy, role: ariaLabelledBy ? 'group' : undefined }, hAsync("ix-card-content", { key: 'bcb177b0fbe2a709d3ab9d8479077eb64ef2496a' }, this.icon ? (hAsync("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon || getFallbackLabelFromIconName(this.icon) })) : null, hAsync("div", { key: '65aa3882ad626df59598626bf7a67e1431fcf6e4' }, this.heading ? (hAsync("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (hAsync("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, hAsync("slot", { key: '9ffacb3ea7d9642a2adbad41d9e6fc36a8e5118b' }))))));
+        return (hAsync(Host, { key: '600ad1913e671fb47ec9da8f66e984bbde498fae' }, hAsync("ix-card", { key: '1a8168a17a643908126f841e9cdd6d0055a62399', selected: this.selected, variant: this.variant, passive: this.passive, class: 'pointer', "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy, role: ariaLabelledBy ? 'group' : undefined }, hAsync("ix-card-content", { key: 'c138b94b131af478fee65244f32b91cdf78b31df' }, this.icon ? (hAsync("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon || getFallbackLabelFromIconName(this.icon) })) : null, hAsync("div", { key: 'eb0252c628c75709fddae387a3b4a7abbf7c3df0' }, this.heading ? (hAsync("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (hAsync("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, hAsync("slot", { key: 'f47fd515fc5b8f22344dc83b808e527116238618' }))))));
     }
     static get style() { return actionCardCss; }
     static get cmpMeta() { return {
@@ -24889,7 +25077,8 @@ class IxActionCard {
             "heading": [1],
             "subheading": [1],
             "selected": [4],
-            "ariaLabelCard": [1, "aria-label-card"]
+            "ariaLabelCard": [1, "aria-label-card"],
+            "passive": [4]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -24931,7 +25120,7 @@ class IxTypography {
                 color: IxTypography.getTextColor(this.textColor),
             };
         }
-        return (hAsync(Host, { key: 'de007c46746d98dffe4647fca37b0d8dd1967415', class: typographyClass, style: style }, hAsync("slot", { key: 'a4ada9ab3f8a64839f4a6c7938b3769f6ef0d6c7' })));
+        return (hAsync(Host, { key: 'bb094932ca94cb81bbfa4295c2a044fdcb92b9f6', class: typographyClass, style: style }, hAsync("slot", { key: 'b43d9ab39c7f56e613a72326c2b298893da68e96' })));
     }
     static get style() { return typographyCss; }
     static get cmpMeta() { return {
@@ -24963,7 +25152,7 @@ class KeyValue {
         this.labelPosition = 'top';
     }
     render() {
-        return (hAsync(Host, { key: '7fb93d7b2fbcf2ce8aac64eda186d82a5a45cbe7', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (hAsync("ix-icon", { key: '4ec1a309785fba489f0c8d9dfb2c024268c92193', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), hAsync("div", { key: '95fb53fe545cd00bc84b6eeeba6c910eff2143cc', class: "keyValue__content" }, hAsync("div", { key: '631b09a0969534b81538968c50c886b5337a0765', class: "content__label" }, this.label), hAsync("div", { key: 'd45d5050124bf055a05cd71305b2b4e9d30a572d', class: {
+        return (hAsync(Host, { key: 'ee855752985c8321f4f9608cb957acd093293a9f', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (hAsync("ix-icon", { key: '6bfb94d5df575189c0df6e86cd65ea25a2dddecc', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), hAsync("div", { key: '028c1ca00511298ae99c1088a2800c0b7ccd97bd', class: "keyValue__content" }, hAsync("div", { key: '1b61165be2e1462f3d18e325236f9175b3a84a0d', class: "content__label" }, this.label), hAsync("div", { key: 'd778bac4980281cce97bade4247b8f3b62191e1b', class: {
                 content__value: true,
                 'has-customValue': this.value === undefined,
             } }, this.value !== undefined ? (this.value) : (hAsync("slot", { name: "custom-value" }))))));
@@ -24996,7 +25185,7 @@ class KeyValueList {
         this.striped = false;
     }
     render() {
-        return (hAsync(Host, { key: 'fcc3ec3470c25cac50b88a1006b30be059f778f8', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, hAsync("slot", { key: '05645a91f92d7db584bd8235f73979249870e734' })));
+        return (hAsync(Host, { key: '8ac8c1edacddbe11072e692c165c338bdaa6fcdf', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, hAsync("slot", { key: '844c573286e6022f4d3f53086b584425306f7f1e' })));
     }
     static get style() { return keyValueListCss; }
     static get cmpMeta() { return {
@@ -25043,13 +25232,13 @@ class Kpi {
         return tooltip;
     }
     render() {
-        return (hAsync(Host, { key: '34fcbb68ba73d08619ef12fd9595c9c684aa3d10', title: this.getTooltipText(), tabindex: "1", class: {
+        return (hAsync(Host, { key: '66e7a14d365489072d53128deddfe610ea2c0589', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, hAsync("div", { key: 'cd4910a41ee179ea21166c80322e5361dd132850', class: {
+            } }, hAsync("div", { key: '724d4ad85701d09ad46ad85d5d62150195545cb1', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, hAsync("span", { key: '33226fc8e0561e4db98181be1b6595534561bab7', class: "kpi-label" }, this.getStateIcon(), hAsync("span", { key: '06cb693420e43f2475cfae0d8f2217a2770ac5cc', class: "kpi-label-text" }, this.label)), hAsync("span", { key: '8a837f1466b2670d473983aaffc2742737fb8a9a', class: "kpi-value-container" }, hAsync("span", { key: '5e66113f88a3637aaf83c3482a5625b290e25763', class: "kpi-value" }, this.value), this.unit ? hAsync("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, hAsync("span", { key: '581ec9d9dac67105f5d92fc714511a1578d0833d', class: "kpi-label" }, this.getStateIcon(), hAsync("span", { key: 'a81cb7fe8322e8d0682527c7d961a4d1fb32fd58', class: "kpi-label-text" }, this.label)), hAsync("span", { key: 'ed7cefc54de202ccab0e9d1ec1adc42eb74f6f78', class: "kpi-value-container" }, hAsync("span", { key: 'cade7321b2d3d1dc564480b3ad7f769f079b84d1', class: "kpi-value" }, this.value), this.unit ? hAsync("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
     static get style() { return kpiCss; }
     static get cmpMeta() { return {
@@ -25146,7 +25335,7 @@ class LayoutForm {
         });
     }
     render() {
-        return (hAsync(Host, { key: '48511195af19191b832713a828ac0945b06a4898' }, hAsync("div", { key: '4a51469ffe227db5c361734fc3122a98f7e0fbcc', class: "container" }, hAsync("slot", { key: '6ab367e83612df056e40392bced22c5f80457486' }))));
+        return (hAsync(Host, { key: 'e80a4427592546a5c5155d23108840ec2e34ecd3' }, hAsync("div", { key: 'cf63d295988d17bf976bfddd13c13f8987b2ca1a', class: "container" }, hAsync("slot", { key: '0eaa6a54b56fa3f43adde3620178ccd25447507e' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -25184,12 +25373,12 @@ class LayoutGrid {
         this.columns = 12;
     }
     render() {
-        return (hAsync(Host, { key: '040fa69fa09d20fdbfc6ae40f85cdf70f74b3eee', class: {
+        return (hAsync(Host, { key: '7ca75d3fb578d30d3b8e3d5d4455123ee7344456', class: {
                 'no-margin': this.noMargin,
             }, style: {
                 '--ix-layout-grid-columns': `${this.columns}`,
                 '--ix-layout-grid-gutter': `${this.gap}px`,
-            } }, hAsync("slot", { key: '50cae64ab0cc69aa2ffe55bfce8f069ea22b240b' })));
+            } }, hAsync("slot", { key: '566e2bf1294f8780e4aedb8e2874bd2f216d3712' })));
     }
     static get style() { return layoutGridCss; }
     static get cmpMeta() { return {
@@ -25223,13 +25412,13 @@ class LinkButton {
         this.target = '_self';
     }
     render() {
-        return (hAsync(Host, { key: '83b41ef8a3bef06a033a9a20c30a4ae1e83066e8' }, hAsync("a", { key: '955dc6e492eec929e592947ec18009d744d1f973', title: this.url, tabindex: "0", class: {
+        return (hAsync(Host, { key: '4d24f0a12d133ab58cb2a873536e68db17df2d5a' }, hAsync("a", { key: '0585700d404cf2d49597085527608c6db40ea97e', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, hAsync("ix-icon", { key: 'b0589b7cedf757244950b1595916f8c838ae603d', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), hAsync("div", { key: 'c3ceb43628b0a48d60bbcd6bb54a4ad493ae3de8', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, hAsync("ix-icon", { key: '68d6611903eec80a879d4bfbb90a71fcdd05d5a0', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), hAsync("div", { key: '4e4b66cb6cd469f56d9029a0ddbf5a44ea838128', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, hAsync("slot", { key: '2bd6071e8aad57fb13226d8452b0649367c6b750' })))));
+            } }, hAsync("slot", { key: 'eb961e003cfa95ceaf0033a19d1e12ff92b7f78f' })))));
     }
     static get style() { return linkButtonCss; }
     static get cmpMeta() { return {
@@ -25291,6 +25480,7 @@ class Menu {
         this.applicationDescription = '';
         /**
          * Accessibility i18n label for the burger menu of the sidebar
+         * @deprecated Since 4.2.0. Will be removed in 5.0.0. The expand button is now hidden from screen readers with aria-hidden="true".
          */
         this.i18nExpandSidebar = 'Expand sidebar';
         /**
@@ -25330,6 +25520,7 @@ class Menu {
         this.breakpoint = 'lg';
         this.itemsScrollShadowTop = false;
         this.itemsScrollShadowBottom = false;
+        this.isDarkMode = false;
         this.isTransitionDisabled = false;
         // FBC IAM workaround #488
         this.isVisible = (elm) => {
@@ -25338,6 +25529,12 @@ class Menu {
                 ((_b = (_a = elm.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.style.display) !== 'none');
         };
     }
+    expandChanged(newExpand, oldExpand) {
+        if (newExpand === oldExpand) {
+            return;
+        }
+        this.toggleMenu(newExpand);
+    }
     pinnedChange(newPinned) {
         this.setPinned(this.pinned);
         if (newPinned) {
@@ -25425,6 +25622,10 @@ class Menu {
         menuController.register(this.hostElement);
         applicationLayoutService.onChange.on((breakpoint) => this.onBreakpointChange(breakpoint));
         this.onBreakpointChange(applicationLayoutService.breakpoint, true);
+        this.updateThemeState();
+        this.themeDisposer = themeSwitcher.schemaChanged.on(() => {
+            this.updateThemeState();
+        });
     }
     componentDidRender() {
         if (!this.about && this.aboutNewsPopover) {
@@ -25432,6 +25633,14 @@ class Menu {
         }
         this.appendFragments();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.themeDisposer) === null || _a === void 0 ? void 0 : _a.dispose();
+    }
+    updateThemeState() {
+        const currentTheme = themeSwitcher.getCurrentTheme();
+        this.isDarkMode = currentTheme.includes(themeSwitcher.suffixDark);
+    }
     setPinned(pinned) {
         this.showPinned = pinned;
         menuController.setIsPinned(pinned);
@@ -25682,47 +25891,55 @@ class Menu {
     }
     render() {
         var _a, _b;
-        return (hAsync(Host, { key: 'b36f27c9c7b9342fd8f984dd5d00ad73d735b2ff', class: {
+        let overlayLabel;
+        if (this.showSettings) {
+            overlayLabel = this.i18nSettings;
+        }
+        else if (this.showAbout) {
+            overlayLabel = this.i18nLegal;
+        }
+        return (hAsync(Host, { key: '7908b3049bc1a6888ec28b1adf487c445a29bd70', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, hAsync("nav", { key: '4f4b1378ddfe2cb243d0a5305679c98084490e8b', class: {
+            }, slot: "menu" }, hAsync("nav", { key: 'f4cf27af13639bcf878b735a9e6b736fb64191ee', "aria-label": this.applicationName, class: {
                 menu: true,
                 expanded: this.expand,
-            } }, hAsync("div", { key: '70d117cfe299bdb3f3b0ed9639d5ee83bfc33cf1', class: "menu-buttons" }, this.breakpoint !== 'sm' && (hAsync("ix-menu-expand-icon", { key: 'fa76b253e6cf1ae30e3257cc3c186dc23215b516', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
-            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (hAsync("ix-icon-button", { key: '927aede1c7824c6c21eed072e7dba6db8d5f8df5', onClick: () => {
+            } }, hAsync("div", { key: '0f62e241cf573b88b434be91c74aca94433f4193', class: "menu-buttons" }, this.breakpoint !== 'sm' && (hAsync("ix-menu-expand-icon", { key: '035c270e6409bac89219b3e8d13f285f280dea82', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
+            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (hAsync("ix-icon-button", { key: '15afec8a3ae367edf2a15aa17204c204fca4e557', onClick: () => {
                 this.showAppSwitch();
-            }, icon: iconApps, variant: "subtle-tertiary" }))), hAsync("div", { key: '795f32dc8f94404a75c9a0d0cfb7c8e8d429d8d2', id: "menu-tabs", style: {
+            }, icon: iconApps, variant: "subtle-tertiary" }))), hAsync("div", { key: '78f667ac88c651abe7a0c035b23e01c77a5b3597', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, hAsync("div", { key: '4d609cfd70659c0adfcb1cfca0485edff3b05d08', class: "tabs-shadow-container" }, hAsync("div", { key: 'b8b81a13d75c56f9a460f0db382acef185b1c11c', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, hAsync("div", { key: 'bb0ce756d9b06f762425afaa7d4fb117afc14cdc', class: "tabs-shadow-container" }, hAsync("div", { key: 'c587ef53745dc5bd34898f1ea448f1822e3e5d61', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), hAsync("div", { key: '1095f30e782665f9d66d7f2619eb3a68806ccf54', class: {
+            } }), hAsync("div", { key: 'bd01c9f1d6d55df8d2a99adc8265bcb2123394ae', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, hAsync("div", { key: '55ec2b8a3b535c8ed7dfc4c80ecdeedf9add4d34', class: "menu-avatar" }, hAsync("slot", { key: 'a893aea63d56c2b4e7fd5997904704639257f65b', name: "ix-menu-avatar" })), hAsync("slot", { key: '85505735fc0f7c9075340389597565bd99e64801', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (hAsync("slot", null)) : null), hAsync("div", { key: '7a0013bb20500931471b1ee1273615d0ae740d11', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, hAsync("div", { key: '1eb6c9ff52ad626d4e662f1f94edfcc98e949044', class: "menu-avatar" }, hAsync("slot", { key: '012eb4520d780e653b3b96d1d0278c839ce039b6', name: "ix-menu-avatar" })), hAsync("slot", { key: '96b4d1055376c0a1cd462d1c2d8de82bc2d4b7bd', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (hAsync("slot", null)) : null), hAsync("div", { key: '35f65a80ee3324ddac4d7c44e7d341aee870bfa1', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), hAsync("div", { key: '92a48e39684e2bbbb6078dcafc5c8b7103a693de', class: "bottom-tab-divider" }), this.settings ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), hAsync("div", { key: '8efbab0c1961bc53e850d5a1da667866f8716462', class: "bottom-tab-divider" }), this.settings ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
-            }, icon: iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, this.enableToggleTheme ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: iconLightDark, label: this.i18nToggleTheme })) : null, hAsync("div", { key: '2a5bad2eb493be6ee59fc101fab300bdb154feb0', onClick: (e) => this.onMenuItemsClick(e) }, hAsync("slot", { key: '5a1e19962a88ceeb1f82ac385dba49d0c311e3d7', name: "bottom" })), hAsync("div", { key: '65802881403efad9dbae84ef9bf5d441e3915150', id: "popover-area" }), this.enableMapExpand || ((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.sidebar) ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null, this.about ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, icon: iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings, "aria-expanded": this.showSettings.toString(), "aria-controls": "menu-overlay" })) : null, this.enableToggleTheme ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: iconLightDark, label: this.i18nToggleTheme, role: "switch", "aria-checked": this.isDarkMode.toString() })) : null, hAsync("div", { key: '0380616a60db7d5984af88c5a3edb1199184a27d', onClick: (e) => this.onMenuItemsClick(e) }, hAsync("slot", { key: 'ee7506da4bdf9296e8477dea89d2e8f3dbc5d6b9', name: "bottom" })), hAsync("div", { key: '5113ea04bed4ecc0a6a4a6bd1552d5ca8a1c5302', id: "popover-area" }), this.enableMapExpand || ((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.sidebar) ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null, this.about ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null), hAsync("div", { key: 'e6dd7e53abbd5e4ce11cc5d2be882dd52e335275', class: {
+            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal, "aria-expanded": this.showAbout.toString(), "aria-controls": "menu-overlay" })) : null), hAsync("section", { key: 'fa56100500bd7cbd4c6889c5541803ce9561f7d2', id: "menu-overlay", "aria-label": overlayLabel, class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, hAsync("div", { key: 'd8a49e3983b5d060190f1440b4aacd44243894a8', class: 'menu-overlay-container' }, this.showSettings ? hAsync("slot", { name: "ix-menu-settings" }) : null), hAsync("div", { key: '92ddf6c21d3d08c5d1961200ac598a6135c9ef89', class: 'menu-overlay-container' }, this.showAbout ? hAsync("slot", { name: "ix-menu-about" }) : null))));
+            } }, hAsync("div", { key: 'c716d09e64b870e38b171e9d7ab731409b14689a', class: 'menu-overlay-container' }, this.showSettings ? hAsync("slot", { name: "ix-menu-settings" }) : null), hAsync("div", { key: '08d767b2045d549520f75babeaaba23146cc9463', class: 'menu-overlay-container' }, this.showAbout ? hAsync("slot", { name: "ix-menu-about" }) : null))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
+        "expand": ["expandChanged"],
         "pinned": ["pinnedChange"]
     }; }
     static get style() { return menuCss; }
@@ -25732,80 +25949,34 @@ class Menu {
         "$members$": {
             "showSettings": [1028, "show-settings"],
             "showAbout": [1028, "show-about"],
-            "enableToggleTheme": [4, "enable-toggle-theme"],
-            "enableMapExpand": [4, "enable-map-expand"],
-            "applicationName": [1, "application-name"],
-            "applicationDescription": [1, "application-description"],
-            "i18nExpandSidebar": [1, "i18n-expand-sidebar"],
-            "expand": [1540],
-            "startExpanded": [4, "start-expanded"],
-            "pinned": [4],
-            "i18nLegal": [1, "i18n-legal"],
-            "i18nSettings": [1, "i18n-settings"],
-            "i18nToggleTheme": [1, "i18n-toggle-theme"],
-            "i18nExpand": [1, "i18n-expand"],
-            "i18nCollapse": [1, "i18n-collapse"],
-            "showPinned": [32],
-            "mapExpand": [32],
-            "breakpoint": [32],
-            "itemsScrollShadowTop": [32],
-            "itemsScrollShadowBottom": [32],
-            "applicationLayoutContext": [32],
-            "toggleMapExpand": [64],
-            "toggleMenu": [64],
-            "toggleSettings": [64],
-            "toggleAbout": [64]
-        },
-        "$listeners$": [[9, "resize", "handleOverflowIndicator"], [0, "close", "onOverlayClose"]],
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["expand", "expand"]]
-    }; }
-}
-
-const menuSettingsCss = ".text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .settings-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .settings-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host .settings-tabs{margin-bottom:1.5rem}";
-
-class MenuSettings {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.tabChange = createEvent(this, "tabChange", 7);
-        this.close = createEvent(this, "close", 7);
-        /**
-         * Label of first tab
-         */
-        this.label = 'Settings';
-        /** @internal */
-        this.show = false;
-    }
-    updateTab(newLabel, oldLabel) {
-        if (newLabel !== oldLabel) {
-            syncTabDisplay(this, newLabel);
-        }
-    }
-    componentWillLoad() {
-        initialize(this);
-    }
-    componentDidLoad() {
-    }
-    render() {
-        return hAsync(MenuTabs, { key: 'bff35655d1e57ea807a1d8a6bd0879f8804e3ef4', context: this });
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "activeTabLabel": ["updateTab"]
-    }; }
-    static get style() { return menuSettingsCss; }
-    static get cmpMeta() { return {
-        "$flags$": 265,
-        "$tagName$": "ix-menu-settings",
-        "$members$": {
-            "activeTabLabel": [1025, "active-tab-label"],
-            "label": [1],
-            "show": [4],
-            "items": [32]
+            "enableToggleTheme": [4, "enable-toggle-theme"],
+            "enableMapExpand": [4, "enable-map-expand"],
+            "applicationName": [1, "application-name"],
+            "applicationDescription": [1, "application-description"],
+            "i18nExpandSidebar": [1, "i18n-expand-sidebar"],
+            "expand": [1540],
+            "startExpanded": [4, "start-expanded"],
+            "pinned": [4],
+            "i18nLegal": [1, "i18n-legal"],
+            "i18nSettings": [1, "i18n-settings"],
+            "i18nToggleTheme": [1, "i18n-toggle-theme"],
+            "i18nExpand": [1, "i18n-expand"],
+            "i18nCollapse": [1, "i18n-collapse"],
+            "showPinned": [32],
+            "mapExpand": [32],
+            "breakpoint": [32],
+            "itemsScrollShadowTop": [32],
+            "itemsScrollShadowBottom": [32],
+            "applicationLayoutContext": [32],
+            "isDarkMode": [32],
+            "toggleMapExpand": [64],
+            "toggleMenu": [64],
+            "toggleSettings": [64],
+            "toggleAbout": [64]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[9, "resize", "handleOverflowIndicator"], [0, "close", "onOverlayClose"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["expand", "expand"]]
     }; }
 }
 
@@ -25858,6 +26029,58 @@ function initialize(context) {
     });
 }
 
+const menuSettingsCss = ".text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .settings-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .settings-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host .settings-tabs{margin-bottom:1.5rem}";
+
+class MenuSettings {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tabChange = createEvent(this, "tabChange", 7);
+        this.close = createEvent(this, "close", 7);
+        /**
+         * Label of first tab
+         */
+        this.label = 'Settings';
+        /**
+         * Aria label for close button
+         */
+        this.ariaLabelCloseButton = 'Close Settings';
+        /** @internal */
+        this.show = false;
+    }
+    updateTab(newLabel, oldLabel) {
+        if (newLabel !== oldLabel) {
+            syncTabDisplay(this, newLabel);
+        }
+    }
+    componentWillLoad() {
+        initialize(this);
+    }
+    componentDidLoad() {
+    }
+    render() {
+        return hAsync(MenuTabs, { key: 'eefc53f1fa300794513f41b1bc80ac9fd00e295e', context: this });
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "activeTabLabel": ["updateTab"]
+    }; }
+    static get style() { return menuSettingsCss; }
+    static get cmpMeta() { return {
+        "$flags$": 265,
+        "$tagName$": "ix-menu-settings",
+        "$members$": {
+            "activeTabLabel": [1025, "active-tab-label"],
+            "label": [1],
+            "ariaLabelCloseButton": [1, "aria-label-close-button"],
+            "show": [4],
+            "items": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -25879,7 +26102,7 @@ const MenuTabs = ({ context }) => {
     const selectedIndex = context.items.findIndex((item) => item.label === context.activeTabLabel);
     return (hAsync(Host, { slot: context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about', class: {
             show: context.show,
-        } }, hAsync("div", { class: context instanceof MenuSettings ? 'settings-header' : 'about-header' }, hAsync("h2", { class: "text-h2" }, context.label), hAsync("ix-icon-button", { variant: "tertiary", size: "24", icon: iconClose, iconColor: "color-soft-text", onClick: (e) => context.close.emit({
+        } }, hAsync("div", { class: context instanceof MenuSettings ? 'settings-header' : 'about-header' }, hAsync("h2", { class: "text-h2" }, context.label), hAsync("ix-icon-button", { variant: "tertiary", size: "24", icon: iconClose, iconColor: "color-soft-text", "aria-label": context.ariaLabelCloseButton, onClick: (e) => context.close.emit({
             name: context instanceof MenuSettings
                 ? 'ix-menu-settings'
                 : 'ix-menu-about',
@@ -25898,6 +26121,10 @@ class MenuAbout {
          * Content of the header
          */
         this.label = 'About & legal information';
+        /**
+         * Aria label for close button
+         */
+        this.ariaLabelCloseButton = 'Close About';
         /** @internal */
         this.show = false;
     }
@@ -25912,7 +26139,7 @@ class MenuAbout {
     componentDidLoad() {
     }
     render() {
-        return hAsync(MenuTabs, { key: 'e49c1819db2fcba5b330c776c84e905d6f1aef87', context: this });
+        return hAsync(MenuTabs, { key: 'ca696d609e81a77afbb7210a699c89e52cf2b59f', context: this });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25925,6 +26152,7 @@ class MenuAbout {
         "$members$": {
             "activeTabLabel": [1025, "active-tab-label"],
             "label": [1],
+            "ariaLabelCloseButton": [1, "aria-label-close-button"],
             "show": [4],
             "items": [32]
         },
@@ -25949,7 +26177,7 @@ class MenuAboutItem {
         });
     }
     render() {
-        return (hAsync(Host, { key: 'c150379d52f7dd0744ec480c35909937abef9c90' }, hAsync("slot", { key: '37edb415a550ba73903bd6142162c42fe7be9d34' })));
+        return (hAsync(Host, { key: '2877a9c9386fb74d8c4fcfb72d5f31d8aa9057f1' }, hAsync("slot", { key: 'fc2e89e7a6a427dbbf3e2030949a4db31c34957e' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]
@@ -25986,16 +26214,16 @@ class MenuAboutNews {
         this.expanded = false;
     }
     render() {
-        return (hAsync(Host, { key: '61a51cc04b238505c64285babebaaddf1201a9f7', class: {
+        return (hAsync(Host, { key: '7443d209d383de9e46d8c024c1756ae814c5d764', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, hAsync("div", { key: 'c63c6cab269ef75f01d0396333c5c44ee271d354', class: "banner-container" }, hAsync("ix-icon", { key: '2a3b5ced1c9f9fce0f742a34d9862e115807f6fb', color: "color-inv-contrast-text", name: iconShout, size: "32" }), hAsync("svg", { key: '2433dd408f46a4d0f47e5cf075980b6a2ea2ece7', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, hAsync("polygon", { key: '386186a0847a504ca07052e1a49ee0c9f6314377', points: "0 0 48 0 48 56 24 48 0 56" }))), hAsync("div", { key: 'ec280ef23c279507e186fa0ba0743e64e49d38c8', class: "cui-popover-news-header" }, hAsync("ix-typography", { key: '784c5718192c7641e43004439cedcdc0f6285380', format: "label", bold: true }, this.label)), hAsync("ix-icon-button", { key: '0c5a987a93067b0641ad0d7cd99e747aaa884d40', size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
+            } }, hAsync("div", { key: '034c93b01133fa50d28c0e4ce98becc53fe29158', class: "banner-container" }, hAsync("ix-icon", { key: '69df7443eba7107db4d4f20d2a628159a7ed8660', color: "color-inv-contrast-text", name: iconShout, size: "32" }), hAsync("svg", { key: '36cc1e785395307d29813cac4f13b1309ee2d257', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, hAsync("polygon", { key: '35d4a86b62c225dc03329e6e53bdd6180d1a6b8e', points: "0 0 48 0 48 56 24 48 0 56" }))), hAsync("div", { key: 'd5f1d76a2bf661fb865fa7c4857b0f20d6f225dc', class: "cui-popover-news-header" }, hAsync("ix-typography", { key: 'd8ef22907758393fe430cc2a4940dea8ee7372e8', format: "label", bold: true }, this.label)), hAsync("ix-icon-button", { key: '2fb7cf52ee3bf3e475fc5fa6d0aaadec96246acc', size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
                 this.show = false;
                 this.closePopover.emit();
-            } }), hAsync("div", { key: '780df8bab613bad3b80a3528947fdc0bab41187c', class: "slot-container" }, hAsync("slot", { key: '1992c8d99353665ee6b88b4d21c34869284029d6' })), this.aboutItemLabel ? (hAsync("div", { class: "cui-popover-news-footer" }, hAsync("ix-button", { variant: "primary", onClick: (e) => {
+            } }), hAsync("div", { key: '8875b7027424233f78ac46c52cbeccc3d4fb7560', class: "slot-container" }, hAsync("slot", { key: 'b662f3b8c11a9c3ea639ed6b753a4b80ed038bec' })), this.aboutItemLabel ? (hAsync("div", { class: "cui-popover-news-footer" }, hAsync("ix-button", { variant: "primary", onClick: (e) => {
                 this.show = false;
                 this.showMore.emit(e);
-            } }, this.i18nShowMore))) : null, hAsync("div", { key: 'b877e4087ebe56fca5c82a7acada5ba7c7ef8abb', id: "arrow" })));
+            } }, this.i18nShowMore))) : null, hAsync("div", { key: '97cbdaf247a6f83b9361121cbac596dc86e2bb28', id: "arrow" })));
     }
     static get style() { return menuAboutNewsCss; }
     static get cmpMeta() { return {
@@ -26028,11 +26256,19 @@ class MenuAvatar {
          *  Control the visibility of the logout button
          */
         this.hideLogoutButton = false;
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         /**
          * Control the visibility of the dropdown menu
          */
         this.showContextMenu = false;
         this.avatarElementId = 'ix-menu-avatar-id';
+        this.tooltipRef = makeRef();
     }
     onSlotChange() {
         const slot = this.hostElement.shadowRoot.querySelector('slot');
@@ -26043,9 +26279,16 @@ class MenuAvatar {
         this.showContextMenu = elements.length !== 0;
     }
     render() {
-        return (hAsync(Host, { key: '6cff313b74cbbd668ed30dd7c04e060867ae0095', slot: "ix-menu-avatar" }, hAsync("button", { key: 'c387330d89a9d5740f0af21ec4e7d0f077510064', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, hAsync("ix-avatar", { key: '82f6207b4005ad8a799d29ce52a629d805d60b36', image: this.image, initials: this.initials }), hAsync("div", { key: 'c1a6a4e03b3dda5b36a3caa6c7595a32407b9c19', class: "avatar-name" }, hAsync("span", { key: 'a8b413ee5ec9a9f60d26ce695df3d9359831867d', class: "text-default-single", title: this.top }, this.top), hAsync("span", { key: 'b333a5337d49199f9545eb30361fe5166d8a8725', class: "text-default-single", title: this.bottom }, this.bottom))), hAsync("ix-dropdown", { key: '31b4149a67636711972e1f682da62a60f833e9f3', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
+        var _a;
+        const tooltipText = (_a = this.tooltipText) !== null && _a !== void 0 ? _a : this.top;
+        const ariaHidden = tooltipText === this.top;
+        return (hAsync(Host, { key: '63251d35fc15b945de3bae097702c3e0e7377568', slot: "ix-menu-avatar" }, hAsync("button", { key: 'f50dd772c58b7b20e966d0a992f6e2537ebbe5bc', class: "nav-item top-item avatar no-hover", id: this.avatarElementId, tabIndex: 0 }, hAsync("ix-avatar", { key: '1b3ea2ab31cc248e021306b9399b5b2bbad1122f', image: this.image, initials: this.initials }), hAsync("div", { key: '1e8aee8c464ebc41e99d00b6933f6682d1c98019', class: "avatar-name" }, hAsync("span", { key: '3bc559472005be3d21b406fd9ea85fcb9737dcb6', class: "text-default-single" }, this.top), hAsync("span", { key: '023fb55cd5229df9aadec9daf86834e16944a66f', class: "text-default-single" }, this.bottom))), !!tooltipText && (hAsync("ix-tooltip", { key: '8e13fc36570e1152049b636ecabb042e7288c3e8', ref: this.tooltipRef, for: `#${this.avatarElementId}`, placement: 'right', "aria-hidden": a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText)), hAsync("ix-dropdown", { key: '6a7e04c67894981100c3b81eb6ac9c5d9a16194a', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
                 mainAxis: 16,
-            } }, hAsync("slot", { key: 'a17ca070258b8b892c647f4cc2429b21562072c1', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (hAsync("ix-menu-avatar-item", { key: 'cbc2544543237b2874744c0678838b701ec89d4a', label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
+            }, onShowChanged: (event) => {
+                if (event.detail && this.tooltipRef.current) {
+                    this.tooltipRef.current.hideTooltip(0);
+                }
+            }, enableTopLayer: this.enableTopLayer }, hAsync("slot", { key: 'd7444d53d15826d0999476c55bc428a89a6b73fa', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (hAsync("ix-menu-avatar-item", { key: 'f6c1fc16b2b39ef2277ae01485f1b7014e72e568', label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
                 this.logoutClick.emit(e);
             } })))));
     }
@@ -26059,8 +26302,11 @@ class MenuAvatar {
             "bottom": [1],
             "image": [1],
             "initials": [1],
+            "tooltipText": [1, "tooltip-text"],
+            "ariaLabelTooltip": [1, "aria-label-tooltip"],
             "i18nLogout": [1, "i18n-logout"],
             "hideLogoutButton": [4, "hide-logout-button"],
+            "enableTopLayer": [4, "enable-top-layer"],
             "showContextMenu": [32]
         },
         "$listeners$": undefined,
@@ -26082,7 +26328,7 @@ class MenuAvatarItem {
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (hAsync("ix-dropdown-item", { key: '4a25c0768a9afad6b18bf3019c8998cc51fa134a', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (hAsync("ix-dropdown-item", { key: '437aead7832603097e4f814abef0108dcb0ad386', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
     get hostElement() { return getElement(this); }
     static get style() { return menuAvatarItemCss; }
@@ -26275,7 +26521,7 @@ class MenuCategory {
         }
     }
     render() {
-        return (hAsync(Host, { key: '13ac63c3321e33e4781ab642577464fde79c6bf2', class: {
+        return (hAsync(Host, { key: 'edd1e65e5cd1cc96d1da1decfa666654d3926f6d', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -26284,14 +26530,14 @@ class MenuCategory {
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, hAsync("ix-menu-item", { key: '25e8a0a50ea1540e346e830045275e6a0c63327d', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, hAsync("div", { key: '5b0dcefb391bada721218f4d3ba690c1a2de966e', class: "category" }, hAsync("div", { key: 'f65e560cb7a6ab490220b814f9e66bbfd010bc44', class: "category-text" }, this.label), hAsync("ix-icon", { key: '672a4f90f58ad0cdf023d050d4b3f75114a4ee52', name: iconChevronDownSmall, class: {
+            } }, hAsync("ix-menu-item", { key: 'bd7b6f2c2bef925249db2b73ad14e1454a291939', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, hAsync("div", { key: '1bdd93be15ca3e24d491ce54aed4e441617bdbaf', class: "category" }, hAsync("div", { key: '37444ebec527ba83b30675b3c01411770989f77b', class: "category-text" }, this.label), hAsync("ix-icon", { key: '3e3967c7973058113c32f4f90a9343079bfc4d52', name: iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), hAsync("div", { key: 'd7f0f085f33a09d7c57ca18818a90125b3c2e2bf', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            }, "aria-hidden": "true" }))), hAsync("div", { key: '270aa92509cdf90771863199a9483d5039289d94', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            } }, this.showItems ? hAsync("slot", null) : null), hAsync("ix-dropdown", { key: 'e5b6be4ba14c97ef2e85abd01833bed929b1efa4', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? hAsync("slot", null) : null), hAsync("ix-dropdown", { key: 'f81b8c80a0bef8cec723260df27c01ed0299a4d4', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -26304,7 +26550,7 @@ class MenuCategory {
                         e.preventDefault();
                     }
                 }
-            } }, hAsync("ix-dropdown-item", { key: '90e095e2d61e5d359c29c742e4e84457ef47426f', class: 'category-dropdown-header' }, hAsync("ix-typography", { key: '67efee1940b51e0457ccec7f0a271684ea6df881', format: "label", bold: true, textColor: "std" }, this.label)), hAsync("ix-divider", { key: '2ec48cbab9dc6a223fcc636e59b497b1db315369' }), hAsync("slot", { key: 'e32fb89cf4045faae851af8d1ed1c4ab394e1709' }))));
+            } }, hAsync("ix-dropdown-item", { key: '88b93b5ac540e470b659e0fa0e2a788cf9da0b3d', class: 'category-dropdown-header' }, hAsync("ix-typography", { key: '2664b30d7a7aa21de7dd6874a8f8471bcb5f0dee', format: "label", bold: true, textColor: "std" }, this.label)), hAsync("ix-divider", { key: 'af94566fdd4ad843ce75332b8e511201bfad790c' }), hAsync("slot", { key: '735e220778d5ac78309c4133d11a1b8fad67431e' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return menuCategoryCss; }
@@ -26335,18 +26581,21 @@ const menuExpandIconCss = ":host{--ix-button-border-radius-left:var(--theme-btn-
 class MenuExpandIcon {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /** Accessibility label for the menu expand icon (MANDATORY) */
-        this.ixAriaLabel = 'Expand';
         /** Whether the menu expand icon displays the expanded state or not */
         this.expanded = false;
         /** Display as pinned */
         this.pinned = false;
+        /**
+         * Accessibility label for the menu expand icon
+         * @deprecated This prop is no longer used as the component is hidden from screen readers (aria-hidden="true"). Will be removed in 5.0.0
+         */
+        this.ixAriaLabel = 'Expand';
     }
     getSmallScreenIcon() {
-        return (hAsync("button", { class: Object.assign(Object.assign({}, getButtonClasses('subtle-tertiary', true, false, false, false)), { 'menu-expand-button': true }) }, hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, hAsync("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), hAsync("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), hAsync("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))));
+        return (hAsync("button", { tabindex: -1, class: Object.assign(Object.assign({}, getButtonClasses('subtle-tertiary', true, false, false, false)), { 'menu-expand-button': true }) }, hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, hAsync("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), hAsync("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), hAsync("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))));
     }
     getLargeScreenIcon() {
-        return (hAsync("ix-icon-button", { icon: this.expanded ? iconDoubleChevronLeft : iconDoubleChevronRight, variant: "subtle-tertiary" }));
+        return (hAsync("ix-icon-button", { tabindex: -1, icon: this.expanded ? iconDoubleChevronLeft : iconDoubleChevronRight, variant: "subtle-tertiary" }));
     }
     getMenuIcon() {
         if (this.pinned) {
@@ -26361,19 +26610,19 @@ class MenuExpandIcon {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (hAsync(Host, { key: '702baa75b182df885e9488301b2747fb37f96c52', class: {
+        return (hAsync(Host, { key: '7955f6ca27cccacf73147ea3207e5147e03ce6d5', class: {
                 expanded: this.expanded,
-            }, type: "button", "aria-label": this.ixAriaLabel, "aria-pressed": a11yBoolean(this.expanded) }, this.getMenuIcon()));
+            }, "aria-hidden": "true" }, this.getMenuIcon()));
     }
     static get style() { return menuExpandIconCss; }
     static get cmpMeta() { return {
         "$flags$": 265,
         "$tagName$": "ix-menu-expand-icon",
         "$members$": {
-            "ixAriaLabel": [1, "ix-aria-label"],
             "expanded": [516],
             "breakpoint": [513],
-            "pinned": [4]
+            "pinned": [4],
+            "ixAriaLabel": [1, "ix-aria-label"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -26476,27 +26725,25 @@ class MenuItem {
                 slot: 'bottom',
             };
         }
-        const commonAttributes = {
-            class: 'tab',
-            tabIndex: this.disabled ? -1 : 0,
-        };
+        const hostA11y = a11yHostAttributes(this.hostElement);
+        const commonAttributes = Object.assign({ class: 'tab', tabIndex: this.disabled ? -1 : 0 }, hostA11y);
         const menuContent = [
-            this.icon && hAsync("ix-icon", { key: 'cf444eeb0b3478721a77ee1dc52436689e4c0102', class: 'tab-icon', name: this.icon }),
+            this.icon && (hAsync("ix-icon", { key: '3235cdce2773d33e6f1a75b4df395079246fa993', class: 'tab-icon', name: this.icon, "aria-hidden": "true" })),
             this.notifications ? (hAsync("div", { class: "notification" }, hAsync("div", { class: "pill" }, this.notifications))) : null,
-            hAsync("span", { key: '93ac9e24f2c8634f9bfcef42c8a167d219ff764e', id: this.internalItemId, class: "tab-text text-default" }, this.label, hAsync("slot", { key: 'c98d81e6a16ff3304c1c2c489a71cc892fc6e287' })),
+            hAsync("span", { key: '704284ed9ae6b83b2b2d65ebc103e5e8ff766c1b', id: this.internalItemId, class: "tab-text text-default" }, this.label, hAsync("slot", { key: '6b79e39fb7e616088d11bd8b9c57f4406fdd94b6' })),
         ];
-        return (hAsync(Host, Object.assign({ key: '2bed98070395e9df578f968f317a16f214bf5627', class: {
+        return (hAsync(Host, Object.assign({ key: '331694d5c502b1ed77035e591ffa5748777d8a81', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
                 active: this.active,
                 'tab-nested': this.isHostedInsideCategory,
-            } }, extendedAttributes), this.href ? (hAsync("a", Object.assign({}, commonAttributes, { href: this.disabled ? undefined : this.href, target: this.target, rel: this.rel, role: "button", ref: this.buttonRef, onClick: (e) => {
+            }, "aria-disabled": this.disabled ? 'true' : null }, extendedAttributes), this.href ? (hAsync("a", Object.assign({}, commonAttributes, { href: this.disabled ? undefined : this.href, target: this.target, rel: this.rel, role: "button", ref: this.buttonRef, onClick: (e) => {
                 if (this.disabled) {
                     e.preventDefault();
                     e.stopPropagation();
                 }
-            } }), menuContent)) : (hAsync("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), hAsync("ix-tooltip", { key: '691d40c1d8df8ab9111165be8320190a5c893de0', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
+            } }), menuContent)) : (hAsync("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), hAsync("ix-tooltip", { key: 'd282a68bce72435079cbfea5234b227c92027643', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -26544,7 +26791,7 @@ class MenuSettingsItem {
         });
     }
     render() {
-        return (hAsync(Host, { key: '69dac244a2c3b427237e8dceec64fad9c16600e9' }, hAsync("slot", { key: 'ccfc87d1f061f0d4195f943dec3782b655626aae' })));
+        return (hAsync(Host, { key: '93bcd49368f3bcb45ca4405eb1f75d5a0699b784' }, hAsync("slot", { key: '3d2fd58e28f27f3f8355dc915fc78e15fb64bf61' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]
@@ -26562,7 +26809,7 @@ class MenuSettingsItem {
     }; }
 }
 
-const messageBarCss = ":host{margin:0.5rem 0.5rem 0rem 0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .message-container{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}:host .alarm{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .critical{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-critical)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .success{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-success)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .neutral{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-neutral)}:host .primary{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-primary)}:host .message-content{flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:normal;white-space:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ix-icon{margin-top:0.25rem}:host .message-bar-hidden{display:none}";
+const messageBarCss = ":host{margin:0.5rem 0.5rem 0rem 0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .message-container{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}:host .alarm{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .critical{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-critical)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .success{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-success)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .neutral{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-neutral)}:host .primary{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-primary)}:host .message-content{flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:normal;white-space:normal}:host ix-icon{margin-top:0.25rem}:host .message-bar-hidden{display:none}";
 
 class MessageBar {
     constructor(hostRef) {
@@ -26600,7 +26847,7 @@ class MessageBar {
         }
     }
     render() {
-        return (hAsync(Host, { key: '538fcc08ad07fe808f424e067a361f4a56f4c0ec' }, hAsync("div", { key: '4a75052efe1b22c247dcfcd298aabbd1098ff7b6', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, hAsync("ix-icon", { key: 'd348829692e38a1023e044834aefa45516b4d916', color: this.color, name: this.icon }), hAsync("div", { key: '0ac0a509efe1dd246f7732660e4cf16416c8655d', class: "message-content" }, hAsync("slot", { key: '6143bfa9cf39d32d149c2893b7712358337833c9' })), !this.persistent && (hAsync("ix-icon-button", { key: 'b118c91956af0fd00d02cfefdb7da36d46f2d360', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
+        return (hAsync(Host, { key: '77cde4e0a2aa39b0838ccef1fe84dcd85a99f0e1' }, hAsync("div", { key: '319882aba72c886393d8162442a56dc8404ed386', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, hAsync("ix-icon", { key: 'a204e1952605dc54532a3a862c8d00f9c049727d', color: this.color, name: this.icon }), hAsync("div", { key: 'a1870021581d39097b24fae111a0f3418516cc1b', class: "message-content" }, hAsync("slot", { key: '96e9f8283842a5ef183e62b0b49ea879a61f303e' })), !this.persistent && (hAsync("ix-icon-button", { key: 'a136f9c0b1b557c3f789b569bbef64802f70cc26', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }
@@ -26662,7 +26909,7 @@ function waitForElement(selector, doc, timeout = 3000) {
     });
 }
 
-const modalCss = "::backdrop{background:var(--theme-color-lightbox, rgba(0, 0, 0, 0.5490196078))}:focus-visible{outline:none !important}:host{display:none}:host dialog{--ix-dialog-padding:1rem;margin:0;padding:var(--ix-dialog-padding);padding-top:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));padding-bottom:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom));left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:fixed;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{border-radius:0;left:0 !important;top:0 !important;transform:none !important;box-shadow:none;--ix-dialog-full-screen-height:calc(\n    var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n  );width:calc(100% - var(--ix-dialog-padding) * 2);min-width:calc(100% - var(--ix-dialog-padding) * 2);max-width:calc(100% - var(--ix-dialog-padding) * 2);min-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height));max-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height))}:host dialog.modal-size-full-screen::backdrop{background:var(--theme-modal--background)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:3rem}";
+const modalCss = "::backdrop{background:var(--theme-color-lightbox, rgba(0, 0, 0, 0.5490196078))}:focus-visible{outline:none !important}:host{display:none}:host dialog{--ix-dialog-padding:1rem;margin:0;padding:var(--ix-dialog-padding);padding-top:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));padding-bottom:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom));left:50%}:host .modal{display:flex;flex-direction:column;position:fixed;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all;overflow-wrap:break-word}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{border-radius:0;left:0 !important;top:0 !important;transform:none !important;box-shadow:none;--ix-dialog-full-screen-height:calc(\n    var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n  );width:calc(100% - var(--ix-dialog-padding) * 2);min-width:calc(100% - var(--ix-dialog-padding) * 2);max-width:calc(100% - var(--ix-dialog-padding) * 2);min-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height));max-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height))}:host dialog.modal-size-full-screen::backdrop{background:var(--theme-modal--background)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:3rem}";
 
 var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -26765,6 +27012,7 @@ class Modal {
             const dialog = await waitForElement('dialog', this.hostElement.shadowRoot);
             this.modalVisible = true;
             dialog.showModal();
+            this.slideInModal();
         }
         catch (e) {
             console.error('HTMLDialogElement not existing');
@@ -26809,24 +27057,21 @@ class Modal {
             this.dialogClose.emit(reason);
         });
     }
-    componentDidLoad() {
-        this.slideInModal();
-    }
     componentWillLoad() {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (hAsync(Host, { key: '0170729f63356223c39bcd6b0bb7124b2036f2c4', class: {
+        return (hAsync(Host, { key: 'd5bb63f7716950339e3ab3be9cdf6e4bd914e958', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.hideBackdrop,
                 'align-center': this.centered,
-            } }, hAsync("div", { key: '436b9f2efce7279defa936c9ee79fa44d090e388', class: "dialog-backdrop" }, hAsync("dialog", { key: 'e3bc4891433993a5dcbe186011fd91d70277ca3d', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, hAsync("div", { key: 'ce234129ecd33f05b4049a90633dabc590244178', class: "dialog-backdrop" }, hAsync("dialog", { key: '65700de4d4e4e440ed81bdab67e9c54641aac02e', "aria-modal": a11yBoolean(true), "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), onCancel: (e) => {
                 e.preventDefault();
                 this.dismissModal();
-            } }, hAsync("slot", { key: '5a3e86b9c04f8e1564be6026b0352940978f0666' })))));
+            } }, hAsync("slot", { key: '7a4bdf139d88ba4342d2cd6a2867683081c8f9e5' })))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return modalCss; }
@@ -26862,7 +27107,7 @@ class ModalContent {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'b45bdd4b47ca580de9e3419c9c081f8e30b1da09' }, hAsync("slot", { key: 'ad2d19f3f3053ea927d6d45ff54bcfff1e74345d' })));
+        return (hAsync(Host, { key: '60b3a1c2a24a678788c823dde41f743d9bfa5aa7' }, hAsync("slot", { key: 'bba0935551ec0c9078c4ce867827bef053234cc2' })));
     }
     static get style() { return modalContentCss; }
     static get cmpMeta() { return {
@@ -26882,7 +27127,7 @@ class ModalFooter {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '11eb649edd163b25fdeb4b533bf513a861c1d7ec' }, hAsync("slot", { key: '9a2cb92b8df8220ed2307d98ec7a1ce6a6d9196b' })));
+        return (hAsync(Host, { key: '939d74c51190e3dcb1e29cd6d69a5001cdd6eaec' }, hAsync("slot", { key: '2805bc8ca2e78d57e7d961e80093dbe3f5dc8dc1' })));
     }
     static get style() { return modalFooterCss; }
     static get cmpMeta() { return {
@@ -26928,7 +27173,7 @@ class ModalHeader {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (hAsync(Host, { key: '7dd6b1964ed537b20a90f9007afb767414fad240' }, this.icon ? (hAsync("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, hAsync("div", { key: '4c6d8c7716ba99eed36e7b9c741dce4ebb0bb092', class: "modal-title" }, hAsync("ix-typography", { key: '1db5a1e1cd434c67578a8c276b497284e5447f8d', format: "h5" }, hAsync("slot", { key: '920833a9e7d2c8e15dc4bff1b18c6daa8a9ee4b5' }))), !this.hideClose ? (hAsync("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 (hAsync(Host, { key: '05ede7c20a3b5cce70daba159f4b60c711697afb' }, this.icon ? (hAsync("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, hAsync("div", { key: '89e005b586e80c9f9a9642610d398b7511c50dd4', class: "modal-title" }, hAsync("ix-typography", { key: '07728aa2ea936e5d5f10806211b4183c8a9ac171', format: "h5" }, hAsync("slot", { key: '609defb48df9150be0d3d095a34659ad124be826' }))), !this.hideClose ? (hAsync("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -26961,7 +27206,7 @@ class ModalLoading {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '404214a461e55c9ee78aad8dc277dab5be8a9b42' }, hAsync("ix-spinner", { key: '96278c04d8c7798b411f6807e5c7a1ea26b03d45', variant: "primary" }), hAsync("span", { key: 'cad3eec78defa832ffc679f86941ffc301bc5b5c', class: 'loading-text' }, hAsync("slot", { key: '96cf92b74f62260ee97b7bdae73557a2ee5517ec' }))));
+        return (hAsync(Host, { key: 'd323b6a4a1650629e0ac5338c97fd7b08929807f' }, hAsync("ix-spinner", { key: '94eab908aa232f0f022da10da6313cbe07388a3c', variant: "primary" }), hAsync("span", { key: 'a1d7732187718f8775d626e0a0be49fb7578bec6', class: 'loading-text' }, hAsync("slot", { key: 'bdbc66e91cc7f9ada60a3cda2f0347b40237d739' }))));
     }
     static get style() { return modalLoadingCss; }
     static get cmpMeta() { return {
@@ -27232,22 +27477,22 @@ class NumberInput {
     render() {
         var _a;
         const showStepperButtons = this.showStepperButtons && (this.disabled || this.readonly) === false;
-        return (hAsync(Host, { key: '4b541dbe6fe2b32b5158eed8f398de300ea71bb4', class: {
+        return (hAsync(Host, { key: '17c1ce40e1018c0e1dab393a8f43aeb21d018abc', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, hAsync("ix-field-wrapper", { key: '7ef2bb50ba7c9b3b24612752155a2072329e4b61', 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 }, hAsync("div", { key: '7e71d63d2a9ecbb16550925e68f3dc8dd76c3968', class: {
+            } }, hAsync("ix-field-wrapper", { key: 'b666f6c1d8cbb64032ee41a527da32cebd77ea0d', 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 }, hAsync("div", { key: 'f7bac1c0267387467cba5c578317a211907a2e20', class: {
                 'input-wrapper': true,
                 'show-stepper-buttons': !!this.showStepperButtons,
-            } }, hAsync(SlotStart, { key: '8d936c9126f94c42db87b2d95d34ab178eadd31d', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), hAsync(InputElement, { key: 'c56f510ea8a519204d3d36136d4b0a5a17246370', 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), valueChange: this.handleInputChange, updateFormInternalValue: (value) => {
+            } }, hAsync(SlotStart, { key: 'f631fa994ca763a4a082d0b385a51909ae069f4d', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), hAsync(InputElement, { key: '1ee725bff9ec089c6d748eb9e9182f33f07b8900', 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), valueChange: this.handleInputChange, updateFormInternalValue: (value) => {
                 const isScientificNotation = this.isScientificNotation(value.trim());
                 if (!isScientificNotation) {
                     const parsedValue = this.convertNumberStringToFloat(value);
                     this.updateFormInternalValue(parsedValue);
                 }
-            }, onBlur: this.handleBlur, form: (_a = this.formInternals.form) !== null && _a !== void 0 ? _a : undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), hAsync(SlotEnd, { key: '2d7e82c421d51985c9d24c69b6f641279e3e84aa', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, hAsync("div", { key: '5b1e6f03bf456305386537428b23b3fc2706e411', class: {
+            }, onBlur: this.handleBlur, form: (_a = this.formInternals.form) !== null && _a !== void 0 ? _a : undefined, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), hAsync(SlotEnd, { key: 'dae5e8e30107d43826ffee896b27579b9acad56d', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, hAsync("div", { key: '411cb729fcff7d39a60d17b722f68b00766714dd', class: {
                 'number-stepper-container': true,
                 'container-hidden': !showStepperButtons,
-            } }, hAsync("ix-icon-button", { key: '44a5f583fb174c556a063f384174883ec307f9f4', variant: "subtle-tertiary", icon: iconMinus, size: "16", class: "number-stepper-button step-minus", "aria-label": "decrement number", onClick: () => this.handleStepOperation('down') }), hAsync("ix-icon-button", { key: 'c007fe5451c3f124e61214160c7ebc8cc1150b25', variant: "subtle-tertiary", icon: iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => this.handleStepOperation('up') })))))));
+            } }, hAsync("ix-icon-button", { key: 'c410d5feadfc808702aad9b8f0d4566a43c38079', variant: "subtle-tertiary", icon: iconMinus, size: "16", class: "number-stepper-button step-minus", "aria-label": "decrement number", onClick: () => this.handleStepOperation('down') }), hAsync("ix-icon-button", { key: 'fc1da3c2072bf096f42878df84f367ac62f6d520', variant: "subtle-tertiary", icon: iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => this.handleStepOperation('up') })))))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
@@ -27456,7 +27701,7 @@ class Pagination {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'e9b053fdf801e514af1abef2e163a903f7d5f976' }, hAsync("ix-icon-button", { key: 'a880a444f946f7d228a746b8d45d7328bdc26295', disabled: !this.count || this.selectedPage === 0, variant: "subtle-tertiary", icon: iconChevronLeftSmall, onClick: () => this.decrease(), "aria-label": this.ariaLabelChevronLeftIconButton }), this.advanced ? (hAsync("div", { class: "advanced-pagination" }, hAsync("ix-typography", { format: "body" }, this.i18nPage), hAsync("input", { "aria-label": this.ariaLabelPageSelection, class: "ix-form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (event) => {
+        return (hAsync(Host, { key: '87ceeea367a5c45d698729b11e63c95916ea386d' }, hAsync("ix-icon-button", { key: 'ab5dceee67b569df139144b1a3576eddff120482', disabled: !this.count || this.selectedPage === 0, variant: "subtle-tertiary", icon: iconChevronLeftSmall, onClick: () => this.decrease(), "aria-label": this.ariaLabelChevronLeftIconButton }), this.advanced ? (hAsync("div", { class: "advanced-pagination" }, hAsync("ix-typography", { format: "body" }, this.i18nPage), hAsync("input", { "aria-label": this.ariaLabelPageSelection, class: "ix-form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (event) => {
                 const inputElement = event.target;
                 this.handlePageInput(inputElement.value);
             }, onKeyDown: (event) => {
@@ -27470,10 +27715,10 @@ class Pagination {
             }, onBlur: (e) => {
                 const inputElement = e.target;
                 inputElement.value = (this.selectedPage + 1).toString();
-            } }), hAsync("span", { class: "total-count" }, hAsync("ix-typography", { format: "body" }, this.i18nOf, " ", this.count)))) : (hAsync("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), hAsync("ix-icon-button", { key: 'dd75eb48382320194812f9eb4c644b7d37f0c84a', disabled: !this.count || this.selectedPage === this.count - 1, variant: "subtle-tertiary", icon: iconChevronRightSmall, onClick: () => this.increase(), "aria-label": this.ariaLabelChevronRightIconButton }), this.advanced && !this.hideItemCount && (hAsync("span", { key: '018574c07720618970be857f7536fdf9b71e1542', class: "item-count" }, hAsync("ix-typography", { key: '343a05e008f258ab9a56045cac1a8785c9855169', format: "body" }, this.i18nItems), hAsync("ix-select", { key: '2d8a5efe84ea53ea85b9f4c75f1c84800c858846', hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), hAsync("span", { class: "total-count" }, hAsync("ix-typography", { format: "body" }, this.i18nOf, " ", this.count)))) : (hAsync("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), hAsync("ix-icon-button", { key: '9429f00c69a19f6a7ef444511265345b5a821611', disabled: !this.count || this.selectedPage === this.count - 1, variant: "subtle-tertiary", icon: iconChevronRightSmall, onClick: () => this.increase(), "aria-label": this.ariaLabelChevronRightIconButton }), this.advanced && !this.hideItemCount && (hAsync("span", { key: '137d49c4f064096f843767f5db6292895311c7df', class: "item-count" }, hAsync("ix-typography", { key: '5c01577adf0e147a19459ac06933395490471aae', format: "body" }, this.i18nItems), hAsync("ix-select", { key: '60be4defebb8df830bbf9d210e407c19e2e43820', hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
                 const count = Number.parseInt(Array.isArray(e.detail) ? e.detail[0] : e.detail);
                 this.itemCountChanged.emit(count);
-            } }, hAsync("ix-select-item", { key: '9106274e93a00e5cb62f7cd19082f43e2920076b', label: "10", value: "10" }), hAsync("ix-select-item", { key: '452779779ea63e45d408d60b5faed2d30ea6bcc9', label: "15", value: "15" }), hAsync("ix-select-item", { key: '0658cd6473b508ec6c01c83d99bce4bfa8a54940', label: "20", value: "20" }), hAsync("ix-select-item", { key: '316b1e9a882ae3a516f8a3ff3997ab0fe95c20de', label: "40", value: "40" }), hAsync("ix-select-item", { key: 'a5dbea62134178911100a1fb369d258b0ee74b8d', label: "100", value: "100" }))))));
+            } }, hAsync("ix-select-item", { key: '96db76852528700c3869f75f0d65144c54f2bb2e', label: "10", value: "10" }), hAsync("ix-select-item", { key: '02168ff6e69abd6be997c8e9e35f4c08e68fc3e5', label: "15", value: "15" }), hAsync("ix-select-item", { key: 'bb78749e12f32c2fdc87cca1455b7b087108c7e9', label: "20", value: "20" }), hAsync("ix-select-item", { key: '6fe3a35cafc4a2f3a9abc434ff328e0f9dfbb59b', label: "40", value: "40" }), hAsync("ix-select-item", { key: '4ebef54b0980ad0a2336b99702e0e82d92bfcb1c', label: "100", value: "100" }))))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return paginationCss; }
@@ -27948,7 +28193,7 @@ class Pane {
     }
     render() {
         const rotate = !this.expanded && !this.isMobile && this.isLeftRightPane;
-        return (hAsync(Host, { key: 'd4dcd94494a7a1a20cb9ce1613f60b07708a1a6a', class: {
+        return (hAsync(Host, { key: '5655829a1a9d23b744cde83c51912a44c297c0be', class: {
                 'floating-pane': this.floating,
                 'inline-pane': !this.floating,
                 'mobile-overlay': this.expanded && this.isMobile,
@@ -27972,28 +28217,28 @@ class Pane {
                     !this.expanded &&
                     !this.floating,
                 'not-visible': this.hideOnCollapse && !this.expanded,
-            }, "aria-expanded": a11yBoolean(this.expanded) }, hAsync("aside", { key: '16c38b4a2706ee2cc82975e7cc8f48434997d668', id: `pane-${this.composition}`, class: {
+            }, "aria-expanded": a11yBoolean(this.expanded) }, hAsync("aside", { key: 'c354042a5d5c30be1e13602b26be9c59c9d6e293', id: `pane-${this.composition}`, class: {
                 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,
                 'left-right-pane': this.isLeftRightPane && !this.isMobile,
                 'mobile-pane': this.isMobile,
                 expanded: this.expanded,
-            } }, hAsync("div", { key: 'e4f68f0ab4d1c720bd2bbd2c8a3362e8c1166216', id: "title-div", class: {
+            } }, hAsync("div", { key: '7b5115f90b02f1eeb4086e9a39abaf7f3a9f2301', id: "title-div", class: {
                 title: !this.isMobile && !this.hideOnCollapse && !this.showContent,
                 'title-finished': !this.isMobile && !this.hideOnCollapse && this.showContent,
                 'title-expanded': !this.isMobile && !this.hideOnCollapse && this.expanded,
                 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,
                 'title-mobile': this.isMobile,
                 'header-gap': !this.isMobile && !this.hideOnCollapse,
-            } }, hAsync("ix-icon-button", { key: '3d6a8b606b790e4a0401de198dd7f96536cff5a9', class: "title-icon", size: "24", icon: this.expanded
+            } }, hAsync("ix-icon-button", { key: 'b10c65e60762410373d745a4514fe7bc0a774b7c', class: "title-icon", size: "24", icon: this.expanded
                 ? this.isMobile || this.hideOnCollapse
                     ? iconClose
                     : this.expandIcon
                 : this.minimizeIcon, iconColor: this.expanded && (this.isMobile || this.hideOnCollapse)
                 ? 'color-soft-text'
-                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": this.ariaLabelCollapseCloseButton }), hAsync("div", { key: 'e7410bc38e5c387ac6b92d7805cd4b82a4e5517e', class: {
+                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": this.ariaLabelCollapseCloseButton }), hAsync("div", { key: '7b0a88701252662ad99b0f2d133d4ac64a0259dd', class: {
                 'title-text': true,
                 rotate: rotate,
-            } }, this.icon && (hAsync("ix-icon", { key: '0429aadaabf1c6ff85d2858530d134884dde885a', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), hAsync("div", { key: 'a1f91e5bfc947a90423df8706bc97c13c5fe8f5b', class: "title-text-overflow" }, hAsync("ix-typography", { key: 'c7e45df0f33e0ca37fe1ca02ed552c7602e241f4', format: "h4" }, this.heading)), this.expanded && (hAsync("div", { key: '1780fd1205121d168c240ef7f2990318f42cef52', class: "slot-header" }, hAsync("slot", { key: 'ff9c90ed6e1c9fd23850168a0cb6457aeb27663f', name: "header" }))))), hAsync("div", { key: '67ce0be6d20ecbaf426f6d11acf9bdfab14d9945', class: "side-pane-content", hidden: !this.showContent }, hAsync("slot", { key: 'd5ee452fe64264f93ba57300a099abbaa89cfbd5' })))));
+            } }, this.icon && (hAsync("ix-icon", { key: 'd3b0c6002271434c710d3e2bf93fc7c6fb95f466', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), hAsync("div", { key: '971a85390b48c8259bdb5931fe89ebc61f2e14ca', class: "title-text-overflow" }, hAsync("ix-typography", { key: '8e164a15a3176e56d1f43123f9fd4ac216af7abf', format: "h4" }, this.heading)), this.expanded && (hAsync("div", { key: '85e105570a86dc944969aa9036eb5f332c51096d', class: "slot-header" }, hAsync("slot", { key: '84b8c75d01ba8ae5b3a97e4bc6391fb5e3812f94', name: "header" }))))), hAsync("div", { key: '3f6fe81218741df36010b2b0743dae4fba7ee729', class: "side-pane-content", hidden: !this.showContent }, hAsync("slot", { key: '1b2c198261c7ec9f960a1be4773626408029c943' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -28084,6 +28329,7 @@ class Panes {
         this.isMobile = matchBreakpoint('sm');
         applicationLayoutService.onChange.on(() => {
             this.isMobile = matchBreakpoint('sm');
+            this.configurePanes();
         });
     }
     componentDidLoad() {
@@ -28269,7 +28515,7 @@ class Panes {
         return pane ? pane.floating : false;
     }
     render() {
-        return (hAsync(Host, { key: 'f5825e5fd84ca1f96e9eb6d19c528107167b4e16' }, !this.isMobile ? (this.layout == 'full-vertical' ? (hAsync("div", { class: "side-panes-wrapper" }, hAsync("div", { class: {
+        return (hAsync(Host, { key: '9642eb5fb53b9843df4eb4c558cce46fb48d8c6e' }, !this.isMobile ? (this.layout == 'full-vertical' ? (hAsync("div", { class: "side-panes-wrapper" }, hAsync("div", { class: {
                 row: true,
                 'padding-left': this.hasPadding('left'),
                 'padding-right': this.hasPadding('right'),
@@ -28376,13 +28622,13 @@ class Pill {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (hAsync(Host, { key: 'aa669a2d03f9fc237cc40003d5a28718a403b764', style: this.variant === 'custom'
+        return (hAsync(Host, { key: '92cc7c2458f3bbf26a62fb641a6a69c279aca3d4', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': this.pillColor,
                 }
                 : {}, class: {
                 'align-left': this.alignLeft,
-            } }, hAsync("div", { key: '0e15da18791505629957df85918d7752cfa62662', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
+            } }, hAsync("div", { key: '4b6a3abf6c93b8d8705e9e95738b0e2f1b270465', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -28397,9 +28643,9 @@ class Pill {
                 closable: false,
                 icon: !!this.icon,
                 'with-gap': !this.iconOnly,
-            } }, this.icon && (hAsync("ix-icon", { key: '49abe1808017f85a25fb2d8abd24db421f43f762', class: {
+            } }, this.icon && (hAsync("ix-icon", { key: '4739a22536b12b5124fc11a6f72f664539c2b662', class: {
                 'with-icon': true,
-            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon })), hAsync("span", { key: '582ec1baae99962550035f613a8f74d9d8d9f56e', class: "slot-container" }, hAsync("slot", { key: '46c0481383cfbc55dcb60981cb10dd2b460930eb', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
+            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon })), hAsync("span", { key: '90457e143210a0f070b775ba176aa35946e910c6', class: "slot-container" }, hAsync("slot", { key: 'bd7e9da045b7536b65a4c92ec37197bbfda0b478', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
     }
     get hostElement() { return getElement(this); }
     static get style() { return pillCss; }
@@ -28557,17 +28803,17 @@ class ProgressIndicator {
     render() {
         const normalizedValue = ((this.value - this.min) / (this.max - this.min)) * 100;
         const clampedValue = Math.max(0, Math.min(normalizedValue, 100));
-        return (hAsync(Host, { key: '55cecc574b40c14bd8a4ba7a4d1f0e1d8d73f07b', class: {
+        return (hAsync(Host, { key: '2b61ee201b404c74d94b27b1bc8e847525df16f3', class: {
                 linear: this.type === 'linear',
                 circular: this.type === 'circular',
-            }, tabIndex: -1 }, hAsync("div", { key: '3db1f913e4c4793106d7865b52ef4dcb07889188', class: {
+            }, tabIndex: -1 }, hAsync("div", { key: '24dfa287f33f59b789e8903a9a57dc77150446ab', class: {
                 'progress-indicator': true,
                 [this.size]: true,
                 [this.status]: true,
                 ['text-center']: this.textAlignment === 'center',
                 ['text-left']: this.textAlignment === 'left',
                 ['text-right']: this.textAlignment === 'right',
-            } }, this.label && (hAsync("ix-typography", { key: 'd8cd960dcfee8bfc20102d2b071661a186dcc854', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), hAsync("div", { key: 'd149e99776e95f8051cc02e70d16d3c5103d98ba', class: "progress-container" }, this.type === 'linear' ? (hAsync(Fragment, null, hAsync(LinearBar, { value: clampedValue, status: this.status }), hAsync("div", { class: "linear-slot" }, hAsync("slot", null)))) : (hAsync(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, hAsync("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (hAsync("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
+            } }, this.label && (hAsync("ix-typography", { key: 'fc63404e36273a9c29b4b9827ac43db007ffe0da', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), hAsync("div", { key: '5289e307d4488eee7494809b478fdb86077b666c', class: "progress-container" }, this.type === 'linear' ? (hAsync(Fragment, null, hAsync(LinearBar, { value: clampedValue, status: this.status }), hAsync("div", { class: "linear-slot" }, hAsync("slot", null)))) : (hAsync(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, hAsync("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (hAsync("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return progressIndicatorCss; }
@@ -28605,10 +28851,14 @@ class PushCard {
          * Expand the card
          */
         this.expanded = false;
+        /**
+         * If true, disables hover and active styles and changes cursor to default
+         */
+        this.passive = false;
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: 'ce5e4eb49ffe548ae912dfb9df2ff02e570aef15', class: `card-${this.variant}` }, hAsync("ix-card", { key: '09ee07b5244171d3cd2a2eaf99180a71364326e6', variant: this.variant }, hAsync("ix-card-content", { key: '4ca37f7946dfaf600c21fa516a6a79c95c3369f3' }, hAsync("ix-card-title", { key: '14508386f9ad32b641b7404b8d1845f8f215a12f' }, this.icon ? (hAsync("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, hAsync("ix-typography", { key: '004e0f78e304e16b085cba401d4fe6067c579819', format: "display-xxl" }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), hAsync("slot", { key: 'b5207aabd014e0e180eb1248795bccc23c09b850', name: "title-action" })), hAsync("ix-typography", { key: 'e39c0d3762869afd918cf9f8bb75bcbad35798d2', format: "h4" }, this.heading), hAsync("ix-typography", { key: '52c82e776f50a1e848cb163cf974402fc58a5011' }, this.subheading)), hAsync("ix-card-accordion", { key: '28ba4043b6494617eb0a4ea03eca56c198e10766', collapse: !this.expanded, variant: this.variant }, hAsync("slot", { key: 'f2be8b7cd43af05c3af1be4a5642871e3413d6f8' })))));
+        return (hAsync(Host, { key: 'b5d6c4c34598670f4e8ae1228843b9afde2ef241', class: `card-${this.variant}` }, hAsync("ix-card", { key: 'a62c8dfd617a8c141dd6ccf3c95da7877d44f7b7', variant: this.variant, passive: this.passive }, hAsync("ix-card-content", { key: '4367ef2c91bf7b5ee9adef7c42b1a3f801b83bf9' }, hAsync("ix-card-title", { key: 'e17700e10181981d14e90c83f7f7e400a618df6e' }, this.icon ? (hAsync("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, hAsync("ix-typography", { key: 'd10982fa32f721d09a4bb829dbf4ce7980ad1572', format: "display-xxl" }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), hAsync("slot", { key: '2c5ba728f0ed723750fd3daa37c0c849ef791e52', name: "title-action" })), hAsync("ix-typography", { key: 'b74801e57b670bdf5f1bfcfd3404502e118c00a5', format: "h4" }, this.heading), hAsync("ix-typography", { key: '4869e7565d8e301551efae7ca8679bfb1df02d75' }, this.subheading)), hAsync("ix-card-accordion", { key: '5fda212d77b6c8e1664d0c1a855b7b2e6a2ba26a', collapse: !this.expanded, variant: this.variant }, hAsync("slot", { key: '9cfe767d08c2c49811d7d6f8ee1cba049606977b' })))));
     }
     static get style() { return pushCardCss; }
     static get cmpMeta() { return {
@@ -28621,7 +28871,8 @@ class PushCard {
             "heading": [1],
             "subheading": [1],
             "variant": [1],
-            "expanded": [4]
+            "expanded": [4],
+            "passive": [4]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -28744,17 +28995,17 @@ class Radio {
         if (this.disabled) {
             tabIndex = -1;
         }
-        return (hAsync(Host, { key: '0a08dcbeaaf21bb9063ff44dbb9b7fec0bd18b85', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
+        return (hAsync(Host, { key: 'be54688d35e7f4e27210a2ea9be675a4f3a9fcbd', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
                 disabled: this.disabled,
                 checked: this.checked,
             }, onClick: () => {
                 if (this.disabled)
                     return;
                 this.setCheckedState(true);
-            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, hAsync("label", { key: 'ba82e05023a706e366cede669060ec11d2848754' }, hAsync("div", { key: 'c3b75eea221618adc27dec099089dac0f84a91ac', class: "radio-button" }, hAsync("div", { key: 'd5d10cfce1442f641f939aa16a6feb79fc38caf0', "aria-hidden": "true", class: {
+            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, hAsync("label", { key: '25b307478803a9a451ddb5bf799396682bb86dcf' }, hAsync("div", { key: 'd8d5e9e24af3d32f1595308e323432747c5ab537', class: "radio-button" }, hAsync("div", { key: '8ab8a79eaeb1bb388d4e541a2d79e54435f75432', "aria-hidden": "true", class: {
                 ['radio-checkmark']: true,
                 checked: this.checked,
-            } }, hAsync("div", { key: 'fe7c6830a7fb254291fe95d4310b59bd32ed9492', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (hAsync("ix-typography", { key: 'bc5fe1821b5686760eb7fa3959cf30b54cca40ee', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, hAsync("slot", { key: 'a72b3d10cdcbaa398a6f59b9ce1d036f12e4819c' }))))));
+            } }, hAsync("div", { key: '9f4eb01307fa53d912d6ae3a36b337cd9b00da1b', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (hAsync("ix-typography", { key: 'dc769fcfa28d4bf6555078db85d3709a47d1a50b', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, hAsync("slot", { key: '08e71f05c95bfe2e45a1d47740e5ff851098c1ae' }))))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
@@ -28925,10 +29176,10 @@ class RadiobuttonGroup {
         nextRadio.focus();
     }
     render() {
-        return (hAsync(Host, { key: 'db3158ccabcd99d1b5185607b848c424a4c4c970', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, hAsync("ix-field-wrapper", { key: '5668fbc12f4d264869dfe03dc2bbd3d380da6ae1', 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.groupRef }, hAsync("div", { key: 'a5ec59c15eb8353d66bc6f0668dd7148dbd447a6', class: {
+        return (hAsync(Host, { key: '7413f7b6787476e488a32908172af453c5d4766a', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, hAsync("ix-field-wrapper", { key: 'f2c064b320a5dcf018eaf423394b7ab41c1937a0', 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.groupRef }, hAsync("div", { key: '027e3c597249277c357e7c4d9f1fa38b44b33593', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, hAsync("slot", { key: '325b19034d55cc20cd556a24585d05ce32f22bb6' })))));
+            } }, hAsync("slot", { key: '50ad290972cbb2dbcf5a7b7ea559fabc899ee295' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -28975,7 +29226,7 @@ class Row {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'ff07b78a26aaca76105d0cf296807512620aa6e6' }, hAsync("slot", { key: '46cf7e7f85f4a44831b6482df9a9b667519082f0' })));
+        return (hAsync(Host, { key: 'edd5d38945ebc6f0b97cc6cf3ae0a9230f7dc2f2' }, hAsync("slot", { key: 'd2556a5cc69da0d7fc5f0779e8453761d45a1de0' })));
     }
     static get style() { return rowCss; }
     static get cmpMeta() { return {
@@ -29040,7 +29291,7 @@ class Select {
          * Current selected value.
          * This corresponds to the value property of ix-select-items
          */
-        this.value = [];
+        this.value = '';
         /**
          * Show clear button
          */
@@ -29089,6 +29340,13 @@ class Select {
          * Show "all" chip when all items are selected in multiple mode
          */
         this.collapseMultipleSelection = false;
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         this.dropdownShow = false;
         this.selectedLabels = [];
         this.isDropdownEmpty = false;
@@ -29194,7 +29452,7 @@ class Select {
             if (!nestedDropdownItem) {
                 return;
             }
-            requestAnimationFrame(() => {
+            requestAnimationFrameNoNgZone(() => {
                 var _a, _b;
                 (_b = (_a = nestedDropdownItem === null || nestedDropdownItem === void 0 ? void 0 : nestedDropdownItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
             });
@@ -29501,8 +29759,9 @@ class Select {
     clear() {
         this.clearInput();
         this.selectedLabels = [];
-        this.value = [];
-        this.emitValueChange([]);
+        const emptyValue = this.isSingleMode ? '' : [];
+        this.value = emptyValue;
+        this.emitValueChange(emptyValue);
         this.dropdownShow = false;
     }
     onInputBlur(event) {
@@ -29593,9 +29852,9 @@ class Select {
     }
     render() {
         var _a, _b, _c, _d;
-        return (hAsync(Host, { key: '1610cc7dd06025b8dc05cd905eb1fad5574a64f8', "aria-disabled": a11yBoolean(this.disabled), class: {
+        return (hAsync(Host, { key: '16454f9b21b23a17baac6e5eaa957aa453b0e0a2', "aria-disabled": a11yBoolean(this.disabled), class: {
                 disabled: this.disabled,
-            } }, hAsync("ix-field-wrapper", { key: '912ca0f6e59259ea7de5fbb4857357fcf1db8370', 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 }, hAsync("div", { key: '217ad54b9ca7a3e7aa9e60d89482b5fbc5389fc1', class: {
+            } }, hAsync("ix-field-wrapper", { key: '96b609b89bef44bf6c82dc917edba6ecd88e51c2', 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 }, hAsync("div", { key: '4dd833dc65b9f45ac0385591594a7d99b1de28f6', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -29603,11 +29862,11 @@ class Select {
                 this.dropdownAnchorRef(ref);
                 if (!this.editable)
                     this.dropdownWrapperRef(ref);
-            } }, hAsync("div", { key: '58d7051c6e884dc714643dcf974f7424b4581dfb', class: "input-container" }, hAsync("div", { key: 'be6fec6f27345d8033b9b56ca3760c953951b801', class: "chips" }, this.isMultipleMode &&
+            } }, hAsync("div", { key: '65c49fc23c705bd5364e10f39ee87ba462a057a6', class: "input-container" }, hAsync("div", { key: '0079646e32601565ada100451382706439fa64ff', class: "chips" }, this.isMultipleMode &&
             this.items.length !== 0 &&
             (this.shouldDisplayAllChip()
                 ? this.renderAllChip()
-                : (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => this.renderChip(item))), hAsync("div", { key: 'a9b0c66c623856ab4b2c34f136bbef89a4b3377f', class: "trigger" }, hAsync("input", { key: '1920a23f38ce924fae991be2b5c4a760031aae1f', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+                : (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => this.renderChip(item))), hAsync("div", { key: 'fa3c5d8c3ddaa1ed0219c1eb90473bd8752e0c27', class: "trigger" }, hAsync("input", { key: 'c1f859d6205dcef08b82e2756ad596af673fe970', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => {
                 this.inputElement = ref;
@@ -29626,9 +29885,9 @@ class Select {
                 : iconChevronDownSmall, variant: "subtle-tertiary", ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef(ref);
-            }, "aria-label": this.ariaLabelChevronDownIconButton }))))))), hAsync("ix-dropdown", { key: '4fcf2193ed3cc0faea0e5de7acab2835751c5583', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            }, "aria-label": this.ariaLabelChevronDownIconButton }))))))), hAsync("ix-dropdown", { key: '15f75d4cf2d81b0c6aa58d8e662282e7e1c72dc4', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'display-none': this.disabled || this.readonly,
-            }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
+            }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", enableTopLayer: this.enableTopLayer, overwriteDropdownStyle: async () => {
                 var _a, _b;
                 const styleOverwrites = {};
                 const minWidth = (_b = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.select')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
@@ -29642,12 +29901,12 @@ class Select {
                     styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;
                 }
                 return styleOverwrites;
-            } }, hAsync("div", { key: '428a499947d6f345a83d075d1749831d6b1ab348', class: {
+            } }, hAsync("div", { key: '01c0dc6db08b6439b9de3cefa0ac293f4bc04c14', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), hAsync("slot", { key: '9bffa4284f53b45116dfff2f142fd2f4aea2032c', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), hAsync("slot", { key: '153ab49821fcba5e4f4dd82e1fb8e42c433d46a9', onSlotchange: () => {
                 this.updateSelection();
-            } }), hAsync("div", { key: 'a039c9fda5d61358d39ae9cdc08df2fc82b55fa7', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (hAsync("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
+            } }), hAsync("div", { key: '5ea826f1b837b3f6945b796923cbf5f24f52eb0d', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (hAsync("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();
@@ -29694,6 +29953,7 @@ class Select {
             "dropdownWidth": [1, "dropdown-width"],
             "dropdownMaxWidth": [1, "dropdown-max-width"],
             "collapseMultipleSelection": [4, "collapse-multiple-selection"],
+            "enableTopLayer": [4, "enable-top-layer"],
             "dropdownShow": [32],
             "selectedLabels": [32],
             "isDropdownEmpty": [32],
@@ -29802,7 +30062,7 @@ class SelectItem {
         }
     }
     render() {
-        return (hAsync(Host, { key: '1602a154d8a1d9b4ee3d1755aea08df7a719cd37' }, hAsync("ix-dropdown-item", { key: 'd02799ffee6add3546eafe812785b4ba9532ba6b', class: {
+        return (hAsync(Host, { key: 'd471aafd061cccdd058502fb02f16aa79fd7d37b' }, hAsync("ix-dropdown-item", { key: '6e57ba4665445e0ea0222f16177821a6fe53867e', class: {
                 'select-item-checked': this.selected,
             }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
     }
@@ -29829,7 +30089,7 @@ class SelectItem {
     }; }
 }
 
-const sliderCss = ":host{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-slider-track-marker--background);--trace-color:var(--theme-slider-trace--background);--tick-color:var(--theme-slider-track-marker--background);--tick-color--active:var(--theme-slider-trace-marker--background);--track-color:var(--theme-slider-track--background)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}:host input[type=range].trace::before{content:\"\";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}:host input[type=range].trace:not(.hide-trace-reference)::after{content:\"\";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:100px;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host{}:host .ticks{display:flex;position:relative;top:50%;transform:translateY(-50%)}:host .ticks .tick{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}:host .ticks .tick.tick-active{background-color:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host .label-start{margin-left:0.5rem}:host .label-end{margin-right:0.5rem}:host .label-error{margin-left:0.5rem}:host(.error){--trace-color:var(--theme-slider-trace--background--invalid);--tick-color--active:var(--theme-slider-trace-marker--background--invalid)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.error) input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.disabled){pointer-events:none;--track-color:var(--theme-slider-track--background--disabled);--trace-color:var(--theme-slider-trace--background--disabled);--tick-color:var(--theme-slider-track-marker--background--disabled);--tick-color--active:var(--theme-slider-trace-marker--background--disabled)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--disabled)}";
+const sliderCss = ":host{display:flex;flex-direction:column;min-height:2rem;justify-content:center;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-slider-track-marker--background);--trace-color:var(--theme-slider-trace--background);--tick-color:var(--theme-slider-track-marker--background);--tick-color--active:var(--theme-slider-trace-marker--background);--track-color:var(--theme-slider-track--background)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1.5rem;margin:0}:host input[type=range].trace::before{content:\"\";position:absolute;display:block;z-index:-1;width:calc((var(--trace-end) - var(--trace-start)) * 100%);left:calc(var(--trace-start) * 100%);height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%);border-radius:clamp(0rem, (0.01 - var(--trace-start)) * 999rem, 0.125rem) clamp(0rem, (var(--trace-end) - 0.99) * 999rem, 0.125rem) clamp(0rem, (var(--trace-end) - 0.99) * 999rem, 0.125rem) clamp(0rem, (0.01 - var(--trace-start)) * 999rem, 0.125rem)}:host .slider-container{width:100%}:host .slider-container .slider{width:100%}:host .slider-container .slider input[type=range]{width:100%}:host input[type=range].trace:not(.hide-trace-reference)::after{content:\"\";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(100% * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:50%;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:50%;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host{}:host .ticks{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none}:host .ticks circle.tick{--tick-size:6px;--tick-radius:calc(var(--tick-size) / 2);r:var(--tick-radius);fill:var(--tick-color);transform:translate(calc(var(--tick-value) * (100% - var(--thumb-size)) + var(--thumb-size) / 2), 50%)}:host .ticks .tick.tick-at-min{transform:translate(var(--tick-radius), 50%)}:host .ticks .tick.tick-at-max{transform:translate(calc(100% - var(--tick-radius)), 50%)}:host .ticks .tick.tick-active{fill:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:100%;top:50%;transform:translateY(-50%);left:0px;border-radius:2px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host(.error),:host(.invalid){--trace-color:var(--theme-slider-trace--background--invalid);--tick-color--active:var(--theme-slider-trace-marker--background--invalid)}:host(.error) input[type=range]::-webkit-slider-thumb,:host(.invalid) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]::-moz-range-thumb,:host(.invalid) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.error) input[type=range]:hover::-webkit-slider-thumb,:host(.invalid) input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:hover::-moz-range-thumb,:host(.invalid) input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.error) input[type=range]:active::-webkit-slider-thumb,:host(.invalid) input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.error) input[type=range]:active::-moz-range-thumb,:host(.invalid) input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.disabled){pointer-events:none;--track-color:var(--theme-slider-track--background--disabled);--trace-color:var(--theme-slider-trace--background--disabled);--tick-color:var(--theme-slider-track-marker--background--disabled);--tick-color--active:var(--theme-slider-trace-marker--background--disabled)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.warning){--trace-color:var(--theme-color-warning-40);--tick-color--active:var(--theme-color-warning)}:host(.warning) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-warning)}:host(.warning) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-warning)}:host(.info){--trace-color:var(--theme-color-info-40);--tick-color--active:var(--theme-color-info)}:host(.info) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-info)}:host(.info) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-info)}:host(.valid){--trace-color:var(--theme-color-success-40);--tick-color--active:var(--theme-color-success)}:host(.valid) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-success)}:host(.valid) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-success)}";
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -29861,6 +30121,7 @@ function between(min, value, max) {
     }
 }
 /**
+ * @form-ready
  * @slot label-start - Element will be displayed at the start of the slider
  * @slot label-end - Element will be displayed at the end of the slider
  */
@@ -29868,6 +30129,18 @@ class Slider {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChange = createEvent(this, "valueChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.formInternals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.formInternals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.formInternals;
+        }
+        /**
+         * Show helper, info, warning, error and valid text as tooltip
+         * @since 4.3.0
+         */
+        this.showTextAsTooltip = false;
         /**
          * Legal number intervals
          *
@@ -29903,9 +30176,18 @@ class Slider {
         this.rangeMax = 100;
         this.rangeTraceReference = 0;
         this.showTooltip = false;
+        this.isInvalid = false;
+        this.isValid = false;
+        this.isInfo = false;
+        this.isWarning = false;
+        this.touched = false;
+        this.controlRef = makeRef();
         this.thumbRef = makeRef();
         this.tooltipRef = makeRef();
     }
+    get hasLabels() {
+        return !!this.hostElement.querySelector('[slot="label-start"], [slot="label-end"]');
+    }
     get tooltip() {
         return this.tooltipRef.current;
     }
@@ -29924,6 +30206,12 @@ class Slider {
         }
         (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.hideTooltip();
     }
+    onClassField({ isInvalid, isInfo, isValid, isWarning, isInvalidByRequired, }) {
+        this.isInvalid = isInvalid || isInvalidByRequired;
+        this.isInfo = isInfo;
+        this.isValid = isValid;
+        this.isWarning = isWarning;
+    }
     componentWillLoad() {
         this.a11yAttributes = a11yHostAttributes(this.hostElement, [
             'role',
@@ -29932,12 +30220,27 @@ class Slider {
             'aria-valuenow',
         ]);
         this.updateRangeVariables();
+        this.setFormValueIfChanged(this.value);
     }
     updateRangeVariables() {
         this.rangeInput = between(this.min, this.value, this.max);
         this.rangeTraceReference = between(this.min, this.traceReference, this.max);
         this.rangeMin = Math.min(this.min, this.max);
         this.rangeMax = Math.max(this.min, this.max);
+        if (this.value !== undefined) {
+            this.setFormValueIfChanged(this.value);
+        }
+    }
+    updateFormInternalValue(value) {
+        this.setFormValueIfChanged(value);
+        this.valueChange.emit(value);
+    }
+    setFormValueIfChanged(value) {
+        const valueStr = value.toString();
+        if (this.lastFormValue !== valueStr) {
+            this.formInternals.setFormValue(valueStr);
+            this.lastFormValue = valueStr;
+        }
     }
     onInput(event) {
         event.stopPropagation();
@@ -29950,6 +30253,9 @@ class Slider {
                 this.rangeInput = oldValue;
                 this.slider.value = oldValue.toString();
             }
+            else {
+                this.updateFormInternalValue(value);
+            }
         }
     }
     emitInputEvent() {
@@ -29967,7 +30273,16 @@ class Slider {
     onPointerUp() {
         this.showTooltip = false;
     }
+    /** @internal */
+    hasValidValue() {
+        return Promise.resolve(true);
+    }
+    /** @internal */
+    isTouched() {
+        return Promise.resolve(this.touched);
+    }
     render() {
+        var _a;
         const range = this.rangeMax - this.rangeMin;
         let traceReferenceInPercentage = (this.rangeTraceReference - this.rangeMin) / range;
         let valueInPercentage = (this.rangeInput - this.rangeMin) / range;
@@ -29978,42 +30293,46 @@ class Slider {
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (hAsync(Host, { key: '03faa36448299850133ed4e7c1dbfd5f7a28a91b', class: {
+        return (hAsync(Host, { key: 'dcce2da89192816ddc61f9f1950a399ebdf53766', class: {
                 disabled: this.disabled,
                 error: !!this.error,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, hAsync("div", { key: '686f462a50a42a4a29a20d22d3637af74a3799ae', class: "slider" }, hAsync("div", { key: '8ef5374cd9e421bb2265b1c0b0b7f2c1f2ecf6ff', class: "track" }, hAsync("div", { key: '969da1a4f687d3a254c3353fa0f36ee5ce61130a', ref: this.thumbRef, class: "thumb", style: {
-                left: `calc(${valueInPercentage} * 100% - 8px)`,
-            } }), hAsync("div", { key: '7daba2cb0cf28c3d4b130eeebedae72827109cea', class: "ticks" }, this.marker
-            ? this.marker.map((markerValue) => {
-                if (markerValue > this.max || markerValue < this.min) {
-                    return;
-                }
-                let left = (markerValue - this.rangeMin) / range;
-                return (hAsync("div", { class: {
-                        tick: true,
-                        'tick-active': this.isMarkerActive(markerValue) && this.trace,
-                    }, style: {
-                        '--tick-value': `${left}`,
-                    } }));
-            })
-            : null)), hAsync("input", Object.assign({ key: '2bcc70bf378b44230c3dc7223e6f24707a6a3265', id: "slider", 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), style: {
+                invalid: this.isInvalid,
+                info: this.isInfo,
+                valid: this.isValid,
+                warning: this.isWarning,
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, hAsync("ix-field-wrapper", { key: 'a3ce51bbc6f18cfbc99c3ef821016c6421217ffe', 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 }, hAsync("div", { key: '602a467d24592696b8f5ebaf13f1b7d5e3451e38', class: "slider-container" }, hAsync("div", { key: 'b9ded80de026dfc23f6892ef5fab71bcf9444011', class: "slider" }, hAsync("div", { key: '78472ae8734b51390efeac850ffe2400e8fd67be', class: "track" }, hAsync("div", { key: '0183018c9421d77caa857d6e8ff83dce0b7714f1', ref: this.thumbRef, class: "thumb", style: {
+                left: `calc(${valueInPercentage} * (100% - 1rem))`,
+            } }), hAsync("svg", { key: '3a43071be5fb88e7ae8d0f8abd34f7cef203fb54', class: "ticks", xmlns: "http://www.w3.org/2000/svg" }, (_a = this.marker) === null || _a === void 0 ? void 0 : _a.filter((markerValue) => markerValue >= this.min && markerValue <= this.max).map((markerValue) => {
+            const markerPosition = (markerValue - this.rangeMin) / range;
+            return (hAsync("circle", { class: {
+                    tick: true,
+                    'tick-active': this.isMarkerActive(markerValue) && this.trace,
+                    'tick-at-min': markerPosition === 0,
+                    'tick-at-max': markerPosition === 1,
+                }, cx: "0", cy: "0", style: {
+                    '--tick-value': `${markerPosition}`,
+                } }));
+        }))), hAsync("input", Object.assign({ key: '1f1304342e72682bc040994e96297a31a61f4d00', 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: () => {
+                this.showTooltip = false;
+            }, style: {
                 '--value': `${valueInPercentage}`,
                 '--trace-reference': `${traceReferenceInPercentage}`,
                 '--trace-start': `${traceStart}`,
                 '--trace-end': `${traceEnd}`,
             }, class: {
-                trace: this.trace && traceReferenceInPercentage !== valueInPercentage,
+                trace: this.trace &&
+                    traceReferenceInPercentage !== valueInPercentage,
                 'hide-trace-reference': this.trace &&
                     (this.traceReference <= this.min ||
                         this.traceReference >= this.max),
-            }, onFocus: () => {
-                this.showTooltip = true;
-            }, onBlur: () => {
-                this.showTooltip = false;
-            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), hAsync("ix-tooltip", { key: 'c887ce7b3d18a92de4cf359fb9f8706393a82529', ref: this.tooltipRef, class: {
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), hAsync("ix-tooltip", { key: 'e0c3c6b098a2112cbcc27a90a8cdb696148109dc', ref: this.tooltipRef, class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), hAsync("div", { key: '8de8c23aa94fc924842631eb4d312efc5ee7cc6f', class: "label" }, hAsync("div", { key: '402d7e1bd4bdd648e361b88f211d7d80e5c907b3', class: "label-start" }, hAsync("slot", { key: 'f9a3a0ecc744b3ab91dda8d425309ce78c57e1f1', name: "label-start" })), hAsync("div", { key: '188c06d13b00c0124603b6a0513cfa24e5467b62', class: "label-end" }, hAsync("slot", { key: 'cc4e9bd389f10ab7e293a80844012877070b2750', name: "label-end" }))), this.error ? (hAsync("ix-typography", { class: 'label-error', textColor: "alarm" }, this.error)) : null));
+            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && (hAsync("div", { key: '0a04945ac1055fbcd7e4b05b1188071e5e58180b', class: "label" }, hAsync("div", { key: 'e1d1f0963b6e56947afeb9e371c1404b9b0fb819' }, hAsync("slot", { key: '16e408212c6193e840f399343cfe2d3a8e260e30', name: "label-start" })), hAsync("div", { key: '569530a9d3f987a0993ea8f79709b5f2252e0956' }, hAsync("slot", { key: 'aba45e17633571d07a3dc95d46502dd6ebdc0aae', name: "label-end" })))), this.error ? (hAsync("ix-typography", { textColor: "alarm" }, this.error)) : null))));
     }
+    static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
         "showTooltip": ["onShowTooltipChange"],
@@ -30024,9 +30343,16 @@ class Slider {
     }; }
     static get style() { return sliderCss; }
     static get cmpMeta() { return {
-        "$flags$": 265,
+        "$flags$": 329,
         "$tagName$": "ix-slider",
         "$members$": {
+            "helperText": [1, "helper-text"],
+            "label": [1],
+            "invalidText": [1, "invalid-text"],
+            "infoText": [1, "info-text"],
+            "warningText": [1, "warning-text"],
+            "validText": [1, "valid-text"],
+            "showTextAsTooltip": [4, "show-text-as-tooltip"],
             "step": [2],
             "min": [2],
             "max": [2],
@@ -30040,13 +30366,22 @@ class Slider {
             "rangeMin": [32],
             "rangeMax": [32],
             "rangeTraceReference": [32],
-            "showTooltip": [32]
+            "showTooltip": [32],
+            "isInvalid": [32],
+            "isValid": [32],
+            "isInfo": [32],
+            "isWarning": [32],
+            "hasValidValue": [64],
+            "isTouched": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
 }
+__decorate$4([
+    HookValidationLifecycle()
+], Slider.prototype, "onClassField", null);
 __decorate$4([
     OnListener('pointerup', (self) => self.showTooltip)
 ], Slider.prototype, "onPointerUp", null);
@@ -30070,7 +30405,7 @@ class Spinner {
         this.hideTrack = false;
     }
     render() {
-        return (hAsync(Host, { key: '6f99a58994e1eb03a05b6af195b843094ebea59b' }, hAsync("div", { key: '01ff7d8f23eb80440970086c8791471623cfe424', class: {
+        return (hAsync(Host, { key: '8aa6edb9059ebaafe7f052083ca680c2bc5df2cc' }, hAsync("div", { key: 'ef628ecd03a1a6b3cdd36d90fb60676fc03fc90d', class: {
                 primary: this.variant === 'primary',
                 [this.size]: true,
                 'hide-track': this.hideTrack,
@@ -30126,6 +30461,13 @@ class SplitButton {
          * Placement of the dropdown
          */
         this.placement = 'bottom-start';
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         this.toggle = false;
         this.triggerElementRef = makeRef();
     }
@@ -30145,7 +30487,7 @@ class SplitButton {
                 'left-button-border': !hasOutline,
             } });
         const dropdownButtonAttributes = Object.assign(Object.assign({}, baseAttributes), { disabled: this.isDisabledIcon });
-        return (hAsync(Host, { key: '18955e55bbab4f5899f27cf2b38892c60bece302' }, hAsync("div", { key: '8cc32b2686c3e02ee1f2a43d4a5f310cd2930dad', class: { 'btn-group': true, 'middle-gap': !hasOutline } }, this.label ? (hAsync("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }), this.label)) : (hAsync("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }))), hAsync("ix-icon-button", Object.assign({ key: 'ae7a2875314967f3100d1abcef3528a9822b0503' }, dropdownButtonAttributes, { ref: this.triggerElementRef, class: 'anchor', icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), hAsync("ix-dropdown", { key: 'd81abc1f01f55f2bc85740898e7f59173e62e182', closeBehavior: this.closeBehavior, trigger: this.triggerElementRef.waitForCurrent() }, hAsync("slot", { key: '19c2623131a8ab3799e5a9bb75cc356bf500fffd' }))));
+        return (hAsync(Host, { key: '034329433940b847951719d6df094e7e799c9b2b' }, hAsync("div", { key: 'e08144dd52c338d0cb3a271a95442709a4bd10ba', class: { 'btn-group': true, 'middle-gap': !hasOutline } }, this.label ? (hAsync("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }), this.label)) : (hAsync("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e), "aria-label": this.ariaLabelButton }))), hAsync("ix-icon-button", Object.assign({ key: '4b7776b9328af463c873eb524e8808966b61fff1' }, dropdownButtonAttributes, { ref: this.triggerElementRef, class: 'anchor', icon: (_a = this.splitIcon) !== null && _a !== void 0 ? _a : iconContextMenu, "aria-label": this.ariaLabelSplitIconButton }))), hAsync("ix-dropdown", { key: 'fbc53f2d73b27ed465a8dc4ae42357a61a6300c7', closeBehavior: this.closeBehavior, trigger: this.triggerElementRef.waitForCurrent(), enableTopLayer: this.enableTopLayer }, hAsync("slot", { key: 'e776d44c8f78e89bed7f065edd55168563b0f23c' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return splitButtonCss; }
@@ -30164,6 +30506,7 @@ class SplitButton {
             "disableButton": [4, "disable-button"],
             "disableDropdownButton": [4, "disable-dropdown-button"],
             "placement": [1],
+            "enableTopLayer": [4, "enable-top-layer"],
             "toggle": [32]
         },
         "$listeners$": undefined,
@@ -30220,7 +30563,7 @@ class TabItem {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'f703b9ed1db79ae154acd43425ac44993a13e99e', class: this.tabItemClasses({
+        return (hAsync(Host, { key: 'f0e6c03c7624e9d8ae86223da810ca909e89ceb9', class: this.tabItemClasses({
                 selected: this.selected,
                 disabled: this.disabled,
                 small: this.small,
@@ -30237,12 +30580,12 @@ class TabItem {
                 if (clientEvent.defaultPrevented) {
                     event.stopPropagation();
                 }
-            } }, hAsync("div", { key: '5d9f5fa0c5a9c2f057ff8e3e960a5b15499ec84b', class: {
+            } }, hAsync("div", { key: '21b8861c7547865527d9395b1c288b358ca816c3', class: {
                 circle: this.rounded,
                 text: !this.rounded,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, hAsync("slot", { key: 'd0c87e92e0ad1a4664024b7d79900e8bb36a6ba6' })), hAsync("div", { key: '1812905c3f08a70565e1aea166fa372a07344a76', class: {
+            } }, hAsync("slot", { key: '4e268ef6667abfd1e2b4ea85b7a34819a16c188a' })), hAsync("div", { key: '86633194654d3ab97aaa0c37fdf22b9f2ea6dd7c', class: {
                 counter: true,
                 selected: this.selected,
                 hidden: !(this.rounded && this.counter !== undefined),
@@ -30269,32 +30612,20 @@ class TabItem {
     }; }
 }
 
-/*
- * SPDX-FileCopyrightText: 2023 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.
- */
-/**
- * Prevents angular from change detection when requesting an animation frame
- *
- * Credits goes to:
- * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts
- */
-const requestAnimationFrameNoNgZone = (callback) => {
-    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
-        return __zone_symbol__requestAnimationFrame(callback);
-    }
-    if (typeof requestAnimationFrame === 'function') {
-        return requestAnimationFrame(callback);
-    }
-    return setTimeout(callback);
-};
-
 const tabsCss = ":host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .arrow{all:unset;position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-tertiary--color);background-color:var(--theme-btn-tertiary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-tertiary--color--hover);background-color:var(--theme-btn-tertiary--background--hover)}:host .arrow:active{color:var(--theme-btn-tertiary--color--active);background-color:var(--theme-btn-tertiary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";
 
+const TAB_MANAGED_CLASSES = {
+    SELECTED: 'selected',
+    DISABLED: 'disabled',
+    SMALL_TAB: 'small-tab',
+    ICON: 'icon',
+    STRETCHED: 'stretched',
+    BOTTOM: 'bottom',
+    TOP: 'top',
+    CIRCLE: 'circle',
+    HYDRATED: 'hydrated',
+};
+const MANAGED_CLASSES_SET = new Set(Object.values(TAB_MANAGED_CLASSES));
 class Tabs {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -30326,6 +30657,8 @@ class Tabs {
         this.showArrowPrevious = false;
         this.showArrowNext = false;
         this.windowStartSize = window.innerWidth;
+        this.ARROW_WIDTH = 32;
+        this.updateScheduled = false;
         this.clickAction = {
             timeout: null,
             isClick: true,
@@ -30349,6 +30682,10 @@ class Tabs {
         var _a;
         return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.items-content');
     }
+    getTabsContainer() {
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tab-items');
+    }
     initResizeObserver() {
         const parentElement = this.hostElement.parentElement;
         if (!parentElement)
@@ -30358,6 +30695,100 @@ class Tabs {
         });
         this.resizeObserver.observe(parentElement);
     }
+    observeSlotChanges() {
+        var _a;
+        (_a = this.classObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.classObserver = new MutationObserver(() => {
+            this.scheduleTabUpdate();
+        });
+        this.classObserver.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    scheduleTabUpdate() {
+        if (this.updateScheduled)
+            return;
+        this.updateScheduled = true;
+        requestAnimationFrame(() => {
+            this.updateTabAttributes();
+            this.updateScheduled = false;
+        });
+    }
+    setTabAttributes(element, index) {
+        const isSelected = index === this.selected;
+        const isDisabled = element.disabled;
+        if (this.small)
+            element.setAttribute('small', 'true');
+        if (this.rounded)
+            element.setAttribute('rounded', 'true');
+        element.setAttribute('layout', this.layout);
+        element.setAttribute('selected', isSelected.toString());
+        element.setAttribute('placement', this.placement);
+        element.toggleAttribute('disabled', isDisabled);
+        this.applyRequiredClasses(element, isSelected, isDisabled);
+    }
+    applyRequiredClasses(element, isSelected, isDisabled) {
+        const requiredClasses = new Set(this.buildRequiredClasses(isSelected, isDisabled));
+        const { classList } = element;
+        for (const cls of requiredClasses) {
+            classList.add(cls);
+        }
+        for (const managedClass of MANAGED_CLASSES_SET) {
+            if (!requiredClasses.has(managedClass)) {
+                classList.remove(managedClass);
+            }
+        }
+    }
+    buildRequiredClasses(isSelected, isDisabled) {
+        const classConditions = {
+            [TAB_MANAGED_CLASSES.HYDRATED]: true,
+            [TAB_MANAGED_CLASSES.SELECTED]: isSelected,
+            [TAB_MANAGED_CLASSES.DISABLED]: isDisabled,
+            [TAB_MANAGED_CLASSES.SMALL_TAB]: this.small,
+            [TAB_MANAGED_CLASSES.STRETCHED]: this.layout === 'stretched',
+            [TAB_MANAGED_CLASSES.BOTTOM]: this.placement === 'bottom',
+            [TAB_MANAGED_CLASSES.TOP]: this.placement === 'top',
+            [TAB_MANAGED_CLASSES.CIRCLE]: this.rounded,
+        };
+        return Object.entries(classConditions)
+            .filter(([, condition]) => condition)
+            .map(([className]) => className);
+    }
+    ensureSelectedIndex() {
+        if (this.totalItems === 0) {
+            console.warn('ix-tabs: No tabs available for selection');
+            this.selected = -1;
+            return;
+        }
+        if (this.selected < this.totalItems) {
+            return;
+        }
+        const originalIndex = this.selected;
+        const previousIndex = originalIndex - 1;
+        if (previousIndex >= 0 && previousIndex < this.totalItems) {
+            this.updateSelected(previousIndex);
+            return;
+        }
+        if (this.totalItems > 0) {
+            this.updateSelected(0);
+        }
+    }
+    updateSelected(index) {
+        this.selected = index;
+        this.selectedChange.emit(index);
+    }
+    updateTabAttributes() {
+        const tabs = this.getTabs();
+        this.totalItems = tabs.length;
+        this.ensureSelectedIndex();
+        for (const [index, element] of tabs.entries()) {
+            this.setTabAttributes(element, index);
+        }
+        this.renderArrows();
+    }
     showArrows() {
         try {
             const tabWrapper = this.getTabsWrapper();
@@ -30416,17 +30847,21 @@ class Tabs {
             this.scrollActionAmount = amount;
     }
     onSelectedChange(newValue) {
-        var _a;
         if (!this.showArrows())
             return;
-        const tabRect = this.getTab(newValue).getBoundingClientRect();
-        const wrapperWidth = (_a = this.getTabsWrapper()) === null || _a === void 0 ? void 0 : _a.clientWidth;
-        const arrowWidth = 32;
-        if (tabRect.left < arrowWidth) {
-            this.move(-tabRect.left + arrowWidth, true);
+        const tab = this.getTab(newValue);
+        const container = this.getTabsContainer();
+        if (!tab || !container)
+            return;
+        const containerRect = container.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        const tabLeftRelative = tabRect.left - containerRect.left;
+        const tabRightRelative = tabLeftRelative + tabRect.width;
+        if (tabLeftRelative < this.ARROW_WIDTH) {
+            this.move(-tabLeftRelative + this.ARROW_WIDTH, true);
         }
-        else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {
-            this.move(wrapperWidth - tabRect.right - arrowWidth, true);
+        else if (tabRightRelative > containerRect.width - this.ARROW_WIDTH) {
+            this.move(containerRect.width - tabRightRelative - this.ARROW_WIDTH, true);
         }
     }
     setSelected(index) {
@@ -30477,24 +30912,10 @@ class Tabs {
         return true;
     }
     componentWillLoad() {
-        const tabs = this.getTabs();
-        tabs.map((element, index) => {
-            if (this.small)
-                element.setAttribute('small', 'true');
-            if (this.rounded)
-                element.setAttribute('rounded', 'true');
-            element.setAttribute('layout', this.layout);
-            element.setAttribute('selected', index === this.selected ? 'true' : 'false');
-            element.setAttribute('placement', this.placement);
-        });
         this.initResizeObserver();
     }
     componentDidRender() {
-        const tabs = this.getTabs();
-        this.totalItems = tabs.length;
-        tabs.map((element, index) => {
-            element.setAttribute('selected', index === this.selected ? 'true' : 'false');
-        });
+        this.updateTabAttributes();
     }
     componentWillRender() {
         this.renderArrows();
@@ -30510,10 +30931,12 @@ class Tabs {
         tabs.forEach((element) => {
             element.addEventListener('mousedown', (event) => this.dragStart(element, event));
         });
+        this.observeSlotChanges();
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.classObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     onTabClick(event) {
         if (event.defaultPrevented) {
@@ -30528,13 +30951,13 @@ class Tabs {
         });
     }
     render() {
-        return (hAsync(Host, { key: 'd7fad8d23dafced6cf713108107c54d02f372b6b' }, this.showArrowPrevious && (hAsync("button", { key: 'dde7a217502a5a157e32bb34327398dba8968d34', class: "arrow", onClick: () => this.move(this.scrollAmount, true), "aria-label": this.ariaLabelChevronLeftIconButton }, hAsync("ix-icon", { key: '08c3d49892d6955a7877bac4968fac25fe8c9742', name: iconChevronLeftSmall }))), hAsync("div", { key: 'deb8492643ab4b49cb7848c9229805d26b0a4c99', class: {
+        return (hAsync(Host, { key: 'db27e336ea0432630306faa2e51f2799f1340d2c' }, this.showArrowPrevious && (hAsync("button", { key: 'c9edd1bab0a829dd853a8dc227b59f068ea8b24a', class: "arrow", onClick: () => this.move(this.scrollAmount, true), "aria-label": this.ariaLabelChevronLeftIconButton }, hAsync("ix-icon", { key: '6271e2d4ccbc8d94793b0226c7117c8f1a24561a', name: iconChevronLeftSmall }))), hAsync("div", { key: 'd1ff277b75c488f25821296fc5a7320f822f1bbd', class: {
                 'tab-items': true,
                 'overflow-shadow': true,
                 'shadow-left': this.showArrowPrevious,
                 'shadow-right': this.showArrowNext,
                 'shadow-both': this.showArrowNext && this.showArrowPrevious,
-            } }, hAsync("div", { key: '8b888d4ac1c0e957155028d8508e0cb5862c5cb4', class: "items-content" }, hAsync("slot", { key: 'fd39c749b7aaeaec5c65ee72b0c466dbf7d8fa7b' }))), this.showArrowNext && (hAsync("button", { key: '028b079e241b9fc3af1cba531ae2c055f1c47d32', class: "arrow right", onClick: () => this.move(-this.scrollAmount, true), "aria-label": this.ariaLabelChevronRightIconButton }, hAsync("ix-icon", { key: '8047e16eadc4ec22f44d70004fe9a663f74c4e01', name: iconChevronRightSmall })))));
+            } }, hAsync("div", { key: '9f929a8ba8f76c0efe8604218df1fe207eeff9ff', class: "items-content" }, hAsync("slot", { key: 'a906661489fdee6484c871c7c7c46f0f1c5153fe' }))), this.showArrowNext && (hAsync("button", { key: '632c5d16531fe4071368a94cdef569e43fd2ec71', class: "arrow right", onClick: () => this.move(-this.scrollAmount, true), "aria-label": this.ariaLabelChevronRightIconButton }, hAsync("ix-icon", { key: '7105649d79c2a5a6d2c8fd3e6e9a0db540a61767', name: iconChevronRightSmall })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -30713,10 +31136,10 @@ class Textarea {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: '50700f0fe24415eff151875bc3dc2a5d53a8f879', class: {
+        return (hAsync(Host, { key: '4e5c8e104036fb7a55da0210ab327cd1ca44862c', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, hAsync("ix-field-wrapper", { key: '9a59b1c2632f975c3a754978c616bb80fc419fc3', 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.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (hAsync("ix-typography", { key: '931e49d6a0fd853745f3f46b88f25b087b2038af', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)), hAsync("div", { key: 'ef476a8a1bb52f9b21d93bd1b4d46b6b91a40872', class: "input-wrapper" }, hAsync(TextareaElement, { key: 'b2b7006983d16c7c99f2229097aa3e45ecee5c15', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.isManuallyResized ? this.manualHeight : this.textareaHeight, textareaWidth: this.isManuallyResized ? this.manualWidth : this.textareaWidth, resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+            } }, hAsync("ix-field-wrapper", { key: 'a3d59378750143fb14113fd6ff2242ffe95b984e', 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.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (hAsync("ix-typography", { key: '0873835aed0114e2bfba3817737aba8542db9144', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)), hAsync("div", { key: 'd36582402197576c09cc2241e794b7a5dbac6d3a', class: "input-wrapper" }, hAsync(TextareaElement, { key: 'fb15b644f1d3d44224156666de0c13a3c4b5b5fe', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.isManuallyResized ? this.manualHeight : this.textareaHeight, textareaWidth: this.isManuallyResized ? this.manualWidth : this.textareaWidth, resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
                 onInputBlur(this, this.textAreaRef.current);
                 this.touched = true;
             } })))));
@@ -30792,17 +31215,17 @@ class Tile {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (hAsync(Host, { key: 'f5c50da791dcbdfeb884d33071b6d557360c1a60', class: {
+        return (hAsync(Host, { key: 'e1166a8b4e348942b7ed4258f88f8be64de05933', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, hAsync("div", { key: '651e393dbd8f7f7cd55373c3bdadc195dfc88cbd', class: {
+            } }, hAsync("div", { key: 'a6bd9158342ed546d51c55685afe3d75c2bf31b8', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, hAsync("slot", { key: '1b94a241077664e5bcb535321f816b3b3faa9fad', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), hAsync("div", { key: 'd2ce3123c9ffa767e07edf25248567ee9406fc95', class: "tile-subheader" }, hAsync("slot", { key: '025ac544a3750fbfb145d1350e7091e969c2e369', name: "subheader" })), hAsync("div", { key: '6ce8df1e1b426df28b42f490db11dc1d951715e6', class: "tile-content" }, hAsync("slot", { key: '7bb66b49df63f613c3b7be8ff0da64bc16dde6b9' })), hAsync("div", { key: '55f6e978190c3c8581310559a7a46ec6c4cc0e2f', class: {
+            } }, hAsync("slot", { key: 'c24c054f14e378dc126472b4086b4be4a245cbac', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), hAsync("div", { key: '975744cdd6f42661636fc382a2f2e3c256ccdc9f', class: "tile-subheader" }, hAsync("slot", { key: 'a867a5e2e3cb8958c819d5d936bf955cb51e808b', name: "subheader" })), hAsync("div", { key: '8ab40a481b778384e6773a6318545e1d0001e669', class: "tile-content" }, hAsync("slot", { key: 'c013dd68db8ce80c3b4cfac26acf9c690fcb2439' })), hAsync("div", { key: '00b012d9f4bce4b623fc30b1f750f4319f4144f9', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, hAsync("slot", { key: 'd63334865e6a32a6bb082939b44f3bf0b041b93a', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, hAsync("slot", { key: 'fc565c7344dadeb70cf0002392a0ee98774843df', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return tileCss; }
@@ -30939,6 +31362,13 @@ class TimeInput {
          * Text alignment within the time input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
          */
         this.textAlignment = 'start';
+        /**
+         * Enable Popover API rendering for dropdown.
+         *
+         * @default false
+         * @since 4.3.0
+         */
+        this.enableTopLayer = false;
         this.show = false;
         this.time = null;
         this.isInputInvalid = false;
@@ -31101,12 +31531,12 @@ class TimeInput {
     render() {
         var _a;
         const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorTimeUnparsable);
-        return (hAsync(Host, { key: 'aff9b793fae69ba2eb713ae3b1bd2222b548fb25', class: {
+        return (hAsync(Host, { key: '5131bce36642b3df749856adcf65c79f29551c64', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, hAsync("ix-field-wrapper", { key: '5e927fa4c2eeb94dba26b1f4ad1879a6a80ed823', 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()), hAsync("ix-dropdown", { key: '0b48b3c8574b0aafe42db74c990f1d269037bd82', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+            } }, hAsync("ix-field-wrapper", { key: 'a224de3bd0aef20d3fccd247ad1248b2a857fd09', 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()), hAsync("ix-dropdown", { key: '375e25d0dbf2fc831f8f402b6ffb38783cdef064', "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;
-            } }, hAsync("ix-time-picker", { key: 'b3b5536c702fc45c9fc5f323282149c2c2ccb542', ref: this.timePickerRef, format: this.format, time: (_a = this.time) !== null && _a !== void 0 ? _a : '', 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) => {
+            } }, hAsync("ix-time-picker", { key: 'f1bd14bf9b6bfb7ffea19f781831b6479fb771d7', ref: this.timePickerRef, format: this.format, time: (_a = this.time) !== null && _a !== void 0 ? _a : '', 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);
                 this.show = false;
             } }))));
@@ -31150,6 +31580,7 @@ class TimeInput {
             "suppressSubmitOnEnter": [516, "suppress-submit-on-enter"],
             "hideHeader": [4, "hide-header"],
             "textAlignment": [1, "text-alignment"],
+            "enableTopLayer": [4, "enable-top-layer"],
             "show": [32],
             "time": [32],
             "isInputInvalid": [32],
@@ -31802,7 +32233,7 @@ class TimePicker {
         return '-1';
     }
     render() {
-        return (hAsync(Host, { key: 'da95d86956db27851713b28d3727ee9d8e33f785' }, hAsync("ix-date-time-card", { key: '5a8a88d641f859eaa2c1e1e2f7b699abd56f7f74', embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: !this.dateTimePickerAppearance, hideHeader: this.hideHeader }, hAsync("div", { key: '85639253213bee998504da73ea4de0421cf146c3', class: "header", slot: "header" }, hAsync("ix-typography", { key: '0a21cf47dd51eaf17c44271dbe4d63d909523055', format: "body" }, this.i18nHeader)), hAsync("div", { key: '9d716194b4a37662e298e8d59c54142e78b9a6a0', class: "clock" }, this.timePickerDescriptors.map((descriptor, index) => (hAsync("div", { class: "flex" }, hAsync("div", { class: { columns: true, hidden: descriptor.hidden } }, hAsync("div", { class: "column-header", title: descriptor.header }, descriptor.header), hAsync("div", { "data-element-list-id": descriptor.unit, class: "element-list", tabIndex: -1 }, descriptor.numberArray.map((number) => {
+        return (hAsync(Host, { key: 'fbd91df72649558b205ea0e337e8a29b6f9256ea' }, hAsync("ix-date-time-card", { key: 'a5449eff4179a9df0e1cf8bf72435f848f9360ff', embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: !this.dateTimePickerAppearance, hideHeader: this.hideHeader }, hAsync("div", { key: '401fdc761ac11d1c68112807a790b1f8cbad622d', class: "header", slot: "header" }, hAsync("ix-typography", { key: '0000299d5d33f4858f6cfdcbbc4e615779bb556c', format: "body" }, this.i18nHeader)), hAsync("div", { key: 'f734dc3a8ce505e3cc3539bb1835ad85ded7b7b7', class: "clock" }, this.timePickerDescriptors.map((descriptor, index) => (hAsync("div", { class: "flex" }, hAsync("div", { class: { columns: true, hidden: descriptor.hidden } }, hAsync("div", { class: "column-header", title: descriptor.header }, descriptor.header), hAsync("div", { "data-element-list-id": descriptor.unit, class: "element-list", tabIndex: -1 }, descriptor.numberArray.map((number) => {
             return (hAsync("button", { "data-element-container-id": `${descriptor.unit}-${number}`, class: {
                     selected: this.isSelected(descriptor.unit, number),
                     'element-container': true,
@@ -31812,16 +32243,16 @@ class TimePicker {
         }), hAsync("div", { class: "element-list-padding" }))), index !== this.timePickerDescriptors.length - 1 && (hAsync("div", { class: {
                 'column-separator': true,
                 hidden: descriptor.hidden,
-            } }, this.getColumnSeparator(index)))))), this.timeRef && (hAsync("div", { key: 'b177d5ea743648618ab6b877f60a37b46d8a5fa5', class: "flex" }, hAsync("div", { key: 'a714f52d250386088368bdfe5c28ad45a1fe2dd0', class: "column-separator" }), hAsync("div", { key: 'c7730b336e486ec34fd23e293b8e70e309d153fe', class: "columns" }, hAsync("div", { key: '56677d7c350e235777e5d06afd61b925934923d6', class: "column-header", title: "AM/PM" }), hAsync("div", { key: '764fd7297bdafaa69d24c9a2655c9d4fa7a73966', class: "element-list", tabIndex: -1 }, hAsync("button", { key: '6b7ddefac72c7d4a778e8de6c42fd593003f5e5f', "data-am-pm-id": "AM", class: {
+            } }, this.getColumnSeparator(index)))))), this.timeRef && (hAsync("div", { key: 'bb49977f48acb00f3d1d60fb43fc7edec4faeb0a', class: "flex" }, hAsync("div", { key: 'e4f2b5aa7a8084a33e008294d62d1bb00f17ed90', class: "column-separator" }), hAsync("div", { key: '5ea1646bc59a33e8fd97822667aa3777f33c0477', class: "columns" }, hAsync("div", { key: '7b352f58b254ec207f421e560c7c921b790b4342', class: "column-header", title: "AM/PM" }), hAsync("div", { key: 'be780d8e25f6da94829387112aac9b288f4188a1', class: "element-list", tabIndex: -1 }, hAsync("button", { key: '289383e707ec51a48f8f29090be8556da72e639a', "data-am-pm-id": "AM", class: {
                 selected: this.timeRef === 'AM',
                 'element-container': true,
-            }, onClick: () => this.changeTimeReference('AM'), tabindex: "0", "aria-label": "AM" }, "AM"), hAsync("button", { key: '75cccf55946da3b04faac2da0bd3c989b8f633a3', "data-am-pm-id": "PM", class: {
+            }, onClick: () => this.changeTimeReference('AM'), tabindex: "0", "aria-label": "AM" }, "AM"), hAsync("button", { key: '01f4275c4c3983b834b87de3884f39ef0901915d', "data-am-pm-id": "PM", class: {
                 selected: this.timeRef === 'PM',
                 'element-container': true,
-            }, onClick: () => this.changeTimeReference('PM'), tabindex: "0", "aria-label": "PM" }, "PM")))))), hAsync("div", { key: 'e033175f6d142fd73661703c89c975874bc9d6be', class: {
+            }, onClick: () => this.changeTimeReference('PM'), tabindex: "0", "aria-label": "PM" }, "PM")))))), hAsync("div", { key: '9ee77d7fb2a4149f673d8e6b87e240a3e7123a40', class: {
                 footer: true,
                 'footer--compact': this.timePickerDescriptors.length <= 2,
-            }, slot: "footer" }, hAsync("ix-button", { key: '795d890b983737fd09cc7471c428266945062262', class: "confirm-button", onClick: () => {
+            }, slot: "footer" }, hAsync("ix-button", { key: '5c87feafc47a5df411614d45147c66f11cd4228e', class: "confirm-button", onClick: () => {
                 var _a;
                 this.timeSelect.emit((_a = this._time) === null || _a === void 0 ? void 0 : _a.toFormat(this.format));
             } }, this.i18nConfirmTime)))));
@@ -31875,7 +32306,7 @@ __decorate$1([
     OnListener('keydown')
 ], TimePicker.prototype, "handleKeyDown", null);
 
-const toastCss = ":host{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius, var(--theme-toast--border-radus));box-shadow:var(--theme-toast--box-shadow);--animate-duration:var(--theme-medium-time)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .toast-body{display:flex;position:relative;min-height:3.5rem;width:100%;flex-grow:1;padding:0.75rem}:host .toast-body .toast-icon{display:flex;align-items:flex-start;margin-right:0.5rem}:host .toast-body .toast-content{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%}:host .toast-body .toast-content .toast-title{margin:0.25rem 0px}:host .toast-body .toast-content .toast-message{min-width:0;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host .toast-body .toast-content .toast-action{margin-top:0.5rem}:host .toast-body .toast-icon+.toast-content{max-width:10.25rem}:host .toast-close{display:flex;position:relative;pointer-events:all;margin-left:auto;margin-right:0px;opacity:0.6}:host .toast-close:hover{opacity:1}:host .toast-progress-bar{position:absolute;bottom:0;height:0.125rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}:host .toast-progress-bar--animated{animation:trackProgress linear 1 forwards}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";
+const toastCss = ":host{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius, var(--theme-toast--border-radus));box-shadow:var(--theme-toast--box-shadow);--animate-duration:var(--theme-medium-time)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .toast-body{display:flex;position:relative;min-height:3.5rem;width:100%;flex-grow:1;padding:0.75rem 0.75rem 0.25rem}:host .toast-body .toast-icon{display:flex;align-items:flex-start;padding:0.25rem}:host .toast-body .toast-content{overflow:hidden;min-width:0;width:100%;padding:0.25rem}:host .toast-body .toast-content .toast-title{min-width:0;margin:0.25rem 0px;overflow-wrap:break-word;word-break:break-word}:host .toast-body .toast-content .toast-message{min-width:0;overflow-wrap:break-word;word-break:break-word;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host .toast-body .toast-content .toast-action{margin-top:0.5rem}:host .toast-close{display:flex;position:relative;pointer-events:all;margin-left:auto;margin-right:0px;opacity:0.6}:host .toast-close:hover{opacity:1}:host .toast-progress-bar{position:absolute;bottom:0;height:0.125rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}:host .toast-progress-bar--animated{animation:trackProgress linear 1 forwards}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";
 
 class Toast {
     constructor(hostRef) {
@@ -31893,6 +32324,10 @@ class Toast {
          * Autoclose behavior
          */
         this.preventAutoClose = false;
+        /**
+         * Allows to hide the icon in the toast.
+         */
+        this.hideIcon = false;
         this.progress = 0;
         this.touched = false;
         this.paused = false;
@@ -31949,11 +32384,11 @@ class Toast {
             animationPlayState: this.touched || this.paused ? 'paused' : 'running',
         };
         progressBarClass.push('toast-progress-bar--animated');
-        return (hAsync(Host, { key: 'b006843e5552e82ed437b10ab31c5cdff7ec90a6', class: "animate__animated animate__fadeIn" }, hAsync("div", { key: '8d4c07604138e38235b3a2f042ce8550966df392', class: "toast-body", onPointerLeave: () => {
+        return (hAsync(Host, { key: '0e762b008a6695e9ecae1ffb288e606d9e9794c4', class: "animate__animated animate__fadeIn" }, hAsync("div", { key: 'da513d7fec310d67a020044650517f0e5a38d578', class: "toast-body", onPointerLeave: () => {
                 this.touched = false;
             }, onPointerEnter: () => {
                 this.touched = true;
-            } }, this.type || this.icon ? (hAsync("div", { class: "toast-icon" }, this.getIcon())) : null, hAsync("div", { key: 'b5235db039ca12fa5a3823861f41e86fbf312661', class: "toast-content" }, this.toastTitle ? (hAsync("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, hAsync("div", { key: '6577c06f5530655aafc974684aedbac7d48da649', class: "toast-message" }, hAsync("slot", { key: '16675e05c803fe4ef8e246463f30c194e76a8428' })), hAsync("div", { key: '84eeb321fc81b49d14468e7d517dd8cfc8769c8d', class: "toast-action" }, hAsync("slot", { key: 'f55d9f57a23bf58006e1f3bc1d3e7fab85440dab', name: "action" }))), hAsync("div", { key: 'd409d2622bce56496f6081cf55ab9ad1137dc222', class: "toast-close" }, hAsync("ix-icon-button", { key: '873c0a73f6c5a9ae47cd39d63ff9c68dde219cbd', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), !this.preventAutoClose && (hAsync("div", { key: '15a6b8556e7d22e9c9061a27e31b3138cb86380b', class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+            } }, (this.type || this.icon) && !this.hideIcon ? (hAsync("div", { class: "toast-icon" }, this.getIcon())) : null, hAsync("div", { key: '56a6a8392b19e151c3f44b677168f105fe4a8114', class: "toast-content" }, this.toastTitle ? (hAsync("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, hAsync("div", { key: '6607138845d5f8eda23d06cbe65e785495a1c714', class: "toast-message" }, hAsync("slot", { key: '2a8e839c3d68287873498585f06e84854f6a3d77' })), hAsync("div", { key: '1522e81b25a84de92ca8857bb3689bea7ae303bb', class: "toast-action" }, hAsync("slot", { key: '95cd3cefd6035ea710926d7c34eb38501b0de4fb', name: "action" }))), hAsync("div", { key: 'bc7fd1c5f9adf6b8fd4d3b0aefc6a493afa0db54', class: "toast-close" }, hAsync("ix-icon-button", { key: 'd9014f1d8561ebeeadd747772cfcfe287ebb30c1', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), !this.preventAutoClose && (hAsync("div", { key: '851ff267cb3d1973c648d53709f45acbc4005306', class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
                 this.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {
@@ -31973,6 +32408,7 @@ class Toast {
             "preventAutoClose": [4, "prevent-auto-close"],
             "icon": [1],
             "iconColor": [1, "icon-color"],
+            "hideIcon": [4, "hide-icon"],
             "ariaLabelCloseIconButton": [1, "aria-label-close-icon-button"],
             "progress": [32],
             "touched": [32],
@@ -32037,7 +32473,7 @@ class ToastContainer {
      * @param config
      */
     async showToast(config) {
-        var _a, _b;
+        var _a, _b, _c;
         const toast = document.createElement('ix-toast');
         const onClose = new TypedEvent();
         function removeToast(result) {
@@ -32050,6 +32486,7 @@ class ToastContainer {
         toast.autoCloseDelay = (_b = config.autoCloseDelay) !== null && _b !== void 0 ? _b : 5000;
         toast.icon = config.icon;
         toast.iconColor = config.iconColor;
+        toast.hideIcon = (_c = config.hideIcon) !== null && _c !== void 0 ? _c : false;
         toast.addEventListener('closeToast', (event) => {
             const { detail } = event;
             removeToast(detail);
@@ -32084,10 +32521,10 @@ class ToastContainer {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'ff09f24de84ceb7710a228f28dd82f1ca17ce83a', class: {
+        return (hAsync(Host, { key: '7afdcfbb2392cc6da11fa5c4e08eca88f2a1274a', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
-            } }, hAsync("slot", { key: 'bfe056dedfac7cdc249034e746fc4f63caded036' })));
+            } }, hAsync("slot", { key: 'e9c58b5682aecadcf2c22eb87a9bfd1994b7e674' })));
     }
     static get watchers() { return {
         "position": ["onPositionChange"]
@@ -32238,13 +32675,13 @@ class Toggle {
         if (this.indeterminate) {
             toggleText = this.textIndeterminate;
         }
-        return (hAsync(Host, { key: '990e3533b6e155d261dcdcf3dd7e06e0dceb8072', role: "switch", "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), class: {
+        return (hAsync(Host, { key: 'e9e712897b0c454b49fbc96c412ca0cf9312dcc8', role: "switch", "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), class: {
                 disabled: this.disabled,
-            }, onBlur: () => this.ixBlur.emit(), onFocus: () => (this.touched = true) }, hAsync("label", { key: '568b91b6c2ad362dc753518f97ca98b2c45a4130', class: "wrapper" }, hAsync("button", { key: 'dcbe522c2ccc95354cb982892eff554db86b4e8f', class: {
+            }, onBlur: () => this.ixBlur.emit(), onFocus: () => (this.touched = true) }, hAsync("label", { key: '511bbf8b5f6ba71bb0310e3d17e098f781759240', class: "wrapper" }, hAsync("button", { key: '8a69db4f96bd68ed0b32652f67ec5cdda12cc99f', class: {
                 switch: true,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
-            }, onClick: () => this.onCheckedChange(!this.checked), tabindex: -1, "aria-hidden": "true" }, hAsync("div", { key: 'd281b839212a95e47b977bc46f052f7e6ca927c9', class: "slider" })), hAsync("input", { key: '8169a27e13433034a97c97ca99507237332abb30', type: "checkbox", disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, tabindex: 0, "aria-hidden": a11yBoolean(true), "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), !this.hideText && (hAsync("ix-typography", { key: '7bc9b1f72447ff21057cdef3eb77a4ebd7a45ae7', class: "label" }, toggleText)))));
+            }, onClick: () => this.onCheckedChange(!this.checked), tabindex: -1, "aria-hidden": "true" }, hAsync("div", { key: '917e87954f641d86a0bd05526bc3cd52823b3b7e', class: "slider" })), hAsync("input", { key: '5e40e7f892cf6c963fd336dc0a81a56e00fea4fd', type: "checkbox", disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, tabindex: 0, "aria-hidden": a11yBoolean(true), "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), !this.hideText && (hAsync("ix-typography", { key: 'aea3e6f4d95e20cb72de2fe6cd791e1d2ce871f9', class: "label" }, toggleText)))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
@@ -32322,9 +32759,9 @@ class ToggleButton {
                 'aria-label': this.ariaLabelButton,
             },
         };
-        return (hAsync(Host, { key: 'dab3970ea3719c9652d0802710947590c262faaa', class: {
+        return (hAsync(Host, { key: '3d0e41a6571193d4b7d8e73701b6d295f4ab5482', class: {
                 disabled: this.disabled || this.loading,
-            } }, hAsync(BaseButton, Object.assign({ key: '51e50d08005f42839aa65e7e2e86269158633fc6' }, baseButtonProps), hAsync("slot", { key: '0e8e22fc517fd98f815b89c5f519e3556589f833' }))));
+            } }, hAsync(BaseButton, Object.assign({ key: '770d156dbc007d146efbd7b5604b3c902197b4c2' }, baseButtonProps), hAsync("slot", { key: '6d2a11909dcf61da1571d2e921e850d9a54ed95c' }))));
     }
     static get style() { return toggleButtonCss; }
     static get cmpMeta() { return {
@@ -32671,7 +33108,7 @@ class Tooltip {
         }
     }
     render() {
-        return (hAsync(Host, { key: '1176f8e37f2918a9708c8ccdbfc57f99508299f3', role: "tooltip", class: { visible: this.visible } }, hAsync("dialog", { key: 'd4942b8d171e7e48defc505179d54ce09288c905', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, hAsync("div", { key: 'faef3b3e4b5a45ddb3872bd9d8ec1d6eb4a36221', class: "tooltip-container" }, hAsync("div", { key: 'ce64bda5406c6a70ccddc41f0b4aa4010be1aca9', class: "content-wrapper" }, hAsync("div", { key: '52a51ed895ea573d3e889e57a05f65193906492c', class: 'tooltip-title' }, hAsync("slot", { key: 'b7965bd9963fcd789331e4c264e8d317bf7ed314', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), hAsync("ix-typography", { key: 'b530dbbf13b752968decb45af3953f42e3a0c743', format: "h5" }, this.titleContent, hAsync("slot", { key: 'c7152f89180904044dc26f996923cc5766ea1d0f', name: "title-content" }))), hAsync("slot", { key: '3b00e9ed924a0c0d8527344c13a3c52a9afd0108' }), hAsync("div", { key: '5401e6015c3a7ebf4749edc466ddca881e4f7d36', class: "arrow" }))))));
+        return (hAsync(Host, { key: '55bcfd4bde42a8a34b4f07ac4c1006aea54ca7e5', role: "tooltip", class: { visible: this.visible } }, hAsync("dialog", { key: 'ec321094408ffa410aeb3eca4180cbfccad52006', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, hAsync("div", { key: '509cdfa1685426e919ad692b3b44488c274c5836', class: "tooltip-container" }, hAsync("div", { key: 'c575ea31e7c886efc0769ff2831837fdaacbdb2c', class: "content-wrapper" }, hAsync("div", { key: 'c9b2ec82f0fa872f50e8692ad61000bad648e1a8', class: 'tooltip-title' }, hAsync("slot", { key: '029bb99b659d5d392038041023a357f447d88d9b', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), hAsync("ix-typography", { key: '3cfd52cca4147ebf5b793916c7acc991b8cf8095', format: "h5" }, this.titleContent, hAsync("slot", { key: '88ba0fc44f93009be44bc7cb3b026dc8826533eb', name: "title-content" }))), hAsync("slot", { key: '213e6a71172b01e58908016fed4aefa991c71b4c' }), hAsync("div", { key: 'b63e112eb2f8ccf600dfab8eeebfb2bbcc7d8b33', class: "arrow" }))))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return tooltipCss; }
@@ -32768,15 +33205,16 @@ class VirtualList {
         return maxElementHeight;
     }
     constructor(element, userProvidedConfig) {
+        this._scrollListener = null;
+        this._pendingRender = false;
         this._lastRepaint = null;
         this._maxElementHeight = VirtualList.getMaxBrowserHeight();
         this.refresh(element, userProvidedConfig);
         const config = this._config;
-        // Create internal render loop.
         const render = () => {
+            this._pendingRender = false;
             const scrollTop = this._getScrollPosition();
             const lastRepaint = this._lastRepaint;
-            this._renderAnimationFrame = window.requestAnimationFrame(render);
             if (scrollTop === lastRepaint) {
                 return;
             }
@@ -32789,12 +33227,34 @@ class VirtualList {
                 }
             }
         };
+        const scrollContainer = config.scrollContainer || element;
+        this._scrollListener = () => {
+            if (!this._pendingRender) {
+                this._pendingRender = true;
+                this._renderAnimationFrame = window.requestAnimationFrame(render);
+            }
+        };
+        scrollContainer.addEventListener('scroll', this._scrollListener, {
+            passive: true,
+        });
         render();
     }
     destroy() {
-        window.cancelAnimationFrame(this._renderAnimationFrame);
+        if (this._renderAnimationFrame) {
+            window.cancelAnimationFrame(this._renderAnimationFrame);
+        }
+        const config = this._config;
+        const scrollContainer = (config === null || config === void 0 ? void 0 : config.scrollContainer) || this._element;
+        if (this._scrollListener && scrollContainer) {
+            scrollContainer.removeEventListener('scroll', this._scrollListener);
+        }
     }
     refresh(element, userProvidedConfig = VirtualList.defaultConfig) {
+        var _a;
+        const oldScrollContainer = ((_a = this._config) === null || _a === void 0 ? void 0 : _a.scrollContainer) || this._element;
+        if (this._scrollListener && oldScrollContainer) {
+            oldScrollContainer.removeEventListener('scroll', this._scrollListener);
+        }
         this._config = userProvidedConfig;
         if (!element || element.nodeType !== 1) {
             throw new Error('HyperList requires a valid DOM Node container');
@@ -32905,6 +33365,12 @@ class VirtualList {
         if (typeof config.afterRender === 'function') {
             config.afterRender();
         }
+        if (this._scrollListener) {
+            const scrollContainer = config.scrollContainer || element;
+            scrollContainer.addEventListener('scroll', this._scrollListener, {
+                passive: true,
+            });
+        }
     }
     _getRow(i) {
         const config = this._config;
@@ -33306,7 +33772,7 @@ class Tree {
         this.nodeClicked.emit(id);
     }
     render() {
-        return (hAsync(Host, { key: 'ca0d582877d3b2877a1090cc0aeb40f38617cef9', onClick: (event) => this.onTreeItemClick(event) }, hAsync("slot", { key: '2d8f21165234243b6d2e2f7c99696fc7343d79f2' })));
+        return (hAsync(Host, { key: 'd144ff5b676bdcafc424afea72834ea712c95dff', onClick: (event) => this.onTreeItemClick(event) }, hAsync("slot", { key: 'fc2f5555f95788c57fa66b150cc844024bc6677a' })));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -33345,17 +33811,17 @@ class TreeItem {
     }
     render() {
         var _a, _b;
-        return (hAsync(Host, { key: '52817f9eed914ee6b01b67848af3f7073f21d65c', class: {
+        return (hAsync(Host, { key: '0f615d72d15f5d10c9d44ea3bda96bb64494944a', class: {
                 selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected),
-            } }, hAsync("div", { key: '95b40939dac08653e875985a160e5aa45ebc353c', class: "icon-toggle-container" }, this.hasChildren ? (hAsync("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
+            } }, hAsync("div", { key: 'ea65a20109ff5347f1e6aa7da01f105f28594256', class: "icon-toggle-container" }, this.hasChildren ? (hAsync("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
                 ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
             }, color: "color-std-text", onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.toggle.emit();
-            }, "aria-label": this.ariaLabelChevronIcon })) : null), hAsync("div", { key: '656eda787f5fbf263ced33629d3ebde110c3f917', class: "tree-node-container", onClick: () => {
+            }, "aria-label": this.ariaLabelChevronIcon })) : null), hAsync("div", { key: 'aba0519a308a75609a1339ec1d2ab7a6fcd4638e', class: "tree-node-container", onClick: () => {
                 this.itemClick.emit();
-            } }, hAsync("div", { key: 'eba55e54bf655fc0c3d0aacbfc3cb7e49fcb13f6', class: "tree-node-text" }, this.text), hAsync("slot", { key: '4747766e632c2bdf7865b25b8d2abf82405c57c8' }))));
+            } }, hAsync("div", { key: 'fa5985f1971f20cfb60f34e9c735c949e468ac4a', class: "tree-node-text" }, this.text), hAsync("slot", { key: '9f1110d6d2d64af7cf2840fa429ccf7ed312e5fc' }))));
     }
     static get style() { return treeItemCss; }
     static get cmpMeta() { return {
@@ -33553,7 +34019,7 @@ class Upload {
     render() {
         const disabled = this.disabled || this.state === UploadFileState.LOADING;
         const _a = this.a11y, { 'aria-label': ariaLabel = 'Upload files' } = _a, a11y = __rest(_a, ['aria-label']);
-        return (hAsync(Host, Object.assign({ key: '8b8c68a23b429ca57854751c8a1c9358f78cbc9f' }, a11y, { "aria-disabled": disabled }), hAsync("div", { key: '1bb186087ab0d5c545a3f183ce3f6de033a837ad', class: {
+        return (hAsync(Host, Object.assign({ key: '00c05373c715388a90804b8b2eabf689d60acc0f' }, a11y, { "aria-disabled": disabled }), hAsync("div", { key: '66db4112acaab05bde6107578684e3a1fb1de614', class: {
                 'file-upload-area': true,
                 'file-over': this.state !== UploadFileState.LOADING && this.isFileOver,
                 checking: this.state === UploadFileState.LOADING,
@@ -33563,9 +34029,9 @@ class Upload {
                 if (this.state !== UploadFileState.LOADING) {
                     this.fileDropped(e);
                 }
-            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), hAsync("div", { key: '52209f325ad967197e48f651cc6f15365be9562f' }, hAsync("input", { key: '91c11214c2f169a9dfbeaaac88a7d928ab389455', "aria-label": ariaLabel, "aria-disabled": disabled, multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", tabindex: "-1", onChange: (e) => {
+            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), hAsync("div", { key: 'dafe7449f460a9409b9ee2de54f00b15865b2883' }, hAsync("input", { key: '797d303d7dd90f4c611a65deb80d41261c4a9cae', "aria-label": ariaLabel, "aria-disabled": disabled, multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", tabindex: "-1", onChange: (e) => {
                 this.fileChangeEvent(e);
-            }, accept: this.accept, disabled: disabled }), hAsync("ix-button", { key: '807022699c0ba9ac3d81557e88cf1ae498a36cca', variant: "secondary", "aria-disabled": disabled, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile)))));
+            }, accept: this.accept, disabled: disabled }), hAsync("ix-button", { key: 'e8993aa0d8a3b07dfdc49f3d6c8616b5ce2e89a0', variant: "secondary", "aria-disabled": disabled, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile)))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return uploadCss; }
@@ -33732,13 +34198,13 @@ class ValidationTooltip {
     }
     render() {
         var _a, _b, _c, _d;
-        return (hAsync(Host, { key: '63087bd1548b2c8242a70367e9721dabe608b81b' }, hAsync("slot", { key: '9b3e52767724c1b6583e2137333bd2055a947de5' }), hAsync("div", { key: '37c0ff9d22dea19f3455ae33b2fdc7930f6577d0', role: "tooltip", style: {
+        return (hAsync(Host, { key: '3bbb1884ba4d874e0187b0a649f8ffa276cd998f' }, hAsync("slot", { key: '00503ee8eee8224d3cea5e94e1a73cd40ee4949e' }), hAsync("div", { key: '27f89d9bf7edefd71ce731edf0e0a491ab3e2814', role: "tooltip", style: {
                 display: 'none',
                 position: 'fixed',
                 top: '0',
                 left: '0',
                 transform: `translate(${Math.round((_b = (_a = this.tooltipPosition) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0)}px,${Math.round((_d = (_c = this.tooltipPosition) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0)}px)`,
-            }, class: "validation-tooltip text-default" }, this.message, hAsync("slot", { key: 'be776406798e859b60593bdb35ebc8e443c6e94c', name: "tooltip-message" }), hAsync("div", { key: '447ebc834dc096b3b60549092b0960d64b294a27', id: "arrow" }))));
+            }, class: "validation-tooltip text-default" }, this.message, hAsync("slot", { key: '4b7d8a68f3e7efd19b166beea935210295afb6f6', name: "tooltip-message" }), hAsync("div", { key: '3ab710662e09333589b25dd49c128b5cd1229843', id: "arrow" }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -33867,18 +34333,18 @@ class WorkflowStep {
     }
     render() {
         const icons = !this.customIconSlot ? (hAsync(Fragment, null, hAsync("ix-icon", { color: "color-1", name: this.status === 'warning' ? iconTriangleFilled : iconCircleFilled, class: "absolute", size: "24" }), hAsync("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24", "aria-label": this.getIconAriaLabel() }))) : null;
-        return (hAsync(Host, { key: '69060f0b0d9724d1a7e5d88d723454354a0ae179', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, hAsync("div", { key: 'e271713f7b57462155e967d2fd74bb911640c6b1', tabIndex: 0, class: {
+        return (hAsync(Host, { key: 'bcb3fee2267536717286c691e1b3fcebfa52ba25', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, hAsync("div", { key: '54b04c63b7df962caca7cd7c53f8e1e19f1dbdf8', tabIndex: 0, class: {
                 step: true,
                 selected: this.selected,
                 vertical: this.vertical,
                 disabled: this.disabled,
                 clickable: this.clickable && !this.disabled,
-            } }, hAsync("div", { key: '28fb3c2e870564f3cfa62a402ba75b62ef84d68f', class: "wrapper" }, hAsync("div", { key: '7178b44d0f6e20202c62e83af8e983392cf00ecd', class: {
+            } }, hAsync("div", { key: '64b8292366bc54e3ddaf92077fe7001d4e263f76', class: "wrapper" }, hAsync("div", { key: 'ce2379628165a5c06885a1eb2c75152da54ffa2f', class: {
                 line: true,
                 selected: this.selected,
                 [this.status]: true,
                 [this.position]: true,
-            } }), hAsync("div", { key: '8f10884a92e4f0685f20a10cb12cd19b39a7a2f9', class: "iconWrapper" }, icons, hAsync("slot", { key: '6e3d96ae17ce0b3b217edef59b1e3999a1d028d5', name: "custom-icon" }))), hAsync("div", { key: '80b1b2adc4f110d505e5fcb4263781b11b58ff49', class: "text" }, hAsync("slot", { key: '07f9b88ce66abffd1190940968ed20ae6cd5ec09' })))));
+            } }), hAsync("div", { key: '11651f719860bc2dfd5e82253cbfc94cd45c0a8f', class: "iconWrapper" }, icons, hAsync("slot", { key: '4a6a1596874064e8efba07583362640950ba46e3', name: "custom-icon" }))), hAsync("div", { key: '1fdbe00dbb8159c8f50d4cbdef4efd86c3bda736', class: "text" }, hAsync("slot", { key: '2ab567c5fe3ff5a917f5f3ea6049bae66a1b2adc' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -33983,7 +34449,7 @@ class WorkflowSteps {
         this.updateSteps();
     }
     render() {
-        return (hAsync(Host, { key: '05f04dea227019aa7f0e0a3b24cecb45ed80c452' }, hAsync("div", { key: '6423cddc50bc1928ae2f1f78d6b22c12dda49c9d', class: { steps: true, vertical: this.vertical } }, hAsync("slot", { key: '44ee3bca297914083a92a66ae3c496e05bd52b94' }))));
+        return (hAsync(Host, { key: 'dbfb392db314bb98c474c8098543206a14e6891a' }, hAsync("div", { key: '609f741822dc9fb573e42b1e53a2acf6ce457965', class: { steps: true, vertical: this.vertical } }, hAsync("slot", { key: '78b651a5a75e24b972bff772769cc46bf0732a4c' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return workflowStepsCss; }