@ionic/core 8.8.14-dev.11784238294.131cd99d → 8.8.14-dev.11784563563.137a903a

package/dist/collection/components/thumbnail/thumbnail.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
-        return (h(Host, { key: 'b250e01664238f1dca8f9757b15bc3d5d9387ffa', class: getIonMode(this) }, h("slot", { key: '72cb568bccabc983c5186a7596ef6c6d4ebf5ad9' })));
+        return (h(Host, { key: '833e947c683b482a78f8f0df8c9a68e99478bbaa', class: getIonMode(this) }, h("slot", { key: '6d1e9e686db88d91379f14121058dbf035d8ded2' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/title/title.js

@@ -23,11 +23,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: '44e63f8439df64c470692904427b417e19406476', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd9317e8e66cb6112717f5a9c252658777efbd873', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '784cf60a0db16045391891cc8fad0c7dbeba4039', class: "toolbar-title" }, h("slot", { key: '0c720a50479ba257e8756337aeb9b0ab7516a227' }))));
+            }) }, h("div", { key: 'a4d011d6d409bf006d8efe33667002edb109820a', class: "toolbar-title" }, h("slot", { key: '4ca3303b957a0e5387f1e9058e5adb4c6275afcc' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.js

@@ -417,9 +417,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: 'b5256edcf33d0ef51e6c5080c84e1ca58abe2ae0', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '2acb2cd2e12ea0082986495929e4a596d4da2f38', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '0860f7e895d8bc66e44c4d924ca569f4cbb1a749', class: wrapperClass, part: "wrapper" }, h("div", { key: '28784199c880a3f664677c8f5560b7caa8903251', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '0a63ba1336ad43d2aec14e49055eb46c112359c2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'ecec8107af582dc55d4b3828dd7f3054a29f26b1', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '8b24ba5d3d51d1ab94b9bf6bb5d6e4b8bb3248a7', class: wrapperClass, part: "wrapper" }, h("div", { key: 'e1ebdf4f0425cc7b1e2688667ee9a2b3c545804a', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '552b1ab8f4e72882cc8e878579c7a594119677e1', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '8ac8d64f632fbedadb180132c83043474466bee0', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/toggle.js

@@ -287,7 +287,7 @@ export class Toggle {
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '736e1dcfca34fd41f6f0632652e7f86d6996a232', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: 'ab093ddb505af61685cbb8571af1e765fc0292f8', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -297,10 +297,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: 'e697739fd3964c1c6c23331cf7e38a9841c46a6a', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '3d500b8c1bc879591249d183c1abb3f5f26aff6b', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: 'e38f3fe0e66b4ca434fd81514f5ef771c2960841', class: {
+            }) }, h("label", { key: 'b4b05e458fcbc767e4392ae43e647b075780cad0', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'c09100447011c51d5b49b4400ec7d72012e3bc6f', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '71cf059a999ae572a20127b76907e010ace486ad', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '006dd3558264d69ab020c07005b348adc4ecdd5b' }), this.renderHintText()), h("div", { key: 'dd4e52de31caabee41ec1bc58efecd1e213368c9', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'c480b96a0ddd926568f73291d71253d6f74438c7' }), this.renderHintText()), h("div", { key: '96a2cbd1673e051a78f8b2b16535ecd3f0ed4339', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.js

@@ -65,10 +65,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'b849db2863778dee6c5a251bffa1b3a657aeb036', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '40bad6fa7e94262438da4bbe037dcf8a5fa2df22', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '67f5bba9c4f527c3f35bfe1313a2b85741f9b246', class: "toolbar-background", part: "background" }), h("div", { key: '085e8c68f056e5b0deb9d1606431fbeb45dae8e5', class: "toolbar-container", part: "container" }, h("slot", { key: '15227c79c3baf883fd8c43fdb7e1313453933c79', name: "start" }), h("slot", { key: '0b8a7f7e685aa31c80d9bc03446ccc3a9d07e0e8', name: "secondary" }), h("div", { key: '57e4628c1fa89df79dd80456259db961bb691404', class: "toolbar-content", part: "content" }, h("slot", { key: '82c2f6e1acf8d96db259bd8baf295881801edbd5' })), h("slot", { key: 'b2d4afb15214199f206c0a5e08b581e4c9c2f58a', name: "primary" }), h("slot", { key: 'bfb909a0c472f8834046c2ea23bef2f562167ad3', name: "end" }))));
+            })) }, h("div", { key: 'df44c9f0fe3958116ab860b0dad79c53b89f6c59', class: "toolbar-background", part: "background" }), h("div", { key: '2169ffa576875b8d5624211cc0b4bf86191562bc', class: "toolbar-container", part: "container" }, h("slot", { key: 'c8910dcf1ce98ab427fd89c3396a67c2a75bdd07', name: "start" }), h("slot", { key: '05da24d5ef96b9eebd83b534ce02c1f7bcd06680', name: "secondary" }), h("div", { key: '090fea1541e7e2b6ad74a6ded4eadffdb471ccce', class: "toolbar-content", part: "content" }, h("slot", { key: '507e143f92f6fa59ff23d94026411fa2c74f2f8e' })), h("slot", { key: 'f79fdee472e657e26a910cb89d7551943e40e440', name: "primary" }), h("slot", { key: 'dd40fe9ed490cf4346c642e195fdb524dc6cc4f5', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -17,5 +17,5 @@ export { getMode, setupConfig } from './utils/config';
 export { openURL } from './utils/theme';
 export { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_UNLOAD, } from './components/nav/constants';
 export { menuController } from './utils/menu-controller';
-export { alertController, actionSheetController, modalController, loadingController, pickerController, popoverController, toastController, } from './utils/overlays';
+export { alertController, actionSheetController, modalController, loadingController, popoverController, toastController, } from './utils/overlays';
 export { IonicSlides } from './components/slides/IonicSlides';

package/dist/collection/utils/overlay-control-label.js

@@ -0,0 +1,45 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+// 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 mode, 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 mode's established
+ * option-row layout:
+ * - `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 `select-popover` and `select-modal` as the fallback when an
+ * option doesn't explicitly set `labelPlacement`.
+ */
+export const getOverlayLabelPlacement = (mode, control, interfaceType) => {
+    if (mode === '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 mode's option-row layout:
+ * - `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 `select-popover` and `select-modal` as the fallback when an
+ * option doesn't explicitly set `justify`.
+ */
+export const getOverlayLabelJustify = (mode, control, interfaceType) => {
+    if (mode === 'ios' && control === 'radio' && interfaceType !== 'modal') {
+        return 'space-between';
+    }
+    return 'start';
+};

package/dist/collection/utils/overlays.js

@@ -39,10 +39,6 @@ export const alertController = /*@__PURE__*/ createController('ion-alert');
 export const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 export const loadingController = /*@__PURE__*/ createController('ion-loading');
 export const modalController = /*@__PURE__*/ createController('ion-modal');
-/**
- * @deprecated Use the inline ion-picker component instead.
- */
-export const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
 export const popoverController = /*@__PURE__*/ createController('ion-popover');
 export const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -136,7 +132,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.
@@ -370,7 +366,7 @@ export const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 export 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);
 };
@@ -432,6 +428,29 @@ export 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.
+ */
+export 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);
+    }
+};
 export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
     var _a, _b;
     if (overlay.presented) {
@@ -497,30 +516,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
      * to the overlay container.
      */
     if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
-        /**
-         * Some overlays (e.g. modal) put the dialog role and accessible label
-         * on the `.ion-overlay-wrapper` instead of the host. Screen readers
-         * need focus on the element with `role="dialog"` to properly announce
-         * and navigate the dialog.
-         *
-         * We only target wrappers with `tabindex`, since `role="dialog"` alone
-         * does not make an element focusable. If no focusable dialog wrapper
-         * 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;
-        /**
-         * `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).
-         * Guard the options call so an older engine that mishandles it can never
-         * reject present(); we fall back to a plain focus() in that case.
-         */
-        try {
-            focusTarget.focus({ preventScroll: true });
-        }
-        catch (_c) {
-            focusTarget.focus();
-        }
+        overlay.el.focus();
     }
     /**
      * If this overlay was previously dismissed without being

package/dist/collection/utils/platform.js

@@ -66,9 +66,9 @@ const isDesktop = (win) => !isMobile(win);
 const isHybrid = (win) => isCordova(win) || isCapacitorNative(win);
 const isCordova = (win) => !!(win['cordova'] || win['phonegap'] || win['PhoneGap']);
 const isCapacitorNative = (win) => {
+    var _a;
     const capacitor = win['Capacitor'];
-    // TODO(ROU-11693): Remove when we no longer support Capacitor 2, which does not have isNativePlatform
-    return !!((capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNative) || ((capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNativePlatform) && !!capacitor.isNativePlatform()));
+    return !!((_a = capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNativePlatform) === null || _a === void 0 ? void 0 : _a.call(capacitor));
 };
 const isElectron = (win) => testUserAgent(win, /electron/i);
 const isPWA = (win) => { var _a; return !!(((_a = win.matchMedia) === null || _a === void 0 ? void 0 : _a.call(win, '(display-mode: standalone)').matches) || win.navigator.standalone); };

package/dist/collection/utils/sanitization/index.js

@@ -3,8 +3,26 @@
  */
 import { printIonError } from "../logging/index";
 /**
- * Does a simple sanitization of all elements
- * in an untrusted string
+ * Sanitize an untrusted HTML string.
+ *
+ * Parses the string into a detached DOM, removes blocked tags, strips
+ * attributes outside the narrow `domStringAllowedAttributes` list (refer
+ * `sanitizeElement`), and scrubs script-scheme URLs. Returns the sanitized
+ * HTML string.
+ *
+ * Use this when you have an HTML string from an unknown source and need to
+ * render it via `innerHTML`. Use `sanitizeDOMTree` instead when you already
+ * have a DOM tree and want to sanitize it in place without a string round
+ * trip. The two apply the same dangerous-vector scrubbing but different
+ * attribute allowlists: this path stays narrow so existing consumers
+ * (toast, loading, alert message, etc.) are unaffected, while
+ * `sanitizeDOMTree` uses the wider rich-content allowlist.
+ *
+ * @param untrustedString - The HTML string to sanitize. Pass an
+ * `IonicSafeString` to bypass sanitization, or `undefined` to short-circuit.
+ * @returns The sanitized HTML string, or `undefined` if the input was
+ * `undefined`. Returns `''` if sanitization fails or the input contains
+ * an inline `onload=` handler.
  */
 export const sanitizeDOMString = (untrustedString) => {
     try {
@@ -54,7 +72,7 @@ export const sanitizeDOMString = (untrustedString) => {
                 const childElements = getElementChildren(element);
                 /* eslint-disable-next-line */
                 for (let childIndex = 0; childIndex < childElements.length; childIndex++) {
-                    sanitizeElement(childElements[childIndex]);
+                    sanitizeElement(childElements[childIndex], domStringAllowedAttributes);
                 }
             }
         });
@@ -66,7 +84,7 @@ export const sanitizeDOMString = (untrustedString) => {
         const dfChildren = getElementChildren(documentFragment);
         /* eslint-disable-next-line */
         for (let childIndex = 0; childIndex < dfChildren.length; childIndex++) {
-            sanitizeElement(dfChildren[childIndex]);
+            sanitizeElement(dfChildren[childIndex], domStringAllowedAttributes);
         }
         // Append document fragment to div
         const fragmentDiv = document.createElement('div');
@@ -80,13 +98,43 @@ export const sanitizeDOMString = (untrustedString) => {
         return '';
     }
 };
+/**
+ * Sanitize an entire trusted DOM tree in place.
+ *
+ * Removes blocked tags (`script`, `iframe`, etc.) from the subtree and
+ * then sanitizes attributes on every remaining element using the wider
+ * `richContentAllowedAttributes` allowlist (refer `sanitizeElement`).
+ * Component presentational attributes (`size`, `color`, `shape`, inline
+ * SVG, `aria-*`, `data-*`) are preserved; `style`, event handlers (`on*`),
+ * form/navigation-hijack attributes, script-scheme URLs, and non-image
+ * `data:` URLs are stripped.
+ *
+ * Use this when you have a DOM tree the developer controls (e.g.
+ * cloned slot content from a component) and you need to render it
+ * elsewhere safely.
+ *
+ * @param root - The root element whose subtree will be sanitized in
+ * place. No-op when the sanitizer is disabled via `Ionic.config`.
+ */
+export const sanitizeDOMTree = (root) => {
+    if (!isSanitizerEnabled()) {
+        return;
+    }
+    blockedTags.forEach((tag) => {
+        const matches = root.querySelectorAll(tag);
+        for (let i = matches.length - 1; i >= 0; i--) {
+            matches[i].remove();
+        }
+    });
+    sanitizeElement(root, richContentAllowedAttributes, richContentAllowedAttributePrefixes);
+};
 /**
  * Clean up current element based on allowed attributes
  * and then recursively dig down into any child elements to
  * clean those up as well
  */
 // TODO(FW-2832): type (using Element triggers other type errors as well)
-const sanitizeElement = (element) => {
+const sanitizeElement = (element, allowedAttributes, allowedAttributePrefixes = []) => {
     // IE uses childNodes, so ignore nodes that are not elements
     if (element.nodeType && element.nodeType !== 1) {
         return;
@@ -101,29 +149,60 @@ const sanitizeElement = (element) => {
         element.remove();
         return;
     }
+    /**
+     * Always strip `style` (CSS injection, `background:url()` beaconing, UI
+     * spoofing). It is never on the allowlist, but it is removed explicitly
+     * here because some engines (e.g. jsdom) don't enumerate the CSSOM-backed
+     * `style` attribute in `element.attributes`, which would let the loop
+     * below skip over it.
+     */
+    element.removeAttribute('style');
     for (let i = element.attributes.length - 1; i >= 0; i--) {
         const attribute = element.attributes.item(i);
         const attributeName = attribute.name;
-        // remove non-allowed attribs
-        if (!allowedAttributes.includes(attributeName.toLowerCase())) {
+        const lowerName = attributeName.toLowerCase();
+        /**
+         * Remove any attribute that is not on the allowlist. This drops event
+         * handlers (`on*`), `style`, the form/navigation-hijack attributes
+         * (`formaction`, `action`, `target`), namespaced attributes like
+         * `xlink:href`, and anything else not explicitly known to be safe.
+         */
+        if (!isAttributeAllowed(lowerName, allowedAttributes, allowedAttributePrefixes)) {
             element.removeAttribute(attributeName);
             continue;
         }
         // clean up any allowed attribs
         // that attempt to do any JS funny-business
         const attributeValue = attribute.value;
+        if (attributeValue == null) {
+            continue;
+        }
         /**
-         * We also need to check the property value
-         * as javascript: can allow special characters
-         * such as &Tab; and still be valid (i.e. java&Tab;script)
+         * Scrub dangerous schemes from the value. The value is normalized first
+         * (whitespace and ASCII control characters removed) so entity-obfuscated
+         * payloads such as `java&#9;script:`, which the parser decodes to
+         * `java\tscript:`, are still caught. Normalizing the value also covers
+         * namespaced attributes, where the previous `element[attributeName]`
+         * property reflection returned `undefined` and let them slip through.
          */
-        const propertyValue = element[attributeName];
-        /* eslint-disable */
-        if ((attributeValue != null && attributeValue.toLowerCase().includes('javascript:')) ||
-            (propertyValue != null && propertyValue.toLowerCase().includes('javascript:'))) {
+        const normalizedValue = attributeValue.replace(controlCharactersAndWhitespace, '').toLowerCase();
+        // Script schemes are never allowed, on any attribute.
+        if (normalizedValue.includes('javascript:') || normalizedValue.includes('vbscript:')) {
+            element.removeAttribute(attributeName);
+            continue;
+        }
+        /**
+         * For URL-bearing attributes, allow `data:` URIs only for raster
+         * images. Document-bearing types (`text/html`, `image/svg+xml`,
+         * `application/*`, etc.) can carry markup or script when navigated to
+         * or rendered, so they are stripped, while safe image types are kept so
+         * inline images keep working.
+         */
+        if (urlAttributes.includes(lowerName) &&
+            normalizedValue.startsWith('data:') &&
+            !safeDataImageUri.test(normalizedValue)) {
             element.removeAttribute(attributeName);
         }
-        /* eslint-enable */
     }
     /**
      * Sanitize any nested children
@@ -131,7 +210,7 @@ const sanitizeElement = (element) => {
     const childElements = getElementChildren(element);
     /* eslint-disable-next-line */
     for (let i = 0; i < childElements.length; i++) {
-        sanitizeElement(childElements[i]);
+        sanitizeElement(childElements[i], allowedAttributes, allowedAttributePrefixes);
     }
 };
 /**
@@ -156,8 +235,185 @@ const isSanitizerEnabled = () => {
     }
     return true;
 };
-const allowedAttributes = ['class', 'id', 'href', 'src', 'name', 'slot'];
-const blockedTags = ['script', 'style', 'iframe', 'meta', 'link', 'object', 'embed'];
+/**
+ * Mirror known custom-element DOM properties onto attributes so they
+ * survive `cloneNode`. Call this on a DOM subtree before cloning it for
+ * rendering elsewhere (e.g. cloning slotted option content into an
+ * overlay).
+ *
+ * Only sets the attribute when the property holds a non-empty string
+ * and the attribute isn't already present, so existing attributes
+ * take precedence.
+ *
+ * @param root - The root element whose subtree (and itself) will be
+ * inspected.
+ */
+export const reflectPropertiesToAttributes = (root) => {
+    const candidates = [];
+    if (root.tagName in elementPropsToReflect) {
+        candidates.push(root);
+    }
+    for (const tagName of Object.keys(elementPropsToReflect)) {
+        candidates.push(...Array.from(root.querySelectorAll(tagName.toLowerCase())));
+    }
+    for (const el of candidates) {
+        if (!(el.tagName in elementPropsToReflect)) {
+            continue;
+        }
+        const props = elementPropsToReflect[el.tagName];
+        for (const prop of props) {
+            const value = el[prop];
+            if (typeof value === 'string' && value.length > 0 && !el.hasAttribute(prop)) {
+                el.setAttribute(prop, value);
+            }
+        }
+    }
+};
+/**
+ * Attribute allowlist for `sanitizeDOMString`. Intentionally narrow: this
+ * path sanitizes developer HTML strings rendered via `innerHTML` by
+ * `ion-toast`, `ion-loading`, the `ion-alert` message,
+ * `ion-refresher-content`, and `ion-infinite-scroll-content`, so the list
+ * is kept to the minimum those have always needed. Broadening it here would
+ * change sanitization output for all of those consumers, so the wider
+ * rich-content allowlist below is deliberately scoped to `sanitizeDOMTree`
+ * instead.
+ */
+const domStringAllowedAttributes = ['class', 'id', 'href', 'src', 'name', 'slot'];
+/**
+ * Attribute allowlist for `sanitizeDOMTree` (the select rich-content path).
+ * Covers global HTML attributes, the Ionic component presentational props
+ * that cloned rich content (e.g. `ion-select-option` markup) relies on, and
+ * the inert SVG presentation attributes used by inline icons.
+ *
+ * `aria-*` and `data-*` are allowed separately by prefix (refer
+ * `richContentAllowedAttributePrefixes`) since they are inert and not worth
+ * enumerating. URL-bearing names (`href`, `src`) are allowed here, but
+ * their values are still scrubbed for script schemes in `sanitizeElement`.
+ *
+ * Notably absent: `style`, event handlers (`on*`), and the
+ * form/navigation-hijack attributes (`formaction`, `action`, `target`),
+ * which are therefore stripped.
+ */
+const richContentAllowedAttributes = [
+    // Global / structural
+    'class',
+    'id',
+    'slot',
+    'name',
+    'title',
+    'alt',
+    'lang',
+    'dir',
+    'role',
+    'type',
+    'value',
+    'disabled',
+    'width',
+    'height',
+    'href',
+    'src',
+    // Ionic component presentational props
+    'color',
+    'size',
+    'shape',
+    'fill',
+    'expand',
+    'mode',
+    'theme',
+    'icon',
+    'label',
+    'label-placement',
+    'justify',
+    'inset',
+    'lines',
+    'ios',
+    'md',
+    // SVG presentation attributes (compared lowercased, e.g. `viewBox`)
+    'xmlns',
+    'viewbox',
+    'preserveaspectratio',
+    'stroke',
+    'stroke-width',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-opacity',
+    'stroke-dasharray',
+    'fill-rule',
+    'fill-opacity',
+    'clip-rule',
+    'd',
+    'points',
+    'cx',
+    'cy',
+    'r',
+    'rx',
+    'ry',
+    'x',
+    'y',
+    'x1',
+    'y1',
+    'x2',
+    'y2',
+    'transform',
+    'opacity',
+];
+/**
+ * Attribute-name prefixes that are always safe to keep in the rich-content
+ * path. `aria-*` and `data-*` attributes cannot execute script or load
+ * resources, so they are allowed wholesale rather than enumerated by name.
+ */
+const richContentAllowedAttributePrefixes = ['aria-', 'data-'];
+/**
+ * Whether an attribute name (already lowercased) is safe to keep, by exact
+ * match or by an allowed prefix.
+ */
+const isAttributeAllowed = (lowerName, allowedAttributes, allowedAttributePrefixes) => {
+    if (allowedAttributes.includes(lowerName)) {
+        return true;
+    }
+    return allowedAttributePrefixes.some((prefix) => lowerName.startsWith(prefix));
+};
+/**
+ * Matches ASCII control characters and whitespace (including the
+ * non-breaking space). Used to normalize attribute values before matching
+ * a URL scheme so entity-obfuscated payloads such as `java&#9;script:`
+ * (decoded by the parser to `java\tscript:`) can't smuggle a scheme past
+ * the check.
+ */
+// eslint-disable-next-line no-control-regex -- matching control characters is the point
+const controlCharactersAndWhitespace = /[\u0000-\u0020\u007f-\u00a0]/g;
+/**
+ * Attributes whose values are URLs. Their values are scheme-checked in
+ * `sanitizeElement` (e.g. `data:` filtering) beyond the script-scheme scrub
+ * applied to every attribute.
+ */
+const urlAttributes = ['href', 'src'];
+/**
+ * Matches a `data:` URI for a raster image type that cannot carry script.
+ * `image/svg+xml` is deliberately excluded (SVG can execute script), as are
+ * document types like `text/html` and `application/*`. The value is already
+ * lowercased and whitespace-stripped before this is tested.
+ */
+const safeDataImageUri = /^data:image\/(?:png|jpe?g|gif|webp|bmp|avif|x-icon|vnd\.microsoft\.icon)[;,]/;
+/**
+ * Tags removed entirely (with their subtree) before attribute sanitization.
+ * Exported so tests can assert the set without hardcoding it.
+ */
+export const blockedTags = ['script', 'style', 'iframe', 'meta', 'link', 'object', 'embed', 'base'];
+/**
+ * Properties on custom elements that frameworks (Vue, Angular) often
+ * set as DOM properties rather than attributes. `cloneNode` only copies
+ * attributes, so these values are lost when slotted content is cloned
+ * into an overlay. For each known custom element, we mirror the listed
+ * properties onto attributes so the cloned copy still has the data it
+ * needs to render.
+ *
+ * Keyed by uppercased tagName so the lookup matches `Element.tagName`.
+ */
+const elementPropsToReflect = {
+    'ION-ICON': ['icon', 'name', 'src', 'ios', 'md'],
+};
 export class IonicSafeString {
     constructor(value) {
         this.value = value;