@venite/components 0.16.32 → 0.16.35

package/dist/esm/{index-f0f6a379.js → index-67fab020.js}

@@ -13,17 +13,17 @@ const doc = win.document || { head: {} };
 const plt = {
     $flags$: 0,
     $resourcesUrl$: '',
-    jmp: h => h(),
-    raf: h => requestAnimationFrame(h),
+    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 promiseResolve = (v) => Promise.resolve(v);
-const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
+const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
         try {
             new CSSStyleSheet();
-            return typeof (new CSSStyleSheet()).replace === 'function';
+            return typeof new CSSStyleSheet().replaceSync === 'function';
         }
         catch (e) { }
         return false;
@@ -107,9 +107,14 @@ const uniqueTime = (key, measureText) => {
 const rootAppliedStyles = new WeakMap();
 const registerStyle = (scopeId, cssText, allowCS) => {
     let style = styles.get(scopeId);
-    if (supportsConstructibleStylesheets && allowCS) {
+    if (supportsConstructableStylesheets && allowCS) {
         style = (style || new CSSStyleSheet());
-        style.replace(cssText);
+        if (typeof style === 'string') {
+            style = cssText;
+        }
+        else {
+            style.replaceSync(cssText);
+        }
     }
     else {
         style = cssText;
@@ -118,7 +123,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
     let scopeId = getScopeId(cmpMeta, mode);
-    let style = styles.get(scopeId);
+    const style = styles.get(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 /* DocumentFragment */ ? styleContainerNode : doc;
@@ -173,7 +178,7 @@ const attachStyles = (hostRef) => {
 };
 const getScopeId = (cmp, mode) => 'sc-' + (mode && cmp.$flags$ & 32 /* hasMode */ ? cmp.$tagName$ + '-' + mode : cmp.$tagName$);
 // Private
-const computeMode = (elm) => modeResolutionChain.map(h => h(elm)).find(m => !!m);
+const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);
 // Public
 const setMode = (handler) => modeResolutionChain.push(handler);
 const getMode = (ref) => getHostRef(ref).$modeName$;
@@ -213,7 +218,7 @@ const h = (nodeName, vnodeData, ...children) => {
     let slotName = null;
     let simple = false;
     let lastSimple = false;
-    let vNodeChildren = [];
+    const vNodeChildren = [];
     const walk = (c) => {
         for (let i = 0; i < c.length; i++) {
             child = c[i];
@@ -252,7 +257,7 @@ const h = (nodeName, vnodeData, ...children) => {
                     typeof classData !== 'object'
                         ? classData
                         : Object.keys(classData)
-                            .filter(k => classData[k])
+                            .filter((k) => classData[k])
                             .join(' ');
             }
         }
@@ -341,8 +346,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             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)));
+            classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
+            classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
         else if (memberName === 'style') {
             // update style attribute, css properties and values
@@ -377,7 +382,9 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 newValue(elm);
             }
         }
-        else if ((!isProp ) && memberName[0] === 'o' && memberName[1] === 'n') {
+        else if ((!isProp ) &&
+            memberName[0] === 'o' &&
+            memberName[1] === 'n') {
             // Event Handlers
             // so if the member name starts with "on" and the 3rd characters is
             // a capital letter, and it's not already a member on the element,
@@ -420,11 +427,10 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
                 try {
                     if (!elm.tagName.includes('-')) {
-                        let n = newValue == null ? '' : newValue;
+                        const n = newValue == null ? '' : newValue;
                         // Workaround for Safari, moving the <input> caret when re-assigning the same valued
                         if (memberName === 'list') {
                             isProp = false;
-                            // tslint:disable-next-line: triple-equals
                         }
                         else if (oldValue == null || elm[memberName] != n) {
                             elm[memberName] = n;
@@ -478,7 +484,9 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
     // if the element passed in is a shadow root, which is a document fragment
     // then we want to be adding attrs/props to the shadow root's "host" element
     // if it's not a shadow root, then we add attrs/props to the same element
-    const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$;
+    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;
     {
@@ -496,7 +504,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
 };
 const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     // tslint:disable-next-line: prefer-const
-    let newVNode = newParentVNode.$children$[childIndex];
+    const newVNode = newParentVNode.$children$[childIndex];
     let i = 0;
     let elm;
     let childNode;
@@ -522,14 +530,17 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     else if (newVNode.$flags$ & 1 /* isSlotReference */) {
         // create a slot reference node
-        elm = newVNode.$elm$ = doc.createTextNode('');
+        elm = newVNode.$elm$ =
+            doc.createTextNode('');
     }
     else {
         if (!isSvgMode) {
             isSvgMode = newVNode.$tag$ === 'svg';
         }
         // create element
-        elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$flags$ & 2 /* isSlotFallback */ ? 'slot-fb' : newVNode.$tag$)
+        elm = newVNode.$elm$ = (doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, newVNode.$flags$ & 2 /* isSlotFallback */
+                ? 'slot-fb'
+                : newVNode.$tag$)
             );
         if (isSvgMode && newVNode.$tag$ === 'foreignObject') {
             isSvgMode = false;
@@ -826,7 +837,7 @@ const patch = (oldVNode, newVNode) => {
 };
 const updateFallbackSlotVisibility = (elm) => {
     // tslint:disable-next-line: prefer-const
-    let childNodes = elm.childNodes;
+    const childNodes = elm.childNodes;
     let childNode;
     let i;
     let ilen;
@@ -879,8 +890,8 @@ const relocateSlotContent = (elm) => {
     let relocateNodeData;
     let j;
     let i = 0;
-    let childNodes = elm.childNodes;
-    let ilen = childNodes.length;
+    const childNodes = elm.childNodes;
+    const ilen = childNodes.length;
     for (; i < ilen; i++) {
         childNode = childNodes[i];
         if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
@@ -896,7 +907,7 @@ const relocateSlotContent = (elm) => {
                     // that is suppose to always represent the original content location
                     if (isNodeLocatedInSlot(node, slotNameAttr)) {
                         // it's possible we've already decided to relocate this node
-                        relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
+                        relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
                         // made some changes to slots
                         // let's make sure we also double check
                         // fallbacks are correctly hidden or shown
@@ -915,9 +926,9 @@ const relocateSlotContent = (elm) => {
                             });
                         }
                         if (node['s-sr']) {
-                            relocateNodes.map(relocateNode => {
+                            relocateNodes.map((relocateNode) => {
                                 if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
-                                    relocateNodeData = relocateNodes.find(r => r.$nodeToRelocate$ === node);
+                                    relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
                                     if (relocateNodeData && !relocateNode.$slotRefNode$) {
                                         relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
                                     }
@@ -925,7 +936,7 @@ const relocateSlotContent = (elm) => {
                             });
                         }
                     }
-                    else if (!relocateNodes.some(r => r.$nodeToRelocate$ === node)) {
+                    else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
                         // so far this element does not have a slot home, not setting slotRefNode on purpose
                         // if we never find a home for this element then we'll need to hide it
                         relocateNodes.push({
@@ -1005,7 +1016,8 @@ const renderVdom = (hostRef, renderFnResults) => {
                 if (!nodeToRelocate['s-ol']) {
                     // add a reference node marking this node's original location
                     // keep a reference to this node for later lookups
-                    orgLocationNode = doc.createTextNode('');
+                    orgLocationNode =
+                        doc.createTextNode('');
                     orgLocationNode['s-nr'] = nodeToRelocate;
                     nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
                 }
@@ -1029,7 +1041,8 @@ const renderVdom = (hostRef, renderFnResults) => {
                             }
                         }
                     }
-                    if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) || nodeToRelocate.nextSibling !== insertBeforeNode) {
+                    if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
+                        nodeToRelocate.nextSibling !== insertBeforeNode) {
                         // we've checked that it's worth while to relocate
                         // since that the node to relocate
                         // has a different next sibling or parent relocated
@@ -1075,6 +1088,13 @@ const createEvent = (ref, name, flags) => {
         },
     };
 };
+/**
+ * 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);
@@ -1082,7 +1102,7 @@ const emitEvent = (elm, name, opts) => {
 };
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
-        ancestorComponent['s-p'].push(new Promise(r => (hostRef.$onRenderResolve$ = r)));
+        ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
     }
 };
 const scheduleUpdate = (hostRef, isInitialLoad) => {
@@ -1139,7 +1159,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
         // ok, so turns out there are some child host elements
         // waiting on this parent element to load
         // let's fire off all update callbacks waiting
-        rc.map(cb => cb());
+        rc.map((cb) => cb());
         elm['s-rc'] = undefined;
     }
     endRender();
@@ -1237,7 +1257,8 @@ const forceUpdate = (ref) => {
     {
         const hostRef = getHostRef(ref);
         const isConnected = hostRef.$hostElement$.isConnected;
-        if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+        if (isConnected &&
+            (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
             scheduleUpdate(hostRef, false);
         }
         // Returns "true" when the forced update was successfully scheduled
@@ -1266,7 +1287,31 @@ const safeCall = (instance, method, arg) => {
 const then = (promise, thenFn) => {
     return promise && promise.then ? promise.then(thenFn) : thenFn();
 };
-const addHydratedFlag = (elm) => (elm.classList.add('hydrated') );
+const addHydratedFlag = (elm) => elm.classList.add('hydrated')
+    ;
+/**
+ * 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)) {
@@ -1300,7 +1345,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
     newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
-    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
+    // explicitly check for NaN on both sides, as `NaN === NaN` is always false
+    const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
+    const didValueChange = newVal !== oldVal && !areBothNaN;
+    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && didValueChange) {
         // gadzooks! the property's value has changed!!
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
@@ -1310,7 +1358,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
                 const watchMethods = cmpMeta.$watchers$[propName];
                 if (watchMethods) {
                     // this instance is watching for when this property changed
-                    watchMethods.map(watchMethodName => {
+                    watchMethods.map((watchMethodName) => {
                         try {
                             // fire off each of the watch methods that are watching this property
                             instance[watchMethodName](newVal, oldVal, propName);
@@ -1340,7 +1388,8 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
         const members = Object.entries(cmpMeta.$members$);
         const prototype = Cstr.prototype;
         members.map(([memberName, [memberFlags]]) => {
-            if ((memberFlags & 31 /* Prop */ || ((flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
+            if ((memberFlags & 31 /* Prop */ ||
+                    ((flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
                 // proxyComponent - prop
                 Object.defineProperty(prototype, memberName, {
                     get() {
@@ -1355,7 +1404,8 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     enumerable: true,
                 });
             }
-            else if (flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
+            else if (flags & 1 /* isElementConstructor */ &&
+                memberFlags & 64 /* Method */) {
                 // proxyComponent - method
                 Object.defineProperty(prototype, memberName, {
                     value(...args) {
@@ -1370,6 +1420,51 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
             prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
+                    //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
+                    //  in the case where an attribute was set inline.
+                    //  ```html
+                    //    <my-component some-attribute="some-value"></my-component>
+                    //  ```
+                    //
+                    //  There is an edge case where a developer sets the attribute inline on a custom element and then
+                    //  programmatically changes it before it has been upgraded as shown below:
+                    //
+                    //  ```html
+                    //    <!-- this component has _not_ been upgraded yet -->
+                    //    <my-component id="test" some-attribute="some-value"></my-component>
+                    //    <script>
+                    //      // grab non-upgraded component
+                    //      el = document.querySelector("#test");
+                    //      el.someAttribute = "another-value";
+                    //      // upgrade component
+                    //      customElements.define('my-component', MyComponent);
+                    //    </script>
+                    //  ```
+                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
+                    //  to the value that was set inline i.e. "some-value" from above example. When
+                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
+                    //
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
+                    //  by connectedCallback as this attributeChangedCallback will not fire.
+                    //
+                    //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
+                    //
+                    //  TODO(STENCIL-16) we should think about whether or not we actually want to be reflecting the attributes to
+                    //  properties here given that this goes against best practices outlined here
+                    //  https://developers.google.com/web/fundamentals/web-components/best-practices#avoid-reentrancy
+                    if (this.hasOwnProperty(propName)) {
+                        newValue = this[propName];
+                        delete this[propName];
+                    }
+                    else if (prototype.hasOwnProperty(propName) &&
+                        typeof this[propName] === 'number' &&
+                        this[propName] == newValue) {
+                        // if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native
+                        // APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in
+                        // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
@@ -1406,7 +1501,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 endLoad();
             }
             if (!Cstr.isProxied) {
-                // we'eve never proxied this Constructor before
+                // we've never proxied this Constructor before
                 // let's add the getters/setters to its prototype before
                 // the first time we create an instance of the implementation
                 {
@@ -1459,7 +1554,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
     const ancestorComponent = hostRef.$ancestorComponent$;
     const schedule = () => scheduleUpdate(hostRef, true);
     if (ancestorComponent && ancestorComponent['s-rc']) {
-        // this is the intial load and this component it has an ancestor component
+        // this is the initial load and this component it has an ancestor component
         // but the ancestor component has NOT fired its will update lifecycle yet
         // so let's just cool our jets and wait for the ancestor to continue first
         // this will get fired off when the ancestor component
@@ -1555,7 +1650,7 @@ const disconnectedCallback = (elm) => {
         const instance = hostRef.$lazyInstance$ ;
         {
             if (hostRef.$rmListeners$) {
-                hostRef.$rmListeners$.map(rmListener => rmListener());
+                hostRef.$rmListeners$.map((rmListener) => rmListener());
                 hostRef.$rmListeners$ = undefined;
             }
         }
@@ -1580,71 +1675,73 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     let isBootstrapping = true;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
-    lazyBundles.map(lazyBundle => lazyBundle[1].map(compactMeta => {
-        const cmpMeta = {
-            $flags$: compactMeta[0],
-            $tagName$: compactMeta[1],
-            $members$: compactMeta[2],
-            $listeners$: compactMeta[3],
-        };
-        {
-            cmpMeta.$members$ = compactMeta[2];
-        }
-        {
-            cmpMeta.$listeners$ = compactMeta[3];
-        }
-        {
-            cmpMeta.$attrsToReflect$ = [];
-        }
-        {
-            cmpMeta.$watchers$ = {};
-        }
-        const tagName = cmpMeta.$tagName$;
-        const HostElement = class extends HTMLElement {
-            // StencilLazyHost
-            constructor(self) {
-                // @ts-ignore
-                super(self);
-                self = this;
-                registerHost(self, cmpMeta);
-                if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-                    // this component is using shadow dom
-                    // and this browser supports shadow dom
-                    // add the read-only property "shadowRoot" to the host element
-                    // adding the shadow root build conditionals to minimize runtime
-                    {
+    lazyBundles.map((lazyBundle) => {
+        lazyBundle[1].map((compactMeta) => {
+            const cmpMeta = {
+                $flags$: compactMeta[0],
+                $tagName$: compactMeta[1],
+                $members$: compactMeta[2],
+                $listeners$: compactMeta[3],
+            };
+            {
+                cmpMeta.$members$ = compactMeta[2];
+            }
+            {
+                cmpMeta.$listeners$ = compactMeta[3];
+            }
+            {
+                cmpMeta.$attrsToReflect$ = [];
+            }
+            {
+                cmpMeta.$watchers$ = {};
+            }
+            const tagName = cmpMeta.$tagName$;
+            const HostElement = class extends HTMLElement {
+                // StencilLazyHost
+                constructor(self) {
+                    // @ts-ignore
+                    super(self);
+                    self = this;
+                    registerHost(self, cmpMeta);
+                    if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
+                        // this component is using shadow dom
+                        // and this browser supports shadow dom
+                        // add the read-only property "shadowRoot" to the host element
+                        // adding the shadow root build conditionals to minimize runtime
                         {
-                            self.attachShadow({ mode: 'open' });
+                            {
+                                self.attachShadow({ mode: 'open' });
+                            }
                         }
                     }
                 }
-            }
-            connectedCallback() {
-                if (appLoadFallback) {
-                    clearTimeout(appLoadFallback);
-                    appLoadFallback = null;
+                connectedCallback() {
+                    if (appLoadFallback) {
+                        clearTimeout(appLoadFallback);
+                        appLoadFallback = null;
+                    }
+                    if (isBootstrapping) {
+                        // connectedCallback will be processed once all components have been registered
+                        deferredConnectedCallbacks.push(this);
+                    }
+                    else {
+                        plt.jmp(() => connectedCallback(this));
+                    }
                 }
-                if (isBootstrapping) {
-                    // connectedCallback will be processed once all components have been registered
-                    deferredConnectedCallbacks.push(this);
+                disconnectedCallback() {
+                    plt.jmp(() => disconnectedCallback(this));
                 }
-                else {
-                    plt.jmp(() => connectedCallback(this));
+                componentOnReady() {
+                    return getHostRef(this).$onReadyPromise$;
                 }
+            };
+            cmpMeta.$lazyBundleId$ = lazyBundle[0];
+            if (!exclude.includes(tagName) && !customElements.get(tagName)) {
+                cmpTags.push(tagName);
+                customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
             }
-            disconnectedCallback() {
-                plt.jmp(() => disconnectedCallback(this));
-            }
-            componentOnReady() {
-                return getHostRef(this).$onReadyPromise$;
-            }
-        };
-        cmpMeta.$lazyBundleId$ = lazyBundle[0];
-        if (!exclude.includes(tagName) && !customElements.get(tagName)) {
-            cmpTags.push(tagName);
-            customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* isElementConstructor */));
-        }
-    }));
+        });
+    });
     {
         visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
         visibilityStyle.setAttribute('data-styles', '');
@@ -1653,7 +1750,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;
     if (deferredConnectedCallbacks.length) {
-        deferredConnectedCallbacks.map(host => host.connectedCallback());
+        deferredConnectedCallbacks.map((host) => host.connectedCallback());
     }
     else {
         {
@@ -1678,10 +1775,10 @@ const registerHost = (elm, cmpMeta) => {
         $instanceValues$: new Map(),
     };
     {
-        hostRef.$onInstancePromise$ = new Promise(r => (hostRef.$onInstanceResolve$ = r));
+        hostRef.$onInstancePromise$ = new Promise((r) => (hostRef.$onInstanceResolve$ = r));
     }
     {
-        hostRef.$onReadyPromise$ = new Promise(r => (hostRef.$onReadyResolve$ = r));
+        hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
         elm['s-p'] = [];
         elm['s-rc'] = [];
     }
@@ -1699,11 +1796,13 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     if (module) {
         return module[exportName];
     }
+    /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
     return import(
+    /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */
-    `./${bundleId}.entry.js${''}`).then(importedModule => {
+    `./${bundleId}.entry.js${''}`).then((importedModule) => {
         {
             cmpModules.set(bundleId, importedModule);
         }

package/dist/esm/{index-9579282b.js → index-b24f5ce0.js}

@@ -1,4 +1,4 @@
-import { w as writeTask, B as Build } from './index-f0f6a379.js';
+import { w as writeTask, B as Build } from './index-67fab020.js';
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
@@ -6,8 +6,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-b1be0863.js');
-const mdTransitionAnimation = () => import('./md.transition-1763f475.js');
+const iosTransitionAnimation = () => import('./ios.transition-c199f54e.js');
+const mdTransitionAnimation = () => import('./md.transition-56bc869f.js');
 const transition = (opts) => {
     return new Promise((resolve, reject) => {
         writeTask(() => {

package/dist/esm/ion-action-sheet.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-f0f6a379.js';
-import { g as getIonMode } from './ionic-global-ef89a0a5.js';
-import { B as BACKDROP, i as isCancel, a as prepareOverlay, b as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays-06b43b65.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-67fab020.js';
+import { g as getIonMode } from './ionic-global-6ad8a48f.js';
+import { B as BACKDROP, i as isCancel, a as prepareOverlay, b as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays-5eeb3167.js';
 import { g as getClassMap } from './theme-74c22054.js';
 import { c as createAnimation } from './animation-7a1025d0.js';
 import './hardware-back-button-b3b61715.js';

package/dist/esm/ion-alert.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-f0f6a379.js';
-import { g as getIonMode } from './ionic-global-ef89a0a5.js';
-import { B as BACKDROP, i as isCancel, a as prepareOverlay, b as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays-06b43b65.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-67fab020.js';
+import { g as getIonMode } from './ionic-global-6ad8a48f.js';
+import { B as BACKDROP, i as isCancel, a as prepareOverlay, b as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays-5eeb3167.js';
 import { s as sanitizeDOMString } from './index-86d5f3ab.js';
 import { g as getClassMap } from './theme-74c22054.js';
 import { c as createAnimation } from './animation-7a1025d0.js';

package/dist/esm/ion-app.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-f0f6a379.js';
-import { g as getIonMode, c as config, i as isPlatform } from './ionic-global-ef89a0a5.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-67fab020.js';
+import { g as getIonMode, c as config, i as isPlatform } from './ionic-global-6ad8a48f.js';
 
 const appCss = "html.plt-mobile ion-app{user-select:none}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}";
 
@@ -15,7 +15,7 @@ const App = class {
           import('./tap-click-9b3d603b.js').then(module => module.startTapClick(config));
         }
         if (config.getBoolean('statusTap', isHybrid)) {
-          import('./status-tap-7458bd71.js').then(module => module.startStatusTap());
+          import('./status-tap-2cbdf8de.js').then(module => module.startStatusTap());
         }
         if (config.getBoolean('inputShims', needInputShims())) {
           import('./input-shims-a4ad2743.js').then(module => module.startInputShims(config));

package/dist/esm/ion-avatar.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-f0f6a379.js';
-import { g as getIonMode } from './ionic-global-ef89a0a5.js';
+import { r as registerInstance, h, H as Host } from './index-67fab020.js';
+import { g as getIonMode } from './ionic-global-6ad8a48f.js';
 
 const avatarIosCss = ":host{border-radius:var(--border-radius);display:block}::slotted(ion-img),::slotted(img){border-radius:var(--border-radius);width:100%;height:100%;object-fit:cover;overflow:hidden}:host{--border-radius:50%;width:48px;height:48px}";