voyager-ionic-core 8.8.12 → 9.0.1

package/dist/collection/components/select/select.js

@@ -2,14 +2,18 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, h, forceUpdate } from "@stencil/core";
-import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from "../../utils/forms/index";
+import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
+import { compareOptions, createNotchController, createStartContainerController, isOptionSelected, checkInvalidState, } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
+import { blockedTags, reflectPropertiesToAttributes, sanitizeDOMTree } from "../../utils/sanitization/index";
+import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { watchForOptions } from "../../utils/watch-options";
 import { caretDownSharp, chevronExpand } from "ionicons/icons";
+import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 // TODO(FW-2832): types
 /**
@@ -29,7 +33,9 @@ import { getIonMode } from "../../global/ionic-global";
  * @part error-text - Supporting text displayed beneath the select when the select is invalid and touched.
  * @part bottom - The container element for helper text, error text, and counter.
  * @part wrapper - The clickable label element that wraps the entire form field (label text, slots, selected values or placeholder, and toggle icons).
- * @part inner - The inner element of the wrapper that manages the slots, selected values or placeholder, and toggle icons.
+ * @part start - The wrapper element for the content in the start slot.
+ * @part control - The wrapper element containing the label and native select control. When the label is not floating or stacked, this part also contains the dropdown icon.
+ * @part end - The wrapper element for the content in the end slot. When the label is floating or stacked, this part also contains the dropdown icon.
  */
 export class Select {
     constructor() {
@@ -37,6 +43,7 @@ export class Select {
         this.helperTextId = `${this.inputId}-helper-text`;
         this.errorTextId = `${this.inputId}-error-text`;
         this.inheritedAttributes = {};
+        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
         this.isExpanded = false;
         /**
          * The `hasFocus` state ensures the focus class is
@@ -147,13 +154,13 @@ export class Select {
             this.ionBlur.emit();
         };
         /**
-         * Stops propagation when the label is clicked,
-         * otherwise, two clicks will be triggered.
+         * Stops propagation for re-dispatched clicks (when already expanded) to
+         * prevent double-click events. Allows initial button clicks (from keyboard
+         * or mouse) and slotted content clicks to propagate so event delegation
+         * works for parent handlers.
          */
         this.onLabelClick = (ev) => {
-            // Only stop propagation if the click was directly on the label
-            // and not on the input or other child elements
-            if (ev.target === ev.currentTarget) {
+            if (ev.target === this.focusEl && this.isExpanded) {
                 ev.stopPropagation();
             }
         };
@@ -162,12 +169,51 @@ export class Select {
         this.emitStyle();
     }
     setValue(value) {
+        if (this.isValueEqual(this.value, value)) {
+            return;
+        }
         this.value = value;
         this.ionChange.emit({ value });
     }
+    isValueEqual(currentValue, newValue) {
+        if (this.multiple) {
+            const currentArr = Array.isArray(currentValue) ? currentValue : [];
+            const newArr = Array.isArray(newValue) ? newValue : [];
+            if (currentArr.length !== newArr.length) {
+                return false;
+            }
+            // Multiset compare: each new value must match a distinct current value.
+            // A plain `every(isOptionSelected)` would accept ['a','a'] as equal to
+            // ['a','b'] when both 'a' and 'b' map to options whose values overlap.
+            const remaining = currentArr.slice();
+            return newArr.every((val) => {
+                const idx = remaining.findIndex((c) => compareOptions(c, val, this.compareWith));
+                if (idx === -1) {
+                    return false;
+                }
+                remaining.splice(idx, 1);
+                return true;
+            });
+        }
+        if (currentValue == null && newValue == null) {
+            return true;
+        }
+        if (currentValue == null || newValue == null) {
+            return false;
+        }
+        return compareOptions(currentValue, newValue, this.compareWith);
+    }
     async connectedCallback() {
         const { el } = this;
+        this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
+            this.startContainerController?.calculateStartContainerWidth();
+            forceUpdate(this);
+        });
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        this.startContainerController = createStartContainerController(el, () => this.startContainerEl, () => {
+            return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline';
+        });
+        this.startContainerController.calculateStartContainerWidth();
         this.updateOverlayOptions();
         this.emitStyle();
         this.mutationO = watchForOptions(this.el, 'ion-select-option', async () => {
@@ -239,10 +285,18 @@ export class Select {
             this.mutationO.disconnect();
             this.mutationO = undefined;
         }
+        if (this.slotMutationController) {
+            this.slotMutationController.destroy();
+            this.slotMutationController = undefined;
+        }
         if (this.notchController) {
             this.notchController.destroy();
             this.notchController = undefined;
         }
+        if (this.startContainerController) {
+            this.startContainerController.destroy();
+            this.startContainerController = undefined;
+        }
         // Clean up validation observer to prevent memory leaks.
         if (this.validationObserver) {
             this.validationObserver.disconnect();
@@ -399,10 +453,11 @@ export class Select {
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
             const isSelected = isOptionSelected(selectValue, value, this.compareWith);
+            const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
             return {
-                role: isSelected ? 'selected' : '',
-                text: option.textContent,
+                text: content ?? '',
                 cssClass: optClass,
+                disabled: option.disabled,
                 handler: () => {
                     this.setValue(value);
                 },
@@ -410,6 +465,9 @@ export class Select {
                     'aria-checked': isSelected ? 'true' : 'false',
                     role: 'radio',
                 },
+                startContent,
+                endContent,
+                description: option.description,
             };
         });
         // Add "cancel" button
@@ -430,13 +488,19 @@ export class Select {
                 .filter((cls) => cls !== 'hydrated')
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
+            const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
             return {
                 type: inputType,
                 cssClass: optClass,
-                label: option.textContent || '',
+                label: content ?? '',
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
                 disabled: option.disabled,
+                startContent,
+                endContent,
+                description: option.description,
+                labelPlacement: option.labelPlacement,
+                justify: option.justify,
             };
         });
         return alertInputs;
@@ -449,8 +513,9 @@ export class Select {
                 .filter((cls) => cls !== 'hydrated')
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
+            const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
             return {
-                text: option.textContent || '',
+                text: content ?? '',
                 cssClass: optClass,
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
@@ -461,6 +526,11 @@ export class Select {
                         this.close();
                     }
                 },
+                startContent,
+                endContent,
+                description: option.description,
+                labelPlacement: option.labelPlacement,
+                justify: option.justify,
             };
         });
         return popoverOptions;
@@ -489,28 +559,43 @@ export class Select {
              */
         }
         else {
-            event = Object.assign(Object.assign({}, ev), { detail: {
+            event = {
+                ...ev,
+                detail: {
                     ionShadowTarget: this.nativeWrapperEl,
-                } });
+                },
+            };
         }
-        const popoverOpts = Object.assign(Object.assign({ mode,
-            event, alignment: 'center', size,
-            showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
+        const options = this.createOverlaySelectOptions(this.childOpts, value);
+        const hasRichContent = options.some((opt) => Boolean(opt.startContent) || Boolean(opt.endContent) || Boolean(opt.description));
+        const popoverOpts = {
+            mode,
+            event,
+            alignment: 'center',
+            size,
+            showBackdrop,
+            ...interfaceOptions,
+            component: 'ion-select-popover',
+            cssClass: [
+                'select-popover',
+                hasRichContent ? 'select-popover-rich-content' : undefined,
+                interfaceOptions.cssClass,
+            ],
+            componentProps: {
                 header: interfaceOptions.header,
                 subHeader: interfaceOptions.subHeader,
                 message: interfaceOptions.message,
                 multiple,
                 value,
-                options: this.createOverlaySelectOptions(this.childOpts, value),
-            } });
+                options,
+            },
+        };
         /**
          * Workaround for Stencil to autodefine
          * ion-select-popover and ion-popover when
          * using Custom Elements build.
          */
-        // eslint-disable-next-line
         if (false) {
-            // eslint-disable-next-line
             // @ts-ignore
             document.createElement('ion-select-popover');
             document.createElement('ion-popover');
@@ -520,15 +605,18 @@ export class Select {
     async openActionSheet() {
         const mode = getIonMode(this);
         const interfaceOptions = this.interfaceOptions;
-        const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
+        const actionSheetOpts = {
+            mode,
+            ...interfaceOptions,
+            buttons: this.createActionSheetButtons(this.childOpts, this.value),
+            cssClass: ['select-action-sheet', interfaceOptions.cssClass],
+        };
         /**
          * Workaround for Stencil to autodefine
          * ion-action-sheet when
          * using Custom Elements build.
          */
-        // eslint-disable-next-line
         if (false) {
-            // eslint-disable-next-line
             // @ts-ignore
             document.createElement('ion-action-sheet');
         }
@@ -538,7 +626,12 @@ export class Select {
         const interfaceOptions = this.interfaceOptions;
         const inputType = this.multiple ? 'checkbox' : 'radio';
         const mode = getIonMode(this);
-        const alertOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
+        const alertOpts = {
+            mode,
+            ...interfaceOptions,
+            header: interfaceOptions.header ? interfaceOptions.header : this.labelText,
+            inputs: this.createAlertInputs(this.childOpts, inputType, this.value),
+            buttons: [
                 {
                     text: this.cancelText,
                     role: 'cancel',
@@ -552,19 +645,19 @@ export class Select {
                         this.setValue(selectedValues);
                     },
                 },
-            ], cssClass: [
+            ],
+            cssClass: [
                 'select-alert',
                 interfaceOptions.cssClass,
                 this.multiple ? 'multiple-select-alert' : 'single-select-alert',
-            ] });
+            ],
+        };
         /**
          * Workaround for Stencil to autodefine
          * ion-alert when
          * using Custom Elements build.
          */
-        // eslint-disable-next-line
         if (false) {
-            // eslint-disable-next-line
             // @ts-ignore
             document.createElement('ion-alert');
         }
@@ -573,21 +666,25 @@ export class Select {
     openModal() {
         const { multiple, value, interfaceOptions } = this;
         const mode = getIonMode(this);
-        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
+        const modalOpts = {
+            ...interfaceOptions,
+            mode,
+            cssClass: ['select-modal', interfaceOptions.cssClass],
+            component: 'ion-select-modal',
+            componentProps: {
                 header: interfaceOptions.header,
                 cancelText: this.cancelText,
                 multiple,
                 value,
                 options: this.createOverlaySelectOptions(this.childOpts, value),
-            } });
+            },
+        };
         /**
          * Workaround for Stencil to autodefine
          * ion-select-modal and ion-modal when
          * using Custom Elements build.
          */
-        // eslint-disable-next-line
         if (false) {
-            // eslint-disable-next-line
             // @ts-ignore
             document.createElement('ion-select-modal');
             document.createElement('ion-modal');
@@ -628,12 +725,18 @@ export class Select {
         }
         return;
     }
-    getText() {
+    /**
+     * Returns the text to display in the select based on the selected value.
+     *
+     * @param useHTML If `true`, the returned text will include any custom HTML content from the selected option. If `false`, the returned text will be plain text without any HTML. Defaults to `false`.
+     * @returns The text to display in the select, either with or without HTML based on the `useHTML` parameter.
+     */
+    getText(useHTML = false) {
         const selectedText = this.selectedText;
         if (selectedText != null && selectedText !== '') {
             return selectedText;
         }
-        return generateText(this.childOpts, this.value, this.compareWith);
+        return generateText(this.childOpts, this.value, this.compareWith, useHTML);
     }
     setFocus() {
         if (this.focusEl) {
@@ -655,8 +758,8 @@ export class Select {
             }, part: "label" }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
     }
     componentDidRender() {
-        var _a;
-        (_a = this.notchController) === null || _a === void 0 ? void 0 : _a.calculateNotchWidth();
+        this.notchController?.calculateNotchWidth();
+        this.startContainerController?.calculateStartContainerWidth();
     }
     /**
      * Gets any content passed into the `label` slot,
@@ -675,33 +778,53 @@ export class Select {
         return this.label !== undefined || this.labelSlot !== null;
     }
     /**
-     * Renders the border container
-     * when fill="outline".
+     * Renders the outline border with a notch for the label.
      */
-    renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
-        if (hasOutlineFill) {
-            /**
-             * The outline fill has a special outline
-             * that appears around the select and the label.
-             * Certain stacked and floating label placements cause the
-             * label to translate up and create a "cut out"
-             * inside of that border by using the notch-spacer element.
-             */
-            return [
-                h("div", { class: "select-outline-container" }, h("div", { class: "select-outline-start" }), h("div", { class: {
-                        'select-outline-notch': true,
-                        'select-outline-notch-hidden': !this.hasLabel,
-                    } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "select-outline-end" })),
-                this.renderLabel(),
-            ];
+    renderOutlineContainer() {
+        return (h("div", { class: "select-outline-container" }, h("div", { class: "select-outline-start" }), h("div", { class: {
+                'select-outline-notch': true,
+                'select-outline-notch-hidden': !this.hasLabel,
+            } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "select-outline-end" })));
+    }
+    /**
+     * Wraps text nodes in the select text with span elements
+     * so spacing can be added between elements without
+     * changing the display to prevent losing the ellipses
+     * behavior.
+     *
+     * Only wraps when the string contains HTML elements
+     * alongside text.
+     */
+    wrapSelectTextNodes(html) {
+        const temp = document.createElement('div');
+        temp.innerHTML = html;
+        const hasElements = Array.from(temp.childNodes).some((n) => n.nodeType === Node.ELEMENT_NODE);
+        // Return the plain text
+        if (!hasElements) {
+            return html;
         }
-        /**
-         * If not using the outline style,
-         * we can render just the label.
-         */
-        return this.renderLabel();
+        Array.from(temp.childNodes).forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+                const text = node.textContent;
+                /**
+                 * Split comma separator from the text content
+                 * e.g., ", Bacon" becomes ", " text node + <span>Bacon</span>.
+                 */
+                const commaMatch = text.match(/^(,\s*)(.*)/);
+                if (commaMatch) {
+                    const commaNode = document.createTextNode(commaMatch[1]);
+                    const wrapper = document.createElement('span');
+                    wrapper.textContent = commaMatch[2];
+                    node.parentNode?.replaceChild(wrapper, node);
+                    wrapper.parentNode?.insertBefore(commaNode, wrapper);
+                    return;
+                }
+                const wrapper = document.createElement('span');
+                node.parentNode?.replaceChild(wrapper, node);
+                wrapper.appendChild(node);
+            }
+        });
+        return temp.innerHTML;
     }
     /**
      * Renders either the placeholder
@@ -710,7 +833,7 @@ export class Select {
      */
     renderSelectText() {
         const { placeholder } = this;
-        const displayValue = this.getText();
+        const displayValue = this.getText(true);
         let addPlaceholderClass = false;
         let selectText = displayValue;
         if (selectText === '' && placeholder !== undefined) {
@@ -722,6 +845,10 @@ export class Select {
             'select-placeholder': addPlaceholderClass,
         };
         const textPart = addPlaceholderClass ? 'placeholder' : 'text';
+        if (this.customHTMLEnabled) {
+            const wrapped = this.wrapSelectTextNodes(selectText);
+            return h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart, innerHTML: wrapped });
+        }
         return (h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText));
     }
     /**
@@ -737,16 +864,16 @@ export class Select {
         }
         else {
             const defaultIcon = mode === 'ios' ? chevronExpand : caretDownSharp;
-            icon = toggleIcon !== null && toggleIcon !== void 0 ? toggleIcon : defaultIcon;
+            icon = toggleIcon ?? defaultIcon;
         }
         return h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
     }
     get ariaLabel() {
-        var _a;
         const { placeholder, inheritedAttributes } = this;
+        // Get the plain text from the selected text
         const displayValue = this.getText();
         // The aria label should be preferred over visible text if both are specified
-        const definedLabel = (_a = inheritedAttributes['aria-label']) !== null && _a !== void 0 ? _a : this.labelText;
+        const definedLabel = inheritedAttributes['aria-label'] ?? this.labelText;
         /**
          * If developer has specified a placeholder
          * and there is nothing selected, the selectText
@@ -817,27 +944,10 @@ export class Select {
         const inItem = hostContext('ion-item', this.el);
         const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
-        const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
+        const hasOutlineFill = mode === 'md' && fill === 'outline';
         renderHiddenInput(true, el, name, parseValue(value), disabled);
-        /**
-         * If the label is stacked, it should always sit above the select.
-         * For floating labels, the label should move above the select if
-         * the select has a value, is open, or has anything in either
-         * the start or end slot.
-         *
-         * If there is content in the start slot, the label would overlap
-         * it if not forced to float. This is also applied to the end slot
-         * because with the default or solid fills, the select is not
-         * vertically centered in the container, but the label is. This
-         * causes the slots and label to appear vertically offset from each
-         * other when the label isn't floating above the input. This doesn't
-         * apply to the outline fill, but this was not accounted for to keep
-         * things consistent.
-         *
-         * TODO(FW-5592): Remove hasStartEndSlots condition
-         */
-        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '5f4ee901b65554eacc9fa52230d06b1a5ff1247c', onClick: this.onClick, class: createColorClasses(this.color, {
+        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
+        return (h(Host, { key: 'b2f161e3706e139e61440cd13e162714b1b75d72', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -855,7 +965,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'd56d89b5b58da2b5eaebada9d1be58ca45c67806', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'bc8bf089c693781ad5b3a5db76a12223867d748e', class: "select-wrapper-inner", part: "inner" }, h("slot", { key: 'e1c12b96f1573eb192608c458ed1f3463174cd89', name: "start" }), h("div", { key: '6ee5e3900d8e462f175649b502ac6faa2f2b9909', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'faeaea34aad412e1458beab95d4b1b9ca7b87c41', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'aeff51e51c990844869eff9940575ce6b2223135', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '944a2eb468154a21260d181fdaf67828a71eb902', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '927200c53548b1bb4f52d6a167605b724a7b7d0d', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '6e14b95e9b95c116b16744d630600e90977782bc', name: "start" })), h("div", { key: '8451ed4300ac005963075be36a04ea8763bc0fdd', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '207e7b63f3224a4870579365ac992da6784fb31f', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: '5c17367d488db4d570f31b25e33560efa9011500', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '21fd8c0d9bee8cffef9ef6984cacd31e8f38211c', name: "end" })), shouldRenderHighlight && h("div", { key: '1fff767db9a1ec07b274ef65ff7ae8fb976e6ad2', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1515,25 +1625,229 @@ const parseValue = (value) => {
     }
     return value.toString();
 };
-const generateText = (opts, value, compareWith) => {
+const generateText = (opts, value, compareWith, useHTML = false) => {
     if (value === undefined) {
         return '';
     }
     if (Array.isArray(value)) {
         return value
-            .map((v) => textForValue(opts, v, compareWith))
+            .map((v) => textForValue(opts, v, compareWith, useHTML))
             .filter((opt) => opt !== null)
             .join(', ');
     }
     else {
-        return textForValue(opts, value, compareWith) || '';
+        return textForValue(opts, value, compareWith, useHTML) || '';
     }
 };
-const textForValue = (opts, value, compareWith) => {
+/**
+ * Returns the display text for a given value from the list of options.
+ * When `useHTML` is true, returns sanitized HTML for the select text.
+ * When `useHTML` is false, returns plain text for aria-label and other
+ * text-only contexts.
+ *
+ * @param opts - The list of ion-select-option elements.
+ * @param value - The value to find the matching option for.
+ * @param compareWith - Custom comparison function or property name.
+ * @param useHTML - If true, returns HTML string. If false, returns plain text.
+ */
+const textForValue = (opts, value, compareWith, useHTML = false) => {
     const selectOpt = opts.find((opt) => {
         return compareOptions(value, getOptionValue(opt), compareWith);
     });
-    return selectOpt ? selectOpt.textContent : null;
+    const customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    if (!selectOpt) {
+        return null;
+    }
+    // Return sanitized HTML for the select text
+    if (customHTMLEnabled && useHTML) {
+        return getOptionContent(selectOpt, undefined, true);
+    }
+    /**
+     * Every text-only context reads only the default slot, so the start
+     * and end slots stay out of the `aria-label` and the overlay labels.
+     * Both config paths derive that text through the same helper, so they
+     * cannot disagree about what an option's text is. `null` marks an
+     * option with no text, which is dropped from the joined text of a
+     * `multiple` select rather than joined in as an empty entry.
+     */
+    return getDefaultSlotPlainText(selectOpt) || null;
+};
+/**
+ * Trims whitespace from all text nodes within a DOM tree.
+ * This prevents invisible layout shifts and unwanted gaps between
+ * elements when HTML content is injected via innerHTML or cloneNode,
+ * as browsers preserve whitespace (tabs, newlines, spaces) from
+ * the original source markup.
+ *
+ * @param node The root node to start trimming text nodes from.
+ */
+const trimTextNodes = (node) => {
+    node.childNodes.forEach((child) => {
+        if (child.nodeType === Node.TEXT_NODE) {
+            child.textContent = child.textContent?.trim() || '';
+        }
+        else if (child.nodeType === Node.ELEMENT_NODE) {
+            trimTextNodes(child);
+        }
+    });
+};
+/**
+ * Extracts and clones content from an `ion-select-option` element
+ * for rendering within overlay interfaces or the select text when `customHTMLEnabled` is `true`.
+ *
+ * @param option - The `ion-select-option` element to extract content from.
+ * @param slotName - Optional slot name to extract. If omitted, extracts the default slot content.
+ * @param useHTML - If `true`, the returned string will include any custom HTML content. If `false`, the returned string will be plain text without any HTML.
+ * @returns When `useHTML` is `true`, a sanitized HTML string. When `false`, a
+ * div element containing cloned child nodes. Returns `null` if no matching
+ * content is found.
+ */
+const getOptionContent = (option, slotName, useHTML = false) => {
+    let nodes;
+    if (slotName) {
+        // Named slot: get elements with matching slot attribute
+        nodes = Array.from(option.children).filter((el) => el.getAttribute('slot') === slotName);
+    }
+    else {
+        // Default slot: get nodes without a slot attribute
+        const defaultSlot = getOptionDefaultSlot(option) || [];
+        nodes = defaultSlot.filter((node) => {
+            /**
+             * Exclude whitespace-only text nodes (newline noise between
+             * markup elements). Element nodes are always kept, even when
+             * their textContent is empty (e.g. <svg>, <img>).
+             */
+            if (node.nodeType === Node.TEXT_NODE) {
+                return node.textContent?.trim().length !== 0;
+            }
+            return true;
+        });
+    }
+    if (nodes.length === 0) {
+        return null;
+    }
+    /**
+     * Return plain text if no elements are found. This reads the option the
+     * same way the non-custom-HTML path does, so the two do not disagree
+     * about what an option's text is.
+     */
+    if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
+        return getDefaultSlotPlainText(option) || null;
+    }
+    /**
+     * Mirror known custom-element properties (e.g. ion-icon's `icon`)
+     * onto attributes before cloning. Frameworks like Vue set these as
+     * DOM properties, which `cloneNode` doesn't copy, so without this
+     * step the cloned overlay copy renders without the prop's value.
+     */
+    nodes.forEach((n) => {
+        if (n.nodeType === Node.ELEMENT_NODE) {
+            reflectPropertiesToAttributes(n);
+        }
+    });
+    // Clone each node into a temporary container
+    const container = document.createElement('div');
+    nodes.forEach((n) => {
+        const clone = n.cloneNode(true);
+        if (clone.nodeType === Node.TEXT_NODE) {
+            clone.textContent = clone.textContent?.trim() || '';
+        }
+        else {
+            trimTextNodes(clone);
+        }
+        container.appendChild(clone);
+    });
+    /**
+     * Sanitize the cloned DOM in place. Trusted attributes (size, color,
+     * shape, etc.) are preserved; event handlers, javascript: URLs, and
+     * blocked tags are stripped.
+     */
+    sanitizeDOMTree(container);
+    if (useHTML) {
+        return container.innerHTML.trim() || null;
+    }
+    return container;
+};
+/**
+ * Returns the child nodes that belong to the default slot of an
+ * option element, excluding any nodes that are assigned to named
+ * slots.
+ *
+ * @param option - The `ion-select-option` element to extract default-slot nodes from.
+ * @returns An array of default slot nodes, or `null` if none are found.
+ */
+const getOptionDefaultSlot = (option) => {
+    const defaultSlotNodes = Array.from(option.childNodes).filter((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            return !node.hasAttribute('slot');
+        }
+        return node.nodeType === Node.TEXT_NODE;
+    });
+    if (defaultSlotNodes.length === 0) {
+        return null;
+    }
+    return defaultSlotNodes;
+};
+/**
+ * Concatenates the text a node renders, skipping the subtrees of tags
+ * whose contents the browser never paints (`script`, `style`, and the
+ * rest of `blockedTags`). `textContent` includes those, so reading it
+ * directly would put stylesheet or script source into the select text
+ * and the `aria-label`.
+ *
+ * @param node - The node to read text from.
+ * @returns The node's rendered text.
+ */
+const getRenderedTextContent = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent ?? '';
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+        return '';
+    }
+    if (blockedTags.includes(node.tagName.toLowerCase())) {
+        return '';
+    }
+    return Array.from(node.childNodes)
+        .map((child) => getRenderedTextContent(child))
+        .join('');
+};
+/**
+ * Extracts plain text from only the default slot of an option,
+ * excluding content assigned to named slots (start/end). Text is
+ * concatenated with no separator and collapsible whitespace is
+ * collapsed, approximating how the browser renders the option.
+ * NBSP is not collapsible, so it is preserved.
+ *
+ * @param option - The `ion-select-option` element to read text from.
+ * @returns The option's default slot text.
+ */
+const getDefaultSlotPlainText = (option) => {
+    const text = (getOptionDefaultSlot(option) ?? []).map((node) => getRenderedTextContent(node)).join('');
+    return text.replace(/[ \t\n\r\f]+/g, ' ').replace(/^[ \t\n\r\f]+|[ \t\n\r\f]+$/g, '');
+};
+/**
+ * Extracts the rich content from an `ion-select-option`.
+ * When `customHTMLEnabled` is `false`, only the plain text from the
+ * default slot is read and the start and end slots are skipped.
+ *
+ * @param option - The `ion-select-option` element to extract content from.
+ * @param customHTMLEnabled - Whether custom HTML rendering is enabled
+ * via the `innerHTMLTemplatesEnabled` config.
+ */
+const extractOptionContent = (option, customHTMLEnabled) => {
+    if (!customHTMLEnabled) {
+        return {
+            content: getDefaultSlotPlainText(option),
+            startContent: undefined,
+            endContent: undefined,
+        };
+    }
+    return {
+        content: getOptionContent(option),
+        startContent: getOptionContent(option, 'start') ?? undefined,
+        endContent: getOptionContent(option, 'end') ?? undefined,
+    };
 };
 let selectIds = 0;
 const OPTION_CLASS = 'select-interface-option';