@ionic/core 7.5.8-dev.11701448395.18799530 → 7.5.8-dev.11701788142.11dcb825

package/components/ion-input.js

@@ -206,6 +206,8 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
      *
      * Developers who wish to focus an input when an overlay is presented
      * should call `setFocus` after `didPresent` has resolved.
+     *
+     * See [managing focus](/docs/developing/managing-focus) for more information.
      */
     async setFocus() {
         if (this.nativeInput) {
@@ -271,15 +273,32 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         if (!this.shouldClearOnEdit()) {
             return;
         }
+        /**
+         * The following keys do not modify the
+         * contents of the input. As a result, pressing
+         * them should not edit the input.
+         *
+         * We can't check to see if the value of the input
+         * was changed because we call checkClearOnEdit
+         * in a keydown listener, and the key has not yet
+         * been added to the input.
+         */
+        const IGNORED_KEYS = ['Enter', 'Tab', 'Shift', 'Meta', 'Alt', 'Control'];
         /**
          * Clear the input if the control has not been previously cleared during focus.
          * Do not clear if the user hitting enter to submit a form.
          */
-        if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter' && ev.key !== 'Tab') {
+        if (!this.didInputClearOnEdit && this.hasValue() && !IGNORED_KEYS.includes(ev.key)) {
             this.value = '';
             this.emitInputChange(ev);
+            /**
+             * Only set this flag if we cleared the input.
+             * Otherwise pressing an IGNORED_KEYS first and
+             * then an allowed key will cause the input to not
+             * be cleared.
+             */
+            this.didInputClearOnEdit = true;
         }
-        this.didInputClearOnEdit = true;
     }
     hasValue() {
         return this.getValue().length > 0;

package/components/ion-refresher-content.js

@@ -3,9 +3,8 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config.js';
+import { c as config, b as getIonMode, a as isPlatform } from './ionic-global.js';
 import { n as caretBackSharp, o as arrowDown } from './index7.js';
-import { c as config, b as getIonMode } from './ionic-global.js';
-import { e as supportsRubberBandScrolling } from './refresher.utils.js';
 import { d as defineCustomElement$2, S as SPINNERS } from './spinner.js';
 import { d as defineCustomElement$3 } from './icon.js';
 
@@ -21,15 +20,9 @@ const RefresherContent = /*@__PURE__*/ proxyCustomElement(class RefresherContent
     }
     componentWillLoad() {
         if (this.pullingIcon === undefined) {
-            /**
-             * The native iOS refresher uses a spinner instead of
-             * an icon, so we need to see if this device supports
-             * the native iOS refresher.
-             */
-            const hasRubberBandScrolling = supportsRubberBandScrolling();
             const mode = getIonMode(this);
-            const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
-            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
+            const overflowRefresher = this.el.style.webkitOverflowScrolling !== undefined ? 'lines' : arrowDown;
+            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular');
         }
         if (this.refreshingSpinner === undefined) {
             const mode = getIonMode(this);

package/components/ion-refresher.js

@@ -1,13 +1,192 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, createEvent, writeTask, readTask, h, Host } from '@stencil/core/internal/client';
+import { writeTask, proxyCustomElement, HTMLElement, createEvent, readTask, h, Host } from '@stencil/core/internal/client';
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
 import { I as ION_CONTENT_CLASS_SELECTOR, b as ION_CONTENT_ELEMENT_SELECTOR, p as printIonContentErrorMsg, g as getScrollElement } from './index8.js';
-import { t as transitionEndAsync, m as clamp, g as getElementRoot, c as componentOnReady, r as raf } from './helpers.js';
+import { t as transitionEndAsync, c as componentOnReady, m as clamp, g as getElementRoot, r as raf } from './helpers.js';
 import { c as hapticImpact, I as ImpactStyle } from './haptic.js';
-import { b as getIonMode } from './ionic-global.js';
-import { s as shouldUseNativeRefresher, t as translateElement, a as setSpinnerOpacity, h as handleScrollWhileRefreshing, b as handleScrollWhilePulling, c as createPullingAnimation, d as createSnapBackAnimation, g as getRefresherAnimationType } from './refresher.utils.js';
+import { a as isPlatform, b as getIonMode } from './ionic-global.js';
+import { c as createAnimation } from './animation.js';
+
+const getRefresherAnimationType = (contentEl) => {
+    const previousSibling = contentEl.previousElementSibling;
+    const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
+    return hasHeader ? 'translate' : 'scale';
+};
+const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
+    return type === 'scale'
+        ? createScaleAnimation(pullingSpinner, refresherEl)
+        : createTranslateAnimation(pullingSpinner, refresherEl);
+};
+const createBaseAnimation = (pullingRefresherIcon) => {
+    const spinner = pullingRefresherIcon.querySelector('ion-spinner');
+    const circle = spinner.shadowRoot.querySelector('circle');
+    const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
+    const arrowContainer = pullingRefresherIcon.querySelector('.arrow-container');
+    const arrow = arrowContainer ? arrowContainer.querySelector('ion-icon') : null;
+    const baseAnimation = createAnimation().duration(1000).easing('ease-out');
+    const spinnerArrowContainerAnimation = createAnimation()
+        .addElement(spinnerArrowContainer)
+        .keyframes([
+        { offset: 0, opacity: '0.3' },
+        { offset: 0.45, opacity: '0.3' },
+        { offset: 0.55, opacity: '1' },
+        { offset: 1, opacity: '1' },
+    ]);
+    const circleInnerAnimation = createAnimation()
+        .addElement(circle)
+        .keyframes([
+        { offset: 0, strokeDasharray: '1px, 200px' },
+        { offset: 0.2, strokeDasharray: '1px, 200px' },
+        { offset: 0.55, strokeDasharray: '100px, 200px' },
+        { offset: 1, strokeDasharray: '100px, 200px' },
+    ]);
+    const circleOuterAnimation = createAnimation()
+        .addElement(spinner)
+        .keyframes([
+        { offset: 0, transform: 'rotate(-90deg)' },
+        { offset: 1, transform: 'rotate(210deg)' },
+    ]);
+    /**
+     * Only add arrow animation if present
+     * this allows users to customize the spinners
+     * without errors being thrown
+     */
+    if (arrowContainer && arrow) {
+        const arrowContainerAnimation = createAnimation()
+            .addElement(arrowContainer)
+            .keyframes([
+            { offset: 0, transform: 'rotate(0deg)' },
+            { offset: 0.3, transform: 'rotate(0deg)' },
+            { offset: 0.55, transform: 'rotate(280deg)' },
+            { offset: 1, transform: 'rotate(400deg)' },
+        ]);
+        const arrowAnimation = createAnimation()
+            .addElement(arrow)
+            .keyframes([
+            { offset: 0, transform: 'translateX(2px) scale(0)' },
+            { offset: 0.3, transform: 'translateX(2px) scale(0)' },
+            { offset: 0.55, transform: 'translateX(-1.5px) scale(1)' },
+            { offset: 1, transform: 'translateX(-1.5px) scale(1)' },
+        ]);
+        baseAnimation.addAnimation([arrowContainerAnimation, arrowAnimation]);
+    }
+    return baseAnimation.addAnimation([spinnerArrowContainerAnimation, circleInnerAnimation, circleOuterAnimation]);
+};
+const createScaleAnimation = (pullingRefresherIcon, refresherEl) => {
+    /**
+     * Do not take the height of the refresher icon
+     * because at this point the DOM has not updated,
+     * so the refresher icon is still hidden with
+     * display: none.
+     * The `ion-refresher` container height
+     * is roughly the amount we need to offset
+     * the icon by when pulling down.
+     */
+    const height = refresherEl.clientHeight;
+    const spinnerAnimation = createAnimation()
+        .addElement(pullingRefresherIcon)
+        .keyframes([
+        { offset: 0, transform: `scale(0) translateY(-${height}px)` },
+        { offset: 1, transform: 'scale(1) translateY(100px)' },
+    ]);
+    return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
+};
+const createTranslateAnimation = (pullingRefresherIcon, refresherEl) => {
+    /**
+     * Do not take the height of the refresher icon
+     * because at this point the DOM has not updated,
+     * so the refresher icon is still hidden with
+     * display: none.
+     * The `ion-refresher` container height
+     * is roughly the amount we need to offset
+     * the icon by when pulling down.
+     */
+    const height = refresherEl.clientHeight;
+    const spinnerAnimation = createAnimation()
+        .addElement(pullingRefresherIcon)
+        .keyframes([
+        { offset: 0, transform: `translateY(-${height}px)` },
+        { offset: 1, transform: 'translateY(100px)' },
+    ]);
+    return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
+};
+const createSnapBackAnimation = (pullingRefresherIcon) => {
+    return createAnimation()
+        .duration(125)
+        .addElement(pullingRefresherIcon)
+        .fromTo('transform', 'translateY(var(--ion-pulling-refresher-translate, 100px))', 'translateY(0px)');
+};
+// iOS Native Refresher
+// -----------------------------
+const setSpinnerOpacity = (spinner, opacity) => {
+    spinner.style.setProperty('opacity', opacity.toString());
+};
+const handleScrollWhilePulling = (ticks, numTicks, pullAmount) => {
+    const max = 1;
+    writeTask(() => {
+        ticks.forEach((el, i) => {
+            /**
+             * Compute the opacity of each tick
+             * mark as a percentage of the pullAmount
+             * offset by max / numTicks so
+             * the tick marks are shown staggered.
+             */
+            const min = i * (max / numTicks);
+            const range = max - min;
+            const start = pullAmount - min;
+            const progression = clamp(0, start / range, 1);
+            el.style.setProperty('opacity', progression.toString());
+        });
+    });
+};
+const handleScrollWhileRefreshing = (spinner, lastVelocityY) => {
+    writeTask(() => {
+        // If user pulls down quickly, the spinner should spin faster
+        spinner.style.setProperty('--refreshing-rotation-duration', lastVelocityY >= 1.0 ? '0.5s' : '2s');
+        spinner.style.setProperty('opacity', '1');
+    });
+};
+const translateElement = (el, value, duration = 200) => {
+    if (!el) {
+        return Promise.resolve();
+    }
+    const trans = transitionEndAsync(el, duration);
+    writeTask(() => {
+        el.style.setProperty('transition', `${duration}ms all ease-out`);
+        if (value === undefined) {
+            el.style.removeProperty('transform');
+        }
+        else {
+            el.style.setProperty('transform', `translate3d(0px, ${value}, 0px)`);
+        }
+    });
+    return trans;
+};
+// Utils
+// -----------------------------
+const shouldUseNativeRefresher = async (referenceEl, mode) => {
+    const refresherContent = referenceEl.querySelector('ion-refresher-content');
+    if (!refresherContent) {
+        return Promise.resolve(false);
+    }
+    await new Promise((resolve) => componentOnReady(refresherContent, resolve));
+    const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner');
+    const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
+    return (pullingSpinner !== null &&
+        refreshingSpinner !== null &&
+        /**
+         * We use webkitOverflowScrolling for feature detection with rubber band scrolling
+         * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
+         * However, it will be the empty string on iOS.
+         * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
+         * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
+         * set on the element, even if the platform does not support that.
+         */
+        ((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
+            mode === 'md'));
+};
 
 const refresherIosCss = "ion-refresher{top:0;display:none;position:absolute;width:100%;height:60px;pointer-events:none;z-index:-1}@supports (inset-inline-start: 0){ion-refresher{inset-inline-start:0}}@supports not (inset-inline-start: 0){ion-refresher{left:0}:host-context([dir=rtl]) ion-refresher{left:unset;right:unset;right:0}[dir=rtl] ion-refresher{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){ion-refresher:dir(rtl){left:unset;right:unset;right:0}}}ion-refresher.refresher-active{display:block}ion-refresher-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;height:100%}.refresher-pulling,.refresher-refreshing{display:none;width:100%}.refresher-pulling-icon,.refresher-refreshing-icon{-webkit-transform-origin:center;transform-origin:center;-webkit-transition:200ms;transition:200ms;font-size:30px;text-align:center}:host-context([dir=rtl]) .refresher-pulling-icon,:host-context([dir=rtl]) .refresher-refreshing-icon{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}[dir=rtl] .refresher-pulling-icon,[dir=rtl] .refresher-refreshing-icon{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}@supports selector(:dir(rtl)){.refresher-pulling-icon:dir(rtl),.refresher-refreshing-icon:dir(rtl){-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}}.refresher-pulling-text,.refresher-refreshing-text{font-size:16px;text-align:center}ion-refresher-content .arrow-container{display:none}.refresher-pulling ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.refresher-refreshing ion-refresher-content .refresher-refreshing{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling-icon{-webkit-transform:scale(0);transform:scale(0)}.refresher-completing ion-refresher-content .refresher-refreshing{display:block}.refresher-completing ion-refresher-content .refresher-refreshing-icon{-webkit-transform:scale(0);transform:scale(0)}.refresher-native .refresher-pulling-text,.refresher-native .refresher-refreshing-text{display:none}.refresher-ios .refresher-pulling-icon,.refresher-ios .refresher-refreshing-icon{color:var(--ion-text-color, #000)}.refresher-ios .refresher-pulling-text,.refresher-ios .refresher-refreshing-text{color:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-lines-ios line,.refresher-ios .refresher-refreshing .spinner-lines-small-ios line,.refresher-ios .refresher-refreshing .spinner-crescent circle{stroke:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-bubbles circle,.refresher-ios .refresher-refreshing .spinner-circles circle,.refresher-ios .refresher-refreshing .spinner-dots circle{fill:var(--ion-text-color, #000)}ion-refresher.refresher-native{display:block;z-index:1}ion-refresher.refresher-native ion-spinner{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}.refresher-native .refresher-refreshing ion-spinner{--refreshing-rotation-duration:2s;display:none;-webkit-animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards;animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards}.refresher-native .refresher-refreshing{display:none;-webkit-animation:250ms linear refresher-pop forwards;animation:250ms linear refresher-pop forwards}.refresher-native ion-spinner{width:32px;height:32px;color:var(--ion-color-step-450, #747577)}.refresher-native.refresher-refreshing .refresher-pulling ion-spinner,.refresher-native.refresher-completing .refresher-pulling ion-spinner{display:none}.refresher-native.refresher-refreshing .refresher-refreshing ion-spinner,.refresher-native.refresher-completing .refresher-refreshing ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-pulling ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-refreshing ion-spinner{display:none}.refresher-native.refresher-completing ion-refresher-content .refresher-refreshing-icon{-webkit-transform:scale(0) rotate(180deg);transform:scale(0) rotate(180deg);-webkit-transition:300ms;transition:300ms}@-webkit-keyframes refresher-pop{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes refresher-pop{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}50%{-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes refresher-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@keyframes refresher-rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}";
 

package/components/ion-searchbar.js

@@ -191,6 +191,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
      *
      * Developers who wish to focus an input when an overlay is presented
      * should call `setFocus` after `didPresent` has resolved.
+     *
+     * See [managing focus](/docs/developing/managing-focus) for more information.
      */
     async setFocus() {
         if (this.nativeInput) {

package/components/ion-textarea.js

@@ -167,6 +167,8 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
     /**
      * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
      * `textarea.focus()`.
+     *
+     * See [managing focus](/docs/developing/managing-focus) for more information.
      */
     async setFocus() {
         if (this.nativeInput) {
@@ -239,15 +241,36 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
         if (!this.clearOnEdit) {
             return;
         }
+        /**
+         * The following keys do not modify the
+         * contents of the input. As a result, pressing
+         * them should not edit the textarea.
+         *
+         * We can't check to see if the value of the textarea
+         * was changed because we call checkClearOnEdit
+         * in a keydown listener, and the key has not yet
+         * been added to the textarea.
+         *
+         * Unlike ion-input, the "Enter" key does modify the
+         * textarea by adding a new line, so "Enter" is not
+         * included in the IGNORED_KEYS array.
+         */
+        const IGNORED_KEYS = ['Tab', 'Shift', 'Meta', 'Alt', 'Control'];
         /**
          * Clear the textarea if the control has not been previously cleared
          * during focus.
          */
-        if (!this.didTextareaClearOnEdit && this.hasValue() && ev.key !== 'Tab') {
+        if (!this.didTextareaClearOnEdit && this.hasValue() && !IGNORED_KEYS.includes(ev.key)) {
             this.value = '';
             this.emitInputChange(ev);
+            /**
+             * Only set this flag if we cleared the input.
+             * Otherwise pressing an IGNORED_KEYS first and
+             * then an allowed key will cause the input to not
+             * be cleared.
+             */
+            this.didTextareaClearOnEdit = true;
         }
-        this.didTextareaClearOnEdit = true;
     }
     focusChange() {
         this.emitStyle();

package/dist/cjs/{app-globals-28656db1.js → app-globals-0af482c7.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const ionicGlobal = require('./ionic-global-62510d64.js');
+const ionicGlobal = require('./ionic-global-f4a2093b.js');
 
 const globalScripts = ionicGlobal.initialize;
 

package/dist/cjs/{button-active-75b38d77.js → button-active-417ccdcb.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index$1 = require('./index-b0102f48.js');
+const index$1 = require('./index-bbb4336c.js');
 const haptic = require('./haptic-216df36c.js');
 const index = require('./index-d1b59ffa.js');
 

package/dist/cjs/{index-097270a3.js → index-5cbb20f9.js}

@@ -6,7 +6,7 @@
 const index = require('./index-5915f9b3.js');
 const hardwareBackButton = require('./hardware-back-button-76833cac.js');
 const helpers = require('./helpers-76bb7efb.js');
-const ionicGlobal = require('./ionic-global-62510d64.js');
+const ionicGlobal = require('./ionic-global-f4a2093b.js');
 const animation = require('./animation-cc40e39c.js');
 
 /**

package/dist/cjs/{index-b0102f48.js → index-bbb4336c.js}

@@ -285,6 +285,17 @@ const convertToPrivate = (node) => {
     vnode.$name$ = node.vname;
     return vnode;
 };
+/**
+ * Entrypoint of the client-side hydration process. Facilitates calls to hydrate the
+ * document and all its nodes.
+ *
+ * This process will also reconstruct the shadow root and slot DOM nodes for components using shadow DOM.
+ *
+ * @param hostElm The element to hydrate.
+ * @param tagName The element's tag name.
+ * @param hostId The host ID assigned to the element by the server.
+ * @param hostRef The host reference for the element.
+ */
 const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     const endHydrate = createTime('hydrateClient', tagName);
     const shadowRoot = hostElm.shadowRoot;
@@ -302,6 +313,8 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
         const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
         const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
         const node = c.$elm$;
+        // Put the node back in its original location since the native Shadow DOM
+        // can handle rendering it its correct location now
         if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
             orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
         }
@@ -323,6 +336,22 @@ const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
     }
     endHydrate();
 };
+/**
+ * Recursively constructs the virtual node tree for a host element and its children.
+ * The tree is constructed by parsing the annotations set on the nodes by the server.
+ *
+ * In addition to constructing the vNode tree, we also track information about the node's
+ * descendants like which are slots, which should exist in the shadow root, and which
+ * are nodes that should be rendered as children of the parent node.
+ *
+ * @param parentVNode The vNode representing the parent node.
+ * @param childRenderNodes An array of all child nodes in the parent's node tree.
+ * @param slotNodes An array of all slot nodes in the parent's node tree.
+ * @param shadowRootNodes An array all nodes that should be rendered in the shadow root in the parent's node tree.
+ * @param hostElm The parent element.
+ * @param node The node to construct the vNode tree for.
+ * @param hostId The host ID assigned to the element by the server.
+ */
 const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
     let childNodeType;
     let childIdSplt;
@@ -467,6 +496,13 @@ const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes
         parentVNode.$children$ = [vnode];
     }
 };
+/**
+ * Recursively locate any comments representing an original location for a node in a node's
+ * children or shadowRoot children.
+ *
+ * @param node The node to search.
+ * @param orgLocNodes A map of the original location annotation and the current node being searched.
+ */
 const initializeDocumentHydrate = (node, orgLocNodes) => {
     if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
         let i = 0;
@@ -2549,12 +2585,14 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // If we have styles, add them to the DOM
     if (dataStyles.innerHTML.length) {
         dataStyles.setAttribute('data-styles', '');
-        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
         // Apply CSP nonce to the style tag if it exists
         const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
         if (nonce != null) {
             dataStyles.setAttribute('nonce', nonce);
         }
+        // Insert the styles into the document head
+        // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied
+        head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
     isBootstrapping = false;

package/dist/cjs/{index-cb3e0ab7.js → index-d4c2e02c.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-b0102f48.js');
+const index = require('./index-bbb4336c.js');
 const helpers = require('./helpers-76bb7efb.js');
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
@@ -12,8 +12,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-d9c0e4fb.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-4fac8a87.js'); });
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-a4ffb5a2.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-292abe1c.js'); });
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {

package/dist/cjs/index.cjs.js

@@ -6,19 +6,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const animation = require('./animation-cc40e39c.js');
-const index = require('./index-cb3e0ab7.js');
-const ios_transition = require('./ios.transition-d9c0e4fb.js');
-const md_transition = require('./md.transition-4fac8a87.js');
+const index = require('./index-d4c2e02c.js');
+const ios_transition = require('./ios.transition-a4ffb5a2.js');
+const md_transition = require('./md.transition-292abe1c.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
 const index$1 = require('./index-d1b59ffa.js');
-const ionicGlobal = require('./ionic-global-62510d64.js');
+const ionicGlobal = require('./ionic-global-f4a2093b.js');
 const helpers = require('./helpers-76bb7efb.js');
 const config = require('./config-4f60b98a.js');
 const theme = require('./theme-d1c573d2.js');
-const index$2 = require('./index-097270a3.js');
-const overlays = require('./overlays-b1471172.js');
+const index$2 = require('./index-5cbb20f9.js');
+const overlays = require('./overlays-5c379703.js');
 require('./index-306a7476.js');
-require('./index-b0102f48.js');
+require('./index-bbb4336c.js');
 require('./gesture-controller-c40c045a.js');
 require('./index-5915f9b3.js');
 require('./hardware-back-button-76833cac.js');

package/dist/cjs/ion-accordion_2.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0102f48.js');
+const index = require('./index-bbb4336c.js');
 const helpers = require('./helpers-76bb7efb.js');
 const index$1 = require('./index-09471526.js');
-const ionicGlobal = require('./ionic-global-62510d64.js');
+const ionicGlobal = require('./ionic-global-f4a2093b.js');
 const index$2 = require('./index-5915f9b3.js');
 
 const accordionIosCss = ":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}";

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

@@ -5,13 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0102f48.js');
-const buttonActive = require('./button-active-75b38d77.js');
+const index = require('./index-bbb4336c.js');
+const buttonActive = require('./button-active-417ccdcb.js');
 const helpers = require('./helpers-76bb7efb.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-b1471172.js');
+const overlays = require('./overlays-5c379703.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-62510d64.js');
+const ionicGlobal = require('./ionic-global-f4a2093b.js');
 const animation = require('./animation-cc40e39c.js');
 require('./haptic-216df36c.js');
 require('./capacitor-46980811.js');

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

@@ -5,14 +5,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0102f48.js');
+const index = require('./index-bbb4336c.js');
 const config = require('./config-4f60b98a.js');
-const buttonActive = require('./button-active-75b38d77.js');
+const buttonActive = require('./button-active-417ccdcb.js');
 const helpers = require('./helpers-76bb7efb.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-b1471172.js');
+const overlays = require('./overlays-5c379703.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-62510d64.js');
+const ionicGlobal = require('./ionic-global-f4a2093b.js');
 const animation = require('./animation-cc40e39c.js');
 require('./haptic-216df36c.js');
 require('./capacitor-46980811.js');

package/dist/cjs/ion-app_8.cjs.entry.js

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0102f48.js');
-const ionicGlobal = require('./ionic-global-62510d64.js');
+const index = require('./index-bbb4336c.js');
+const ionicGlobal = require('./ionic-global-f4a2093b.js');
 const helpers = require('./helpers-76bb7efb.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
@@ -15,7 +15,7 @@ const keyboardController = require('./keyboard-controller-2158b478.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
 const frameworkDelegate = require('./framework-delegate-1c29b14a.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const index$2 = require('./index-cb3e0ab7.js');
+const index$2 = require('./index-d4c2e02c.js');
 require('./index-5915f9b3.js');
 require('./index-306a7476.js');
 require('./keyboard-9390928c.js');
@@ -35,7 +35,7 @@ const App = class {
                     Promise.resolve().then(function () { return require('./index-8c1e77d6.js'); }).then((module) => module.startTapClick(ionicGlobal.config));
                 }
                 if (ionicGlobal.config.getBoolean('statusTap', isHybrid)) {
-                    Promise.resolve().then(function () { return require('./status-tap-0aa8e1f2.js'); }).then((module) => module.startStatusTap());
+                    Promise.resolve().then(function () { return require('./status-tap-415acac6.js'); }).then((module) => module.startStatusTap());
                 }
                 if (ionicGlobal.config.getBoolean('inputShims', needInputShims())) {
                     /**

package/dist/cjs/ion-avatar_3.cjs.entry.js

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0102f48.js');
-const ionicGlobal = require('./ionic-global-62510d64.js');
+const index = require('./index-bbb4336c.js');
+const ionicGlobal = require('./ionic-global-f4a2093b.js');
 const theme = require('./theme-d1c573d2.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%;-o-object-fit:cover;object-fit:cover;overflow:hidden}:host{--border-radius:50%;width:48px;height:48px}";

package/dist/cjs/ion-back-button.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0102f48.js');
+const index = require('./index-bbb4336c.js');
 const helpers = require('./helpers-76bb7efb.js');
 const theme = require('./theme-d1c573d2.js');
 const index$1 = require('./index-09471526.js');
-const ionicGlobal = require('./ionic-global-62510d64.js');
+const ionicGlobal = require('./ionic-global-f4a2093b.js');
 
 const backButtonIosCss = ":host{--background:transparent;--color-focused:currentColor;--color-hover:currentColor;--icon-margin-top:0;--icon-margin-bottom:0;--icon-padding-top:0;--icon-padding-end:0;--icon-padding-bottom:0;--icon-padding-start:0;--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--min-width:auto;--min-height:auto;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--opacity:1;--ripple-color:currentColor;--transition:background-color, opacity 100ms linear;display:none;min-width:var(--min-width);min-height:var(--min-height);color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-font-kerning:none;font-kerning:none}ion-ripple-effect{color:var(--ripple-color)}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.show-back-button){display:block}:host(.back-button-disabled){cursor:default;opacity:0.5;pointer-events:none}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;opacity:var(--opacity);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}ion-icon{-webkit-padding-start:var(--icon-padding-start);padding-inline-start:var(--icon-padding-start);-webkit-padding-end:var(--icon-padding-end);padding-inline-end:var(--icon-padding-end);padding-top:var(--icon-padding-top);padding-bottom:var(--icon-padding-bottom);-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom);display:inherit;font-size:var(--icon-font-size);font-weight:var(--icon-font-weight);pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-hover:transparent;--background-hover-opacity:1;--background-focused:currentColor;--background-focused-opacity:.1;--border-radius:4px;--color:var(--ion-color-primary, #3880ff);--icon-margin-end:1px;--icon-margin-start:-4px;--icon-font-size:1.6em;--min-height:32px;font-size:clamp(17px, 1.0625rem, 21.998px)}.button-native{-webkit-transform:translateZ(0);transform:translateZ(0);overflow:visible;z-index:99}:host(.ion-activated) .button-native{opacity:0.4}@media (any-hover: hover){:host(:hover){opacity:0.6}}";
 

package/dist/cjs/ion-backdrop.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b0102f48.js');
+const index = require('./index-bbb4336c.js');
 const gestureController = require('./gesture-controller-c40c045a.js');
-const ionicGlobal = require('./ionic-global-62510d64.js');
+const ionicGlobal = require('./ionic-global-f4a2093b.js');
 
 const backdropIosCss = ":host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;-ms-touch-action:none;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}";