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

package/dist/cjs/{overlays-CQ_c1fko.js → overlays-KaNVDNqC.js}

@@ -4,12 +4,12 @@
 'use strict';
 
 var index$1 = require('./index-DkNv4J_i.js');
-var helpers = require('./helpers-DdZyl6WL.js');
-var hardwareBackButton = require('./hardware-back-button-CXmUnTJC.js');
-var index = require('./index-BfaXsATC.js');
-var ionicGlobal = require('./ionic-global-BerQGEpE.js');
-var frameworkDelegate = require('./framework-delegate-CEzl4MEA.js');
-var gestureController = require('./gesture-controller-dtqlP_q4.js');
+var helpers = require('./helpers-YPQybDph.js');
+var hardwareBackButton = require('./hardware-back-button-fqpYh-kd.js');
+var index = require('./index-uvry__L4.js');
+var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+var frameworkDelegate = require('./framework-delegate-Dfo5XsGv.js');
+var gestureController = require('./gesture-controller-BDUH7687.js');
 
 /**
  * This query string selects elements that
@@ -36,7 +36,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
@@ -51,7 +51,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
@@ -72,7 +72,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;
@@ -100,8 +100,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 {
@@ -120,10 +119,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');
 /**
@@ -163,7 +158,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);
@@ -172,7 +166,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) => helpers.componentOnReady(element, resolve));
@@ -196,7 +190,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;
@@ -217,7 +211,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.
@@ -403,7 +397,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(hardwareBackButton.OVERLAY_BACK_BUTTON_PRIORITY, () => {
                     /**
                      * Do not return this promise otherwise
@@ -431,7 +425,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);
                     }
                 }
@@ -451,7 +445,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);
 };
@@ -513,8 +507,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(gestureController.BACKDROP_NO_SCROLL);
+    }
+};
 const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
-    var _a, _b;
     if (overlay.presented) {
         return;
     }
@@ -560,7 +576,7 @@ 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();
+    overlay.willPresentShorthand?.emit();
     const mode = ionicGlobal.getIonMode(overlay);
     // get the user's animation fn if one was provided
     const animationBuilder = overlay.enterAnimation
@@ -569,7 +585,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
@@ -589,7 +605,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
          * exists (e.g. picker-legacy), we fall back to the host.
          */
         const overlayWrapper = helpers.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).
@@ -599,7 +615,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         try {
             focusTarget.focus({ preventScroll: true });
         }
-        catch (_c) {
+        catch {
             focusTarget.focus();
         }
     }
@@ -635,7 +651,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;
@@ -670,7 +686,6 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
@@ -705,7 +720,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 = ionicGlobal.getIonMode(overlay);
         const animationBuilder = overlay.leaveAnimation
             ? overlay.leaveAnimation
@@ -715,7 +730,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) || [];
@@ -756,7 +771,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();
             }
         });
@@ -943,6 +958,7 @@ exports.GESTURE = GESTURE;
 exports.OVERLAY_GESTURE_PRIORITY = OVERLAY_GESTURE_PRIORITY;
 exports.actionSheetController = actionSheetController;
 exports.alertController = alertController;
+exports.cleanupRootFocusTrapAccessibility = cleanupRootFocusTrapAccessibility;
 exports.createDelegateController = createDelegateController;
 exports.createTriggerController = createTriggerController;
 exports.dismiss = dismiss;
@@ -953,7 +969,6 @@ exports.getPresentedOverlay = getPresentedOverlay;
 exports.isCancel = isCancel;
 exports.loadingController = loadingController;
 exports.modalController = modalController;
-exports.pickerController = pickerController;
 exports.popoverController = popoverController;
 exports.prepareOverlay = prepareOverlay;
 exports.present = present;

package/dist/cjs/select-option-render-pULCGldr.js

@@ -0,0 +1,123 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+var index = require('./index-uvry__L4.js');
+var index$1 = require('./index-B7zJsYWS.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) => {
+    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$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}`;
+    /**
+     * 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.
+     */
+    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;