@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-nightly.20260814

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

@@ -1,24 +1,19 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretDownRegular from "@phosphor-icons/core/assets/regular/caret-down.svg";
 import { Build, Host, h, forceUpdate } from "@stencil/core";
-import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from "../../utils/forms/index";
-import { suppressFocusVisible, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
+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 { reflectPropertiesToAttributes, sanitizeDOMTree } from "../../utils/sanitization/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { watchForOptions } from "../../utils/watch-options";
 import { caretDownSharp, chevronExpand } from "ionicons/icons";
-import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML.
  * @slot start - Content to display at the leading edge of the select.
@@ -42,7 +37,6 @@ 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
@@ -61,14 +55,6 @@ export class Select {
          * The text to display on the cancel button.
          */
         this.cancelText = 'Cancel';
-        /**
-         * If `true`, the cancel button will display an icon instead of the `cancelText`.
-         * Only applies when `interface` is set to `"modal"`. Has no effect on `"action-sheet"`,
-         * `"alert"`, or `"popover"` interfaces.
-         * When `cancelIcon` is `true`, the `cancelText` property is ignored for display
-         * but is used as the accessible label for the icon button.
-         */
-        this.cancelIcon = false;
         /**
          * If `true`, the user cannot interact with the select.
          */
@@ -278,65 +264,44 @@ export class Select {
         // Add logic to scroll selected item into view before presenting
         const scrollSelectedIntoView = () => {
             const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
-            /**
-             * Determine which option to focus when the overlay opens: the selected
-             * option if the select has a value, otherwise the first enabled option.
-             */
-            let optionToFocus = null;
             if (indexOfSelected > -1) {
                 const selectedItem = overlay.querySelector(`.select-interface-option:nth-of-type(${indexOfSelected + 1})`);
-                /**
-                 * If the option contains an `ion-radio` or `ion-checkbox`, focus
-                 * that instead of the option element itself. This ensures that
-                 * screen readers will announce the role and state of the element
-                 * (e.g. "radio button, checked") rather than only the option text.
-                 * Alert and action sheet options are plain buttons, so fall back to
-                 * focusing the option element itself in those cases.
-                 */
                 if (selectedItem) {
+                    /**
+                     * Browsers such as Firefox do not
+                     * correctly delegate focus when manually
+                     * focusing an element with delegatesFocus.
+                     * We work around this by manually focusing
+                     * the interactive element.
+                     * ion-radio and ion-checkbox are the only
+                     * elements that ion-select-popover uses, so
+                     * we only need to worry about those two components
+                     * when focusing.
+                     */
                     const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
                     if (interactiveEl) {
                         selectedItem.scrollIntoView({ block: 'nearest' });
+                        // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
+                        // and removing `ion-focused` style
+                        interactiveEl.setFocus();
                     }
-                    optionToFocus = interactiveEl !== null && interactiveEl !== void 0 ? interactiveEl : selectedItem;
+                    focusVisibleElement(selectedItem);
                 }
             }
             else {
                 /**
                  * If no value is set then focus the first enabled option.
                  */
-                optionToFocus = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
-            }
-            if (optionToFocus) {
-                /**
-                 * Focus the option directly (`setFocus()`/`focus()`) rather than
-                 * with `focusVisibleElement()`. `focusVisibleElement()` forces the
-                 * `ion-focused` focus ring on regardless of how the overlay was
-                 * opened, whereas a plain focus lets the focus-visible utility
-                 * decide: it shows the ring only when the overlay was opened with
-                 * the keyboard and hides it for pointer opens.
-                 *
-                 * `ion-radio` and `ion-checkbox` expose `setFocus`, which correctly
-                 * delegates focus to their inner focusable element. This is needed
-                 * because browsers such as Firefox do not delegate focus correctly
-                 * when focusing an element with delegatesFocus. When the option is
-                 * a plain button it can be focused directly.
-                 */
-                if (optionToFocus.matches('ion-radio, ion-checkbox')) {
-                    optionToFocus.setFocus();
-                }
-                else {
-                    optionToFocus.focus();
-                }
-                /**
-                 * In the alert interface, when tabbing and pressing enter to open
-                 * the select, the value that is currently selected flashes the
-                 * focused state briefly before moving to its wrapper. This suppresses
-                 * the focus visible state, so that the option will only show as
-                 * focused when navigating with the keyboard.
-                 */
-                if (this.interface === 'alert') {
-                    suppressFocusVisible();
+                const firstEnabledOption = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
+                if (firstEnabledOption) {
+                    /**
+                     * Focus the option for the same reason as we do above.
+                     *
+                     * Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
+                     * and removing `ion-focused` style
+                     */
+                    firstEnabledOption.setFocus();
+                    focusVisibleElement(firstEnabledOption.closest('ion-item'));
                 }
             }
         };
@@ -434,12 +399,10 @@ 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: content !== null && content !== void 0 ? content : '',
+                text: option.textContent,
                 cssClass: optClass,
-                disabled: option.disabled,
                 handler: () => {
                     this.setValue(value);
                 },
@@ -447,9 +410,6 @@ export class Select {
                     'aria-checked': isSelected ? 'true' : 'false',
                     role: 'radio',
                 },
-                startContent,
-                endContent,
-                description: option.description,
             };
         });
         // Add "cancel" button
@@ -470,19 +430,13 @@ 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: content !== null && content !== void 0 ? content : '',
+                label: option.textContent || '',
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
                 disabled: option.disabled,
-                startContent,
-                endContent,
-                description: option.description,
-                labelPlacement: option.labelPlacement,
-                justify: option.justify,
             };
         });
         return alertInputs;
@@ -495,9 +449,8 @@ export class Select {
                 .filter((cls) => cls !== 'hydrated')
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
-            const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
             return {
-                text: content !== null && content !== void 0 ? content : '',
+                text: option.textContent || '',
                 cssClass: optClass,
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
@@ -508,11 +461,6 @@ export class Select {
                         this.close();
                     }
                 },
-                startContent,
-                endContent,
-                description: option.description,
-                labelPlacement: option.labelPlacement,
-                justify: option.justify,
             };
         });
         return popoverOptions;
@@ -520,8 +468,8 @@ export class Select {
     async openPopover(ev) {
         const { fill, labelPlacement } = this;
         const interfaceOptions = this.interfaceOptions;
-        const theme = getIonTheme(this);
-        const showBackdrop = theme === 'md' ? false : true;
+        const mode = getIonMode(this);
+        const showBackdrop = mode === 'md' ? false : true;
         const multiple = this.multiple;
         const value = this.value;
         let event = ev;
@@ -532,7 +480,7 @@ export class Select {
          * when using a fill in MD mode or if the
          * label is floating/stacked.
          */
-        if (hasFloatingOrStackedLabel || (theme === 'md' && fill !== undefined)) {
+        if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
             size = 'cover';
             /**
              * Otherwise the popover
@@ -545,21 +493,15 @@ export class Select {
                     ionShadowTarget: this.nativeWrapperEl,
                 } });
         }
-        const options = this.createOverlaySelectOptions(this.childOpts, value);
-        const hasRichContent = options.some((opt) => opt.startContent || opt.endContent || opt.description);
-        const popoverOpts = Object.assign(Object.assign({ theme,
+        const popoverOpts = Object.assign(Object.assign({ mode,
             event, alignment: 'center', size,
-            showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: [
-                'select-popover',
-                hasRichContent ? 'select-popover-rich-content' : undefined,
-                interfaceOptions.cssClass,
-            ], componentProps: {
+            showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
                 header: interfaceOptions.header,
                 subHeader: interfaceOptions.subHeader,
                 message: interfaceOptions.message,
                 multiple,
                 value,
-                options,
+                options: this.createOverlaySelectOptions(this.childOpts, value),
             } });
         /**
          * Workaround for Stencil to autodefine
@@ -576,9 +518,9 @@ export class Select {
         return popoverController.create(popoverOpts);
     }
     async openActionSheet() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const interfaceOptions = this.interfaceOptions;
-        const actionSheetOpts = Object.assign(Object.assign({ theme }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
+        const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
         /**
          * Workaround for Stencil to autodefine
          * ion-action-sheet when
@@ -595,8 +537,8 @@ export class Select {
     async openAlert() {
         const interfaceOptions = this.interfaceOptions;
         const inputType = this.multiple ? 'checkbox' : 'radio';
-        const theme = getIonTheme(this);
-        const alertOpts = Object.assign(Object.assign({ theme }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
+        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: [
                 {
                     text: this.cancelText,
                     role: 'cancel',
@@ -630,11 +572,10 @@ export class Select {
     }
     openModal() {
         const { multiple, value, interfaceOptions } = this;
-        const theme = getIonTheme(this);
-        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode: theme, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
+        const mode = getIonMode(this);
+        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
                 header: interfaceOptions.header,
                 cancelText: this.cancelText,
-                cancelIcon: this.cancelIcon,
                 multiple,
                 value,
                 options: this.createOverlaySelectOptions(this.childOpts, value),
@@ -687,18 +628,12 @@ export class Select {
         }
         return;
     }
-    /**
-     * 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) {
+    getText() {
         const selectedText = this.selectedText;
         if (selectedText != null && selectedText !== '') {
             return selectedText;
         }
-        return generateText(this.childOpts, this.value, this.compareWith, useHTML);
+        return generateText(this.childOpts, this.value, this.compareWith);
     }
     setFocus() {
         if (this.focusEl) {
@@ -712,18 +647,6 @@ export class Select {
         };
         this.ionStyle.emit(style);
     }
-    getSize() {
-        const theme = getIonTheme(this);
-        const { size } = this;
-        // TODO(ROU-11370): Remove theme check when sizes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (size === undefined) {
-            return 'medium';
-        }
-        return size;
-    }
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
@@ -756,8 +679,8 @@ export class Select {
      * when fill="outline".
      */
     renderLabelContainer() {
-        const theme = getIonTheme(this);
-        const hasOutlineFill = theme === 'md' && this.fill === 'outline';
+        const mode = getIonMode(this);
+        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
         if (hasOutlineFill) {
             /**
              * The outline fill has a special outline
@@ -780,47 +703,6 @@ export class Select {
          */
         return this.renderLabel();
     }
-    /**
-     * 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;
-        }
-        Array.from(temp.childNodes).forEach((node) => {
-            var _a, _b, _c, _d;
-            if (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.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];
-                    (_b = node.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(wrapper, node);
-                    (_c = wrapper.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(commaNode, wrapper);
-                    return;
-                }
-                const wrapper = document.createElement('span');
-                (_d = node.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(wrapper, node);
-                wrapper.appendChild(node);
-            }
-        });
-        return temp.innerHTML;
-    }
     /**
      * Renders either the placeholder
      * or the selected values based on
@@ -828,7 +710,7 @@ export class Select {
      */
     renderSelectText() {
         const { placeholder } = this;
-        const displayValue = this.getText(true);
+        const displayValue = this.getText();
         let addPlaceholderClass = false;
         let selectText = displayValue;
         if (selectText === '' && placeholder !== undefined) {
@@ -840,10 +722,6 @@ 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));
     }
     /**
@@ -851,17 +729,21 @@ export class Select {
      * next to the select text.
      */
     renderSelectIcon() {
-        const { isExpanded, selectExpandedIcon, selectCollapsedIcon } = this;
-        let icon = selectCollapsedIcon;
-        if (isExpanded) {
-            icon = selectExpandedIcon;
+        const mode = getIonMode(this);
+        const { isExpanded, toggleIcon, expandedIcon } = this;
+        let icon;
+        if (isExpanded && expandedIcon !== undefined) {
+            icon = expandedIcon;
+        }
+        else {
+            const defaultIcon = mode === 'ios' ? chevronExpand : caretDownSharp;
+            icon = toggleIcon !== null && toggleIcon !== void 0 ? 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;
@@ -890,63 +772,6 @@ export class Select {
         const { disabled, inputId, isExpanded, required } = this;
         return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        // TODO(ROU-11366): Remove theme check when shapes are defined for all themes.
-        if (theme === 'ionic' && shape === undefined) {
-            return 'round';
-        }
-        return shape;
-    }
-    /**
-     * Get the icon to use for the expand icon.
-     * If an icon is set on the component, use that.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get selectExpandedIcon() {
-        // Return the expandedIcon or toggleIcon if either is explicitly set
-        if (this.expandedIcon != null) {
-            return this.expandedIcon;
-        }
-        else if (this.toggleIcon != null) {
-            return this.toggleIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronExpand,
-            ionic: caretDownRegular,
-            md: caretDownSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured select expanded icon or the default icon
-        return config.get('selectExpandedIcon', defaultIcon);
-    }
-    /**
-     * Get the icon to use for the collapsed icon.
-     * If an icon is set on the component, use that.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get selectCollapsedIcon() {
-        // Return the toggleIcon if it is explicitly set
-        if (this.toggleIcon) {
-            return this.toggleIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronExpand,
-            ionic: caretDownRegular,
-            md: caretDownSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        return config.get('selectCollapsedIcon', defaultIcon);
-    }
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         if (isInvalid && errorText) {
@@ -984,17 +809,13 @@ export class Select {
         return (h("div", { class: "select-bottom", part: "bottom" }, this.renderHintText()));
     }
     render() {
-        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, name, value, hasFocus, } = this;
-        const theme = getIonTheme(this);
-        const shape = this.getShape();
+        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value, hasFocus, } = this;
+        const mode = getIonMode(this);
         const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
-        const shouldRenderOuterIcon = theme !== 'ionic' && hasFloatingOrStackedLabel;
-        const shouldRenderInnerIcon = theme === 'ionic' || !hasFloatingOrStackedLabel;
         const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const inItem = hostContext('ion-item', this.el);
-        const size = this.getSize();
-        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
+        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         renderHiddenInput(true, el, name, parseValue(value), disabled);
@@ -1017,8 +838,8 @@ export class Select {
          */
         const labelShouldFloat = labelPlacement === 'stacked' ||
             (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '9339cb236070c47333154d96c336dc1df9a11e1c', onClick: this.onClick, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: 'f16327d6866ffee76e1618fcd3281590ca0fd56d', onClick: this.onClick, class: createColorClasses(this.color, {
+                [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
                 'select-disabled': disabled,
@@ -1035,33 +856,20 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-                [`select-size-${size}`]: size !== undefined,
-            }) }, h("label", { key: 'db8f0b67592f4b99f5e16d06ee8120852a60f4d1', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '30313c0f3034be59605b368d15af4ba00202a5f4', class: "select-wrapper-inner", part: "inner" }, 
-        /**
-         * For the ionic theme, we render the outline container here
-         * instead of higher up, so it can be positioned relative to
-         * the native wrapper instead of the <label> element or the
-         * entire component. This allows the label text to be positioned
-         * above the outline, while staying within the bounds of the
-         * <label> element, ensuring that clicking the label text
-         * focuses the select.
-         */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: '78bba2953ba88efd1189afa31e8229a8972175e5', class: "select-outline" }), h("slot", { key: '086505d193a19677d33e26a5a116783d999c6861', name: "start" }), h("div", { key: '5bb7863236596cad5c1118be1ae54898b638b760', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '38744ee0cc6750f84d11470c09a4e950d73f1e44', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '4eecb0df50800d16bea58c5649e68e06b122e472', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'db13f76b384a7a7461c1ad752108eadf9c0213be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '2fb0e57bd596c0f525be79293b7da4aca55a9385', class: "select-wrapper-inner", part: "inner" }, h("slot", { key: 'cd694c36242789a89461ed3412af9891ad68411b', name: "start" }), h("div", { key: 'fdf62911be54f4ab29eb3c2eb153f082e76a8f49', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'a32f5c4b101d4d6ad45870f4c4446960009377f5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '61f792024a5f221ef4f28a3c249bd3a0de5edeab', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["select.ios.scss"],
-            "md": ["select.md.scss"],
-            "ionic": ["select.ionic.scss"]
+            "md": ["select.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select.ios.css"],
-            "md": ["select.md.css"],
-            "ionic": ["select.ionic.css"]
+            "md": ["select.md.css"]
         };
     }
     static get properties() {
@@ -1086,26 +894,6 @@ export class Select {
                 "attribute": "cancel-text",
                 "defaultValue": "'Cancel'"
             },
-            "cancelIcon": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the cancel button will display an icon instead of the `cancelText`.\nOnly applies when `interface` is set to `\"modal\"`. Has no effect on `\"action-sheet\"`,\n`\"alert\"`, or `\"popover\"` interfaces.\nWhen `cancelIcon` is `true`, the `cancelText` property is ignored for display\nbut is used as the accessible label for the icon button."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "cancel-icon",
-                "defaultValue": "false"
-            },
             "color": {
                 "type": "string",
                 "mutable": false,
@@ -1190,7 +978,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in the `\"md\"` theme."
+                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode."
                 },
                 "getter": false,
                 "setter": false,
@@ -1450,7 +1238,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The toggle icon to use. Defaults to `\"chevronExpand\"` for the `\"ios\"` theme,\nor `\"caretDownSharp\"` for the `\"md\"` and `\"ionic\"` themes."
+                    "text": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode."
                 },
                 "getter": false,
                 "setter": false,
@@ -1469,89 +1257,70 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `\"md\"` theme will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed."
+                    "text": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "expanded-icon"
             },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
-            },
             "shape": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'soft' | 'round' | 'rectangular'",
-                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "original": "'round'",
+                    "resolved": "\"round\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"soft\"` for a select with slightly rounded corners,\n`\"round\"` for a select with fully rounded corners,\nor `\"rectangular\"` for a select without rounded corners.\n\nDefaults to `\"round\"` for the `\"ionic\"` theme, undefined for all other themes."
+                    "text": "The shape of the select. If \"round\" it will have an increased border radius."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "shape"
             },
-            "size": {
-                "type": "string",
-                "mutable": false,
+            "value": {
+                "type": "any",
+                "mutable": true,
                 "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+                    "original": "any | null",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the select. If \"large\" it will increase the height of the select, while\n\"small\" and \"medium\" provide progressively smaller heights.\n\nDefaults to `\"medium\"` for the ionic theme, and  undefined for all other themes."
+                    "text": "The value of the select."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "size"
+                "attribute": "value"
             },
-            "value": {
-                "type": "any",
-                "mutable": true,
+            "required": {
+                "type": "boolean",
+                "mutable": false,
                 "complexType": {
-                    "original": "any | null",
-                    "resolved": "any",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the select."
+                    "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "required",
+                "defaultValue": "false"
             }
         };
     }
@@ -1747,223 +1516,25 @@ const parseValue = (value) => {
     }
     return value.toString();
 };
-const generateText = (opts, value, compareWith, useHTML = false) => {
+const generateText = (opts, value, compareWith) => {
     if (value === undefined) {
         return '';
     }
     if (Array.isArray(value)) {
         return value
-            .map((v) => textForValue(opts, v, compareWith, useHTML))
+            .map((v) => textForValue(opts, v, compareWith))
             .filter((opt) => opt !== null)
             .join(', ');
     }
     else {
-        return textForValue(opts, value, compareWith, useHTML) || '';
+        return 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 textForValue = (opts, value, compareWith) => {
     const selectOpt = opts.find((opt) => {
         return compareOptions(value, getOptionValue(opt), compareWith);
     });
-    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);
-    }
-    /**
-     * When custom HTML is enabled, extract only the default slot content.
-     * This ensures aria-label and other text-only contexts read only
-     * the relevant option text.
-     */
-    if (customHTMLEnabled) {
-        const content = getOptionContent(selectOpt);
-        if (typeof content === 'string') {
-            return content;
-        }
-        /**
-         * Elements were found in the default slot, extract and concatenate
-         * their text content while trimming whitespace.
-         */
-        if (content) {
-            const texts = Array.from(content.childNodes)
-                .map((n) => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
-                .filter((t) => t);
-            return texts.join(' ') || null;
-        }
-        // Empty option
-        return null;
-    }
-    return getDefaultSlotPlainText(selectOpt);
-};
-/**
- * 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) => {
-        var _a;
-        if (child.nodeType === Node.TEXT_NODE) {
-            child.textContent = ((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.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) => {
-            var _a;
-            /**
-             * 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 ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) !== 0;
-            }
-            return true;
-        });
-    }
-    if (nodes.length === 0) {
-        return null;
-    }
-    // Return plain text if no elements are found
-    if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
-        return nodes.map((n) => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); }).join(' ') || 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) => {
-        var _a;
-        const clone = n.cloneNode(true);
-        if (clone.nodeType === Node.TEXT_NODE) {
-            clone.textContent = ((_a = clone.textContent) === null || _a === void 0 ? void 0 : _a.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;
-};
-/**
- * Extracts plain text from only the default slot of an option,
- * excluding content assigned to named slots (start/end).
- */
-const getDefaultSlotPlainText = (option) => {
-    const texts = Array.from(option.childNodes)
-        .filter((node) => {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-            return !node.hasAttribute('slot');
-        }
-        return node.nodeType === Node.TEXT_NODE;
-    })
-        .filter((node) => node.nodeType === Node.TEXT_NODE)
-        .map((n) => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
-        .filter((t) => t);
-    return texts.join(' ');
-};
-/**
- * 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) => {
-    var _a, _b;
-    if (!customHTMLEnabled) {
-        return {
-            content: getDefaultSlotPlainText(option),
-            startContent: undefined,
-            endContent: undefined,
-        };
-    }
-    return {
-        content: getOptionContent(option),
-        startContent: (_a = getOptionContent(option, 'start')) !== null && _a !== void 0 ? _a : undefined,
-        endContent: (_b = getOptionContent(option, 'end')) !== null && _b !== void 0 ? _b : undefined,
-    };
+    return selectOpt ? selectOpt.textContent : null;
 };
 let selectIds = 0;
 const OPTION_CLASS = 'select-interface-option';