@siemens/ix 0.0.0-pr-1974-20250627142646 → 0.0.0-pr-2015-20250716160704

package/hydrate/index.js

@@ -157,7 +157,7 @@ async function appGlobalScript (config) {
 const globalScripts = appGlobalScript;
 
 /*
- Stencil Hydrate Platform v4.35.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.36.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -362,8 +362,23 @@ function deserializeProperty(value) {
   }
   return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
 }
+
+// src/utils/style.ts
+function createStyleSheetIfNeededAndSupported(styles2) {
+  return void 0;
+}
+
+// src/utils/shadow-root.ts
+var globalStyleSheet;
 function createShadowRoot(cmpMeta) {
-  this.attachShadow({ mode: "open" });
+  var _a;
+  const shadowRoot = this.attachShadow({ mode: "open" });
+  if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported()) != null ? _a : null;
+  if (globalStyleSheet) {
+    {
+      shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
+    }
+  }
 }
 
 // src/runtime/runtime-constants.ts
@@ -533,6 +548,94 @@ var uniqueTime = (key, measureText) => {
     };
   }
 };
+var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
+var registerStyle = (scopeId2, cssText, allowCS) => {
+  let style = styles.get(scopeId2);
+  {
+    style = cssText;
+  }
+  styles.set(scopeId2, style);
+};
+var addStyle = (styleContainerNode, cmpMeta, mode) => {
+  var _a;
+  const scopeId2 = getScopeId(cmpMeta);
+  const style = styles.get(scopeId2);
+  if (!win.document) {
+    return scopeId2;
+  }
+  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
+  if (style) {
+    if (typeof style === "string") {
+      styleContainerNode = styleContainerNode.head || styleContainerNode;
+      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+      let styleElm;
+      if (!appliedStyles) {
+        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
+      }
+      if (!appliedStyles.has(scopeId2)) {
+        if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
+          styleElm.innerHTML = style;
+        } else {
+          styleElm = win.document.createElement("style");
+          styleElm.innerHTML = style;
+          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
+          if (nonce != null) {
+            styleElm.setAttribute("nonce", nonce);
+          }
+          if ((cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */ || cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
+            styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
+          }
+          if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
+            if (styleContainerNode.nodeName === "HEAD") {
+              const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
+              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
+              styleContainerNode.insertBefore(
+                styleElm,
+                (referenceNode2 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null
+              );
+            } else if ("host" in styleContainerNode) {
+              {
+                const existingStyleContainer = styleContainerNode.querySelector("style");
+                if (existingStyleContainer) {
+                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
+                } else {
+                  styleContainerNode.prepend(styleElm);
+                }
+              }
+            } else {
+              styleContainerNode.append(styleElm);
+            }
+          }
+          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            styleContainerNode.insertBefore(styleElm, null);
+          }
+        }
+        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
+          styleElm.innerHTML += SLOT_FB_CSS;
+        }
+        if (appliedStyles) {
+          appliedStyles.add(scopeId2);
+        }
+      }
+    }
+  }
+  return scopeId2;
+};
+var attachStyles = (hostRef) => {
+  const cmpMeta = hostRef.$cmpMeta$;
+  const elm = hostRef.$hostElement$;
+  const flags = cmpMeta.$flags$;
+  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
+  const scopeId2 = addStyle(
+    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
+    cmpMeta);
+  if (flags & 10 /* needsScopedEncapsulation */) {
+    elm["s-sc"] = scopeId2;
+    elm.classList.add(scopeId2 + "-h");
+  }
+  endAttachStyles();
+};
+var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -647,7 +750,7 @@ var convertToPrivate = (node) => {
 
 // src/runtime/client-hydrate.ts
 var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-  var _a;
+  var _a, _b, _c;
   const endHydrate = createTime("hydrateClient", tagName);
   const shadowRoot = hostElm.shadowRoot;
   const childRenderNodes = [];
@@ -658,7 +761,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   vnode.$elm$ = hostElm;
   const members = Object.entries(((_a = hostRef.$cmpMeta$) == null ? void 0 : _a.$members$) || {});
   members.forEach(([memberName, [memberFlags, metaAttributeName]]) => {
-    var _a2, _b;
+    var _a2, _b2;
     if (!(memberFlags & 31 /* Prop */)) {
       return;
     }
@@ -670,7 +773,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         memberFlags,
         !!(((_a2 = hostRef.$cmpMeta$) == null ? void 0 : _a2.$flags$) & 64 /* formAssociated */)
       );
-      (_b = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b.set(memberName, attrPropVal);
+      (_b2 = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b2.set(memberName, attrPropVal);
     }
   });
   if (win.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) {
@@ -701,6 +804,16 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       if (childRenderNode.$tag$ === "slot") {
         node["s-cr"] = hostElm["s-cr"];
       }
+    } else if (((_b = childRenderNode.$tag$) == null ? void 0 : _b.toString().includes("-")) && childRenderNode.$tag$ !== "slot-fb" && !childRenderNode.$elm$.shadowRoot) {
+      const cmpMeta = getHostRef(childRenderNode.$elm$);
+      if (cmpMeta) {
+        const scopeId3 = getScopeId(
+          cmpMeta.$cmpMeta$);
+        const styleSheet = win.document.querySelector(`style[sty-id="${scopeId3}"]`);
+        if (styleSheet) {
+          hostElm.shadowRoot.append(styleSheet.cloneNode(true));
+        }
+      }
     }
     if (childRenderNode.$tag$ === "slot") {
       childRenderNode.$name$ = childRenderNode.$elm$["s-sn"] || childRenderNode.$elm$["name"] || null;
@@ -716,7 +829,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
     }
     if (orgLocationNode && orgLocationNode.isConnected) {
-      if (shadowRoot && orgLocationNode["s-en"] === "") {
+      if (orgLocationNode.parentElement.shadowRoot && orgLocationNode["s-en"] === "") {
         orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
       }
       orgLocationNode.parentNode.removeChild(orgLocationNode);
@@ -724,7 +837,9 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         node["s-oo"] = parseInt(childRenderNode.$nodeId$);
       }
     }
-    plt.$orgLocNodes$.delete(orgLocationId);
+    if (orgLocationNode && !orgLocationNode["s-id"]) {
+      plt.$orgLocNodes$.delete(orgLocationId);
+    }
   }
   const hosts = [];
   const snLen = slottedNodes.length;
@@ -745,39 +860,46 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
       if (!hosts[slottedItem.hostId]) continue;
       const hostEle = hosts[slottedItem.hostId];
+      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
+        hostEle.appendChild(slottedItem.node);
+      }
       if (!hostEle.shadowRoot || !shadowRoot) {
-        slottedItem.slot["s-cr"] = hostEle["s-cr"];
-        if (!slottedItem.slot["s-cr"] && hostEle.shadowRoot) {
-          slottedItem.slot["s-cr"] = hostEle;
-        } else {
-          slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
+        if (!slottedItem.slot["s-cr"]) {
+          slottedItem.slot["s-cr"] = hostEle["s-cr"];
+          if (!slottedItem.slot["s-cr"] && hostEle.shadowRoot) {
+            slottedItem.slot["s-cr"] = hostEle;
+          } else {
+            slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
+          }
         }
         addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
-      }
-      if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) {
-        hostEle.appendChild(slottedItem.node);
+        if (((_c = slottedItem.node.parentElement) == null ? void 0 : _c.shadowRoot) && slottedItem.node["getAttribute"] && slottedItem.node.getAttribute("slot")) {
+          slottedItem.node.removeAttribute("slot");
+        }
       }
     }
   }
-  if (shadowRoot && !shadowRoot.childNodes.length) {
+  if (shadowRoot) {
     let rnIdex = 0;
     const rnLen = shadowRootNodes.length;
     if (rnLen) {
       for (rnIdex; rnIdex < rnLen; rnIdex++) {
-        shadowRoot.appendChild(shadowRootNodes[rnIdex]);
+        const node = shadowRootNodes[rnIdex];
+        if (node) {
+          shadowRoot.appendChild(node);
+        }
       }
       Array.from(hostElm.childNodes).forEach((node) => {
         if (typeof node["s-en"] !== "string" && typeof node["s-sn"] !== "string") {
           if (node.nodeType === 1 /* ElementNode */ && node.slot && node.hidden) {
             node.removeAttribute("hidden");
-          } else if (node.nodeType === 8 /* CommentNode */ || node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
+          } else if (node.nodeType === 8 /* CommentNode */ && !node.nodeValue || node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
             node.parentNode.removeChild(node);
           }
         }
       });
     }
   }
-  plt.$orgLocNodes$.delete(hostElm["s-id"]);
   hostRef.$hostElement$ = hostElm;
   endHydrate();
 };
@@ -931,7 +1053,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
     vnode.$index$ = "0";
     parentVNode.$children$ = [vnode];
   } else {
-    if (node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
+    if (node.nodeType === 3 /* TextNode */ && !node.wholeText.trim() && !node["s-nr"]) {
       node.remove();
     }
   }
@@ -989,10 +1111,10 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
     if (childVNode.$name$) {
       childVNode.$elm$.setAttribute("name", slotName);
     }
-    if (parentNodeId && parentNodeId !== childVNode.$hostId$) {
-      parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
+    if (parentVNode.$elm$.shadowRoot && parentNodeId && parentNodeId !== childVNode.$hostId$) {
+      internalCall(parentVNode.$elm$, "insertBefore")(slot, internalCall(parentVNode.$elm$, "children")[0]);
     } else {
-      node.parentNode.insertBefore(slot, node);
+      internalCall(internalCall(node, "parentNode"), "insertBefore")(slot, node);
     }
     addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
     node.remove();
@@ -1016,13 +1138,17 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
   parentVNode.$children$[childVNode.$index$] = childVNode;
 }
 var addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) => {
+  var _a, _b;
   let slottedNode = slotNode.nextSibling;
   slottedNodes[slotNodeId] = slottedNodes[slotNodeId] || [];
-  while (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (slottedNode.nodeType === 8 /* CommentNode */ && slottedNode.nodeValue.indexOf(".") !== 1 || slottedNode.nodeType === 3 /* TextNode */))) {
-    slottedNode["s-sn"] = slotName;
-    slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
-    slottedNode = slottedNode.nextSibling;
-  }
+  if (!slottedNode || ((_a = slottedNode.nodeValue) == null ? void 0 : _a.startsWith(SLOT_NODE_ID + "."))) return;
+  do {
+    if (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (!slottedNode["getAttribute"] || !slottedNode.getAttribute("slot")) && (slottedNode.nodeType === 8 /* CommentNode */ || slottedNode.nodeType === 3 /* TextNode */))) {
+      slottedNode["s-sn"] = slotName;
+      slottedNodes[slotNodeId].push({ slot: slotNode, node: slottedNode, hostId });
+    }
+    slottedNode = slottedNode == null ? void 0 : slottedNode.nextSibling;
+  } while (slottedNode && !((_b = slottedNode.nodeValue) == null ? void 0 : _b.startsWith(SLOT_NODE_ID + ".")));
 };
 var findCorrespondingNode = (node, type) => {
   let sibling = node;
@@ -1467,7 +1593,10 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   }
   return propValue;
 };
-var getElement = (ref) => getHostRef(ref).$hostElement$ ;
+var getElement = (ref) => {
+  var _a;
+  return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
+};
 
 // src/runtime/event-emitter.ts
 var createEvent = (ref, name, flags) => {
@@ -1488,94 +1617,6 @@ var emitEvent = (elm, name, opts) => {
   elm.dispatchEvent(ev);
   return ev;
 };
-var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
-var registerStyle = (scopeId2, cssText, allowCS) => {
-  let style = styles.get(scopeId2);
-  {
-    style = cssText;
-  }
-  styles.set(scopeId2, style);
-};
-var addStyle = (styleContainerNode, cmpMeta, mode) => {
-  var _a;
-  const scopeId2 = getScopeId(cmpMeta);
-  const style = styles.get(scopeId2);
-  if (!win.document) {
-    return scopeId2;
-  }
-  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
-  if (style) {
-    if (typeof style === "string") {
-      styleContainerNode = styleContainerNode.head || styleContainerNode;
-      let appliedStyles = rootAppliedStyles.get(styleContainerNode);
-      let styleElm;
-      if (!appliedStyles) {
-        rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
-      }
-      if (!appliedStyles.has(scopeId2)) {
-        if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
-          styleElm.innerHTML = style;
-        } else {
-          styleElm = win.document.createElement("style");
-          styleElm.innerHTML = style;
-          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
-          if (nonce != null) {
-            styleElm.setAttribute("nonce", nonce);
-          }
-          if ((cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */ || cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */)) {
-            styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
-          }
-          if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
-            if (styleContainerNode.nodeName === "HEAD") {
-              const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
-              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
-              styleContainerNode.insertBefore(
-                styleElm,
-                (referenceNode2 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null
-              );
-            } else if ("host" in styleContainerNode) {
-              {
-                const existingStyleContainer = styleContainerNode.querySelector("style");
-                if (existingStyleContainer) {
-                  existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
-                } else {
-                  styleContainerNode.prepend(styleElm);
-                }
-              }
-            } else {
-              styleContainerNode.append(styleElm);
-            }
-          }
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            styleContainerNode.insertBefore(styleElm, null);
-          }
-        }
-        if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
-          styleElm.innerHTML += SLOT_FB_CSS;
-        }
-        if (appliedStyles) {
-          appliedStyles.add(scopeId2);
-        }
-      }
-    }
-  }
-  return scopeId2;
-};
-var attachStyles = (hostRef) => {
-  const cmpMeta = hostRef.$cmpMeta$;
-  const elm = hostRef.$hostElement$;
-  const flags = cmpMeta.$flags$;
-  const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
-  const scopeId2 = addStyle(
-    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
-    cmpMeta);
-  if (flags & 10 /* needsScopedEncapsulation */) {
-    elm["s-sc"] = scopeId2;
-    elm.classList.add(scopeId2 + "-h");
-  }
-  endAttachStyles();
-};
-var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => {
   if (oldValue === newValue) {
     return;
@@ -1586,12 +1627,13 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     const classList = elm.classList;
     const oldClasses = parseClassList(oldValue);
     let newClasses = parseClassList(newValue);
-    if (elm["s-si"] && initialRender) {
-      newClasses.push(elm["s-si"]);
+    if ((elm["s-si"] || elm["s-sc"]) && initialRender) {
+      const scopeId2 = elm["s-sc"] || elm["s-si"];
+      newClasses.push(scopeId2);
       oldClasses.forEach((c) => {
-        if (c.startsWith(elm["s-si"])) newClasses.push(c);
+        if (c.startsWith(scopeId2)) newClasses.push(c);
       });
-      newClasses = [...new Set(newClasses)];
+      newClasses = [...new Set(newClasses)].filter((c) => c);
       classList.add(...newClasses);
     } else {
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
@@ -2023,6 +2065,8 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
       !isInitialRender && BUILD.updatable && oldChildren !== null
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
+    } else if (isInitialRender && BUILD.updatable && oldChildren !== null && newChildren === null) {
+      newVNode2.$children$ = oldChildren;
     }
     if (isSvgMode && tag === "svg") {
       isSvgMode = false;
@@ -2235,6 +2279,12 @@ var scheduleUpdate = (hostRef, isInitialLoad) => {
   }
   attachToAncestor(hostRef, hostRef.$ancestorComponent$);
   const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
+  if (isInitialLoad) {
+    queueMicrotask(() => {
+      dispatch();
+    });
+    return;
+  }
   return writeTask(dispatch) ;
 };
 var dispatchHooks = (hostRef, isInitialLoad) => {
@@ -2372,10 +2422,16 @@ var postUpdateComponent = (hostRef) => {
   }
 };
 var appDidLoad = (who) => {
+  var _a;
   if (BUILD.asyncQueue) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
+  {
+    if ((_a = plt.$orgLocNodes$) == null ? void 0 : _a.size) {
+      plt.$orgLocNodes$.clear();
+    }
+  }
 };
 var safeCall = (instance, method, arg, elm) => {
   if (instance && instance[method]) {
@@ -2408,6 +2464,9 @@ var serverSideConnected = (elm) => {
 var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 var setValue = (ref, propName, newVal, cmpMeta) => {
   const hostRef = getHostRef(ref);
+  if (!hostRef) {
+    return;
+  }
   if (!hostRef) {
     throw new Error(
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`
@@ -2485,6 +2544,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         Object.defineProperty(prototype, memberName, {
           set(newValue) {
             const ref = getHostRef(this);
+            if (!ref) {
+              return;
+            }
             if (origSetter) {
               const currentValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               if (typeof currentValue === "undefined" && ref.$instanceValues$.get(memberName)) {
@@ -2602,6 +2664,9 @@ var fireConnectedCallback = (instance, elm) => {
 var connectedCallback = (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
+    if (!hostRef) {
+      return;
+    }
     const cmpMeta = hostRef.$cmpMeta$;
     const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
     if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
@@ -2908,7 +2973,7 @@ function proxyHostElement(elm, cstr) {
             get: function() {
               var _a2;
               const ref = getHostRef(this);
-              const attrPropVal2 = (_a2 = ref.$instanceValues$) == null ? void 0 : _a2.get(memberName);
+              const attrPropVal2 = (_a2 = ref == null ? void 0 : ref.$instanceValues$) == null ? void 0 : _a2.get(memberName);
               if (origGetter && attrPropVal2 === void 0 && !getValue(this, memberName)) {
                 setValue(this, memberName, origGetter.apply(this), cmpMeta);
               }
@@ -3060,13 +3125,16 @@ async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
     if (cmpMeta != null) {
       waitingElements.add(elm);
       const hostRef = getHostRef(this);
+      if (!hostRef) {
+        return;
+      }
       addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
       try {
         connectedCallback(elm);
         await elm.componentOnReady();
         results.hydratedCount++;
         const ref = getHostRef(elm);
-        const modeName = !ref.$modeName$ ? "$" : ref.$modeName$;
+        const modeName = !(ref == null ? void 0 : ref.$modeName$) ? "$" : ref == null ? void 0 : ref.$modeName$;
         if (!results.components.some((c) => c.tag === tagName && c.mode === modeName)) {
           results.components.push({
             tag: tagName,
@@ -7868,7 +7936,7 @@ __decorate$d([
     })
 ], CheckboxGroup.prototype, "onClassFieldUpdate", null);
 
-const chipCss = ":host{display:inline-block;position:relative;height:2rem;max-height:2rem;margin-left:0.25rem}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.inactive){pointer-events:none}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:pointer}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary:hover{background-color:var(--theme-chip-primary--background--hover)}.container.primary:active{background-color:var(--theme-chip-primary--background--active)}.container.primary:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.primary.outline:hover{background-color:var(--theme-chip-primary-outline--background--hover)}.container.primary.outline:active{background-color:var(--theme-chip-primary-outline--background--active)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.alarm.active::after,.container.alarm:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.alarm:not(.outline).active::after,.container.alarm:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.alarm.outline:hover::after{display:none}.container.alarm.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.alarm.outline.active::after,.container.alarm.outline:active::after{display:none}.container.alarm.outline.active,.container.alarm.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.alarm:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.critical.active::after,.container.critical:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.critical:not(.outline).active::after,.container.critical:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.critical.outline:hover::after{display:none}.container.critical.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.critical.outline.active::after,.container.critical.outline:active::after{display:none}.container.critical.outline.active,.container.critical.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.critical:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.warning.active::after,.container.warning:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.warning:not(.outline).active::after,.container.warning:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.warning.outline:hover::after{display:none}.container.warning.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.warning.outline.active::after,.container.warning.outline:active::after{display:none}.container.warning.outline.active,.container.warning.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.warning:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.info{color:var(--theme-color-info--contrast)}.container.info:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.info.active::after,.container.info:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.info:not(.outline).active::after,.container.info:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.info.outline:hover::after{display:none}.container.info.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.info.outline.active::after,.container.info.outline:active::after{display:none}.container.info.outline.active,.container.info.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.info:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.neutral.active::after,.container.neutral:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.neutral:not(.outline).active::after,.container.neutral:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.neutral.outline:hover::after{display:none}.container.neutral.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.neutral.outline.active::after,.container.neutral.outline:active::after{display:none}.container.neutral.outline.active,.container.neutral.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.neutral:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.success{color:var(--theme-color-success--contrast)}.container.success:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.success.active::after,.container.success:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.success:not(.outline).active::after,.container.success:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}.container.success.outline:hover::after{display:none}.container.success.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.success.outline.active::after,.container.success.outline:active::after{display:none}.container.success.outline.active,.container.success.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.success:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}";
+const chipCss = ":host{display:inline-block;position:relative;height:2rem;max-height:2rem;margin-left:0.25rem}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.inactive){pointer-events:none}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;vertical-align:top;height:2rem;max-height:2rem;cursor:pointer}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary:hover{background-color:var(--theme-chip-primary--background--hover)}.container.primary:active{background-color:var(--theme-chip-primary--background--active)}.container.primary:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.primary.outline:hover{background-color:var(--theme-chip-primary-outline--background--hover)}.container.primary.outline:active{background-color:var(--theme-chip-primary-outline--background--active)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.alarm.active::after,.container.alarm:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.alarm:not(.outline).active::after,.container.alarm:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.alarm.outline:hover::after{display:none}.container.alarm.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.alarm.outline.active::after,.container.alarm.outline:active::after{display:none}.container.alarm.outline.active,.container.alarm.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.alarm:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.critical.active::after,.container.critical:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.critical:not(.outline).active::after,.container.critical:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.critical.outline:hover::after{display:none}.container.critical.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.critical.outline.active::after,.container.critical.outline:active::after{display:none}.container.critical.outline.active,.container.critical.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.critical:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.warning.active::after,.container.warning:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.warning:not(.outline).active::after,.container.warning:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.warning.outline:hover::after{display:none}.container.warning.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.warning.outline.active::after,.container.warning.outline:active::after{display:none}.container.warning.outline.active,.container.warning.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.warning:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.info{color:var(--theme-color-info--contrast)}.container.info:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.info.active::after,.container.info:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.info:not(.outline).active::after,.container.info:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.info.outline:hover::after{display:none}.container.info.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.info.outline.active::after,.container.info.outline:active::after{display:none}.container.info.outline.active,.container.info.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.info:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.neutral.active::after,.container.neutral:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.neutral:not(.outline).active::after,.container.neutral:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.neutral.outline:hover::after{display:none}.container.neutral.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.neutral.outline.active::after,.container.neutral.outline:active::after{display:none}.container.neutral.outline.active,.container.neutral.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.neutral:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.success{color:var(--theme-color-success--contrast)}.container.success:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.success.active::after,.container.success:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.success:not(.outline).active::after,.container.success:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}.container.success.outline:hover::after{display:none}.container.success.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.success.outline.active::after,.container.success.outline:active::after{display:none}.container.success.outline.active,.container.success.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.success:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}";
 
 class Chip {
     constructor(hostRef) {
@@ -17163,7 +17231,9 @@ class DatePicker {
         this.setTranslations();
     }
     /**
-     * Get the currently selected date-range.
+     * Get the currently selected date or range. The object returned contains `from` and `to` properties.
+     * The property strings are formatted according to the `format` property and not affected by the `locale` property.
+     * The locale applied is always `en-US`.
      */
     async getCurrentDate() {
         var _a, _b, _c, _d;
@@ -17534,7 +17604,7 @@ class DatePicker {
         return rows;
     }
     render() {
-        return (hAsync(Host, { key: 'e48ee389619f52726ce579c6486cab63d62b6fef' }, hAsync("ix-date-time-card", { key: 'bd357a0e14678205965ea14d2e302eb828676d3c', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, hAsync("div", { key: 'bcab79091c34e84ce10de7be193717143d109810', class: "header", slot: "header" }, hAsync("ix-icon-button", { key: 'd8038a98795ccfde0ddc7d50fc59ad36597e031e', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: iconChevronLeftSmall, variant: "primary", class: "arrows" }), hAsync("div", { key: 'a3d445facefd7f74fffb663ed7aca2677d0673bb', class: "selector" }, hAsync("ix-button", { key: 'd680ee000bf2c20b58871a192fb8b53f673db588', ghost: true, ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, hAsync("span", { key: 'e84d83f994f6283c101dccf6278777504c2b8814', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), hAsync("ix-dropdown", { key: 'e0f414635d751b01162f7dd78caf266295f487ba', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start" }, hAsync("div", { key: '25dd57cad907373c60bb0c2cbb433e75e4a38e93', class: "wrapper" }, hAsync("div", { key: 'a014091ce50a1c7a27d050edff6cbeb15dee34a4', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), hAsync("div", { key: 'dc687dcea36e21d895945c4fdc18b993002d5d11', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (hAsync("div", { key: month, ref: (ref) => {
+        return (hAsync(Host, { key: '011bc22c43da64e818fd70fdb8b52aa6f81b64ed' }, hAsync("ix-date-time-card", { key: 'a3e20831d1f5ca1aa899120a00660719aef59009', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, hAsync("div", { key: '3cad0e27f55220a19cfd37aad33012732f06962a', class: "header", slot: "header" }, hAsync("ix-icon-button", { key: '42f993edb4d54615c30d4ff48ec1f95e77fd8813', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: iconChevronLeftSmall, variant: "primary", class: "arrows" }), hAsync("div", { key: '0fe2dcd04db1d0d9ad9c9dd4de6280e0f6578d8e', class: "selector" }, hAsync("ix-button", { key: '5e81bc26abe6cfd58e39b42592d2f1c5d2fccc12', ghost: true, ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, hAsync("span", { key: 'edb7cd8400d7805fb23d5a830c4b46d4fc763b80', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), hAsync("ix-dropdown", { key: '851077dec441fec824f03507a2672e2e44fd777c', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start" }, hAsync("div", { key: '15d8de911728d13e8ffa8ca4e5192147901103c4', class: "wrapper" }, hAsync("div", { key: 'cadb9c09b6c1fbe62e80878083b303cc5ae40908', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), hAsync("div", { key: '6ac2023cb31a57da0dd43b7a42f98701c3e9e8fc', 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);
                 }
@@ -17548,10 +17618,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: '8e718bbd113146a599e4c15c3ee88a2a4b2bbe1b', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: iconChevronRightSmall, variant: "primary", class: "arrows" })), hAsync("div", { key: '9424e9223eabaae8d851d8d7ab852a7d71a0724c', class: {
+            }, name: iconSingleCheck, size: "16" }), hAsync("div", null, hAsync("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), hAsync("ix-icon-button", { key: 'b9716c5f8d61fa95b9b20b13a4b332447b4ace83', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: iconChevronRightSmall, variant: "primary", class: "arrows" })), hAsync("div", { key: '27112a2af868bea27fab16a55f2f11e527000756', class: {
                 grid: true,
                 'grid--show-week-numbers': this.showWeekNumbers,
-            } }, this.showWeekNumbers && hAsync("div", { key: '2ff1c7ee249a2a44b9d7c69be17c4d86a1405c20', 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: '6f6ad17523eb68982b5bae1c8c7d2a2f23751cb5', 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;
@@ -17563,10 +17633,10 @@ class DatePicker {
                         }
                     }, tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur() }, day)) : (hAsync("div", null));
             })));
-        })), hAsync("div", { key: '3a152e3f2c01b4643be45570424ef15996b09fc9', class: {
+        })), hAsync("div", { key: 'ff5f39a59f1189f730709ba2cf5008ef208d9b76', class: {
                 button: true,
                 hidden: !this.range || !this.standaloneAppearance,
-            } }, hAsync("ix-button", { key: 'f485589cfc29f41eb354345bd015b36017e1ad86', onClick: () => this.onDone() }, this.i18nDone)))));
+            } }, hAsync("ix-button", { key: '6915318020c35007cc33d891351d38a855feaf6b', onClick: () => this.onDone() }, this.i18nDone)))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -20846,30 +20916,33 @@ class ExpandingSearch {
  * LICENSE file in the root directory of this source tree.
  */
 function hasAnyText({ invalidText, warningText, infoText, validText, helperText, }) {
-    return invalidText || warningText || infoText || validText || helperText;
+    return [invalidText, warningText, infoText, validText, helperText].some((text) => text === null || text === void 0 ? void 0 : text.trim());
 }
-function HelperText$1({ isInvalid, invalidText, isWarning, warningText, isInfo, infoText, isValid, validText, helperText, }) {
-    if (isInvalid && invalidText !== undefined) {
+function HelperText$1(props) {
+    var _a, _b, _c, _d, _e;
+    if (!hasAnyText(props))
+        return null;
+    if (props.isInvalid && ((_a = props.invalidText) === null || _a === void 0 ? void 0 : _a.trim()) !== '') {
         return (hAsync("ix-typography", { textColor: "alarm", class: "bottom-text" },
             hAsync("ix-icon", { class: "text-icon invalid", name: iconError, size: "16" }),
-            invalidText));
+            props.invalidText));
     }
-    if (isWarning && warningText !== undefined) {
+    if (props.isWarning && ((_b = props.warningText) === null || _b === void 0 ? void 0 : _b.trim()) !== '') {
         return (hAsync("ix-typography", { textColor: "std", class: "bottom-text" },
             hAsync("ix-icon", { class: "text-icon warning", name: iconWarning, size: "16" }),
-            warningText));
+            props.warningText));
     }
-    if (isInfo && infoText !== undefined) {
+    if (props.isInfo && ((_c = props.infoText) === null || _c === void 0 ? void 0 : _c.trim()) !== '') {
         return (hAsync("ix-typography", { textColor: "std", class: "bottom-text" },
             hAsync("ix-icon", { class: "text-icon info", name: iconInfo, size: "16" }),
-            infoText));
+            props.infoText));
     }
-    if (isValid && validText !== undefined) {
+    if (props.isValid && ((_d = props.validText) === null || _d === void 0 ? void 0 : _d.trim()) !== '') {
         return (hAsync("ix-typography", { textColor: "std", class: "bottom-text" },
             hAsync("ix-icon", { class: "text-icon valid", name: iconSuccess, size: "16" }),
-            validText));
+            props.validText));
     }
-    return (helperText && (hAsync("ix-typography", { class: "bottom-text", textColor: "soft" }, helperText)));
+    return (((_e = props.helperText) === null || _e === void 0 ? void 0 : _e.trim()) !== '' && (hAsync("ix-typography", { class: "bottom-text", textColor: "soft" }, props.helperText)));
 }
 
 const fieldWrapperCss = ":host{display:flex;position:relative;flex-direction:column}:host .slot-wrapper{display:flex;position:relative;align-items:center;justify-content:flex-start;gap:0.25rem}:host .field-bottom,:host .field-top{display:flex;flex-direction:row;position:relative;justify-content:space-between;gap:1rem;width:-moz-min-content;width:min-content;min-width:100%}:host .field-bottom .bottom-right{margin-left:auto;margin-right:0px}:host .bottom-text{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;gap:0.25rem;margin-right:0.25rem}:host .text-icon{margin:0.125rem}:host .text-icon.invalid{color:var(--theme-helper-icon--color--invalid)}:host .text-icon.info{color:var(--theme-helper-icon--color--info)}:host .text-icon.warning{color:var(--theme-helper-icon--color--warning)}:host .text-icon.valid{color:var(--theme-helper-icon--color--valid)}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}";
@@ -21752,7 +21825,6 @@ class IconToggleButton {
         this.pressedChange = createEvent(this, "pressedChange", 7);
         /**
          * Button variant.
-         * Important: Variant 'primary' can only be combined with either outline or ghost.
          */
         this.variant = 'secondary';
         /**
@@ -21787,26 +21859,6 @@ class IconToggleButton {
          */
         this.loading = false;
     }
-    isIllegalToggleButtonConfig() {
-        return this.variant === 'primary' && (this.outline || this.ghost);
-    }
-    logIllegalConfig() {
-        console.warn('iX toggle button with illegal configuration detected. Variant "primary" can only be combined with "outline" or "ghost".');
-    }
-    onVariantChange() {
-        if (this.isIllegalToggleButtonConfig()) {
-            this.logIllegalConfig();
-        }
-    }
-    onGhostChange() {
-        this.onVariantChange();
-    }
-    onOutlineChange() {
-        this.onVariantChange();
-    }
-    componentDidLoad() {
-        this.onVariantChange();
-    }
     dispatchPressedChange() {
         this.pressedChange.emit(!this.pressed);
     }
@@ -21836,14 +21888,9 @@ class IconToggleButton {
             },
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
-        return (hAsync(Host, { key: '43aaf90da7c0062c170fbc50d651e67850ef865b', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, hAsync(BaseIconButton, Object.assign({ key: 'a80de2b1b90b92f2884a37ba26db5b566608a4da' }, baseButtonProps))));
+        return (hAsync(Host, { key: '3511b5ff3f0ad954fc4b884358d416986c8305e2', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, hAsync(BaseIconButton, Object.assign({ key: '30a7e06ff3ea9ca5e8d59771ea68fc524b15c13b' }, baseButtonProps))));
     }
     get hostElement() { return getElement(this); }
-    static get watchers() { return {
-        "variant": ["onVariantChange"],
-        "ghost": ["onGhostChange"],
-        "outline": ["onOutlineChange"]
-    }; }
     static get style() { return iconToggleButtonCss; }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -22013,8 +22060,7 @@ class Input {
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (hAsync("ix-typography", { key: 'cb783fa80a4ce1fb46b2f69c81e5ca8eb37137f1', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (_a = this.value) === null || _a === void 0 ? void 0 :
-            _a.length, "/", this.maxLength)))));
+            } }))), !!this.maxLength && this.maxLength > 0 && (hAsync("ix-typography", { key: 'cb783fa80a4ce1fb46b2f69c81e5ca8eb37137f1', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
@@ -22223,8 +22269,13 @@ class IxActionCard {
          */
         this.selected = false;
     }
+    getSubheadingTextColor() {
+        return this.variant === 'outline' || this.variant === 'filled'
+            ? 'soft'
+            : undefined;
+    }
     render() {
-        return (hAsync(Host, { key: '8baf09c7b0f2aef34a37dd639fb1d2629d143692' }, hAsync("ix-card", { key: 'f21a1d74d716482bef98cb909da8192a78b8937a', selected: this.selected, variant: this.variant, class: 'pointer' }, hAsync("ix-card-content", { key: '0edcd9783ea5ad0d8471d6aa4c4aa398dc329cf4' }, this.icon ? (hAsync("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, hAsync("div", { key: 'be3798858f6fa19d8897d7cefb900fb1e14a4db2' }, this.heading ? (hAsync("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (hAsync("ix-typography", { format: "h5" }, this.subheading)) : null, hAsync("slot", { key: '5014e3efdb43a20519cca4b5c5bfd21d7009983b' }))))));
+        return (hAsync(Host, { key: '1c8cb43bedb4a692983567bf4e10b89692ef6ab2' }, hAsync("ix-card", { key: 'aa91f8b280d4c176d998fc60706d1b73e69d6e76', selected: this.selected, variant: this.variant, class: 'pointer' }, hAsync("ix-card-content", { key: '7ac34148bedbc82cf97ef2856c74f5b975a8b3ba' }, this.icon ? (hAsync("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, hAsync("div", { key: '11f6d5b7090a463553a991615a8fcd8869f583f5' }, this.heading ? (hAsync("ix-typography", { format: "h4" }, this.heading)) : null, this.subheading ? (hAsync("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, hAsync("slot", { key: '01ec0194a627bb396dba0e2afb61f0189748d112' }))))));
     }
     static get style() { return actionCardCss; }
     static get cmpMeta() { return {
@@ -22277,7 +22328,7 @@ class IxTypography {
                 color: IxTypography.getTextColor(this.textColor),
             };
         }
-        return (hAsync(Host, { key: '9c118b27a1e0dd92d405d34ab695fb2774c0a829', class: typographyClass, style: style }, hAsync("slot", { key: '9701d11796a942eb09023d747b6622c9634125c2' })));
+        return (hAsync(Host, { key: 'd85deeba2872e677b4c91f15a5545e2043984f74', class: typographyClass, style: style }, hAsync("slot", { key: 'e0a26435f7734ac58c554f0040725fe200972fa4' })));
     }
     static get style() { return typographyCss; }
     static get cmpMeta() { return {
@@ -23304,18 +23355,18 @@ class Menu {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
-            }, icon: iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, hAsync("div", { key: '7a02278bb6f805c707425c8e23f07c8cb720e8b9', onClick: (e) => this.onMenuItemsClick(e) }, hAsync("slot", { key: '00b073b177178b88f3020a00a4131eba0ca80c11', name: "bottom" })), hAsync("div", { key: 'bcc8a61e52c6b4785698f8335446d290645b0b9b', id: "popover-area" }), this.about ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, 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: '938b0cbcd3d7558837a18997ccd002fee30a03cf', onClick: (e) => this.onMenuItemsClick(e) }, hAsync("slot", { key: '5458d39911cf1e1ed247d8286900308274d92113', name: "bottom" })), hAsync("div", { key: 'd1d3ea6c1272d4bddf01826cd26014f2eb51e738', 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, 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, 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), hAsync("div", { key: 'cb9ca1d088c2c212c2e09a9d76867c569c613c8d', class: {
+            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null), hAsync("div", { key: 'd44b0a0729f071f009138f99060baf83f9ff1865', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, hAsync("div", { key: 'd115e9646a2835c246341ab1f89c4df691cffc40', class: 'menu-overlay-container' }, this.showSettings ? hAsync("slot", { name: "ix-menu-settings" }) : null), hAsync("div", { key: 'af358812d89ac0ac38dca2abd7030660e00ae876', class: 'menu-overlay-container' }, this.showAbout ? hAsync("slot", { name: "ix-menu-about" }) : null))));
+            } }, hAsync("div", { key: 'b0e3037ff556f5bbd99a8fd335e666e1f1708847', class: 'menu-overlay-container' }, this.showSettings ? hAsync("slot", { name: "ix-menu-settings" }) : null), hAsync("div", { key: 'e17fd327a492aa973209197b2c43b83c3e3674f1', class: 'menu-overlay-container' }, this.showAbout ? hAsync("slot", { name: "ix-menu-about" }) : null))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -25716,7 +25767,7 @@ class Panes {
     }; }
 }
 
-const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:default}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center}:host .container .with-icon{margin-right:0}:host .container.outline.icon{padding-left:0.4375rem;padding-right:0.4375rem}:host .container:not(.outline).icon{padding-left:0.5rem;padding-right:0.5rem}:host .with-gap{gap:0.25rem}:host(.align-left) .container{justify-content:flex-start}";
+const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;vertical-align:top;height:2rem;max-height:2rem;cursor:default}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center}:host .container .with-icon{margin-right:0}:host .container.outline.icon{padding-left:0.4375rem;padding-right:0.4375rem}:host .container:not(.outline).icon{padding-left:0.5rem;padding-right:0.5rem}:host .with-gap{gap:0.25rem}:host(.align-left) .container{justify-content:flex-start}";
 
 class Pill {
     constructor(hostRef) {
@@ -25855,23 +25906,26 @@ function getCircularSize(size) {
     }
 }
 const CircularProgress = (props, children) => {
-    const { value, size } = props;
+    const { value, size, alignment } = props;
     const sizeInPixel = getCircularSize(size);
     const radius = sizeInPixel / 2;
     const circumference = 2 * Math.PI * radius;
     const percentage = Math.round(circumference * ((100 - value) / 100));
     const slotInsideCircular = size === 'lg' || size === 'xl';
-    return (hAsync("div", { class: "circular-progress-container" },
+    return (hAsync("div", { class: {
+            'circular-progress-container': true,
+            [`align-${alignment}`]: !!alignment,
+        } },
         hAsync("svg", { width: sizeInPixel, height: sizeInPixel, viewBox: `-${sizeInPixel * 0.125} -${sizeInPixel * 0.125} ${sizeInPixel * 1.25} ${sizeInPixel * 1.25}`, version: "1.1", xmlns: "http://www.w3.org/2000/svg", style: { transform: 'rotate(-90deg)' } },
             hAsync("circle", { r: radius, cx: radius, cy: radius, fill: "transparent", stroke: "var(--theme-color-component-4)", "stroke-width": `3px` }),
-            percentage > 0 && (hAsync("circle", { r: radius, cx: radius, cy: radius, stroke: "var(--ix-progress-indicator-color)", "stroke-width": "3px", "stroke-linecap": "round", "stroke-dashoffset": `${percentage}px`, fill: "transparent", "stroke-dasharray": `${circumference}px` })),
+            percentage > 0 && (hAsync("circle", { r: radius, cx: radius, cy: radius, stroke: "var(--ix-progress-indicator-color)", "stroke-width": "3px", "stroke-dashoffset": `${percentage}px`, fill: "transparent", "stroke-dasharray": `${circumference}px` })),
             hAsync("foreignObject", { x: `0px`, y: `0px`, width: `${sizeInPixel}px`, height: `${sizeInPixel}px`, style: {
                     transform: `rotate(90deg) translate(0px, -${sizeInPixel}px)`,
                 } }, slotInsideCircular && (hAsync("div", { class: "slotted-container slotted-container-inside" }, children)))),
         !slotInsideCircular && hAsync("div", { class: "slotted-container" }, children)));
 };
 
-const progressIndicatorCss = ":host{display:block;position:relative;width:24rem;height:-moz-fit-content;height:fit-content}:host .progress-container{display:flex;align-items:center;gap:0.5rem;flex-wrap:nowrap}:host .label{margin:0.25rem 0px}:host .helper-text{display:flex;align-items:flex-start;margin:0.25rem 0px;gap:0.25rem}:host .helper-text ix-icon{margin:0.125rem}:host .helper-text.success ix-icon{color:var(--theme-color-success)}:host .helper-text.error{color:var(--theme-color-alarm-text)}:host .helper-text.error ix-icon{color:var(--theme-color-alarm)}:host .helper-text.info ix-icon{color:var(--theme-color-info)}:host .helper-text.warning ix-icon{color:var(--theme-color-warning)}:host .helper-text.paused ix-icon{color:var(--theme-color-neutral)}:host .helper-text.text-left{justify-content:flex-start}:host .helper-text.text-right{justify-content:flex-end}:host .helper-text.text-center{justify-content:center}:host .progress-indicator{--ix-progress-indicator-color:var(--theme-color-success);height:100%}:host .progress-indicator.xs{--ix-progress-indicator-height:0.125rem}:host .progress-indicator.sm{--ix-progress-indicator-height:0.25rem}:host .progress-indicator.md{--ix-progress-indicator-height:0.5rem}:host .progress-indicator.lg{--ix-progress-indicator-height:1rem}:host .progress-indicator.xl{--ix-progress-indicator-height:1.5rem}:host .progress-indicator.success{--ix-progress-indicator-color:var(--theme-color-success)}:host .progress-indicator.error{--ix-progress-indicator-color:var(--theme-color-alarm)}:host .progress-indicator.info{--ix-progress-indicator-color:var(--theme-color-info)}:host .progress-indicator.warning{--ix-progress-indicator-color:var(--theme-color-warning)}:host .progress-indicator.paused{--ix-progress-indicator-color:var(--theme-color-neutral)}:host(.linear) .progress-indicator.xs{--ix-progress-indicator-height:0.125rem}:host(.linear) .progress-indicator.sm{--ix-progress-indicator-height:0.25rem}:host(.linear) .progress-indicator.md{--ix-progress-indicator-height:0.5rem}:host(.linear) .progress-indicator.lg{--ix-progress-indicator-height:1rem}:host(.linear) .progress-indicator.xl{--ix-progress-indicator-height:1.5rem}:host(.linear) .linear-progress-container{width:100%;height:var(--ix-progress-indicator-height);background-color:var(--theme-color-component-4);border-radius:2px;overflow:hidden}:host(.linear) .progress{width:100%;height:100%;position:relative}:host(.linear) .progress-bar{height:100%;background-color:var(--ix-progress-indicator-color);transition:width 0.3s ease}:host(.linear) .linear-slot{min-width:2.25rem}:host(.circular) .circular-progress-container{display:flex;align-items:center;width:100%;gap:0.25rem}:host(.circular) .slotted-container{width:100%;height:100%}:host(.circular) .slotted-container.slotted-container-inside{display:flex;align-items:center;justify-content:center;width:100%;height:100%}";
+const progressIndicatorCss = ":host{display:block;position:relative;width:24rem;height:-moz-fit-content;height:fit-content}:host .progress-container{display:flex;width:100%;align-items:center;gap:0.25rem;flex-wrap:nowrap}:host .label{margin:0.5rem 0 0.25rem 0}:host .helper-text{display:flex;align-items:center;margin:0.25rem 0px;gap:0.25rem}:host .helper-text ix-icon{margin:0.125rem}:host .helper-text.default{color:var(--theme-color-soft-text)}:host .helper-text.success ix-icon{color:var(--theme-color-success)}:host .helper-text.error{color:var(--theme-color-alarm-text)}:host .helper-text.error ix-icon{color:var(--theme-color-alarm)}:host .helper-text.info ix-icon{color:var(--theme-color-info)}:host .helper-text.warning ix-icon{color:var(--theme-color-warning)}:host .helper-text.paused ix-icon{color:var(--theme-color-neutral)}:host .helper-text .text.align-left{text-align:start}:host .helper-text .text.align-right{text-align:end}:host .helper-text .text.align-center{text-align:center}:host .progress-indicator{display:flex;flex-direction:column;--ix-progress-indicator-color:var(--theme-color-dynamic);--ix-progress-indicator-margin:0.5rem 0;height:100%}:host .progress-indicator.text-center{align-items:center}:host .progress-indicator.text-left{align-items:flex-start}:host .progress-indicator.text-right{align-items:flex-end}:host .progress-indicator.xs{--ix-progress-indicator-height:0.125rem;--ix-progress-indicator-margin:0.25rem 0}:host .progress-indicator.sm{--ix-progress-indicator-height:0.25rem;--ix-progress-indicator-margin:0.375rem 0}:host .progress-indicator.md{--ix-progress-indicator-height:0.5rem}:host .progress-indicator.lg{--ix-progress-indicator-height:1rem}:host .progress-indicator.xl{--ix-progress-indicator-height:1.5rem}:host .progress-indicator.success{--ix-progress-indicator-color:var(--theme-color-success)}:host .progress-indicator.error{--ix-progress-indicator-color:var(--theme-color-alarm)}:host .progress-indicator.info{--ix-progress-indicator-color:var(--theme-color-info)}:host .progress-indicator.warning{--ix-progress-indicator-color:var(--theme-color-warning)}:host .progress-indicator.paused{--ix-progress-indicator-color:var(--theme-color-neutral)}:host(.linear) .progress-indicator.xs{--ix-progress-indicator-height:0.125rem}:host(.linear) .progress-indicator.sm{--ix-progress-indicator-height:0.25rem}:host(.linear) .progress-indicator.md{--ix-progress-indicator-height:0.5rem}:host(.linear) .progress-indicator.lg{--ix-progress-indicator-height:1rem}:host(.linear) .progress-indicator.xl{--ix-progress-indicator-height:1.5rem}:host(.linear) .linear-progress-container{width:100%;height:var(--ix-progress-indicator-height);background-color:var(--theme-color-component-4);border-radius:2px;overflow:hidden;margin:var(--ix-progress-indicator-margin, 0.5rem 0)}:host(.linear) .progress{width:100%;height:100%;position:relative}:host(.linear) .progress-bar{height:100%;background-color:var(--ix-progress-indicator-color);transition:width 0.3s ease}:host(.linear) .linear-slot{min-width:2.25rem}:host(.circular) .circular-progress-container{display:flex;align-items:center;width:100%;gap:0.25rem;margin:var(--ix-progress-indicator-margin, 0.5rem 0)}:host(.circular) .circular-progress-container.align-left{justify-content:flex-start}:host(.circular) .circular-progress-container.align-center{justify-content:center}:host(.circular) .circular-progress-container.align-right{justify-content:flex-end}:host(.circular) .slotted-container{height:100%}:host(.circular) .slotted-container.slotted-container-inside{display:flex;align-items:center;justify-content:center;width:100%;height:100%}";
 
 /**
  * @since 3.2.0
@@ -25941,22 +25995,27 @@ class ProgressIndicator {
         return (hAsync("div", { class: {
                 'helper-text': true,
                 [this.status]: true,
-                'text-left': this.textAlignment === 'left',
-                'text-center': this.textAlignment === 'center',
-                'text-right': this.textAlignment === 'right',
-            } }, icon && hAsync("ix-icon", { name: icon, size: "16" }), hAsync("div", { class: "text" }, this.helperText), hAsync("slot", { name: "helper-text" })));
+            } }, icon && hAsync("ix-icon", { name: icon, size: "16" }), hAsync("div", { class: {
+                text: true,
+                'align-left': this.textAlignment === 'left',
+                'align-center': this.textAlignment === 'center',
+                'align-right': this.textAlignment === 'right',
+            } }, this.helperText), hAsync("slot", { name: "helper-text" })));
     }
     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: 'cc4c823745da737d65f73c5b5525a58c634ded43', class: {
+        return (hAsync(Host, { key: '631e87bd03afc9f408d0784fc9c00d0cc26a13b0', class: {
                 linear: this.type === 'linear',
                 circular: this.type === 'circular',
-            }, tabIndex: -1 }, hAsync("div", { key: 'aa5c1b618b24bccd01611fcd2cb99cf9d496e94b', class: {
+            }, tabIndex: -1 }, hAsync("div", { key: 'd21e6a6c03bf6c7fb228fe8f3bc81c555ee1f401', class: {
                 'progress-indicator': true,
                 [this.size]: true,
                 [this.status]: true,
-            } }, this.label && (hAsync("ix-typography", { key: 'dd49d159c46f555a5e3385c361604d500477b9ba', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), hAsync("div", { key: '67f62d530de5dcc02f274aab3ddde419d56d383c', class: "progress-container" }, this.type === 'linear' ? (hAsync(Fragment, null, hAsync(LinearBar, { value: clampedValue }), hAsync("div", { class: "linear-slot" }, hAsync("slot", null)))) : (hAsync(CircularProgress, { 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()))));
+                ['text-center']: this.textAlignment === 'center',
+                ['text-left']: this.textAlignment === 'left',
+                ['text-right']: this.textAlignment === 'right',
+            } }, this.label && (hAsync("ix-typography", { key: '8b1a531de706ce65e978bf2f72d39f8c7e674a46', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), hAsync("div", { key: '678750aea2a5cbe004985ffff9b4034ed3aedb12', class: "progress-container" }, this.type === 'linear' ? (hAsync(Fragment, null, hAsync(LinearBar, { value: clampedValue }), hAsync("div", { class: "linear-slot" }, hAsync("slot", null)))) : (hAsync(CircularProgress, { 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; }
@@ -27949,10 +28008,11 @@ class Textarea {
         return Promise.resolve(this.touched);
     }
     render() {
+        var _a;
         return (hAsync(Host, { key: '1fccaf49740f1452031fcfc92af1b3011eda12a6', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, hAsync("ix-field-wrapper", { key: '1fb5b2a11f7874642bca77fb8ba43932a6ee8f23', 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: '6d6a2cf13f1ec2a45be59812b621ca58d72b35e7', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (this.value || '').length, "/", this.maxLength)), hAsync("div", { key: '707decc7f3af853270136f752f8e383c7f7af2e1', class: "input-wrapper" }, hAsync(TextareaElement, { key: 'd5dedc1696ef713d049b997c6068b5d18cf266f8', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.textareaHeight, textareaWidth: 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: '1fb5b2a11f7874642bca77fb8ba43932a6ee8f23', 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: '6d6a2cf13f1ec2a45be59812b621ca58d72b35e7', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)), hAsync("div", { key: '707decc7f3af853270136f752f8e383c7f7af2e1', class: "input-wrapper" }, hAsync(TextareaElement, { key: 'd5dedc1696ef713d049b997c6068b5d18cf266f8', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.textareaHeight, textareaWidth: 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;
             } })))));
@@ -28349,12 +28409,12 @@ class TimeInput {
         const invalidText = this.isInputInvalid
             ? this.i18nErrorTimeUnparsable
             : this.invalidText;
-        return (hAsync(Host, { key: '9c340254423471c518d3fcc3f8c917665931b629', class: {
+        return (hAsync(Host, { key: 'b31d10152055b27f4b469d9da39c5497c8abe798', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, hAsync("ix-field-wrapper", { key: 'f3ed6f6ad1fb86beda3c4b0a015590962fbe2fb8', 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: '1d7e6c7db0db891ece69853da2839e36ff563efd', "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: '7bc424c21a48d742cb613ab1dd1ab5c84d8c6215', 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: 'ffbd67dbbc3b1543d61f724cca1b171492073071', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
                 this.show = event.detail;
-            } }, hAsync("ix-time-picker", { key: '9545a2d9a75cc18c939b160048df241d0861dd63', 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, standaloneAppearance: false, 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: 'e0fd491f8ad3eb6694ab8ce872e442c42a7c7eae', 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, standaloneAppearance: false, 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;
             } }))));
@@ -28373,7 +28433,6 @@ class TimeInput {
             "name": [513],
             "placeholder": [513],
             "value": [1537],
-            "locale": [1],
             "format": [1],
             "required": [4],
             "helperText": [1, "helper-text"],
@@ -29130,7 +29189,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);box-shadow:var(--theme-toast--box-shadow);--animate-duration:300ms}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}: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:1rem}:host .toast-body .toast-content{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%}:host .toast-body .toast-content .toast-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);margin:0.25rem 0px}:host .toast-body .toast-content .toast-message{min-width:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}: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}:host .toast-progress-bar{position:absolute;bottom:0;height:0.25rem;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:300ms}: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 ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}: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{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);margin:0.25rem 0px}:host .toast-body .toast-content .toast-message{min-width:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}: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)}}";
 
 class Toast {
     constructor(hostRef) {
@@ -29188,7 +29247,7 @@ class Toast {
                 this.touched = false;
             }, onPointerEnter: () => {
                 this.touched = true;
-            } }, this.type || this.icon ? (hAsync("div", { class: "toast-icon" }, this.getIcon())) : null, hAsync("div", { key: 'd0b9c1ec9c8a215c1627a64246711ee8e2d53c5a', class: "toast-content" }, this.toastTitle ? (hAsync("div", { class: "toast-title" }, this.toastTitle)) : null, hAsync("div", { key: '16168044e69f155781109b10f2055125c5a26e92', class: "toast-message" }, hAsync("slot", { key: '7243f4cbbf8eb959e004fcbfdbf335bd3f35b9a0' }))), hAsync("div", { key: '01e917507ba67c7582040159aaa74d1a58bdbd93', class: "toast-close" }, hAsync("ix-icon-button", { key: '03591a35772c37cc411cef0b4872a65210ecd146', icon: iconClose, size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (hAsync("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+            } }, this.type || this.icon ? (hAsync("div", { class: "toast-icon" }, this.getIcon())) : null, hAsync("div", { key: 'd0b9c1ec9c8a215c1627a64246711ee8e2d53c5a', class: "toast-content" }, this.toastTitle ? (hAsync("div", { class: "toast-title" }, this.toastTitle)) : null, hAsync("div", { key: '16168044e69f155781109b10f2055125c5a26e92', class: "toast-message" }, hAsync("slot", { key: '7243f4cbbf8eb959e004fcbfdbf335bd3f35b9a0' })), hAsync("div", { key: '98b17a43302dbbf1a02e7aa80c0e633444552dd8', class: "toast-action" }, hAsync("slot", { key: '591fe676de35b19e3db696db10e95e05d2a2260e', name: "action" }))), hAsync("div", { key: '21022c2f7b6f4dcd46ebd244a9195748d25f4411', class: "toast-close" }, hAsync("ix-icon-button", { key: 'dab0272f366085371982da18127898d622bfcbfe', icon: iconClose, size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (hAsync("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
                 this.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {
@@ -29284,11 +29343,17 @@ class ToastContainer {
             const { detail } = event;
             removeToast(detail);
         });
-        if (typeof config.message === 'string') {
-            toast.innerText = config.message;
+        if (config.message) {
+            if (typeof config.message === 'string') {
+                toast.innerText = config.message;
+            }
+            else {
+                toast.appendChild(config.message);
+            }
         }
-        else {
-            toast.appendChild(config.message);
+        if (config.action && config.action instanceof HTMLElement) {
+            config.action.slot = 'action';
+            toast.appendChild(config.action);
         }
         (await this.hostContainer).appendChild(toast);
         return {
@@ -29299,10 +29364,10 @@ class ToastContainer {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'e11a34904500db71b2bfb75db025a8f578f9d1ca', class: {
+        return (hAsync(Host, { key: '756d59c7192a6abdfd8e15b10763b28a55a676c1', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
-            } }, hAsync("slot", { key: '512b57574d088e3ef0812e218702240465f9ad13' })));
+            } }, hAsync("slot", { key: '147f6eaac0d26f9ea3e31cc2214da04da039b2fd' })));
     }
     static get watchers() { return {
         "position": ["onPositionChange"]
@@ -29453,13 +29518,13 @@ class Toggle {
         if (this.indeterminate) {
             toggleText = this.textIndeterminate;
         }
-        return (hAsync(Host, { key: '3415b4e079cd64436f8e2dd98bb1175dc3925d81', class: {
+        return (hAsync(Host, { key: 'e3a0e2343aeb80cc6c8caf67d89346a090e76087', class: {
                 disabled: this.disabled,
-            }, onBlur: () => this.ixBlur.emit(), onFocus: () => (this.touched = true) }, hAsync("label", { key: '3d568b9845292571a79c0fb5529757b4ff58e8a0', class: "wrapper" }, hAsync("button", { key: '2883ec7d14e15414d6417d31ee32c8752872d601', role: "switch", "aria-checked": a11yBoolean(this.checked), class: {
+            }, onBlur: () => this.ixBlur.emit(), onFocus: () => (this.touched = true) }, hAsync("label", { key: 'ba452f648b014b1ff4a29e4aaa9a64fdf7874b60', class: "wrapper" }, hAsync("button", { key: 'a11e6c1b02a462931abe2c202dac1abb781cd302', role: "switch", "aria-checked": a11yBoolean(this.checked), class: {
                 switch: true,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, hAsync("div", { key: '2746fc5420dd92b77a724d7739baa456811bf7a8', class: "slider" })), hAsync("input", { key: '0e3f3389ab7def694385eba4bc7bfc25cbb47143', 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: 'c8f029de96d2a2745894484b06f240e297aa4b3e', class: "label" }, toggleText)))));
+            }, onClick: () => this.onCheckedChange(!this.checked) }, hAsync("div", { key: 'a4f2635a0ff547ed6db25aed3a022d13d44b875f', class: "slider" })), hAsync("input", { key: 'f56d624c9e9691dc726999957fbbdaf7422e3e8f', 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: '3ccc5308562c9d3b215926d4473ae1395135afe8', class: "label" }, toggleText)))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
@@ -29502,7 +29567,6 @@ class ToggleButton {
         this.pressedChange = createEvent(this, "pressedChange", 7);
         /**
          * Button variant.
-         * Important: Variant 'primary' can only be combined with either outline or ghost.
          */
         this.variant = 'secondary';
         /**
@@ -29526,26 +29590,6 @@ class ToggleButton {
          */
         this.pressed = false;
     }
-    isIllegalToggleButtonConfig() {
-        return this.variant === 'primary' && (this.outline || this.ghost);
-    }
-    logIllegalConfig() {
-        console.warn('iX toggle button with illegal configuration detected. Variant "primary" can only be combined with "outline" or "ghost".');
-    }
-    onVariantChange() {
-        if (this.isIllegalToggleButtonConfig()) {
-            this.logIllegalConfig();
-        }
-    }
-    onGhostChange() {
-        this.onVariantChange();
-    }
-    onOutlineChange() {
-        this.onVariantChange();
-    }
-    componentDidLoad() {
-        this.onVariantChange();
-    }
     dispatchPressedChange() {
         this.pressedChange.emit(!this.pressed);
     }
@@ -29566,15 +29610,10 @@ class ToggleButton {
                 'aria-pressed': a11yBoolean(this.pressed),
             },
         };
-        return (hAsync(Host, { key: '975d0dd4893a1c390a1cc1db4c15e8ed9a606a2e', class: {
+        return (hAsync(Host, { key: 'd550e94d50ef0584bb30affb9371859a24bdce36', class: {
                 disabled: this.disabled || this.loading,
-            } }, hAsync(BaseButton, Object.assign({ key: '5e85e358a9ff6678de96b2f37005e1900fc3edb6' }, baseButtonProps), hAsync("slot", { key: 'f66c39b4f492e5dca9a243d381b048034f5ed090' }))));
+            } }, hAsync(BaseButton, Object.assign({ key: 'a4c52556f48e05e824fe38b7558a6b6fef6bb242' }, baseButtonProps), hAsync("slot", { key: 'c57745ec5f4fbd82d45bea16d4a4561f8a6313e1' }))));
     }
-    static get watchers() { return {
-        "variant": ["onVariantChange"],
-        "ghost": ["onGhostChange"],
-        "outline": ["onOutlineChange"]
-    }; }
     static get style() { return toggleButtonCss; }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -29910,7 +29949,7 @@ class Tooltip {
         (_d = this.disposeDomChangeListener) === null || _d === void 0 ? void 0 : _d.call(this);
     }
     render() {
-        return (hAsync(Host, { key: '5babe56b183883f587a41524d26f8b520b26bcef', role: "tooltip", class: { visible: this.visible } }, hAsync("dialog", { key: '7b5474a818df18c5bba0ba28ff2773b511d4cb97', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, hAsync("div", { key: '367bf6d5097a22a54ec7527096da58a02c5b3700', class: "tooltip-container" }, hAsync("div", { key: '781f6c63f9801026a3c93f950aca03b18f73ac3b', class: "content-wrapper" }, hAsync("div", { key: 'a49b3d1172ef407a37793877fb34c90716b072a0', class: 'tooltip-title' }, hAsync("slot", { key: 'fc4be17999ecc4edb1784c40e5e8b1f04c34a225', name: "title-icon" }), hAsync("ix-typography", { key: '20d10a9c36108b6d88f1fe4ce480f8cbf58b317b', format: "h5" }, this.titleContent, hAsync("slot", { key: '368c9358546fd6e652043319b00986d467b09bde', name: "title-content" }))), hAsync("slot", { key: 'b4f21e40aee222a73c5c43503bbd15c1beb73c57' }), hAsync("div", { key: '4c4eeb5fa43f5f66719b7d1641372783ae7f692b', class: "arrow" }))))));
+        return (hAsync(Host, { key: 'c429f102fd357706ea6c8b6423060e5b4c37cca3', role: "tooltip", class: { visible: this.visible } }, hAsync("dialog", { key: 'e6bd5c88e9a421bdc5f00ffe6797456da357806e', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, hAsync("div", { key: '219d530872489cf052505902a274ac6cf0720a6d', class: "tooltip-container" }, hAsync("div", { key: '5ba0452505850843cc59d00574472b1c693a0198', class: "content-wrapper" }, hAsync("div", { key: 'ec8d43087983cbfdd0352d8ef7e5663010fcda63', class: 'tooltip-title' }, hAsync("slot", { key: '4b7250e1f753e136ae2c5934f060dabfcc619cde', name: "title-icon" }), hAsync("ix-typography", { key: '8d01d69dc4f220d40c54fa966461a5f34f434307', format: "h5" }, this.titleContent, hAsync("slot", { key: 'ea8d9fe0248900946d8cdac1035c9bcde5ad7324', name: "title-content" }))), hAsync("slot", { key: 'ac40d0f73bc33f92ecaed141dc16fd69ae0dd20d' }), hAsync("div", { key: 'a6997736c0ee33b102af1b2b8e887fc9a6061c2e', class: "arrow" }))))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return tooltipCss; }
@@ -30515,7 +30554,7 @@ class Tree {
         this.nodeClicked.emit(id);
     }
     render() {
-        return (hAsync(Host, { key: 'e314d9b97096f3986cd4cfbd0b39f2d2032b2db4', onClick: (event) => this.onTreeItemClick(event) }, hAsync("slot", { key: '16df5c02726d20484ce8bbfd707c4f225f12ade1' })));
+        return (hAsync(Host, { key: 'b29d3c73678d8dfdeb9d21d59207a6be4bf083b1', onClick: (event) => this.onTreeItemClick(event) }, hAsync("slot", { key: 'af4749b565da0d03882133d2a017f2210075a291' })));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -30552,17 +30591,17 @@ class TreeItem {
     }
     render() {
         var _a, _b, _c;
-        return (hAsync(Host, { key: 'c34661fa80dd866d9aab07331e2c040ef5e28861', class: {
+        return (hAsync(Host, { key: '3fe4e99945d9fbe6e15d877c1bd4f49e6fdb3b5b', class: {
                 selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected),
-            } }, hAsync("div", { key: '610f9a0b666896ffcb5de07e3aa08cb270427f62', class: "icon-toggle-container" }, this.hasChildren ? (hAsync("ix-icon", { name: iconChevronRight, size: "16", class: {
+            } }, hAsync("div", { key: 'ab596a52f690c8f8db0ce98f7017c7e54fa25b0b', class: "icon-toggle-container" }, this.hasChildren ? (hAsync("ix-icon", { name: iconChevronRight, size: "16", class: {
                 ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
             }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}`, onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.toggle.emit();
-            } })) : null), hAsync("div", { key: '7cb128b1d42ab9392459eceeef6cb4d79c45e252', class: "tree-node-container", onClick: () => {
+            } })) : null), hAsync("div", { key: '2b171b5b35e4ac52bd491722c24839a8abc7937f', class: "tree-node-container", onClick: () => {
                 this.itemClick.emit();
-            } }, hAsync("div", { key: '3c89226c0672bcf6e8a0d79040ec1552ab74f611', class: "tree-node-text" }, this.text), hAsync("slot", { key: 'cfa62c5788f768a56204aa57c70d9be7f509bb57' }))));
+            } }, hAsync("div", { key: '48497301ae880eb22f4fe47541b7391ef1ec0f67', class: "tree-node-text" }, this.text), hAsync("slot", { key: '647fab3ad5e48a43fd0d597df6baa0fe6f36f3ef' }))));
     }
     static get style() { return treeItemCss; }
     static get cmpMeta() { return {
@@ -30759,7 +30798,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: '29ff8dafbed7944021260f84e1c5f8ee96efe723' }, a11y, { "aria-disabled": disabled }), hAsync("div", { key: '2730737ebda0402b27253f48d6d79b21b351cfd7', class: {
+        return (hAsync(Host, Object.assign({ key: '290d7288ba9353fbcb6a1932e0c9d579fc6b971b' }, a11y, { "aria-disabled": disabled }), hAsync("div", { key: 'e31775cbc624c50f7a57572491d9c0ad15f5eceb', class: {
                 'file-upload-area': true,
                 'file-over': this.state !== UploadFileState.LOADING && this.isFileOver,
                 checking: this.state === UploadFileState.LOADING,
@@ -30769,9 +30808,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: 'f0059a89387c7d457060aefdcf697895803647f8' }, hAsync("input", { key: 'e7de98f28c8c038a998ed8e16fc105adc273392e', "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: '42e09e50cfbfaf8a9346954957a6738e4d5fb982' }, hAsync("input", { key: '54058e98899436fee4628e03a2a113d1a09fb6a1', "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: '1a9dfd68eb1181b7da90fa229a53385531a5d7e5', "aria-disabled": disabled, outline: true, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile)))));
+            }, accept: this.accept, disabled: disabled }), hAsync("ix-button", { key: 'f533ee7f7ecad63d2737bfa69e16db13884ed015', "aria-disabled": disabled, outline: true, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile)))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return uploadCss; }
@@ -30937,13 +30976,13 @@ class ValidationTooltip {
     }
     render() {
         var _a, _b, _c, _d;
-        return (hAsync(Host, { key: '24a20bd307d3286b2705abd3ee1b45a6827d2b02' }, hAsync("slot", { key: 'c7e67ecb25abff1543be230029581d1c27e0fb72' }), hAsync("div", { key: '34a919e2a1ff5a17202d38a9458d4645630b1d62', role: "tooltip", style: {
+        return (hAsync(Host, { key: '60d0a4ecdb91c93ae250d1906708eda5a67b2f77' }, hAsync("slot", { key: '69982e766bc15a1c8e37851c6aa7d5171a27d152' }), hAsync("div", { key: 'efde4ebde828c81512b106438049f473953d4325', 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: 'aae5ba647f98d1d8a4ffc1271c955d655c18d018', name: "tooltip-message" }), hAsync("div", { key: 'fe7f6be697b61a31fbd401cf5d3ca04152c4d655', id: "arrow" }))));
+            }, class: "validation-tooltip text-default" }, this.message, hAsync("slot", { key: '71cc0f6a941722bf84d4b8124c930dbd8c66a7a5', name: "tooltip-message" }), hAsync("div", { key: '20b1bc13d47052b8384ea289bb9ecde8ee5fb155', id: "arrow" }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -31003,20 +31042,17 @@ class WorkflowStep {
         this.customIconSlot = false;
     }
     selectedHandler() {
-        const selectedStyle = this.selected ? '--selected' : '';
-        if (this.status === 'open') {
-            this.iconName = this.selected ? iconCircleDot : iconCircle;
-            this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;
-        }
-        if (this.status === 'done' && !this.disabled) {
-            this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;
-        }
+        this.setWorkflowStepStyles();
     }
     watchPropHandler() {
+        this.setWorkflowStepStyles();
+    }
+    setWorkflowStepStyles() {
+        const selectedStyle = this.selected ? '--selected' : '';
         switch (this.status) {
             case 'open':
-                this.iconName = iconCircle;
-                this.iconColor = 'workflow-step-icon-default--color';
+                this.iconName = this.selected ? iconCircleDot : iconCircle;
+                this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;
                 break;
             case 'success':
                 this.iconName = iconSuccess;
@@ -31024,7 +31060,7 @@ class WorkflowStep {
                 break;
             case 'done':
                 this.iconName = iconCircleFilled;
-                this.iconColor = 'workflow-step-icon-done--color';
+                this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;
                 break;
             case 'warning':
                 this.iconName = iconWarning;
@@ -31052,20 +31088,40 @@ class WorkflowStep {
             this.selectedChanged.emit(this.hostElement);
         }
     }
+    getIconAriaLabel() {
+        switch (this.iconName) {
+            case iconCircle:
+                return 'Circle';
+            case iconCircleDot:
+                return 'Circle dot';
+            case iconCircleFilled:
+                return 'Done';
+            case iconError:
+                return 'Error';
+            case iconSuccess:
+                return 'Success';
+            case iconTriangleFilled:
+                return 'Warning';
+            case iconWarning:
+                return 'Warning';
+            default:
+                return 'Step';
+        }
+    }
     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" }))) : null;
-        return (hAsync(Host, { key: 'da87aa8ee423349ce9a4f67cf18d672cc0c699ad', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, hAsync("div", { key: 'd8527bf05a70d059750fb1942e25a552f6512e9c', tabIndex: 0, class: {
+        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: '02b56c6887d61bfd0dd7e40f368c23577a507c0a', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, hAsync("div", { key: 'f22ce0636ffae757d4117a730ea0a8bc5627f02d', tabIndex: 0, class: {
                 step: true,
                 selected: this.selected,
                 vertical: this.vertical,
                 disabled: this.disabled,
                 clickable: this.clickable && !this.disabled,
-            } }, hAsync("div", { key: '6210f0dda1a3c28b0452511bbcb192b077fd2430', class: "wrapper" }, hAsync("div", { key: 'ac115d567dd7d8e9cd2c8a5be0fad3b5138e1eb0', class: {
+            } }, hAsync("div", { key: '49e9f2837a152ad5daa8b0a836101a4028fb854b', class: "wrapper" }, hAsync("div", { key: '6b1b754d626f0732afc3df560629d40348757a86', class: {
                 line: true,
                 selected: this.selected,
                 [this.status]: true,
                 [this.position]: true,
-            } }), hAsync("div", { key: '56a9abb29057882d199deb15a1ff563b277301be', class: "iconWrapper" }, icons, hAsync("slot", { key: 'cebe111aadb1cae69717679e4175a8d2ed848183', name: "custom-icon" }))), hAsync("div", { key: '08a0bc27cfa1604e105f5533ca17c1e6432e3f7c', class: "text" }, hAsync("slot", { key: '034dbb9fc7256e363df377e784e27f01a18bd88d' })))));
+            } }), hAsync("div", { key: '11863f3baa7aafa5e4a5411b934a7f87d2dd4734', class: "iconWrapper" }, icons, hAsync("slot", { key: '9217f02246a3dd0fda947512fdca98746a7161ac', name: "custom-icon" }))), hAsync("div", { key: 'b3b2e26dd05bd8a9da17b4df88a7da9a1544d4d0', class: "text" }, hAsync("slot", { key: '8bc667571aaccea3841979dad60e77f281e37bc4' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -31170,7 +31226,7 @@ class WorkflowSteps {
         this.updateSteps();
     }
     render() {
-        return (hAsync(Host, { key: 'f8b17414e0483043ca19ea615424edd9d1186d65' }, hAsync("div", { key: '7e5e437796034eec9fca0f49d066649314e00ed6', class: { steps: true, vertical: this.vertical } }, hAsync("slot", { key: '80c3e814489566858fdd37d254ecb04a6be50846' }))));
+        return (hAsync(Host, { key: '41d0d007f20417b4a4ca49c20dcc32ef5874f809' }, hAsync("div", { key: '8c53b2f3d52d016015935f85fb931c463313c771', class: { steps: true, vertical: this.vertical } }, hAsync("slot", { key: 'b75aab1c71f721c461467261920b734170a9fa2c' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return workflowStepsCss; }
@@ -31401,7 +31457,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.35.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.36.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -41782,6 +41838,11 @@ function* streamToHtml(node, opts, output) {
         const mode = ` shadowrootmode="open"`;
         yield mode;
         output.currentLineWidth += mode.length;
+        if (node.delegatesFocus) {
+          const delegatesFocusAttr = " shadowrootdelegatesfocus";
+          yield delegatesFocusAttr;
+          output.currentLineWidth += delegatesFocusAttr.length;
+        }
       }
       const attrsLength = node.attributes.length;
       const attributes = opts.prettyHtml && attrsLength > 1 ? cloneAttributes(node.attributes, true) : node.attributes;
@@ -42347,15 +42408,25 @@ var MockElement = class extends MockNode2 {
     addEventListener(this, type, handler);
   }
   attachShadow(_opts) {
+    var _a2;
     const shadowRoot = this.ownerDocument.createDocumentFragment();
+    shadowRoot.delegatesFocus = (_a2 = _opts.delegatesFocus) != null ? _a2 : false;
     this.shadowRoot = shadowRoot;
     return shadowRoot;
   }
   blur() {
-    dispatchEvent(
-      this,
-      new MockFocusEvent("blur", { relatedTarget: null, bubbles: true, cancelable: true, composed: true })
-    );
+    if (isCurrentlyDispatching(this, "blur")) {
+      return;
+    }
+    markAsDispatching(this, "blur");
+    try {
+      dispatchEvent(
+        this,
+        new MockFocusEvent("blur", { relatedTarget: null, bubbles: true, cancelable: true, composed: true })
+      );
+    } finally {
+      unmarkAsDispatching(this, "blur");
+    }
   }
   get localName() {
     if (!this.nodeName) {
@@ -43097,6 +43168,28 @@ function setTextContent(elm, text) {
   const textNode = new MockTextNode(elm.ownerDocument, text);
   elm.appendChild(textNode);
 }
+var currentlyDispatching = /* @__PURE__ */ new WeakMap();
+function isCurrentlyDispatching(target, eventType) {
+  const dispatchingEvents = currentlyDispatching.get(target);
+  return dispatchingEvents != null && dispatchingEvents.has(eventType);
+}
+function markAsDispatching(target, eventType) {
+  let dispatchingEvents = currentlyDispatching.get(target);
+  if (dispatchingEvents == null) {
+    dispatchingEvents = /* @__PURE__ */ new Set();
+    currentlyDispatching.set(target, dispatchingEvents);
+  }
+  dispatchingEvents.add(eventType);
+}
+function unmarkAsDispatching(target, eventType) {
+  const dispatchingEvents = currentlyDispatching.get(target);
+  if (dispatchingEvents != null) {
+    dispatchingEvents.delete(eventType);
+    if (dispatchingEvents.size === 0) {
+      currentlyDispatching.delete(target);
+    }
+  }
+}
 
 // src/mock-doc/comment-node.ts
 var MockComment = class _MockComment extends MockNode2 {