@yoobic/yobi 8.5.0-50 → 8.5.0-52

package/dist/cjs/{index-7319daa9.js → index-9ca0e46c.js}

@@ -24,6 +24,14 @@ const NAMESPACE = 'design-system';
 const BUILD = /* design-system */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: true, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: true, connectedCallback: true, constructableCSS: true, cssAnnotations: true, cssVarShim: false, devTools: true, disconnectedCallback: true, dynamicImportShim: false, element: false, event: true, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: true, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: true, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, safari10: false, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: false, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, 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 = /* design-system */ {};
 
+/**
+ * Virtual DOM patching algorithm based on Snabbdom by
+ * Simon Friis Vindum (@paldepind)
+ * Licensed under the MIT License
+ * https://github.com/snabbdom/snabbdom/blob/master/LICENSE
+ *
+ * Modified for Stencil's renderer and slot projection
+ */
 let scopeId;
 let contentRef;
 let hostTagName;
@@ -36,126 +44,18 @@ let isSvgMode = false;
 let renderingRef = null;
 let queueCongestion = 0;
 let queuePending = false;
-const win = typeof window !== 'undefined' ? window : {};
-const CSS = BUILD.cssVarShim ? win.CSS : null;
-const doc = win.document || { head: {} };
-const H = (win.HTMLElement || class {
-});
-const plt = {
-    $flags$: 0,
-    $resourcesUrl$: '',
-    jmp: (h) => h(),
-    raf: (h) => requestAnimationFrame(h),
-    ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
-    rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
-    ce: (eventName, opts) => new CustomEvent(eventName, opts),
-};
-const setPlatformHelpers = (helpers) => {
-    Object.assign(plt, helpers);
+const Build = {
+    isDev: BUILD.isDev ? true : false,
+    isBrowser: true,
+    isServer: false,
+    isTesting: BUILD.isTesting ? true : false,
 };
-const supportsShadow = BUILD.shadowDomShim && BUILD.shadowDom
-    ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)()
-    : true;
-const supportsListenerOptions = /*@__PURE__*/ (() => {
-    let supportsListenerOptions = false;
-    try {
-        doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
-            get() {
-                supportsListenerOptions = true;
-            },
-        }));
-    }
-    catch (e) { }
-    return supportsListenerOptions;
-})();
-const promiseResolve = (v) => Promise.resolve(v);
-const supportsConstructableStylesheets = BUILD.constructableCSS
-    ? /*@__PURE__*/ (() => {
-        try {
-            new CSSStyleSheet();
-            return typeof new CSSStyleSheet().replaceSync === 'function';
-        }
-        catch (e) { }
-        return false;
-    })()
-    : false;
 const Context = {};
-const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
-    if (BUILD.hostListener && listeners) {
-        // this is called immediately within the element's constructor
-        // initialize our event listeners on the host element
-        // we do this now so that we can listen to events that may
-        // have fired even before the instance is ready
-        if (BUILD.hostListenerTargetParent) {
-            // this component may have event listeners that should be attached to the parent
-            if (attachParentListeners) {
-                // this is being ran from within the connectedCallback
-                // which is important so that we know the host element actually has a parent element
-                // filter out the listeners to only have the ones that ARE being attached to the parent
-                listeners = listeners.filter(([flags]) => flags & 32 /* LISTENER_FLAGS.TargetParent */);
-            }
-            else {
-                // this is being ran from within the component constructor
-                // everything BUT the parent element listeners should be attached at this time
-                // filter out the listeners that are NOT being attached to the parent
-                listeners = listeners.filter(([flags]) => !(flags & 32 /* LISTENER_FLAGS.TargetParent */));
-            }
-        }
-        listeners.map(([flags, name, method]) => {
-            const target = BUILD.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;
-            const handler = hostListenerProxy(hostRef, method);
-            const opts = hostListenerOpts(flags);
-            plt.ael(target, name, handler, opts);
-            (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
-        });
-    }
-};
-const hostListenerProxy = (hostRef, methodName) => (ev) => {
-    try {
-        if (BUILD.lazyLoad) {
-            if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
-                // instance is ready, let's call it's member method for this event
-                hostRef.$lazyInstance$[methodName](ev);
-            }
-            else {
-                (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
-            }
-        }
-        else {
-            hostRef.$hostElement$[methodName](ev);
-        }
-    }
-    catch (e) {
-        consoleError(e);
-    }
-};
-const getHostListenerTarget = (elm, flags) => {
-    if (BUILD.hostListenerTargetDocument && flags & 4 /* LISTENER_FLAGS.TargetDocument */)
-        return doc;
-    if (BUILD.hostListenerTargetWindow && flags & 8 /* LISTENER_FLAGS.TargetWindow */)
-        return win;
-    if (BUILD.hostListenerTargetBody && flags & 16 /* LISTENER_FLAGS.TargetBody */)
-        return doc.body;
-    if (BUILD.hostListenerTargetParent && flags & 32 /* LISTENER_FLAGS.TargetParent */)
-        return elm.parentElement;
-    return elm;
+const getAssetPath = (path) => {
+    const assetUrl = new URL(path, plt.$resourcesUrl$);
+    return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
 };
-// prettier-ignore
-const hostListenerOpts = (flags) => supportsListenerOptions
-    ? ({
-        passive: (flags & 1 /* LISTENER_FLAGS.Passive */) !== 0,
-        capture: (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0,
-    })
-    : (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
-const CONTENT_REF_ID = 'r';
-const ORG_LOCATION_ID = 'o';
-const SLOT_NODE_ID = 's';
-const TEXT_NODE_ID = 't';
-const HYDRATE_ID = 's-id';
-const HYDRATED_STYLE_ID = 'sty-id';
-const HYDRATE_CHILD_ID = 'c-id';
-const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
-const XLINK_NS = 'http://www.w3.org/1999/xlink';
+const setAssetPath = (path) => (plt.$resourcesUrl$ = path);
 const createTime = (fnName, tagName = '') => {
     if (BUILD.profile && performance.mark) {
         const key = `st:${fnName}:${tagName}:${i++}`;
@@ -242,108 +142,15 @@ const installDevTools = () => {
         };
     }
 };
-const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
-const registerStyle = (scopeId, cssText, allowCS) => {
-    let style = styles.get(scopeId);
-    if (supportsConstructableStylesheets && allowCS) {
-        style = (style || new CSSStyleSheet());
-        if (typeof style === 'string') {
-            style = cssText;
-        }
-        else {
-            style.replaceSync(cssText);
-        }
-    }
-    else {
-        style = cssText;
-    }
-    styles.set(scopeId, style);
-};
-const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
-    let scopeId = getScopeId(cmpMeta, mode);
-    const style = styles.get(scopeId);
-    if (!BUILD.attachStyles) {
-        return scopeId;
-    }
-    // if an element is NOT connected then getRootNode() will return the wrong root node
-    // so the fallback is to always use the document for the root node in those cases
-    styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
-    if (style) {
-        if (typeof style === 'string') {
-            styleContainerNode = styleContainerNode.head || styleContainerNode;
-            let appliedStyles = rootAppliedStyles.get(styleContainerNode);
-            let styleElm;
-            if (!appliedStyles) {
-                rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
-            }
-            if (!appliedStyles.has(scopeId)) {
-                if (BUILD.hydrateClientSide &&
-                    styleContainerNode.host &&
-                    (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) {
-                    // This is only happening on native shadow-dom, do not needs CSS var shim
-                    styleElm.innerHTML = style;
-                }
-                else {
-                    if (BUILD.cssVarShim && plt.$cssShim$) {
-                        styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 /* CMP_FLAGS.needsScopedEncapsulation */));
-                        const newScopeId = styleElm['s-sc'];
-                        if (newScopeId) {
-                            scopeId = newScopeId;
-                            // we don't want to add this styleID to the appliedStyles Set
-                            // since the cssVarShim might need to apply several different
-                            // stylesheets for the same component
-                            appliedStyles = null;
-                        }
-                    }
-                    else {
-                        styleElm = doc.createElement('style');
-                        styleElm.innerHTML = style;
-                    }
-                    if (BUILD.hydrateServerSide || BUILD.hotModuleReplacement) {
-                        styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
-                    }
-                    styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
-                }
-                if (appliedStyles) {
-                    appliedStyles.add(scopeId);
-                }
-            }
-        }
-        else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
-            styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
-        }
-    }
-    return scopeId;
-};
-const attachStyles = (hostRef) => {
-    const cmpMeta = hostRef.$cmpMeta$;
-    const elm = hostRef.$hostElement$;
-    const flags = cmpMeta.$flags$;
-    const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
-    const scopeId = addStyle(BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$, elm);
-    if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
-        // only required when we're NOT using native shadow dom (slot)
-        // or this browser doesn't support native shadow dom
-        // and this host element was NOT created with SSR
-        // let's pick out the inner content for slot projection
-        // create a node to represent where the original
-        // content was first placed, which is useful later on
-        // DOM WRITE!!
-        elm['s-sc'] = scopeId;
-        elm.classList.add(scopeId + '-h');
-        if (BUILD.scoped && flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
-            elm.classList.add(scopeId + '-s');
-        }
-    }
-    endAttachStyles();
-};
-const getScopeId = (cmp, mode) => 'sc-' + (BUILD.mode && mode && cmp.$flags$ & 32 /* CMP_FLAGS.hasMode */ ? cmp.$tagName$ + '-' + mode : cmp.$tagName$);
-const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
-// Private
-const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
-// Public
-const setMode = (handler) => modeResolutionChain.push(handler);
-const getMode = (ref) => getHostRef(ref).$modeName$;
+const CONTENT_REF_ID = 'r';
+const ORG_LOCATION_ID = 'o';
+const SLOT_NODE_ID = 's';
+const TEXT_NODE_ID = 't';
+const HYDRATE_ID = 's-id';
+const HYDRATED_STYLE_ID = 'sty-id';
+const HYDRATE_CHILD_ID = 'c-id';
+const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
 /**
  * Default style mode id
  */
@@ -523,21 +330,404 @@ const validateInputProperties = (inputElm) => {
         consoleDevWarn(`The "value" prop of <input> should be set after "min", "max", "type" and "step"`);
     }
 };
-/**
- * Production setAccessor() function based on Preact by
- * Jason Miller (@developit)
- * Licensed under the MIT License
- * https://github.com/developit/preact/blob/master/LICENSE
- *
- * Modified for Stencil's compiler and vdom
- */
-const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
-    if (oldValue !== newValue) {
-        let isProp = isMemberInElement(elm, memberName);
-        let ln = memberName.toLowerCase();
-        if (BUILD.vdomClass && memberName === 'class') {
-            const classList = elm.classList;
-            const oldClasses = parseClassList(oldValue);
+const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
+    const endHydrate = createTime('hydrateClient', tagName);
+    const shadowRoot = hostElm.shadowRoot;
+    const childRenderNodes = [];
+    const slotNodes = [];
+    const shadowRootNodes = BUILD.shadowDom && shadowRoot ? [] : null;
+    const vnode = (hostRef.$vnode$ = newVNode(tagName, null));
+    if (!plt.$orgLocNodes$) {
+        initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));
+    }
+    hostElm[HYDRATE_ID] = hostId;
+    hostElm.removeAttribute(HYDRATE_ID);
+    clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
+    childRenderNodes.map((c) => {
+        const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
+        const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
+        const node = c.$elm$;
+        if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
+            orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
+        }
+        if (!shadowRoot) {
+            node['s-hn'] = tagName;
+            if (orgLocationNode) {
+                node['s-ol'] = orgLocationNode;
+                node['s-ol']['s-nr'] = node;
+            }
+        }
+        plt.$orgLocNodes$.delete(orgLocationId);
+    });
+    if (BUILD.shadowDom && shadowRoot) {
+        shadowRootNodes.map((shadowRootNode) => {
+            if (shadowRootNode) {
+                shadowRoot.appendChild(shadowRootNode);
+            }
+        });
+    }
+    endHydrate();
+};
+const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
+    let childNodeType;
+    let childIdSplt;
+    let childVNode;
+    let i;
+    if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+        childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
+        if (childNodeType) {
+            // got the node data from the element's attribute
+            // `${hostId}.${nodeId}.${depth}.${index}`
+            childIdSplt = childNodeType.split('.');
+            if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
+                childVNode = {
+                    $flags$: 0,
+                    $hostId$: childIdSplt[0],
+                    $nodeId$: childIdSplt[1],
+                    $depth$: childIdSplt[2],
+                    $index$: childIdSplt[3],
+                    $tag$: node.tagName.toLowerCase(),
+                    $elm$: node,
+                    $attrs$: null,
+                    $children$: null,
+                    $key$: null,
+                    $name$: null,
+                    $text$: null,
+                };
+                childRenderNodes.push(childVNode);
+                node.removeAttribute(HYDRATE_CHILD_ID);
+                // this is a new child vnode
+                // so ensure its parent vnode has the vchildren array
+                if (!parentVNode.$children$) {
+                    parentVNode.$children$ = [];
+                }
+                // add our child vnode to a specific index of the vnode's children
+                parentVNode.$children$[childVNode.$index$] = childVNode;
+                // this is now the new parent vnode for all the next child checks
+                parentVNode = childVNode;
+                if (shadowRootNodes && childVNode.$depth$ === '0') {
+                    shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                }
+            }
+        }
+        // recursively drill down, end to start so we can remove nodes
+        for (i = node.childNodes.length - 1; i >= 0; i--) {
+            clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);
+        }
+        if (node.shadowRoot) {
+            // keep drilling down through the shadow root nodes
+            for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
+                clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);
+            }
+        }
+    }
+    else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
+        // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`
+        childIdSplt = node.nodeValue.split('.');
+        if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
+            // comment node for either the host id or a 0 host id
+            childNodeType = childIdSplt[0];
+            childVNode = {
+                $flags$: 0,
+                $hostId$: childIdSplt[1],
+                $nodeId$: childIdSplt[2],
+                $depth$: childIdSplt[3],
+                $index$: childIdSplt[4],
+                $elm$: node,
+                $attrs$: null,
+                $children$: null,
+                $key$: null,
+                $name$: null,
+                $tag$: null,
+                $text$: null,
+            };
+            if (childNodeType === TEXT_NODE_ID) {
+                childVNode.$elm$ = node.nextSibling;
+                if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* NODE_TYPE.TextNode */) {
+                    childVNode.$text$ = childVNode.$elm$.textContent;
+                    childRenderNodes.push(childVNode);
+                    // remove the text comment since it's no longer needed
+                    node.remove();
+                    if (!parentVNode.$children$) {
+                        parentVNode.$children$ = [];
+                    }
+                    parentVNode.$children$[childVNode.$index$] = childVNode;
+                    if (shadowRootNodes && childVNode.$depth$ === '0') {
+                        shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                    }
+                }
+            }
+            else if (childVNode.$hostId$ === hostId) {
+                // this comment node is specifcally for this host id
+                if (childNodeType === SLOT_NODE_ID) {
+                    // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
+                    childVNode.$tag$ = 'slot';
+                    if (childIdSplt[5]) {
+                        node['s-sn'] = childVNode.$name$ = childIdSplt[5];
+                    }
+                    else {
+                        node['s-sn'] = '';
+                    }
+                    node['s-sr'] = true;
+                    if (BUILD.shadowDom && shadowRootNodes) {
+                        // browser support shadowRoot and this is a shadow dom component
+                        // create an actual slot element
+                        childVNode.$elm$ = doc.createElement(childVNode.$tag$);
+                        if (childVNode.$name$) {
+                            // add the slot name attribute
+                            childVNode.$elm$.setAttribute('name', childVNode.$name$);
+                        }
+                        // insert the new slot element before the slot comment
+                        node.parentNode.insertBefore(childVNode.$elm$, node);
+                        // remove the slot comment since it's not needed for shadow
+                        node.remove();
+                        if (childVNode.$depth$ === '0') {
+                            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                        }
+                    }
+                    slotNodes.push(childVNode);
+                    if (!parentVNode.$children$) {
+                        parentVNode.$children$ = [];
+                    }
+                    parentVNode.$children$[childVNode.$index$] = childVNode;
+                }
+                else if (childNodeType === CONTENT_REF_ID) {
+                    // `${CONTENT_REF_ID}.${hostId}`;
+                    if (BUILD.shadowDom && shadowRootNodes) {
+                        // remove the content ref comment since it's not needed for shadow
+                        node.remove();
+                    }
+                    else if (BUILD.slotRelocation) {
+                        hostElm['s-cr'] = node;
+                        node['s-cn'] = true;
+                    }
+                }
+            }
+        }
+    }
+    else if (parentVNode && parentVNode.$tag$ === 'style') {
+        const vnode = newVNode(null, node.textContent);
+        vnode.$elm$ = node;
+        vnode.$index$ = '0';
+        parentVNode.$children$ = [vnode];
+    }
+};
+const initializeDocumentHydrate = (node, orgLocNodes) => {
+    if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+        let i = 0;
+        for (; i < node.childNodes.length; i++) {
+            initializeDocumentHydrate(node.childNodes[i], orgLocNodes);
+        }
+        if (node.shadowRoot) {
+            for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
+                initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
+            }
+        }
+    }
+    else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
+        const childIdSplt = node.nodeValue.split('.');
+        if (childIdSplt[0] === ORG_LOCATION_ID) {
+            orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
+            node.nodeValue = '';
+            // useful to know if the original location is
+            // the root light-dom of a shadow dom component
+            node['s-en'] = childIdSplt[3];
+        }
+    }
+};
+// Private
+const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
+// Public
+const setMode = (handler) => modeResolutionChain.push(handler);
+const getMode = (ref) => getHostRef(ref).$modeName$;
+/**
+ * Parse a new property value for a given property type.
+ *
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
+ *   1. `any`, the type given to `propValue` in the function signature
+ *   2. the type stored from `propType`.
+ *
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
+ *
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
+ * ```tsx
+ * <my-cmp prop-val={0}></my-cmp>
+ * ```
+ *
+ * HTML prop values on the other hand, will always a string
+ *
+ * @param propValue the new value to coerce to some type
+ * @param propType the type of the prop, expressed as a binary number
+ * @returns the parsed/coerced value
+ */
+const parsePropertyValue = (propValue, propType) => {
+    // ensure this value is of the correct prop type
+    if (propValue != null && !isComplexType(propValue)) {
+        if (BUILD.propBoolean && propType & 4 /* MEMBER_FLAGS.Boolean */) {
+            // per the HTML spec, any string value means it is a boolean true value
+            // but we'll cheat here and say that the string "false" is the boolean false
+            return propValue === 'false' ? false : propValue === '' || !!propValue;
+        }
+        if (BUILD.propNumber && propType & 2 /* MEMBER_FLAGS.Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
+        if (BUILD.propString && propType & 1 /* MEMBER_FLAGS.String */) {
+            // could have been passed as a number or boolean
+            // but we still want it as a string
+            return String(propValue);
+        }
+        // redundant return here for better minification
+        return propValue;
+    }
+    // not sure exactly what type we want
+    // so no need to change to a different type
+    return propValue;
+};
+const getElement = (ref) => (BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref);
+const createEvent = (ref, name, flags) => {
+    const elm = getElement(ref);
+    return {
+        emit: (detail) => {
+            if (BUILD.isDev && !elm.isConnected) {
+                consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
+            }
+            return emitEvent(elm, name, {
+                bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
+                composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
+                cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
+                detail,
+            });
+        },
+    };
+};
+/**
+ * Helper function to create & dispatch a custom Event on a provided target
+ * @param elm the target of the Event
+ * @param name the name to give the custom Event
+ * @param opts options for configuring a custom Event
+ * @returns the custom Event
+ */
+const emitEvent = (elm, name, opts) => {
+    const ev = plt.ce(name, opts);
+    elm.dispatchEvent(ev);
+    return ev;
+};
+const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
+const registerStyle = (scopeId, cssText, allowCS) => {
+    let style = styles.get(scopeId);
+    if (supportsConstructableStylesheets && allowCS) {
+        style = (style || new CSSStyleSheet());
+        if (typeof style === 'string') {
+            style = cssText;
+        }
+        else {
+            style.replaceSync(cssText);
+        }
+    }
+    else {
+        style = cssText;
+    }
+    styles.set(scopeId, style);
+};
+const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    let scopeId = getScopeId(cmpMeta, mode);
+    const style = styles.get(scopeId);
+    if (!BUILD.attachStyles) {
+        return scopeId;
+    }
+    // if an element is NOT connected then getRootNode() will return the wrong root node
+    // so the fallback is to always use the document for the root node in those cases
+    styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
+    if (style) {
+        if (typeof style === 'string') {
+            styleContainerNode = styleContainerNode.head || styleContainerNode;
+            let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+            let styleElm;
+            if (!appliedStyles) {
+                rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
+            }
+            if (!appliedStyles.has(scopeId)) {
+                if (BUILD.hydrateClientSide &&
+                    styleContainerNode.host &&
+                    (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) {
+                    // This is only happening on native shadow-dom, do not needs CSS var shim
+                    styleElm.innerHTML = style;
+                }
+                else {
+                    if (BUILD.cssVarShim && plt.$cssShim$) {
+                        styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 /* CMP_FLAGS.needsScopedEncapsulation */));
+                        const newScopeId = styleElm['s-sc'];
+                        if (newScopeId) {
+                            scopeId = newScopeId;
+                            // we don't want to add this styleID to the appliedStyles Set
+                            // since the cssVarShim might need to apply several different
+                            // stylesheets for the same component
+                            appliedStyles = null;
+                        }
+                    }
+                    else {
+                        styleElm = doc.createElement('style');
+                        styleElm.innerHTML = style;
+                    }
+                    if (BUILD.hydrateServerSide || BUILD.hotModuleReplacement) {
+                        styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);
+                    }
+                    styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
+                }
+                if (appliedStyles) {
+                    appliedStyles.add(scopeId);
+                }
+            }
+        }
+        else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {
+            styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+        }
+    }
+    return scopeId;
+};
+const attachStyles = (hostRef) => {
+    const cmpMeta = hostRef.$cmpMeta$;
+    const elm = hostRef.$hostElement$;
+    const flags = cmpMeta.$flags$;
+    const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
+    const scopeId = addStyle(BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$, elm);
+    if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
+        // only required when we're NOT using native shadow dom (slot)
+        // or this browser doesn't support native shadow dom
+        // and this host element was NOT created with SSR
+        // let's pick out the inner content for slot projection
+        // create a node to represent where the original
+        // content was first placed, which is useful later on
+        // DOM WRITE!!
+        elm['s-sc'] = scopeId;
+        elm.classList.add(scopeId + '-h');
+        if (BUILD.scoped && flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
+            elm.classList.add(scopeId + '-s');
+        }
+    }
+    endAttachStyles();
+};
+const getScopeId = (cmp, mode) => 'sc-' + (BUILD.mode && mode && cmp.$flags$ & 32 /* CMP_FLAGS.hasMode */ ? cmp.$tagName$ + '-' + mode : cmp.$tagName$);
+const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
+/**
+ * Production setAccessor() function based on Preact by
+ * Jason Miller (@developit)
+ * Licensed under the MIT License
+ * https://github.com/developit/preact/blob/master/LICENSE
+ *
+ * Modified for Stencil's compiler and vdom
+ */
+const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
+    if (oldValue !== newValue) {
+        let isProp = isMemberInElement(elm, memberName);
+        let ln = memberName.toLowerCase();
+        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)));
@@ -1469,48 +1659,19 @@ render() {
             updateFallbackSlotVisibility(rootVnode.$elm$);
         }
         // done moving nodes around
-        // allow the disconnect callback to work again
-        plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
-        // always reset
-        relocateNodes.length = 0;
-    }
-};
-// slot comment debug nodes only created with the `--debug` flag
-// otherwise these nodes are text nodes w/out content
-const slotReferenceDebugNode = (slotVNode) => doc.createComment(`<slot${slotVNode.$name$ ? ' name="' + slotVNode.$name$ + '"' : ''}> (host=${hostTagName.toLowerCase()})`);
-const originalLocationDebugNode = (nodeToRelocate) => doc.createComment(`org-location for ` +
-    (nodeToRelocate.localName
-        ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate['s-hn']})`
-        : `[${nodeToRelocate.textContent}]`));
-const getElement = (ref) => (BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref);
-const createEvent = (ref, name, flags) => {
-    const elm = getElement(ref);
-    return {
-        emit: (detail) => {
-            if (BUILD.isDev && !elm.isConnected) {
-                consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`);
-            }
-            return emitEvent(elm, name, {
-                bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
-                composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
-                cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
-                detail,
-            });
-        },
-    };
-};
-/**
- * Helper function to create & dispatch a custom Event on a provided target
- * @param elm the target of the Event
- * @param name the name to give the custom Event
- * @param opts options for configuring a custom Event
- * @returns the custom Event
- */
-const emitEvent = (elm, name, opts) => {
-    const ev = plt.ce(name, opts);
-    elm.dispatchEvent(ev);
-    return ev;
+        // allow the disconnect callback to work again
+        plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
+        // always reset
+        relocateNodes.length = 0;
+    }
 };
+// slot comment debug nodes only created with the `--debug` flag
+// otherwise these nodes are text nodes w/out content
+const slotReferenceDebugNode = (slotVNode) => doc.createComment(`<slot${slotVNode.$name$ ? ' name="' + slotVNode.$name$ + '"' : ''}> (host=${hostTagName.toLowerCase()})`);
+const originalLocationDebugNode = (nodeToRelocate) => doc.createComment(`org-location for ` +
+    (nodeToRelocate.localName
+        ? `<${nodeToRelocate.localName}> (host=${nodeToRelocate['s-hn']})`
+        : `[${nodeToRelocate.textContent}]`));
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (BUILD.asyncLoading && ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
         ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
@@ -1770,307 +1931,55 @@ const appDidLoad = (who) => {
     if (BUILD.cssAnnotations) {
         addHydratedFlag(doc.documentElement);
     }
-    if (BUILD.asyncQueue) {
-        plt.$flags$ |= 2 /* PLATFORM_FLAGS.appLoaded */;
-    }
-    nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
-    if (BUILD.profile && performance.measure) {
-        performance.measure(`[Stencil] ${NAMESPACE} initial load (by ${who})`, 'st:app:start');
-    }
-};
-const safeCall = (instance, method, arg) => {
-    if (instance && instance[method]) {
-        try {
-            return instance[method](arg);
-        }
-        catch (e) {
-            consoleError(e);
-        }
-    }
-    return undefined;
-};
-const then = (promise, thenFn) => {
-    return promise && promise.then ? promise.then(thenFn) : thenFn();
-};
-const emitLifecycleEvent = (elm, lifecycleName) => {
-    if (BUILD.lifecycleDOMEvents) {
-        emitEvent(elm, 'stencil_' + lifecycleName, {
-            bubbles: true,
-            composed: true,
-            detail: {
-                namespace: NAMESPACE,
-            },
-        });
-    }
-};
-const addHydratedFlag = (elm) => BUILD.hydratedClass
-    ? elm.classList.add('hydrated')
-    : BUILD.hydratedAttribute
-        ? elm.setAttribute('hydrated', '')
-        : undefined;
-const serverSideConnected = (elm) => {
-    const children = elm.children;
-    if (children != null) {
-        for (let i = 0, ii = children.length; i < ii; i++) {
-            const childElm = children[i];
-            if (typeof childElm.connectedCallback === 'function') {
-                childElm.connectedCallback();
-            }
-            serverSideConnected(childElm);
-        }
-    }
-};
-const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-    const endHydrate = createTime('hydrateClient', tagName);
-    const shadowRoot = hostElm.shadowRoot;
-    const childRenderNodes = [];
-    const slotNodes = [];
-    const shadowRootNodes = BUILD.shadowDom && shadowRoot ? [] : null;
-    const vnode = (hostRef.$vnode$ = newVNode(tagName, null));
-    if (!plt.$orgLocNodes$) {
-        initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));
-    }
-    hostElm[HYDRATE_ID] = hostId;
-    hostElm.removeAttribute(HYDRATE_ID);
-    clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
-    childRenderNodes.map((c) => {
-        const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
-        const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
-        const node = c.$elm$;
-        if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
-            orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
-        }
-        if (!shadowRoot) {
-            node['s-hn'] = tagName;
-            if (orgLocationNode) {
-                node['s-ol'] = orgLocationNode;
-                node['s-ol']['s-nr'] = node;
-            }
-        }
-        plt.$orgLocNodes$.delete(orgLocationId);
-    });
-    if (BUILD.shadowDom && shadowRoot) {
-        shadowRootNodes.map((shadowRootNode) => {
-            if (shadowRootNode) {
-                shadowRoot.appendChild(shadowRootNode);
-            }
-        });
-    }
-    endHydrate();
-};
-const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
-    let childNodeType;
-    let childIdSplt;
-    let childVNode;
-    let i;
-    if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-        childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
-        if (childNodeType) {
-            // got the node data from the element's attribute
-            // `${hostId}.${nodeId}.${depth}.${index}`
-            childIdSplt = childNodeType.split('.');
-            if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
-                childVNode = {
-                    $flags$: 0,
-                    $hostId$: childIdSplt[0],
-                    $nodeId$: childIdSplt[1],
-                    $depth$: childIdSplt[2],
-                    $index$: childIdSplt[3],
-                    $tag$: node.tagName.toLowerCase(),
-                    $elm$: node,
-                    $attrs$: null,
-                    $children$: null,
-                    $key$: null,
-                    $name$: null,
-                    $text$: null,
-                };
-                childRenderNodes.push(childVNode);
-                node.removeAttribute(HYDRATE_CHILD_ID);
-                // this is a new child vnode
-                // so ensure its parent vnode has the vchildren array
-                if (!parentVNode.$children$) {
-                    parentVNode.$children$ = [];
-                }
-                // add our child vnode to a specific index of the vnode's children
-                parentVNode.$children$[childVNode.$index$] = childVNode;
-                // this is now the new parent vnode for all the next child checks
-                parentVNode = childVNode;
-                if (shadowRootNodes && childVNode.$depth$ === '0') {
-                    shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-                }
-            }
-        }
-        // recursively drill down, end to start so we can remove nodes
-        for (i = node.childNodes.length - 1; i >= 0; i--) {
-            clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);
-        }
-        if (node.shadowRoot) {
-            // keep drilling down through the shadow root nodes
-            for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
-                clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);
-            }
-        }
-    }
-    else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
-        // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`
-        childIdSplt = node.nodeValue.split('.');
-        if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
-            // comment node for either the host id or a 0 host id
-            childNodeType = childIdSplt[0];
-            childVNode = {
-                $flags$: 0,
-                $hostId$: childIdSplt[1],
-                $nodeId$: childIdSplt[2],
-                $depth$: childIdSplt[3],
-                $index$: childIdSplt[4],
-                $elm$: node,
-                $attrs$: null,
-                $children$: null,
-                $key$: null,
-                $name$: null,
-                $tag$: null,
-                $text$: null,
-            };
-            if (childNodeType === TEXT_NODE_ID) {
-                childVNode.$elm$ = node.nextSibling;
-                if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* NODE_TYPE.TextNode */) {
-                    childVNode.$text$ = childVNode.$elm$.textContent;
-                    childRenderNodes.push(childVNode);
-                    // remove the text comment since it's no longer needed
-                    node.remove();
-                    if (!parentVNode.$children$) {
-                        parentVNode.$children$ = [];
-                    }
-                    parentVNode.$children$[childVNode.$index$] = childVNode;
-                    if (shadowRootNodes && childVNode.$depth$ === '0') {
-                        shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-                    }
-                }
-            }
-            else if (childVNode.$hostId$ === hostId) {
-                // this comment node is specifcally for this host id
-                if (childNodeType === SLOT_NODE_ID) {
-                    // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
-                    childVNode.$tag$ = 'slot';
-                    if (childIdSplt[5]) {
-                        node['s-sn'] = childVNode.$name$ = childIdSplt[5];
-                    }
-                    else {
-                        node['s-sn'] = '';
-                    }
-                    node['s-sr'] = true;
-                    if (BUILD.shadowDom && shadowRootNodes) {
-                        // browser support shadowRoot and this is a shadow dom component
-                        // create an actual slot element
-                        childVNode.$elm$ = doc.createElement(childVNode.$tag$);
-                        if (childVNode.$name$) {
-                            // add the slot name attribute
-                            childVNode.$elm$.setAttribute('name', childVNode.$name$);
-                        }
-                        // insert the new slot element before the slot comment
-                        node.parentNode.insertBefore(childVNode.$elm$, node);
-                        // remove the slot comment since it's not needed for shadow
-                        node.remove();
-                        if (childVNode.$depth$ === '0') {
-                            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-                        }
-                    }
-                    slotNodes.push(childVNode);
-                    if (!parentVNode.$children$) {
-                        parentVNode.$children$ = [];
-                    }
-                    parentVNode.$children$[childVNode.$index$] = childVNode;
-                }
-                else if (childNodeType === CONTENT_REF_ID) {
-                    // `${CONTENT_REF_ID}.${hostId}`;
-                    if (BUILD.shadowDom && shadowRootNodes) {
-                        // remove the content ref comment since it's not needed for shadow
-                        node.remove();
-                    }
-                    else if (BUILD.slotRelocation) {
-                        hostElm['s-cr'] = node;
-                        node['s-cn'] = true;
-                    }
-                }
-            }
-        }
-    }
-    else if (parentVNode && parentVNode.$tag$ === 'style') {
-        const vnode = newVNode(null, node.textContent);
-        vnode.$elm$ = node;
-        vnode.$index$ = '0';
-        parentVNode.$children$ = [vnode];
-    }
-};
-const initializeDocumentHydrate = (node, orgLocNodes) => {
-    if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
-        let i = 0;
-        for (; i < node.childNodes.length; i++) {
-            initializeDocumentHydrate(node.childNodes[i], orgLocNodes);
-        }
-        if (node.shadowRoot) {
-            for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
-                initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
-            }
-        }
-    }
-    else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
-        const childIdSplt = node.nodeValue.split('.');
-        if (childIdSplt[0] === ORG_LOCATION_ID) {
-            orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
-            node.nodeValue = '';
-            // useful to know if the original location is
-            // the root light-dom of a shadow dom component
-            node['s-en'] = childIdSplt[3];
-        }
+    if (BUILD.asyncQueue) {
+        plt.$flags$ |= 2 /* PLATFORM_FLAGS.appLoaded */;
+    }
+    nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
+    if (BUILD.profile && performance.measure) {
+        performance.measure(`[Stencil] ${NAMESPACE} initial load (by ${who})`, 'st:app:start');
     }
 };
-/**
- * Parse a new property value for a given property type.
- *
- * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
- * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
- *   1. `any`, the type given to `propValue` in the function signature
- *   2. the type stored from `propType`.
- *
- * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
- *
- * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
- * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
- * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
- * ```tsx
- * <my-cmp prop-val={0}></my-cmp>
- * ```
- *
- * HTML prop values on the other hand, will always a string
- *
- * @param propValue the new value to coerce to some type
- * @param propType the type of the prop, expressed as a binary number
- * @returns the parsed/coerced value
- */
-const parsePropertyValue = (propValue, propType) => {
-    // ensure this value is of the correct prop type
-    if (propValue != null && !isComplexType(propValue)) {
-        if (BUILD.propBoolean && propType & 4 /* MEMBER_FLAGS.Boolean */) {
-            // per the HTML spec, any string value means it is a boolean true value
-            // but we'll cheat here and say that the string "false" is the boolean false
-            return propValue === 'false' ? false : propValue === '' || !!propValue;
+const safeCall = (instance, method, arg) => {
+    if (instance && instance[method]) {
+        try {
+            return instance[method](arg);
         }
-        if (BUILD.propNumber && propType & 2 /* MEMBER_FLAGS.Number */) {
-            // force it to be a number
-            return parseFloat(propValue);
+        catch (e) {
+            consoleError(e);
         }
-        if (BUILD.propString && propType & 1 /* MEMBER_FLAGS.String */) {
-            // could have been passed as a number or boolean
-            // but we still want it as a string
-            return String(propValue);
+    }
+    return undefined;
+};
+const then = (promise, thenFn) => {
+    return promise && promise.then ? promise.then(thenFn) : thenFn();
+};
+const emitLifecycleEvent = (elm, lifecycleName) => {
+    if (BUILD.lifecycleDOMEvents) {
+        emitEvent(elm, 'stencil_' + lifecycleName, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                namespace: NAMESPACE,
+            },
+        });
+    }
+};
+const addHydratedFlag = (elm) => BUILD.hydratedClass
+    ? elm.classList.add('hydrated')
+    : BUILD.hydratedAttribute
+        ? elm.setAttribute('hydrated', '')
+        : undefined;
+const serverSideConnected = (elm) => {
+    const children = elm.children;
+    if (children != null) {
+        for (let i = 0, ii = children.length; i < ii; i++) {
+            const childElm = children[i];
+            if (typeof childElm.connectedCallback === 'function') {
+                childElm.connectedCallback();
+            }
+            serverSideConnected(childElm);
         }
-        // redundant return here for better minification
-        return propValue;
     }
-    // not sure exactly what type we want
-    // so no need to change to a different type
-    return propValue;
 };
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 const setValue = (ref, propName, newVal, cmpMeta) => {
@@ -2129,6 +2038,16 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
         }
     }
 };
+/**
+ * Attach a series of runtime constructs to a compiled Stencil component
+ * constructor, including getters and setters for the `@Prop` and `@State`
+ * decorators, callbacks for when attributes change, and so on.
+ *
+ * @param Cstr the constructor for a component that we need to process
+ * @param cmpMeta metadata collected previously about the component
+ * @param flags a number used to store a series of bit flags
+ * @returns a reference to the same constructor passed in (but now mutated)
+ */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     if (BUILD.member && cmpMeta.$members$) {
         if (BUILD.watchCallback && Cstr.watchers) {
@@ -2333,7 +2252,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                     BUILD.shadowDom &&
                     BUILD.shadowDomShim &&
                     cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) {
-                    style = await Promise.resolve().then(function () { return require('./shadow-css-372ebd9e.js'); }).then((m) => m.scopeCss(style, scopeId, false));
+                    style = await Promise.resolve().then(function () { return require('./shadow-css-1942e97e.js'); }).then((m) => m.scopeCss(style, scopeId, false));
                 }
                 registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */));
                 endRegisterStyles();
@@ -2565,23 +2484,6 @@ const forceModeUpdate = (elm) => {
         }
     }
 };
-const hmrStart = (elm, cmpMeta, hmrVersionId) => {
-    // ¯\_(ツ)_/¯
-    const hostRef = getHostRef(elm);
-    // reset state flags to only have been connected
-    hostRef.$flags$ = 1 /* HOST_FLAGS.hasConnected */;
-    // TODO
-    // detatch any event listeners that may have been added
-    // because we're not passing an exact event name it'll
-    // remove all of this element's event, which is good
-    // create a callback for when this component finishes hmr
-    elm['s-hmr-load'] = () => {
-        // finished hmr for this element
-        delete elm['s-hmr-load'];
-    };
-    // re-initialize the component
-    initializeComponent(elm, hostRef, cmpMeta, hmrVersionId);
-};
 const patchCloneNode = (HostElementPrototype) => {
     const orgCloneNode = HostElementPrototype.cloneNode;
     HostElementPrototype.cloneNode = function (deep) {
@@ -2760,6 +2662,23 @@ const getHostSlotChildNodes = (n, slotName) => {
     }
     return childNodes;
 };
+const hmrStart = (elm, cmpMeta, hmrVersionId) => {
+    // ¯\_(ツ)_/¯
+    const hostRef = getHostRef(elm);
+    // reset state flags to only have been connected
+    hostRef.$flags$ = 1 /* HOST_FLAGS.hasConnected */;
+    // TODO
+    // detatch any event listeners that may have been added
+    // because we're not passing an exact event name it'll
+    // remove all of this element's event, which is good
+    // create a callback for when this component finishes hmr
+    elm['s-hmr-load'] = () => {
+        // finished hmr for this element
+        delete elm['s-hmr-load'];
+    };
+    // re-initialize the component
+    initializeComponent(elm, hostRef, cmpMeta, hmrVersionId);
+};
 const bootstrapLazy = (lazyBundles, options = {}) => {
     if (BUILD.profile && performance.mark) {
         performance.mark('st:app:start');
@@ -2913,11 +2832,6 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
-const getAssetPath = (path) => {
-    const assetUrl = new URL(path, plt.$resourcesUrl$);
-    return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
-};
-const setAssetPath = (path) => (plt.$resourcesUrl$ = path);
 const getConnect = (_ref, tagName) => {
     const componentOnReady = () => {
         let elm = doc.querySelector(tagName);
@@ -2967,6 +2881,75 @@ const getContext = (_elm, context) => {
     }
     return undefined;
 };
+const Fragment = (_, children) => children;
+const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+    if (BUILD.hostListener && listeners) {
+        // this is called immediately within the element's constructor
+        // initialize our event listeners on the host element
+        // we do this now so that we can listen to events that may
+        // have fired even before the instance is ready
+        if (BUILD.hostListenerTargetParent) {
+            // this component may have event listeners that should be attached to the parent
+            if (attachParentListeners) {
+                // this is being ran from within the connectedCallback
+                // which is important so that we know the host element actually has a parent element
+                // filter out the listeners to only have the ones that ARE being attached to the parent
+                listeners = listeners.filter(([flags]) => flags & 32 /* LISTENER_FLAGS.TargetParent */);
+            }
+            else {
+                // this is being ran from within the component constructor
+                // everything BUT the parent element listeners should be attached at this time
+                // filter out the listeners that are NOT being attached to the parent
+                listeners = listeners.filter(([flags]) => !(flags & 32 /* LISTENER_FLAGS.TargetParent */));
+            }
+        }
+        listeners.map(([flags, name, method]) => {
+            const target = BUILD.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;
+            const handler = hostListenerProxy(hostRef, method);
+            const opts = hostListenerOpts(flags);
+            plt.ael(target, name, handler, opts);
+            (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+        });
+    }
+};
+const hostListenerProxy = (hostRef, methodName) => (ev) => {
+    try {
+        if (BUILD.lazyLoad) {
+            if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
+                // instance is ready, let's call it's member method for this event
+                hostRef.$lazyInstance$[methodName](ev);
+            }
+            else {
+                (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+            }
+        }
+        else {
+            hostRef.$hostElement$[methodName](ev);
+        }
+    }
+    catch (e) {
+        consoleError(e);
+    }
+};
+const getHostListenerTarget = (elm, flags) => {
+    if (BUILD.hostListenerTargetDocument && flags & 4 /* LISTENER_FLAGS.TargetDocument */)
+        return doc;
+    if (BUILD.hostListenerTargetWindow && flags & 8 /* LISTENER_FLAGS.TargetWindow */)
+        return win;
+    if (BUILD.hostListenerTargetBody && flags & 16 /* LISTENER_FLAGS.TargetBody */)
+        return doc.body;
+    if (BUILD.hostListenerTargetParent && flags & 32 /* LISTENER_FLAGS.TargetParent */)
+        return elm.parentElement;
+    return elm;
+};
+// prettier-ignore
+const hostListenerOpts = (flags) => supportsListenerOptions
+    ? ({
+        passive: (flags & 1 /* LISTENER_FLAGS.Passive */) !== 0,
+        capture: (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0,
+    })
+    : (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
+const setPlatformOptions = (opts) => Object.assign(plt, opts);
 const insertVdomAnnotations = (doc, staticComponents) => {
     if (doc != null) {
         const docData = {
@@ -3106,8 +3089,6 @@ const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, in
         });
     }
 };
-const setPlatformOptions = (opts) => Object.assign(plt, opts);
-const Fragment = (_, children) => children;
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -3172,6 +3153,49 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 };
 const styles = /*@__PURE__*/ new Map();
 const modeResolutionChain = [];
+const win = typeof window !== 'undefined' ? window : {};
+const CSS = BUILD.cssVarShim ? win.CSS : null;
+const doc = win.document || { head: {} };
+const H = (win.HTMLElement || class {
+});
+const plt = {
+    $flags$: 0,
+    $resourcesUrl$: '',
+    jmp: (h) => h(),
+    raf: (h) => requestAnimationFrame(h),
+    ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
+    rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+    ce: (eventName, opts) => new CustomEvent(eventName, opts),
+};
+const setPlatformHelpers = (helpers) => {
+    Object.assign(plt, helpers);
+};
+const supportsShadow = BUILD.shadowDomShim && BUILD.shadowDom
+    ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)()
+    : true;
+const supportsListenerOptions = /*@__PURE__*/ (() => {
+    let supportsListenerOptions = false;
+    try {
+        doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {
+            get() {
+                supportsListenerOptions = true;
+            },
+        }));
+    }
+    catch (e) { }
+    return supportsListenerOptions;
+})();
+const promiseResolve = (v) => Promise.resolve(v);
+const supportsConstructableStylesheets = BUILD.constructableCSS
+    ? /*@__PURE__*/ (() => {
+        try {
+            new CSSStyleSheet();
+            return typeof new CSSStyleSheet().replaceSync === 'function';
+        }
+        catch (e) { }
+        return false;
+    })()
+    : false;
 const queueDomReads = [];
 const queueDomWrites = [];
 const queueDomWritesLow = [];
@@ -3256,12 +3280,6 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const readTask = /*@__PURE__*/ queueTask(queueDomReads, false);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
-const Build = {
-    isDev: BUILD.isDev ? true : false,
-    isBrowser: true,
-    isServer: false,
-    isTesting: BUILD.isTesting ? true : false,
-};
 
 exports.BUILD = BUILD;
 exports.Build = Build;