@roadtrip/components 3.32.1 → 3.32.3

package/dist/esm/{index-f3c5b68e.js → index-8dc34f94.js}

@@ -1,8 +1,8 @@
 const NAMESPACE = 'roadtrip';
-const BUILD = /* roadtrip */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, 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 = /* roadtrip */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, 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 Client Platform v4.25.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.27.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -15,10 +15,15 @@ var SVG_NS = "http://www.w3.org/2000/svg";
 var HTML_NS = "http://www.w3.org/1999/xhtml";
 
 // src/client/client-host-ref.ts
-var hostRefs = /* @__PURE__ */ new WeakMap();
-var getHostRef = (ref) => hostRefs.get(ref);
+var getHostRef = (ref) => {
+  if (ref.__stencil__getHostRef) {
+    return ref.__stencil__getHostRef();
+  }
+  return void 0;
+};
 var registerInstance = (lazyInstance, hostRef) => {
-  hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
+  lazyInstance.__stencil__getHostRef = () => hostRef;
+  hostRef.$lazyInstance$ = lazyInstance;
 };
 var registerHost = (hostElement, cmpMeta) => {
   const hostRef = {
@@ -35,7 +40,8 @@ var registerHost = (hostElement, cmpMeta) => {
     hostElement["s-p"] = [];
     hostElement["s-rc"] = [];
   }
-  const ref = hostRefs.set(hostElement, hostRef);
+  const ref = hostRef;
+  hostElement.__stencil__getHostRef = () => ref;
   return ref;
 };
 var isMemberInElement = (elm, memberName) => memberName in elm;
@@ -493,12 +499,11 @@ var unwrapErr = (result) => {
   }
 };
 var updateFallbackSlotVisibility = (elm) => {
-  const childNodes = elm.__childNodes || elm.childNodes;
+  const childNodes = internalCall(elm, "childNodes");
   if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") {
     getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
-      var _a;
       if (slotNode.nodeType === 1 /* ElementNode */ && slotNode.tagName === "SLOT-FB") {
-        if ((_a = getHostSlotChildNodes(slotNode, slotNode["s-sn"], false)) == null ? void 0 : _a.length) {
+        if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) {
           slotNode.hidden = true;
         } else {
           slotNode.hidden = false;
@@ -506,19 +511,31 @@ var updateFallbackSlotVisibility = (elm) => {
       }
     });
   }
-  for (const childNode of childNodes) {
-    if (childNode.nodeType === 1 /* ElementNode */ && (childNode.__childNodes || childNode.childNodes).length) {
+  let i2 = 0;
+  for (i2 = 0; i2 < childNodes.length; i2++) {
+    const childNode = childNodes[i2];
+    if (childNode.nodeType === 1 /* ElementNode */ && internalCall(childNode, "childNodes").length) {
       updateFallbackSlotVisibility(childNode);
     }
   }
 };
+var getSlottedChildNodes = (childNodes) => {
+  const result = [];
+  for (let i2 = 0; i2 < childNodes.length; i2++) {
+    const slottedNode = childNodes[i2]["s-nr"] || void 0;
+    if (slottedNode && slottedNode.isConnected) {
+      result.push(slottedNode);
+    }
+  }
+  return result;
+};
 function getHostSlotNodes(childNodes, hostName, slotName) {
   let i2 = 0;
   let slottedNodes = [];
   let childNode;
   for (; i2 < childNodes.length; i2++) {
     childNode = childNodes[i2];
-    if (childNode["s-sr"] && childNode["s-hn"] === hostName && (slotName === void 0 || childNode["s-sn"] === slotName)) {
+    if (childNode["s-sr"] && (!hostName || childNode["s-hn"] === hostName) && (slotName === void 0 || getSlotName(childNode) === slotName)) {
       slottedNodes.push(childNode);
       if (typeof slotName !== "undefined") return slottedNodes;
     }
@@ -526,11 +543,12 @@ function getHostSlotNodes(childNodes, hostName, slotName) {
   }
   return slottedNodes;
 }
-var getHostSlotChildNodes = (node, slotName, includeSlot = true) => {
+var getSlotChildSiblings = (slot, slotName, includeSlot = true) => {
   const childNodes = [];
-  if (includeSlot && node["s-sr"] || !node["s-sr"]) childNodes.push(node);
-  while ((node = node.nextSibling) && node["s-sn"] === slotName) {
-    childNodes.push(node);
+  if (includeSlot && slot["s-sr"] || !slot["s-sr"]) childNodes.push(slot);
+  let node = slot;
+  while (node = node.nextSibling) {
+    if (getSlotName(node) === slotName && (includeSlot || !node["s-sr"])) childNodes.push(node);
   }
   return childNodes;
 };
@@ -550,37 +568,71 @@ var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
   return slotName === "";
 };
 var addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
-  let slottedNodeLocation;
   if (newChild["s-ol"] && newChild["s-ol"].isConnected) {
-    slottedNodeLocation = newChild["s-ol"];
-  } else {
-    slottedNodeLocation = document.createTextNode("");
-    slottedNodeLocation["s-nr"] = newChild;
+    return;
   }
+  const slottedNodeLocation = document.createTextNode("");
+  slottedNodeLocation["s-nr"] = newChild;
   if (!slotNode["s-cr"] || !slotNode["s-cr"].parentNode) return;
   const parent = slotNode["s-cr"].parentNode;
-  const appendMethod = prepend ? parent.__prepend || parent.prepend : parent.__appendChild || parent.appendChild;
+  const appendMethod = prepend ? internalCall(parent, "prepend") : internalCall(parent, "appendChild");
   if (typeof position !== "undefined") {
-    {
-      slottedNodeLocation["s-oo"] = position;
-      const childNodes = parent.__childNodes || parent.childNodes;
-      const slotRelocateNodes = [slottedNodeLocation];
-      childNodes.forEach((n) => {
-        if (n["s-nr"]) slotRelocateNodes.push(n);
-      });
-      slotRelocateNodes.sort((a, b) => {
-        if (!a["s-oo"] || a["s-oo"] < b["s-oo"]) return -1;
-        else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
-        return 0;
-      });
-      slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
-    }
+    slottedNodeLocation["s-oo"] = position;
+    const childNodes = internalCall(parent, "childNodes");
+    const slotRelocateNodes = [slottedNodeLocation];
+    childNodes.forEach((n) => {
+      if (n["s-nr"]) slotRelocateNodes.push(n);
+    });
+    slotRelocateNodes.sort((a, b) => {
+      if (!a["s-oo"] || a["s-oo"] < (b["s-oo"] || 0)) return -1;
+      else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
+      return 0;
+    });
+    slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
   } else {
     appendMethod.call(parent, slottedNodeLocation);
   }
   newChild["s-ol"] = slottedNodeLocation;
   newChild["s-sh"] = slotNode["s-hn"];
 };
+var getSlotName = (node) => typeof node["s-sn"] === "string" ? node["s-sn"] : node.nodeType === 1 && node.getAttribute("slot") || void 0;
+function patchSlotNode(node) {
+  if (node.assignedElements || node.assignedNodes || !node["s-sr"]) return;
+  const assignedFactory = (elementsOnly) => (function(opts) {
+    const toReturn = [];
+    const slotName = this["s-sn"];
+    if (opts == null ? void 0 : opts.flatten) {
+      console.error(`
+          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.
+        `);
+    }
+    const parent = this["s-cr"].parentElement;
+    const slottedNodes = parent.__childNodes ? parent.childNodes : getSlottedChildNodes(parent.childNodes);
+    slottedNodes.forEach((n) => {
+      if (slotName === getSlotName(n)) {
+        toReturn.push(n);
+      }
+    });
+    if (elementsOnly) {
+      return toReturn.filter((n) => n.nodeType === 1 /* ElementNode */);
+    }
+    return toReturn;
+  }).bind(node);
+  node.assignedElements = assignedFactory(true);
+  node.assignedNodes = assignedFactory(false);
+}
+function internalCall(node, method) {
+  if ("__" + method in node) {
+    const toReturn = node["__" + method];
+    if (typeof toReturn !== "function") return toReturn;
+    return toReturn.bind(node);
+  } else {
+    if (typeof node[method] !== "function") return node[method];
+    return node[method].bind(node);
+  }
+}
 var createTime = (fnName, tagName = "") => {
   {
     return () => {
@@ -727,7 +779,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       delete hostElm["s-sc"];
     }
   }
-  if (!plt.$orgLocNodes$) {
+  if (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size) {
     initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
   }
   hostElm[HYDRATE_ID] = hostId;
@@ -757,6 +809,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       }
     }
     if (childRenderNode.$tag$ === "slot") {
+      childRenderNode.$name$ = childRenderNode.$elm$["s-sn"] || childRenderNode.$elm$["name"] || null;
       if (childRenderNode.$children$) {
         childRenderNode.$flags$ |= 2 /* isSlotFallback */;
         if (!childRenderNode.$elm$.childNodes.length) {
@@ -817,18 +870,25 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       slot.$elm$.parentElement.classList.add(scopeId2 + "-s");
     });
   }
-  if (shadowRoot) {
+  if (shadowRoot && !shadowRoot.childNodes.length) {
     let rnIdex = 0;
     const rnLen = shadowRootNodes.length;
-    for (rnIdex; rnIdex < rnLen; rnIdex++) {
-      shadowRoot.appendChild(shadowRootNodes[rnIdex]);
+    if (rnLen) {
+      for (rnIdex; rnIdex < rnLen; rnIdex++) {
+        shadowRoot.appendChild(shadowRootNodes[rnIdex]);
+      }
+      Array.from(hostElm.childNodes).forEach((node) => {
+        if (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()) {
+            node.parentNode.removeChild(node);
+          }
+        }
+      });
     }
-    Array.from(hostElm.childNodes).forEach((node) => {
-      if (node.nodeType === 8 /* CommentNode */ && typeof node["s-sn"] !== "string") {
-        node.parentNode.removeChild(node);
-      }
-    });
   }
+  plt.$orgLocNodes$.delete(hostElm["s-id"]);
   hostRef.$hostElement$ = hostElm;
   endHydrate();
 };
@@ -939,7 +999,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
         $text$: null
       });
       if (childNodeType === TEXT_NODE_ID) {
-        childVNode.$elm$ = node.nextSibling;
+        childVNode.$elm$ = findCorrespondingNode(node, 3 /* TextNode */);
         if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* TextNode */) {
           childVNode.$text$ = childVNode.$elm$.textContent;
           childRenderNodes.push(childVNode);
@@ -955,7 +1015,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
           }
         }
       } else if (childNodeType === COMMENT_NODE_ID) {
-        childVNode.$elm$ = node.nextSibling;
+        childVNode.$elm$ = findCorrespondingNode(node, 8 /* CommentNode */);
         if (childVNode.$elm$ && childVNode.$elm$.nodeType === 8 /* CommentNode */) {
           childRenderNodes.push(childVNode);
           node.remove();
@@ -989,6 +1049,10 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
     vnode.$elm$ = node;
     vnode.$index$ = "0";
     parentVNode.$children$ = [vnode];
+  } else {
+    if (node.nodeType === 3 /* TextNode */ && !node.wholeText.trim()) {
+      node.remove();
+    }
   }
   return parentVNode;
 };
@@ -1058,6 +1122,7 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
     const slot = childVNode.$elm$;
     const shouldMove = parentNodeId && parentNodeId !== childVNode.$hostId$ && parentVNode.$elm$.shadowRoot;
     addSlottedNodes(slottedNodes, slotId, slotName, node, shouldMove ? parentNodeId : childVNode.$hostId$);
+    patchSlotNode(node);
     if (shouldMove) {
       parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
     }
@@ -1078,6 +1143,13 @@ var addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) =>
     slottedNode = slottedNode.nextSibling;
   }
 };
+var findCorrespondingNode = (node, type) => {
+  let sibling = node;
+  do {
+    sibling = sibling.nextSibling;
+  } while (sibling && (sibling.nodeType !== type || !sibling.nodeValue));
+  return sibling;
+};
 var parsePropertyValue = (propValue, propType) => {
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
@@ -1177,7 +1249,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
               styleContainerNode.append(styleElm);
             }
           }
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */ && styleContainerNode.nodeName !== "HEAD") {
+          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
             styleContainerNode.insertBefore(styleElm, null);
           }
         }
@@ -1202,119 +1274,128 @@ var attachStyles = (hostRef) => {
   const scopeId2 = addStyle(
     elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
     cmpMeta);
-  if (flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
+  if ((flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */ || flags & 128 /* shadowNeedsScopedCss */)) {
     elm["s-sc"] = scopeId2;
     elm.classList.add(scopeId2 + "-h");
   }
   endAttachStyles();
 };
 var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
+var convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
+var hydrateScopedToShadow = () => {
+  const styles2 = doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
+  let i2 = 0;
+  for (; i2 < styles2.length; i2++) {
+    registerStyle(styles2[i2].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles2[i2].innerHTML), true);
+  }
+};
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => {
-  if (oldValue !== newValue) {
-    let isProp = isMemberInElement(elm, memberName);
-    let ln = memberName.toLowerCase();
-    if (memberName === "class") {
-      const classList = elm.classList;
-      const oldClasses = parseClassList(oldValue);
-      let newClasses = parseClassList(newValue);
-      if (elm["s-si"] && initialRender) {
-        newClasses.push(elm["s-si"]);
-        oldClasses.forEach((c) => {
-          if (c.startsWith(elm["s-si"])) newClasses.push(c);
-        });
-        newClasses = [...new Set(newClasses)];
-        classList.add(...newClasses);
-      } else {
-        classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
-        classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
-      }
-    } else if (memberName === "style") {
-      {
-        for (const prop in oldValue) {
-          if (!newValue || newValue[prop] == null) {
-            if (prop.includes("-")) {
-              elm.style.removeProperty(prop);
-            } else {
-              elm.style[prop] = "";
-            }
-          }
-        }
-      }
-      for (const prop in newValue) {
-        if (!oldValue || newValue[prop] !== oldValue[prop]) {
+  if (oldValue === newValue) {
+    return;
+  }
+  let isProp = isMemberInElement(elm, memberName);
+  let ln = memberName.toLowerCase();
+  if (memberName === "class") {
+    const classList = elm.classList;
+    const oldClasses = parseClassList(oldValue);
+    let newClasses = parseClassList(newValue);
+    if (elm["s-si"] && initialRender) {
+      newClasses.push(elm["s-si"]);
+      oldClasses.forEach((c) => {
+        if (c.startsWith(elm["s-si"])) newClasses.push(c);
+      });
+      newClasses = [...new Set(newClasses)];
+      classList.add(...newClasses);
+    } else {
+      classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+      classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+    }
+  } else if (memberName === "style") {
+    {
+      for (const prop in oldValue) {
+        if (!newValue || newValue[prop] == null) {
           if (prop.includes("-")) {
-            elm.style.setProperty(prop, newValue[prop]);
+            elm.style.removeProperty(prop);
           } else {
-            elm.style[prop] = newValue[prop];
+            elm.style[prop] = "";
           }
         }
       }
-    } else if (memberName === "key") ; else if (memberName === "ref") {
-      if (newValue) {
-        newValue(elm);
-      }
-    } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
-      if (memberName[2] === "-") {
-        memberName = memberName.slice(3);
-      } else if (isMemberInElement(win, ln)) {
-        memberName = ln.slice(2);
-      } else {
-        memberName = ln[2] + memberName.slice(3);
-      }
-      if (oldValue || newValue) {
-        const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
-        memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
-        if (oldValue) {
-          plt.rel(elm, memberName, oldValue, capture);
-        }
-        if (newValue) {
-          plt.ael(elm, memberName, newValue, capture);
+    }
+    for (const prop in newValue) {
+      if (!oldValue || newValue[prop] !== oldValue[prop]) {
+        if (prop.includes("-")) {
+          elm.style.setProperty(prop, newValue[prop]);
+        } else {
+          elm.style[prop] = newValue[prop];
         }
       }
+    }
+  } else if (memberName === "key") ; else if (memberName === "ref") {
+    if (newValue) {
+      newValue(elm);
+    }
+  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+    if (memberName[2] === "-") {
+      memberName = memberName.slice(3);
+    } else if (isMemberInElement(win, ln)) {
+      memberName = ln.slice(2);
     } else {
-      const isComplex = isComplexType(newValue);
-      if ((isProp || isComplex && newValue !== null) && !isSvg) {
-        try {
-          if (!elm.tagName.includes("-")) {
-            const n = newValue == null ? "" : newValue;
-            if (memberName === "list") {
-              isProp = false;
-            } else if (oldValue == null || elm[memberName] != n) {
-              if (typeof elm.__lookupSetter__(memberName) === "function") {
-                elm[memberName] = n;
-              } else {
-                elm.setAttribute(memberName, n);
-              }
+      memberName = ln[2] + memberName.slice(3);
+    }
+    if (oldValue || newValue) {
+      const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+      memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
+      if (oldValue) {
+        plt.rel(elm, memberName, oldValue, capture);
+      }
+      if (newValue) {
+        plt.ael(elm, memberName, newValue, capture);
+      }
+    }
+  } else {
+    const isComplex = isComplexType(newValue);
+    if ((isProp || isComplex && newValue !== null) && !isSvg) {
+      try {
+        if (!elm.tagName.includes("-")) {
+          const n = newValue == null ? "" : newValue;
+          if (memberName === "list") {
+            isProp = false;
+          } else if (oldValue == null || elm[memberName] != n) {
+            if (typeof elm.__lookupSetter__(memberName) === "function") {
+              elm[memberName] = n;
+            } else {
+              elm.setAttribute(memberName, n);
             }
-          } else if (elm[memberName] !== newValue) {
-            elm[memberName] = newValue;
           }
-        } catch (e) {
+        } else if (elm[memberName] !== newValue) {
+          elm[memberName] = newValue;
         }
+      } catch (e) {
       }
-      let xlink = false;
-      {
-        if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
-          memberName = ln;
-          xlink = true;
-        }
+    }
+    let xlink = false;
+    {
+      if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
+        memberName = ln;
+        xlink = true;
       }
-      if (newValue == null || newValue === false) {
-        if (newValue !== false || elm.getAttribute(memberName) === "") {
-          if (xlink) {
-            elm.removeAttributeNS(XLINK_NS, memberName);
-          } else {
-            elm.removeAttribute(memberName);
-          }
-        }
-      } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
-        newValue = newValue === true ? "" : newValue;
+    }
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(memberName) === "") {
         if (xlink) {
-          elm.setAttributeNS(XLINK_NS, memberName, newValue);
+          elm.removeAttributeNS(XLINK_NS, memberName);
         } else {
-          elm.setAttribute(memberName, newValue);
+          elm.removeAttribute(memberName);
         }
       }
+    } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
+      newValue = newValue === true ? "" : newValue;
+      if (xlink) {
+        elm.setAttributeNS(XLINK_NS, memberName, newValue);
+      } else {
+        elm.setAttribute(memberName, newValue);
+      }
     }
   }
 };
@@ -1407,6 +1488,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
     elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
   } else if (newVNode2.$flags$ & 1 /* isSlotReference */) {
     elm = newVNode2.$elm$ = doc.createTextNode("");
+    {
+      updateElement(null, newVNode2, isSvgMode);
+    }
   } else {
     if (!isSvgMode) {
       isSvgMode = newVNode2.$tag$ === "svg";
@@ -1447,6 +1531,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       elm["s-cr"] = contentRef;
       elm["s-sn"] = newVNode2.$name$ || "";
       elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref;
+      patchSlotNode(elm);
       oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
       if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
         {
@@ -1644,9 +1729,7 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
       isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
     }
     {
-      if (tag === "slot" && !useNativeShadowDom) ; else {
-        updateElement(oldVNode, newVNode2, isSvgMode, isInitialRender);
-      }
+      updateElement(oldVNode, newVNode2, isSvgMode, isInitialRender);
     }
     if (oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
@@ -1735,13 +1818,13 @@ var insertBefore = (parent, newNode, reference) => {
   }
 };
 function addRemoveSlotScopedClass(reference, slotNode, newParent, oldParent) {
-  var _a;
+  var _a, _b;
   let scopeId2;
   if (reference && typeof slotNode["s-sn"] === "string" && !!slotNode["s-sr"] && reference.parentNode && reference.parentNode["s-sc"] && (scopeId2 = slotNode["s-si"] || reference.parentNode["s-sc"])) {
     const scopeName = slotNode["s-sn"];
     const hostName = slotNode["s-hn"];
     (_a = newParent.classList) == null ? void 0 : _a.add(scopeId2 + "-s");
-    if (oldParent && oldParent.classList.contains(scopeId2 + "-s")) {
+    if (oldParent && ((_b = oldParent.classList) == null ? void 0 : _b.contains(scopeId2 + "-s"))) {
       let child = (oldParent.__childNodes || oldParent.childNodes)[0];
       let found = false;
       while (child) {
@@ -1782,7 +1865,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   {
     scopeId = hostElm["s-sc"];
   }
-  useNativeShadowDom = (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
+  useNativeShadowDom = !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
   {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
@@ -1836,7 +1919,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
               }
             }
           }
-          nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](nodeToRelocate);
+          nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](slotRefNode);
         } else {
           if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
             if (isInitialLoad) {
@@ -1899,13 +1982,11 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
         hostRef.$queuedListeners$ = void 0;
       }
     }
-    {
-      maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
-    }
-  }
-  {
-    maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender", void 0, elm));
+    maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
+  } else {
+    maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
   }
+  maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender", void 0, elm));
   endSchedule();
   return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
@@ -1971,14 +2052,13 @@ var postUpdateComponent = (hostRef) => {
   const endPostUpdate = createTime("postUpdate", tagName);
   const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
+  safeCall(instance, "componentDidRender", void 0, elm);
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(elm);
     }
-    {
-      safeCall(instance, "componentDidLoad", void 0, elm);
-    }
+    safeCall(instance, "componentDidLoad", void 0, elm);
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);
@@ -1987,6 +2067,7 @@ var postUpdateComponent = (hostRef) => {
       }
     }
   } else {
+    safeCall(instance, "componentDidUpdate", void 0, elm);
     endPostUpdate();
   }
   {
@@ -2004,9 +2085,6 @@ var postUpdateComponent = (hostRef) => {
   }
 };
 var appDidLoad = (who) => {
-  {
-    addHydratedFlag(doc.documentElement);
-  }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
 };
 var safeCall = (instance, method, arg, elm) => {
@@ -2056,6 +2134,11 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
         }
       }
       if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+        if (instance.componentShouldUpdate) {
+          if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
+            return;
+          }
+        }
         scheduleUpdate(hostRef, false);
       }
     }
@@ -2206,7 +2289,8 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   let Cstr;
   if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
     hostRef.$flags$ |= 32 /* hasInitializedComponent */;
-    {
+    const bundleId = cmpMeta.$lazyBundleId$;
+    if (bundleId) {
       const CstrImport = loadModule(cmpMeta, hostRef);
       if (CstrImport && "then" in CstrImport) {
         const endLoad = uniqueTime();
@@ -2242,6 +2326,10 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       }
       endNewInstance();
       fireConnectedCallback(hostRef.$lazyInstance$, elm);
+    } else {
+      Cstr = elm.constructor;
+      const cmpTag = elm.localName;
+      customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
     }
     if (Cstr && Cstr.style) {
       let style;
@@ -2383,6 +2471,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   {
     plt.$flags$ |= 2 /* appLoaded */;
   }
+  {
+    hydrateScopedToShadow();
+  }
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
@@ -2453,6 +2544,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           plt.raf(() => {
             var _a3;
             const hostRef = getHostRef(this);
+            const i2 = deferredConnectedCallbacks.findIndex((host) => host === this);
+            if (i2 > -1) {
+              deferredConnectedCallbacks.splice(i2, 1);
+            }
             if (((_a3 = hostRef == null ? void 0 : hostRef.$vnode$) == null ? void 0 : _a3.$elm$) instanceof Node && !hostRef.$vnode$.$elm$.isConnected) {
               delete hostRef.$vnode$.$elm$;
             }
@@ -2538,4 +2633,4 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 export { Host as H, getElement as a, bootstrapLazy as b, createEvent as c, getAssetPath as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-f3c5b68e.js.map
+//# sourceMappingURL=index-8dc34f94.js.map