@stencil/core 5.0.0-beta.2 → 5.0.0-beta.21

package/dist/testing/index.mjs

@@ -3,14 +3,15 @@ import { MockWindow, setupGlobal } from "@stencil/mock-doc";
 import "typescript";
 import fs from "node:fs";
 import "picomatch";
-import { effect, effect as effect$1, signal } from "@preact/signals-core";
+import * as SignalsCore from "@preact/signals-core";
 import path, { basename, dirname } from "path";
+import resolve from "resolve";
 import "postcss";
-import "postcss-safe-parser";
+import "postcss-nesting";
 import "postcss-selector-parser";
+import "postcss-safe-parser";
 import "magic-string";
 import "rolldown";
-import resolve from "resolve";
 import "rolldown/utils";
 import "terser";
 import "css-what";
@@ -32,7 +33,7 @@ import "@rollup/pluginutils";
 import { createHash } from "crypto";
 import { afterAll, vi } from "vitest";
 //#region src/version.ts
-const version = "5.0.0-beta.2";
+const version = "5.0.0-beta.21";
 const MEMBER_FLAGS = {
 	String: 1,
 	Number: 2,
@@ -379,6 +380,10 @@ const trimFalsy = (data) => {
 */
 const isDef = (v) => v != null && v !== void 0;
 /**
+* This is just a no-op, don't expect it to do anything.
+*/
+const noop = () => {};
+/**
 * Check whether a value is a 'complex type', defined here as an object or a
 * function.
 *
@@ -640,7 +645,7 @@ const Env = {};
 //#endregion
 //#region src/testing/platform/testing-constants.ts
 const styles = /* @__PURE__ */ new Map();
-const modeResolutionChain = [];
+const modeResolver = [];
 /**
 * A mapping of custom element tags (e.g. `my-component`) to their constructor
 */
@@ -2110,7 +2115,19 @@ const hydrateScopedToShadow = () => {
 		registerStyle(scopeId, convertScopedToShadow(styleElements[i].innerHTML), allowCS);
 	}
 };
+//#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);
+}
 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
 /**
@@ -2154,7 +2171,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;
@@ -2234,10 +2251,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialR
 		const isComplex = isComplexType(newValue);
 		if (!BUILD.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 {
@@ -2355,6 +2372,7 @@ function sortedAttrNames(attrNames) {
 let scopeId;
 let contentRef;
 let hostTagName;
+let hostRegistry;
 let useNativeShadowDom = false;
 let checkSlotFallbackVisibility = false;
 let checkSlotRelocate = false;
@@ -2371,16 +2389,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
@@ -2402,13 +2437,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 	if (BUILD.isDev && newVNode.$elm$) consoleDevError(`The JSX ${newVNode.$text$ !== null ? `"${newVNode.$text$}" text` : `"${String(newVNode.$tag$)}" element`} node should not be shared within the same renderer. The renderer caches element lookups in order to improve performance. However, a side effect from this is that the exact same JSX node should not be reused. For more information please see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes`);
 	if (BUILD.vdomText && newVNode.$text$ != null) {
 		elm = newVNode.$elm$ = win.document.createTextNode(newVNode.$text$);
-		if (BUILD.vdomSignals && newVNode.$signal$) {
-			const textSig = newVNode.$signal$;
-			const textNode = elm;
-			signalNodeDisposers.set(textNode, effect$1(() => {
-				textNode.data = String(textSig.value);
-			}));
-		}
+		if (BUILD.vdomSignals && newVNode.$signal$) wireTextSignal(elm, newVNode.$signal$);
 	} 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;
@@ -2417,8 +2446,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex) => {
 		if (BUILD.svg && !isSvgMode) isSvgMode = newVNode.$tag$ === "svg";
 		if (!win.document) throw new Error("No DOM environment available for rendering.");
 		const tag = !useNativeShadowDom && BUILD.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.svg && isSvgMode ? win.document.createElementNS(SVG_NS, tag) : win.document.createElement(tag, registryOpts);
 		if (BUILD.svg && isSvgMode && newVNode.$tag$ === "foreignObject") isSvgMode = false;
 		if (BUILD.vdomAttribute) updateElement(null, newVNode, isSvgMode);
@@ -2676,7 +2704,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = fal
 		}
 		if (BUILD.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;
@@ -2769,7 +2797,17 @@ const patch = (oldVNode, newVNode, isInitialRender = false) => {
 		else if (BUILD.hydrateClientSide && isInitialRender && BUILD.updatable && oldChildren !== null && newChildren === null) newVNode.$children$ = oldChildren;
 		if (BUILD.svg && isSvgMode && tag === "svg") isSvgMode = false;
 	} else if (BUILD.vdomText && BUILD.slotRelocation && (defaultHolder = elm["s-cr"])) defaultHolder.parentNode.textContent = text;
-	else if (BUILD.vdomText && oldVNode.$text$ !== text) elm.data = text;
+	else if (BUILD.vdomText) {
+		if (BUILD.vdomSignals && newVNode.$signal$) {
+			if (newVNode.$signal$ !== oldVNode.$signal$) {
+				disposeTextSignal(elm);
+				wireTextSignal(elm, newVNode.$signal$);
+			}
+		} else {
+			if (BUILD.vdomSignals && oldVNode.$signal$) disposeTextSignal(elm);
+			if (oldVNode.$text$ !== text) elm.data = text;
+		}
+	}
 };
 /**
 * Component-global information about nodes which are either currently being
@@ -2957,6 +2995,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.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>.
 
@@ -3109,11 +3148,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.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);
@@ -3469,8 +3509,7 @@ 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 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(() => {
@@ -3598,9 +3637,7 @@ const h = (nodeName, vnodeData, ...children) => {
 			if (classData && !(BUILD.vdomSignals && isSignalLike(classData))) vnodeData.class = typeof classData !== "object" ? classData : Object.keys(classData).filter((k) => classData[k]).join(" ");
 		}
 	}
-	if (BUILD.isDev && vNodeChildren.some(isHost)) consoleDevError(`The <Host> must be the single root component. Make sure:
-- You are NOT using hostData() and <Host> in the same component.
-- <Host> is used once, and it's the single root component of the render() function.`);
+	if (BUILD.isDev && vNodeChildren.some(isHost)) consoleDevError(`The <Host> must be used once, and be the single root component of the render() function.`);
 	if (BUILD.vdomFunctional && typeof nodeName === "function") return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
 	const vnode = newVNode(nodeName, null);
 	vnode.$attrs$ = vnodeData;
@@ -4365,7 +4402,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;
@@ -4484,7 +4521,7 @@ const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
 };
 //#endregion
 //#region src/runtime/mode.ts
-const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
+const computeMode = (elm) => modeResolver.map((h) => h(elm)).find((m) => !!m);
 const getMode = (ref) => getHostRef(ref)?.$modeName$;
 //#endregion
 //#region src/runtime/normalize-watchers.ts
@@ -4549,23 +4586,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.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) return propValue === "" || !!propValue;
 		/**
 		* force it to be a number
 		*/
@@ -4607,7 +4635,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 	if (BUILD.signalBacking) {
 		const sig = hostRef?.$signalValues$?.get(propName);
 		if (sig !== void 0) {
-			const parsed = parsePropertyValue(newVal, cmpMeta.$members$[propName][0], BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+			const parsed = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
 			if (BUILD.serializer && BUILD.reflect && cmpMeta.$attrsToReflect$ && cmpMeta.$serializers$?.[propName]) {
 				const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : ref;
 				applySerializers(hostRef, cmpMeta, propName, parsed, BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm);
@@ -4625,7 +4653,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
 	const oldVal = hostRef.$instanceValues$.get(propName);
 	const flags = hostRef.$flags$;
 	const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
-	newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0], BUILD.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.lazyLoad || !(flags & HOST_FLAGS.isConstructingInstance) || oldVal === void 0) && didValueChange) {
 		hostRef.$instanceValues$.set(propName, newVal);
@@ -4674,6 +4702,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.
@@ -4730,9 +4774,8 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 						if (BUILD.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.lazyLoad) return origGetter ? origGetter.apply(this) : getValue(this, memberName);
 					},
@@ -4747,7 +4790,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.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;
@@ -4759,21 +4802,15 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					if (BUILD.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.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.lazyLoad && BUILD.method && flags & PROXY_FLAGS.isElementConstructor && memberFlags & MEMBER_FLAGS.Method) Object.defineProperty(prototype, memberName, { value(...args) {
@@ -4825,7 +4862,10 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 					const isBooleanTarget = propMemberFlags & MEMBER_FLAGS.Boolean;
 					if (BUILD.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.isDev && newValue === "false") consoleDevWarn(`<${cmpMeta.$tagName$} ${attrName}="false">: boolean attributes are true when present, regardless of value. Remove the attribute or set the "${propName}" property to false instead.`);
+						newValue = newValue !== null;
+					}
 					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
 					if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
 				});
@@ -4888,9 +4928,12 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
 				} catch (e) {
 					consoleError(e, elm);
 				}
-				if (BUILD.member) hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
+				if (BUILD.member) {
+					hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
+					replayPendingSetterValues(hostRef, cmpMeta);
+				}
 				endNewInstance();
-				if (BUILD.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$);
+				if (BUILD.asyncLoading && hostRef.$ancestorComponent$) await awaitAncestorConnected(hostRef.$ancestorComponent$, getHostRegistry(elm));
 				if (!(BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) {
 					fireConnectedCallback(hostRef.$lazyInstance$, elm);
 					if (BUILD.asyncLoading) markFirstConnected(hostRef);
@@ -4990,9 +5033,16 @@ const connectedCallback = (elm) => {
 			}
 			if (BUILD.asyncLoading) {
 				let ancestorComponent = elm;
-				while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) if (BUILD.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.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.prop && !BUILD.hydrateServerSide && cmpMeta.$members$) Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
@@ -5108,48 +5158,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.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.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-loader.ts
 const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -5567,8 +5614,8 @@ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, in
 //#endregion
 //#region src/testing/platform/index.ts
 const setMode = (handler) => {
-	modeResolutionChain.length = 0;
-	modeResolutionChain.push(handler);
+	modeResolver.length = 0;
+	modeResolver.push(handler);
 };
 const needsScopedSSR = () => scopedSSR;
 let scopedSSR = false;
@@ -5647,79 +5694,6 @@ const buildEvents = () => {
 	};
 };
 //#endregion
-//#region src/compiler/app-core/app-data.ts
-/**
-* Generate a {@link BuildFeatures} entity, based on the provided component metadata
-* @param cmps a collection of component compiler metadata, used to set values on the generated build features object
-* @returns the generated build features entity
-*/
-const getBuildFeatures = (cmps) => {
-	const slot = cmps.some((c) => c.htmlTagNames.includes("slot"));
-	const shadowDom = cmps.some((c) => c.encapsulation === "shadow");
-	const slotRelocation = cmps.some((c) => c.encapsulation !== "shadow" && c.htmlTagNames.includes("slot"));
-	const f = {
-		allRenderFn: cmps.every((c) => c.hasRenderFn),
-		formAssociated: cmps.some((c) => c.formAssociated),
-		deserializer: cmps.some((c) => c.hasDeserializer),
-		element: cmps.some((c) => c.hasElement),
-		event: cmps.some((c) => c.hasEvent),
-		hasRenderFn: cmps.some((c) => c.hasRenderFn),
-		lifecycle: cmps.some((c) => c.hasLifecycle),
-		asyncLoading: true,
-		hostListener: cmps.some((c) => c.hasListener),
-		hostListenerTargetWindow: cmps.some((c) => c.hasListenerTargetWindow),
-		hostListenerTargetDocument: cmps.some((c) => c.hasListenerTargetDocument),
-		hostListenerTargetBody: cmps.some((c) => c.hasListenerTargetBody),
-		hostListenerTarget: cmps.some((c) => c.hasListenerTarget),
-		member: cmps.some((c) => c.hasMember),
-		method: cmps.some((c) => c.hasMethod),
-		mode: cmps.some((c) => c.hasMode),
-		observeAttribute: cmps.some((c) => c.hasAttribute || c.hasWatchCallback || c.hasDeserializer),
-		prop: cmps.some((c) => c.hasProp),
-		propBoolean: cmps.some((c) => c.hasPropBoolean),
-		propChangeCallback: cmps.some((c) => c.hasWatchCallback || c.hasDeserializer || c.hasSerializer),
-		propNumber: cmps.some((c) => c.hasPropNumber),
-		propString: cmps.some((c) => c.hasPropString),
-		propMutable: cmps.some((c) => c.hasPropMutable),
-		reflect: cmps.some((c) => c.hasReflect || c.hasSerializer),
-		scoped: cmps.some((c) => c.encapsulation === "scoped"),
-		serializer: cmps.some((c) => c.hasSerializer),
-		shadowDom,
-		shadowDelegatesFocus: shadowDom && cmps.some((c) => c.shadowDelegatesFocus),
-		shadowModeClosed: shadowDom && cmps.some((c) => c.shadowMode === "closed"),
-		shadowSlotAssignmentManual: shadowDom && cmps.some((c) => c.slotAssignment === "manual"),
-		shadowClonable: shadowDom && cmps.some((c) => c.shadowClonable),
-		shadowSerializable: shadowDom && cmps.some((c) => c.shadowSerializable),
-		slot,
-		slotRelocation,
-		state: cmps.some((c) => c.hasState),
-		style: cmps.some((c) => c.hasStyle),
-		svg: cmps.some((c) => c.htmlTagNames.includes("svg")),
-		updatable: cmps.some((c) => c.isUpdateable),
-		vdomAttribute: cmps.some((c) => c.hasVdomAttribute),
-		vdomXlink: cmps.some((c) => c.hasVdomXlink),
-		vdomClass: cmps.some((c) => c.hasVdomClass),
-		vdomFunctional: cmps.some((c) => c.hasVdomFunctional),
-		vdomKey: cmps.some((c) => c.hasVdomKey),
-		vdomListener: cmps.some((c) => c.hasVdomListener),
-		vdomPropOrAttr: cmps.some((c) => c.hasVdomPropOrAttr),
-		vdomPropOrAttrPrefix: cmps.some((c) => c.hasVdomPropOrAttrPrefix),
-		vdomRef: cmps.some((c) => c.hasVdomRef),
-		vdomRender: cmps.some((c) => c.hasVdomRender),
-		vdomStyle: cmps.some((c) => c.hasVdomStyle),
-		vdomText: cmps.some((c) => c.hasVdomText),
-		vdomSignals: cmps.some((c) => c.hasSignalsImport),
-		taskQueue: true,
-		patchAll: cmps.some((c) => c.hasPatchAll),
-		patchChildren: cmps.some((c) => c.hasPatchChildren),
-		patchClone: cmps.some((c) => c.hasPatchClone),
-		patchInsert: cmps.some((c) => c.hasPatchInsert)
-	};
-	f.vdomAttribute = f.vdomAttribute || f.reflect;
-	f.vdomPropOrAttr = f.vdomPropOrAttr || f.reflect;
-	return f;
-};
-//#endregion
 //#region src/compiler/sys/resolve/resolve-utils.ts
 const getModuleId = (orgImport) => {
 	if (orgImport.startsWith("~")) orgImport = orgImport.substring(1);
@@ -5809,6 +5783,92 @@ const createCustomResolverAsync = (sys, inMemoryFs, exts) => {
 		extensions: exts
 	};
 };
+//#endregion
+//#region src/compiler/app-core/app-data.ts
+/**
+* Generate a {@link BuildFeatures} entity, based on the provided component metadata
+* @param cmps a collection of component compiler metadata, used to set values on the generated build features object
+* @returns the generated build features entity
+*/
+const getBuildFeatures = (cmps) => {
+	const slot = cmps.some((c) => c.htmlTagNames.includes("slot"));
+	const shadowDom = cmps.some((c) => c.encapsulation === "shadow");
+	const slotRelocation = cmps.some((c) => c.encapsulation !== "shadow" && c.htmlTagNames.includes("slot"));
+	const f = {
+		allRenderFn: cmps.every((c) => c.hasRenderFn),
+		formAssociated: cmps.some((c) => c.formAssociated),
+		deserializer: cmps.some((c) => c.hasDeserializer),
+		element: cmps.some((c) => c.hasElement),
+		event: cmps.some((c) => c.hasEvent),
+		hasRenderFn: cmps.some((c) => c.hasRenderFn),
+		lifecycle: cmps.some((c) => c.hasLifecycle),
+		asyncLoading: true,
+		hostListener: cmps.some((c) => c.hasListener),
+		hostListenerTargetWindow: cmps.some((c) => c.hasListenerTargetWindow),
+		hostListenerTargetDocument: cmps.some((c) => c.hasListenerTargetDocument),
+		hostListenerTargetBody: cmps.some((c) => c.hasListenerTargetBody),
+		hostListenerTarget: cmps.some((c) => c.hasListenerTarget),
+		member: cmps.some((c) => c.hasMember),
+		method: cmps.some((c) => c.hasMethod),
+		mode: cmps.some((c) => c.hasMode),
+		observeAttribute: cmps.some((c) => c.hasAttribute || c.hasWatchCallback || c.hasDeserializer),
+		prop: cmps.some((c) => c.hasProp),
+		propBoolean: cmps.some((c) => c.hasPropBoolean),
+		propChangeCallback: cmps.some((c) => c.hasWatchCallback || c.hasDeserializer || c.hasSerializer),
+		propNumber: cmps.some((c) => c.hasPropNumber),
+		propString: cmps.some((c) => c.hasPropString),
+		propMutable: cmps.some((c) => c.hasPropMutable),
+		reflect: cmps.some((c) => c.hasReflect || c.hasSerializer),
+		scoped: cmps.some((c) => c.encapsulation === "scoped"),
+		serializer: cmps.some((c) => c.hasSerializer),
+		shadowDom,
+		shadowDelegatesFocus: shadowDom && cmps.some((c) => c.shadowDelegatesFocus),
+		shadowModeClosed: shadowDom && cmps.some((c) => c.shadowMode === "closed"),
+		shadowSlotAssignmentManual: shadowDom && cmps.some((c) => c.slotAssignment === "manual"),
+		shadowClonable: shadowDom && cmps.some((c) => c.shadowClonable),
+		shadowSerializable: shadowDom && cmps.some((c) => c.shadowSerializable),
+		slot,
+		slotRelocation,
+		state: cmps.some((c) => c.hasState),
+		style: cmps.some((c) => c.hasStyle),
+		svg: cmps.some((c) => c.htmlTagNames.includes("svg")),
+		updatable: cmps.some((c) => c.isUpdateable),
+		vdomAttribute: cmps.some((c) => c.hasVdomAttribute),
+		vdomXlink: cmps.some((c) => c.hasVdomXlink),
+		vdomClass: cmps.some((c) => c.hasVdomClass),
+		vdomFunctional: cmps.some((c) => c.hasVdomFunctional),
+		vdomKey: cmps.some((c) => c.hasVdomKey),
+		vdomListener: cmps.some((c) => c.hasVdomListener),
+		vdomPropOrAttr: cmps.some((c) => c.hasVdomPropOrAttr),
+		vdomPropOrAttrPrefix: cmps.some((c) => c.hasVdomPropOrAttrPrefix),
+		vdomRef: cmps.some((c) => c.hasVdomRef),
+		vdomRender: cmps.some((c) => c.hasVdomRender),
+		vdomStyle: cmps.some((c) => c.hasVdomStyle),
+		vdomText: cmps.some((c) => c.hasVdomText),
+		vdomSignals: cmps.some((c) => c.hasSignalsImport),
+		taskQueue: true,
+		patchAll: cmps.some((c) => c.hasPatchAll),
+		patchChildren: cmps.some((c) => c.hasPatchChildren),
+		patchClone: cmps.some((c) => c.hasPatchClone),
+		patchInsert: cmps.some((c) => c.hasPatchInsert)
+	};
+	f.vdomAttribute = f.vdomAttribute || f.reflect;
+	f.vdomPropOrAttr = f.vdomPropOrAttr || f.reflect;
+	return f;
+};
+//#endregion
+//#region src/compiler/style/component-global-styles.ts
+/**
+* Match `@import` of a `stencil-*` virtual import in any form CSS allows or a preprocessor emits:
+* quoted or not, bare or `url()`-wrapped, and with or without whitespace after `@import` (Sass's
+* compressed output drops it). Capture group 2 holds any trailing modifiers, e.g. `layer(name)`.
+* @param name the virtual import to match
+* @returns a global regex
+*/
+const stencilVirtualImportRe = (name) => new RegExp(`@import(?:\\s+|(?=['"]|url\\())(?:url\\(\\s*)?(['"]?)${name}(?![\\w-])\\1\\s*\\)?([^;]*);?`, "g");
+stencilVirtualImportRe("stencil-component-globals");
+stencilVirtualImportRe("stencil-hydrate");
+stencilVirtualImportRe("stencil-css-components");
 new RegExp(`^(${[.../* @__PURE__ */ new Set([
 	"child_process",
 	"cluster",
@@ -7357,15 +7417,6 @@ const createSystem = (c) => {
 		}
 		return results;
 	};
-	/**
-	* `self` is the global namespace object used within a web worker.
-	* `window` is the browser's global namespace object (I reorganized this to check the reference on that second)
-	* `global` is Node's global namespace object. https://nodejs.org/api/globals.html#globals_global
-	*
-	* loading in this order should allow workers, which are most common, then browser,
-	* then Node to grab the reference to fetch correctly.
-	*/
-	const fetch = typeof self !== "undefined" ? self?.fetch : typeof window !== "undefined" ? window?.fetch : typeof global !== "undefined" ? global?.fetch : void 0;
 	const writeFile = async (p, data) => writeFileSync(p, data);
 	const tmpDirSync = () => "/.tmp";
 	const tick = Promise.resolve();
@@ -7376,6 +7427,7 @@ const createSystem = (c) => {
 		if (typeof hashLength === "number") hashHex = hashHex.slice(0, hashLength);
 		return hashHex;
 	};
+	const generateFileHash = async (filePath, hashLength) => generateContentHash(readFileSync(filePath), hashLength);
 	const copy = async (copyTasks, srcDir) => {
 		const results = {
 			diagnostics: [],
@@ -7385,9 +7437,6 @@ const createSystem = (c) => {
 		logger.info("todo, copy task", copyTasks.length, srcDir);
 		return results;
 	};
-	const getEnvironmentVar = (key) => {
-		return process$1?.env[key];
-	};
 	const getLocalModulePath = (opts) => join(opts.rootDir, "node_modules", opts.moduleId, opts.path);
 	const getRemoteModuleUrl = (opts) => {
 		const npmBaseUrl = "https://cdn.jsdelivr.net/npm/";
@@ -7403,13 +7452,14 @@ const createSystem = (c) => {
 		access,
 		accessSync,
 		addDestroy,
+		checkVersion: async () => noop,
 		copyFile,
 		createDir,
 		createDirSync,
 		homeDir,
 		isTTY,
-		getEnvironmentVar,
 		destroy,
+		dynamicImport: (p) => import(p),
 		encodeToBase64,
 		exit: async (exitCode) => logger.warn(`exit ${exitCode}`),
 		getCurrentDirectory,
@@ -7420,6 +7470,7 @@ const createSystem = (c) => {
 		isSymbolicLink,
 		nextTick,
 		normalizePath: normalize,
+		onProcessInterrupt: noop,
 		platformPath: path,
 		readDir,
 		readDirSync,
@@ -7429,7 +7480,6 @@ const createSystem = (c) => {
 		realpathSync,
 		removeDestroy,
 		rename,
-		fetch,
 		resolvePath,
 		removeDir,
 		removeDirSync,
@@ -7444,6 +7494,7 @@ const createSystem = (c) => {
 		writeFile,
 		writeFileSync,
 		generateContentHash,
+		generateFileHash,
 		createWorkerController: null,
 		details: {
 			cpuModel: "",