@stencil/core 5.0.0-alpha.27 → 5.0.0-alpha.29

package/dist/runtime/index.js

@@ -50,8 +50,20 @@ const HOST_FLAGS = {
 	isWatchReady: 128,
 	isListenReady: 256,
 	needsRerender: 512,
-	devOnRender: 1024,
-	devOnDidLoad: 2048
+	/**
+	* Set once this component's real (lazy-loaded) `connectedCallback` has fired for
+	* the first time. Lets a descendant skip creating/awaiting a connect-promise for
+	* an ancestor that's already connected. See {@link HostRef.$onFirstConnectResolve$}.
+	*/
+	hasFiredConnected: 1024,
+	/**
+	* Set when a lazy component's dynamic `import()` fails to resolve a
+	* constructor. Distinct from `hasInitializedComponent` being unset, which
+	* is true while an initialization attempt is merely queued/in-flight.
+	*/
+	hasFailedLoad: 2048,
+	devOnRender: 4096,
+	devOnDidLoad: 8192
 };
 const CF_scopedCssEncapsulation = 2;
 /**
@@ -270,8 +282,13 @@ const registerHost = (hostElement, cmpMeta) => {
 	if (BUILD.asyncLoading) {
 		hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
 		hostElement["s-rp"] = hostRef.$onReadyPromise$;
+		if (!BUILD.lazyLoad) {
+			hostRef.$onFirstConnectPromise$ = new Promise((r) => hostRef.$onFirstConnectResolve$ = r);
+			hostElement["s-fc"] = hostRef.$onFirstConnectPromise$;
+		}
 		if (!hostElement["s-p"]) hostElement["s-p"] = [];
 		if (!hostElement["s-rc"]) hostElement["s-rc"] = [];
+		if (!hostElement["s-pc"]) hostElement["s-pc"] = [];
 	}
 	if (BUILD.lazyLoad) hostRef.$fetchedCbList$ = [];
 	const ref = hostRef;
@@ -286,7 +303,12 @@ const consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);
 const consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
 //#endregion
 //#region src/client/client-load-module.ts
-const cmpModules = /* @__PURE__ */ new Map();
+const cmpModules = /*@__PURE__*/ new Map();
+/**
+* Tracks how many times a dynamic `import()` for a given lazy bundle has failed.
+* Used to cache bust the retry attempt in connected-callback.ts
+*/
+const failedLoadAttempts = /*@__PURE__*/ new Map();
 /**
 * We need to separate out this prefix so that Esbuild doesn't try to resolve
 * the below, but instead retains a dynamic `import()` statement in the
@@ -313,13 +335,21 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 	} else if (!bundleId) return;
 	const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;
 	if (module) return module[exportName];
+	const retryCount = failedLoadAttempts.get(bundleId) ?? 0;
+	const cacheBustParams = [retryCount > 0 ? `s-retry=${retryCount}` : "", BUILD.hotModuleReplacement && hmrVersionId ? `s-hmr=${hmrVersionId}` : ""].filter(Boolean).join("&");
 	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-	const entryFile = `${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? "?s-hmr=" + hmrVersionId : ""}`;
+	const entryFile = `${bundleId}.entry.js${cacheBustParams ? "?" + cacheBustParams : ""}`;
 	const onLoad = (importedModule) => {
-		if (!BUILD.hotModuleReplacement) cmpModules.set(bundleId, importedModule);
+		if (!BUILD.hotModuleReplacement) {
+			failedLoadAttempts.delete(bundleId);
+			cmpModules.set(bundleId, importedModule);
+		}
 		return importedModule[exportName];
 	};
-	const onError = (e) => consoleError(e, hostRef.$hostElement$);
+	const onError = (e) => {
+		failedLoadAttempts.set(bundleId, retryCount + 1);
+		consoleError(e, hostRef.$hostElement$);
+	};
 	return import(
 		/* @vite-ignore */
 		/* webpackInclude: /\.entry\.js$/ */
@@ -330,7 +360,7 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 };
 //#endregion
 //#region src/client/client-style.ts
-const styles = /* @__PURE__ */ new Map();
+const styles = /*@__PURE__*/ new Map();
 const modeResolutionChain = [];
 const needsScopedSSR = () => false;
 //#endregion
@@ -392,6 +422,10 @@ const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 */
 const SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 const XLINK_NS = "http://www.w3.org/1999/xlink";
+/**
+* Minimum delay, in milliseconds, before retrying a failed lazy component load.
+*/
+const LAZY_LOAD_RETRY_INTERVAL_MS = 1e3;
 const FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
 	"formAssociatedCallback",
 	"formResetCallback",
@@ -411,7 +445,7 @@ const plt = {
 	rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
 	ce: (eventName, opts) => new CustomEvent(eventName, opts)
 };
-const supportsListenerOptions = /* @__PURE__ */ (() => {
+const supportsListenerOptions = /*@__PURE__*/ (() => {
 	let supported = false;
 	try {
 		win.document?.addEventListener("e", null, Object.defineProperty({}, "passive", { get() {
@@ -421,14 +455,14 @@ const supportsListenerOptions = /* @__PURE__ */ (() => {
 	return supported;
 })();
 const promiseResolve = (v) => Promise.resolve(v);
-const supportsConstructableStylesheets = BUILD.constructableCSS ? /* @__PURE__ */ (() => {
+const supportsConstructableStylesheets = BUILD.constructableCSS ? /*@__PURE__*/ (() => {
 	try {
 		if (!win.document.adoptedStyleSheets) return false;
 		return typeof new CSSStyleSheet().replaceSync === "function";
 	} catch {}
 	return false;
 })() : false;
-const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ? /* @__PURE__ */ (() => !!win.document && Object.getOwnPropertyDescriptor(win.document.adoptedStyleSheets, "length").writable)() : false;
+const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ? /*@__PURE__*/ (() => !!win.document && Object.getOwnPropertyDescriptor(win.document.adoptedStyleSheets, "length").writable)() : false;
 //#endregion
 //#region src/client/client-task-queue.ts
 let queueCongestion = 0;
@@ -436,12 +470,13 @@ let queuePending = false;
 const queueDomReads = [];
 const queueDomWrites = [];
 const queueDomWritesLow = [];
+const scheduleFlush = () => win.document?.hidden ? nextTick(flush) : plt.raf(flush);
 const queueTask = (queue, write) => (cb) => {
 	queue.push(cb);
 	if (!queuePending) {
 		queuePending = true;
 		if (write && plt.$flags$ & PLATFORM_FLAGS.queueSync) nextTick(flush);
-		else plt.raf(flush);
+		else scheduleFlush();
 	}
 };
 const consume = (queue) => {
@@ -474,15 +509,15 @@ const flush = () => {
 			queueDomWritesLow.push(...queueDomWrites);
 			queueDomWrites.length = 0;
 		}
-		if (queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0) plt.raf(flush);
+		if (queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0) scheduleFlush();
 		else queueCongestion = 0;
 	} else {
 		consume(queueDomWrites);
-		if (queuePending = queueDomReads.length > 0) plt.raf(flush);
+		if (queuePending = queueDomReads.length > 0) scheduleFlush();
 	}
 };
 const nextTick = (cb) => promiseResolve().then(cb);
-const writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
+const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 //#endregion
 //#region src/runtime/asset-path.ts
 const getAssetPath = (path) => {
@@ -521,8 +556,10 @@ function createShadowRoot(cmpMeta) {
 	const shadowRoot = this.attachShadow(opts);
 	if (BUILD.shadowModeClosed && isClosed) this.__shadowRoot = shadowRoot;
 	if (globalStyleSheet === void 0) globalStyleSheet = createStyleSheetIfNeededAndSupported("") ?? null;
-	if (globalStyleSheet) if (supportsMutableAdoptedStyleSheets) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
-	else shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
+	if (globalStyleSheet) {
+		if (supportsMutableAdoptedStyleSheets) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
+		else shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
+	}
 }
 //#endregion
 //#region src/runtime/slot-polyfill-utils.ts
@@ -542,8 +579,10 @@ function createShadowRoot(cmpMeta) {
 const updateFallbackSlotVisibility = (elm) => {
 	const childNodes = internalCall(elm, "childNodes");
 	if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
-		if (slotNode.nodeType === NODE_TYPE.ElementNode && slotNode.tagName === "SLOT-FB") if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) slotNode.hidden = true;
-		else slotNode.hidden = false;
+		if (slotNode.nodeType === NODE_TYPE.ElementNode && slotNode.tagName === "SLOT-FB") {
+			if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) slotNode.hidden = true;
+			else slotNode.hidden = false;
+		}
 	});
 	let i = 0;
 	for (i = 0; i < childNodes.length; i++) {
@@ -586,7 +625,7 @@ function getHostSlotNodes(childNodes, hostName, slotName) {
 			slottedNodes.push(childNode);
 			if (typeof slotName !== "undefined") return slottedNodes;
 		}
-		slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
+		slottedNodes = [...slottedNodes, ...getHostSlotNodes(internalCall(childNode, "childNodes"), hostName, slotName)];
 	}
 	return slottedNodes;
 }
@@ -617,7 +656,7 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
 		if (nodeToRelocate.getAttribute("slot") === slotName) return true;
 		return false;
 	}
-	if (nodeToRelocate["s-sn"] === slotName) return true;
+	if (typeof nodeToRelocate["s-sa"] === "string") return nodeToRelocate["s-sa"] === slotName;
 	return slotName === "";
 };
 /**
@@ -666,8 +705,10 @@ function patchSlotNode(node) {
 	const assignedFactory = (elementsOnly) => function(opts) {
 		const toReturn = [];
 		const slotName = this["s-sn"];
-		if (opts?.flatten) if (BUILD.isDev) console.error("Flattening is not supported for Stencil non-shadow slots. You can use `.childNodes` for nested slot fallback content.");
-		else console.error("Flattening not supported for Stencil non-shadow slots");
+		if (opts?.flatten) {
+			if (BUILD.isDev) console.error("Flattening is not supported for Stencil non-shadow slots. You can use `.childNodes` for nested slot fallback content.");
+			else console.error("Flattening not supported for Stencil non-shadow slots");
+		}
 		const parent = this["s-cr"].parentElement;
 		(parent.__childNodes ? parent.childNodes : getSlottedChildNodes(parent.childNodes)).forEach((n) => {
 			if (slotName === getSlotName(n)) toReturn.push(n);
@@ -758,8 +799,10 @@ const patchCloneNode = (HostElementPrototype) => {
 			for (; i < childNodes.length; i++) {
 				slotted = childNodes[i]["s-nr"];
 				nonStencilNode = stencilPrivates.every((privateField) => !childNodes[i][privateField]);
-				if (slotted) if (clonedNode.__appendChild) clonedNode.__appendChild(slotted.cloneNode(true));
-				else clonedNode.appendChild(slotted.cloneNode(true));
+				if (slotted) {
+					if (clonedNode.__appendChild) clonedNode.__appendChild(slotted.cloneNode(true));
+					else clonedNode.appendChild(slotted.cloneNode(true));
+				}
 				if (nonStencilNode) clonedNode.appendChild(childNodes[i].cloneNode(true));
 			}
 		}
@@ -962,11 +1005,11 @@ const patchChildSlotNodes = (elm) => {
 	} });
 	patchHostOriginalAccessor("firstChild", elm);
 	Object.defineProperty(elm, "firstChild", { get() {
-		return this.childNodes[0];
+		return this.childNodes[0] || null;
 	} });
 	patchHostOriginalAccessor("lastChild", elm);
 	Object.defineProperty(elm, "lastChild", { get() {
-		return this.childNodes[this.childNodes.length - 1];
+		return this.childNodes[this.childNodes.length - 1] || null;
 	} });
 	patchHostOriginalAccessor("childNodes", elm);
 	Object.defineProperty(elm, "childNodes", { get() {
@@ -1012,7 +1055,7 @@ const patchNextSibling = (node) => {
 	Object.defineProperty(node, "nextSibling", { get: function() {
 		const parentNodes = this["s-ol"]?.parentNode.childNodes;
 		const index = parentNodes?.indexOf(this);
-		if (parentNodes && index > -1) return parentNodes[index + 1];
+		if (parentNodes && index > -1) return parentNodes[index + 1] || null;
 		return this.__nextSibling;
 	} });
 };
@@ -1027,7 +1070,7 @@ const patchNextElementSibling = (element) => {
 	Object.defineProperty(element, "nextElementSibling", { get: function() {
 		const parentEles = this["s-ol"]?.parentNode.children;
 		const index = parentEles?.indexOf(this);
-		if (parentEles && index > -1) return parentEles[index + 1];
+		if (parentEles && index > -1) return parentEles[index + 1] || null;
 		return this.__nextElementSibling;
 	} });
 };
@@ -1042,7 +1085,7 @@ const patchPreviousSibling = (node) => {
 	Object.defineProperty(node, "previousSibling", { get: function() {
 		const parentNodes = this["s-ol"]?.parentNode.childNodes;
 		const index = parentNodes?.indexOf(this);
-		if (parentNodes && index > -1) return parentNodes[index - 1];
+		if (parentNodes && index > -1) return parentNodes[index - 1] || null;
 		return this.__previousSibling;
 	} });
 };
@@ -1057,7 +1100,7 @@ const patchPreviousElementSibling = (element) => {
 	Object.defineProperty(element, "previousElementSibling", { get: function() {
 		const parentNodes = this["s-ol"]?.parentNode.children;
 		const index = parentNodes?.indexOf(this);
-		if (parentNodes && index > -1) return parentNodes[index - 1];
+		if (parentNodes && index > -1) return parentNodes[index - 1] || null;
 		return this.__previousElementSibling;
 	} });
 };
@@ -1232,7 +1275,7 @@ function queryNonceMetaTagContent(doc) {
 }
 //#endregion
 //#region src/runtime/styles.ts
-const rootAppliedStyles = /* @__PURE__ */ new WeakMap();
+const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
 /**
 * Get or initialize the set of applied style scope IDs for a container element.
 *
@@ -1256,9 +1299,10 @@ const getAppliedStyles = (container) => {
 * @param prepend if true, add to beginning; if false, add to end
 */
 const adoptStylesheet = (container, sheet, prepend = false) => {
-	if (supportsMutableAdoptedStyleSheets) if (prepend) container.adoptedStyleSheets.unshift(sheet);
-	else container.adoptedStyleSheets.push(sheet);
-	else if (prepend) container.adoptedStyleSheets = [sheet, ...container.adoptedStyleSheets];
+	if (supportsMutableAdoptedStyleSheets) {
+		if (prepend) container.adoptedStyleSheets.unshift(sheet);
+		else container.adoptedStyleSheets.push(sheet);
+	} else if (prepend) container.adoptedStyleSheets = [sheet, ...container.adoptedStyleSheets];
 	else container.adoptedStyleSheets = [...container.adoptedStyleSheets, sheet];
 };
 /**
@@ -1271,7 +1315,7 @@ const adoptStylesheet = (container, sheet, prepend = false) => {
 * @returns a new CSSStyleSheet for the correct window
 */
 const createStylesheetForWindow = (container, cssText) => {
-	const sheet = new (container.defaultView ?? container.ownerDocument?.defaultView ?? win).CSSStyleSheet();
+	const sheet = new (container.defaultView ?? (container.ownerDocument?.defaultView) ?? win).CSSStyleSheet();
 	sheet.replaceSync(cssText);
 	return sheet;
 };
@@ -1342,41 +1386,46 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
 				/**
 				* attach styles at the end of the head tag if we render scoped components
 				*/
-				if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) if (styleContainerNode.nodeName === "HEAD") {
-					/**
-					* if the page contains preconnect links, we want to insert the styles
-					* after the last preconnect link to ensure the styles are preloaded
-					*/
-					const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
-					const referenceNode = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
-					styleContainerNode.insertBefore(styleElm, referenceNode?.parentNode === styleContainerNode ? referenceNode : null);
-				} else if ("host" in styleContainerNode) if (supportsConstructableStylesheets) {
-					const stylesheet = createStylesheetForWindow(styleContainerNode, style);
-					adoptStylesheet(styleContainerNode, stylesheet, true);
-				} else {
-					/**
-					* If a scoped component is used within a shadow root and constructable stylesheets are
-					* not supported, we want to insert the styles at the beginning of the shadow root node.
-					*
-					* However, if there is already a style node in the shadow root, we just append
-					* the styles to the existing node.
-					*
-					* Note: order of how styles are applied is important. The new style node
-					* should be inserted before the existing style node.
-					*
-					* During HMR, create separate style elements for scoped components so they can be
-					* updated independently without affecting other components' styles.
-					*/
-					const existingStyleContainer = styleContainerNode.querySelector("style");
-					if (existingStyleContainer && !BUILD.hotModuleReplacement) existingStyleContainer.textContent = style + existingStyleContainer.textContent;
-					else styleContainerNode.prepend(styleElm);
+				if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) {
+					if (styleContainerNode.nodeName === "HEAD") {
+						/**
+						* if the page contains preconnect links, we want to insert the styles
+						* after the last preconnect link to ensure the styles are preloaded
+						*/
+						const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
+						const referenceNode = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
+						styleContainerNode.insertBefore(styleElm, referenceNode?.parentNode === styleContainerNode ? referenceNode : null);
+					} else if ("host" in styleContainerNode) {
+						if (supportsConstructableStylesheets) {
+							const stylesheet = createStylesheetForWindow(styleContainerNode, style);
+							adoptStylesheet(styleContainerNode, stylesheet, true);
+						} else {
+							/**
+							* If a scoped component is used within a shadow root and constructable stylesheets are
+							* not supported, we want to insert the styles at the beginning of the shadow root node.
+							*
+							* However, if there is already a style node in the shadow root, we just append
+							* the styles to the existing node.
+							*
+							* Note: order of how styles are applied is important. The new style node
+							* should be inserted before the existing style node.
+							*
+							* During HMR, create separate style elements for scoped components so they can be
+							* updated independently without affecting other components' styles.
+							*/
+							const existingStyleContainer = styleContainerNode.querySelector("style");
+							if (existingStyleContainer && !BUILD.hotModuleReplacement) existingStyleContainer.textContent = style + existingStyleContainer.textContent;
+							else styleContainerNode.prepend(styleElm);
+						}
+					} else styleContainerNode.append(styleElm);
 				}
-				else styleContainerNode.append(styleElm);
 				/**
 				* attach styles at the beginning of a shadow root node if we render shadow components
 				*/
-				if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) if (isClosedShadowSSR) styleContainerNode.prepend(styleElm);
-				else styleContainerNode.insertBefore(styleElm, null);
+				if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) {
+					if (isClosedShadowSSR) styleContainerNode.prepend(styleElm);
+					else styleContainerNode.insertBefore(styleElm, null);
+				}
 				if (appliedStyles) appliedStyles.add(scopeId);
 			}
 		} else if (BUILD.constructableCSS) {
@@ -1605,11 +1654,15 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		}
 	} else if (BUILD.vdomStyle && memberName === "style") {
 		if (BUILD.updatable) {
-			for (const prop in oldValue) if (!newValue || newValue[prop] == null) if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.removeProperty(prop);
-			else elm.style[prop] = "";
+			for (const prop in oldValue) if (!newValue || newValue[prop] == null) {
+				if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.removeProperty(prop);
+				else elm.style[prop] = "";
+			}
+		}
+		for (const prop in newValue) if (!oldValue || newValue[prop] !== oldValue[prop]) {
+			if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.setProperty(prop, newValue[prop]);
+			else elm.style[prop] = newValue[prop];
 		}
-		for (const prop in newValue) if (!oldValue || newValue[prop] !== oldValue[prop]) if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.setProperty(prop, newValue[prop]);
-		else elm.style[prop] = newValue[prop];
 	} else if (BUILD.vdomKey && memberName === "key") {} else if (BUILD.vdomRef && memberName === "ref") {
 		if (newValue) queueRefAttachment(newValue, elm);
 	} else if (BUILD.vdomListener && (BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
@@ -1618,7 +1671,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		else memberName = ln[2] + memberName.slice(3);
 		if (oldValue || newValue) {
 			const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
-			memberName = memberName.replace(/* @__PURE__ */ new RegExp(CAPTURE_EVENT_SUFFIX + "$"), "");
+			memberName = memberName.replace(/*@__PURE__*/ new RegExp(CAPTURE_EVENT_SUFFIX + "$"), "");
 			if (oldValue) plt.rel(elm, memberName, oldValue, capture);
 			if (newValue) plt.ael(elm, memberName, newValue, capture);
 		}
@@ -1657,8 +1710,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 			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 (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 {}
 		/**
@@ -1676,8 +1731,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 			}
 		}
 		if (newValue == null || newValue === false) {
-			if (newValue !== false || elm.getAttribute(memberName) === "") if (BUILD.vdomXlink && xlink) elm.removeAttributeNS(XLINK_NS, memberName);
-			else elm.removeAttribute(memberName);
+			if (newValue !== false || elm.getAttribute(memberName) === "") {
+				if (BUILD.vdomXlink && xlink) elm.removeAttributeNS(XLINK_NS, memberName);
+				else elm.removeAttribute(memberName);
+			}
 		} else if ((!isProp || flags & VNODE_FLAGS.isHost || isSvg) && !isComplex && elm.nodeType === NODE_TYPE.ElementNode) {
 			newValue = newValue === true ? "" : newValue;
 			if (BUILD.vdomXlink && xlink) elm.setAttributeNS(XLINK_NS, memberName, newValue);
@@ -1808,6 +1865,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 		}
 	} else if (BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
 		elm = newVNode.$elm$ = BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
+		if (typeof newVNode.$attrs$?.slot === "string") elm["s-sa"] = newVNode.$attrs$.slot;
 		if (BUILD.vdomAttribute) updateElement(null, newVNode, isSvgMode);
 	} else {
 		if (BUILD.svg && !isSvgMode) isSvgMode = newVNode.$tag$ === "svg";
@@ -2083,8 +2141,10 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
 			node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
 			newStartVnode = newCh[++newStartIdx];
 		}
-		if (node) if (BUILD.slotRelocation) insertBefore(referenceNode(oldStartVnode.$elm$).parentNode, node, referenceNode(oldStartVnode.$elm$));
-		else insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
+		if (node) {
+			if (BUILD.slotRelocation) insertBefore(referenceNode(oldStartVnode.$elm$).parentNode, node, referenceNode(oldStartVnode.$elm$));
+			else insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
+		}
 	}
 	if (oldStartIdx > oldEndIdx) addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
 	else if (BUILD.updatable && newStartIdx > newEndIdx) removeVnodes(oldCh, oldStartIdx, oldEndIdx);
@@ -2171,6 +2231,30 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
 */
 const relocateNodes = [];
 /**
+* When a forwarded `<slot>` gets relocated, drag along any content already forwarded through it,
+* to wherever it just landed (or nowhere, to be hidden, if it didn't match anything).
+*
+* Runs as its own pass after {@link markSlotContentForRelocation} rather than inside it, so that
+* function's matching order - which hydration's node/comment ordering depends on - is untouched.
+*/
+const carryContentWithRelocatedSlotRefs = () => {
+	for (const relocateData of relocateNodes.slice()) {
+		const marker = relocateData.$nodeToRelocate$;
+		if (!marker["s-sr"]) continue;
+		const carriedSiblings = getSlotChildSiblings(marker, marker["s-sn"] || "", false);
+		for (const carriedSibling of carriedSiblings) {
+			if (!carriedSibling["s-ol"]) continue;
+			let siblingRelocateData = relocateNodes.find((r) => r.$nodeToRelocate$ === carriedSibling);
+			if (!siblingRelocateData) {
+				siblingRelocateData = { $nodeToRelocate$: carriedSibling };
+				relocateNodes.push(siblingRelocateData);
+			}
+			siblingRelocateData.$slotRefNode$ = relocateData.$slotRefNode$;
+			if (relocateData.$slotRefNode$) carriedSibling["s-sh"] = relocateData.$slotRefNode$["s-hn"];
+		}
+	}
+};
+/**
 * Mark the contents of a slot for relocation via adding references to them to
 * the {@link relocateNodes} data structure. The actual work of relocating them
 * will then be handled in {@link renderVdom}.
@@ -2369,6 +2453,7 @@ render() {
 		plt.$flags$ |= PLATFORM_FLAGS.isTmpDisconnected;
 		if (checkSlotRelocate) {
 			markSlotContentForRelocation(rootVnode.$elm$);
+			carryContentWithRelocatedSlotRefs();
 			for (const relocateData of relocateNodes) {
 				const nodeToRelocate = relocateData.$nodeToRelocate$;
 				if (!nodeToRelocate["s-ol"] && win.document) {
@@ -2428,7 +2513,7 @@ render() {
 	}
 	if (BUILD.slotRelocation && !useNativeShadowDom && !(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && hostElm["s-cr"]) {
 		const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
-		for (const childNode of children) if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"]) {
+		for (const childNode of children) if (childNode["s-hn"] !== hostTagName && childNode["s-sh"] !== hostTagName) {
 			if (isInitialLoad && childNode["s-ih"] == null) childNode["s-ih"] = childNode.hidden ?? false;
 			if (childNode.nodeType === NODE_TYPE.ElementNode) childNode.hidden = true;
 			else if (childNode.nodeType === NODE_TYPE.TextNode && !!childNode.nodeValue.trim()) {
@@ -2446,16 +2531,58 @@ const slotReferenceDebugNode = (slotVNode) => win.document?.createComment(`<slot
 const originalLocationDebugNode = (nodeToRelocate) => win.document?.createComment(`org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate["s-hn"]})` : `[${nodeToRelocate.textContent}]`));
 //#endregion
 //#region src/runtime/update-component.ts
+/**
+* Get a promise that resolves once `hostRef`'s real `connectedCallback` has fired for the first time.
+*
+* @param hostRef the component's host reference
+* @returns a promise that resolves once the component's real `connectedCallback` has fired
+*/
+const ensureFirstConnectPromise = (hostRef) => {
+	if (!hostRef.$onFirstConnectPromise$) hostRef.$onFirstConnectPromise$ = new Promise((r) => hostRef.$onFirstConnectResolve$ = r);
+	return hostRef.$onFirstConnectPromise$;
+};
+/**
+* Resolve `hostRef`'s first-connect promise and flag it connected. Called once this
+* component's real `connectedCallback` fires, plus from error/disconnect cleanup so a
+* component that never connects can't hang an ancestor or descendant forever.
+*
+* @param hostRef the component's host reference
+*/
+const markFirstConnected = (hostRef) => {
+	hostRef.$flags$ |= HOST_FLAGS.hasFiredConnected;
+	hostRef.$onFirstConnectResolve$?.();
+	hostRef.$onFirstConnectResolve$ = void 0;
+};
+/**
+* Wait for `ancestorElm` to be defined and its real `connectedCallback` to have completed.
+* Shared by the lazy ({@link initializeComponent}) and standalone (`bootstrap-standalone.ts`)
+* `connectedCallback` paths so a component never connects before its nearest Stencil
+* ancestor, regardless of load order. Both call sites already check `BUILD.asyncLoading` and
+* that an ancestor exists before calling this. Lazy's proxy classes are always pre-defined,
+* so the `whenDefined` wait is a no-op there - it only does real work for standalone's
+* autoloader, where the ancestor tag may not be defined yet.
+*
+* @param ancestorElm the nearest Stencil ancestor element
+*/
+const awaitAncestorConnected = async (ancestorElm) => {
+	let ancestorHostRef = getHostRef(ancestorElm);
+	if (!BUILD.lazyLoad && !ancestorHostRef) {
+		await getRegistry().whenDefined(ancestorElm.tagName.toLowerCase());
+		ancestorHostRef = getHostRef(ancestorElm);
+	}
+	if (ancestorHostRef && !(ancestorHostRef.$flags$ & HOST_FLAGS.hasFiredConnected)) await ensureFirstConnectPromise(ancestorHostRef);
+};
 const attachToAncestor = (hostRef, ancestorComponent) => {
 	if (BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
 		const index = ancestorComponent["s-p"].push(new Promise((r) => hostRef.$onRenderResolve$ = () => {
 			ancestorComponent["s-p"].splice(index - 1, 1);
 			r();
 		}));
+		if (ancestorComponent["s-pc"]) ancestorComponent["s-pc"].push(ensureFirstConnectPromise(hostRef));
 	}
 };
 const scheduleUpdate = (hostRef, isInitialLoad) => {
-	if (BUILD.taskQueue && BUILD.updatable) hostRef.$flags$ |= HOST_FLAGS.isQueuedForUpdate;
+	if (BUILD.updatable) hostRef.$flags$ |= HOST_FLAGS.isQueuedForUpdate;
 	if (BUILD.asyncLoading && hostRef.$flags$ & HOST_FLAGS.isWaitingForChildren) {
 		hostRef.$flags$ |= HOST_FLAGS.needsRerender;
 		return;
@@ -2463,6 +2590,8 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
 	attachToAncestor(hostRef, hostRef.$ancestorComponent$);
 	const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
 	if (isInitialLoad) {
+		const pendingConnects = BUILD.asyncLoading ? hostRef.$hostElement$["s-pc"] : void 0;
+		if (pendingConnects && pendingConnects.length > 0) return Promise.all(pendingConnects).then(dispatch).catch(dispatch);
 		queueMicrotask(() => {
 			dispatch();
 		});
@@ -2502,10 +2631,6 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
 	let maybePromise;
 	if (isInitialLoad) {
 		if (BUILD.lazyLoad) {
-			if (BUILD.slotRelocation && hostRef.$deferredConnectedCallback$) {
-				hostRef.$deferredConnectedCallback$ = false;
-				safeCall(instance, "connectedCallback", void 0, elm);
-			}
 			if (BUILD.hostListener) {
 				hostRef.$flags$ |= HOST_FLAGS.isListenReady;
 				if (hostRef.$queuedListeners$) {
@@ -2518,6 +2643,14 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
 		if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillLoad");
 		maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
 	} else {
+		if (BUILD.updatable && hostRef.$queuedPropChanges$) {
+			const changes = hostRef.$queuedPropChanges$;
+			hostRef.$queuedPropChanges$ = void 0;
+			if (safeCall(instance, "componentShouldUpdate", changes, elm) === false) {
+				hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
+				return;
+			}
+		}
 		if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillUpdate");
 		maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
 	}
@@ -2632,7 +2765,6 @@ let renderingRef = null;
 const callRender = (hostRef, instance, elm, isInitialLoad) => {
 	const allRenderFn = !!BUILD.allRenderFn;
 	const lazyLoad = !!BUILD.lazyLoad;
-	const taskQueue = !!BUILD.taskQueue;
 	const updatable = !!BUILD.updatable;
 	try {
 		renderingRef = instance;
@@ -2641,14 +2773,17 @@ const callRender = (hostRef, instance, elm, isInitialLoad) => {
 		* method, so we can call the method immediately. If not, check before calling it.
 		*/
 		instance = allRenderFn ? instance.render() : instance.render && instance.render();
-		if (updatable && taskQueue) hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
+		if (updatable) hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
 		if (updatable || lazyLoad) hostRef.$flags$ |= HOST_FLAGS.hasRendered;
-		if (BUILD.hasRenderFn || BUILD.reflect) if (BUILD.vdomRender || BUILD.reflect) if (BUILD.hydrateServerSide) return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
-		else renderVdom(hostRef, instance, isInitialLoad);
-		else {
-			const shadowRoot = elm.shadowRoot;
-			if (hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.shadowDomEncapsulation) shadowRoot.textContent = instance;
-			else elm.textContent = instance;
+		if (BUILD.hasRenderFn || BUILD.reflect) {
+			if (BUILD.vdomRender || BUILD.reflect) {
+				if (BUILD.hydrateServerSide) return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
+				else renderVdom(hostRef, instance, isInitialLoad);
+			} else {
+				const shadowRoot = elm.shadowRoot;
+				if (hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.shadowDomEncapsulation) shadowRoot.textContent = instance;
+				else elm.textContent = instance;
+			}
 		}
 	} catch (e) {
 		consoleError(e, hostRef.$hostElement$);
@@ -2788,17 +2923,19 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
 	const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
 	for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) {
 		if (!(memberFlags & MEMBER_FLAGS.PropLike)) continue;
-		const sig = signal(hostRef.$instanceValues$.get(memberName));
+		const initialVal = hostRef.$instanceValues$.get(memberName);
+		const sig = signal(initialVal);
 		hostRef.$signalValues$.set(memberName, sig);
 		let prevScheduleVal = sig.peek();
 		disposers.push(effect(() => {
 			const newVal = sig.value;
 			if (hostRef.$flags$ & HOST_FLAGS.hasRendered) {
 				if (instance?.componentShouldUpdate) {
-					if (instance.componentShouldUpdate(newVal, prevScheduleVal, memberName) === false && !(hostRef.$flags$ & HOST_FLAGS.isQueuedForUpdate)) {
-						prevScheduleVal = newVal;
-						return;
-					}
+					const changes = hostRef.$queuedPropChanges$ ||= {};
+					changes[memberName] = {
+						newVal,
+						oldVal: changes[memberName]?.oldVal ?? prevScheduleVal
+					};
 				}
 				if (!(hostRef.$flags$ & HOST_FLAGS.isQueuedForUpdate)) scheduleUpdate(hostRef, false);
 			}
@@ -2833,7 +2970,8 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
 			consoleError(e, elm);
 		}
 	}));
-	elm[STENCIL_SIGNALS_SYMBOL] = new Map([...hostRef.$signalValues$].filter(([k]) => (cmpMeta.$members$?.[k]?.[0] ?? 0) & MEMBER_FLAGS.Prop));
+	const publicSignals = new Map([...hostRef.$signalValues$].filter(([k]) => (cmpMeta.$members$?.[k]?.[0] ?? 0) & MEMBER_FLAGS.Prop));
+	elm[STENCIL_SIGNALS_SYMBOL] = publicSignals;
 	hostRef.$signalCleanup$ = () => {
 		disposers.forEach((d) => d());
 		elm[STENCIL_SIGNALS_SYMBOL] = void 0;
@@ -2882,19 +3020,25 @@ const h = (nodeName, vnodeData, ...children) => {
 		for (let i = 0; i < c.length; i++) {
 			child = c[i];
 			if (Array.isArray(child)) walk(child);
-			else if (child != null && typeof child !== "boolean") if (BUILD.vdomSignals && isSignalLike(child)) {
-				const sigVNode = newVNode(null, String(child.peek()));
-				sigVNode.$signal$ = child;
-				vNodeChildren.push(sigVNode);
-				lastSimple = false;
-			} else {
-				if (simple = typeof nodeName !== "function" && !isComplexType(child)) child = String(child);
-				else if (BUILD.isDev && typeof nodeName !== "function" && child.$flags$ === void 0) consoleDevError(`vNode passed as children has unexpected type.
-Make sure it's using the correct h() function.
-Empty objects can also be the cause, look for JSX comments that became objects.`);
-				if (simple && lastSimple) vNodeChildren[vNodeChildren.length - 1].$text$ += child;
-				else vNodeChildren.push(simple ? newVNode(null, child) : child);
-				lastSimple = simple;
+			else if (child != null && typeof child !== "boolean") {
+				if (BUILD.vdomSignals && isSignalLike(child)) {
+					const sigVNode = newVNode(null, String(child.peek()));
+					sigVNode.$signal$ = child;
+					vNodeChildren.push(sigVNode);
+					lastSimple = false;
+				} else {
+					if (simple = typeof nodeName !== "function" && !isComplexType(child)) child = String(child);
+					else if (typeof nodeName !== "function" && child.$flags$ === void 0) {
+						if (BUILD.isDev) consoleDevError(`vNode passed as children has unexpected type.
+  Make sure it's using the correct h() function.
+  Empty objects can also be the cause, look for JSX comments that became objects.`);
+						else consoleError("Invalid vNode child");
+						continue;
+					}
+					if (simple && lastSimple) vNodeChildren[vNodeChildren.length - 1].$text$ += child;
+					else vNodeChildren.push(simple ? newVNode(null, child) : child);
+					lastSimple = simple;
+				}
 			}
 		}
 	};
@@ -3879,14 +4023,15 @@ const parsePropertyValue = (propValue, propType, isFormAssociated) => {
 		/**
 		* ensure this value is of the correct prop type
 		*/
-		if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean)
- /**
-		* For form-associated components, according to HTML spec, the presence of any boolean attribute
-		* (regardless of its value, even "false") should make the property true.
-		* For non-form-associated components, we maintain the legacy behavior where "false" becomes false.
-		*/
-		if (BUILD.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
-		else return propValue === "false" ? false : propValue === "" || !!propValue;
+		if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean) {
+			/**
+			* For form-associated components, according to HTML spec, the presence of any boolean attribute
+			* (regardless of its value, even "false") should make the property true.
+			* For non-form-associated components, we maintain the legacy behavior where "false" becomes false.
+			*/
+			if (BUILD.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
+			else return propValue === "false" ? false : propValue === "" || !!propValue;
+		}
 		/**
 		* force it to be a number
 		*/
@@ -3974,7 +4119,11 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 		}
 		if (BUILD.updatable && flags & HOST_FLAGS.hasRendered) {
 			if (instance.componentShouldUpdate) {
-				if (instance.componentShouldUpdate(newVal, oldVal, propName) === false && !(flags & HOST_FLAGS.isQueuedForUpdate)) return;
+				const changes = hostRef.$queuedPropChanges$ ||= {};
+				changes[propName] = {
+					newVal,
+					oldVal: changes[propName]?.oldVal ?? oldVal
+				};
 			}
 			if (!(flags & HOST_FLAGS.isQueuedForUpdate)) scheduleUpdate(hostRef, false);
 		}
@@ -4108,11 +4257,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						};
 						for (const deserializer of cmpMeta.$deserializers$[propName]) {
 							const [[methodName]] = Object.entries(deserializer);
-							if (BUILD.lazyLoad) if (hostRef.$lazyInstance$) setVal(methodName, hostRef.$lazyInstance$);
-							else hostRef.$fetchedCbList$.push(() => {
-								setVal(methodName, hostRef.$lazyInstance$);
-							});
-							else setVal(methodName, this);
+							if (BUILD.lazyLoad) {
+								if (hostRef.$lazyInstance$) setVal(methodName, hostRef.$lazyInstance$);
+								else hostRef.$fetchedCbList$.push(() => {
+									setVal(methodName, hostRef.$lazyInstance$);
+								});
+							} else setVal(methodName, this);
 						}
 						return;
 					} else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && this[propName] == newValue) return;
@@ -4136,7 +4286,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
 				});
 			};
-			Cstr.observedAttributes = Array.from(new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {
+			Cstr.observedAttributes = Array.from(/* @__PURE__ */ new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {
 				const attrName = m[1] || propName;
 				attrNameToPropName.set(attrName, propName);
 				if (BUILD.reflect && m[0] & MEMBER_FLAGS.ReflectAttr) cmpMeta.$attrsToReflect$?.push([propName, attrName]);
@@ -4163,6 +4313,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 	try {
 		if ((hostRef.$flags$ & HOST_FLAGS.hasInitializedComponent) === 0) {
 			hostRef.$flags$ |= HOST_FLAGS.hasInitializedComponent;
+			hostRef.$flags$ &= ~HOST_FLAGS.hasFailedLoad;
 			const bundleId = cmpMeta.$lazyBundleId$;
 			if (BUILD.lazyLoad && bundleId) {
 				const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
@@ -4171,7 +4322,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 					Cstr = await CstrImport;
 					endLoad();
 				} else Cstr = CstrImport;
-				if (!Cstr) throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
+				if (!Cstr) {
+					hostRef.$flags$ &= ~HOST_FLAGS.hasInitializedComponent;
+					hostRef.$loadRetryCount$ = (hostRef.$loadRetryCount$ ?? 0) + 1;
+					if (hostRef.$loadRetryCount$ < 3) hostRef.$flags$ |= HOST_FLAGS.hasFailedLoad;
+					throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
+				}
 				if (BUILD.member && !Cstr.isProxied) {
 					if (BUILD.propChangeCallback) {
 						cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
@@ -4190,8 +4346,14 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 				}
 				if (BUILD.member) hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
 				endNewInstance();
-				if (!(BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) fireConnectedCallback(hostRef.$lazyInstance$, elm);
-				else hostRef.$deferredConnectedCallback$ = true;
+				if (BUILD.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$);
+				if (!(BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) {
+					fireConnectedCallback(hostRef.$lazyInstance$, elm);
+					if (BUILD.asyncLoading) markFirstConnected(hostRef);
+				} else queueMicrotask(() => {
+					fireConnectedCallback(hostRef.$lazyInstance$, elm);
+					if (BUILD.asyncLoading) markFirstConnected(hostRef);
+				});
 			} else Cstr = elm.constructor;
 			if (BUILD.style && Cstr && Cstr.style) {
 				/**
@@ -4250,7 +4412,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 			hostRef.$onRenderResolve$();
 			hostRef.$onRenderResolve$ = void 0;
 		}
-		if (BUILD.asyncLoading && hostRef.$onReadyResolve$) hostRef.$onReadyResolve$(elm);
+		if (BUILD.asyncLoading) markFirstConnected(hostRef);
+		if (BUILD.asyncLoading && hostRef.$onReadyResolve$ && !(hostRef.$flags$ & HOST_FLAGS.hasFailedLoad)) hostRef.$onReadyResolve$(elm);
 	}
 };
 const fireConnectedCallback = (instance, elm) => {
@@ -4313,6 +4476,7 @@ const connectedCallback = (elm) => {
 		} else {
 			addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
 			if (hostRef?.$lazyInstance$) fireConnectedCallback(hostRef.$lazyInstance$, elm);
+			else if (hostRef.$flags$ & HOST_FLAGS.hasFailedLoad) setTimeout(() => initializeComponent(elm, hostRef, cmpMeta), LAZY_LOAD_RETRY_INTERVAL_MS);
 			else if (hostRef?.$onReadyPromise$) hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$, elm));
 		}
 		endConnected();
@@ -4342,6 +4506,7 @@ const disconnectedCallback = async (elm) => {
 			hostRef.$signalCleanup$();
 			hostRef.$signalCleanup$ = void 0;
 		}
+		if (BUILD.asyncLoading && hostRef && !(hostRef.$flags$ & HOST_FLAGS.hasFiredConnected)) markFirstConnected(hostRef);
 		if (!BUILD.lazyLoad) disconnectInstance(elm);
 		else if (hostRef?.$lazyInstance$) disconnectInstance(hostRef.$lazyInstance$, elm);
 		else if (hostRef?.$onReadyPromise$) hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$, elm));
@@ -4467,18 +4632,20 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 			hmrStart(this, cmpMeta, hmrVersionId);
 		};
 		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (BUILD.slotCloneNode || BUILD.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone)) patchCloneNode(Cstr.prototype);
-		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(Cstr.prototype);
-		else {
-			if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(Cstr.prototype);
-			if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
-				patchSlotAppendChild(Cstr.prototype);
-				patchSlotAppend(Cstr.prototype);
-				patchSlotPrepend(Cstr.prototype);
-				patchSlotInsertAdjacentHTML(Cstr.prototype);
-				patchInsertBefore(Cstr.prototype);
-				patchSlotRemoveChild(Cstr.prototype);
+		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) {
+			if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(Cstr.prototype);
+			else {
+				if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(Cstr.prototype);
+				if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
+					patchSlotAppendChild(Cstr.prototype);
+					patchSlotAppend(Cstr.prototype);
+					patchSlotPrepend(Cstr.prototype);
+					patchSlotInsertAdjacentHTML(Cstr.prototype);
+					patchInsertBefore(Cstr.prototype);
+					patchSlotRemoveChild(Cstr.prototype);
+				}
+				if (BUILD.slotTextContent) patchTextContent(Cstr.prototype);
 			}
-			if (BUILD.slotTextContent) patchTextContent(Cstr.prototype);
 		}
 		if (BUILD.hydrateClientSide && BUILD.shadowDom) hydrateScopedToShadow();
 		const originalConnectedCallback = Cstr.prototype.connectedCallback;
@@ -4491,19 +4658,26 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 			componentOnReady() {
 				return getHostRef(this)?.$onReadyPromise$;
 			},
-			connectedCallback() {
-				if (!this.__hasHostListenerAttached) {
-					const hostRef = getHostRef(this);
+			async connectedCallback() {
+				const isFirstConnect = !this.__hasHostListenerAttached;
+				let hostRef;
+				if (isFirstConnect) {
+					hostRef = getHostRef(this);
 					if (!hostRef) return;
 					addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
 					this.__hasHostListenerAttached = true;
 				}
 				connectedCallback(this);
-				if (originalConnectedCallback) originalConnectedCallback.call(this);
+				if (BUILD.asyncLoading && hostRef && hostRef.$ancestorComponent$) {
+					await awaitAncestorConnected(hostRef.$ancestorComponent$);
+					if (!this.isConnected) return;
+				}
+				if (originalConnectedCallback && (plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) originalConnectedCallback.call(this);
+				if (BUILD.asyncLoading && hostRef) markFirstConnected(hostRef);
 			},
 			disconnectedCallback() {
 				disconnectedCallback(this);
-				if (originalDisconnectedCallback) originalDisconnectedCallback.call(this);
+				if (originalDisconnectedCallback && (plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) originalDisconnectedCallback.call(this);
 			},
 			__attachShadow() {
 				const isClosed = BUILD.shadowModeClosed && !!(cmpMeta.$flags$ & CMP_FLAGS.shadowModeClosed);
@@ -4557,8 +4731,8 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 	const exclude = options.exclude || [];
 	const _reg = options.registry ?? getRegistry();
 	const head = win.document.head;
-	const metaCharset = /* @__PURE__ */ head.querySelector("meta[charset]");
-	const dataStyles = /* @__PURE__ */ win.document.createElement("style");
+	const metaCharset = /*@__PURE__*/ head.querySelector("meta[charset]");
+	const dataStyles = /*@__PURE__*/ win.document.createElement("style");
 	const deferredConnectedCallbacks = [];
 	let appLoadFallback;
 	let isBootstrapping = true;
@@ -4626,8 +4800,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 					*
 					* Also remove the reference from `deferredConnectedCallbacks` array
 					* otherwise removed instances won't get garbage collected.
+					*
+					* Use `nextTick` (microtask) rather than `plt.raf` since
+					* `requestAnimationFrame` callbacks do not fire while `document.hidden`
 					*/
-					plt.raf(() => {
+					nextTick(() => {
 						const hostRef = getHostRef(this);
 						if (!hostRef) return;
 						const i = deferredConnectedCallbacks.findIndex((host) => host === this);
@@ -4640,18 +4817,20 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
 				}
 			};
 			if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (BUILD.slotCloneNode || BUILD.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone)) patchCloneNode(HostElement.prototype);
-			if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(HostElement.prototype);
-			else {
-				if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(HostElement.prototype);
-				if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
-					patchSlotAppendChild(HostElement.prototype);
-					patchSlotAppend(HostElement.prototype);
-					patchSlotPrepend(HostElement.prototype);
-					patchSlotInsertAdjacentHTML(HostElement.prototype);
-					patchInsertBefore(HostElement.prototype);
-					patchSlotRemoveChild(HostElement.prototype);
+			if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) {
+				if (BUILD.lightDomPatches || BUILD.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(HostElement.prototype);
+				else {
+					if (BUILD.slotChildNodes || BUILD.patchChildren && cmpMeta.$flags$ & CMP_FLAGS.patchChildren) patchChildSlotNodes(HostElement.prototype);
+					if (BUILD.slotDomMutations || BUILD.patchInsert && cmpMeta.$flags$ & CMP_FLAGS.patchInsert) {
+						patchSlotAppendChild(HostElement.prototype);
+						patchSlotAppend(HostElement.prototype);
+						patchSlotPrepend(HostElement.prototype);
+						patchSlotInsertAdjacentHTML(HostElement.prototype);
+						patchInsertBefore(HostElement.prototype);
+						patchSlotRemoveChild(HostElement.prototype);
+					}
+					if (BUILD.slotTextContent) patchTextContent(HostElement.prototype);
 				}
-				if (BUILD.slotTextContent) patchTextContent(HostElement.prototype);
 			}
 			if (BUILD.formAssociated && cmpMeta.$flags$ & CMP_FLAGS.formAssociated) HostElement.formAssociated = true;
 			if (BUILD.hotModuleReplacement) HostElement.prototype["s-hmr"] = function(hmrVersionId) {
@@ -4697,9 +4876,10 @@ const addHostEventListeners = (elm, hostRef, listeners) => {
 };
 const hostListenerProxy = (hostRef, methodName) => (ev) => {
 	try {
-		if (BUILD.lazyLoad) if (hostRef.$flags$ & HOST_FLAGS.isListenReady) hostRef.$lazyInstance$?.[methodName](ev);
-		else (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
-		else hostRef.$hostElement$[methodName](ev);
+		if (BUILD.lazyLoad) {
+			if (hostRef.$flags$ & HOST_FLAGS.isListenReady) hostRef.$lazyInstance$?.[methodName](ev);
+			else (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+		} else hostRef.$hostElement$[methodName](ev);
 	} catch (e) {
 		consoleError(e, hostRef.$hostElement$);
 	}
@@ -4733,6 +4913,73 @@ const setNonce = (nonce) => plt.$nonce$ = nonce;
 //#region src/runtime/platform-options.ts
 const setPlatformOptions = (opts) => Object.assign(plt, opts);
 //#endregion
+//#region src/runtime/reactive-controller.ts
+const ReactiveControllerHost = (Base) => class ReactiveControllerHostMixin extends Base {
+	controllers = /* @__PURE__ */ new Set();
+	#connected = false;
+	#updateCompleteResolvers = [];
+	addController(controller) {
+		this.controllers.add(controller);
+		if (this.#connected) controller.hostConnected?.();
+	}
+	removeController(controller) {
+		this.controllers.delete(controller);
+	}
+	requestUpdate() {
+		forceUpdate(this);
+	}
+	get updateComplete() {
+		return new Promise((resolve) => this.#updateCompleteResolvers.push(resolve));
+	}
+	connectedCallback() {
+		super.connectedCallback?.();
+		this.#connected = true;
+		const el = getElement(this);
+		if (el && el !== this) {
+			el.addController = (controller) => this.addController(controller);
+			el.removeController = (controller) => this.removeController(controller);
+			el.requestUpdate = () => this.requestUpdate();
+			Object.defineProperty(el, "updateComplete", {
+				configurable: true,
+				get: () => this.updateComplete
+			});
+		}
+		this.controllers.forEach((c) => c.hostConnected?.());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback?.();
+		this.#connected = false;
+		this.controllers.forEach((c) => c.hostDisconnected?.());
+	}
+	async componentWillLoad() {
+		await super.componentWillLoad?.();
+		await Promise.all([...this.controllers].map((c) => c.hostWillLoad?.()));
+	}
+	componentDidLoad() {
+		super.componentDidLoad?.();
+		this.controllers.forEach((c) => c.hostDidLoad?.());
+	}
+	async componentWillRender() {
+		await super.componentWillRender?.();
+		await Promise.all([...this.controllers].map((c) => c.hostWillRender?.()));
+	}
+	componentDidRender() {
+		super.componentDidRender?.();
+		this.controllers.forEach((c) => c.hostDidRender?.());
+		const resolvers = this.#updateCompleteResolvers;
+		this.#updateCompleteResolvers = [];
+		resolvers.forEach((resolve) => resolve(true));
+	}
+	async componentWillUpdate() {
+		await super.componentWillUpdate?.();
+		await Promise.all([...this.controllers].map((c) => c.hostWillUpdate?.()));
+	}
+	componentDidUpdate() {
+		super.componentDidUpdate?.();
+		this.controllers.forEach((c) => c.hostDidUpdate?.());
+	}
+};
+//#endregion
 //#region src/runtime/render.ts
 /**
 * A WeakMap to persist HostRef objects across multiple render() calls to the
@@ -4819,4 +5066,4 @@ function hasKeys(obj) {
 	return false;
 }
 //#endregion
-export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, jsx, jsxDEV, jsxs, normalizeWatchers, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, setAssetPath, setMode, setNonce, setPlatformOptions, setRegistry, setTagTransformer, setValue, transformTag };
+export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, ReactiveControllerHost, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRegistry, getRenderingRef, getShadowRoot, getValue, h, jsx, jsxDEV, jsxs, normalizeWatchers, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, setAssetPath, setMode, setNonce, setPlatformOptions, setRegistry, setTagTransformer, setValue, transformTag };