@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

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

@@ -2,8 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h, forceUpdate } from "@stencil/core";
-import { compareOptions, createNotchController, isOptionSelected } from "../../utils/forms/index";
-import { focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
+import { compareOptions, createLegacyFormController, createNotchController, isOptionSelected } from "../../utils/forms/index";
+import { findItemLabel, focusElement, getAriaLabel, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
+import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -28,6 +29,8 @@ export class Select {
     constructor() {
         this.inputId = `ion-sel-${selectIds++}`;
         this.inheritedAttributes = {};
+        // This flag ensures we log the deprecation warning at most once.
+        this.hasLoggedDeprecationWarning = false;
         this.onClick = (ev) => {
             const target = ev.target;
             const closestSlot = target.closest('[slot="start"], [slot="end"]');
@@ -82,6 +85,7 @@ export class Select {
         this.justify = 'space-between';
         this.label = undefined;
         this.labelPlacement = 'start';
+        this.legacy = undefined;
         this.multiple = false;
         this.name = this.inputId;
         this.okText = 'OK';
@@ -104,6 +108,7 @@ export class Select {
     }
     async connectedCallback() {
         const { el } = this;
+        this.legacyFormController = createLegacyFormController(el);
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
         this.updateOverlayOptions();
         this.emitStyle();
@@ -307,24 +312,38 @@ export class Select {
         const value = this.value;
         let event = ev;
         let size = 'auto';
-        const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
-        /**
-         * The popover should take up the full width
-         * when using a fill in MD mode or if the
-         * label is floating/stacked.
-         */
-        if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
-            size = 'cover';
-            /**
-             * Otherwise the popover
-             * should be positioned relative
-             * to the native element.
-             */
+        if (this.legacyFormController.hasLegacyControl()) {
+            const item = this.el.closest('ion-item');
+            // If the select is inside of an item containing a floating
+            // or stacked label then the popover should take up the
+            // full width of the item when it presents
+            if (item && (item.classList.contains('item-label-floating') || item.classList.contains('item-label-stacked'))) {
+                event = Object.assign(Object.assign({}, ev), { detail: {
+                        ionShadowTarget: item,
+                    } });
+                size = 'cover';
+            }
         }
         else {
-            event = Object.assign(Object.assign({}, ev), { detail: {
-                    ionShadowTarget: this.nativeWrapperEl,
-                } });
+            const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
+            /**
+             * The popover should take up the full width
+             * when using a fill in MD mode or if the
+             * label is floating/stacked.
+             */
+            if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
+                size = 'cover';
+                /**
+                 * Otherwise the popover
+                 * should be positioned relative
+                 * to the native element.
+                 */
+            }
+            else {
+                event = Object.assign(Object.assign({}, ev), { detail: {
+                        ionShadowTarget: this.nativeWrapperEl,
+                    } });
+            }
         }
         const popoverOpts = Object.assign(Object.assign({ mode,
             event, alignment: 'center', size,
@@ -368,10 +387,26 @@ export class Select {
         return actionSheetController.create(actionSheetOpts);
     }
     async openAlert() {
+        /**
+         * TODO FW-3194
+         * Remove legacyFormController logic.
+         * Remove label and labelText vars
+         * Pass `this.labelText` instead of `labelText`
+         * when setting the header.
+         */
+        let label;
+        let labelText;
+        if (this.legacyFormController.hasLegacyControl()) {
+            label = this.getLabel();
+            labelText = label ? label.textContent : null;
+        }
+        else {
+            labelText = this.labelText;
+        }
         const interfaceOptions = this.interfaceOptions;
         const inputType = this.multiple ? 'checkbox' : 'radio';
         const mode = getIonMode(this);
-        const alertOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
+        const alertOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
                 {
                     text: this.cancelText,
                     role: 'cancel',
@@ -412,6 +447,10 @@ export class Select {
         }
         return this.overlay.dismiss();
     }
+    // TODO FW-3194 Remove this
+    getLabel() {
+        return findItemLabel(this.el);
+    }
     hasValue() {
         return this.getText() !== '';
     }
@@ -454,6 +493,16 @@ export class Select {
         const style = {
             'interactive-disabled': disabled,
         };
+        if (this.legacyFormController.hasLegacyControl()) {
+            style['interactive'] = true;
+            style['select'] = true;
+            style['select-disabled'] = disabled;
+            style['has-placeholder'] = this.placeholder !== undefined;
+            style['has-value'] = this.hasValue();
+            style['has-focus'] = this.isExpanded;
+            // TODO(FW-3194): remove this
+            style['legacy'] = !!this.legacy;
+        }
         this.ionStyle.emit(style);
     }
     renderLabel() {
@@ -512,6 +561,92 @@ export class Select {
          */
         return this.renderLabel();
     }
+    renderSelect() {
+        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
+        const mode = getIonMode(this);
+        const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
+        const justifyEnabled = !hasFloatingOrStackedLabel;
+        const rtl = isRTL(el) ? 'rtl' : 'ltr';
+        const inItem = hostContext('ion-item', this.el);
+        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const hasValue = this.hasValue();
+        const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
+        renderHiddenInput(true, el, name, parseValue(value), disabled);
+        /**
+         * If the label is stacked, it should always sit above the select.
+         * For floating labels, the label should move above the select if
+         * the select has a value, is open, or has anything in either
+         * the start or end slot.
+         *
+         * If there is content in the start slot, the label would overlap
+         * it if not forced to float. This is also applied to the end slot
+         * because with the default or solid fills, the select is not
+         * vertically centered in the container, but the label is. This
+         * causes the slots and label to appear vertically offset from each
+         * other when the label isn't floating above the input. This doesn't
+         * apply to the outline fill, but this was not accounted for to keep
+         * things consistent.
+         *
+         * TODO(FW-5592): Remove hasStartEndSlots condition
+         */
+        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
+        return (h(Host, { onClick: this.onClick, class: createColorClasses(this.color, {
+                [mode]: true,
+                'in-item': inItem,
+                'in-item-color': hostContext('ion-item.ion-color', el),
+                'select-disabled': disabled,
+                'select-expanded': isExpanded,
+                'has-expanded-icon': expandedIcon !== undefined,
+                'has-value': hasValue,
+                'label-floating': labelShouldFloat,
+                'has-placeholder': placeholder !== undefined,
+                'ion-focusable': true,
+                [`select-${rtl}`]: true,
+                [`select-fill-${fill}`]: fill !== undefined,
+                [`select-justify-${justify}`]: justifyEnabled,
+                [`select-shape-${shape}`]: shape !== undefined,
+                [`select-label-placement-${labelPlacement}`]: true,
+            }) }, h("label", { class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { class: "select-wrapper-inner" }, h("slot", { name: "start" }), h("div", { class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { class: "select-highlight" }))));
+    }
+    // TODO FW-3194 - Remove this
+    renderLegacySelect() {
+        if (!this.hasLoggedDeprecationWarning) {
+            printIonWarning(`ion-select now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute.
+
+Example: <ion-select label="Favorite Color">...</ion-select>
+Example with aria-label: <ion-select aria-label="Favorite Color">...</ion-select>
+
+Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);
+            if (this.legacy) {
+                printIonWarning(`ion-select is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
+    Developers can dismiss this warning by removing their usage of the "legacy" property and using the new select syntax.`, this.el);
+            }
+            this.hasLoggedDeprecationWarning = true;
+        }
+        const { disabled, el, inputId, isExpanded, expandedIcon, name, placeholder, value } = this;
+        const mode = getIonMode(this);
+        const { labelText, labelId } = getAriaLabel(el, inputId);
+        renderHiddenInput(true, el, name, parseValue(value), disabled);
+        const displayValue = this.getText();
+        let selectText = displayValue;
+        if (selectText === '' && placeholder !== undefined) {
+            selectText = placeholder;
+        }
+        // If there is a label then we need to concatenate it with the
+        // current value (or placeholder) and a comma so it separates
+        // nicely when the screen reader announces it, otherwise just
+        // announce the value / placeholder
+        const displayLabel = labelText !== undefined ? (selectText !== '' ? `${selectText}, ${labelText}` : labelText) : selectText;
+        return (h(Host, { onClick: this.onClick, role: "button", "aria-haspopup": "listbox", "aria-disabled": disabled ? 'true' : null, "aria-label": displayLabel, class: {
+                [mode]: true,
+                'in-item': hostContext('ion-item', el),
+                'in-item-color': hostContext('ion-item.ion-color', el),
+                'select-disabled': disabled,
+                'select-expanded': isExpanded,
+                'has-expanded-icon': expandedIcon !== undefined,
+                'legacy-select': true,
+            } }, this.renderSelectText(), this.renderSelectIcon(), h("label", { id: labelId }, displayLabel), this.renderListbox()));
+    }
     /**
      * Renders either the placeholder
      * or the selected values based on
@@ -582,51 +717,8 @@ export class Select {
         return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
     render() {
-        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
-        const mode = getIonMode(this);
-        const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
-        const justifyEnabled = !hasFloatingOrStackedLabel;
-        const rtl = isRTL(el) ? 'rtl' : 'ltr';
-        const inItem = hostContext('ion-item', this.el);
-        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
-        const hasValue = this.hasValue();
-        const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
-        renderHiddenInput(true, el, name, parseValue(value), disabled);
-        /**
-         * If the label is stacked, it should always sit above the select.
-         * For floating labels, the label should move above the select if
-         * the select has a value, is open, or has anything in either
-         * the start or end slot.
-         *
-         * If there is content in the start slot, the label would overlap
-         * it if not forced to float. This is also applied to the end slot
-         * because with the default or solid fills, the select is not
-         * vertically centered in the container, but the label is. This
-         * causes the slots and label to appear vertically offset from each
-         * other when the label isn't floating above the input. This doesn't
-         * apply to the outline fill, but this was not accounted for to keep
-         * things consistent.
-         *
-         * TODO(FW-5592): Remove hasStartEndSlots condition
-         */
-        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '1c6a81db77f9bd20ba9c6da5a71a3b0f36b3bb6b', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
-                'in-item': inItem,
-                'in-item-color': hostContext('ion-item.ion-color', el),
-                'select-disabled': disabled,
-                'select-expanded': isExpanded,
-                'has-expanded-icon': expandedIcon !== undefined,
-                'has-value': hasValue,
-                'label-floating': labelShouldFloat,
-                'has-placeholder': placeholder !== undefined,
-                'ion-focusable': true,
-                [`select-${rtl}`]: true,
-                [`select-fill-${fill}`]: fill !== undefined,
-                [`select-justify-${justify}`]: justifyEnabled,
-                [`select-shape-${shape}`]: shape !== undefined,
-                [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'a1de0296549e209659677e2838cdfdacf3228c99', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'e3efd9b71f1b802b7785b49573ab20efc7e87500', class: "select-wrapper-inner" }, h("slot", { key: '7b8e026aa1c7aeca549b48237c12aba2b8e307c7', name: "start" }), h("div", { key: 'e47186a1aa13d7590f5628088a4415a7b620e3c2', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '441b5076f2e2fbca46f32d1f01c403cba1934b55', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { class: "select-highlight" }))));
+        const { legacyFormController } = this;
+        return legacyFormController.hasLegacyControl() ? this.renderLegacySelect() : this.renderSelect();
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -838,6 +930,23 @@ export class Select {
                 "reflect": false,
                 "defaultValue": "'start'"
             },
+            "legacy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup."
+                },
+                "attribute": "legacy",
+                "reflect": false
+            },
             "multiple": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/select/select.md.css

@@ -80,12 +80,12 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --placeholder-color: currentColor;
-  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  --placeholder-opacity: 0.6;
   --background: transparent;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -95,14 +95,17 @@
   --highlight-color: var(--highlight-color-focused);
   display: block;
   position: relative;
-  width: 100%;
-  min-height: 44px;
   font-family: var(--ion-font-family, inherit);
   white-space: nowrap;
   cursor: pointer;
   z-index: 2;
 }
 
+:host(:not(.legacy-select)) {
+  width: 100%;
+  min-height: 44px;
+}
+
 /**
  * Since the label sits on top of the element,
  * the component needs to be taller otherwise the
@@ -117,10 +120,27 @@
   --highlight-color-focused: var(--ion-color-base);
 }
 
-:host(.in-item) {
+:host(.legacy-select) {
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+:host(.in-item:not(.legacy-select)) {
   flex: 1 1 0;
 }
 
+:host(.in-item.legacy-select) {
+  position: static;
+  max-width: 45%;
+}
+
 :host(.select-disabled) {
   pointer-events: none;
 }
@@ -135,8 +155,8 @@
  * toolbar which is why we do not
  * limit the below behavior to just ion-item.
  */
-:host([slot=start]),
-:host([slot=end]) {
+:host([slot=start]:not(.legacy-select)),
+:host([slot=end]:not(.legacy-select)) {
   width: auto;
 }
 
@@ -145,6 +165,50 @@
   opacity: var(--placeholder-opacity);
 }
 
+:host(.legacy-select) label {
+  top: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+  outline: none;
+  display: flex;
+  align-items: center;
+  opacity: 0;
+}
+@supports (inset-inline-start: 0) {
+  :host(.legacy-select) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-select) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-select) label, :host-context([dir=rtl]).legacy-select label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-select:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
+}
+:host(.legacy-select) label::-moz-focus-inner {
+  border: 0;
+}
+
 button {
   position: absolute;
   top: 0;
@@ -738,8 +802,8 @@ button {
  * }
  */
 :host(.select-fill-solid) {
-  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
-  --border-color: var(--ion-color-step-500, var(--ion-background-color-step-500, gray));
+  --background: var(--ion-color-step-50, #f2f2f2);
+  --border-color: var(--ion-color-step-500, gray);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -775,8 +839,8 @@ button {
  */
 @media (any-hover: hover) {
   :host(.select-fill-solid:hover) {
-    --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --background: var(--ion-color-step-100, #e6e6e6);
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 /**
@@ -785,8 +849,8 @@ button {
  */
 :host(.select-fill-solid.select-expanded),
 :host(.select-fill-solid.ion-focused) {
-  --background: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));
-  --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+  --background: var(--ion-color-step-150, #d9d9d9);
+  --border-color: var(--ion-color-step-750, #404040);
 }
 
 :host(.select-fill-solid) .select-wrapper {
@@ -794,10 +858,25 @@ button {
    * Only the top left and top right borders should.
    * have a radius when using a solid fill.
    */
-  border-start-start-radius: var(--border-radius);
-  border-start-end-radius: var(--border-radius);
-  border-end-end-radius: 0px;
-  border-end-start-radius: 0px;
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+:host-context([dir=rtl]):host(.select-fill-solid) .select-wrapper, :host-context([dir=rtl]).select-fill-solid .select-wrapper {
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.select-fill-solid:dir(rtl)) .select-wrapper {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
 }
 
 :host(.label-floating.select-fill-solid) .label-text-wrapper {
@@ -864,7 +943,7 @@ button {
  * }
  */
 :host(.select-fill-outline) {
-  --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
+  --border-color: var(--ion-color-step-300, #b3b3b3);
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
@@ -892,7 +971,7 @@ button {
  */
 @media (any-hover: hover) {
   :host(.select-fill-outline:hover) {
-    --border-color: var(--ion-color-step-750, var(--ion-background-color-step-750, #404040));
+    --border-color: var(--ion-color-step-750, #404040);
   }
 }
 /**
@@ -1054,11 +1133,12 @@ button {
   border-inline-start: var(--border-width) var(--border-style) var(--border-color);
 }
 
-:host(.select-fill-outline) .select-outline-start {
-  border-start-start-radius: var(--border-radius);
-  border-start-end-radius: 0px;
-  border-end-end-radius: 0px;
-  border-end-start-radius: var(--border-radius);
+:host(.select-ltr.select-fill-outline) .select-outline-start {
+  border-radius: var(--border-radius) 0px 0px var(--border-radius);
+}
+
+:host(.select-rtl.select-fill-outline) .select-outline-start {
+  border-radius: 0px var(--border-radius) var(--border-radius) 0px;
 }
 
 :host(.select-fill-outline) .select-outline-start {
@@ -1078,11 +1158,12 @@ button {
   border-inline-end: var(--border-width) var(--border-style) var(--border-color);
 }
 
-:host(.select-fill-outline) .select-outline-end {
-  border-start-start-radius: 0px;
-  border-start-end-radius: var(--border-radius);
-  border-end-end-radius: var(--border-radius);
-  border-end-start-radius: 0px;
+:host(.select-ltr.select-fill-outline) .select-outline-end {
+  border-radius: 0px var(--border-radius) var(--border-radius) 0px;
+}
+
+:host(.select-rtl.select-fill-outline) .select-outline-end {
+  border-radius: var(--border-radius) 0px 0px var(--border-radius);
 }
 
 :host(.select-fill-outline) .select-outline-end {
@@ -1105,13 +1186,20 @@ button {
 
 :host {
   --border-width: 1px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));
+}
+
+:host(.legacy-select) {
+  --padding-top: 10px;
+  --padding-end: 0;
+  --padding-bottom: 10px;
+  --padding-start: 16px;
 }
 
 .select-icon {
   width: 0.8125rem;
   transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
+  color: var(--ion-color-step-500, gray);
 }
 
 /**
@@ -1142,8 +1230,32 @@ button {
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-.select-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .select-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .select-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .select-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .select-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .select-highlight:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.select-expanded) .select-highlight,
@@ -1159,8 +1271,27 @@ button {
 :host(.in-item) .select-highlight {
   bottom: 0;
 }
-:host(.in-item) .select-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.in-item) .select-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.in-item) .select-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.in-item) .select-highlight, :host-context([dir=rtl]).in-item .select-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.in-item:dir(rtl)) .select-highlight {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 /**
@@ -1168,7 +1299,7 @@ button {
  * when the select is activated.
  * This should only happen on MD.
  */
-:host(.select-expanded:not(.has-expanded-icon)) .select-icon {
+:host(.select-expanded:not(.legacy-select):not(.has-expanded-icon)) .select-icon {
   transform: rotate(180deg);
 }