@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

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

@@ -1,25 +1,29 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as Host, g as getElement, i as forceUpdate } from './index-tcQvqkiX.js';
-import { c as createNotchController } from './notch-controller-Doqis1td.js';
-import { i as isOptionSelected, c as compareOptions } from './compare-with-utils-sObYyvOy.js';
+import { r as registerInstance, c as createEvent, e as config, g as getElement, f as printIonWarning, h, d as Host, i as forceUpdate } from './index-ChhhtsGZ.js';
+import { E as ENABLE_HTML_CONTENT_DEFAULT } from './config-DWCzVL3Y.js';
+import { c as createSlotMutationController, a as createNotchController, b as createStartContainerController } from './slot-mutation-controller-DiE_C9un.js';
+import { c as compareOptions, i as isOptionSelected } from './compare-with-utils-sObYyvOy.js';
 import { c as checkInvalidState } from './validity-DJztqcrH.js';
-import { b as inheritAttributes, a as renderHiddenInput, n as focusVisibleElement } from './helpers-DkCLSLI9.js';
-import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-COCl_nm9.js';
-import { i as isRTL } from './dir-o8OKV5aD.js';
-import { h as hostContext, c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
+import { b as inheritAttributes, a as renderHiddenInput, n as focusVisibleElement } from './helpers-CAGf8Wgp.js';
+import { p as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-CPmIs9Ls.js';
+import { i as isRTL } from './dir-Dojwmvde.js';
+import { r as reflectPropertiesToAttributes, a as sanitizeDOMTree } from './index-CKM1DdGm.js';
+import { h as hostContext, c as createColorClasses, g as getClassMap } from './theme-byZM6qHV.js';
 import { w as watchForOptions } from './watch-options-Dtdm8lKC.js';
-import { w as chevronExpand, q as caretDownSharp } from './index-DV3sJJW8.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { w as chevronExpand, f as caretDownSharp } from './index-BvabGprD.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { a as getOverlayLabelPlacement, g as getOverlayLabelJustify } from './overlay-control-label-BSQPZ79H.js';
+import { r as renderOptionLabel } from './select-option-render-C4m76VGH.js';
 import './index-ZjP4CjeZ.js';
-import './hardware-back-button-B93Gru0Y.js';
-import './framework-delegate-B9yvYzqV.js';
-import './gesture-controller-BTEOs1at.js';
+import './hardware-back-button-gLJHMX_F.js';
+import './framework-delegate-BHTU2Ip9.js';
+import './gesture-controller-TXPDHL13.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){-ms-flex:1 1 0px;flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.has-focus) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){-ms-flex:initial;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;-ms-flex-negative:0;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{-ms-flex:1;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:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.select-wrapper .select-placeholder{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-wrapper-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{-ms-flex-positive:1;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:-ms-flexbox;display:flex;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.select-justify-start) .select-wrapper{-ms-flex-pack:start;justify-content:start}:host(.select-justify-end) .select-wrapper{-ms-flex-pack:end;justify-content:end}:host(.select-label-placement-start) .select-wrapper{-ms-flex-direction:row;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{-ms-flex-direction:row-reverse;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{-ms-flex:0 0 100px;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{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;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{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;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;-ms-flex-positive:1;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);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{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]:last-of-type){-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}::slotted([slot=end]:first-of-type){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;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: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);--select-text-media-height:1.5em;--select-text-media-width:1.5em;--select-text-gap:12px;--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){-ms-flex:1 1 0px;flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.has-focus) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){-ms-flex:initial;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;-ms-flex-negative:0;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}.select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-text>*+*{-webkit-margin-start:var(--select-text-gap);margin-inline-start:var(--select-text-gap)}.select-text img,.select-text ion-img,.select-text ion-icon,.select-text ion-thumbnail,.select-text ion-avatar{border-radius:var(--select-text-media-border-radius);width:var(--select-text-media-width);height:var(--select-text-media-height);border-width:var(--select-text-media-border-width);border-style:var(--select-text-media-border-style);border-color:var(--select-text-media-border-color)}.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:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.select-wrapper .select-placeholder{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-control{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:inherit;justify-content:inherit;min-width:0}: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:-ms-flexbox;display:flex;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:0;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}:host(.skip-label-transition) .label-text-wrapper{-webkit-transition:none;transition: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:-ms-flexbox;display:flex;-ms-flex-negative:100000;flex-shrink:100000;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.select-justify-start) .select-wrapper{-ms-flex-pack:start;justify-content:start}:host(.select-justify-end) .select-wrapper{-ms-flex-pack:end;justify-content:end}:host(.select-label-placement-start) .select-wrapper{-ms-flex-direction:row;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{-ms-flex-direction:row-reverse;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{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-control,:host(.select-label-placement-floating) .select-control{-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;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{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:0}:host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:var(--placeholder-opacity)}:host(.label-floating) .label-text-wrapper{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.select-start,.select-end{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]:last-of-type){-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}::slotted([slot=end]:first-of-type){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;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-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){-ms-flex:1 1 0px;flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.has-focus) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){-ms-flex:initial;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;-ms-flex-negative:0;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{-ms-flex:1;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:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.select-wrapper .select-placeholder{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-wrapper-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{-ms-flex-positive:1;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:-ms-flexbox;display:flex;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.select-justify-start) .select-wrapper{-ms-flex-pack:start;justify-content:start}:host(.select-justify-end) .select-wrapper{-ms-flex-pack:end;justify-content:end}:host(.select-label-placement-start) .select-wrapper{-ms-flex-direction:row;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{-ms-flex-direction:row-reverse;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{-ms-flex:0 0 100px;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{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;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{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;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;-ms-flex-positive:1;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);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{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]:last-of-type){-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}::slotted([slot=end]:first-of-type){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;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{-webkit-transform-origin:left top;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{-webkit-transform-origin:right top;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{-webkit-transform:translateY(-32%) scale(0.75);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:-ms-flexbox;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);-webkit-box-sizing:border-box;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{-ms-flex-positive:1;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);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.select-highlight{inset-inline-start:0}:host(.select-expanded) .select-highlight,:host(.has-focus) .select-highlight{-webkit-transform:scale(1);transform:scale(1)}:host(.in-item) .select-highlight{bottom:0}:host(.in-item) .select-highlight{inset-inline-start:0}.select-icon{width:0.8125rem;-webkit-transition:-webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-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{-webkit-transform:rotate(180deg);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: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);--select-text-media-height:1.5em;--select-text-media-width:1.5em;--select-text-gap:12px;--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){-ms-flex:1 1 0px;flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.has-focus) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){-ms-flex:initial;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;-ms-flex-negative:0;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}.select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-text>*+*{-webkit-margin-start:var(--select-text-gap);margin-inline-start:var(--select-text-gap)}.select-text img,.select-text ion-img,.select-text ion-icon,.select-text ion-thumbnail,.select-text ion-avatar{border-radius:var(--select-text-media-border-radius);width:var(--select-text-media-width);height:var(--select-text-media-height);border-width:var(--select-text-media-border-width);border-style:var(--select-text-media-border-style);border-color:var(--select-text-media-border-color)}.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:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.select-wrapper .select-placeholder{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-control{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:inherit;justify-content:inherit;min-width:0}: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:-ms-flexbox;display:flex;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:0;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}:host(.skip-label-transition) .label-text-wrapper{-webkit-transition:none;transition: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:-ms-flexbox;display:flex;-ms-flex-negative:100000;flex-shrink:100000;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.select-justify-start) .select-wrapper{-ms-flex-pack:start;justify-content:start}:host(.select-justify-end) .select-wrapper{-ms-flex-pack:end;justify-content:end}:host(.select-label-placement-start) .select-wrapper{-ms-flex-direction:row;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{-ms-flex-direction:row-reverse;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{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-control,:host(.select-label-placement-floating) .select-control{-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;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{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{-ms-flex-positive:1;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:0}:host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:var(--placeholder-opacity)}:host(.label-floating) .label-text-wrapper{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.select-start,.select-end{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]:last-of-type){-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}::slotted([slot=end]:first-of-type){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;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;--internal-start-container-adjustment:0px;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{-webkit-transform-origin:left top;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{-webkit-transform-origin:right top;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:100%}:host(.select-fill-outline) .label-text-wrapper{position:relative;z-index:1}:host(.select-fill-outline:not(.label-floating)) .select-control{position:relative}:host(.label-floating.select-fill-outline) .label-text-wrapper{-webkit-transform:translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);transform:translate(var(--internal-start-container-adjustment, 0px), -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:-ms-flexbox;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);-webkit-box-sizing:border-box;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);border-start-start-radius:var(--border-radius);border-start-end-radius:0px;border-end-end-radius:0px;border-end-start-radius:var(--border-radius);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);border-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px;-ms-flex-positive:1;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);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.select-highlight{inset-inline-start:0}:host(.select-expanded) .select-highlight,:host(.has-focus) .select-highlight{-webkit-transform:scale(1);transform:scale(1)}:host(.in-item) .select-highlight{bottom:0}:host(.in-item) .select-highlight{inset-inline-start:0}.select-icon{width:0.8125rem;-webkit-transition:-webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-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{-webkit-transform:rotate(180deg);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-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) {
@@ -30,141 +34,240 @@ const Select = class {
         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;
-        /**
-         * 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.
-         *
-         * 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();
-            }
-        };
     }
+    inputId = `ion-sel-${selectIds++}`;
+    helperTextId = `${this.inputId}-helper-text`;
+    errorTextId = `${this.inputId}-error-text`;
+    overlay;
+    focusEl;
+    mutationO;
+    inheritedAttributes = {};
+    slotMutationController;
+    nativeWrapperEl;
+    notchSpacerEl;
+    validationObserver;
+    notchController;
+    startContainerController;
+    startContainerEl;
+    customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    get el() { return getElement(this); }
+    isExpanded = false;
+    /**
+     * The `hasFocus` state ensures the focus class is
+     * added regardless of how the element is focused.
+     * The `ion-focused` class only applies when focused
+     * via tabbing, not by clicking.
+     * The `has-focus` logic was added to ensure the class
+     * is applied in both cases.
+     */
+    hasFocus = false;
+    /**
+     * Track validation state for proper aria-live announcements.
+     */
+    isInvalid = false;
+    hintTextId;
+    /**
+     * The text to display on the cancel button.
+     */
+    cancelText = 'Cancel';
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     *
+     * This property is only available when using the modern select syntax.
+     */
+    color;
+    /**
+     * This property allows developers to specify a custom function or property
+     * name for comparing objects when determining the selected option in the
+     * ion-select. When not specified, the default behavior will use strict
+     * equality (===) for comparison.
+     */
+    compareWith;
+    /**
+     * If `true`, the user cannot interact with the select.
+     */
+    disabled = false;
+    /**
+     * The fill for the item. If `"solid"` the item will have a background. If
+     * `"outline"` the item will be transparent with a border. Only available in `md` mode.
+     */
+    fill;
+    /**
+     * Text that is placed under the select and displayed when an error is detected.
+     */
+    errorText;
+    /**
+     * Text that is placed under the select and displayed when no error is detected.
+     */
+    helperText;
+    /**
+     * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
+     */
+    interface = 'alert';
+    /**
+     * Any additional options that the `alert`, `action-sheet` or `popover` interface
+     * can take. See the [ion-alert docs](./alert), the
+     * [ion-action-sheet docs](./action-sheet), the
+     * [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the
+     * create options for each interface.
+     *
+     * Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
+     */
+    interfaceOptions = {};
+    /**
+     * How to pack the label and select within a line.
+     * `justify` does not apply when the label and select
+     * are on different lines when `labelPlacement` is set to
+     * `"floating"` or `"stacked"`.
+     * `"start"`: The label and select will appear on the left in LTR and
+     * on the right in RTL.
+     * `"end"`: The label and select will appear on the right in LTR and
+     * on the left in RTL.
+     * `"space-between"`: The label and select will appear on opposite
+     * ends of the line with space between the two elements.
+     */
+    justify;
+    /**
+     * The visible label associated with the select.
+     *
+     * Use this if you need to render a plaintext label.
+     *
+     * The `label` property will take priority over the `label` slot if both are used.
+     */
+    label;
+    /**
+     * Where to place the label relative to the select.
+     * `"start"`: The label will appear to the left of the select in LTR and to the right in RTL.
+     * `"end"`: The label will appear to the right of the select in LTR and to the left in RTL.
+     * `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.
+     * `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.
+     * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+     * When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
+     */
+    labelPlacement = 'start';
+    /**
+     * If `true`, the select can accept multiple values.
+     */
+    multiple = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    name = this.inputId;
+    /**
+     * The text to display on the ok button.
+     */
+    okText = 'OK';
+    /**
+     * The text to display when the select is empty.
+     */
+    placeholder;
+    /**
+     * The text to display instead of the selected option's value.
+     */
+    selectedText;
+    /**
+     * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,
+     * or `caretDownSharp` for `md` mode.
+     */
+    toggleIcon;
+    /**
+     * The toggle icon to show when the select is open. If defined, the icon
+     * rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`
+     * will be used for when the select is both open and closed.
+     */
+    expandedIcon;
+    /**
+     * The shape of the select. If "round" it will have an increased border radius.
+     */
+    shape;
+    /**
+     * The value of the select.
+     */
+    value;
+    /**
+     * If true, screen readers will announce it as a required field. This property
+     * works only for accessibility purposes, it will not prevent the form from
+     * submitting if the value is invalid.
+     */
+    required = false;
+    /**
+     * Emitted when the value has changed.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    ionChange;
+    /**
+     * Emitted when the selection is cancelled.
+     */
+    ionCancel;
+    /**
+     * Emitted when the overlay is dismissed.
+     */
+    ionDismiss;
+    /**
+     * Emitted when the select has focus.
+     */
+    ionFocus;
+    /**
+     * Emitted when the select loses focus.
+     */
+    ionBlur;
+    /**
+     * Emitted when the styles change.
+     * @internal
+     */
+    ionStyle;
     styleChanged() {
         this.emitStyle();
     }
     setValue(value) {
+        if (this.isValueEqual(this.value, value)) {
+            return;
+        }
         this.value = value;
         this.ionChange.emit({ value });
     }
+    isValueEqual(currentValue, newValue) {
+        if (this.multiple) {
+            const currentArr = Array.isArray(currentValue) ? currentValue : [];
+            const newArr = Array.isArray(newValue) ? newValue : [];
+            if (currentArr.length !== newArr.length) {
+                return false;
+            }
+            // Multiset compare: each new value must match a distinct current value.
+            // A plain `every(isOptionSelected)` would accept ['a','a'] as equal to
+            // ['a','b'] when both 'a' and 'b' map to options whose values overlap.
+            const remaining = currentArr.slice();
+            return newArr.every((val) => {
+                const idx = remaining.findIndex((c) => compareOptions(c, val, this.compareWith));
+                if (idx === -1) {
+                    return false;
+                }
+                remaining.splice(idx, 1);
+                return true;
+            });
+        }
+        if (currentValue == null && newValue == null) {
+            return true;
+        }
+        if (currentValue == null || newValue == null) {
+            return false;
+        }
+        return compareOptions(currentValue, newValue, this.compareWith);
+    }
     async connectedCallback() {
         const { el } = this;
+        this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
+            this.startContainerController?.calculateStartContainerWidth();
+            forceUpdate(this);
+        });
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        this.startContainerController = createStartContainerController(el, () => this.startContainerEl, () => {
+            return getIonMode(this) === 'md' && this.fill === 'outline';
+        });
+        this.startContainerController.calculateStartContainerWidth();
         this.updateOverlayOptions();
         this.emitStyle();
         this.mutationO = watchForOptions(this.el, 'ion-select-option', async () => {
@@ -236,10 +339,18 @@ const Select = class {
             this.mutationO.disconnect();
             this.mutationO = undefined;
         }
+        if (this.slotMutationController) {
+            this.slotMutationController.destroy();
+            this.slotMutationController = undefined;
+        }
         if (this.notchController) {
             this.notchController.destroy();
             this.notchController = undefined;
         }
+        if (this.startContainerController) {
+            this.startContainerController.destroy();
+            this.startContainerController = undefined;
+        }
         // Clean up validation observer to prevent memory leaks.
         if (this.validationObserver) {
             this.validationObserver.disconnect();
@@ -396,10 +507,11 @@ const Select = class {
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
             const isSelected = isOptionSelected(selectValue, value, this.compareWith);
+            const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
             return {
-                role: isSelected ? 'selected' : '',
-                text: option.textContent,
+                text: content ?? '',
                 cssClass: optClass,
+                disabled: option.disabled,
                 handler: () => {
                     this.setValue(value);
                 },
@@ -407,6 +519,9 @@ const Select = class {
                     'aria-checked': isSelected ? 'true' : 'false',
                     role: 'radio',
                 },
+                startContent,
+                endContent,
+                description: option.description,
             };
         });
         // Add "cancel" button
@@ -427,13 +542,19 @@ const Select = class {
                 .filter((cls) => cls !== 'hydrated')
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
+            const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
             return {
                 type: inputType,
                 cssClass: optClass,
-                label: option.textContent || '',
+                label: content ?? '',
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
                 disabled: option.disabled,
+                startContent,
+                endContent,
+                description: option.description,
+                labelPlacement: option.labelPlacement,
+                justify: option.justify,
             };
         });
         return alertInputs;
@@ -446,8 +567,9 @@ const Select = class {
                 .filter((cls) => cls !== 'hydrated')
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
+            const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
             return {
-                text: option.textContent || '',
+                text: content ?? '',
                 cssClass: optClass,
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
@@ -458,6 +580,11 @@ const Select = class {
                         this.close();
                     }
                 },
+                startContent,
+                endContent,
+                description: option.description,
+                labelPlacement: option.labelPlacement,
+                justify: option.justify,
             };
         });
         return popoverOptions;
@@ -486,33 +613,60 @@ const Select = class {
              */
         }
         else {
-            event = Object.assign(Object.assign({}, ev), { detail: {
+            event = {
+                ...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: {
+        const options = this.createOverlaySelectOptions(this.childOpts, value);
+        const hasRichContent = options.some((opt) => Boolean(opt.startContent) || Boolean(opt.endContent) || Boolean(opt.description));
+        const popoverOpts = {
+            mode,
+            event,
+            alignment: 'center',
+            size,
+            showBackdrop,
+            ...interfaceOptions,
+            component: 'ion-select-popover',
+            cssClass: [
+                'select-popover',
+                hasRichContent ? 'select-popover-rich-content' : undefined,
+                interfaceOptions.cssClass,
+            ],
+            componentProps: {
                 header: interfaceOptions.header,
                 subHeader: interfaceOptions.subHeader,
                 message: interfaceOptions.message,
                 multiple,
                 value,
-                options: this.createOverlaySelectOptions(this.childOpts, value),
-            } });
+                options,
+            },
+        };
         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] });
+        const actionSheetOpts = {
+            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;
         const inputType = this.multiple ? 'checkbox' : 'radio';
         const mode = getIonMode(this);
-        const alertOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
+        const alertOpts = {
+            mode,
+            ...interfaceOptions,
+            header: interfaceOptions.header ? interfaceOptions.header : this.labelText,
+            inputs: this.createAlertInputs(this.childOpts, inputType, this.value),
+            buttons: [
                 {
                     text: this.cancelText,
                     role: 'cancel',
@@ -526,23 +680,31 @@ const Select = class {
                         this.setValue(selectedValues);
                     },
                 },
-            ], cssClass: [
+            ],
+            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: {
+        const modalOpts = {
+            ...interfaceOptions,
+            mode,
+            cssClass: ['select-modal', interfaceOptions.cssClass],
+            component: 'ion-select-modal',
+            componentProps: {
                 header: interfaceOptions.header,
                 cancelText: this.cancelText,
                 multiple,
                 value,
                 options: this.createOverlaySelectOptions(this.childOpts, value),
-            } });
+            },
+        };
         return modalController.create(modalOpts);
     }
     /**
@@ -579,12 +741,18 @@ const Select = class {
         }
         return;
     }
-    getText() {
+    /**
+     * Returns the text to display in the select based on the selected value.
+     *
+     * @param useHTML If `true`, the returned text will include any custom HTML content from the selected option. If `false`, the returned text will be plain text without any HTML. Defaults to `false`.
+     * @returns The text to display in the select, either with or without HTML based on the `useHTML` parameter.
+     */
+    getText(useHTML = false) {
         const selectedText = this.selectedText;
         if (selectedText != null && selectedText !== '') {
             return selectedText;
         }
-        return generateText(this.childOpts, this.value, this.compareWith);
+        return generateText(this.childOpts, this.value, this.compareWith, useHTML);
     }
     setFocus() {
         if (this.focusEl) {
@@ -598,6 +766,51 @@ const Select = class {
         };
         this.ionStyle.emit(style);
     }
+    onClick = (ev) => {
+        const target = ev.target;
+        const closestSlot = target.closest('[slot="start"], [slot="end"]');
+        if (target === this.el || closestSlot === null) {
+            this.setFocus();
+            this.open(ev);
+        }
+        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();
+        }
+    };
+    onFocus = () => {
+        this.hasFocus = true;
+        this.ionFocus.emit();
+    };
+    onBlur = () => {
+        this.hasFocus = false;
+        this.ionBlur.emit();
+    };
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
@@ -606,8 +819,8 @@ const Select = class {
             }, 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();
+        this.notchController?.calculateNotchWidth();
+        this.startContainerController?.calculateStartContainerWidth();
     }
     /**
      * Gets any content passed into the `label` slot,
@@ -626,33 +839,64 @@ const Select = class {
         return this.label !== undefined || this.labelSlot !== null;
     }
     /**
-     * Renders the border container
-     * when fill="outline".
+     * Stops propagation for re-dispatched clicks (when already expanded) to
+     * prevent double-click events. Allows initial button clicks (from keyboard
+     * or mouse) and slotted content clicks to propagate so event delegation
+     * works for parent handlers.
      */
-    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(),
-            ];
+    onLabelClick = (ev) => {
+        if (ev.target === this.focusEl && this.isExpanded) {
+            ev.stopPropagation();
         }
-        /**
-         * If not using the outline style,
-         * we can render just the label.
-         */
-        return this.renderLabel();
+    };
+    /**
+     * Renders the outline border with a notch for the label.
+     */
+    renderOutlineContainer() {
+        return (h("div", { class: "select-outline-container" }, h("div", { class: "select-outline-start" }), h("div", { class: {
+                'select-outline-notch': true,
+                'select-outline-notch-hidden': !this.hasLabel,
+            } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "select-outline-end" })));
+    }
+    /**
+     * Wraps text nodes in the select text with span elements
+     * so spacing can be added between elements without
+     * changing the display to prevent losing the ellipses
+     * behavior.
+     *
+     * Only wraps when the string contains HTML elements
+     * alongside text.
+     */
+    wrapSelectTextNodes(html) {
+        const temp = document.createElement('div');
+        temp.innerHTML = html;
+        const hasElements = Array.from(temp.childNodes).some((n) => n.nodeType === Node.ELEMENT_NODE);
+        // Return the plain text
+        if (!hasElements) {
+            return html;
+        }
+        Array.from(temp.childNodes).forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+                const text = node.textContent;
+                /**
+                 * Split comma separator from the text content
+                 * e.g., ", Bacon" becomes ", " text node + <span>Bacon</span>.
+                 */
+                const commaMatch = text.match(/^(,\s*)(.*)/);
+                if (commaMatch) {
+                    const commaNode = document.createTextNode(commaMatch[1]);
+                    const wrapper = document.createElement('span');
+                    wrapper.textContent = commaMatch[2];
+                    node.parentNode?.replaceChild(wrapper, node);
+                    wrapper.parentNode?.insertBefore(commaNode, wrapper);
+                    return;
+                }
+                const wrapper = document.createElement('span');
+                node.parentNode?.replaceChild(wrapper, node);
+                wrapper.appendChild(node);
+            }
+        });
+        return temp.innerHTML;
     }
     /**
      * Renders either the placeholder
@@ -661,7 +905,7 @@ const Select = class {
      */
     renderSelectText() {
         const { placeholder } = this;
-        const displayValue = this.getText();
+        const displayValue = this.getText(true);
         let addPlaceholderClass = false;
         let selectText = displayValue;
         if (selectText === '' && placeholder !== undefined) {
@@ -673,6 +917,10 @@ const Select = class {
             'select-placeholder': addPlaceholderClass,
         };
         const textPart = addPlaceholderClass ? 'placeholder' : 'text';
+        if (this.customHTMLEnabled) {
+            const wrapped = this.wrapSelectTextNodes(selectText);
+            return h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart, innerHTML: wrapped });
+        }
         return (h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText));
     }
     /**
@@ -688,16 +936,16 @@ const Select = class {
         }
         else {
             const defaultIcon = mode === 'ios' ? chevronExpand : caretDownSharp;
-            icon = toggleIcon !== null && toggleIcon !== void 0 ? toggleIcon : defaultIcon;
+            icon = toggleIcon ?? defaultIcon;
         }
         return h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
     }
     get ariaLabel() {
-        var _a;
         const { placeholder, inheritedAttributes } = this;
+        // Get the plain text from the selected text
         const displayValue = this.getText();
         // The aria label should be preferred over visible text if both are specified
-        const definedLabel = (_a = inheritedAttributes['aria-label']) !== null && _a !== void 0 ? _a : this.labelText;
+        const definedLabel = inheritedAttributes['aria-label'] ?? this.labelText;
         /**
          * If developer has specified a placeholder
          * and there is nothing selected, the selectText
@@ -768,28 +1016,10 @@ const Select = class {
         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;
+        const hasOutlineFill = mode === 'md' && fill === 'outline';
         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 || hasFocus || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'f16327d6866ffee76e1618fcd3281590ca0fd56d', onClick: this.onClick, class: createColorClasses(this.color, {
+        const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
+        return (h(Host, { key: '5d1e5bf46d0f204efdcb55cc42cfde52e6db304b', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -807,9 +1037,8 @@ const Select = class {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'db13f76b384a7a7461c1ad752108eadf9c0213be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '2fb0e57bd596c0f525be79293b7da4aca55a9385', class: "select-wrapper-inner", part: "inner" }, h("slot", { key: 'cd694c36242789a89461ed3412af9891ad68411b', name: "start" }), h("div", { key: 'fdf62911be54f4ab29eb3c2eb153f082e76a8f49', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'a32f5c4b101d4d6ad45870f4c4446960009377f5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '61f792024a5f221ef4f28a3c249bd3a0de5edeab', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '15fd1f8e06510ae8472c621cf8cf90e51172e0be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '7964e3d9351671899793b117896acdda25ec24c4', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'aa309ef155c4025acfd7ed5739b5221c85097b36', name: "start" })), h("div", { key: '23d5a9dfea64a9d81b0b36d9426b15bed98901b9', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '810da9fbfa8771e09b5fb768d64e5f04858b5833', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: 'bf1c04704326ecfa14cf2e49bb76d3fb45beb08d', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '76a8bcaeefdcaa908aebd820d93171b08165cee3', name: "end" })), shouldRenderHighlight && h("div", { key: '55a9c417a82323a44e16328fd62a634d9d7c558b', class: "select-highlight" })), this.renderBottomContent()));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "disabled": [{
                 "styleChanged": 0
@@ -838,25 +1067,219 @@ const parseValue = (value) => {
     }
     return value.toString();
 };
-const generateText = (opts, value, compareWith) => {
+const generateText = (opts, value, compareWith, useHTML = false) => {
     if (value === undefined) {
         return '';
     }
     if (Array.isArray(value)) {
         return value
-            .map((v) => textForValue(opts, v, compareWith))
+            .map((v) => textForValue(opts, v, compareWith, useHTML))
             .filter((opt) => opt !== null)
             .join(', ');
     }
     else {
-        return textForValue(opts, value, compareWith) || '';
+        return textForValue(opts, value, compareWith, useHTML) || '';
     }
 };
-const textForValue = (opts, value, compareWith) => {
+/**
+ * Returns the display text for a given value from the list of options.
+ * When `useHTML` is true, returns sanitized HTML for the select text.
+ * When `useHTML` is false, returns plain text for aria-label and other
+ * text-only contexts.
+ *
+ * @param opts - The list of ion-select-option elements.
+ * @param value - The value to find the matching option for.
+ * @param compareWith - Custom comparison function or property name.
+ * @param useHTML - If true, returns HTML string. If false, returns plain text.
+ */
+const textForValue = (opts, value, compareWith, useHTML = false) => {
     const selectOpt = opts.find((opt) => {
         return compareOptions(value, getOptionValue(opt), compareWith);
     });
-    return selectOpt ? selectOpt.textContent : null;
+    const customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    if (!selectOpt) {
+        return null;
+    }
+    // Return sanitized HTML for the select text
+    if (customHTMLEnabled && useHTML) {
+        return getOptionContent(selectOpt, undefined, true);
+    }
+    /**
+     * When custom HTML is enabled, extract only the default slot content.
+     * This ensures aria-label and other text-only contexts read only
+     * the relevant option text.
+     */
+    if (customHTMLEnabled) {
+        const content = getOptionContent(selectOpt);
+        if (typeof content === 'string') {
+            return content;
+        }
+        /**
+         * Elements were found in the default slot, extract and concatenate
+         * their text content while trimming whitespace.
+         */
+        if (content) {
+            const texts = Array.from(content.childNodes)
+                .map((n) => n.textContent?.trim())
+                .filter((t) => t);
+            return texts.join(' ') || null;
+        }
+        // Empty option
+        return null;
+    }
+    return getDefaultSlotPlainText(selectOpt);
+};
+/**
+ * Trims whitespace from all text nodes within a DOM tree.
+ * This prevents invisible layout shifts and unwanted gaps between
+ * elements when HTML content is injected via innerHTML or cloneNode,
+ * as browsers preserve whitespace (tabs, newlines, spaces) from
+ * the original source markup.
+ *
+ * @param node The root node to start trimming text nodes from.
+ */
+const trimTextNodes = (node) => {
+    node.childNodes.forEach((child) => {
+        if (child.nodeType === Node.TEXT_NODE) {
+            child.textContent = child.textContent?.trim() || '';
+        }
+        else if (child.nodeType === Node.ELEMENT_NODE) {
+            trimTextNodes(child);
+        }
+    });
+};
+/**
+ * Extracts and clones content from an `ion-select-option` element
+ * for rendering within overlay interfaces or the select text when `customHTMLEnabled` is `true`.
+ *
+ * @param option - The `ion-select-option` element to extract content from.
+ * @param slotName - Optional slot name to extract. If omitted, extracts the default slot content.
+ * @param useHTML - If `true`, the returned string will include any custom HTML content. If `false`, the returned string will be plain text without any HTML.
+ * @returns When `useHTML` is `true`, a sanitized HTML string. When `false`, a
+ * div element containing cloned child nodes. Returns `null` if no matching
+ * content is found.
+ */
+const getOptionContent = (option, slotName, useHTML = false) => {
+    let nodes;
+    if (slotName) {
+        // Named slot: get elements with matching slot attribute
+        nodes = Array.from(option.children).filter((el) => el.getAttribute('slot') === slotName);
+    }
+    else {
+        // Default slot: get nodes without a slot attribute
+        const defaultSlot = getOptionDefaultSlot(option) || [];
+        nodes = defaultSlot.filter((node) => {
+            /**
+             * Exclude whitespace-only text nodes (newline noise between
+             * markup elements). Element nodes are always kept, even when
+             * their textContent is empty (e.g. <svg>, <img>).
+             */
+            if (node.nodeType === Node.TEXT_NODE) {
+                return node.textContent?.trim().length !== 0;
+            }
+            return true;
+        });
+    }
+    if (nodes.length === 0) {
+        return null;
+    }
+    // Return plain text if no elements are found
+    if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
+        return nodes.map((n) => n.textContent?.trim()).join(' ') || null;
+    }
+    /**
+     * Mirror known custom-element properties (e.g. ion-icon's `icon`)
+     * onto attributes before cloning. Frameworks like Vue set these as
+     * DOM properties, which `cloneNode` doesn't copy, so without this
+     * step the cloned overlay copy renders without the prop's value.
+     */
+    nodes.forEach((n) => {
+        if (n.nodeType === Node.ELEMENT_NODE) {
+            reflectPropertiesToAttributes(n);
+        }
+    });
+    // Clone each node into a temporary container
+    const container = document.createElement('div');
+    nodes.forEach((n) => {
+        const clone = n.cloneNode(true);
+        if (clone.nodeType === Node.TEXT_NODE) {
+            clone.textContent = clone.textContent?.trim() || '';
+        }
+        else {
+            trimTextNodes(clone);
+        }
+        container.appendChild(clone);
+    });
+    /**
+     * Sanitize the cloned DOM in place. Trusted attributes (size, color,
+     * shape, etc.) are preserved; event handlers, javascript: URLs, and
+     * blocked tags are stripped.
+     */
+    sanitizeDOMTree(container);
+    if (useHTML) {
+        return container.innerHTML.trim() || null;
+    }
+    return container;
+};
+/**
+ * Returns the child nodes that belong to the default slot of an
+ * option element, excluding any nodes that are assigned to named
+ * slots.
+ *
+ * @param option - The `ion-select-option` element to extract default-slot nodes from.
+ * @returns An array of default slot nodes, or `null` if none are found.
+ */
+const getOptionDefaultSlot = (option) => {
+    const defaultSlotNodes = Array.from(option.childNodes).filter((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            return !node.hasAttribute('slot');
+        }
+        return node.nodeType === Node.TEXT_NODE;
+    });
+    if (defaultSlotNodes.length === 0) {
+        return null;
+    }
+    return defaultSlotNodes;
+};
+/**
+ * Extracts plain text from only the default slot of an option,
+ * excluding content assigned to named slots (start/end).
+ */
+const getDefaultSlotPlainText = (option) => {
+    const texts = Array.from(option.childNodes)
+        .filter((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            return !node.hasAttribute('slot');
+        }
+        return node.nodeType === Node.TEXT_NODE;
+    })
+        .filter((node) => node.nodeType === Node.TEXT_NODE)
+        .map((n) => n.textContent?.trim())
+        .filter((t) => t);
+    return texts.join(' ');
+};
+/**
+ * Extracts the rich content from an `ion-select-option`.
+ * When `customHTMLEnabled` is `false`, only the plain text from the
+ * default slot is read and the start and end slots are skipped.
+ *
+ * @param option - The `ion-select-option` element to extract content from.
+ * @param customHTMLEnabled - Whether custom HTML rendering is enabled
+ * via the `innerHTMLTemplatesEnabled` config.
+ */
+const extractOptionContent = (option, customHTMLEnabled) => {
+    if (!customHTMLEnabled) {
+        return {
+            content: getDefaultSlotPlainText(option),
+            startContent: undefined,
+            endContent: undefined,
+        };
+    }
+    return {
+        content: getOptionContent(option),
+        startContent: getOptionContent(option, 'start') ?? undefined,
+        endContent: getOptionContent(option, 'end') ?? undefined,
+    };
 };
 let selectIds = 0;
 const OPTION_CLASS = 'select-interface-option';
@@ -870,36 +1293,91 @@ const selectOptionCss = () => `:host{display:none}`;
 const SelectOption = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.inputId = `ion-selopt-${selectOptionIds++}`;
-        /**
-         * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
-         */
-        this.disabled = false;
     }
+    inputId = `ion-selopt-${selectOptionIds++}`;
+    get el() { return getElement(this); }
+    /**
+     * If `true`, the user cannot interact with the select option.
+     */
+    disabled = false;
+    /**
+     * The text value of the option.
+     */
+    value;
+    /**
+     * Text that is placed underneath the option text to provide additional details about the option.
+     */
+    description;
+    /**
+     * Where the label is placed relative to the option's selection control
+     * (radio circle or checkbox box) when the option is rendered in an
+     * `alert`, `popover`, or `modal` interface.
+     * `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL.
+     * `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.
+     *
+     * Applies to the `alert`, `popover`, and `modal` interfaces, but has no
+     * visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).
+     *
+     * When unset, the interface picks a default based on mode and control
+     * type.
+     */
+    labelPlacement;
+    /**
+     * How to pack the label and the option's selection control within a line.
+     * `"start"`: The label and radio will appear on the left in LTR and
+     * on the right in RTL.
+     * `"end"`: The label and radio will appear on the right in LTR and
+     * on the left in RTL.
+     * `"space-between"`: The label and radio will appear on opposite
+     * ends of the line with space between the two elements.
+     *
+     * Applies to the `alert`, `popover`, and `modal` interfaces, but has no
+     * visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).
+     *
+     * When unset, the interface picks a default based on mode and control
+     * type.
+     */
+    justify;
     render() {
-        return h(Host, { key: '824730b6c1e4f15b716e91b05840e890af5f1577', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: '01275b5a613c4b065b24e0d939f611f6ed1fc9ee', role: "option", id: this.inputId, class: getIonMode(this) });
     }
-    get el() { return getElement(this); }
 };
 let selectOptionIds = 0;
 SelectOption.style = selectOptionCss();
 
-const selectPopoverIosCss = () => `.sc-ion-select-popover-ios-h ion-list.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-ios,ion-label.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-ios-h{overflow-y:auto}`;
+const selectPopoverIosCss = () => `.action-sheet-button-label-has-rich-content.sc-ion-select-popover-ios,.alert-radio-label-has-rich-content.sc-ion-select-popover-ios,.alert-checkbox-label-has-rich-content.sc-ion-select-popover-ios,.select-option-label-has-rich-content.sc-ion-select-popover-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}.action-sheet-button-label-has-rich-content.sc-ion-select-popover-ios,.alert-radio-label-has-rich-content.sc-ion-select-popover-ios,.alert-checkbox-label-has-rich-content.sc-ion-select-popover-ios,.select-option-content.sc-ion-select-popover-ios{-ms-flex:1;flex:1}.action-sheet-button-label-text.sc-ion-select-popover-ios,.alert-checkbox-label-text.sc-ion-select-popover-ios,.alert-radio-label-text.sc-ion-select-popover-ios,.select-option-label-text.sc-ion-select-popover-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}.select-option-start.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.select-option-description.sc-ion-select-popover-ios{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}.select-option-label.sc-ion-select-popover-ios:not(.select-option-label-has-rich-content){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-option-label-has-rich-content.sc-ion-select-popover-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ion-radio.select-option-has-rich-content.sc-ion-select-popover-ios::part(label),ion-radio.select-option-has-rich-content.sc-ion-select-popover-ios [part~="label"],ion-checkbox.select-option-has-rich-content.sc-ion-select-popover-ios::part(label),ion-checkbox.select-option-has-rich-content.sc-ion-select-popover-ios [part~="label"],.select-option-content.sc-ion-select-popover-ios{-ms-flex:1;flex:1;white-space:normal}.select-option-start.sc-ion-select-popover-ios>ion-avatar.sc-ion-select-popover-ios,.select-option-start.sc-ion-select-popover-ios>ion-img.sc-ion-select-popover-ios,.select-option-start.sc-ion-select-popover-ios>ion-thumbnail.sc-ion-select-popover-ios,.select-option-start.sc-ion-select-popover-ios>img.sc-ion-select-popover-ios,.select-option-start.sc-ion-select-popover-ios>svg.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios>ion-avatar.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios>ion-img.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios>ion-thumbnail.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios>img.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios>svg.sc-ion-select-popover-ios{width:44px;height:44px}.select-option-start.sc-ion-select-popover-ios>ion-icon.sc-ion-select-popover-ios,.select-option-end.sc-ion-select-popover-ios>ion-icon.sc-ion-select-popover-ios{font-size:28px}.action-sheet-button-label-text.sc-ion-select-popover-ios{-ms-flex-pack:center;justify-content:center}.select-option-has-rich-content.sc-ion-select-popover-ios{-webkit-padding-end:16px;padding-inline-end:16px}.sc-ion-select-popover-ios-h ion-list.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-ios,ion-label.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-ios-h{overflow-y:auto}`;
 
-const selectPopoverMdCss = () => `.sc-ion-select-popover-md-h ion-list.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-md,ion-label.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-md-h{overflow-y:auto}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(container),ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md [part~="container"]{display:none}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(label),ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-popover-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-popover-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-popover-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
+const selectPopoverMdCss = () => `.action-sheet-button-label-has-rich-content.sc-ion-select-popover-md,.alert-radio-label-has-rich-content.sc-ion-select-popover-md,.alert-checkbox-label-has-rich-content.sc-ion-select-popover-md,.select-option-label-has-rich-content.sc-ion-select-popover-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}.action-sheet-button-label-has-rich-content.sc-ion-select-popover-md,.alert-radio-label-has-rich-content.sc-ion-select-popover-md,.alert-checkbox-label-has-rich-content.sc-ion-select-popover-md,.select-option-content.sc-ion-select-popover-md{-ms-flex:1;flex:1}.action-sheet-button-label-text.sc-ion-select-popover-md,.alert-checkbox-label-text.sc-ion-select-popover-md,.alert-radio-label-text.sc-ion-select-popover-md,.select-option-label-text.sc-ion-select-popover-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}.select-option-start.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.select-option-description.sc-ion-select-popover-md{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}.select-option-label.sc-ion-select-popover-md:not(.select-option-label-has-rich-content){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-option-label-has-rich-content.sc-ion-select-popover-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ion-radio.select-option-has-rich-content.sc-ion-select-popover-md::part(label),ion-radio.select-option-has-rich-content.sc-ion-select-popover-md [part~="label"],ion-checkbox.select-option-has-rich-content.sc-ion-select-popover-md::part(label),ion-checkbox.select-option-has-rich-content.sc-ion-select-popover-md [part~="label"],.select-option-content.sc-ion-select-popover-md{-ms-flex:1;flex:1;white-space:normal}.select-option-start.sc-ion-select-popover-md>ion-avatar.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>ion-avatar.sc-ion-select-popover-md{width:40px;height:40px}.select-option-start.sc-ion-select-popover-md>ion-icon.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>ion-icon.sc-ion-select-popover-md{font-size:24px}.select-option-start.sc-ion-select-popover-md>ion-img.sc-ion-select-popover-md,.select-option-start.sc-ion-select-popover-md>img.sc-ion-select-popover-md,.select-option-start.sc-ion-select-popover-md>svg.sc-ion-select-popover-md,.select-option-start.sc-ion-select-popover-md>ion-thumbnail.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>ion-img.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>img.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>svg.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>ion-thumbnail.sc-ion-select-popover-md{width:56px;height:56px}.select-option-start.sc-ion-select-popover-md>video.sc-ion-select-popover-md,.select-option-end.sc-ion-select-popover-md>video.sc-ion-select-popover-md{width:114px;height:56px}.sc-ion-select-popover-md-h ion-list.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-md,ion-label.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-md-h{overflow-y:auto}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(container),ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md [part~="container"]{display:none}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(label),ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-popover-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-popover-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-popover-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
 
 const SelectPopover = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        // Tracks the option that received Enter-keydown so keyup only
-        // dismisses when the press started on the same option. Prevents
-        // Enter on the triggering ion-select from auto-dismissing.
-        this.pendingEnterTarget = null;
-        /**
-         * An array of options for the popover
-         */
-        this.options = [];
     }
+    get el() { return getElement(this); }
+    // Tracks the option that received Enter-keydown so keyup only
+    // dismisses when the press started on the same option. Prevents
+    // Enter on the triggering ion-select from auto-dismissing.
+    pendingEnterTarget = null;
+    /**
+     * The header text of the popover
+     */
+    header;
+    /**
+     * The subheader text of the popover
+     */
+    subHeader;
+    /**
+     * The text content of the popover body
+     */
+    message;
+    /**
+     * If true, the select accepts multiple values
+     */
+    multiple;
+    /**
+     * An array of options for the popover
+     */
+    options = [];
     findOptionFromEvent(ev) {
         const { options } = this;
         return options.find((o) => o.value === ev.target.value);
@@ -912,7 +1390,7 @@ const SelectPopover = class {
     callOptionHandler(ev) {
         const option = this.findOptionFromEvent(ev);
         const values = this.getValues(ev);
-        if (option === null || option === void 0 ? void 0 : option.handler) {
+        if (option?.handler) {
             safeCall(option.handler, values);
         }
     }
@@ -957,45 +1435,94 @@ const SelectPopover = class {
         }
     }
     renderCheckboxOptions(options) {
-        return options.map((option) => (h("ion-item", { class: Object.assign({
-                // TODO FW-4784
-                'item-checkbox-checked': option.checked
-            }, getClassMap(option.cssClass)) }, h("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
-                this.setChecked(ev);
-                this.callOptionHandler(ev);
+        const mode = getIonMode(this);
+        return options.map((option, index) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectPopoverOption` interface.
+             */
+            const richOption = option;
+            const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
+            const optionLabelOptions = {
+                id: `popover-option-${index}`,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
+            };
+            const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'checkbox');
+            const defaultJustify = getOverlayLabelJustify(mode, 'checkbox');
+            return (h("ion-item", {
                 // TODO FW-4784
-                forceUpdate(this);
-            } }, option.text))));
+                disabled: option.disabled, class: {
+                    // TODO FW-4784
+                    'item-checkbox-checked': option.checked,
+                    ...getClassMap(option.cssClass),
+                }
+            }, h("ion-checkbox", { class: {
+                    'select-option-has-rich-content': hasRichContent,
+                }, value: option.value, disabled: option.disabled, checked: option.checked, justify: richOption.justify ?? defaultJustify, labelPlacement: richOption.labelPlacement ?? defaultLabelPlacement, onIonChange: (ev) => {
+                    this.setChecked(ev);
+                    this.callOptionHandler(ev);
+                    // TODO FW-4784
+                    forceUpdate(this);
+                } }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
+        });
     }
     renderRadioOptions(options) {
+        const mode = getIonMode(this);
         const checked = options.filter((o) => o.checked).map((o) => o.value)[0];
-        return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option) => (h("ion-item", { class: Object.assign({
+        return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option, index) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectPopoverOption` interface.
+             */
+            const richOption = option;
+            const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
+            const optionLabelOptions = {
+                id: `popover-option-${index}`,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
+            };
+            return (h("ion-item", {
                 // TODO FW-4784
-                'item-radio-checked': option.value === checked
-            }, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, onClick: () => this.dismissParentPopover(), onKeyDown: (ev) => {
-                if (ev.key === 'Enter' && !ev.repeat) {
-                    this.pendingEnterTarget = ev.currentTarget;
-                }
-            }, onKeyUp: (ev) => {
-                if (ev.key === ' ') {
-                    // Space selects and dismisses in one press.
-                    this.dismissParentPopover();
+                disabled: option.disabled, class: {
+                    // TODO FW-4784
+                    'item-radio-checked': option.value === checked,
+                    ...getClassMap(option.cssClass),
                 }
-                else if (ev.key === 'Enter') {
-                    const shouldDismiss = this.pendingEnterTarget === ev.currentTarget;
-                    this.pendingEnterTarget = null;
-                    if (shouldDismiss) {
+            }, h("ion-radio", { class: {
+                    'select-option-has-rich-content': hasRichContent,
+                }, value: option.value, disabled: option.disabled, justify: richOption.justify ?? getOverlayLabelJustify(mode, 'radio'), labelPlacement: richOption.labelPlacement ?? getOverlayLabelPlacement(mode, 'radio'), onClick: () => this.dismissParentPopover(), onKeyDown: (ev) => {
+                    if (ev.key === 'Enter' && !ev.repeat) {
+                        this.pendingEnterTarget = ev.currentTarget;
+                    }
+                }, onKeyUp: (ev) => {
+                    if (ev.key === ' ') {
+                        // Space selects and dismisses in one press.
                         this.dismissParentPopover();
                     }
-                }
-            } }, option.text))))));
+                    else if (ev.key === 'Enter') {
+                        const shouldDismiss = this.pendingEnterTarget === ev.currentTarget;
+                        this.pendingEnterTarget = null;
+                        if (shouldDismiss) {
+                            this.dismissParentPopover();
+                        }
+                    }
+                } }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
+        })));
     }
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: 'e7449a1ecfcdbf45a79f8e26a00253c4e146448a', class: getIonMode(this) }, h("ion-list", { key: '52abdfc8668c3429a0dcefef8ddedb6647fdd894' }, header !== undefined && h("ion-list-header", { key: '978e5c03728756feafcc60a0e10e6ec59bf2ae11' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'e93c44e7f07a76def16e4b11f0fb4780d84ed402' }, h("ion-label", { key: 'bba1aac43b0bc7f4f00978dd8301985233f3725c', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'ad96f6017cf2cc5219540bded2c4f1ca3b532de2' }, subHeader), message !== undefined && h("p", { key: '3fd038921dc40c4d0c29734433984b279ccaeec3' }, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '4b4ac4a4b6523147e7c1f5e29dd8043867f2baea', class: getIonMode(this) }, h("ion-list", { key: 'f700d3dc3ce68c20a4d981164b29262564097fb4' }, header !== undefined && h("ion-list-header", { key: '196bcd7963f13ef8bc46231545eee4cb8d526f5e' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'bb108e0aa2409997df35f52cb67e58e55e0fd630' }, h("ion-label", { key: '59e8d9196ff976f3835766662654c0f085e58ec3', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '532f75d7c129ffadca4e6cbb619a4427aaede65c' }, subHeader), message !== undefined && h("p", { key: 'fc42c91594b9001e983cb5e4176fc4c9bff0f708' }, message)))), this.renderOptions(options))));
     }
-    get el() { return getElement(this); }
 };
 SelectPopover.style = {
     ios: selectPopoverIosCss(),