@ionic/core 8.8.11 → 8.8.12-dev.11781793379.156d3260

package/dist/cjs/overlay-control-label-DnRLQR1t.js

@@ -0,0 +1,52 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+// TODO(FW-6886, FW-6892, FW-6891): Remove this file in favor of the Modular Ionic component config. Each overlay will be able to select its own defaults for label placement and justify based on the interface and theme, so this utility will no longer be necessary.
+/**
+ * Returns the default `labelPlacement` for a radio or checkbox option
+ * rendered inside an overlay. Defaults follow each theme's established
+ * option-row layout:
+ * - `ionic`: always `"start"`.
+ * - `ios`: `"start"` for radio in `alert` and `popover`. The `modal`
+ *   interface flips iOS radio back to `"end"`. Checkbox is always
+ *   `"end"` on iOS.
+ * - everything else (e.g. `md`): `"end"`.
+ *
+ * `interfaceType` is optional; only `"modal"` changes the result, so
+ * callers that aren't a modal can omit it.
+ *
+ * Used by `alert`, `select-popover`, and `select-modal` as the fallback
+ * when an option doesn't explicitly set `labelPlacement`.
+ */
+const getOverlayLabelPlacement = (theme, control, interfaceType) => {
+    if (theme === 'ionic' || (theme === 'ios' && control === 'radio' && interfaceType !== 'modal')) {
+        return 'start';
+    }
+    return 'end';
+};
+/**
+ * Returns the default `justify` for a radio or checkbox option rendered
+ * inside an overlay. Defaults follow each theme's option-row layout:
+ * - `ionic`: always `"space-between"`.
+ * - `ios`: `"space-between"` for radio in `alert` and `popover`. The
+ *   `modal` interface falls back to `"start"`. Checkbox is always `"start"`
+ *   on iOS.
+ * - everything else (e.g. `md`): `"start"`.
+ *
+ * `interfaceType` is optional; only `"modal"` changes the result, so
+ * callers that aren't a modal can omit it.
+ *
+ * Used by `alert`, `select-popover`, and `select-modal` as the fallback when
+ * an option doesn't explicitly set `justify`.
+ */
+const getOverlayLabelJustify = (theme, control, interfaceType) => {
+    if (theme === 'ionic' || (theme === 'ios' && control === 'radio' && interfaceType !== 'modal')) {
+        return 'space-between';
+    }
+    return 'start';
+};
+
+exports.getOverlayLabelJustify = getOverlayLabelJustify;
+exports.getOverlayLabelPlacement = getOverlayLabelPlacement;

package/dist/cjs/{overlays-TbKsuC-K.js → overlays-xkzfBAc_.js}

@@ -3,12 +3,10 @@
  */
 'use strict';
 
-var index$1 = require('./index-DkNv4J_i.js');
-var helpers = require('./helpers-Cv23MFHM.js');
-var hardwareBackButton = require('./hardware-back-button-iUuF_76h.js');
-var index = require('./index-Ct7gcRif.js');
-var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
-var frameworkDelegate = require('./framework-delegate-BtICZDHr.js');
+var ionicGlobal = require('./ionic-global-QoUqobrQ.js');
+var helpers = require('./helpers-DiOgV5hw.js');
+var index = require('./index-GZU9YrFc.js');
+var frameworkDelegate = require('./framework-delegate-DC5nq_NN.js');
 var gestureController = require('./gesture-controller-dtqlP_q4.js');
 
 /**
@@ -23,7 +21,7 @@ var gestureController = require('./gesture-controller-dtqlP_q4.js');
  * Note: We need this distinction because `disabled="false"` is
  * valid usage for the disabled property on ion-button.
  */
-const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
 /**
  * Focuses the first descendant in a context
  * that can receive focus. If none exists,
@@ -75,7 +73,18 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
     const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
-        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
+        const innerFocusable = shadowRoot.querySelector(focusableQueryString);
+        // If the host has a setFocus() method, use it to delegate focus properly.
+        // This is needed for shadow DOM components like ion-textarea that override
+        // focus() to delegate to their inner native elements.
+        const hasSetFocus = typeof hostToFocus.setFocus === 'function';
+        if (innerFocusable && hasSetFocus) {
+            // Keep the host element so we can call setFocus() on it
+            elementToFocus = hostToFocus;
+        }
+        else {
+            elementToFocus = innerFocusable || hostToFocus;
+        }
     }
     if (elementToFocus) {
         const radioGroup = elementToFocus.closest('ion-radio-group');
@@ -95,8 +104,115 @@ 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';
 /**
- * Determines if the overlay's backdrop is always blocking (no background interaction).
+ * The focus trap is generic and knows nothing about which components are
+ * inside an overlay. Components mark their elements with these `data-*`
+ * attributes, which the trap reads, to control how Tab moves through them.
+ * This keeps private component class names (e.g. `.modal-handle`,
+ * `.action-sheet-button`) out of the trap, so changing a component does
+ *  not silently break Tab order.
+ *
+ * - `data-focus-ignore`: skip this element as a tab stop.
+ * - `data-focus-order`: explicit numeric placement in the tab sequence.
+ * - `data-roving-focus`: a container whose focusable descendants share a
+ *   single tab stop via a roving tabindex.
+ */
+const FOCUS_IGNORE_SELECTOR = '[data-focus-ignore]';
+const FOCUS_ORDER_SELECTOR = '[data-focus-order]';
+const ROVING_FOCUS_SELECTOR = '[data-roving-focus]';
+/**
+ * Returns the roving-focus group an element belongs to, or `null`.
+ * A member is a descendant of a `[data-roving-focus]` container. The
+ * container itself is not a member. Members share a single tab stop.
+ */
+const getRovingFocusGroup = (el) => {
+    const group = el.closest(ROVING_FOCUS_SELECTOR);
+    return group !== null && group !== el ? group : null;
+};
+/**
+ * Whether an element participates in a roving-focus group.
+ */
+const isRovingFocusItem = (el) => getRovingFocusGroup(el) !== null;
+/**
+ * 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 roving-focus host (e.g. `ion-radio` inside an
+ * `ion-radio-group`, or an action sheet `<button role="radio">`).
+ */
+const getRovingFocusHost = (active) => {
+    let n = active;
+    while (n) {
+        if (isRovingFocusItem(n)) {
+            return n;
+        }
+        const root = n.getRootNode();
+        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+            n = root.host;
+        }
+        else {
+            return null;
+        }
+    }
+    return null;
+};
+/**
+ * Reorders focusables for components that declare an explicit tab order
+ * via `data-focus-order`. Elements without the attribute keep their
+ * visual order and are visited first. Elements with it are appended
+ * afterwards, sorted by ascending numeric value.
+ *
+ * Example (sheet modal): the options have no order and are visited
+ * first in visual order, then the drag handle (`data-focus-order="1"`),
+ * then the header Cancel button (`data-focus-order="2"`).
+ */
+const applyFocusOrder = (elements) => {
+    const sortByVisualPosition = (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 unordered = elements.filter((el) => !el.matches(FOCUS_ORDER_SELECTOR));
+    const ordered = elements
+        .filter((el) => el.matches(FOCUS_ORDER_SELECTOR))
+        .sort((a, b) => Number(a.getAttribute('data-focus-order')) - Number(b.getAttribute('data-focus-order')));
+    return [...sortByVisualPosition(unordered), ...ordered];
+};
+/**
+ * Roving-focus members use a tabindex pattern where only one member is
+ * tabbable (`tabIndex="0"`) while the others are not (`tabIndex="-1"`).
+ * This returns the index of the current tabbable member.
+ */
+const getTabbableRovingFocusIndex = (elements, overlay) => {
+    return elements.findIndex((el) => {
+        return overlay.contains(el) && isRovingFocusItem(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) => {
@@ -217,7 +333,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.
@@ -400,11 +516,181 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
+        /**
+         * Remember which roving-focus member last received focus
+         * (arrows, click, or Tab). A roving group keeps `tabIndex=0` on a
+         * single member (e.g. the checked/first radio), so the Tab trap
+         * uses this when wrapping back into the group or focusing its slot.
+         */
+        doc.addEventListener('focusin', (ev) => {
+            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS)) {
+                return;
+            }
+            const target = ev.target;
+            if (!(target instanceof HTMLElement)) {
+                return;
+            }
+            const rovingHost = getRovingFocusHost(target);
+            if (rovingHost && lastOverlay.contains(rovingHost)) {
+                lastOverlay.trapLastRovingFocus = rovingHost;
+            }
+        }, 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.
+        // It also ensures proper focus delegation for shadow DOM elements
+        // like ion-textarea.
+        doc.addEventListener('keydown', (ev) => {
+            var _a, _b, _c;
+            if (ev.key !== 'Tab' && ev.key !== 'Alt+Tab')
+                return;
+            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS))
+                return;
+            const activeElement = getActiveElement(doc);
+            if (activeElement === lastOverlay) {
+                ev.preventDefault();
+                focusFirstDescendant(lastOverlay);
+                return;
+            }
+            // Check if activeElement is inside the overlay (including shadow DOM)
+            const isInsideOverlay = activeElement
+                ? lastOverlay.contains(activeElement) ||
+                    (activeElement.getRootNode() instanceof ShadowRoot &&
+                        lastOverlay.contains(activeElement.getRootNode().host)) ||
+                    ((_b = (_a = lastOverlay.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) !== null && _b !== void 0 ? _b : false)
+                : false;
+            if (!isInsideOverlay)
+                return;
+            // Get all focusable elements from both light and shadow DOM
+            let allFocusable = [
+                ...lastOverlay.querySelectorAll(focusableQueryString),
+                ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
+            ];
+            /**
+             * Some elements match `focusableQueryString` but are not
+             * intended tab stops (e.g. the `ion-item` wrappers a select
+             * modal renders around its options). Components opt these out
+             * with `data-focus-ignore` so Tab can move between the real
+             * controls.
+             */
+            allFocusable = allFocusable.filter((el) => !el.matches(FOCUS_IGNORE_SELECTOR));
+            /**
+             * A roving-focus group is a single tab stop: only its currently
+             * tabbable member (`tabIndex >= 0`) participates. Other
+             * focusables inside the group are not independent tab stops —
+             * this includes inactive members and focusable wrappers such as
+             * the `ion-item` that carries `ion-focusable` on behalf of a
+             * radio. Drop them so Tab moves between the group and the
+             * surrounding controls (e.g. the handle), not into the wrappers.
+             */
+            allFocusable = allFocusable.filter((el) => !isRovingFocusItem(el) || el.tabIndex >= 0);
+            /**
+             * When a component declares an explicit tab order via
+             * `data-focus-order` (e.g. a sheet modal's handle and Cancel
+             * button), reorder accordingly. Overlays that declare no order
+             * keep their DOM order.
+             */
+            if (allFocusable.some((el) => el.matches(FOCUS_ORDER_SELECTOR))) {
+                allFocusable = applyFocusOrder(allFocusable);
+            }
+            if (allFocusable.length === 0) {
+                ev.preventDefault();
+                return;
+            }
+            // Find current element's index (accounting for shadow DOM)
+            let currentIndex = activeElement
+                ? allFocusable.findIndex((el) => {
+                    var _a;
+                    if (el === activeElement)
+                        return true;
+                    if ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement))
+                        return true;
+                    const rootNode = activeElement.getRootNode();
+                    return rootNode instanceof ShadowRoot && rootNode.host === el;
+                })
+                : -1;
+            /**
+             * A roving-focus group keeps `tabIndex=0` on a single member
+             * while the others are `-1`. Arrow keys can move focus onto a
+             * `tabIndex=-1` member, which `focusableQueryString` excludes,
+             * so `findIndex` yields -1 and Tab would wrap to
+             * `allFocusable[0]`. Treat focus on any group member as the
+             * group's tabbable slot so Tab goes to the next control (e.g.
+             * handle → Cancel), not back to the first member.
+             */
+            if (currentIndex < 0 && activeElement) {
+                const rovingHost = getRovingFocusHost(activeElement);
+                if (rovingHost && lastOverlay.contains(rovingHost)) {
+                    const directIndex = allFocusable.indexOf(rovingHost);
+                    if (directIndex >= 0) {
+                        currentIndex = directIndex;
+                    }
+                    else {
+                        const tabbableIndex = getTabbableRovingFocusIndex(allFocusable, lastOverlay);
+                        if (tabbableIndex >= 0) {
+                            currentIndex = tabbableIndex;
+                        }
+                    }
+                }
+            }
+            ev.preventDefault();
+            // Helper to focus an element, handling shadow DOM properly
+            const focusElement = (element) => {
+                const shadowRoot = element.shadowRoot;
+                if (shadowRoot) {
+                    const innerFocusable = shadowRoot.querySelector(focusableQueryString);
+                    if (innerFocusable && typeof element.setFocus !== 'function') {
+                        helpers.focusVisibleElement(innerFocusable);
+                        return;
+                    }
+                }
+                helpers.focusVisibleElement(element);
+            };
+            let nextIndex;
+            if (ev.shiftKey) {
+                // Shift+Tab: previous element, wrap to last if at first
+                if (currentIndex <= 0) {
+                    nextIndex = allFocusable.length - 1;
+                }
+                else {
+                    nextIndex = currentIndex - 1;
+                }
+            }
+            else {
+                // Tab: next element, wrap to first if at last
+                if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
+                    nextIndex = 0;
+                }
+                else {
+                    nextIndex = currentIndex + 1;
+                }
+            }
+            const nextEl = allFocusable[nextIndex];
+            const overlayTrap = lastOverlay;
+            const tabbableRovingIndex = getTabbableRovingFocusIndex(allFocusable, lastOverlay);
+            /**
+             * The trap list only includes one tabbable member of a roving
+             * group (`tabIndex >= 0`), usually the checked/first radio.
+             * `focusin` tracks the real last-focused member. Use it whenever
+             * Tab would focus that slot (wrap from Cancel, Shift+Tab from
+             * handle, etc.).
+             */
+            let focusTarget = nextEl;
+            if (tabbableRovingIndex >= 0 && nextIndex === tabbableRovingIndex) {
+                const saved = overlayTrap.trapLastRovingFocus;
+                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) => {
             const lastOverlay = getPresentedOverlay(doc);
             if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
-                ev.detail.register(hardwareBackButton.OVERLAY_BACK_BUTTON_PRIORITY, () => {
+                ev.detail.register(ionicGlobal.OVERLAY_BACK_BUTTON_PRIORITY, () => {
                     /**
                      * Do not return this promise otherwise
                      * the hardware back button utility will
@@ -427,7 +713,7 @@ const connectListeners = (doc) => {
          * this behavior will be handled via the ionBackButton
          * event.
          */
-        if (!hardwareBackButton.shouldUseCloseWatcher()) {
+        if (!ionicGlobal.shouldUseCloseWatcher()) {
             doc.addEventListener('keydown', (ev) => {
                 if (ev.key === 'Escape') {
                     const lastOverlay = getPresentedOverlay(doc);
@@ -513,7 +799,7 @@ const setRootAriaHidden = (hidden = false) => {
         viewContainer.removeAttribute('aria-hidden');
     }
 };
-const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
+const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, opts) => {
     var _a, _b;
     if (overlay.presented) {
         return;
@@ -561,11 +847,15 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
     }
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
+    const theme = ionicGlobal.getIonTheme(overlay);
     const mode = ionicGlobal.getIonMode(overlay);
+    const selectedAnimation = mode === 'ios'
+        ? iosEnterAnimation
+        : theme === 'ionic' && ionicEnterAnimation
+            ? ionicEnterAnimation
+            : mdEnterAnimation;
     // get the user's animation fn if one was provided
-    const animationBuilder = overlay.enterAnimation
-        ? overlay.enterAnimation
-        : index.config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
+    const animationBuilder = overlay.enterAnimation ? overlay.enterAnimation : index.config.get(name, selectedAnimation);
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
@@ -651,7 +941,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     if (!overlay.presented) {
         return false;
     }
-    const presentedOverlays = index$1.doc !== undefined ? getPresentedOverlays(index$1.doc) : [];
+    const presentedOverlays = ionicGlobal.doc !== undefined ? getPresentedOverlays(ionicGlobal.doc) : [];
     /**
      * For accessibility, toasts lack focus traps and don't receive
      * `aria-hidden` on the root element when presented.
@@ -720,7 +1010,8 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     return true;
 };
 const getAppRoot = (doc) => {
-    return doc.querySelector('ion-app') || doc.body;
+    const appRootSelector = index.config.get('appRootSelector', 'ion-app');
+    return doc.querySelector(appRootSelector) || doc.body;
 };
 const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     // Make overlay visible in case it's hidden

package/dist/cjs/select-option-render-8XQ4CgCm.js

@@ -0,0 +1,116 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+var index = require('./index-GZU9YrFc.js');
+var index$1 = require('./index-CzFol6Yk.js');
+
+/**
+ * Converts a DOM node into a Stencil VNode (or text string) so the
+ * resulting tree is rendered through the component's normal render
+ * path. Rendering through Stencil ensures that scoped CSS classes
+ * (e.g. `sc-ion-action-sheet-ionic`) are applied to every element.
+ *
+ * Highly recommended to pre-sanitize the source DOM (see
+ * `getOptionContent` in select.tsx). This function performs pure
+ * structural conversion — no security filtering.
+ *
+ * Preserves attributes only — properties set imperatively on the source
+ * element (e.g. `input.value` after a user types) won't carry through.
+ * In practice this isn't a concern: interactive controls shouldn't
+ * appear in select-option rich content since they'd nest inside the
+ * overlay's button/radio/checkbox wrapper, which is invalid HTML and
+ * an accessibility issue.
+ *
+ * @param node - The DOM node to convert. Text nodes become strings,
+ * element nodes become VNodes, and any other node types are skipped.
+ * @param keyPrefix - String prefix used to build a stable VNode key,
+ * so Stencil's diff can preserve elements across re-renders.
+ * @param index - Position of this node among its siblings. Combined
+ * with `keyPrefix` to form the final unique key.
+ * @returns The converted VNode, a text string, or `null` if the node
+ * type isn't supported.
+ *
+ * @internal Exported only so it can be unit tested; not part of the
+ * public API.
+ */
+const cloneToVNode = (node, keyPrefix, index$1) => {
+    var _a;
+    if (node.nodeType === Node.TEXT_NODE) {
+        return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+        return null;
+    }
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    const key = `${keyPrefix}-${index$1}`;
+    const attrs = { key };
+    for (let i = 0; i < el.attributes.length; i++) {
+        const attr = el.attributes.item(i);
+        attrs[attr.name] = attr.value;
+    }
+    const children = Array.from(el.childNodes)
+        .map((child, i) => cloneToVNode(child, key, i))
+        .filter((c) => c !== null);
+    return index.h(tag, attrs, children);
+};
+/**
+ * Renders cloned DOM content as Stencil JSX. Walking the source DOM
+ * into VNodes (rather than injecting it via innerHTML) keeps the
+ * content inside Stencil's render path, so scoped CSS classes are
+ * applied automatically and component attributes like `size` or
+ * `color` survive intact.
+ *
+ * Span elements should be used when this content renders within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param id - Unique identifier for generating stable virtual DOM keys.
+ * @param content - The HTMLElement container whose child nodes will be cloned.
+ * @param className - CSS class applied to the wrapper element.
+ * @param useSpan - Whether to use a span element instead of a div for the wrapper.
+ */
+const renderClonedContent = (id, content, className, useSpan = false) => {
+    const Tag = useSpan ? 'span' : 'div';
+    const keyPrefix = `${className}-${id}`;
+    index$1.sanitizeDOMTree(content);
+    return (index.h(Tag, { class: className, key: keyPrefix }, Array.from(content.childNodes).map((child, i) => cloneToVNode(child, keyPrefix, i))));
+};
+/**
+ * Renders the label content for a select option within an overlay
+ * interface based on the presence of rich content.
+ *
+ * Span elements should be used when this content renders within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param option - The content option data containing label, slots,
+ * and description.
+ * @param className - The base CSS class for the label element.
+ * @param useSpan - Whether to use a span element instead of a div for the label.
+ */
+const renderOptionLabel = (option, className, useSpan = false) => {
+    const { id, label, startContent, endContent, description } = option;
+    const hasRichContent = !!startContent || !!endContent || !!description;
+    const Tag = useSpan ? 'span' : 'div';
+    // Render simple string label if there is no rich content to display
+    if (!hasRichContent && (typeof label === 'string' || !label)) {
+        return (index.h(Tag, { class: className, key: `${className}-${id}` }, label));
+    }
+    // Render the main label
+    const labelEl = typeof label === 'string' || !label ? (
+    // Label is a simple string or undefined
+    index.h(Tag, { key: `${className}-label-${id}` }, label)) : (
+    // Label is an HTMLElement with potential rich content
+    renderClonedContent(id, label, `${className}-text`, useSpan));
+    // No rich content, render just the label
+    if (!hasRichContent) {
+        return (index.h(Tag, { class: className, key: `${className}-${id}` }, labelEl));
+    }
+    // Render label with rich content (start, end, description)
+    return (index.h(Tag, { class: `${className} ${className}-has-rich-content`, key: `${className}-${id}` }, startContent && renderClonedContent(id, startContent, 'select-option-start', useSpan), index.h(Tag, { class: "select-option-content", key: `${className}-content-${id}` }, labelEl, description && (index.h(Tag, { class: "select-option-description", key: `${className}-desc-${id}` }, description))), endContent && renderClonedContent(id, endContent, 'select-option-end', useSpan)));
+};
+
+exports.renderOptionLabel = renderOptionLabel;

package/dist/cjs/{status-tap-BXX8H8_Y.js → status-tap-x2qDo5QR.js}

@@ -3,9 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-Ct7gcRif.js');
-var index$1 = require('./index-CIrkNXqJ.js');
-var helpers = require('./helpers-Cv23MFHM.js');
+var index = require('./index-GZU9YrFc.js');
+var index$1 = require('./index-BxEZd5IE.js');
+var helpers = require('./helpers-DiOgV5hw.js');
+require('./focus-visible-BIj-I3-C.js');
 
 const startStatusTap = () => {
     const win = window;

package/dist/cjs/{swipe-back-C0GCB18x.js → swipe-back-CvZt_4YX.js}

@@ -3,10 +3,11 @@
  */
 'use strict';
 
-var helpers = require('./helpers-Cv23MFHM.js');
+var helpers = require('./helpers-DiOgV5hw.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var index = require('./index-CAvQ7Tka.js');
-require('./index-Ct7gcRif.js');
+require('./focus-visible-BIj-I3-C.js');
+require('./index-GZU9YrFc.js');
 require('./gesture-controller-dtqlP_q4.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {

package/dist/cjs/{theme-CeDs6Hcv.js → theme-IlOsGAz7.js}

@@ -3,8 +3,32 @@
  */
 'use strict';
 
+/**
+ * Checks if an element has a parent matching the specified selector.
+ * This handles an element in both light DOM and shadow DOM contexts.
+ * @param selector The parent selector to check for (e.g., 'ion-datetime'
+ * or 'ion-toolbar[color]').
+ * @param el The element to check.
+ * @returns `true` if the element has a parent matching the specified selector,
+ * `false` otherwise.
+ */
 const hostContext = (selector, el) => {
-    return el.closest(selector) !== null;
+    // Check the light DOM first
+    if (el.closest(selector) !== null) {
+        return true;
+    }
+    // For attribute or class selectors (e.g., 'ion-toolbar[color]' or
+    // 'ion-toolbar.ion-color') we can only check light DOM since tagName
+    // doesn't include attributes or classes.
+    if (selector.includes('[') || selector.includes('.')) {
+        return false;
+    }
+    // Check the shadow DOM by looking at the shadow root host and
+    // converting the selector to uppercase to compare with tagName
+    const upperCaseTagName = selector.toUpperCase();
+    const rootNode = el.getRootNode();
+    const shadowHost = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    return (shadowHost === null || shadowHost === void 0 ? void 0 : shadowHost.tagName) === upperCaseTagName;
 };
 /**
  * Create the mode and color classes for the component based on the classes passed in