@ionic/core 8.4.4-dev.11739312641.10060091 → 8.4.4-dev.11740658609.11c22eeb

package/components/alert.js

@@ -167,6 +167,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         }
     }
     onKeydown(ev) {
+        var _a;
         const inputTypes = new Set(this.processedInputs.map((i) => i.type));
         /**
          * Based on keyboard navigation requirements, the
@@ -176,6 +177,17 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
             ev.preventDefault();
             return;
         }
+        /**
+         * Ensure when alert container is being focused, and the user presses the tab + shift keys, the focus will be set to the last alert button.
+         */
+        if (ev.target.classList.contains('alert-wrapper')) {
+            if (ev.key === 'Tab' && ev.shiftKey) {
+                ev.preventDefault();
+                const lastChildBtn = (_a = this.wrapperEl) === null || _a === void 0 ? void 0 : _a.querySelector('.alert-button:last-child');
+                lastChildBtn.focus();
+                return;
+            }
+        }
         // The only inputs we want to navigate between using arrow keys are the radios
         // ignore the keydown event if it is not on a radio button
         if (!inputTypes.has('radio') ||
@@ -307,7 +319,16 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     async present() {
         const unlock = await this.lockController.lock();
         await this.delegateController.attachViewToDom();
-        await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
+        await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation).then(() => {
+            var _a, _b;
+            if (this.buttons.length === 1 && this.inputs.length === 0) {
+                const queryBtn = (_a = this.wrapperEl) === null || _a === void 0 ? void 0 : _a.querySelector('.alert-button');
+                queryBtn.focus();
+            }
+            else {
+                (_b = this.wrapperEl) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        });
         unlock();
     }
     /**
@@ -481,8 +502,8 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
         const mode = getIonMode(this);
         const hdrId = `alert-${overlayIndex}-hdr`;
-        const subHdrId = `alert-${overlayIndex}-sub-hdr`;
         const msgId = `alert-${overlayIndex}-msg`;
+        const subHdrId = `alert-${overlayIndex}-sub-hdr`;
         const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';
         /**
          * Use both the header and subHeader ids if they are defined.
@@ -491,9 +512,9 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, Object.assign({ key: 'ad7e14b4f92a09387aa80abfb718a755e4e889d6', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, { key: '212b5dc1949c63210c9d135afbe7fe31a16b5638', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '4b4693dca3c910aa9a61c4d90295d785ec6cbe3d', tappable: this.backdropDismiss }), h("div", { key: '64fd19b8f1d8246dcc869053f858bc33506def4b', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'e61ba6f339c3a02cecd37d8b641ee5043018eb29', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '044e00667ffcb74aa2c5e0d0b42669c4004dbb4f', class: "alert-head" }, header && (h("h2", { key: '1aaae8d58722c4cf5debb1f00415ab7ed0a52bbd', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '9c9854dc3b0ad40f1861a49b76d5636afcae9c74', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '19aaca9912f77cde4ae8079be210eda697ed8de1', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'a85d27c516f7cdbc85b19f40d2f0bd865490b6a7', tabindex: "0", "aria-hidden": "true" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: 'ac8351d14850884a4f6865bbf32fb271592eedd9', tappable: this.backdropDismiss }), h("div", { key: 'f677da8e719dfef9db8acbfd4fa14b936efb2cd7', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '00124f7eda90b905c7161af00c25129e6232e387', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '441b12e462a6ac83f29e251bea60d4dac273c6f8', class: "alert-head" }, header && (h("h2", { key: 'd7f185ec5ba61519cd2e5c84ccb884fc711754bf', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '8477b1979d040ffbce7b4396b57d5fd197b116a7', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'ccb22f664465077be6e5f59c1541c13d8071cc30', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '33d5f68cb7a0989ecd1bd0abf110b94947e5b091', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/helpers.js

@@ -358,5 +358,15 @@ const shallowEqualStringMap = (map1, map2) => {
     }
     return true;
 };
+const getNextSiblingOfType = (element) => {
+    let sibling = element.nextSibling;
+    while (sibling) {
+        if (sibling.nodeType === Node.ELEMENT_NODE && sibling !== null) {
+            return sibling;
+        }
+        sibling = sibling.nextSibling;
+    }
+    return null;
+};
 
-export { addEventListener as a, removeEventListener as b, componentOnReady as c, inheritAttributes as d, renderHiddenInput as e, focusVisibleElement as f, getElementRoot as g, hasShadowDom as h, inheritAriaAttributes as i, hasLazyBuild as j, clamp as k, debounceEvent as l, isEndSide as m, assert as n, debounce as o, pointerCoord as p, raf as r, shallowEqualStringMap as s, transitionEndAsync as t };
+export { addEventListener as a, removeEventListener as b, componentOnReady as c, inheritAttributes as d, renderHiddenInput as e, focusVisibleElement as f, getElementRoot as g, hasShadowDom as h, inheritAriaAttributes as i, hasLazyBuild as j, clamp as k, debounceEvent as l, isEndSide as m, assert as n, debounce as o, getNextSiblingOfType as p, pointerCoord as q, raf as r, shallowEqualStringMap as s, transitionEndAsync as t };

package/components/index9.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { d as doc } from './index5.js';
-import { p as pointerCoord } from './helpers.js';
+import { q as pointerCoord } from './helpers.js';
 
 const startTapClick = (config) => {
     if (doc === undefined) {

package/components/ion-segment-button.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { a as addEventListener, b as removeEventListener, d as inheritAttributes } from './helpers.js';
+import { a as addEventListener, b as removeEventListener, d as inheritAttributes, p as getNextSiblingOfType } from './helpers.js';
 import { h as hostContext } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
 import { d as defineCustomElement$2 } from './ripple-effect.js';
@@ -43,7 +43,35 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
     valueChanged() {
         this.updateState();
     }
-    connectedCallback() {
+    waitForSegmentContent(ionSegment, contentId) {
+        return new Promise((resolve, reject) => {
+            let timeoutId = undefined;
+            let animationFrameId;
+            const check = () => {
+                if (!ionSegment) {
+                    reject(new Error(`Segment not found when looking for Segment Content`));
+                    return;
+                }
+                const segmentView = getNextSiblingOfType(ionSegment); // Skip the text nodes
+                const segmentContent = segmentView === null || segmentView === void 0 ? void 0 : segmentView.querySelector(`ion-segment-content[id="${contentId}"]`);
+                if (segmentContent && timeoutId) {
+                    clearTimeout(timeoutId); // Clear the timeout if the segmentContent is found
+                    cancelAnimationFrame(animationFrameId);
+                    resolve(segmentContent);
+                }
+                else {
+                    animationFrameId = requestAnimationFrame(check); // Keep checking on the next animation frame
+                }
+            };
+            check();
+            // Set a timeout to reject the promise
+            timeoutId = setTimeout(() => {
+                cancelAnimationFrame(animationFrameId);
+                reject(new Error(`Unable to find Segment Content with id="${contentId} within 1000 ms`));
+            }, 1000);
+        });
+    }
+    async connectedCallback() {
         const segmentEl = (this.segmentEl = this.el.closest('ion-segment'));
         if (segmentEl) {
             this.updateState();
@@ -53,11 +81,14 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
         // Return if there is no contentId defined
         if (!this.contentId)
             return;
-        // Attempt to find the Segment Content by its contentId
-        const segmentContent = document.getElementById(this.contentId);
-        // If no associated Segment Content exists, log an error and return
-        if (!segmentContent) {
-            console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+        let segmentContent;
+        try {
+            // Attempt to find the Segment Content by its contentId
+            segmentContent = await this.waitForSegmentContent(segmentEl, this.contentId);
+        }
+        catch (error) {
+            // If no associated Segment Content exists, log an error and return
+            console.error('Segment Button: ', error.message);
             return;
         }
         // Ensure the found element is a valid ION-SEGMENT-CONTENT
@@ -103,7 +134,7 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: 'd50a5d5e2f6206e8523598f258d8217d2903f69b', class: {
+        return (h(Host, { key: 'f9da656c8eccb80e4ef30e3fa977f2dbbefbc988', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -119,7 +150,7 @@ const SegmentButton = /*@__PURE__*/ proxyCustomElement(class SegmentButton exten
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: 'b4f6f145286ba8ab79669e11035b906daa85ae7e', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '67965996c9ffe70553875e00d3da0ae5b2b1d814', class: "button-inner" }, h("slot", { key: '5087988fe45a8fdf388ec44c395d0b745b207806' })), mode === 'md' && h("ion-ripple-effect", { key: 'b24858de0750bbc769b3183fac0077dfe817ba27' })), h("div", { key: '97b4359432acd1c9da0816360cd1df9472e183f7', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: '0561738ea15b0986f4ed3d8276d5e6f2d13f7e51', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("button", Object.assign({ key: '00dbcdbd81cd74abdd39803f6840a6e477cc7b0c', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '5200c082a9c4788010c4fc33fe75e2b2ad28364a', class: "button-inner" }, h("slot", { key: 'cf3fce2b5d22436b84cd4367a5885df7d6a2715f' })), mode === 'md' && h("ion-ripple-effect", { key: 'f1a2816465f4c2c06644be07315bff2da77e2342' })), h("div", { key: 'aaf31c0ed39641fca698ee98d0773131f4eea6bd', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, h("div", { key: 'fc556651361b7ac305aaedd25ea4afe3173abd20', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ripple-effect.js

@@ -78,12 +78,10 @@ const RippleEffect = /*@__PURE__*/ proxyCustomElement(class RippleEffect extends
         "addRipple": [64]
     }]);
 const removeRipple = (ripple) => {
-    if (!ripple.parentNode)
-        return;
     ripple.classList.add('fade-out');
-    ripple.addEventListener('transitionend', () => {
+    setTimeout(() => {
         ripple.remove();
-    }, { once: true });
+    }, 200);
 };
 const PADDING = 10;
 const INITIAL_ORIGIN_SCALE = 0.5;

package/dist/cjs/{framework-delegate-55f5683a.js → framework-delegate-05579976.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 
 // TODO(FW-2832): types
 const attachComponent = async (delegate, container, component, cssClasses, componentProps, inline) => {

package/dist/cjs/{helpers-afaa9001.js → helpers-4be3f90d.js}

@@ -360,6 +360,16 @@ const shallowEqualStringMap = (map1, map2) => {
     }
     return true;
 };
+const getNextSiblingOfType = (element) => {
+    let sibling = element.nextSibling;
+    while (sibling) {
+        if (sibling.nodeType === Node.ELEMENT_NODE && sibling !== null) {
+            return sibling;
+        }
+        sibling = sibling.nextSibling;
+    }
+    return null;
+};
 
 exports.addEventListener = addEventListener;
 exports.assert = assert;
@@ -369,6 +379,7 @@ exports.debounce = debounce;
 exports.debounceEvent = debounceEvent;
 exports.focusVisibleElement = focusVisibleElement;
 exports.getElementRoot = getElementRoot;
+exports.getNextSiblingOfType = getNextSiblingOfType;
 exports.hasLazyBuild = hasLazyBuild;
 exports.hasShadowDom = hasShadowDom;
 exports.inheritAriaAttributes = inheritAriaAttributes;

package/dist/cjs/{index-8e789962.js → index-1ae3f40a.js}

@@ -6,7 +6,7 @@
 const index$1 = require('./index-c8d52405.js');
 const hardwareBackButton = require('./hardware-back-button-9e8a2c4f.js');
 const index = require('./index-5915f9b3.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const animation = require('./animation-b4fdf128.js');
 

package/dist/cjs/{index-f05acd21.js → index-4e14a46e.js}

@@ -6,7 +6,7 @@
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const index$1 = require('./index-73f75efb.js');
 const index = require('./index-5915f9b3.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
@@ -122,8 +122,8 @@ const createFocusController = () => {
 };
 const LAST_FOCUS = 'ion-last-focus';
 
-const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-cf40433b.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-ededf99f.js'); });
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-afdec89f.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-9f0d3db5.js'); });
 const focusController = createFocusController();
 // TODO(FW-2832): types
 const transition = (opts) => {

package/dist/cjs/{index-9509ecad.js → index-ad7a712e.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 
 const startTapClick = (config) => {
     if (index.doc === undefined) {

package/dist/cjs/{index-5b6a7459.js → index-c441c903.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const index = require('./index-5915f9b3.js');
 
 const ION_CONTENT_TAG_NAME = 'ION-CONTENT';

package/dist/cjs/index.cjs.js

@@ -6,23 +6,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const animation = require('./animation-b4fdf128.js');
-const index = require('./index-f05acd21.js');
-const ios_transition = require('./ios.transition-cf40433b.js');
-const md_transition = require('./md.transition-ededf99f.js');
+const index = require('./index-4e14a46e.js');
+const ios_transition = require('./ios.transition-afdec89f.js');
+const md_transition = require('./md.transition-9f0d3db5.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
 const index$1 = require('./index-ee07ed59.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const config = require('./config-4f60b98a.js');
 const theme = require('./theme-d1c573d2.js');
-const index$2 = require('./index-8e789962.js');
-const overlays = require('./overlays-aa669eb8.js');
+const index$2 = require('./index-1ae3f40a.js');
+const overlays = require('./overlays-76b29cd4.js');
 require('./index-c8d52405.js');
 require('./index-73f75efb.js');
 require('./index-5915f9b3.js');
 require('./gesture-controller-9436f482.js');
 require('./hardware-back-button-9e8a2c4f.js');
-require('./framework-delegate-55f5683a.js');
+require('./framework-delegate-05579976.js');
 
 const IonicSlides = (opts) => {
     const { swiper, extendParams } = opts;

package/dist/cjs/{input-shims-9e59ef62.js → input-shims-e748a364.js}

@@ -4,8 +4,8 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const index$1 = require('./index-5b6a7459.js');
-const helpers = require('./helpers-afaa9001.js');
+const index$1 = require('./index-c441c903.js');
+const helpers = require('./helpers-4be3f90d.js');
 const keyboard = require('./keyboard-0272231f.js');
 require('./index-5915f9b3.js');
 require('./capacitor-c04564bf.js');

package/dist/cjs/{input.utils-611cde0b.js → input.utils-74e4ec28.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const index$1 = require('./index-5915f9b3.js');
 
 /**

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const index$1 = require('./index-073c7cdc.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const index$2 = require('./index-5915f9b3.js');

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

@@ -7,9 +7,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
 const buttonActive = require('./button-active-3f2f60b4.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-76b29cd4.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const animation = require('./animation-b4fdf128.js');
@@ -19,7 +19,7 @@ require('./index-c8d52405.js');
 require('./index-ee07ed59.js');
 require('./gesture-controller-9436f482.js');
 require('./hardware-back-button-9e8a2c4f.js');
-require('./framework-delegate-55f5683a.js');
+require('./framework-delegate-05579976.js');
 require('./index-5915f9b3.js');
 
 /**

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

@@ -8,9 +8,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-73f75efb.js');
 const config = require('./config-4f60b98a.js');
 const buttonActive = require('./button-active-3f2f60b4.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-76b29cd4.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const animation = require('./animation-b4fdf128.js');
@@ -20,7 +20,7 @@ require('./index-c8d52405.js');
 require('./index-ee07ed59.js');
 require('./gesture-controller-9436f482.js');
 require('./hardware-back-button-9e8a2c4f.js');
-require('./framework-delegate-55f5683a.js');
+require('./framework-delegate-05579976.js');
 require('./index-5915f9b3.js');
 
 /**
@@ -176,6 +176,7 @@ const Alert = class {
         }
     }
     onKeydown(ev) {
+        var _a;
         const inputTypes = new Set(this.processedInputs.map((i) => i.type));
         /**
          * Based on keyboard navigation requirements, the
@@ -185,6 +186,17 @@ const Alert = class {
             ev.preventDefault();
             return;
         }
+        /**
+         * Ensure when alert container is being focused, and the user presses the tab + shift keys, the focus will be set to the last alert button.
+         */
+        if (ev.target.classList.contains('alert-wrapper')) {
+            if (ev.key === 'Tab' && ev.shiftKey) {
+                ev.preventDefault();
+                const lastChildBtn = (_a = this.wrapperEl) === null || _a === void 0 ? void 0 : _a.querySelector('.alert-button:last-child');
+                lastChildBtn.focus();
+                return;
+            }
+        }
         // The only inputs we want to navigate between using arrow keys are the radios
         // ignore the keydown event if it is not on a radio button
         if (!inputTypes.has('radio') ||
@@ -316,7 +328,16 @@ const Alert = class {
     async present() {
         const unlock = await this.lockController.lock();
         await this.delegateController.attachViewToDom();
-        await overlays.present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
+        await overlays.present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation).then(() => {
+            var _a, _b;
+            if (this.buttons.length === 1 && this.inputs.length === 0) {
+                const queryBtn = (_a = this.wrapperEl) === null || _a === void 0 ? void 0 : _a.querySelector('.alert-button');
+                queryBtn.focus();
+            }
+            else {
+                (_b = this.wrapperEl) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        });
         unlock();
     }
     /**
@@ -490,8 +511,8 @@ const Alert = class {
         const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
         const mode = ionicGlobal.getIonMode(this);
         const hdrId = `alert-${overlayIndex}-hdr`;
-        const subHdrId = `alert-${overlayIndex}-sub-hdr`;
         const msgId = `alert-${overlayIndex}-msg`;
+        const subHdrId = `alert-${overlayIndex}-sub-hdr`;
         const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';
         /**
          * Use both the header and subHeader ids if they are defined.
@@ -500,9 +521,9 @@ const Alert = class {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (index.h(index.Host, Object.assign({ key: 'ad7e14b4f92a09387aa80abfb718a755e4e889d6', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (index.h(index.Host, { key: '212b5dc1949c63210c9d135afbe7fe31a16b5638', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '4b4693dca3c910aa9a61c4d90295d785ec6cbe3d', tappable: this.backdropDismiss }), index.h("div", { key: '64fd19b8f1d8246dcc869053f858bc33506def4b', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: 'e61ba6f339c3a02cecd37d8b641ee5043018eb29', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: '044e00667ffcb74aa2c5e0d0b42669c4004dbb4f', class: "alert-head" }, header && (index.h("h2", { key: '1aaae8d58722c4cf5debb1f00415ab7ed0a52bbd', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (index.h("h2", { key: '9c9854dc3b0ad40f1861a49b76d5636afcae9c74', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (index.h("h3", { key: '19aaca9912f77cde4ae8079be210eda697ed8de1', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), index.h("div", { key: 'a85d27c516f7cdbc85b19f40d2f0bd865490b6a7', tabindex: "0", "aria-hidden": "true" })));
+            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, index.h("ion-backdrop", { key: 'ac8351d14850884a4f6865bbf32fb271592eedd9', tappable: this.backdropDismiss }), index.h("div", { key: 'f677da8e719dfef9db8acbfd4fa14b936efb2cd7', tabindex: "0", "aria-hidden": "true" }), index.h("div", Object.assign({ key: '00124f7eda90b905c7161af00c25129e6232e387', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), index.h("div", { key: '441b12e462a6ac83f29e251bea60d4dac273c6f8', class: "alert-head" }, header && (index.h("h2", { key: 'd7f185ec5ba61519cd2e5c84ccb884fc711754bf', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (index.h("h2", { key: '8477b1979d040ffbce7b4396b57d5fd197b116a7', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (index.h("h3", { key: 'ccb22f664465077be6e5f59c1541c13d8071cc30', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), index.h("div", { key: '33d5f68cb7a0989ecd1bd0abf110b94947e5b091', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -9,15 +9,15 @@ const index = require('./index-73f75efb.js');
 const hardwareBackButton = require('./hardware-back-button-9e8a2c4f.js');
 const index$1 = require('./index-5915f9b3.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
-const index$2 = require('./index-5b6a7459.js');
+const index$2 = require('./index-c441c903.js');
 const keyboardController = require('./keyboard-controller-c05e747a.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
-const frameworkDelegate = require('./framework-delegate-55f5683a.js');
+const frameworkDelegate = require('./framework-delegate-05579976.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const index$3 = require('./index-f05acd21.js');
+const index$3 = require('./index-4e14a46e.js');
 require('./index-c8d52405.js');
 require('./keyboard-0272231f.js');
 require('./capacitor-c04564bf.js');
@@ -34,10 +34,10 @@ const App = class {
             rIC(async () => {
                 const isHybrid = ionicGlobal.isPlatform(window, 'hybrid');
                 if (!ionicGlobal.config.getBoolean('_testing')) {
-                    Promise.resolve().then(function () { return require('./index-9509ecad.js'); }).then((module) => module.startTapClick(ionicGlobal.config));
+                    Promise.resolve().then(function () { return require('./index-ad7a712e.js'); }).then((module) => module.startTapClick(ionicGlobal.config));
                 }
                 if (ionicGlobal.config.getBoolean('statusTap', isHybrid)) {
-                    Promise.resolve().then(function () { return require('./status-tap-37681226.js'); }).then((module) => module.startStatusTap());
+                    Promise.resolve().then(function () { return require('./status-tap-fb807fad.js'); }).then((module) => module.startStatusTap());
                 }
                 if (ionicGlobal.config.getBoolean('inputShims', needInputShims())) {
                     /**
@@ -45,7 +45,7 @@ const App = class {
                      * platforms proceed into this block.
                      */
                     const platform = ionicGlobal.isPlatform(window, 'ios') ? 'ios' : 'android';
-                    Promise.resolve().then(function () { return require('./input-shims-9e59ef62.js'); }).then((module) => module.startInputShims(ionicGlobal.config, platform));
+                    Promise.resolve().then(function () { return require('./input-shims-e748a364.js'); }).then((module) => module.startInputShims(ionicGlobal.config, platform));
                 }
                 const hardwareBackButtonModule = await Promise.resolve().then(function () { return require('./hardware-back-button-9e8a2c4f.js'); });
                 const supportsHardwareBackButtonEvents = isHybrid || hardwareBackButton.shouldUseCloseWatcher();
@@ -1054,7 +1054,7 @@ const RouterOutlet = class {
                 this.swipeHandler.onStart();
             }
         };
-        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-0303a5e4.js'); })).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
+        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-47a52b83.js'); })).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
             if (this.ani) {
                 this.ani.onFinish(() => {
                     this.gestureOrAnimationInProgress = false;

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const theme = require('./theme-d1c573d2.js');
 const index$1 = require('./index-073c7cdc.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const theme = require('./theme-d1c573d2.js');
 const index$1 = require('./index-073c7cdc.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const index$1 = require('./index-5915f9b3.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const index$1 = require('./index-5915f9b3.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-73f75efb.js');
 const focusVisible = require('./focus-visible-7a0ce04f.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const index = require('./index-5915f9b3.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
@@ -15,12 +15,12 @@ const index$2 = require('./index-073c7cdc.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 const data = require('./data-21dc0f81.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-76b29cd4.js');
 const animation = require('./animation-b4fdf128.js');
 const haptic = require('./haptic-f6b37aa3.js');
 require('./index-c8d52405.js');
 require('./hardware-back-button-9e8a2c4f.js');
-require('./framework-delegate-55f5683a.js');
+require('./framework-delegate-05579976.js');
 require('./gesture-controller-9436f482.js');
 require('./capacitor-c04564bf.js');
 

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const theme = require('./theme-d1c573d2.js');
 const index$1 = require('./index-073c7cdc.js');
 

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-73f75efb.js');
-const helpers = require('./helpers-afaa9001.js');
+const helpers = require('./helpers-4be3f90d.js');
 const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
 
 const imgCss = ":host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}";