@stencil/core 5.0.0-beta.3 → 5.0.0-beta.30

package/dist/runtime/server/index.mjs

@@ -1,6 +1,105 @@
 import { BUILD, BUILD as BUILD$1, Env, NAMESPACE, NAMESPACE as NAMESPACE$1 } from "@stencil/core/app-data";
 import { globalScripts, globalStyles } from "@stencil/core/app-globals";
-import { effect, effect as effect$1, signal } from "@preact/signals-core";
+import * as SignalsCore from "@preact/signals-core";
+//#region src/runtime/runtime-constants.ts
+/**
+* Bit flags for recording various properties of VDom nodes
+*/
+const VNODE_FLAGS = {
+	/**
+	* Whether or not a vdom node is a slot reference
+	*/
+	isSlotReference: 1,
+	/**
+	* Whether or not a slot element has fallback content
+	*/
+	isSlotFallback: 2,
+	/**
+	* Whether or not an element is a host element
+	*/
+	isHost: 4
+};
+const PROXY_FLAGS = {
+	isElementConstructor: 1,
+	proxyState: 2
+};
+const PLATFORM_FLAGS = {
+	/**
+	* designates a node in the DOM as being actively moved by the runtime
+	*/
+	isTmpDisconnected: 1,
+	appLoaded: 2,
+	queueSync: 4,
+	queueMask: 6
+};
+/**
+* A (subset) of node types which are relevant for the Stencil runtime. These
+* values are based on the values which can possibly be returned by the
+* `.nodeType` property of a DOM node. See here for details:
+*
+* {@link https://dom.spec.whatwg.org/#ref-for-dom-node-nodetype%E2%91%A0}
+*/
+const NODE_TYPE = {
+	ElementNode: 1,
+	TextNode: 3,
+	CommentNode: 8,
+	DocumentNode: 9,
+	DocumentTypeNode: 10,
+	DocumentFragment: 11
+};
+const HYDRATE_ID = "s-id";
+const HYDRATED_STYLE_ID = "sty-id";
+const HYDRATE_CHILD_ID = "c-id";
+const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
+const STENCIL_DOC_DATA = "_stencilDocData";
+const DEFAULT_DOC_DATA = {
+	hostIds: 0,
+	rootLevelIds: 0,
+	staticComponents: /* @__PURE__ */ new Set()
+};
+/**
+* Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
+*
+* Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
+* support as of Stencil v4.
+*/
+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",
+	"formDisabledCallback",
+	"formStateRestoreCallback"
+];
+const SERVER_BUILD_FLAGS = {
+	isBrowser: false,
+	isServer: true,
+	isDev: false,
+	isTesting: false
+};
+//#endregion
+//#region src/runtime/tag-transform.ts
+let tagTransformer = void 0;
+/**
+* Transforms a tag name using the current tag transformer
+* @param tag - the tag to transform e.g. `my-tag`
+* @returns the transformed tag e.g. `new-my-tag`
+*/
+function transformTag(tag) {
+	if (!tagTransformer) return tag;
+	return tagTransformer(tag);
+}
+/**
+* Sets the tag transformer to be used when rendering custom elements
+* @param transformer the transformer function to use. Must return a string
+*/
+function setTagTransformer(transformer) {
+	tagTransformer = transformer;
+}
 const MEMBER_FLAGS = {
 	String: 1,
 	Number: 2,
@@ -253,81 +352,6 @@ const reWireGetterSetter = (instance, hostRef) => {
 	});
 };
 //#endregion
-//#region src/runtime/runtime-constants.ts
-/**
-* Bit flags for recording various properties of VDom nodes
-*/
-const VNODE_FLAGS = {
-	/**
-	* Whether or not a vdom node is a slot reference
-	*/
-	isSlotReference: 1,
-	/**
-	* Whether or not a slot element has fallback content
-	*/
-	isSlotFallback: 2,
-	/**
-	* Whether or not an element is a host element
-	*/
-	isHost: 4
-};
-const PROXY_FLAGS = {
-	isElementConstructor: 1,
-	proxyState: 2
-};
-const PLATFORM_FLAGS = {
-	/**
-	* designates a node in the DOM as being actively moved by the runtime
-	*/
-	isTmpDisconnected: 1,
-	appLoaded: 2,
-	queueSync: 4,
-	queueMask: 6
-};
-/**
-* A (subset) of node types which are relevant for the Stencil runtime. These
-* values are based on the values which can possibly be returned by the
-* `.nodeType` property of a DOM node. See here for details:
-*
-* {@link https://dom.spec.whatwg.org/#ref-for-dom-node-nodetype%E2%91%A0}
-*/
-const NODE_TYPE = {
-	ElementNode: 1,
-	TextNode: 3,
-	CommentNode: 8,
-	DocumentNode: 9,
-	DocumentTypeNode: 10,
-	DocumentFragment: 11
-};
-const HYDRATE_ID = "s-id";
-const HYDRATED_STYLE_ID = "sty-id";
-const HYDRATE_CHILD_ID = "c-id";
-const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
-const STENCIL_DOC_DATA = "_stencilDocData";
-const DEFAULT_DOC_DATA = {
-	hostIds: 0,
-	rootLevelIds: 0,
-	staticComponents: /* @__PURE__ */ new Set()
-};
-/**
-* Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
-*
-* Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
-* support as of Stencil v4.
-*/
-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",
-	"formDisabledCallback",
-	"formStateRestoreCallback"
-];
-//#endregion
 //#region src/utils/shadow-root.ts
 let globalStyleSheet;
 const GLOBAL_STYLE_ID = "sc-global";
@@ -1311,6 +1335,13 @@ const isComplexType = (o) => {
 	return o === "object" || o === "function";
 };
 //#endregion
+//#region src/runtime/signals-core.ts
+const getCore = () => globalThis[Symbol.for("stencil.preact-signals-core")] ??= SignalsCore;
+const effect = (fn, options) => getCore().effect(fn, options);
+function signal(value, options) {
+	return getCore().signal(value, options);
+}
+//#endregion
 //#region src/runtime/event-emitter.ts
 const createEvent = (ref, name, flags) => {
 	const elm = getElement(ref);
@@ -1337,6 +1368,11 @@ const emitEvent = (elm, name, opts) => {
 	return ev;
 };
 const getRegistry = () => customElements;
+/**
+* @param elm a defined component host
+* @returns the registry the host's class was defined in, else the active registry
+*/
+const getHostRegistry = (elm) => elm.constructor._registry ?? getRegistry();
 //#endregion
 //#region src/runtime/vdom/set-accessor.ts
 /**
@@ -1380,7 +1416,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		attrMap.get(memberName)?.();
 		if (!signalAttrDisposers.has(elm)) signalAttrDisposers.set(elm, attrMap);
 		let prevVal = oldValue;
-		attrMap.set(memberName, effect$1(() => {
+		attrMap.set(memberName, effect(() => {
 			const curVal = newValue.value;
 			setAccessor(elm, memberName, prevVal, curVal, isSvg, flags);
 			prevVal = curVal;
@@ -1460,10 +1496,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		const isComplex = isComplexType(newValue);
 		if (!BUILD$1.lazyLoad) {
 			const isStandardAttr = ln.startsWith("aria-") || ln.startsWith("data-");
-			if (!isProp && !isStandardAttr && elm.tagName?.includes("-") && elm.tagName !== "SLOT-FB" && typeof customElements !== "undefined" && !customElements.get(elm.tagName.toLowerCase())) {
+			if (!isProp && !isStandardAttr && elm.tagName?.includes("-") && elm.tagName !== "SLOT-FB" && !customElements.get(elm.tagName.toLowerCase())) {
 				if (!elm["s-pp"]) elm["s-pp"] = /* @__PURE__ */ new Map();
 				elm["s-pp"].set(memberName, newValue);
-				return;
+				if (isComplex || /[A-Z]/.test(memberName)) return;
 			}
 		}
 		if ((isProp || isComplex && newValue !== null) && !isSvg) try {
@@ -1581,6 +1617,7 @@ function sortedAttrNames(attrNames) {
 let scopeId;
 let contentRef;
 let hostTagName;
+let hostRegistry;
 let useNativeShadowDom = false;
 let checkSlotFallbackVisibility = false;
 let checkSlotRelocate = false;
@@ -1597,16 +1634,33 @@ const signalNodeDisposers = /* @__PURE__ */ new WeakMap();
 const disposeSignalVNode = (vnode) => {
 	const elm = vnode.$elm$;
 	if (elm) {
-		const dispose = signalNodeDisposers.get(elm);
-		if (dispose) {
-			dispose();
-			signalNodeDisposers.delete(elm);
-		}
+		disposeTextSignal(elm);
 		disposeAllSignalAttrs(elm);
 	}
 	vnode.$children$?.forEach(disposeSignalVNode);
 };
 /**
+* Tear down a text node's signal subscription, if it has one.
+* @param textNode the text node to unsubscribe
+*/
+const disposeTextSignal = (textNode) => {
+	const dispose = signalNodeDisposers.get(textNode);
+	if (dispose) {
+		dispose();
+		signalNodeDisposers.delete(textNode);
+	}
+};
+/**
+* Subscribe a text node to a signal, keeping its `data` in sync on every change.
+* @param textNode the text node to keep in sync
+* @param textSig the signal to subscribe to
+*/
+const wireTextSignal = (textNode, textSig) => {
+	signalNodeDisposers.set(textNode, effect(() => {
+		textNode.data = String(textSig.value);
+	}));
+};
+/**
 * Create a DOM Node corresponding to one of the children of a given VNode.
 *
 * @param oldParentVNode the parent VNode from the previous render
@@ -1628,13 +1682,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 	if (BUILD$1.isDev && newVNode.$elm$) newVNode.$text$ !== null ? `${newVNode.$text$}` : `${String(newVNode.$tag$)}`;
 	if (BUILD$1.vdomText && newVNode.$text$ != null) {
 		elm = newVNode.$elm$ = win.document.createTextNode(newVNode.$text$);
-		if (BUILD$1.vdomSignals && newVNode.$signal$) {
-			const textSig = newVNode.$signal$;
-			const textNode = elm;
-			signalNodeDisposers.set(textNode, effect$1(() => {
-				textNode.data = String(textSig.value);
-			}));
-		}
+		if (BUILD$1.vdomSignals && newVNode.$signal$) wireTextSignal(elm, newVNode.$signal$);
 	} else if (BUILD$1.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
 		elm = newVNode.$elm$ = BUILD$1.isDebug || BUILD$1.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
 		if (typeof newVNode.$attrs$?.slot === "string") elm["s-sa"] = newVNode.$attrs$.slot;
@@ -1643,8 +1691,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 		if (BUILD$1.svg && !isSvgMode) isSvgMode = newVNode.$tag$ === "svg";
 		if (!win.document) throw new Error("No DOM environment available for rendering.");
 		const tag = !useNativeShadowDom && BUILD$1.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotFallback ? "slot-fb" : newVNode.$tag$;
-		const _reg = getRegistry();
-		const registryOpts = _reg !== win.customElements && tag.includes("-") ? { customElementRegistry: _reg } : void 0;
+		const registryOpts = hostRegistry !== win.customElements && tag.includes("-") ? { customElementRegistry: hostRegistry } : void 0;
 		elm = newVNode.$elm$ = BUILD$1.svg && isSvgMode ? win.document.createElementNS(SVG_NS, tag) : win.document.createElement(tag, registryOpts);
 		if (BUILD$1.svg && isSvgMode && newVNode.$tag$ === "foreignObject") isSvgMode = false;
 		if (BUILD$1.vdomAttribute) updateElement(null, newVNode, isSvgMode);
@@ -1902,7 +1949,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
 		}
 		if (BUILD$1.vdomKey && idxInOld >= 0) {
 			elmToMove = oldCh[idxInOld];
-			if (elmToMove.$tag$ !== newStartVnode.$tag$) node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+			if (elmToMove.$tag$ !== newStartVnode.$tag$) node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
 			else {
 				patch(elmToMove, newStartVnode, isInitialRender);
 				oldCh[idxInOld] = void 0;
@@ -1995,7 +2042,17 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
 		else if (BUILD$1.hydrateClientSide && isInitialRender && BUILD$1.updatable && oldChildren !== null && newChildren === null) newVNode.$children$ = oldChildren;
 		if (BUILD$1.svg && isSvgMode && tag === "svg") isSvgMode = false;
 	} else if (BUILD$1.vdomText && BUILD$1.slotRelocation && (defaultHolder = elm["s-cr"])) defaultHolder.parentNode.textContent = text;
-	else if (BUILD$1.vdomText && oldVNode.$text$ !== text) elm.data = text;
+	else if (BUILD$1.vdomText) {
+		if (BUILD$1.vdomSignals && newVNode.$signal$) {
+			if (newVNode.$signal$ !== oldVNode.$signal$) {
+				disposeTextSignal(elm);
+				wireTextSignal(elm, newVNode.$signal$);
+			}
+		} else {
+			if (BUILD$1.vdomSignals && oldVNode.$signal$) disposeTextSignal(elm);
+			if (oldVNode.$text$ !== text) elm.data = text;
+		}
+	}
 };
 /**
 * Component-global information about nodes which are either currently being
@@ -2183,6 +2240,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
 	const oldVNode = hostRef.$vnode$ || newVNode(null, null);
 	const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
 	hostTagName = hostElm.tagName;
+	hostRegistry = getHostRegistry(hostElm);
 	if (BUILD$1.isDev && Array.isArray(renderFnResults) && renderFnResults.some(isHost)) throw new Error(`The <Host> must be the single root component.
 Looks like the render() function of "${hostTagName.toLowerCase()}" is returning an array that contains the <Host>.
 
@@ -2335,11 +2393,12 @@ const markFirstConnected = (hostRef) => {
 * autoloader, where the ancestor tag may not be defined yet.
 *
 * @param ancestorElm the nearest Stencil ancestor element
+* @param registry the registry the waiting component is defined in
 */
-const awaitAncestorConnected = async (ancestorElm) => {
+const awaitAncestorConnected = async (ancestorElm, registry) => {
 	let ancestorHostRef = getHostRef(ancestorElm);
 	if (!BUILD$1.lazyLoad && !ancestorHostRef) {
-		await getRegistry().whenDefined(ancestorElm.tagName.toLowerCase());
+		await registry.whenDefined(ancestorElm.tagName.toLowerCase());
 		ancestorHostRef = getHostRef(ancestorElm);
 	}
 	if (ancestorHostRef && !(ancestorHostRef.$flags$ & HOST_FLAGS.hasFiredConnected)) await ensureFirstConnectPromise(ancestorHostRef);
@@ -2695,8 +2754,7 @@ const initializeSignals = (elm, hostRef, cmpMeta) => {
 	const instance = BUILD$1.lazyLoad ? hostRef.$lazyInstance$ : elm;
 	for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) {
 		if (!(memberFlags & MEMBER_FLAGS.PropLike)) continue;
-		const initialVal = hostRef.$instanceValues$.get(memberName);
-		const sig = signal(initialVal);
+		const sig = signal(hostRef.$instanceValues$.get(memberName));
 		hostRef.$signalValues$.set(memberName, sig);
 		let prevScheduleVal = sig.peek();
 		disposers.push(effect(() => {
@@ -2875,17 +2933,23 @@ const vdomFnUtils = {
 * Convert a {@link d.VNode} to a {@link d.ChildNode} in order to present a
 * friendlier public interface (hence, 'convertToPublic').
 *
-* @param node the virtual DOM node to convert
+* Functional components receive primitive children unwrapped, so those
+* become text-only child nodes.
+*
+* @param node the virtual DOM node (or primitive child) to convert
 * @returns a converted child node
 */
-const convertToPublic = (node) => ({
+const convertToPublic = (node) => typeof node !== "object" ? {
+	vtag: null,
+	vtext: String(node)
+} : {
 	vattrs: node.$attrs$,
 	vchildren: node.$children$,
 	vkey: node.$key$,
 	vname: node.$name$,
 	vtag: node.$tag$,
 	vtext: node.$text$
-});
+};
 /**
 * Convert a {@link d.ChildNode} back to an equivalent {@link d.VNode} in
 * order to use the resulting object in the virtual DOM. The initial object was
@@ -2902,11 +2966,11 @@ const convertToPrivate = (node) => {
 		if (node.vname) vnodeData.name = node.vname;
 		return h(node.vtag, vnodeData, ...node.vchildren || []);
 	}
-	const vnode = newVNode(node.vtag, node.vtext);
-	vnode.$attrs$ = node.vattrs;
-	vnode.$children$ = node.vchildren;
-	vnode.$key$ = node.vkey;
-	vnode.$name$ = node.vname;
+	const vnode = newVNode(node.vtag ?? null, node.vtext);
+	vnode.$attrs$ = node.vattrs ?? null;
+	vnode.$children$ = node.vchildren ?? null;
+	vnode.$key$ = node.vkey ?? null;
+	vnode.$name$ = node.vname ?? null;
 	return vnode;
 };
 /**
@@ -3204,6 +3268,7 @@ const initializeDocumentHydrate = (node, orgLocNodes) => {
 const createSimpleVNode = (vnode) => ({
 	$flags$: 0,
 	$index$: "0",
+	$children$: null,
 	...vnode
 });
 function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNodes, slotNodes, shadowRootNodes, slottedNodes) {
@@ -3598,7 +3663,7 @@ const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector)
 		else return shallowPart.trim();
 	}).join(", ");
 };
-const isScopableAtRule = (selector) => selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@page") || selector.startsWith("@document") || selector.startsWith("@layer");
+const isScopableAtRule = (selector) => selector.startsWith("@media") || selector.startsWith("@supports") || selector.startsWith("@page") || selector.startsWith("@document") || selector.startsWith("@layer") || selector.startsWith("@container");
 const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
 	return processRules(cssText, (rule) => {
 		let selector = rule.selector;
@@ -3717,8 +3782,11 @@ const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
 };
 //#endregion
 //#region src/runtime/mode.ts
-const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
-const setMode = (handler) => modeResolutionChain.push(handler);
+const computeMode = (elm) => modeResolver.map((h) => h(elm)).find((m) => !!m);
+const setMode = (handler) => {
+	modeResolver.length = 0;
+	modeResolver.push(handler);
+};
 const getMode = (ref) => getHostRef(ref)?.$modeName$;
 //#endregion
 //#region src/runtime/normalize-watchers.ts
@@ -3783,23 +3851,14 @@ const normalizeWatchers = (raw) => {
 *
 * @param propValue the new value to coerce to some type
 * @param propType the type of the prop, expressed as a binary number
-* @param isFormAssociated whether the component is form-associated (optional)
 * @returns the parsed/coerced value
 */
-const parsePropertyValue = (propValue, propType, isFormAssociated) => {
+const parsePropertyValue = (propValue, propType) => {
 	if (propValue != null && !isComplexType(propValue)) {
 		/**
 		* ensure this value is of the correct prop type
 		*/
-		if (BUILD$1.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$1.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
-			else return propValue === "false" ? false : propValue === "" || !!propValue;
-		}
+		if (BUILD$1.propBoolean && propType & MEMBER_FLAGS.Boolean) return propValue === "" || !!propValue;
 		/**
 		* force it to be a number
 		*/
@@ -3841,7 +3900,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 	if (BUILD$1.signalBacking) {
 		const sig = hostRef?.$signalValues$?.get(propName);
 		if (sig !== void 0) {
-			const parsed = parsePropertyValue(newVal, cmpMeta.$members$[propName][0], BUILD$1.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+			const parsed = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
 			if (BUILD$1.serializer && BUILD$1.reflect && cmpMeta.$attrsToReflect$ && cmpMeta.$serializers$?.[propName]) {
 				const elm = BUILD$1.lazyLoad ? hostRef.$hostElement$ : ref;
 				applySerializers(hostRef, cmpMeta, propName, parsed, BUILD$1.lazyLoad ? hostRef.$lazyInstance$ : elm);
@@ -3859,7 +3918,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 	const oldVal = hostRef.$instanceValues$.get(propName);
 	const flags = hostRef.$flags$;
 	const instance = BUILD$1.lazyLoad ? hostRef.$lazyInstance$ : elm;
-	newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0], BUILD$1.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+	newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
 	const didValueChange = newVal !== oldVal && !(Number.isNaN(oldVal) && Number.isNaN(newVal));
 	if ((!BUILD$1.lazyLoad || !(flags & HOST_FLAGS.isConstructingInstance) || oldVal === void 0) && didValueChange) {
 		hostRef.$instanceValues$.set(propName, newVal);
@@ -3908,6 +3967,22 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 */
 const reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
 /**
+* Hand values written to a lazy component's element before its instance existed to the
+* instance's own `@Prop` setters. Must run as soon as the instance is constructed, so that
+* whenever `$lazyInstance$` is set, reads through it agree with the element's last write.
+*
+* @param hostRef the runtime bookkeeping object of a freshly constructed lazy instance
+* @param cmpMeta runtime metadata for the component (with any run-time only setters flagged)
+*/
+const replayPendingSetterValues = (hostRef, cmpMeta) => {
+	const instance = hostRef.$lazyInstance$;
+	if (!instance) return;
+	for (const [memberName, [memberFlags]] of Object.entries(cmpMeta.$members$ ?? {})) if (memberFlags & MEMBER_FLAGS.Setter && hostRef.$instanceValues$.has(memberName)) {
+		const pendingValue = hostRef.$instanceValues$.get(memberName);
+		if (instance[memberName] !== pendingValue) instance[memberName] = pendingValue;
+	}
+};
+/**
 * Attach a series of runtime constructs to a compiled Stencil component
 * constructor, including getters and setters for the `@Prop` and `@State`
 * decorators, callbacks for when attributes change, and so on.
@@ -3964,9 +4039,8 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						if (BUILD$1.lazyLoad) {
 							if ((cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Getter) === 0) return getValue(this, memberName);
 							const ref = getHostRef(this);
-							const instance = ref ? ref.$lazyInstance$ : prototype;
-							if (!instance) return;
-							return instance[memberName];
+							if (!ref) return prototype[memberName];
+							return ref.$lazyInstance$ ? ref.$lazyInstance$[memberName] : getValue(this, memberName);
 						}
 						if (!BUILD$1.lazyLoad) return origGetter ? origGetter.apply(this) : getValue(this, memberName);
 					},
@@ -3981,7 +4055,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					}
 					if (origSetter) {
 						if (typeof (memberFlags & MEMBER_FLAGS.State ? this[memberName] : ref.$hostElement$[memberName]) === "undefined" && ref.$instanceValues$.get(memberName)) newValue = ref.$instanceValues$.get(memberName);
-						origSetter.apply(this, [parsePropertyValue(newValue, memberFlags, BUILD$1.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated))]);
+						origSetter.apply(this, [parsePropertyValue(newValue, memberFlags)]);
 						newValue = memberFlags & MEMBER_FLAGS.State ? this[memberName] : ref.$hostElement$[memberName];
 						setValue(this, memberName, newValue, cmpMeta);
 						return;
@@ -3993,21 +4067,15 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					if (BUILD$1.lazyLoad) {
 						if ((flags & PROXY_FLAGS.isElementConstructor) === 0 || (cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Setter) === 0) {
 							setValue(this, memberName, newValue, cmpMeta);
-							if (flags & PROXY_FLAGS.isElementConstructor && !ref.$lazyInstance$) ref.$fetchedCbList$.push(() => {
-								if (cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Setter && ref.$lazyInstance$[memberName] !== ref.$instanceValues$.get(memberName)) ref.$lazyInstance$[memberName] = newValue;
-							});
 							return;
 						}
-						const setterSetVal = () => {
+						const parsedValue = parsePropertyValue(newValue, memberFlags);
+						if (ref.$lazyInstance$) {
 							const currentValue = ref.$lazyInstance$[memberName];
 							if (!ref.$instanceValues$.get(memberName) && currentValue) ref.$instanceValues$.set(memberName, currentValue);
-							ref.$lazyInstance$[memberName] = parsePropertyValue(newValue, memberFlags, BUILD$1.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+							ref.$lazyInstance$[memberName] = parsedValue;
 							setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
-						};
-						if (ref.$lazyInstance$) setterSetVal();
-						else ref.$fetchedCbList$.push(() => {
-							setterSetVal();
-						});
+						} else ref.$instanceValues$.set(memberName, parsedValue);
 					}
 				} });
 			} else if (BUILD$1.lazyLoad && BUILD$1.method && flags & PROXY_FLAGS.isElementConstructor && memberFlags & MEMBER_FLAGS.Method) Object.defineProperty(prototype, memberName, { value(...args) {
@@ -4059,7 +4127,10 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					const isBooleanTarget = propMemberFlags & MEMBER_FLAGS.Boolean;
 					if (BUILD$1.reflect && propMemberFlags & MEMBER_FLAGS.ReflectAttr && propMemberFlags & MEMBER_FLAGS.Any && !isComplexType(this[propName]) && reflectedAttrValue(this[propName]) === newValue) return;
 					const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
-					if (isBooleanTarget) newValue = !(newValue === null || newValue === "false");
+					if (isBooleanTarget) {
+						if (BUILD$1.isDev && newValue === "false") `${cmpMeta.$tagName$}${attrName}${propName}`;
+						newValue = newValue !== null;
+					}
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
 					if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
 				});
@@ -4122,9 +4193,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 				} catch (e) {
 					consoleError(e, elm);
 				}
-				if (BUILD$1.member) hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
+				if (BUILD$1.member) {
+					hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
+					replayPendingSetterValues(hostRef, cmpMeta);
+				}
 				endNewInstance();
-				if (BUILD$1.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$);
+				if (BUILD$1.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$, getHostRegistry(elm));
 				if (!(BUILD$1.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) {
 					fireConnectedCallback(hostRef.$lazyInstance$, elm);
 					if (BUILD$1.asyncLoading) markFirstConnected(hostRef);
@@ -4224,9 +4298,16 @@ const connectedCallback = (elm) => {
 			}
 			if (BUILD$1.asyncLoading) {
 				let ancestorComponent = elm;
-				while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) if (BUILD$1.hydrateClientSide && ancestorComponent.nodeType === NODE_TYPE.ElementNode && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
-					attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
-					break;
+				while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
+					if (BUILD$1.hydrateClientSide && !ancestorComponent["s-p"] && ancestorComponent.nodeType === NODE_TYPE.ElementNode && ancestorComponent.hasAttribute("s-id")) {
+						ancestorComponent["s-p"] = [];
+						ancestorComponent["s-rc"] = [];
+						ancestorComponent["s-pc"] = [];
+					}
+					if (ancestorComponent["s-p"]) {
+						attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
+						break;
+					}
 				}
 			}
 			if (BUILD$1.prop && !BUILD$1.hydrateServerSide && cmpMeta.$members$) Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
@@ -4342,48 +4423,45 @@ const hmrStandalone = async (hostElement, cmpMeta, hmrVersionId) => {
 			`${modulePath}?s-hmr=${hmrVersionId}`
 );
 		const NewClass = Object.values(newModule).find((v) => typeof v === "function" && v.is === cmpMeta.$tagName$) ?? newModule.default;
-		if (!NewClass) return;
-		const ctor = customElements.get(cmpMeta.$tagName$);
-		if (ctor) {
-			for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
-				if (key === "constructor") continue;
-				Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
-			}
-			const styleDesc = Object.getOwnPropertyDescriptor(NewClass, "style");
-			if (styleDesc) {
-				Object.defineProperty(ctor, "style", styleDesc);
-				const newStyle = NewClass.style;
-				if (newStyle) {
-					const scopeId = getScopeId(cmpMeta);
-					const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
-					console.log("[stencil-hmr] registerStyle", {
-						tag: cmpMeta.$tagName$,
-						scopeId,
-						isShadow,
-						cssLen: newStyle.length
-					});
-					registerStyle(scopeId, newStyle, isShadow);
-				}
-			}
-		}
-		const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
-		document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
-			const hostRef = getHostRef(el);
-			if (BUILD$1.hostListener && hostRef?.$rmListeners$) {
-				hostRef.$rmListeners$.map((rmListener) => rmListener());
-				hostRef.$rmListeners$ = void 0;
-				addHostEventListeners(el, hostRef, cmpMeta.$listeners$);
-			}
-			if (!isShadow && hostRef) {
-				console.log("[stencil-hmr] calling attachStyles for", cmpMeta.$tagName$);
-				attachStyles(hostRef);
-			}
-			forceUpdate(el);
-		});
+		if (NewClass) hmrApplyClass(cmpMeta, NewClass);
 	} catch (e) {
 		console.error(`[Stencil HMR] Failed to reload <${cmpMeta.$tagName$}>`, e);
 	}
 };
+/**
+* Patch a re-executed component class onto the registered one and re-render every live instance.
+* Shared by the standalone re-import above and bundlers that re-execute the module themselves
+* (webpack/rspack `module.hot`), which reach it via the constructor's `s-hmr-apply` hook.
+*
+* @param cmpMeta runtime metadata for the component
+* @param NewClass the component's newly executed class
+*/
+const hmrApplyClass = (cmpMeta, NewClass) => {
+	const ctor = customElements.get(cmpMeta.$tagName$);
+	const isShadow = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation);
+	if (ctor && ctor !== NewClass) {
+		for (const key of Object.getOwnPropertyNames(NewClass.prototype)) {
+			if (key === "constructor") continue;
+			Object.defineProperty(ctor.prototype, key, Object.getOwnPropertyDescriptor(NewClass.prototype, key));
+		}
+		const styleDesc = Object.getOwnPropertyDescriptor(NewClass, "style");
+		if (styleDesc) {
+			Object.defineProperty(ctor, "style", styleDesc);
+			const newStyle = NewClass.style;
+			if (newStyle) registerStyle(getScopeId(cmpMeta), newStyle, isShadow);
+		}
+	}
+	document.querySelectorAll(cmpMeta.$tagName$).forEach((el) => {
+		const hostRef = getHostRef(el);
+		if (BUILD$1.hostListener && hostRef?.$rmListeners$) {
+			hostRef.$rmListeners$.map((rmListener) => rmListener());
+			hostRef.$rmListeners$ = void 0;
+			addHostEventListeners(el, hostRef, cmpMeta.$listeners$);
+		}
+		if (!isShadow && hostRef) attachStyles(hostRef);
+		forceUpdate(el);
+	});
+};
 //#endregion
 //#region src/runtime/bootstrap-standalone.ts
 const defineCustomElement = (Cstr, compactMeta) => {
@@ -4406,9 +4484,12 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 			cmpMeta.$serializers$ = Cstr.$serializers$;
 		}
 		if (BUILD$1.reflect) cmpMeta.$attrsToReflect$ = [];
-		if (BUILD$1.hotModuleReplacement) Cstr.prototype["s-hmr"] = function(hmrVersionId) {
-			hmrStart(this, cmpMeta, hmrVersionId);
-		};
+		if (BUILD$1.hotModuleReplacement) {
+			Cstr.prototype["s-hmr"] = function(hmrVersionId) {
+				hmrStart(this, cmpMeta, hmrVersionId);
+			};
+			Cstr["s-hmr-apply"] = (NewClass) => hmrApplyClass(cmpMeta, NewClass);
+		}
 		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && (BUILD$1.slotCloneNode || BUILD$1.patchClone && cmpMeta.$flags$ & CMP_FLAGS.patchClone)) patchCloneNode(Cstr.prototype);
 		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) {
 			if (BUILD$1.lightDomPatches || BUILD$1.patchAll && cmpMeta.$flags$ & CMP_FLAGS.patchAll) applyLightDomPatches(Cstr.prototype);
@@ -4447,7 +4528,7 @@ const proxyCustomElement = (Cstr, compactMeta) => {
 				}
 				connectedCallback(this);
 				if (BUILD$1.asyncLoading && hostRef && hostRef.$ancestorComponent$) {
-					await awaitAncestorConnected(hostRef.$ancestorComponent$);
+					await awaitAncestorConnected(hostRef.$ancestorComponent$, getHostRegistry(this));
 					if (!this.isConnected) return;
 				}
 				if (originalConnectedCallback && (plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) originalConnectedCallback.call(this);
@@ -4759,31 +4840,12 @@ function Mixin(...mixins) {
 //#region src/runtime/nonce.ts
 /**
 * Assigns the given value to the nonce property on the runtime platform object.
-* During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
+* During runtime, this value is used to set the nonce attribute on all dynamically created style tags.
 * @param nonce The value to be assigned to the platform nonce property.
 * @returns void
 */
 const setNonce = (nonce) => plt.$nonce$ = nonce;
 //#endregion
-//#region src/runtime/tag-transform.ts
-let tagTransformer = void 0;
-/**
-* Transforms a tag name using the current tag transformer
-* @param tag - the tag to transform e.g. `my-tag`
-* @returns the transformed tag e.g. `new-my-tag`
-*/
-function transformTag(tag) {
-	if (!tagTransformer) return tag;
-	return tagTransformer(tag);
-}
-/**
-* Sets the tag transformer to be used when rendering custom elements
-* @param transformer the transformer function to use. Must return a string
-*/
-function setTagTransformer(transformer) {
-	tagTransformer = transformer;
-}
-//#endregion
 //#region src/runtime/vdom/jsx-runtime.ts
 function jsx(type, props, key) {
 	const { children, ...rest } = props ?? {};
@@ -4998,7 +5060,7 @@ function proxyHostElement(elm, cstr) {
 						const [[methodName]] = Object.entries(deserializer);
 						attrPropVal = cstr.prototype[methodName](attrValue, memberName);
 					}
-					else attrPropVal = parsePropertyValue(attrValue, memberFlags, !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+					else attrPropVal = parsePropertyValue(attrValue, memberFlags);
 				}
 				if (propValue !== void 0) {
 					attrPropVal = propValue;
@@ -5065,8 +5127,9 @@ function forceUpdate$1() {}
 * @param results The results object to store the hydration results.
 * @param afterSsr The callback to be called after SSR is complete.
 * @param resolve The resolve function to be called when SSR is complete.
+* @param abortController The AbortController to use for aborting in-flight fetch() calls and other cancellable work when SSR times out.
 */
-function ssrApp(win, opts, results, afterSsr, resolve) {
+function ssrApp(win, opts, results, afterSsr, resolve, abortController) {
 	const connectedElements = /* @__PURE__ */ new Set();
 	const createdElements = /* @__PURE__ */ new Set();
 	const waitingElements = /* @__PURE__ */ new Set();
@@ -5076,10 +5139,20 @@ function ssrApp(win, opts, results, afterSsr, resolve) {
 	setScopedSsr(opts);
 	let tmrId;
 	let ranCompleted = false;
+	let modeResolverSnapshot;
+	const abortedPromise = new Promise((res) => {
+		if (abortController.signal.aborted) res();
+		else abortController.signal.addEventListener("abort", () => res(), { once: true });
+	});
 	function hydratedComplete() {
 		$nativeClearTimeout(tmrId);
 		createdElements.clear();
 		connectedElements.clear();
+		if (modeResolverSnapshot) {
+			modeResolver.length = 0;
+			modeResolver.push(...modeResolverSnapshot);
+			modeResolverSnapshot = void 0;
+		}
 		if (!ranCompleted) {
 			ranCompleted = true;
 			try {
@@ -5095,6 +5168,7 @@ function ssrApp(win, opts, results, afterSsr, resolve) {
 	}
 	function hydratedError(err) {
 		renderCatchError(opts, results, err);
+		abortController.abort();
 		hydratedComplete();
 	}
 	function timeoutExceeded() {
@@ -5139,7 +5213,7 @@ function ssrApp(win, opts, results, afterSsr, resolve) {
 			if (isValidComponent(elm, opts) && results.hydratedCount < opts.maxHydrateCount) {
 				if (!connectedElements.has(elm) && shouldHydrate(elm)) {
 					connectedElements.add(elm);
-					return hydrateComponent.call(elm, win, results, elm.nodeName, elm, waitingElements);
+					return hydrateComponent.call(elm, win, results, elm.nodeName, elm, waitingElements, abortedPromise);
 				}
 			}
 			return resolved;
@@ -5162,13 +5236,17 @@ function ssrApp(win, opts, results, afterSsr, resolve) {
 		tmrId = $nativeSetTimeout(timeoutExceeded, opts.timeout);
 		plt.$resourcesUrl$ = new URL(opts.resourcesUrl || "./", win.document.baseURI).href;
 		globalScripts();
+		if (Array.isArray(opts.modes)) {
+			modeResolverSnapshot = modeResolver.slice();
+			opts.modes.forEach((mode) => setMode(mode));
+		}
 		patchChild(win.document.body);
 		waitLoop().then(hydratedComplete).catch(hydratedError);
 	} catch (e) {
 		hydratedError(e);
 	}
 }
-async function hydrateComponent(win, results, tagName, elm, waitingElements) {
+async function hydrateComponent(win, results, tagName, elm, waitingElements, aborted) {
 	tagName = tagName.toLowerCase();
 	const Cstr = loadModule({
 		$tagName$: tagName,
@@ -5183,16 +5261,17 @@ async function hydrateComponent(win, results, tagName, elm, waitingElements) {
 			addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
 			try {
 				connectedCallback(elm);
-				await elm.componentOnReady();
-				results.hydratedCount++;
-				const ref = getHostRef(elm);
-				const modeName = !ref?.$modeName$ ? "$" : ref?.$modeName$;
-				if (!results.components.some((c) => c.tag === tagName && c.mode === modeName)) results.components.push({
-					tag: tagName,
-					mode: modeName,
-					count: 0,
-					depth: -1
-				});
+				if (!await Promise.race([elm.componentOnReady().then(() => false), aborted.then(() => true)])) {
+					results.hydratedCount++;
+					const ref = getHostRef(elm);
+					const modeName = !ref?.$modeName$ ? "$" : ref?.$modeName$;
+					if (!results.components.some((c) => c.tag === tagName && c.mode === modeName)) results.components.push({
+						tag: tagName,
+						mode: modeName,
+						count: 0,
+						depth: -1
+					});
+				}
 			} catch (e) {
 				win.console.error(e);
 			}
@@ -5338,7 +5417,7 @@ const isMemberInElement = (elm, memberName) => {
 const registerComponents = (Cstrs) => {
 	for (const Cstr of Cstrs) {
 		const exportName = Cstr.cmpMeta.$tagName$;
-		const transformedTagName = $stencilTagTransform.transformTag(exportName);
+		const transformedTagName = transformTag(exportName);
 		cmpModules.set(exportName, { [exportName]: Cstr });
 		if (transformedTagName !== exportName) cmpModules.set(transformedTagName, { [transformedTagName]: Cstr });
 	}
@@ -5414,14 +5493,9 @@ const registerHost = (elm, cmpMeta) => {
 	elm.__s_ghr = () => hostRef;
 	return hostRef;
 };
-const Build = {
-	isDev: false,
-	isBrowser: false,
-	isServer: true,
-	isTesting: false
-};
+const Build = { ...SERVER_BUILD_FLAGS };
 const styles = /* @__PURE__ */ new Map();
-const modeResolutionChain = [];
+const modeResolver = [];
 /**
 * Server-side implementation of getAssetPath.
 *
@@ -5453,4 +5527,4 @@ const setScopedSsr = (opts) => {
 const needsScopedSSR = () => scopedSSR;
 let scopedSSR = false;
 //#endregion
-export { BUILD, Build, Env, Fragment, Host, Mixin, NAMESPACE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, hAsync as h, injectSideEffectStyle, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolutionChain, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, registerSideEffectStyleTarget, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setScopedSsr, setTagTransformer, setValue, ssrApp, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, unregisterSideEffectStyleTarget, win, writeTask };
+export { BUILD, Build, Env, Fragment, Host, Mixin, NAMESPACE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getShadowRoot, getValue, hAsync as h, injectSideEffectStyle, insertVdomAnnotations, isMemberInElement, jsx, jsxs, loadModule, modeResolver, needsScopedSSR, nextTick, parsePropertyValue, plt, postUpdateComponent, proxyComponent, proxyCustomElement, readTask, registerComponents, registerHost, registerInstance, registerSideEffectStyleTarget, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setScopedSsr, setTagTransformer, setValue, ssrApp, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsMutableAdoptedStyleSheets, transformTag, unregisterSideEffectStyleTarget, win, writeTask };