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

package/dist/runtime/client/runtime.js

@@ -972,6 +972,7 @@ const patchSlotAppendChild = (HostElementPrototype) => {
 		const { slotName, slotNode } = findSlotFromSlottedNode(newChild, this);
 		if (slotNode) {
 			addSlotRelocateNode(newChild, slotNode);
+			patchSlottedNode(newChild);
 			const slotChildNodes = getSlotChildSiblings(slotNode, slotName);
 			const appendAfter = slotChildNodes[slotChildNodes.length - 1];
 			const insertedNode = internalCall(internalCall(appendAfter, "parentNode"), "insertBefore")(newChild, appendAfter.nextSibling);
@@ -994,8 +995,10 @@ const patchSlotRemoveChild = (ElementPrototype) => {
 	ElementPrototype.__removeChild = ElementPrototype.removeChild;
 	ElementPrototype.removeChild = function(toRemove) {
 		if (toRemove && typeof toRemove["s-sn"] !== "undefined") {
-			if (getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, toRemove["s-sn"]) && toRemove.isConnected) {
-				toRemove.remove();
+			const slotNode = getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, toRemove["s-sn"]);
+			if (slotNode && toRemove.isConnected) {
+				removeSlottedNode(toRemove);
+				if (slotNode[0]) dispatchSlotChangeEvent(slotNode[0]);
 				updateFallbackSlotVisibility(this);
 				return;
 			}
@@ -1018,6 +1021,7 @@ const patchSlotPrepend = (HostElementPrototype) => {
 			const slotNode = getHostSlotNodes(internalCall(this, "childNodes"), this.tagName, slotName)[0];
 			if (slotNode) {
 				addSlotRelocateNode(newChild, slotNode, true);
+				patchSlottedNode(newChild);
 				const appendAfter = getSlotChildSiblings(slotNode, slotName)[0];
 				const toReturn = internalCall(internalCall(appendAfter, "parentNode"), "insertBefore")(newChild, internalCall(appendAfter, "nextSibling"));
 				dispatchSlotChangeEvent(slotNode);
@@ -1093,6 +1097,7 @@ const patchInsertBefore = (HostElementPrototype) => {
 					}
 					if (slotName === currentChild["s-sn"]) {
 						addSlotRelocateNode(newChild, slotNode);
+						patchSlottedNode(newChild);
 						internalCall(internalCall(currentChild, "parentNode"), "insertBefore")(newChild, currentChild);
 						dispatchSlotChangeEvent(slotNode);
 					}
@@ -1171,10 +1176,21 @@ const patchChildSlotNodes = (elm) => {
 	} });
 };
 /**
-* Patches sibling accessors of a 'slotted' node within a non-shadow component.
-* Meaning whilst stepping through a non-shadow element's nodes, only the mock 'lightDOM' nodes are returned.
-* Especially relevant when rendering components via SSR... Frameworks will often try to reconcile their
-* VDOM with the real DOM by stepping through nodes with 'nextSibling' et al.
+* Patches a node slotted into a non-shadow component so it behaves as it would in a native slot:
+* - `parentNode` returns the host element
+* - `remove()` fires `slotchange` on the node's slot
+*
+* @param node the slotted node to be patched
+*/
+const patchSlottedNode = (node) => {
+	patchParentNode(node);
+	patchSlottedRemove(node);
+};
+/**
+* Patches a slotted node from SSR markup: everything {@link patchSlottedNode} does, plus its
+* sibling accessors, so whilst stepping through a non-shadow element's nodes only the mock
+* 'lightDOM' nodes are returned. Frameworks hydrating SSR output often reconcile their VDOM with
+* the real DOM by stepping through nodes with 'nextSibling' et al.
 * - `nextSibling`
 * - `nextElementSibling`
 * - `previousSibling`
@@ -1182,11 +1198,11 @@ const patchChildSlotNodes = (elm) => {
 *
 * @param node the slotted node to be patched
 */
-const patchSlottedNode = (node) => {
+const patchSsrSlottedNode = (node) => {
 	if (!node || node.__nextSibling !== void 0 || !globalThis.Node) return;
 	patchNextSibling(node);
 	patchPreviousSibling(node);
-	patchParentNode(node);
+	patchSlottedNode(node);
 	if (node.nodeType === Node.ELEMENT_NODE) {
 		patchNextElementSibling(node);
 		patchPreviousElementSibling(node);
@@ -1253,6 +1269,39 @@ const patchPreviousElementSibling = (element) => {
 	} });
 };
 /**
+* Detaches a slotted node from where it physically sits in the component's rendered DOM, through
+* the unpatched accessors. Not via `remove()`: mock-doc's `remove()` calls
+* `parentNode.removeChild()`, and a slotted node's patched `parentNode` is the host, whose patched
+* `removeChild()` would come straight back here.
+*
+* @param node the slotted node to detach
+*/
+const removeSlottedNode = (node) => {
+	const parent = internalCall(node, "parentNode");
+	if (parent) internalCall(parent, "removeChild")(node);
+};
+/**
+* Patches `remove()` on a node slotted into a non-shadow component, so that removing it fires
+* `slotchange` on its slot (and updates fallback content), as removing a node from a native slot
+* does. Stencil's own node moves, while `isTmpDisconnected` is set, don't fire it.
+*
+* @param node the slotted node to patch
+*/
+const patchSlottedRemove = (node) => {
+	const child = node;
+	if (!child || child.__remove || typeof child.remove !== "function") return;
+	child.__remove = child.remove;
+	child.remove = function() {
+		const host = this["s-ol"]?.parentElement;
+		const { slotNode } = findSlotFromSlottedNode(this);
+		removeSlottedNode(this);
+		if (slotNode && !(plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected)) {
+			dispatchSlotChangeEvent(slotNode);
+			updateFallbackSlotVisibility(host);
+		}
+	};
+};
+/**
 * Patches the `parentNode` accessor of a non-shadow slotted node
 *
 * @param node the slotted node to be patched
@@ -1991,6 +2040,7 @@ let isSvgMode = false;
 * These ensure that ref callbacks are called in the correct order:
 * first all removal callbacks (with null), then all attachment callbacks (with elements).
 */
+const initialSlotChanges = /* @__PURE__ */ new Set();
 const refCallbacksToRemove = [];
 const refCallbacksToAttach = [];
 /** Disposers for signal subscriptions on individual DOM nodes (text nodes, <s-show> wrappers). */
@@ -2545,10 +2595,13 @@ const insertBefore = (parent, newNode, reference, isInitialLoad) => {
 		if (BUILD$1.scoped && typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
 		else if (typeof newNode["s-sn"] === "string") {
 			const hostElm = newNode["s-hn"] && parent.closest?.(newNode["s-hn"]);
-			if ((BUILD$1.lightDomPatches || BUILD$1.slotChildNodes || BUILD$1.patchAll && !!(hostElm && getHostRef(hostElm)?.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll)) && parent.getRootNode().nodeType !== NODE_TYPES.DOCUMENT_FRAGMENT_NODE) patchParentNode(newNode);
+			if ((BUILD$1.lightDomPatches || BUILD$1.slotChildNodes || BUILD$1.patchAll && !!(hostElm && getHostRef(hostElm)?.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll)) && parent.getRootNode().nodeType !== NODE_TYPES.DOCUMENT_FRAGMENT_NODE) patchSlottedNode(newNode);
 			parent.insertBefore(newNode, reference);
 			const { slotNode } = findSlotFromSlottedNode(newNode);
-			if (slotNode && !isInitialLoad) dispatchSlotChangeEvent(slotNode);
+			if (slotNode) {
+				if (isInitialLoad) initialSlotChanges.add(slotNode);
+				else dispatchSlotChangeEvent(slotNode);
+			}
 			return newNode;
 		}
 	}
@@ -2704,6 +2757,11 @@ render() {
 		if (checkSlotFallbackVisibility) updateFallbackSlotVisibility(rootVnode.$elm$);
 		plt.$flags$ &= ~PLATFORM_FLAGS.isTmpDisconnected;
 		relocateNodes.length = 0;
+		if (initialSlotChanges.size) {
+			const slotNodes = [...initialSlotChanges];
+			initialSlotChanges.clear();
+			nextTick(() => slotNodes.forEach(dispatchSlotChangeEvent));
+		}
 	}
 	if (BUILD$1.slotRelocation && !useNativeShadowDom && !(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && hostElm["s-cr"]) {
 		const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
@@ -3456,7 +3514,7 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
 				}
 				addSlotRelocateNode(siNode, siSlot, false, siNode["s-oo"] || currentPos);
 				if (siNode.parentElement?.shadowRoot && siNode["getAttribute"] && siNode.getAttribute("slot")) siNode.removeAttribute("slot");
-				if (BUILD$1.lightDomPatches || BUILD$1.slotChildNodes || BUILD$1.patchAll && hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll) patchSlottedNode(siNode);
+				if (BUILD$1.lightDomPatches || BUILD$1.slotChildNodes || BUILD$1.patchAll && hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll) patchSsrSlottedNode(siNode);
 			}
 			currentPos = (siNode["s-oo"] || currentPos) + 1;
 		}

package/dist/runtime/index.d.ts

@@ -1,4 +1,4 @@
-import { C as ReactiveControllerHostInterface, E as VNode, S as MixedInCtor, T as TagTransformer, _ as ComponentInterface, a as ComponentConstructor, b as HTMLStencilElement, c as ComponentRuntimeMeta, d as HostRef, f as LazyBundlesRuntimeData, g as RuntimeRef, h as RenderNode, i as ChildType, l as ComponentRuntimeMetaCompact, m as PropsType, o as ComponentConstructorChangeHandlers, p as PlatformRuntime, s as ComponentRuntimeHostListener, u as HostElement, v as CustomElementsDefineOptions, w as ResolutionHandler, x as JSXBase, y as FunctionalComponent } from "../index-BHciXst1.js";
+import { C as ReactiveControllerHostInterface, E as VNode, S as MixedInCtor, T as TagTransformer, _ as ComponentInterface, a as ComponentConstructor, b as HTMLStencilElement, c as ComponentRuntimeMeta, d as HostRef, f as LazyBundlesRuntimeData, g as RuntimeRef, h as RenderNode, i as ChildType, l as ComponentRuntimeMetaCompact, m as PropsType, o as ComponentConstructorChangeHandlers, p as PlatformRuntime, s as ComponentRuntimeHostListener, u as HostElement, v as CustomElementsDefineOptions, w as ResolutionHandler, x as JSXBase, y as FunctionalComponent } from "../index-CicD4Pgn.js";
 //#region src/runtime/asset-path.d.ts
 declare const getAssetPath: (path: string) => string;
 declare const setAssetPath: (path: string) => string;

package/dist/runtime/index.js

@@ -844,6 +844,7 @@ const patchSlotAppendChild = (HostElementPrototype) => {
 		const { slotName, slotNode } = findSlotFromSlottedNode(newChild, this);
 		if (slotNode) {
 			addSlotRelocateNode(newChild, slotNode);
+			patchSlottedNode(newChild);
 			const slotChildNodes = getSlotChildSiblings(slotNode, slotName);
 			const appendAfter = slotChildNodes[slotChildNodes.length - 1];
 			const insertedNode = internalCall(internalCall(appendAfter, "parentNode"), "insertBefore")(newChild, appendAfter.nextSibling);
@@ -866,8 +867,10 @@ const patchSlotRemoveChild = (ElementPrototype) => {
 	ElementPrototype.__removeChild = ElementPrototype.removeChild;
 	ElementPrototype.removeChild = function(toRemove) {
 		if (toRemove && typeof toRemove["s-sn"] !== "undefined") {
-			if (getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, toRemove["s-sn"]) && toRemove.isConnected) {
-				toRemove.remove();
+			const slotNode = getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, toRemove["s-sn"]);
+			if (slotNode && toRemove.isConnected) {
+				removeSlottedNode(toRemove);
+				if (slotNode[0]) dispatchSlotChangeEvent(slotNode[0]);
 				updateFallbackSlotVisibility(this);
 				return;
 			}
@@ -890,6 +893,7 @@ const patchSlotPrepend = (HostElementPrototype) => {
 			const slotNode = getHostSlotNodes(internalCall(this, "childNodes"), this.tagName, slotName)[0];
 			if (slotNode) {
 				addSlotRelocateNode(newChild, slotNode, true);
+				patchSlottedNode(newChild);
 				const appendAfter = getSlotChildSiblings(slotNode, slotName)[0];
 				const toReturn = internalCall(internalCall(appendAfter, "parentNode"), "insertBefore")(newChild, internalCall(appendAfter, "nextSibling"));
 				dispatchSlotChangeEvent(slotNode);
@@ -965,6 +969,7 @@ const patchInsertBefore = (HostElementPrototype) => {
 					}
 					if (slotName === currentChild["s-sn"]) {
 						addSlotRelocateNode(newChild, slotNode);
+						patchSlottedNode(newChild);
 						internalCall(internalCall(currentChild, "parentNode"), "insertBefore")(newChild, currentChild);
 						dispatchSlotChangeEvent(slotNode);
 					}
@@ -1043,10 +1048,21 @@ const patchChildSlotNodes = (elm) => {
 	} });
 };
 /**
-* Patches sibling accessors of a 'slotted' node within a non-shadow component.
-* Meaning whilst stepping through a non-shadow element's nodes, only the mock 'lightDOM' nodes are returned.
-* Especially relevant when rendering components via SSR... Frameworks will often try to reconcile their
-* VDOM with the real DOM by stepping through nodes with 'nextSibling' et al.
+* Patches a node slotted into a non-shadow component so it behaves as it would in a native slot:
+* - `parentNode` returns the host element
+* - `remove()` fires `slotchange` on the node's slot
+*
+* @param node the slotted node to be patched
+*/
+const patchSlottedNode = (node) => {
+	patchParentNode(node);
+	patchSlottedRemove(node);
+};
+/**
+* Patches a slotted node from SSR markup: everything {@link patchSlottedNode} does, plus its
+* sibling accessors, so whilst stepping through a non-shadow element's nodes only the mock
+* 'lightDOM' nodes are returned. Frameworks hydrating SSR output often reconcile their VDOM with
+* the real DOM by stepping through nodes with 'nextSibling' et al.
 * - `nextSibling`
 * - `nextElementSibling`
 * - `previousSibling`
@@ -1054,11 +1070,11 @@ const patchChildSlotNodes = (elm) => {
 *
 * @param node the slotted node to be patched
 */
-const patchSlottedNode = (node) => {
+const patchSsrSlottedNode = (node) => {
 	if (!node || node.__nextSibling !== void 0 || !globalThis.Node) return;
 	patchNextSibling(node);
 	patchPreviousSibling(node);
-	patchParentNode(node);
+	patchSlottedNode(node);
 	if (node.nodeType === Node.ELEMENT_NODE) {
 		patchNextElementSibling(node);
 		patchPreviousElementSibling(node);
@@ -1125,6 +1141,39 @@ const patchPreviousElementSibling = (element) => {
 	} });
 };
 /**
+* Detaches a slotted node from where it physically sits in the component's rendered DOM, through
+* the unpatched accessors. Not via `remove()`: mock-doc's `remove()` calls
+* `parentNode.removeChild()`, and a slotted node's patched `parentNode` is the host, whose patched
+* `removeChild()` would come straight back here.
+*
+* @param node the slotted node to detach
+*/
+const removeSlottedNode = (node) => {
+	const parent = internalCall(node, "parentNode");
+	if (parent) internalCall(parent, "removeChild")(node);
+};
+/**
+* Patches `remove()` on a node slotted into a non-shadow component, so that removing it fires
+* `slotchange` on its slot (and updates fallback content), as removing a node from a native slot
+* does. Stencil's own node moves, while `isTmpDisconnected` is set, don't fire it.
+*
+* @param node the slotted node to patch
+*/
+const patchSlottedRemove = (node) => {
+	const child = node;
+	if (!child || child.__remove || typeof child.remove !== "function") return;
+	child.__remove = child.remove;
+	child.remove = function() {
+		const host = this["s-ol"]?.parentElement;
+		const { slotNode } = findSlotFromSlottedNode(this);
+		removeSlottedNode(this);
+		if (slotNode && !(plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected)) {
+			dispatchSlotChangeEvent(slotNode);
+			updateFallbackSlotVisibility(host);
+		}
+	};
+};
+/**
 * Patches the `parentNode` accessor of a non-shadow slotted node
 *
 * @param node the slotted node to be patched
@@ -1863,6 +1912,7 @@ let isSvgMode = false;
 * These ensure that ref callbacks are called in the correct order:
 * first all removal callbacks (with null), then all attachment callbacks (with elements).
 */
+const initialSlotChanges = /* @__PURE__ */ new Set();
 const refCallbacksToRemove = [];
 const refCallbacksToAttach = [];
 /** Disposers for signal subscriptions on individual DOM nodes (text nodes, <s-show> wrappers). */
@@ -2417,10 +2467,13 @@ const insertBefore = (parent, newNode, reference, isInitialLoad) => {
 		if (BUILD.scoped && typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
 		else if (typeof newNode["s-sn"] === "string") {
 			const hostElm = newNode["s-hn"] && parent.closest?.(newNode["s-hn"]);
-			if ((BUILD.lightDomPatches || BUILD.slotChildNodes || BUILD.patchAll && !!(hostElm && getHostRef(hostElm)?.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll)) && parent.getRootNode().nodeType !== NODE_TYPES.DOCUMENT_FRAGMENT_NODE) patchParentNode(newNode);
+			if ((BUILD.lightDomPatches || BUILD.slotChildNodes || BUILD.patchAll && !!(hostElm && getHostRef(hostElm)?.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll)) && parent.getRootNode().nodeType !== NODE_TYPES.DOCUMENT_FRAGMENT_NODE) patchSlottedNode(newNode);
 			parent.insertBefore(newNode, reference);
 			const { slotNode } = findSlotFromSlottedNode(newNode);
-			if (slotNode && !isInitialLoad) dispatchSlotChangeEvent(slotNode);
+			if (slotNode) {
+				if (isInitialLoad) initialSlotChanges.add(slotNode);
+				else dispatchSlotChangeEvent(slotNode);
+			}
 			return newNode;
 		}
 	}
@@ -2576,6 +2629,11 @@ render() {
 		if (checkSlotFallbackVisibility) updateFallbackSlotVisibility(rootVnode.$elm$);
 		plt.$flags$ &= ~PLATFORM_FLAGS.isTmpDisconnected;
 		relocateNodes.length = 0;
+		if (initialSlotChanges.size) {
+			const slotNodes = [...initialSlotChanges];
+			initialSlotChanges.clear();
+			nextTick(() => slotNodes.forEach(dispatchSlotChangeEvent));
+		}
 	}
 	if (BUILD.slotRelocation && !useNativeShadowDom && !(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && hostElm["s-cr"]) {
 		const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
@@ -3328,7 +3386,7 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
 				}
 				addSlotRelocateNode(siNode, siSlot, false, siNode["s-oo"] || currentPos);
 				if (siNode.parentElement?.shadowRoot && siNode["getAttribute"] && siNode.getAttribute("slot")) siNode.removeAttribute("slot");
-				if (BUILD.lightDomPatches || BUILD.slotChildNodes || BUILD.patchAll && hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll) patchSlottedNode(siNode);
+				if (BUILD.lightDomPatches || BUILD.slotChildNodes || BUILD.patchAll && hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll) patchSsrSlottedNode(siNode);
 			}
 			currentPos = (siNode["s-oo"] || currentPos) + 1;
 		}

package/dist/runtime/server/index.mjs

@@ -640,6 +640,7 @@ const patchSlotAppendChild = (HostElementPrototype) => {
 		const { slotName, slotNode } = findSlotFromSlottedNode(newChild, this);
 		if (slotNode) {
 			addSlotRelocateNode(newChild, slotNode);
+			patchSlottedNode(newChild);
 			const slotChildNodes = getSlotChildSiblings(slotNode, slotName);
 			const appendAfter = slotChildNodes[slotChildNodes.length - 1];
 			const insertedNode = internalCall(internalCall(appendAfter, "parentNode"), "insertBefore")(newChild, appendAfter.nextSibling);
@@ -662,8 +663,10 @@ const patchSlotRemoveChild = (ElementPrototype) => {
 	ElementPrototype.__removeChild = ElementPrototype.removeChild;
 	ElementPrototype.removeChild = function(toRemove) {
 		if (toRemove && typeof toRemove["s-sn"] !== "undefined") {
-			if (getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, toRemove["s-sn"]) && toRemove.isConnected) {
-				toRemove.remove();
+			const slotNode = getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, toRemove["s-sn"]);
+			if (slotNode && toRemove.isConnected) {
+				removeSlottedNode(toRemove);
+				if (slotNode[0]) dispatchSlotChangeEvent(slotNode[0]);
 				updateFallbackSlotVisibility(this);
 				return;
 			}
@@ -686,6 +689,7 @@ const patchSlotPrepend = (HostElementPrototype) => {
 			const slotNode = getHostSlotNodes(internalCall(this, "childNodes"), this.tagName, slotName)[0];
 			if (slotNode) {
 				addSlotRelocateNode(newChild, slotNode, true);
+				patchSlottedNode(newChild);
 				const appendAfter = getSlotChildSiblings(slotNode, slotName)[0];
 				const toReturn = internalCall(internalCall(appendAfter, "parentNode"), "insertBefore")(newChild, internalCall(appendAfter, "nextSibling"));
 				dispatchSlotChangeEvent(slotNode);
@@ -761,6 +765,7 @@ const patchInsertBefore = (HostElementPrototype) => {
 					}
 					if (slotName === currentChild["s-sn"]) {
 						addSlotRelocateNode(newChild, slotNode);
+						patchSlottedNode(newChild);
 						internalCall(internalCall(currentChild, "parentNode"), "insertBefore")(newChild, currentChild);
 						dispatchSlotChangeEvent(slotNode);
 					}
@@ -839,10 +844,21 @@ const patchChildSlotNodes = (elm) => {
 	} });
 };
 /**
-* Patches sibling accessors of a 'slotted' node within a non-shadow component.
-* Meaning whilst stepping through a non-shadow element's nodes, only the mock 'lightDOM' nodes are returned.
-* Especially relevant when rendering components via SSR... Frameworks will often try to reconcile their
-* VDOM with the real DOM by stepping through nodes with 'nextSibling' et al.
+* Patches a node slotted into a non-shadow component so it behaves as it would in a native slot:
+* - `parentNode` returns the host element
+* - `remove()` fires `slotchange` on the node's slot
+*
+* @param node the slotted node to be patched
+*/
+const patchSlottedNode = (node) => {
+	patchParentNode(node);
+	patchSlottedRemove(node);
+};
+/**
+* Patches a slotted node from SSR markup: everything {@link patchSlottedNode} does, plus its
+* sibling accessors, so whilst stepping through a non-shadow element's nodes only the mock
+* 'lightDOM' nodes are returned. Frameworks hydrating SSR output often reconcile their VDOM with
+* the real DOM by stepping through nodes with 'nextSibling' et al.
 * - `nextSibling`
 * - `nextElementSibling`
 * - `previousSibling`
@@ -850,11 +866,11 @@ const patchChildSlotNodes = (elm) => {
 *
 * @param node the slotted node to be patched
 */
-const patchSlottedNode = (node) => {
+const patchSsrSlottedNode = (node) => {
 	if (!node || node.__nextSibling !== void 0 || !globalThis.Node) return;
 	patchNextSibling(node);
 	patchPreviousSibling(node);
-	patchParentNode(node);
+	patchSlottedNode(node);
 	if (node.nodeType === Node.ELEMENT_NODE) {
 		patchNextElementSibling(node);
 		patchPreviousElementSibling(node);
@@ -921,6 +937,39 @@ const patchPreviousElementSibling = (element) => {
 	} });
 };
 /**
+* Detaches a slotted node from where it physically sits in the component's rendered DOM, through
+* the unpatched accessors. Not via `remove()`: mock-doc's `remove()` calls
+* `parentNode.removeChild()`, and a slotted node's patched `parentNode` is the host, whose patched
+* `removeChild()` would come straight back here.
+*
+* @param node the slotted node to detach
+*/
+const removeSlottedNode = (node) => {
+	const parent = internalCall(node, "parentNode");
+	if (parent) internalCall(parent, "removeChild")(node);
+};
+/**
+* Patches `remove()` on a node slotted into a non-shadow component, so that removing it fires
+* `slotchange` on its slot (and updates fallback content), as removing a node from a native slot
+* does. Stencil's own node moves, while `isTmpDisconnected` is set, don't fire it.
+*
+* @param node the slotted node to patch
+*/
+const patchSlottedRemove = (node) => {
+	const child = node;
+	if (!child || child.__remove || typeof child.remove !== "function") return;
+	child.__remove = child.remove;
+	child.remove = function() {
+		const host = this["s-ol"]?.parentElement;
+		const { slotNode } = findSlotFromSlottedNode(this);
+		removeSlottedNode(this);
+		if (slotNode && !(plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected)) {
+			dispatchSlotChangeEvent(slotNode);
+			updateFallbackSlotVisibility(host);
+		}
+	};
+};
+/**
 * Patches the `parentNode` accessor of a non-shadow slotted node
 *
 * @param node the slotted node to be patched
@@ -1627,6 +1676,7 @@ let isSvgMode = false;
 * These ensure that ref callbacks are called in the correct order:
 * first all removal callbacks (with null), then all attachment callbacks (with elements).
 */
+const initialSlotChanges = /* @__PURE__ */ new Set();
 const refCallbacksToRemove = [];
 const refCallbacksToAttach = [];
 /** Disposers for signal subscriptions on individual DOM nodes (text nodes, <s-show> wrappers). */
@@ -2181,10 +2231,13 @@ const insertBefore = (parent, newNode, reference, isInitialLoad) => {
 		if (BUILD$1.scoped && typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) addRemoveSlotScopedClass(newNode["s-cr"], newNode, parent, newNode.parentElement);
 		else if (typeof newNode["s-sn"] === "string") {
 			const hostElm = newNode["s-hn"] && parent.closest?.(newNode["s-hn"]);
-			if ((BUILD$1.lightDomPatches || BUILD$1.slotChildNodes || BUILD$1.patchAll && !!(hostElm && getHostRef(hostElm)?.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll)) && parent.getRootNode().nodeType !== NODE_TYPES.DOCUMENT_FRAGMENT_NODE) patchParentNode(newNode);
+			if ((BUILD$1.lightDomPatches || BUILD$1.slotChildNodes || BUILD$1.patchAll && !!(hostElm && getHostRef(hostElm)?.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll)) && parent.getRootNode().nodeType !== NODE_TYPES.DOCUMENT_FRAGMENT_NODE) patchSlottedNode(newNode);
 			parent.insertBefore(newNode, reference);
 			const { slotNode } = findSlotFromSlottedNode(newNode);
-			if (slotNode && !isInitialLoad) dispatchSlotChangeEvent(slotNode);
+			if (slotNode) {
+				if (isInitialLoad) initialSlotChanges.add(slotNode);
+				else dispatchSlotChangeEvent(slotNode);
+			}
 			return newNode;
 		}
 	}
@@ -2340,6 +2393,11 @@ render() {
 		if (checkSlotFallbackVisibility) updateFallbackSlotVisibility(rootVnode.$elm$);
 		plt.$flags$ &= ~PLATFORM_FLAGS.isTmpDisconnected;
 		relocateNodes.length = 0;
+		if (initialSlotChanges.size) {
+			const slotNodes = [...initialSlotChanges];
+			initialSlotChanges.clear();
+			nextTick(() => slotNodes.forEach(dispatchSlotChangeEvent));
+		}
 	}
 	if (BUILD$1.slotRelocation && !useNativeShadowDom && !(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && hostElm["s-cr"]) {
 		const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
@@ -3090,7 +3148,7 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
 				}
 				addSlotRelocateNode(siNode, siSlot, false, siNode["s-oo"] || currentPos);
 				if (siNode.parentElement?.shadowRoot && siNode["getAttribute"] && siNode.getAttribute("slot")) siNode.removeAttribute("slot");
-				if (BUILD$1.lightDomPatches || BUILD$1.slotChildNodes || BUILD$1.patchAll && hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll) patchSlottedNode(siNode);
+				if (BUILD$1.lightDomPatches || BUILD$1.slotChildNodes || BUILD$1.patchAll && hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.patchAll) patchSsrSlottedNode(siNode);
 			}
 			currentPos = (siNode["s-oo"] || currentPos) + 1;
 		}

package/dist/sys/node/index.d.mts

@@ -1,4 +1,4 @@
-import { Bt as Logger, nt as CompilerSystem } from "../../index-BogZpjP2.mjs";
+import { Bt as Logger, nt as CompilerSystem } from "../../index-m_QF4nMv.mjs";
 //#region src/sys/node/logger/index.d.ts
 /**
  * Create a logger to run in a Node environment

package/dist/sys/node/index.mjs

@@ -1,2 +1,2 @@
-import { n as setupNodeProcess, r as createNodeLogger, t as createNodeSys } from "../../node-CvPPhnWO.mjs";
+import { n as setupNodeProcess, r as createNodeLogger, t as createNodeSys } from "../../node-D-21Ykxi.mjs";
 export { createNodeLogger, createNodeSys, setupNodeProcess };

package/dist/sys/node/worker.mjs

@@ -1,5 +1,5 @@
-import { l as createWorkerMessageHandler } from "../../compiler-6RhuOkQ0.mjs";
-import { t as createNodeSys } from "../../node-CvPPhnWO.mjs";
+import { l as createWorkerMessageHandler } from "../../compiler-BZEeAANv.mjs";
+import { t as createNodeSys } from "../../node-D-21Ykxi.mjs";
 //#region src/sys/node/node-worker-thread.ts
 /**
 * Initialize a worker thread, setting up various machinery for managing

package/dist/testing/index.d.mts

@@ -1526,7 +1526,8 @@ interface DevServerConfig extends StencilDevServerConfig {
    * reloading updates.
    */
   excludeHmr?: string[];
-  historyApiFallback?: HistoryApiFallback;
+  /** Serve `index` for page requests that match no file (single-page app routes). `null` turns it off. */
+  historyApiFallback?: HistoryApiFallback | null;
   openBrowser?: boolean;
   prerenderConfig?: string;
   protocol?: 'http' | 'https';