@ebrains/components 0.9.0-beta → 0.9.2-beta

package/dist/{esm/index-8a71b9a7.js → components/index-9d277061.js}

@@ -1,5 +1,6 @@
 const NAMESPACE = 'components';
-const BUILD = /* components */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* components */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: true, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: true, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const Env = /* components */ {};
 
 /*
  Stencil Client Platform v4.22.0 | MIT Licensed | https://stenciljs.com
@@ -9,7 +10,13 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var hostRefs = /* @__PURE__ */ new WeakMap();
+var Build = {
+  isDev: BUILD.isDev ? true : false,
+  isBrowser: true,
+  isServer: false,
+  isTesting: BUILD.isTesting ? true : false
+};
+var hostRefs = BUILD.hotModuleReplacement ? window.__STENCIL_HOSTREFS__ || (window.__STENCIL_HOSTREFS__ = /* @__PURE__ */ new WeakMap()) : /* @__PURE__ */ new WeakMap();
 var getHostRef = (ref) => hostRefs.get(ref);
 var registerInstance = (lazyInstance, hostRef) => hostRefs.set(hostRef.$lazyInstance$ = lazyInstance, hostRef);
 var registerHost = (hostElement, cmpMeta) => {
@@ -19,10 +26,13 @@ var registerHost = (hostElement, cmpMeta) => {
     $cmpMeta$: cmpMeta,
     $instanceValues$: /* @__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"] = [];
@@ -30,362 +40,44 @@ var registerHost = (hostElement, cmpMeta) => {
   return hostRefs.set(hostElement, hostRef);
 };
 var isMemberInElement = (elm, memberName) => memberName in elm;
-var consoleError = (e, el) => (0, console.error)(e, el);
+var customError;
+var consoleError = (e, el) => (customError || console.error)(e, el);
+var STENCIL_DEV_MODE = BUILD.isTesting ? ["STENCIL:"] : [
+  "%cstencil",
+  "color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px"
+];
+var consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);
+var consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);
+var consoleDevInfo = (...m) => console.info(...STENCIL_DEV_MODE, ...m);
+var setErrorHandler = (handler) => customError = handler;
 
 // src/client/client-load-module.ts
 var cmpModules = /* @__PURE__ */ new Map();
+var MODULE_IMPORT_PREFIX = "./";
 var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
   const exportName = cmpMeta.$tagName$.replace(/-/g, "_");
   const bundleId = cmpMeta.$lazyBundleId$;
-  if (!bundleId) {
+  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 void 0;
+  } else if (!bundleId) {
     return void 0;
   }
-  const module = cmpModules.get(bundleId) ;
+  const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;
   if (module) {
     return module[exportName];
   }
-  
-        if (!hmrVersionId || !BUILD.hotModuleReplacement) {
-          const processMod = importedModule => {
-              cmpModules.set(bundleId, importedModule);
-              return importedModule[exportName];
-          }
-          switch(bundleId) {
-              
-                case 'eds-avatar_24':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-avatar_24.entry.js').then(processMod, consoleError);
-                case 'components-section':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './components-section.entry.js').then(processMod, consoleError);
-                case 'correct-use-of-colors':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './correct-use-of-colors.entry.js').then(processMod, consoleError);
-                case 'docs-palettes':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './docs-palettes.entry.js').then(processMod, consoleError);
-                case 'docs-tokens':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './docs-tokens.entry.js').then(processMod, consoleError);
-                case 'eds-app-root':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-app-root.entry.js').then(processMod, consoleError);
-                case 'eds-breadcrumb':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-breadcrumb.entry.js').then(processMod, consoleError);
-                case 'eds-card-project':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-card-project.entry.js').then(processMod, consoleError);
-                case 'eds-card-section':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-card-section.entry.js').then(processMod, consoleError);
-                case 'eds-card-tags':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-card-tags.entry.js').then(processMod, consoleError);
-                case 'eds-card-tool':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-card-tool.entry.js').then(processMod, consoleError);
-                case 'eds-card-wrapper':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-card-wrapper.entry.js').then(processMod, consoleError);
-                case 'eds-cookies-preference':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-cookies-preference.entry.js').then(processMod, consoleError);
-                case 'eds-feedback':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-feedback.entry.js').then(processMod, consoleError);
-                case 'eds-frame':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-frame.entry.js').then(processMod, consoleError);
-                case 'eds-icon-arrow-diagonal':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-arrow-diagonal.entry.js').then(processMod, consoleError);
-                case 'eds-icon-arrow-right':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-arrow-right.entry.js').then(processMod, consoleError);
-                case 'eds-icon-bluesky':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-bluesky.entry.js').then(processMod, consoleError);
-                case 'eds-icon-bookmark':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-bookmark.entry.js').then(processMod, consoleError);
-                case 'eds-icon-chevron-down':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-chevron-down.entry.js').then(processMod, consoleError);
-                case 'eds-icon-chevron-left':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-chevron-left.entry.js').then(processMod, consoleError);
-                case 'eds-icon-chevron-right':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-chevron-right.entry.js').then(processMod, consoleError);
-                case 'eds-icon-chevron-up':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-chevron-up.entry.js').then(processMod, consoleError);
-                case 'eds-icon-close':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-close.entry.js').then(processMod, consoleError);
-                case 'eds-icon-copy':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-copy.entry.js').then(processMod, consoleError);
-                case 'eds-icon-eu':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-eu.entry.js').then(processMod, consoleError);
-                case 'eds-icon-external':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-external.entry.js').then(processMod, consoleError);
-                case 'eds-icon-facebook':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-facebook.entry.js').then(processMod, consoleError);
-                case 'eds-icon-gitlab':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-gitlab.entry.js').then(processMod, consoleError);
-                case 'eds-icon-linkedin':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-linkedin.entry.js').then(processMod, consoleError);
-                case 'eds-icon-loader':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-loader.entry.js').then(processMod, consoleError);
-                case 'eds-icon-mastodon':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-mastodon.entry.js').then(processMod, consoleError);
-                case 'eds-icon-menu':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-menu.entry.js').then(processMod, consoleError);
-                case 'eds-icon-minus':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-minus.entry.js').then(processMod, consoleError);
-                case 'eds-icon-more':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-more.entry.js').then(processMod, consoleError);
-                case 'eds-icon-paper':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-paper.entry.js').then(processMod, consoleError);
-                case 'eds-icon-plus':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-plus.entry.js').then(processMod, consoleError);
-                case 'eds-icon-portal':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-portal.entry.js').then(processMod, consoleError);
-                case 'eds-icon-private':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-private.entry.js').then(processMod, consoleError);
-                case 'eds-icon-public':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-public.entry.js').then(processMod, consoleError);
-                case 'eds-icon-search':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-search.entry.js').then(processMod, consoleError);
-                case 'eds-icon-star':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-star.entry.js').then(processMod, consoleError);
-                case 'eds-icon-success':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-success.entry.js').then(processMod, consoleError);
-                case 'eds-icon-thumbs-down':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-thumbs-down.entry.js').then(processMod, consoleError);
-                case 'eds-icon-thumbs-up':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-thumbs-up.entry.js').then(processMod, consoleError);
-                case 'eds-icon-tutorial':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-tutorial.entry.js').then(processMod, consoleError);
-                case 'eds-icon-twitter':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-twitter.entry.js').then(processMod, consoleError);
-                case 'eds-icon-unknown':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-unknown.entry.js').then(processMod, consoleError);
-                case 'eds-icon-updown':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-updown.entry.js').then(processMod, consoleError);
-                case 'eds-icon-user':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-user.entry.js').then(processMod, consoleError);
-                case 'eds-icon-youtube':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-icon-youtube.entry.js').then(processMod, consoleError);
-                case 'eds-modal':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-modal.entry.js').then(processMod, consoleError);
-                case 'eds-switch':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-switch.entry.js').then(processMod, consoleError);
-                case 'eds-tabs':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-tabs.entry.js').then(processMod, consoleError);
-                case 'eds-timeline':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-timeline.entry.js').then(processMod, consoleError);
-                case 'eds-toast-manager':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-toast-manager.entry.js').then(processMod, consoleError);
-                case 'eds-tooltip':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-tooltip.entry.js').then(processMod, consoleError);
-                case 'eds-trl':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-trl.entry.js').then(processMod, consoleError);
-                case 'incorrect-use-of-colors':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './incorrect-use-of-colors.entry.js').then(processMod, consoleError);
-                case 'logo-space':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './logo-space.entry.js').then(processMod, consoleError);
-                case 'logo-variations-tabs':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './logo-variations-tabs.entry.js').then(processMod, consoleError);
-                case 'logo-wrong-usage':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './logo-wrong-usage.entry.js').then(processMod, consoleError);
-                case 'svg-repository':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './svg-repository.entry.js').then(processMod, consoleError);
-                case 'token-ratios':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './token-ratios.entry.js').then(processMod, consoleError);
-                case 'token-typography':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './token-typography.entry.js').then(processMod, consoleError);
-                case 'color-primary-palette_6':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './color-primary-palette_6.entry.js').then(processMod, consoleError);
-                case 'eds-login_2':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-login_2.entry.js').then(processMod, consoleError);
-                case 'eds-matomo-notice':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-matomo-notice.entry.js').then(processMod, consoleError);
-                case 'eds-progress-bar':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-progress-bar.entry.js').then(processMod, consoleError);
-                case 'eds-rating':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-rating.entry.js').then(processMod, consoleError);
-                case 'eds-toast':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-toast.entry.js').then(processMod, consoleError);
-                case 'logo-variations-horizontal_2':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './logo-variations-horizontal_2.entry.js').then(processMod, consoleError);
-                case 'token-list_3':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './token-list_3.entry.js').then(processMod, consoleError);
-                case 'eds-accordion':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-accordion.entry.js').then(processMod, consoleError);
-                case 'eds-alert':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-alert.entry.js').then(processMod, consoleError);
-                case 'eds-card-generic':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-card-generic.entry.js').then(processMod, consoleError);
-                case 'eds-section-core_2':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-section-core_2.entry.js').then(processMod, consoleError);
-                case 'eds-spinner':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-spinner.entry.js').then(processMod, consoleError);
-                case 'eds-pagination_2':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-pagination_2.entry.js').then(processMod, consoleError);
-                case 'eds-card-desc_3':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-card-desc_3.entry.js').then(processMod, consoleError);
-                case 'eds-code-block':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './eds-code-block.entry.js').then(processMod, consoleError);
-          }
-      }
+  /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
   return import(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */
-    `./${bundleId}.entry.js${""}`
+    `./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? "?s-hmr=" + hmrVersionId : ""}`
   ).then((importedModule) => {
-    {
+    if (!BUILD.hotModuleReplacement) {
       cmpModules.set(bundleId, importedModule);
     }
     return importedModule[exportName];
@@ -394,6 +86,7 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 
 // src/client/client-style.ts
 var styles = /* @__PURE__ */ new Map();
+var modeResolutionChain = [];
 
 // src/runtime/runtime-constants.ts
 var CONTENT_REF_ID = "r";
@@ -406,8 +99,16 @@ var HYDRATE_CHILD_ID = "c-id";
 var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
+var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
+  "formAssociatedCallback",
+  "formResetCallback",
+  "formDisabledCallback",
+  "formStateRestoreCallback"
+];
 var win = typeof window !== "undefined" ? window : {};
 var doc = win.document || { head: {} };
+var H = win.HTMLElement || class {
+};
 var plt = {
   $flags$: 0,
   $resourcesUrl$: "",
@@ -417,6 +118,9 @@ var plt = {
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
   ce: (eventName, opts) => new CustomEvent(eventName, opts)
 };
+var setPlatformHelpers = (helpers) => {
+  Object.assign(plt, helpers);
+};
 var supportsShadow = BUILD.shadowDom;
 var supportsListenerOptions = /* @__PURE__ */ (() => {
   let supportsListenerOptions2 = false;
@@ -435,17 +139,21 @@ var supportsListenerOptions = /* @__PURE__ */ (() => {
   return supportsListenerOptions2;
 })();
 var promiseResolve = (v) => Promise.resolve(v);
-var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
+var supportsConstructableStylesheets = BUILD.constructableCSS ? /* @__PURE__ */ (() => {
   try {
     new CSSStyleSheet();
     return typeof new CSSStyleSheet().replaceSync === "function";
   } catch (e) {
   }
   return false;
-})() ;
+})() : false;
+
+// src/client/client-task-queue.ts
+var queueCongestion = 0;
 var queuePending = false;
 var queueDomReads = [];
 var queueDomWrites = [];
+var queueDomWritesLow = [];
 var queueTask = (queue, write) => (cb) => {
   queue.push(cb);
   if (!queuePending) {
@@ -467,9 +175,41 @@ var consume = (queue) => {
   }
   queue.length = 0;
 };
+var consumeTimeout = (queue, timeout) => {
+  let i2 = 0;
+  let ts = 0;
+  while (i2 < queue.length && (ts = performance.now()) < timeout) {
+    try {
+      queue[i2++](ts);
+    } catch (e) {
+      consoleError(e);
+    }
+  }
+  if (i2 === queue.length) {
+    queue.length = 0;
+  } else if (i2 !== 0) {
+    queue.splice(0, i2);
+  }
+};
 var flush = () => {
+  if (BUILD.asyncQueue) {
+    queueCongestion++;
+  }
   consume(queueDomReads);
-  {
+  if (BUILD.asyncQueue) {
+    const timeout = (plt.$flags$ & 6 /* queueMask */) === 2 /* 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);
@@ -477,10 +217,20 @@ var flush = () => {
   }
 };
 var nextTick = (cb) => promiseResolve().then(cb);
+var readTask = /* @__PURE__ */ queueTask(queueDomReads, false);
 var writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
 
+// src/runtime/asset-path.ts
+var getAssetPath = (path) => {
+  const assetUrl = new URL(path, plt.$resourcesUrl$);
+  return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
+};
+var setAssetPath = (path) => plt.$resourcesUrl$ = path;
+
 // src/utils/constants.ts
 var EMPTY_OBJ = {};
+var SVG_NS = "http://www.w3.org/2000/svg";
+var HTML_NS = "http://www.w3.org/1999/xhtml";
 
 // src/utils/helpers.ts
 var isDef = (v) => v != null;
@@ -543,20 +293,89 @@ var unwrapErr = (result) => {
     throw result.value;
   }
 };
+var i = 0;
 var 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 () => {
       return;
     };
   }
 };
 var 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 () => {
       return;
     };
   }
 };
+var inspect = (ref) => {
+  const hostRef = getHostRef(ref);
+  if (!hostRef) {
+    return void 0;
+  }
+  const flags = hostRef.$flags$;
+  const hostElement = hostRef.$hostElement$;
+  return {
+    renderCount: hostRef.$renderCount$,
+    flags: {
+      hasRendered: !!(flags & 2 /* hasRendered */),
+      hasConnected: !!(flags & 1 /* hasConnected */),
+      isWaitingForChildren: !!(flags & 4 /* isWaitingForChildren */),
+      isConstructingInstance: !!(flags & 8 /* isConstructingInstance */),
+      isQueuedForUpdate: !!(flags & 16 /* isQueuedForUpdate */),
+      hasInitializedComponent: !!(flags & 32 /* hasInitializedComponent */),
+      hasLoadedComponent: !!(flags & 64 /* hasLoadedComponent */),
+      isWatchReady: !!(flags & 128 /* isWatchReady */),
+      isListenReady: !!(flags & 256 /* isListenReady */),
+      needsRerender: !!(flags & 512 /* needsRerender */)
+    },
+    instanceValues: hostRef.$instanceValues$,
+    ancestorComponent: hostRef.$ancestorComponent$,
+    hostElement,
+    lazyInstance: hostRef.$lazyInstance$,
+    vnode: hostRef.$vnode$,
+    modeName: hostRef.$modeName$,
+    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"]
+  };
+};
+var 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;
+    };
+  }
+};
 var h = (nodeName, vnodeData, ...children) => {
   let child = null;
   let key = null;
@@ -572,6 +391,10 @@ var h = (nodeName, vnodeData, ...children) => {
       } 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;
@@ -584,20 +407,28 @@ var h = (nodeName, vnodeData, ...children) => {
   };
   walk(children);
   if (vnodeData) {
-    if (vnodeData.key) {
+    if (BUILD.isDev && nodeName === "input") {
+      validateInputProperties(vnodeData);
+    }
+    if (BUILD.vdomKey && vnodeData.key) {
       key = vnodeData.key;
     }
-    if (vnodeData.name) {
+    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 (typeof nodeName === "function") {
+  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,
@@ -609,10 +440,10 @@ var h = (nodeName, vnodeData, ...children) => {
   if (vNodeChildren.length > 0) {
     vnode.$children$ = vNodeChildren;
   }
-  {
+  if (BUILD.vdomKey) {
     vnode.$key$ = key;
   }
-  {
+  if (BUILD.slotRelocation) {
     vnode.$name$ = slotName;
   }
   return vnode;
@@ -625,13 +456,13 @@ var newVNode = (tag, text) => {
     $elm$: null,
     $children$: null
   };
-  {
+  if (BUILD.vdomAttribute) {
     vnode.$attrs$ = null;
   }
-  {
+  if (BUILD.vdomKey) {
     vnode.$key$ = null;
   }
-  {
+  if (BUILD.slotRelocation) {
     vnode.$name$ = null;
   }
   return vnode;
@@ -668,6 +499,20 @@ var convertToPrivate = (node) => {
   vnode.$name$ = node.vname;
   return vnode;
 };
+var 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"`);
+  }
+};
 
 // src/runtime/client-hydrate.ts
 var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
@@ -675,7 +520,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const shadowRoot = hostElm.shadowRoot;
   const childRenderNodes = [];
   const slotNodes = [];
-  const shadowRootNodes = shadowRoot ? [] : null;
+  const shadowRootNodes = BUILD.shadowDom && shadowRoot ? [] : null;
   const vnode = hostRef.$vnode$ = newVNode(tagName, null);
   if (!plt.$orgLocNodes$) {
     initializeDocumentHydrate(doc.body, plt.$orgLocNodes$ = /* @__PURE__ */ new Map());
@@ -699,7 +544,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     }
     plt.$orgLocNodes$.delete(orgLocationId);
   });
-  if (shadowRoot) {
+  if (BUILD.shadowDom && shadowRoot) {
     shadowRootNodes.map((shadowRootNode) => {
       if (shadowRootNode) {
         shadowRoot.appendChild(shadowRootNode);
@@ -809,7 +654,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
             node["s-sn"] = "";
           }
           node["s-sr"] = true;
-          if (shadowRootNodes) {
+          if (BUILD.shadowDom && shadowRootNodes) {
             childVNode.$elm$ = doc.createElement(childVNode.$tag$);
             if (childVNode.$name$) {
               childVNode.$elm$.setAttribute("name", childVNode.$name$);
@@ -826,9 +671,9 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
           }
           parentVNode.$children$[childVNode.$index$] = childVNode;
         } else if (childNodeType === CONTENT_REF_ID) {
-          if (shadowRootNodes) {
+          if (BUILD.shadowDom && shadowRootNodes) {
             node.remove();
-          } else {
+          } else if (BUILD.slotRelocation) {
             hostElm["s-cr"] = node;
             node["s-cn"] = true;
           }
@@ -862,28 +707,36 @@ var initializeDocumentHydrate = (node, orgLocNodes) => {
     }
   }
 };
+
+// src/runtime/mode.ts
+var computeMode = (elm) => modeResolutionChain.map((h2) => h2(elm)).find((m) => !!m);
+var setMode = (handler) => modeResolutionChain.push(handler);
+var getMode = (ref) => getHostRef(ref).$modeName$;
 var parsePropertyValue = (propValue, propType) => {
   if (propValue != null && !isComplexType(propValue)) {
-    if (propType & 4 /* Boolean */) {
+    if (BUILD.propBoolean && propType & 4 /* Boolean */) {
       return propValue === "false" ? false : propValue === "" || !!propValue;
     }
-    if (propType & 2 /* Number */) {
+    if (BUILD.propNumber && propType & 2 /* Number */) {
       return parseFloat(propValue);
     }
-    if (propType & 1 /* String */) {
+    if (BUILD.propString && propType & 1 /* String */) {
       return String(propValue);
     }
     return propValue;
   }
   return propValue;
 };
-var getElement = (ref) => getHostRef(ref).$hostElement$ ;
+var getElement = (ref) => BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref;
 
 // src/runtime/event-emitter.ts
 var 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 & 4 /* Bubbles */),
         composed: !!(flags & 2 /* Composed */),
@@ -915,8 +768,11 @@ var registerStyle = (scopeId2, cssText, allowCS) => {
 };
 var addStyle = (styleContainerNode, cmpMeta, mode) => {
   var _a;
-  const scopeId2 = getScopeId(cmpMeta);
+  const scopeId2 = getScopeId(cmpMeta, mode);
   const style = styles.get(scopeId2);
+  if (!BUILD.attachStyles) {
+    return scopeId2;
+  }
   styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
   if (style) {
     if (typeof style === "string") {
@@ -927,7 +783,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
         rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
       }
       if (!appliedStyles.has(scopeId2)) {
-        if (styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
+        if (BUILD.hydrateClientSide && styleContainerNode.host && (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`))) {
           styleElm.innerHTML = style;
         } else {
           styleElm = doc.createElement("style");
@@ -936,6 +792,9 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           if (nonce != null) {
             styleElm.setAttribute("nonce", nonce);
           }
+          if ((BUILD.hydrateServerSide || BUILD.hotModuleReplacement) && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+            styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId2);
+          }
           if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
             if (styleContainerNode.nodeName === "HEAD") {
               const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
@@ -958,7 +817,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           appliedStyles.add(scopeId2);
         }
       }
-    } else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
+    } else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
       styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
     }
   }
@@ -970,30 +829,35 @@ var attachStyles = (hostRef) => {
   const flags = cmpMeta.$flags$;
   const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
   const scopeId2 = addStyle(
-    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
-    cmpMeta);
-  if (flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
+    BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
+    cmpMeta,
+    hostRef.$modeName$
+  );
+  if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */) {
     elm["s-sc"] = scopeId2;
     elm.classList.add(scopeId2 + "-h");
+    if (BUILD.scoped && flags & 2 /* scopedCssEncapsulation */) {
+      elm.classList.add(scopeId2 + "-s");
+    }
   }
   endAttachStyles();
 };
-var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
+var getScopeId = (cmp, mode) => "sc-" + (BUILD.mode && mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + "-" + mode : cmp.$tagName$);
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
   if (oldValue !== newValue) {
     let isProp = isMemberInElement(elm, memberName);
     let ln = memberName.toLowerCase();
-    if (memberName === "class") {
+    if (BUILD.vdomClass && memberName === "class") {
       const classList = elm.classList;
       const oldClasses = parseClassList(oldValue);
       const newClasses = parseClassList(newValue);
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
-    } else if (memberName === "style") {
-      {
+    } else if (BUILD.vdomStyle && memberName === "style") {
+      if (BUILD.updatable) {
         for (const prop in oldValue) {
           if (!newValue || newValue[prop] == null) {
-            if (prop.includes("-")) {
+            if (!BUILD.hydrateServerSide && prop.includes("-")) {
               elm.style.removeProperty(prop);
             } else {
               elm.style[prop] = "";
@@ -1003,18 +867,19 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       }
       for (const prop in newValue) {
         if (!oldValue || newValue[prop] !== oldValue[prop]) {
-          if (prop.includes("-")) {
+          if (!BUILD.hydrateServerSide && prop.includes("-")) {
             elm.style.setProperty(prop, newValue[prop]);
           } else {
             elm.style[prop] = newValue[prop];
           }
         }
       }
-    } else if (memberName === "key") ; else if (memberName === "ref") {
+    } else if (BUILD.vdomKey && memberName === "key") {
+    } else if (BUILD.vdomRef && memberName === "ref") {
       if (newValue) {
         newValue(elm);
       }
-    } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+    } 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)) {
@@ -1032,7 +897,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
           plt.ael(elm, memberName, newValue, capture);
         }
       }
-    } else {
+    } else if (BUILD.vdomPropOrAttr) {
       const isComplex = isComplexType(newValue);
       if ((isProp || isComplex && newValue !== null) && !isSvg) {
         try {
@@ -1054,7 +919,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
         }
       }
       let xlink = false;
-      {
+      if (BUILD.vdomXlink) {
         if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
           memberName = ln;
           xlink = true;
@@ -1062,7 +927,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       }
       if (newValue == null || newValue === false) {
         if (newValue !== false || elm.getAttribute(memberName) === "") {
-          if (xlink) {
+          if (BUILD.vdomXlink && xlink) {
             elm.removeAttributeNS(XLINK_NS, memberName);
           } else {
             elm.removeAttribute(memberName);
@@ -1070,7 +935,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
         }
       } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
         newValue = newValue === true ? "" : newValue;
-        if (xlink) {
+        if (BUILD.vdomXlink && xlink) {
           elm.setAttributeNS(XLINK_NS, memberName, newValue);
         } else {
           elm.setAttribute(memberName, newValue);
@@ -1089,7 +954,7 @@ var updateElement = (oldVnode, newVnode, isSvgMode2) => {
   const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
   const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || EMPTY_OBJ;
   const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
-  {
+  if (BUILD.updatable) {
     for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) {
       if (!(memberName in newVnodeAttrs)) {
         setAccessor(elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode2, newVnode.$flags$);
@@ -1125,7 +990,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
   let elm;
   let childNode;
   let oldVNode;
-  if (!useNativeShadowDom) {
+  if (BUILD.slotRelocation && !useNativeShadowDom) {
     checkSlotRelocate = true;
     if (newVNode2.$tag$ === "slot") {
       if (scopeId) {
@@ -1143,15 +1008,29 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
       );
     }
   }
-  if (newVNode2.$text$ !== null) {
+  if (BUILD.isDev && newVNode2.$elm$) {
+    consoleDevError(
+      `The JSX ${newVNode2.$text$ !== null ? `"${newVNode2.$text$}" text` : `"${newVNode2.$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 && newVNode2.$text$ !== null) {
     elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
-  } else if (newVNode2.$flags$ & 1 /* isSlotReference */) {
-    elm = newVNode2.$elm$ = doc.createTextNode("");
+  } else if (BUILD.slotRelocation && newVNode2.$flags$ & 1 /* isSlotReference */) {
+    elm = newVNode2.$elm$ = BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode2) : doc.createTextNode("");
   } else {
-    elm = newVNode2.$elm$ = doc.createElement(
+    if (BUILD.svg && !isSvgMode) {
+      isSvgMode = newVNode2.$tag$ === "svg";
+    }
+    elm = newVNode2.$elm$ = BUILD.svg ? doc.createElementNS(
+      isSvgMode ? SVG_NS : HTML_NS,
+      !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
+    ) : doc.createElement(
       !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     );
-    {
+    if (BUILD.svg && isSvgMode && newVNode2.$tag$ === "foreignObject") {
+      isSvgMode = false;
+    }
+    if (BUILD.vdomAttribute) {
       updateElement(null, newVNode2, isSvgMode);
     }
     const rootNode = elm.getRootNode();
@@ -1159,6 +1038,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     if (!isElementWithinShadowRoot && BUILD.scoped && isDef(scopeId) && elm["s-si"] !== scopeId) {
       elm.classList.add(elm["s-si"] = scopeId);
     }
+    if (BUILD.scoped) {
+      updateElementScopeIds(elm, parentElm);
+    }
     if (newVNode2.$children$) {
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
         childNode = createElm(oldParentVNode, newVNode2, i2, elm);
@@ -1167,9 +1049,16 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
         }
       }
     }
+    if (BUILD.svg) {
+      if (newVNode2.$tag$ === "svg") {
+        isSvgMode = false;
+      } else if (elm.tagName === "foreignObject") {
+        isSvgMode = true;
+      }
+    }
   }
   elm["s-hn"] = hostTagName;
-  {
+  if (BUILD.slotRelocation) {
     if (newVNode2.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) {
       elm["s-sr"] = true;
       elm["s-cr"] = contentRef;
@@ -1177,7 +1066,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
       elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref;
       oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
       if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
-        {
+        if (BUILD.experimentalSlotFixes) {
+          relocateToHostRoot(oldParentVNode.$elm$);
+        } else {
           putBackInOriginalLocation(oldParentVNode.$elm$, false);
         }
       }
@@ -1185,6 +1076,22 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
   }
   return elm;
 };
+var relocateToHostRoot = (parentElm) => {
+  plt.$flags$ |= 1 /* isTmpDisconnected */;
+  const host = parentElm.closest(hostTagName.toLowerCase());
+  if (host != null) {
+    const contentRefNode = Array.from(host.childNodes).find((ref) => ref["s-cr"]);
+    const childNodeArray = Array.from(parentElm.childNodes);
+    for (const childNode of contentRefNode ? childNodeArray.reverse() : childNodeArray) {
+      if (childNode["s-sh"] != null) {
+        insertBefore(host, childNode, contentRefNode != null ? contentRefNode : null);
+        childNode["s-sh"] = void 0;
+        checkSlotRelocate = true;
+      }
+    }
+  }
+  plt.$flags$ &= ~1 /* isTmpDisconnected */;
+};
 var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ |= 1 /* isTmpDisconnected */;
   const oldSlotChildNodes = Array.from(parentElm.childNodes);
@@ -1212,9 +1119,9 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
   plt.$flags$ &= ~1 /* isTmpDisconnected */;
 };
 var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
-  let containerElm = parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
+  let containerElm = BUILD.slotRelocation && parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
   let childNode;
-  if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
+  if (BUILD.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {
     containerElm = containerElm.shadowRoot;
   }
   for (; startIdx <= endIdx; ++startIdx) {
@@ -1222,7 +1129,7 @@ var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
       childNode = createElm(null, parentVNode, startIdx, parentElm);
       if (childNode) {
         vnodes[startIdx].$elm$ = childNode;
-        insertBefore(containerElm, childNode, referenceNode(before) );
+        insertBefore(containerElm, childNode, BUILD.slotRelocation ? referenceNode(before) : before);
       }
     }
   }
@@ -1234,7 +1141,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
       const elm = vnode.$elm$;
       nullifyVNodeRefs(vnode);
       if (elm) {
-        {
+        if (BUILD.slotRelocation) {
           checkSlotFallbackVisibility = true;
           if (elm["s-ol"]) {
             elm["s-ol"].remove();
@@ -1278,7 +1185,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldEndVnode = oldCh[--oldEndIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {
-      if ((oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+      if (BUILD.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
         putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
       }
       patch(oldStartVnode, newEndVnode, isInitialRender);
@@ -1286,7 +1193,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       oldStartVnode = oldCh[++oldStartIdx];
       newEndVnode = newCh[--newEndIdx];
     } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) {
-      if ((oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
+      if (BUILD.slotRelocation && (oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) {
         putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
       }
       patch(oldEndVnode, newStartVnode, isInitialRender);
@@ -1295,7 +1202,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       newStartVnode = newCh[++newStartIdx];
     } else {
       idxInOld = -1;
-      {
+      if (BUILD.vdomKey) {
         for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) {
           if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) {
             idxInOld = i2;
@@ -1303,7 +1210,7 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
           }
         }
       }
-      if (idxInOld >= 0) {
+      if (BUILD.vdomKey && idxInOld >= 0) {
         elmToMove = oldCh[idxInOld];
         if (elmToMove.$tag$ !== newStartVnode.$tag$) {
           node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld, parentElm);
@@ -1318,8 +1225,10 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
         newStartVnode = newCh[++newStartIdx];
       }
       if (node) {
-        {
+        if (BUILD.slotRelocation) {
           insertBefore(parentReferenceNode(oldStartVnode.$elm$), node, referenceNode(oldStartVnode.$elm$));
+        } else {
+          insertBefore(oldStartVnode.$elm$.parentNode, node, oldStartVnode.$elm$);
         }
       }
     }
@@ -1333,13 +1242,13 @@ var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = fals
       newStartIdx,
       newEndIdx
     );
-  } else if (newStartIdx > newEndIdx) {
+  } else if (BUILD.updatable && newStartIdx > newEndIdx) {
     removeVnodes(oldCh, oldStartIdx, oldEndIdx);
   }
 };
 var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
   if (leftVNode.$tag$ === rightVNode.$tag$) {
-    if (leftVNode.$tag$ === "slot") {
+    if (BUILD.slotRelocation && leftVNode.$tag$ === "slot") {
       if (
         // The component gets hydrated and no VDOM has been initialized.
         // Here the comparison can't happen as $name$ property is not set for `leftNode`.
@@ -1351,7 +1260,7 @@ var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => {
       }
       return leftVNode.$name$ === rightVNode.$name$;
     }
-    if (!isInitialRender) {
+    if (BUILD.vdomKey && !isInitialRender) {
       return leftVNode.$key$ === rightVNode.$key$;
     }
     return true;
@@ -1369,16 +1278,24 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   let defaultHolder;
-  if (text === null) {
-    {
-      if (tag === "slot" && !useNativeShadowDom) ; else {
+  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 (BUILD.experimentalSlotFixes && oldVNode.$name$ !== newVNode2.$name$) {
+          newVNode2.$elm$["s-sn"] = newVNode2.$name$ || "";
+          relocateToHostRoot(newVNode2.$elm$.parentElement);
+        }
+      } else {
         updateElement(oldVNode, newVNode2, isSvgMode);
       }
     }
-    if (oldChildren !== null && newChildren !== null) {
+    if (BUILD.updatable && oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
     } else if (newChildren !== null) {
-      if (oldVNode.$text$ !== null) {
+      if (BUILD.updatable && BUILD.vdomText && oldVNode.$text$ !== null) {
         elm.textContent = "";
       }
       addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
@@ -1388,9 +1305,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
-  } else if ((defaultHolder = elm["s-cr"])) {
+    if (BUILD.svg && isSvgMode && tag === "svg") {
+      isSvgMode = false;
+    }
+  } else if (BUILD.vdomText && BUILD.slotRelocation && (defaultHolder = elm["s-cr"])) {
     defaultHolder.parentNode.textContent = text;
-  } else if (oldVNode.$text$ !== text) {
+  } else if (BUILD.vdomText && oldVNode.$text$ !== text) {
     elm.data = text;
   }
 };
@@ -1432,7 +1352,7 @@ var markSlotContentForRelocation = (elm) => {
       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"] && (!BUILD.experimentalSlotFixes  )) {
+        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (!BUILD.experimentalSlotFixes || !node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
           if (isNodeLocatedInSlot(node, slotName)) {
             let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
             checkSlotFallbackVisibility = true;
@@ -1486,23 +1406,66 @@ var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
   return slotName === "";
 };
 var nullifyVNodeRefs = (vNode) => {
-  {
+  if (BUILD.vdomRef) {
     vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
     vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
   }
 };
 var insertBefore = (parent, newNode, reference) => {
   const inserted = parent == null ? void 0 : parent.insertBefore(newNode, reference);
+  if (BUILD.scoped) {
+    updateElementScopeIds(newNode, parent);
+  }
   return inserted;
 };
+var findScopeIds = (element) => {
+  const scopeIds = [];
+  if (element) {
+    scopeIds.push(
+      ...element["s-scs"] || [],
+      element["s-si"],
+      element["s-sc"],
+      ...findScopeIds(element.parentElement)
+    );
+  }
+  return scopeIds;
+};
+var updateElementScopeIds = (element, parent, iterateChildNodes = false) => {
+  var _a;
+  if (element && parent && element.nodeType === 1 /* ElementNode */) {
+    const scopeIds = new Set(findScopeIds(parent).filter(Boolean));
+    if (scopeIds.size) {
+      (_a = element.classList) == null ? void 0 : _a.add(...element["s-scs"] = [...scopeIds]);
+      if (element["s-ol"] || iterateChildNodes) {
+        for (const childNode of Array.from(element.childNodes)) {
+          updateElementScopeIds(childNode, element, true);
+        }
+      }
+    }
+  }
+};
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   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 (cmpMeta.$attrsToReflect$) {
+  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$.map(
       ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
@@ -1518,24 +1481,24 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   rootVnode.$tag$ = null;
   rootVnode.$flags$ |= 4 /* isHost */;
   hostRef.$vnode$ = rootVnode;
-  rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
-  {
+  rootVnode.$elm$ = oldVNode.$elm$ = BUILD.shadowDom ? hostElm.shadowRoot || hostElm : hostElm;
+  if (BUILD.scoped || BUILD.shadowDom) {
     scopeId = hostElm["s-sc"];
   }
-  useNativeShadowDom = (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
-  {
+  useNativeShadowDom = supportsShadow && (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) !== 0;
+  if (BUILD.slotRelocation) {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
   }
   patch(oldVNode, rootVnode, isInitialLoad);
-  {
+  if (BUILD.slotRelocation) {
     plt.$flags$ |= 1 /* isTmpDisconnected */;
     if (checkSlotRelocate) {
       markSlotContentForRelocation(rootVnode.$elm$);
       for (const relocateData of relocateNodes) {
         const nodeToRelocate = relocateData.$nodeToRelocate$;
         if (!nodeToRelocate["s-ol"]) {
-          const orgLocationNode = doc.createTextNode("");
+          const orgLocationNode = BUILD.isDebug || BUILD.hydrateServerSide ? originalLocationDebugNode(nodeToRelocate) : doc.createTextNode("");
           orgLocationNode["s-nr"] = nodeToRelocate;
           insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
         }
@@ -1546,7 +1509,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
         if (slotRefNode) {
           const parentNodeRef = slotRefNode.parentNode;
           let insertBeforeNode = slotRefNode.nextSibling;
-          {
+          if (!BUILD.experimentalSlotFixes || insertBeforeNode && insertBeforeNode.nodeType === 1 /* ElementNode */) {
             let orgLocationNode = (_a = nodeToRelocate["s-ol"]) == null ? void 0 : _a.previousSibling;
             while (orgLocationNode) {
               let refNode = (_b = orgLocationNode["s-nr"]) != null ? _b : null;
@@ -1565,7 +1528,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
           }
           if (!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode || nodeToRelocate.nextSibling !== insertBeforeNode) {
             if (nodeToRelocate !== insertBeforeNode) {
-              if (!nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
+              if (!BUILD.experimentalSlotFixes && !nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) {
                 nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName;
               }
               insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode);
@@ -1591,31 +1554,47 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     plt.$flags$ &= ~1 /* isTmpDisconnected */;
     relocateNodes.length = 0;
   }
+  if (BUILD.experimentalScopedSlotChanges && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+    for (const childNode of rootVnode.$elm$.childNodes) {
+      if (childNode["s-hn"] !== hostTagName && !childNode["s-sh"]) {
+        if (isInitialLoad && childNode["s-ih"] == null) {
+          childNode["s-ih"] = (_e = childNode.hidden) != null ? _e : false;
+        }
+        childNode.hidden = true;
+      }
+    }
+  }
   contentRef = void 0;
 };
+var slotReferenceDebugNode = (slotVNode) => doc.createComment(
+  `<slot${slotVNode.$name$ ? ' name="' + slotVNode.$name$ + '"' : ""}> (host=${hostTagName.toLowerCase()})`
+);
+var originalLocationDebugNode = (nodeToRelocate) => doc.createComment(
+  `org-location for ` + (nodeToRelocate.localName ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate["s-hn"]})` : `[${nodeToRelocate.textContent}]`)
+);
 
 // src/runtime/update-component.ts
 var attachToAncestor = (hostRef, ancestorComponent) => {
-  if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
+  if (BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) {
     ancestorComponent["s-p"].push(new Promise((r) => hostRef.$onRenderResolve$ = r));
   }
 };
 var scheduleUpdate = (hostRef, isInitialLoad) => {
-  {
+  if (BUILD.taskQueue && BUILD.updatable) {
     hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
   }
-  if (hostRef.$flags$ & 4 /* isWaitingForChildren */) {
+  if (BUILD.asyncLoading && hostRef.$flags$ & 4 /* isWaitingForChildren */) {
     hostRef.$flags$ |= 512 /* needsRerender */;
     return;
   }
   attachToAncestor(hostRef, hostRef.$ancestorComponent$);
   const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
-  return writeTask(dispatch) ;
+  return BUILD.taskQueue ? writeTask(dispatch) : dispatch();
 };
 var dispatchHooks = (hostRef, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$);
-  const instance = hostRef.$lazyInstance$ ;
+  const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
   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`
@@ -1623,16 +1602,26 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   }
   let maybePromise;
   if (isInitialLoad) {
-    {
+    if (BUILD.lazyLoad && BUILD.hostListener) {
       hostRef.$flags$ |= 256 /* isListenReady */;
       if (hostRef.$queuedListeners$) {
         hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
         hostRef.$queuedListeners$ = void 0;
       }
     }
-    {
+    emitLifecycleEvent(elm, "componentWillLoad");
+    if (BUILD.cmpWillLoad) {
       maybePromise = safeCall(instance, "componentWillLoad");
     }
+  } else {
+    emitLifecycleEvent(elm, "componentWillUpdate");
+    if (BUILD.cmpWillUpdate) {
+      maybePromise = safeCall(instance, "componentWillUpdate");
+    }
+  }
+  emitLifecycleEvent(elm, "componentWillRender");
+  if (BUILD.cmpWillRender) {
+    maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender"));
   }
   endSchedule();
   return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
@@ -1647,20 +1636,43 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
   const elm = hostRef.$hostElement$;
   const endUpdate = createTime("update", hostRef.$cmpMeta$.$tagName$);
   const rc = elm["s-rc"];
-  if (isInitialLoad) {
+  if (BUILD.style && isInitialLoad) {
     attachStyles(hostRef);
   }
   const endRender = createTime("render", hostRef.$cmpMeta$.$tagName$);
-  {
+  if (BUILD.isDev) {
+    hostRef.$flags$ |= 1024 /* devOnRender */;
+  }
+  if (BUILD.hydrateServerSide) {
+    await callRender(hostRef, instance, elm, isInitialLoad);
+  } else {
     callRender(hostRef, instance, elm, isInitialLoad);
   }
-  if (rc) {
+  if (BUILD.isDev) {
+    hostRef.$renderCount$ = hostRef.$renderCount$ === void 0 ? 1 : hostRef.$renderCount$ + 1;
+    hostRef.$flags$ &= ~1024 /* devOnRender */;
+  }
+  if (BUILD.hydrateServerSide) {
+    try {
+      serverSideConnected(elm);
+      if (isInitialLoad) {
+        if (hostRef.$cmpMeta$.$flags$ & 1 /* shadowDomEncapsulation */) {
+          elm["s-en"] = "";
+        } else if (hostRef.$cmpMeta$.$flags$ & 2 /* 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 = (_a = elm["s-p"]) != null ? _a : [];
     const postUpdate = () => postUpdateComponent(hostRef);
     if (childrenPromises.length === 0) {
@@ -1670,60 +1682,103 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
       hostRef.$flags$ |= 4 /* isWaitingForChildren */;
       childrenPromises.length = 0;
     }
+  } else {
+    postUpdateComponent(hostRef);
   }
 };
+var renderingRef = null;
 var 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 {
-    instance = instance.render() ;
-    {
+    renderingRef = instance;
+    instance = allRenderFn ? instance.render() : instance.render && instance.render();
+    if (updatable && taskQueue) {
       hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
     }
-    {
+    if (updatable || lazyLoad) {
       hostRef.$flags$ |= 2 /* 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$ & 1 /* shadowDomEncapsulation */) {
+          shadowRoot.textContent = instance;
+        } else {
+          elm.textContent = instance;
+        }
       }
     }
   } catch (e) {
     consoleError(e, hostRef.$hostElement$);
   }
+  renderingRef = null;
   return null;
 };
+var getRenderingRef = () => renderingRef;
 var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
   const endPostUpdate = createTime("postUpdate", tagName);
-  const instance = hostRef.$lazyInstance$ ;
+  const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
   const ancestorComponent = hostRef.$ancestorComponent$;
+  if (BUILD.cmpDidRender) {
+    if (BUILD.isDev) {
+      hostRef.$flags$ |= 1024 /* devOnRender */;
+    }
+    safeCall(instance, "componentDidRender");
+    if (BUILD.isDev) {
+      hostRef.$flags$ &= ~1024 /* devOnRender */;
+    }
+  }
+  emitLifecycleEvent(elm, "componentDidRender");
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
-    {
+    if (BUILD.asyncLoading && BUILD.cssAnnotations) {
       addHydratedFlag(elm);
     }
-    {
+    if (BUILD.cmpDidLoad) {
+      if (BUILD.isDev) {
+        hostRef.$flags$ |= 2048 /* devOnDidLoad */;
+      }
       safeCall(instance, "componentDidLoad");
+      if (BUILD.isDev) {
+        hostRef.$flags$ &= ~2048 /* devOnDidLoad */;
+      }
     }
+    emitLifecycleEvent(elm, "componentDidLoad");
     endPostUpdate();
-    {
+    if (BUILD.asyncLoading) {
       hostRef.$onReadyResolve$(elm);
       if (!ancestorComponent) {
-        appDidLoad();
+        appDidLoad(tagName);
       }
     }
   } else {
-    {
+    if (BUILD.cmpDidUpdate) {
+      if (BUILD.isDev) {
+        hostRef.$flags$ |= 1024 /* devOnRender */;
+      }
       safeCall(instance, "componentDidUpdate");
+      if (BUILD.isDev) {
+        hostRef.$flags$ &= ~1024 /* 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;
@@ -1734,11 +1789,28 @@ var postUpdateComponent = (hostRef) => {
     hostRef.$flags$ &= ~(4 /* isWaitingForChildren */ | 512 /* needsRerender */);
   }
 };
+var forceUpdate = (ref) => {
+  if (BUILD.updatable && (Build.isBrowser || Build.isTesting)) {
+    const hostRef = getHostRef(ref);
+    const isConnected = hostRef.$hostElement$.isConnected;
+    if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+      scheduleUpdate(hostRef, false);
+    }
+    return isConnected;
+  }
+  return false;
+};
 var appDidLoad = (who) => {
-  {
+  if (BUILD.cssAnnotations) {
     addHydratedFlag(doc.documentElement);
   }
+  if (BUILD.asyncQueue) {
+    plt.$flags$ |= 2 /* appLoaded */;
+  }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
+  if (BUILD.profile && performance.measure) {
+    performance.measure(`[Stencil] ${NAMESPACE} initial load (by ${who})`, "st:app:start");
+  }
 };
 var safeCall = (instance, method, arg) => {
   if (instance && instance[method]) {
@@ -1750,31 +1822,77 @@ var safeCall = (instance, method, arg) => {
   }
   return void 0;
 };
+var emitLifecycleEvent = (elm, lifecycleName) => {
+  if (BUILD.lifecycleDOMEvents) {
+    emitEvent(elm, "stencil_" + lifecycleName, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        namespace: NAMESPACE
+      }
+    });
+  }
+};
 var addHydratedFlag = (elm) => {
-  var _a;
-  return elm.classList.add((_a = BUILD.hydratedSelectorName) != null ? _a : "hydrated") ;
+  var _a, _b;
+  return BUILD.hydratedClass ? elm.classList.add((_a = BUILD.hydratedSelectorName) != null ? _a : "hydrated") : BUILD.hydratedAttribute ? elm.setAttribute((_b = BUILD.hydratedSelectorName) != null ? _b : "hydrated", "") : void 0;
+};
+var serverSideConnected = (elm) => {
+  const children = elm.children;
+  if (children != null) {
+    for (let i2 = 0, ii = children.length; i2 < ii; i2++) {
+      const childElm = children[i2];
+      if (typeof childElm.connectedCallback === "function") {
+        childElm.connectedCallback();
+      }
+      serverSideConnected(childElm);
+    }
+  }
 };
 
 // src/runtime/set-value.ts
 var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 var setValue = (ref, propName, newVal, cmpMeta) => {
   const hostRef = getHostRef(ref);
-  if (!hostRef) {
+  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/ionic-team/stencil/issues/5457).`
     );
   }
-  const elm = hostRef.$hostElement$ ;
+  const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : ref;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
-  const instance = hostRef.$lazyInstance$ ;
+  const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
   newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
   const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
   const didValueChange = newVal !== oldVal && !areBothNaN;
-  if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
+  if ((!BUILD.lazyLoad || !(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
-    if (instance) {
-      if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+    if (BUILD.isDev) {
+      if (hostRef.$flags$ & 1024 /* 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$ & 2048 /* 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.lazyLoad || instance) {
+      if (BUILD.watchCallback && cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
         const watchMethods = cmpMeta.$watchers$[propName];
         if (watchMethods) {
           watchMethods.map((watchMethodName) => {
@@ -1786,7 +1904,12 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
           });
         }
       }
-      if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+      if (BUILD.updatable && (flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+        if (BUILD.cmpShouldUpdate && instance.componentShouldUpdate) {
+          if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
+            return;
+          }
+        }
         scheduleUpdate(hostRef, false);
       }
     }
@@ -1797,24 +1920,59 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
-  if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (Cstr.watchers && !cmpMeta.$watchers$) {
+  if (BUILD.formAssociated && cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
+    FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach(
+      (cbName) => Object.defineProperty(prototype, cbName, {
+        value(...args) {
+          const hostRef = getHostRef(this);
+          const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : this;
+          const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
+          if (!instance) {
+            hostRef.$onReadyPromise$.then((instance2) => {
+              const cb = instance2[cbName];
+              typeof cb === "function" && cb.call(instance2, ...args);
+            });
+          } else {
+            const cb = instance[cbName];
+            typeof cb === "function" && cb.call(instance, ...args);
+          }
+        }
+      })
+    );
+  }
+  if (BUILD.member && cmpMeta.$members$ || BUILD.watchCallback && (cmpMeta.$watchers$ || Cstr.watchers)) {
+    if (BUILD.watchCallback && Cstr.watchers && !cmpMeta.$watchers$) {
       cmpMeta.$watchers$ = Cstr.watchers;
     }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
-      if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
+      if ((BUILD.prop || BUILD.state) && (memberFlags & 31 /* Prop */ || (!BUILD.lazyLoad || flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
         Object.defineProperty(prototype, memberName, {
           get() {
             return getValue(this, memberName);
           },
           set(newValue) {
+            if (BUILD.isDev) {
+              const ref = getHostRef(this);
+              if (
+                // we are proxying the instance (not element)
+                (flags & 1 /* isElementConstructor */) === 0 && // the element is not constructing
+                (ref && ref.$flags$ & 8 /* isConstructingInstance */) === 0 && // the member is a prop
+                (memberFlags & 31 /* Prop */) !== 0 && // the member is not mutable
+                (memberFlags & 1024 /* Mutable */) === 0
+              ) {
+                consoleDevWarn(
+                  `@Prop() "${memberName}" on <${cmpMeta.$tagName$}> is immutable but was modified from within the component.
+More information: https://stenciljs.com/docs/properties#prop-mutability`
+                );
+              }
+            }
             setValue(this, memberName, newValue, cmpMeta);
           },
           configurable: true,
           enumerable: true
         });
-      } else if (flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
+      } else if (BUILD.lazyLoad && BUILD.method && flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
         Object.defineProperty(prototype, memberName, {
           value(...args) {
             var _a2;
@@ -1827,7 +1985,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         });
       }
     });
-    if ((flags & 1 /* isElementConstructor */)) {
+    if (BUILD.observeAttribute && (!BUILD.lazyLoad || flags & 1 /* isElementConstructor */)) {
       const attrNameToPropName = /* @__PURE__ */ new Map();
       prototype.attributeChangedCallback = function(attrName, oldValue, newValue) {
         plt.jmp(() => {
@@ -1843,7 +2001,8 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             const hostRef = getHostRef(this);
             const flags2 = hostRef == null ? void 0 : hostRef.$flags$;
             if (flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) {
-              const instance = hostRef.$lazyInstance$ ;
+              const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : this;
+              const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;
               const entry = (_a2 = cmpMeta.$watchers$) == null ? void 0 : _a2[attrName];
               entry == null ? void 0 : entry.forEach((callbackName) => {
                 if (instance[callbackName] != null) {
@@ -1863,7 +2022,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
-            if (m[0] & 512 /* ReflectAttr */) {
+            if (BUILD.reflect && m[0] & 512 /* ReflectAttr */) {
               (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
             }
             return attrName;
@@ -1881,10 +2040,13 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
     hostRef.$flags$ |= 32 /* hasInitializedComponent */;
     const bundleId = cmpMeta.$lazyBundleId$;
-    if (bundleId) {
-      const CstrImport = loadModule(cmpMeta);
+    if ((BUILD.lazyLoad || BUILD.hydrateClientSide) && bundleId) {
+      const CstrImport = loadModule(cmpMeta, hostRef, hmrVersionId);
       if (CstrImport && "then" in CstrImport) {
-        const endLoad = uniqueTime();
+        const endLoad = uniqueTime(
+          `st:load:${cmpMeta.$tagName$}:${hostRef.$modeName$}`,
+          `[Stencil] Load module for <${cmpMeta.$tagName$}>`
+        );
         Cstr = await CstrImport;
         endLoad();
       } else {
@@ -1893,15 +2055,15 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       if (!Cstr) {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
-      if (!Cstr.isProxied) {
-        {
+      if (BUILD.member && !Cstr.isProxied) {
+        if (BUILD.watchCallback) {
           cmpMeta.$watchers$ = Cstr.watchers;
         }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
       const endNewInstance = createTime("createInstance", cmpMeta.$tagName$);
-      {
+      if (BUILD.member) {
         hostRef.$flags$ |= 8 /* isConstructingInstance */;
       }
       try {
@@ -1909,10 +2071,10 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       } catch (e) {
         consoleError(e);
       }
-      {
+      if (BUILD.member) {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
-      {
+      if (BUILD.watchCallback) {
         hostRef.$flags$ |= 128 /* isWatchReady */;
       }
       endNewInstance();
@@ -1922,14 +2084,26 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       const cmpTag = elm.localName;
       customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
     }
-    if (Cstr && Cstr.style) {
+    if (BUILD.style && Cstr && Cstr.style) {
       let style;
       if (typeof Cstr.style === "string") {
         style = Cstr.style;
+      } else if (BUILD.mode && typeof Cstr.style !== "string") {
+        hostRef.$modeName$ = computeMode(elm);
+        if (hostRef.$modeName$) {
+          style = Cstr.style[hostRef.$modeName$];
+        }
+        if (BUILD.hydrateServerSide && hostRef.$modeName$) {
+          elm.setAttribute("s-mode", hostRef.$modeName$);
+        }
       }
-      const scopeId2 = getScopeId(cmpMeta);
+      const scopeId2 = getScopeId(cmpMeta, hostRef.$modeName$);
       if (!styles.has(scopeId2)) {
         const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
+        if (!BUILD.hydrateServerSide && BUILD.shadowDom && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+        BUILD.shadowDomShim && cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
+          style = await import('./shadow-css-423dab2c.js').then((m) => m.scopeCss(style, scopeId2));
+        }
         registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
         endRegisterStyles();
       }
@@ -1937,14 +2111,14 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   }
   const ancestorComponent = hostRef.$ancestorComponent$;
   const schedule = () => scheduleUpdate(hostRef, true);
-  if (ancestorComponent && ancestorComponent["s-rc"]) {
+  if (BUILD.asyncLoading && ancestorComponent && ancestorComponent["s-rc"]) {
     ancestorComponent["s-rc"].push(schedule);
   } else {
     schedule();
   }
 };
 var fireConnectedCallback = (instance) => {
-  {
+  if (BUILD.lazyLoad && BUILD.connectedCallback) {
     safeCall(instance, "connectedCallback");
   }
 };
@@ -1955,35 +2129,38 @@ var connectedCallback = (elm) => {
     const hostRef = getHostRef(elm);
     const cmpMeta = hostRef.$cmpMeta$;
     const endConnected = createTime("connectedCallback", cmpMeta.$tagName$);
+    if (BUILD.hostListenerTargetParent) {
+      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);
+    }
     if (!(hostRef.$flags$ & 1 /* hasConnected */)) {
       hostRef.$flags$ |= 1 /* hasConnected */;
       let hostId;
-      {
+      if (BUILD.hydrateClientSide) {
         hostId = elm.getAttribute(HYDRATE_ID);
         if (hostId) {
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            const scopeId2 = addStyle(elm.shadowRoot, cmpMeta);
+          if (BUILD.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            const scopeId2 = BUILD.mode ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute("s-mode")) : addStyle(elm.shadowRoot, cmpMeta);
             elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
           }
           initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
         }
       }
-      if (!hostId) {
-        if (// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+      if (BUILD.slotRelocation && !hostId) {
+        if (BUILD.hydrateServerSide || (BUILD.slot || BUILD.shadowDom) && // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
         cmpMeta.$flags$ & (4 /* hasSlotRelocation */ | 8 /* needsShadowDomShim */)) {
           setContentReference(elm);
         }
       }
-      {
+      if (BUILD.asyncLoading) {
         let ancestorComponent = elm;
         while (ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host) {
-          if (ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
+          if (BUILD.hydrateClientSide && ancestorComponent.nodeType === 1 /* ElementNode */ && ancestorComponent.hasAttribute("s-id") && ancestorComponent["s-p"] || ancestorComponent["s-p"]) {
             attachToAncestor(hostRef, hostRef.$ancestorComponent$ = ancestorComponent);
             break;
           }
         }
       }
-      if (cmpMeta.$members$) {
+      if (BUILD.prop && !BUILD.hydrateServerSide && cmpMeta.$members$) {
         Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
           if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
             const value = elm[memberName];
@@ -1992,11 +2169,13 @@ var connectedCallback = (elm) => {
           }
         });
       }
-      {
+      if (BUILD.initializeNextTick) {
+        nextTick(() => initializeComponent(elm, hostRef, cmpMeta));
+      } else {
         initializeComponent(elm, hostRef, cmpMeta);
       }
     } else {
-      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
+      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
         fireConnectedCallback(hostRef.$lazyInstance$);
       } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -2008,37 +2187,480 @@ var connectedCallback = (elm) => {
 };
 var setContentReference = (elm) => {
   const contentRefElm = elm["s-cr"] = doc.createComment(
-    ""
+    BUILD.isDebug ? `content-ref (host=${elm.localName})` : ""
   );
   contentRefElm["s-cn"] = true;
   insertBefore(elm, contentRefElm, elm.firstChild);
 };
 var disconnectInstance = (instance) => {
-  {
+  if (BUILD.lazyLoad && BUILD.disconnectedCallback) {
     safeCall(instance, "disconnectedCallback");
   }
+  if (BUILD.cmpDidUnload) {
+    safeCall(instance, "componentDidUnload");
+  }
 };
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
-    {
+    if (BUILD.hostListener) {
       if (hostRef.$rmListeners$) {
         hostRef.$rmListeners$.map((rmListener) => rmListener());
         hostRef.$rmListeners$ = void 0;
       }
     }
-    if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
+    if (!BUILD.lazyLoad) {
+      disconnectInstance(elm);
+    } else if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
       disconnectInstance(hostRef.$lazyInstance$);
     } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
       hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
     }
   }
 };
+var patchPseudoShadowDom = (hostElementPrototype, descriptorPrototype) => {
+  patchCloneNode(hostElementPrototype);
+  patchSlotAppendChild(hostElementPrototype);
+  patchSlotAppend(hostElementPrototype);
+  patchSlotPrepend(hostElementPrototype);
+  patchSlotInsertAdjacentElement(hostElementPrototype);
+  patchSlotInsertAdjacentHTML(hostElementPrototype);
+  patchSlotInsertAdjacentText(hostElementPrototype);
+  patchTextContent(hostElementPrototype);
+  patchChildSlotNodes(hostElementPrototype, descriptorPrototype);
+  patchSlotRemoveChild(hostElementPrototype);
+};
+var patchCloneNode = (HostElementPrototype) => {
+  const orgCloneNode = 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 i2 = 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"
+      ];
+      for (; i2 < srcNode.childNodes.length; i2++) {
+        slotted = srcNode.childNodes[i2]["s-nr"];
+        nonStencilNode = stencilPrivates.every((privateField) => !srcNode.childNodes[i2][privateField]);
+        if (slotted) {
+          if (BUILD.appendChildSlotFix && clonedNode.__appendChild) {
+            clonedNode.__appendChild(slotted.cloneNode(true));
+          } else {
+            clonedNode.appendChild(slotted.cloneNode(true));
+          }
+        }
+        if (nonStencilNode) {
+          clonedNode.appendChild(srcNode.childNodes[i2].cloneNode(true));
+        }
+      }
+    }
+    return clonedNode;
+  };
+};
+var patchSlotAppendChild = (HostElementPrototype) => {
+  HostElementPrototype.__appendChild = HostElementPrototype.appendChild;
+  HostElementPrototype.appendChild = function(newChild) {
+    const slotName = newChild["s-sn"] = getSlotName(newChild);
+    const slotNode = getHostSlotNode(this.childNodes, slotName, this.tagName);
+    if (slotNode) {
+      const slotPlaceholder = document.createTextNode("");
+      slotPlaceholder["s-nr"] = newChild;
+      slotNode["s-cr"].parentNode.__appendChild(slotPlaceholder);
+      newChild["s-ol"] = slotPlaceholder;
+      newChild["s-sh"] = slotNode["s-hn"];
+      const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+      const appendAfter = slotChildNodes[slotChildNodes.length - 1];
+      const insertedNode = insertBefore(appendAfter.parentNode, newChild, appendAfter.nextSibling);
+      updateFallbackSlotVisibility(this);
+      return insertedNode;
+    }
+    return this.__appendChild(newChild);
+  };
+};
+var patchSlotRemoveChild = (ElementPrototype) => {
+  ElementPrototype.__removeChild = ElementPrototype.removeChild;
+  ElementPrototype.removeChild = function(toRemove) {
+    if (toRemove && typeof toRemove["s-sn"] !== "undefined") {
+      const slotNode = getHostSlotNode(this.childNodes, toRemove["s-sn"], this.tagName);
+      if (slotNode) {
+        const slotChildNodes = getHostSlotChildNodes(slotNode, toRemove["s-sn"]);
+        const existingNode = slotChildNodes.find((n) => n === toRemove);
+        if (existingNode) {
+          existingNode.remove();
+          updateFallbackSlotVisibility(this);
+          return;
+        }
+      }
+    }
+    return this.__removeChild(toRemove);
+  };
+};
+var patchSlotPrepend = (HostElementPrototype) => {
+  const originalPrepend = 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 = getHostSlotNode(this.childNodes, slotName, this.tagName);
+      if (slotNode) {
+        const slotPlaceholder = document.createTextNode("");
+        slotPlaceholder["s-nr"] = newChild;
+        slotNode["s-cr"].parentNode.__appendChild(slotPlaceholder);
+        newChild["s-ol"] = slotPlaceholder;
+        newChild["s-sh"] = slotNode["s-hn"];
+        const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
+        const appendAfter = slotChildNodes[0];
+        return insertBefore(appendAfter.parentNode, newChild, appendAfter.nextSibling);
+      }
+      if (newChild.nodeType === 1 && !!newChild.getAttribute("slot")) {
+        newChild.hidden = true;
+      }
+      return originalPrepend.call(this, newChild);
+    });
+  };
+};
+var patchSlotAppend = (HostElementPrototype) => {
+  HostElementPrototype.append = function(...newChildren) {
+    newChildren.forEach((newChild) => {
+      if (typeof newChild === "string") {
+        newChild = this.ownerDocument.createTextNode(newChild);
+      }
+      this.appendChild(newChild);
+    });
+  };
+};
+var patchSlotInsertAdjacentHTML = (HostElementPrototype) => {
+  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);
+      }
+    }
+  };
+};
+var patchSlotInsertAdjacentText = (HostElementPrototype) => {
+  HostElementPrototype.insertAdjacentText = function(position, text) {
+    this.insertAdjacentHTML(position, text);
+  };
+};
+var patchSlotInsertAdjacentElement = (HostElementPrototype) => {
+  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;
+  };
+};
+var patchTextContent = (hostElementPrototype) => {
+  const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, "textContent");
+  Object.defineProperty(hostElementPrototype, "__textContent", descriptor);
+  if (BUILD.experimentalScopedSlotChanges) {
+    Object.defineProperty(hostElementPrototype, "textContent", {
+      // To mimic shadow root behavior, we need to return the text content of all
+      // nodes in a slot reference node
+      get() {
+        const slotRefNodes = getAllChildSlotNodes(this.childNodes);
+        const textContent = slotRefNodes.map((node) => {
+          var _a, _b;
+          const text = [];
+          let slotContent = node.nextSibling;
+          while (slotContent && slotContent["s-sn"] === node["s-sn"]) {
+            if (slotContent.nodeType === 3 /* TEXT_NODE */ || slotContent.nodeType === 1 /* ELEMENT_NODE */) {
+              text.push((_b = (_a = slotContent.textContent) == null ? void 0 : _a.trim()) != null ? _b : "");
+            }
+            slotContent = slotContent.nextSibling;
+          }
+          return text.filter((ref) => ref !== "").join(" ");
+        }).filter((text) => text !== "").join(" ");
+        return " " + textContent + " ";
+      },
+      // To mimic shadow root behavior, we need to overwrite all nodes in a slot
+      // reference node. If a default slot reference node exists, the text content will be
+      // placed there. Otherwise, the new text node will be hidden
+      set(value) {
+        const slotRefNodes = getAllChildSlotNodes(this.childNodes);
+        slotRefNodes.forEach((node) => {
+          let slotContent = node.nextSibling;
+          while (slotContent && slotContent["s-sn"] === node["s-sn"]) {
+            const tmp = slotContent;
+            slotContent = slotContent.nextSibling;
+            tmp.remove();
+          }
+          if (node["s-sn"] === "") {
+            const textNode = this.ownerDocument.createTextNode(value);
+            textNode["s-sn"] = "";
+            insertBefore(node.parentElement, textNode, node.nextSibling);
+          } else {
+            node.remove();
+          }
+        });
+      }
+    });
+  } else {
+    Object.defineProperty(hostElementPrototype, "textContent", {
+      get() {
+        var _a;
+        const slotNode = getHostSlotNode(this.childNodes, "", this.tagName);
+        if (((_a = slotNode == null ? void 0 : slotNode.nextSibling) == null ? void 0 : _a.nodeType) === 3 /* TEXT_NODE */) {
+          return slotNode.nextSibling.textContent;
+        } else if (slotNode) {
+          return slotNode.textContent;
+        } else {
+          return this.__textContent;
+        }
+      },
+      set(value) {
+        var _a;
+        const slotNode = getHostSlotNode(this.childNodes, "", this.tagName);
+        if (((_a = slotNode == null ? void 0 : slotNode.nextSibling) == null ? void 0 : _a.nodeType) === 3 /* TEXT_NODE */) {
+          slotNode.nextSibling.textContent = value;
+        } else if (slotNode) {
+          slotNode.textContent = value;
+        } else {
+          this.__textContent = value;
+          const contentRefElm = this["s-cr"];
+          if (contentRefElm) {
+            insertBefore(this, contentRefElm, this.firstChild);
+          }
+        }
+      }
+    });
+  }
+};
+var patchChildSlotNodes = (elm, cmpMeta) => {
+  class FakeNodeList extends Array {
+    item(n) {
+      return this[n];
+    }
+  }
+  if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
+    const childNodesFn = elm.__lookupGetter__("childNodes");
+    Object.defineProperty(elm, "children", {
+      get() {
+        return this.childNodes.map((n) => n.nodeType === 1);
+      }
+    });
+    Object.defineProperty(elm, "childElementCount", {
+      get() {
+        return elm.children.length;
+      }
+    });
+    Object.defineProperty(elm, "childNodes", {
+      get() {
+        const childNodes = childNodesFn.call(this);
+        if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0 && getHostRef(this).$flags$ & 2 /* hasRendered */) {
+          const result = new FakeNodeList();
+          for (let i2 = 0; i2 < childNodes.length; i2++) {
+            const slot = childNodes[i2]["s-nr"];
+            if (slot) {
+              result.push(slot);
+            }
+          }
+          return result;
+        }
+        return FakeNodeList.from(childNodes);
+      }
+    });
+  }
+};
+var getAllChildSlotNodes = (childNodes) => {
+  const slotRefNodes = [];
+  for (const childNode of Array.from(childNodes)) {
+    if (childNode["s-sr"]) {
+      slotRefNodes.push(childNode);
+    }
+    slotRefNodes.push(...getAllChildSlotNodes(childNode.childNodes));
+  }
+  return slotRefNodes;
+};
+var getSlotName = (node) => node["s-sn"] || node.nodeType === 1 && node.getAttribute("slot") || "";
+var getHostSlotNode = (childNodes, slotName, hostName) => {
+  let i2 = 0;
+  let childNode;
+  for (; i2 < childNodes.length; i2++) {
+    childNode = childNodes[i2];
+    if (childNode["s-sr"] && childNode["s-sn"] === slotName && childNode["s-hn"] === hostName) {
+      return childNode;
+    }
+    childNode = getHostSlotNode(childNode.childNodes, slotName, hostName);
+    if (childNode) {
+      return childNode;
+    }
+  }
+  return null;
+};
+var getHostSlotChildNodes = (n, slotName) => {
+  const childNodes = [n];
+  while ((n = n.nextSibling) && n["s-sn"] === slotName) {
+    childNodes.push(n);
+  }
+  return childNodes;
+};
+
+// src/runtime/bootstrap-custom-element.ts
+var defineCustomElement = (Cstr, compactMeta) => {
+  customElements.define(compactMeta[1], proxyCustomElement(Cstr, compactMeta));
+};
+var proxyCustomElement = (Cstr, compactMeta) => {
+  const cmpMeta = {
+    $flags$: compactMeta[0],
+    $tagName$: compactMeta[1]
+  };
+  if (BUILD.member) {
+    cmpMeta.$members$ = compactMeta[2];
+  }
+  if (BUILD.hostListener) {
+    cmpMeta.$listeners$ = compactMeta[3];
+  }
+  if (BUILD.watchCallback) {
+    cmpMeta.$watchers$ = Cstr.$watchers$;
+  }
+  if (BUILD.reflect) {
+    cmpMeta.$attrsToReflect$ = [];
+  }
+  if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+    cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
+  }
+  if (BUILD.experimentalSlotFixes) {
+    if (BUILD.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+      patchPseudoShadowDom(Cstr.prototype, cmpMeta);
+    }
+  } else {
+    if (BUILD.slotChildNodesFix) {
+      patchChildSlotNodes(Cstr.prototype, cmpMeta);
+    }
+    if (BUILD.cloneNodeFix) {
+      patchCloneNode(Cstr.prototype);
+    }
+    if (BUILD.appendChildSlotFix) {
+      patchSlotAppendChild(Cstr.prototype);
+    }
+    if (BUILD.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+      patchTextContent(Cstr.prototype);
+    }
+  }
+  const originalConnectedCallback = Cstr.prototype.connectedCallback;
+  const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
+  Object.assign(Cstr.prototype, {
+    __registerHost() {
+      registerHost(this, cmpMeta);
+    },
+    connectedCallback() {
+      const hostRef = getHostRef(this);
+      addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
+      connectedCallback(this);
+      if (BUILD.connectedCallback && originalConnectedCallback) {
+        originalConnectedCallback.call(this);
+      }
+    },
+    disconnectedCallback() {
+      disconnectedCallback(this);
+      if (BUILD.disconnectedCallback && originalDisconnectedCallback) {
+        originalDisconnectedCallback.call(this);
+      }
+    },
+    __attachShadow() {
+      if (supportsShadow) {
+        if (!this.shadowRoot) {
+          if (BUILD.shadowDelegatesFocus) {
+            this.attachShadow({
+              mode: "open",
+              delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
+            });
+          } else {
+            this.attachShadow({ mode: "open" });
+          }
+        } 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;
+      }
+    }
+  });
+  Cstr.is = cmpMeta.$tagName$;
+  return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
+};
+var forceModeUpdate = (elm) => {
+  if (BUILD.style && BUILD.mode && !BUILD.lazyLoad) {
+    const mode = computeMode(elm);
+    const hostRef = getHostRef(elm);
+    if (hostRef.$modeName$ !== mode) {
+      const cmpMeta = hostRef.$cmpMeta$;
+      const oldScopeId = elm["s-sc"];
+      const scopeId2 = getScopeId(cmpMeta, mode);
+      const style = elm.constructor.style[mode];
+      const flags = cmpMeta.$flags$;
+      if (style) {
+        if (!styles.has(scopeId2)) {
+          registerStyle(scopeId2, style, !!(flags & 1 /* shadowDomEncapsulation */));
+        }
+        hostRef.$modeName$ = mode;
+        elm.classList.remove(oldScopeId + "-h", oldScopeId + "-s");
+        attachStyles(hostRef);
+        forceUpdate(elm);
+      }
+    }
+  }
+};
+
+// src/runtime/hmr-component.ts
+var hmrStart = (hostElement, cmpMeta, hmrVersionId) => {
+  const hostRef = getHostRef(hostElement);
+  hostRef.$flags$ = 1 /* hasConnected */;
+  initializeComponent(hostElement, hostRef, cmpMeta, hmrVersionId);
+};
 
 // src/runtime/bootstrap-lazy.ts
 var bootstrapLazy = (lazyBundles, options = {}) => {
   var _a;
-  const endBootstrap = createTime();
+  if (BUILD.profile && performance.mark) {
+    performance.mark("st:app:start");
+  }
+  installDevTools();
+  const endBootstrap = createTime("bootstrapLazy");
   const cmpTags = [];
   const exclude = options.exclude || [];
   const customElements2 = win.customElements;
@@ -2050,7 +2672,12 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let isBootstrapping = true;
   Object.assign(plt, options);
   plt.$resourcesUrl$ = new URL(options.resourcesUrl || "./", doc.baseURI).href;
-  {
+  if (BUILD.asyncQueue) {
+    if (options.syncQueue) {
+      plt.$flags$ |= 4 /* queueSync */;
+    }
+  }
+  if (BUILD.hydrateClientSide) {
     plt.$flags$ |= 2 /* appLoaded */;
   }
   let hasSlotRelocation = false;
@@ -2066,19 +2693,22 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
         hasSlotRelocation = true;
       }
-      {
+      if (BUILD.member) {
         cmpMeta.$members$ = compactMeta[2];
       }
-      {
+      if (BUILD.hostListener) {
         cmpMeta.$listeners$ = compactMeta[3];
       }
-      {
+      if (BUILD.reflect) {
         cmpMeta.$attrsToReflect$ = [];
       }
-      {
+      if (BUILD.watchCallback) {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
       }
-      const tagName = cmpMeta.$tagName$;
+      if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+        cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
+      }
+      const tagName = BUILD.transformTagName && options.transformTagName ? options.transformTagName(cmpMeta.$tagName$) : cmpMeta.$tagName$;
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
         constructor(self) {
@@ -2086,10 +2716,15 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           this.hasRegisteredEventListeners = false;
           self = this;
           registerHost(self, cmpMeta);
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            {
+          if (BUILD.shadowDom && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+            if (supportsShadow) {
               if (!self.shadowRoot) {
-                {
+                if (BUILD.shadowDelegatesFocus) {
+                  self.attachShadow({
+                    mode: "open",
+                    delegatesFocus: !!(cmpMeta.$flags$ & 16 /* shadowDelegatesFocus */)
+                  });
+                } else {
                   self.attachShadow({ mode: "open" });
                 }
               } else {
@@ -2099,6 +2734,8 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
                   );
                 }
               }
+            } else if (!BUILD.hydrateServerSide && !("shadowRoot" in self)) {
+              self.shadowRoot = self;
             }
           }
         }
@@ -2106,7 +2743,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           const hostRef = getHostRef(this);
           if (!this.hasRegisteredEventListeners) {
             this.hasRegisteredEventListeners = true;
-            addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
+            addHostEventListeners(this, hostRef, cmpMeta.$listeners$, false);
           }
           if (appLoadFallback) {
             clearTimeout(appLoadFallback);
@@ -2125,6 +2762,32 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           return getHostRef(this).$onReadyPromise$;
         }
       };
+      if (BUILD.experimentalSlotFixes) {
+        if (BUILD.scoped && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+          patchPseudoShadowDom(HostElement.prototype, cmpMeta);
+        }
+      } else {
+        if (BUILD.slotChildNodesFix) {
+          patchChildSlotNodes(HostElement.prototype, cmpMeta);
+        }
+        if (BUILD.cloneNodeFix) {
+          patchCloneNode(HostElement.prototype);
+        }
+        if (BUILD.appendChildSlotFix) {
+          patchSlotAppendChild(HostElement.prototype);
+        }
+        if (BUILD.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* scopedCssEncapsulation */) {
+          patchTextContent(HostElement.prototype);
+        }
+      }
+      if (BUILD.formAssociated && cmpMeta.$flags$ & 64 /* 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) && !customElements2.get(tagName)) {
         cmpTags.push(tagName);
@@ -2139,7 +2802,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
     if (hasSlotRelocation) {
       dataStyles.textContent += SLOT_FB_CSS;
     }
-    {
+    if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) {
       dataStyles.textContent += cmpTags.sort() + HYDRATED_CSS;
     }
     if (dataStyles.innerHTML.length) {
@@ -2155,16 +2818,28 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   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();
 };
+
+// src/runtime/fragment.ts
+var Fragment = (_, children) => children;
 var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
-  if (listeners) {
+  if (BUILD.hostListener && listeners) {
+    if (BUILD.hostListenerTargetParent) {
+      if (attachParentListeners) {
+        listeners = listeners.filter(([flags]) => flags & 32 /* TargetParent */);
+      } else {
+        listeners = listeners.filter(([flags]) => !(flags & 32 /* TargetParent */));
+      }
+    }
     listeners.map(([flags, name, method]) => {
-      const target = getHostListenerTarget(elm, flags) ;
+      const target = BUILD.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;
       const handler = hostListenerProxy(hostRef, method);
       const opts = hostListenerOpts(flags);
       plt.ael(target, name, handler, opts);
@@ -2175,20 +2850,25 @@ var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) =>
 var hostListenerProxy = (hostRef, methodName) => (ev) => {
   var _a;
   try {
-    {
+    if (BUILD.lazyLoad) {
       if (hostRef.$flags$ & 256 /* isListenReady */) {
         (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
       } else {
         (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
       }
+    } else {
+      hostRef.$hostElement$[methodName](ev);
     }
   } catch (e) {
     consoleError(e);
   }
 };
 var getHostListenerTarget = (elm, flags) => {
-  if (flags & 8 /* TargetWindow */) return win;
-  if (flags & 16 /* TargetBody */) return doc.body;
+  if (BUILD.hostListenerTargetDocument && flags & 4 /* TargetDocument */) return doc;
+  if (BUILD.hostListenerTargetWindow && flags & 8 /* TargetWindow */) return win;
+  if (BUILD.hostListenerTargetBody && flags & 16 /* TargetBody */) return doc.body;
+  if (BUILD.hostListenerTargetParent && flags & 32 /* TargetParent */ && elm.parentElement)
+    return elm.parentElement;
   return elm;
 };
 var hostListenerOpts = (flags) => supportsListenerOptions ? {
@@ -2199,4 +2879,145 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+// src/runtime/platform-options.ts
+var setPlatformOptions = (opts) => Object.assign(plt, opts);
+
+// src/runtime/vdom/vdom-annotations.ts
+var insertVdomAnnotations = (doc2, staticComponents) => {
+  if (doc2 != null) {
+    const docData = {
+      hostIds: 0,
+      rootLevelIds: 0,
+      staticComponents: new Set(staticComponents)
+    };
+    const orgLocationNodes = [];
+    parseVNodeAnnotations(doc2, doc2.body, docData, orgLocationNodes);
+    orgLocationNodes.forEach((orgLocationNode) => {
+      var _a;
+      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 === 1 /* ElementNode */) {
+            nodeRef.setAttribute(HYDRATE_CHILD_ID, childId);
+          } else if (nodeRef.nodeType === 3 /* TextNode */) {
+            if (hostId === 0) {
+              const textContent = (_a = nodeRef.nodeValue) == null ? void 0 : _a.trim();
+              if (textContent === "") {
+                orgLocationNode.remove();
+                return;
+              }
+            }
+            const commentBeforeTextNode = doc2.createComment(childId);
+            commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`;
+            insertBefore(nodeRef.parentNode, 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;
+      }
+    });
+  }
+};
+var parseVNodeAnnotations = (doc2, node, docData, orgLocationNodes) => {
+  var _a;
+  if (node == null) {
+    return;
+  }
+  if (node["s-nr"] != null) {
+    orgLocationNodes.push(node);
+  }
+  if (node.nodeType === 1 /* ElementNode */) {
+    const childNodes = [...Array.from(node.childNodes), ...Array.from(((_a = node.shadowRoot) == null ? void 0 : _a.childNodes) || [])];
+    childNodes.forEach((childNode) => {
+      const hostRef = getHostRef(childNode);
+      if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) {
+        const cmpData = {
+          nodeIds: 0
+        };
+        insertVNodeAnnotations(doc2, childNode, hostRef.$vnode$, docData, cmpData);
+      }
+      parseVNodeAnnotations(doc2, childNode, docData, orgLocationNodes);
+    });
+  }
+};
+var insertVNodeAnnotations = (doc2, 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(doc2, 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 === 8 /* 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}`
+          );
+        }
+      }
+    }
+  }
+};
+var insertChildVNodeAnnotations = (doc2, 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 === 1 /* ElementNode */) {
+    childElm.setAttribute(HYDRATE_CHILD_ID, childId);
+  } else if (childElm.nodeType === 3 /* TextNode */) {
+    const parentNode = childElm.parentNode;
+    const nodeName = parentNode == null ? void 0 : parentNode.nodeName;
+    if (nodeName !== "STYLE" && nodeName !== "SCRIPT") {
+      const textNodeId = `${TEXT_NODE_ID}.${childId}`;
+      const commentBeforeTextNode = doc2.createComment(textNodeId);
+      insertBefore(parentNode, commentBeforeTextNode, childElm);
+    }
+  } else if (childElm.nodeType === 8 /* CommentNode */) {
+    if (childElm["s-sr"]) {
+      const slotName = childElm["s-sn"] || "";
+      const slotNodeId = `${SLOT_NODE_ID}.${childId}.${slotName}`;
+      childElm.nodeValue = slotNodeId;
+    }
+  }
+  if (vnodeChild.$children$ != null) {
+    const childDepth = depth + 1;
+    vnodeChild.$children$.forEach((vnode, index2) => {
+      insertChildVNodeAnnotations(doc2, vnode, cmpData, hostId, childDepth, index2);
+    });
+  }
+};
+
+export { BUILD as B, H, NAMESPACE as N, createEvent as a, bootstrapLazy as b, consoleDevInfo as c, doc as d, Host as e, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };