voyager-ionic-core 8.6.1 → 8.7.2

package/hydrate/index.mjs

@@ -390,7 +390,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) => {
@@ -595,11 +595,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
@@ -725,7 +740,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.
         `);
@@ -769,6 +784,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;
@@ -883,7 +988,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 = [];
@@ -894,15 +999,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;
@@ -943,6 +1050,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;
@@ -958,7 +1077,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);
@@ -966,7 +1085,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;
@@ -987,17 +1108,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");
+        }
       }
     }
   }
@@ -1006,25 +1132,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();
 };
@@ -1056,7 +1184,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;
         }
@@ -1186,7 +1314,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();
     }
   }
@@ -1244,10 +1372,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();
@@ -1262,8 +1390,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$ = [];
@@ -1271,13 +1399,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;
@@ -1302,6 +1434,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);
@@ -1321,6 +1459,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";
@@ -1333,6 +1472,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) => {
@@ -1547,7 +1687,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) {
@@ -1559,7 +1699,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);
 };
@@ -1616,6 +1756,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";
@@ -1651,28 +1821,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;
@@ -1684,7 +1859,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) => {
@@ -1705,96 +1883,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;
@@ -1805,12 +1893,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)));
@@ -2242,6 +2331,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;
@@ -2457,6 +2548,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) => {
@@ -2597,10 +2694,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]) {
@@ -2633,6 +2736,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).`
@@ -2642,7 +2748,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) {
@@ -2706,6 +2814,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)) {
@@ -2713,7 +2824,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;
@@ -2795,8 +2910,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();
@@ -2821,6 +2940,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 */)) {
@@ -3136,7 +3258,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);
               }
@@ -3179,6 +3301,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() {
@@ -3287,13 +3410,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,
@@ -3540,6 +3666,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) => {
@@ -3859,33 +3990,33 @@ const isSafeNumber = (input) => {
     return typeof input === 'number' && !isNaN(input) && isFinite(input);
 };
 
-/* Ionicons v7.2.2, ES Modules */
-
-const arrowBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='square' stroke-miterlimit='10' stroke-width='48' d='M244 400L100 256l144-144M120 256h292' class='ionicon-fill-none'/></svg>";
-const arrowDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 268l144 144 144-144M256 392V100' class='ionicon-fill-none'/></svg>";
-const caretBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M368 64L144 256l224 192V64z'/></svg>";
-const caretDownSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M64 144l192 224 192-224H64z'/></svg>";
-const caretUpSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M448 368L256 144 64 368h384z'/></svg>";
-const checkmarkOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' d='M416 128L192 384l-96-96' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
-const chevronBack = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M328 112L184 256l144 144' class='ionicon-fill-none'/></svg>";
-const chevronDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144' class='ionicon-fill-none'/></svg>";
-const chevronExpand = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M136 208l120-104 120 104M136 304l120 104 120-104' stroke-width='48' stroke-linecap='round' stroke-linejoin='round' class='ionicon-fill-none'/></svg>";
-const chevronForward = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144' class='ionicon-fill-none'/></svg>";
-const chevronForwardOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144' class='ionicon-fill-none'/></svg>";
-const close = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z'/></svg>";
-const closeCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm75.31 260.69a16 16 0 11-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 01-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0122.62-22.62L256 233.37l52.69-52.68a16 16 0 0122.62 22.62L278.63 256z'/></svg>";
-const closeSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M400 145.49L366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z'/></svg>";
-const ellipseOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><circle cx='256' cy='256' r='192' stroke-linecap='round' stroke-linejoin='round' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
-const ellipsisHorizontal = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><circle cx='256' cy='256' r='48'/><circle cx='416' cy='256' r='48'/><circle cx='96' cy='256' r='48'/></svg>";
-const eye = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><circle cx='256' cy='256' r='64'/><path d='M490.84 238.6c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.66 96c-42.52 0-84.33 12.15-124.27 36.11-40.73 24.43-77.63 60.12-109.68 106.07a31.92 31.92 0 00-.64 35.54c26.41 41.33 60.4 76.14 98.28 100.65C162 402 207.9 416 255.66 416c46.71 0 93.81-14.43 136.2-41.72 38.46-24.77 72.72-59.66 99.08-100.92a32.2 32.2 0 00-.1-34.76zM256 352a96 96 0 1196-96 96.11 96.11 0 01-96 96z'/></svg>";
-const eyeOff = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M432 448a15.92 15.92 0 01-11.31-4.69l-352-352a16 16 0 0122.62-22.62l352 352A16 16 0 01432 448zM248 315.85l-51.79-51.79a2 2 0 00-3.39 1.69 64.11 64.11 0 0053.49 53.49 2 2 0 001.69-3.39zM264 196.15L315.87 248a2 2 0 003.4-1.69 64.13 64.13 0 00-53.55-53.55 2 2 0 00-1.72 3.39z'/><path d='M491 273.36a32.2 32.2 0 00-.1-34.76c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.68 96a226.54 226.54 0 00-71.82 11.79 4 4 0 00-1.56 6.63l47.24 47.24a4 4 0 003.82 1.05 96 96 0 01116 116 4 4 0 001.05 3.81l67.95 68a4 4 0 005.4.24 343.81 343.81 0 0067.24-77.4zM256 352a96 96 0 01-93.3-118.63 4 4 0 00-1.05-3.81l-66.84-66.87a4 4 0 00-5.41-.23c-24.39 20.81-47 46.13-67.67 75.72a31.92 31.92 0 00-.64 35.54c26.41 41.33 60.39 76.14 98.28 100.65C162.06 402 207.92 416 255.68 416a238.22 238.22 0 0072.64-11.55 4 4 0 001.61-6.64l-47.47-47.46a4 4 0 00-3.81-1.05A96 96 0 01256 352z'/></svg>";
-const menuOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-miterlimit='10' d='M80 160h352M80 256h352M80 352h352' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
-const menuSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M64 384h384v-42.67H64zm0-106.67h384v-42.66H64zM64 128v42.67h384V128z'/></svg>";
-const removeOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' d='M400 256H112' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
-const reorderThreeOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='round' stroke-linejoin='round' d='M96 256h320M96 176h320M96 336h320' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
-const reorderTwoSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path stroke-linecap='square' stroke-linejoin='round' stroke-width='44' d='M118 304h276M118 208h276' class='ionicon-fill-none'/></svg>";
-const searchOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z' stroke-miterlimit='10' class='ionicon-fill-none ionicon-stroke-width'/><path stroke-linecap='round' stroke-miterlimit='10' d='M338.29 338.29L448 448' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
-const searchSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><path d='M464 428L339.92 303.9a160.48 160.48 0 0030.72-94.58C370.64 120.37 298.27 48 209.32 48S48 120.37 48 209.32s72.37 161.32 161.32 161.32a160.48 160.48 0 0094.58-30.72L428 464zM209.32 319.69a110.38 110.38 0 11110.37-110.37 110.5 110.5 0 01-110.37 110.37z'/></svg>";
+/* Ionicons v8.0.13, ES Modules */
+
+const arrowBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M244 400 100 256l144-144M120 256h292' stroke-linecap='square' stroke-miterlimit='10' stroke-width='48px' class='ionicon-fill-none'/></svg>";
+const arrowDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='m112 268 144 144 144-144M256 392V100' stroke-linecap='round' stroke-linejoin='round' stroke-width='48px' class='ionicon-fill-none'/></svg>";
+const caretBackSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M368 64 144 256l224 192z'/></svg>";
+const caretDownSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='m64 144 192 224 192-224z'/></svg>";
+const caretUpSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M448 368 256 144 64 368z'/></svg>";
+const checkmarkOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M416 128 192 384l-96-96' stroke-linecap='round' stroke-linejoin='round' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
+const chevronBack = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M328 112 184 256l144 144' stroke-linecap='round' stroke-linejoin='round' stroke-width='48px' class='ionicon-fill-none'/></svg>";
+const chevronDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='m112 184 144 144 144-144' stroke-linecap='round' stroke-linejoin='round' stroke-width='48px' class='ionicon-fill-none'/></svg>";
+const chevronExpand = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='m136 208 120-104 120 104M136 304l120 104 120-104' class='ionicon-fill-none'/></svg>";
+const chevronForward = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='m184 112 144 144-144 144' stroke-linecap='round' stroke-linejoin='round' stroke-width='48px' class='ionicon-fill-none'/></svg>";
+const chevronForwardOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='m184 112 144 144-144 144' stroke-linecap='round' stroke-linejoin='round' stroke-width='48px' class='ionicon-fill-none'/></svg>";
+const close = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34Z'/></svg>";
+const closeCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48m75.31 260.69a16 16 0 1 1-22.62 22.62L256 278.63l-52.69 52.68a16 16 0 0 1-22.62-22.62L233.37 256l-52.68-52.69a16 16 0 0 1 22.62-22.62L256 233.37l52.69-52.68a16 16 0 0 1 22.62 22.62L278.63 256Z'/></svg>";
+const closeSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256z'/></svg>";
+const ellipseOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><circle cx='256' cy='256' r='192' stroke-linecap='round' stroke-linejoin='round' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
+const ellipsisHorizontal = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><circle cx='256' cy='256' r='48'/><circle cx='416' cy='256' r='48'/><circle cx='96' cy='256' r='48'/></svg>";
+const eye = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><circle cx='256' cy='256' r='64'/><path d='M490.84 238.6c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.66 96c-42.52 0-84.33 12.15-124.27 36.11-40.73 24.43-77.63 60.12-109.68 106.07a31.92 31.92 0 0 0-.64 35.54c26.41 41.33 60.4 76.14 98.28 100.65C162 402 207.9 416 255.66 416c46.71 0 93.81-14.43 136.2-41.72 38.46-24.77 72.72-59.66 99.08-100.92a32.2 32.2 0 0 0-.1-34.76M256 352a96 96 0 1 1 96-96 96.11 96.11 0 0 1-96 96'/></svg>";
+const eyeOff = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M432 448a15.92 15.92 0 0 1-11.31-4.69l-352-352a16 16 0 0 1 22.62-22.62l352 352A16 16 0 0 1 432 448M248 315.85l-51.79-51.79a2 2 0 0 0-3.39 1.69 64.11 64.11 0 0 0 53.49 53.49 2 2 0 0 0 1.69-3.39M264 196.15 315.87 248a2 2 0 0 0 3.4-1.69 64.13 64.13 0 0 0-53.55-53.55 2 2 0 0 0-1.72 3.39'/><path d='M491 273.36a32.2 32.2 0 0 0-.1-34.76c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.68 96a226.5 226.5 0 0 0-71.82 11.79 4 4 0 0 0-1.56 6.63l47.24 47.24a4 4 0 0 0 3.82 1.05 96 96 0 0 1 116 116 4 4 0 0 0 1.05 3.81l67.95 68a4 4 0 0 0 5.4.24 343.8 343.8 0 0 0 67.24-77.4M256 352a96 96 0 0 1-93.3-118.63 4 4 0 0 0-1.05-3.81l-66.84-66.87a4 4 0 0 0-5.41-.23c-24.39 20.81-47 46.13-67.67 75.72a31.92 31.92 0 0 0-.64 35.54c26.41 41.33 60.39 76.14 98.28 100.65C162.06 402 207.92 416 255.68 416a238.2 238.2 0 0 0 72.64-11.55 4 4 0 0 0 1.61-6.64l-47.47-47.46a4 4 0 0 0-3.81-1.05A96 96 0 0 1 256 352'/></svg>";
+const menuOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M80 160h352M80 256h352M80 352h352' stroke-linecap='round' stroke-miterlimit='10' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
+const menuSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M64 384h384v-42.67H64Zm0-106.67h384v-42.66H64ZM64 128v42.67h384V128Z'/></svg>";
+const removeOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M400 256H112' stroke-linecap='round' stroke-linejoin='round' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
+const reorderThreeOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M96 256h320M96 176h320M96 336h320' stroke-linecap='round' stroke-linejoin='round' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
+const reorderTwoSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M118 304h276M118 208h276' stroke-linecap='square' stroke-linejoin='round' stroke-width='44px' class='ionicon-fill-none'/></svg>";
+const searchOutline = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M221.09 64a157.09 157.09 0 1 0 157.09 157.09A157.1 157.1 0 0 0 221.09 64Z' stroke-miterlimit='10' class='ionicon-fill-none ionicon-stroke-width'/><path d='M338.29 338.29 448 448' stroke-linecap='round' stroke-miterlimit='10' class='ionicon-fill-none ionicon-stroke-width'/></svg>";
+const searchSharp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='ionicon'><path d='M464 428 339.92 303.9a160.48 160.48 0 0 0 30.72-94.58C370.64 120.37 298.27 48 209.32 48S48 120.37 48 209.32s72.37 161.32 161.32 161.32a160.48 160.48 0 0 0 94.58-30.72L428 464ZM209.32 319.69a110.38 110.38 0 1 1 110.37-110.37 110.5 110.5 0 0 1-110.37 110.37'/></svg>";
 
 const accordionIosCss = ":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}";
 
@@ -4232,7 +4363,7 @@ class Accordion {
         md: accordionMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 57,
+        "$flags$": 313,
         "$tagName$": "ion-accordion",
         "$members$": {
             "value": [1],
@@ -4484,7 +4615,7 @@ class AccordionGroup {
         md: accordionGroupMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-accordion-group",
         "$members$": {
             "animated": [4],
@@ -7537,16 +7668,15 @@ class ActionSheet {
     }
     /**
      * Dismiss the action sheet overlay after it has been presented.
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      *
      * @param data Any data to emit in the dismiss events.
      * @param role The role of the element that is dismissing the action sheet.
      * This can be useful in a button handler for determining which button was
-     * clicked to dismiss the action sheet.
-     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     * clicked to dismiss the action sheet. Some examples include:
+     * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
      */
     async dismiss(data, role) {
         const unlock = await this.lockController.lock();
@@ -7658,12 +7788,12 @@ class ActionSheet {
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (hAsync(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), hAsync("div", { key: 'fbc2ba15549c2ab04e759e82df6e177fd80cc0a6', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '748ee5235d0b4cb26d6f1b7589f77af2e37ad28a', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '7ce5fa236cf75e9b1e49c4725c9a811078706554', class: "action-sheet-container" }, hAsync("div", { key: 'dc2251f3bcee4a93e3449f09621cbd2b65d329e9', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (hAsync("div", { key: '48d325c8a852f56ed57a9ada1a6709d05ba32ee2', id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '81cf3f7d19864e041813987b46d2d115b8466819', tappable: this.backdropDismiss }), hAsync("div", { key: '791c6a976683646fc306a42c15c5078b6f06a45f', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a350b489ef7852eab9dc2227ce6d92da27dd9bf9', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '69ba51ee13510c1a411d87cb4845b11b7302a36f', class: "action-sheet-container" }, hAsync("div", { key: 'bded15b8306c36591e526f0f99e1eeabcbab3915', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (hAsync("div", { key: '06b5147c0f6d9180fe8f12e75c9b4a0310226adc', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && hAsync("div", { key: '66093728052eb67f37a35f3232761ce4a08896f3', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (hAsync("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass$3(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), hAsync("span", { class: "action-sheet-button-inner" }, b.icon && hAsync("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && hAsync("ion-ripple-effect", null))))), cancelButton && (hAsync("div", { key: 'f4eb8e3e2885b85af5080df18d0de0bdd1d719de', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: '169f4eb09255aba85062baad49ceb151239fbfb7' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: '25fb8a466dd67ea94c79cfb4f9965527e1ce6d42', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: 'eb5b071e120a2c86afdf967af6a763a43044d1ca', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: '452ad7e1052b2c681e2d98de8193949755ad4d54' })))))), hAsync("div", { key: 'e1cecf280c987c050d9445e2c458b903f153089b', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && hAsync("div", { key: '54874362a75c679aba803bf4f8768f5404d2dd28', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (hAsync("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass$3(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), hAsync("span", { class: "action-sheet-button-inner" }, b.icon && hAsync("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && hAsync("ion-ripple-effect", null))))), cancelButton && (hAsync("div", { key: '67b0de298eb424f3dea846a841b7a06d70e3930d', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'e7e3f9a5495eea9b97dbf885ef36944f2e420eff' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: 'f889d29ed6c3d14bbc1d805888351d87f5122377', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '7c05cf424b38c37fd40aaeb42a494387291571fb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: 'bed927b477dc2708a5123ef560274fca9819b3d6' })))))), hAsync("div", { key: 'c5df1b11dc15a93892d57065d3dd5fbe02e43b39', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7675,7 +7805,7 @@ class ActionSheet {
         md: actionSheetMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-action-sheet",
         "$members$": {
             "overlayIndex": [2, "overlay-index"],
@@ -8216,16 +8346,15 @@ class Alert {
     }
     /**
      * Dismiss the alert overlay after it has been presented.
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      *
      * @param data Any data to emit in the dismiss events.
      * @param role The role of the element that is dismissing the alert.
      * This can be useful in a button handler for determining which button was
-     * clicked to dismiss the alert.
-     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     * clicked to dismiss the alert. Some examples include:
+     * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
      */
     async dismiss(data, role) {
         const unlock = await this.lockController.lock();
@@ -8393,9 +8522,9 @@ class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (hAsync(Host, { key: 'f8ee04fe6a97a2585b302c8e1a9eea3b122e3479', tabindex: "-1", style: {
+        return (hAsync(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: 'e9592e879f51c27ef20016beec12c986be632cf3', tappable: this.backdropDismiss }), hAsync("div", { key: '5e9425c3c8acdea6f8006389689c73220e2ce423', tabindex: "0", "aria-hidden": "true" }), hAsync("div", Object.assign({ key: '615465703e357619681fc36ed7276591a6fe3787', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), hAsync("div", { key: '934eba3759456cd4660e10f274edc7859f908461', class: "alert-head" }, header && (hAsync("h2", { key: '7d5d98d71f81f59a2cba227121b6fa01e6cc53b6', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: 'e5f5d35748c58a98ee933eb15cb1dcaf8113e9a7', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: 'a5cb89ca02bfa9c4828e694cb0835493a9088b05', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'cacffc31c911882df73e6845d15c8bb2d4acab56', tabindex: "0", "aria-hidden": "true" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '3cd5ca8b99cb95b11dd22ab41a820d841142896f', tappable: this.backdropDismiss }), hAsync("div", { key: '4cc62ae6e21424057d22aeef1e8fc77011e77cd5', tabindex: "0", "aria-hidden": "true" }), hAsync("div", Object.assign({ key: '364057a69f25aa88904df17bdcf7e5bf714e7830', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), hAsync("div", { key: '78694e3c0db2d408df3899fb1a90859bcc8d14cc', class: "alert-head" }, header && (hAsync("h2", { key: 'ec88ff3e4e1ea871b5975133fdcf4cac38b05e0f', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '9b09bc8bb68af255ef8b7d22587acc946148e544', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '99abe815f75d2df7f1b77c0df9f3436724fea76f', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'a43d0c22c0e46b1ef911f92ffeb253d7911b85f7', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8409,7 +8538,7 @@ class Alert {
         md: alertMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-alert",
         "$members$": {
             "overlayIndex": [2, "overlay-index"],
@@ -8464,6 +8593,8 @@ class App {
      * a result of another user action. (Ex: We focus the first element
      * inside of a popover when the user presents it, but the popover is not always
      * presented as a result of keyboard action.)
+     *
+     * @param elements An array of HTML elements to set focus on.
      */
     async setFocus(elements) {
         if (this.focusVisible) {
@@ -8472,7 +8603,7 @@ class App {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '03aa892f986330078d112b1e8b010df98fa7e39e', class: {
+        return (hAsync(Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
                 [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
@@ -8481,7 +8612,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]
@@ -8508,7 +8639,7 @@ class Avatar {
         md: avatarMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-avatar",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -8606,7 +8737,7 @@ class BackButton {
         md: backButtonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-back-button",
         "$members$": {
             "color": [513],
@@ -8669,7 +8800,7 @@ class Backdrop {
         md: backdropMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-backdrop",
         "$members$": {
             "visible": [4],
@@ -8704,7 +8835,7 @@ class Badge {
         md: badgeMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-badge",
         "$members$": {
             "color": [513]
@@ -8811,7 +8942,7 @@ class Breadcrumb {
         md: breadcrumbMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-breadcrumb",
         "$members$": {
             "collapsed": [4],
@@ -8965,7 +9096,7 @@ class Breadcrumbs {
         md: breadcrumbsMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-breadcrumbs",
         "$members$": {
             "color": [513],
@@ -9242,7 +9373,7 @@ class Button {
         md: buttonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-button",
         "$members$": {
             "color": [513],
@@ -9302,7 +9433,7 @@ class Buttons {
         md: buttonsMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 38,
+        "$flags$": 294,
         "$tagName$": "ion-buttons",
         "$members$": {
             "collapse": [4]
@@ -9381,7 +9512,7 @@ class Card {
         md: cardMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-card",
         "$members$": {
             "color": [513],
@@ -9425,7 +9556,7 @@ class CardContent {
         md: cardContentMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-card-content",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -9464,7 +9595,7 @@ class CardHeader {
         md: cardHeaderMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-card-header",
         "$members$": {
             "color": [513],
@@ -9499,7 +9630,7 @@ class CardSubtitle {
         md: cardSubtitleMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-card-subtitle",
         "$members$": {
             "color": [513]
@@ -9533,7 +9664,7 @@ class CardTitle {
         md: cardTitleMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-card-title",
         "$members$": {
             "color": [513]
@@ -9727,7 +9858,7 @@ class Checkbox {
         md: checkboxMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-checkbox",
         "$members$": {
             "color": [513],
@@ -9784,7 +9915,7 @@ class Chip {
         md: chipMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-chip",
         "$members$": {
             "color": [513],
@@ -9909,7 +10040,7 @@ class Col {
     }
     static get style() { return colCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-col",
         "$members$": {
             "offset": [1],
@@ -10316,7 +10447,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],
@@ -12243,6 +12374,7 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
             return {
                 textColor: matchingHighlight.textColor,
                 backgroundColor: matchingHighlight.backgroundColor,
+                border: matchingHighlight.border,
             };
         }
     }
@@ -13092,6 +13224,8 @@ class Datetime {
      * Confirms the selected datetime value, updates the
      * `value` property, and optionally closes the popover
      * or modal that the datetime was presented in.
+     *
+     * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
      */
     async confirm(closeOverlay = false) {
         const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
@@ -13125,6 +13259,8 @@ class Datetime {
      * Resets the internal state of the datetime but does not update the value.
      * Passing a valid ISO-8601 string will reset the state of the component to the provided date.
      * If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
+     *
+     * @param startDate A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to.
      */
     async reset(startDate) {
         this.processValue(startDate);
@@ -13134,6 +13270,8 @@ class Datetime {
      * optionally closes the popover
      * or modal that the datetime was
      * presented in.
+     *
+     * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
      */
     async cancel(closeOverlay = false) {
         this.ionCancel.emit();
@@ -13749,6 +13887,7 @@ class Datetime {
                     if (el) {
                         el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
                         el.style.setProperty('background-color', `${dateStyle ? dateStyle.backgroundColor : ''}`, 'important');
+                        el.style.setProperty('border', `${dateStyle ? dateStyle.border : ''}`, 'important');
                     }
                 }, tabindex: "-1", "data-day": day, "data-month": _month, "data-year": _year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
                     'calendar-day-padding': isCalendarPadding,
@@ -13947,7 +14086,7 @@ class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (hAsync(Host, { key: '7ea46c27aa5fb01b748dd4d6eb2340ad13f65175', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'f35cf200ff05d33074576e3d2754d3b2a0735b96', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -13957,7 +14096,7 @@ class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, hAsync("div", { key: '6964378424c58b053e23279d08eaedf28dfcc315', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, hAsync("div", { key: '859e9354a12bfa58ac3f964c2e66839f17071c00', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13978,7 +14117,7 @@ class Datetime {
         md: datetimeMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-datetime",
         "$members$": {
             "color": [1],
@@ -14380,7 +14519,7 @@ class DatetimeButton {
         md: datetimeButtonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-datetime-button",
         "$members$": {
             "color": [513],
@@ -14465,7 +14604,7 @@ class Fab {
     }; }
     static get style() { return fabCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-fab",
         "$members$": {
             "horizontal": [1],
@@ -14583,7 +14722,7 @@ class FabButton {
         md: fabButtonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-fab-button",
         "$members$": {
             "color": [513],
@@ -14643,7 +14782,7 @@ class FabList {
     }; }
     static get style() { return fabListCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-fab-list",
         "$members$": {
             "activated": [4],
@@ -15108,7 +15247,7 @@ class Footer {
         md: footerMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 36,
+        "$flags$": 292,
         "$tagName$": "ion-footer",
         "$members$": {
             "collapse": [1],
@@ -15140,7 +15279,7 @@ class Grid {
     }
     static get style() { return gridCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-grid",
         "$members$": {
             "fixed": [4]
@@ -15506,7 +15645,7 @@ class Header {
         md: headerMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 36,
+        "$flags$": 292,
         "$tagName$": "ion-header",
         "$members$": {
             "collapse": [1],
@@ -15519,33 +15658,33 @@ class Header {
 }
 
 const getName = (iconName, icon, mode, ios, md) => {
-  // default to "md" if somehow the mode wasn't set
-  mode = (mode && toLower(mode)) === 'ios' ? 'ios' : 'md';
-  // if an icon was passed in using the ios or md attributes
-  // set the iconName to whatever was passed in
-  if (ios && mode === 'ios') {
-    iconName = toLower(ios);
-  }
-  else if (md && mode === 'md') {
-    iconName = toLower(md);
-  }
-  else {
-    if (!iconName && icon && !isSrc(icon)) {
-      iconName = icon;
+    // default to "md" if somehow the mode wasn't set
+    mode = (mode && toLower(mode)) === 'ios' ? 'ios' : 'md';
+    // if an icon was passed in using the ios or md attributes
+    // set the iconName to whatever was passed in
+    if (ios && mode === 'ios') {
+        iconName = toLower(ios);
     }
-    if (isStr(iconName)) {
-      iconName = toLower(iconName);
+    else if (md && mode === 'md') {
+        iconName = toLower(md);
     }
-  }
-  if (!isStr(iconName) || iconName.trim() === '') {
-    return null;
-  }
-  // only allow alpha characters and dash
-  const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
-  if (invalidChars !== '') {
-    return null;
-  }
-  return iconName;
+    else {
+        if (!iconName && icon && !isSrc(icon)) {
+            iconName = icon;
+        }
+        if (isStr(iconName)) {
+            iconName = toLower(iconName);
+        }
+    }
+    if (!isStr(iconName) || iconName.trim() === '') {
+        return null;
+    }
+    // only allow alpha characters and dash
+    const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
+    if (invalidChars !== '') {
+        return null;
+    }
+    return iconName;
 };
 const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
 const isStr = (val) => typeof val === 'string';
@@ -15561,17 +15700,17 @@ const toLower = (val) => val.toLowerCase();
  * does not trigger a re-render.
  */
 const inheritAttributes = (el, attributes = []) => {
-  const attributeObject = {};
-  attributes.forEach(attr => {
-    if (el.hasAttribute(attr)) {
-      const value = el.getAttribute(attr);
-      if (value !== null) {
-        attributeObject[attr] = el.getAttribute(attr);
-      }
-      el.removeAttribute(attr);
-    }
-  });
-  return attributeObject;
+    const attributeObject = {};
+    attributes.forEach((attr) => {
+        if (el.hasAttribute(attr)) {
+            const value = el.getAttribute(attr);
+            if (value !== null) {
+                attributeObject[attr] = el.getAttribute(attr);
+            }
+            el.removeAttribute(attr);
+        }
+    });
+    return attributeObject;
 };
 /**
  * Returns `true` if the document or host element
@@ -15579,15 +15718,15 @@ const inheritAttributes = (el, attributes = []) => {
  * take priority over the root document value.
  */
 const isRTL = (hostEl) => {
-  if (hostEl) {
-    if (hostEl.dir !== '') {
-      return hostEl.dir.toLowerCase() === 'rtl';
+    if (hostEl) {
+        if (hostEl.dir !== '') {
+            return hostEl.dir.toLowerCase() === 'rtl';
+        }
     }
-  }
-  return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
+    return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
 };
 
-const iconCss = ":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}@supports (background: -webkit-named-image(i)){:host(.icon-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}}@supports not selector(:dir(rtl)) and selector(:host-context([dir='rtl'])){:host(.icon-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}}:host(.flip-rtl):host-context([dir='rtl']) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@supports selector(:dir(rtl)){:host(.flip-rtl:dir(rtl)) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.flip-rtl:dir(ltr)) .icon-inner{-webkit-transform:scaleX(1);transform:scaleX(1)}}:host(.icon-small){font-size:1.125rem !important}:host(.icon-large){font-size:2rem !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";
+const iconCss = ":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}@supports (background: -webkit-named-image(i)){:host(.icon-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}}@supports not selector(:dir(rtl)) and selector(:host-context([dir='rtl'])){:host(.icon-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}}:host(.flip-rtl):host-context([dir='rtl']) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@supports selector(:dir(rtl)){:host(.flip-rtl:dir(rtl)) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.flip-rtl:dir(ltr)) .icon-inner{-webkit-transform:scaleX(1);transform:scaleX(1)}}:host(.icon-small){font-size:1.125rem !important}:host(.icon-large){font-size:2rem !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";
 
 class Icon {
     constructor(hostRef) {
@@ -15595,32 +15734,41 @@ class Icon {
         this.iconName = null;
         this.inheritedAttributes = {};
         this.didLoadIcon = false;
-        this.svgContent = undefined;
         this.isVisible = false;
+        /**
+         * The mode determines which platform styles to use.
+         */
         this.mode = getIonMode();
-        this.color = undefined;
-        this.ios = undefined;
-        this.md = undefined;
-        this.flipRtl = undefined;
-        this.name = undefined;
-        this.src = undefined;
-        this.icon = undefined;
-        this.size = undefined;
+        /**
+         * If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
+         * Default, `false`.
+         */
         this.lazy = false;
+        /**
+         * When set to `false`, SVG content that is HTTP fetched will not be checked
+         * if the response SVG content has any `<script>` elements, or any attributes
+         * that start with `on`, such as `onclick`.
+         * @default true
+         */
         this.sanitize = true;
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
     }
     connectedCallback() {
-        // purposely do not return the promise here because loading
-        // the svg file should not hold up loading the app
-        // only load the svg if it's visible
+        /**
+         * purposely do not return the promise here because loading
+         * the svg file should not hold up loading the app
+         * only load the svg if it's visible
+         */
         this.waitUntilVisible(this.el, '50px', () => {
             this.isVisible = true;
             this.loadIcon();
         });
     }
+    /**
+     * Loads the icon after the component has finished rendering.
+     */
     componentDidLoad() {
         /**
          * Addresses an Angular issue where property values are assigned after the 'connectedCallback' but prior to the registration of watchers.
@@ -15632,32 +15780,67 @@ class Icon {
             this.loadIcon();
         }
     }
+    /**
+     * Disconnect the IntersectionObserver.
+     */
     disconnectedCallback() {
         if (this.io) {
             this.io.disconnect();
             this.io = undefined;
         }
     }
+    /**
+     * Wait until the icon is visible in the viewport.
+     * @param el - The element to observe.
+     * @param rootMargin - The root margin of the observer.
+     * @param cb - The callback to call when the element is visible.
+     */
     waitUntilVisible(el, rootMargin, cb) {
-        {
-            // browser doesn't support IntersectionObserver
-            // so just fallback to always show it
-            cb();
+        /**
+         * IntersectionObserver is a browser API that allows you to observe
+         * the visibility of an element relative to a root element. It is
+         * supported in all modern browsers, except IE and when server-side
+         * rendering.
+         */
+        const hasIntersectionObserverSupport = Boolean(Build.isBrowser);
+        /**
+         * browser doesn't support IntersectionObserver
+         * so just fallback to always show it
+         */
+        if (!hasIntersectionObserverSupport) {
+            return cb();
         }
+        const io = (this.io = new window.IntersectionObserver((data) => {
+            if (data[0].isIntersecting) {
+                io.disconnect();
+                this.io = undefined;
+                cb();
+            }
+        }, { rootMargin }));
+        io.observe(el);
     }
+    /**
+     * Watch for changes to the icon name, src, icon, ios, or md properties.
+     * When a change is detected, the icon will be loaded.
+     */
     loadIcon() {
         this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
     }
     render() {
         const { flipRtl, iconName, inheritedAttributes, el } = this;
         const mode = this.mode || 'md';
-        // we have designated that arrows & chevrons should automatically flip (unless flip-rtl is set to false) because "back" is left in ltr and right in rtl, and "forward" is the opposite
+        /**
+         * we have designated that arrows & chevrons should automatically flip (unless flip-rtl
+         * is set to false) because "back" is left in ltr and right in rtl, and "forward" is the opposite
+         */
         const shouldAutoFlip = iconName
             ? (iconName.includes('arrow') || iconName.includes('chevron')) && flipRtl !== false
             : false;
-        // if shouldBeFlippable is true, the icon should change direction when `dir` changes
+        /**
+         * if shouldBeFlippable is true, the icon should change direction when `dir` changes
+         */
         const shouldBeFlippable = flipRtl || shouldAutoFlip;
-        return (hAsync(Host, Object.assign({ role: "img", class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': shouldBeFlippable, 'icon-rtl': shouldBeFlippable && isRTL(el) }) }, inheritedAttributes), (hAsync("div", { class: "icon-inner" }))));
+        return (hAsync(Host, Object.assign({ key: '0578c899781ca145dd8205acd9670af39b57cf2e', role: "img", class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': shouldBeFlippable, 'icon-rtl': shouldBeFlippable && isRTL(el) }) }, inheritedAttributes), (hAsync("div", { class: "icon-inner" }))));
     }
     static get assetsDirs() { return ["svg"]; }
     get el() { return getElement(this); }
@@ -15670,7 +15853,7 @@ class Icon {
     }; }
     static get style() { return iconCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-icon",
         "$members$": {
             "mode": [1025],
@@ -15692,7 +15875,16 @@ class Icon {
         "$attrsToReflect$": [["name", "name"]]
     }; }
 }
+/**
+ * Get the mode of the document.
+ * @returns The mode of the document.
+ */
 const getIonMode = () => 'md';
+/**
+ * Create color classes for the icon.
+ * @param color - The color of the icon.
+ * @returns The color classes for the icon.
+ */
 const createColorClasses = (color) => {
     return color
         ? {
@@ -15779,7 +15971,7 @@ class Img {
     }; }
     static get style() { return imgCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-img",
         "$members$": {
             "alt": [1],
@@ -16012,7 +16204,7 @@ class InfiniteScroll {
     }; }
     static get style() { return infiniteScrollCss; }
     static get cmpMeta() { return {
-        "$flags$": 0,
+        "$flags$": 256,
         "$tagName$": "ion-infinite-scroll",
         "$members$": {
             "threshold": [1],
@@ -16062,7 +16254,7 @@ class InfiniteScrollContent {
         md: infiniteScrollContentMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-infinite-scroll-content",
         "$members$": {
             "loadingSpinner": [1025, "loading-spinner"],
@@ -16396,9 +16588,9 @@ const defaultCounterFormatter = (length, maxlength) => {
     return `${length} / ${maxlength}`;
 };
 
-const inputIosCss = ".sc-ion-input-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--background:transparent;--color:initial;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;padding:0 !important;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}ion-item[slot=start].sc-ion-input-ios-h,ion-item [slot=start].sc-ion-input-ios-h,ion-item[slot=end].sc-ion-input-ios-h,ion-item [slot=end].sc-ion-input-ios-h{width:auto}.ion-color.sc-ion-input-ios-h{--highlight-color-focused:var(--ion-color-base)}.input-label-placement-floating.sc-ion-input-ios-h,.input-label-placement-stacked.sc-ion-input-ios-h{min-height:56px}.native-input.sc-ion-input-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1}.native-input.sc-ion-input-ios::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-ios:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-ios::-ms-clear{display:none}.cloned-input.sc-ion-input-ios{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-input-ios{inset-inline-start:0}.cloned-input.sc-ion-input-ios:disabled{opacity:1}.input-clear-icon.sc-ion-input-ios{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:30px;height:30px;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-ios-h .input-clear-icon.sc-ion-input-ios{color:inherit}.input-clear-icon.sc-ion-input-ios:focus{opacity:0.5}.has-value.sc-ion-input-ios-h .input-clear-icon.sc-ion-input-ios{visibility:visible}.input-wrapper.sc-ion-input-ios{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper.sc-ion-input-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;width:100%}.ion-touched.ion-invalid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-ios{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}.has-focus.ion-valid.sc-ion-input-ios-h,.ion-touched.ion-invalid.sc-ion-input-ios-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-ios .error-text.sc-ion-input-ios{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-ios .helper-text.sc-ion-input-ios{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid.sc-ion-input-ios-h .input-bottom.sc-ion-input-ios .error-text.sc-ion-input-ios{display:block}.ion-touched.ion-invalid.sc-ion-input-ios-h .input-bottom.sc-ion-input-ios .helper-text.sc-ion-input-ios{display:none}.input-bottom.sc-ion-input-ios .counter.sc-ion-input-ios{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.has-focus.sc-ion-input-ios-h input.sc-ion-input-ios{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text.sc-ion-input-ios,.sc-ion-input-ios-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-ios,.input-outline-notch-hidden.sc-ion-input-ios{display:none}.input-wrapper.sc-ion-input-ios input.sc-ion-input-ios{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.input-label-placement-start.sc-ion-input-ios-h .input-wrapper.sc-ion-input-ios{-ms-flex-direction:row;flex-direction:row}.input-label-placement-start.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-end.sc-ion-input-ios-h .input-wrapper.sc-ion-input-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-end.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-ios-h .label-text.sc-ion-input-ios{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-ios-h .input-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h .input-wrapper.sc-ion-input-ios{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-ios-h -no-combinator.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .sc-ion-input-ios-h -no-combinator.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].sc-ion-input-ios-h -no-combinator.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .sc-ion-input-ios-h -no-combinator.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ios-h:dir(rtl) .label-text-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h:dir(rtl) .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-stacked.sc-ion-input-ios-h input.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios,.has-value.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{opacity:1}.label-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.sc-ion-input-ios-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-input-ios-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.sc-ion-input-ios-h[disabled].sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[disabled] .sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[readonly].sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[readonly] .sc-ion-input-ios-s>ion-input-password-toggle{display:none}.sc-ion-input-ios-h{--border-width:0.55px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--highlight-height:0px;font-size:inherit}.input-clear-icon.sc-ion-input-ios ion-icon.sc-ion-input-ios{width:18px;height:18px}.input-disabled.sc-ion-input-ios-h{opacity:0.3}.sc-ion-input-ios-s>ion-button[slot=start].button-has-icon-only,.sc-ion-input-ios-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}";
+const inputIosCss = ".sc-ion-input-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--background:transparent;--color:initial;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;padding:0 !important;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}ion-item[slot=start].sc-ion-input-ios-h,ion-item [slot=start].sc-ion-input-ios-h,ion-item[slot=end].sc-ion-input-ios-h,ion-item [slot=end].sc-ion-input-ios-h{width:auto}.ion-color.sc-ion-input-ios-h{--highlight-color-focused:var(--ion-color-base)}.input-label-placement-floating.sc-ion-input-ios-h,.input-label-placement-stacked.sc-ion-input-ios-h{min-height:56px}.native-input.sc-ion-input-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1}.native-input.sc-ion-input-ios::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-ios:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-ios::-ms-clear{display:none}.cloned-input.sc-ion-input-ios{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-input-ios{inset-inline-start:0}.cloned-input.sc-ion-input-ios:disabled{opacity:1}.input-clear-icon.sc-ion-input-ios{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:30px;height:30px;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-ios-h .input-clear-icon.sc-ion-input-ios{color:inherit}.input-clear-icon.sc-ion-input-ios:focus{opacity:0.5}.has-value.sc-ion-input-ios-h .input-clear-icon.sc-ion-input-ios{visibility:visible}.input-wrapper.sc-ion-input-ios{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper.sc-ion-input-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;width:100%}.ion-touched.ion-invalid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-ios{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}.has-focus.ion-valid.sc-ion-input-ios-h,.ion-touched.ion-invalid.sc-ion-input-ios-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-ios .error-text.sc-ion-input-ios{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-ios .helper-text.sc-ion-input-ios{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid.sc-ion-input-ios-h .input-bottom.sc-ion-input-ios .error-text.sc-ion-input-ios{display:block}.ion-touched.ion-invalid.sc-ion-input-ios-h .input-bottom.sc-ion-input-ios .helper-text.sc-ion-input-ios{display:none}.input-bottom.sc-ion-input-ios .counter.sc-ion-input-ios{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.has-focus.sc-ion-input-ios-h input.sc-ion-input-ios{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text.sc-ion-input-ios,.sc-ion-input-ios-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-ios,.input-outline-notch-hidden.sc-ion-input-ios{display:none}.input-wrapper.sc-ion-input-ios input.sc-ion-input-ios{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.input-label-placement-start.sc-ion-input-ios-h .input-wrapper.sc-ion-input-ios{-ms-flex-direction:row;flex-direction:row}.input-label-placement-start.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-end.sc-ion-input-ios-h .input-wrapper.sc-ion-input-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-end.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-ios-h .label-text.sc-ion-input-ios{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-ios-h .input-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h .input-wrapper.sc-ion-input-ios{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-ios-h -no-combinator.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .sc-ion-input-ios-h -no-combinator.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].sc-ion-input-ios-h -no-combinator.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .sc-ion-input-ios-h -no-combinator.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ios-h:dir(rtl) .label-text-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h:dir(rtl) .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-stacked.sc-ion-input-ios-h input.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios,.has-value.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{opacity:1}.label-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.sc-ion-input-ios-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-input-ios-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.sc-ion-input-ios-h[disabled].sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[disabled] .sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[readonly].sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[readonly] .sc-ion-input-ios-s>ion-input-password-toggle{visibility:hidden}.sc-ion-input-ios-h{--border-width:0.55px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--highlight-height:0px;font-size:inherit}.input-clear-icon.sc-ion-input-ios ion-icon.sc-ion-input-ios{width:18px;height:18px}.input-disabled.sc-ion-input-ios-h{opacity:0.3}.sc-ion-input-ios-s>ion-button[slot=start].button-has-icon-only,.sc-ion-input-ios-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}";
 
-const inputMdCss = ".sc-ion-input-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--background:transparent;--color:initial;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;padding:0 !important;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}ion-item[slot=start].sc-ion-input-md-h,ion-item [slot=start].sc-ion-input-md-h,ion-item[slot=end].sc-ion-input-md-h,ion-item [slot=end].sc-ion-input-md-h{width:auto}.ion-color.sc-ion-input-md-h{--highlight-color-focused:var(--ion-color-base)}.input-label-placement-floating.sc-ion-input-md-h,.input-label-placement-stacked.sc-ion-input-md-h{min-height:56px}.native-input.sc-ion-input-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1}.native-input.sc-ion-input-md::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-md:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-md::-ms-clear{display:none}.cloned-input.sc-ion-input-md{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-input-md{inset-inline-start:0}.cloned-input.sc-ion-input-md:disabled{opacity:1}.input-clear-icon.sc-ion-input-md{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:30px;height:30px;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-md-h .input-clear-icon.sc-ion-input-md{color:inherit}.input-clear-icon.sc-ion-input-md:focus{opacity:0.5}.has-value.sc-ion-input-md-h .input-clear-icon.sc-ion-input-md{visibility:visible}.input-wrapper.sc-ion-input-md{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper.sc-ion-input-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;width:100%}.ion-touched.ion-invalid.sc-ion-input-md-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-md-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-md{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}.has-focus.ion-valid.sc-ion-input-md-h,.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-md .error-text.sc-ion-input-md{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-md .helper-text.sc-ion-input-md{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid.sc-ion-input-md-h .input-bottom.sc-ion-input-md .error-text.sc-ion-input-md{display:block}.ion-touched.ion-invalid.sc-ion-input-md-h .input-bottom.sc-ion-input-md .helper-text.sc-ion-input-md{display:none}.input-bottom.sc-ion-input-md .counter.sc-ion-input-md{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.has-focus.sc-ion-input-md-h input.sc-ion-input-md{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text.sc-ion-input-md,.sc-ion-input-md-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-md,.input-outline-notch-hidden.sc-ion-input-md{display:none}.input-wrapper.sc-ion-input-md input.sc-ion-input-md{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.input-label-placement-start.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:row;flex-direction:row}.input-label-placement-start.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-end.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-end.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-md-h .label-text.sc-ion-input-md{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-md-h .input-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-md-h -no-combinator.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].sc-ion-input-md-h -no-combinator.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-stacked.sc-ion-input-md-h input.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md,.has-value.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{opacity:1}.label-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.sc-ion-input-md-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-input-md-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.sc-ion-input-md-h[disabled].sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[disabled] .sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[readonly].sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[readonly] .sc-ion-input-md-s>ion-input-password-toggle{display:none}.input-fill-solid.sc-ion-input-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-500, var(--ion-background-color-step-500, gray));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}.input-fill-solid.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-bottom:var(--border-width) var(--border-style) var(--border-color)}.has-focus.input-fill-solid.ion-valid.sc-ion-input-md-h,.input-fill-solid.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-fill-solid.sc-ion-input-md-h .input-bottom.sc-ion-input-md{border-top:none}@media (any-hover: hover){.input-fill-solid.sc-ion-input-md-h:hover{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.input-fill-solid.has-focus.sc-ion-input-md-h{--background:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}.input-fill-solid.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0px;border-end-start-radius:0px}.label-floating.input-fill-solid.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{max-width:calc(100% / 0.75)}.input-fill-outline.sc-ion-input-md-h{--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}.input-fill-outline.input-shape-round.sc-ion-input-md-h{--border-radius:28px;--padding-start:32px;--padding-end:32px}.has-focus.input-fill-outline.ion-valid.sc-ion-input-md-h,.input-fill-outline.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}@media (any-hover: hover){.input-fill-outline.sc-ion-input-md-h:hover{--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.input-fill-outline.has-focus.sc-ion-input-md-h{--border-width:var(--highlight-height);--border-color:var(--highlight-color)}.input-fill-outline.sc-ion-input-md-h .input-bottom.sc-ion-input-md{border-top:none}.input-fill-outline.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-bottom:none}.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:left top;transform-origin:left top;position:absolute;max-width:calc(100% - var(--padding-start) - var(--padding-end))}[dir=rtl].sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}}.input-fill-outline.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{position:relative}.label-floating.input-fill-outline.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(-32%) scale(0.75);transform:translateY(-32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75)}.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h input.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{margin-left:0;margin-right:0;margin-top:6px;margin-bottom:6px}.input-fill-outline.sc-ion-input-md-h .input-outline-container.sc-ion-input-md{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:100%}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{pointer-events:none}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color)}.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md{max-width:calc(100% - var(--padding-start) - var(--padding-end))}.input-fill-outline.sc-ion-input-md-h .notch-spacer.sc-ion-input-md{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none;-webkit-box-sizing:content-box;box-sizing:content-box}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md{border-start-start-radius:var(--border-radius);border-start-end-radius:0px;border-end-end-radius:0px;border-end-start-radius:var(--border-radius);-webkit-border-start:var(--border-width) var(--border-style) var(--border-color);border-inline-start:var(--border-width) var(--border-style) var(--border-color);width:calc(var(--padding-start) - 4px)}.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{-webkit-border-end:var(--border-width) var(--border-style) var(--border-color);border-inline-end:var(--border-width) var(--border-style) var(--border-color);border-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px;-ms-flex-positive:1;flex-grow:1}.label-floating.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md{border-top:none}.sc-ion-input-md-h{--border-width:1px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--highlight-height:2px;font-size:inherit}.input-clear-icon.sc-ion-input-md ion-icon.sc-ion-input-md{width:22px;height:22px}.input-disabled.sc-ion-input-md-h{opacity:0.38}.has-focus.ion-valid.sc-ion-input-md-h,.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-md .counter.sc-ion-input-md{letter-spacing:0.0333333333em}.input-label-placement-floating.has-focus.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-stacked.has-focus.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{color:var(--highlight-color)}.has-focus.input-label-placement-floating.ion-valid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.ion-touched.ion-invalid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.has-focus.input-label-placement-stacked.ion-valid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-stacked.ion-touched.ion-invalid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{color:var(--highlight-color)}.input-highlight.sc-ion-input-md{bottom:-1px;position:absolute;width:100%;height:var(--highlight-height);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.input-highlight.sc-ion-input-md{inset-inline-start:0}.has-focus.sc-ion-input-md-h .input-highlight.sc-ion-input-md{-webkit-transform:scale(1);transform:scale(1)}.in-item.sc-ion-input-md-h .input-highlight.sc-ion-input-md{bottom:0}.in-item.sc-ion-input-md-h .input-highlight.sc-ion-input-md{inset-inline-start:0}.input-shape-round.sc-ion-input-md-h{--border-radius:16px}.sc-ion-input-md-s>ion-button[slot=start].button-has-icon-only,.sc-ion-input-md-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}";
+const inputMdCss = ".sc-ion-input-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--background:transparent;--color:initial;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;padding:0 !important;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}ion-item[slot=start].sc-ion-input-md-h,ion-item [slot=start].sc-ion-input-md-h,ion-item[slot=end].sc-ion-input-md-h,ion-item [slot=end].sc-ion-input-md-h{width:auto}.ion-color.sc-ion-input-md-h{--highlight-color-focused:var(--ion-color-base)}.input-label-placement-floating.sc-ion-input-md-h,.input-label-placement-stacked.sc-ion-input-md-h{min-height:56px}.native-input.sc-ion-input-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1}.native-input.sc-ion-input-md::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-md:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-md:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-md::-ms-clear{display:none}.cloned-input.sc-ion-input-md{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-input-md{inset-inline-start:0}.cloned-input.sc-ion-input-md:disabled{opacity:1}.input-clear-icon.sc-ion-input-md{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:30px;height:30px;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-md-h .input-clear-icon.sc-ion-input-md{color:inherit}.input-clear-icon.sc-ion-input-md:focus{opacity:0.5}.has-value.sc-ion-input-md-h .input-clear-icon.sc-ion-input-md{visibility:visible}.input-wrapper.sc-ion-input-md{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper.sc-ion-input-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;width:100%}.ion-touched.ion-invalid.sc-ion-input-md-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-md-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-md{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}.has-focus.ion-valid.sc-ion-input-md-h,.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-md .error-text.sc-ion-input-md{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-md .helper-text.sc-ion-input-md{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.ion-touched.ion-invalid.sc-ion-input-md-h .input-bottom.sc-ion-input-md .error-text.sc-ion-input-md{display:block}.ion-touched.ion-invalid.sc-ion-input-md-h .input-bottom.sc-ion-input-md .helper-text.sc-ion-input-md{display:none}.input-bottom.sc-ion-input-md .counter.sc-ion-input-md{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.has-focus.sc-ion-input-md-h input.sc-ion-input-md{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text.sc-ion-input-md,.sc-ion-input-md-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-md,.input-outline-notch-hidden.sc-ion-input-md{display:none}.input-wrapper.sc-ion-input-md input.sc-ion-input-md{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.input-label-placement-start.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:row;flex-direction:row}.input-label-placement-start.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-end.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-end.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-md-h .label-text.sc-ion-input-md{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-md-h .input-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-md-h -no-combinator.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].sc-ion-input-md-h -no-combinator.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-stacked.sc-ion-input-md-h input.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md,.has-value.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{opacity:1}.label-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.sc-ion-input-md-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-input-md-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.sc-ion-input-md-h[disabled].sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[disabled] .sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[readonly].sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[readonly] .sc-ion-input-md-s>ion-input-password-toggle{visibility:hidden}.input-fill-solid.sc-ion-input-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-500, var(--ion-background-color-step-500, gray));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}.input-fill-solid.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-bottom:var(--border-width) var(--border-style) var(--border-color)}.has-focus.input-fill-solid.ion-valid.sc-ion-input-md-h,.input-fill-solid.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-fill-solid.sc-ion-input-md-h .input-bottom.sc-ion-input-md{border-top:none}@media (any-hover: hover){.input-fill-solid.sc-ion-input-md-h:hover{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.input-fill-solid.has-focus.sc-ion-input-md-h{--background:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}.input-fill-solid.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0px;border-end-start-radius:0px}.label-floating.input-fill-solid.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{max-width:calc(100% / 0.75)}.input-fill-outline.sc-ion-input-md-h{--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}.input-fill-outline.input-shape-round.sc-ion-input-md-h{--border-radius:28px;--padding-start:32px;--padding-end:32px}.has-focus.input-fill-outline.ion-valid.sc-ion-input-md-h,.input-fill-outline.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}@media (any-hover: hover){.input-fill-outline.sc-ion-input-md-h:hover{--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.input-fill-outline.has-focus.sc-ion-input-md-h{--border-width:var(--highlight-height);--border-color:var(--highlight-color)}.input-fill-outline.sc-ion-input-md-h .input-bottom.sc-ion-input-md{border-top:none}.input-fill-outline.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-bottom:none}.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:left top;transform-origin:left top;position:absolute;max-width:calc(100% - var(--padding-start) - var(--padding-end))}[dir=rtl].sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}}.input-fill-outline.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{position:relative}.label-floating.input-fill-outline.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(-32%) scale(0.75);transform:translateY(-32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75)}.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h input.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{margin-left:0;margin-right:0;margin-top:6px;margin-bottom:6px}.input-fill-outline.sc-ion-input-md-h .input-outline-container.sc-ion-input-md{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:100%}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{pointer-events:none}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color)}.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md{max-width:calc(100% - var(--padding-start) - var(--padding-end))}.input-fill-outline.sc-ion-input-md-h .notch-spacer.sc-ion-input-md{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none;-webkit-box-sizing:content-box;box-sizing:content-box}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md{border-start-start-radius:var(--border-radius);border-start-end-radius:0px;border-end-end-radius:0px;border-end-start-radius:var(--border-radius);-webkit-border-start:var(--border-width) var(--border-style) var(--border-color);border-inline-start:var(--border-width) var(--border-style) var(--border-color);width:calc(var(--padding-start) - 4px)}.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{-webkit-border-end:var(--border-width) var(--border-style) var(--border-color);border-inline-end:var(--border-width) var(--border-style) var(--border-color);border-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px;-ms-flex-positive:1;flex-grow:1}.label-floating.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md{border-top:none}.sc-ion-input-md-h{--border-width:1px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--highlight-height:2px;font-size:inherit}.input-clear-icon.sc-ion-input-md ion-icon.sc-ion-input-md{width:22px;height:22px}.input-disabled.sc-ion-input-md-h{opacity:0.38}.has-focus.ion-valid.sc-ion-input-md-h,.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-md .counter.sc-ion-input-md{letter-spacing:0.0333333333em}.input-label-placement-floating.has-focus.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-stacked.has-focus.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{color:var(--highlight-color)}.has-focus.input-label-placement-floating.ion-valid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.ion-touched.ion-invalid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.has-focus.input-label-placement-stacked.ion-valid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-stacked.ion-touched.ion-invalid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{color:var(--highlight-color)}.input-highlight.sc-ion-input-md{bottom:-1px;position:absolute;width:100%;height:var(--highlight-height);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.input-highlight.sc-ion-input-md{inset-inline-start:0}.has-focus.sc-ion-input-md-h .input-highlight.sc-ion-input-md{-webkit-transform:scale(1);transform:scale(1)}.in-item.sc-ion-input-md-h .input-highlight.sc-ion-input-md{bottom:0}.in-item.sc-ion-input-md-h .input-highlight.sc-ion-input-md{inset-inline-start:0}.input-shape-round.sc-ion-input-md-h{--border-radius:16px}.sc-ion-input-md-s>ion-button[slot=start].button-has-icon-only,.sc-ion-input-md-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}";
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -16902,7 +17094,7 @@ class Input {
         md: inputMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 38,
+        "$flags$": 294,
         "$tagName$": "ion-input",
         "$members$": {
             "color": [513],
@@ -16974,6 +17166,7 @@ class InputOTP {
         this.isKeyboardNavigation = false;
         this.inputValues = [];
         this.hasFocus = false;
+        this.previousInputValues = [];
         /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -17074,19 +17267,12 @@ class InputOTP {
             }
         };
         /**
-         * Handles keyboard navigation and input for the OTP component.
+         * Handles keyboard navigation for the OTP component.
          *
          * Navigation:
          * - Backspace: Clears current input and moves to previous box if empty
          * - Arrow Left/Right: Moves focus between input boxes
          * - Tab: Allows normal tab navigation between components
-         *
-         * Input Behavior:
-         * - Validates input against the allowed pattern
-         * - When entering a key in a filled box:
-         *   - Shifts existing values right if there is room
-         *   - Updates the value of the input group
-         *   - Prevents default behavior to avoid automatic focus shift
          */
         this.onKeyDown = (index) => (event) => {
             const { length } = this;
@@ -17141,30 +17327,31 @@ class InputOTP {
                 // Let all tab events proceed normally
                 return;
             }
-            // If the input box contains a value and the key being
-            // entered is a valid key for the input box update the value
-            // and shift the values to the right if there is room.
-            if (this.inputValues[index] && this.validKeyPattern.test(event.key)) {
-                if (!this.inputValues[length - 1]) {
-                    for (let i = length - 1; i > index; i--) {
-                        this.inputValues[i] = this.inputValues[i - 1];
-                        this.inputRefs[i].value = this.inputValues[i] || '';
-                    }
-                }
-                this.inputValues[index] = event.key;
-                this.inputRefs[index].value = event.key;
-                this.updateValue(event);
-                // Prevent default to avoid the browser from
-                // automatically moving the focus to the next input
-                event.preventDefault();
-            }
         };
+        /**
+         * Processes all input scenarios for each input box.
+         *
+         * This function manages:
+         * 1. Autofill handling
+         * 2. Input validation
+         * 3. Full selection replacement or typing in an empty box
+         * 4. Inserting in the middle with available space (shifting)
+         * 5. Single character replacement
+         */
         this.onInput = (index) => (event) => {
+            var _a, _b;
             const { length, validKeyPattern } = this;
-            const value = event.target.value;
-            // If the value is longer than 1 character (autofill), split it into
-            // characters and filter out invalid ones
-            if (value.length > 1) {
+            const input = event.target;
+            const value = input.value;
+            const previousValue = this.previousInputValues[index] || '';
+            // 1. Autofill handling
+            // If the length of the value increases by more than 1 from the previous
+            // value, treat this as autofill. This is to prevent the case where the
+            // user is typing a single character into an input box containing a value
+            // as that will trigger this function with a value length of 2 characters.
+            const isAutofill = value.length - previousValue.length > 1;
+            if (isAutofill) {
+                // Distribute valid characters across input boxes
                 const validChars = value
                     .split('')
                     .filter((char) => validKeyPattern.test(char))
@@ -17179,8 +17366,10 @@ class InputOTP {
                         });
                     });
                 }
-                // Update the value of the input group and emit the input change event
-                this.value = validChars.join('');
+                for (let i = 0; i < length; i++) {
+                    this.inputValues[i] = validChars[i] || '';
+                    this.inputRefs[i].value = validChars[i] || '';
+                }
                 this.updateValue(event);
                 // Focus the first empty input box or the last input box if all boxes
                 // are filled after a small delay to ensure the input boxes have been
@@ -17190,20 +17379,79 @@ class InputOTP {
                     const nextIndex = validChars.length < length ? validChars.length : length - 1;
                     (_a = this.inputRefs[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
                 }, 20);
+                this.previousInputValues = [...this.inputValues];
                 return;
             }
-            // Only allow input if it matches the pattern
-            if (value.length > 0 && !validKeyPattern.test(value)) {
-                this.inputRefs[index].value = '';
-                this.inputValues[index] = '';
+            // 2. Input validation
+            // If the character entered is invalid (does not match the pattern),
+            // restore the previous value and exit
+            if (value.length > 0 && !validKeyPattern.test(value[value.length - 1])) {
+                input.value = this.inputValues[index] || '';
+                this.previousInputValues = [...this.inputValues];
                 return;
             }
-            // For single character input, fill the current box
-            this.inputValues[index] = value;
-            this.updateValue(event);
-            if (value.length > 0) {
+            // 3. Full selection replacement or typing in an empty box
+            // If the user selects all text in the input box and types, or if the
+            // input box is empty, replace only this input box. If the box is empty,
+            // move to the next box, otherwise stay focused on this box.
+            const isAllSelected = input.selectionStart === 0 && input.selectionEnd === value.length;
+            const isEmpty = !this.inputValues[index];
+            if (isAllSelected || isEmpty) {
+                this.inputValues[index] = value;
+                input.value = value;
+                this.updateValue(event);
                 this.focusNext(index);
+                this.previousInputValues = [...this.inputValues];
+                return;
+            }
+            // 4. Inserting in the middle with available space (shifting)
+            // If typing in a filled input box and there are empty boxes at the end,
+            // shift all values starting at the current box to the right, and insert
+            // the new character at the current box.
+            const hasAvailableBoxAtEnd = this.inputValues[this.inputValues.length - 1] === '';
+            if (this.inputValues[index] && hasAvailableBoxAtEnd && value.length === 2) {
+                // Get the inserted character (from event or by diffing value/previousValue)
+                let newChar = event.data;
+                if (!newChar) {
+                    newChar = value.split('').find((c, i) => c !== previousValue[i]) || value[value.length - 1];
+                }
+                // Validate the new character before shifting
+                if (!validKeyPattern.test(newChar)) {
+                    input.value = this.inputValues[index] || '';
+                    this.previousInputValues = [...this.inputValues];
+                    return;
+                }
+                // Shift values right from the end to the insertion point
+                for (let i = this.inputValues.length - 1; i > index; i--) {
+                    this.inputValues[i] = this.inputValues[i - 1];
+                    this.inputRefs[i].value = this.inputValues[i] || '';
+                }
+                this.inputValues[index] = newChar;
+                this.inputRefs[index].value = newChar;
+                this.updateValue(event);
+                this.previousInputValues = [...this.inputValues];
+                return;
             }
+            // 5. Single character replacement
+            // Handles replacing a single character in a box containing a value based
+            // on the cursor position. We need the cursor position to determine which
+            // character was the last character typed. For example, if the user types "2"
+            // in an input box with the cursor at the beginning of the value of "6",
+            // the value will be "26", but we want to grab the "2" as the last character
+            // typed.
+            const cursorPos = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : value.length;
+            const newCharIndex = cursorPos - 1;
+            const newChar = (_b = value[newCharIndex]) !== null && _b !== void 0 ? _b : value[0];
+            // Check if the new character is valid before updating the value
+            if (!validKeyPattern.test(newChar)) {
+                input.value = this.inputValues[index] || '';
+                this.previousInputValues = [...this.inputValues];
+                return;
+            }
+            this.inputValues[index] = newChar;
+            input.value = newChar;
+            this.updateValue(event);
+            this.previousInputValues = [...this.inputValues];
         };
         /**
          * Handles pasting text into the input OTP component.
@@ -17213,7 +17461,7 @@ class InputOTP {
          * the next empty input after pasting.
          */
         this.onPaste = (event) => {
-            var _a, _b, _c;
+            var _a, _b;
             const { inputRefs, length, validKeyPattern } = this;
             event.preventDefault();
             const pastedText = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
@@ -17240,13 +17488,8 @@ class InputOTP {
             this.updateValue(event);
             // Focus the next empty input after pasting
             // If all boxes are filled, focus the last input
-            const nextEmptyIndex = validChars.length;
-            if (nextEmptyIndex < length) {
-                (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-            else {
-                (_c = inputRefs[length - 1]) === null || _c === void 0 ? void 0 : _c.focus();
-            }
+            const nextEmptyIndex = validChars.length < length ? validChars.length : length - 1;
+            (_b = inputRefs[nextEmptyIndex]) === null || _b === void 0 ? void 0 : _b.focus();
         };
     }
     /**
@@ -17385,6 +17628,7 @@ class InputOTP {
         });
         // Update the value without emitting events
         this.value = this.inputValues.join('');
+        this.previousInputValues = [...this.inputValues];
     }
     /**
      * Updates the value of the input group.
@@ -17506,7 +17750,7 @@ class InputOTP {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
-        return (hAsync(Host, { key: 'df8fca036cedea0812185a02e3b655d7d76285e0', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'f15a29fb17b681ef55885ca36d3d5f899cbaca83', class: createColorClasses$1(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -17514,10 +17758,10 @@ class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, hAsync("div", Object.assign({ key: '831be3f939cf037f0eb8d7e37e0afd4ef9a3c2c5', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && hAsync("div", { class: "input-otp-separator" }))))), hAsync("div", { key: '5311fedc34f7af3efd5f69e5a3d768055119c4f1', class: {
+            }) }, hAsync("div", Object.assign({ key: 'd7e1d4edd8aafcf2ed4313301287282e90fc7e82', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && hAsync("div", { class: "input-otp-separator" }))))), hAsync("div", { key: '3724a3159d02860971879a906092f9965f5a7c47', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, hAsync("slot", { key: '9e8afa2f7fa76c3092582dc27770fdf565a1b9ba' }))));
+            } }, hAsync("slot", { key: '11baa2624926a08274508afe0833d9237a8dc35c' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17530,7 +17774,7 @@ class InputOTP {
         md: inputOtpMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 38,
+        "$flags$": 294,
         "$tagName$": "ion-input-otp",
         "$members$": {
             "autocapitalize": [1],
@@ -17548,6 +17792,7 @@ class InputOTP {
             "value": [1032],
             "inputValues": [32],
             "hasFocus": [32],
+            "previousInputValues": [32],
             "setFocus": [64]
         },
         "$listeners$": undefined,
@@ -17636,7 +17881,7 @@ class InputPasswordToggle {
         md: mdInputPasswordToggleCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-input-password-toggle",
         "$members$": {
             "color": [513],
@@ -17672,6 +17917,7 @@ class Item {
         this.inheritedAriaAttributes = {};
         this.multipleInputs = false;
         this.focusable = true;
+        this.isInteractive = false;
         /**
          * If `true`, a button tag will be rendered and the item will be tappable.
          */
@@ -17693,6 +17939,11 @@ class Item {
          * The type of the button. Only used when an `onclick` or `button` property is present.
          */
         this.type = 'button';
+        // slot change listener updates state to reflect how/if item should be interactive
+        this.updateInteractivityOnSlotChange = () => {
+            this.setIsInteractive();
+            this.setMultipleInputs();
+        };
     }
     buttonChanged() {
         // Update the focusable option when the button option is changed
@@ -17739,13 +17990,11 @@ class Item {
     componentDidLoad() {
         raf(() => {
             this.setMultipleInputs();
+            this.setIsInteractive();
             this.focusable = this.isFocusable();
         });
     }
-    // If the item contains multiple clickable elements and/or inputs, then the item
-    // should not have a clickable input cover over the entire item to prevent
-    // interfering with their individual click events
-    setMultipleInputs() {
+    totalNestedInputs() {
         // The following elements have a clickable cover that is relative to the entire item
         const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
         // The following elements can accept focus alongside the previous elements
@@ -17754,6 +18003,17 @@ class Item {
         const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
         // The following elements should also stay clickable when an input with cover is present
         const clickables = this.el.querySelectorAll('ion-router-link, ion-button, a, button');
+        return {
+            covers,
+            inputs,
+            clickables,
+        };
+    }
+    // If the item contains multiple clickable elements and/or inputs, then the item
+    // should not have a clickable input cover over the entire item to prevent
+    // interfering with their individual click events
+    setMultipleInputs() {
+        const { covers, inputs, clickables } = this.totalNestedInputs();
         // Check for multiple inputs to change the position of the input cover to relative
         // for all of the covered inputs above
         this.multipleInputs =
@@ -17761,6 +18021,11 @@ class Item {
                 covers.length + clickables.length > 1 ||
                 (covers.length > 0 && this.isClickable());
     }
+    setIsInteractive() {
+        // If item contains any interactive children, set isInteractive to `true`
+        const { covers, inputs, clickables } = this.totalNestedInputs();
+        this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
+    }
     // If the item contains an input including a checkbox, datetime, select, or radio
     // then the item will have a clickable input cover that covers the item
     // that should get the hover, focused and activated states UNLESS it has multiple
@@ -17862,7 +18127,7 @@ class Item {
          * However, other form controls such as checkboxes and radios do.
          */
         const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
-        return (hAsync(Host, { key: '15e7d3b674c25232bc2d51573b291c72548690e5', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '24b59935bd8db8b0b7f940582455a42b82cbf762', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses$1(this.color, {
                 item: true,
                 [mode]: true,
                 'item-lines-default': lines === undefined,
@@ -17874,7 +18139,7 @@ class Item {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, hAsync(TagType, Object.assign({ key: 'f27ae647501e29db554efe8f12f498b165d1dbf6' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), hAsync("slot", { key: 'ba039a321df0e4bd5ce11e7a6e7e174c8623b112', name: "start" }), hAsync("div", { key: 'e67fdf4ad9086d855da8402ca04ffe292cf6ce67', class: "item-inner" }, hAsync("div", { key: '2434348a0b3f10052a340c57a7ac127ddc851729', class: "input-wrapper" }, hAsync("slot", { key: '3e27090ae4dab734541b3fd2c94de0f98c0f0030' })), hAsync("slot", { key: '52dc633b60fe612d48d2efffbf2c4c62692bef85', name: "end" }), showDetail && (hAsync("ion-icon", { key: '4fb7397dc8cf4cecb82f19a6151f85112b73992b', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && hAsync("ion-ripple-effect", { key: '09b2413a7a484ecd8ffb00805223727da4d4e344' }))));
+            })), role: inList ? 'listitem' : null }, hAsync(TagType, Object.assign({ key: 'fd77b6e5f3eb2e1857a0cdd45562d71eabd30255' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), hAsync("slot", { key: '8824ac8395aafa3d63c92f2128e947cac8393ac4', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), hAsync("div", { key: '5c9127e388a432687766d86a9db91fd1663abf03', class: "item-inner" }, hAsync("div", { key: '9dc2d2f58c4067c0143b3963334c346c3c7f77df', class: "input-wrapper" }, hAsync("slot", { key: '8377d9e56dc4b1913f1346111b706e7f14c24d30', onSlotchange: this.updateInteractivityOnSlotChange })), hAsync("slot", { key: 'bc771e106174f4a84ee12e92d14df81ad7ed177d', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (hAsync("ion-icon", { key: '45336d121a097cbf71ee8a3f6b554745ba5e0bbf', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && hAsync("ion-ripple-effect", { key: '197e244ae3bffebfa6ac9bfe7658d12e1af0ecb1' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17885,7 +18150,7 @@ class Item {
         md: itemMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-item",
         "$members$": {
             "color": [513],
@@ -17902,7 +18167,8 @@ class Item {
             "target": [1],
             "type": [1],
             "multipleInputs": [32],
-            "focusable": [32]
+            "focusable": [32],
+            "isInteractive": [32]
         },
         "$listeners$": [[0, "ionColor", "labelColorChanged"], [0, "ionStyle", "itemStyle"]],
         "$lazyBundleId$": "-",
@@ -17947,7 +18213,7 @@ class ItemDivider {
         md: itemDividerMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-item-divider",
         "$members$": {
             "color": [513],
@@ -17981,7 +18247,7 @@ class ItemGroup {
         md: itemGroupMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-item-group",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -18052,7 +18318,7 @@ class ItemOption {
         md: itemOptionMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-item-option",
         "$members$": {
             "color": [513],
@@ -18115,7 +18381,7 @@ class ItemOptions {
         md: itemOptionsMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-item-options",
         "$members$": {
             "side": [1],
@@ -18575,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],
@@ -18683,7 +18949,7 @@ class Label {
         md: labelMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 38,
+        "$flags$": 294,
         "$tagName$": "ion-label",
         "$members$": {
             "color": [513],
@@ -18742,7 +19008,7 @@ class List {
         md: listMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-list",
         "$members$": {
             "lines": [1],
@@ -18779,7 +19045,7 @@ class ListHeader {
         md: listHeaderMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-list-header",
         "$members$": {
             "color": [513],
@@ -19007,16 +19273,15 @@ class Loading {
     }
     /**
      * Dismiss the loading overlay after it has been presented.
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      *
      * @param data Any data to emit in the dismiss events.
      * @param role The role of the element that is dismissing the loading.
      * This can be useful in a button handler for determining which button was
-     * clicked to dismiss the loading.
-     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     * clicked to dismiss the loading. Some examples include:
+     * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
      */
     async dismiss(data, role) {
         const unlock = await this.lockController.lock();
@@ -19058,9 +19323,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: '6369ed244c06c39aa338141bffacf7a861d7da1a', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '1fd5fd8581d59eec321e534f9116f3ec0501010a', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'b4028045b0c8fbb9946136d85d939d55120b867c', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'b045fb0e61cc28e8163d45be18b431918dc27c80', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '2cf9df796f987d1251b3599d10a48ed87a1d0eb9', class: "loading-spinner" }, hAsync("ion-spinner", { key: '371cd41655402326adcb1e2fe1481009a83243b2', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '2a5e5e66d22ee4c1cef0c93815ef023d47e7a8eb', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '231dec84e424a2dc358ce95b84d6035cf43e4dea', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'c9af29b6e6bb49a217396a5c874bbfb8835a926c', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a8659863743cdeccbe1ba810eaabfd3ebfcb86f3', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '3b346f39bc71691bd8686556a1e142198a7b12fa', class: "loading-spinner" }, hAsync("ion-spinner", { key: '8dc2bf1556e5138e262827f1516c59ecd09f3520', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '054164c0dbae9a0e0973dd3c8e28f5b771820310', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19072,7 +19337,7 @@ class Loading {
         md: loadingMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-loading",
         "$members$": {
             "overlayIndex": [2, "overlay-index"],
@@ -19688,7 +19953,7 @@ class Menu {
         return Promise.resolve(this._isOpen);
     }
     /**
-     * Returns `true` is the menu is active.
+     * Returns `true` if the menu is active.
      *
      * A menu is active when it can be opened or closed, meaning it's enabled
      * and it's not part of a `ion-split-pane`.
@@ -19699,6 +19964,10 @@ class Menu {
     /**
      * Opens the menu. If the menu is already open or it can't be opened,
      * it returns `false`.
+     *
+     * @param animated If `true`, the menu will animate when opening.
+     * If `false`, the menu will open instantly without animation.
+     * Defaults to `true`.
      */
     open(animated = true) {
         return this.setOpen(true, animated);
@@ -19706,20 +19975,38 @@ class Menu {
     /**
      * Closes the menu. If the menu is already closed or it can't be closed,
      * it returns `false`.
+     *
+     * @param animated If `true`, the menu will animate when closing. If `false`,
+     * the menu will close instantly without animation. Defaults to `true`.
+     * @param role The role of the element that is closing the menu.
+     * This can be useful in a button handler for determining which button was
+     * clicked to close the menu. Some examples include:
+     * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
      */
     close(animated = true, role) {
         return this.setOpen(false, animated, role);
     }
     /**
-     * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
+     * Toggles the menu. If the menu is already open, it will try to close,
+     * otherwise it will try to open it.
      * If the operation can't be completed successfully, it returns `false`.
+     *
+     * @param animated If `true`, the menu will animate when opening/closing.
+     * If `false`, the menu will open/close instantly without animation.
+     * Defaults to `true`.
      */
     toggle(animated = true) {
         return this.setOpen(!this._isOpen, animated);
     }
     /**
-     * Opens or closes the button.
+     * Opens or closes the menu.
      * If the operation can't be completed successfully, it returns `false`.
+     *
+     * @param shouldOpen If `true`, the menu will open. If `false`, the menu
+     * will close.
+     * @param animated If `true`, the menu will animate when opening/closing.
+     * If `false`, the menu will open/close instantly without animation.
+     * @param role The role of the element that is closing the menu.
      */
     setOpen(shouldOpen, animated = true, role) {
         return menuController._setOpen(this, shouldOpen, animated, role);
@@ -20084,14 +20371,14 @@ class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (hAsync(Host, { key: '9e4ae9476a76781f1d228395c9af9e1c39ec82bb', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, hAsync("div", { key: 'c6153589d872ac7e3fdf5eedfdb858eb64ccd713', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '9994aac4b22f17db34c9b8b2aa56b8710b9df645' })), hAsync("ion-backdrop", { key: 'f09ac30cc4dd2dcb10628965e659dae5a23baf98', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, hAsync("div", { key: '3f5f70acd4d3ed6bb445122f4f01d73db738a75f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '3161326c9330e7f7441299c428b87a91b31a83e9' })), hAsync("ion-backdrop", { key: '917b50f38489bdf03d0c642af8b4e4e172c7dc4c', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20105,7 +20392,7 @@ class Menu {
         md: menuMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-menu",
         "$members$": {
             "contentId": [513, "content-id"],
@@ -20216,7 +20503,7 @@ class MenuButton {
         md: menuButtonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-menu-button",
         "$members$": {
             "color": [513],
@@ -20268,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],
@@ -21191,7 +21478,7 @@ const iosEnterAnimation$3 = (baseEl, opts) => {
         baseAnimation.addAnimation(contentAnimation);
     }
     if (presentingEl) {
-        const isMobile = window.innerWidth < 768;
+        const isPortrait = window.innerWidth < 768;
         const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
         const presentingElRoot = getElementRoot(presentingEl);
         const presentingAnimation = createAnimation().beforeStyles({
@@ -21200,7 +21487,7 @@ const iosEnterAnimation$3 = (baseEl, opts) => {
             overflow: 'hidden',
         });
         const appEl = baseEl.closest('ion-app');
-        if (isMobile && appEl) {
+        if (isPortrait && appEl) {
             /**
              * Fallback for browsers that does not support `max()` (ex: Firefox)
              * No need to worry about statusbar padding since engines like Gecko
@@ -21279,7 +21566,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
         .addAnimation(wrapperAnimation);
     const appEl = baseEl.closest('ion-app');
     if (presentingEl && appEl) {
-        const isMobile = window.innerWidth < 768;
+        const isPortrait = window.innerWidth < 768;
         const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
         const presentingElRoot = getElementRoot(presentingEl);
         const presentingAnimation = createAnimation()
@@ -21296,7 +21583,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
                 appEl.style.setProperty('background-color', '');
             }
         });
-        if (isMobile) {
+        if (isPortrait) {
             const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
             const modalTransform = hasCardModal ? '-10px' : transformOffset;
             const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
@@ -21343,6 +21630,153 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
     return baseAnimation;
 };
 
+/**
+ * Transition animation from portrait view to landscape view
+ * This handles the case where a card modal is open in portrait view
+ * and the user switches to landscape view
+ */
+const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
+    const { presentingEl } = opts;
+    if (!presentingEl) {
+        // No transition needed for non-card modals
+        return createAnimation('portrait-to-landscape-transition');
+    }
+    const presentingElIsCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
+    const presentingElRoot = getElementRoot(presentingEl);
+    const bodyEl = document.body;
+    const baseAnimation = createAnimation('portrait-to-landscape-transition')
+        .addElement(baseEl)
+        .easing('cubic-bezier(0.32,0.72,0,1)')
+        .duration(duration);
+    const presentingAnimation = createAnimation().beforeStyles({
+        transform: 'translateY(0)',
+        'transform-origin': 'top center',
+        overflow: 'hidden',
+    });
+    if (!presentingElIsCardModal) {
+        // The presenting element is not a card modal, so we do not
+        // need to care about layering and modal-specific styles.
+        const root = getElementRoot(baseEl);
+        const wrapperAnimation = createAnimation()
+            .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
+            .fromTo('opacity', '1', '1'); // Keep wrapper visible in landscape
+        const backdropAnimation = createAnimation()
+            .addElement(root.querySelector('ion-backdrop'))
+            .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
+        // Animate presentingEl from portrait state back to normal
+        const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
+        const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+        const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
+        presentingAnimation
+            .addElement(presentingEl)
+            .afterStyles({
+            transform: 'translateY(0px) scale(1)',
+            'border-radius': '0px',
+        })
+            .beforeAddWrite(() => bodyEl.style.setProperty('background-color', ''))
+            .fromTo('transform', fromTransform, 'translateY(0px) scale(1)')
+            .fromTo('filter', 'contrast(0.85)', 'contrast(1)')
+            .fromTo('border-radius', '10px 10px 0 0', '0px');
+        baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
+    }
+    else {
+        // The presenting element is a card modal, so we do
+        // need to care about layering and modal-specific styles.
+        const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+        const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(0px) scale(1)`;
+        presentingAnimation
+            .addElement(presentingEl)
+            .afterStyles({
+            transform: toTransform,
+        })
+            .fromTo('transform', fromTransform, toTransform)
+            .fromTo('filter', 'contrast(0.85)', 'contrast(1)');
+        const shadowAnimation = createAnimation()
+            .addElement(presentingElRoot.querySelector('.modal-shadow'))
+            .afterStyles({
+            transform: toTransform,
+            opacity: '0',
+        })
+            .fromTo('transform', fromTransform, toTransform);
+        baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
+    }
+    return baseAnimation;
+};
+/**
+ * Transition animation from landscape view to portrait view
+ * This handles the case where a card modal is open in landscape view
+ * and the user switches to portrait view
+ */
+const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
+    const { presentingEl } = opts;
+    if (!presentingEl) {
+        // No transition needed for non-card modals
+        return createAnimation('landscape-to-portrait-transition');
+    }
+    const presentingElIsCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
+    const presentingElRoot = getElementRoot(presentingEl);
+    const bodyEl = document.body;
+    const baseAnimation = createAnimation('landscape-to-portrait-transition')
+        .addElement(baseEl)
+        .easing('cubic-bezier(0.32,0.72,0,1)')
+        .duration(duration);
+    const presentingAnimation = createAnimation().beforeStyles({
+        transform: 'translateY(0)',
+        'transform-origin': 'top center',
+        overflow: 'hidden',
+    });
+    if (!presentingElIsCardModal) {
+        // The presenting element is not a card modal, so we do not
+        // need to care about layering and modal-specific styles.
+        const root = getElementRoot(baseEl);
+        const wrapperAnimation = createAnimation()
+            .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
+            .fromTo('opacity', '1', '1'); // Keep wrapper visible
+        const backdropAnimation = createAnimation()
+            .addElement(root.querySelector('ion-backdrop'))
+            .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
+        // Animate presentingEl from normal state to portrait state
+        const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
+        const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+        const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
+        presentingAnimation
+            .addElement(presentingEl)
+            .afterStyles({
+            transform: toTransform,
+        })
+            .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
+            .keyframes([
+            { offset: 0, transform: 'translateY(0px) scale(1)', filter: 'contrast(1)', borderRadius: '0px' },
+            { offset: 0.2, transform: 'translateY(0px) scale(1)', filter: 'contrast(1)', borderRadius: '10px 10px 0 0' },
+            { offset: 1, transform: toTransform, filter: 'contrast(0.85)', borderRadius: '10px 10px 0 0' },
+        ]);
+        baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
+    }
+    else {
+        // The presenting element is also a card modal, so we need
+        // to handle layering and modal-specific styles.
+        const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+        const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
+        const toTransform = `translateY(0) scale(1)`;
+        presentingAnimation
+            .addElement(presentingEl)
+            .afterStyles({
+            transform: toTransform,
+        })
+            .fromTo('transform', fromTransform, toTransform);
+        const shadowAnimation = createAnimation()
+            .addElement(presentingElRoot.querySelector('.modal-shadow'))
+            .afterStyles({
+            transform: toTransform,
+            opacity: '0',
+        })
+            .fromTo('transform', fromTransform, toTransform);
+        baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
+    }
+    return baseAnimation;
+};
+
 const createEnterAnimation = () => {
     const backdropAnimation = createAnimation()
         .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
@@ -22096,6 +22530,37 @@ class Modal {
                 el.dispatchEvent(ev);
             }
         };
+        /**
+         * When the modal receives focus directly, pass focus to the handle
+         * if it exists and is focusable, otherwise let the focus trap handle it.
+         */
+        this.onModalFocus = (ev) => {
+            const { dragHandleEl, el } = this;
+            // Only handle focus if the modal itself was focused (not a child element)
+            if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
+                dragHandleEl.focus();
+            }
+        };
+        /**
+         * When the slot changes, we need to find all the modals in the slot
+         * and set the data-parent-ion-modal attribute on them so we can find them
+         * and dismiss them when we get dismissed.
+         * We need to do it this way because when a modal is opened, it's moved to
+         * the end of the body and is no longer an actual child of the modal.
+         */
+        this.onSlotChange = ({ target }) => {
+            const slot = target;
+            slot.assignedElements().forEach((el) => {
+                el.querySelectorAll('ion-modal').forEach((childModal) => {
+                    // We don't need to write to the DOM if the modal is already tagged
+                    // If this is a deeply nested modal, this effect should cascade so we don't
+                    // need to worry about another modal claiming the same child.
+                    if (childModal.getAttribute('data-parent-ion-modal') === null) {
+                        childModal.setAttribute('data-parent-ion-modal', this.el.id);
+                    }
+                });
+            });
+        };
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
@@ -22111,6 +22576,16 @@ class Modal {
             triggerController.addClickListener(el, trigger);
         }
     }
+    onWindowResize() {
+        // Only handle resize for iOS card modals when no custom animations are provided
+        if (getIonMode$1(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
+            return;
+        }
+        clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = setTimeout(() => {
+            this.handleViewTransition();
+        }, 50); // Debounce to avoid excessive calls during active resizing
+    }
     breakpointsChanged(breakpoints) {
         if (breakpoints !== undefined) {
             this.sortedBreakpoints = breakpoints.sort((a, b) => a - b);
@@ -22123,6 +22598,8 @@ class Modal {
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
+        this.cleanupViewTransitionListener();
+        this.cleanupParentRemovalObserver();
     }
     componentWillLoad() {
         var _a;
@@ -22130,6 +22607,10 @@ class Modal {
         const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
         const attributesToInherit = ['aria-label', 'role'];
         this.inheritedAttributes = inheritAttributes$1(el, attributesToInherit);
+        // Cache original parent before modal gets moved to body during presentation
+        if (el.parentNode) {
+            this.cachedOriginalParent = el.parentNode;
+        }
         /**
          * When using a controller modal you can set attributes
          * using the htmlAttributes property. Since the above attributes
@@ -22333,6 +22814,10 @@ class Modal {
         else if (hasCardModal) {
             this.initSwipeToClose();
         }
+        // Initialize view transition listener for iOS card modals
+        this.initViewTransitionListener();
+        // Initialize parent removal observer
+        this.initParentRemovalObserver();
         unlock();
     }
     initSwipeToClose() {
@@ -22427,13 +22912,13 @@ class Modal {
     }
     /**
      * Dismiss the modal overlay after it has been presented.
-     *
-     * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
-     *
      * This is a no-op if the overlay has not been presented yet. If you want
      * to remove an overlay from the DOM that was never presented, use the
      * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     *
+     * @param data Any data to emit in the dismiss events.
+     * @param role The role of the element that is dismissing the modal.
+     * For example, `cancel` or `backdrop`.
      */
     async dismiss(data, role) {
         var _a;
@@ -22446,6 +22931,12 @@ class Modal {
          * in case the dismiss transition does run.
          */
         const unlock = await this.lockController.lock();
+        /**
+         * Dismiss all child modals. This is especially important in
+         * Angular and React because it's possible to lose control of a child
+         * modal when the parent modal is dismissed.
+         */
+        await this.dismissNestedModals();
         /**
          * If a canDismiss handler is responsible
          * for calling the dismiss method, we should
@@ -22486,6 +22977,8 @@ class Modal {
             if (this.gesture) {
                 this.gesture.destroy();
             }
+            this.cleanupViewTransitionListener();
+            this.cleanupParentRemovalObserver();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -22505,8 +22998,10 @@ class Modal {
         return eventMethod(this.el, 'ionModalWillDismiss');
     }
     /**
-     * Move a sheet style modal to a specific breakpoint. The breakpoint value must
-     * be a value defined in your `breakpoints` array.
+     * Move a sheet style modal to a specific breakpoint.
+     *
+     * @param breakpoint The breakpoint value to move the sheet modal to.
+     * Must be a value defined in your `breakpoints` array.
      */
     async setCurrentBreakpoint(breakpoint) {
         if (!this.isSheetModal) {
@@ -22559,24 +23054,182 @@ class Modal {
         await this.setCurrentBreakpoint(nextBreakpoint);
         return true;
     }
+    initViewTransitionListener() {
+        // Only enable for iOS card modals when no custom animations are provided
+        if (getIonMode$1(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
+            return;
+        }
+        // Set initial view state
+        this.currentViewIsPortrait = window.innerWidth < 768;
+    }
+    handleViewTransition() {
+        const isPortrait = window.innerWidth < 768;
+        // Only transition if view state actually changed
+        if (this.currentViewIsPortrait === isPortrait) {
+            return;
+        }
+        // Cancel any ongoing transition animation
+        if (this.viewTransitionAnimation) {
+            this.viewTransitionAnimation.destroy();
+            this.viewTransitionAnimation = undefined;
+        }
+        const { presentingElement } = this;
+        if (!presentingElement) {
+            return;
+        }
+        // Create transition animation
+        let transitionAnimation;
+        if (this.currentViewIsPortrait && !isPortrait) {
+            // Portrait to landscape transition
+            transitionAnimation = portraitToLandscapeTransition(this.el, {
+                presentingEl: presentingElement});
+        }
+        else {
+            // Landscape to portrait transition
+            transitionAnimation = landscapeToPortraitTransition(this.el, {
+                presentingEl: presentingElement});
+        }
+        // Update state and play animation
+        this.currentViewIsPortrait = isPortrait;
+        this.viewTransitionAnimation = transitionAnimation;
+        transitionAnimation.play().then(() => {
+            this.viewTransitionAnimation = undefined;
+            // After orientation transition, recreate the swipe-to-close gesture
+            // with updated animation that reflects the new presenting element state
+            this.reinitSwipeToClose();
+        });
+    }
+    cleanupViewTransitionListener() {
+        // Clear any pending resize timeout
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = undefined;
+        }
+        if (this.viewTransitionAnimation) {
+            this.viewTransitionAnimation.destroy();
+            this.viewTransitionAnimation = undefined;
+        }
+    }
+    reinitSwipeToClose() {
+        // Only reinitialize if we have a presenting element and are on iOS
+        if (getIonMode$1(this) !== 'ios' || !this.presentingElement) {
+            return;
+        }
+        // Clean up existing gesture and animation
+        if (this.gesture) {
+            this.gesture.destroy();
+            this.gesture = undefined;
+        }
+        if (this.animation) {
+            // Properly end the progress-based animation at initial state before destroying
+            // to avoid leaving modal in intermediate swipe position
+            this.animation.progressEnd(0, 0, 0);
+            this.animation.destroy();
+            this.animation = undefined;
+        }
+        // Force the modal back to the correct position or it could end up
+        // in a weird state after destroying the animation
+        raf(() => {
+            this.ensureCorrectModalPosition();
+            this.initSwipeToClose();
+        });
+    }
+    ensureCorrectModalPosition() {
+        const { el, presentingElement } = this;
+        const root = getElementRoot(el);
+        const wrapperEl = root.querySelector('.modal-wrapper');
+        if (wrapperEl) {
+            wrapperEl.style.transform = 'translateY(0vh)';
+            wrapperEl.style.opacity = '1';
+        }
+        if ((presentingElement === null || presentingElement === void 0 ? void 0 : presentingElement.tagName) === 'ION-MODAL') {
+            const isPortrait = window.innerWidth < 768;
+            if (isPortrait) {
+                const transformOffset = !CSS.supports('width', 'max(0px, 1px)')
+                    ? '30px'
+                    : 'max(30px, var(--ion-safe-area-top))';
+                const scale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+                presentingElement.style.transform = `translateY(${transformOffset}) scale(${scale})`;
+            }
+            else {
+                presentingElement.style.transform = 'translateY(0px) scale(1)';
+            }
+        }
+    }
+    async dismissNestedModals() {
+        const nestedModals = document.querySelectorAll(`ion-modal[data-parent-ion-modal="${this.el.id}"]`);
+        nestedModals === null || nestedModals === void 0 ? void 0 : nestedModals.forEach(async (modal) => {
+            await modal.dismiss(undefined, 'parent-dismissed');
+        });
+    }
+    initParentRemovalObserver() {
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        // Only observe if we have a cached parent and are in browser environment
+        if (typeof window === 'undefined' || !this.cachedOriginalParent) {
+            return;
+        }
+        // Don't observe document or fragment nodes as they can't be "removed"
+        if (this.cachedOriginalParent.nodeType === Node.DOCUMENT_NODE ||
+            this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            return;
+        }
+        this.parentRemovalObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
+                    // Check if our cached original parent was removed
+                    const cachedParentWasRemoved = Array.from(mutation.removedNodes).some((node) => {
+                        var _a, _b;
+                        const isDirectMatch = node === this.cachedOriginalParent;
+                        const isContainedMatch = this.cachedOriginalParent
+                            ? (_b = (_a = node).contains) === null || _b === void 0 ? void 0 : _b.call(_a, this.cachedOriginalParent)
+                            : false;
+                        return isDirectMatch || isContainedMatch;
+                    });
+                    // Also check if parent is no longer connected to DOM
+                    const cachedParentDisconnected = this.cachedOriginalParent && !this.cachedOriginalParent.isConnected;
+                    if (cachedParentWasRemoved || cachedParentDisconnected) {
+                        this.dismiss(undefined, 'parent-removed');
+                        // Release the reference to the cached original parent
+                        // so we don't have a memory leak
+                        this.cachedOriginalParent = undefined;
+                    }
+                }
+            });
+        });
+        // Observe document body with subtree to catch removals at any level
+        this.parentRemovalObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    cleanupParentRemovalObserver() {
+        var _a;
+        (_a = this.parentRemovalObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentRemovalObserver = undefined;
+    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
         const mode = getIonMode$1(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (hAsync(Host, Object.assign({ key: '0bcbdcfcd7d890eb599da3f97f21c317d34f8e0e', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        const isSheetModalWithHandle = isSheetModal && showHandle;
+        return (hAsync(Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
+            // Allow the modal to be navigable when the handle is focusable
+            tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: 'd72159e73daa5af7349aa9e8f695aa435eb43069', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'fd2d9b13676ae72473881649a397b6eacde03a03', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '908eccb1ad982dcde2dbcff0cbb18b6e60f8ba74',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '332dc0b40363a77c7be62331d9f26def91c790e9', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: 'c32698350193c450327e97049daf8b8d1fda0d0e' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22588,7 +23241,7 @@ class Modal {
         md: modalMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-modal",
         "$members$": {
             "hasController": [4, "has-controller"],
@@ -22624,7 +23277,7 @@ class Modal {
             "setCurrentBreakpoint": [64],
             "getCurrentBreakpoint": [64]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[9, "resize", "onWindowResize"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -23532,7 +24185,7 @@ class Nav {
     }; }
     static get style() { return navCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-nav",
         "$members$": {
             "delegate": [16],
@@ -23600,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],
@@ -23636,7 +24289,7 @@ class Note {
         md: noteMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-note",
         "$members$": {
             "color": [513]
@@ -24124,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]
@@ -24405,7 +25058,7 @@ class Picker {
         md: pickerMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-picker-legacy",
         "$members$": {
             "overlayIndex": [2, "overlay-index"],
@@ -24622,7 +25275,25 @@ class PickerColumn {
                      * elementsFromPoint can returns multiple elements
                      * so find the relevant picker column option if one exists.
                      */
-                    const newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
+                    let newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
+                    /**
+                     * TODO(FW-6594): Remove this workaround when iOS 16 is no longer
+                     * supported.
+                     *
+                     * If `elementsFromPoint` failed to find the active element (a known
+                     * issue on iOS 16 when elements are in a Shadow DOM and the
+                     * referenceNode is the document), a fallback to `elementFromPoint`
+                     * is used. While `elementsFromPoint` returns all elements,
+                     * `elementFromPoint` returns only the top-most, which is sufficient
+                     * for this use case and appears to handle Shadow DOM retargeting
+                     * more reliably in this specific iOS bug.
+                     */
+                    if (newActiveElement === undefined) {
+                        const fallbackActiveElement = referenceNode.elementFromPoint(centerX, centerY);
+                        if ((fallbackActiveElement === null || fallbackActiveElement === void 0 ? void 0 : fallbackActiveElement.tagName) === 'ION-PICKER-COLUMN-OPTION') {
+                            newActiveElement = fallbackActiveElement;
+                        }
+                    }
                     if (activeEl !== undefined) {
                         this.setPickerItemActiveState(activeEl, false);
                     }
@@ -24990,12 +25661,12 @@ class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'a221dc10f1eb7c41637a16d2c7167c16939822fd', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'ea0280355b2f87895bf7dddd289ccf473aa759f3', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, this.renderAssistiveFocusable(), hAsync("slot", { key: '81b0656f606856f3dc0a657bf167d81a5011405e', name: "prefix" }), hAsync("div", { key: '71b9de67c04150255dd66592601c9d926db0c31c', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), hAsync("slot", { key: '482992131cdeb85b1f61430d7fe1322a16345769', name: "prefix" }), hAsync("div", { key: '43f7f80d621d411ef366b3ca1396299e8c9a0c97', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
             },
             /**
@@ -25016,7 +25687,7 @@ class PickerColumn {
              * To prevent this, we set the tabIndex to -1. This
              * will match the behavior of the other browsers.
              */
-            tabIndex: -1 }, hAsync("div", { key: 'ebdc2f08c83db0cf17b4be29f28fcb00f529601e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '04ab56fcb8e6a7d6af00204c4560feb99ff34a56', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '6cf8f538903faf0fe1e4130f3eaf7b4e2e17cb52', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '1cc392307b70c576be5b81b5226ceba735957f0f' }), hAsync("div", { key: '23e3f28e2a99b9aa8b7c8f68ad9583e3ca63e9e2', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '8a0563f09780c3116af0caebe4f40587ec1f041f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '13207e248fc0009f37e0c90a3ee2bac2f130b856', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: '55ecf2ab5f214f936c2468cbdb7952daf89416b8', name: "suffix" })));
+            tabIndex: -1 }, hAsync("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), hAsync("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25025,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],
@@ -25393,7 +26064,7 @@ class PickerColumnCmp {
         md: pickerColumnMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-picker-legacy-column",
         "$members$": {
             "col": [16]
@@ -25513,7 +26184,7 @@ class PickerColumnOption {
         md: pickerColumnOptionMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-picker-column-option",
         "$members$": {
             "disabled": [4],
@@ -26785,6 +27456,8 @@ class Popover {
      * Developers can pass a mouse, touch, or pointer event
      * to position the popover relative to where that event
      * was dispatched.
+     *
+     * @param event The event to position the popover relative to.
      */
     async present(event) {
         const unlock = await this.lockController.lock();
@@ -26848,15 +27521,14 @@ class Popover {
     }
     /**
      * Dismiss the popover overlay after it has been presented.
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      *
      * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
+     * @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
      * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
      * a parent popover if this popover is nested. Defaults to `true`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      */
     async dismiss(data, role, dismissParentPopover = true) {
         const unlock = await this.lockController.lock();
@@ -26908,9 +27580,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: '1de4862099cfcb5035e78008e6dc7c1371846f9a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '981aa4e0102cb93312ffbd8243cdf2a0cdc60469', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '1a28ed55e9d34ef78cf0eb0178643301fd2dd75d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '1c206ea5eb3c0b5883a3d45c34cd22dd5ffe4b65', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '5ba561486a328c0c7ab825995fdbfb7a196429a4', class: "popover-content", part: "content" }, hAsync("slot", { key: '00fc244ce9dcc2dfc677e6c34b7c8e7a330b2b03' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, hAsync("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26923,7 +27595,7 @@ class Popover {
         md: popoverMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-popover",
         "$members$": {
             "hasController": [4, "has-controller"],
@@ -27028,7 +27700,7 @@ class ProgressBar {
         md: progressBarMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-progress-bar",
         "$members$": {
             "type": [1],
@@ -27057,6 +27729,7 @@ const renderProgress = (value, buffer) => {
          * When finalBuffer === 1, we use display: none
          * instead of removing the element to avoid flickering.
          */
+        // TODO(FW-6697): change `ion-hide` class to `ion-display-none` or another class
         hAsync("div", { class: { 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }, style: { transform: `translateX(${finalBuffer * 100}%)` } }, hAsync("div", { class: "buffer-circles-container", style: { transform: `translateX(-${finalBuffer * 100}%)` } }, hAsync("div", { part: "stream", class: "buffer-circles" }))),
         hAsync("div", { part: "track", class: "progress-buffer-bar", style: { transform: `scaleX(${finalBuffer})` } }),
     ];
@@ -27224,7 +27897,7 @@ class Radio {
         md: radioMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-radio",
         "$members$": {
             "color": [513],
@@ -27447,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"],
@@ -27687,6 +28360,45 @@ class Range {
                 this.ionFocus.emit();
             }
         };
+        this.onKnobFocus = (knob) => {
+            if (!this.hasFocus) {
+                this.hasFocus = true;
+                this.ionFocus.emit();
+            }
+            // Manually manage ion-focused class for dual knobs
+            if (this.dualKnobs && this.el.shadowRoot) {
+                const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
+                const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
+                // Remove ion-focused from both knobs first
+                knobA === null || knobA === void 0 ? void 0 : knobA.classList.remove('ion-focused');
+                knobB === null || knobB === void 0 ? void 0 : knobB.classList.remove('ion-focused');
+                // Add ion-focused only to the focused knob
+                const focusedKnobEl = knob === 'A' ? knobA : knobB;
+                focusedKnobEl === null || focusedKnobEl === void 0 ? void 0 : focusedKnobEl.classList.add('ion-focused');
+            }
+        };
+        this.onKnobBlur = () => {
+            // Check if focus is moving to another knob within the same range
+            // by delaying the reset to allow the new focus to register
+            setTimeout(() => {
+                var _a;
+                const activeElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+                const isStillFocusedOnKnob = activeElement && activeElement.classList.contains('range-knob-handle');
+                if (!isStillFocusedOnKnob) {
+                    if (this.hasFocus) {
+                        this.hasFocus = false;
+                        this.ionBlur.emit();
+                    }
+                    // Remove ion-focused from both knobs when focus leaves the range
+                    if (this.dualKnobs && this.el.shadowRoot) {
+                        const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
+                        const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
+                        knobA === null || knobA === void 0 ? void 0 : knobA.classList.remove('ion-focused');
+                        knobB === null || knobB === void 0 ? void 0 : knobB.classList.remove('ion-focused');
+                    }
+                }
+            }, 0);
+        };
     }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
@@ -28119,6 +28831,8 @@ class Range {
             min,
             max,
             inheritedAttributes,
+            onKnobFocus: this.onKnobFocus,
+            onKnobBlur: this.onKnobBlur,
         }), this.dualKnobs &&
             renderKnob(rtl, {
                 knob: 'B',
@@ -28132,6 +28846,8 @@ class Range {
                 min,
                 max,
                 inheritedAttributes,
+                onKnobFocus: this.onKnobFocus,
+                onKnobBlur: this.onKnobBlur,
             })));
     }
     render() {
@@ -28151,7 +28867,7 @@ class Range {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (hAsync(Host, { key: '124909954930d95f353e8593fd967de1486b0315', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'ef7b01f80515bcaeb2983934ad7f10a6bd5d13ec', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -28160,10 +28876,10 @@ class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, hAsync("label", { key: '0af177a2ba5869d3441c4b3f393835218807a418', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '4d834224b9c834e88497f58af4339348cec9ca1c', class: {
+            }) }, hAsync("label", { key: 'fd8aa90a9d52be9da024b907e68858dae424449d', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '2172b4f329c22017dd23475c80aac25ba6e753eb', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '797d39ac73610f6d81d0b99d71982f98f2a66c88', class: "native-wrapper" }, hAsync("slot", { key: '88824589cac5bb2134c30bed067ed11f6e81d887', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '7207a1164b272f56634435f7bff9114fb5d9f085', name: "end" })))));
+            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '3c318bf2ea0576646d4c010bf44573fd0f483186', class: "native-wrapper" }, hAsync("slot", { key: '6586fd6fc96271e73f8a86c202d1913ad1a26f96', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '74ac0bc2d2cb66ef708bb729f88b6ecbc1b2155d', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28180,7 +28896,7 @@ class Range {
         md: rangeMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-range",
         "$members$": {
             "color": [513],
@@ -28208,7 +28924,7 @@ class Range {
         "$attrsToReflect$": [["color", "color"]]
     }; }
 }
-const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes }) => {
+const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, }) => {
     const start = rtl ? 'right' : 'left';
     const knobStyle = () => {
         const style = {};
@@ -28229,7 +28945,7 @@ const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin,
                 ev.preventDefault();
                 ev.stopPropagation();
             }
-        }, class: {
+        }, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, class: {
             'range-knob-handle': true,
             'range-knob-a': knob === 'A',
             'range-knob-b': knob === 'B',
@@ -29135,7 +29851,7 @@ class Refresher {
         md: refresherMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
+        "$flags$": 288,
         "$tagName$": "ion-refresher",
         "$members$": {
             "pullMin": [2, "pull-min"],
@@ -29341,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"],
@@ -29386,7 +30102,7 @@ class Reorder {
         md: reorderMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-reorder",
         "$members$": undefined,
         "$listeners$": [[2, "click", "onClick"]],
@@ -29401,6 +30117,9 @@ class ReorderGroup {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionItemReorder = createEvent(this, "ionItemReorder", 7);
+        this.ionReorderStart = createEvent(this, "ionReorderStart", 7);
+        this.ionReorderMove = createEvent(this, "ionReorderMove", 7);
+        this.ionReorderEnd = createEvent(this, "ionReorderEnd", 7);
         this.lastToIndex = -1;
         this.cachedHeights = [];
         this.scrollElTop = 0;
@@ -29446,7 +30165,7 @@ class ReorderGroup {
         }
     }
     /**
-     * Completes the reorder operation. Must be called by the `ionItemReorder` event.
+     * Completes the reorder operation. Must be called by the `ionReorderEnd` event.
      *
      * If a list of items is passed, the list will be reordered and returned in the
      * proper order.
@@ -29483,7 +30202,7 @@ class ReorderGroup {
         const heights = this.cachedHeights;
         heights.length = 0;
         const el = this.el;
-        const children = el.children;
+        const children = el.__children || el.children;
         if (!children || children.length === 0) {
             return;
         }
@@ -29513,6 +30232,7 @@ class ReorderGroup {
         this.state = 1 /* ReorderGroupState.Active */;
         item.classList.add(ITEM_REORDER_SELECTED);
         hapticSelectionStart();
+        this.ionReorderStart.emit();
     }
     onMove(ev) {
         const selectedItem = this.selectedItemEl;
@@ -29527,6 +30247,7 @@ class ReorderGroup {
         const currentY = Math.max(top, Math.min(ev.currentY, bottom));
         const deltaY = scroll + currentY - ev.startY;
         const normalizedY = currentY - top;
+        const fromIndex = this.lastToIndex;
         const toIndex = this.itemIndexForTop(normalizedY);
         if (toIndex !== this.lastToIndex) {
             const fromIndex = indexForItem(selectedItem);
@@ -29536,6 +30257,10 @@ class ReorderGroup {
         }
         // Update selected item position
         selectedItem.style.transform = `translateY(${deltaY}px)`;
+        this.ionReorderMove.emit({
+            from: fromIndex,
+            to: toIndex,
+        });
     }
     onEnd() {
         const selectedItemEl = this.selectedItemEl;
@@ -29550,6 +30275,7 @@ class ReorderGroup {
             this.completeReorder();
         }
         else {
+            // TODO(FW-6590): Remove this once the deprecated event is removed
             this.ionItemReorder.emit({
                 from: fromIndex,
                 to: toIndex,
@@ -29557,11 +30283,16 @@ class ReorderGroup {
             });
         }
         hapticSelectionEnd();
+        this.ionReorderEnd.emit({
+            from: fromIndex,
+            to: toIndex,
+            complete: this.completeReorder.bind(this),
+        });
     }
     completeReorder(listOrReorder) {
         const selectedItemEl = this.selectedItemEl;
         if (selectedItemEl && this.state === 2 /* ReorderGroupState.Complete */) {
-            const children = this.el.children;
+            const children = this.el.__children || this.el.children;
             const len = children.length;
             const toIndex = this.lastToIndex;
             const fromIndex = indexForItem(selectedItemEl);
@@ -29603,7 +30334,7 @@ class ReorderGroup {
     /********* DOM WRITE ********* */
     reorderMove(fromIndex, toIndex) {
         const itemHeight = this.selectedItemHeight;
-        const children = this.el.children;
+        const children = this.el.__children || this.el.children;
         for (let i = 0; i < children.length; i++) {
             const style = children[i].style;
             let value = '';
@@ -29634,7 +30365,7 @@ class ReorderGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
+        return (hAsync(Host, { key: 'b9641f3061d67fbfe68317b901ec33267046e073', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -29646,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],
@@ -29758,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],
@@ -30473,6 +31204,7 @@ class Router {
      *
      * @param path The path to navigate to.
      * @param direction The direction of the animation. Defaults to `"forward"`.
+     * @param animation A custom animation to use for the transition.
      */
     async push(path, direction = 'forward', animation) {
         var _a;
@@ -30715,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],
@@ -30917,7 +31649,7 @@ class RouterOutlet {
     }; }
     static get style() { return routerOutletCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-router-outlet",
         "$members$": {
             "mode": [1025],
@@ -30946,7 +31678,7 @@ class Row {
     }
     static get style() { return rowCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-row",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -31203,10 +31935,8 @@ class Searchbar {
     /**
      * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
      * `input.focus()`.
-     *
      * Developers who wish to focus an input when a page enters
      * should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
-     *
      * Developers who wish to focus an input when an overlay is presented
      * should call `setFocus` after `didPresent` has resolved.
      *
@@ -31385,8 +32115,8 @@ class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '5835c36fcb0b52aec956538202a783f6c194d853', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '85df41676bed611467bd4df0002b08baee4f539c', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: 'e1e30cdd79f9f54d5f2d27501012358bc46880e5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '19e18775856db87daeb4b9e3d7bca0461915a0df', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -31396,14 +32126,14 @@ class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, hAsync("div", { key: '7e9db147282a35bb1e3c9c6125b9a044e81ddde5', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '02f08da21326b78d6cd249d54deab96fd8472ba8', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '048b00348456bd827ae734491c46a67bfb146227', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '71f64339bbfd54ebd26a0946c8ee9d726cd89c04', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'f991a37fcf54d26b7ad10d89084764e03d97b9de', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '9b1a177b21951c1c95897a468b34bb7bbd63d137', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31418,7 +32148,7 @@ class Searchbar {
         md: searchbarMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-searchbar",
         "$members$": {
             "color": [513],
@@ -32019,7 +32749,7 @@ class Segment {
         md: segmentMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-segment",
         "$members$": {
             "color": [513],
@@ -32172,7 +32902,7 @@ class SegmentButton {
         md: segmentButtonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-segment-button",
         "$members$": {
             "contentId": [513, "content-id"],
@@ -32189,7 +32919,7 @@ class SegmentButton {
     }; }
 }
 
-const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;}:host::-webkit-scrollbar{display:none}";
+const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%;min-height:1px;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;}:host::-webkit-scrollbar{display:none}";
 
 class SegmentContent {
     constructor(hostRef) {
@@ -32200,7 +32930,7 @@ class SegmentContent {
     }
     static get style() { return segmentContentCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-segment-content",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -32320,7 +33050,7 @@ class SegmentView {
         md: segmentViewMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-segment-view",
         "$members$": {
             "disabled": [4],
@@ -32542,7 +33272,7 @@ class Select {
         const scrollSelectedIntoView = () => {
             const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
             if (indexOfSelected > -1) {
-                const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
+                const selectedItem = overlay.querySelector(`.select-interface-option:nth-of-type(${indexOfSelected + 1})`);
                 if (selectedItem) {
                     /**
                      * Browsers such as Firefox do not
@@ -33062,7 +33792,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: 'e33253af9b9daa14460c7c259fb138b4d2b875ae', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'c03fb65e8fc9f9aab295e07b282377d57d910519', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -33080,7 +33810,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: '03303b7131c77a78a933e8e496e7251b6b5c485b', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '9037674db6a0adc189e887c9048f817d5afdf635', class: "select-wrapper-inner" }, hAsync("slot", { key: '7c9226c838ba4bcf5bc0b234fa1613ce335cf73d', name: "start" }), hAsync("div", { key: 'a7432c3efb5c65f88a5e4b0d35c5a433fa4e949d', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '028e683df26a8f573d7670da76e0ad26d21c83e0', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '20341bcae3753048ce905d2aceffa5351a0db125', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: '0d0c8ec55269adcac625f2899a547f4e7f3e3741', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'f6dfc93c0e23cbe75a2947abde67d842db2dad78', class: "select-wrapper-inner" }, hAsync("slot", { key: '957bfadf9f101f519091419a362d3abdc2be66f6', name: "start" }), hAsync("div", { key: 'ca349202a484e7f2e884533fd330f0b136754f7d', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: 'f0e62a6533ff1c8f62bd2d27f60b23385c4fa9ed', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'fb840d46bafafb09898ebeebbe8c181906a3d8a2', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -33094,7 +33824,7 @@ class Select {
         md: selectMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-select",
         "$members$": {
             "cancelText": [1, "cancel-text"],
@@ -33164,11 +33894,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) {
@@ -33248,7 +33978,7 @@ class SelectModal {
         md: selectModalMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-select-modal",
         "$members$": {
             "header": [1],
@@ -33278,7 +34008,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],
@@ -33293,7 +34023,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
@@ -33398,7 +34128,7 @@ class SelectPopover {
         md: selectPopoverMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 34,
+        "$flags$": 290,
         "$tagName$": "ion-select-popover",
         "$members$": {
             "header": [1],
@@ -33449,7 +34179,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]
@@ -33504,7 +34234,7 @@ class Spinner {
     }
     static get style() { return spinnerCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-spinner",
         "$members$": {
             "color": [513],
@@ -33613,7 +34343,7 @@ class SplitPane {
         md: splitPaneMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-split-pane",
         "$members$": {
             "contentId": [513, "content-id"],
@@ -33677,7 +34407,7 @@ class Tab {
     }; }
     static get style() { return tabCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-tab",
         "$members$": {
             "active": [1028],
@@ -33763,7 +34493,7 @@ class TabBar {
         md: tabBarMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-tab-bar",
         "$members$": {
             "color": [513],
@@ -33868,7 +34598,7 @@ class TabButton {
         md: tabButtonMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-tab-button",
         "$members$": {
             "disabled": [4],
@@ -33940,7 +34670,24 @@ class Tabs {
     componentWillRender() {
         const tabBar = this.el.querySelector('ion-tab-bar');
         if (tabBar) {
-            const tab = this.selectedTab ? this.selectedTab.tab : undefined;
+            let tab = this.selectedTab ? this.selectedTab.tab : undefined;
+            // Fallback: if no selectedTab is set but we're using router mode,
+            // determine the active tab from the current URL. This works around
+            // timing issues in React Router integration where setRouteId may not
+            // be called in time for the initial render.
+            // TODO(FW-6724): Remove this with React Router upgrade
+            if (!tab && this.useRouter && typeof window !== 'undefined') {
+                const currentPath = window.location.pathname;
+                const tabButtons = this.el.querySelectorAll('ion-tab-button');
+                // Look for a tab button that matches the current path pattern
+                for (const tabButton of tabButtons) {
+                    const tabId = tabButton.getAttribute('tab');
+                    if (tabId && currentPath.includes(tabId)) {
+                        tab = tabId;
+                        break;
+                    }
+                }
+            }
             tabBar.selectedTab = tab;
         }
     }
@@ -34035,12 +34782,12 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: '73ecd3294ca6c78ce6d8b6a7e5b6ccb11d84ada4', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '09661b26f07a3069a58e76ea4dceb9a6acbf365d', name: "top" }), hAsync("div", { key: 'db50d59fad8f9b11873b695fc548f3cfe4aceb6a', class: "tabs-inner" }, hAsync("slot", { key: '02694dde2d8381f48fc06dd9e79798c4bd540ccd' })), hAsync("slot", { key: '92c4661a5f3fa1c08c964fab7c422c1a2a03d3d8', name: "bottom" })));
+        return (hAsync(Host, { key: '6dd1d17cc5a7aff4b910303006b4478080ca97af', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: 'db54a692d1a825498a116f090eb305f7cceceb5a', name: "top" }), hAsync("div", { key: 'e1b7d49ba7032e9071de2029695254e2a8303be9', class: "tabs-inner" }, hAsync("slot", { key: '4c3b58d5292c8c834e7532c51de0861068943d79' })), hAsync("slot", { key: 'dd59c0b9b217dfbfb0fccdbc6896b593278549cc', name: "bottom" })));
     }
     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"],
@@ -34081,7 +34828,7 @@ class Text {
     }
     static get style() { return textCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-text",
         "$members$": {
             "color": [513]
@@ -34549,7 +35296,7 @@ class Textarea {
         md: textareaMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 38,
+        "$flags$": 294,
         "$tagName$": "ion-textarea",
         "$members$": {
             "color": [513],
@@ -34602,7 +35349,7 @@ class Thumbnail {
     }
     static get style() { return thumbnailCss; }
     static get cmpMeta() { return {
-        "$flags$": 9,
+        "$flags$": 265,
         "$tagName$": "ion-thumbnail",
         "$members$": undefined,
         "$listeners$": undefined,
@@ -35280,16 +36027,15 @@ class Toast {
     }
     /**
      * Dismiss the toast overlay after it has been presented.
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      *
      * @param data Any data to emit in the dismiss events.
      * @param role The role of the element that is dismissing the toast.
      * This can be useful in a button handler for determining which button was
      * clicked to dismiss the toast.
-     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     * Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
      */
     async dismiss(data, role) {
         var _a, _b;
@@ -35457,9 +36203,9 @@ class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (hAsync(Host, Object.assign({ key: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '7c3ad1a8df9e21fc30fc179c7edebeabcf3c6874', class: wrapperClass }, hAsync("div", { key: 'f950c21e8d7bf92653e0bd52e820ed6b84fa8cf5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '0266241927dbe16799adb57f9fc11bd5372877b2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '9ef4b87bad672af6a5b693af61375564daf1eeeb', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, hAsync("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '54b500348a9c37660c3aff37436d9188e4374947', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35472,7 +36218,7 @@ class Toast {
         md: toastMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-toast",
         "$members$": {
             "overlayIndex": [2, "overlay-index"],
@@ -35785,7 +36531,7 @@ class Toggle {
         md: toggleMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-toggle",
         "$members$": {
             "color": [513],
@@ -35893,7 +36639,7 @@ class Toolbar {
         md: toolbarMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-toolbar",
         "$members$": {
             "color": [513]
@@ -35946,7 +36692,7 @@ class ToolbarTitle {
         md: titleMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 41,
+        "$flags$": 297,
         "$tagName$": "ion-title",
         "$members$": {
             "color": [513],
@@ -36957,7 +37703,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) => {
@@ -37682,9 +38428,22 @@ 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;
   triggerEventListener(currentTarget, ev);
@@ -47325,6 +48084,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;
@@ -47843,6 +48607,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;
@@ -47881,15 +48654,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) {
@@ -48631,6 +49414,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 {