@stencil/core 4.43.2 → 5.0.0-next.0

package/dist/runtime/index.js

@@ -0,0 +1,4819 @@
+import { BUILD, NAMESPACE } from "./app-data/index.js";
+import { globalStyles } from "./app-globals/index.js";
+
+//#region src/client/client-build.ts
+const Build = {
+	isDev: BUILD.isDev ? true : false,
+	isBrowser: true,
+	isServer: false,
+	isTesting: BUILD.isTesting ? true : false
+};
+
+//#endregion
+//#region src/utils/constants.ts
+const MF_String = 1;
+const MF_Number = 2;
+const MF_Boolean = 4;
+const MF_Any = 8;
+const MF_Unknown = 16;
+const MF_State = 32;
+const MEMBER_FLAGS = {
+	String: MF_String,
+	Number: MF_Number,
+	Boolean: MF_Boolean,
+	Any: MF_Any,
+	Unknown: MF_Unknown,
+	State: MF_State,
+	Method: 64,
+	Event: 128,
+	Element: 256,
+	ReflectAttr: 512,
+	Mutable: 1024,
+	Getter: 2048,
+	Setter: 4096,
+	Prop: 31,
+	HasAttribute: 31,
+	PropLike: 63
+};
+const WATCH_FLAGS = { Immediate: 1 };
+const EVENT_FLAGS = {
+	Cancellable: 1,
+	Composed: 2,
+	Bubbles: 4
+};
+const LISTENER_FLAGS = {
+	Passive: 1,
+	Capture: 2,
+	TargetDocument: 4,
+	TargetWindow: 8,
+	TargetBody: 16,
+	TargetParent: 32
+};
+const HOST_FLAGS = {
+	hasConnected: 1,
+	hasRendered: 2,
+	isWaitingForChildren: 4,
+	isConstructingInstance: 8,
+	isQueuedForUpdate: 16,
+	hasInitializedComponent: 32,
+	hasLoadedComponent: 64,
+	isWatchReady: 128,
+	isListenReady: 256,
+	needsRerender: 512,
+	devOnRender: 1024,
+	devOnDidLoad: 2048
+};
+const CF_scopedCssEncapsulation = 2;
+const CF_needsShadowDomShim = 8;
+/**
+* A set of flags used for bitwise calculations against {@link ComponentRuntimeMeta#$flags$}.
+*
+* These flags should only be used in conjunction with {@link ComponentRuntimeMeta#$flags$}.
+* They should _not_ be used for calculations against other fields/numbers
+*/
+const CMP_FLAGS = {
+	shadowDomEncapsulation: 1,
+	scopedCssEncapsulation: CF_scopedCssEncapsulation,
+	hasSlotRelocation: 4,
+	needsShadowDomShim: CF_needsShadowDomShim,
+	shadowDelegatesFocus: 16,
+	hasMode: 32,
+	needsScopedEncapsulation: CF_scopedCssEncapsulation | CF_needsShadowDomShim,
+	formAssociated: 64,
+	shadowNeedsScopedCss: 128,
+	hasSlot: 256,
+	hasModernPropertyDecls: 512,
+	shadowSlotAssignmentManual: 1024
+};
+/**
+* Namespaces
+*/
+const SVG_NS = "http://www.w3.org/2000/svg";
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+/**
+* DOM Node types
+*
+* See https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+*
+* Note: this is a duplicate of the `NODE_TYPES` enum in mock-doc, it's
+* copied over here so that we do not need to introduce a dependency on the
+* mock-doc bundle in the runtime. See
+* https://github.com/stenciljs/core/pull/5705 for more details.
+*/
+const NODE_TYPES = {
+	ELEMENT_NODE: 1,
+	ATTRIBUTE_NODE: 2,
+	TEXT_NODE: 3,
+	CDATA_SECTION_NODE: 4,
+	ENTITY_REFERENCE_NODE: 5,
+	ENTITY_NODE: 6,
+	PROCESSING_INSTRUCTION_NODE: 7,
+	COMMENT_NODE: 8,
+	DOCUMENT_NODE: 9,
+	DOCUMENT_TYPE_NODE: 10,
+	DOCUMENT_FRAGMENT_NODE: 11,
+	NOTATION_NODE: 12
+};
+/**
+* Represents a primitive type.
+* Described in https://w3c.github.io/webdriver-bidi/#type-script-PrimitiveProtocolValue.
+*/
+const PrimitiveType = {
+	Undefined: "undefined",
+	Null: "null",
+	String: "string",
+	Number: "number",
+	SpecialNumber: "number",
+	Boolean: "boolean",
+	BigInt: "bigint"
+};
+/**
+* Represents a non-primitive type.
+* Described in https://w3c.github.io/webdriver-bidi/#type-script-RemoteValue.
+* @deprecated will be removed in v5. Use `@AttrDeserialize()` / `@PropDeserialize()` decorators instead.
+*/
+const NonPrimitiveType = {
+	Array: "array",
+	Date: "date",
+	Map: "map",
+	Object: "object",
+	RegularExpression: "regexp",
+	Set: "set",
+	Channel: "channel",
+	Symbol: "symbol"
+};
+/**  @deprecated will be removed in v5. Use `@AttrDeserialize()` / `@PropDeserialize()` decorators instead. */
+const TYPE_CONSTANT = "type";
+/**  @deprecated will be removed in v5. Use `@AttrDeserialize()` / `@PropDeserialize()` decorators instead. */
+const VALUE_CONSTANT = "value";
+/**  @deprecated will be removed in v5. Use `@AttrDeserialize()` / `@PropDeserialize()` decorators instead. */
+const SERIALIZED_PREFIX = "serialized:";
+
+//#endregion
+//#region src/utils/get-prop-descriptor.ts
+/**
+* Walks up a prototype chain to find a property descriptor.
+* Stops before reaching native DOM prototypes (HTMLElement, etc.) to avoid
+* treating native properties like `hidden` as component-defined getters.
+* @param obj - The object to search on.
+* @param memberName - The name of the member to find.
+* @param getOnly - If true, only returns descriptors with a getter (i.e. ignores properties that are only fields or have setters without getters).
+* @returns The property descriptor if found, otherwise undefined.
+*/
+function getPropertyDescriptor(obj, memberName, getOnly) {
+	const stopAt = typeof HTMLElement !== "undefined" ? HTMLElement.prototype : null;
+	while (obj && obj !== stopAt) {
+		const desc = Object.getOwnPropertyDescriptor(obj, memberName);
+		if (desc && (!getOnly || desc.get)) return desc;
+		obj = Object.getPrototypeOf(obj);
+	}
+}
+
+//#endregion
+//#region src/utils/es2022-rewire-class-members.ts
+/**
+* - Re-wires component prototype `get` / `set` with instance `@State` / `@Prop` decorated fields.
+* - Makes sure the initial value from the `Element` is synced to the instance `@Prop` decorated fields.
+*
+* Background:
+* During component init, Stencil loops through any `@Prop()` or `@State()` decorated properties
+* and sets up getters and setters for each (within `src/runtime/proxy-component.ts`) on a component prototype.
+*
+* These accessors sync-up class instances with their `Element` and controls re-renders.
+* With modern JS, compiled classes (e.g. `target: 'es2022'`) compiled Stencil components went from:
+*
+* ```ts
+* class MyComponent {
+*   constructor() {
+*     this.prop1 = 'value1';
+*   }
+* }
+* ```
+* To:
+* ```ts
+* class MyComponent {
+*  prop1 = 'value2';
+*  // ^^ These override the accessors originally set on the prototype
+* }
+* ```
+*
+* @param instance - class instance to re-wire
+* @param hostRef - component reference meta
+*/
+const reWireGetterSetter = (instance, hostRef) => {
+	const cmpMeta = hostRef.$cmpMeta$;
+	Object.entries(cmpMeta.$members$ ?? {}).map(([memberName, [memberFlags]]) => {
+		if ((BUILD.state || BUILD.prop) && (memberFlags & MEMBER_FLAGS.Prop || memberFlags & MEMBER_FLAGS.State)) {
+			const ogValue = instance[memberName];
+			const ogDescriptor = getPropertyDescriptor(Object.getPrototypeOf(instance), memberName, true) || Object.getOwnPropertyDescriptor(instance, memberName);
+			if (ogDescriptor) Object.defineProperty(instance, memberName, {
+				get() {
+					return ogDescriptor.get.call(this);
+				},
+				set(newValue) {
+					ogDescriptor.set.call(this, newValue);
+				},
+				configurable: true,
+				enumerable: true
+			});
+			if (hostRef.$instanceValues$.has(memberName)) instance[memberName] = hostRef.$instanceValues$.get(memberName);
+			else if (ogValue !== void 0) instance[memberName] = ogValue;
+		}
+	});
+};
+
+//#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.__stencil__getHostRef) return ref.__stencil__getHostRef();
+};
+/**
+* Register a host element for a Stencil component, setting up various metadata
+* and callbacks based on {@link BUILD} flags as well as the component's runtime
+* metadata.
+*
+* @param hostElement the host element to register
+* @param cmpMeta runtime metadata for that component
+* @returns a reference to the host ref WeakMap
+*/
+const registerHost = (hostElement, cmpMeta) => {
+	const hostRef = {
+		$flags$: 0,
+		$hostElement$: hostElement,
+		$cmpMeta$: cmpMeta,
+		$instanceValues$: /* @__PURE__ */ new Map(),
+		$serializerValues$: /* @__PURE__ */ new Map()
+	};
+	if (BUILD.isDev) hostRef.$renderCount$ = 0;
+	if (BUILD.method && BUILD.lazyLoad) hostRef.$onInstancePromise$ = new Promise((r) => hostRef.$onInstanceResolve$ = r);
+	if (BUILD.asyncLoading) {
+		hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
+		hostElement["s-p"] = [];
+		hostElement["s-rc"] = [];
+	}
+	if (BUILD.lazyLoad) hostRef.$fetchedCbList$ = [];
+	const ref = hostRef;
+	hostElement.__stencil__getHostRef = () => ref;
+	if (!BUILD.lazyLoad && cmpMeta.$flags$ & CMP_FLAGS.hasModernPropertyDecls && (BUILD.state || BUILD.prop)) reWireGetterSetter(hostElement, hostRef);
+	return ref;
+};
+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);
+
+//#endregion
+//#region src/client/client-load-module.ts
+const cmpModules = /* @__PURE__ */ new Map();
+/**
+* We need to separate out this prefix so that Esbuild doesn't try to resolve
+* the below, but instead retains a dynamic `import()` statement in the
+* emitted code.
+*
+* See here for details https://esbuild.github.io/api/#non-analyzable-imports
+*
+* We need to do this in order to prevent Esbuild from analyzing / transforming
+* the input. However some _other_ bundlers will _not_ work with such an import
+* if it _lacks_ a leading `"./"`, so we thus we have to do a little dance
+* where here in the source code it must be like this, so that an undesirable
+* transformation that Esbuild would otherwise carry out doesn't occur, but we
+* actually need to then manually edit the bundled Esbuild code later on to fix
+* that. We do this with plugins in the Esbuild and Rollup bundles which
+* include this file.
+*/
+const MODULE_IMPORT_PREFIX = "./";
+const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
+	const exportName = cmpMeta.$tagName$.replace(/-/g, "_");
+	const bundleId = cmpMeta.$lazyBundleId$;
+	if (BUILD.isDev && typeof bundleId !== "string") {
+		consoleDevError(`Trying to lazily load component <${cmpMeta.$tagName$}> with style mode "${hostRef.$modeName$}", but it does not exist.`);
+		return;
+	} else if (!bundleId) return;
+	const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;
+	if (module) return module[exportName];
+	/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+	return import(
+		/* @vite-ignore */
+		/* webpackInclude: /\.entry\.js$/ */
+		/* webpackExclude: /\.system\.entry\.js$/ */
+		/* webpackMode: "lazy" */
+		`${MODULE_IMPORT_PREFIX}${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? "?s-hmr=" + hmrVersionId : ""}`
+).then((importedModule) => {
+		if (!BUILD.hotModuleReplacement) cmpModules.set(bundleId, importedModule);
+		return importedModule[exportName];
+	}, (e) => {
+		consoleError(e, hostRef.$hostElement$);
+	});
+};
+
+//#endregion
+//#region src/client/client-style.ts
+const styles = /* @__PURE__ */ new Map();
+const modeResolutionChain = [];
+const needsScopedSSR = () => false;
+
+//#endregion
+//#region src/runtime/runtime-constants.ts
+/**
+* Bit flags for recording various properties of VDom nodes
+*/
+const VNODE_FLAGS = {
+	isSlotReference: 1,
+	isSlotFallback: 2,
+	isHost: 4
+};
+const PROXY_FLAGS = {
+	isElementConstructor: 1,
+	proxyState: 2
+};
+const PF_appLoaded = 2;
+const PF_queueSync = 4;
+const PLATFORM_FLAGS = {
+	isTmpDisconnected: 1,
+	appLoaded: PF_appLoaded,
+	queueSync: PF_queueSync,
+	queueMask: PF_appLoaded | PF_queueSync
+};
+/**
+* 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 CONTENT_REF_ID = "r";
+const ORG_LOCATION_ID = "o";
+const SLOT_NODE_ID = "s";
+const TEXT_NODE_ID = "t";
+const COMMENT_NODE_ID = "c";
+const HYDRATE_ID = "s-id";
+const HYDRATED_STYLE_ID = "sty-id";
+const HYDRATE_CHILD_ID = "c-id";
+const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
+const STENCIL_DOC_DATA = "_stencilDocData";
+const DEFAULT_DOC_DATA = {
+	hostIds: 0,
+	rootLevelIds: 0,
+	staticComponents: /* @__PURE__ */ new Set()
+};
+/**
+* Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
+*
+* Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
+* support as of Stencil v4.
+*/
+const SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
+const XLINK_NS = "http://www.w3.org/1999/xlink";
+const FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
+	"formAssociatedCallback",
+	"formResetCallback",
+	"formDisabledCallback",
+	"formStateRestoreCallback"
+];
+
+//#endregion
+//#region src/client/client-window.ts
+const win = typeof window !== "undefined" ? window : {};
+const H = win.HTMLElement || class {};
+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 supportsShadow = BUILD.shadowDom;
+const supportsListenerOptions = /* @__PURE__ */ (() => {
+	let supportsListenerOptions = false;
+	try {
+		win.document?.addEventListener("e", null, Object.defineProperty({}, "passive", { get() {
+			supportsListenerOptions = true;
+		} }));
+	} catch (e) {}
+	return supportsListenerOptions;
+})();
+const promiseResolve = (v) => Promise.resolve(v);
+const supportsConstructableStylesheets = BUILD.constructableCSS ? /* @__PURE__ */ (() => {
+	try {
+		if (!win.document.adoptedStyleSheets) return false;
+		new CSSStyleSheet();
+		return typeof new CSSStyleSheet().replaceSync === "function";
+	} catch (e) {}
+	return false;
+})() : false;
+const supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ? !!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 queueTask = (queue, write) => (cb) => {
+	queue.push(cb);
+	if (!queuePending) {
+		queuePending = true;
+		if (write && plt.$flags$ & PLATFORM_FLAGS.queueSync) nextTick(flush);
+		else plt.raf(flush);
+	}
+};
+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) plt.raf(flush);
+		else queueCongestion = 0;
+	} else {
+		consume(queueDomWrites);
+		if (queuePending = queueDomReads.length > 0) plt.raf(flush);
+	}
+};
+const nextTick = (cb) => promiseResolve().then(cb);
+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/utils/style.ts
+/**
+* If (1) styles is not empty string, and (2) constructable stylesheets are supported,
+* then make a stylesheet.
+*
+* @param styles - The styles to add to the stylesheet. If empty string, then no stylesheet is returned.
+* @returns A stylesheet if it can be created, otherwise undefined.
+*/
+function createStyleSheetIfNeededAndSupported(styles) {
+	if (!styles || !supportsConstructableStylesheets) return void 0;
+	const sheet = new CSSStyleSheet();
+	sheet.replaceSync(styles);
+	return sheet;
+}
+
+//#endregion
+//#region src/utils/shadow-root.ts
+let globalStyleSheet;
+const GLOBAL_STYLE_ID = "sc-global";
+function createShadowRoot(cmpMeta) {
+	const opts = { mode: "open" };
+	if (BUILD.shadowDelegatesFocus) opts.delegatesFocus = !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDelegatesFocus);
+	if (BUILD.shadowSlotAssignmentManual) {
+		if (!!(cmpMeta.$flags$ & CMP_FLAGS.shadowSlotAssignmentManual)) opts.slotAssignment = "manual";
+	}
+	const shadowRoot = this.attachShadow(opts);
+	if (globalStyleSheet === void 0) globalStyleSheet = createStyleSheetIfNeededAndSupported(globalStyles) ?? null;
+	if (globalStyleSheet) if (supportsMutableAdoptedStyleSheets) shadowRoot.adoptedStyleSheets.push(globalStyleSheet);
+	else shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, globalStyleSheet];
+	else if (globalStyles && !supportsConstructableStylesheets) {
+		const styleElm = document.createElement("style");
+		styleElm.innerHTML = globalStyles;
+		if (BUILD.hotModuleReplacement) styleElm.setAttribute(HYDRATED_STYLE_ID, GLOBAL_STYLE_ID);
+		shadowRoot.prepend(styleElm);
+	}
+}
+
+//#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 'experimentalSlotFixes' 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(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 (nodeToRelocate["s-sn"] === slotName) return true;
+	return slotName === "";
+};
+/**
+* Creates an empty text node to act as a forwarding address to a slotted node:
+* 1) When non-shadow components re-render, they need a place to temporarily put 'lightDOM' elements.
+* 2) Patched dom methods and accessors use this node to calculate what 'lightDOM' nodes are in the host.
+*
+* @param newChild a node that's going to be added to the component
+* @param slotNode the slot node that the node will be added to
+* @param prepend move the slotted location node to the beginning of the host
+* @param position an ordered position to add the ref node which mirrors the lightDom nodes' order. Used during SSR hydration
+*  (the order of the slot location nodes determines the order of the slotted nodes in our patched accessors)
+*/
+const addSlotRelocateNode = (newChild, slotNode, prepend, position) => {
+	if (newChild["s-ol"] && newChild["s-ol"].isConnected) return;
+	const slottedNodeLocation = document.createTextNode("");
+	slottedNodeLocation["s-nr"] = newChild;
+	if (!slotNode["s-cr"] || !slotNode["s-cr"].parentNode) return;
+	const parent = slotNode["s-cr"].parentNode;
+	const appendMethod = prepend ? internalCall(parent, "prepend") : internalCall(parent, "appendChild");
+	if (BUILD.hydrateClientSide && typeof position !== "undefined") {
+		slottedNodeLocation["s-oo"] = position;
+		const childNodes = internalCall(parent, "childNodes");
+		const slotRelocateNodes = [slottedNodeLocation];
+		childNodes.forEach((n) => {
+			if (n["s-nr"]) slotRelocateNodes.push(n);
+		});
+		slotRelocateNodes.sort((a, b) => {
+			if (!a["s-oo"] || a["s-oo"] < (b["s-oo"] || 0)) return -1;
+			else if (!b["s-oo"] || b["s-oo"] < a["s-oo"]) return 1;
+			return 0;
+		});
+		slotRelocateNodes.forEach((n) => appendMethod.call(parent, n));
+	} else appendMethod.call(parent, slottedNodeLocation);
+	newChild["s-ol"] = slottedNodeLocation;
+	newChild["s-sh"] = slotNode["s-hn"];
+};
+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) console.error(`
+          Flattening is not supported for Stencil non-shadow slots.
+          You can use \`.childNodes\` to nested slot fallback content.
+          If you have a particular use case, please open an issue on the Stencil repo.
+        `);
+		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.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
+const patchPseudoShadowDom = (hostElementPrototype) => {
+	patchCloneNode(hostElementPrototype);
+	patchSlotAppendChild(hostElementPrototype);
+	patchSlotAppend(hostElementPrototype);
+	patchSlotPrepend(hostElementPrototype);
+	patchSlotInsertAdjacentElement(hostElementPrototype);
+	patchSlotInsertAdjacentHTML(hostElementPrototype);
+	patchSlotInsertAdjacentText(hostElementPrototype);
+	patchInsertBefore(hostElementPrototype);
+	patchTextContent(hostElementPrototype);
+	patchChildSlotNodes(hostElementPrototype);
+	patchSlotRemoveChild(hostElementPrototype);
+};
+/**
+* Patches the `cloneNode` method on a `scoped` Stencil component.
+*
+* @param HostElementPrototype The Stencil component to be patched
+*/
+const patchCloneNode = (HostElementPrototype) => {
+	if (HostElementPrototype.__cloneNode) return;
+	const orgCloneNode = HostElementPrototype.__cloneNode = HostElementPrototype.cloneNode;
+	HostElementPrototype.cloneNode = function(deep) {
+		const srcNode = this;
+		const isShadowDom = BUILD.shadowDom ? srcNode.shadowRoot && supportsShadow : false;
+		const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);
+		if (BUILD.slot && !isShadowDom && deep) {
+			let i = 0;
+			let slotted, nonStencilNode;
+			const stencilPrivates = [
+				"s-id",
+				"s-cr",
+				"s-lr",
+				"s-rc",
+				"s-sc",
+				"s-p",
+				"s-cn",
+				"s-sr",
+				"s-sn",
+				"s-hn",
+				"s-ol",
+				"s-nr",
+				"s-si",
+				"s-rf",
+				"s-scs"
+			];
+			const childNodes = this.__childNodes || this.childNodes;
+			for (; i < childNodes.length; i++) {
+				slotted = childNodes[i]["s-nr"];
+				nonStencilNode = stencilPrivates.every((privateField) => !childNodes[i][privateField]);
+				if (slotted) if (BUILD.appendChildSlotFix && clonedNode.__appendChild) clonedNode.__appendChild(slotted.cloneNode(true));
+				else clonedNode.appendChild(slotted.cloneNode(true));
+				if (nonStencilNode) clonedNode.appendChild(childNodes[i].cloneNode(true));
+			}
+		}
+		return clonedNode;
+	};
+};
+/**
+* Patches the `appendChild` method on a `scoped` Stencil component.
+* The patch will attempt to find a slot with the same name as the node being appended
+* and insert it into the slot reference if found. Otherwise, it falls-back to the original
+* `appendChild` method.
+*
+* @param HostElementPrototype The Stencil component to be patched
+*/
+const patchSlotAppendChild = (HostElementPrototype) => {
+	if (HostElementPrototype.__appendChild) return;
+	HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
+	HostElementPrototype.appendChild = function(newChild) {
+		const { slotName, slotNode } = findSlotFromSlottedNode(newChild, this);
+		if (slotNode) {
+			addSlotRelocateNode(newChild, slotNode);
+			const slotChildNodes = getSlotChildSiblings(slotNode, slotName);
+			const appendAfter = slotChildNodes[slotChildNodes.length - 1];
+			const insertedNode = internalCall(internalCall(appendAfter, "parentNode"), "insertBefore")(newChild, appendAfter.nextSibling);
+			dispatchSlotChangeEvent(slotNode);
+			updateFallbackSlotVisibility(this);
+			return insertedNode;
+		}
+		return this.__appendChild(newChild);
+	};
+};
+/**
+* Patches the `removeChild` method on a `scoped` Stencil component.
+* This patch attempts to remove the specified node from a slot reference
+* if the slot exists. Otherwise, it falls-back to the original `removeChild` method.
+*
+* @param ElementPrototype The Stencil component to be patched
+*/
+const patchSlotRemoveChild = (ElementPrototype) => {
+	if (ElementPrototype.__removeChild) return;
+	ElementPrototype.__removeChild = ElementPrototype.removeChild;
+	ElementPrototype.removeChild = function(toRemove) {
+		if (toRemove && typeof toRemove["s-sn"] !== "undefined") {
+			if (getHostSlotNodes(this.__childNodes || this.childNodes, this.tagName, toRemove["s-sn"]) && toRemove.isConnected) {
+				toRemove.remove();
+				updateFallbackSlotVisibility(this);
+				return;
+			}
+		}
+		return this.__removeChild(toRemove);
+	};
+};
+/**
+* Patches the `prepend` method for a slotted node inside a scoped component.
+*
+* @param HostElementPrototype the `Element` to be patched
+*/
+const patchSlotPrepend = (HostElementPrototype) => {
+	if (HostElementPrototype.__prepend) return;
+	HostElementPrototype.__prepend = HostElementPrototype.prepend;
+	HostElementPrototype.prepend = function(...newChildren) {
+		newChildren.forEach((newChild) => {
+			if (typeof newChild === "string") newChild = this.ownerDocument.createTextNode(newChild);
+			const slotName = (newChild["s-sn"] = getSlotName(newChild)) || "";
+			const slotNode = getHostSlotNodes(internalCall(this, "childNodes"), this.tagName, slotName)[0];
+			if (slotNode) {
+				addSlotRelocateNode(newChild, slotNode, true);
+				const appendAfter = getSlotChildSiblings(slotNode, slotName)[0];
+				const toReturn = internalCall(internalCall(appendAfter, "parentNode"), "insertBefore")(newChild, internalCall(appendAfter, "nextSibling"));
+				dispatchSlotChangeEvent(slotNode);
+				return toReturn;
+			}
+			if (newChild.nodeType === 1 && !!newChild.getAttribute("slot")) newChild.hidden = true;
+			return HostElementPrototype.__prepend(newChild);
+		});
+	};
+};
+/**
+* Patches the `append` method for a slotted node inside a scoped component. The patched method uses
+* `appendChild` under-the-hood while creating text nodes for any new children that passed as bare strings.
+*
+* @param HostElementPrototype the `Element` to be patched
+*/
+const patchSlotAppend = (HostElementPrototype) => {
+	if (HostElementPrototype.__append) return;
+	HostElementPrototype.__append = HostElementPrototype.append;
+	HostElementPrototype.append = function(...newChildren) {
+		newChildren.forEach((newChild) => {
+			if (typeof newChild === "string") newChild = this.ownerDocument.createTextNode(newChild);
+			this.appendChild(newChild);
+		});
+	};
+};
+/**
+* Patches the `insertAdjacentHTML` method for a slotted node inside a scoped component. Specifically,
+* we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the element
+* gets inserted into the DOM in the correct location.
+*
+* @param HostElementPrototype the `Element` to be patched
+*/
+const patchSlotInsertAdjacentHTML = (HostElementPrototype) => {
+	if (HostElementPrototype.__insertAdjacentHTML) return;
+	const originalInsertAdjacentHtml = HostElementPrototype.insertAdjacentHTML;
+	HostElementPrototype.insertAdjacentHTML = function(position, text) {
+		if (position !== "afterbegin" && position !== "beforeend") return originalInsertAdjacentHtml.call(this, position, text);
+		const container = this.ownerDocument.createElement("_");
+		let node;
+		container.innerHTML = text;
+		if (position === "afterbegin") while (node = container.firstChild) this.prepend(node);
+		else if (position === "beforeend") while (node = container.firstChild) this.append(node);
+	};
+};
+/**
+* Patches the `insertAdjacentText` method for a slotted node inside a scoped component. Specifically,
+* we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the text node
+* gets inserted into the DOM in the correct location.
+*
+* @param HostElementPrototype the `Element` to be patched
+*/
+const patchSlotInsertAdjacentText = (HostElementPrototype) => {
+	HostElementPrototype.insertAdjacentText = function(position, text) {
+		this.insertAdjacentHTML(position, text);
+	};
+};
+/**
+* Patches the `insertBefore` of a non-shadow component.
+*
+* The *current* node to insert before may not be in the root of our component
+* (e.g. if it's 'slotted' it appears in the root, but isn't really)
+*
+* This tries to find where the *current* node lives within the component and insert the new node before it
+* *If* the new node is in the same slot as the *current* node. Otherwise the new node is appended to it's 'slot'
+*
+* @param HostElementPrototype the custom element prototype to patch
+*/
+const patchInsertBefore = (HostElementPrototype) => {
+	if (HostElementPrototype.__insertBefore) return;
+	const eleProto = HostElementPrototype;
+	if (eleProto.__insertBefore) return;
+	eleProto.__insertBefore = HostElementPrototype.insertBefore;
+	HostElementPrototype.insertBefore = function(newChild, currentChild) {
+		const { slotName, slotNode } = findSlotFromSlottedNode(newChild, this);
+		const slottedNodes = this.__childNodes ? this.childNodes : getSlottedChildNodes(this.childNodes);
+		if (slotNode) {
+			let found = false;
+			slottedNodes.forEach((childNode) => {
+				if (childNode === currentChild || currentChild === null) {
+					found = true;
+					if (currentChild === null || slotName !== currentChild["s-sn"]) {
+						this.appendChild(newChild);
+						return;
+					}
+					if (slotName === currentChild["s-sn"]) {
+						addSlotRelocateNode(newChild, slotNode);
+						internalCall(internalCall(currentChild, "parentNode"), "insertBefore")(newChild, currentChild);
+						dispatchSlotChangeEvent(slotNode);
+					}
+					return;
+				}
+			});
+			if (found) return newChild;
+		}
+		/**
+		* Fixes an issue where slotted elements are dynamically relocated in React, such as after data fetch.
+		*
+		* When a slotted element is passed to another scoped component (e.g., <A><C slot="header"/></A>),
+		* the child’s __parentNode (original parent node property) does not match this.
+		*
+		* To prevent errors, this checks if the current child's parent node differs from this.
+		* If so, appendChild(newChild) is called to ensure the child is correctly inserted,
+		* allowing Stencil to properly manage the slot placement.
+		*/
+		const parentNode = currentChild?.__parentNode;
+		if (parentNode && !this.isSameNode(parentNode)) return this.appendChild(newChild);
+		return this.__insertBefore(newChild, currentChild);
+	};
+};
+/**
+* Patches the `insertAdjacentElement` method for a slotted node inside a scoped component. Specifically,
+* we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the element
+* gets inserted into the DOM in the correct location.
+*
+* @param HostElementPrototype the `Element` to be patched
+*/
+const patchSlotInsertAdjacentElement = (HostElementPrototype) => {
+	if (HostElementPrototype.__insertAdjacentElement) return;
+	const originalInsertAdjacentElement = HostElementPrototype.insertAdjacentElement;
+	HostElementPrototype.insertAdjacentElement = function(position, element) {
+		if (position !== "afterbegin" && position !== "beforeend") return originalInsertAdjacentElement.call(this, position, element);
+		if (position === "afterbegin") {
+			this.prepend(element);
+			return element;
+		} else if (position === "beforeend") {
+			this.append(element);
+			return element;
+		}
+		return element;
+	};
+};
+/**
+* Patches the `textContent` of an unnamed slotted node inside a scoped component
+*
+* @param hostElementPrototype the `Element` to be patched
+*/
+const patchTextContent = (hostElementPrototype) => {
+	patchHostOriginalAccessor("textContent", hostElementPrototype);
+	Object.defineProperty(hostElementPrototype, "textContent", {
+		get: function() {
+			let text = "";
+			(this.__childNodes ? this.childNodes : getSlottedChildNodes(this.childNodes)).forEach((node) => text += node.textContent || "");
+			return text;
+		},
+		set: function(value) {
+			(this.__childNodes ? this.childNodes : getSlottedChildNodes(this.childNodes)).forEach((node) => {
+				if (node["s-ol"]) node["s-ol"].remove();
+				node.remove();
+			});
+			this.insertAdjacentHTML("beforeend", value);
+		}
+	});
+};
+const patchChildSlotNodes = (elm) => {
+	class FakeNodeList extends Array {
+		item(n) {
+			return this[n];
+		}
+	}
+	patchHostOriginalAccessor("children", elm);
+	Object.defineProperty(elm, "children", { get() {
+		return this.childNodes.filter((n) => n.nodeType === 1);
+	} });
+	Object.defineProperty(elm, "childElementCount", { get() {
+		return this.children.length;
+	} });
+	patchHostOriginalAccessor("firstChild", elm);
+	Object.defineProperty(elm, "firstChild", { get() {
+		return this.childNodes[0];
+	} });
+	patchHostOriginalAccessor("lastChild", elm);
+	Object.defineProperty(elm, "lastChild", { get() {
+		return this.childNodes[this.childNodes.length - 1];
+	} });
+	patchHostOriginalAccessor("childNodes", elm);
+	Object.defineProperty(elm, "childNodes", { get() {
+		const result = new FakeNodeList();
+		result.push(...getSlottedChildNodes(this.__childNodes));
+		return result;
+	} });
+};
+/**
+* Patches sibling accessors of a 'slotted' node within a non-shadow component.
+* Meaning whilst stepping through a non-shadow element's nodes, only the mock 'lightDOM' nodes are returned.
+* Especially relevant when rendering components via SSR... Frameworks will often try to reconcile their
+* VDOM with the real DOM by stepping through nodes with 'nextSibling' et al.
+* - `nextSibling`
+* - `nextElementSibling`
+* - `previousSibling`
+* - `previousElementSibling`
+*
+* @param node the slotted node to be patched
+*/
+const patchSlottedNode = (node) => {
+	if (!node || node.__nextSibling !== void 0 || !globalThis.Node) return;
+	patchNextSibling(node);
+	patchPreviousSibling(node);
+	patchParentNode(node);
+	if (node.nodeType === Node.ELEMENT_NODE) {
+		patchNextElementSibling(node);
+		patchPreviousElementSibling(node);
+	}
+};
+/**
+* Patches the `nextSibling` accessor of a non-shadow slotted node
+*
+* @param node the slotted node to be patched
+*/
+const patchNextSibling = (node) => {
+	if (!node || node.__nextSibling) return;
+	patchHostOriginalAccessor("nextSibling", node);
+	Object.defineProperty(node, "nextSibling", { get: function() {
+		const parentNodes = this["s-ol"]?.parentNode.childNodes;
+		const index = parentNodes?.indexOf(this);
+		if (parentNodes && index > -1) return parentNodes[index + 1];
+		return this.__nextSibling;
+	} });
+};
+/**
+* Patches the `nextElementSibling` accessor of a non-shadow slotted node
+*
+* @param element the slotted element node to be patched
+*/
+const patchNextElementSibling = (element) => {
+	if (!element || element.__nextElementSibling) return;
+	patchHostOriginalAccessor("nextElementSibling", element);
+	Object.defineProperty(element, "nextElementSibling", { get: function() {
+		const parentEles = this["s-ol"]?.parentNode.children;
+		const index = parentEles?.indexOf(this);
+		if (parentEles && index > -1) return parentEles[index + 1];
+		return this.__nextElementSibling;
+	} });
+};
+/**
+* Patches the `previousSibling` accessor of a non-shadow slotted node
+*
+* @param node the slotted node to be patched
+*/
+const patchPreviousSibling = (node) => {
+	if (!node || node.__previousSibling) return;
+	patchHostOriginalAccessor("previousSibling", node);
+	Object.defineProperty(node, "previousSibling", { get: function() {
+		const parentNodes = this["s-ol"]?.parentNode.childNodes;
+		const index = parentNodes?.indexOf(this);
+		if (parentNodes && index > -1) return parentNodes[index - 1];
+		return this.__previousSibling;
+	} });
+};
+/**
+* Patches the `previousElementSibling` accessor of a non-shadow slotted node
+*
+* @param element the slotted element node to be patched
+*/
+const patchPreviousElementSibling = (element) => {
+	if (!element || element.__previousElementSibling) return;
+	patchHostOriginalAccessor("previousElementSibling", element);
+	Object.defineProperty(element, "previousElementSibling", { get: function() {
+		const parentNodes = this["s-ol"]?.parentNode.children;
+		const index = parentNodes?.indexOf(this);
+		if (parentNodes && index > -1) return parentNodes[index - 1];
+		return this.__previousElementSibling;
+	} });
+};
+/**
+* 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/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 () => {};
+};
+const uniqueTime = (key, measureText) => {
+	if (BUILD.profile && performance.mark) {
+		if (performance.getEntriesByName(key, "mark").length === 0) performance.mark(key);
+		return () => {
+			if (performance.getEntriesByName(measureText, "measure").length === 0) performance.measure(measureText, key);
+		};
+	} else return () => {};
+};
+const inspect = (ref) => {
+	const hostRef = getHostRef(ref);
+	if (!hostRef) return;
+	const flags = hostRef.$flags$;
+	const hostElement = hostRef.$hostElement$;
+	return {
+		renderCount: hostRef.$renderCount$,
+		flags: {
+			hasRendered: !!(flags & HOST_FLAGS.hasRendered),
+			hasConnected: !!(flags & HOST_FLAGS.hasConnected),
+			isWaitingForChildren: !!(flags & HOST_FLAGS.isWaitingForChildren),
+			isConstructingInstance: !!(flags & HOST_FLAGS.isConstructingInstance),
+			isQueuedForUpdate: !!(flags & HOST_FLAGS.isQueuedForUpdate),
+			hasInitializedComponent: !!(flags & HOST_FLAGS.hasInitializedComponent),
+			hasLoadedComponent: !!(flags & HOST_FLAGS.hasLoadedComponent),
+			isWatchReady: !!(flags & HOST_FLAGS.isWatchReady),
+			isListenReady: !!(flags & HOST_FLAGS.isListenReady),
+			needsRerender: !!(flags & HOST_FLAGS.needsRerender)
+		},
+		instanceValues: hostRef.$instanceValues$,
+		serializerValues: hostRef.$serializerValues$,
+		ancestorComponent: hostRef.$ancestorComponent$,
+		hostElement,
+		lazyInstance: hostRef.$lazyInstance$,
+		vnode: hostRef.$vnode$,
+		modeName: hostRef.$modeName$,
+		fetchedCbList: hostRef.$fetchedCbList$,
+		onReadyPromise: hostRef.$onReadyPromise$,
+		onReadyResolve: hostRef.$onReadyResolve$,
+		onInstancePromise: hostRef.$onInstancePromise$,
+		onInstanceResolve: hostRef.$onInstanceResolve$,
+		onRenderResolve: hostRef.$onRenderResolve$,
+		queuedListeners: hostRef.$queuedListeners$,
+		rmListeners: hostRef.$rmListeners$,
+		["s-id"]: hostElement["s-id"],
+		["s-cr"]: hostElement["s-cr"],
+		["s-lr"]: hostElement["s-lr"],
+		["s-p"]: hostElement["s-p"],
+		["s-rc"]: hostElement["s-rc"],
+		["s-sc"]: hostElement["s-sc"]
+	};
+};
+const installDevTools = () => {
+	if (BUILD.devTools) {
+		const stencil = win.stencil = win.stencil || {};
+		const originalInspect = stencil.inspect;
+		stencil.inspect = (ref) => {
+			let result = inspect(ref);
+			if (!result && typeof originalInspect === "function") result = originalInspect(ref);
+			return result;
+		};
+	}
+};
+
+//#endregion
+//#region src/utils/query-nonce-meta-tag-content.ts
+/**
+* Helper method for querying a `meta` tag that contains a nonce value
+* out of a DOM's head.
+*
+* @param doc The DOM containing the `head` to query against
+* @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
+* exists or the tag has no content.
+*/
+function queryNonceMetaTagContent(doc) {
+	return doc.head?.querySelector("meta[name=\"csp-nonce\"]")?.getAttribute("content") ?? void 0;
+}
+
+//#endregion
+//#region src/runtime/styles.ts
+const rootAppliedStyles = /* @__PURE__ */ new WeakMap();
+/**
+* Register the styles for a component by creating a stylesheet and then
+* registering it under the component's scope ID in a `WeakMap` for later use.
+*
+* If constructable stylesheet are not supported or `allowCS` is set to
+* `false` then the styles will be registered as a string instead.
+*
+* @param scopeId the scope ID for the component of interest
+* @param cssText styles for the component of interest
+* @param allowCS whether or not to use a constructable stylesheet
+*/
+const registerStyle = (scopeId, cssText, allowCS) => {
+	let style = styles.get(scopeId);
+	if (supportsConstructableStylesheets && allowCS) {
+		style = style || new CSSStyleSheet();
+		if (typeof style === "string") style = cssText;
+		else style.replaceSync(cssText);
+	} else style = cssText;
+	styles.set(scopeId, 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);
+	const style = styles.get(scopeId);
+	if (!BUILD.attachStyles || !win.document) return scopeId;
+	styleContainerNode = styleContainerNode.nodeType === NODE_TYPE.DocumentFragment ? styleContainerNode : win.document;
+	if (style) {
+		if (typeof style === "string") {
+			styleContainerNode = styleContainerNode.head || styleContainerNode;
+			let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+			let styleElm;
+			if (!appliedStyles) rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
+			const existingStyleElm = (BUILD.hydrateClientSide || BUILD.hotModuleReplacement) && styleContainerNode.querySelector(`[${HYDRATED_STYLE_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 || BUILD.hotModuleReplacement) && (cmpMeta.$flags$ & CMP_FLAGS.scopedCssEncapsulation || cmpMeta.$flags$ & CMP_FLAGS.shadowNeedsScopedCss || cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
+				/**
+				* 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 = new (styleContainerNode.defaultView ?? styleContainerNode.ownerDocument.defaultView).CSSStyleSheet();
+					stylesheet.replaceSync(style);
+					/**
+					* > If the array needs to be modified, use in-place mutations like push().
+					* https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets
+					*/
+					if (supportsMutableAdoptedStyleSheets) styleContainerNode.adoptedStyleSheets.unshift(stylesheet);
+					else styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
+				} 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) styleContainerNode.insertBefore(styleElm, null);
+				if (cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation) styleElm.textContent += SLOT_FB_CSS;
+				if (appliedStyles) appliedStyles.add(scopeId);
+			}
+		} else if (BUILD.constructableCSS) {
+			let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+			if (!appliedStyles) rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
+			if (!appliedStyles.has(scopeId)) {
+				/**
+				* Constructable stylesheets can't be shared between windows,
+				* we need to create a new one for the current window if necessary
+				*/
+				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);
+				}
+				/**
+				* > If the array needs to be modified, use in-place mutations like push().
+				* https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets
+				*/
+				if (supportsMutableAdoptedStyleSheets) styleContainerNode.adoptedStyleSheets.push(stylesheet);
+				else styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, 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$);
+	const scopeId = addStyle(BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), 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$);
+/**
+* Convert a 'scoped' CSS string to one appropriate for use in the shadow DOM.
+*
+* Given a 'scoped' CSS string that looks like this:
+*
+* ```
+* /*!@div*\/div.class-name { display: flex };
+* ```
+*
+* Convert it to a 'shadow' appropriate string, like so:
+*
+* ```
+*  /*!@div*\/div.class-name { display: flex }
+*      ─┬─                  ────────┬────────
+*       │                           │
+*       │         ┌─────────────────┘
+*       ▼         ▼
+*      div{ display: flex }
+* ```
+*
+* Note that forward-slashes in the above are escaped so they don't end the
+* comment.
+*
+* @param css a CSS string to convert
+* @returns the converted string
+*/
+const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, "$1{");
+/**
+* Hydrate styles after SSR for components *not* using DSD. Convert 'scoped' styles to 'shadow'
+* and add them to a constructable stylesheet.
+*/
+const hydrateScopedToShadow = () => {
+	if (!win.document) return;
+	const styles = win.document.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
+	let i = 0;
+	for (; i < styles.length; i++) registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
+};
+
+//#endregion
+//#region src/utils/helpers.ts
+const isDef = (v) => v != null && v !== void 0;
+/**
+* Check whether a value is a 'complex type', defined here as an object or a
+* function.
+*
+* @param o the value to check
+* @returns whether it's a complex type or not
+*/
+const isComplexType = (o) => {
+	o = typeof o;
+	return o === "object" || o === "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 (simple = typeof nodeName !== "function" && !isComplexType(child)) child = String(child);
+				else if (BUILD.isDev && typeof nodeName !== "function" && child.$flags$ === void 0) consoleDevError(`vNode passed as children has unexpected type.
+Make sure it's using the correct h() function.
+Empty objects can also be the cause, look for JSX comments that became objects.`);
+				if (simple && lastSimple) vNodeChildren[vNodeChildren.length - 1].$text$ += child;
+				else vNodeChildren.push(simple ? newVNode(null, child) : child);
+				lastSimple = simple;
+			}
+		}
+	};
+	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.className || vnodeData.class;
+			if (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/client-hydrate.ts
+/**
+* Takes an SSR rendered document, as annotated by 'vdom-annotations.ts' and:
+*
+* 1) Recreate an accurate VDOM which is fed to 'vdom-render.ts'. A failure to do so can cause hydration errors; extra renders, duplicated nodes
+* 2) Add shadowDOM trees to their respective #document-fragment
+* 3) Move forwarded, slotted nodes out of shadowDOMs
+* 4) Add meta nodes to non-shadow DOMs and their 'slotted' nodes
+*
+* @param hostElm The element to hydrate.
+* @param tagName The element's tag name.
+* @param hostId The host ID assigned to the element by the server. e.g. `s-id="1"`
+* @param hostRef The host reference for the element.
+*/
+const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
+	const endHydrate = createTime("hydrateClient", tagName);
+	const shadowRoot = hostElm.shadowRoot;
+	const childRenderNodes = [];
+	const slotNodes = [];
+	const slottedNodes = [];
+	const shadowRootNodes = BUILD.shadowDom && shadowRoot ? [] : null;
+	const vnode = newVNode(tagName, null);
+	vnode.$elm$ = hostElm;
+	let scopeId;
+	if (BUILD.scoped) {
+		const cmpMeta = hostRef.$cmpMeta$;
+		if (cmpMeta && cmpMeta.$flags$ & CMP_FLAGS.needsScopedEncapsulation && hostElm["s-sc"]) {
+			scopeId = hostElm["s-sc"];
+			hostElm.classList.add(scopeId + "-h");
+		} else if (hostElm["s-sc"]) delete hostElm["s-sc"];
+	}
+	if (win.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) initializeDocumentHydrate(win.document.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
+	hostElm[HYDRATE_ID] = hostId;
+	hostElm.removeAttribute(HYDRATE_ID);
+	hostRef.$vnode$ = clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId, slottedNodes);
+	let crIndex = 0;
+	const crLength = childRenderNodes.length;
+	let childRenderNode;
+	for (; crIndex < crLength; crIndex++) {
+		childRenderNode = childRenderNodes[crIndex];
+		const orgLocationId = childRenderNode.$hostId$ + "." + childRenderNode.$nodeId$;
+		const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
+		const node = childRenderNode.$elm$;
+		if (!shadowRoot) {
+			node["s-hn"] = transformTag(tagName).toUpperCase();
+			if (childRenderNode.$tag$ === "slot") node["s-cr"] = hostElm["s-cr"];
+		} else if (childRenderNode.$tag$?.toString().includes("-") && childRenderNode.$tag$ !== "slot-fb" && !childRenderNode.$elm$.shadowRoot) {
+			const cmpMeta = getHostRef(childRenderNode.$elm$);
+			if (cmpMeta) {
+				const scopeId = getScopeId(cmpMeta.$cmpMeta$, BUILD.mode ? childRenderNode.$elm$.getAttribute("s-mode") : void 0);
+				const styleSheet = win.document.querySelector(`style[sty-id="${scopeId}"]`);
+				if (styleSheet) shadowRootNodes.unshift(styleSheet.cloneNode(true));
+			}
+		}
+		if (childRenderNode.$tag$ === "slot") {
+			childRenderNode.$name$ = childRenderNode.$elm$["s-sn"] || childRenderNode.$elm$["name"] || null;
+			if (childRenderNode.$children$) {
+				childRenderNode.$flags$ |= VNODE_FLAGS.isSlotFallback;
+				if (!childRenderNode.$elm$.childNodes.length) childRenderNode.$children$.forEach((c) => {
+					childRenderNode.$elm$.appendChild(c.$elm$);
+				});
+			} else childRenderNode.$flags$ |= VNODE_FLAGS.isSlotReference;
+		}
+		if (orgLocationNode && orgLocationNode.isConnected) {
+			if (orgLocationNode.parentElement.shadowRoot && orgLocationNode["s-en"] === "") orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
+			orgLocationNode.parentNode.removeChild(orgLocationNode);
+			if (!shadowRoot) node["s-oo"] = parseInt(childRenderNode.$nodeId$);
+		}
+		if (orgLocationNode && !orgLocationNode["s-id"]) plt.$orgLocNodes$.delete(orgLocationId);
+	}
+	const hosts = [];
+	const snLen = slottedNodes.length;
+	let snIndex = 0;
+	let slotGroup;
+	let snGroupIdx;
+	let snGroupLen;
+	let slottedItem;
+	let currentPos = 0;
+	for (; snIndex < snLen; snIndex++) {
+		slotGroup = slottedNodes[snIndex];
+		if (!slotGroup || !slotGroup.length) continue;
+		snGroupLen = slotGroup.length;
+		snGroupIdx = 0;
+		for (; snGroupIdx < snGroupLen; snGroupIdx++) {
+			slottedItem = slotGroup[snGroupIdx];
+			if (!hosts[slottedItem.hostId]) hosts[slottedItem.hostId] = plt.$orgLocNodes$.get(slottedItem.hostId);
+			if (!hosts[slottedItem.hostId]) continue;
+			const hostEle = hosts[slottedItem.hostId];
+			if (hostEle.shadowRoot && slottedItem.node.parentElement !== hostEle) hostEle.insertBefore(slottedItem.node, slotGroup[snGroupIdx - 1]?.node?.nextSibling);
+			if (!hostEle.shadowRoot || !shadowRoot) {
+				if (!slottedItem.slot["s-cr"]) {
+					slottedItem.slot["s-cr"] = hostEle["s-cr"];
+					if (!slottedItem.slot["s-cr"] && hostEle.shadowRoot) slottedItem.slot["s-cr"] = hostEle;
+					else slottedItem.slot["s-cr"] = (hostEle.__childNodes || hostEle.childNodes)[0];
+				}
+				addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"] || currentPos);
+				if (slottedItem.node.parentElement?.shadowRoot && slottedItem.node["getAttribute"] && slottedItem.node.getAttribute("slot")) slottedItem.node.removeAttribute("slot");
+				if (BUILD.experimentalSlotFixes) patchSlottedNode(slottedItem.node);
+			}
+			currentPos = (slottedItem.node["s-oo"] || currentPos) + 1;
+		}
+	}
+	if (BUILD.scoped && scopeId && slotNodes.length) slotNodes.forEach((slot) => {
+		slot.$elm$.parentElement.classList.add(scopeId + "-s");
+	});
+	if (BUILD.shadowDom && shadowRoot && !shadowRoot.childNodes.length) {
+		let rnIdex = 0;
+		const rnLen = shadowRootNodes.length;
+		if (rnLen) {
+			for (; rnIdex < rnLen; rnIdex++) {
+				const node = shadowRootNodes[rnIdex];
+				/**
+				* in apps with a lot of components the `shadowRootNodes` array can be modified while iterating over it
+				* so we need to check if the node is still in the array before appending it to avoid any errors like:
+				*
+				*   TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
+				*/
+				if (node) shadowRoot.appendChild(node);
+			}
+			Array.from(hostElm.childNodes).forEach((node) => {
+				if (typeof node["s-en"] !== "string" && typeof node["s-sn"] !== "string") {
+					if (node.nodeType === NODE_TYPE.ElementNode && node.slot && node.hidden) node.removeAttribute("hidden");
+					else if (node.nodeType === NODE_TYPE.CommentNode && !node.nodeValue) node.parentNode.removeChild(node);
+				}
+			});
+		}
+	}
+	hostRef.$hostElement$ = hostElm;
+	endHydrate();
+};
+/**
+* Recursively constructs the virtual node tree for a host element and its children.
+* The tree is constructed by parsing the annotations set on the nodes by the server (`vdom-annotations.ts`).
+*
+* In addition to constructing the VNode tree, we also track information about the node's descendants:
+* - which are slots
+* - which should exist in the shadow root
+* - which are nodes that should be rendered as children of the parent node
+*
+* @param parentVNode The vNode representing the parent node.
+* @param childRenderNodes An array of all child nodes in the parent's node tree.
+* @param slotNodes An array of all slot nodes in the parent's node tree.
+* @param shadowRootNodes An array of nodes that should be rendered in the shadowDOM of the parent.
+* @param hostElm The parent element.
+* @param node The node to construct the vNode tree for.
+* @param hostId The host ID assigned to the element by the server.
+* @param slottedNodes - nodes that have been slotted
+* @returns - the constructed VNode
+*/
+const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId, slottedNodes = []) => {
+	let childNodeType;
+	let childIdSplt;
+	let childVNode;
+	let i;
+	const scopeId = hostElm["s-sc"];
+	if (node.nodeType === NODE_TYPE.ElementNode) {
+		childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
+		if (childNodeType) {
+			childIdSplt = childNodeType.split(".");
+			if (childIdSplt[0] === hostId || childIdSplt[0] === "0") {
+				childVNode = createSimpleVNode({
+					$flags$: 0,
+					$hostId$: childIdSplt[0],
+					$nodeId$: childIdSplt[1],
+					$depth$: childIdSplt[2],
+					$index$: childIdSplt[3],
+					$tag$: node.tagName.toLowerCase(),
+					$elm$: node,
+					$attrs$: { class: node.className || "" }
+				});
+				childRenderNodes.push(childVNode);
+				node.removeAttribute(HYDRATE_CHILD_ID);
+				if (!parentVNode.$children$) parentVNode.$children$ = [];
+				if (BUILD.scoped && scopeId && childIdSplt[0] === hostId) {
+					node["s-si"] = scopeId;
+					childVNode.$attrs$.class += " " + scopeId;
+				}
+				const slotName = childVNode.$elm$.getAttribute("s-sn");
+				if (typeof slotName === "string") {
+					if (childVNode.$tag$ === "slot-fb") {
+						addSlot(slotName, childIdSplt[2], childVNode, node, parentVNode, childRenderNodes, slotNodes, shadowRootNodes, slottedNodes);
+						if (BUILD.scoped && scopeId) node.classList.add(scopeId);
+					}
+					childVNode.$elm$["s-sn"] = slotName;
+					childVNode.$elm$.removeAttribute("s-sn");
+				}
+				if (childVNode.$index$ !== void 0) parentVNode.$children$[childVNode.$index$] = childVNode;
+				parentVNode = childVNode;
+				if (shadowRootNodes && childVNode.$depth$ === "0") shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+			}
+		}
+		if (node.shadowRoot) for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId, slottedNodes);
+		const nonShadowNodes = node.__childNodes || node.childNodes;
+		for (i = nonShadowNodes.length - 1; i >= 0; i--) clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, nonShadowNodes[i], hostId, slottedNodes);
+	} else if (node.nodeType === NODE_TYPE.CommentNode) {
+		childIdSplt = node.nodeValue.split(".");
+		if (childIdSplt[1] === hostId || childIdSplt[1] === "0") {
+			childNodeType = childIdSplt[0];
+			childVNode = createSimpleVNode({
+				$hostId$: childIdSplt[1],
+				$nodeId$: childIdSplt[2],
+				$depth$: childIdSplt[3],
+				$index$: childIdSplt[4] || "0",
+				$elm$: node,
+				$attrs$: null,
+				$children$: null,
+				$key$: null,
+				$name$: null,
+				$tag$: null,
+				$text$: null
+			});
+			if (childNodeType === TEXT_NODE_ID) {
+				childVNode.$elm$ = findCorrespondingNode(node, NODE_TYPE.TextNode);
+				if (childVNode.$elm$ && childVNode.$elm$.nodeType === NODE_TYPE.TextNode) {
+					childVNode.$text$ = childVNode.$elm$.textContent;
+					childRenderNodes.push(childVNode);
+					node.remove();
+					if (hostId === childVNode.$hostId$) {
+						if (!parentVNode.$children$) parentVNode.$children$ = [];
+						parentVNode.$children$[childVNode.$index$] = childVNode;
+					}
+					if (shadowRootNodes && childVNode.$depth$ === "0") shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+				}
+			} else if (childNodeType === COMMENT_NODE_ID) {
+				childVNode.$elm$ = findCorrespondingNode(node, NODE_TYPE.CommentNode);
+				if (childVNode.$elm$ && childVNode.$elm$.nodeType === NODE_TYPE.CommentNode) {
+					childRenderNodes.push(childVNode);
+					node.remove();
+				}
+			} else if (childVNode.$hostId$ === hostId) {
+				if (childNodeType === SLOT_NODE_ID) addSlot(node["s-sn"] = childIdSplt[5] || "", childIdSplt[2], childVNode, node, parentVNode, childRenderNodes, slotNodes, shadowRootNodes, slottedNodes);
+				else if (childNodeType === CONTENT_REF_ID) {
+					if (BUILD.shadowDom && shadowRootNodes) node.remove();
+					else if (BUILD.slotRelocation) {
+						hostElm["s-cr"] = node;
+						node["s-cn"] = true;
+					}
+				}
+			}
+		}
+	} else if (parentVNode && parentVNode.$tag$ === "style") {
+		const vnode = newVNode(null, node.textContent);
+		vnode.$elm$ = node;
+		vnode.$index$ = "0";
+		parentVNode.$children$ = [vnode];
+	}
+	return parentVNode;
+};
+/**
+* Recursively locate any comments representing an 'original location' for a node; in a node's children or shadowRoot children.
+* Creates a map of component IDs and 'original location' ID's which are derived from comment nodes placed by 'vdom-annotations.ts'.
+* Each 'original location' relates to a lightDOM node that was moved deeper into the SSR markup. e.g. `<!--o.1-->` maps to `<div c-id="0.1">`
+*
+* @param node The node to search.
+* @param orgLocNodes A map of the original location annotations and the current node being searched.
+*/
+const initializeDocumentHydrate = (node, orgLocNodes) => {
+	if (node.nodeType === NODE_TYPE.ElementNode) {
+		const componentId = node[HYDRATE_ID] || node.getAttribute(HYDRATE_ID);
+		if (componentId) orgLocNodes.set(componentId, node);
+		let i = 0;
+		if (node.shadowRoot) for (; i < node.shadowRoot.childNodes.length; i++) initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
+		const nonShadowNodes = node.__childNodes || node.childNodes;
+		for (i = 0; i < nonShadowNodes.length; i++) initializeDocumentHydrate(nonShadowNodes[i], orgLocNodes);
+	} else if (node.nodeType === NODE_TYPE.CommentNode) {
+		const childIdSplt = node.nodeValue.split(".");
+		if (childIdSplt[0] === ORG_LOCATION_ID) {
+			orgLocNodes.set(childIdSplt[1] + "." + childIdSplt[2], node);
+			node.nodeValue = "";
+			node["s-en"] = childIdSplt[3];
+		}
+	}
+};
+/**
+* Creates a VNode to add to a hydrated component VDOM
+*
+* @param vnode - a vnode partial which will be augmented
+* @returns an complete vnode
+*/
+const createSimpleVNode = (vnode) => {
+	return {
+		$flags$: 0,
+		$hostId$: null,
+		$nodeId$: null,
+		$depth$: null,
+		$index$: "0",
+		$elm$: null,
+		$attrs$: null,
+		$children$: null,
+		$key$: null,
+		$name$: null,
+		$tag$: null,
+		$text$: null,
+		...vnode
+	};
+};
+function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNodes, slotNodes, shadowRootNodes, slottedNodes) {
+	node["s-sr"] = true;
+	childVNode.$name$ = slotName || null;
+	childVNode.$tag$ = "slot";
+	const parentNodeId = parentVNode?.$elm$ ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
+	if (BUILD.shadowDom && shadowRootNodes && win.document) {
+		const slot = childVNode.$elm$ = win.document.createElement(childVNode.$tag$);
+		if (childVNode.$name$) childVNode.$elm$.setAttribute("name", slotName);
+		if (parentVNode.$elm$.shadowRoot && parentNodeId && parentNodeId !== childVNode.$hostId$) internalCall(parentVNode.$elm$, "insertBefore")(slot, internalCall(parentVNode.$elm$, "children")[0]);
+		else internalCall(internalCall(node, "parentNode"), "insertBefore")(slot, node);
+		addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
+		node.remove();
+		if (childVNode.$depth$ === "0") shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+	} else {
+		const slot = childVNode.$elm$;
+		const shouldMove = parentNodeId && parentNodeId !== childVNode.$hostId$ && parentVNode.$elm$.shadowRoot;
+		addSlottedNodes(slottedNodes, slotId, slotName, node, shouldMove ? parentNodeId : childVNode.$hostId$);
+		patchSlotNode(node);
+		if (shouldMove) parentVNode.$elm$.insertBefore(slot, parentVNode.$elm$.children[0]);
+	}
+	childRenderNodes.push(childVNode);
+	slotNodes.push(childVNode);
+	if (!parentVNode.$children$) parentVNode.$children$ = [];
+	parentVNode.$children$[childVNode.$index$] = childVNode;
+}
+/**
+* Adds groups of slotted nodes (grouped by slot ID) to this host element's 'master' array.
+* We'll use this after the host element's VDOM is completely constructed to finally position and add meta required by non-shadow slotted nodes
+*
+* @param slottedNodes - the main host element 'master' array to add to
+* @param slotNodeId - the slot node unique ID
+* @param slotName - the slot node name (can be '')
+* @param slotNode - the slot node
+* @param hostId - the host element id where this node should be slotted
+*/
+const addSlottedNodes = (slottedNodes, slotNodeId, slotName, slotNode, hostId) => {
+	let slottedNode = slotNode.nextSibling;
+	slottedNodes[slotNodeId] = slottedNodes[slotNodeId] || [];
+	if (!slottedNode || slottedNode.nodeValue?.startsWith(SLOT_NODE_ID + ".")) return;
+	do {
+		if (slottedNode && ((slottedNode["getAttribute"] && slottedNode.getAttribute("slot") || slottedNode["s-sn"]) === slotName || slotName === "" && !slottedNode["s-sn"] && (!slottedNode["getAttribute"] || !slottedNode.getAttribute("slot")) && (slottedNode.nodeType === NODE_TYPE.CommentNode || slottedNode.nodeType === NODE_TYPE.TextNode))) {
+			slottedNode["s-sn"] = slotName;
+			slottedNodes[slotNodeId].push({
+				slot: slotNode,
+				node: slottedNode,
+				hostId
+			});
+		}
+		slottedNode = slottedNode?.nextSibling;
+	} while (slottedNode && !slottedNode.nodeValue?.startsWith(SLOT_NODE_ID + "."));
+};
+/**
+* Steps through the node's siblings to find the next node of a specific type, with a value.
+* e.g. when we find a position comment `<!--t.1-->`, we need to find the next text node with a value.
+* (it's a guard against whitespace which is never accounted for in the SSR output)
+* @param node - the starting node
+* @param type - the type of node to find
+* @returns the first corresponding node of the type
+*/
+const findCorrespondingNode = (node, type) => {
+	let sibling = node;
+	do
+		sibling = sibling.nextSibling;
+	while (sibling && (sibling.nodeType !== type || !sibling.nodeValue));
+	return sibling;
+};
+
+//#endregion
+//#region src/utils/regular-expression.ts
+/**
+* Utility function that will escape all regular expression special characters in a string.
+*
+* @param text The string potentially containing special characters.
+* @returns The string with all special characters escaped.
+*/
+const escapeRegExpSpecialCharacters = (text) => {
+	return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
+
+//#endregion
+//#region src/utils/shadow-css.ts
+/**
+* @license
+* Copyright Google Inc. All Rights Reserved.
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://angular.io/license
+*
+* This file is a port of shadowCSS from `webcomponents.js` to TypeScript.
+* https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
+* https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
+*/
+const safeSelector = (selector) => {
+	const placeholders = [];
+	let index = 0;
+	selector = selector.replace(/(\[\s*part~=\s*("[^"]*"|'[^']*')\s*\])/g, (_, keep) => {
+		const replaceBy = `__part-${index}__`;
+		placeholders.push(keep);
+		index++;
+		return replaceBy;
+	});
+	selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
+		const replaceBy = `__ph-${index}__`;
+		placeholders.push(keep);
+		index++;
+		return replaceBy;
+	});
+	return {
+		content: selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
+			const replaceBy = `__ph-${index}__`;
+			placeholders.push(exp);
+			index++;
+			return pseudo + replaceBy;
+		}),
+		placeholders
+	};
+};
+const restoreSafeSelector = (placeholders, content) => {
+	content = content.replace(/__part-(\d+)__/g, (_, index) => placeholders[+index]);
+	return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
+};
+const _polyfillHost = "-shadowcsshost";
+const _polyfillSlotted = "-shadowcssslotted";
+const _polyfillHostContext = "-shadowcsscontext";
+const _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
+const _cssColonHostRe = new RegExp("(" + _polyfillHost + _parenSuffix, "gim");
+const _cssColonHostContextRe = new RegExp("(" + _polyfillHostContext + _parenSuffix, "gim");
+const _cssColonSlottedRe = new RegExp("(" + _polyfillSlotted + _parenSuffix, "gim");
+const _polyfillHostNoCombinator = _polyfillHost + "-no-combinator";
+const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
+const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
+const _safePartRe = /__part-(\d+)__/g;
+const _polyfillHostRe = /-shadowcsshost/gim;
+/**
+* Little helper for generating a regex that will match a specified
+* CSS selector when that selector is _not_ a part of a `@supports` rule.
+*
+* The pattern will match the provided `selector` (i.e. ':host', ':host-context', etc.)
+* when that selector is not a part of a `@supports` selector rule _or_ if the selector
+* is a part of the rule's declaration.
+*
+* For instance, if we create the regex with the selector ':host-context':
+* - '@supports selector(:host-context())' will return no matches (starts with '@supports')
+* - '@supports selector(:host-context()) { :host-context() { ... }}' will match the second ':host-context' (part of declaration)
+* - ':host-context() { ... }' will match ':host-context' (selector is not a '@supports' rule)
+* - ':host() { ... }' will return no matches (selector doesn't match selector used to create regex)
+*
+* @param selector The CSS selector we want to match for replacement
+* @returns A look-behind regex containing the selector
+*/
+const createSupportsRuleRe = (selector) => {
+	const safeSelector = escapeRegExpSpecialCharacters(selector);
+	return new RegExp(`(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector}))(${safeSelector}\\b)`, "g");
+};
+const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
+const stripComments = (input) => {
+	return input.replace(_commentRe, "");
+};
+const _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
+const extractCommentsWithHash = (input) => {
+	return input.match(_commentWithHashRe) || [];
+};
+const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
+const _curlyRe = /([{}])/g;
+const _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/;
+const OPEN_CURLY = "{";
+const CLOSE_CURLY = "}";
+const BLOCK_PLACEHOLDER = "%BLOCK%";
+const processRules = (input, ruleCallback) => {
+	const inputWithEscapedBlocks = escapeBlocks(input);
+	let nextBlockIndex = 0;
+	return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
+		const selector = m[2];
+		let content = "";
+		let suffix = m[4];
+		let contentPrefix = "";
+		if (suffix && suffix.startsWith("{" + BLOCK_PLACEHOLDER)) {
+			content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
+			suffix = suffix.substring(8);
+			contentPrefix = "{";
+		}
+		const rule = ruleCallback({
+			selector,
+			content
+		});
+		return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
+	});
+};
+const escapeBlocks = (input) => {
+	const inputParts = input.split(_curlyRe);
+	const resultParts = [];
+	const escapedBlocks = [];
+	let bracketCount = 0;
+	let currentBlockParts = [];
+	for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
+		const part = inputParts[partIndex];
+		if (part === CLOSE_CURLY) bracketCount--;
+		if (bracketCount > 0) currentBlockParts.push(part);
+		else {
+			if (currentBlockParts.length > 0) {
+				escapedBlocks.push(currentBlockParts.join(""));
+				resultParts.push(BLOCK_PLACEHOLDER);
+				currentBlockParts = [];
+			}
+			resultParts.push(part);
+		}
+		if (part === OPEN_CURLY) bracketCount++;
+	}
+	if (currentBlockParts.length > 0) {
+		escapedBlocks.push(currentBlockParts.join(""));
+		resultParts.push(BLOCK_PLACEHOLDER);
+	}
+	return {
+		escapedString: resultParts.join(""),
+		blocks: escapedBlocks
+	};
+};
+/**
+* Replaces certain strings within the CSS with placeholders
+* that will later be replaced with class selectors appropriate
+* for the level of encapsulation (shadow or scoped).
+*
+* When performing these replacements, we want to ignore selectors that are a
+* part of an `@supports` rule. Replacing these selectors will result in invalid
+* CSS that gets passed to autoprefixer/postcss once the placeholders are replaced.
+* For example, a rule like:
+*
+* ```css
+* @supports selector(:host()) {
+*   :host {
+*     color: red;
+*   }
+* }
+* ```
+*
+* Should be converted to:
+*
+* ```css
+* @supports selector(:host()) {
+*   -shadowcsshost {
+*     color: red;
+*   }
+* }
+* ```
+*
+* The order the regex replacements happen in matters since we match
+* against a whole selector word so we need to match all of `:host-context`
+* before we try to replace `:host`. Otherwise the pattern for `:host` would match
+* `:host-context` resulting in something like `:-shadowcsshost-context`.
+*
+* @param cssText A CSS string for a component
+* @returns The modified CSS string
+*/
+const insertPolyfillHostInCssText = (cssText) => {
+	const supportsBlocks = [];
+	cssText = cssText.replace(/@supports\s+selector\s*\(\s*([^)]*)\s*\)/g, (_, selectorContent) => {
+		const placeholder = `__supports_${supportsBlocks.length}__`;
+		supportsBlocks.push(selectorContent);
+		return `@supports selector(${placeholder})`;
+	});
+	const _colonSlottedRe = createSupportsRuleRe("::slotted");
+	const _colonHostRe = createSupportsRuleRe(":host");
+	const _colonHostContextRe = createSupportsRuleRe(":host-context");
+	cssText = cssText.replace(_colonHostContextRe, `$1${_polyfillHostContext}`).replace(_colonHostRe, `$1${_polyfillHost}`).replace(_colonSlottedRe, `$1${_polyfillSlotted}`);
+	supportsBlocks.forEach((originalSelector, index) => {
+		cssText = cssText.replace(`__supports_${index}__`, originalSelector);
+	});
+	return cssText;
+};
+const convertColonRule = (cssText, regExp, partReplacer) => {
+	return cssText.replace(regExp, (...m) => {
+		if (m[2]) {
+			const parts = m[2].split(",");
+			const r = [];
+			for (let i = 0; i < parts.length; i++) {
+				const p = parts[i].trim();
+				if (!p) break;
+				r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
+			}
+			return r.join(",");
+		} else return _polyfillHostNoCombinator + m[3];
+	});
+};
+const colonHostPartReplacer = (host, part, suffix) => {
+	return host + part.replace(_polyfillHost, "") + suffix;
+};
+const convertColonHost = (cssText) => {
+	return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
+};
+const colonHostContextPartReplacer = (host, part, suffix) => {
+	if (part.indexOf(_polyfillHost) > -1) return colonHostPartReplacer(host, part, suffix);
+	else return host + part + suffix + ", " + part + " " + host + suffix;
+};
+const convertColonSlotted = (cssText, slotScopeId) => {
+	const slotClass = "." + slotScopeId + " > ";
+	const selectors = [];
+	cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
+		if (m[2]) {
+			const compound = m[2].trim();
+			const suffix = m[3];
+			const slottedSelector = slotClass + compound + suffix;
+			let prefixSelector = "";
+			for (let i = m[4] - 1; i >= 0; i--) {
+				const char = m[5][i];
+				if (char === "}" || char === ",") break;
+				prefixSelector = char + prefixSelector;
+			}
+			const orgSelector = (prefixSelector + slottedSelector).trim();
+			const addedSelector = `${prefixSelector.trimEnd()}${slottedSelector.trim()}`.trim();
+			if (orgSelector !== addedSelector) {
+				const updatedSelector = `${addedSelector}, ${orgSelector}`;
+				selectors.push({
+					orgSelector,
+					updatedSelector
+				});
+			}
+			return slottedSelector;
+		} else return _polyfillHostNoCombinator + m[3];
+	});
+	return {
+		selectors,
+		cssText
+	};
+};
+const convertColonHostContext = (cssText) => {
+	return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
+};
+const convertShadowDOMSelectors = (cssText) => {
+	return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, " "), cssText);
+};
+const makeScopeMatcher = (scopeSelector) => {
+	scopeSelector = scopeSelector.replace(/\[/g, "\\[").replace(/\]/g, "\\]");
+	return new RegExp("^(" + scopeSelector + ")([>\\s~+[.,{:][\\s\\S]*)?$", "m");
+};
+const selectorNeedsScoping = (selector, scopeSelector) => {
+	return !makeScopeMatcher(scopeSelector).test(selector);
+};
+const injectScopingSelector = (selector, scopingSelector) => {
+	return selector.replace(_selectorPartsRe, (_, before = "", _colonGroup, colon = "", after = "") => {
+		return before + scopingSelector + colon + after;
+	});
+};
+const applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {
+	_polyfillHostRe.lastIndex = 0;
+	if (_polyfillHostRe.test(selector)) {
+		const replaceBy = `.${hostSelector}`;
+		return selector.replace(_polyfillHostNoCombinatorRe, (_, selector) => injectScopingSelector(selector, replaceBy)).replace(_polyfillHostRe, replaceBy + " ");
+	}
+	return scopeSelector + " " + selector;
+};
+const applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {
+	scopeSelector = scopeSelector.replace(/\[is=([^\]]*)\]/g, (_, ...parts) => parts[0]);
+	const className = "." + scopeSelector;
+	const _scopeSelectorPart = (p) => {
+		let scopedP = p.trim();
+		if (!scopedP) return "";
+		if (p.indexOf(_polyfillHostNoCombinator) > -1) scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);
+		else {
+			const t = p.replace(_polyfillHostRe, "");
+			if (t.length > 0) scopedP = injectScopingSelector(t, className);
+		}
+		return scopedP;
+	};
+	const safeContent = safeSelector(selector);
+	selector = safeContent.content;
+	let scopedSelector = "";
+	let startIndex = 0;
+	let res;
+	const sep = /( |>|\+|~(?!=))(?=(?:[^()]*\([^()]*\))*[^()]*$)\s*/g;
+	let shouldScope = !(selector.indexOf(_polyfillHostNoCombinator) > -1);
+	while ((res = sep.exec(selector)) !== null) {
+		const separator = res[1];
+		const part = selector.slice(startIndex, res.index).trim();
+		shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+		const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;
+		scopedSelector += `${scopedPart} ${separator} `;
+		startIndex = sep.lastIndex;
+	}
+	const part = selector.substring(startIndex);
+	shouldScope = !part.match(_safePartRe) && (shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1);
+	scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
+	return restoreSafeSelector(safeContent.placeholders, scopedSelector);
+};
+const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {
+	return selector.split(",").map((shallowPart) => {
+		if (slotSelector && shallowPart.indexOf("." + slotSelector) > -1) return shallowPart.trim();
+		if (selectorNeedsScoping(shallowPart, scopeSelectorText)) return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
+		else return shallowPart.trim();
+	}).join(", ");
+};
+const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
+	return processRules(cssText, (rule) => {
+		let selector = rule.selector;
+		let content = rule.content;
+		if (rule.selector[0] !== "@") selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
+		else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector);
+		return {
+			selector: selector.replace(/\s{2,}/g, " ").trim(),
+			content
+		};
+	});
+};
+const scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => {
+	cssText = insertPolyfillHostInCssText(cssText);
+	cssText = convertColonHost(cssText);
+	cssText = convertColonHostContext(cssText);
+	const slotted = convertColonSlotted(cssText, slotScopeId);
+	cssText = slotted.cssText;
+	cssText = convertShadowDOMSelectors(cssText);
+	if (scopeId) cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
+	cssText = replaceShadowCssHost(cssText, hostScopeId);
+	cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, " $1 ");
+	return {
+		cssText: cssText.trim(),
+		slottedSelectors: slotted.selectors.map((ref) => ({
+			orgSelector: replaceShadowCssHost(ref.orgSelector, hostScopeId),
+			updatedSelector: replaceShadowCssHost(ref.updatedSelector, hostScopeId)
+		}))
+	};
+};
+/**
+* Helper function that replaces the interim string representing a `:host` selector with
+* the host scope selector class for the element.
+*
+* @param cssText The CSS string to make the replacement in
+* @param hostScopeId The scope ID that will be used as the class representing the host element
+* @returns CSS with the selector replaced
+*/
+const replaceShadowCssHost = (cssText, hostScopeId) => {
+	return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
+};
+/**
+* Expands selectors with ::part(...) to also include [part~="..."] selectors.
+* For example:
+* ```css
+*   selectors-like-this::part(demo) { ... }
+*   .something .selectors::part(demo demo2):hover { ... }
+* ```
+* Becomes:
+* ```
+* selectors-like-this::part(demo), selectors-like-this [part~="demo"] { ... }
+* .something .selectors::part(demo demo2):hover, .something .selectors [part~="demo"][part~="demo2"]:hover { ... }
+* ```
+*
+* @param cssText The CSS text to process
+* @returns The CSS text with expanded ::part(...) selectors
+*/
+const expandPartSelectors = (cssText) => {
+	const partSelectorRe = /([^\s,{][^,{]*?)::part\(\s*([^)]+?)\s*\)((?:[:.][^,{]*)*)/g;
+	return processRules(cssText, (rule) => {
+		if (rule.selector[0] === "@") return rule;
+		rule.selector = rule.selector.split(",").map((sel) => {
+			const out = [sel.trim()];
+			let m;
+			while ((m = partSelectorRe.exec(sel)) !== null) {
+				const before = m[1].trimEnd();
+				const partNames = m[2].trim().split(/\s+/);
+				const after = m[3] || "";
+				const partAttr = partNames.flatMap((p) => {
+					if (!rule.selector.includes(`[part~="${p}"]`)) return [`[part~="${p}"]`];
+					return [];
+				}).join("");
+				const expanded = `${before} ${partAttr}${after}`;
+				if (!!partAttr && expanded !== sel.trim()) out.push(expanded);
+			}
+			return out.join(", ");
+		}).join(", ");
+		return rule;
+	});
+};
+const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
+	const hostScopeId = scopeId + "-h";
+	const slotScopeId = scopeId + "-s";
+	const commentsWithHash = extractCommentsWithHash(cssText);
+	cssText = stripComments(cssText);
+	const orgSelectors = [];
+	if (commentOriginalSelector) {
+		const processCommentedSelector = (rule) => {
+			const placeholder = `/*!@___${orgSelectors.length}___*/`;
+			const comment = `/*!@${rule.selector}*/`;
+			orgSelectors.push({
+				placeholder,
+				comment
+			});
+			rule.selector = placeholder + rule.selector;
+			return rule;
+		};
+		cssText = processRules(cssText, (rule) => {
+			if (rule.selector[0] !== "@") return processCommentedSelector(rule);
+			else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
+				rule.content = processRules(rule.content, processCommentedSelector);
+				return rule;
+			}
+			return rule;
+		});
+	}
+	const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector);
+	cssText = [scoped.cssText, ...commentsWithHash].join("\n");
+	if (commentOriginalSelector) orgSelectors.forEach(({ placeholder, comment }) => {
+		cssText = cssText.replace(placeholder, comment);
+	});
+	scoped.slottedSelectors.forEach((slottedSelector) => {
+		const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector) + "(?=\\s*[,{]|$)", "g");
+		cssText = cssText.replace(regex, slottedSelector.updatedSelector);
+	});
+	cssText = expandPartSelectors(cssText);
+	return cssText;
+};
+
+//#endregion
+//#region src/runtime/mode.ts
+const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
+const setMode = (handler) => modeResolutionChain.push(handler);
+const getMode = (ref) => getHostRef(ref)?.$modeName$;
+
+//#endregion
+//#region src/utils/remote-value.ts
+/**
+* RemoteValue class for deserializing LocalValue serialized objects back into their original form
+* @deprecated will be removed in v5. Use `@AttrDeserialize()` / `@PropDeserialize()` decorators instead.
+*/
+var RemoteValue = class RemoteValue {
+	/**
+	* Deserializes a LocalValue serialized object back to its original JavaScript representation
+	*
+	* @param serialized The serialized LocalValue object
+	* @returns The original JavaScript value/object
+	*/
+	static fromLocalValue(serialized) {
+		const type = serialized[TYPE_CONSTANT];
+		const value = VALUE_CONSTANT in serialized ? serialized[VALUE_CONSTANT] : void 0;
+		switch (type) {
+			case PrimitiveType.String: return value;
+			case PrimitiveType.Boolean: return value;
+			case PrimitiveType.BigInt: return BigInt(value);
+			case PrimitiveType.Undefined: return;
+			case PrimitiveType.Null: return null;
+			case PrimitiveType.Number:
+				if (value === "NaN") return NaN;
+				if (value === "-0") return -0;
+				if (value === "Infinity") return Infinity;
+				if (value === "-Infinity") return -Infinity;
+				return value;
+			case NonPrimitiveType.Array: return value.map((item) => RemoteValue.fromLocalValue(item));
+			case NonPrimitiveType.Date: return new Date(value);
+			case NonPrimitiveType.Map:
+				const map = /* @__PURE__ */ new Map();
+				for (const [key, val] of value) {
+					const deserializedKey = typeof key === "object" && key !== null ? RemoteValue.fromLocalValue(key) : key;
+					const deserializedValue = RemoteValue.fromLocalValue(val);
+					map.set(deserializedKey, deserializedValue);
+				}
+				return map;
+			case NonPrimitiveType.Object:
+				const obj = {};
+				for (const [key, val] of value) obj[key] = RemoteValue.fromLocalValue(val);
+				return obj;
+			case NonPrimitiveType.RegularExpression:
+				const { pattern, flags } = value;
+				return new RegExp(pattern, flags);
+			case NonPrimitiveType.Set:
+				const set = /* @__PURE__ */ new Set();
+				for (const item of value) set.add(RemoteValue.fromLocalValue(item));
+				return set;
+			case NonPrimitiveType.Symbol: return Symbol(value);
+			default: throw new Error(`Unsupported type: ${type}`);
+		}
+	}
+	/**
+	* Utility method to deserialize multiple LocalValues at once
+	*
+	* @param serializedValues Array of serialized LocalValue objects
+	* @returns Array of deserialized JavaScript values
+	*/
+	static fromLocalValueArray(serializedValues) {
+		return serializedValues.map((value) => RemoteValue.fromLocalValue(value));
+	}
+	/**
+	* Verifies if the given object matches the structure of a serialized LocalValue
+	*
+	* @param obj Object to verify
+	* @returns boolean indicating if the object has LocalValue structure
+	*/
+	static isLocalValueObject(obj) {
+		if (typeof obj !== "object" || obj === null) return false;
+		if (!obj.hasOwnProperty(TYPE_CONSTANT)) return false;
+		const type = obj[TYPE_CONSTANT];
+		if (!Object.values({
+			...PrimitiveType,
+			...NonPrimitiveType
+		}).includes(type)) return false;
+		if (type !== PrimitiveType.Null && type !== PrimitiveType.Undefined) return obj.hasOwnProperty(VALUE_CONSTANT);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/utils/serialize.ts
+/**
+* Deserialize a value from a string that was serialized earlier.
+* @param {string} value - The string to deserialize.
+* @returns {unknown} The deserialized value.
+* @deprecated will be removed in v5. Use `@AttrDeserialize()` decorator instead.
+*/
+function deserializeProperty(value) {
+	if (typeof value !== "string" || !value.startsWith(SERIALIZED_PREFIX)) return value;
+	return RemoteValue.fromLocalValue(JSON.parse(atob(value.slice(SERIALIZED_PREFIX.length))));
+}
+
+//#endregion
+//#region src/runtime/parse-property-value.ts
+/**
+* Parse a new property value for a given property type.
+*
+* While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
+* it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
+*   1. `any`, the type given to `propValue` in the function signature
+*   2. the type stored from `propType`.
+*
+* This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
+*
+* Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
+* a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
+* based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
+* ```tsx
+* <my-cmp prop-val={0}></my-cmp>
+* ```
+*
+* HTML prop values on the other hand, will always a string
+*
+* @param propValue the new value to coerce to some type
+* @param propType the type of the prop, expressed as a binary number
+* @param isFormAssociated whether the component is form-associated (optional)
+* @returns the parsed/coerced value
+*/
+const parsePropertyValue = (propValue, propType, isFormAssociated) => {
+	/**
+	* Allow hydrate parameters that contain a complex non-serialized values.
+	* This is SSR-specific and should only run during hydration.
+	*/
+	if ((BUILD.hydrateClientSide || BUILD.hydrateServerSide) && typeof propValue === "string" && propValue.startsWith(SERIALIZED_PREFIX)) {
+		propValue = deserializeProperty(propValue);
+		return propValue;
+	}
+	if (propValue != null && !isComplexType(propValue)) {
+		/**
+		* ensure this value is of the correct prop type
+		*/
+		if (BUILD.propBoolean && propType & MEMBER_FLAGS.Boolean)
+ /**
+		* For form-associated components, according to HTML spec, the presence of any boolean attribute
+		* (regardless of its value, even "false") should make the property true.
+		* For non-form-associated components, we maintain the legacy behavior where "false" becomes false.
+		*/
+		if (BUILD.formAssociated && isFormAssociated && typeof propValue === "string") return propValue === "" || !!propValue;
+		else return propValue === "false" ? false : propValue === "" || !!propValue;
+		/**
+		* force it to be a number
+		*/
+		if (BUILD.propNumber && propType & MEMBER_FLAGS.Number) return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
+		/**
+		* could have been passed as a number or boolean but we still want it as a string
+		*/
+		if (BUILD.propString && propType & MEMBER_FLAGS.String) return String(propValue);
+		return propValue;
+	}
+	/**
+	* not sure exactly what type we want so no need to change to a different type
+	*/
+	return propValue;
+};
+
+//#endregion
+//#region src/runtime/element.ts
+const getElement = (ref) => BUILD.lazyLoad ? getHostRef(ref)?.$hostElement$ : ref;
+
+//#endregion
+//#region src/runtime/event-emitter.ts
+const createEvent = (ref, name, flags) => {
+	const elm = getElement(ref);
+	return { emit: (detail) => {
+		if (BUILD.isDev && !elm.isConnected) consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
+		return emitEvent(elm, name, {
+			bubbles: !!(flags & EVENT_FLAGS.Bubbles),
+			composed: !!(flags & EVENT_FLAGS.Composed),
+			cancelable: !!(flags & EVENT_FLAGS.Cancellable),
+			detail
+		});
+	} };
+};
+/**
+* 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;
+};
+
+//#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
+*/
+/**
+* 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;
+	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(CAPTURE_EVENT_REGEX, "");
+			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 (e) {}
+		return;
+	} else if (BUILD.vdomPropOrAttr) {
+		const isComplex = isComplexType(newValue);
+		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 (e) {}
+		/**
+		* 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) === "") 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);
+		}
+	}
+};
+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";
+const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
+
+//#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 elm = newVnode.$elm$.nodeType === NODE_TYPE.DocumentFragment && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
+	const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || {};
+	const newVnodeAttrs = newVnode.$attrs$ || {};
+	if (BUILD.updatable) {
+		for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) if (!(memberName in newVnodeAttrs)) setAccessor(elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode, newVnode.$flags$, isInitialRender);
+	}
+	for (const memberName of sortedAttrNames(Object.keys(newVnodeAttrs))) 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) {
+	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).
+*/
+let refCallbacksToRemove = [];
+let refCallbacksToAttach = [];
+/**
+* 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` : `"${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$);
+	else if (BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotReference) {
+		elm = newVNode.$elm$ = BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : win.document.createTextNode("");
+		if (BUILD.vdomAttribute) updateElement(null, newVNode, isSvgMode);
+	} else {
+		if (BUILD.svg && !isSvgMode) isSvgMode = newVNode.$tag$ === "svg";
+		if (!win.document) throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");
+		elm = newVNode.$elm$ = BUILD.svg ? win.document.createElementNS(isSvgMode ? SVG_NS : HTML_NS, !useNativeShadowDom && BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotFallback ? "slot-fb" : newVNode.$tag$) : win.document.createElement(!useNativeShadowDom && BUILD.slotRelocation && newVNode.$flags$ & VNODE_FLAGS.isSlotFallback ? "slot-fb" : newVNode.$tag$);
+		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.shadowRoot && containerElm.tagName === hostTagName) containerElm = containerElm.shadowRoot;
+	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 (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 = [];
+/**
+* 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));
+		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") {
+			if (BUILD.experimentalSlotFixes && 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 (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 scopeId;
+	if (reference && typeof slotNode["s-sn"] === "string" && !!slotNode["s-sr"] && reference.parentNode && reference.parentNode["s-sc"] && (scopeId = slotNode["s-si"] || reference.parentNode["s-sc"])) {
+		const scopeName = slotNode["s-sn"];
+		const hostName = slotNode["s-hn"];
+		newParent.classList?.add(scopeId + "-s");
+		if (oldParent && oldParent.classList?.contains(scopeId + "-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(scopeId + "-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 ? hostElm.shadowRoot || hostElm : hostElm;
+	if (BUILD.scoped || BUILD.shadowDom) scopeId = hostElm["s-sc"];
+	useNativeShadowDom = supportsShadow && !!(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$);
+			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 ?? false;
+				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;
+						}
+					}
+					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"]) {
+			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
+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();
+		}));
+	}
+};
+const scheduleUpdate = (hostRef, isInitialLoad) => {
+	if (BUILD.taskQueue && 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) {
+		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) throw new Error(`Can't render component <${elm.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);
+	let maybePromise;
+	if (isInitialLoad) {
+		if (BUILD.lazyLoad) {
+			if (BUILD.slotRelocation && hostRef.$deferredConnectedCallback$) {
+				hostRef.$deferredConnectedCallback$ = false;
+				safeCall(instance, "connectedCallback", void 0, elm);
+			}
+			if (BUILD.hostListener) {
+				hostRef.$flags$ |= HOST_FLAGS.isListenReady;
+				if (hostRef.$queuedListeners$) {
+					hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
+					hostRef.$queuedListeners$ = void 0;
+				}
+			}
+			if (hostRef.$fetchedCbList$.length) hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
+		}
+		emitLifecycleEvent(elm, "componentWillLoad");
+		maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
+	} else {
+		emitLifecycleEvent(elm, "componentWillUpdate");
+		maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
+	}
+	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) => isPromisey(maybePromise) ? maybePromise.then(fn).catch((err) => {
+	console.error(err);
+	fn();
+}) : fn();
+/**
+* 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
+*/
+const updateComponent = async (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) await callRender(hostRef, instance, elm, isInitialLoad);
+	else callRender(hostRef, instance, elm, isInitialLoad);
+	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 ? true : false;
+	const lazyLoad = BUILD.lazyLoad ? true : false;
+	const taskQueue = BUILD.taskQueue ? true : false;
+	const updatable = BUILD.updatable ? true : false;
+	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 && taskQueue) 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;
+	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;
+		emitLifecycleEvent(elm, "componentDidLoad");
+		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;
+		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: NAMESPACE } }));
+	if (BUILD.hydrateClientSide) {
+		if (plt.$orgLocNodes$?.size) plt.$orgLocNodes$.clear();
+	}
+	if (BUILD.profile && performance.measure) performance.measure(`[Stencil] ${NAMESPACE} 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: NAMESPACE }
+	});
+};
+/**
+* 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/set-value.ts
+const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
+const setValue = (ref, propName, newVal, cmpMeta) => {
+	const hostRef = getHostRef(ref);
+	if (!hostRef) return;
+	/**
+	* If the host element is not found, let's fail with a better error message and provide
+	* details on why this may happen. In certain cases, e.g. see https://github.com/stenciljs/core/issues/5457,
+	* users might import a component through e.g. a loader script, which causes confusions in runtime
+	* as there are multiple runtimes being loaded and/or different components used with different
+	* loading strategies, e.g. lazy vs implicitly loaded.
+	*
+	* Todo(STENCIL-1308): remove, once a solution for this was identified and implemented
+	*/
+	if (BUILD.lazyLoad && !hostRef) throw new Error(`Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`);
+	if (BUILD.serializer && hostRef.$serializerValues$.has(propName) && hostRef.$serializerValues$.get(propName) === newVal) return;
+	const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : ref;
+	const oldVal = hostRef.$instanceValues$.get(propName);
+	const flags = hostRef.$flags$;
+	const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
+	newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0], BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+	const didValueChange = newVal !== oldVal && !(Number.isNaN(oldVal) && Number.isNaN(newVal));
+	if ((!BUILD.lazyLoad || !(flags & HOST_FLAGS.isConstructingInstance) || oldVal === void 0) && didValueChange) {
+		hostRef.$instanceValues$.set(propName, newVal);
+		if (BUILD.serializer && BUILD.reflect && cmpMeta.$attrsToReflect$) {
+			if (cmpMeta.$serializers$ && cmpMeta.$serializers$[propName]) {
+				const runSerializer = (inst) => {
+					let attrVal = newVal;
+					for (const serializer of cmpMeta.$serializers$[propName]) {
+						const [[methodName]] = Object.entries(serializer);
+						attrVal = inst[methodName](attrVal, propName);
+					}
+					hostRef.$serializerValues$.set(propName, attrVal);
+				};
+				if (instance) runSerializer(instance);
+				else hostRef.$fetchedCbList$.push(() => {
+					runSerializer(hostRef.$lazyInstance$);
+				});
+			}
+		}
+		if (BUILD.isDev) {
+			if (hostRef.$flags$ & HOST_FLAGS.devOnRender) consoleDevWarn(`The state/prop "${propName}" changed during rendering. This can potentially lead to infinite-loops and other bugs.`, "\nElement", elm, "\nNew value", newVal, "\nOld value", oldVal);
+			else if (hostRef.$flags$ & HOST_FLAGS.devOnDidLoad) consoleDevWarn(`The state/prop "${propName}" changed during "componentDidLoad()", this triggers extra re-renders, try to setup on "componentWillLoad()"`, "\nElement", elm, "\nNew value", newVal, "\nOld value", oldVal);
+		}
+		if (BUILD.propChangeCallback && cmpMeta.$watchers$) {
+			const watchMethods = cmpMeta.$watchers$[propName];
+			if (watchMethods) watchMethods.map((watcher) => {
+				try {
+					const [[watchMethodName, watcherFlags]] = Object.entries(watcher);
+					if (flags & HOST_FLAGS.isWatchReady || watcherFlags & WATCH_FLAGS.Immediate) if (!instance) hostRef.$fetchedCbList$.push(() => {
+						hostRef.$lazyInstance$[watchMethodName](newVal, oldVal, propName);
+					});
+					else instance[watchMethodName](newVal, oldVal, propName);
+				} catch (e) {
+					consoleError(e, elm);
+				}
+			});
+		}
+		if (BUILD.updatable && flags & HOST_FLAGS.hasRendered) {
+			if (instance.componentShouldUpdate) {
+				if (instance.componentShouldUpdate(newVal, oldVal, propName) === false && !(flags & HOST_FLAGS.isQueuedForUpdate)) return;
+			}
+			if (!(flags & HOST_FLAGS.isQueuedForUpdate)) scheduleUpdate(hostRef, false);
+		}
+	}
+};
+
+//#endregion
+//#region src/runtime/proxy-component.ts
+/**
+* Attach a series of runtime constructs to a compiled Stencil component
+* constructor, including getters and setters for the `@Prop` and `@State`
+* decorators, callbacks for when attributes change, and so on.
+*
+* On a lazy loaded component, this is wired up to both the class instance
+* and the element separately. A `hostRef` keeps the 2 in sync.
+*
+* On a traditional component, this is wired up to the element only.
+*
+* @param Cstr the constructor for a component that we need to process
+* @param cmpMeta metadata collected previously about the component
+* @param flags a number used to store a series of bit flags
+* @returns a reference to the same constructor passed in (but now mutated)
+*/
+const proxyComponent = (Cstr, cmpMeta, flags) => {
+	const prototype = Cstr.prototype;
+	if (BUILD.isTesting) {
+		if (prototype.__stencilAugmented) return;
+		prototype.__stencilAugmented = true;
+	}
+	/**
+	* proxy form associated custom element lifecycle callbacks
+	* @ref https://web.dev/articles/more-capable-form-controls#lifecycle_callbacks
+	*/
+	if (BUILD.formAssociated && cmpMeta.$flags$ & CMP_FLAGS.formAssociated && flags & PROXY_FLAGS.isElementConstructor) FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach((cbName) => {
+		const originalFormAssociatedCallback = prototype[cbName];
+		Object.defineProperty(prototype, cbName, { value(...args) {
+			const hostRef = getHostRef(this);
+			const instance = BUILD.lazyLoad ? hostRef?.$lazyInstance$ : this;
+			if (!instance) hostRef?.$onReadyPromise$?.then((asyncInstance) => {
+				const cb = asyncInstance[cbName];
+				typeof cb === "function" && cb.call(asyncInstance, ...args);
+			});
+			else {
+				const cb = BUILD.lazyLoad ? instance[cbName] : originalFormAssociatedCallback;
+				typeof cb === "function" && cb.call(instance, ...args);
+			}
+		} });
+	});
+	if (BUILD.member && cmpMeta.$members$ || BUILD.propChangeCallback) {
+		if (BUILD.propChangeCallback) {
+			if (Cstr.watchers && !cmpMeta.$watchers$) cmpMeta.$watchers$ = Cstr.watchers;
+			if (Cstr.deserializers && !cmpMeta.$deserializers$) cmpMeta.$deserializers$ = Cstr.deserializers;
+			if (Cstr.serializers && !cmpMeta.$serializers$) cmpMeta.$serializers$ = Cstr.serializers;
+		}
+		const members = Object.entries(cmpMeta.$members$ ?? {});
+		members.map(([memberName, [memberFlags]]) => {
+			if ((BUILD.prop || BUILD.state) && (memberFlags & MEMBER_FLAGS.Prop || (!BUILD.lazyLoad || flags & PROXY_FLAGS.proxyState) && memberFlags & MEMBER_FLAGS.State)) {
+				const { get: origGetter, set: origSetter } = getPropertyDescriptor(prototype, memberName) || {};
+				if (origGetter) cmpMeta.$members$[memberName][0] |= MEMBER_FLAGS.Getter;
+				if (origSetter) cmpMeta.$members$[memberName][0] |= MEMBER_FLAGS.Setter;
+				if (flags & PROXY_FLAGS.isElementConstructor || !origGetter) Object.defineProperty(prototype, memberName, {
+					get() {
+						if (BUILD.lazyLoad) {
+							if ((cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Getter) === 0) return getValue(this, memberName);
+							const ref = getHostRef(this);
+							const instance = ref ? ref.$lazyInstance$ : prototype;
+							if (!instance) return;
+							return instance[memberName];
+						}
+						if (!BUILD.lazyLoad) return origGetter ? origGetter.apply(this) : getValue(this, memberName);
+					},
+					configurable: true,
+					enumerable: true
+				});
+				Object.defineProperty(prototype, memberName, { set(newValue) {
+					const ref = getHostRef(this);
+					if (!ref) return;
+					if (BUILD.isDev) {
+						if ((flags & PROXY_FLAGS.isElementConstructor) === 0 && (cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Setter) === 0 && (ref && ref.$flags$ & HOST_FLAGS.isConstructingInstance) === 0 && (memberFlags & MEMBER_FLAGS.Prop) !== 0 && (memberFlags & MEMBER_FLAGS.Mutable) === 0) consoleDevWarn(`@Prop() "${memberName}" on <${cmpMeta.$tagName$}> is immutable but was modified from within the component.\nMore information: https://stenciljs.com/docs/properties#prop-mutability`);
+					}
+					if (origSetter) {
+						if (typeof (memberFlags & MEMBER_FLAGS.State ? this[memberName] : ref.$hostElement$[memberName]) === "undefined" && ref.$instanceValues$.get(memberName)) newValue = ref.$instanceValues$.get(memberName);
+						origSetter.apply(this, [parsePropertyValue(newValue, memberFlags, BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated))]);
+						newValue = memberFlags & MEMBER_FLAGS.State ? this[memberName] : ref.$hostElement$[memberName];
+						setValue(this, memberName, newValue, cmpMeta);
+						return;
+					}
+					if (!BUILD.lazyLoad) {
+						setValue(this, memberName, newValue, cmpMeta);
+						return;
+					}
+					if (BUILD.lazyLoad) {
+						if ((flags & PROXY_FLAGS.isElementConstructor) === 0 || (cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Setter) === 0) {
+							setValue(this, memberName, newValue, cmpMeta);
+							if (flags & PROXY_FLAGS.isElementConstructor && !ref.$lazyInstance$) ref.$fetchedCbList$.push(() => {
+								if (cmpMeta.$members$[memberName][0] & MEMBER_FLAGS.Setter && ref.$lazyInstance$[memberName] !== ref.$instanceValues$.get(memberName)) ref.$lazyInstance$[memberName] = newValue;
+							});
+							return;
+						}
+						const setterSetVal = () => {
+							const currentValue = ref.$lazyInstance$[memberName];
+							if (!ref.$instanceValues$.get(memberName) && currentValue) ref.$instanceValues$.set(memberName, currentValue);
+							ref.$lazyInstance$[memberName] = parsePropertyValue(newValue, memberFlags, BUILD.formAssociated && !!(cmpMeta.$flags$ & CMP_FLAGS.formAssociated));
+							setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
+						};
+						if (ref.$lazyInstance$) setterSetVal();
+						else ref.$fetchedCbList$.push(() => {
+							setterSetVal();
+						});
+					}
+				} });
+			} else if (BUILD.lazyLoad && BUILD.method && flags & PROXY_FLAGS.isElementConstructor && memberFlags & MEMBER_FLAGS.Method) Object.defineProperty(prototype, memberName, { value(...args) {
+				const ref = getHostRef(this);
+				return ref?.$onInstancePromise$?.then(() => ref.$lazyInstance$?.[memberName](...args));
+			} });
+		});
+		if (BUILD.observeAttribute && (!BUILD.lazyLoad || flags & PROXY_FLAGS.isElementConstructor)) {
+			const attrNameToPropName = /* @__PURE__ */ new Map();
+			prototype.attributeChangedCallback = function(attrName, oldValue, newValue) {
+				plt.jmp(() => {
+					const propName = attrNameToPropName.get(attrName);
+					const hostRef = getHostRef(this);
+					if (BUILD.serializer && hostRef.$serializerValues$.has(propName) && hostRef.$serializerValues$.get(propName) === newValue) return;
+					if (this.hasOwnProperty(propName) && BUILD.lazyLoad) {
+						newValue = this[propName];
+						delete this[propName];
+					}
+					if (BUILD.deserializer && cmpMeta.$deserializers$ && cmpMeta.$deserializers$[propName]) {
+						const setVal = (methodName, instance) => {
+							const deserializeVal = instance?.[methodName](newValue, propName);
+							if (deserializeVal !== this[propName]) this[propName] = deserializeVal;
+						};
+						for (const deserializer of cmpMeta.$deserializers$[propName]) {
+							const [[methodName]] = Object.entries(deserializer);
+							if (BUILD.lazyLoad) if (hostRef.$lazyInstance$) setVal(methodName, hostRef.$lazyInstance$);
+							else hostRef.$fetchedCbList$.push(() => {
+								setVal(methodName, hostRef.$lazyInstance$);
+							});
+							else setVal(methodName, this);
+						}
+						return;
+					} else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && this[propName] == newValue) return;
+					else if (propName == null) {
+						const flags = hostRef?.$flags$;
+						if (hostRef && flags && !(flags & HOST_FLAGS.isConstructingInstance) && newValue !== oldValue) {
+							const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : this;
+							const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
+							(cmpMeta.$watchers$?.[attrName])?.forEach((watcher) => {
+								const [[watchMethodName, watcherFlags]] = Object.entries(watcher);
+								if (instance[watchMethodName] != null && (flags & HOST_FLAGS.isWatchReady || watcherFlags & WATCH_FLAGS.Immediate)) instance[watchMethodName].call(instance, newValue, oldValue, attrName);
+							});
+						}
+						return;
+					}
+					const propFlags = members.find(([m]) => m === propName);
+					if (propFlags && propFlags[1][0] & MEMBER_FLAGS.Boolean) newValue = newValue === null || newValue === "false" ? false : true;
+					const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
+					if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) this[propName] = newValue;
+				});
+			};
+			Cstr.observedAttributes = Array.from(new Set([...Object.keys(cmpMeta.$watchers$ ?? {}), ...members.filter(([_, m]) => m[0] & MEMBER_FLAGS.HasAttribute).map(([propName, m]) => {
+				const attrName = m[1] || propName;
+				attrNameToPropName.set(attrName, propName);
+				if (BUILD.reflect && m[0] & MEMBER_FLAGS.ReflectAttr) cmpMeta.$attrsToReflect$?.push([propName, attrName]);
+				return attrName;
+			})]));
+		}
+	}
+	return Cstr;
+};
+
+//#endregion
+//#region src/runtime/initialize-component.ts
+/**
+* Initialize a Stencil component given a reference to its host element, its
+* runtime bookkeeping data structure, runtime metadata about the component,
+* and (optionally) an HMR version ID.
+*
+* @param elm a host element
+* @param hostRef the element's runtime bookkeeping object
+* @param cmpMeta runtime metadata for the Stencil component
+* @param hmrVersionId an (optional) HMR version ID
+*/
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
+	let Cstr;
+	try {
+		if ((hostRef.$flags$ & HOST_FLAGS.hasInitializedComponent) === 0) {
+			hostRef.$flags$ |= HOST_FLAGS.hasInitializedComponent;
+			const bundleId = cmpMeta.$lazyBundleId$;
+			if (BUILD.lazyLoad && bundleId) {
+				const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
+				if (CstrImport && "then" in CstrImport) {
+					const endLoad = uniqueTime(`st:load:${cmpMeta.$tagName$}:${hostRef.$modeName$}`, `[Stencil] Load module for <${cmpMeta.$tagName$}>`);
+					Cstr = await CstrImport;
+					endLoad();
+				} else Cstr = CstrImport;
+				if (!Cstr) throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
+				if (BUILD.member && !Cstr.isProxied) {
+					if (BUILD.propChangeCallback) {
+						cmpMeta.$watchers$ = Cstr.watchers;
+						cmpMeta.$serializers$ = Cstr.serializers;
+						cmpMeta.$deserializers$ = Cstr.deserializers;
+					}
+					proxyComponent(Cstr, cmpMeta, PROXY_FLAGS.proxyState);
+					Cstr.isProxied = true;
+				}
+				const endNewInstance = createTime("createInstance", cmpMeta.$tagName$);
+				if (BUILD.member) hostRef.$flags$ |= HOST_FLAGS.isConstructingInstance;
+				try {
+					new Cstr(hostRef);
+				} catch (e) {
+					consoleError(e, elm);
+				}
+				if (BUILD.member) hostRef.$flags$ &= ~HOST_FLAGS.isConstructingInstance;
+				if (BUILD.propChangeCallback) hostRef.$flags$ |= HOST_FLAGS.isWatchReady;
+				endNewInstance();
+				if (!(BUILD.slotRelocation && cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation)) fireConnectedCallback(hostRef.$lazyInstance$, elm);
+				else hostRef.$deferredConnectedCallback$ = true;
+			} else {
+				Cstr = elm.constructor;
+				/**
+				* Instead of using e.g. `cmpMeta.$tagName$` we use `elm.localName` to get the tag name of the component.
+				* This is because we can't guarantee that the component class is actually registered with the tag name
+				* defined in the component class as users can very well also do this:
+				*
+				* ```html
+				* <script type="module">
+				*   import { MyComponent } from 'my-stencil-component-library';
+				*   customElements.define('my-other-component', MyComponent);
+				* <\/script>
+				* ```
+				*/
+				const cmpTag = elm.localName;
+				customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= HOST_FLAGS.isWatchReady);
+			}
+			if (BUILD.style && Cstr && Cstr.style) {
+				/**
+				* this component has styles but we haven't registered them yet
+				*/
+				let style;
+				if (typeof Cstr.style === "string")
+ /**
+				* in case the component has a `styleUrl` defined, e.g.
+				* ```ts
+				* @Component({
+				*   tag: 'my-component',
+				*   styleUrl: 'my-component.css'
+				* })
+				* ```
+				*/
+				style = Cstr.style;
+				else if (BUILD.mode && typeof Cstr.style !== "string") {
+					/**
+					* in case the component has a `styleUrl` object defined, e.g.
+					* ```ts
+					* @Component({
+					*   tag: 'my-component',
+					*   styleUrl: {
+					*     ios: 'my-component.ios.css',
+					*     md: 'my-component.md.css'
+					*   }
+					* })
+					* ```
+					*/
+					hostRef.$modeName$ = computeMode(elm);
+					if (hostRef.$modeName$) style = Cstr.style[hostRef.$modeName$];
+					if (BUILD.hydrateServerSide && hostRef.$modeName$) elm.setAttribute("s-mode", hostRef.$modeName$);
+				}
+				const scopeId = getScopeId(cmpMeta, hostRef.$modeName$);
+				if (!styles.has(scopeId) || BUILD.hotModuleReplacement && hmrVersionId) {
+					const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
+					if (BUILD.hydrateServerSide && BUILD.shadowDom) {
+						if (cmpMeta.$flags$ & CMP_FLAGS.shadowNeedsScopedCss) style = scopeCss(style, scopeId, true);
+						else if (needsScopedSSR()) style = expandPartSelectors(style);
+					}
+					registerStyle(scopeId, style, !!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation));
+					endRegisterStyles();
+				}
+			}
+		}
+		const ancestorComponent = hostRef.$ancestorComponent$;
+		const schedule = () => scheduleUpdate(hostRef, true);
+		if (BUILD.asyncLoading && ancestorComponent && ancestorComponent["s-rc"]) ancestorComponent["s-rc"].push(schedule);
+		else schedule();
+	} catch (e) {
+		consoleError(e, elm);
+		if (BUILD.asyncLoading && hostRef.$onRenderResolve$) {
+			hostRef.$onRenderResolve$();
+			hostRef.$onRenderResolve$ = void 0;
+		}
+		if (BUILD.asyncLoading && hostRef.$onReadyResolve$) hostRef.$onReadyResolve$(elm);
+	}
+};
+const fireConnectedCallback = (instance, elm) => {
+	if (BUILD.lazyLoad) safeCall(instance, "connectedCallback", void 0, elm);
+};
+
+//#endregion
+//#region src/runtime/connected-callback.ts
+const connectedCallback = (elm) => {
+	if ((plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) {
+		const hostRef = getHostRef(elm);
+		if (!hostRef) return;
+		const cmpMeta = hostRef.$cmpMeta$;
+		const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
+		if (BUILD.hostListenerTargetParent) addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
+		if (!(hostRef.$flags$ & HOST_FLAGS.hasConnected)) {
+			hostRef.$flags$ |= HOST_FLAGS.hasConnected;
+			let hostId;
+			if (BUILD.hydrateClientSide) {
+				hostId = elm.getAttribute(HYDRATE_ID);
+				if (hostId) {
+					if (BUILD.shadowDom && supportsShadow && cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) {
+						const scopeId = BUILD.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute("s-mode")) : addStyle(elm.shadowRoot, cmpMeta);
+						elm.classList.remove(scopeId + "-h", scopeId + "-s");
+					} else if (BUILD.scoped && cmpMeta.$flags$ & CMP_FLAGS.scopedCssEncapsulation) elm["s-sc"] = getScopeId(cmpMeta, BUILD.mode ? elm.getAttribute("s-mode") : void 0);
+					initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
+				}
+			}
+			if (BUILD.slotRelocation && !hostId) {
+				if (BUILD.hydrateServerSide || (BUILD.slot || BUILD.shadowDom) && cmpMeta.$flags$ & (CMP_FLAGS.hasSlotRelocation | CMP_FLAGS.needsShadowDomShim)) setContentReference(elm);
+			}
+			if (BUILD.asyncLoading) {
+				let ancestorComponent = elm;
+				while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) if (BUILD.hydrateClientSide && ancestorComponent.nodeType === NODE_TYPE.ElementNode && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
+					attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
+					break;
+				}
+			}
+			if (BUILD.prop && !BUILD.hydrateServerSide && cmpMeta.$members$) Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
+				if (memberFlags & MEMBER_FLAGS.Prop && Object.prototype.hasOwnProperty.call(elm, memberName)) {
+					const value = elm[memberName];
+					delete elm[memberName];
+					elm[memberName] = value;
+				}
+			});
+			if (BUILD.initializeNextTick) nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
+			else initializeComponent(elm, hostRef, cmpMeta);
+		} else {
+			addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
+			if (hostRef?.$lazyInstance$) fireConnectedCallback(hostRef.$lazyInstance$, elm);
+			else if (hostRef?.$onReadyPromise$) hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$, elm));
+		}
+		endConnected();
+	}
+};
+const setContentReference = (elm) => {
+	if (!win.document) return;
+	const contentRefElm = elm["s-cr"] = win.document.createComment(BUILD.isDebug ? `content-ref (host=${elm.localName})` : "");
+	contentRefElm["s-cn"] = true;
+	insertBefore(elm, contentRefElm, elm.firstChild);
+};
+
+//#endregion
+//#region src/runtime/disconnected-callback.ts
+const disconnectInstance = (instance, elm) => {
+	if (BUILD.lazyLoad) safeCall(instance, "disconnectedCallback", void 0, elm || instance);
+};
+const disconnectedCallback = async (elm) => {
+	if ((plt.$flags$ & PLATFORM_FLAGS.isTmpDisconnected) === 0) {
+		const hostRef = getHostRef(elm);
+		if (BUILD.hostListener) {
+			if (hostRef?.$rmListeners$) {
+				hostRef.$rmListeners$.map((rmListener) => rmListener());
+				hostRef.$rmListeners$ = void 0;
+			}
+		}
+		if (!BUILD.lazyLoad) disconnectInstance(elm);
+		else if (hostRef?.$lazyInstance$) disconnectInstance(hostRef.$lazyInstance$, elm);
+		else if (hostRef?.$onReadyPromise$) hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$, elm));
+	}
+	/**
+	* Remove the element from the `rootAppliedStyles` WeakMap
+	*/
+	if (rootAppliedStyles.has(elm)) rootAppliedStyles.delete(elm);
+	/**
+	* Remove the shadow root from the `rootAppliedStyles` WeakMap
+	*/
+	if (elm.shadowRoot && rootAppliedStyles.has(elm.shadowRoot)) rootAppliedStyles.delete(elm.shadowRoot);
+};
+
+//#endregion
+//#region src/runtime/bootstrap-custom-element.ts
+const defineCustomElement = (Cstr, compactMeta) => {
+	customElements.define(transformTag(compactMeta[1]), proxyCustomElement(Cstr, compactMeta));
+};
+const proxyCustomElement = (Cstr, compactMeta) => {
+	const cmpMeta = {
+		$flags$: compactMeta[0],
+		$tagName$: compactMeta[1]
+	};
+	try {
+		if (BUILD.member) cmpMeta.$members$ = compactMeta[2];
+		if (BUILD.hostListener) cmpMeta.$listeners$ = compactMeta[3];
+		if (BUILD.propChangeCallback) {
+			cmpMeta.$watchers$ = Cstr.$watchers$;
+			cmpMeta.$deserializers$ = Cstr.$deserializers$;
+			cmpMeta.$serializers$ = Cstr.$serializers$;
+		}
+		if (BUILD.reflect) cmpMeta.$attrsToReflect$ = [];
+		if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) cmpMeta.$flags$ |= CMP_FLAGS.needsShadowDomShim;
+		if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD.experimentalSlotFixes) patchPseudoShadowDom(Cstr.prototype);
+		else {
+			if (BUILD.slotChildNodesFix) patchChildSlotNodes(Cstr.prototype);
+			if (BUILD.cloneNodeFix) patchCloneNode(Cstr.prototype);
+			if (BUILD.appendChildSlotFix) patchSlotAppendChild(Cstr.prototype);
+			if (BUILD.scopedSlotTextContentFix && cmpMeta.$flags$ & CMP_FLAGS.scopedCssEncapsulation) patchTextContent(Cstr.prototype);
+		}
+		else if (BUILD.cloneNodeFix) patchCloneNode(Cstr.prototype);
+		if (BUILD.hydrateClientSide && BUILD.shadowDom) hydrateScopedToShadow();
+		const originalConnectedCallback = Cstr.prototype.connectedCallback;
+		const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
+		Object.assign(Cstr.prototype, {
+			__hasHostListenerAttached: false,
+			__registerHost() {
+				registerHost(this, cmpMeta);
+			},
+			connectedCallback() {
+				if (!this.__hasHostListenerAttached) {
+					const hostRef = getHostRef(this);
+					if (!hostRef) return;
+					addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
+					this.__hasHostListenerAttached = true;
+				}
+				connectedCallback(this);
+				if (originalConnectedCallback) originalConnectedCallback.call(this);
+			},
+			disconnectedCallback() {
+				disconnectedCallback(this);
+				if (originalDisconnectedCallback) originalDisconnectedCallback.call(this);
+			},
+			__attachShadow() {
+				if (supportsShadow) {
+					if (!this.shadowRoot) createShadowRoot.call(this, cmpMeta);
+					else if (this.shadowRoot.mode !== "open") throw new Error(`Unable to re-use existing shadow root for ${cmpMeta.$tagName$}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`);
+				} else this.shadowRoot = this;
+			}
+		});
+		Object.defineProperty(Cstr, "is", {
+			value: cmpMeta.$tagName$,
+			configurable: true
+		});
+		return proxyComponent(Cstr, cmpMeta, PROXY_FLAGS.isElementConstructor | PROXY_FLAGS.proxyState);
+	} catch (e) {
+		consoleError(e);
+		return Cstr;
+	}
+};
+const forceModeUpdate = (elm) => {
+	if (BUILD.style && BUILD.mode && !BUILD.lazyLoad) {
+		const mode = computeMode(elm);
+		const hostRef = getHostRef(elm);
+		if (hostRef && hostRef.$modeName$ !== mode) {
+			const cmpMeta = hostRef.$cmpMeta$;
+			const oldScopeId = elm["s-sc"];
+			const scopeId = getScopeId(cmpMeta, mode);
+			const style = elm.constructor.style[mode];
+			const flags = cmpMeta.$flags$;
+			if (style) {
+				if (!styles.has(scopeId)) registerStyle(scopeId, style, !!(flags & CMP_FLAGS.shadowDomEncapsulation));
+				hostRef.$modeName$ = mode;
+				elm.classList.remove(oldScopeId + "-h", oldScopeId + "-s");
+				attachStyles(hostRef);
+				forceUpdate(elm);
+			}
+		}
+	}
+};
+
+//#endregion
+//#region src/runtime/hmr-component.ts
+/**
+* Kick off hot-module-replacement for a component. In order to replace the
+* component in-place we:
+*
+* 1. get a reference to the {@link d.HostRef} for the element
+* 2. reset the element's runtime flags
+* 3. re-run the initialization logic for the element (via
+*    {@link initializeComponent})
+*
+* @param hostElement the host element for the component which we want to start
+* doing HMR
+* @param cmpMeta runtime metadata for the component
+* @param hmrVersionId the current HMR version ID
+*/
+const hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
+	const hostRef = getHostRef(hostElement);
+	if (!hostRef) return;
+	hostRef.$flags$ = HOST_FLAGS.hasConnected;
+	initializeComponent(hostElement, hostRef, cmpMeta, hmrVersionId);
+};
+
+//#endregion
+//#region src/runtime/bootstrap-lazy.ts
+const bootstrapLazy = (lazyBundles, options = {}) => {
+	if (BUILD.profile && performance.mark) performance.mark("st:app:start");
+	installDevTools();
+	if (!win.document) {
+		console.warn("Stencil: No document found. Skipping bootstrapping lazy components.");
+		return;
+	}
+	const endBootstrap = createTime("bootstrapLazy");
+	const cmpTags = [];
+	const exclude = options.exclude || [];
+	const customElements = win.customElements;
+	const head = win.document.head;
+	const metaCharset = /* @__PURE__ */ head.querySelector("meta[charset]");
+	const dataStyles = /* @__PURE__ */ win.document.createElement("style");
+	const deferredConnectedCallbacks = [];
+	let appLoadFallback;
+	let isBootstrapping = true;
+	Object.assign(plt, options);
+	if (BUILD.asyncQueue && options.syncQueue) plt.$flags$ |= PLATFORM_FLAGS.queueSync;
+	if (BUILD.hydrateClientSide) plt.$flags$ |= PLATFORM_FLAGS.appLoaded;
+	if (BUILD.hydrateClientSide && BUILD.shadowDom) hydrateScopedToShadow();
+	let hasSlotRelocation = false;
+	lazyBundles.map((lazyBundle) => {
+		lazyBundle[1].map((compactMeta) => {
+			const cmpMeta = {
+				$flags$: compactMeta[0],
+				$tagName$: compactMeta[1],
+				$members$: compactMeta[2],
+				$listeners$: compactMeta[3]
+			};
+			if (cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation) hasSlotRelocation = true;
+			if (BUILD.member) cmpMeta.$members$ = compactMeta[2];
+			if (BUILD.hostListener) cmpMeta.$listeners$ = compactMeta[3];
+			if (BUILD.reflect) cmpMeta.$attrsToReflect$ = [];
+			if (BUILD.propChangeCallback) {
+				cmpMeta.$watchers$ = compactMeta[4] ?? {};
+				cmpMeta.$serializers$ = compactMeta[5] ?? {};
+				cmpMeta.$deserializers$ = compactMeta[6] ?? {};
+			}
+			if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) cmpMeta.$flags$ |= CMP_FLAGS.needsShadowDomShim;
+			const tagName = BUILD.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : transformTag(cmpMeta.$tagName$);
+			const HostElement = class extends HTMLElement {
+				["s-p"];
+				["s-rc"];
+				hasRegisteredEventListeners = false;
+				constructor(self) {
+					super(self);
+					self = this;
+					registerHost(self, cmpMeta);
+					if (BUILD.shadowDom && cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) {
+						if (supportsShadow) {
+							if (!self.shadowRoot) createShadowRoot.call(self, cmpMeta);
+							else if (self.shadowRoot.mode !== "open") throw new Error(`Unable to re-use existing shadow root for ${cmpMeta.$tagName$}! Mode is set to ${self.shadowRoot.mode} but Stencil only supports open shadow roots.`);
+						} else if (!BUILD.hydrateServerSide && !("shadowRoot" in self)) self.shadowRoot = self;
+					}
+				}
+				connectedCallback() {
+					const hostRef = getHostRef(this);
+					if (!hostRef) return;
+					/**
+					* The `connectedCallback` lifecycle event can potentially be fired multiple times
+					* if the element is removed from the DOM and re-inserted. This is not a common use case,
+					* but it can happen in some scenarios. To prevent registering the same event listeners
+					* multiple times, we will only register them once.
+					*/
+					if (!this.hasRegisteredEventListeners) {
+						this.hasRegisteredEventListeners = true;
+						addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
+					}
+					if (appLoadFallback) {
+						clearTimeout(appLoadFallback);
+						appLoadFallback = null;
+					}
+					if (isBootstrapping) deferredConnectedCallbacks.push(this);
+					else plt.jmp(() => connectedCallback(this));
+				}
+				disconnectedCallback() {
+					plt.jmp(() => disconnectedCallback(this));
+					/**
+					* Clear up references within the `$vnode$` object to the DOM
+					* node that was removed. This is necessary to ensure that these
+					* references used as keys in the `hostRef` object can be properly
+					* garbage collected.
+					*
+					* Also remove the reference from `deferredConnectedCallbacks` array
+					* otherwise removed instances won't get garbage collected.
+					*/
+					plt.raf(() => {
+						const hostRef = getHostRef(this);
+						if (!hostRef) return;
+						const i = deferredConnectedCallbacks.findIndex((host) => host === this);
+						if (i > -1) deferredConnectedCallbacks.splice(i, 1);
+						if (hostRef?.$vnode$?.$elm$ instanceof Node && !hostRef.$vnode$.$elm$.isConnected) delete hostRef.$vnode$.$elm$;
+					});
+				}
+				componentOnReady() {
+					return getHostRef(this)?.$onReadyPromise$;
+				}
+			};
+			if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation) && cmpMeta.$flags$ & CMP_FLAGS.hasSlot) if (BUILD.experimentalSlotFixes) patchPseudoShadowDom(HostElement.prototype);
+			else {
+				if (BUILD.slotChildNodesFix) patchChildSlotNodes(HostElement.prototype);
+				if (BUILD.cloneNodeFix) patchCloneNode(HostElement.prototype);
+				if (BUILD.appendChildSlotFix) patchSlotAppendChild(HostElement.prototype);
+				if (BUILD.scopedSlotTextContentFix && cmpMeta.$flags$ & CMP_FLAGS.scopedCssEncapsulation) patchTextContent(HostElement.prototype);
+			}
+			else if (BUILD.cloneNodeFix) patchCloneNode(HostElement.prototype);
+			if (BUILD.formAssociated && cmpMeta.$flags$ & CMP_FLAGS.formAssociated) HostElement.formAssociated = true;
+			if (BUILD.hotModuleReplacement) HostElement.prototype["s-hmr"] = function(hmrVersionId) {
+				hmrStart(this, cmpMeta, hmrVersionId);
+			};
+			cmpMeta.$lazyBundleId$ = lazyBundle[0];
+			if (!exclude.includes(tagName) && !customElements.get(tagName)) {
+				cmpTags.push(tagName);
+				customElements.define(tagName, proxyComponent(HostElement, cmpMeta, PROXY_FLAGS.isElementConstructor));
+			}
+		});
+	});
+	if (cmpTags.length > 0) {
+		if (BUILD.slotRelocation && hasSlotRelocation) dataStyles.textContent += SLOT_FB_CSS;
+		if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) dataStyles.textContent += cmpTags.sort() + HYDRATED_CSS;
+		if (dataStyles.innerHTML.length) {
+			dataStyles.setAttribute("data-styles", "");
+			const nonce = plt.$nonce$ ?? queryNonceMetaTagContent(win.document);
+			if (nonce != null) dataStyles.setAttribute("nonce", nonce);
+			head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
+		}
+	}
+	isBootstrapping = false;
+	if (deferredConnectedCallbacks.length) deferredConnectedCallbacks.map((host) => host.connectedCallback());
+	else if (BUILD.profile) plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30, "timeout"));
+	else plt.jmp(() => appLoadFallback = setTimeout(appDidLoad, 30));
+	endBootstrap();
+};
+
+//#endregion
+//#region src/runtime/fragment.ts
+const Fragment = (_, children) => children;
+
+//#endregion
+//#region src/runtime/host-listener.ts
+const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+	if (BUILD.hostListener && listeners && win.document) {
+		if (BUILD.hostListenerTargetParent) if (attachParentListeners) listeners = listeners.filter(([flags]) => flags & LISTENER_FLAGS.TargetParent);
+		else listeners = listeners.filter(([flags]) => !(flags & LISTENER_FLAGS.TargetParent));
+		listeners.map(([flags, name, method]) => {
+			const target = BUILD.hostListenerTarget ? getHostListenerTarget(win.document, elm, flags) : elm;
+			const handler = hostListenerProxy(hostRef, method);
+			const opts = hostListenerOpts(flags);
+			plt.ael(target, name, handler, opts);
+			(hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+		});
+	}
+};
+const hostListenerProxy = (hostRef, methodName) => (ev) => {
+	try {
+		if (BUILD.lazyLoad) if (hostRef.$flags$ & HOST_FLAGS.isListenReady) hostRef.$lazyInstance$?.[methodName](ev);
+		else (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+		else hostRef.$hostElement$[methodName](ev);
+	} catch (e) {
+		consoleError(e, hostRef.$hostElement$);
+	}
+};
+const getHostListenerTarget = (doc, elm, flags) => {
+	if (BUILD.hostListenerTargetDocument && flags & LISTENER_FLAGS.TargetDocument) return doc;
+	if (BUILD.hostListenerTargetWindow && flags & LISTENER_FLAGS.TargetWindow) return win;
+	if (BUILD.hostListenerTargetBody && flags & LISTENER_FLAGS.TargetBody) return doc.body;
+	if (BUILD.hostListenerTargetParent && flags & LISTENER_FLAGS.TargetParent && elm.parentElement) return elm.parentElement;
+	return elm;
+};
+const hostListenerOpts = (flags) => supportsListenerOptions ? {
+	passive: (flags & LISTENER_FLAGS.Passive) !== 0,
+	capture: (flags & LISTENER_FLAGS.Capture) !== 0
+} : (flags & LISTENER_FLAGS.Capture) !== 0;
+
+//#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/nonce.ts
+/**
+* Assigns the given value to the nonce property on the runtime platform object.
+* During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
+* @param nonce The value to be assigned to the platform nonce property.
+* @returns void
+*/
+const setNonce = (nonce) => plt.$nonce$ = nonce;
+
+//#endregion
+//#region src/runtime/platform-options.ts
+const setPlatformOptions = (opts) => Object.assign(plt, opts);
+
+//#endregion
+//#region src/runtime/render.ts
+/**
+* Method to render a virtual DOM tree to a container element.
+*
+* @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) {
+	renderVdom({
+		$flags$: 0,
+		$cmpMeta$: {
+			$flags$: 0,
+			$tagName$: container.tagName
+		},
+		$hostElement$: container
+	}, 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) {
+	if (tagTransformer) console.warn(`
+      A tagTransformer has already been set. 
+      Overwriting it may lead to error and unexpected results if your components have already been defined.
+    `);
+	tagTransformer = transformer;
+}
+
+//#endregion
+//#region src/runtime/vdom/jsx-dev-runtime.ts
+/**
+* Automatic JSX Development Runtime for Stencil
+*
+* This module provides the automatic JSX runtime functions required by
+* TypeScript when using "jsx": "react-jsxdev" mode. This is used during
+* development and includes additional debugging information.
+*
+* For more information, see:
+* https://www.typescriptlang.org/docs/handbook/jsx.html
+*/
+/**
+* JSX development runtime function for creating elements with debug info.
+* Called by TypeScript's jsx transform in development mode.
+*
+* @param type - The element type (string tag name or functional component)
+* @param props - The element props (includes children, key, etc.)
+* @param key - The element's key (passed separately in dev mode)
+* @param isStaticChildren - Whether children are static (optimization hint)
+* @param source - Source location information for debugging
+* @param self - The component instance (for debugging)
+* @returns A virtual DOM node
+*/
+function jsxDEV(type, props, key, _isStaticChildren, _source, _self) {
+	const { children, ...rest } = props || {};
+	let vnodeData = rest;
+	if (key !== void 0 && !("key" in rest)) vnodeData = {
+		...rest,
+		key
+	};
+	if (vnodeData && Object.keys(vnodeData).length === 0) vnodeData = null;
+	if (children !== void 0) {
+		if (Array.isArray(children)) return h(type, vnodeData, ...children);
+		if (typeof children === "object" && children !== null && "$flags$" in children) return h(type, vnodeData, children);
+		return h(type, vnodeData, children);
+	}
+	return h(type, vnodeData);
+}
+
+//#endregion
+//#region src/runtime/vdom/jsx-runtime.ts
+/**
+* Automatic JSX Runtime for Stencil
+*
+* This module provides the automatic JSX runtime functions required by
+* TypeScript when using "jsx": "react-jsx" mode. This allows developers
+* to write JSX without explicitly importing the `h` function.
+*
+* For more information, see:
+* https://www.typescriptlang.org/docs/handbook/jsx.html
+*/
+/**
+* JSX runtime function for creating elements in production mode.
+* Called by TypeScript's jsx transform for elements without static children.
+*
+* @param type - The element type (string tag name or functional component)
+* @param props - The element props (includes children)
+* @param key - Optional key for the element
+* @returns A virtual DOM node
+*/
+function jsx(type, props, key) {
+	const { children, ...rest } = props || {};
+	let vnodeData = rest;
+	if (key !== void 0 && !("key" in rest)) vnodeData = {
+		...rest,
+		key
+	};
+	if (vnodeData && Object.keys(vnodeData).length === 0) vnodeData = null;
+	if (children !== void 0) {
+		if (Array.isArray(children)) return h(type, vnodeData, ...children);
+		if (typeof children === "object" && children !== null && "$flags$" in children) return h(type, vnodeData, children);
+		return h(type, vnodeData, children);
+	}
+	return h(type, vnodeData);
+}
+/**
+* JSX runtime function for creating elements with static children.
+* Called by TypeScript's jsx transform as an optimization when children are static.
+*
+* @param type - The element type (string tag name or functional component)
+* @param props - The element props (includes children)
+* @param key - Optional key for the element
+* @returns A virtual DOM node
+*/
+function jsxs(type, props, key) {
+	return jsx(type, props, key);
+}
+
+//#endregion
+//#region src/runtime/vdom/vdom-annotations.ts
+/**
+* Updates the DOM generated on the server with annotations such as node attributes and
+* comment nodes to facilitate future client-side hydration. These annotations are used for things
+* like moving elements back to their original hosts if using Shadow DOM on the client, and for quickly
+* reconstructing the vNode representations of the DOM.
+*
+* @param doc The DOM generated by the server.
+* @param staticComponents Any components that should be considered static and do not need client-side hydration.
+*/
+const insertVdomAnnotations = (doc, staticComponents) => {
+	if (doc != null) {
+		/**
+		* Initiated `docData` object from the document if it exists to ensure we
+		* maintain the same `docData` object across multiple hydration hydration runs.
+		*/
+		const docData = STENCIL_DOC_DATA in doc ? doc[STENCIL_DOC_DATA] : { ...DEFAULT_DOC_DATA };
+		docData.staticComponents = new Set(staticComponents);
+		const orgLocationNodes = [];
+		parseVNodeAnnotations(doc, doc.body, docData, orgLocationNodes);
+		orgLocationNodes.forEach((orgLocationNode) => {
+			if (orgLocationNode != null && orgLocationNode["s-nr"]) {
+				const nodeRef = orgLocationNode["s-nr"];
+				let hostId = nodeRef["s-host-id"];
+				let nodeId = nodeRef["s-node-id"];
+				let childId = `${hostId}.${nodeId}`;
+				if (hostId == null) {
+					hostId = 0;
+					docData.rootLevelIds++;
+					nodeId = docData.rootLevelIds;
+					childId = `${hostId}.${nodeId}`;
+					if (nodeRef.nodeType === NODE_TYPE.ElementNode) {
+						nodeRef.setAttribute(HYDRATE_CHILD_ID, childId);
+						if (typeof nodeRef["s-sn"] === "string" && !nodeRef.getAttribute("slot")) nodeRef.setAttribute("s-sn", nodeRef["s-sn"]);
+					} else if (nodeRef.nodeType === NODE_TYPE.TextNode) {
+						if (hostId === 0) {
+							if (nodeRef.nodeValue?.trim() === "") {
+								orgLocationNode.remove();
+								return;
+							}
+						}
+						const commentBeforeTextNode = doc.createComment(childId);
+						commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`;
+						insertBefore(nodeRef.parentNode, commentBeforeTextNode, nodeRef);
+					} else if (nodeRef.nodeType === NODE_TYPE.CommentNode) {
+						const commentBeforeTextNode = doc.createComment(childId);
+						commentBeforeTextNode.nodeValue = `${COMMENT_NODE_ID}.${childId}`;
+						nodeRef.parentNode.insertBefore(commentBeforeTextNode, nodeRef);
+					}
+				}
+				let orgLocationNodeId = `${ORG_LOCATION_ID}.${childId}`;
+				const orgLocationParentNode = orgLocationNode.parentElement;
+				if (orgLocationParentNode) {
+					if (orgLocationParentNode["s-en"] === "") orgLocationNodeId += `.`;
+					else if (orgLocationParentNode["s-en"] === "c") orgLocationNodeId += `.c`;
+				}
+				orgLocationNode.nodeValue = orgLocationNodeId;
+			}
+		});
+	}
+};
+/**
+* Recursively parses a node generated by the server and its children to set host and child id
+* attributes read during client-side hydration. This function also tracks whether each node is
+* an original location reference node meaning that a node has been moved via slot relocation.
+*
+* @param doc The DOM generated by the server.
+* @param node The node to parse.
+* @param docData An object containing metadata about the document.
+* @param orgLocationNodes An array of nodes that have been moved via slot relocation.
+*/
+const parseVNodeAnnotations = (doc, node, docData, orgLocationNodes) => {
+	if (node == null) return;
+	if (node["s-nr"] != null) orgLocationNodes.push(node);
+	if (node.nodeType === NODE_TYPE.ElementNode) [...Array.from(node.childNodes), ...Array.from(node.shadowRoot?.childNodes || [])].forEach((childNode) => {
+		const hostRef = getHostRef(childNode);
+		if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) insertVNodeAnnotations(doc, childNode, hostRef.$vnode$, docData, { nodeIds: 0 });
+		parseVNodeAnnotations(doc, childNode, docData, orgLocationNodes);
+	});
+};
+/**
+* Insert attribute annotations on an element for its host ID and, potentially, its child ID.
+* Also makes calls to insert annotations on the element's children, keeping track of the depth of
+* the component tree.
+*
+* @param doc The DOM generated by the server.
+* @param hostElm The element to insert annotations for.
+* @param vnode The vNode representation of the element.
+* @param docData An object containing metadata about the document.
+* @param cmpData An object containing metadata about the component.
+*/
+const insertVNodeAnnotations = (doc, hostElm, vnode, docData, cmpData) => {
+	if (vnode != null) {
+		const hostId = ++docData.hostIds;
+		hostElm.setAttribute(HYDRATE_ID, hostId);
+		if (hostElm["s-cr"] != null) hostElm["s-cr"].nodeValue = `${CONTENT_REF_ID}.${hostId}`;
+		if (vnode.$children$ != null) {
+			const depth = 0;
+			vnode.$children$.forEach((vnodeChild, index) => {
+				insertChildVNodeAnnotations(doc, vnodeChild, cmpData, hostId, depth, index);
+			});
+		}
+		if (hostElm && vnode && vnode.$elm$ && !hostElm.hasAttribute(HYDRATE_CHILD_ID)) {
+			const parent = hostElm.parentElement;
+			if (parent && parent.childNodes) {
+				const parentChildNodes = Array.from(parent.childNodes);
+				const comment = parentChildNodes.find((node) => node.nodeType === NODE_TYPE.CommentNode && node["s-sr"]);
+				if (comment) {
+					const index = parentChildNodes.indexOf(hostElm) - 1;
+					vnode.$elm$.setAttribute(HYDRATE_CHILD_ID, `${comment["s-host-id"]}.${comment["s-node-id"]}.0.${index}`);
+				}
+			}
+		}
+	}
+};
+/**
+* Recursively analyzes the type of a child vNode and inserts annotations on the vNodes's element based on its type.
+* Element nodes receive a child ID attribute, text nodes have a comment with the child ID inserted before them,
+* and comment nodes representing a slot have their node value set to a slot node ID containing the child ID.
+*
+* @param doc The DOM generated by the server.
+* @param vnodeChild The vNode to insert annotations for.
+* @param cmpData An object containing metadata about the component.
+* @param hostId The host ID of this element's parent.
+* @param depth How deep this element sits in the component tree relative to its parent.
+* @param index The index of this element in its parent's children array.
+*/
+const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, index) => {
+	const childElm = vnodeChild.$elm$;
+	if (childElm == null) return;
+	const nodeId = cmpData.nodeIds++;
+	const childId = `${hostId}.${nodeId}.${depth}.${index}`;
+	childElm["s-host-id"] = hostId;
+	childElm["s-node-id"] = nodeId;
+	if (childElm.nodeType === NODE_TYPE.ElementNode) {
+		childElm.setAttribute(HYDRATE_CHILD_ID, childId);
+		if (typeof childElm["s-sn"] === "string" && !childElm.getAttribute("slot")) childElm.setAttribute("s-sn", childElm["s-sn"]);
+	} else if (childElm.nodeType === NODE_TYPE.TextNode) {
+		const parentNode = childElm.parentNode;
+		const nodeName = parentNode?.nodeName;
+		if (nodeName !== "STYLE" && nodeName !== "SCRIPT") {
+			const textNodeId = `${TEXT_NODE_ID}.${childId}`;
+			insertBefore(parentNode, doc.createComment(textNodeId), childElm);
+		}
+	} else if (childElm.nodeType === NODE_TYPE.CommentNode) {
+		if (childElm["s-sr"]) childElm.nodeValue = `${SLOT_NODE_ID}.${childId}.${childElm["s-sn"] || ""}`;
+	}
+	if (vnodeChild.$children$ != null) {
+		const childDepth = depth + 1;
+		vnodeChild.$children$.forEach((vnode, index) => {
+			insertChildVNodeAnnotations(doc, vnode, cmpData, hostId, childDepth, index);
+		});
+	}
+};
+
+//#endregion
+export { Fragment, HYDRATED_STYLE_ID, Host, Mixin, addHostEventListeners, bootstrapLazy, connectedCallback, createEvent, defineCustomElement, disconnectedCallback, forceModeUpdate, forceUpdate, getAssetPath, getElement, getMode, getRenderingRef, getValue, h, insertVdomAnnotations, jsx, jsxDEV, jsxs, parsePropertyValue, postUpdateComponent, proxyComponent, proxyCustomElement, render, renderVdom, setAssetPath, setMode, setNonce, setPlatformOptions, setTagTransformer, setValue, transformTag };