@ionic/core 8.0.0-beta.0 → 8.0.0-beta.2

package/components/overlays.js

@@ -2,13 +2,88 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { d as doc } from './index5.js';
-import { OVERLAY_BACK_BUTTON_PRIORITY, shoudUseCloseWatcher } from './hardware-back-button.js';
+import { f as focusVisibleElement, c as componentOnReady, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
+import { OVERLAY_BACK_BUTTON_PRIORITY, shouldUseCloseWatcher } from './hardware-back-button.js';
 import { b as getIonMode, c as config } from './ionic-global.js';
 import { C as CoreDelegate } from './framework-delegate.js';
 import { B as BACKDROP_NO_SCROLL } from './gesture-controller.js';
-import { c as componentOnReady, f as focusVisibleElement, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
 import { p as printIonWarning } from './index6.js';
 
+/**
+ * This query string selects elements that
+ * are eligible to receive focus. We select
+ * interactive elements that meet the following
+ * criteria:
+ * 1. Element does not have a negative tabindex
+ * 2. Element does not have `hidden`
+ * 3. Element does not have `disabled` for non-Ionic components.
+ * 4. Element does not have `disabled` or `disabled="true"` for Ionic components.
+ * Note: We need this distinction because `disabled="false"` is
+ * valid usage for the disabled property on ion-button.
+ */
+const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+/**
+ * Focuses the first descendant in a context
+ * that can receive focus. If none exists,
+ * a fallback element will be focused.
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ *
+ * If no fallback is specified then we focus the container itself.
+ */
+const focusFirstDescendant = (ref, fallbackElement) => {
+    const firstInput = ref.querySelector(focusableQueryString);
+    focusElementInContext(firstInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
+};
+/**
+ * Focuses the last descendant in a context
+ * that can receive focus. If none exists,
+ * a fallback element will be focused.
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ *
+ * If no fallback is specified then we focus the container itself.
+ */
+const focusLastDescendant = (ref, fallbackElement) => {
+    const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
+    const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
+    focusElementInContext(lastInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
+};
+/**
+ * Focuses a particular element in a context. If the element
+ * doesn't have anything focusable associated with it then
+ * a fallback element will be focused.
+ *
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ * This should be used instead of the focus() method
+ * on most elements because the focusable element
+ * may not be the host element.
+ *
+ * For example, if an ion-button should be focused
+ * then we should actually focus the native <button>
+ * element inside of ion-button's shadow root, not
+ * the host element itself.
+ */
+const focusElementInContext = (hostToFocus, fallbackElement) => {
+    let elementToFocus = hostToFocus;
+    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
+    if (shadowRoot) {
+        // If there are no inner focusable elements, just focus the host element.
+        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
+    }
+    if (elementToFocus) {
+        focusVisibleElement(elementToFocus);
+    }
+    else {
+        // Focus fallback element instead of letting focus escape
+        fallbackElement.focus();
+    }
+};
+
 let lastOverlayIndex = 0;
 let lastId = 0;
 const activeAnimations = new WeakMap();
@@ -89,39 +164,7 @@ const createOverlay = (tagName, opts) => {
     }
     return Promise.resolve();
 };
-/**
- * This query string selects elements that
- * are eligible to receive focus. We select
- * interactive elements that meet the following
- * criteria:
- * 1. Element does not have a negative tabindex
- * 2. Element does not have `hidden`
- * 3. Element does not have `disabled` for non-Ionic components.
- * 4. Element does not have `disabled` or `disabled="true"` for Ionic components.
- * Note: We need this distinction because `disabled="false"` is
- * valid usage for the disabled property on ion-button.
- */
-const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
 const isOverlayHidden = (overlay) => overlay.classList.contains('overlay-hidden');
-/**
- * Focuses the first descendant in an overlay
- * that can receive focus. If none exists,
- * the entire overlay will be focused.
- */
-const focusFirstDescendant = (ref, overlay) => {
-    const firstInput = ref.querySelector(focusableQueryString);
-    focusElementInOverlay(firstInput, overlay);
-};
-/**
- * Focuses the last descendant in an overlay
- * that can receive focus. If none exists,
- * the entire overlay will be focused.
- */
-const focusLastDescendant = (ref, overlay) => {
-    const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
-    const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
-    focusElementInOverlay(lastInput, overlay);
-};
 /**
  * Focuses a particular element in an overlay. If the element
  * doesn't have anything focusable associated with it then
@@ -312,7 +355,7 @@ const trapKeyboardFocus = (ev, doc) => {
              */
             const lastFocus = lastOverlay.lastFocus;
             // Focus the first element in the overlay wrapper
-            focusFirstDescendant(lastOverlay, lastOverlay);
+            focusFirstDescendant(lastOverlay);
             /**
              * If the cached last focused element is the
              * same as the active element, then we need
@@ -323,7 +366,7 @@ const trapKeyboardFocus = (ev, doc) => {
              * last focus to equal the active element.
              */
             if (lastFocus === doc.activeElement) {
-                focusLastDescendant(lastOverlay, lastOverlay);
+                focusLastDescendant(lastOverlay);
             }
             lastOverlay.lastFocus = doc.activeElement;
         }
@@ -368,7 +411,7 @@ const connectListeners = (doc) => {
          * this behavior will be handled via the ionBackButton
          * event.
          */
-        if (!shoudUseCloseWatcher()) {
+        if (!shouldUseCloseWatcher()) {
             doc.addEventListener('keydown', (ev) => {
                 if (ev.key === 'Escape') {
                     const lastOverlay = getPresentedOverlay(doc);
@@ -459,15 +502,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
     }
     setRootAriaHidden(true);
     document.body.classList.add(BACKDROP_NO_SCROLL);
-    /**
-     * Hide all other overlays from screen readers so only this one
-     * can be read. Note that presenting an overlay always makes
-     * it the topmost one.
-     */
-    if (doc !== undefined) {
-        const presentedOverlays = getPresentedOverlays(doc);
-        presentedOverlays.forEach((o) => o.setAttribute('aria-hidden', 'true'));
-    }
+    hideOverlaysFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -560,7 +595,7 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
@@ -613,13 +648,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         console.error(err);
     }
     overlay.el.remove();
-    /**
-     * If there are other overlays presented, unhide the new
-     * topmost one from screen readers.
-     */
-    if (doc !== undefined) {
-        (_c = getPresentedOverlay(doc)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-hidden');
-    }
+    revealOverlaysToScreenReaders();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -815,5 +844,61 @@ const createTriggerController = () => {
         removeClickListener,
     };
 };
+/**
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
+ * events here because those events do not fire when the screen readers moves to a non-focusable
+ * element such as text.
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
+ *
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
+ */
+const hideOverlaysFromScreenReaders = (newTopMostOverlay) => {
+    var _a;
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const presentedOverlay = overlays[i];
+        const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
+        /**
+         * If next overlay has aria-hidden then all remaining overlays will have it too.
+         * Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
+         * should not have aria-hidden either so focus can remain in the current overlay.
+         */
+        if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+        }
+    }
+};
+/**
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
+ * focus is never automatically moved to the Toast.
+ */
+const revealOverlaysToScreenReaders = () => {
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const currentOverlay = overlays[i];
+        /**
+         * If the current we are looking at is a Toast then we can remove aria-hidden.
+         * However, we potentially need to keep looking at the overlay stack because there
+         * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
+         * overlay too so focus can move there since focus is never automatically moved to the Toast.
+         */
+        currentOverlay.removeAttribute('aria-hidden');
+        /**
+         * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
+         * since this overlay should always receive focus. As a result, all underlying overlays should still
+         * be hidden from screen readers.
+         */
+        if (currentOverlay.tagName !== 'ION-TOAST') {
+            break;
+        }
+    }
+};
 
-export { BACKDROP as B, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getPresentedOverlay as o, pickerController as p, safeCall as s, toastController as t };
+export { BACKDROP as B, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getPresentedOverlay as o, pickerController as p, focusLastDescendant as q, safeCall as s, toastController as t };

package/components/picker-column-option.js

@@ -86,10 +86,10 @@ const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOp
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '1d5358c019c01ca429ddb514b9f9b67a3c89f652', class: createColorClasses(color, {
+        return (h(Host, { key: '8307a2917395b704ca995c64b5e84b828a8f3946', class: createColorClasses(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("button", { key: 'c86794a15b61062a886c6f5113723ccd98238e9f', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'ab7f80cacdd39b5aedf7d2cc8eddc6288093629a' }))));
+            }) }, h("button", { key: '2112f812b169e1fa67ab08ccb1d63c8e14e30872', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: '571b4724e055765891db30405488ae368f110dc1' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/picker-column.js

@@ -268,6 +268,13 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
      * height of 0px.
      */
     componentWillLoad() {
+        /**
+         * We cache parentEl in a local variable
+         * so we don't need to keep accessing
+         * the class variable (which comes with
+         * a small performance hit)
+         */
+        const parentEl = (this.parentEl = this.el.closest('ion-picker'));
         const visibleCallback = (entries) => {
             const ev = entries[0];
             if (ev.isIntersecting) {
@@ -295,8 +302,16 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
                 }
             }
         };
-        new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
-        const parentEl = (this.parentEl = this.el.closest('ion-picker'));
+        /**
+         * Set the root to be the parent picker element
+         * This causes the IO callback
+         * to be fired in WebKit as soon as the element
+         * is visible. If we used the default root value
+         * then WebKit would only fire the IO callback
+         * after any animations (such as a modal transition)
+         * finished, and there would potentially be a flicker.
+         */
+        new IntersectionObserver(visibleCallback, { threshold: 0.001, root: this.parentEl }).observe(this.el);
         if (parentEl !== null) {
             // TODO(FW-2832): type
             parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
@@ -365,14 +380,14 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '22dcc8dc9bc8c6035cba9f8825f231797464c652', class: createColorClasses(color, {
+        return (h(Host, { key: '6658bfcf04d2e16e5a1acdb82c7b99fba27a6e36', class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: 'e93c2d8ea862e2d84ae9338ad2cbec0eea2230f8', name: "prefix" }), h("div", { key: 'a981c29b3cd9456b7f2523d1daa4d1797d389f03', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
+            }) }, h("slot", { key: 'a763810ee7cdb6757a6b769edc7b22d0e5d31300', name: "prefix" }), h("div", { key: 'b782e731803faa9afddbd7ecf117cf13b7fed392', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
                 this.scrollEl = el;
-            } }, h("div", { key: 'd80da940ecb2d8cea236ef9c74da1871a7ab6248', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '2b05ef9d4116ca7940c3b61454517c02ee40bf9e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'a557a7fb595d3bec5e0bd76b10f73cdc93b17bff', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '4934b827a0b11dfcb2cb9a49740076609ab86f59' }), h("div", { key: 'f89592da27eb54e88e9a977aa4ecd9dc4d8e211d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '87c0cf79ce3b88c2328256ee6895612327653009', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '24e96271c3e7468cc3cc5a6f3e384740c4fd9988', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '2ed210e571787a88c06d7538cb7082875e85fb28', name: "suffix" })));
+            } }, h("div", { key: '1ad66da148e1b68654fb239e5b0378b6588952ec', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '40d9a15a9387fd6505cf2089dc0bd025c1d024ef', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6594be21a3dea1668cc90488d0b9b611ca8f65a8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '3e848b150f81d6283e5a04876f9b7cd61ba8079e' }), h("div", { key: 'e1e4ccb1cd80e937aee528f99fa969cf45228db3', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '1cc415a51d3f525777f2dfcc0ff0fea670307f9e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'aa247ca6aa986648a5b2822a8eb648d246de695c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '712e32d320c95cf293eb71ec395988414a3aea11', name: "suffix" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/picker-column2.js

@@ -343,9 +343,9 @@ const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class PickerColumnCmp e
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: '0337ac8379be177501b8d61f0ac0f68ecbb8344d', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: 'b7342219fdfcf106d905e3badefe021fd46ad12b', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '013ba8ea1c2fe4fe717386b9cc87484913c234f7', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: 'c87f5f3f1efca050c20bcd697aae905f0f370afc', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/picker.js

@@ -482,7 +482,7 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { key: '56b1421dee69c5aa7521b70199f047f4033c0a94', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '6956b6ee5debbad88e90d8b307833a4c112cabfb', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (h(Host, { key: '6d9d2f8427c722ac1e4ad401e3091f86b95af503', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'b885e06c95ad966d477d873154627766ecf5f5f9', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -497,7 +497,7 @@ const Picker = /*@__PURE__*/ proxyCustomElement(class Picker extends HTMLElement
                 if (ev.key === 'Enter') {
                     (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
                 }
-            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: 'b6acaac9ed883ab1db90a09f7ef3c15feb8fa38b', class: "picker-before" }), h("div", { key: '76a49ca1b135f5fdd31a6230053af1f58d0d7dd1', class: "picker-after" }), h("div", { key: '1e265527d12ffd6dc005133ac7fcfc2a1e02c7c3', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '828077cb8f6a8061d3509aca018d7b06d3e98130' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '91e060f4dd634ebaca072dbe7726a84f6f2c7040', class: "picker-before" }), h("div", { key: '2e06c9db12040c5a7af48c79ce3e1c32ce7a6ae4', class: "picker-after" }), h("div", { key: '791a934f6886ca89b370f71cd5c848ee6dac5b90', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: 'aed4fe303f87b804ce00f2633b0af4905600670a' })));
     }
     get el() { return this; }
     static get style() { return {

package/components/popover.js

@@ -2,11 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays.js';
 import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate.js';
 import { r as raf, g as getElementRoot, a as addEventListener, j as hasLazyBuild } from './helpers.js';
 import { c as createLockController } from './lock-controller.js';
 import { p as printIonWarning } from './index6.js';
-import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays.js';
 import { b as getIonMode, a as isPlatform } from './ionic-global.js';
 import { g as getClassMap } from './theme.js';
 import { e as deepReady, w as waitForMount } from './index2.js';
@@ -1226,7 +1226,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
          * descendant inside of the popover.
          */
         if (this.focusDescendantOnPresent) {
-            focusFirstDescendant(this.el, this.el);
+            focusFirstDescendant(el);
         }
         unlock();
     }
@@ -1292,9 +1292,9 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '71557e45cb839792d51f44786a3e8c1f92fd070c', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'fb58b5b3124ea4b0ced6d73558844121245a0951', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '6b829c9938f208c55fe2ac749875e7acc3b95b93', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '29f3706a787a4eae20b12c9589272f0b8026d0b2', class: "popover-content", part: "content" }, h("slot", { key: '51c20057566904cbfe4cc5e199180bd144b65ca6' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'a7b6a76eeeb840b806434cf5c9beaaf43a975867', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '9c59d1a567f66fb939aa194e452b46fd1dbef27c', class: "popover-content", part: "content" }, h("slot", { key: 'a8e260ace3d487c9e9c861725488a4bef7aeeb02' })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/radio-group.js

@@ -158,7 +158,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return h(Host, { key: '3d43aa6696c5293b49fc44cf91e3e41c4f4d12df', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return h(Host, { key: 'db2e1c69be545dcb95fa7c7bd0c36a1fd3423294', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     get el() { return this; }
     static get watchers() { return {

package/components/radio.js

@@ -146,7 +146,7 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode(this);
         const inItem = hostContext('ion-item', el);
-        return (h(Host, { key: '46bb0202f75b6cc81df10de71fbe971dc4dcaa68', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'dace1b39a24a928486fa73031277db04c0f437c0', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -157,10 +157,10 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '55061e8cc857752d963c9e4a65f46727f5c2cd9d', class: "radio-wrapper" }, h("div", { key: '589fd41fccd0e6d007e7bc502067f3f2447e4b80', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '4a9ab56b16003ea5fe2a737adf2bc1f4be02d2c7', class: "radio-wrapper" }, h("div", { key: '4545fc8a73dc428c20f521de02e0d65b4d365dc1', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, h("slot", { key: '0076f1f3b64c1a0cf2bc511424956a63d6cf2db9' })), h("div", { key: '1505a84e6dc8715f8fcb19ce94fab79e624a0622', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, h("slot", { key: '6c0ab29c0a724314c0591915a72ec004d66532e3' })), h("div", { key: '03ce5e87635fdbe5c0b3455e7dc2cbcb0ce189b6', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ripple-effect.js

@@ -66,7 +66,7 @@ const RippleEffect = /*@__PURE__*/ proxyCustomElement(class RippleEffect extends
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '42d95cc2382286e3bc5d68603f8292eb57ba10f5', role: "presentation", class: {
+        return (h(Host, { key: '97bc96ca8dc4bf162302d0cf6980f45534495a3d', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));

package/components/select-popover.js

@@ -5,13 +5,12 @@ import { proxyCustomElement, HTMLElement, h, forceUpdate, Host } from '@stencil/
 import { s as safeCall } from './overlays.js';
 import { g as getClassMap } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
-import { d as defineCustomElement$a } from './checkbox.js';
-import { d as defineCustomElement$9 } from './icon.js';
-import { d as defineCustomElement$8 } from './item.js';
-import { d as defineCustomElement$7 } from './label.js';
-import { d as defineCustomElement$6 } from './list.js';
-import { d as defineCustomElement$5 } from './list-header.js';
-import { d as defineCustomElement$4 } from './note.js';
+import { d as defineCustomElement$9 } from './checkbox.js';
+import { d as defineCustomElement$8 } from './icon.js';
+import { d as defineCustomElement$7 } from './item.js';
+import { d as defineCustomElement$6 } from './label.js';
+import { d as defineCustomElement$5 } from './list.js';
+import { d as defineCustomElement$4 } from './list-header.js';
 import { d as defineCustomElement$3 } from './radio.js';
 import { d as defineCustomElement$2 } from './radio-group.js';
 import { d as defineCustomElement$1 } from './ripple-effect.js';
@@ -118,7 +117,7 @@ const SelectPopover = /*@__PURE__*/ proxyCustomElement(class SelectPopover exten
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: '07c094ea0b8ba353f6147a912eedc3c75719fd4e', class: getIonMode(this) }, h("ion-list", { key: '4d110e3e036bbfecc418d0e37fc9bc4ec0c18674' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '7b93c55895f66fc6431862b7b47eeb60eaa8c292', class: getIonMode(this) }, h("ion-list", { key: '3a74ec35ec9b627a192d8ad3a206f81df838342b' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
     }
     get el() { return this; }
     static get style() { return {
@@ -136,7 +135,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ion-select-popover", "ion-checkbox", "ion-icon", "ion-item", "ion-label", "ion-list", "ion-list-header", "ion-note", "ion-radio", "ion-radio-group", "ion-ripple-effect"];
+    const components = ["ion-select-popover", "ion-checkbox", "ion-icon", "ion-item", "ion-label", "ion-list", "ion-list-header", "ion-radio", "ion-radio-group", "ion-ripple-effect"];
     components.forEach(tagName => { switch (tagName) {
         case "ion-select-popover":
             if (!customElements.get(tagName)) {
@@ -144,36 +143,31 @@ function defineCustomElement() {
             }
             break;
         case "ion-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ion-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "ion-item":
+        case "ion-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "ion-label":
+        case "ion-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ion-list":
+        case "ion-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "ion-list-header":
+        case "ion-list":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "ion-note":
+        case "ion-list-header":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/components/spinner.js

@@ -185,7 +185,7 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLEleme
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: 'bfb8b93a58da60686f6a1e6b8a5e0d1b7dea1f5d', class: createColorClasses(self.color, {
+        return (h(Host, { key: 'd33d08486ee9d9069abbe37b17e58fc2c321a414', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/cjs/{animation-4ad55058.js → animation-3e7bb91e.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const helpers = require('./helpers-b71ca811.js');
+const helpers = require('./helpers-668b3d95.js');
 
 let animationPrefix;
 /**

package/dist/cjs/{app-globals-92ad1b3d.js → app-globals-e132c781.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const ionicGlobal = require('./ionic-global-59a10130.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
 
 const globalScripts = ionicGlobal.initialize;
 

package/dist/cjs/{button-active-8f6a8e77.js → button-active-60ecf64d.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index$1 = require('./index-0ffe376d.js');
+const index$1 = require('./index-2d21d526.js');
 const haptic = require('./haptic-b882e0bb.js');
 const index = require('./index-ee07ed59.js');