@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11788449221.155f9f1e

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

@@ -1,23 +1,24 @@
 /*!
  * (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, createStartContainerController, isOptionSelected, checkInvalidState, } from "../../utils/forms/index";
-import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
+import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from "../../utils/forms/index";
+import { suppressFocusVisible, 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 { 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";
+import { getIonTheme } from "../../global/ionic-global";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @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.
@@ -33,244 +34,154 @@ 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 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.
+ * @part inner - The inner element of the wrapper that manages the slots, selected values or placeholder, and toggle icons.
  */
 export class Select {
-    inputId = `ion-sel-${selectIds++}`;
-    helperTextId = `${this.inputId}-helper-text`;
-    errorTextId = `${this.inputId}-error-text`;
-    overlay;
-    focusEl;
-    mutationO;
-    inheritedAttributes = {};
-    slotMutationController;
-    nativeWrapperEl;
-    notchSpacerEl;
-    validationObserver;
-    notchController;
-    startContainerController;
-    startContainerEl;
-    customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-    el;
-    isExpanded = false;
-    /**
-     * The `hasFocus` state ensures the focus class is
-     * added regardless of how the element is focused.
-     * The `ion-focused` class only applies when focused
-     * via tabbing, not by clicking.
-     * The `has-focus` logic was added to ensure the class
-     * is applied in both cases.
-     */
-    hasFocus = false;
-    /**
-     * Track validation state for proper aria-live announcements.
-     */
-    isInvalid = false;
-    hintTextId;
-    /**
-     * The text to display on the cancel button.
-     */
-    cancelText = 'Cancel';
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     *
-     * This property is only available when using the modern select syntax.
-     */
-    color;
-    /**
-     * This property allows developers to specify a custom function or property
-     * name for comparing objects when determining the selected option in the
-     * ion-select. When not specified, the default behavior will use strict
-     * equality (===) for comparison.
-     */
-    compareWith;
-    /**
-     * If `true`, the user cannot interact with the select.
-     */
-    disabled = false;
-    /**
-     * The fill for the item. If `"solid"` the item will have a background. If
-     * `"outline"` the item will be transparent with a border. Only available in `md` mode.
-     */
-    fill;
-    /**
-     * Text that is placed under the select and displayed when an error is detected.
-     */
-    errorText;
-    /**
-     * Text that is placed under the select and displayed when no error is detected.
-     */
-    helperText;
-    /**
-     * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
-     */
-    interface = 'alert';
-    /**
-     * Any additional options that the `alert`, `action-sheet` or `popover` interface
-     * can take. See the [ion-alert docs](./alert), the
-     * [ion-action-sheet docs](./action-sheet), the
-     * [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the
-     * create options for each interface.
-     *
-     * Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
-     */
-    interfaceOptions = {};
-    /**
-     * How to pack the label and select within a line.
-     * `justify` does not apply when the label and select
-     * are on different lines when `labelPlacement` is set to
-     * `"floating"` or `"stacked"`.
-     * `"start"`: The label and select will appear on the left in LTR and
-     * on the right in RTL.
-     * `"end"`: The label and select will appear on the right in LTR and
-     * on the left in RTL.
-     * `"space-between"`: The label and select will appear on opposite
-     * ends of the line with space between the two elements.
-     */
-    justify;
-    /**
-     * The visible label associated with the select.
-     *
-     * Use this if you need to render a plaintext label.
-     *
-     * The `label` property will take priority over the `label` slot if both are used.
-     */
-    label;
-    /**
-     * Where to place the label relative to the select.
-     * `"start"`: The label will appear to the left of the select in LTR and to the right in RTL.
-     * `"end"`: The label will appear to the right of the select in LTR and to the left in RTL.
-     * `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.
-     * `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.
-     * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-     * When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
-     */
-    labelPlacement = 'start';
-    /**
-     * If `true`, the select can accept multiple values.
-     */
-    multiple = false;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    name = this.inputId;
-    /**
-     * The text to display on the ok button.
-     */
-    okText = 'OK';
-    /**
-     * The text to display when the select is empty.
-     */
-    placeholder;
-    /**
-     * The text to display instead of the selected option's value.
-     */
-    selectedText;
-    /**
-     * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,
-     * or `caretDownSharp` for `md` mode.
-     */
-    toggleIcon;
-    /**
-     * The toggle icon to show when the select is open. If defined, the icon
-     * rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`
-     * will be used for when the select is both open and closed.
-     */
-    expandedIcon;
-    /**
-     * The shape of the select. If "round" it will have an increased border radius.
-     */
-    shape;
-    /**
-     * The value of the select.
-     */
-    value;
-    /**
-     * If true, screen readers will announce it as a required field. This property
-     * works only for accessibility purposes, it will not prevent the form from
-     * submitting if the value is invalid.
-     */
-    required = false;
-    /**
-     * Emitted when the value has changed.
-     *
-     * This event will not emit when programmatically setting the `value` property.
-     */
-    ionChange;
-    /**
-     * Emitted when the selection is cancelled.
-     */
-    ionCancel;
-    /**
-     * Emitted when the overlay is dismissed.
-     */
-    ionDismiss;
-    /**
-     * Emitted when the select has focus.
-     */
-    ionFocus;
-    /**
-     * Emitted when the select loses focus.
-     */
-    ionBlur;
-    /**
-     * Emitted when the styles change.
-     * @internal
-     */
-    ionStyle;
+    constructor() {
+        this.inputId = `ion-sel-${selectIds++}`;
+        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
+         * added regardless of how the element is focused.
+         * The `ion-focused` class only applies when focused
+         * via tabbing, not by clicking.
+         * The `has-focus` logic was added to ensure the class
+         * is applied in both cases.
+         */
+        this.hasFocus = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
+        /**
+         * 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.
+         */
+        this.disabled = false;
+        /**
+         * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
+         */
+        this.interface = 'alert';
+        /**
+         * Any additional options that the `alert`, `action-sheet` or `popover` interface
+         * can take. See the [ion-alert docs](./alert), the
+         * [ion-action-sheet docs](./action-sheet), the
+         * [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the
+         * create options for each interface.
+         *
+         * Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
+         */
+        this.interfaceOptions = {};
+        /**
+         * Where to place the label relative to the select.
+         * `"start"`: The label will appear to the left of the select in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the select in LTR and to the left in RTL.
+         * `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.
+         * `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.
+         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         * When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
+         */
+        this.labelPlacement = 'start';
+        /**
+         * If `true`, the select can accept multiple values.
+         */
+        this.multiple = false;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * The text to display on the ok button.
+         */
+        this.okText = 'OK';
+        /**
+         * If true, screen readers will announce it as a required field. This property
+         * works only for accessibility purposes, it will not prevent the form from
+         * submitting if the value is invalid.
+         */
+        this.required = false;
+        this.onClick = (ev) => {
+            const target = ev.target;
+            const closestSlot = target.closest('[slot="start"], [slot="end"]');
+            if (target === this.el || closestSlot === null) {
+                this.setFocus();
+                this.open(ev);
+            }
+            else {
+                /**
+                 * Prevent clicks to the start/end slots from opening the select.
+                 * We ensure the target isn't this element in case the select is slotted
+                 * in, for example, an item. This would prevent the select from ever
+                 * being opened since the element itself has slot="start"/"end".
+                 *
+                 * Clicking a slotted element also causes a click
+                 * on the <label> element (since it wraps the slots).
+                 * Clicking <label> dispatches another click event on
+                 * the native form control that then bubbles up to this
+                 * listener. This additional event targets the host
+                 * element, so the select overlay is opened.
+                 *
+                 * When the slotted elements are clicked (and therefore
+                 * the ancestor <label> element) we want to prevent the label
+                 * from dispatching another click event.
+                 *
+                 * Do not call stopPropagation() because this will cause
+                 * click handlers on the slotted elements to never fire in React.
+                 * When developers do onClick in React a native "click" listener
+                 * is added on the root element, not the slotted element. When that
+                 * native click listener fires, React then dispatches the synthetic
+                 * click event on the slotted element. However, if stopPropagation
+                 * is called then the native click event will never bubble up
+                 * to the root element.
+                 */
+                ev.preventDefault();
+            }
+        };
+        this.onFocus = () => {
+            this.hasFocus = true;
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.hasFocus = false;
+            this.ionBlur.emit();
+        };
+        /**
+         * Stops propagation when the label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        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) {
+                ev.stopPropagation();
+            }
+        };
+    }
     styleChanged() {
         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 () => {
@@ -342,18 +253,10 @@ 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();
@@ -375,44 +278,65 @@ 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();
                     }
-                    focusVisibleElement(selectedItem);
+                    optionToFocus = interactiveEl !== null && interactiveEl !== void 0 ? interactiveEl : selectedItem;
                 }
             }
             else {
                 /**
                  * If no value is set then focus the first enabled option.
                  */
-                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'));
+                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();
                 }
             }
         };
@@ -512,7 +436,8 @@ export class Select {
             const isSelected = isOptionSelected(selectValue, value, this.compareWith);
             const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
             return {
-                text: content ?? '',
+                role: isSelected ? 'selected' : '',
+                text: content !== null && content !== void 0 ? content : '',
                 cssClass: optClass,
                 disabled: option.disabled,
                 handler: () => {
@@ -549,7 +474,7 @@ export class Select {
             return {
                 type: inputType,
                 cssClass: optClass,
-                label: content ?? '',
+                label: content !== null && content !== void 0 ? content : '',
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
                 disabled: option.disabled,
@@ -572,7 +497,7 @@ export class Select {
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
             const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
             return {
-                text: content ?? '',
+                text: content !== null && content !== void 0 ? content : '',
                 cssClass: optClass,
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
@@ -595,8 +520,8 @@ export class Select {
     async openPopover(ev) {
         const { fill, labelPlacement } = this;
         const interfaceOptions = this.interfaceOptions;
-        const mode = getIonMode(this);
-        const showBackdrop = mode === 'md' ? false : true;
+        const theme = getIonTheme(this);
+        const showBackdrop = theme === 'md' ? false : true;
         const multiple = this.multiple;
         const value = this.value;
         let event = ev;
@@ -607,7 +532,7 @@ export class Select {
          * when using a fill in MD mode or if the
          * label is floating/stacked.
          */
-        if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
+        if (hasFloatingOrStackedLabel || (theme === 'md' && fill !== undefined)) {
             size = 'cover';
             /**
              * Otherwise the popover
@@ -616,43 +541,34 @@ export class Select {
              */
         }
         else {
-            event = {
-                ...ev,
-                detail: {
+            event = Object.assign(Object.assign({}, ev), { detail: {
                     ionShadowTarget: this.nativeWrapperEl,
-                },
-            };
+                } });
         }
         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: [
+        const hasRichContent = options.some((opt) => opt.startContent || opt.endContent || opt.description);
+        const popoverOpts = Object.assign(Object.assign({ theme,
+            event, alignment: 'center', size,
+            showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: [
                 'select-popover',
                 hasRichContent ? 'select-popover-rich-content' : undefined,
                 interfaceOptions.cssClass,
-            ],
-            componentProps: {
+            ], componentProps: {
                 header: interfaceOptions.header,
                 subHeader: interfaceOptions.subHeader,
                 message: interfaceOptions.message,
                 multiple,
                 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');
@@ -660,20 +576,17 @@ export class Select {
         return popoverController.create(popoverOpts);
     }
     async openActionSheet() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const interfaceOptions = this.interfaceOptions;
-        const actionSheetOpts = {
-            mode,
-            ...interfaceOptions,
-            buttons: this.createActionSheetButtons(this.childOpts, this.value),
-            cssClass: ['select-action-sheet', interfaceOptions.cssClass],
-        };
+        const actionSheetOpts = Object.assign(Object.assign({ theme }, 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');
         }
@@ -682,13 +595,8 @@ export class Select {
     async openAlert() {
         const interfaceOptions = this.interfaceOptions;
         const inputType = this.multiple ? 'checkbox' : 'radio';
-        const mode = getIonMode(this);
-        const alertOpts = {
-            mode,
-            ...interfaceOptions,
-            header: interfaceOptions.header ? interfaceOptions.header : this.labelText,
-            inputs: this.createAlertInputs(this.childOpts, inputType, this.value),
-            buttons: [
+        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: [
                 {
                     text: this.cancelText,
                     role: 'cancel',
@@ -702,19 +610,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');
         }
@@ -722,26 +630,23 @@ export class Select {
     }
     openModal() {
         const { multiple, value, interfaceOptions } = this;
-        const mode = getIonMode(this);
-        const modalOpts = {
-            ...interfaceOptions,
-            mode,
-            cssClass: ['select-modal', interfaceOptions.cssClass],
-            component: 'ion-select-modal',
-            componentProps: {
+        const theme = getIonTheme(this);
+        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode: theme, 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),
-            },
-        };
+            } });
         /**
          * 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');
@@ -807,51 +712,18 @@ export class Select {
         };
         this.ionStyle.emit(style);
     }
-    onClick = (ev) => {
-        const target = ev.target;
-        const closestSlot = target.closest('[slot="start"], [slot="end"]');
-        if (target === this.el || closestSlot === null) {
-            this.setFocus();
-            this.open(ev);
+    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;
         }
-        else {
-            /**
-             * Prevent clicks to the start/end slots from opening the select.
-             * We ensure the target isn't this element in case the select is slotted
-             * in, for example, an item. This would prevent the select from ever
-             * being opened since the element itself has slot="start"/"end".
-             *
-             * Clicking a slotted element also causes a click
-             * on the <label> element (since it wraps the slots).
-             * Clicking <label> dispatches another click event on
-             * the native form control that then bubbles up to this
-             * listener. This additional event targets the host
-             * element, so the select overlay is opened.
-             *
-             * When the slotted elements are clicked (and therefore
-             * the ancestor <label> element) we want to prevent the label
-             * from dispatching another click event.
-             *
-             * Do not call stopPropagation() because this will cause
-             * click handlers on the slotted elements to never fire in React.
-             * When developers do onClick in React a native "click" listener
-             * is added on the root element, not the slotted element. When that
-             * native click listener fires, React then dispatches the synthetic
-             * click event on the slotted element. However, if stopPropagation
-             * is called then the native click event will never bubble up
-             * to the root element.
-             */
-            ev.preventDefault();
+        if (size === undefined) {
+            return 'medium';
         }
-    };
-    onFocus = () => {
-        this.hasFocus = true;
-        this.ionFocus.emit();
-    };
-    onBlur = () => {
-        this.hasFocus = false;
-        this.ionBlur.emit();
-    };
+        return size;
+    }
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
@@ -860,8 +732,8 @@ export class Select {
             }, part: "label" }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
     }
     componentDidRender() {
-        this.notchController?.calculateNotchWidth();
-        this.startContainerController?.calculateStartContainerWidth();
+        var _a;
+        (_a = this.notchController) === null || _a === void 0 ? void 0 : _a.calculateNotchWidth();
     }
     /**
      * Gets any content passed into the `label` slot,
@@ -880,24 +752,33 @@ export class Select {
         return this.label !== undefined || this.labelSlot !== null;
     }
     /**
-     * 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.
+     * Renders the border container
+     * when fill="outline".
      */
-    onLabelClick = (ev) => {
-        if (ev.target === this.focusEl && this.isExpanded) {
-            ev.stopPropagation();
+    renderLabelContainer() {
+        const theme = getIonTheme(this);
+        const hasOutlineFill = theme === '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(),
+            ];
         }
-    };
-    /**
-     * Renders the outline border with a notch for the label.
-     */
-    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" })));
+        /**
+         * If not using the outline style,
+         * we can render just the label.
+         */
+        return this.renderLabel();
     }
     /**
      * Wraps text nodes in the select text with span elements
@@ -917,7 +798,8 @@ export class Select {
             return html;
         }
         Array.from(temp.childNodes).forEach((node) => {
-            if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+            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
@@ -928,12 +810,12 @@ export class Select {
                     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);
+                    (_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');
-                node.parentNode?.replaceChild(wrapper, node);
+                (_d = node.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(wrapper, node);
                 wrapper.appendChild(node);
             }
         });
@@ -969,24 +851,20 @@ export class Select {
      * next to the select text.
      */
     renderSelectIcon() {
-        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 ?? defaultIcon;
+        const { isExpanded, selectExpandedIcon, selectCollapsedIcon } = this;
+        let icon = selectCollapsedIcon;
+        if (isExpanded) {
+            icon = selectExpandedIcon;
         }
         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 = inheritedAttributes['aria-label'] ?? this.labelText;
+        const definedLabel = (_a = inheritedAttributes['aria-label']) !== null && _a !== void 0 ? _a : this.labelText;
         /**
          * If developer has specified a placeholder
          * and there is nothing selected, the selectText
@@ -1012,6 +890,63 @@ 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) {
@@ -1049,19 +984,41 @@ export class Select {
         return (h("div", { class: "select-bottom", part: "bottom" }, this.renderHintText()));
     }
     render() {
-        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value, hasFocus, } = this;
-        const mode = getIonMode(this);
+        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, name, value, hasFocus, } = this;
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
         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 shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const size = this.getSize();
+        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
-        const hasOutlineFill = mode === 'md' && fill === 'outline';
+        const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         renderHiddenInput(true, el, name, parseValue(value), disabled);
-        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
-        return (h(Host, { key: '5d1e5bf46d0f204efdcb55cc42cfde52e6db304b', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        /**
+         * 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 || hasFocus || isExpanded || hasStartEndSlots));
+        return (h(Host, { key: '9339cb236070c47333154d96c336dc1df9a11e1c', onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
                 'select-disabled': disabled,
@@ -1078,20 +1035,33 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '15fd1f8e06510ae8472c621cf8cf90e51172e0be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '7964e3d9351671899793b117896acdda25ec24c4', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'aa309ef155c4025acfd7ed5739b5221c85097b36', name: "start" })), h("div", { key: '23d5a9dfea64a9d81b0b36d9426b15bed98901b9', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '810da9fbfa8771e09b5fb768d64e5f04858b5833', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: 'bf1c04704326ecfa14cf2e49bb76d3fb45beb08d', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '76a8bcaeefdcaa908aebd820d93171b08165cee3', name: "end" })), shouldRenderHighlight && h("div", { key: '55a9c417a82323a44e16328fd62a634d9d7c558b', class: "select-highlight" })), this.renderBottomContent()));
+                [`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()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["select.ios.scss"],
-            "md": ["select.md.scss"]
+            "md": ["select.md.scss"],
+            "ionic": ["select.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select.ios.css"],
-            "md": ["select.md.css"]
+            "md": ["select.md.css"],
+            "ionic": ["select.ionic.css"]
         };
     }
     static get properties() {
@@ -1116,6 +1086,26 @@ 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,
@@ -1200,7 +1190,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 `md` mode."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -1460,7 +1450,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode."
+                    "text": "The toggle icon to use. Defaults to `\"chevronExpand\"` for the `\"ios\"` theme,\nor `\"caretDownSharp\"` for the `\"md\"` and `\"ionic\"` themes."
                 },
                 "getter": false,
                 "setter": false,
@@ -1479,70 +1469,89 @@ 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` mode 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\"` theme 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": "'round'",
-                    "resolved": "\"round\" | undefined",
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The shape of the select. If \"round\" it will have an increased border radius."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "shape"
             },
-            "value": {
-                "type": "any",
-                "mutable": true,
+            "size": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "any | null",
-                    "resolved": "any",
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the select."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "size"
             },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
+            "value": {
+                "type": "any",
+                "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "any | null",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "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."
+                    "text": "The value of the select."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
+                "attribute": "value"
             }
         };
     }
@@ -1791,7 +1800,7 @@ const textForValue = (opts, value, compareWith, useHTML = false) => {
          */
         if (content) {
             const texts = Array.from(content.childNodes)
-                .map((n) => n.textContent?.trim())
+                .map((n) => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
                 .filter((t) => t);
             return texts.join(' ') || null;
         }
@@ -1811,8 +1820,9 @@ const textForValue = (opts, value, compareWith, useHTML = false) => {
  */
 const trimTextNodes = (node) => {
     node.childNodes.forEach((child) => {
+        var _a;
         if (child.nodeType === Node.TEXT_NODE) {
-            child.textContent = child.textContent?.trim() || '';
+            child.textContent = ((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
         }
         else if (child.nodeType === Node.ELEMENT_NODE) {
             trimTextNodes(child);
@@ -1840,13 +1850,14 @@ const getOptionContent = (option, slotName, useHTML = false) => {
         // 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 node.textContent?.trim().length !== 0;
+                return ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) !== 0;
             }
             return true;
         });
@@ -1856,7 +1867,7 @@ const getOptionContent = (option, slotName, useHTML = false) => {
     }
     // Return plain text if no elements are found
     if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
-        return nodes.map((n) => n.textContent?.trim()).join(' ') || null;
+        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`)
@@ -1872,9 +1883,10 @@ const getOptionContent = (option, slotName, useHTML = false) => {
     // 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 = clone.textContent?.trim() || '';
+            clone.textContent = ((_a = clone.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
         }
         else {
             trimTextNodes(clone);
@@ -1925,7 +1937,7 @@ const getDefaultSlotPlainText = (option) => {
         return node.nodeType === Node.TEXT_NODE;
     })
         .filter((node) => node.nodeType === Node.TEXT_NODE)
-        .map((n) => n.textContent?.trim())
+        .map((n) => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
         .filter((t) => t);
     return texts.join(' ');
 };
@@ -1939,6 +1951,7 @@ const getDefaultSlotPlainText = (option) => {
  * via the `innerHTMLTemplatesEnabled` config.
  */
 const extractOptionContent = (option, customHTMLEnabled) => {
+    var _a, _b;
     if (!customHTMLEnabled) {
         return {
             content: getDefaultSlotPlainText(option),
@@ -1948,8 +1961,8 @@ const extractOptionContent = (option, customHTMLEnabled) => {
     }
     return {
         content: getOptionContent(option),
-        startContent: getOptionContent(option, 'start') ?? undefined,
-        endContent: getOptionContent(option, 'end') ?? undefined,
+        startContent: (_a = getOptionContent(option, 'start')) !== null && _a !== void 0 ? _a : undefined,
+        endContent: (_b = getOptionContent(option, 'end')) !== null && _b !== void 0 ? _b : undefined,
     };
 };
 let selectIds = 0;