@ionic/core 8.8.9-dev.11781024903.1e4268e5 → 8.8.9-dev.11781201980.1b6e8398

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

@@ -3,22 +3,8 @@
  */
 import { printIonError } from "../logging/index";
 /**
- * Sanitize an untrusted HTML string.
- *
- * Parses the string into a detached DOM, removes blocked tags, strips
- * attributes outside the `allowedAttributes` 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; both apply the same attribute policy.
- *
- * @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.
+ * Does a simple sanitization of all elements
+ * in an untrusted string
  */
 export const sanitizeDOMString = (untrustedString) => {
     try {
@@ -94,36 +80,6 @@ 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 same
- * allowlist policy as `sanitizeDOMString` (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);
-};
 /**
  * Clean up current element based on allowed attributes
  * and then recursively dig down into any child elements to
@@ -145,60 +101,29 @@ 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;
-        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)) {
+        // remove non-allowed attribs
+        if (!allowedAttributes.includes(attributeName.toLowerCase())) {
             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;
-        }
         /**
-         * Scrub dangerous schemes from the value. The value is normalized first
-         * (whitespace and ASCII control characters removed) so entity-obfuscated
-         * payloads such as `java	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.
+         * We also need to check the property value
+         * as javascript: can allow special characters
+         * such as 	 and still be valid (i.e. java	script)
          */
-        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)) {
+        const propertyValue = element[attributeName];
+        /* eslint-disable */
+        if ((attributeValue != null && attributeValue.toLowerCase().includes('javascript:')) ||
+            (propertyValue != null && propertyValue.toLowerCase().includes('javascript:'))) {
             element.removeAttribute(attributeName);
         }
+        /* eslint-enable */
     }
     /**
      * Sanitize any nested children
@@ -231,174 +156,8 @@ const isSanitizerEnabled = () => {
     }
     return true;
 };
-/**
- * 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 names that are always safe to keep. 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
- * `allowedAttributePrefixes`) 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 allowedAttributes = [
-    // 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. `aria-*` and
- * `data-*` attributes cannot execute script or load resources, so they are
- * allowed wholesale rather than enumerated by name.
- */
-const allowedAttributePrefixes = ['aria-', 'data-'];
-/**
- * Whether an attribute name (already lowercased) is safe to keep, by exact
- * match or by an allowed prefix.
- */
-const isAttributeAllowed = (lowerName) => {
-    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	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'],
-};
+const allowedAttributes = ['class', 'id', 'href', 'src', 'name', 'slot'];
+const blockedTags = ['script', 'style', 'iframe', 'meta', 'link', 'object', 'embed'];
 export class IonicSafeString {
     constructor(value) {
         this.value = value;

package/dist/collection/utils/select-option-render.js

@@ -2,63 +2,19 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { h } from "@stencil/core";
-import { sanitizeDOMTree } from "./sanitization/index";
+import { sanitizeDOMString } from "./sanitization";
 /**
- * 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.
+ * Cache that maps rendered span elements to the source HTMLElement
+ * they were cloned from. This prevents flickering when a user
+ * selects an option that has rich content, as the content will only be
+ * re-rendered if the source HTMLElement changes.
  */
-export const cloneToVNode = (node, keyPrefix, index) => {
-    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}`;
-    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);
-};
+const contentCache = new WeakMap();
 /**
- * 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.
+ * Renders cloned DOM content into an element via a ref callback.
+ * The content is only cloned when the source element changes,
+ * preventing flicker caused by destroying and recreating web
+ * components (e.g., ion-avatar) on every re-render cycle.
  *
  * Span elements should be used when this content renders within buttons,
  * depending on the select interface. Buttons can only have phrasing
@@ -66,14 +22,23 @@ export const cloneToVNode = (node, keyPrefix, index) => {
  *
  * @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 className - CSS class applied to the wrapper span.
  * @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}`;
-    sanitizeDOMTree(content);
-    return (h(Tag, { class: className, key: keyPrefix }, Array.from(content.childNodes).map((child, i) => cloneToVNode(child, keyPrefix, i))));
+    return (h(Tag, { class: className, key: `${className}-${id}`, ref: (el) => {
+            if (el) {
+                const cached = contentCache.get(el);
+                // Skip if this element already has clones from the same source
+                if (cached === content) {
+                    return;
+                }
+                const sanitized = sanitizeDOMString(content.innerHTML);
+                el.innerHTML = sanitized !== null && sanitized !== void 0 ? sanitized : '';
+                contentCache.set(el, content);
+            }
+        } }));
 };
 /**
  * Renders the label content for a select option within an overlay
@@ -107,5 +72,5 @@ export const renderOptionLabel = (option, className, useSpan = false) => {
         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)));
+    return (h(Tag, { class: className, 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)));
 };

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-09T17:10:52",
+  "timestamp": "2026-06-11T18:22:18",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.0",
@@ -14240,7 +14240,7 @@
         },
         {
           "name": "slot",
-          "text": "- Content is placed in a responsive gallery layout."
+          "text": "- One or more `ion-gallery-item` components, placed in a responsive\ngallery layout."
         }
       ],
       "usage": {},
@@ -14460,7 +14460,91 @@
       "slots": [
         {
           "name": "",
-          "docs": "Content is placed in a responsive gallery layout."
+          "docs": "One or more `ion-gallery-item` components, placed in a responsive\ngallery layout."
+        }
+      ],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/gallery-item/gallery-item.tsx",
+      "encapsulation": "shadow",
+      "tag": "ion-gallery-item",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "virtualProp",
+          "text": "{\"ios\" | \"md\"} mode - The mode determines the platform behaviors of the component."
+        },
+        {
+          "name": "virtualProp",
+          "text": "{\"ios\" | \"md\" | \"ionic\"} theme - The theme determines the visual appearance of the component."
+        },
+        {
+          "name": "slot",
+          "text": "- The content placed inside of the gallery item. This is typically an\n`img`, but can be any element (e.g. a `figure` wrapping an image and caption)."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "mode",
+          "type": "\"ios\" | \"md\"",
+          "mutable": false,
+          "attr": "mode",
+          "reflectToAttr": false,
+          "docs": "The mode determines the platform behaviors of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "ios",
+              "type": "string"
+            },
+            {
+              "value": "md",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "theme",
+          "type": "\"ios\" | \"md\" | \"ionic\"",
+          "mutable": false,
+          "attr": "theme",
+          "reflectToAttr": false,
+          "docs": "The theme determines the visual appearance of the component.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "ios",
+              "type": "string"
+            },
+            {
+              "value": "md",
+              "type": "string"
+            },
+            {
+              "value": "ionic",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "The content placed inside of the gallery item. This is typically an\n`img`, but can be any element (e.g. a `figure` wrapping an image and caption)."
         }
       ],
       "parts": [],
@@ -39693,72 +39777,6 @@
           "getter": false,
           "setter": false
         },
-        {
-          "name": "justify",
-          "type": "\"end\" | \"space-between\" | \"start\" | undefined",
-          "complexType": {
-            "original": "'start' | 'end' | 'space-between'",
-            "resolved": "\"end\" | \"space-between\" | \"start\" | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "justify",
-          "reflectToAttr": false,
-          "docs": "How to pack the label and the option's selection control within a line.\n`\"start\"`: The label and radio will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and radio will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and radio will appear on opposite\nends of the line with space between the two elements.\n\nApplies to the `alert`, `popover`, and `modal` interfaces, but has no\nvisible effect on radio options in `popover` or `modal` on the `md`\nand `ionic` themes (the radio control is hidden there).\n\nWhen unset, the interface picks a default based on theme and control\ntype.",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "end",
-              "type": "string"
-            },
-            {
-              "value": "space-between",
-              "type": "string"
-            },
-            {
-              "value": "start",
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "labelPlacement",
-          "type": "\"end\" | \"start\" | undefined",
-          "complexType": {
-            "original": "'start' | 'end'",
-            "resolved": "\"end\" | \"start\" | undefined",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "label-placement",
-          "reflectToAttr": false,
-          "docs": "Where the label is placed relative to the option's selection control\n(radio circle or checkbox box) when the option is rendered in an\n`alert`, `popover`, or `modal` interface.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n\nApplies to the `alert`, `popover`, and `modal` interfaces, but has no\nvisible effect on radio options in `popover` or `modal` on the `md`\nand `ionic` themes (the radio control is hidden there).\n\nWhen unset, the interface picks a default based on theme and control\ntype.",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "end",
-              "type": "string"
-            },
-            {
-              "value": "start",
-              "type": "string"
-            },
-            {
-              "type": "undefined"
-            }
-          ],
-          "optional": true,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
         {
           "name": "mode",
           "type": "\"ios\" | \"md\"",