@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

package/dist/esm/{overlays-COCl_nm9.js → overlays-CPmIs9Ls.js}

@@ -2,12 +2,12 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { d as doc } from './index-ZjP4CjeZ.js';
-import { n as focusVisibleElement, c as componentOnReady, g as getElementRoot, f as addEventListener, m as removeEventListener } from './helpers-DkCLSLI9.js';
-import { OVERLAY_BACK_BUTTON_PRIORITY, shouldUseCloseWatcher } from './hardware-back-button-B93Gru0Y.js';
-import { e as config, j as printIonError, f as printIonWarning } from './index-tcQvqkiX.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
-import { C as CoreDelegate } from './framework-delegate-B9yvYzqV.js';
-import { B as BACKDROP_NO_SCROLL } from './gesture-controller-BTEOs1at.js';
+import { n as focusVisibleElement, c as componentOnReady, g as getElementRoot, f as addEventListener, m as removeEventListener } from './helpers-CAGf8Wgp.js';
+import { OVERLAY_BACK_BUTTON_PRIORITY, shouldUseCloseWatcher } from './hardware-back-button-gLJHMX_F.js';
+import { e as config, j as printIonError, f as printIonWarning } from './index-ChhhtsGZ.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { C as CoreDelegate } from './framework-delegate-BHTU2Ip9.js';
+import { B as BACKDROP_NO_SCROLL } from './gesture-controller-TXPDHL13.js';
 
 /**
  * This query string selects elements that
@@ -34,7 +34,7 @@ const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not(
  */
 const focusFirstDescendant = (ref, fallbackElement) => {
     const firstInput = ref.querySelector(focusableQueryString);
-    focusElementInContext(firstInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
+    focusElementInContext(firstInput, fallbackElement ?? ref);
 };
 /**
  * Focuses the last descendant in a context
@@ -49,7 +49,7 @@ const focusFirstDescendant = (ref, fallbackElement) => {
 const focusLastDescendant = (ref, fallbackElement) => {
     const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
     const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
-    focusElementInContext(lastInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
+    focusElementInContext(lastInput, fallbackElement ?? ref);
 };
 /**
  * Focuses a particular element in a context. If the element
@@ -70,7 +70,7 @@ const focusLastDescendant = (ref, fallbackElement) => {
  */
 const focusElementInContext = (hostToFocus, fallbackElement) => {
     let elementToFocus = hostToFocus;
-    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
+    const shadowRoot = hostToFocus?.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
         elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
@@ -98,8 +98,7 @@ const activeAnimations = new WeakMap();
  * Returns false if showBackdrop=false or backdropBreakpoint > 0.
  */
 const isBackdropAlwaysBlocking = (el) => {
-    var _a;
-    return el.showBackdrop !== false && !(((_a = el.backdropBreakpoint) !== null && _a !== void 0 ? _a : 0) > 0);
+    return el.showBackdrop !== false && !((el.backdropBreakpoint ?? 0) > 0);
 };
 const createController = (tagName) => {
     return {
@@ -118,10 +117,6 @@ const alertController = /*@__PURE__*/ createController('ion-alert');
 const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 const loadingController = /*@__PURE__*/ createController('ion-loading');
 const modalController = /*@__PURE__*/ createController('ion-modal');
-/**
- * @deprecated Use the inline ion-picker component instead.
- */
-const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
 const popoverController = /*@__PURE__*/ createController('ion-popover');
 const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -161,7 +156,6 @@ const setOverlayId = (el) => {
     return el.id;
 };
 const createOverlay = (tagName, opts) => {
-    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
         return window.customElements.whenDefined(tagName).then(() => {
             const element = document.createElement(tagName);
@@ -170,7 +164,7 @@ const createOverlay = (tagName, opts) => {
              * Convert the passed in overlay options into props
              * that get passed down into the new overlay.
              */
-            Object.assign(element, Object.assign(Object.assign({}, opts), { hasController: true }));
+            Object.assign(element, { ...opts, hasController: true });
             // append the overlay element to the document body
             getAppRoot(document).appendChild(element);
             return new Promise((resolve) => componentOnReady(element, resolve));
@@ -194,7 +188,7 @@ const isOverlayHidden = (overlay) => overlay.classList.contains('overlay-hidden'
  */
 const focusElementInOverlay = (hostToFocus, overlay) => {
     let elementToFocus = hostToFocus;
-    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
+    const shadowRoot = hostToFocus?.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
         elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
@@ -215,7 +209,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, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -401,7 +395,7 @@ const connectListeners = (doc) => {
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {
             const lastOverlay = getPresentedOverlay(doc);
-            if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
+            if (lastOverlay?.backdropDismiss) {
                 ev.detail.register(OVERLAY_BACK_BUTTON_PRIORITY, () => {
                     /**
                      * Do not return this promise otherwise
@@ -429,7 +423,7 @@ const connectListeners = (doc) => {
             doc.addEventListener('keydown', (ev) => {
                 if (ev.key === 'Escape') {
                     const lastOverlay = getPresentedOverlay(doc);
-                    if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
+                    if (lastOverlay?.backdropDismiss) {
                         lastOverlay.dismiss(undefined, BACKDROP);
                     }
                 }
@@ -449,7 +443,7 @@ const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 const getOverlays = (doc, selector) => {
     if (selector === undefined) {
-        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover,ion-toast';
     }
     return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -511,8 +505,30 @@ const setRootAriaHidden = (hidden = false) => {
         viewContainer.removeAttribute('aria-hidden');
     }
 };
+/**
+ * Cleans up root `aria-hidden` and `backdrop-no-scroll` when
+ * an overlay is removed from the DOM without going through
+ * the `dismiss()` flow (e.g., when a framework unmounts the
+ * overlay during a route change).
+ *
+ * Should be called from an overlay's `disconnectedCallback`
+ * when the overlay was still presented at the time of removal.
+ */
+const cleanupRootFocusTrapAccessibility = () => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const remainingOverlays = getPresentedOverlays(document);
+    const hasRemainingLocking = remainingOverlays.some((o) => {
+        const el = o;
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
+    });
+    if (!hasRemainingLocking) {
+        setRootAriaHidden(false);
+        document.body.classList.remove(BACKDROP_NO_SCROLL);
+    }
+};
 const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
-    var _a, _b;
     if (overlay.presented) {
         return;
     }
@@ -558,7 +574,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         }
         document.body.classList.add(BACKDROP_NO_SCROLL);
     }
-    (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
+    overlay.willPresentShorthand?.emit();
     const mode = getIonMode(overlay);
     // get the user's animation fn if one was provided
     const animationBuilder = overlay.enterAnimation
@@ -567,7 +583,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
-        (_b = overlay.didPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
+        overlay.didPresentShorthand?.emit();
     }
     /**
      * If the focused element is already
@@ -587,7 +603,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
          * exists (e.g. picker-legacy), we fall back to the host.
          */
         const overlayWrapper = getElementRoot(overlay.el).querySelector('[role="dialog"][tabindex]');
-        const focusTarget = overlayWrapper !== null && overlayWrapper !== void 0 ? overlayWrapper : overlay.el;
+        const focusTarget = overlayWrapper ?? overlay.el;
         /**
          * `preventScroll` keeps this a pure focus move so the viewport does not
          * jump when the wrapper is partially off-screen (e.g. a sheet modal).
@@ -597,7 +613,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         try {
             focusTarget.focus({ preventScroll: true });
         }
-        catch (_c) {
+        catch {
             focusTarget.focus();
         }
     }
@@ -633,7 +649,7 @@ const restoreElementFocus = async (overlayEl) => {
     }
     // Ensure active element is blurred to prevent a11y warning issues
     previousElement.blur();
-    const shadowRoot = previousElement === null || previousElement === void 0 ? void 0 : previousElement.shadowRoot;
+    const shadowRoot = previousElement?.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
         previousElement = shadowRoot.querySelector(focusableQueryString) || previousElement;
@@ -668,7 +684,6 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
@@ -703,7 +718,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         // Overlay contents should not be clickable during dismiss
         overlay.el.style.setProperty('pointer-events', 'none');
         overlay.willDismiss.emit({ data, role });
-        (_a = overlay.willDismissShorthand) === null || _a === void 0 ? void 0 : _a.emit({ data, role });
+        overlay.willDismissShorthand?.emit({ data, role });
         const mode = getIonMode(overlay);
         const animationBuilder = overlay.leaveAnimation
             ? overlay.leaveAnimation
@@ -713,7 +728,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
             await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
         }
         overlay.didDismiss.emit({ data, role });
-        (_b = overlay.didDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
+        overlay.didDismissShorthand?.emit({ data, role });
         // Get a reference to all animations currently assigned to this overlay
         // Then tear them down to return the overlay to its initial visual state
         const animations = activeAnimations.get(overlay) || [];
@@ -754,7 +769,7 @@ const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     if (overlay.keyboardClose) {
         animation.beforeAddWrite(() => {
             const activeElement = baseEl.ownerDocument.activeElement;
-            if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.matches('input,ion-input, ion-textarea')) {
+            if (activeElement?.matches('input,ion-input, ion-textarea')) {
                 activeElement.blur();
             }
         });
@@ -935,4 +950,4 @@ const createTriggerController = () => {
 };
 const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
 
-export { BACKDROP as B, FOCUS_TRAP_DISABLE_CLASS as F, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getPresentedOverlay as o, pickerController as p, focusLastDescendant as q, safeCall as s, toastController as t };
+export { BACKDROP as B, FOCUS_TRAP_DISABLE_CLASS as F, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, alertController as a, actionSheetController as b, createDelegateController as c, createTriggerController as d, present as e, dismiss as f, eventMethod as g, prepareOverlay as h, isCancel as i, cleanupRootFocusTrapAccessibility as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getPresentedOverlay as o, popoverController as p, focusLastDescendant as q, safeCall as s, toastController as t };

package/dist/esm/select-option-render-C4m76VGH.js

@@ -0,0 +1,121 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from './index-ChhhtsGZ.js';
+import { a as sanitizeDOMTree } from './index-CKM1DdGm.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) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent ?? '';
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+        return null;
+    }
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    const key = `${keyPrefix}-${index}`;
+    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 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}`;
+    /**
+     * Do not remove. This is the only sanitization pass for callers that pass
+     * an `HTMLElement` straight to `renderOptionLabel` (e.g. vanilla JS)
+     * without going through `getOptionContent`, which sanitizes upstream.
+     * `cloneToVNode` does pure structural conversion and no security
+     * filtering, so dropping this call would reopen an XSS hole on the
+     * direct `HTMLElement` path.
+     */
+    sanitizeDOMTree(content);
+    return (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 (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
+    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 (h(Tag, { class: className, key: `${className}-${id}` }, labelEl));
+    }
+    // Render label with rich content (start, end, description)
+    return (h(Tag, { class: `${className} ${className}-has-rich-content`, key: `${className}-${id}` }, startContent && renderClonedContent(id, startContent, 'select-option-start', useSpan), h(Tag, { class: "select-option-content", key: `${className}-content-${id}` }, labelEl, description && (h(Tag, { class: "select-option-description", key: `${className}-desc-${id}` }, description))), endContent && renderClonedContent(id, endContent, 'select-option-end', useSpan)));
+};
+
+export { renderOptionLabel as r };