voyager-ionic-core 8.2.0 → 8.2.6

package/hydrate/index.js

@@ -5,6 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var stream = require('stream');
+
 function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResults, $stencilAfterHydrate, $stencilHydrateResolve) {
   var globalThis = $stencilWindow;
   var self = $stencilWindow;
@@ -125,10 +127,10 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'ionic';
-const BUILD = /* ionic */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* ionic */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: true, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
- Stencil Hydrate Platform v4.18.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.19.2 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -147,7 +149,6 @@ var isComplexType = (o) => {
   o = typeof o;
   return o === "object" || o === "function";
 };
-var isPromise = (v) => !!v && (typeof v === "object" || typeof v === "function") && typeof v.then === "function";
 
 // src/utils/query-nonce-meta-tag-content.ts
 function queryNonceMetaTagContent(doc2) {
@@ -626,7 +627,7 @@ var attachStyles = (hostRef) => {
   const flags = cmpMeta.$flags$;
   const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
   const scopeId2 = addStyle(
-    elm.getRootNode(),
+    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
     cmpMeta,
     hostRef.$modeName$
   );
@@ -806,7 +807,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     elm = newVNode2.$elm$ = doc$1.createElementNS(
       isSvgMode ? SVG_NS : HTML_NS,
-      newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+      !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     ) ;
     if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
       isSvgMode = false;
@@ -817,6 +818,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     if (isDef(scopeId) && elm["s-si"] !== scopeId) {
       elm.classList.add(elm["s-si"] = scopeId);
     }
+    {
+      updateElementScopeIds(elm, parentElm);
+    }
     if (newVNode2.$children$) {
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
         childNode = createElm(oldParentVNode, newVNode2, i2, elm);
@@ -1153,22 +1157,33 @@ var nullifyVNodeRefs = (vNode) => {
 var insertBefore = (parent, newNode, reference) => {
   const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
   {
-    setParentScopeIdAsClassName(newNode, parent);
+    updateElementScopeIds(newNode, parent);
   }
   return inserted;
 };
-var findParentScopeId = (element) => {
-  return element ? element["s-rsc"] || element["s-si"] || element["s-sc"] || findParentScopeId(element.parentElement) : void 0;
+var findScopeIds = (element) => {
+  const scopeIds = [];
+  if (element) {
+    scopeIds.push(
+      ...element["s-scs"] || [],
+      element["s-si"],
+      element["s-sc"],
+      ...findScopeIds(element.parentElement)
+    );
+  }
+  return scopeIds;
 };
-var setParentScopeIdAsClassName = (element, parent) => {
-  var _a, _b, _c;
-  if (element && parent) {
-    const oldRootScopeId = element["s-rsc"];
-    const newRootScopeId = findParentScopeId(parent);
-    oldRootScopeId && ((_a = element.classList) == null ? void 0 : _a.contains(oldRootScopeId)) && element.classList.remove(oldRootScopeId);
-    if (newRootScopeId) {
-      element["s-rsc"] = newRootScopeId;
-      !((_b = element.classList) == null ? void 0 : _b.contains(newRootScopeId)) && ((_c = element.classList) == null ? void 0 : _c.add(newRootScopeId));
+var updateElementScopeIds = (element, parent, iterateChildNodes = false) => {
+  var _a;
+  if (element && parent && element.nodeType === 1 /* ElementNode */) {
+    const scopeIds = new Set(findScopeIds(parent).filter(Boolean));
+    if (scopeIds.size) {
+      (_a = element.classList) == null ? void 0 : _a.add(...element["s-scs"] = [...scopeIds]);
+      if (element["s-ol"] || iterateChildNodes) {
+        for (const childNode of Array.from(element.childNodes)) {
+          updateElementScopeIds(childNode, element, true);
+        }
+      }
     }
   }
 };
@@ -1199,7 +1214,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   {
     scopeId = hostElm["s-sc"];
   }
-  useNativeShadowDom = supportsShadow ;
+  useNativeShadowDom = (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
   {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
@@ -1296,8 +1311,14 @@ var scheduleUpdate = (hostRef, isInitialLoad) => {
   return writeTask(dispatch) ;
 };
 var dispatchHooks = (hostRef, isInitialLoad) => {
+  const elm = hostRef.$hostElement$;
   const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
   const instance = hostRef.$lazyInstance$ ;
+  if (!instance) {
+    throw new Error(
+      `Can't render component <${elm.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`
+    );
+  }
   let maybePromise;
   if (isInitialLoad) {
     {
@@ -1317,7 +1338,10 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   endSchedule();
   return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
-var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
+var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn).catch((err2) => {
+  console.error(err2);
+  fn();
+}) : fn();
 var isPromisey = (maybePromise) => maybePromise instanceof Promise || maybePromise && maybePromise.then && typeof maybePromise.then === "function";
 var updateComponent = async (hostRef, instance, isInitialLoad) => {
   var _a;
@@ -1447,7 +1471,10 @@ var safeCall$1 = (instance, method, arg) => {
   }
   return void 0;
 };
-var addHydratedFlag = (elm) => elm.classList.add("hydrated") ;
+var addHydratedFlag = (elm) => {
+  var _a;
+  return elm.classList.add((_a = BUILD.hydratedSelectorName) != null ? _a : "hydrated") ;
+};
 var serverSideConnected = (elm) => {
   const children = elm.children;
   if (children != null) {
@@ -1501,13 +1528,13 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 
 // src/runtime/proxy-component.ts
 var proxyComponent = (Cstr, cmpMeta, flags) => {
-  var _a;
+  var _a, _b;
   const prototype = Cstr.prototype;
-  if (cmpMeta.$members$) {
-    if (Cstr.watchers) {
+  if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
+    if (Cstr.watchers && !cmpMeta.$watchers$) {
       cmpMeta.$watchers$ = Cstr.watchers;
     }
-    const members = Object.entries(cmpMeta.$members$);
+    const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
         Object.defineProperty(prototype, memberName, {
@@ -1563,7 +1590,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
       };
       Cstr.observedAttributes = Array.from(
         /* @__PURE__ */ new Set([
-          ...Object.keys((_a = cmpMeta.$watchers$) != null ? _a : {}),
+          ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
             var _a2;
             const attrName = m[1] || propName;
@@ -1587,11 +1614,16 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
     hostRef.$flags$ |= 32 /* hasInitializedComponent */;
     const bundleId = cmpMeta.$lazyBundleId$;
     if (bundleId) {
-      Cstr = loadModule(cmpMeta);
-      if (Cstr.then) {
+      const CstrImport = loadModule(cmpMeta);
+      if (CstrImport && "then" in CstrImport) {
         const endLoad = uniqueTime();
-        Cstr = await Cstr;
+        Cstr = await CstrImport;
         endLoad();
+      } else {
+        Cstr = CstrImport;
+      }
+      if (!Cstr) {
+        throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
       if (!Cstr.isProxied) {
         {
@@ -1619,12 +1651,18 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       fireConnectedCallback(hostRef.$lazyInstance$);
     } else {
       Cstr = elm.constructor;
-      customElements.whenDefined(cmpMeta.$tagName$).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
-    }
-    if (Cstr.style) {
-      let style = Cstr.style;
-      if (typeof style !== "string") {
-        style = style[hostRef.$modeName$ = computeMode(elm)];
+      const cmpTag = elm.localName;
+      customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
+    }
+    if (Cstr && Cstr.style) {
+      let style;
+      if (typeof Cstr.style === "string") {
+        style = Cstr.style;
+      } else if (typeof Cstr.style !== "string") {
+        hostRef.$modeName$ = computeMode(elm);
+        if (hostRef.$modeName$) {
+          style = Cstr.style[hostRef.$modeName$];
+        }
         if (hostRef.$modeName$) {
           elm.setAttribute("s-mode", hostRef.$modeName$);
         }
@@ -1663,6 +1701,10 @@ var connectedCallback = (elm) => {
       {
         hostId = elm.getAttribute(HYDRATE_ID);
         if (hostId) {
+          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            const scopeId2 = addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute("s-mode")) ;
+            elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
+          }
           initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
         }
       }
@@ -1713,10 +1755,11 @@ var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) =>
   }
 };
 var hostListenerProxy = (hostRef, methodName) => (ev) => {
+  var _a;
   try {
     {
       if (hostRef.$flags$ & 256 /* isListenReady */) {
-        hostRef.$lazyInstance$[methodName](ev);
+        (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
       } else {
         (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
       }
@@ -1785,6 +1828,7 @@ var insertVdomAnnotations = (doc2, staticComponents) => {
   }
 };
 var parseVNodeAnnotations = (doc2, node, docData, orgLocationNodes) => {
+  var _a;
   if (node == null) {
     return;
   }
@@ -1792,7 +1836,8 @@ var parseVNodeAnnotations = (doc2, node, docData, orgLocationNodes) => {
     orgLocationNodes.push(node);
   }
   if (node.nodeType === 1 /* ElementNode */) {
-    node.childNodes.forEach((childNode) => {
+    const childNodes = [...Array.from(node.childNodes), ...Array.from(((_a = node.shadowRoot) == null ? void 0 : _a.childNodes) || [])];
+    childNodes.forEach((childNode) => {
       const hostRef = getHostRef(childNode);
       if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) {
         const cmpData = {
@@ -1873,44 +1918,54 @@ var insertChildVNodeAnnotations = (doc2, vnodeChild, cmpData, hostId, depth, ind
 var hAsync = (nodeName, vnodeData, ...children) => {
   if (Array.isArray(children) && children.length > 0) {
     const flatChildren = children.flat(Infinity);
-    if (flatChildren.some(isPromise)) {
+    if (flatChildren.some((child) => child instanceof Promise)) {
       return Promise.all(flatChildren).then((resolvedChildren) => {
         return h(nodeName, vnodeData, ...resolvedChildren);
       }).catch((err2) => {
         return h(nodeName, vnodeData);
       });
     }
-    return h(nodeName, vnodeData, ...children);
+    return h(nodeName, vnodeData, ...flatChildren);
   }
   return h(nodeName, vnodeData);
 };
-
-// src/hydrate/platform/proxy-host-element.ts
-function proxyHostElement(elm, cmpMeta) {
+function proxyHostElement(elm, cmpMeta, opts) {
   if (typeof elm.componentOnReady !== "function") {
     elm.componentOnReady = componentOnReady$1;
   }
   if (typeof elm.forceUpdate !== "function") {
     elm.forceUpdate = forceUpdate2;
   }
-  if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-    elm.shadowRoot = elm;
+  if (!elm.shadowRoot && !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
+    {
+      elm.attachShadow({
+        mode: "open",
+        delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
+      });
+    }
   }
   if (cmpMeta.$members$ != null) {
     const hostRef = getHostRef(elm);
     const members = Object.entries(cmpMeta.$members$);
     members.forEach(([memberName, m]) => {
+      var _a, _b;
       const memberFlags = m[0];
       if (memberFlags & 31 /* Prop */) {
         const attributeName = m[1] || memberName;
-        const attrValue = elm.getAttribute(attributeName);
+        let attrValue = elm.getAttribute(attributeName);
+        if ((attrValue == null ? void 0 : attrValue.startsWith("{")) && attrValue.endsWith("}") || (attrValue == null ? void 0 : attrValue.startsWith("[")) && attrValue.endsWith("]")) {
+          try {
+            attrValue = JSON.parse(attrValue);
+          } catch (e) {
+          }
+        }
         if (attrValue != null) {
           const parsedAttrValue = parsePropertyValue(attrValue, memberFlags);
-          hostRef.$instanceValues$.set(memberName, parsedAttrValue);
+          (_a = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _a.set(memberName, parsedAttrValue);
         }
         const ownValue = elm[memberName];
         if (ownValue !== void 0) {
-          hostRef.$instanceValues$.set(memberName, ownValue);
+          (_b = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b.set(memberName, ownValue);
           delete elm[memberName];
         }
         Object.defineProperty(elm, memberName, {
@@ -1926,8 +1981,12 @@ function proxyHostElement(elm, cmpMeta) {
       } else if (memberFlags & 64 /* Method */) {
         Object.defineProperty(elm, memberName, {
           value(...args) {
+            var _a2;
             const ref = getHostRef(this);
-            return ref.$onInstancePromise$.then(() => ref.$lazyInstance$[memberName](...args)).catch(consoleError);
+            return (_a2 = ref == null ? void 0 : ref.$onInstancePromise$) == null ? void 0 : _a2.then(() => {
+              var _a3;
+              return (_a3 = ref == null ? void 0 : ref.$lazyInstance$) == null ? void 0 : _a3[memberName](...args);
+            }).catch(consoleError);
           }
         });
       }
@@ -1935,7 +1994,8 @@ function proxyHostElement(elm, cmpMeta) {
   }
 }
 function componentOnReady$1() {
-  return getHostRef(this).$onReadyPromise$;
+  var _a;
+  return (_a = getHostRef(this)) == null ? void 0 : _a.$onReadyPromise$;
 }
 function forceUpdate2() {
 }
@@ -1951,7 +2011,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
   let tmrId;
   let ranCompleted = false;
   function hydratedComplete() {
-    global.clearTimeout(tmrId);
+    globalThis.clearTimeout(tmrId);
     createdElements.clear();
     connectedElements.clear();
     if (!ranCompleted) {
@@ -2009,7 +2069,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
       if (isValidComponent(elm, opts) && results.hydratedCount < opts.maxHydrateCount) {
         if (!connectedElements.has(elm) && shouldHydrate(elm)) {
           connectedElements.add(elm);
-          return hydrateComponent(win2, results, elm.nodeName, elm, waitingElements);
+          return hydrateComponent.call(elm, win2, results, elm.nodeName, elm, waitingElements);
         }
       }
       return resolved2;
@@ -2030,7 +2090,7 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
       patchElement2(elm);
       return elm;
     };
-    tmrId = global.setTimeout(timeoutExceeded, opts.timeout);
+    tmrId = globalThis.setTimeout(timeoutExceeded, opts.timeout);
     plt.$resourcesUrl$ = new URL(opts.resourcesUrl || "./", doc$1.baseURI).href;
     patchChild2(win2.document.body);
     waitLoop2().then(hydratedComplete).catch(hydratedError);
@@ -2049,6 +2109,8 @@ async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
     const cmpMeta = Cstr.cmpMeta;
     if (cmpMeta != null) {
       waitingElements.add(elm);
+      const hostRef = getHostRef(this);
+      addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
       try {
         connectedCallback(elm);
         await elm.componentOnReady();
@@ -2219,7 +2281,7 @@ var registerComponents = (Cstrs) => {
 var win$2 = window;
 var doc$1 = win$2.document;
 var readTask = (cb) => {
-  process.nextTick(() => {
+  nextTick(() => {
     try {
       cb();
     } catch (e) {
@@ -2228,7 +2290,7 @@ var readTask = (cb) => {
   });
 };
 var writeTask = (cb) => {
-  process.nextTick(() => {
+  nextTick(() => {
     try {
       cb();
     } catch (e) {
@@ -2253,7 +2315,7 @@ var plt = {
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
   ce: (eventName, opts) => new win$2.CustomEvent(eventName, opts)
 };
-var supportsShadow = false;
+var supportsShadow = BUILD.shadowDom;
 var hostRefs = /* @__PURE__ */ new WeakMap();
 var getHostRef = (ref) => hostRefs.get(ref);
 var registerInstance = (lazyInstance, hostRef) => hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
@@ -2269,7 +2331,6 @@ var registerHost = (elm, cmpMeta) => {
   hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
   elm["s-p"] = [];
   elm["s-rc"] = [];
-  addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
   return hostRefs.set(elm, hostRef);
 };
 var Build = {
@@ -6414,7 +6475,10 @@ class ActionSheet {
         this.triggerController.removeClickListener();
     }
     componentWillLoad() {
-        setOverlayId(this.el);
+        var _a;
+        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
+            setOverlayId(this.el);
+        }
     }
     componentDidLoad() {
         /**
@@ -6459,12 +6523,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: 'b640e9730af4bd9ec569884cf203c63102e0ea59', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', 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: 'bcfa5b7ffb5c265ef54caa114e697ada11f20c12', tappable: this.backdropDismiss }), hAsync("div", { key: '207ae95b5365ce1d76170a05bdf8c83c3ba5de42', tabindex: "0" }), hAsync("div", { key: 'bf2b4e8d57c822a4ea2bbe6c34b1b2f2067e4c02', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '9c4841eb03ca1378c5abc1e3aafbbcfaaa43c345', class: "action-sheet-container" }, hAsync("div", { key: 'fa438b8663f5d30852e5967da0471489efa783b2', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (hAsync("div", { key: '2c600f1cd8314d65137fb1bfa180312b4791121a', 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: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), hAsync("div", { key: 'd46361bb5cdc32a7922dcf76b566f358a6174bfa', tabindex: "0" }), hAsync("div", { key: '136c3f2e77c8a2eac8e9ae4bb13d735e1d62598d', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '6168ea8b2be42020b2edeb8ff3a0f3d1254be37a', class: "action-sheet-container" }, hAsync("div", { key: '29b9e6619dc54574733a704d6bf885839151bd84', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (hAsync("div", { key: '536ce764bfddb3816ea3512d90f4acef2ccb8589', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && hAsync("div", { key: 'a98d6a3f7948733de22a07432e56255f11243b7b', 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: '5c5abd0e0b3d486ba2bfe437e28a23b2c7c4c955', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: '520a23bbbe6c7436f5bc58bad162d7894b870e54' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: '28c90f66786ee82316adc6cfd68d322d2038357d', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: 'fd49fcea260c7addc9b07718eeb02d4fa6e4d900', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: 'c83f636e171fe77635a4fce2b97161447e10546a' })))))), hAsync("div", { key: 'd304920fc7cb006b87542183a3224a7e460abd3d', tabindex: "0" })));
+            } }, header, this.subHeader && hAsync("div", { key: '6d888219145824fd36cdfe0d3c8388bbf2769777', 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: '46f98f0ed5a9bdb3e35feb9ae71c4489c17b7d77', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'e3c457bced8ad5f692e48de26e65f731fd631b4f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: '4cba6dc559f734ecc852e024959210cd0dd25354', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '9df64989aad1b4d1e75edf4d37ab208965cfe37f', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: '558089275a29177cefdb2e38eefc9b5c8b62872b' })))))), hAsync("div", { key: 'fa4df6e043b00a6e4126dbc71cb344cfc2b2e7bc', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -6921,7 +6985,10 @@ class Alert {
         this.triggerChanged();
     }
     componentWillLoad() {
-        setOverlayId(this.el);
+        var _a;
+        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
+            setOverlayId(this.el);
+        }
         this.inputsChanged();
         this.buttonsChanged();
     }
@@ -7147,9 +7214,9 @@ class Alert {
          * If neither is defined, don't set aria-labelledby.
          */
         const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
-        return (hAsync(Host, Object.assign({ key: 'b1875ea565c40a25915e26e61864f8c61d840ccc', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'c7d53f48b359f2bc3480a2e1ba34948fc9378fb0', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { 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: '37d9d7d1a47bfa23c3bb8d8d9805f52a5bbedf61', tappable: this.backdropDismiss }), hAsync("div", { key: '0134cc90b7f02dcdd13dfdc39a72f2259182de90', tabindex: "0" }), hAsync("div", { key: 'ed054b063ec2d1847b3234d5bdf3e66054784ed7', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: 'fb81befae081424f03c64b434ffdd79bb1b00d0c', class: "alert-head" }, header && (hAsync("h2", { key: '92596dfdd92c4f63c82ed86b4a2473b3110daae3', id: hdrId, class: "alert-title" }, header)), subHeader && (hAsync("h2", { key: 'ba7a0734cf818224f453604ec638770ca61bfef6', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: '41a2619836a4af5d158216ef14b49985c7941b78', tabindex: "0" })));
+            }, 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: '18c7e6b5d63435d9a6a82bda951158e7e1af6e92', tappable: this.backdropDismiss }), hAsync("div", { key: 'e35e1a4b81286976c8a6bab570c986f3196b21f4', tabindex: "0" }), hAsync("div", { key: '9089864c80d96ed834bf723f3de863cf1c4a5b97', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: 'dd600f02c84352059c6cdf98821b9c9a831bcdcb', class: "alert-head" }, header && (hAsync("h2", { key: '11afb605e1ccefc889fbdd2533d491bea8fbf183', id: hdrId, class: "alert-title" }, header)), subHeader && (hAsync("h2", { key: 'e53b0613d09d26e5a2cd7c9c6e63ec2535625ce5', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'cef60ec8b34c9aec8bc698f16f55324d1ce67c72', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15619,7 +15686,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: '6fe6bae954259703482f175312a051ff1b315a95', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'f7986b5b81c4f289460bff2c452ce993b674236b', "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,
@@ -15631,7 +15698,7 @@ class Item {
                 'ion-activatable': canActivate,
                 'ion-focusable': this.focusable,
                 'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, hAsync(TagType, Object.assign({ key: 'fcfcffacb7d4e52f9458724332efa93d140cf637' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), hAsync("slot", { key: '2c1be89990d1b4264f056f3afca2657dc25e868f', name: "start" }), hAsync("div", { key: 'a12010f2f251c29870806050357e247f297f752d', class: "item-inner" }, hAsync("div", { key: 'd0dc5901d634d3b7d8c9b4339ed02585b5b88828', class: "input-wrapper" }, hAsync("slot", { key: '5589d491f6058858310c72971de50ddf441379b1' })), hAsync("slot", { key: '7b2d2182336abef508d00882759df1a99a1cf93e', name: "end" }), showDetail && (hAsync("ion-icon", { key: 'f93f7e7166413f1f2691430dcda83ecf858f7e1f', 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: '3d13ce7623813d650ada97974b29a2e94e2405b1' }))));
+            })), role: inList ? 'listitem' : null }, hAsync(TagType, Object.assign({ key: 'cfafac67cdb532e4bce2dd4989e1936c013396ba' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), hAsync("slot", { key: '68a5b8e978eed62d7d913ca006bd4bd01497cd32', name: "start" }), hAsync("div", { key: '5b052cc338b00e8d40ab77cac7a139448f9b6452', class: "item-inner" }, hAsync("div", { key: '7548addbe881a41ee32fd51627db230b56510760', class: "input-wrapper" }, hAsync("slot", { key: 'b6f4edd5895b9f91bf060edb35666b0e7ea26ccc' })), hAsync("slot", { key: 'b595e7fb96461ea2e356dbad6529531ca19705db', name: "end" }), showDetail && (hAsync("ion-icon", { key: '091aa449464d530c921bd7de79bdc16fbdc14a70', 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: 'a4454f5ad15a67d5e41173d0227b77cd69776a18' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15649,7 +15716,7 @@ class Item {
             "button": [4],
             "detail": [4],
             "detailIcon": [1, "detail-icon"],
-            "disabled": [4],
+            "disabled": [516],
             "download": [1],
             "href": [1],
             "rel": [1],
@@ -15663,7 +15730,7 @@ class Item {
         },
         "$listeners$": [[0, "ionColor", "labelColorChanged"], [0, "ionStyle", "itemStyle"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["color", "color"]]
+        "$attrsToReflect$": [["color", "color"], ["disabled", "disabled"]]
     }; }
 }
 
@@ -16699,11 +16766,14 @@ class Loading {
         this.triggerChanged();
     }
     componentWillLoad() {
+        var _a;
         if (this.spinner === undefined) {
             const mode = getIonMode$1(this);
             this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
         }
-        setOverlayId(this.el);
+        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
+            setOverlayId(this.el);
+        }
     }
     componentDidLoad() {
         /**
@@ -16792,9 +16862,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: '4610b316b10a4df3416d0e83062935f3079baff2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'fb3d2cd7cd0539ed6540d8be50e243c7916b3ca2', 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: 'd07d0759ed13093c4c4fe06be442dde4bd9c2c31', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'ed3ec8b48f049b592fbea9767cc3d448dc037938', tabindex: "0" }), hAsync("div", { key: 'c515f3badf149d83c1d67374ef3507415fe51422', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '265d1673c2deb751aeca285f5a18863bb629ca5e', class: "loading-spinner" }, hAsync("ion-spinner", { key: '155bf7c92f6d7afd8edbb39f2b47ad05b7d503f1', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: 'b0e21df5cf54f9b48a218a03543d8c86f5406522', tabindex: "0" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: 'c8bd30782f3040b1b80e88aa924861e439d40754', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '4ebfbb67c92e8eb56c27dd7c199b35bf6be1cf63', tabindex: "0" }), hAsync("div", { key: '9492723cd87f1ef75534e449d4bc2b2deb0cb3cc', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: 'd9eb42454e48c82704d974a68b80ceb4de990417', class: "loading-spinner" }, hAsync("ion-spinner", { key: 'cdb046bad89872f4208ae466979315652766bf3a', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '412d1bb537dafa6e6863d07ddc15f5969fe0617d', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19516,6 +19586,7 @@ class Modal {
         this.triggerController.removeClickListener();
     }
     componentWillLoad() {
+        var _a;
         const { breakpoints, initialBreakpoint, el, htmlAttributes } = this;
         const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
         const attributesToInherit = ['aria-label', 'role'];
@@ -19557,7 +19628,9 @@ class Modal {
         if (breakpoints !== undefined && initialBreakpoint !== undefined && !breakpoints.includes(initialBreakpoint)) {
             printIonWarning('Your breakpoints array must include the initialBreakpoint value.');
         }
-        setOverlayId(el);
+        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
+            setOverlayId(this.el);
+        }
     }
     componentDidLoad() {
         /**
@@ -19947,18 +20020,18 @@ class Modal {
         const mode = getIonMode$1(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (hAsync(Host, Object.assign({ key: 'fe6fd17cf857127f89d652b9aa3e9473d28c55db', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '013ba4864ca4d2c1052c512f6a4b0732b8decff7', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, '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: '0f3a31363c2717e5483bc0412c25804897d4aff8', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '0e5ed59162ff08fe0a9f757e06bdacc75f65c0ed', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '35cdbe2238765e5f346ad7be64f7eefa8c78f0c0',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, '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: '498b1c0a03836d6799dcf3b8e9315805c70f6480', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'ce22e4caf1096e87248926fe2477f0d5a4c8a5cf', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '540e47b15d8290166c39b022c725182114a75682',
             /*
               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: '7a4031eaebf9a098f4c4220a5fe9d1c25cc0ec92', 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: 'f3b352ec9a63a7ec801462aacfd8295b4302d115', 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: '534adc8e5bd850199fe2e9e16f0e7c19217d8486' }))));
+            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: '31a3f58f4c733ffdf736523c154200874a96b1d0' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21665,7 +21738,10 @@ class Picker {
         this.triggerController.removeClickListener();
     }
     componentWillLoad() {
-        setOverlayId(this.el);
+        var _a;
+        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
+            setOverlayId(this.el);
+        }
     }
     componentDidLoad() {
         printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
@@ -21778,11 +21854,11 @@ class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, Object.assign({ key: '26e3144adcdf01605271d01e468bb4a75ce854b1', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '3b163ca87354a3a4f302ff016d5affd0dc97bccc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: 'fa212d21406606186cd95f8c7a4f119696ac8d4a', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '19ea889f65cb6a68a9db26cf9f83c6587cfcf07e', tabindex: "0" }), hAsync("div", { key: '5fc0f5d26915ba353b9f0335946f94b6fda95e1e', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '3fa5bff4ac0013ef31845482a27a14caebbdcd2f', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: '2ff6376956d01dcd9ec01b8d6972dd4b37ffb1a1', class: "picker-columns" }, hAsync("div", { key: '4adcef77429f10a3faa50b41d1eaf3404387997c', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: 'e0f37d3e9896eb2bc0f0aef4762a897130851963', class: "picker-below-highlight" }))), hAsync("div", { key: '671bb7d0f487b0d7c7fa70388f8fa1de77448b9f', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: 'da4224447bdbcfbadd1bd63ebe7a7bfdb8aa3129', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '211475c859b7acf4d64556905c45993201d92d43', tabindex: "0" }), hAsync("div", { key: 'c3b3674038155809caea84ae6348ff0d66897a64', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: 'a21757da70dc7864945a5751d9da3ca4bf87897b', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: '0220da1854d09ef22d2d9a32eaa3c3b222be5a0a', class: "picker-columns" }, hAsync("div", { key: '55757c165ba9e38e56b4dee76a9b13d3ff8b21e6', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '160092a46a48287bf75e5dfe3502f1755a2d0c70', class: "picker-below-highlight" }))), hAsync("div", { key: 'e212db6cca7d75fc0eda0baf4312dd51b9b7a4ef', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23975,8 +24051,9 @@ class Popover {
         }
     }
     componentWillLoad() {
+        var _a, _b;
         const { el } = this;
-        const popoverId = setOverlayId(el);
+        const popoverId = (_b = (_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : setOverlayId(el);
         this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
         if (this.alignment === undefined) {
             this.alignment = getIonMode$1(this) === 'ios' ? 'center' : 'start';
@@ -24179,9 +24256,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: '17e5e8b3e7ba5e251665fb9d0ade10c781f82f0e', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '3a7c4c39384bab1447c4bd6b9b06d7837a09353b', "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: 'c12fb94b375d7e88a0c5d715440c0f66ad7ee817', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '478b388cc9a5a382003a2863e968e77a174914ab', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: 'f1c63a0079f197a8d4577e7c00a654871fb9d816', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '08b62a321c09ad4b0f90460468ecbc1d56320bf1', class: "popover-content", part: "content" }, hAsync("slot", { key: '55645ff597f64d434219caa28015cf2a4ceb0ee5' })))));
+            }, 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: '38a1c4ad29238d1e81cab407f099121fa4947cce', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'f825494c5e3be89d7fcf0229e29b405bccb13edb', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '3acae5a0106389c776c8ffe5bf10f3ff006e0346', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '2aa73e9f06b1d2ac4c0d36c23186b9164f395079', class: "popover-content", part: "content" }, hAsync("slot", { key: '62f5713414aae47dde6a8aef1f9b69af287534ae' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25580,6 +25657,7 @@ class Refresher {
         this.pointerDown = false;
         this.needsCompletion = false;
         this.didRefresh = false;
+        this.contentFullscreen = false;
         this.lastVelocityY = 0;
         this.animations = [];
         this.nativeRefresher = false;
@@ -25874,6 +25952,12 @@ class Refresher {
              * Query the background content element from the host ion-content element directly.
              */
             this.backgroundContentEl = await contentEl.getBackgroundElement();
+            /**
+             * Check if the content element is fullscreen to apply the correct styles
+             * when the refresher is refreshing. Otherwise, the refresher will be
+             * hidden because it is positioned behind the background content element.
+             */
+            this.contentFullscreen = contentEl.fullscreen;
             if (await shouldUseNativeRefresher(this.el, getIonMode$1(this))) {
                 this.setupNativeRefresher(contentEl);
             }
@@ -25967,6 +26051,14 @@ class Refresher {
         this.progress = 0;
         this.state = 1 /* RefresherState.Inactive */;
         this.memoizeOverflowStyle();
+        /**
+         * If the content is fullscreen, then we need to
+         * set the offset-top style on the background content
+         * element to ensure that the refresher is shown.
+         */
+        if (this.contentFullscreen && this.backgroundContentEl) {
+            this.backgroundContentEl.style.setProperty('--offset-top', '0px');
+        }
     }
     onMove(detail) {
         if (!this.scrollEl) {
@@ -26094,6 +26186,7 @@ class Refresher {
     close(state, delay) {
         // create fallback timer incase something goes wrong with transitionEnd event
         setTimeout(() => {
+            var _a;
             this.state = 1 /* RefresherState.Inactive */;
             this.progress = 0;
             this.didStart = false;
@@ -26102,6 +26195,17 @@ class Refresher {
              * user can scroll again.
              */
             this.setCss(0, '0ms', false, '', true);
+            /**
+             * Reset the offset-top style on the background content
+             * when the refresher is no longer refreshing and the
+             * content is fullscreen.
+             *
+             * This ensures that the behavior of background content
+             * does not change when refreshing is complete.
+             */
+            if (this.contentFullscreen && this.backgroundContentEl) {
+                (_a = this.backgroundContentEl) === null || _a === void 0 ? void 0 : _a.style.removeProperty('--offset-top');
+            }
         }, 600);
         // reset the styles on the scroll element
         // set that the refresh is actively cancelling/completing
@@ -26155,7 +26259,7 @@ class Refresher {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '1696f66f62d18c9075294f17cb24263325fcf35d', slot: "fixed", class: {
+        return (hAsync(Host, { key: '3270f181a5141e7d886ec554a3e892974446b90e', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -31542,7 +31646,10 @@ class Toast {
         this.triggerController.removeClickListener();
     }
     componentWillLoad() {
-        setOverlayId(this.el);
+        var _a;
+        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
+            setOverlayId(this.el);
+        }
     }
     componentDidLoad() {
         /**
@@ -31780,9 +31887,9 @@ class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('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: 'da148788489146a20b42023fdc6401e53c044767', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '68c336f80af04ba484ca9899bae8f40c0d9b7691', 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: 'ab0a4d783aa43ba961492b3eb8beb60a38153057', class: wrapperClass }, hAsync("div", { key: '83e49027fd1ca6553d6910ff91befeea43576f3c', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '025cb4b6b170a89548969a25bcce4ab7a3817898', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'b811b4e1cbc1528c2cfb57898f5615692120f840', 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: '3483b188f14b700964a123997a60a43a2023a1b6', class: wrapperClass }, hAsync("div", { key: '1b88544a9b87253b364cbec6285625388979b560', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: 'bd1c42e3b14af66b880dfe283e3ae910075c0f70', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'a5ef6cdabc1f7c70d11a5f2a0abf8737fe7550e8', 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 {
@@ -33108,7 +33215,7 @@ exports.hydrateApp = hydrateApp;
 }
 
 /*
- Stencil Hydrate Runner v4.18.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.19.2 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -43506,67 +43613,50 @@ function humanReadableList(items) {
 }
 
 // src/mock-doc/serialize-node.ts
-function serializeNodeToHtml(elm, opts = {}) {
+function normalizeSerializationOptions(opts = {}) {
+  return {
+    ...opts,
+    outerHtml: typeof opts.outerHtml !== "boolean" ? false : opts.outerHtml,
+    ...opts.prettyHtml ? {
+      indentSpaces: typeof opts.indentSpaces !== "number" ? 2 : opts.indentSpaces,
+      newLines: typeof opts.newLines !== "boolean" ? true : opts.newLines
+    } : {
+      prettyHtml: false,
+      indentSpaces: typeof opts.indentSpaces !== "number" ? 0 : opts.indentSpaces,
+      newLines: typeof opts.newLines !== "boolean" ? false : opts.newLines
+    },
+    approximateLineWidth: typeof opts.approximateLineWidth !== "number" ? -1 : opts.approximateLineWidth,
+    removeEmptyAttributes: typeof opts.removeEmptyAttributes !== "boolean" ? true : opts.removeEmptyAttributes,
+    removeAttributeQuotes: typeof opts.removeAttributeQuotes !== "boolean" ? false : opts.removeAttributeQuotes,
+    removeBooleanAttributeQuotes: typeof opts.removeBooleanAttributeQuotes !== "boolean" ? false : opts.removeBooleanAttributeQuotes,
+    removeHtmlComments: typeof opts.removeHtmlComments !== "boolean" ? false : opts.removeHtmlComments,
+    serializeShadowRoot: typeof opts.serializeShadowRoot !== "boolean" ? false : opts.serializeShadowRoot,
+    fullDocument: typeof opts.fullDocument !== "boolean" ? true : opts.fullDocument
+  };
+}
+function serializeNodeToHtml(elm, serializationOptions = {}) {
+  const opts = normalizeSerializationOptions(serializationOptions);
   const output = {
     currentLineWidth: 0,
     indent: 0,
     isWithinBody: false,
     text: []
   };
-  if (opts.prettyHtml) {
-    if (typeof opts.indentSpaces !== "number") {
-      opts.indentSpaces = 2;
-    }
-    if (typeof opts.newLines !== "boolean") {
-      opts.newLines = true;
-    }
-    opts.approximateLineWidth = -1;
-  } else {
-    opts.prettyHtml = false;
-    if (typeof opts.newLines !== "boolean") {
-      opts.newLines = false;
-    }
-    if (typeof opts.indentSpaces !== "number") {
-      opts.indentSpaces = 0;
-    }
-  }
-  if (typeof opts.approximateLineWidth !== "number") {
-    opts.approximateLineWidth = -1;
-  }
-  if (typeof opts.removeEmptyAttributes !== "boolean") {
-    opts.removeEmptyAttributes = true;
-  }
-  if (typeof opts.removeAttributeQuotes !== "boolean") {
-    opts.removeAttributeQuotes = false;
-  }
-  if (typeof opts.removeBooleanAttributeQuotes !== "boolean") {
-    opts.removeBooleanAttributeQuotes = false;
-  }
-  if (typeof opts.removeHtmlComments !== "boolean") {
-    opts.removeHtmlComments = false;
-  }
-  if (typeof opts.serializeShadowRoot !== "boolean") {
-    opts.serializeShadowRoot = false;
-  }
-  if (opts.outerHtml) {
-    serializeToHtml(elm, opts, output, false);
-  } else {
-    for (let i = 0, ii = elm.childNodes.length; i < ii; i++) {
-      serializeToHtml(elm.childNodes[i], opts, output, false);
-    }
-  }
-  if (output.text[0] === "\n") {
-    output.text.shift();
-  }
-  if (output.text[output.text.length - 1] === "\n") {
-    output.text.pop();
+  let renderedNode = "";
+  const children = !opts.fullDocument && elm.body ? Array.from(elm.body.childNodes) : opts.outerHtml ? [elm] : Array.from(elm.childNodes);
+  for (let i = 0, ii = children.length; i < ii; i++) {
+    const child = children[i];
+    const chunks = Array.from(streamToHtml(child, opts, output));
+    renderedNode += chunks.join("");
   }
-  return output.text.join("");
+  return renderedNode.trim();
 }
-function serializeToHtml(node, opts, output, isShadowRoot) {
+var shadowRootTag = "mock:shadow-root";
+function* streamToHtml(node, opts, output) {
   var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  const isShadowRoot = node.nodeType === 11 /* DOCUMENT_FRAGMENT_NODE */;
   if (node.nodeType === 1 /* ELEMENT_NODE */ || isShadowRoot) {
-    const tagName = isShadowRoot ? "mock:shadow-root" : getTagName(node);
+    const tagName = isShadowRoot ? shadowRootTag : getTagName(node);
     if (tagName === "body") {
       output.isWithinBody = true;
     }
@@ -43574,17 +43664,23 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
     if (ignoreTag === false) {
       const isWithinWhitespaceSensitiveNode = opts.newLines || ((_a2 = opts.indentSpaces) != null ? _a2 : 0) > 0 ? isWithinWhitespaceSensitive(node) : false;
       if (opts.newLines && !isWithinWhitespaceSensitiveNode) {
-        output.text.push("\n");
+        yield "\n";
         output.currentLineWidth = 0;
       }
       if (((_b = opts.indentSpaces) != null ? _b : 0) > 0 && !isWithinWhitespaceSensitiveNode) {
         for (let i = 0; i < output.indent; i++) {
-          output.text.push(" ");
+          yield " ";
         }
         output.currentLineWidth += output.indent;
       }
-      output.text.push("<" + tagName);
-      output.currentLineWidth += tagName.length + 1;
+      const tag = tagName === shadowRootTag ? "template" : tagName;
+      yield "<" + tag;
+      output.currentLineWidth += tag.length + 1;
+      if (tag === "template") {
+        const mode = ` shadowrootmode="open"`;
+        yield mode;
+        output.currentLineWidth += mode.length;
+      }
       const attrsLength = node.attributes.length;
       const attributes = opts.prettyHtml && attrsLength > 1 ? cloneAttributes(node.attributes, true) : node.attributes;
       for (let i = 0; i < attrsLength; i++) {
@@ -43601,27 +43697,27 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
         if (attrNamespaceURI == null) {
           output.currentLineWidth += attrName.length + 1;
           if (opts.approximateLineWidth && opts.approximateLineWidth > 0 && output.currentLineWidth > opts.approximateLineWidth) {
-            output.text.push("\n" + attrName);
+            yield "\n" + attrName;
             output.currentLineWidth = 0;
           } else {
-            output.text.push(" " + attrName);
+            yield " " + attrName;
           }
         } else if (attrNamespaceURI === "http://www.w3.org/XML/1998/namespace") {
-          output.text.push(" xml:" + attrName);
+          yield " xml:" + attrName;
           output.currentLineWidth += attrName.length + 5;
         } else if (attrNamespaceURI === "http://www.w3.org/2000/xmlns/") {
           if (attrName !== "xmlns") {
-            output.text.push(" xmlns:" + attrName);
+            yield " xmlns:" + attrName;
             output.currentLineWidth += attrName.length + 7;
           } else {
-            output.text.push(" " + attrName);
+            yield " " + attrName;
             output.currentLineWidth += attrName.length + 1;
           }
         } else if (attrNamespaceURI === XLINK_NS) {
-          output.text.push(" xlink:" + attrName);
+          yield " xlink:" + attrName;
           output.currentLineWidth += attrName.length + 7;
         } else {
-          output.text.push(" " + attrNamespaceURI + ":" + attrName);
+          yield " " + attrNamespaceURI + ":" + attrName;
           output.currentLineWidth += attrNamespaceURI.length + attrName.length + 2;
         }
         if (opts.prettyHtml && attrName === "class") {
@@ -43636,43 +43732,45 @@ function serializeToHtml(node, opts, output, isShadowRoot) {
           }
         }
         if (opts.removeAttributeQuotes && CAN_REMOVE_ATTR_QUOTES.test(attrValue)) {
-          output.text.push("=" + escapeString(attrValue, true));
+          yield "=" + escapeString(attrValue, true);
           output.currentLineWidth += attrValue.length + 1;
         } else {
-          output.text.push('="' + escapeString(attrValue, true) + '"');
+          yield '="' + escapeString(attrValue, true) + '"';
           output.currentLineWidth += attrValue.length + 3;
         }
       }
       if (node.hasAttribute("style")) {
         const cssText = node.style.cssText;
         if (opts.approximateLineWidth && opts.approximateLineWidth > 0 && output.currentLineWidth + cssText.length + 10 > opts.approximateLineWidth) {
-          output.text.push(`
-style="${cssText}">`);
+          yield `
+style="${cssText}">`;
           output.currentLineWidth = 0;
         } else {
-          output.text.push(` style="${cssText}">`);
+          yield ` style="${cssText}">`;
           output.currentLineWidth += cssText.length + 10;
         }
       } else {
-        output.text.push(">");
+        yield ">";
         output.currentLineWidth += 1;
       }
     }
     if (EMPTY_ELEMENTS.has(tagName) === false) {
-      if (opts.serializeShadowRoot && node.shadowRoot != null) {
+      const shadowRoot = node.shadowRoot;
+      if (opts.serializeShadowRoot && shadowRoot != null) {
         output.indent = output.indent + ((_c = opts.indentSpaces) != null ? _c : 0);
-        serializeToHtml(node.shadowRoot, opts, output, true);
+        yield* streamToHtml(shadowRoot, opts, output);
         output.indent = output.indent - ((_d = opts.indentSpaces) != null ? _d : 0);
         if (opts.newLines && (node.childNodes.length === 0 || node.childNodes.length === 1 && node.childNodes[0].nodeType === 3 /* TEXT_NODE */ && ((_e = node.childNodes[0].nodeValue) == null ? void 0 : _e.trim()) === "")) {
-          output.text.push("\n");
+          yield "\n";
           output.currentLineWidth = 0;
           for (let i = 0; i < output.indent; i++) {
-            output.text.push(" ");
+            yield " ";
           }
           output.currentLineWidth += output.indent;
         }
       }
       if (opts.excludeTagContent == null || opts.excludeTagContent.includes(tagName) === false) {
+        const tag = tagName === shadowRootTag ? "template" : tagName;
         const childNodes = tagName === "template" ? node.content.childNodes : node.childNodes;
         const childNodeLength = childNodes.length;
         if (childNodeLength > 0) {
@@ -43683,17 +43781,17 @@ style="${cssText}">`);
               output.indent = output.indent + ((_h = opts.indentSpaces) != null ? _h : 0);
             }
             for (let i = 0; i < childNodeLength; i++) {
-              serializeToHtml(childNodes[i], opts, output, false);
+              yield* streamToHtml(childNodes[i], opts, output);
             }
             if (ignoreTag === false) {
               if (opts.newLines && !isWithinWhitespaceSensitiveNode) {
-                output.text.push("\n");
+                yield "\n";
                 output.currentLineWidth = 0;
               }
               if (((_i = opts.indentSpaces) != null ? _i : 0) > 0 && !isWithinWhitespaceSensitiveNode) {
                 output.indent = output.indent - ((_j = opts.indentSpaces) != null ? _j : 0);
                 for (let i = 0; i < output.indent; i++) {
-                  output.text.push(" ");
+                  yield " ";
                 }
                 output.currentLineWidth += output.indent;
               }
@@ -43701,13 +43799,13 @@ style="${cssText}">`);
           }
         }
         if (ignoreTag === false) {
-          output.text.push("</" + tagName + ">");
-          output.currentLineWidth += tagName.length + 3;
+          yield "</" + tag + ">";
+          output.currentLineWidth += tag.length + 3;
         }
       }
     }
     if (((_k = opts.approximateLineWidth) != null ? _k : 0) > 0 && STRUCTURE_ELEMENTS.has(tagName)) {
-      output.text.push("\n");
+      yield "\n";
       output.currentLineWidth = 0;
     }
     if (tagName === "body") {
@@ -43719,27 +43817,27 @@ style="${cssText}">`);
       const trimmedTextContent = textContent.trim();
       if (trimmedTextContent === "") {
         if (isWithinWhitespaceSensitive(node)) {
-          output.text.push(textContent);
+          yield textContent;
           output.currentLineWidth += textContent.length;
         } else if (((_l = opts.approximateLineWidth) != null ? _l : 0) > 0 && !output.isWithinBody) {
         } else if (!opts.prettyHtml) {
           output.currentLineWidth += 1;
           if (opts.approximateLineWidth && opts.approximateLineWidth > 0 && output.currentLineWidth > opts.approximateLineWidth) {
-            output.text.push("\n");
+            yield "\n";
             output.currentLineWidth = 0;
           } else {
-            output.text.push(" ");
+            yield " ";
           }
         }
       } else {
         const isWithinWhitespaceSensitiveNode = opts.newLines || ((_m = opts.indentSpaces) != null ? _m : 0) > 0 || opts.prettyHtml ? isWithinWhitespaceSensitive(node) : false;
         if (opts.newLines && !isWithinWhitespaceSensitiveNode) {
-          output.text.push("\n");
+          yield "\n";
           output.currentLineWidth = 0;
         }
         if (((_n = opts.indentSpaces) != null ? _n : 0) > 0 && !isWithinWhitespaceSensitiveNode) {
           for (let i = 0; i < output.indent; i++) {
-            output.text.push(" ");
+            yield " ";
           }
           output.currentLineWidth += output.indent;
         }
@@ -43748,15 +43846,15 @@ style="${cssText}">`);
           const parentTagName = node.parentNode != null && node.parentNode.nodeType === 1 /* ELEMENT_NODE */ ? node.parentNode.nodeName : null;
           if (typeof parentTagName === "string" && NON_ESCAPABLE_CONTENT.has(parentTagName)) {
             if (isWithinWhitespaceSensitive(node)) {
-              output.text.push(textContent);
+              yield textContent;
             } else {
-              output.text.push(trimmedTextContent);
+              yield trimmedTextContent;
               textContentLength = trimmedTextContent.length;
             }
             output.currentLineWidth += textContentLength;
           } else {
             if (opts.prettyHtml && !isWithinWhitespaceSensitiveNode) {
-              output.text.push(escapeString(textContent.replace(/\s\s+/g, " ").trim(), false));
+              yield escapeString(textContent.replace(/\s\s+/g, " ").trim(), false);
               output.currentLineWidth += textContentLength;
             } else {
               if (isWithinWhitespaceSensitive(node)) {
@@ -43778,7 +43876,7 @@ style="${cssText}">`);
                 }
                 output.currentLineWidth += textContentLength;
               }
-              output.text.push(escapeString(textContent, false));
+              yield escapeString(textContent, false);
             }
           }
         }
@@ -43786,27 +43884,27 @@ style="${cssText}">`);
     }
   } else if (node.nodeType === 8 /* COMMENT_NODE */) {
     const nodeValue = node.nodeValue;
-    if (opts.removeHtmlComments) {
-      const isHydrateAnnotation = (nodeValue == null ? void 0 : nodeValue.startsWith(CONTENT_REF_ID + ".")) || (nodeValue == null ? void 0 : nodeValue.startsWith(ORG_LOCATION_ID + ".")) || (nodeValue == null ? void 0 : nodeValue.startsWith(SLOT_NODE_ID + ".")) || (nodeValue == null ? void 0 : nodeValue.startsWith(TEXT_NODE_ID + "."));
-      if (!isHydrateAnnotation) {
-        return;
-      }
+    const isHydrateAnnotation = (nodeValue == null ? void 0 : nodeValue.startsWith(CONTENT_REF_ID + ".")) || (nodeValue == null ? void 0 : nodeValue.startsWith(ORG_LOCATION_ID + ".")) || (nodeValue == null ? void 0 : nodeValue.startsWith(SLOT_NODE_ID + ".")) || (nodeValue == null ? void 0 : nodeValue.startsWith(TEXT_NODE_ID + "."));
+    if (opts.removeHtmlComments && !isHydrateAnnotation) {
+      return;
     }
     const isWithinWhitespaceSensitiveNode = opts.newLines || ((_o = opts.indentSpaces) != null ? _o : 0) > 0 ? isWithinWhitespaceSensitive(node) : false;
     if (opts.newLines && !isWithinWhitespaceSensitiveNode) {
-      output.text.push("\n");
+      yield "\n";
       output.currentLineWidth = 0;
     }
     if (((_p = opts.indentSpaces) != null ? _p : 0) > 0 && !isWithinWhitespaceSensitiveNode) {
       for (let i = 0; i < output.indent; i++) {
-        output.text.push(" ");
+        yield " ";
       }
       output.currentLineWidth += output.indent;
     }
-    output.text.push("<!--" + nodeValue + "-->");
-    output.currentLineWidth += nodeValue.length + 7;
+    yield "<!--" + nodeValue + "-->";
+    if (nodeValue) {
+      output.currentLineWidth += nodeValue.length + 7;
+    }
   } else if (node.nodeType === 10 /* DOCUMENT_TYPE_NODE */) {
-    output.text.push("<!doctype html>");
+    yield "<!doctype html>";
   }
 }
 var AMP_REGEX = /&/g;
@@ -43831,7 +43929,7 @@ function escapeString(str, attrMode) {
 }
 function isWithinWhitespaceSensitive(node) {
   let _node = node;
-  while (_node != null) {
+  while (_node == null ? void 0 : _node.nodeName) {
     if (WHITESPACE_SENSITIVE.has(_node.nodeName)) {
       return true;
     }
@@ -44147,6 +44245,10 @@ Testing components with ElementInternals is fully supported in e2e tests.`
   get shadowRoot() {
     return this.__shadowRoot || null;
   }
+  /**
+   * Set shadow root for element
+   * @param shadowRoot - ShadowRoot to set
+   */
   set shadowRoot(shadowRoot) {
     if (shadowRoot != null) {
       shadowRoot.host = this;
@@ -45438,67 +45540,75 @@ var MockUListElement = class extends MockHTMLElement {
     super(ownerDocument, "ul");
   }
 };
+var CanvasRenderingContext = class {
+  constructor(context, contextAttributes) {
+    this.context = context;
+    this.contextAttributes = contextAttributes;
+  }
+  fillRect() {
+    return;
+  }
+  clearRect() {
+  }
+  getImageData(_, __, w, h) {
+    return {
+      data: new Array(w * h * 4)
+    };
+  }
+  toDataURL() {
+    return "data:,";
+  }
+  putImageData() {
+  }
+  createImageData() {
+    return {};
+  }
+  setTransform() {
+  }
+  drawImage() {
+  }
+  save() {
+  }
+  fillText() {
+  }
+  restore() {
+  }
+  beginPath() {
+  }
+  moveTo() {
+  }
+  lineTo() {
+  }
+  closePath() {
+  }
+  stroke() {
+  }
+  translate() {
+  }
+  scale() {
+  }
+  rotate() {
+  }
+  arc() {
+  }
+  fill() {
+  }
+  measureText() {
+    return { width: 0 };
+  }
+  transform() {
+  }
+  rect() {
+  }
+  clip() {
+  }
+};
 var MockCanvasElement = class extends MockHTMLElement {
   constructor(ownerDocument) {
     super(ownerDocument, "canvas");
   }
-  getContext() {
-    return {
-      fillRect() {
-        return;
-      },
-      clearRect() {
-      },
-      getImageData: function(_, __, w, h) {
-        return {
-          data: new Array(w * h * 4)
-        };
-      },
-      putImageData() {
-      },
-      createImageData: function() {
-        return [];
-      },
-      setTransform() {
-      },
-      drawImage() {
-      },
-      save() {
-      },
-      fillText() {
-      },
-      restore() {
-      },
-      beginPath() {
-      },
-      moveTo() {
-      },
-      lineTo() {
-      },
-      closePath() {
-      },
-      stroke() {
-      },
-      translate() {
-      },
-      scale() {
-      },
-      rotate() {
-      },
-      arc() {
-      },
-      fill() {
-      },
-      measureText() {
-        return { width: 0 };
-      },
-      transform() {
-      },
-      rect() {
-      },
-      clip() {
-      }
-    };
+  getContext(context, contextAttributes) {
+    return new CanvasRenderingContext(context, contextAttributes);
   }
 };
 function fullUrl(elm, attrName) {
@@ -45925,14 +46035,16 @@ var WINDOW_PROPS = [
 ];
 var GLOBAL_CONSTRUCTORS = [
   ["CustomEvent", MockCustomEvent],
+  ["DocumentFragment", MockDocumentFragment],
+  ["DOMParser", MockDOMParser],
   ["Event", MockEvent],
-  ["Headers", MockHeaders],
   ["FocusEvent", MockFocusEvent],
+  ["Headers", MockHeaders],
   ["KeyboardEvent", MockKeyboardEvent],
   ["MouseEvent", MockMouseEvent],
   ["Request", MockRequest],
   ["Response", MockResponse],
-  ["DOMParser", MockDOMParser],
+  ["ShadowRoot", MockDocumentFragment],
   ["HTMLAnchorElement", MockAnchorElement],
   ["HTMLBaseElement", MockBaseElement],
   ["HTMLButtonElement", MockButtonElement],
@@ -46143,6 +46255,7 @@ var nativeClearTimeout = clearTimeout;
 var nativeSetInterval = setInterval;
 var nativeSetTimeout = setTimeout;
 var nativeURL = URL;
+var nativeWindow = globalThis.window;
 var MockWindow = class {
   constructor(html = null) {
     if (html !== false) {
@@ -46169,10 +46282,10 @@ var MockWindow = class {
   blur() {
   }
   cancelAnimationFrame(id) {
-    this.__clearTimeout(id);
+    this.__clearTimeout.call(nativeWindow || this, id);
   }
   cancelIdleCallback(id) {
-    this.__clearTimeout(id);
+    this.__clearTimeout.call(nativeWindow || this, id);
   }
   get CharacterData() {
     if (this.__charDataCstr == null) {
@@ -46190,10 +46303,10 @@ var MockWindow = class {
     this.__charDataCstr = charDataCstr;
   }
   clearInterval(id) {
-    this.__clearInterval(id);
+    this.__clearInterval.call(nativeWindow || this, id);
   }
   clearTimeout(id) {
-    this.__clearTimeout(id);
+    this.__clearTimeout.call(nativeWindow || this, id);
   }
   close() {
     resetWindow(this);
@@ -46493,20 +46606,24 @@ var MockWindow = class {
       }
       return intervalId;
     }
-    const timeoutId = this.__setTimeout(() => {
-      if (this.__timeouts) {
-        this.__timeouts.delete(timeoutId);
-        try {
-          callback(...args);
-        } catch (e) {
-          if (this.console) {
-            this.console.error(e);
-          } else {
-            console.error(e);
+    const timeoutId = this.__setTimeout.call(
+      nativeWindow || this,
+      () => {
+        if (this.__timeouts) {
+          this.__timeouts.delete(timeoutId);
+          try {
+            callback(...args);
+          } catch (e) {
+            if (this.console) {
+              this.console.error(e);
+            } else {
+              console.error(e);
+            }
           }
         }
-      }
-    }, ms);
+      },
+      ms
+    );
     if (this.__timeouts) {
       this.__timeouts.add(timeoutId);
     }
@@ -46517,20 +46634,24 @@ var MockWindow = class {
       this.__timeouts = /* @__PURE__ */ new Set();
     }
     ms = Math.min(ms, this.__maxTimeout);
-    const timeoutId = this.__setTimeout(() => {
-      if (this.__timeouts) {
-        this.__timeouts.delete(timeoutId);
-        try {
-          callback(...args);
-        } catch (e) {
-          if (this.console) {
-            this.console.error(e);
-          } else {
-            console.error(e);
+    const timeoutId = this.__setTimeout.call(
+      nativeWindow || this,
+      () => {
+        if (this.__timeouts) {
+          this.__timeouts.delete(timeoutId);
+          try {
+            callback(...args);
+          } catch (e) {
+            if (this.console) {
+              this.console.error(e);
+            } else {
+              console.error(e);
+            }
           }
         }
-      }
-    }, ms);
+      },
+      ms
+    );
     if (this.__timeouts) {
       this.__timeouts.add(timeoutId);
     }
@@ -47105,7 +47226,6 @@ function createWindowFromHtml(templateHtml, uniqueId) {
 
 // src/utils/helpers.ts
 var isString = (v) => typeof v === "string";
-var isPromise = (v) => !!v && (typeof v === "object" || typeof v === "function") && typeof v.then === "function";
 
 // src/utils/message-utils.ts
 var catchError = (diagnostics, err2, msg) => {
@@ -47196,6 +47316,7 @@ var unwrapErr = (result) => {
 
 // src/compiler/html/canonical-link.ts
 var updateCanonicalLink = (doc, href) => {
+  var _a2;
   let canonicalLinkElm = doc.head.querySelector('link[rel="canonical"]');
   if (typeof href === "string") {
     if (canonicalLinkElm == null) {
@@ -47208,7 +47329,7 @@ var updateCanonicalLink = (doc, href) => {
     if (canonicalLinkElm != null) {
       const existingHref = canonicalLinkElm.getAttribute("href");
       if (!existingHref) {
-        canonicalLinkElm.parentNode.removeChild(canonicalLinkElm);
+        (_a2 = canonicalLinkElm.parentNode) == null ? void 0 : _a2.removeChild(canonicalLinkElm);
       }
     }
   }
@@ -48242,10 +48363,10 @@ function renderBuildDiagnostic(results, level, header, msg) {
   return diagnostic;
 }
 function renderBuildError(results, msg) {
-  return renderBuildDiagnostic(results, "error", "Hydrate Error", msg);
+  return renderBuildDiagnostic(results, "error", "Hydrate Error", msg || "");
 }
 function renderCatchError(results, err2) {
-  const diagnostic = renderBuildError(results, null);
+  const diagnostic = renderBuildError(results);
   if (err2 != null) {
     if (err2.stack != null) {
       diagnostic.messageText = err2.stack.toString();
@@ -48307,10 +48428,11 @@ function runtimeLog(pathname, type, msgs) {
 
 // src/hydrate/runner/window-initialize.ts
 function initializeWindow(win, doc, opts, results) {
-  try {
-    win.location.href = opts.url;
-  } catch (e) {
-    renderCatchError(results, e);
+  if (typeof opts.url === "string") {
+    try {
+      win.location.href = opts.url;
+    } catch (e) {
+    }
   }
   if (typeof opts.userAgent === "string") {
     try {
@@ -48360,134 +48482,99 @@ function initializeWindow(win, doc, opts, results) {
 }
 
 // src/hydrate/runner/render.ts
-function renderToString(html, options) {
+var NOOP = () => {
+};
+function streamToString(html, option) {
+  return renderToString(html, option, true);
+}
+function renderToString(html, options, asStream) {
   const opts = normalizeHydrateOptions(options);
   opts.serializeToHtml = true;
-  return new Promise((resolve) => {
-    let win;
-    const results = generateHydrateResults(opts);
-    if (hasError(results.diagnostics)) {
-      resolve(results);
-    } else if (typeof html === "string") {
-      try {
-        opts.destroyWindow = true;
-        opts.destroyDocument = true;
-        win = new MockWindow(html);
-        render(win, opts, results, resolve);
-      } catch (e) {
-        if (win && win.close) {
-          win.close();
-        }
-        win = null;
-        renderCatchError(results, e);
-        resolve(results);
+  opts.fullDocument = typeof opts.fullDocument === "boolean" ? opts.fullDocument : true;
+  opts.serializeShadowRoot = Boolean(opts.serializeShadowRoot);
+  opts.constrainTimeouts = false;
+  return hydrateDocument(html, opts, asStream);
+}
+function hydrateDocument(doc, options, asStream) {
+  const opts = normalizeHydrateOptions(options);
+  let win = null;
+  const results = generateHydrateResults(opts);
+  if (hasError(results.diagnostics)) {
+    return Promise.resolve(results);
+  }
+  if (typeof doc === "string") {
+    try {
+      opts.destroyWindow = true;
+      opts.destroyDocument = true;
+      win = new MockWindow(doc);
+      if (!asStream) {
+        return render(win, opts, results).then(() => results);
       }
-    } else if (isValidDocument(html)) {
-      try {
-        opts.destroyDocument = false;
-        win = patchDomImplementation(html, opts);
-        render(win, opts, results, resolve);
-      } catch (e) {
-        if (win && win.close) {
-          win.close();
-        }
-        win = null;
-        renderCatchError(results, e);
-        resolve(results);
+      return renderStream(win, opts, results);
+    } catch (e) {
+      if (win && win.close) {
+        win.close();
       }
-    } else {
-      renderBuildError(results, `Invalid html or document. Must be either a valid "html" string, or DOM "document".`);
-      resolve(results);
+      win = null;
+      renderCatchError(results, e);
+      return Promise.resolve(results);
     }
-  });
-}
-function hydrateDocument(doc, options) {
-  const opts = normalizeHydrateOptions(options);
-  opts.serializeToHtml = false;
-  return new Promise((resolve) => {
-    let win;
-    const results = generateHydrateResults(opts);
-    if (hasError(results.diagnostics)) {
-      resolve(results);
-    } else if (typeof doc === "string") {
-      try {
-        opts.destroyWindow = true;
-        opts.destroyDocument = true;
-        win = new MockWindow(doc);
-        render(win, opts, results, resolve);
-      } catch (e) {
-        if (win && win.close) {
-          win.close();
-        }
-        win = null;
-        renderCatchError(results, e);
-        resolve(results);
+  }
+  if (isValidDocument(doc)) {
+    try {
+      opts.destroyDocument = false;
+      win = patchDomImplementation(doc, opts);
+      if (!asStream) {
+        return render(win, opts, results).then(() => results);
       }
-    } else if (isValidDocument(doc)) {
-      try {
-        opts.destroyDocument = false;
-        win = patchDomImplementation(doc, opts);
-        render(win, opts, results, resolve);
-      } catch (e) {
-        if (win && win.close) {
-          win.close();
-        }
-        win = null;
-        renderCatchError(results, e);
-        resolve(results);
+      return renderStream(win, opts, results);
+    } catch (e) {
+      if (win && win.close) {
+        win.close();
       }
-    } else {
-      renderBuildError(results, `Invalid html or document. Must be either a valid "html" string, or DOM "document".`);
-      resolve(results);
+      win = null;
+      renderCatchError(results, e);
+      return Promise.resolve(results);
     }
-  });
+  }
+  renderBuildError(results, `Invalid html or document. Must be either a valid "html" string, or DOM "document".`);
+  return Promise.resolve(results);
 }
-function render(win, opts, results, resolve) {
-  if (!process.__stencilErrors) {
+async function render(win, opts, results) {
+  if ("process" in globalThis && typeof process.on === "function" && !process.__stencilErrors) {
     process.__stencilErrors = true;
     process.on("unhandledRejection", (e) => {
       console.log("unhandledRejection", e);
     });
   }
   initializeWindow(win, win.document, opts, results);
-  if (typeof opts.beforeHydrate === "function") {
-    try {
-      const rtn = opts.beforeHydrate(win.document);
-      if (isPromise(rtn)) {
-        rtn.then(() => {
-          hydrateFactory(win, opts, results, afterHydrate, resolve);
-        });
-      } else {
-        hydrateFactory(win, opts, results, afterHydrate, resolve);
-      }
-    } catch (e) {
-      renderCatchError(results, e);
-      finalizeHydrate(win, win.document, opts, results, resolve);
-    }
-  } else {
-    hydrateFactory(win, opts, results, afterHydrate, resolve);
+  const beforeHydrateFn = typeof opts.beforeHydrate === "function" ? opts.beforeHydrate(win.document) : NOOP;
+  try {
+    await Promise.resolve(beforeHydrateFn(win.document));
+    return new Promise((resolve) => hydrateFactory(win, opts, results, afterHydrate, resolve));
+  } catch (e) {
+    renderCatchError(results, e);
+    return finalizeHydrate(win, win.document, opts, results);
   }
 }
-function afterHydrate(win, opts, results, resolve) {
-  if (typeof opts.afterHydrate === "function") {
-    try {
-      const rtn = opts.afterHydrate(win.document);
-      if (isPromise(rtn)) {
-        rtn.then(() => {
-          finalizeHydrate(win, win.document, opts, results, resolve);
-        });
-      } else {
-        finalizeHydrate(win, win.document, opts, results, resolve);
-      }
-    } catch (e) {
-      renderCatchError(results, e);
-      finalizeHydrate(win, win.document, opts, results, resolve);
-    }
-  } else {
-    finalizeHydrate(win, win.document, opts, results, resolve);
+function renderStream(win, opts, results) {
+  async function* processRender() {
+    const renderResult = await render(win, opts, results);
+    yield renderResult.html;
+  }
+  return stream.Readable.from(processRender());
+}
+async function afterHydrate(win, opts, results, resolve) {
+  const afterHydrateFn = typeof opts.afterHydrate === "function" ? opts.afterHydrate(win.document) : NOOP;
+  try {
+    await Promise.resolve(afterHydrateFn(win.document));
+    return resolve(finalizeHydrate(win, win.document, opts, results));
+  } catch (e) {
+    renderCatchError(results, e);
+    return resolve(finalizeHydrate(win, win.document, opts, results));
   }
 }
-function finalizeHydrate(win, doc, opts, results, resolve) {
+function finalizeHydrate(win, doc, opts, results) {
   try {
     inspectElement(results, doc.documentElement, 0);
     if (opts.removeUnusedStyles !== false) {
@@ -48539,20 +48626,24 @@ function finalizeHydrate(win, doc, opts, results, resolve) {
   } catch (e) {
     renderCatchError(results, e);
   }
-  if (opts.destroyWindow) {
-    try {
-      if (!opts.destroyDocument) {
-        win.document = null;
-        doc.defaultView = null;
-      }
-      if (win.close) {
-        win.close();
-      }
-    } catch (e) {
-      renderCatchError(results, e);
+  destroyWindow(win, doc, opts, results);
+  return results;
+}
+function destroyWindow(win, doc, opts, results) {
+  if (!opts.destroyWindow) {
+    return;
+  }
+  try {
+    if (!opts.destroyDocument) {
+      win.document = null;
+      doc.defaultView = null;
+    }
+    if (win.close) {
+      win.close();
     }
+  } catch (e) {
+    renderCatchError(results, e);
   }
-  resolve(results);
 }
 function serializeDocumentToString(doc, opts) {
   return serializeNodeToHtml(doc, {
@@ -48563,7 +48654,8 @@ function serializeDocumentToString(doc, opts) {
     removeBooleanAttributeQuotes: opts.removeBooleanAttributeQuotes,
     removeEmptyAttributes: opts.removeEmptyAttributes,
     removeHtmlComments: opts.removeHtmlComments,
-    serializeShadowRoot: false
+    serializeShadowRoot: opts.serializeShadowRoot,
+    fullDocument: opts.fullDocument
   });
 }
 function isValidDocument(doc) {
@@ -48584,3 +48676,4 @@ exports.createWindowFromHtml = createWindowFromHtml;
 exports.hydrateDocument = hydrateDocument;
 exports.renderToString = renderToString;
 exports.serializeDocumentToString = serializeDocumentToString;
+exports.streamToString = streamToString;