@ionic/core 9.0.0 → 9.0.1-dev.11787248963.10a00c73

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

@@ -1,25 +1,25 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-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 { r as registerInstance, c as createEvent, e as config, f as printIonWarning, h, d as Host, g as getElement, i as forceUpdate } from './index-CKYcsw8f.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 createSlotMutationController, a as createNotchController, b as createStartContainerController } from './slot-mutation-controller-rS_T3FDR.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-CAGf8Wgp.js';
-import { p as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-CPmIs9Ls.js';
+import { b as inheritAttributes, a as renderHiddenInput, n as focusVisibleElement } from './helpers-BIgoInJU.js';
+import { p as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-BpnIFlXI.js';
 import { i as isRTL } from './dir-Dojwmvde.js';
-import { r as reflectPropertiesToAttributes, a as sanitizeDOMTree } from './index-CKM1DdGm.js';
+import { r as reflectPropertiesToAttributes, a as sanitizeDOMTree } from './index-elneMH8y.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, f as caretDownSharp } from './index-BvabGprD.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { b as getIonMode } from './ionic-global-lrowsHfi.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 { r as renderOptionLabel } from './select-option-render-lIuu64EV.js';
 import './index-ZjP4CjeZ.js';
-import './hardware-back-button-gLJHMX_F.js';
-import './framework-delegate-BHTU2Ip9.js';
-import './gesture-controller-TXPDHL13.js';
+import './hardware-back-button-D8W4L0JP.js';
+import './framework-delegate-DaLWnISz.js';
+import './gesture-controller-B_gJaBk0.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);--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}`;
 
@@ -34,191 +34,132 @@ 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.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+        this.isExpanded = false;
+        /**
+         * The `hasFocus` state ensures the focus class is
+         * added regardless of how the element is focused.
+         * The `ion-focused` class only applies when focused
+         * via tabbing, not by clicking.
+         * The `has-focus` logic was added to ensure the class
+         * is applied in both cases.
+         */
+        this.hasFocus = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
+        /**
+         * The text to display on the cancel button.
+         */
+        this.cancelText = 'Cancel';
+        /**
+         * If `true`, the 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 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.
+         */
+        this.onLabelClick = (ev) => {
+            if (ev.target === this.focusEl && this.isExpanded) {
+                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();
     }
@@ -766,51 +707,6 @@ 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: {
@@ -838,17 +734,6 @@ const Select = class {
     get hasLabel() {
         return this.label !== undefined || this.labelSlot !== null;
     }
-    /**
-     * Stops propagation for re-dispatched clicks (when already expanded) to
-     * prevent double-click events. Allows initial button clicks (from keyboard
-     * or mouse) and slotted content clicks to propagate so event delegation
-     * works for parent handlers.
-     */
-    onLabelClick = (ev) => {
-        if (ev.target === this.focusEl && this.isExpanded) {
-            ev.stopPropagation();
-        }
-    };
     /**
      * Renders the outline border with a notch for the label.
      */
@@ -1039,6 +924,7 @@ const Select = class {
                 [`select-label-placement-${labelPlacement}`]: true,
             }) }, h("label", { key: '15fd1f8e06510ae8472c621cf8cf90e51172e0be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '7964e3d9351671899793b117896acdda25ec24c4', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'aa309ef155c4025acfd7ed5739b5221c85097b36', name: "start" })), h("div", { key: '23d5a9dfea64a9d81b0b36d9426b15bed98901b9', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '810da9fbfa8771e09b5fb768d64e5f04858b5833', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: 'bf1c04704326ecfa14cf2e49bb76d3fb45beb08d', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '76a8bcaeefdcaa908aebd820d93171b08165cee3', name: "end" })), shouldRenderHighlight && h("div", { key: '55a9c417a82323a44e16328fd62a634d9d7c558b', class: "select-highlight" })), this.renderBottomContent()));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "disabled": [{
                 "styleChanged": 0
@@ -1293,54 +1179,16 @@ 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.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: '01275b5a613c4b065b24e0d939f611f6ed1fc9ee', role: "option", id: this.inputId, class: getIonMode(this) });
     }
+    get el() { return getElement(this); }
 };
 let selectOptionIds = 0;
 SelectOption.style = selectOptionCss();
@@ -1352,32 +1200,15 @@ const selectPopoverMdCss = () => `.action-sheet-button-label-has-rich-content.sc
 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);
@@ -1523,6 +1354,7 @@ const SelectPopover = class {
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         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(),

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

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, e as config, h, d as Host } from './index-ChhhtsGZ.js';
+import { r as registerInstance, e as config, h, d as Host } from './index-CKYcsw8f.js';
 import { c as createColorClasses } from './theme-byZM6qHV.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { b as getIonMode } from './ionic-global-lrowsHfi.js';
 import { S as SPINNERS } from './spinner-configs-D4RIp70E.js';
 
 const spinnerCss = () => `:host{display:inline-block;position:relative;width:28px;height:28px;color:var(--color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.ion-color){color:var(--ion-color-base)}svg{-webkit-transform-origin:center;transform-origin:center;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}:host-context([dir=rtl]) svg{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}[dir=rtl] svg{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}@supports selector(:dir(rtl)){svg:dir(rtl){-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}}:host(.spinner-lines) line,:host(.spinner-lines-small) line{stroke-width:7px}:host(.spinner-lines-sharp) line,:host(.spinner-lines-sharp-small) line{stroke-width:4px}:host(.spinner-lines) line,:host(.spinner-lines-small) line,:host(.spinner-lines-sharp) line,:host(.spinner-lines-sharp-small) line{stroke-linecap:round;stroke:currentColor}:host(.spinner-lines) svg,:host(.spinner-lines-small) svg,:host(.spinner-lines-sharp) svg,:host(.spinner-lines-sharp-small) svg{-webkit-animation:spinner-fade-out 1s linear infinite;animation:spinner-fade-out 1s linear infinite}:host(.spinner-bubbles) svg{-webkit-animation:spinner-scale-out 1s linear infinite;animation:spinner-scale-out 1s linear infinite;fill:currentColor}:host(.spinner-circles) svg{-webkit-animation:spinner-fade-out 1s linear infinite;animation:spinner-fade-out 1s linear infinite;fill:currentColor}:host(.spinner-crescent) circle{fill:transparent;stroke-width:4px;stroke-dasharray:128px;stroke-dashoffset:82px;stroke:currentColor}:host(.spinner-crescent) svg{-webkit-animation:spinner-rotate 1s linear infinite;animation:spinner-rotate 1s linear infinite}:host(.spinner-dots) circle{stroke-width:0;fill:currentColor}:host(.spinner-dots) svg{-webkit-animation:spinner-dots 1s linear infinite;animation:spinner-dots 1s linear infinite}:host(.spinner-circular) svg{-webkit-animation:spinner-circular linear infinite;animation:spinner-circular linear infinite}:host(.spinner-circular) circle{-webkit-animation:spinner-circular-inner ease-in-out infinite;animation:spinner-circular-inner ease-in-out infinite;stroke:currentColor;stroke-dasharray:80px, 200px;stroke-dashoffset:0px;stroke-width:5.6;fill:none}:host(.spinner-paused),:host(.spinner-paused) svg,:host(.spinner-paused) circle{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes spinner-fade-out{0%{opacity:1}100%{opacity:0}}@keyframes spinner-fade-out{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes spinner-scale-out{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1)}100%{-webkit-transform:scale(0, 0);transform:scale(0, 0)}}@keyframes spinner-scale-out{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1)}100%{-webkit-transform:scale(0, 0);transform:scale(0, 0)}}@-webkit-keyframes spinner-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spinner-dots{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:0.9}50%{-webkit-transform:scale(0.4, 0.4);transform:scale(0.4, 0.4);opacity:0.3}100%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:0.9}}@keyframes spinner-dots{0%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:0.9}50%{-webkit-transform:scale(0.4, 0.4);transform:scale(0.4, 0.4);opacity:0.3}100%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:0.9}}@-webkit-keyframes spinner-circular{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner-circular{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spinner-circular-inner{0%{stroke-dasharray:1px, 200px;stroke-dashoffset:0px}50%{stroke-dasharray:100px, 200px;stroke-dashoffset:-15px}100%{stroke-dasharray:100px, 200px;stroke-dashoffset:-125px}}@keyframes spinner-circular-inner{0%{stroke-dasharray:1px, 200px;stroke-dashoffset:0px}50%{stroke-dasharray:100px, 200px;stroke-dashoffset:-15px}100%{stroke-dasharray:100px, 200px;stroke-dashoffset:-125px}}`;
@@ -11,26 +11,11 @@ const spinnerCss = () => `:host{display:inline-block;position:relative;width:28p
 const Spinner = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * If `true`, the spinner's animation will be paused.
+         */
+        this.paused = false;
     }
-    /**
-     * 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).
-     */
-    color;
-    /**
-     * Duration of the spinner animation in milliseconds. The default varies based on the spinner.
-     */
-    duration;
-    /**
-     * The name of the SVG spinner to use. If a name is not provided, the platform's default
-     * spinner will be used.
-     */
-    name;
-    /**
-     * If `true`, the spinner's animation will be paused.
-     */
-    paused = false;
     getName() {
         const spinnerName = this.name || config.get('spinner');
         const mode = getIonMode(this);

package/dist/esm/ion-split-pane.entry.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, g as getElement, f as printIonWarning, h, d as Host } from './index-ChhhtsGZ.js';
-import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as Host, g as getElement } from './index-CKYcsw8f.js';
+import { b as getIonMode } from './ionic-global-lrowsHfi.js';
 
 const splitPaneIosCss = () => `:host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-ms-flex:1;flex:1;-webkit-box-shadow:none;box-shadow:none;overflow:hidden;z-index:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host{--border:0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--side-min-width:270px;--side-max-width:28%}`;
 
@@ -23,32 +23,18 @@ const SplitPane = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionSplitPaneVisible = createEvent(this, "ionSplitPaneVisible", 7);
+        this.visible = false;
+        /**
+         * If `true`, the split pane will be hidden.
+         */
+        this.disabled = false;
+        /**
+         * When the split-pane should be shown.
+         * Can be a CSS media query expression, or a shortcut expression.
+         * Can also be a boolean expression.
+         */
+        this.when = QUERY['lg'];
     }
-    rmL;
-    get el() { return getElement(this); }
-    visible = false;
-    /**
-     * The `id` of the main content. When using
-     * a router this is typically `ion-router-outlet`.
-     * When not using a router, this is typically
-     * your main view's `ion-content`. This is not the
-     * id of the `ion-content` inside of your `ion-menu`.
-     */
-    contentId;
-    /**
-     * If `true`, the split pane will be hidden.
-     */
-    disabled = false;
-    /**
-     * When the split-pane should be shown.
-     * Can be a CSS media query expression, or a shortcut expression.
-     * Can also be a boolean expression.
-     */
-    when = QUERY['lg'];
-    /**
-     * Expression to be called when the split-pane visibility has changed
-     */
-    ionSplitPaneVisible;
     visibleChanged(visible) {
         this.ionSplitPaneVisible.emit({ visible });
     }
@@ -147,6 +133,7 @@ const SplitPane = class {
                 'split-pane-visible': this.visible,
             } }, h("slot", { key: '9eac85f4c4e33ec00e8e16e2679f5975d7652452' })));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "visible": [{
                 "visibleChanged": 0