@ionic/core 9.0.2 → 9.0.3-dev.11788456135.1ab1d6cd

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

@@ -1,10 +1,11 @@
 /*!
  * (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 { 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";
@@ -14,10 +15,11 @@ 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.
@@ -34,8 +36,9 @@ import { getIonMode } from "../../global/ionic-global";
  * @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 control - The wrapper element containing the native select control. In the `"ios"` and `"md"` themes it also contains the label, and the dropdown icon when the label is not floating or stacked.
+ * @part end - The wrapper element for the content in the end slot. In the `"ios"` and `"md"` themes it also contains the dropdown icon when the label is floating or stacked.
+ * @part inner - The wrapper element containing the start, control and end wrappers and the dropdown icon. Only rendered in the `"ionic"` theme.
  */
 export class Select {
     constructor() {
@@ -62,6 +65,14 @@ 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.
          */
@@ -211,7 +222,7 @@ export class Select {
         });
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
         this.startContainerController = createStartContainerController(el, () => this.startContainerEl, () => {
-            return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline';
+            return Build.isBrowser && getIonTheme(this) === 'md' && this.fill === 'outline';
         });
         this.startContainerController.calculateStartContainerWidth();
         this.updateOverlayOptions();
@@ -318,44 +329,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 ?? 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();
                 }
             }
         };
@@ -538,8 +570,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;
@@ -550,7 +582,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
@@ -569,7 +601,7 @@ export class Select {
         const options = this.createOverlaySelectOptions(this.childOpts, value);
         const hasRichContent = options.some((opt) => Boolean(opt.startContent) || Boolean(opt.endContent) || Boolean(opt.description));
         const popoverOpts = {
-            mode,
+            theme,
             event,
             alignment: 'center',
             size,
@@ -603,10 +635,10 @@ export class Select {
         return popoverController.create(popoverOpts);
     }
     async openActionSheet() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const interfaceOptions = this.interfaceOptions;
         const actionSheetOpts = {
-            mode,
+            theme,
             ...interfaceOptions,
             buttons: this.createActionSheetButtons(this.childOpts, this.value),
             cssClass: ['select-action-sheet', interfaceOptions.cssClass],
@@ -625,9 +657,9 @@ export class Select {
     async openAlert() {
         const interfaceOptions = this.interfaceOptions;
         const inputType = this.multiple ? 'checkbox' : 'radio';
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const alertOpts = {
-            mode,
+            theme,
             ...interfaceOptions,
             header: interfaceOptions.header ? interfaceOptions.header : this.labelText,
             inputs: this.createAlertInputs(this.childOpts, inputType, this.value),
@@ -665,15 +697,16 @@ export class Select {
     }
     openModal() {
         const { multiple, value, interfaceOptions } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const modalOpts = {
             ...interfaceOptions,
-            mode,
+            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),
@@ -750,6 +783,18 @@ 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: {
@@ -781,11 +826,42 @@ export class Select {
      * 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: {
+        return (h("div", { key: "outline", 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" })));
     }
+    renderStartContainer() {
+        return (h("div", { key: "start", class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { name: "start" })));
+    }
+    renderNativeWrapper() {
+        return (h("div", { class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()));
+    }
+    /**
+     * The ionic theme keeps the label above a field box that wraps the slots and
+     * the control, so the label can size independently of the slotted content.
+     */
+    renderIonicField() {
+        return [
+            this.renderLabel(),
+            h("div", { key: "inner", class: "select-wrapper-inner", part: "inner" }, this.fill === 'outline' && h("div", { key: "outline", class: "select-outline" }), this.renderStartContainer(), h("div", { key: "control", class: "select-control", part: "control" }, this.renderNativeWrapper()), h("div", { key: "end", class: "select-end", part: "end" }, h("slot", { name: "end" })), this.renderSelectIcon()),
+        ];
+    }
+    /**
+     * The ios and md themes nest the label alongside the control so a floating
+     * label can escape it and clear the start and end slots.
+     */
+    renderNativeField() {
+        const { fill, labelPlacement } = this;
+        const hasOutlineFill = getIonTheme(this) === 'md' && fill === 'outline';
+        const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
+        return [
+            hasOutlineFill && this.renderOutlineContainer(),
+            this.renderStartContainer(),
+            h("div", { key: "control", class: "select-control", part: "control" }, this.renderLabel(), h("div", { class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())),
+            h("div", { key: "end", class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { name: "end" })),
+        ];
+    }
     /**
      * Wraps text nodes in the select text with span elements
      * so spacing can be added between elements without
@@ -856,15 +932,10 @@ 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 });
     }
@@ -899,6 +970,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) {
@@ -936,19 +1064,20 @@ 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 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';
         renderHiddenInput(true, el, name, parseValue(value), disabled);
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
-        return (h(Host, { key: 'b2f161e3706e139e61440cd13e162714b1b75d72', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '1169073985fabca41a2c0a15f07d155a19fd1197', onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
                 'select-disabled': disabled,
@@ -965,20 +1094,23 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '944a2eb468154a21260d181fdaf67828a71eb902', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '927200c53548b1bb4f52d6a167605b724a7b7d0d', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '6e14b95e9b95c116b16744d630600e90977782bc', name: "start" })), h("div", { key: '8451ed4300ac005963075be36a04ea8763bc0fdd', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '207e7b63f3224a4870579365ac992da6784fb31f', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: '5c17367d488db4d570f31b25e33560efa9011500', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '21fd8c0d9bee8cffef9ef6984cacd31e8f38211c', name: "end" })), shouldRenderHighlight && h("div", { key: '1fff767db9a1ec07b274ef65ff7ae8fb976e6ad2', class: "select-highlight" })), this.renderBottomContent()));
+                [`select-size-${size}`]: size !== undefined,
+            }) }, h("label", { key: 'b384d441d2dcaff191d978ce7ee1fb2a4dd74545', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, theme === 'ionic' ? this.renderIonicField() : this.renderNativeField(), shouldRenderHighlight && h("div", { key: '114d10e8e1aaa6fda0b9a6b35de52b37afe79b25', 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() {
@@ -1003,6 +1135,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,
@@ -1087,7 +1239,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,
@@ -1347,7 +1499,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,
@@ -1366,70 +1518,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"
             }
         };
     }