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

package/hydrate/index.js

@@ -8085,8 +8085,101 @@ const CoreDelegate = () => {
 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) => {
@@ -8201,7 +8294,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.
@@ -8384,6 +8477,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.
@@ -8393,10 +8510,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);
@@ -8412,16 +8529,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)
@@ -8432,6 +8565,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) => {
@@ -8445,24 +8603,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) => {
@@ -18747,7 +18924,6 @@ const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 class Gallery {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        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;
@@ -18802,9 +18978,8 @@ 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() {
@@ -19061,28 +19236,12 @@ 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.
@@ -19139,14 +19298,11 @@ 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);
@@ -19195,11 +19351,11 @@ class Gallery {
         const { layout } = this;
         const order = this.getOrder();
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '10b550a9cc0c6b6994a86ec95bc6dbfadb3e8c58', class: {
+        return (hAsync(Host, { key: '1bf2973d22835c0dbddf3214b602f8c08b95e421', class: {
                 [theme]: true,
                 [`gallery-layout-${layout}`]: true,
                 [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
-            } }, hAsync("slot", { key: '1ac472f867053973aa90975cd61901a2e8ff20aa', onSlotchange: this.onSlotChange })));
+            } }, hAsync("slot", { key: '0dea31f609f6afdb1d73ecb2d873909ffe49203f', onSlotchange: this.onSlotChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {