@ionic/core 8.8.7-dev.11779385275.161a641b → 8.8.7-dev.11779467048.1641d05e

package/dist/cjs/{overlays-Hci_7vw_.js → overlays-C54DhaTC.js}

@@ -104,8 +104,101 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
 let lastOverlayIndex = 0;
 let lastId = 0;
 const activeAnimations = new WeakMap();
+const OVERLAY_FOCUS_TRAP_SELECTOR = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover';
+const ION_SELECT_MODAL_SELECTOR = 'ion-select-modal';
+const isSelectModalOptionControl = (el) => el.tagName === 'ION-RADIO' || el.tagName === 'ION-CHECKBOX';
 /**
- * Determines if the overlay's backdrop is always blocking (no background interaction).
+ * Returns the currently focused element for keyboard focus checks.
+ *
+ * Starts from `document.activeElement` (non-shadow / light DOM focus).
+ * If focus is inside one or more open shadow roots
+ * (e.g. native control inside `ion-radio`), walks through nested
+ * `shadowRoot.activeElement` values until the innermost focused node is reached.
+ */
+const getActiveElement = (ownerDoc) => {
+    var _a;
+    let active = ownerDoc.activeElement;
+    if (!active) {
+        return null;
+    }
+    while ((_a = active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+        active = active.shadowRoot.activeElement;
+    }
+    return active;
+};
+/**
+ * Walks from a focused node (possibly deep inside shadow roots)
+ * up to the nearest `ion-radio` / `ion-checkbox` host.
+ */
+const getOptionControlHost = (active) => {
+    let n = active;
+    while (n) {
+        if (isSelectModalOptionControl(n)) {
+            return n;
+        }
+        const root = n.getRootNode();
+        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+            n = root.host;
+        }
+        else {
+            return null;
+        }
+    }
+    return null;
+};
+/**
+ * Sheet modals can have visual order that differs from DOM order.
+ * Without sorting, Tab can skip the handle after option traversal.
+ *
+ * Order: option controls (radio/checkbox) → sheet handle → end-slot
+ * header button. Any other focusables are appended after.
+ */
+const sortSheetModalFocusables = (overlay, elements) => {
+    const optionControls = elements.filter((el) => {
+        return overlay.contains(el) && isSelectModalOptionControl(el) && el.tabIndex >= 0;
+    });
+    const cancelControl = elements.find((el) => overlay.contains(el) &&
+        el.tagName === 'ION-BUTTON' &&
+        el.closest('ion-header ion-buttons[slot="end"]') !== null);
+    const handleControl = elements.find((el) => el.classList.contains('modal-handle'));
+    const sortByGeometry = (els) => [...els].sort((a, b) => {
+        const ra = a.getBoundingClientRect();
+        const rb = b.getBoundingClientRect();
+        const topDiff = ra.top - rb.top;
+        if (Math.abs(topDiff) > 1) {
+            return topDiff;
+        }
+        return ra.left - rb.left;
+    });
+    const ordered = [];
+    ordered.push(...sortByGeometry(optionControls));
+    if (handleControl) {
+        ordered.push(handleControl);
+    }
+    if (cancelControl) {
+        ordered.push(cancelControl);
+    }
+    const used = new Set(ordered);
+    for (const el of elements) {
+        if (!used.has(el)) {
+            ordered.push(el);
+        }
+    }
+    return ordered;
+};
+/**
+ * Option controls in groups use a tabindex pattern where only one
+ * option is tabbable (`tabIndex="0"`) while the others are `-1`.
+ * This returns the index of that current tabbable option.
+ */
+const getTabbableOptionControlIndex = (elements, overlay) => {
+    return elements.findIndex((el) => {
+        return overlay.contains(el) && isSelectModalOptionControl(el) && el.tabIndex >= 0;
+    });
+};
+/**
+ * Determines if the overlay's backdrop is always blocking
+ * (no background interaction).
  * Returns false if showBackdrop=false or backdropBreakpoint > 0.
  */
 const isBackdropAlwaysBlocking = (el) => {
@@ -226,7 +319,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -409,6 +502,30 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
+        /**
+         * Remember which option control last received focus
+         * (arrows, click, or Tab). This pattern keeps `tabIndex=0` on the
+         * checked/first radio, so the Tab trap uses this when wrapping back
+         * into the list or focusing the option-group slot.
+         */
+        doc.addEventListener('focusin', (ev) => {
+            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS)) {
+                return;
+            }
+            const isSheetModal = lastOverlay.classList.contains('modal-sheet');
+            if (!isSheetModal) {
+                return;
+            }
+            const target = ev.target;
+            if (!(target instanceof HTMLElement)) {
+                return;
+            }
+            const optionHost = getOptionControlHost(target);
+            if (optionHost && lastOverlay.contains(optionHost)) {
+                lastOverlay.trapLastSheetOptionControl = optionHost;
+            }
+        }, true);
         // Listen for keydown events to intercept Tab navigation.
         // This is needed for Safari and Firefox which may skip focusable
         // elements or allow focus to escape the overlay.
@@ -418,10 +535,10 @@ const connectListeners = (doc) => {
             var _a, _b, _c;
             if (ev.key !== 'Tab' && ev.key !== 'Alt+Tab')
                 return;
-            const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
             if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS))
                 return;
-            const activeElement = doc.activeElement;
+            const activeElement = getActiveElement(doc);
             if (activeElement === lastOverlay) {
                 ev.preventDefault();
                 focusFirstDescendant(lastOverlay);
@@ -437,16 +554,32 @@ const connectListeners = (doc) => {
             if (!isInsideOverlay)
                 return;
             // Get all focusable elements from both light and shadow DOM
-            const allFocusable = [
+            let allFocusable = [
                 ...lastOverlay.querySelectorAll(focusableQueryString),
                 ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
             ];
+            const selectModalEl = lastOverlay.querySelector(ION_SELECT_MODAL_SELECTOR);
+            const isSheetModal = lastOverlay.classList.contains('modal-sheet');
+            /**
+             * Some sheet modal content, including ion-select-modal,
+             * renders option containers as `ion-item.select-interface-option`.
+             * These can match focusable selectors in some builds but
+             * are not intended tab stops. Keep only true interactive
+             * controls so Tab can move from options to header
+             * controls/handle.
+             */
+            if (selectModalEl) {
+                allFocusable = allFocusable.filter((el) => !el.matches('ion-item.select-interface-option'));
+            }
+            if (isSheetModal) {
+                allFocusable = sortSheetModalFocusables(lastOverlay, allFocusable);
+            }
             if (allFocusable.length === 0) {
                 ev.preventDefault();
                 return;
             }
             // Find current element's index (accounting for shadow DOM)
-            const currentIndex = activeElement
+            let currentIndex = activeElement
                 ? allFocusable.findIndex((el) => {
                     var _a;
                     if (el === activeElement)
@@ -457,6 +590,31 @@ const connectListeners = (doc) => {
                     return rootNode instanceof ShadowRoot && rootNode.host === el;
                 })
                 : -1;
+            /**
+             * Radio/checkbox groups can move focus onto an option with
+             * `tabIndex=-1`, while another option still has `tabIndex=0`
+             * in the list. `findIndex` then yields -1 and Tab incorrectly
+             * wraps to `allFocusable[0]`.
+             * Treat focus on any option control inside the sheet modal
+             * as the same trap slot as the listed tabbable option
+             * (`tabIndex >= 0`) so Tab goes handle → Cancel, not back
+             * to the first radio.
+             */
+            if (currentIndex < 0 && isSheetModal && activeElement) {
+                const optionHost = getOptionControlHost(activeElement);
+                if (optionHost && lastOverlay.contains(optionHost)) {
+                    const directIndex = allFocusable.indexOf(optionHost);
+                    if (directIndex >= 0) {
+                        currentIndex = directIndex;
+                    }
+                    else {
+                        const tabbableOptionIndex = getTabbableOptionControlIndex(allFocusable, lastOverlay);
+                        if (tabbableOptionIndex >= 0) {
+                            currentIndex = tabbableOptionIndex;
+                        }
+                    }
+                }
+            }
             ev.preventDefault();
             // Helper to focus an element, handling shadow DOM properly
             const focusElement = (element) => {
@@ -470,24 +628,43 @@ const connectListeners = (doc) => {
                 }
                 helpers.focusVisibleElement(element);
             };
+            let nextIndex;
             if (ev.shiftKey) {
                 // Shift+Tab: previous element, wrap to last if at first
                 if (currentIndex <= 0) {
-                    focusLastDescendant(lastOverlay);
+                    nextIndex = allFocusable.length - 1;
                 }
                 else {
-                    focusElement(allFocusable[currentIndex - 1]);
+                    nextIndex = currentIndex - 1;
                 }
             }
             else {
                 // Tab: next element, wrap to first if at last
                 if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
-                    focusFirstDescendant(lastOverlay);
+                    nextIndex = 0;
                 }
                 else {
-                    focusElement(allFocusable[currentIndex + 1]);
+                    nextIndex = currentIndex + 1;
+                }
+            }
+            const nextEl = allFocusable[nextIndex];
+            const overlayTrap = lastOverlay;
+            const tabbableOptionIndex = isSheetModal ? getTabbableOptionControlIndex(allFocusable, lastOverlay) : -1;
+            /**
+             * The trap list only includes one tabbable option host
+             * (`tabIndex >= 0`), usually the checked/first radio.
+             * `focusin` tracks the real last-focused option; use it
+             * whenever Tab would focus that slot (wrap from Cancel,
+             * Shift+Tab from handle, etc.).
+             */
+            let focusTarget = nextEl;
+            if (isSheetModal && tabbableOptionIndex >= 0 && nextIndex === tabbableOptionIndex) {
+                const saved = overlayTrap.trapLastSheetOptionControl;
+                if ((saved === null || saved === void 0 ? void 0 : saved.isConnected) && lastOverlay.contains(saved) && saved !== nextEl) {
+                    focusTarget = saved;
                 }
             }
+            focusElement(focusTarget);
         }, true);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {

package/dist/collection/components/gallery/gallery.js

@@ -25,7 +25,6 @@ const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
  */
 export class Gallery {
     constructor() {
-        this.itemWrapperSelector = '[data-gallery-group]';
         // Keep track of whether we've warned about invalid columns, invalid gap,
         // and unused order properties to avoid duplicate warnings on screen resize.
         this.hasWarnedInvalidColumns = false;
@@ -80,9 +79,8 @@ export class Gallery {
             const styles = getComputedStyle(this.el);
             const rowHeight = parseFloat(styles.getPropertyValue('grid-auto-rows')) || 0;
             const rowGap = parseFloat(styles.getPropertyValue('row-gap')) || parseFloat(styles.getPropertyValue('gap')) || 0;
-            const itemGap = parseFloat(styles.getPropertyValue('column-gap')) || parseFloat(styles.getPropertyValue('gap')) || 0;
             const items = this.getItems();
-            this.layoutMasonry(items, rowHeight, rowGap, itemGap, columns);
+            this.layoutMasonry(items, rowHeight, rowGap, columns);
         };
     }
     onColumnsOrGapChanged() {
@@ -339,28 +337,12 @@ export class Gallery {
         const gap = this.getGapForWidth(width);
         this.el.style.setProperty('--internal-gallery-gap', `${gap}`);
     }
-    isGalleryItemElement(element) {
-        var _a;
-        return typeof ((_a = element.style) === null || _a === void 0 ? void 0 : _a.setProperty) === 'function';
-    }
     /**
-     * Return all gallery items that can be grid items with inline placement styles.
-     * Direct children marked with `data-gallery-group` are ignored and replaced
-     * with their element children.
+     * Return all directly slotted children of the gallery that can be grid items
+     * with inline placement styles (HTML elements and SVG elements).
      */
     getItems() {
-        const items = Array.from(this.el.children).filter((child) => this.isGalleryItemElement(child));
-        const flattenedItems = [];
-        items.forEach((itemEl) => {
-            if (!itemEl.matches(this.itemWrapperSelector)) {
-                flattenedItems.push(itemEl);
-                return;
-            }
-            itemEl.style.display = 'contents';
-            const wrappedItems = Array.from(itemEl.children).filter((child) => this.isGalleryItemElement(child));
-            flattenedItems.push(...wrappedItems);
-        });
-        return flattenedItems;
+        return Array.from(this.el.children).filter((child) => { var _a; return typeof ((_a = child.style) === null || _a === void 0 ? void 0 : _a.setProperty) === 'function'; });
     }
     /**
      * Clear the item styles for the given item element.
@@ -417,14 +399,11 @@ export class Gallery {
     /**
      * Apply masonry placement by assigning each item a column and row span.
      */
-    layoutMasonry(items, rowHeight, rowGap, itemGap, columns) {
+    layoutMasonry(items, rowHeight, rowGap, columns) {
         const columnHeights = new Array(columns).fill(0);
         const lastItemsByColumn = new Array(columns).fill(undefined);
         items.forEach((itemEl, i) => {
             itemEl.style.marginBottom = '';
-            if (itemEl.parentElement !== this.el) {
-                itemEl.style.marginBottom = `${itemGap}px`;
-            }
             const span = this.calculateRowSpan(itemEl, rowHeight, rowGap);
             if (span === undefined) {
                 this.clearItemStyles(itemEl);
@@ -473,11 +452,11 @@ export class Gallery {
         const { layout } = this;
         const order = this.getOrder();
         const theme = getIonTheme(this);
-        return (h(Host, { key: '10b550a9cc0c6b6994a86ec95bc6dbfadb3e8c58', class: {
+        return (h(Host, { key: '1bf2973d22835c0dbddf3214b602f8c08b95e421', class: {
                 [theme]: true,
                 [`gallery-layout-${layout}`]: true,
                 [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
-            } }, h("slot", { key: '1ac472f867053973aa90975cd61901a2e8ff20aa', onSlotchange: this.onSlotChange })));
+            } }, h("slot", { key: '0dea31f609f6afdb1d73ecb2d873909ffe49203f', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "ion-gallery"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/overlays.js

@@ -14,8 +14,101 @@ import { addEventListener, componentOnReady, focusVisibleElement, getElementRoot
 let lastOverlayIndex = 0;
 let lastId = 0;
 export const activeAnimations = new WeakMap();
+const OVERLAY_FOCUS_TRAP_SELECTOR = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover';
+const ION_SELECT_MODAL_SELECTOR = 'ion-select-modal';
+const isSelectModalOptionControl = (el) => el.tagName === 'ION-RADIO' || el.tagName === 'ION-CHECKBOX';
 /**
- * Determines if the overlay's backdrop is always blocking (no background interaction).
+ * Returns the currently focused element for keyboard focus checks.
+ *
+ * Starts from `document.activeElement` (non-shadow / light DOM focus).
+ * If focus is inside one or more open shadow roots
+ * (e.g. native control inside `ion-radio`), walks through nested
+ * `shadowRoot.activeElement` values until the innermost focused node is reached.
+ */
+const getActiveElement = (ownerDoc) => {
+    var _a;
+    let active = ownerDoc.activeElement;
+    if (!active) {
+        return null;
+    }
+    while ((_a = active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+        active = active.shadowRoot.activeElement;
+    }
+    return active;
+};
+/**
+ * Walks from a focused node (possibly deep inside shadow roots)
+ * up to the nearest `ion-radio` / `ion-checkbox` host.
+ */
+const getOptionControlHost = (active) => {
+    let n = active;
+    while (n) {
+        if (isSelectModalOptionControl(n)) {
+            return n;
+        }
+        const root = n.getRootNode();
+        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+            n = root.host;
+        }
+        else {
+            return null;
+        }
+    }
+    return null;
+};
+/**
+ * Sheet modals can have visual order that differs from DOM order.
+ * Without sorting, Tab can skip the handle after option traversal.
+ *
+ * Order: option controls (radio/checkbox) → sheet handle → end-slot
+ * header button. Any other focusables are appended after.
+ */
+const sortSheetModalFocusables = (overlay, elements) => {
+    const optionControls = elements.filter((el) => {
+        return overlay.contains(el) && isSelectModalOptionControl(el) && el.tabIndex >= 0;
+    });
+    const cancelControl = elements.find((el) => overlay.contains(el) &&
+        el.tagName === 'ION-BUTTON' &&
+        el.closest('ion-header ion-buttons[slot="end"]') !== null);
+    const handleControl = elements.find((el) => el.classList.contains('modal-handle'));
+    const sortByGeometry = (els) => [...els].sort((a, b) => {
+        const ra = a.getBoundingClientRect();
+        const rb = b.getBoundingClientRect();
+        const topDiff = ra.top - rb.top;
+        if (Math.abs(topDiff) > 1) {
+            return topDiff;
+        }
+        return ra.left - rb.left;
+    });
+    const ordered = [];
+    ordered.push(...sortByGeometry(optionControls));
+    if (handleControl) {
+        ordered.push(handleControl);
+    }
+    if (cancelControl) {
+        ordered.push(cancelControl);
+    }
+    const used = new Set(ordered);
+    for (const el of elements) {
+        if (!used.has(el)) {
+            ordered.push(el);
+        }
+    }
+    return ordered;
+};
+/**
+ * Option controls in groups use a tabindex pattern where only one
+ * option is tabbable (`tabIndex="0"`) while the others are `-1`.
+ * This returns the index of that current tabbable option.
+ */
+const getTabbableOptionControlIndex = (elements, overlay) => {
+    return elements.findIndex((el) => {
+        return overlay.contains(el) && isSelectModalOptionControl(el) && el.tabIndex >= 0;
+    });
+};
+/**
+ * Determines if the overlay's backdrop is always blocking
+ * (no background interaction).
  * Returns false if showBackdrop=false or backdropBreakpoint > 0.
  */
 const isBackdropAlwaysBlocking = (el) => {
@@ -136,7 +229,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -319,6 +412,30 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
+        /**
+         * Remember which option control last received focus
+         * (arrows, click, or Tab). This pattern keeps `tabIndex=0` on the
+         * checked/first radio, so the Tab trap uses this when wrapping back
+         * into the list or focusing the option-group slot.
+         */
+        doc.addEventListener('focusin', (ev) => {
+            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS)) {
+                return;
+            }
+            const isSheetModal = lastOverlay.classList.contains('modal-sheet');
+            if (!isSheetModal) {
+                return;
+            }
+            const target = ev.target;
+            if (!(target instanceof HTMLElement)) {
+                return;
+            }
+            const optionHost = getOptionControlHost(target);
+            if (optionHost && lastOverlay.contains(optionHost)) {
+                lastOverlay.trapLastSheetOptionControl = optionHost;
+            }
+        }, true);
         // Listen for keydown events to intercept Tab navigation.
         // This is needed for Safari and Firefox which may skip focusable
         // elements or allow focus to escape the overlay.
@@ -328,10 +445,10 @@ const connectListeners = (doc) => {
             var _a, _b, _c;
             if (ev.key !== 'Tab' && ev.key !== 'Alt+Tab')
                 return;
-            const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
             if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS))
                 return;
-            const activeElement = doc.activeElement;
+            const activeElement = getActiveElement(doc);
             if (activeElement === lastOverlay) {
                 ev.preventDefault();
                 focusFirstDescendant(lastOverlay);
@@ -347,16 +464,32 @@ const connectListeners = (doc) => {
             if (!isInsideOverlay)
                 return;
             // Get all focusable elements from both light and shadow DOM
-            const allFocusable = [
+            let allFocusable = [
                 ...lastOverlay.querySelectorAll(focusableQueryString),
                 ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
             ];
+            const selectModalEl = lastOverlay.querySelector(ION_SELECT_MODAL_SELECTOR);
+            const isSheetModal = lastOverlay.classList.contains('modal-sheet');
+            /**
+             * Some sheet modal content, including ion-select-modal,
+             * renders option containers as `ion-item.select-interface-option`.
+             * These can match focusable selectors in some builds but
+             * are not intended tab stops. Keep only true interactive
+             * controls so Tab can move from options to header
+             * controls/handle.
+             */
+            if (selectModalEl) {
+                allFocusable = allFocusable.filter((el) => !el.matches('ion-item.select-interface-option'));
+            }
+            if (isSheetModal) {
+                allFocusable = sortSheetModalFocusables(lastOverlay, allFocusable);
+            }
             if (allFocusable.length === 0) {
                 ev.preventDefault();
                 return;
             }
             // Find current element's index (accounting for shadow DOM)
-            const currentIndex = activeElement
+            let currentIndex = activeElement
                 ? allFocusable.findIndex((el) => {
                     var _a;
                     if (el === activeElement)
@@ -367,6 +500,31 @@ const connectListeners = (doc) => {
                     return rootNode instanceof ShadowRoot && rootNode.host === el;
                 })
                 : -1;
+            /**
+             * Radio/checkbox groups can move focus onto an option with
+             * `tabIndex=-1`, while another option still has `tabIndex=0`
+             * in the list. `findIndex` then yields -1 and Tab incorrectly
+             * wraps to `allFocusable[0]`.
+             * Treat focus on any option control inside the sheet modal
+             * as the same trap slot as the listed tabbable option
+             * (`tabIndex >= 0`) so Tab goes handle → Cancel, not back
+             * to the first radio.
+             */
+            if (currentIndex < 0 && isSheetModal && activeElement) {
+                const optionHost = getOptionControlHost(activeElement);
+                if (optionHost && lastOverlay.contains(optionHost)) {
+                    const directIndex = allFocusable.indexOf(optionHost);
+                    if (directIndex >= 0) {
+                        currentIndex = directIndex;
+                    }
+                    else {
+                        const tabbableOptionIndex = getTabbableOptionControlIndex(allFocusable, lastOverlay);
+                        if (tabbableOptionIndex >= 0) {
+                            currentIndex = tabbableOptionIndex;
+                        }
+                    }
+                }
+            }
             ev.preventDefault();
             // Helper to focus an element, handling shadow DOM properly
             const focusElement = (element) => {
@@ -380,24 +538,43 @@ const connectListeners = (doc) => {
                 }
                 focusVisibleElement(element);
             };
+            let nextIndex;
             if (ev.shiftKey) {
                 // Shift+Tab: previous element, wrap to last if at first
                 if (currentIndex <= 0) {
-                    focusLastDescendant(lastOverlay);
+                    nextIndex = allFocusable.length - 1;
                 }
                 else {
-                    focusElement(allFocusable[currentIndex - 1]);
+                    nextIndex = currentIndex - 1;
                 }
             }
             else {
                 // Tab: next element, wrap to first if at last
                 if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
-                    focusFirstDescendant(lastOverlay);
+                    nextIndex = 0;
                 }
                 else {
-                    focusElement(allFocusable[currentIndex + 1]);
+                    nextIndex = currentIndex + 1;
+                }
+            }
+            const nextEl = allFocusable[nextIndex];
+            const overlayTrap = lastOverlay;
+            const tabbableOptionIndex = isSheetModal ? getTabbableOptionControlIndex(allFocusable, lastOverlay) : -1;
+            /**
+             * The trap list only includes one tabbable option host
+             * (`tabIndex >= 0`), usually the checked/first radio.
+             * `focusin` tracks the real last-focused option; use it
+             * whenever Tab would focus that slot (wrap from Cancel,
+             * Shift+Tab from handle, etc.).
+             */
+            let focusTarget = nextEl;
+            if (isSheetModal && tabbableOptionIndex >= 0 && nextIndex === tabbableOptionIndex) {
+                const saved = overlayTrap.trapLastSheetOptionControl;
+                if ((saved === null || saved === void 0 ? void 0 : saved.isConnected) && lastOverlay.contains(saved) && saved !== nextEl) {
+                    focusTarget = saved;
                 }
             }
+            focusElement(focusTarget);
         }, true);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-05-21T17:43:39",
+  "timestamp": "2026-05-22T16:26:35",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.0",

package/dist/esm/index.js

@@ -14,7 +14,7 @@ export { I as IonicSafeString } from './index-D4ugF_sT.js';
 export { g as getMode, s as setupConfig } from './config-BwKpO3Is.js';
 export { o as openURL } from './theme-DaJxRxSQ.js';
 export { m as menuController } from './index-hpH08p5s.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-rwDDzEs4.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-ttYCMKRp.js';
 import './gesture-controller-BTEOs1at.js';
 import './focus-visible-vXpMhGrs.js';
 import './framework-delegate-CjVwn_KZ.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-g6ZnZzDZ.js';
 import { r as raf } from './helpers-Do7zwvM1.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-rwDDzEs4.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-ttYCMKRp.js';
 import { r as renderOptionLabel } from './select-option-render-B2qc5ZP7.js';
 import { g as getClassMap } from './theme-DaJxRxSQ.js';
 import { b as getIonMode, c as getIonTheme } from './ionic-global-CAZb-5i-.js';

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

@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT } from './config-BwKpO3Is.js';
 import { c as createButtonActiveGesture } from './button-active-g6ZnZzDZ.js';
 import { r as raf } from './helpers-Do7zwvM1.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-rwDDzEs4.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-ttYCMKRp.js';
 import { s as sanitizeDOMString } from './index-D4ugF_sT.js';
 import { r as renderOptionLabel } from './select-option-render-B2qc5ZP7.js';
 import { g as getClassMap } from './theme-DaJxRxSQ.js';

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

@@ -6,7 +6,7 @@ import { c as caretLeftSvg } from './caret-left-fIOYmaqA.js';
 import { c as caretRightSvg } from './caret-right-BYSs-jZz.js';
 import { startFocusVisible } from './focus-visible-vXpMhGrs.js';
 import { r as raf, g as getElementRoot, a as renderHiddenInput, e as clamp } from './helpers-Do7zwvM1.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-rwDDzEs4.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-ttYCMKRp.js';
 import { i as isRTL } from './dir-C53feagD.js';
 import { c as createColorClasses, g as getClassMap } from './theme-DaJxRxSQ.js';
 import { o as chevronForward, c as chevronBack, p as caretDownSharp, q as caretUpSharp, l as chevronDown } from './index-D2tu5BUg.js';