@ionic/core 8.7.1-nightly.20250731 → 8.7.1

package/hydrate/index.js

@@ -392,7 +392,7 @@ const initialize = (userConfig = {}) => {
 const globalScripts = initialize;
 
 /*
- Stencil Hydrate Platform v4.33.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.36.2 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -597,11 +597,26 @@ 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({
+  var _a;
+  const shadowRoot = this.attachShadow({
     mode: "open",
     delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
   }) ;
+  if (globalStyleSheet === void 0) globalStyleSheet = (_a = createStyleSheetIfNeededAndSupported()) != null ? _a : null;
+  if (globalStyleSheet) {
+    {
+      shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
+    }
+  }
 }
 
 // src/runtime/runtime-constants.ts
@@ -727,7 +742,7 @@ function patchSlotNode(node) {
     const slotName = this["s-sn"];
     if (opts == null ? void 0 : opts.flatten) {
       console.error(`
-          Flattening is not supported for Stencil non-shadow slots. 
+          Flattening is not supported for Stencil non-shadow slots.
           You can use \`.childNodes\` to nested slot fallback content.
           If you have a particular use case, please open an issue on the Stencil repo.
         `);
@@ -771,6 +786,96 @@ 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, mode);
+  const style = styles.get(scopeId2);
+  if (!win$2.document) {
+    return scopeId2;
+  }
+  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win$2.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$2.document.createElement("style");
+          styleElm.innerHTML = style;
+          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win$2.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,
+    hostRef.$modeName$
+  );
+  if (flags & 10 /* needsScopedEncapsulation */) {
+    elm["s-sc"] = scopeId2;
+    elm.classList.add(scopeId2 + "-h");
+  }
+  endAttachStyles();
+};
+var getScopeId = (cmp, mode) => "sc-" + (mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -885,7 +990,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 = [];
@@ -896,15 +1001,17 @@ 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;
+    var _b2;
     if (!(memberFlags & 31 /* Prop */)) {
       return;
     }
     const attributeName = metaAttributeName || memberName;
     const attrVal = hostElm.getAttribute(attributeName);
     if (attrVal !== null) {
-      const attrPropVal = parsePropertyValue(attrVal, memberFlags);
-      (_a2 = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _a2.set(memberName, attrPropVal);
+      const attrPropVal = parsePropertyValue(
+        attrVal,
+        memberFlags);
+      (_b2 = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b2.set(memberName, attrPropVal);
     }
   });
   let scopeId2;
@@ -945,6 +1052,18 @@ 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$,
+          childRenderNode.$elm$.getAttribute("s-mode") 
+        );
+        const styleSheet = win$2.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;
@@ -960,7 +1079,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);
@@ -968,7 +1087,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;
@@ -989,17 +1110,22 @@ 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");
+        }
       }
     }
   }
@@ -1008,25 +1134,27 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
     });
   }
-  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-sn"] !== "string") {
+        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();
 };
@@ -1058,7 +1186,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         if (!parentVNode.$children$) {
           parentVNode.$children$ = [];
         }
-        if (scopeId2) {
+        if (scopeId2 && childIdSplt[0] === hostId) {
           node["s-si"] = scopeId2;
           childVNode.$attrs$.class += " " + scopeId2;
         }
@@ -1188,7 +1316,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();
     }
   }
@@ -1246,10 +1374,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(childVNode.$elm$, node);
+      internalCall(internalCall(node, "parentNode"), "insertBefore")(slot, node);
     }
     addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
     node.remove();
@@ -1264,8 +1392,8 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
     if (shouldMove) {
       parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
     }
-    childRenderNodes.push(childVNode);
   }
+  childRenderNodes.push(childVNode);
   slotNodes.push(childVNode);
   if (!parentVNode.$children$) {
     parentVNode.$children$ = [];
@@ -1273,13 +1401,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;
@@ -1304,6 +1436,12 @@ var findCorrespondingNode = (node, type) => {
 var safeSelector = (selector) => {
   const placeholders = [];
   let index = 0;
+  selector = selector.replace(/(\[\s*part~=\s*("[^"]*"|'[^']*')\s*\])/g, (_, keep) => {
+    const replaceBy = `__part-${index}__`;
+    placeholders.push(keep);
+    index++;
+    return replaceBy;
+  });
   selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
     const replaceBy = `__ph-${index}__`;
     placeholders.push(keep);
@@ -1323,6 +1461,7 @@ var safeSelector = (selector) => {
   return ss;
 };
 var restoreSafeSelector = (placeholders, content) => {
+  content = content.replace(/__part-(\d+)__/g, (_, index) => placeholders[+index]);
   return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
 };
 var _polyfillHost = "-shadowcsshost";
@@ -1335,6 +1474,7 @@ var _cssColonSlottedRe = new RegExp("(" + _polyfillSlotted + _parenSuffix, "gim"
 var _polyfillHostNoCombinator = _polyfillHost + "-no-combinator";
 var _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
 var _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
+var _safePartRe = /__part-(\d+)__/g;
 var _selectorReSuffix = "([>\\s~+[.,{:][\\s\\S]*)?$";
 var _polyfillHostRe = /-shadowcsshost/gim;
 var createSupportsRuleRe = (selector) => {
@@ -1549,7 +1689,7 @@ var applyStrictSelectorScope = (selector, scopeSelector2, hostSelector) => {
   let scopedSelector = "";
   let startIndex = 0;
   let res;
-  const sep = /( |>|\+|~(?!=))\s*/g;
+  const sep = /( |>|\+|~(?!=))(?=(?:[^()]*\([^()]*\))*[^()]*$)\s*/g;
   const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
   let shouldScope = !hasHost;
   while ((res = sep.exec(selector)) !== null) {
@@ -1561,7 +1701,7 @@ var applyStrictSelectorScope = (selector, scopeSelector2, hostSelector) => {
     startIndex = sep.lastIndex;
   }
   const part = selector.substring(startIndex);
-  shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+  shouldScope = !part.match(_safePartRe) && (shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1);
   scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
   return restoreSafeSelector(safeContent.placeholders, scopedSelector);
 };
@@ -1618,6 +1758,36 @@ var scopeCssText = (cssText, scopeId2, hostScopeId, slotScopeId, commentOriginal
 var replaceShadowCssHost = (cssText, hostScopeId) => {
   return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
 };
+var expandPartSelectors = (cssText) => {
+  const partSelectorRe = /([^\s,{][^,{]*?)::part\(\s*([^)]+?)\s*\)((?:[:.][^,{]*)*)/g;
+  return processRules(cssText, (rule) => {
+    if (rule.selector[0] === "@") {
+      return rule;
+    }
+    const selectors = rule.selector.split(",").map((sel) => {
+      const out = [sel.trim()];
+      let m;
+      while ((m = partSelectorRe.exec(sel)) !== null) {
+        const before = m[1].trimEnd();
+        const partNames = m[2].trim().split(/\s+/);
+        const after = m[3] || "";
+        const partAttr = partNames.flatMap((p) => {
+          if (!rule.selector.includes(`[part~="${p}"]`)) {
+            return [`[part~="${p}"]`];
+          }
+          return [];
+        }).join("");
+        const expanded = `${before} ${partAttr}${after}`;
+        if (!!partAttr && expanded !== sel.trim()) {
+          out.push(expanded);
+        }
+      }
+      return out.join(", ");
+    });
+    rule.selector = selectors.join(", ");
+    return rule;
+  });
+};
 var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
   const hostScopeId = scopeId2 + "-h";
   const slotScopeId = scopeId2 + "-s";
@@ -1653,28 +1823,33 @@ var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
     const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector), "g");
     cssText = cssText.replace(regex, slottedSelector.updatedSelector);
   });
+  cssText = expandPartSelectors(cssText);
   return cssText;
 };
 
 // src/runtime/mode.ts
 var computeMode = (elm) => modeResolutionChain.map((h2) => h2(elm)).find((m) => !!m);
 var setMode = (handler) => modeResolutionChain.push(handler);
-var getMode = (ref) => getHostRef(ref).$modeName$;
-var parsePropertyValue = (propValue, propType) => {
-  if (typeof propValue === "string" && (propValue.startsWith("{") && propValue.endsWith("}") || propValue.startsWith("[") && propValue.endsWith("]"))) {
-    try {
-      propValue = JSON.parse(propValue);
-      return propValue;
-    } catch (e) {
-    }
-  }
+var getMode = (ref) => {
+  var _a;
+  return (_a = getHostRef(ref)) == null ? void 0 : _a.$modeName$;
+};
+var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   if (typeof propValue === "string" && propValue.startsWith(SERIALIZED_PREFIX)) {
     propValue = deserializeProperty(propValue);
     return propValue;
   }
+  if (typeof propValue === "string" && (propType & 16 /* Unknown */ || propType & 8 /* Any */) && (propValue.startsWith("{") && propValue.endsWith("}") || propValue.startsWith("[") && propValue.endsWith("]"))) {
+    try {
+      return JSON.parse(propValue);
+    } catch (e) {
+    }
+  }
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
-      return propValue === "false" ? false : propValue === "" || !!propValue;
+      {
+        return propValue === "false" ? false : propValue === "" || !!propValue;
+      }
     }
     if (propType & 2 /* Number */) {
       return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
@@ -1686,7 +1861,10 @@ var parsePropertyValue = (propValue, propType) => {
   }
   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) => {
@@ -1707,96 +1885,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, mode);
-  const style = styles.get(scopeId2);
-  if (!win$2.document) {
-    return scopeId2;
-  }
-  styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win$2.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 = document.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`) || win$2.document.createElement("style");
-          styleElm.innerHTML = style;
-          const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win$2.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,
-    hostRef.$modeName$
-  );
-  if (flags & 10 /* needsScopedEncapsulation */) {
-    elm["s-sc"] = scopeId2;
-    elm.classList.add(scopeId2 + "-h");
-  }
-  endAttachStyles();
-};
-var getScopeId = (cmp, mode) => "sc-" + (mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => {
   if (oldValue === newValue) {
     return;
@@ -1807,12 +1895,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)));
@@ -2244,6 +2333,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;
@@ -2459,6 +2550,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) => {
@@ -2599,10 +2696,16 @@ var forceUpdate = (ref) => {
   return false;
 };
 var appDidLoad = (who) => {
+  var _a;
   if (BUILD.asyncQueue) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
   nextTick(() => emitEvent(win$2, "appload", { detail: { namespace: NAMESPACE } }));
+  {
+    if ((_a = plt.$orgLocNodes$) == null ? void 0 : _a.size) {
+      plt.$orgLocNodes$.clear();
+    }
+  }
 };
 var safeCall$1 = (instance, method, arg, elm) => {
   if (instance && instance[method]) {
@@ -2635,6 +2738,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).`
@@ -2644,7 +2750,9 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
   const instance = hostRef.$lazyInstance$ ;
-  newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
+  newVal = parsePropertyValue(
+    newVal,
+    cmpMeta.$members$[propName][0]);
   const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
@@ -2708,6 +2816,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)) {
@@ -2715,7 +2826,11 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               } else if (!ref.$instanceValues$.get(memberName) && currentValue) {
                 ref.$instanceValues$.set(memberName, currentValue);
               }
-              origSetter.apply(this, [parsePropertyValue(newValue, memberFlags)]);
+              origSetter.apply(this, [
+                parsePropertyValue(
+                  newValue,
+                  memberFlags)
+              ]);
               newValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               setValue(this, memberName, newValue, cmpMeta);
               return;
@@ -2797,8 +2912,12 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       const scopeId2 = getScopeId(cmpMeta, hostRef.$modeName$);
       if (!styles.has(scopeId2)) {
         const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
-        if (cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
-          style = scopeCss(style, scopeId2);
+        {
+          if (cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
+            style = scopeCss(style, scopeId2);
+          } else if (needsScopedSSR()) {
+            style = expandPartSelectors(style);
+          }
         }
         registerStyle(scopeId2, style);
         endRegisterStyles();
@@ -2823,6 +2942,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 */)) {
@@ -3138,7 +3260,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);
               }
@@ -3181,6 +3303,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
   const orgDocumentCreateElement = win2.document.createElement;
   const orgDocumentCreateElementNS = win2.document.createElementNS;
   const resolved2 = Promise.resolve();
+  setScopedSSR(opts);
   let tmrId;
   let ranCompleted = false;
   function hydratedComplete() {
@@ -3289,13 +3412,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,
@@ -3542,6 +3668,11 @@ var Build = {
   isBrowser: false};
 var styles = /* @__PURE__ */ new Map();
 
+var setScopedSSR = (opts) => {
+  scopedSSR = opts.serializeShadowRoot !== false && opts.serializeShadowRoot !== "declarative-shadow-dom";
+};
+var needsScopedSSR = () => scopedSSR;
+var scopedSSR = false;
 
 const transitionEndAsync = (el, expectedDuration = 0) => {
     return new Promise((resolve) => {
@@ -4234,7 +4365,7 @@ class Accordion {
         md: accordionMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 57,
+        "$flags$": 313,
         "$tagName$": "ion-accordion",
         "$members$": {
             "value": [1],
@@ -4486,7 +4617,7 @@ class AccordionGroup {
         md: accordionGroupMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-accordion-group",
         "$members$": {
             "animated": [4],
@@ -7676,7 +7807,7 @@ class ActionSheet {
         md: actionSheetMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-action-sheet",
         "$members$": {
             "overlayIndex": [2, "overlay-index"],
@@ -8409,7 +8540,7 @@ class Alert {
         md: alertMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-alert",
         "$members$": {
             "overlayIndex": [2, "overlay-index"],
@@ -8483,7 +8614,7 @@ class App {
     get el() { return getElement(this); }
     static get style() { return appCss; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 256,
         "$tagName$": "ion-app",
         "$members$": {
             "setFocus": [64]
@@ -8510,7 +8641,7 @@ class Avatar {
         md: avatarMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-avatar",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -8608,7 +8739,7 @@ class BackButton {
         md: backButtonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-back-button",
         "$members$": {
             "color": [513],
@@ -8671,7 +8802,7 @@ class Backdrop {
         md: backdropMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-backdrop",
         "$members$": {
             "visible": [4],
@@ -8706,7 +8837,7 @@ class Badge {
         md: badgeMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-badge",
         "$members$": {
             "color": [513]
@@ -8813,7 +8944,7 @@ class Breadcrumb {
         md: breadcrumbMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-breadcrumb",
         "$members$": {
             "collapsed": [4],
@@ -8967,7 +9098,7 @@ class Breadcrumbs {
         md: breadcrumbsMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-breadcrumbs",
         "$members$": {
             "color": [513],
@@ -9244,7 +9375,7 @@ class Button {
         md: buttonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-button",
         "$members$": {
             "color": [513],
@@ -9304,7 +9435,7 @@ class Buttons {
         md: buttonsMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 38,
+        "$flags$": 294,
         "$tagName$": "ion-buttons",
         "$members$": {
             "collapse": [4]
@@ -9383,7 +9514,7 @@ class Card {
         md: cardMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-card",
         "$members$": {
             "color": [513],
@@ -9427,7 +9558,7 @@ class CardContent {
         md: cardContentMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-card-content",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -9466,7 +9597,7 @@ class CardHeader {
         md: cardHeaderMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-card-header",
         "$members$": {
             "color": [513],
@@ -9501,7 +9632,7 @@ class CardSubtitle {
         md: cardSubtitleMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-card-subtitle",
         "$members$": {
             "color": [513]
@@ -9535,7 +9666,7 @@ class CardTitle {
         md: cardTitleMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-card-title",
         "$members$": {
             "color": [513]
@@ -9729,7 +9860,7 @@ class Checkbox {
         md: checkboxMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-checkbox",
         "$members$": {
             "color": [513],
@@ -9786,7 +9917,7 @@ class Chip {
         md: chipMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-chip",
         "$members$": {
             "color": [513],
@@ -9911,7 +10042,7 @@ class Col {
     }
     static get style() { return colCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-col",
         "$members$": {
             "offset": [1],
@@ -10318,7 +10449,7 @@ class Content {
     get el() { return getElement(this); }
     static get style() { return contentCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-content",
         "$members$": {
             "color": [513],
@@ -13988,7 +14119,7 @@ class Datetime {
         md: datetimeMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-datetime",
         "$members$": {
             "color": [1],
@@ -14390,7 +14521,7 @@ class DatetimeButton {
         md: datetimeButtonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-datetime-button",
         "$members$": {
             "color": [513],
@@ -14475,7 +14606,7 @@ class Fab {
     }; }
     static get style() { return fabCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-fab",
         "$members$": {
             "horizontal": [1],
@@ -14593,7 +14724,7 @@ class FabButton {
         md: fabButtonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-fab-button",
         "$members$": {
             "color": [513],
@@ -14653,7 +14784,7 @@ class FabList {
     }; }
     static get style() { return fabListCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-fab-list",
         "$members$": {
             "activated": [4],
@@ -15118,7 +15249,7 @@ class Footer {
         md: footerMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 36,
+        "$flags$": 292,
         "$tagName$": "ion-footer",
         "$members$": {
             "collapse": [1],
@@ -15150,7 +15281,7 @@ class Grid {
     }
     static get style() { return gridCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-grid",
         "$members$": {
             "fixed": [4]
@@ -15516,7 +15647,7 @@ class Header {
         md: headerMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 36,
+        "$flags$": 292,
         "$tagName$": "ion-header",
         "$members$": {
             "collapse": [1],
@@ -15724,7 +15855,7 @@ class Icon {
     }; }
     static get style() { return iconCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-icon",
         "$members$": {
             "mode": [1025],
@@ -15842,7 +15973,7 @@ class Img {
     }; }
     static get style() { return imgCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-img",
         "$members$": {
             "alt": [1],
@@ -16075,7 +16206,7 @@ class InfiniteScroll {
     }; }
     static get style() { return infiniteScrollCss; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 256,
         "$tagName$": "ion-infinite-scroll",
         "$members$": {
             "threshold": [1],
@@ -16125,7 +16256,7 @@ class InfiniteScrollContent {
         md: infiniteScrollContentMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-infinite-scroll-content",
         "$members$": {
             "loadingSpinner": [1025, "loading-spinner"],
@@ -16965,7 +17096,7 @@ class Input {
         md: inputMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 38,
+        "$flags$": 294,
         "$tagName$": "ion-input",
         "$members$": {
             "color": [513],
@@ -17645,7 +17776,7 @@ class InputOTP {
         md: inputOtpMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 38,
+        "$flags$": 294,
         "$tagName$": "ion-input-otp",
         "$members$": {
             "autocapitalize": [1],
@@ -17752,7 +17883,7 @@ class InputPasswordToggle {
         md: mdInputPasswordToggleCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-input-password-toggle",
         "$members$": {
             "color": [513],
@@ -18021,7 +18152,7 @@ class Item {
         md: itemMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-item",
         "$members$": {
             "color": [513],
@@ -18084,7 +18215,7 @@ class ItemDivider {
         md: itemDividerMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-item-divider",
         "$members$": {
             "color": [513],
@@ -18118,7 +18249,7 @@ class ItemGroup {
         md: itemGroupMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-item-group",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -18189,7 +18320,7 @@ class ItemOption {
         md: itemOptionMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-item-option",
         "$members$": {
             "color": [513],
@@ -18252,7 +18383,7 @@ class ItemOptions {
         md: itemOptionsMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-item-options",
         "$members$": {
             "side": [1],
@@ -18710,7 +18841,7 @@ class ItemSliding {
     }; }
     static get style() { return itemSlidingCss; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 256,
         "$tagName$": "ion-item-sliding",
         "$members$": {
             "disabled": [4],
@@ -18818,7 +18949,7 @@ class Label {
         md: labelMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 38,
+        "$flags$": 294,
         "$tagName$": "ion-label",
         "$members$": {
             "color": [513],
@@ -18877,7 +19008,7 @@ class List {
         md: listMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-list",
         "$members$": {
             "lines": [1],
@@ -18914,7 +19045,7 @@ class ListHeader {
         md: listHeaderMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-list-header",
         "$members$": {
             "color": [513],
@@ -19206,7 +19337,7 @@ class Loading {
         md: loadingMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-loading",
         "$members$": {
             "overlayIndex": [2, "overlay-index"],
@@ -20261,7 +20392,7 @@ class Menu {
         md: menuMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-menu",
         "$members$": {
             "contentId": [513, "content-id"],
@@ -20372,7 +20503,7 @@ class MenuButton {
         md: menuButtonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-menu-button",
         "$members$": {
             "color": [513],
@@ -20424,7 +20555,7 @@ class MenuToggle {
     }
     static get style() { return menuToggleCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-menu-toggle",
         "$members$": {
             "menu": [1],
@@ -23110,7 +23241,7 @@ class Modal {
         md: modalMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-modal",
         "$members$": {
             "hasController": [4, "has-controller"],
@@ -24054,7 +24185,7 @@ class Nav {
     }; }
     static get style() { return navCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-nav",
         "$members$": {
             "delegate": [16],
@@ -24122,7 +24253,7 @@ class NavLink {
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 256,
         "$tagName$": "ion-nav-link",
         "$members$": {
             "component": [1],
@@ -24158,7 +24289,7 @@ class Note {
         md: noteMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-note",
         "$members$": {
             "color": [513]
@@ -24646,7 +24777,7 @@ let Picker$1 = class Picker {
         md: pickerMdCss$1
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-picker",
         "$members$": {
             "exitInputMode": [64]
@@ -24927,7 +25058,7 @@ class Picker {
         md: pickerMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-picker-legacy",
         "$members$": {
             "overlayIndex": [2, "overlay-index"],
@@ -25565,7 +25696,7 @@ class PickerColumn {
     }; }
     static get style() { return pickerColumnCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-picker-column",
         "$members$": {
             "disabled": [4],
@@ -25933,7 +26064,7 @@ class PickerColumnCmp {
         md: pickerColumnMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-picker-legacy-column",
         "$members$": {
             "col": [16]
@@ -26053,7 +26184,7 @@ class PickerColumnOption {
         md: pickerColumnOptionMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-picker-column-option",
         "$members$": {
             "disabled": [4],
@@ -27464,7 +27595,7 @@ class Popover {
         md: popoverMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-popover",
         "$members$": {
             "hasController": [4, "has-controller"],
@@ -27569,7 +27700,7 @@ class ProgressBar {
         md: progressBarMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-progress-bar",
         "$members$": {
             "type": [1],
@@ -27766,7 +27897,7 @@ class Radio {
         md: radioMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-radio",
         "$members$": {
             "color": [513],
@@ -27989,7 +28120,7 @@ class RadioGroup {
         md: radioGroupMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 36,
+        "$flags$": 292,
         "$tagName$": "ion-radio-group",
         "$members$": {
             "allowEmptySelection": [4, "allow-empty-selection"],
@@ -28765,7 +28896,7 @@ class Range {
         md: rangeMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-range",
         "$members$": {
             "color": [513],
@@ -29720,7 +29851,7 @@ class Refresher {
         md: refresherMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-refresher",
         "$members$": {
             "pullMin": [2, "pull-min"],
@@ -29926,7 +30057,7 @@ class RefresherContent {
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 256,
         "$tagName$": "ion-refresher-content",
         "$members$": {
             "pullingIcon": [1025, "pulling-icon"],
@@ -29971,7 +30102,7 @@ class Reorder {
         md: reorderMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-reorder",
         "$members$": undefined,
         "$listeners$": [[2, "click", "onClick"]],
@@ -30071,7 +30202,7 @@ class ReorderGroup {
         const heights = this.cachedHeights;
         heights.length = 0;
         const el = this.el;
-        const children = el.children;
+        const children = el.__children;
         if (!children || children.length === 0) {
             return;
         }
@@ -30161,7 +30292,7 @@ class ReorderGroup {
     completeReorder(listOrReorder) {
         const selectedItemEl = this.selectedItemEl;
         if (selectedItemEl && this.state === 2 /* ReorderGroupState.Complete */) {
-            const children = this.el.children;
+            const children = this.el.__children;
             const len = children.length;
             const toIndex = this.lastToIndex;
             const fromIndex = indexForItem(selectedItemEl);
@@ -30203,7 +30334,7 @@ class ReorderGroup {
     /********* DOM WRITE ********* */
     reorderMove(fromIndex, toIndex) {
         const itemHeight = this.selectedItemHeight;
-        const children = this.el.children;
+        const children = this.el.__children;
         for (let i = 0; i < children.length; i++) {
             const style = children[i].style;
             let value = '';
@@ -30234,7 +30365,7 @@ class ReorderGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'f45457bfd5d611d81767a246259abab468ee0714', class: {
+        return (hAsync(Host, { key: '8996890164b63f4aa68779f26e4f308958582a76', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -30246,7 +30377,7 @@ class ReorderGroup {
     }; }
     static get style() { return reorderGroupCss; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 256,
         "$tagName$": "ion-reorder-group",
         "$members$": {
             "disabled": [4],
@@ -30358,7 +30489,7 @@ class RippleEffect {
     get el() { return getElement(this); }
     static get style() { return rippleEffectCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-ripple-effect",
         "$members$": {
             "type": [1],
@@ -31316,7 +31447,7 @@ class RouterLink {
     }
     static get style() { return routerLinkCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-router-link",
         "$members$": {
             "color": [513],
@@ -31517,7 +31648,7 @@ class RouterOutlet {
     }; }
     static get style() { return routerOutletCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-router-outlet",
         "$members$": {
             "mode": [1025],
@@ -31546,7 +31677,7 @@ class Row {
     }
     static get style() { return rowCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-row",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -32016,7 +32147,7 @@ class Searchbar {
         md: searchbarMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-searchbar",
         "$members$": {
             "color": [513],
@@ -32617,7 +32748,7 @@ class Segment {
         md: segmentMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-segment",
         "$members$": {
             "color": [513],
@@ -32770,7 +32901,7 @@ class SegmentButton {
         md: segmentButtonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-segment-button",
         "$members$": {
             "contentId": [513, "content-id"],
@@ -32798,7 +32929,7 @@ class SegmentContent {
     }
     static get style() { return segmentContentCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-segment-content",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -32918,7 +33049,7 @@ class SegmentView {
         md: segmentViewMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-segment-view",
         "$members$": {
             "disabled": [4],
@@ -33692,7 +33823,7 @@ class Select {
         md: selectMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-select",
         "$members$": {
             "cancelText": [1, "cancel-text"],
@@ -33762,11 +33893,11 @@ const textForValue = (opts, value, compareWith) => {
 let selectIds = 0;
 const OPTION_CLASS = 'select-interface-option';
 
-const ionicSelectModalMdCss = ".sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container){display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
+const ionicSelectModalMdCss = ".sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~=\"container\"]{display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~=\"label\"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
 
 const selectModalIosCss = ".sc-ion-select-modal-ios-h{height:100%}ion-item.sc-ion-select-modal-ios{--inner-padding-end:0}ion-radio.sc-ion-select-modal-ios::after{bottom:0;position:absolute;width:calc(100% - 0.9375rem - 16px);border-width:0px 0px 0.55px 0px;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));content:\"\"}ion-radio.sc-ion-select-modal-ios::after{inset-inline-start:calc(0.9375rem + 16px)}";
 
-const selectModalMdCss = ".sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(container){display:none}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
+const selectModalMdCss = ".sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(container),ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md [part~=\"container\"]{display:none}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(label),ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md [part~=\"label\"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
 
 class SelectModal {
     constructor(hostRef) {
@@ -33846,7 +33977,7 @@ class SelectModal {
         md: selectModalMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-select-modal",
         "$members$": {
             "header": [1],
@@ -33876,7 +34007,7 @@ class SelectOption {
     get el() { return getElement(this); }
     static get style() { return selectOptionCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-select-option",
         "$members$": {
             "disabled": [4],
@@ -33891,7 +34022,7 @@ let selectOptionIds = 0;
 
 const selectPopoverIosCss = ".sc-ion-select-popover-ios-h ion-list.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-ios,ion-label.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-ios-h{overflow-y:auto}";
 
-const selectPopoverMdCss = ".sc-ion-select-popover-md-h ion-list.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-md,ion-label.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-md-h{overflow-y:auto}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(container){display:none}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-popover-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-popover-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-popover-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
+const selectPopoverMdCss = ".sc-ion-select-popover-md-h ion-list.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-md,ion-label.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-md-h{overflow-y:auto}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(container),ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md [part~=\"container\"]{display:none}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(label),ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md [part~=\"label\"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-popover-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-popover-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-popover-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
 
 /**
  * @internal
@@ -33996,7 +34127,7 @@ class SelectPopover {
         md: selectPopoverMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-select-popover",
         "$members$": {
             "header": [1],
@@ -34047,7 +34178,7 @@ class SkeletonText {
     get el() { return getElement(this); }
     static get style() { return skeletonTextCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-skeleton-text",
         "$members$": {
             "animated": [4]
@@ -34102,7 +34233,7 @@ class Spinner {
     }
     static get style() { return spinnerCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-spinner",
         "$members$": {
             "color": [513],
@@ -34211,7 +34342,7 @@ class SplitPane {
         md: splitPaneMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-split-pane",
         "$members$": {
             "contentId": [513, "content-id"],
@@ -34275,7 +34406,7 @@ class Tab {
     }; }
     static get style() { return tabCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-tab",
         "$members$": {
             "active": [1028],
@@ -34361,7 +34492,7 @@ class TabBar {
         md: tabBarMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-tab-bar",
         "$members$": {
             "color": [513],
@@ -34466,7 +34597,7 @@ class TabButton {
         md: tabButtonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-tab-button",
         "$members$": {
             "disabled": [4],
@@ -34638,7 +34769,7 @@ class Tabs {
     get el() { return getElement(this); }
     static get style() { return tabsCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-tabs",
         "$members$": {
             "useRouter": [1028, "use-router"],
@@ -34679,7 +34810,7 @@ class Text {
     }
     static get style() { return textCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-text",
         "$members$": {
             "color": [513]
@@ -35147,7 +35278,7 @@ class Textarea {
         md: textareaMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 38,
+        "$flags$": 294,
         "$tagName$": "ion-textarea",
         "$members$": {
             "color": [513],
@@ -35200,7 +35331,7 @@ class Thumbnail {
     }
     static get style() { return thumbnailCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-thumbnail",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -36069,7 +36200,7 @@ class Toast {
         md: toastMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-toast",
         "$members$": {
             "overlayIndex": [2, "overlay-index"],
@@ -36382,7 +36513,7 @@ class Toggle {
         md: toggleMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-toggle",
         "$members$": {
             "color": [513],
@@ -36490,7 +36621,7 @@ class Toolbar {
         md: toolbarMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-toolbar",
         "$members$": {
             "color": [513]
@@ -36543,7 +36674,7 @@ class ToolbarTitle {
         md: titleMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-title",
         "$members$": {
             "color": [513],
@@ -37554,7 +37685,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.33.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.36.2 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -38279,8 +38410,21 @@ function triggerEventListener(elm, ev) {
   } else if (elm.parentElement == null && elm.tagName === "HTML") {
     triggerEventListener(elm.ownerDocument, ev);
   } else {
-    triggerEventListener(elm.parentElement, ev);
+    const nextTarget = getNextEventTarget(elm, ev);
+    triggerEventListener(nextTarget, ev);
+  }
+}
+function getNextEventTarget(elm, ev) {
+  if (elm.parentElement) {
+    return elm.parentElement;
+  }
+  if (elm.host && ev.composed) {
+    return elm.host;
   }
+  if (ev.composed && elm.parentNode && elm.parentNode.host) {
+    return elm.parentNode.host;
+  }
+  return null;
 }
 function dispatchEvent(currentTarget, ev) {
   ev.target = currentTarget;
@@ -47922,6 +48066,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;
@@ -48440,6 +48589,15 @@ var MockNode2 = class {
   set textContent(value) {
     this._nodeValue = String(value);
   }
+  addEventListener(type, handler) {
+    addEventListener(this, type, handler);
+  }
+  removeEventListener(type, handler) {
+    removeEventListener(this, type, handler);
+  }
+  dispatchEvent(ev) {
+    return dispatchEvent(this, ev);
+  }
 };
 MockNode2.ELEMENT_NODE = 1;
 MockNode2.TEXT_NODE = 3;
@@ -48478,15 +48636,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) {
@@ -49228,6 +49396,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 {