@stencil/core 5.0.0-alpha.31 → 5.0.0-alpha.33

package/dist/client-Bqq2Agpl.mjs

@@ -0,0 +1,2367 @@
+import { B as HOST_FLAGS, C as CMP_FLAGS, G as NODE_TYPES, Z as SVG_NS, o as isComplexType, s as isDef, x as queryNonceMetaTagContent } from "./helpers-Cpp3qc3u.mjs";
+import { effect } from "@preact/signals-core";
+//#region src/app-data/index.ts
+/**
+* A collection of default build flags for a Stencil project.
+*
+* This collection can be found throughout the Stencil codebase, often imported from the `virtual:app-data` module like so:
+* ```ts
+* import { BUILD } from 'virtual:app-data';
+* ```
+* and is used to determine if a portion of the output of a Stencil _project_'s compilation step can be eliminated.
+*
+* e.g. When `BUILD.allRenderFn` evaluates to `false`, the compiler will eliminate conditional statements like:
+* ```ts
+* if (BUILD.allRenderFn) {
+*   // some code that will be eliminated if BUILD.allRenderFn is false
+* }
+* ```
+*
+* `virtual:app-data`, the module that `BUILD` is imported from, is an alias for `@stencil/core/app-data`, and is
+* partially referenced by {@link STENCIL_APP_DATA_ID}. The `src/compiler/bundle/app-data-plugin.ts` references
+* `STENCIL_APP_DATA_ID` uses it to replace these defaults with {@link BuildConditionals} that are derived from a
+* Stencil project's contents (i.e. metadata from the components). This replacement happens at a Stencil project's
+* compile time. Such code can be found at `src/compiler/app-core/app-data.ts`.
+*/
+const BUILD = {
+	allRenderFn: false,
+	element: true,
+	event: true,
+	hasRenderFn: true,
+	hostListener: true,
+	hostListenerTargetWindow: true,
+	hostListenerTargetDocument: true,
+	hostListenerTargetBody: true,
+	hostListenerTarget: true,
+	member: true,
+	method: true,
+	mode: true,
+	observeAttribute: true,
+	prop: true,
+	propMutable: true,
+	reflect: true,
+	scoped: true,
+	shadowDom: true,
+	shadowModeClosed: false,
+	slot: true,
+	cssAnnotations: true,
+	state: true,
+	style: true,
+	formAssociated: true,
+	svg: true,
+	updatable: true,
+	vdomAttribute: true,
+	vdomXlink: true,
+	vdomClass: true,
+	vdomFunctional: true,
+	vdomKey: true,
+	vdomListener: true,
+	vdomRef: true,
+	vdomPropOrAttr: true,
+	vdomRender: true,
+	vdomStyle: true,
+	vdomText: true,
+	propChangeCallback: true,
+	taskQueue: true,
+	lifecycle: true,
+	serializer: true,
+	deserializer: true,
+	patchAll: true,
+	patchChildren: true,
+	patchClone: true,
+	patchInsert: true,
+	hotModuleReplacement: false,
+	isDebug: false,
+	isDev: false,
+	isTesting: false,
+	hydrateServerSide: false,
+	hydrateClientSide: true,
+	lifecycleDOMEvents: false,
+	lazyLoad: false,
+	profile: false,
+	slotRelocation: true,
+	lightDomPatches: true,
+	slotChildNodes: true,
+	slotCloneNode: true,
+	slotDomMutations: true,
+	slotTextContent: true,
+	hydratedAttribute: false,
+	hydratedClass: true,
+	invisiblePrehydration: true,
+	staticHydrationStyles: false,
+	propBoolean: true,
+	propNumber: true,
+	propString: true,
+	constructableCSS: true,
+	devTools: false,
+	shadowDelegatesFocus: true,
+	shadowSlotAssignmentManual: false,
+	shadowClonable: true,
+	shadowSerializable: true,
+	initializeNextTick: false,
+	asyncLoading: true,
+	asyncQueue: false
+};
+//#endregion
+//#region src/client/client-build.ts
+const Build = {
+	isDev: BUILD.isDev,
+	isBrowser: true,
+	isServer: false,
+	isTesting: BUILD.isTesting
+};
+//#endregion
+//#region src/client/client-host-ref.ts
+/**
+* Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
+*
+* @param ref the runtime ref of interest
+* @returns the Host reference (if found) or undefined
+*/
+const getHostRef = (ref) => {
+	if (ref.__s_ghr) return ref.__s_ghr();
+};
+const isMemberInElement = (elm, memberName) => memberName in elm;
+//#endregion
+//#region src/client/client-log.ts
+let customError;
+const consoleError = (e, el) => (customError || console.error)(e, el);
+const STENCIL_DEV_MODE = BUILD.isTesting ? ["STENCIL:"] : ["%cstencil", "color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px"];
+const consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);
+const consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
+const setErrorHandler = (handler) => customError = handler;
+//#endregion
+//#region src/client/client-load-module.ts
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+//#endregion
+//#region src/client/client-style.ts
+const styles = /*@__PURE__*/ new Map();
+const modeResolutionChain = [];
+//#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 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 HYDRATED_STYLE_ID = "sty-id";
+const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
+/**
+* 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";
+//#endregion
+//#region src/client/client-window.ts
+const win = typeof window !== "undefined" ? window : {};
+win.HTMLElement;
+const plt = {
+	$flags$: 0,
+	$resourcesUrl$: "",
+	jmp: (h) => h(),
+	raf: (h) => requestAnimationFrame(h),
+	ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
+	rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+	ce: (eventName, opts) => new CustomEvent(eventName, opts)
+};
+const setPlatformHelpers = (helpers) => {
+	Object.assign(plt, helpers);
+};
+const promiseResolve = (v) => Promise.resolve(v);
+const supportsConstructableStylesheets = BUILD.constructableCSS ? /*@__PURE__*/ (() => {
+	try {
+		if (!win.document.adoptedStyleSheets) return false;
+		return typeof new CSSStyleSheet().replaceSync === "function";
+	} catch {}
+	return false;
+})() : false;
+const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ? /*@__PURE__*/ (() => !!win.document && Object.getOwnPropertyDescriptor(win.document.adoptedStyleSheets, "length").writable)() : false;
+//#endregion
+//#region src/client/client-task-queue.ts
+let queueCongestion = 0;
+let queuePending = false;
+const queueDomReads = [];
+const queueDomWrites = [];
+const queueDomWritesLow = [];
+const scheduleFlush = () => win.document?.hidden ? nextTick(flush) : plt.raf(flush);
+const queueTask = (queue, write) => (cb) => {
+	queue.push(cb);
+	if (!queuePending) {
+		queuePending = true;
+		if (write && plt.$flags$ & PLATFORM_FLAGS.queueSync) nextTick(flush);
+		else scheduleFlush();
+	}
+};
+const consume = (queue) => {
+	for (let i = 0; i < queue.length; i++) try {
+		queue[i](performance.now());
+	} catch (e) {
+		consoleError(e);
+	}
+	queue.length = 0;
+};
+const consumeTimeout = (queue, timeout) => {
+	let i = 0;
+	let ts = 0;
+	while (i < queue.length && (ts = performance.now()) < timeout) try {
+		queue[i++](ts);
+	} catch (e) {
+		consoleError(e);
+	}
+	if (i === queue.length) queue.length = 0;
+	else if (i !== 0) queue.splice(0, i);
+};
+const flush = () => {
+	if (BUILD.asyncQueue) queueCongestion++;
+	consume(queueDomReads);
+	if (BUILD.asyncQueue) {
+		const timeout = (plt.$flags$ & PLATFORM_FLAGS.queueMask) === PLATFORM_FLAGS.appLoaded ? performance.now() + 14 * Math.ceil(queueCongestion * (1 / 10)) : Infinity;
+		consumeTimeout(queueDomWrites, timeout);
+		consumeTimeout(queueDomWritesLow, timeout);
+		if (queueDomWrites.length > 0) {
+			queueDomWritesLow.push(...queueDomWrites);
+			queueDomWrites.length = 0;
+		}
+		if (queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0) scheduleFlush();
+		else queueCongestion = 0;
+	} else {
+		consume(queueDomWrites);
+		if (queuePending = queueDomReads.length > 0) scheduleFlush();
+	}
+};
+const nextTick = (cb) => promiseResolve().then(cb);
+const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
+const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
+//#endregion
+//#region src/runtime/asset-path.ts
+const getAssetPath = (path) => {
+	const base = plt.$resourcesUrl$ || new URL(".", import.meta.url).href;
+	const assetUrl = new URL(path, base);
+	return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
+};
+const setAssetPath = (path) => plt.$resourcesUrl$ = path;
+//#endregion
+//#region src/runtime/slot-polyfill-utils.ts
+/**
+* Adjust the `.hidden` property as-needed on any nodes in a DOM subtree which
+* are slot fallback nodes - `<slot-fb>...</slot-fb>`
+*
+* A slot fallback node should be visible by default. Then, it should be
+* conditionally hidden if:
+*
+* - it has a sibling with a `slot` property set to its slot name or if
+* - it is a default fallback slot node, in which case we hide if it has any
+*   content
+*
+* @param elm the element of interest
+*/
+const updateFallbackSlotVisibility = (elm) => {
+	const childNodes = internalCall(elm, "childNodes");
+	if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
+		if (slotNode.nodeType === NODE_TYPE.ElementNode && slotNode.tagName === "SLOT-FB") {
+			if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) slotNode.hidden = true;
+			else slotNode.hidden = false;
+		}
+	});
+	let i = 0;
+	for (i = 0; i < childNodes.length; i++) {
+		const childNode = childNodes[i];
+		if (childNode.nodeType === NODE_TYPE.ElementNode && internalCall(childNode, "childNodes").length) updateFallbackSlotVisibility(childNode);
+	}
+};
+/**
+* Get's the child nodes of a component that are actually slotted.
+* It does this by using root nodes of a component; for each slotted node there is a
+* corresponding slot location node which points to the slotted node (via `['s-nr']`).
+*
+* This is only required until all patches are unified / switched on all the time (then we can rely on `childNodes`)
+* either under 'lightDomPatches' or on by default
+* @param childNodes all 'internal' child nodes of the component
+* @returns An array of slotted reference nodes.
+*/
+const getSlottedChildNodes = (childNodes) => {
+	const result = [];
+	for (let i = 0; i < childNodes.length; i++) {
+		const slottedNode = childNodes[i]["s-nr"] || void 0;
+		if (slottedNode && slottedNode.isConnected) result.push(slottedNode);
+	}
+	return result;
+};
+/**
+* Recursively searches a series of child nodes for slot node/s, optionally with a provided slot name.
+* @param childNodes the nodes to search for a slot with a specific name. Should be an element's root nodes.
+* @param hostName the host name of the slot to match on.
+* @param slotName the name of the slot to match on.
+* @returns a reference to the slot node that matches the provided name, `null` otherwise
+*/
+function getHostSlotNodes(childNodes, hostName, slotName) {
+	let i = 0;
+	let slottedNodes = [];
+	let childNode;
+	for (; i < childNodes.length; i++) {
+		childNode = childNodes[i];
+		if (childNode["s-sr"] && (!hostName || childNode["s-hn"] === hostName) && (slotName === void 0 || getSlotName(childNode) === slotName)) {
+			slottedNodes.push(childNode);
+			if (typeof slotName !== "undefined") return slottedNodes;
+		}
+		slottedNodes = [...slottedNodes, ...getHostSlotNodes(internalCall(childNode, "childNodes"), hostName, slotName)];
+	}
+	return slottedNodes;
+}
+/**
+* Get all 'child' sibling nodes of a slot node
+* @param slot - the slot node to get the child nodes from
+* @param slotName - the name of the slot to match on
+* @param includeSlot - whether to include the slot node in the result
+* @returns child nodes of the slot node
+*/
+const getSlotChildSiblings = (slot, slotName, includeSlot = true) => {
+	const childNodes = [];
+	if (includeSlot && slot["s-sr"] || !slot["s-sr"]) childNodes.push(slot);
+	let node = slot;
+	while (node = node.nextSibling) if (getSlotName(node) === slotName && (includeSlot || !node["s-sr"])) childNodes.push(node);
+	return childNodes;
+};
+/**
+* Check whether a node is located in a given named slot.
+*
+* @param nodeToRelocate the node of interest
+* @param slotName the slot name to check
+* @returns whether the node is located in the slot or not
+*/
+const isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
+	if (nodeToRelocate.nodeType === NODE_TYPE.ElementNode) {
+		if (nodeToRelocate.getAttribute("slot") === null && slotName === "") return true;
+		if (nodeToRelocate.getAttribute("slot") === slotName) return true;
+		return false;
+	}
+	if (typeof nodeToRelocate["s-sa"] === "string") return nodeToRelocate["s-sa"] === slotName;
+	return slotName === "";
+};
+const getSlotName = (node) => typeof node["s-sn"] === "string" ? node["s-sn"] : node.nodeType === 1 && node.getAttribute("slot") || void 0;
+/**
+* Add `assignedElements` and `assignedNodes` methods on a fake slot node
+*
+* @param node - slot node to patch
+*/
+function patchSlotNode(node) {
+	if (node.assignedElements || node.assignedNodes || !node["s-sr"]) return;
+	const assignedFactory = (elementsOnly) => function(opts) {
+		const toReturn = [];
+		const slotName = this["s-sn"];
+		if (opts?.flatten) {
+			if (BUILD.isDev) console.error("Flattening is not supported for Stencil non-shadow slots. You can use `.childNodes` for nested slot fallback content.");
+			else console.error("Flattening not supported for Stencil non-shadow slots");
+		}
+		const parent = this["s-cr"].parentElement;
+		(parent.__childNodes ? parent.childNodes : getSlottedChildNodes(parent.childNodes)).forEach((n) => {
+			if (slotName === getSlotName(n)) toReturn.push(n);
+		});
+		if (elementsOnly) return toReturn.filter((n) => n.nodeType === NODE_TYPE.ElementNode);
+		return toReturn;
+	}.bind(node);
+	node.assignedElements = assignedFactory(true);
+	node.assignedNodes = assignedFactory(false);
+}
+/**
+* Dispatches a `slotchange` event on a fake `<slot />` node.
+*
+* @param elm the slot node to dispatch the event from
+*/
+function dispatchSlotChangeEvent(elm) {
+	elm.name = elm["s-sn"] || "";
+	elm.dispatchEvent(new CustomEvent("slotchange", {
+		bubbles: false,
+		cancelable: false,
+		composed: false
+	}));
+}
+/**
+* Find the slot node that a slotted node belongs to
+*
+* @param slottedNode - the slotted node to find the slot for
+* @param parentHost - the parent host element of the slotted node
+* @returns the slot node and slot name
+*/
+function findSlotFromSlottedNode(slottedNode, parentHost) {
+	parentHost = parentHost || slottedNode["s-ol"]?.parentElement;
+	if (!parentHost) return {
+		slotNode: null,
+		slotName: ""
+	};
+	const slotName = slottedNode["s-sn"] = getSlotName(slottedNode) || "";
+	return {
+		slotNode: getHostSlotNodes(internalCall(parentHost, "childNodes"), parentHost.tagName, slotName)[0],
+		slotName
+	};
+}
+//#endregion
+//#region src/runtime/dom-extras.ts
+/**
+* Patches the `parentNode` accessor of a non-shadow slotted node
+*
+* @param node the slotted node to be patched
+*/
+const patchParentNode = (node) => {
+	if (!node || node.__parentNode) return;
+	patchHostOriginalAccessor("parentNode", node);
+	Object.defineProperty(node, "parentNode", {
+		get: function() {
+			return this["s-ol"]?.parentNode || this.__parentNode;
+		},
+		set: function(value) {
+			this.__parentNode = value;
+		}
+	});
+};
+const validElementPatches = [
+	"children",
+	"nextElementSibling",
+	"previousElementSibling"
+];
+const validNodesPatches = [
+	"childNodes",
+	"firstChild",
+	"lastChild",
+	"nextSibling",
+	"previousSibling",
+	"textContent",
+	"parentNode"
+];
+/**
+* Patches a node or element; making it's original accessor method available under a new name.
+* e.g. `nextSibling` -> `__nextSibling`
+*
+* @param accessorName - the name of the accessor to patch
+* @param node - the node to patch
+*/
+function patchHostOriginalAccessor(accessorName, node) {
+	/**
+	* skip this method if a component was imported from a non-browser environment
+	*/
+	if (!globalThis.Node || !globalThis.Element) return;
+	let accessor;
+	if (validElementPatches.includes(accessorName)) accessor = Object.getOwnPropertyDescriptor(Element.prototype, accessorName);
+	else if (validNodesPatches.includes(accessorName)) accessor = Object.getOwnPropertyDescriptor(Node.prototype, accessorName);
+	if (!accessor) accessor = Object.getOwnPropertyDescriptor(node, accessorName);
+	if (accessor) Object.defineProperty(node, "__" + accessorName, accessor);
+}
+/**
+* Get the original / internal accessor or method of a node or element.
+*
+* @param node - the node to get the accessor from
+* @param method - the name of the accessor to get
+*
+* @returns the original accessor or method of the node
+*/
+function internalCall(node, method) {
+	if ("__" + method in node) {
+		const toReturn = node["__" + method];
+		if (typeof toReturn !== "function") return toReturn;
+		return toReturn.bind(node);
+	} else {
+		if (typeof node[method] !== "function") return node[method];
+		return node[method].bind(node);
+	}
+}
+//#endregion
+//#region src/runtime/element.ts
+const getElement = (ref) => BUILD.lazyLoad ? getHostRef(ref)?.$hostElement$ : ref;
+/**
+* Get the shadow root for a Stencil component's host element.
+* This works for both open and closed shadow DOM modes.
+*
+* For closed shadow DOM, `element.shadowRoot` returns `null` by design,
+* but Stencil stores the reference internally so components can still
+* access their own shadow root.
+*
+* @param element The host element (from @Element() decorator)
+* @returns The shadow root, or null if no shadow root exists
+*/
+const getShadowRoot = (element) => {
+	if (BUILD.shadowModeClosed && element.__shadowRoot) return element.__shadowRoot;
+	return element.shadowRoot;
+};
+//#endregion
+//#region src/runtime/profile.ts
+let i = 0;
+const createTime = (fnName, tagName = "") => {
+	if (BUILD.profile && performance.mark) {
+		const key = `st:${fnName}:${tagName}:${i++}`;
+		performance.mark(key);
+		return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key);
+	} else return () => {};
+};
+//#endregion
+//#region src/runtime/styles.ts
+const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
+/**
+* Get or initialize the set of applied style scope IDs for a container element.
+*
+* @param container the container element to track styles for
+* @returns the set of applied scope IDs
+*/
+const getAppliedStyles = (container) => {
+	let applied = rootAppliedStyles.get(container);
+	if (!applied) {
+		applied = /* @__PURE__ */ new Set();
+		rootAppliedStyles.set(container, applied);
+	}
+	return applied;
+};
+/**
+* Safely adopt a stylesheet into a container's adoptedStyleSheets.
+* Handles both mutable and immutable adoptedStyleSheets arrays.
+*
+* @param container the shadow root or document to adopt styles into
+* @param sheet the CSSStyleSheet to adopt
+* @param prepend if true, add to beginning; if false, add to end
+*/
+const adoptStylesheet = (container, sheet, prepend = false) => {
+	if (supportsMutableAdoptedStyleSheets) {
+		if (prepend) container.adoptedStyleSheets.unshift(sheet);
+		else container.adoptedStyleSheets.push(sheet);
+	} else if (prepend) container.adoptedStyleSheets = [sheet, ...container.adoptedStyleSheets];
+	else container.adoptedStyleSheets = [...container.adoptedStyleSheets, sheet];
+};
+/**
+* Create a CSSStyleSheet for the correct window context.
+* Constructable stylesheets can't be shared between windows,
+* so we need to create one for the current window.
+*
+* @param container the container node (used to determine the window context)
+* @param cssText the CSS text to populate the stylesheet with
+* @returns a new CSSStyleSheet for the correct window
+*/
+const createStylesheetForWindow = (container, cssText) => {
+	const sheet = new (container.defaultView ?? (container.ownerDocument?.defaultView) ?? win).CSSStyleSheet();
+	sheet.replaceSync(cssText);
+	return sheet;
+};
+/**
+* Get the style for a component, appending slot fallback CSS if needed.
+* Returns a new value without mutating the cached style.
+*
+* @param style - the style string or CSSStyleSheet to process
+* @returns the style (string or CSSStyleSheet) with slot CSS appended if needed, or undefined
+*/
+const getStyleWithSlotCss = (style) => {
+	if (!style) return SLOT_FB_CSS;
+	if (typeof style === "string") return style + SLOT_FB_CSS;
+	return style;
+};
+/**
+* Attach the styles for a given component to the DOM
+*
+* If the element uses shadow or is already attached to the DOM then we can
+* create a stylesheet inside of its associated document fragment, otherwise
+* we'll stick the stylesheet into the document head.
+*
+* @param styleContainerNode the node within which a style element for the
+* component of interest should be added
+* @param cmpMeta runtime metadata for the component of interest
+* @param mode an optional current mode
+* @returns the scope ID for the component of interest
+*/
+const addStyle = (styleContainerNode, cmpMeta, mode) => {
+	const scopeId = getScopeId(cmpMeta, mode);
+	if (!win.document) return scopeId;
+	let style = styles.get(scopeId);
+	if (cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation) style = getStyleWithSlotCss(style);
+	const isClosedShadowSSR = BUILD.hydrateServerSide && BUILD.shadowModeClosed && cmpMeta.$flags$ & CMP_FLAGS.shadowNeedsScopedCss && cmpMeta.$flags$ & CMP_FLAGS.shadowModeClosed;
+	if (styleContainerNode.nodeType !== NODE_TYPE.DocumentFragment && !isClosedShadowSSR) styleContainerNode = win.document;
+	if (style) {
+		if (typeof style === "string") {
+			styleContainerNode = styleContainerNode.head || styleContainerNode;
+			const appliedStyles = getAppliedStyles(styleContainerNode);
+			let styleElm;
+			const existingStyleElm = (BUILD.hydrateClientSide || BUILD.hotModuleReplacement) && styleContainerNode.querySelector(`[sty-id="${scopeId}"]`);
+			if (existingStyleElm) existingStyleElm.textContent = style;
+			else if (!appliedStyles.has(scopeId)) {
+				styleElm = win.document.createElement("style");
+				styleElm.textContent = style;
+				const nonce = plt.$nonce$ ?? queryNonceMetaTagContent(win.document);
+				if (nonce != null) styleElm.setAttribute("nonce", nonce);
+				if (BUILD.hydrateServerSide && (cmpMeta.$flags$ & CMP_FLAGS.scopedCssEncapsulation || cmpMeta.$flags$ & CMP_FLAGS.shadowNeedsScopedCss || cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) || BUILD.hotModuleReplacement) styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
+				if (BUILD.hotModuleReplacement && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation) styleElm.setAttribute("data-slot-fb", "");
+				/**
+				* attach styles at the end of the head tag if we render scoped components
+				*/
+				if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) {
+					if (styleContainerNode.nodeName === "HEAD") {
+						/**
+						* if the page contains preconnect links, we want to insert the styles
+						* after the last preconnect link to ensure the styles are preloaded
+						*/
+						const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
+						const referenceNode = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
+						styleContainerNode.insertBefore(styleElm, referenceNode?.parentNode === styleContainerNode ? referenceNode : null);
+					} else if ("host" in styleContainerNode) {
+						if (supportsConstructableStylesheets) {
+							const stylesheet = createStylesheetForWindow(styleContainerNode, style);
+							adoptStylesheet(styleContainerNode, stylesheet, true);
+						} else {
+							/**
+							* If a scoped component is used within a shadow root and constructable stylesheets are
+							* not supported, we want to insert the styles at the beginning of the shadow root node.
+							*
+							* However, if there is already a style node in the shadow root, we just append
+							* the styles to the existing node.
+							*
+							* Note: order of how styles are applied is important. The new style node
+							* should be inserted before the existing style node.
+							*
+							* During HMR, create separate style elements for scoped components so they can be
+							* updated independently without affecting other components' styles.
+							*/
+							const existingStyleContainer = styleContainerNode.querySelector("style");
+							if (existingStyleContainer && !BUILD.hotModuleReplacement) existingStyleContainer.textContent = style + existingStyleContainer.textContent;
+							else styleContainerNode.prepend(styleElm);
+						}
+					} else styleContainerNode.append(styleElm);
+				}
+				/**
+				* attach styles at the beginning of a shadow root node if we render shadow components
+				*/
+				if (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) {
+					if (isClosedShadowSSR) styleContainerNode.prepend(styleElm);
+					else styleContainerNode.insertBefore(styleElm, null);
+				}
+				if (appliedStyles) appliedStyles.add(scopeId);
+			}
+		} else if (BUILD.constructableCSS) {
+			const appliedStyles = getAppliedStyles(styleContainerNode);
+			if (!appliedStyles.has(scopeId)) {
+				const currentWindow = styleContainerNode.defaultView ?? styleContainerNode.ownerDocument.defaultView;
+				let stylesheet;
+				if (style.constructor === currentWindow.CSSStyleSheet) stylesheet = style;
+				else {
+					stylesheet = new currentWindow.CSSStyleSheet();
+					for (let i = 0; i < style.cssRules.length; i++) stylesheet.insertRule(style.cssRules[i].cssText, i);
+				}
+				adoptStylesheet(styleContainerNode, stylesheet);
+				appliedStyles.add(scopeId);
+				if (BUILD.hydrateClientSide && "host" in styleContainerNode) {
+					const ssrStyleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`);
+					if (ssrStyleElm) writeTask(() => ssrStyleElm.remove());
+				}
+			}
+		}
+	}
+	return scopeId;
+};
+/**
+* Add styles for a given component to the DOM, optionally handling 'scoped'
+* encapsulation by adding an appropriate class name to the host element.
+*
+* @param hostRef the host reference for the component of interest
+*/
+const attachStyles = (hostRef) => {
+	const cmpMeta = hostRef.$cmpMeta$;
+	const elm = hostRef.$hostElement$;
+	const flags = cmpMeta.$flags$;
+	const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
+	let styleContainerNode;
+	const shadowRoot = BUILD.shadowDom ? getShadowRoot(elm) : null;
+	if (shadowRoot) styleContainerNode = shadowRoot;
+	else if (BUILD.hydrateServerSide && BUILD.shadowModeClosed && flags & CMP_FLAGS.shadowNeedsScopedCss && flags & CMP_FLAGS.shadowModeClosed) styleContainerNode = elm;
+	else styleContainerNode = elm.getRootNode();
+	const scopeId = addStyle(styleContainerNode, cmpMeta, hostRef.$modeName$);
+	if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & CMP_FLAGS.needsScopedEncapsulation) {
+		elm["s-sc"] = scopeId;
+		elm.classList.add(scopeId + "-h");
+	}
+	endAttachStyles();
+};
+/**
+* Get the scope ID for a given component
+*
+* @param cmp runtime metadata for the component of interest
+* @param mode the current mode (optional)
+* @returns a scope ID for the component of interest
+*/
+const getScopeId = (cmp, mode) => "sc-" + (BUILD.mode && mode && cmp.$flags$ & CMP_FLAGS.hasMode ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
+//#endregion
+//#region src/runtime/event-emitter.ts
+/**
+* Helper function to create & dispatch a custom Event on a provided target
+* @param elm the target of the Event
+* @param name the name to give the custom Event
+* @param opts options for configuring a custom Event
+* @returns the custom Event
+*/
+const emitEvent = (elm, name, opts) => {
+	const ev = plt.ce(name, opts);
+	elm.dispatchEvent(ev);
+	return ev;
+};
+const getRegistry = () => customElements;
+//#endregion
+//#region src/runtime/vdom/set-accessor.ts
+/**
+* Production setAccessor() function based on Preact by
+* Jason Miller (@developit)
+* Licensed under the MIT License
+* https://github.com/developit/preact/blob/master/LICENSE
+*
+* Modified for Stencil's compiler and vdom
+*/
+/** Per-element, per-attribute signal subscription disposers. */
+const signalAttrDisposers = /* @__PURE__ */ new WeakMap();
+const disposeAllSignalAttrs = (elm) => {
+	if (!BUILD.vdomSignals) return;
+	const map = signalAttrDisposers.get(elm);
+	if (map) {
+		map.forEach((d) => d());
+		signalAttrDisposers.delete(elm);
+	}
+};
+/**
+* When running a VDom render set properties present on a VDom node onto the
+* corresponding HTML element.
+*
+* Note that this function has special functionality for the `class`,
+* `style`, `key`, and `ref` attributes, as well as event handlers (like
+* `onClick`, etc). All others are just passed through as-is.
+*
+* @param elm the HTMLElement onto which attributes should be set
+* @param memberName the name of the attribute to set
+* @param oldValue the old value for the attribute
+* @param newValue the new value for the attribute
+* @param isSvg whether we're in an svg context or not
+* @param flags bitflags for Vdom variables
+* @param initialRender whether this is the first render of the VDom
+*/
+const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => {
+	if (oldValue === newValue) return;
+	if (BUILD.vdomSignals && isSignalLike(newValue)) {
+		const attrMap = signalAttrDisposers.get(elm) ?? /* @__PURE__ */ new Map();
+		attrMap.get(memberName)?.();
+		if (!signalAttrDisposers.has(elm)) signalAttrDisposers.set(elm, attrMap);
+		let prevVal = oldValue;
+		attrMap.set(memberName, effect(() => {
+			const curVal = newValue.value;
+			setAccessor(elm, memberName, prevVal, curVal, isSvg, flags);
+			prevVal = curVal;
+		}));
+		return;
+	}
+	if (BUILD.vdomSignals && isSignalLike(oldValue)) {
+		const attrMap = signalAttrDisposers.get(elm);
+		if (attrMap) {
+			attrMap.get(memberName)?.();
+			attrMap.delete(memberName);
+		}
+	}
+	let isProp = isMemberInElement(elm, memberName);
+	let ln = memberName.toLowerCase();
+	if (BUILD.vdomClass && memberName === "class") {
+		const classList = elm.classList;
+		const oldClasses = parseClassList(oldValue);
+		let newClasses = parseClassList(newValue);
+		if (BUILD.hydrateClientSide && (elm["s-si"] || elm["s-sc"]) && initialRender) {
+			const scopeId = elm["s-sc"] || elm["s-si"];
+			newClasses.push(scopeId);
+			oldClasses.forEach((c) => {
+				if (c.startsWith(scopeId)) newClasses.push(c);
+			});
+			newClasses = [...new Set(newClasses)].filter((c) => c);
+			classList.add(...newClasses);
+		} else {
+			classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+			classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
+		}
+	} else if (BUILD.vdomStyle && memberName === "style") {
+		if (BUILD.updatable) {
+			for (const prop in oldValue) if (!newValue || newValue[prop] == null) {
+				if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.removeProperty(prop);
+				else elm.style[prop] = "";
+			}
+		}
+		for (const prop in newValue) if (!oldValue || newValue[prop] !== oldValue[prop]) {
+			if (!BUILD.hydrateServerSide && prop.includes("-")) elm.style.setProperty(prop, newValue[prop]);
+			else elm.style[prop] = newValue[prop];
+		}
+	} else if (BUILD.vdomKey && memberName === "key") {} else if (BUILD.vdomRef && memberName === "ref") {
+		if (newValue) queueRefAttachment(newValue, elm);
+	} else if (BUILD.vdomListener && (BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
+		if (memberName[2] === "-") memberName = memberName.slice(3);
+		else if (isMemberInElement(win, ln)) memberName = ln.slice(2);
+		else memberName = ln[2] + memberName.slice(3);
+		if (oldValue || newValue) {
+			const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+			memberName = memberName.replace(/*@__PURE__*/ new RegExp(CAPTURE_EVENT_SUFFIX + "$"), "");
+			if (oldValue) plt.rel(elm, memberName, oldValue, capture);
+			if (newValue) plt.ael(elm, memberName, newValue, capture);
+		}
+	} else if (BUILD.vdomPropOrAttr && memberName[0] === "a" && memberName.startsWith("attr:")) {
+		const propName = memberName.slice(5);
+		let attrName;
+		if (BUILD.member) {
+			const hostRef = getHostRef(elm);
+			if (hostRef && hostRef.$cmpMeta$ && hostRef.$cmpMeta$.$members$) {
+				const memberMeta = hostRef.$cmpMeta$.$members$[propName];
+				if (memberMeta && memberMeta[1]) attrName = memberMeta[1];
+			}
+		}
+		if (!attrName) attrName = propName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+		if (newValue == null || newValue === false) {
+			if (newValue !== false || elm.getAttribute(attrName) === "") elm.removeAttribute(attrName);
+		} else elm.setAttribute(attrName, newValue === true ? "" : newValue);
+		return;
+	} else if (BUILD.vdomPropOrAttr && memberName[0] === "p" && memberName.startsWith("prop:")) {
+		const propName = memberName.slice(5);
+		try {
+			elm[propName] = newValue;
+		} catch {}
+		return;
+	} else if (BUILD.vdomPropOrAttr) {
+		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 (!elm["s-pp"]) elm["s-pp"] = /* @__PURE__ */ new Map();
+				elm["s-pp"].set(memberName, newValue);
+				return;
+			}
+		}
+		if ((isProp || isComplex && newValue !== null) && !isSvg) try {
+			if (!elm.tagName.includes("-")) {
+				const n = newValue == null ? "" : newValue;
+				if (memberName === "list") isProp = false;
+				else if (oldValue == null || elm[memberName] !== n) {
+					if (typeof elm.__lookupSetter__(memberName) === "function") elm[memberName] = n;
+					else elm.setAttribute(memberName, n);
+				}
+			} else if (elm[memberName] !== newValue) elm[memberName] = newValue;
+		} catch {}
+		/**
+		* Need to manually update attribute if:
+		* - memberName is not an attribute
+		* - if we are rendering the host element in order to reflect attribute
+		* - if it's a SVG, since properties might not work in <svg>
+		* - if the newValue is null/undefined or 'false'.
+		*/
+		let xlink = false;
+		if (BUILD.vdomXlink) {
+			if (ln !== (ln = ln.replace(/^xlink:?/, ""))) {
+				memberName = ln;
+				xlink = true;
+			}
+		}
+		if (newValue == null || newValue === false) {
+			if (newValue !== false || elm.getAttribute(memberName) === "" || flags & VNODE_FLAGS.isHost && !isEnumeratedAttribute(memberName)) {
+				if (BUILD.vdomXlink && xlink) elm.removeAttributeNS(XLINK_NS, memberName);
+				else elm.removeAttribute(memberName);
+			}
+		} else if ((!isProp || flags & VNODE_FLAGS.isHost || isSvg) && !isComplex && elm.nodeType === NODE_TYPE.ElementNode) {
+			newValue = newValue === true ? "" : newValue;
+			if (BUILD.vdomXlink && xlink) elm.setAttributeNS(XLINK_NS, memberName, newValue);
+			else elm.setAttribute(memberName, newValue);
+		}
+	}
+};
+/**
+* Attribute names that are enumerated (tri-state true/false/unset) rather than
+* plain boolean-presence attributes. An explicit `"false"` string on one of
+* these is semantically different from the attribute being absent, so a
+* reflected `false` value must not clear a pre-existing literal value.
+*/
+const ENUMERATED_ATTRIBUTES = /*@__PURE__*/ new Set([
+	"draggable",
+	"contenteditable",
+	"spellcheck"
+]);
+const isEnumeratedAttribute = (attrName) => ENUMERATED_ATTRIBUTES.has(attrName) || attrName.startsWith("aria-");
+const parseClassListRegex = /\s/;
+/**
+* Parsed a string of classnames into an array
+* @param value className string, e.g. "foo bar baz"
+* @returns list of classes, e.g. ["foo", "bar", "baz"]
+*/
+const parseClassList = (value) => {
+	if (typeof value === "object" && value && "baseVal" in value) value = value.baseVal;
+	if (!value || typeof value !== "string") return [];
+	return value.split(parseClassListRegex);
+};
+const CAPTURE_EVENT_SUFFIX = "Capture";
+//#endregion
+//#region src/runtime/vdom/update-element.ts
+/**
+* Handle updating attributes on the component element based on the current
+* values present in the virtual DOM.
+*
+* If the component of interest uses shadow DOM these are added to the shadow
+* root's host element.
+*
+* @param oldVnode an old virtual DOM node or null
+* @param newVnode a new virtual DOM node
+* @param isSvgMode whether or not we're in an SVG context
+* @param isInitialRender whether this is the first render of the VDOM
+*/
+const updateElement = (oldVnode, newVnode, isSvgMode, isInitialRender) => {
+	const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || {};
+	const newVnodeAttrs = newVnode.$attrs$ || {};
+	const oldKeys = Object.keys(oldVnodeAttrs);
+	const newKeys = Object.keys(newVnodeAttrs);
+	if (!BUILD.updatable && newKeys.length === 0) return;
+	if (BUILD.updatable && oldKeys.length === 0 && newKeys.length === 0) return;
+	const elm = newVnode.$elm$.nodeType === NODE_TYPE.DocumentFragment && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
+	if (BUILD.updatable) {
+		for (const memberName of sortedAttrNames(oldKeys)) if (!(memberName in newVnodeAttrs)) setAccessor(elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode, newVnode.$flags$, isInitialRender);
+	}
+	for (const memberName of sortedAttrNames(newKeys)) setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$, isInitialRender);
+};
+/**
+* Sort a list of attribute names to ensure that all the attribute names which
+* are _not_ `"ref"` come before `"ref"`. Preserve the order of the non-ref
+* attributes.
+*
+* **Note**: if the supplied attributes do not include `'ref'` then the same
+* (by reference) array will be returned without modification.
+*
+* @param attrNames attribute names to sort
+* @returns a list of attribute names, sorted if they include `"ref"`
+*/
+function sortedAttrNames(attrNames) {
+	if (!BUILD.vdomRef) return attrNames;
+	return attrNames.includes("ref") ? [...attrNames.filter((attr) => attr !== "ref"), "ref"] : attrNames;
+}
+//#endregion
+//#region src/runtime/vdom/vdom-render.ts
+/**
+* Virtual DOM patching algorithm based on Snabbdom by
+* Simon Friis Vindum (@paldepind)
+* Licensed under the MIT License
+* https://github.com/snabbdom/snabbdom/blob/master/LICENSE
+*
+* Modified for Stencil's renderer and slot projection
+*/
+let scopeId;
+let contentRef;
+let hostTagName;
+let useNativeShadowDom = false;
+let checkSlotFallbackVisibility = false;
+let checkSlotRelocate = false;
+let isSvgMode = false;
+/**
+* Queues for ref callbacks that need to be called during rendering.
+* These ensure that ref callbacks are called in the correct order:
+* first all removal callbacks (with null), then all attachment callbacks (with elements).
+*/
+const refCallbacksToRemove = [];
+const refCallbacksToAttach = [];
+/** Disposers for signal subscriptions on individual DOM nodes (text nodes, <s-show> wrappers). */
+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);
+		}
+		disposeAllSignalAttrs(elm);
+	}
+	vnode.$children$?.forEach(disposeSignalVNode);
+};
+/**
+* Create a DOM Node corresponding to one of the children of a given VNode.
+*
+* @param oldParentVNode the parent VNode from the previous render
+* @param newParentVNode the parent VNode from the current render
+* @param childIndex the index of the VNode, in the _new_ parent node's
+* children, for which we will create a new DOM node
+* @returns the newly created node
+*/
+const createElm = (oldParentVNode, newParentVNode, childIndex) => {
+	const newVNode = newParentVNode.$children$[childIndex];
+	let i = 0;
+	let elm;
+	let childNode;
+	let oldVNode;
+	if (BUILD.slotRelocation && !useNativeShadowDom) {
+		checkSlotRelocate = true;
+		if (newVNode.$tag$ === "slot") newVNode.$flags$ |= newVNode.$children$ ? VNODE_FLAGS.isSlotFallback : VNODE_FLAGS.isSlotReference;
+	}
+	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(() => {
+				textNode.data = String(textSig.value);
+			}));
+		}
+	} else if (BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
+		elm = newVNode.$elm$ = BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
+		if (typeof newVNode.$attrs$?.slot === "string") elm["s-sa"] = newVNode.$attrs$.slot;
+		if (BUILD.vdomAttribute) updateElement(null, newVNode, isSvgMode);
+	} else {
+		if (BUILD.svg && !isSvgMode) isSvgMode = newVNode.$tag$ === "svg";
+		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;
+		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);
+		if ((BUILD.scoped || BUILD.hydrateServerSide && CMP_FLAGS.shadowNeedsScopedCss) && isDef(scopeId) && elm["s-si"] !== scopeId) elm.classList.add(elm["s-si"] = scopeId);
+		if (newVNode.$children$) {
+			const appendTarget = newVNode.$tag$ === "template" ? elm.content : elm;
+			for (i = 0; i < newVNode.$children$.length; ++i) {
+				childNode = createElm(oldParentVNode, newVNode, i);
+				if (childNode) appendTarget.appendChild(childNode);
+			}
+		}
+		if (BUILD.svg) {
+			if (newVNode.$tag$ === "svg") isSvgMode = false;
+			else if (elm.tagName === "foreignObject") isSvgMode = true;
+		}
+	}
+	elm["s-hn"] = hostTagName;
+	if (BUILD.slotRelocation) {
+		if (newVNode.$flags$ & (VNODE_FLAGS.isSlotFallback | VNODE_FLAGS.isSlotReference)) {
+			elm["s-sr"] = true;
+			elm["s-cr"] = contentRef;
+			elm["s-sn"] = newVNode.$name$ || "";
+			elm["s-rf"] = newVNode.$attrs$?.ref;
+			patchSlotNode(elm);
+			oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
+			if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) relocateToHostRoot(oldParentVNode.$elm$);
+			if (BUILD.scoped || BUILD.hydrateServerSide && CMP_FLAGS.shadowNeedsScopedCss) addRemoveSlotScopedClass(contentRef, elm, newParentVNode.$elm$, oldParentVNode?.$elm$);
+		}
+	}
+	return elm;
+};
+/**
+* Relocates all child nodes of an element that were a part of a previous slot relocation
+* to the root of the Stencil component currently being rendered. This happens when a parent
+* element of a slot reference node dynamically changes and triggers a re-render. We cannot use
+* `putBackInOriginalLocation()` because that may relocate nodes to elements that will not be re-rendered
+* and so they will not be relocated again.
+*
+* @param parentElm The element potentially containing relocated nodes.
+*/
+const relocateToHostRoot = (parentElm) => {
+	plt.$flags$ |= PLATFORM_FLAGS.isTmpDisconnected;
+	const host = parentElm.closest(hostTagName.toLowerCase());
+	if (host != null) {
+		const contentRefNode = Array.from(host.__childNodes || host.childNodes).find((ref) => ref["s-cr"]);
+		const childNodeArray = Array.from(parentElm.__childNodes || parentElm.childNodes);
+		for (const childNode of contentRefNode ? childNodeArray.reverse() : childNodeArray) if (childNode["s-sh"] != null) {
+			insertBefore(host, childNode, contentRefNode ?? null);
+			childNode["s-sh"] = void 0;
+			checkSlotRelocate = true;
+		}
+	}
+	plt.$flags$ &= ~PLATFORM_FLAGS.isTmpDisconnected;
+};
+/**
+* Puts `<slot>` nodes and any slotted nodes back to their original location (wherever they were before being slotted).
+*
+* @param parentElm - The parent element of the nodes to relocate.
+* @param recursive - Whether or not to relocate nodes in child nodes as well.
+*/
+const putBackInOriginalLocation = (parentElm, recursive) => {
+	plt.$flags$ |= PLATFORM_FLAGS.isTmpDisconnected;
+	const oldSlotChildNodes = Array.from(parentElm.__childNodes || parentElm.childNodes);
+	if (parentElm["s-sr"]) {
+		let node = parentElm;
+		while (node = node.nextSibling) if (node && node["s-sn"] === parentElm["s-sn"] && node["s-sh"] === hostTagName) oldSlotChildNodes.push(node);
+	}
+	for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
+		const childNode = oldSlotChildNodes[i];
+		if (childNode["s-hn"] !== hostTagName && childNode["s-ol"]) {
+			insertBefore(referenceNode(childNode).parentNode, childNode, referenceNode(childNode));
+			childNode["s-ol"].remove();
+			childNode["s-ol"] = void 0;
+			childNode["s-sh"] = void 0;
+			checkSlotRelocate = true;
+		}
+		if (recursive) putBackInOriginalLocation(childNode, recursive);
+	}
+	plt.$flags$ &= ~PLATFORM_FLAGS.isTmpDisconnected;
+};
+/**
+* Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+* add them to the DOM in the appropriate place.
+*
+* @param parentElm the DOM node which should be used as a parent for the new
+* DOM nodes
+* @param before a child of the `parentElm` which the new children should be
+* inserted before (optional)
+* @param parentVNode the parent virtual DOM node
+* @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+* @param startIdx the index in the child virtual DOM nodes at which to start
+* creating DOM nodes (inclusive)
+* @param endIdx the index in the child virtual DOM nodes at which to stop
+* creating DOM nodes (inclusive)
+*/
+const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
+	let containerElm = BUILD.slotRelocation && parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
+	let childNode;
+	if (BUILD.shadowDom && containerElm.tagName === hostTagName) {
+		const shadow = getShadowRoot(containerElm);
+		if (shadow) containerElm = shadow;
+	}
+	if (parentVNode.$tag$ === "template") containerElm = containerElm.content;
+	for (; startIdx <= endIdx; ++startIdx) if (vnodes[startIdx]) {
+		childNode = createElm(null, parentVNode, startIdx);
+		if (childNode) {
+			vnodes[startIdx].$elm$ = childNode;
+			insertBefore(containerElm, childNode, BUILD.slotRelocation ? referenceNode(before) : before);
+		}
+	}
+};
+/**
+* Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+* This can be used to, for instance, clean up after a list of children which
+* should no longer be shown.
+*
+* This function also handles some of Stencil's slot relocation logic.
+*
+* @param vnodes a list of virtual DOM nodes to remove
+* @param startIdx the index at which to start removing nodes (inclusive)
+* @param endIdx the index at which to stop removing nodes (inclusive)
+*/
+const removeVnodes = (vnodes, startIdx, endIdx) => {
+	for (let index = startIdx; index <= endIdx; ++index) {
+		const vnode = vnodes[index];
+		if (vnode) {
+			const elm = vnode.$elm$;
+			nullifyVNodeRefs(vnode);
+			if (BUILD.vdomSignals) disposeSignalVNode(vnode);
+			if (elm) {
+				if (BUILD.slotRelocation) {
+					checkSlotFallbackVisibility = true;
+					if (elm["s-ol"]) elm["s-ol"].remove();
+					else putBackInOriginalLocation(elm, true);
+				}
+				elm.remove();
+			}
+		}
+	}
+};
+/**
+* Reconcile the children of a new VNode with the children of an old VNode by
+* traversing the two collections of children, identifying nodes that are
+* conserved or changed, calling out to `patch` to make any necessary
+* updates to the DOM, and rearranging DOM nodes as needed.
+*
+* The algorithm for reconciling children works by analyzing two 'windows' onto
+* the two arrays of children (`oldCh` and `newCh`). We keep track of the
+* 'windows' by storing start and end indices and references to the
+* corresponding array entries. Initially the two 'windows' are basically equal
+* to the entire array, but we progressively narrow the windows until there are
+* no children left to update by doing the following:
+*
+* 1. Skip any `null` entries at the beginning or end of the two arrays, so
+*    that if we have an initial array like the following we'll end up dealing
+*    only with a window bounded by the highlighted elements:
+*
+*    [null, null, VNode1 , ... , VNode2, null, null]
+*                 ^^^^^^         ^^^^^^
+*
+* 2. Check to see if the elements at the head and tail positions are equal
+*    across the windows. This will basically detect elements which haven't
+*    been added, removed, or changed position, i.e. if you had the following
+*    VNode elements (represented as HTML):
+*
+*    oldVNode: `<div><p><span>HEY</span></p></div>`
+*    newVNode: `<div><p><span>THERE</span></p></div>`
+*
+*    Then when comparing the children of the `<div>` tag we check the equality
+*    of the VNodes corresponding to the `<p>` tags and, since they are the
+*    same tag in the same position, we'd be able to avoid completely
+*    re-rendering the subtree under them with a new DOM element and would just
+*    call out to `patch` to handle reconciling their children and so on.
+*
+* 3. Check, for both windows, to see if the element at the beginning of the
+*    window corresponds to the element at the end of the other window. This is
+*    a heuristic which will let us identify _some_ situations in which
+*    elements have changed position, for instance it _should_ detect that the
+*    children nodes themselves have not changed but merely moved in the
+*    following example:
+*
+*    oldVNode: `<div><element-one /><element-two /></div>`
+*    newVNode: `<div><element-two /><element-one /></div>`
+*
+*    If we find cases like this then we also need to move the concrete DOM
+*    elements corresponding to the moved children to write the re-order to the
+*    DOM.
+*
+* 4. Finally, if VNodes have the `key` attribute set on them we check for any
+*    nodes in the old children which have the same key as the first element in
+*    our window on the new children. If we find such a node we handle calling
+*    out to `patch`, moving relevant DOM nodes, and so on, in accordance with
+*    what we find.
+*
+* Finally, once we've narrowed our 'windows' to the point that either of them
+* collapse (i.e. they have length 0) we then handle any remaining VNode
+* insertion or deletion that needs to happen to get a DOM state that correctly
+* reflects the new child VNodes. If, for instance, after our window on the old
+* children has collapsed we still have more nodes on the new children that
+* we haven't dealt with yet then we need to add them, or if the new children
+* collapse but we still have unhandled _old_ children then we need to make
+* sure the corresponding DOM nodes are removed.
+*
+* @param parentElm the node into which the parent VNode is rendered
+* @param oldCh the old children of the parent node
+* @param newVNode the new VNode which will replace the parent
+* @param newCh the new children of the parent node
+* @param isInitialRender whether or not this is the first render of the vdom
+*/
+const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {
+	let oldStartIdx = 0;
+	let newStartIdx = 0;
+	let idxInOld = 0;
+	let i = 0;
+	let oldEndIdx = oldCh.length - 1;
+	let oldStartVnode = oldCh[0];
+	let oldEndVnode = oldCh[oldEndIdx];
+	let newEndIdx = newCh.length - 1;
+	let newStartVnode = newCh[0];
+	let newEndVnode = newCh[newEndIdx];
+	let node;
+	let elmToMove;
+	const containerElm = newVNode.$tag$ === "template" ? parentElm.content : parentElm;
+	while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) if (oldStartVnode == null) oldStartVnode = oldCh[++oldStartIdx];
+	else if (oldEndVnode == null) oldEndVnode = oldCh[--oldEndIdx];
+	else if (newStartVnode == null) newStartVnode = newCh[++newStartIdx];
+	else if (newEndVnode == null) newEndVnode = newCh[--newEndIdx];
+	else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {
+		patch(oldStartVnode, newStartVnode, isInitialRender);
+		oldStartVnode = oldCh[++oldStartIdx];
+		newStartVnode = newCh[++newStartIdx];
+	} else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {
+		patch(oldEndVnode, newEndVnode, isInitialRender);
+		oldEndVnode = oldCh[--oldEndIdx];
+		newEndVnode = newCh[--newEndIdx];
+	} else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
+		if (BUILD.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
+		patch(oldStartVnode, newEndVnode, isInitialRender);
+		insertBefore(containerElm, oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
+		oldStartVnode = oldCh[++oldStartIdx];
+		newEndVnode = newCh[--newEndIdx];
+	} else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
+		if (BUILD.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
+		patch(oldEndVnode, newStartVnode, isInitialRender);
+		insertBefore(containerElm, oldEndVnode.$elm$, oldStartVnode.$elm$);
+		oldEndVnode = oldCh[--oldEndIdx];
+		newStartVnode = newCh[++newStartIdx];
+	} else {
+		idxInOld = -1;
+		if (BUILD.vdomKey) {
+			for (i = oldStartIdx; i <= oldEndIdx; ++i) if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+				idxInOld = i;
+				break;
+			}
+		}
+		if (BUILD.vdomKey && idxInOld >= 0) {
+			elmToMove = oldCh[idxInOld];
+			if (elmToMove.$tag$ !== newStartVnode.$tag$) node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+			else {
+				patch(elmToMove, newStartVnode, isInitialRender);
+				oldCh[idxInOld] = void 0;
+				node = elmToMove.$elm$;
+			}
+			newStartVnode = newCh[++newStartIdx];
+		} else {
+			node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
+			newStartVnode = newCh[++newStartIdx];
+		}
+		if (node) {
+			if (BUILD.slotRelocation) insertBefore(referenceNode(oldStartVnode.$elm$).parentNode, node, referenceNode(oldStartVnode.$elm$));
+			else insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
+		}
+	}
+	if (oldStartIdx > oldEndIdx) addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
+	else if (BUILD.updatable && newStartIdx > newEndIdx) removeVnodes(oldCh, oldStartIdx, oldEndIdx);
+};
+/**
+* Compare two VNodes to determine if they are the same
+*
+* **NB**: This function is an equality _heuristic_ based on the available
+* information set on the two VNodes and can be misleading under certain
+* circumstances. In particular, if the two nodes do not have `key` attrs
+* (available under `$key$` on VNodes) then the function falls back on merely
+* checking that they have the same tag.
+*
+* So, in other words, if `key` attrs are not set on VNodes which may be
+* changing order within a `children` array or something along those lines then
+* we could obtain a false negative and then have to do needless re-rendering
+* (i.e. we'd say two VNodes aren't equal when in fact they should be).
+*
+* @param leftVNode the first VNode to check
+* @param rightVNode the second VNode to check
+* @param isInitialRender whether or not this is the first render of the vdom
+* @returns whether they're equal or not
+*/
+const isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
+	if (leftVNode.$tag$ === rightVNode.$tag$) {
+		if (BUILD.slotRelocation && leftVNode.$tag$ === "slot") return leftVNode.$name$ === rightVNode.$name$;
+		if (BUILD.vdomKey && !isInitialRender) return leftVNode.$key$ === rightVNode.$key$;
+		if (isInitialRender && !leftVNode.$key$ && rightVNode.$key$) leftVNode.$key$ = rightVNode.$key$;
+		return true;
+	}
+	return false;
+};
+/**
+* Returns the reference node (a comment which represents the
+* original location of a node in the vdom - before it was moved to its slot)
+* of a given node.
+*
+* (slot nodes can be relocated to a new location in the dom because of
+* some other component's slot)
+* @param node the node to find the original location reference node for
+* @returns reference node
+*/
+const referenceNode = (node) => node && node["s-ol"] || node;
+/**
+* Handle reconciling an outdated VNode with a new one which corresponds to
+* it. This function handles flushing updates to the DOM and reconciling the
+* children of the two nodes (if any).
+*
+* @param oldVNode an old VNode whose DOM element and children we want to update
+* @param newVNode a new VNode representing an updated version of the old one
+* @param isInitialRender whether or not this is the first render of the vdom
+*/
+const patch = (oldVNode, newVNode, isInitialRender = false) => {
+	const elm = newVNode.$elm$ = oldVNode.$elm$;
+	const oldChildren = oldVNode.$children$;
+	const newChildren = newVNode.$children$;
+	const tag = newVNode.$tag$;
+	const text = newVNode.$text$;
+	let defaultHolder;
+	if (!BUILD.vdomText || text == null) {
+		if (BUILD.svg) isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
+		if (BUILD.vdomAttribute || BUILD.reflect) {
+			if (BUILD.slot && tag === "slot" && !useNativeShadowDom) {
+				if (oldVNode.$name$ !== newVNode.$name$) {
+					newVNode.$elm$["s-sn"] = newVNode.$name$ || "";
+					relocateToHostRoot(newVNode.$elm$.parentElement);
+				}
+			}
+			updateElement(oldVNode, newVNode, isSvgMode, isInitialRender);
+		}
+		if (BUILD.updatable && oldChildren !== null && newChildren !== null) updateChildren(elm, oldChildren, newVNode, newChildren, isInitialRender);
+		else if (newChildren !== null) {
+			if (BUILD.updatable && BUILD.vdomText && oldVNode.$text$ !== null) elm.textContent = "";
+			addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
+		} else if (!isInitialRender && BUILD.updatable && oldChildren !== null) removeVnodes(oldChildren, 0, oldChildren.length - 1);
+		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;
+};
+/**
+* Component-global information about nodes which are either currently being
+* relocated or will be shortly.
+*/
+const relocateNodes = [];
+/**
+* When a forwarded `<slot>` gets relocated, drag along any content already forwarded through it,
+* to wherever it just landed (or nowhere, to be hidden, if it didn't match anything).
+*
+* Runs as its own pass after {@link markSlotContentForRelocation} rather than inside it, so that
+* function's matching order - which hydration's node/comment ordering depends on - is untouched.
+*/
+const carryContentWithRelocatedSlotRefs = () => {
+	for (const relocateData of relocateNodes.slice()) {
+		const marker = relocateData.$nodeToRelocate$;
+		if (!marker["s-sr"]) continue;
+		const carriedSiblings = getSlotChildSiblings(marker, marker["s-sn"] || "", false);
+		for (const carriedSibling of carriedSiblings) {
+			if (!carriedSibling["s-ol"]) continue;
+			let siblingRelocateData = relocateNodes.find((r) => r.$nodeToRelocate$ === carriedSibling);
+			if (!siblingRelocateData) {
+				siblingRelocateData = { $nodeToRelocate$: carriedSibling };
+				relocateNodes.push(siblingRelocateData);
+			}
+			siblingRelocateData.$slotRefNode$ = relocateData.$slotRefNode$;
+			if (relocateData.$slotRefNode$) carriedSibling["s-sh"] = relocateData.$slotRefNode$["s-hn"];
+		}
+	}
+};
+/**
+* Mark the contents of a slot for relocation via adding references to them to
+* the {@link relocateNodes} data structure. The actual work of relocating them
+* will then be handled in {@link renderVdom}.
+*
+* @param elm a render node whose child nodes need to be relocated
+*/
+const markSlotContentForRelocation = (elm) => {
+	let node;
+	let hostContentNodes;
+	let j;
+	const children = elm.__childNodes || elm.childNodes;
+	for (const childNode of children) {
+		if (childNode["s-sr"] && (node = childNode["s-cr"]) && node.parentNode) {
+			hostContentNodes = node.parentNode.__childNodes || node.parentNode.childNodes;
+			const slotName = childNode["s-sn"];
+			for (j = hostContentNodes.length - 1; j >= 0; j--) {
+				node = hostContentNodes[j];
+				if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (!node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
+					if (isNodeLocatedInSlot(node, slotName)) {
+						let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
+						checkSlotFallbackVisibility = true;
+						node["s-sn"] = node["s-sn"] || slotName;
+						if (relocateNodeData) {
+							relocateNodeData.$nodeToRelocate$["s-sh"] = childNode["s-hn"];
+							relocateNodeData.$slotRefNode$ = childNode;
+						} else {
+							node["s-sh"] = childNode["s-hn"];
+							relocateNodes.push({
+								$slotRefNode$: childNode,
+								$nodeToRelocate$: node
+							});
+						}
+						if (node["s-sr"]) relocateNodes.map((relocateNode) => {
+							if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node["s-sn"])) {
+								relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
+								if (relocateNodeData && !relocateNode.$slotRefNode$) relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
+							}
+						});
+					} else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) relocateNodes.push({ $nodeToRelocate$: node });
+				}
+			}
+		}
+		if (childNode.nodeType === NODE_TYPE.ElementNode) markSlotContentForRelocation(childNode);
+	}
+};
+/**
+* 'Nullify' any VDom `ref` callbacks on a VDom node or its children by calling
+* them with `null`. This signals that the DOM element corresponding to the VDom
+* node has been removed from the DOM.
+*
+* @param vNode a virtual DOM node
+*/
+const nullifyVNodeRefs = (vNode) => {
+	if (BUILD.vdomRef) {
+		if (vNode.$attrs$ && vNode.$attrs$.ref) refCallbacksToRemove.push(() => vNode.$attrs$.ref(null));
+		if (vNode.$children$) vNode.$children$.map(nullifyVNodeRefs);
+	}
+};
+/**
+* Queue a ref callback to be called with an element during rendering.
+* This ensures ref callbacks are called in the correct order.
+*
+* @param refCallback the ref callback function to queue
+* @param elm the element to pass to the callback
+*/
+const queueRefAttachment = (refCallback, elm) => {
+	if (BUILD.vdomRef) refCallbacksToAttach.push(() => refCallback(elm));
+};
+/**
+* Flush all queued ref callbacks in the correct order:
+* first all removal callbacks (with null), then all attachment callbacks (with elements).
+* This ensures that when elements are replaced/reordered, the ref is always left
+* pointing to the current element, not null.
+*/
+const flushQueuedRefCallbacks = () => {
+	if (BUILD.vdomRef) {
+		refCallbacksToRemove.forEach((cb) => cb());
+		refCallbacksToRemove.length = 0;
+		refCallbacksToAttach.forEach((cb) => cb());
+		refCallbacksToAttach.length = 0;
+	}
+};
+/**
+* Inserts a node before a reference node as a child of a specified parent node.
+* Additionally, adds parent elements' scope ids as class names to the new node.
+*
+* @param parent parent node
+* @param newNode element to be inserted
+* @param reference anchor element
+* @param isInitialLoad whether or not this is the first render
+* @returns inserted node
+*/
+const insertBefore = (parent, newNode, reference, isInitialLoad) => {
+	if (BUILD.slotRelocation) {
+		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);
+			parent.insertBefore(newNode, reference);
+			const { slotNode } = findSlotFromSlottedNode(newNode);
+			if (slotNode && !isInitialLoad) dispatchSlotChangeEvent(slotNode);
+			return newNode;
+		}
+	}
+	if (BUILD.slotRelocation && parent?.__insertBefore) return parent.__insertBefore(newNode, reference);
+	else return parent?.insertBefore(newNode, reference);
+};
+/**
+* Adds or removes a scoped class to the parent element of a slotted node.
+* This is used for styling slotted content (e.g. with `::scoped(...) {...}` selectors )
+* in `scoped: true` components.
+*
+* @param reference - Content Reference Node. Used to get the scope id of the parent component.
+* @param slotNode - the `<slot>` node to apply the class for
+* @param newParent - the slots' new parent element that requires the scoped class
+* @param oldParent - optionally, an old parent element that may no longer require the scoped class
+*/
+function addRemoveSlotScopedClass(reference, slotNode, newParent, oldParent) {
+	let slotScopeId;
+	if (reference && typeof slotNode["s-sn"] === "string" && !!slotNode["s-sr"] && reference.parentNode && reference.parentNode["s-sc"] && (slotScopeId = slotNode["s-si"] || reference.parentNode["s-sc"])) {
+		const scopeName = slotNode["s-sn"];
+		const hostName = slotNode["s-hn"];
+		newParent.classList?.add(slotScopeId + "-s");
+		if (oldParent && oldParent.classList?.contains(slotScopeId + "-s")) {
+			let child = (oldParent.__childNodes || oldParent.childNodes)[0];
+			let found = false;
+			while (child) {
+				if (child["s-sn"] !== scopeName && child["s-hn"] === hostName && !!child["s-sr"]) {
+					found = true;
+					break;
+				}
+				child = child.nextSibling;
+			}
+			if (!found) oldParent.classList.remove(slotScopeId + "-s");
+		}
+	}
+}
+/**
+* The main entry point for Stencil's virtual DOM-based rendering engine
+*
+* Given a {@link d.HostRef} container and some virtual DOM nodes, this
+* function will handle creating a virtual DOM tree with a single root, patching
+* the current virtual DOM tree onto an old one (if any), dealing with slot
+* relocation, and reflecting attributes.
+*
+* @param hostRef data needed to root and render the virtual DOM tree, such as
+* the DOM node into which it should be rendered.
+* @param renderFnResults the virtual DOM nodes to be rendered
+* @param isInitialLoad whether or not this is the first call after page load
+*/
+const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
+	const hostElm = hostRef.$hostElement$;
+	const cmpMeta = hostRef.$cmpMeta$;
+	const oldVNode = hostRef.$vnode$ || newVNode(null, null);
+	const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
+	hostTagName = hostElm.tagName;
+	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>.
+
+The render() function should look like this instead:
+
+render() {
+  // Do not return an array
+  return (
+    <Host>{content}</Host>
+  );
+}
+  `);
+	if (BUILD.reflect && cmpMeta.$attrsToReflect$) {
+		rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+		cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
+			if (BUILD.serializer && hostRef.$serializerValues$.has(propName)) rootVnode.$attrs$[attribute] = hostRef.$serializerValues$.get(propName);
+			else rootVnode.$attrs$[attribute] = hostElm[propName];
+		});
+	}
+	if (isInitialLoad && rootVnode.$attrs$) {
+		for (const key of Object.keys(rootVnode.$attrs$)) if (hostElm.hasAttribute(key) && ![
+			"key",
+			"ref",
+			"style",
+			"class"
+		].includes(key)) rootVnode.$attrs$[key] = hostElm[key];
+	}
+	rootVnode.$tag$ = null;
+	rootVnode.$flags$ |= VNODE_FLAGS.isHost;
+	hostRef.$vnode$ = rootVnode;
+	rootVnode.$elm$ = oldVNode.$elm$ = BUILD.shadowDom ? getShadowRoot(hostElm) || hostElm : hostElm;
+	if (BUILD.scoped || BUILD.shadowDom) scopeId = hostElm["s-sc"];
+	useNativeShadowDom = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && !(cmpMeta.$flags$ & CMP_FLAGS.shadowNeedsScopedCss);
+	if (BUILD.slotRelocation) {
+		contentRef = hostElm["s-cr"];
+		checkSlotFallbackVisibility = false;
+	}
+	patch(oldVNode, rootVnode, isInitialLoad);
+	if (BUILD.slotRelocation) {
+		plt.$flags$ |= PLATFORM_FLAGS.isTmpDisconnected;
+		if (checkSlotRelocate) {
+			markSlotContentForRelocation(rootVnode.$elm$);
+			carryContentWithRelocatedSlotRefs();
+			for (const relocateData of relocateNodes) {
+				const nodeToRelocate = relocateData.$nodeToRelocate$;
+				if (!nodeToRelocate["s-ol"] && win.document) {
+					const orgLocationNode = BUILD.isDebug || BUILD.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : win.document.createTextNode("");
+					orgLocationNode["s-nr"] = nodeToRelocate;
+					insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate, isInitialLoad);
+				}
+			}
+			for (const relocateData of relocateNodes) {
+				const nodeToRelocate = relocateData.$nodeToRelocate$;
+				const slotRefNode = relocateData.$slotRefNode$;
+				if (nodeToRelocate.nodeType === NODE_TYPE.ElementNode && isInitialLoad) nodeToRelocate["s-ih"] = !!nodeToRelocate.hidden;
+				if (slotRefNode) {
+					const parentNodeRef = slotRefNode.parentNode;
+					let insertBeforeNode = slotRefNode.nextSibling;
+					if (!BUILD.hydrateServerSide && insertBeforeNode && insertBeforeNode.nodeType === NODE_TYPE.ElementNode) {
+						let orgLocationNode = nodeToRelocate["s-ol"]?.previousSibling;
+						while (orgLocationNode) {
+							let refNode = orgLocationNode["s-nr"] ?? null;
+							if (refNode && refNode["s-sn"] === nodeToRelocate["s-sn"] && parentNodeRef === (refNode.__parentNode || refNode.parentNode)) {
+								refNode = refNode.nextSibling;
+								while (refNode === nodeToRelocate || refNode?.["s-sr"]) refNode = refNode?.nextSibling;
+								if (!refNode || !refNode["s-nr"]) {
+									insertBeforeNode = refNode;
+									break;
+								}
+							}
+							orgLocationNode = orgLocationNode.previousSibling;
+						}
+					}
+					const parent = nodeToRelocate.__parentNode || nodeToRelocate.parentNode;
+					const nextSibling = nodeToRelocate.__nextSibling || nodeToRelocate.nextSibling;
+					if (!insertBeforeNode && parentNodeRef !== parent || nextSibling !== insertBeforeNode) {
+						if (nodeToRelocate !== insertBeforeNode) {
+							insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode, isInitialLoad);
+							if (nodeToRelocate.nodeType === NODE_TYPE.CommentNode && nodeToRelocate.nodeValue.startsWith("s-nt-")) {
+								const textNode = win.document.createTextNode(nodeToRelocate.nodeValue.replace(/^s-nt-/, ""));
+								textNode["s-hn"] = nodeToRelocate["s-hn"];
+								textNode["s-sn"] = nodeToRelocate["s-sn"];
+								textNode["s-sh"] = nodeToRelocate["s-sh"];
+								textNode["s-sr"] = nodeToRelocate["s-sr"];
+								textNode["s-ol"] = nodeToRelocate["s-ol"];
+								textNode["s-ol"]["s-nr"] = textNode;
+								insertBefore(nodeToRelocate.parentNode, textNode, nodeToRelocate, isInitialLoad);
+								nodeToRelocate.parentNode.removeChild(nodeToRelocate);
+							}
+							if (nodeToRelocate.nodeType === NODE_TYPE.ElementNode && nodeToRelocate.tagName !== "SLOT-FB") nodeToRelocate.hidden = nodeToRelocate["s-ih"] ?? false;
+						}
+					}
+					if (nodeToRelocate && typeof slotRefNode["s-rf"] === "function") slotRefNode["s-rf"](slotRefNode);
+				} else if (nodeToRelocate.nodeType === NODE_TYPE.ElementNode) nodeToRelocate.hidden = true;
+			}
+		}
+		if (checkSlotFallbackVisibility) updateFallbackSlotVisibility(rootVnode.$elm$);
+		plt.$flags$ &= ~PLATFORM_FLAGS.isTmpDisconnected;
+		relocateNodes.length = 0;
+	}
+	if (BUILD.slotRelocation && !useNativeShadowDom && !(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && hostElm["s-cr"]) {
+		const children = rootVnode.$elm$.__childNodes || rootVnode.$elm$.childNodes;
+		for (const childNode of children) if (childNode["s-hn"] !== hostTagName && childNode["s-sh"] !== hostTagName) {
+			if (isInitialLoad && childNode["s-ih"] == null) childNode["s-ih"] = childNode.hidden ?? false;
+			if (childNode.nodeType === NODE_TYPE.ElementNode) childNode.hidden = true;
+			else if (childNode.nodeType === NODE_TYPE.TextNode && !!childNode.nodeValue.trim()) {
+				const textCommentNode = win.document.createComment("s-nt-" + childNode.nodeValue);
+				textCommentNode["s-sn"] = childNode["s-sn"];
+				insertBefore(childNode.parentNode, textCommentNode, childNode, isInitialLoad);
+				childNode.parentNode.removeChild(childNode);
+			}
+		}
+	}
+	contentRef = void 0;
+	flushQueuedRefCallbacks();
+};
+const slotReferenceDebugNode = (slotVNode) => win.document?.createComment(`<slot${slotVNode.$name$ ? " name=\"" + slotVNode.$name$ + "\"" : ""}> (host=${hostTagName.toLowerCase()})`);
+const originalLocationDebugNode = (nodeToRelocate) => win.document?.createComment(`org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate["s-hn"]})` : `[${nodeToRelocate.textContent}]`));
+//#endregion
+//#region src/runtime/update-component.ts
+/**
+* Get a promise that resolves once `hostRef`'s real `connectedCallback` has fired for the first time.
+*
+* @param hostRef the component's host reference
+* @returns a promise that resolves once the component's real `connectedCallback` has fired
+*/
+const ensureFirstConnectPromise = (hostRef) => {
+	if (!hostRef.$onFirstConnectPromise$) hostRef.$onFirstConnectPromise$ = new Promise((r) => hostRef.$onFirstConnectResolve$ = r);
+	return hostRef.$onFirstConnectPromise$;
+};
+const attachToAncestor = (hostRef, ancestorComponent) => {
+	if (BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
+		const index = ancestorComponent["s-p"].push(new Promise((r) => hostRef.$onRenderResolve$ = () => {
+			ancestorComponent["s-p"].splice(index - 1, 1);
+			r();
+		}));
+		if (ancestorComponent["s-pc"]) ancestorComponent["s-pc"].push(ensureFirstConnectPromise(hostRef));
+	}
+};
+const scheduleUpdate = (hostRef, isInitialLoad) => {
+	if (BUILD.updatable) hostRef.$flags$ |= HOST_FLAGS.isQueuedForUpdate;
+	if (BUILD.asyncLoading && hostRef.$flags$ & HOST_FLAGS.isWaitingForChildren) {
+		hostRef.$flags$ |= HOST_FLAGS.needsRerender;
+		return;
+	}
+	attachToAncestor(hostRef, hostRef.$ancestorComponent$);
+	const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
+	if (isInitialLoad) {
+		const pendingConnects = BUILD.asyncLoading ? hostRef.$hostElement$["s-pc"] : void 0;
+		if (pendingConnects && pendingConnects.length > 0) return Promise.all(pendingConnects).then(dispatch).catch(dispatch);
+		queueMicrotask(() => {
+			dispatch();
+		});
+		return;
+	}
+	return BUILD.taskQueue ? writeTask(dispatch) : dispatch();
+};
+/**
+* Dispatch initial-render and update lifecycle hooks, enqueuing calls to
+* component lifecycle methods like `componentWillLoad` as well as
+* {@link updateComponent}, which will kick off the virtual DOM re-render.
+*
+* @param hostRef a reference to a host DOM node
+* @param isInitialLoad whether we're on the initial load or not
+* @returns an empty Promise which is used to enqueue a series of operations for
+* the component
+*/
+const dispatchHooks = (hostRef, isInitialLoad) => {
+	const elm = hostRef.$hostElement$;
+	const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
+	const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
+	/**
+	* Given a user imports a component compiled with a `dist-custom-element`
+	* output target into a Stencil project compiled with a `dist` output target,
+	* then `instance` will be `undefined` as `hostRef` won't have a `lazyInstance`
+	* property. In this case, the component will fail to render in one of the
+	* subsequent functions.
+	*
+	* For this scenario to work the user needs to set the `externalRuntime` flag
+	* for the `dist-custom-element` component that is being imported into the `dist`
+	* Stencil project.
+	*/
+	if (!instance) {
+		if (BUILD.isDev) throw new Error(`Can't render <${elm.tagName.toLowerCase()} /> - compiled without externalRuntime: true. See https://stenciljs.com/docs/custom-elements#externalruntime`);
+		return;
+	}
+	let maybePromise;
+	if (isInitialLoad) {
+		if (BUILD.lazyLoad) {
+			if (BUILD.hostListener) {
+				hostRef.$flags$ |= HOST_FLAGS.isListenReady;
+				if (hostRef.$queuedListeners$) {
+					hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
+					hostRef.$queuedListeners$ = void 0;
+				}
+			}
+			if (hostRef.$fetchedCbList$.length) hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
+		}
+		if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillLoad");
+		maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
+	} else {
+		if (BUILD.updatable && hostRef.$queuedPropChanges$) {
+			const changes = hostRef.$queuedPropChanges$;
+			hostRef.$queuedPropChanges$ = void 0;
+			if (safeCall(instance, "componentShouldUpdate", changes, elm) === false) {
+				hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
+				return;
+			}
+		}
+		if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillUpdate");
+		maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
+	}
+	if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentWillRender");
+	maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender", void 0, elm));
+	endSchedule();
+	return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
+};
+/**
+* This function uses a Promise to implement a simple first-in, first-out queue
+* of functions to be called.
+*
+* The queue is ordered on the basis of the first argument. If it's
+* `undefined`, then nothing is on the queue yet, so the provided function can
+* be called synchronously (although note that this function may return a
+* `Promise`). The idea is that then the return value of that enqueueing
+* operation is kept around, so that if it was a `Promise` then subsequent
+* functions can be enqueued by calling this function again with that `Promise`
+* as the first argument.
+*
+* @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
+* @param fn a function to enqueue
+* @returns either a `Promise` or the return value of the provided function
+*/
+const enqueue = (maybePromise, fn) => {
+	if (isPromisey(maybePromise)) return maybePromise.then(fn).catch((err) => {
+		console.error(err);
+		fn();
+	});
+	const result = fn();
+	return isPromisey(result) ? result : void 0;
+};
+/**
+* Check that a value is a `Promise`. To check, we first see if the value is an
+* instance of the `Promise` global. In a few circumstances, in particular if
+* the global has been overwritten, this is could be misleading, so we also do
+* a little 'duck typing' check to see if the `.then` property of the value is
+* defined and a function.
+*
+* @param maybePromise it might be a promise!
+* @returns whether it is or not
+*/
+const isPromisey = (maybePromise) => maybePromise instanceof Promise || maybePromise && maybePromise.then && typeof maybePromise.then === "function";
+/**
+* Update a component given reference to its host elements and so on.
+*
+* @param hostRef an object containing references to the element's host node,
+* VDom nodes, and other metadata
+* @param instance a reference to the underlying host element where it will be
+* rendered
+* @param isInitialLoad whether or not this function is being called as part of
+* the first render cycle
+* @returns a `Promise` if the update is asynchronous, otherwise `void`
+*/
+const updateComponent = (hostRef, instance, isInitialLoad) => {
+	const elm = hostRef.$hostElement$;
+	const endUpdate = createTime("update", hostRef.$cmpMeta$.$tagName$);
+	const rc = elm["s-rc"];
+	if (BUILD.style && isInitialLoad) attachStyles(hostRef);
+	const endRender = createTime("render", hostRef.$cmpMeta$.$tagName$);
+	if (BUILD.isDev) hostRef.$flags$ |= HOST_FLAGS.devOnRender;
+	if (BUILD.hydrateServerSide) return callRender(hostRef, instance, elm, isInitialLoad).then(() => {
+		afterRender(hostRef, elm, rc, isInitialLoad, endRender, endUpdate);
+	});
+	callRender(hostRef, instance, elm, isInitialLoad);
+	afterRender(hostRef, elm, rc, isInitialLoad, endRender, endUpdate);
+};
+const afterRender = (hostRef, elm, rc, isInitialLoad, endRender, endUpdate) => {
+	if (BUILD.isDev) {
+		hostRef.$renderCount$ = hostRef.$renderCount$ === void 0 ? 1 : hostRef.$renderCount$ + 1;
+		hostRef.$flags$ &= ~HOST_FLAGS.devOnRender;
+	}
+	if (BUILD.hydrateServerSide) try {
+		serverSideConnected(elm);
+		if (isInitialLoad) {
+			if (hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.shadowDomEncapsulation) elm["s-en"] = "";
+			else if (hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.scopedCssEncapsulation) elm["s-en"] = "c";
+		}
+	} catch (e) {
+		consoleError(e, elm);
+	}
+	if (BUILD.asyncLoading && rc) {
+		rc.map((cb) => cb());
+		elm["s-rc"] = void 0;
+	}
+	endRender();
+	endUpdate();
+	if (BUILD.asyncLoading) {
+		const childrenPromises = elm["s-p"] ?? [];
+		const postUpdate = () => postUpdateComponent(hostRef);
+		if (childrenPromises.length === 0) postUpdate();
+		else {
+			Promise.all(childrenPromises).then(postUpdate).catch(postUpdate);
+			hostRef.$flags$ |= HOST_FLAGS.isWaitingForChildren;
+			childrenPromises.length = 0;
+		}
+	} else postUpdateComponent(hostRef);
+};
+let renderingRef = null;
+/**
+* Handle making the call to the VDom renderer with the proper context given
+* various build variables
+*
+* @param hostRef an object containing references to the element's host node,
+* VDom nodes, and other metadata
+* @param instance a reference to the underlying host element where it will be
+* rendered
+* @param elm the Host element for the component
+* @param isInitialLoad whether or not this function is being called as part of
+* @returns an empty promise
+*/
+const callRender = (hostRef, instance, elm, isInitialLoad) => {
+	const allRenderFn = !!BUILD.allRenderFn;
+	const lazyLoad = !!BUILD.lazyLoad;
+	const updatable = !!BUILD.updatable;
+	try {
+		renderingRef = instance;
+		/**
+		* minification optimization: `allRenderFn` is `true` if all components have a `render`
+		* method, so we can call the method immediately. If not, check before calling it.
+		*/
+		instance = allRenderFn ? instance.render() : instance.render && instance.render();
+		if (updatable) hostRef.$flags$ &= ~HOST_FLAGS.isQueuedForUpdate;
+		if (updatable || lazyLoad) hostRef.$flags$ |= HOST_FLAGS.hasRendered;
+		if (BUILD.hasRenderFn || BUILD.reflect) {
+			if (BUILD.vdomRender || BUILD.reflect) {
+				if (BUILD.hydrateServerSide) return Promise.resolve(instance).then((value) => renderVdom(hostRef, value, isInitialLoad));
+				else renderVdom(hostRef, instance, isInitialLoad);
+			} else {
+				const shadowRoot = elm.shadowRoot;
+				if (hostRef.$cmpMeta$.$flags$ & CMP_FLAGS.shadowDomEncapsulation) shadowRoot.textContent = instance;
+				else elm.textContent = instance;
+			}
+		}
+	} catch (e) {
+		consoleError(e, hostRef.$hostElement$);
+	}
+	renderingRef = null;
+	return null;
+};
+const getRenderingRef = () => renderingRef;
+const postUpdateComponent = (hostRef) => {
+	const tagName = hostRef.$cmpMeta$.$tagName$;
+	const elm = hostRef.$hostElement$;
+	const endPostUpdate = createTime("postUpdate", tagName);
+	const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
+	const ancestorComponent = hostRef.$ancestorComponent$;
+	if (BUILD.isDev) hostRef.$flags$ |= HOST_FLAGS.devOnRender;
+	safeCall(instance, "componentDidRender", void 0, elm);
+	if (BUILD.isDev) hostRef.$flags$ &= ~HOST_FLAGS.devOnRender;
+	if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentDidRender");
+	if (!(hostRef.$flags$ & HOST_FLAGS.hasLoadedComponent)) {
+		hostRef.$flags$ |= HOST_FLAGS.hasLoadedComponent;
+		if (BUILD.asyncLoading && BUILD.cssAnnotations) addHydratedFlag(elm);
+		if (BUILD.isDev) hostRef.$flags$ |= HOST_FLAGS.devOnDidLoad;
+		safeCall(instance, "componentDidLoad", void 0, elm);
+		if (BUILD.isDev) hostRef.$flags$ &= ~HOST_FLAGS.devOnDidLoad;
+		if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentDidLoad");
+		if (BUILD.propChangeCallback) hostRef.$flags$ |= HOST_FLAGS.isWatchReady;
+		endPostUpdate();
+		if (BUILD.asyncLoading) {
+			hostRef.$onReadyResolve$(elm);
+			if (!ancestorComponent) appDidLoad(tagName);
+		}
+	} else {
+		if (BUILD.isDev) hostRef.$flags$ |= HOST_FLAGS.devOnRender;
+		safeCall(instance, "componentDidUpdate", void 0, elm);
+		if (BUILD.isDev) hostRef.$flags$ &= ~HOST_FLAGS.devOnRender;
+		if (BUILD.lifecycleDOMEvents) emitLifecycleEvent(elm, "componentDidUpdate");
+		endPostUpdate();
+	}
+	if (BUILD.method && BUILD.lazyLoad) hostRef.$onInstanceResolve$(elm);
+	if (BUILD.asyncLoading) {
+		if (hostRef.$onRenderResolve$) {
+			hostRef.$onRenderResolve$();
+			hostRef.$onRenderResolve$ = void 0;
+		}
+		if (hostRef.$flags$ & HOST_FLAGS.needsRerender) nextTick(() => scheduleUpdate(hostRef, false));
+		hostRef.$flags$ &= ~(HOST_FLAGS.isWaitingForChildren | HOST_FLAGS.needsRerender);
+	}
+};
+const forceUpdate = (ref) => {
+	if (BUILD.updatable && (Build.isBrowser || Build.isTesting)) {
+		const hostRef = getHostRef(ref);
+		const isConnected = hostRef?.$hostElement$?.isConnected;
+		if (isConnected && (hostRef.$flags$ & (HOST_FLAGS.hasRendered | HOST_FLAGS.isQueuedForUpdate)) === HOST_FLAGS.hasRendered) scheduleUpdate(hostRef, false);
+		return isConnected;
+	}
+	return false;
+};
+const appDidLoad = (who) => {
+	if (BUILD.asyncQueue) plt.$flags$ |= PLATFORM_FLAGS.appLoaded;
+	nextTick(() => emitEvent(win, "appload", { detail: { namespace: "app" } }));
+	if (BUILD.hydrateClientSide) {
+		if (plt.$orgLocNodes$?.size) plt.$orgLocNodes$.clear();
+	}
+	if (BUILD.profile && performance.measure) performance.measure(`[Stencil] app initial load (by ${who})`, "st:app:start");
+};
+/**
+* Allows to safely call a method, e.g. `componentDidLoad`, on an instance,
+* e.g. custom element node. If a build figures out that e.g. no component
+* has a `componentDidLoad` method, the instance method gets removed from the
+* output bundle and this function returns `undefined`.
+* @param instance any object that may or may not contain methods
+* @param method method name
+* @param arg single arbitrary argument
+* @param elm the element which made the call
+* @returns result of method call if it exists, otherwise `undefined`
+*/
+const safeCall = (instance, method, arg, elm) => {
+	if (instance && instance[method]) try {
+		return instance[method](arg);
+	} catch (e) {
+		consoleError(e, elm);
+	}
+};
+/**
+* For debugging purposes as `BUILD.lifecycleDOMEvents` is `false` by default and will
+* get removed by the compiler. Used for timing events to see how long they take.
+* @param elm the target of the Event
+* @param lifecycleName name of the event
+*/
+const emitLifecycleEvent = (elm, lifecycleName) => {
+	if (BUILD.lifecycleDOMEvents) emitEvent(elm, "stencil_" + lifecycleName, {
+		bubbles: true,
+		composed: true,
+		detail: { namespace: "app" }
+	});
+};
+/**
+* Set the hydrated flag on a DOM element
+*
+* @param elm a reference to a DOM element
+* @returns undefined
+*/
+const addHydratedFlag = (elm) => BUILD.hydratedClass ? elm.classList.add(BUILD.hydratedSelectorName ?? "hydrated") : BUILD.hydratedAttribute ? elm.setAttribute(BUILD.hydratedSelectorName ?? "hydrated", "") : void 0;
+const serverSideConnected = (elm) => {
+	const children = elm.children;
+	if (children != null) for (let i = 0, ii = children.length; i < ii; i++) {
+		const childElm = children[i];
+		if (typeof childElm.connectedCallback === "function") childElm.connectedCallback();
+		serverSideConnected(childElm);
+	}
+};
+//#endregion
+//#region src/runtime/signals.ts
+/**
+* Duck-type check for Signal objects. Cross-bundle-safe (no instanceof).
+* @param v value to test
+* @returns whether `v` implements the SignalLike interface
+*/
+const isSignalLike = (v) => v !== null && typeof v === "object" && typeof v.peek === "function" && typeof v.subscribe === "function";
+//#endregion
+//#region src/runtime/vdom/h.ts
+/**
+* Production h() function based on Preact by
+* Jason Miller (@developit)
+* Licensed under the MIT License
+* https://github.com/developit/preact/blob/master/LICENSE
+*
+* Modified for Stencil's compiler and vdom
+*/
+const h = (nodeName, vnodeData, ...children) => {
+	if (typeof nodeName === "string") nodeName = transformTag(nodeName);
+	let child = null;
+	let key = null;
+	let slotName = null;
+	let simple = false;
+	let lastSimple = false;
+	const vNodeChildren = [];
+	const walk = (c) => {
+		for (let i = 0; i < c.length; i++) {
+			child = c[i];
+			if (Array.isArray(child)) walk(child);
+			else if (child != null && typeof child !== "boolean") {
+				if (BUILD.vdomSignals && isSignalLike(child)) {
+					const sigVNode = newVNode(null, String(child.peek()));
+					sigVNode.$signal$ = child;
+					vNodeChildren.push(sigVNode);
+					lastSimple = false;
+				} else {
+					if (simple = typeof nodeName !== "function" && !isComplexType(child)) child = String(child);
+					else if (typeof nodeName !== "function" && child.$flags$ === void 0) {
+						if (BUILD.isDev) consoleDevError(`vNode passed as children has unexpected type.
+  Make sure it's using the correct h() function.
+  Empty objects can also be the cause, look for JSX comments that became objects.`);
+						else consoleError("Invalid vNode child");
+						continue;
+					}
+					if (simple && lastSimple) vNodeChildren[vNodeChildren.length - 1].$text$ += child;
+					else vNodeChildren.push(simple ? newVNode(null, child) : child);
+					lastSimple = simple;
+				}
+			}
+		}
+	};
+	walk(children);
+	if (vnodeData) {
+		if (BUILD.isDev && nodeName === "input") validateInputProperties(vnodeData);
+		if (BUILD.vdomKey && vnodeData.key) key = vnodeData.key;
+		if (BUILD.slotRelocation && vnodeData.name) slotName = vnodeData.name;
+		if (BUILD.vdomClass) {
+			const classData = vnodeData.class;
+			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.vdomFunctional && typeof nodeName === "function") return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
+	const vnode = newVNode(nodeName, null);
+	vnode.$attrs$ = vnodeData;
+	if (vNodeChildren.length > 0) vnode.$children$ = vNodeChildren;
+	if (BUILD.vdomKey) vnode.$key$ = key;
+	if (BUILD.slotRelocation) vnode.$name$ = slotName;
+	return vnode;
+};
+/**
+* A utility function for creating a virtual DOM node from a tag and some
+* possible text content.
+*
+* @param tag the tag for this element
+* @param text possible text content for the node
+* @returns a newly-minted virtual DOM node
+*/
+const newVNode = (tag, text) => {
+	const vnode = {
+		$flags$: 0,
+		$tag$: tag,
+		$text$: text ?? null,
+		$elm$: null,
+		$children$: null
+	};
+	if (BUILD.vdomAttribute) vnode.$attrs$ = null;
+	if (BUILD.vdomKey) vnode.$key$ = null;
+	if (BUILD.slotRelocation) vnode.$name$ = null;
+	return vnode;
+};
+const Host = {};
+/**
+* Check whether a given node is a Host node or not
+*
+* @param node the virtual DOM node to check
+* @returns whether it's a Host node or not
+*/
+const isHost = (node) => node && node.$tag$ === Host;
+/**
+* Implementation of {@link d.FunctionalUtilities} for Stencil's VDom.
+*
+* Note that these functions convert from {@link d.VNode} to
+* {@link d.ChildNode} to give functional component developers a friendly
+* interface.
+*/
+const vdomFnUtils = {
+	forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
+	map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
+};
+/**
+* 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
+* @returns a converted child node
+*/
+const convertToPublic = (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
+* likely created as part of presenting a public API, so converting it back
+* involved making it 'private' again (hence, `convertToPrivate`).
+*
+* @param node the child node to convert
+* @returns a converted virtual DOM node
+*/
+const convertToPrivate = (node) => {
+	if (typeof node.vtag === "function") {
+		const vnodeData = { ...node.vattrs };
+		if (node.vkey) vnodeData.key = node.vkey;
+		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;
+	return vnode;
+};
+/**
+* Validates the ordering of attributes on an input element
+*
+* @param inputElm the element to validate
+*/
+const validateInputProperties = (inputElm) => {
+	const props = Object.keys(inputElm);
+	const value = props.indexOf("value");
+	if (value === -1) return;
+	const typeIndex = props.indexOf("type");
+	const minIndex = props.indexOf("min");
+	const maxIndex = props.indexOf("max");
+	const stepIndex = props.indexOf("step");
+	if (value < typeIndex || value < minIndex || value < maxIndex || value < stepIndex) consoleDevWarn(`The "value" prop of <input> should be set after "min", "max", "type" and "step"`);
+};
+//#endregion
+//#region src/runtime/mode.ts
+const setMode = (handler) => modeResolutionChain.push(handler);
+const getMode = (ref) => getHostRef(ref)?.$modeName$;
+//#endregion
+//#region src/runtime/mixin.ts
+const baseClass = BUILD.lazyLoad ? class {} : globalThis.HTMLElement || class {};
+function Mixin(...mixins) {
+	return mixins.reduceRight((acc, mixin) => mixin(acc), baseClass);
+}
+//#endregion
+//#region src/runtime/reactive-controller.ts
+const ReactiveControllerHost = (Base) => class ReactiveControllerHostMixin extends Base {
+	controllers = /* @__PURE__ */ new Set();
+	#connected = false;
+	#updateCompleteResolvers = [];
+	addController(controller) {
+		this.controllers.add(controller);
+		if (this.#connected) controller.hostConnected?.();
+	}
+	removeController(controller) {
+		this.controllers.delete(controller);
+	}
+	requestUpdate() {
+		forceUpdate(this);
+	}
+	get updateComplete() {
+		return new Promise((resolve) => this.#updateCompleteResolvers.push(resolve));
+	}
+	connectedCallback() {
+		super.connectedCallback?.();
+		this.#connected = true;
+		const el = getElement(this);
+		if (el && el !== this) {
+			el.addController = (controller) => this.addController(controller);
+			el.removeController = (controller) => this.removeController(controller);
+			el.requestUpdate = () => this.requestUpdate();
+			Object.defineProperty(el, "updateComplete", {
+				configurable: true,
+				get: () => this.updateComplete
+			});
+		}
+		this.controllers.forEach((c) => c.hostConnected?.());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback?.();
+		this.#connected = false;
+		this.controllers.forEach((c) => c.hostDisconnected?.());
+	}
+	async componentWillLoad() {
+		await super.componentWillLoad?.();
+		await Promise.all([...this.controllers].map((c) => c.hostWillLoad?.()));
+	}
+	componentDidLoad() {
+		super.componentDidLoad?.();
+		this.controllers.forEach((c) => c.hostDidLoad?.());
+	}
+	async componentWillRender() {
+		await super.componentWillRender?.();
+		await Promise.all([...this.controllers].map((c) => c.hostWillRender?.()));
+	}
+	componentDidRender() {
+		super.componentDidRender?.();
+		this.controllers.forEach((c) => c.hostDidRender?.());
+		const resolvers = this.#updateCompleteResolvers;
+		this.#updateCompleteResolvers = [];
+		resolvers.forEach((resolve) => resolve(true));
+	}
+	async componentWillUpdate() {
+		await super.componentWillUpdate?.();
+		await Promise.all([...this.controllers].map((c) => c.hostWillUpdate?.()));
+	}
+	componentDidUpdate() {
+		super.componentDidUpdate?.();
+		this.controllers.forEach((c) => c.hostDidUpdate?.());
+	}
+};
+//#endregion
+//#region src/runtime/render.ts
+/**
+* A WeakMap to persist HostRef objects across multiple render() calls to the
+* same container. This enables VNode diffing on re-renders - without it, each
+* call creates a fresh HostRef with no previous VNode, causing renderVdom to
+* replace the entire DOM subtree instead of patching only what changed.
+*/
+const hostRefCache = /* @__PURE__ */ new WeakMap();
+/**
+* Method to render a virtual DOM tree to a container element.
+*
+* Supports efficient re-renders: calling `render()` again on the same container
+* will diff the new VNode tree against the previous one and only update what changed,
+* preserving existing DOM elements and their state.
+*
+* @example
+* ```tsx
+* import { render } from '@stencil/core';
+*
+* const vnode = (
+*   <div>
+*     <h1>Hello, world!</h1>
+*   </div>
+* );
+* render(vnode, document.body);
+* ```
+*
+* @param vnode - The virtual DOM tree to render
+* @param container - The container element to render the virtual DOM tree to
+*/
+function render(vnode, container) {
+	let ref = hostRefCache.get(container);
+	if (!ref) {
+		ref = {
+			$flags$: 0,
+			$cmpMeta$: {
+				$flags$: 0,
+				$tagName$: container.tagName
+			},
+			$hostElement$: container
+		};
+		hostRefCache.set(container, ref);
+	}
+	renderVdom(ref, vnode);
+}
+//#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 ?? {};
+	if (key !== void 0 && !("key" in rest)) rest.key = key;
+	const attrs = hasKeys(rest) ? rest : null;
+	if (children !== void 0) return Array.isArray(children) ? h(type, attrs, ...children) : h(type, attrs, children);
+	return h(type, attrs);
+}
+/**
+* @alias
+*/
+const jsxs = jsx;
+/**
+* @alias
+*/
+const jsxDEV = jsx;
+function hasKeys(obj) {
+	for (const _ in obj) return true;
+	return false;
+}
+//#endregion
+export { setErrorHandler as C, HYDRATED_CSS as S, getAssetPath as _, transformTag as a, writeTask as b, Mixin as c, Host as d, h as f, getShadowRoot as g, getElement as h, setTagTransformer as i, getMode as l, getRenderingRef as m, jsxDEV as n, render as o, forceUpdate as p, jsxs as r, ReactiveControllerHost as s, jsx as t, setMode as u, setAssetPath as v, Build as w, setPlatformHelpers as x, readTask as y };