@ionic/core 8.7.12-dev.11765060985.14ad27fb → 8.7.12-dev.11765231260.1def96ab

package/dist/collection/components/modal/modal.js

@@ -463,13 +463,7 @@ export class Modal {
             };
             window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
         }
-        /**
-         * Recalculate isSheetModal because framework bindings (e.g., Angular)
-         * may not have been applied when componentWillLoad ran.
-         */
-        const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
-        this.isSheetModal = isSheetModal;
-        if (isSheetModal) {
+        if (this.isSheetModal) {
             this.initSheetGesture();
         }
         else if (hasCardModal) {
@@ -551,79 +545,6 @@ export class Modal {
         this.gesture = gesture;
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
         this.gesture.enable(true);
-        /**
-         * When backdrop interaction is allowed, nested router outlets from child routes
-         * may block pointer events to parent content. Apply passthrough styles only when
-         * the modal was the sole content of a child route page.
-         * See https://github.com/ionic-team/ionic-framework/issues/30700
-         */
-        const backdropNotBlocking = this.showBackdrop === false || this.focusTrap === false || backdropBreakpoint > 0;
-        if (backdropNotBlocking) {
-            this.setupChildRoutePassthrough();
-        }
-    }
-    /**
-     * For sheet modals that allow background interaction, sets up pointer-events
-     * passthrough on child route page wrappers and nested router outlets.
-     */
-    setupChildRoutePassthrough() {
-        var _a;
-        const pageParent = this.getOriginalPageParent();
-        // Skip ion-app (controller modals) and pages with other content (inline modals)
-        if (!pageParent || pageParent.tagName === 'ION-APP') {
-            return;
-        }
-        const hasVisibleContent = Array.from(pageParent.children).some((child) => {
-            var _a;
-            if (child === this.el)
-                return false;
-            if (child instanceof HTMLElement && window.getComputedStyle(child).display === 'none')
-                return false;
-            if (child.tagName === 'TEMPLATE' || child.tagName === 'SLOT')
-                return false;
-            if (child.nodeType === Node.TEXT_NODE && !((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()))
-                return false;
-            return true;
-        });
-        if (hasVisibleContent) {
-            return;
-        }
-        // Child route case: page only contained the modal
-        pageParent.classList.add('ion-page-overlay-passthrough');
-        // Also make nested router outlets passthrough
-        const routerOutlet = pageParent.parentElement;
-        if ((routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.tagName) === 'ION-ROUTER-OUTLET' && ((_a = routerOutlet.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) !== 'ION-APP') {
-            routerOutlet.style.setProperty('pointer-events', 'none');
-            routerOutlet.setAttribute('data-overlay-passthrough', 'true');
-        }
-    }
-    /**
-     * Finds the ion-page ancestor of the modal's original parent location.
-     */
-    getOriginalPageParent() {
-        if (!this.cachedOriginalParent) {
-            return null;
-        }
-        let pageParent = this.cachedOriginalParent;
-        while (pageParent && !pageParent.classList.contains('ion-page')) {
-            pageParent = pageParent.parentElement;
-        }
-        return pageParent;
-    }
-    /**
-     * Removes passthrough styles added by setupChildRoutePassthrough.
-     */
-    cleanupChildRoutePassthrough() {
-        const pageParent = this.getOriginalPageParent();
-        if (!pageParent) {
-            return;
-        }
-        pageParent.classList.remove('ion-page-overlay-passthrough');
-        const routerOutlet = pageParent.parentElement;
-        if (routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.hasAttribute('data-overlay-passthrough')) {
-            routerOutlet.style.removeProperty('pointer-events');
-            routerOutlet.removeAttribute('data-overlay-passthrough');
-        }
     }
     sheetOnDismiss() {
         /**
@@ -713,7 +634,6 @@ export class Modal {
             }
             this.cleanupViewTransitionListener();
             this.cleanupParentRemovalObserver();
-            this.cleanupChildRoutePassthrough();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -918,6 +838,17 @@ export class Modal {
             this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
             return;
         }
+        /**
+         * Don't observe for controller-based modals or when the parent is the
+         * app root (document.body or ion-app). These parents won't be removed,
+         * and observing document.body with subtree: true causes performance
+         * issues with frameworks like Angular during change detection.
+         */
+        if (this.hasController ||
+            this.cachedOriginalParent === document.body ||
+            this.cachedOriginalParent.tagName === 'ION-APP') {
+            return;
+        }
         this.parentRemovalObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
@@ -959,20 +890,20 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '880d34a27983dde27c81a06bfed390bf38e43244', "no-router": true,
+        return (h(Host, Object.assign({ key: '5d8261a1a174d83642c0f7f2aa4f6c265f50fa57', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'c674d142ace2b3e5bd38b302cf2984fc3fac11c8', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'ce83713b57960d354935ef8e65251892ed9d4e3b', class: "modal-shadow" }), h("div", Object.assign({ key: '67c001e824f5c31eb58053eea71c884817479896',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'bc165dd344e752c13076ca5ae37ea7d68d618d55', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '4a2f6edaeeec2978f0cd7b2b93a44c2f0da3ab54', class: "modal-shadow" }), h("div", Object.assign({ key: '13d662aa50871e97567270dbbce6825633c62bad',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '9263cbb0c5f550ef463b72446c21379ccaf0ccdd', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'e678cd3c64a0ab56636f68f9fa416741589f783c', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '3ef07e617f2b1d46fca6a00b40119c35bff4215a', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '1ebc3549c5c67ea286384b9917ed4dd8958ea2ae', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -1531,7 +1462,6 @@ export class Modal {
     }
     static get states() {
         return {
-            "isSheetModal": {},
             "presented": {}
         };
     }

package/dist/collection/components/select/select.js

@@ -395,13 +395,18 @@ export class Select {
                 .filter((cls) => cls !== 'hydrated')
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
+            const isSelected = isOptionSelected(selectValue, value, this.compareWith);
             return {
-                role: isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : '',
+                role: isSelected ? 'selected' : '',
                 text: option.textContent,
                 cssClass: optClass,
                 handler: () => {
                     this.setValue(value);
                 },
+                htmlAttributes: {
+                    'aria-checked': isSelected ? 'true' : 'false',
+                    role: 'radio',
+                },
             };
         });
         // Add "cancel" button
@@ -828,7 +833,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '35b5e18e6f79a802ff2d46d1242e80ff755cc0b9', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd8026835993d0e6dce747098f741a06ae4e4f54d', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -846,7 +851,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '6005b34a0c50bc4d7653a4276bc232ecd02e083c', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'c7e07aa81ae856c057f16275dd058f37c5670a47', class: "select-wrapper-inner" }, h("slot", { key: '7fc2deefe0424404caacdbbd9e08ed43ba55d28a', name: "start" }), h("div", { key: '157d74ee717b1bc30b5f1c233a09b0c8456aa68e', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'ea66db304528b82bf9317730b6dce3db2612f235', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '786eb1530b7476f0615d4e7c0bf4e7e4dc66509c', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'fcfb40209d6d07d49c7fdca4884b31abf6ac2567', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'f191664f2290c3890bde1156157c83a6ff17dbe2', class: "select-wrapper-inner" }, h("slot", { key: '317a28d1115b4214f291e228ce0fe6fc782e57d5', name: "start" }), h("div", { key: 'db68e18abd5ca3a1023d7c7b58bf89893ae18073', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '4274e042267c2234a198b0f65c89477898d08130', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '2e2eb1ee2b2791e0683d9afb186fde6e938ca59c', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/overlays.js

@@ -423,7 +423,7 @@ export const setRootAriaHidden = (hidden = false) => {
     }
 };
 export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (overlay.presented) {
         return;
     }
@@ -457,10 +457,9 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
      */
     const overlayEl = overlay.el;
     const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
-    // Only lock out root content when backdrop is always active. Developers relying on
-    // showBackdrop=false or backdropBreakpoint expect background interaction at some point.
-    const backdropAlwaysActive = overlayEl.showBackdrop !== false && !(((_a = overlayEl.backdropBreakpoint) !== null && _a !== void 0 ? _a : 0) > 0);
-    const shouldLockRoot = shouldTrapFocus && backdropAlwaysActive;
+    // Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
+    // expect background interaction to remain enabled.
+    const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
     overlay.presented = true;
     overlay.willPresent.emit();
     if (shouldLockRoot) {
@@ -472,7 +471,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         }
         document.body.classList.add(BACKDROP_NO_SCROLL);
     }
-    (_b = overlay.willPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
+    (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
     const mode = getIonMode(overlay);
     // get the user's animation fn if one was provided
     const animationBuilder = overlay.enterAnimation
@@ -481,7 +480,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
-        (_c = overlay.didPresentShorthand) === null || _c === void 0 ? void 0 : _c.emit();
+        (_b = overlay.didPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
     }
     /**
      * If the focused element is already
@@ -559,7 +558,7 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
@@ -575,14 +574,11 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
      * is dismissed.
      */
     const overlaysLockingRoot = presentedOverlays.filter((o) => {
-        var _a;
         const el = o;
-        const backdropAlwaysActive = el.showBackdrop !== false && !(((_a = el.backdropBreakpoint) !== null && _a !== void 0 ? _a : 0) > 0);
-        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && backdropAlwaysActive;
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
     });
     const overlayEl = overlay.el;
-    const backdropAlwaysActive = overlayEl.showBackdrop !== false && !(((_a = overlayEl.backdropBreakpoint) !== null && _a !== void 0 ? _a : 0) > 0);
-    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && backdropAlwaysActive;
+    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
     /**
      * If this is the last visible overlay that is trapping focus
      * then we want to re-add the root to the accessibility tree.
@@ -597,7 +593,7 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
         // Overlay contents should not be clickable during dismiss
         overlay.el.style.setProperty('pointer-events', 'none');
         overlay.willDismiss.emit({ data, role });
-        (_b = overlay.willDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
+        (_a = overlay.willDismissShorthand) === null || _a === void 0 ? void 0 : _a.emit({ data, role });
         const mode = getIonMode(overlay);
         const animationBuilder = overlay.leaveAnimation
             ? overlay.leaveAnimation
@@ -607,7 +603,7 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
             await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
         }
         overlay.didDismiss.emit({ data, role });
-        (_c = overlay.didDismissShorthand) === null || _c === void 0 ? void 0 : _c.emit({ data, role });
+        (_b = overlay.didDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
         // Get a reference to all animations currently assigned to this overlay
         // Then tear them down to return the overlay to its initial visual state
         const animations = activeAnimations.get(overlay) || [];

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-06T22:44:54",
+  "timestamp": "2025-12-08T22:02:42",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",
@@ -1188,7 +1188,13 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "keydown",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [
         {
           "name": "--backdrop-opacity",
@@ -1485,15 +1491,15 @@
         "ion-select"
       ],
       "dependencies": [
-        "ion-backdrop",
         "ion-icon",
-        "ion-ripple-effect"
+        "ion-ripple-effect",
+        "ion-backdrop"
       ],
       "dependencyGraph": {
         "ion-action-sheet": [
-          "ion-backdrop",
           "ion-icon",
-          "ion-ripple-effect"
+          "ion-ripple-effect",
+          "ion-backdrop"
         ],
         "ion-select": [
           "ion-action-sheet"
@@ -31731,9 +31737,9 @@
           "ion-backdrop"
         ],
         "ion-action-sheet": [
-          "ion-backdrop",
           "ion-icon",
-          "ion-ripple-effect"
+          "ion-ripple-effect",
+          "ion-backdrop"
         ],
         "ion-alert": [
           "ion-ripple-effect",

package/dist/esm/index.js

@@ -13,7 +13,7 @@ export { L as LogLevel } from './index-C8IsBmNU.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-mCdtaoPe.js';
 export { o as openURL } from './theme-DiVJyqlX.js';
 export { m as menuController } from './index-CvDIirVx.js';
-export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-DYKBVm6h.js';
+export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-BymNv-BL.js';
 import './index-ZjP4CjeZ.js';
 import './gesture-controller-BTEOs1at.js';
 import './hardware-back-button-CPLxO-Ev.js';

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

@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, a as readTask, h, d as Host, g
 import { c as createButtonActiveGesture } from './button-active-L570Swow.js';
 import { r as raf } from './helpers-DEn3pfjm.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-DYKBVm6h.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-BymNv-BL.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CDrldh-5.js';
 import { c as createAnimation } from './animation-Dt8bGnA-.js';
@@ -119,6 +119,7 @@ const ActionSheet = class {
         this.delegateController = createDelegateController(this);
         this.lockController = createLockController();
         this.triggerController = createTriggerController();
+        this.hasRadioButtons = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -163,6 +164,19 @@ const ActionSheet = class {
             }
         };
     }
+    buttonsChanged() {
+        const radioButtons = this.getRadioButtons();
+        this.hasRadioButtons = radioButtons.length > 0;
+        // Initialize activeRadioId when buttons change
+        if (this.hasRadioButtons) {
+            const checkedButton = radioButtons.find((b) => { var _a; return ((_a = b.htmlAttributes) === null || _a === void 0 ? void 0 : _a['aria-checked']) === 'true'; });
+            if (checkedButton) {
+                const allButtons = this.getButtons();
+                const checkedIndex = allButtons.indexOf(checkedButton);
+                this.activeRadioId = this.getButtonId(checkedButton, checkedIndex);
+            }
+        }
+    }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
             this.present();
@@ -243,11 +257,122 @@ const ActionSheet = class {
         }
         return true;
     }
+    /**
+     * Get all buttons regardless of role.
+     */
     getButtons() {
         return this.buttons.map((b) => {
             return typeof b === 'string' ? { text: b } : b;
         });
     }
+    /**
+     * Get all radio buttons (buttons with role="radio").
+     */
+    getRadioButtons() {
+        return this.getButtons().filter((b) => {
+            var _a;
+            const role = (_a = b.htmlAttributes) === null || _a === void 0 ? void 0 : _a.role;
+            return role === 'radio' && !isCancel(role);
+        });
+    }
+    /**
+     * Handle radio button selection and update aria-checked state.
+     *
+     * @param button The radio button that was selected.
+     */
+    selectRadioButton(button) {
+        const buttonId = this.getButtonId(button);
+        // Set the active radio ID (this will trigger a re-render and update aria-checked)
+        this.activeRadioId = buttonId;
+    }
+    /**
+     * Get or generate an ID for a button.
+     *
+     * @param button The button for which to get the ID.
+     * @param index Optional index of the button in the buttons array.
+     * @returns The ID of the button.
+     */
+    getButtonId(button, index) {
+        if (button.id) {
+            return button.id;
+        }
+        const allButtons = this.getButtons();
+        const buttonIndex = index !== undefined ? index : allButtons.indexOf(button);
+        return `action-sheet-button-${this.overlayIndex}-${buttonIndex}`;
+    }
+    /**
+     * When the action sheet has radio buttons, we want to follow the
+     * keyboard navigation pattern for radio groups:
+     * - Arrow Down/Right: Move to the next radio button (wrap to first if at end)
+     * - Arrow Up/Left: Move to the previous radio button (wrap to last if at start)
+     * - Space/Enter: Select the focused radio button and trigger its handler
+     */
+    onKeydown(ev) {
+        // Only handle keyboard navigation if we have radio buttons
+        if (!this.hasRadioButtons || !this.presented) {
+            return;
+        }
+        const target = ev.target;
+        // Ignore if the target element is not within the action sheet or not a radio button
+        if (!this.el.contains(target) ||
+            !target.classList.contains('action-sheet-button') ||
+            target.getAttribute('role') !== 'radio') {
+            return;
+        }
+        // Get all radio button elements and filter out disabled ones
+        const radios = Array.from(this.el.querySelectorAll('.action-sheet-button[role="radio"]')).filter((el) => !el.disabled);
+        const currentIndex = radios.findIndex((radio) => radio.id === target.id);
+        if (currentIndex === -1) {
+            return;
+        }
+        const allButtons = this.getButtons();
+        const radioButtons = this.getRadioButtons();
+        /**
+         * Build a map of button element IDs to their ActionSheetButton
+         * config objects.
+         * This allows us to quickly look up which button config corresponds
+         * to a DOM element when handling keyboard navigation
+         * (e.g., whenuser presses Space/Enter or arrow keys).
+         * The key is the ID that was set on the DOM element during render,
+         * and the value is the ActionSheetButton config that contains the
+         * handler and other properties.
+         */
+        const buttonIdMap = new Map();
+        radioButtons.forEach((b) => {
+            const allIndex = allButtons.indexOf(b);
+            const buttonId = this.getButtonId(b, allIndex);
+            buttonIdMap.set(buttonId, b);
+        });
+        let nextEl;
+        if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            nextEl = currentIndex === radios.length - 1 ? radios[0] : radios[currentIndex + 1];
+        }
+        else if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            nextEl = currentIndex === 0 ? radios[radios.length - 1] : radios[currentIndex - 1];
+        }
+        else if (ev.key === ' ' || ev.key === 'Enter') {
+            ev.preventDefault();
+            ev.stopPropagation();
+            const button = buttonIdMap.get(target.id);
+            if (button) {
+                this.selectRadioButton(button);
+                this.buttonClick(button);
+            }
+            return;
+        }
+        // Focus the next radio button
+        if (nextEl) {
+            const button = buttonIdMap.get(nextEl.id);
+            if (button) {
+                this.selectRadioButton(button);
+                nextEl.focus();
+            }
+        }
+    }
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
@@ -264,6 +389,8 @@ const ActionSheet = class {
         if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
             setOverlayId(this.el);
         }
+        // Initialize activeRadioId for radio buttons
+        this.buttonsChanged();
     }
     componentDidLoad() {
         /**
@@ -301,22 +428,74 @@ const ActionSheet = class {
          */
         this.triggerChanged();
     }
+    renderActionSheetButtons(filteredButtons) {
+        const mode = getIonMode(this);
+        const { activeRadioId } = this;
+        return filteredButtons.map((b, index) => {
+            var _a;
+            const isRadio = ((_a = b.htmlAttributes) === null || _a === void 0 ? void 0 : _a.role) === 'radio';
+            const buttonId = this.getButtonId(b, index);
+            const radioButtons = this.getRadioButtons();
+            const isActiveRadio = isRadio && buttonId === activeRadioId;
+            const isFirstRadio = isRadio && b === radioButtons[0];
+            // For radio buttons, set tabindex: 0 for the active one, -1 for others
+            // For non-radio buttons, use default tabindex (undefined, which means 0)
+            /**
+             * For radio buttons, set tabindex based on activeRadioId
+             * - If the button is the active radio, tabindex is 0
+             * - If no radio is active, the first radio button should have tabindex 0
+             * - All other radio buttons have tabindex -1
+             * For non-radio buttons, use default tabindex (undefined, which means 0)
+             */
+            let tabIndex;
+            if (isRadio) {
+                // Focus on the active radio button
+                if (isActiveRadio) {
+                    tabIndex = 0;
+                }
+                else if (!activeRadioId && isFirstRadio) {
+                    // No active radio, first radio gets focus
+                    tabIndex = 0;
+                }
+                else {
+                    // All other radios are not focusable
+                    tabIndex = -1;
+                }
+            }
+            else {
+                tabIndex = undefined;
+            }
+            // For radio buttons, set aria-checked based on activeRadioId
+            // Otherwise, use the value from htmlAttributes if provided
+            const htmlAttrs = Object.assign({}, b.htmlAttributes);
+            if (isRadio) {
+                htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
+            }
+            return (h("button", Object.assign({}, htmlAttrs, { role: isRadio ? 'radio' : undefined, type: "button", id: buttonId, class: Object.assign(Object.assign({}, buttonClass(b)), { 'action-sheet-selected': isActiveRadio }), onClick: () => {
+                    if (isRadio) {
+                        this.selectRadioButton(b);
+                    }
+                    this.buttonClick(b);
+                }, disabled: b.disabled, tabIndex: tabIndex }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null)));
+        });
+    }
     render() {
-        const { header, htmlAttributes, overlayIndex } = this;
+        const { header, htmlAttributes, overlayIndex, hasRadioButtons } = this;
         const mode = getIonMode(this);
         const allButtons = this.getButtons();
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (h(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '173fcff5b1da7c33c267de4667591c946b8c8d03', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '81cf3f7d19864e041813987b46d2d115b8466819', tappable: this.backdropDismiss }), h("div", { key: '791c6a976683646fc306a42c15c5078b6f06a45f', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a350b489ef7852eab9dc2227ce6d92da27dd9bf9', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '69ba51ee13510c1a411d87cb4845b11b7302a36f', class: "action-sheet-container" }, h("div", { key: 'bded15b8306c36591e526f0f99e1eeabcbab3915', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '06b5147c0f6d9180fe8f12e75c9b4a0310226adc', id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '521ede659f747864f6c974e09016436eceb7158c', tappable: this.backdropDismiss }), h("div", { key: '7a7946fc434bc444f16a70638f5e948c69d33fcd', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'bcff39a580489dbafa255842e57aa8602c6d0f18', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '84bba13ce14261f0f0daa3f9c77648c9e7f36e0e', class: "action-sheet-container" }, h("div", { key: 'd9c8ac404fd6719a7adf8cb36549f67616f9a0c4', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (h("div", { key: '180433a8ad03ef5c54728a1a8f34715b6921d658', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { key: '54874362a75c679aba803bf4f8768f5404d2dd28', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '67b0de298eb424f3dea846a841b7a06d70e3930d', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'e7e3f9a5495eea9b97dbf885ef36944f2e420eff' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: 'f889d29ed6c3d14bbc1d805888351d87f5122377', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '7c05cf424b38c37fd40aaeb42a494387291571fb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'bed927b477dc2708a5123ef560274fca9819b3d6' })))))), h("div", { key: 'c5df1b11dc15a93892d57065d3dd5fbe02e43b39', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && h("div", { key: '7138e79e61b1a8f42bc5a9175c57fa2f15d7ec5a', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: 'b617c722f5b8028d73ed34b69310f312c65f34a7', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'd0dd876fc48815df3710413c201c0b445a8e16c0' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: 'e7b960157cc6fc5fe92a12090b2be55e8ae072e4', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '05498ffc60cab911dbff0ecbc6168dea59ada9a5', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '3d401346cea301be4ca03671f7370f6f4b0b6bde' })))))), h("div", { key: '971f3c5fcc07f36c28eb469a47ec0290c692e139', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "buttons": ["buttonsChanged"],
         "isOpen": ["onIsOpenChange"],
         "trigger": ["triggerChanged"]
     }; }

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

@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
 import { c as createButtonActiveGesture } from './button-active-L570Swow.js';
 import { r as raf } from './helpers-DEn3pfjm.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-DYKBVm6h.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-BymNv-BL.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CDrldh-5.js';
 import { c as createAnimation } from './animation-Dt8bGnA-.js';

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

@@ -4,7 +4,7 @@
 import { j as printIonError, f as printIonWarning, r as registerInstance, c as createEvent, w as writeTask, h, d as Host, g as getElement } from './index-C8IsBmNU.js';
 import { startFocusVisible } from './focus-visible-BmVRXR1y.js';
 import { r as raf, g as getElementRoot, a as renderHiddenInput, e as clamp } from './helpers-DEn3pfjm.js';
-import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-DYKBVm6h.js';
+import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-BymNv-BL.js';
 import { i as isRTL } from './dir-C53feagD.js';
 import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
 import { l as chevronDown, o as caretUpSharp, p as chevronForward, q as caretDownSharp, c as chevronBack } from './index-DV3sJJW8.js';

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

@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, e as config, h, d as Host, g a
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-mCdtaoPe.js';
 import { r as raf } from './helpers-DEn3pfjm.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-DYKBVm6h.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-BymNv-BL.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CDrldh-5.js';
 import { c as createAnimation } from './animation-Dt8bGnA-.js';

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

@@ -3,7 +3,7 @@
  */
 import { r as registerInstance, c as createEvent, e as config, j as printIonError, h, d as Host, g as getElement } from './index-C8IsBmNU.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
-import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-DYKBVm6h.js';
+import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-BymNv-BL.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller-BTEOs1at.js';
 import { shouldUseCloseWatcher } from './hardware-back-button-CPLxO-Ev.js';
 import { o as isEndSide, i as inheritAriaAttributes, l as assert, e as clamp } from './helpers-DEn3pfjm.js';