@amwaljs/checkout-button 0.3.0 → 0.3.2

package/dist/esm/ion-select.entry.js

@@ -1,863 +1,737 @@
-import { r as registerInstance, d as createEvent, i as printIonWarning, h, H as Host, g as getElement, o as forceUpdate } from './index-xxOnfNPU.js';
-import { c as createNotchController } from './notch-controller-CCHQ50bA.js';
-import { i as isOptionSelected, c as compareOptions } from './compare-with-utils-sObYyvOy.js';
-import { c as checkInvalidState } from './validity-DJztqcrH.js';
-import { i as inheritAttributes, m as renderHiddenInput, f as focusVisibleElement } from './helpers-BuFc0hrS.js';
-import { p as popoverController, b as actionSheetController, c as alertController, m as modalController } from './overlays-CWok3_we.js';
-import { i as isRTL } from './dir-C53feagD.js';
-import { h as hostContext, c as createColorClasses } from './theme-DiVJyqlX.js';
-import { w as watchForOptions } from './watch-options-Dtdm8lKC.js';
-import { q as chevronExpand, t as caretDownSharp } from './index-BmlsNFZH.js';
-import { g as getIonMode } from './ionic-global-BbOE2Sur.js';
-import './index-ZjP4CjeZ.js';
-import './hardware-back-button-DRef5MPc.js';
-import './framework-delegate-29_VtSmv.js';
-import './gesture-controller-BTEOs1at.js';
+import { r as registerInstance, d as createEvent, h, H as Host, e as getElement, i as forceUpdate } from './index-8cc94b11.js';
+import { c as createLegacyFormController } from './form-controller-b1aa7393.js';
+import { c as createNotchController } from './notch-controller-d511b3b3.js';
+import { i as isOptionSelected, c as compareOptions } from './compare-with-utils-d58be312.js';
+import { d as inheritAttributes, f as focusVisibleElement, m as findItemLabel, j as renderHiddenInput, p as getAriaLabel } from './helpers-f0dcbd72.js';
+import { p as printIonWarning } from './index-d9b41a43.js';
+import { h as popoverController, j as actionSheetController, k as alertController } from './overlays-642a91df.js';
+import { i as isRTL } from './dir-1d4aa386.js';
+import { h as hostContext, c as createColorClasses } from './theme-35c700b7.js';
+import { w as watchForOptions } from './watch-options-7bf43687.js';
+import { t as chevronExpand, h as caretDownSharp } from './index-afdf867c.js';
+import { g as getIonMode } from './ionic-global-0b7766cb.js';
+import './index-fb97e55c.js';
+import './hardware-back-button-f93acff0.js';
+import './framework-delegate-de1aa369.js';
 
-const selectIosCss = () => `:host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:var(--ion-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: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(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.in-item){flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.has-focus) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){flex:initial;width:auto}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}button{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.select-icon{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}:host(.select-label-placement-stacked) .select-icon,:host(.select-label-placement-floating) .select-icon{position:absolute;height:100%}:host(.select-ltr.select-label-placement-stacked) .select-icon,:host(.select-ltr.select-label-placement-floating) .select-icon{right:var(--padding-end, 0)}:host(.select-rtl.select-label-placement-stacked) .select-icon,:host(.select-rtl.select-label-placement-floating) .select-icon{left:var(--padding-start, 0)}.select-text{flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-wrapper{-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);border-radius:var(--border-radius);display:flex;position:relative;flex-grow:1;align-items:center;justify-content:space-between;height:inherit;min-height:inherit;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;box-sizing:border-box}.select-wrapper .select-placeholder{transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-wrapper-inner{display:flex;align-items:center;overflow:hidden}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{flex-grow:1}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.select-bottom{-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:5px;padding-bottom:0;display:flex;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}:host(.has-focus.ion-valid),:host(.select-expanded.ion-valid),:host(.ion-touched.ion-invalid),:host(.select-expanded.ion-touched.ion-invalid){--border-color:var(--highlight-color)}.select-bottom .error-text{display:none;color:var(--highlight-color-invalid)}.select-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .select-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .select-bottom .helper-text{display:none}.label-text-wrapper{display:flex;align-items:center;max-width:200px;transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden,.select-outline-notch-hidden{display:none}.native-wrapper{display:flex;align-items:center;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{justify-content:space-between}:host(.select-justify-start) .select-wrapper{justify-content:start}:host(.select-justify-end) .select-wrapper{justify-content:end}:host(.select-label-placement-start) .select-wrapper{flex-direction:row}:host(.select-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-end) .select-wrapper{flex-direction:row-reverse}:host(.select-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-wrapper,:host(.select-label-placement-floating) .select-wrapper{flex-direction:column;align-items:start}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-label-placement-floating) .label-text-wrapper{max-width:100%}:host(.select-ltr.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-label-placement-floating) .label-text-wrapper{transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{transform:translateY(100%) scale(1)}:host(.select-label-placement-floating:not(.label-floating)) .native-wrapper .select-placeholder{opacity:0}:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:1}:host(.label-floating) .label-text-wrapper{transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}::slotted([slot=start]),::slotted([slot=end]){flex-shrink:0}::slotted([slot=start]:last-of-type){margin-inline-end:16px;margin-inline-start:0}::slotted([slot=end]:first-of-type){margin-inline-start:16px;margin-inline-end:0}:host{--border-width:0.55px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--highlight-height:0px}.select-icon{width:1.125rem;height:1.125rem;color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{width:calc(100% - 1.125rem - 4px)}:host(.select-disabled){opacity:0.3}::slotted(ion-button[slot=start].button-has-icon-only),::slotted(ion-button[slot=end].button-has-icon-only){--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}`;
+const selectIosCss = ":host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:0.6;--background:transparent;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);--highlight-color:var(--highlight-color-focused);display:block;position:relative;font-family:var(--ion-font-family, inherit);white-space:nowrap;cursor:pointer;z-index:2}:host(:not(.legacy-select)){width:100%;min-height:44px}:host(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}: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}:host(.ion-focused) button{border:2px solid #5e9ed6}:host([slot=start]:not(.legacy-select)),:host([slot=end]:not(.legacy-select)){width:auto}.select-placeholder{color:var(--placeholder-color);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;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.select-icon{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}:host(.select-label-placement-stacked) .select-icon,:host(.select-label-placement-floating) .select-icon{position:absolute;height:100%}:host(.select-ltr.select-label-placement-stacked) .select-icon,:host(.select-ltr.select-label-placement-floating) .select-icon{right:var(--padding-end, 0)}:host(.select-rtl.select-label-placement-stacked) .select-icon,:host(.select-rtl.select-label-placement-floating) .select-icon{left:var(--padding-start, 0)}.select-text{flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-wrapper{-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);border-radius:var(--border-radius);display:flex;position:relative;flex-grow:1;align-items:center;height:inherit;min-height:inherit;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;box-sizing:border-box}.select-wrapper .select-placeholder{transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-wrapper-inner{display:flex;align-items:center;overflow:hidden}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{flex-grow:1}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.label-text-wrapper{display:flex;align-items:center;max-width:200px;transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden,.select-outline-notch-hidden{display:none}.native-wrapper{display:flex;align-items:center;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{justify-content:space-between}:host(.select-justify-start) .select-wrapper{justify-content:start}:host(.select-justify-end) .select-wrapper{justify-content:end}:host(.select-label-placement-start) .select-wrapper{flex-direction:row}:host(.select-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-end) .select-wrapper{flex-direction:row-reverse}:host(.select-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-wrapper,:host(.select-label-placement-floating) .select-wrapper{flex-direction:column;align-items:start}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-label-placement-floating) .label-text-wrapper{max-width:100%}:host(.select-ltr.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-label-placement-floating) .label-text-wrapper{transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{transform:translateY(100%) scale(1)}:host(.select-label-placement-floating:not(.label-floating)) .native-wrapper .select-placeholder{opacity:0}:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:1}:host(.label-floating) .label-text-wrapper{transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}::slotted([slot=start]),::slotted([slot=end]){flex-shrink:0}::slotted([slot=start]){margin-inline-end:16px;margin-inline-start:0}::slotted([slot=end]){margin-inline-start:16px;margin-inline-end:0}:host(.legacy-select){--padding-top:10px;--padding-end:8px;--padding-bottom:10px;--padding-start:16px}.select-icon{width:1.125rem;height:1.125rem;color:var(--ion-color-step-650, #595959)}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{width:calc(100% - 1.125rem - 4px)}:host(.select-disabled){opacity:0.3}::slotted(ion-button[slot=start].button-has-icon-only),::slotted(ion-button[slot=end].button-has-icon-only){--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}";
 
-const selectMdCss = () => `:host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:var(--ion-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: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(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.in-item){flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.has-focus) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){flex:initial;width:auto}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}button{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.select-icon{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}:host(.select-label-placement-stacked) .select-icon,:host(.select-label-placement-floating) .select-icon{position:absolute;height:100%}:host(.select-ltr.select-label-placement-stacked) .select-icon,:host(.select-ltr.select-label-placement-floating) .select-icon{right:var(--padding-end, 0)}:host(.select-rtl.select-label-placement-stacked) .select-icon,:host(.select-rtl.select-label-placement-floating) .select-icon{left:var(--padding-start, 0)}.select-text{flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-wrapper{-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);border-radius:var(--border-radius);display:flex;position:relative;flex-grow:1;align-items:center;justify-content:space-between;height:inherit;min-height:inherit;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;box-sizing:border-box}.select-wrapper .select-placeholder{transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-wrapper-inner{display:flex;align-items:center;overflow:hidden}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{flex-grow:1}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.select-bottom{-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:5px;padding-bottom:0;display:flex;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}:host(.has-focus.ion-valid),:host(.select-expanded.ion-valid),:host(.ion-touched.ion-invalid),:host(.select-expanded.ion-touched.ion-invalid){--border-color:var(--highlight-color)}.select-bottom .error-text{display:none;color:var(--highlight-color-invalid)}.select-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .select-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .select-bottom .helper-text{display:none}.label-text-wrapper{display:flex;align-items:center;max-width:200px;transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden,.select-outline-notch-hidden{display:none}.native-wrapper{display:flex;align-items:center;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{justify-content:space-between}:host(.select-justify-start) .select-wrapper{justify-content:start}:host(.select-justify-end) .select-wrapper{justify-content:end}:host(.select-label-placement-start) .select-wrapper{flex-direction:row}:host(.select-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-end) .select-wrapper{flex-direction:row-reverse}:host(.select-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-wrapper,:host(.select-label-placement-floating) .select-wrapper{flex-direction:column;align-items:start}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-label-placement-floating) .label-text-wrapper{max-width:100%}:host(.select-ltr.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-label-placement-floating) .label-text-wrapper{transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{transform:translateY(100%) scale(1)}:host(.select-label-placement-floating:not(.label-floating)) .native-wrapper .select-placeholder{opacity:0}:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:1}:host(.label-floating) .label-text-wrapper{transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}::slotted([slot=start]),::slotted([slot=end]){flex-shrink:0}::slotted([slot=start]:last-of-type){margin-inline-end:16px;margin-inline-start:0}::slotted([slot=end]:first-of-type){margin-inline-start:16px;margin-inline-end:0}: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));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}:host(.select-fill-solid) .select-wrapper{border-bottom:var(--border-width) var(--border-style) var(--border-color)}:host(.select-expanded.select-fill-solid.ion-valid),:host(.has-focus.select-fill-solid.ion-valid),:host(.select-fill-solid.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host(.select-fill-solid) .select-bottom{border-top:none}@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))}}:host(.select-fill-solid.select-expanded),:host(.select-fill-solid.has-focus){--background:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--border-color:var(--highlight-color)}:host(.select-fill-solid) .select-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0px;border-end-start-radius:0px}:host(.label-floating.select-fill-solid) .label-text-wrapper{max-width:calc(100% / 0.75)}:host(.in-item.select-expanded.select-fill-solid) .select-wrapper .select-icon,:host(.in-item.has-focus.select-fill-solid) .select-wrapper .select-icon,:host(.in-item.has-focus.ion-valid.select-fill-solid) .select-wrapper .select-icon,:host(.in-item.ion-touched.ion-invalid.select-fill-solid) .select-wrapper .select-icon{color:var(--highlight-color)}:host(.select-fill-outline){--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}:host(.select-fill-outline.select-shape-round){--border-radius:28px;--padding-start:32px;--padding-end:32px}:host(.has-focus.select-fill-outline.ion-valid),:host(.select-fill-outline.ion-touched.ion-invalid){--border-color:var(--highlight-color)}@media (any-hover: hover){:host(.select-fill-outline:hover){--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}:host(.select-fill-outline.select-expanded),:host(.select-fill-outline.has-focus){--border-width:var(--highlight-height);--border-color:var(--highlight-color)}:host(.select-fill-outline) .select-bottom{border-top:none}:host(.select-fill-outline) .select-wrapper{border-bottom:none}:host(.select-ltr.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-fill-outline.select-label-placement-floating) .label-text-wrapper{transform-origin:left top}:host(.select-rtl.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-fill-outline.select-label-placement-floating) .label-text-wrapper{transform-origin:right top}:host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-fill-outline.select-label-placement-floating) .label-text-wrapper{position:absolute;max-width:calc(100% - var(--padding-start) - var(--padding-end))}:host(.select-fill-outline) .label-text-wrapper{position:relative;z-index:1}:host(.label-floating.select-fill-outline) .label-text-wrapper{transform:translateY(-32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75)}:host(.select-fill-outline.select-label-placement-stacked) select,:host(.select-fill-outline.select-label-placement-floating) select{margin-left:0;margin-right:0;margin-top:6px;margin-bottom:6px}:host(.select-fill-outline) .select-outline-container{left:0;right:0;top:0;bottom:0;display:flex;position:absolute;width:100%;height:100%}:host(.select-fill-outline) .select-outline-start,:host(.select-fill-outline) .select-outline-end{pointer-events:none}:host(.select-fill-outline) .select-outline-start,:host(.select-fill-outline) .select-outline-notch,:host(.select-fill-outline) .select-outline-end{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color);box-sizing:border-box}:host(.select-fill-outline) .select-outline-notch{max-width:calc(100% - var(--padding-start) - var(--padding-end))}:host(.select-fill-outline) .notch-spacer{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none}:host(.select-fill-outline) .select-outline-start{-webkit-border-start:var(--border-width) var(--border-style) var(--border-color);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-fill-outline) .select-outline-start{width:calc(var(--padding-start) - 4px)}:host(.select-fill-outline) .select-outline-end{-webkit-border-end:var(--border-width) var(--border-style) var(--border-color);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-fill-outline) .select-outline-end{flex-grow:1}:host(.label-floating.select-fill-outline) .select-outline-notch{border-top:none}:host(.in-item.select-expanded.select-fill-outline) .select-wrapper .select-icon,:host(.in-item.has-focus.select-fill-outline) .select-wrapper .select-icon,:host(.in-item.has-focus.ion-valid.select-fill-outline) .select-wrapper .select-icon,:host(.in-item.ion-touched.ion-invalid.select-fill-outline) .select-wrapper .select-icon{color:var(--highlight-color)}: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)))));--highlight-height:2px}:host(.select-label-placement-floating.select-expanded) .label-text-wrapper,:host(.select-label-placement-floating.has-focus) .label-text-wrapper,:host(.select-label-placement-stacked.select-expanded) .label-text-wrapper,:host(.select-label-placement-stacked.has-focus) .label-text-wrapper{color:var(--highlight-color)}:host(.has-focus.select-label-placement-floating.ion-valid) .label-text-wrapper,:host(.select-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,:host(.has-focus.select-label-placement-stacked.ion-valid) .label-text-wrapper,:host(.select-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper{color:var(--highlight-color)}.select-highlight{bottom:-1px;position:absolute;width:100%;height:var(--highlight-height);transform:scale(0);transition:transform 200ms;background:var(--highlight-color)}.select-highlight{inset-inline-start:0}:host(.select-expanded) .select-highlight,:host(.has-focus) .select-highlight{transform:scale(1)}:host(.in-item) .select-highlight{bottom:0}:host(.in-item) .select-highlight{inset-inline-start:0}.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))}:host(.select-expanded:not(.has-expanded-icon)) .select-icon{transform:rotate(180deg)}:host(.in-item.select-expanded) .select-wrapper .select-icon,:host(.in-item.has-focus) .select-wrapper .select-icon,:host(.in-item.has-focus.ion-valid) .select-wrapper .select-icon,:host(.in-item.ion-touched.ion-invalid) .select-wrapper .select-icon{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host(.select-expanded) .select-wrapper .select-icon,:host(.has-focus.ion-valid) .select-wrapper .select-icon,:host(.ion-touched.ion-invalid) .select-wrapper .select-icon,:host(.has-focus) .select-wrapper .select-icon{color:var(--highlight-color)}:host(.select-shape-round){--border-radius:16px}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{width:calc(100% - 0.8125rem - 4px)}:host(.select-disabled){opacity:0.38}::slotted(ion-button[slot=start].button-has-icon-only),::slotted(ion-button[slot=end].button-has-icon-only){--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}`;
+const selectMdCss = ":host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:0.6;--background:transparent;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);--highlight-color:var(--highlight-color-focused);display:block;position:relative;font-family:var(--ion-font-family, inherit);white-space:nowrap;cursor:pointer;z-index:2}:host(:not(.legacy-select)){width:100%;min-height:44px}:host(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}: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}:host(.ion-focused) button{border:2px solid #5e9ed6}:host([slot=start]:not(.legacy-select)),:host([slot=end]:not(.legacy-select)){width:auto}.select-placeholder{color:var(--placeholder-color);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;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.select-icon{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}:host(.select-label-placement-stacked) .select-icon,:host(.select-label-placement-floating) .select-icon{position:absolute;height:100%}:host(.select-ltr.select-label-placement-stacked) .select-icon,:host(.select-ltr.select-label-placement-floating) .select-icon{right:var(--padding-end, 0)}:host(.select-rtl.select-label-placement-stacked) .select-icon,:host(.select-rtl.select-label-placement-floating) .select-icon{left:var(--padding-start, 0)}.select-text{flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-wrapper{-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);border-radius:var(--border-radius);display:flex;position:relative;flex-grow:1;align-items:center;height:inherit;min-height:inherit;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;box-sizing:border-box}.select-wrapper .select-placeholder{transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-wrapper-inner{display:flex;align-items:center;overflow:hidden}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{flex-grow:1}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.label-text-wrapper{display:flex;align-items:center;max-width:200px;transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden,.select-outline-notch-hidden{display:none}.native-wrapper{display:flex;align-items:center;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{justify-content:space-between}:host(.select-justify-start) .select-wrapper{justify-content:start}:host(.select-justify-end) .select-wrapper{justify-content:end}:host(.select-label-placement-start) .select-wrapper{flex-direction:row}:host(.select-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-end) .select-wrapper{flex-direction:row-reverse}:host(.select-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-wrapper,:host(.select-label-placement-floating) .select-wrapper{flex-direction:column;align-items:start}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-label-placement-floating) .label-text-wrapper{max-width:100%}:host(.select-ltr.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-label-placement-floating) .label-text-wrapper{transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{transform:translateY(100%) scale(1)}:host(.select-label-placement-floating:not(.label-floating)) .native-wrapper .select-placeholder{opacity:0}:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:1}:host(.label-floating) .label-text-wrapper{transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}::slotted([slot=start]),::slotted([slot=end]){flex-shrink:0}::slotted([slot=start]){margin-inline-end:16px;margin-inline-start:0}::slotted([slot=end]){margin-inline-start:16px;margin-inline-end:0}:host(.select-fill-solid){--background:var(--ion-color-step-50, #f2f2f2);--border-color:var(--ion-color-step-500, gray);--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}:host(.select-fill-solid) .select-wrapper{border-bottom:var(--border-width) var(--border-style) var(--border-color)}:host(.has-focus.select-fill-solid.ion-valid),:host(.select-fill-solid.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host(.select-fill-solid) .select-bottom{border-top:none}@media (any-hover: hover){:host(.select-fill-solid:hover){--background:var(--ion-color-step-100, #e6e6e6);--border-color:var(--ion-color-step-750, #404040)}}:host(.select-fill-solid.select-expanded),:host(.select-fill-solid.ion-focused){--background:var(--ion-color-step-150, #d9d9d9);--border-color:var(--ion-color-step-750, #404040)}:host(.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}: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{max-width:calc(100% / 0.75)}:host(.select-fill-outline){--border-color:var(--ion-color-step-300, #b3b3b3);--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}:host(.select-fill-outline.select-shape-round){--border-radius:28px;--padding-start:32px;--padding-end:32px}:host(.has-focus.select-fill-outline.ion-valid),:host(.select-fill-outline.ion-touched.ion-invalid){--border-color:var(--highlight-color)}@media (any-hover: hover){:host(.select-fill-outline:hover){--border-color:var(--ion-color-step-750, #404040)}}:host(.select-fill-outline.select-expanded),:host(.select-fill-outline.ion-focused){--border-width:2px;--border-color:var(--highlight-color)}:host(.select-fill-outline) .select-bottom{border-top:none}:host(.select-fill-outline) .select-wrapper{border-bottom:none}:host(.select-ltr.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-fill-outline.select-label-placement-floating) .label-text-wrapper{transform-origin:left top}:host(.select-rtl.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-fill-outline.select-label-placement-floating) .label-text-wrapper{transform-origin:right top}:host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-fill-outline.select-label-placement-floating) .label-text-wrapper{position:absolute;max-width:calc(100% - var(--padding-start) - var(--padding-end))}:host(.select-fill-outline) .label-text-wrapper{position:relative;z-index:1}:host(.label-floating.select-fill-outline) .label-text-wrapper{transform:translateY(-32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75)}:host(.select-fill-outline.select-label-placement-stacked) select,:host(.select-fill-outline.select-label-placement-floating) select{margin-left:0;margin-right:0;margin-top:6px;margin-bottom:6px}:host(.select-fill-outline) .select-outline-container{left:0;right:0;top:0;bottom:0;display:flex;position:absolute;width:100%;height:100%}:host(.select-fill-outline) .select-outline-start,:host(.select-fill-outline) .select-outline-end{pointer-events:none}:host(.select-fill-outline) .select-outline-start,:host(.select-fill-outline) .select-outline-notch,:host(.select-fill-outline) .select-outline-end{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color);box-sizing:border-box}:host(.select-fill-outline) .select-outline-notch{max-width:calc(100% - var(--padding-start) - var(--padding-end))}:host(.select-fill-outline) .notch-spacer{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none}:host(.select-fill-outline) .select-outline-start{-webkit-border-start:var(--border-width) var(--border-style) var(--border-color);border-inline-start:var(--border-width) var(--border-style) var(--border-color)}: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{width:calc(var(--padding-start) - 4px)}:host(.select-fill-outline) .select-outline-end{-webkit-border-end:var(--border-width) var(--border-style) var(--border-color);border-inline-end:var(--border-width) var(--border-style) var(--border-color)}: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{flex-grow:1}:host(.label-floating.select-fill-outline) .select-outline-notch{border-top:none}:host{--border-width:1px;--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, gray)}:host(.select-label-placement-floating.select-expanded) .label-text-wrapper,:host(.select-label-placement-floating.ion-focused) .label-text-wrapper,:host(.select-label-placement-stacked.select-expanded) .label-text-wrapper,:host(.select-label-placement-stacked.ion-focused) .label-text-wrapper{color:var(--highlight-color)}:host(.has-focus.select-label-placement-floating.ion-valid) .label-text-wrapper,:host(.select-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,:host(.has-focus.select-label-placement-stacked.ion-valid) .label-text-wrapper,:host(.select-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper{color:var(--highlight-color)}.select-highlight{bottom:-1px;position:absolute;width:100%;height:2px;transform:scale(0);transition:transform 200ms;background:var(--highlight-color)}@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,:host(.ion-focused) .select-highlight{transform:scale(1)}:host(.in-item) .select-highlight{bottom: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}}}:host(.select-expanded:not(.legacy-select):not(.has-expanded-icon)) .select-icon{transform:rotate(180deg)}:host(.select-expanded) .select-wrapper .select-icon,:host(.has-focus.ion-valid) .select-wrapper .select-icon,:host(.ion-touched.ion-invalid) .select-wrapper .select-icon,:host(.ion-focused) .select-wrapper .select-icon{color:var(--highlight-color)}:host-context(.item-label-stacked) .select-icon,:host-context(.item-label-floating:not(.item-fill-outline)) .select-icon,:host-context(.item-label-floating.item-fill-outline){transform:translate3d(0,  -9px,  0)}:host-context(.item-has-focus):host(:not(.has-expanded-icon)) .select-icon{transform:rotate(180deg)}:host-context(.item-has-focus.item-label-stacked):host(:not(.has-expanded-icon)) .select-icon,:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)):host(:not(.has-expanded-icon)) .select-icon{transform:translate3d(0,  -9px,  0) rotate(180deg)}:host(.select-shape-round){--border-radius:16px}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{width:calc(100% - 0.8125rem - 4px)}:host(.select-disabled){opacity:0.38}::slotted(ion-button[slot=start].button-has-icon-only),::slotted(ion-button[slot=end].button-has-icon-only){--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}";
 
 const Select = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.ionChange = createEvent(this, "ionChange", 7);
-        this.ionCancel = createEvent(this, "ionCancel", 7);
-        this.ionDismiss = createEvent(this, "ionDismiss", 7);
-        this.ionFocus = createEvent(this, "ionFocus", 7);
-        this.ionBlur = createEvent(this, "ionBlur", 7);
-        this.ionStyle = createEvent(this, "ionStyle", 7);
-        this.inputId = `ion-sel-${selectIds++}`;
-        this.helperTextId = `${this.inputId}-helper-text`;
-        this.errorTextId = `${this.inputId}-error-text`;
-        this.inheritedAttributes = {};
-        this.isExpanded = false;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionChange = createEvent(this, "ionChange", 7);
+    this.ionCancel = createEvent(this, "ionCancel", 7);
+    this.ionDismiss = createEvent(this, "ionDismiss", 7);
+    this.ionFocus = createEvent(this, "ionFocus", 7);
+    this.ionBlur = createEvent(this, "ionBlur", 7);
+    this.ionStyle = createEvent(this, "ionStyle", 7);
+    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"]');
+      if (target === this.el || closestSlot === null) {
+        this.setFocus();
+        this.open(ev);
+      }
+      else {
         /**
-         * 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 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.
+         * 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".
          *
-         * 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) {
-        this.value = value;
-        this.ionChange.emit({ value });
-    }
-    async connectedCallback() {
-        const { el } = this;
-        this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
-        this.updateOverlayOptions();
-        this.emitStyle();
-        this.mutationO = watchForOptions(this.el, 'ion-select-option', async () => {
-            this.updateOverlayOptions();
-            /**
-             * We need to re-render the component
-             * because one of the new ion-select-option
-             * elements may match the value. In this case,
-             * the rendered selected text should be updated.
-             */
-            forceUpdate(this);
-        });
-        // Watch for class changes to update validation state.
-        if (typeof MutationObserver !== 'undefined') {
-            this.validationObserver = new MutationObserver(() => {
-                const newIsInvalid = checkInvalidState(this.el);
-                if (this.isInvalid !== newIsInvalid) {
-                    this.isInvalid = newIsInvalid;
-                    /**
-                     * Screen readers tend to announce changes
-                     * to `aria-describedby` when the attribute
-                     * is changed during a blur event for a
-                     * native form control.
-                     * However, the announcement can be spotty
-                     * when using a non-native form control
-                     * and `forceUpdate()`.
-                     * This is due to `forceUpdate()` internally
-                     * rescheduling the DOM update to a lower
-                     * priority queue regardless if it's called
-                     * inside a Promise or not, thus causing
-                     * the screen reader to potentially miss the
-                     * change.
-                     * By using a State variable inside a Promise,
-                     * it guarantees a re-render immediately at
-                     * a higher priority.
-                     */
-                    Promise.resolve().then(() => {
-                        this.hintTextId = this.getHintTextId();
-                    });
-                }
-            });
-            this.validationObserver.observe(el, {
-                attributes: true,
-                attributeFilter: ['class'],
-            });
-        }
-        // Always set initial state
-        this.isInvalid = checkInvalidState(this.el);
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
-        this.hintTextId = this.getHintTextId();
-    }
-    componentDidLoad() {
-        /**
-         * If any of the conditions that trigger the styleChanged callback
-         * are met on component load, it is possible the event emitted
-         * prior to a parent web component registering an event listener.
+         * 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.
          *
-         * To ensure the parent web component receives the event, we
-         * emit the style event again after the component has loaded.
+         * When the slotted elements are clicked (and therefore
+         * the ancestor <label> element) we want to prevent the label
+         * from dispatching another click event.
          *
-         * This is often seen in Angular with the `dist` output target.
+         * 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.
          */
-        this.emitStyle();
-    }
-    disconnectedCallback() {
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
-        }
-        if (this.notchController) {
-            this.notchController.destroy();
-            this.notchController = undefined;
-        }
-        // Clean up validation observer to prevent memory leaks.
-        if (this.validationObserver) {
-            this.validationObserver.disconnect();
-            this.validationObserver = undefined;
-        }
-    }
-    /**
-     * Open the select overlay. The overlay is either an alert, action sheet, or popover,
-     * depending on the `interface` property on the `ion-select`.
-     *
-     * @param event The user interface event that called the open.
-     */
-    async open(event) {
-        if (this.disabled || this.isExpanded) {
-            return undefined;
-        }
-        this.isExpanded = true;
-        const overlay = (this.overlay = await this.createOverlay(event));
-        // Add logic to scroll selected item into view before presenting
-        const scrollSelectedIntoView = () => {
-            const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
-            if (indexOfSelected > -1) {
-                const selectedItem = overlay.querySelector(`.select-interface-option:nth-of-type(${indexOfSelected + 1})`);
-                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);
-                }
-            }
-            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'));
-                }
-            }
-        };
-        // For modals and popovers, we can scroll before they're visible
-        if (this.interface === 'modal') {
-            overlay.addEventListener('ionModalWillPresent', scrollSelectedIntoView, { once: true });
-        }
-        else if (this.interface === 'popover') {
-            overlay.addEventListener('ionPopoverWillPresent', scrollSelectedIntoView, { once: true });
-        }
-        else {
-            /**
-             * For alerts and action sheets, we need to wait a frame after willPresent
-             * because these overlays don't have their content in the DOM immediately
-             * when willPresent fires. By waiting a frame, we ensure the content is
-             * rendered and can be properly scrolled into view.
-             */
-            const scrollAfterRender = () => {
-                requestAnimationFrame(() => {
-                    scrollSelectedIntoView();
-                });
-            };
-            if (this.interface === 'alert') {
-                overlay.addEventListener('ionAlertWillPresent', scrollAfterRender, { once: true });
-            }
-            else if (this.interface === 'action-sheet') {
-                overlay.addEventListener('ionActionSheetWillPresent', scrollAfterRender, { once: true });
-            }
-        }
-        overlay.onDidDismiss().then(() => {
-            this.overlay = undefined;
-            this.isExpanded = false;
-            this.ionDismiss.emit();
-            this.setFocus();
-        });
-        await overlay.present();
-        return overlay;
-    }
-    createOverlay(ev) {
-        let selectInterface = this.interface;
-        if (selectInterface === 'action-sheet' && this.multiple) {
-            printIonWarning(`[ion-select] - Interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`);
-            selectInterface = 'alert';
-        }
-        if (selectInterface === 'popover' && !ev) {
-            printIonWarning(`[ion-select] - Interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`);
-            selectInterface = 'alert';
-        }
-        if (selectInterface === 'action-sheet') {
-            return this.openActionSheet();
-        }
-        if (selectInterface === 'popover') {
-            return this.openPopover(ev);
-        }
-        if (selectInterface === 'modal') {
-            return this.openModal();
-        }
-        return this.openAlert();
-    }
-    updateOverlayOptions() {
-        const overlay = this.overlay;
-        if (!overlay) {
-            return;
-        }
-        const childOpts = this.childOpts;
-        const value = this.value;
-        switch (this.interface) {
-            case 'action-sheet':
-                overlay.buttons = this.createActionSheetButtons(childOpts, value);
-                break;
-            case 'popover':
-                const popover = overlay.querySelector('ion-select-popover');
-                if (popover) {
-                    popover.options = this.createOverlaySelectOptions(childOpts, value);
-                }
-                break;
-            case 'modal':
-                const modal = overlay.querySelector('ion-select-modal');
-                if (modal) {
-                    modal.options = this.createOverlaySelectOptions(childOpts, value);
-                }
-                break;
-            case 'alert':
-                const inputType = this.multiple ? 'checkbox' : 'radio';
-                overlay.inputs = this.createAlertInputs(childOpts, inputType, value);
-                break;
+        ev.preventDefault();
+      }
+    };
+    this.onFocus = () => {
+      this.ionFocus.emit();
+    };
+    this.onBlur = () => {
+      this.ionBlur.emit();
+    };
+    this.isExpanded = false;
+    this.cancelText = 'Cancel';
+    this.color = undefined;
+    this.compareWith = undefined;
+    this.disabled = false;
+    this.fill = undefined;
+    this.interface = 'alert';
+    this.interfaceOptions = {};
+    this.justify = 'space-between';
+    this.label = undefined;
+    this.labelPlacement = 'start';
+    this.legacy = undefined;
+    this.multiple = false;
+    this.name = this.inputId;
+    this.okText = 'OK';
+    this.placeholder = undefined;
+    this.selectedText = undefined;
+    this.toggleIcon = undefined;
+    this.expandedIcon = undefined;
+    this.shape = undefined;
+    this.value = undefined;
+  }
+  styleChanged() {
+    this.emitStyle();
+  }
+  setValue(value) {
+    this.value = value;
+    this.ionChange.emit({ value });
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+  }
+  async connectedCallback() {
+    const { el } = this;
+    this.legacyFormController = createLegacyFormController(el);
+    this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+    this.updateOverlayOptions();
+    this.emitStyle();
+    this.mutationO = watchForOptions(this.el, 'ion-select-option', async () => {
+      this.updateOverlayOptions();
+      /**
+       * We need to re-render the component
+       * because one of the new ion-select-option
+       * elements may match the value. In this case,
+       * the rendered selected text should be updated.
+       */
+      forceUpdate(this);
+    });
+  }
+  disconnectedCallback() {
+    if (this.mutationO) {
+      this.mutationO.disconnect();
+      this.mutationO = undefined;
+    }
+    if (this.notchController) {
+      this.notchController.destroy();
+      this.notchController = undefined;
+    }
+  }
+  /**
+   * Open the select overlay. The overlay is either an alert, action sheet, or popover,
+   * depending on the `interface` property on the `ion-select`.
+   *
+   * @param event The user interface event that called the open.
+   */
+  async open(event) {
+    if (this.disabled || this.isExpanded) {
+      return undefined;
+    }
+    this.isExpanded = true;
+    const overlay = (this.overlay = await this.createOverlay(event));
+    overlay.onDidDismiss().then(() => {
+      this.overlay = undefined;
+      this.isExpanded = false;
+      this.ionDismiss.emit();
+      this.setFocus();
+    });
+    await overlay.present();
+    // focus selected option for popovers
+    if (this.interface === 'popover') {
+      const indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
+      if (indexOfSelected > -1) {
+        const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
+        if (selectedItem) {
+          focusVisibleElement(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) {
+            interactiveEl.focus();
+          }
         }
-    }
-    createActionSheetButtons(data, selectValue) {
-        const actionSheetButtons = data.map((option) => {
-            const value = getOptionValue(option);
-            // Remove hydrated before copying over classes
-            const copyClasses = Array.from(option.classList)
-                .filter((cls) => cls !== 'hydrated')
-                .join(' ');
-            const optClass = `${OPTION_CLASS} ${copyClasses}`;
-            const isSelected = isOptionSelected(selectValue, value, this.compareWith);
-            return {
-                role: isSelected ? 'selected' : '',
-                text: option.textContent,
-                cssClass: optClass,
-                handler: () => {
-                    this.setValue(value);
-                },
-                htmlAttributes: {
-                    'aria-checked': isSelected ? 'true' : 'false',
-                    role: 'radio',
-                },
-            };
-        });
-        // Add "cancel" button
-        actionSheetButtons.push({
-            text: this.cancelText,
-            role: 'cancel',
-            handler: () => {
-                this.ionCancel.emit();
-            },
-        });
-        return actionSheetButtons;
-    }
-    createAlertInputs(data, inputType, selectValue) {
-        const alertInputs = data.map((option) => {
-            const value = getOptionValue(option);
-            // Remove hydrated before copying over classes
-            const copyClasses = Array.from(option.classList)
-                .filter((cls) => cls !== 'hydrated')
-                .join(' ');
-            const optClass = `${OPTION_CLASS} ${copyClasses}`;
-            return {
-                type: inputType,
-                cssClass: optClass,
-                label: option.textContent || '',
-                value,
-                checked: isOptionSelected(selectValue, value, this.compareWith),
-                disabled: option.disabled,
-            };
-        });
-        return alertInputs;
-    }
-    createOverlaySelectOptions(data, selectValue) {
-        const popoverOptions = data.map((option) => {
-            const value = getOptionValue(option);
-            // Remove hydrated before copying over classes
-            const copyClasses = Array.from(option.classList)
-                .filter((cls) => cls !== 'hydrated')
-                .join(' ');
-            const optClass = `${OPTION_CLASS} ${copyClasses}`;
-            return {
-                text: option.textContent || '',
-                cssClass: optClass,
-                value,
-                checked: isOptionSelected(selectValue, value, this.compareWith),
-                disabled: option.disabled,
-                handler: (selected) => {
-                    this.setValue(selected);
-                    if (!this.multiple) {
-                        this.close();
-                    }
-                },
-            };
-        });
-        return popoverOptions;
-    }
-    async openPopover(ev) {
-        const { fill, labelPlacement } = this;
-        const interfaceOptions = this.interfaceOptions;
-        const mode = getIonMode(this);
-        const showBackdrop = mode === 'md' ? false : true;
-        const multiple = this.multiple;
-        const value = this.value;
-        let event = ev;
-        let size = 'auto';
-        const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
+      }
+      else {
         /**
-         * The popover should take up the full width
-         * when using a fill in MD mode or if the
-         * label is floating/stacked.
+         * If no value is set then focus the first enabled option.
          */
-        if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
-            size = 'cover';
-            /**
-             * Otherwise the popover
-             * should be positioned relative
-             * to the native element.
-             */
+        const firstEnabledOption = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
+        if (firstEnabledOption) {
+          focusVisibleElement(firstEnabledOption.closest('ion-item'));
+          /**
+           * Focus the option for the same reason as we do above.
+           */
+          firstEnabledOption.focus();
         }
-        else {
-            event = Object.assign(Object.assign({}, ev), { detail: {
-                    ionShadowTarget: this.nativeWrapperEl,
-                } });
+      }
+    }
+    return overlay;
+  }
+  createOverlay(ev) {
+    let selectInterface = this.interface;
+    if (selectInterface === 'action-sheet' && this.multiple) {
+      console.warn(`Select interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`);
+      selectInterface = 'alert';
+    }
+    if (selectInterface === 'popover' && !ev) {
+      console.warn(`Select interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`);
+      selectInterface = 'alert';
+    }
+    if (selectInterface === 'action-sheet') {
+      return this.openActionSheet();
+    }
+    if (selectInterface === 'popover') {
+      return this.openPopover(ev);
+    }
+    return this.openAlert();
+  }
+  updateOverlayOptions() {
+    const overlay = this.overlay;
+    if (!overlay) {
+      return;
+    }
+    const childOpts = this.childOpts;
+    const value = this.value;
+    switch (this.interface) {
+      case 'action-sheet':
+        overlay.buttons = this.createActionSheetButtons(childOpts, value);
+        break;
+      case 'popover':
+        const popover = overlay.querySelector('ion-select-popover');
+        if (popover) {
+          popover.options = this.createPopoverOptions(childOpts, value);
         }
-        const popoverOpts = Object.assign(Object.assign({ mode,
-            event, alignment: 'center', size,
-            showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
-                header: interfaceOptions.header,
-                subHeader: interfaceOptions.subHeader,
-                message: interfaceOptions.message,
-                multiple,
-                value,
-                options: this.createOverlaySelectOptions(this.childOpts, value),
-            } });
-        return popoverController.create(popoverOpts);
-    }
-    async openActionSheet() {
-        const mode = getIonMode(this);
-        const interfaceOptions = this.interfaceOptions;
-        const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
-        return actionSheetController.create(actionSheetOpts);
-    }
-    async openAlert() {
-        const interfaceOptions = this.interfaceOptions;
+        break;
+      case 'alert':
         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: [
-                {
-                    text: this.cancelText,
-                    role: 'cancel',
-                    handler: () => {
-                        this.ionCancel.emit();
-                    },
-                },
-                {
-                    text: this.okText,
-                    handler: (selectedValues) => {
-                        this.setValue(selectedValues);
-                    },
-                },
-            ], cssClass: [
-                'select-alert',
-                interfaceOptions.cssClass,
-                this.multiple ? 'multiple-select-alert' : 'single-select-alert',
-            ] });
-        return alertController.create(alertOpts);
-    }
-    openModal() {
-        const { multiple, value, interfaceOptions } = this;
-        const mode = getIonMode(this);
-        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
-                header: interfaceOptions.header,
-                multiple,
-                value,
-                options: this.createOverlaySelectOptions(this.childOpts, value),
-            } });
-        return modalController.create(modalOpts);
-    }
-    /**
-     * Close the select interface.
-     */
-    close() {
-        if (!this.overlay) {
-            return Promise.resolve(false);
-        }
-        return this.overlay.dismiss();
-    }
-    hasValue() {
-        return this.getText() !== '';
-    }
-    get childOpts() {
-        return Array.from(this.el.querySelectorAll('ion-select-option'));
-    }
-    /**
-     * Returns any plaintext associated with
-     * the label (either prop or slot).
-     * Note: This will not return any custom
-     * HTML. Use the `hasLabel` getter if you
-     * want to know if any slotted label content
-     * was passed.
-     */
-    get labelText() {
-        const { label } = this;
-        if (label !== undefined) {
-            return label;
-        }
-        const { labelSlot } = this;
-        if (labelSlot !== null) {
-            return labelSlot.textContent;
-        }
-        return;
-    }
-    getText() {
-        const selectedText = this.selectedText;
-        if (selectedText != null && selectedText !== '') {
-            return selectedText;
-        }
-        return generateText(this.childOpts, this.value, this.compareWith);
-    }
-    setFocus() {
-        if (this.focusEl) {
-            this.focusEl.focus();
-        }
-    }
-    emitStyle() {
-        const { disabled } = this;
-        const style = {
-            'interactive-disabled': disabled,
-        };
-        this.ionStyle.emit(style);
-    }
-    renderLabel() {
-        const { label } = this;
-        return (h("div", { class: {
-                'label-text-wrapper': true,
-                'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
-    }
-    componentDidRender() {
-        var _a;
-        (_a = this.notchController) === null || _a === void 0 ? void 0 : _a.calculateNotchWidth();
-    }
-    /**
-     * Gets any content passed into the `label` slot,
-     * not the <slot> definition.
-     */
-    get labelSlot() {
-        return this.el.querySelector('[slot="label"]');
+        overlay.inputs = this.createAlertInputs(childOpts, inputType, value);
+        break;
+    }
+  }
+  createActionSheetButtons(data, selectValue) {
+    const actionSheetButtons = data.map((option) => {
+      const value = getOptionValue(option);
+      // Remove hydrated before copying over classes
+      const copyClasses = Array.from(option.classList)
+        .filter((cls) => cls !== 'hydrated')
+        .join(' ');
+      const optClass = `${OPTION_CLASS} ${copyClasses}`;
+      return {
+        role: isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : '',
+        text: option.textContent,
+        cssClass: optClass,
+        handler: () => {
+          this.setValue(value);
+        },
+      };
+    });
+    // Add "cancel" button
+    actionSheetButtons.push({
+      text: this.cancelText,
+      role: 'cancel',
+      handler: () => {
+        this.ionCancel.emit();
+      },
+    });
+    return actionSheetButtons;
+  }
+  createAlertInputs(data, inputType, selectValue) {
+    const alertInputs = data.map((option) => {
+      const value = getOptionValue(option);
+      // Remove hydrated before copying over classes
+      const copyClasses = Array.from(option.classList)
+        .filter((cls) => cls !== 'hydrated')
+        .join(' ');
+      const optClass = `${OPTION_CLASS} ${copyClasses}`;
+      return {
+        type: inputType,
+        cssClass: optClass,
+        label: option.textContent || '',
+        value,
+        checked: isOptionSelected(selectValue, value, this.compareWith),
+        disabled: option.disabled,
+      };
+    });
+    return alertInputs;
+  }
+  createPopoverOptions(data, selectValue) {
+    const popoverOptions = data.map((option) => {
+      const value = getOptionValue(option);
+      // Remove hydrated before copying over classes
+      const copyClasses = Array.from(option.classList)
+        .filter((cls) => cls !== 'hydrated')
+        .join(' ');
+      const optClass = `${OPTION_CLASS} ${copyClasses}`;
+      return {
+        text: option.textContent || '',
+        cssClass: optClass,
+        value,
+        checked: isOptionSelected(selectValue, value, this.compareWith),
+        disabled: option.disabled,
+        handler: (selected) => {
+          this.setValue(selected);
+          if (!this.multiple) {
+            this.close();
+          }
+        },
+      };
+    });
+    return popoverOptions;
+  }
+  async openPopover(ev) {
+    const { fill, labelPlacement } = this;
+    const interfaceOptions = this.interfaceOptions;
+    const mode = getIonMode(this);
+    const showBackdrop = mode === 'md' ? false : true;
+    const multiple = this.multiple;
+    const value = this.value;
+    let event = ev;
+    let size = 'auto';
+    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 {
+      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,
+      showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
+        header: interfaceOptions.header,
+        subHeader: interfaceOptions.subHeader,
+        message: interfaceOptions.message,
+        multiple,
+        value,
+        options: this.createPopoverOptions(this.childOpts, value),
+      } });
+    return popoverController.create(popoverOpts);
+  }
+  async openActionSheet() {
+    const mode = getIonMode(this);
+    const interfaceOptions = this.interfaceOptions;
+    const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
+    return actionSheetController.create(actionSheetOpts);
+  }
+  async openAlert() {
     /**
-     * Returns `true` if label content is provided
-     * either by a prop or a content. If you want
-     * to get the plaintext value of the label use
-     * the `labelText` getter instead.
+     * TODO FW-3194
+     * Remove legacyFormController logic.
+     * Remove label and labelText vars
+     * Pass `this.labelText` instead of `labelText`
+     * when setting the header.
      */
-    get hasLabel() {
-        return this.label !== undefined || this.labelSlot !== null;
+    let label;
+    let labelText;
+    if (this.legacyFormController.hasLegacyControl()) {
+      label = this.getLabel();
+      labelText = label ? label.textContent : null;
     }
-    /**
-     * Renders the border container
-     * when fill="outline".
-     */
-    renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
-        if (hasOutlineFill) {
-            /**
-             * The outline fill has a special outline
-             * that appears around the select and the label.
-             * Certain stacked and floating label placements cause the
-             * label to translate up and create a "cut out"
-             * inside of that border by using the notch-spacer element.
-             */
-            return [
-                h("div", { class: "select-outline-container" }, h("div", { class: "select-outline-start" }), h("div", { class: {
-                        'select-outline-notch': true,
-                        'select-outline-notch-hidden': !this.hasLabel,
-                    } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "select-outline-end" })),
-                this.renderLabel(),
-            ];
-        }
-        /**
-         * If not using the outline style,
-         * we can render just the label.
-         */
-        return this.renderLabel();
+    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 : labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
+        {
+          text: this.cancelText,
+          role: 'cancel',
+          handler: () => {
+            this.ionCancel.emit();
+          },
+        },
+        {
+          text: this.okText,
+          handler: (selectedValues) => {
+            this.setValue(selectedValues);
+          },
+        },
+      ], cssClass: [
+        'select-alert',
+        interfaceOptions.cssClass,
+        this.multiple ? 'multiple-select-alert' : 'single-select-alert',
+      ] });
+    return alertController.create(alertOpts);
+  }
+  /**
+   * Close the select interface.
+   */
+  close() {
+    if (!this.overlay) {
+      return Promise.resolve(false);
+    }
+    return this.overlay.dismiss();
+  }
+  // TODO FW-3194 Remove this
+  getLabel() {
+    return findItemLabel(this.el);
+  }
+  hasValue() {
+    return this.getText() !== '';
+  }
+  get childOpts() {
+    return Array.from(this.el.querySelectorAll('ion-select-option'));
+  }
+  /**
+   * Returns any plaintext associated with
+   * the label (either prop or slot).
+   * Note: This will not return any custom
+   * HTML. Use the `hasLabel` getter if you
+   * want to know if any slotted label content
+   * was passed.
+   */
+  get labelText() {
+    const { label } = this;
+    if (label !== undefined) {
+      return label;
+    }
+    const { labelSlot } = this;
+    if (labelSlot !== null) {
+      return labelSlot.textContent;
+    }
+    return;
+  }
+  getText() {
+    const selectedText = this.selectedText;
+    if (selectedText != null && selectedText !== '') {
+      return selectedText;
+    }
+    return generateText(this.childOpts, this.value, this.compareWith);
+  }
+  setFocus() {
+    if (this.focusEl) {
+      this.focusEl.focus();
+    }
+  }
+  emitStyle() {
+    const { disabled } = this;
+    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() {
+    const { label } = this;
+    return (h("div", { class: {
+        'label-text-wrapper': true,
+        'label-text-wrapper-hidden': !this.hasLabel,
+      }, part: "label" }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
+  }
+  componentDidRender() {
+    var _a;
+    (_a = this.notchController) === null || _a === void 0 ? void 0 : _a.calculateNotchWidth();
+  }
+  /**
+   * Gets any content passed into the `label` slot,
+   * not the <slot> definition.
+   */
+  get labelSlot() {
+    return this.el.querySelector('[slot="label"]');
+  }
+  /**
+   * Returns `true` if label content is provided
+   * either by a prop or a content. If you want
+   * to get the plaintext value of the label use
+   * the `labelText` getter instead.
+   */
+  get hasLabel() {
+    return this.label !== undefined || this.labelSlot !== null;
+  }
+  /**
+   * Renders the border container
+   * when fill="outline".
+   */
+  renderLabelContainer() {
+    const mode = getIonMode(this);
+    const hasOutlineFill = mode === 'md' && this.fill === 'outline';
+    if (hasOutlineFill) {
+      /**
+       * The outline fill has a special outline
+       * that appears around the select and the label.
+       * Certain stacked and floating label placements cause the
+       * label to translate up and create a "cut out"
+       * inside of that border by using the notch-spacer element.
+       */
+      return [
+        h("div", { class: "select-outline-container" }, h("div", { class: "select-outline-start" }), h("div", { class: {
+            'select-outline-notch': true,
+            'select-outline-notch-hidden': !this.hasLabel,
+          } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "select-outline-end" })),
+        this.renderLabel(),
+      ];
     }
     /**
-     * Renders either the placeholder
-     * or the selected values based on
-     * the state of the select.
+     * If not using the outline style,
+     * we can render just the label.
      */
-    renderSelectText() {
-        const { placeholder } = this;
-        const displayValue = this.getText();
-        let addPlaceholderClass = false;
-        let selectText = displayValue;
-        if (selectText === '' && placeholder !== undefined) {
-            selectText = placeholder;
-            addPlaceholderClass = true;
-        }
-        const selectTextClasses = {
-            'select-text': true,
-            'select-placeholder': addPlaceholderClass,
-        };
-        const textPart = addPlaceholderClass ? 'placeholder' : 'text';
-        return (h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText));
-    }
+    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);
     /**
-     * Renders the chevron icon
-     * next to the select text.
+     * 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
      */
-    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 !== null && toggleIcon !== void 0 ? toggleIcon : defaultIcon;
-        }
-        return h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
-    }
-    get ariaLabel() {
-        var _a;
-        const { placeholder, inheritedAttributes } = this;
-        const displayValue = this.getText();
-        // The aria label should be preferred over visible text if both are specified
-        const definedLabel = (_a = inheritedAttributes['aria-label']) !== null && _a !== void 0 ? _a : this.labelText;
-        /**
-         * If developer has specified a placeholder
-         * and there is nothing selected, the selectText
-         * should have the placeholder value.
-         */
-        let renderedLabel = displayValue;
-        if (renderedLabel === '' && placeholder !== undefined) {
-            renderedLabel = placeholder;
-        }
-        /**
-         * If there is a developer-defined label,
-         * then we need to concatenate the developer label
-         * string with the current current value.
-         * The label for the control should be read
-         * before the values of the control.
-         */
-        if (definedLabel !== undefined) {
-            renderedLabel = renderedLabel === '' ? definedLabel : `${definedLabel}, ${renderedLabel}`;
-        }
-        return renderedLabel;
-    }
-    renderListbox() {
-        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) }));
-    }
-    getHintTextId() {
-        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
-        if (isInvalid && errorText) {
-            return errorTextId;
-        }
-        if (helperText) {
-            return helperTextId;
-        }
-        return undefined;
+    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
+   * the state of the select.
+   */
+  renderSelectText() {
+    const { placeholder } = this;
+    const displayValue = this.getText();
+    let addPlaceholderClass = false;
+    let selectText = displayValue;
+    if (selectText === '' && placeholder !== undefined) {
+      selectText = placeholder;
+      addPlaceholderClass = true;
+    }
+    const selectTextClasses = {
+      'select-text': true,
+      'select-placeholder': addPlaceholderClass,
+    };
+    const textPart = addPlaceholderClass ? 'placeholder' : 'text';
+    return (h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText));
+  }
+  /**
+   * Renders the chevron icon
+   * 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 !== null && toggleIcon !== void 0 ? toggleIcon : defaultIcon;
+    }
+    return h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
+  }
+  get ariaLabel() {
+    var _a, _b;
+    const { placeholder, el, inputId, inheritedAttributes } = this;
+    const displayValue = this.getText();
+    const { labelText } = getAriaLabel(el, inputId);
+    const definedLabel = (_b = (_a = this.labelText) !== null && _a !== void 0 ? _a : inheritedAttributes['aria-label']) !== null && _b !== void 0 ? _b : labelText;
     /**
-     * Renders the helper text or error text values
+     * If developer has specified a placeholder
+     * and there is nothing selected, the selectText
+     * should have the placeholder value.
      */
-    renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
-        return [
-            h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
-            h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null),
-        ];
+    let renderedLabel = displayValue;
+    if (renderedLabel === '' && placeholder !== undefined) {
+      renderedLabel = placeholder;
     }
     /**
-     * Responsible for rendering helper text, and error text. This element
-     * should only be rendered if hint text is set.
+     * If there is a developer-defined label,
+     * then we need to concatenate the developer label
+     * string with the current current value.
+     * The label for the control should be read
+     * before the values of the control.
      */
-    renderBottomContent() {
-        const { helperText, errorText } = this;
-        /**
-         * undefined and empty string values should
-         * be treated as not having helper/error text.
-         */
-        const hasHintText = !!helperText || !!errorText;
-        if (!hasHintText) {
-            return;
-        }
-        return h("div", { class: "select-bottom" }, this.renderHintText());
-    }
-    render() {
-        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value, hasFocus, } = this;
-        const mode = getIonMode(this);
-        const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
-        const 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 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: 'd8026835993d0e6dce747098f741a06ae4e4f54d', 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,
-                'has-focus': hasFocus,
-                // TODO(FW-6451): Remove `ion-focusable` class in favor of `has-focus`.
-                '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: 'fcfb40209d6d07d49c7fdca4884b31abf6ac2567', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'f191664f2290c3890bde1156157c83a6ff17dbe2', class: "select-wrapper-inner" }, h("slot", { key: '317a28d1115b4214f291e228ce0fe6fc782e57d5', name: "start" }), h("div", { key: 'db68e18abd5ca3a1023d7c7b58bf89893ae18073', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '4274e042267c2234a198b0f65c89477898d08130', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '2e2eb1ee2b2791e0683d9afb186fde6e938ca59c', class: "select-highlight" })), this.renderBottomContent()));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "disabled": [{
-                "styleChanged": 0
-            }],
-        "isExpanded": [{
-                "styleChanged": 0
-            }],
-        "placeholder": [{
-                "styleChanged": 0
-            }],
-        "value": [{
-                "styleChanged": 0
-            }]
-    }; }
+    if (definedLabel !== undefined) {
+      renderedLabel = renderedLabel === '' ? definedLabel : `${definedLabel}, ${renderedLabel}`;
+    }
+    return renderedLabel;
+  }
+  renderListbox() {
+    const { disabled, inputId, isExpanded } = this;
+    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 { legacyFormController } = this;
+    return legacyFormController.hasLegacyControl() ? this.renderLegacySelect() : this.renderSelect();
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "disabled": ["styleChanged"],
+    "isExpanded": ["styleChanged"],
+    "placeholder": ["styleChanged"],
+    "value": ["styleChanged"]
+  }; }
 };
 const getOptionValue = (el) => {
-    const value = el.value;
-    return value === undefined ? el.textContent || '' : value;
+  const value = el.value;
+  return value === undefined ? el.textContent || '' : value;
 };
 const parseValue = (value) => {
-    if (value == null) {
-        return undefined;
-    }
-    if (Array.isArray(value)) {
-        return value.join(',');
-    }
-    return value.toString();
+  if (value == null) {
+    return undefined;
+  }
+  if (Array.isArray(value)) {
+    return value.join(',');
+  }
+  return value.toString();
 };
 const generateText = (opts, value, compareWith) => {
-    if (value === undefined) {
-        return '';
-    }
-    if (Array.isArray(value)) {
-        return value
-            .map((v) => textForValue(opts, v, compareWith))
-            .filter((opt) => opt !== null)
-            .join(', ');
-    }
-    else {
-        return textForValue(opts, value, compareWith) || '';
-    }
+  if (value === undefined) {
+    return '';
+  }
+  if (Array.isArray(value)) {
+    return value
+      .map((v) => textForValue(opts, v, compareWith))
+      .filter((opt) => opt !== null)
+      .join(', ');
+  }
+  else {
+    return textForValue(opts, value, compareWith) || '';
+  }
 };
 const textForValue = (opts, value, compareWith) => {
-    const selectOpt = opts.find((opt) => {
-        return compareOptions(value, getOptionValue(opt), compareWith);
-    });
-    return selectOpt ? selectOpt.textContent : null;
+  const selectOpt = opts.find((opt) => {
+    return compareOptions(value, getOptionValue(opt), compareWith);
+  });
+  return selectOpt ? selectOpt.textContent : null;
 };
 let selectIds = 0;
 const OPTION_CLASS = 'select-interface-option';
 Select.style = {
-    ios: selectIosCss(),
-    md: selectMdCss()
+  ios: selectIosCss,
+  md: selectMdCss
 };
 
 export { Select as ion_select };