@ionic/core 8.8.7-dev.11779400352.127ba526 → 8.8.7-dev.11779467048.1641d05e

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-21T21:54:43",
+  "timestamp": "2026-05-22T16:26:35",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.0",
@@ -14469,90 +14469,6 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
-    {
-      "filePath": "src/components/gallery-item/gallery-item.tsx",
-      "encapsulation": "shadow",
-      "tag": "ion-gallery-item",
-      "docs": "",
-      "docsTags": [
-        {
-          "name": "virtualProp",
-          "text": "{\"ios\" | \"md\"} mode - The mode determines the platform behaviors of the component."
-        },
-        {
-          "name": "virtualProp",
-          "text": "{\"ios\" | \"md\" | \"ionic\"} theme - The theme determines the visual appearance of the component."
-        },
-        {
-          "name": "slot",
-          "text": "- Wrap elements that should be grouped in an `ion-gallery`."
-        }
-      ],
-      "usage": {},
-      "props": [
-        {
-          "name": "mode",
-          "type": "\"ios\" | \"md\"",
-          "mutable": false,
-          "attr": "mode",
-          "reflectToAttr": false,
-          "docs": "The mode determines the platform behaviors of the component.",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "ios",
-              "type": "string"
-            },
-            {
-              "value": "md",
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
-        {
-          "name": "theme",
-          "type": "\"ios\" | \"md\" | \"ionic\"",
-          "mutable": false,
-          "attr": "theme",
-          "reflectToAttr": false,
-          "docs": "The theme determines the visual appearance of the component.",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "ios",
-              "type": "string"
-            },
-            {
-              "value": "md",
-              "type": "string"
-            },
-            {
-              "value": "ionic",
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [
-        {
-          "name": "",
-          "docs": "Wrap elements that should be grouped in an `ion-gallery`."
-        }
-      ],
-      "parts": [],
-      "states": [],
-      "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
-    },
     {
       "filePath": "src/components/grid/grid.tsx",
       "encapsulation": "shadow",

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-app_8.entry.js

@@ -1066,7 +1066,7 @@ const Header = class {
         const isCondensed = collapse === 'condense';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, theme);
-        return (h(Host, Object.assign({ key: '3395dedfd5165ba6e9f3ad1a25f0bb5b3678704a', role: roleType, class: {
+        return (h(Host, Object.assign({ key: 'b43e5f542bdcec5e94c299556183cf6d9d673438', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -1074,7 +1074,7 @@ const Header = class {
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'cafeb88b6e73d64b264514ea46590fd3477b3052', class: "header-background" }), h("slot", { key: 'ad681aaf866d7e7a5e5e731c0b5d6f5cc9fe94d2' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'fd9938f02edd38e1afc83025373ec0aec5633711', class: "header-background" }), h("slot", { key: '900aaa7da5d6f08e6f94b128fa065348d595159e' })));
     }
     get el() { return getElement(this); }
 };
@@ -1261,7 +1261,7 @@ const RouterOutlet = class {
         return true;
     }
     render() {
-        return h("slot", { key: '56e3d06ed939755796058e30ef19fbc7f7cb490d' });
+        return h("slot", { key: 'f59dfdc11831ed91f5f7d8147cdc14f3c07bc289' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1301,11 +1301,11 @@ const ToolbarTitle = class {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: 'd64e86bed418cba707d4a26c9274f18ed06c0e9e', class: createColorClasses(this.color, {
+        return (h(Host, { key: '87bb5264f4c13d0d6eeef874ed114539d0b59062', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '386a71e974cde0bfbf5b655d69ed5f718de8ce48', class: "toolbar-title" }, h("slot", { key: '8aa804c9e1b11574a42268805d3117a085e699b4' }))));
+            }) }, h("div", { key: '75f2ddfaf693ffdec13d909eefdb09b441d76e80', class: "toolbar-title" }, h("slot", { key: '00539af5e250bee78fdd1c55f2ecdc8e53bc18b0' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1551,11 +1551,11 @@ const Toolbar = class {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (h(Host, { key: 'bcb621674157410d7eaeb006779bdd677346587e', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
+        return (h(Host, { key: '069913e9241b8e9a2dee8e7d088d181b6faeab5e', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 [`toolbar-title-placement-${titlePlacement}`]: true,
-            })), childStyles) }, h("div", { key: '0d31a98b2571b9a0ae142fbdfd83e2ebdcd8e069', class: "toolbar-background", part: "background" }), h("div", { key: 'de938534c487c6cb4060dac44b40c2d872130f50', class: "toolbar-container", part: "container" }, h("slot", { key: 'a337150d353e439eae67c31ff86e383ed51f3d8f', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '02effd3ce0cdad5ec5645fa58ccb329321449190', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: '3e22f5feda2aea02117bdea2fe8a4b8905ba82f6', class: "toolbar-content", part: "content" }, h("slot", { key: 'ebf828643ff05a8bf662a54715d21d0859168d31' })), h("slot", { key: 'a6940648dfe25a7aa8792a1bd9267437274f333c', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'afb1d61aa0e430fcf483ba482af64762474e06fe', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            })), childStyles) }, h("div", { key: '3255531be492b9afa7b47476a805f923beea09db', class: "toolbar-background", part: "background" }), h("div", { key: '8758189374c0a12f293c30ca7f8f049b732d2cab', class: "toolbar-container", part: "container" }, h("slot", { key: '74c3705f717968893bf94ea95c99cae313ce68f3', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '298c78f93291442f140f8c52983871215f20ea87', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'f7376320b704b8ce375fe2223ae30d51bfc05acb', class: "toolbar-content", part: "content" }, h("slot", { key: 'ddaec08b1fbd13384d834ba4c3b4441c4d749faf' })), h("slot", { key: '6d5bce85159859bb548e4d3fb6b22208dcb48987', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'd1d21752ed3bcc7bf15c20de1c0a6fd956373450', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -159,9 +159,9 @@ const Thumbnail = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'fdf9d92949a1e8cf6faded77ffed084f74fc040b', class: {
+        return (h(Host, { key: '2fb4e6f9f650badf2bc492fc4b1c43cad64141c0', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'e1b1439c035d9a9503efd1c1a04aed9f4e8e0af7' })));
+            } }, h("slot", { key: 'ea18f4572b2b019af3470c6bdb7915d4a5dd84bb' })));
     }
 };
 Thumbnail.style = thumbnailCss();

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

@@ -126,10 +126,10 @@ const Grid = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'e3320fc2fc5391d26898cc119505cd3be30dd48b', class: {
+        return (h(Host, { key: '43b4e05ef076160d901c70dc37e177f19b524349', class: {
                 [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '2000e6b336c294aadf4585269c301d734d2fe478' })));
+            } }, h("slot", { key: 'f3805936034708e6783223ded72c0ecfd40e5fb0' })));
     }
 };
 Grid.style = gridCss();
@@ -142,9 +142,9 @@ const Row = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '3a3c40062d2d0487c61dedbb172215b87bb425b1', class: {
+        return (h(Host, { key: '64ff6346d95be8d99d6500a6263067081f3fe254', class: {
                 [theme]: true,
-            } }, h("slot", { key: '164f457f6f7853ed8f7279d20bc6ede6cf9d3e5c' })));
+            } }, h("slot", { key: 'e9b4c111f3a49515a721bf679ef2f1a039c9822a' })));
     }
 };
 Row.style = rowCss();

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';
@@ -2309,11 +2309,11 @@ const Picker = class {
     render() {
         const { htmlAttributes } = this;
         const theme = getIonTheme(this);
-        return (h(Host, Object.assign({ key: '681ad6d20efa16f1d6c6f9a7d03caec2b17ff36e', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'b0c1fc8eee284f03c696f0c8aaa29f4a6d7be0be', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [theme]: true,
                 // Used internally for styling
-                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '6dc71805810955048479c2a6eddce2303161cb8f', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '0e61724c261c9d69ba23d3cb9064018942755033', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a6ca79c9a5fce42b5aad6808802535c723f27fb9', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '7651cbe9d723bba032788d85711e0f7c1dc32c21', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'd6b83aded670bc74515c337c038503e396ab42cc', class: "picker-columns" }, h("div", { key: '1dfef6ed386d7b327dc19397cc9f01c3938fbab9', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'ec8b2f4de073a245f8917a494a681adf5d1f94f6', class: "picker-below-highlight" }))), h("div", { key: '8557ce93083feefa5deb6097270d756424f89ab2', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'b56a9f94c7a95efc047d7be95e76ba3a2284801d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'f134d49a3afcfd2a809147b55949cea43fc34462', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '9ae98dc10164e182a13eaef2105894a717a03cc4', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '96acad60c1214e13098282182fa855b19f0a386c', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'af26cd644ed9bb50c22f06624da3726e7e60426f', class: "picker-columns" }, h("div", { key: 'c0d8bf724f7dc081c314bef61fa08894a75c657b', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '7315333742b5b0c9533f30e5ce3dfc6ec9112dc1', class: "picker-below-highlight" }))), h("div", { key: '454546aaf27319ae7973e74063c0a026cfc88834', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -2671,9 +2671,9 @@ const PickerColumnCmp = class {
     render() {
         const col = this.col;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'aed1c1a702e03765d704f6f563fe26df58e68bbf', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: '5751788e3b7ecd2fe269c096db883b0681646270', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: 'a6fae778eec5d57dba4b36b3e448c5c12fe0688b', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '1b77354fe5eeeeb4db94fab035a9ef5e45d695ac', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '105286ef7ba6eac0796f5af7d6f1daef7107444a', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: '833f3309c8c77e1faa773f7eaa066516dfd51067', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: 'a39f38e60938e70425e4d7674f5e481885b6b548', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: 'a2f1e0eab834c85e84cee0a716eb1083aa6c7741', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {