@ionic/core 9.0.3-dev.11788456135.1ab1d6cd → 9.0.3-dev.11790016799.1e269b7a

package/dist/collection/components/searchbar/searchbar.js

@@ -1,9 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import arrowLeftRegular from "@phosphor-icons/core/assets/regular/arrow-left.svg";
-import magnifyingGlassRegular from "@phosphor-icons/core/assets/regular/magnifying-glass.svg";
-import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Host, forceUpdate, h } from "@stencil/core";
 import { createClearButtonPressController } from "../../utils/forms/index";
 import { debounceEvent, raf, componentOnReady, inheritAttributes } from "../../utils/helpers";
@@ -510,16 +507,9 @@ export class Searchbar {
         if (this.clearIcon != null) {
             return this.clearIcon;
         }
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: closeCircle,
-            ionic: xRegular,
-            md: closeSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured searchbar clear icon or the default icon
+        const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
         return config.get('searchbarClearIcon', defaultIcon);
     }
     /**
@@ -534,16 +524,9 @@ export class Searchbar {
         if (this.searchIcon != null && this.searchIcon !== 'true' && typeof this.searchIcon !== 'boolean') {
             return this.searchIcon;
         }
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: searchOutline,
-            ionic: magnifyingGlassRegular,
-            md: searchSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured searchbar search icon or the default icon
+        const defaultIcon = theme === 'ios' ? searchOutline : searchSharp;
         return config.get('searchbarSearchIcon', defaultIcon);
     }
     /**
@@ -557,17 +540,7 @@ export class Searchbar {
         if (this.cancelButtonIcon != null) {
             return this.cancelButtonIcon;
         }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: arrowBackSharp,
-            ionic: arrowLeftRegular,
-            md: arrowBackSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured searchbar cancel icon, the back button icon or the default icon
-        return config.get('searchbarCancelIcon', config.get('backButtonIcon', defaultIcon));
+        return config.get('searchbarCancelIcon', config.get('backButtonIcon', arrowBackSharp));
     }
     render() {
         const { cancelButtonText, autocapitalize, searchbarCancelIcon, searchbarClearIcon, searchbarSearchIcon } = this;
@@ -576,8 +549,8 @@ export class Searchbar {
         const shouldShowCancelButton = this.shouldShowCancelButton();
         const shape = this.getShape();
         const size = this.getSize();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: 'b573b41a2e7e53c7001d4449bb8479a139b2ae59', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'f87afde3e0e96e9af4abf08396df2e9cc13c69bc', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: 'cee57a4aec582e6e42a4bda5ba0f4011255a5a90', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '21118a391a384643863018f787ffc36b1b81ba90', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'b59db009ec11b82479c18f29f6df30121ad2a795', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '5732dd17714bd1f11ac2d8c39853347944aa61cf', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [theme]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -591,7 +564,7 @@ export class Searchbar {
                 [`searchbar-shape-${shape}`]: shape !== undefined,
                 [`searchbar-size-${size}`]: size !== undefined,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            }) }, h("div", { key: '277b419e792c484ae0aadb3703118bd7f4d281f6', class: "searchbar-input-container" }, h("input", { key: 'abf94e0496dde1953a928fd50c1ab6f1290e84c5', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', spellcheck: this.spellcheck, ...this.inheritedAttributes }), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (h("ion-icon", { key: '12fb162dd40f3222bf8b0bd6fa7cf8f839be30f8', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (h("button", { key: 'ecc08e7514cf92e7f8cda780cb50c5f27c5d7966', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'de6c375fe60d4d3f9ed10dd5fa08ed11685cb4fa', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
+            }) }, h("div", { key: '024e67b33903cf73f057edeb4cb8f58b6d787e11', class: "searchbar-input-container" }, h("input", { key: 'f10260bbff84cc549ec312e9cb763e85641d83c6', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', spellcheck: this.spellcheck, ...this.inheritedAttributes }), (theme === 'md' || theme === 'ionic') && cancelButton, this.shouldShowSearchIcon() && (h("ion-icon", { key: '513780a9904403d85fb9074f13d6c3f2187ddb56', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" })), this.shouldShowClearButton() && (h("button", { key: 'dd25c5e940a6cea07e6be028e83808e91eb2f4eb', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '8a1163ccb8aa63a6596ae160f10d619ff162caef', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" })))), theme === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }

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

@@ -534,41 +534,8 @@ button {
   border-top: none;
 }
 
-:host(.select-fill-outline) .label-text-wrapper {
-  /**
-   * The label should appear on top of an outline
-   * container that overlaps it so it is always clickable.
-   */
-  position: relative;
-}
-
-:host(.select-fill-outline) .select-wrapper-inner {
-  border-radius: var(--border-radius);
-  -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);
-  /**
-  * Apply the background to the native select
-  * wrapper to only style the select.
-  */
-  background: var(--background);
-}
-
-:host(.select-fill-outline) .select-outline {
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: var(--border-radius);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
+:host(.select-fill-outline) .select-wrapper::before {
   border: var(--border-width) var(--border-style) var(--border-color);
-  box-sizing: border-box;
 }
 
 :host(.ion-focused.select-fill-outline) {
@@ -668,7 +635,6 @@ button {
 }
 
 :host(.select-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));
   width: calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));
   min-width: calc(var(--token-scale-2400, 96px) + var(--token-space-100, var(--token-scale-100, 4px)));
   max-width: var(--token-scale-5000, 200px);
@@ -701,46 +667,201 @@ button {
   margin-bottom: var(--token-space-100, var(--token-scale-100, 4px));
 }
 
+/**
+ * The label is nested in the control so that every theme renders the same
+ * tree. Laying the wrapper out as a grid and flattening the control lets the
+ * label sit outside the field box, which is drawn by `::before` over the cells
+ * the label does not occupy.
+ */
 .select-wrapper {
+  display: grid;
+  /**
+   * Only stretch grows an auto row, so centering holds the label row at its
+   * content height and still centers the field in any leftover host height.
+   */
+  align-content: center;
   align-items: center;
   min-width: var(--token-scale-5000, 200px);
   background: transparent;
 }
 
+.select-control {
+  display: contents;
+}
+
+/**
+ * A pseudo-element draws the box over the field cells, so the label stays
+ * outside of it.
+ */
+.select-wrapper::before {
+  border-radius: var(--border-radius, 0);
+  align-self: stretch;
+  box-sizing: border-box;
+  content: "";
+  pointer-events: none;
+  background: var(--background);
+}
+
+/**
+ * The field row is as tall as the size asks for, whatever the slots contain.
+ */
+:host(.select-size-small) .select-wrapper {
+  --internal-field-height: var(--token-scale-1000, 40px);
+}
+
+:host(.select-size-medium) .select-wrapper {
+  --internal-field-height: var(--token-scale-1200, 48px);
+}
+
+:host(.select-size-large) .select-wrapper {
+  --internal-field-height: var(--token-scale-1400, 56px);
+}
+
+:host(.select-label-placement-start) .label-text-wrapper,
+:host(.select-label-placement-fixed) .label-text-wrapper,
+:host(.select-label-placement-end) .label-text-wrapper {
+  grid-column: label;
+}
+
+:host(.select-label-placement-stacked) .label-text-wrapper,
+:host(.select-label-placement-floating) .label-text-wrapper {
+  grid-column: field-start/field-end;
+}
+
+/**
+ * The `justify-content` property cannot serve here the way it does on a flex
+ * row, because grid would distribute the free space between every track,
+ * including the ones inside the field. So three empty tracks stand in for that
+ * space, and the justify property below decides which of them takes it. The
+ * other two collapse to `0fr`.
+ */
+:host(.select-label-placement-start) .select-wrapper,
+:host(.select-label-placement-fixed) .select-wrapper {
+  grid-template-columns: var(--internal-justify-lead, 0fr) [label] auto var(--internal-justify-gap, 1fr) [field-start slot-start] minmax(0, auto) [native] minmax(0, auto) [slot-end] minmax(0, auto) [field-end] var(--internal-justify-trail, 0fr);
+  grid-template-rows: [label field] var(--internal-field-height, auto);
+}
+
+:host(.select-label-placement-end) .select-wrapper {
+  grid-template-columns: var(--internal-justify-lead, 0fr) [field-start slot-start] minmax(0, auto) [native] minmax(0, auto) [slot-end] minmax(0, auto) [field-end] var(--internal-justify-gap, 1fr) [label] auto var(--internal-justify-trail, 0fr);
+  grid-template-rows: [label field] var(--internal-field-height, auto);
+}
+
+/**
+ * With no label there is nothing to separate the field from, so the free space
+ * belongs after the field instead of before it. The label's own track collapses
+ * on its own, but the flexible one does not.
+ */
+:host(:not(.has-label)) .select-wrapper {
+  --internal-justify-gap: 0fr;
+  --internal-justify-trail: 1fr;
+}
+
+/**
+ * Each of these declares all three tracks. Declaring only the ones it moves
+ * would leave the others at whatever the no-label rule above set, since the
+ * cascade resolves per declaration and the two rules have equal specificity.
+ *
+ * Exactly one track stays flexible in every combination. That leaves no free
+ * space for the `justify-content` the shared stylesheet sets on the wrapper, so
+ * it stays inert. Leave all three at `0fr` and it starts distributing space
+ * between the field's own tracks.
+ */
+:host(.select-justify-start) .select-wrapper {
+  --internal-justify-lead: 0fr;
+  --internal-justify-gap: 0fr;
+  --internal-justify-trail: 1fr;
+}
+
+:host(.select-justify-end) .select-wrapper {
+  --internal-justify-lead: 1fr;
+  --internal-justify-gap: 0fr;
+  --internal-justify-trail: 0fr;
+}
+
+/**
+ * This only applies with a label, because `space-between` on a flex row with one
+ * in-flow item behaves as start, which is what the no-label rule already gives.
+ */
+:host(.has-label.select-justify-space-between) .select-wrapper {
+  --internal-justify-lead: 0fr;
+  --internal-justify-gap: 1fr;
+  --internal-justify-trail: 0fr;
+}
+
 :host(.select-label-placement-stacked) .select-wrapper,
 :host(.select-label-placement-floating) .select-wrapper {
-  flex-direction: column;
-  align-items: start;
+  grid-template-columns: [field-start slot-start] minmax(0, auto) [native] minmax(0, 1fr) [slot-end] minmax(0, auto) [field-end];
+  grid-template-rows: [label] auto [field] var(--internal-field-height, auto);
 }
 
-.select-wrapper .select-placeholder {
-  /**
-   * When the floating label appears on top of the
-   * select, we need to fade the text out so that the
-   * label does not overlap with the placeholder.
-   */
-  transition: opacity var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
+/**
+ * The templates above all name the same lines, so every placement shares these.
+ * A label with its own row lands on the label row. Otherwise that name resolves
+ * to the only row there is.
+ */
+.label-text-wrapper {
+  grid-row: label;
+}
+
+.select-start {
+  grid-row: field;
+  grid-column: slot-start;
 }
 
-.select-wrapper-inner {
-  border-radius: var(--border-radius);
+.native-wrapper {
+  grid-row: field;
+  grid-column: native;
+}
+
+.select-end {
+  grid-row: field;
+  grid-column: slot-end;
+}
+
+.select-wrapper::before {
+  grid-row: field;
+  grid-column: field-start/field-end;
+}
+
+/**
+ * The padding sits on the cells that the field box covers, so the label is not
+ * indented by it.
+ */
+.select-start {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+}
+
+.native-wrapper {
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+}
+
+.select-end {
   -webkit-padding-end: var(--padding-end);
   padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
-  display: flex;
-  position: relative;
-  align-items: center;
-  background: var(--background);
-  box-sizing: border-box;
+}
+
+/**
+ * The slot cells can shrink below their content so that oversized slotted
+ * content is cut off at the edge of the field instead of widening it.
+ */
+.select-start,
+.select-end {
   overflow: hidden;
 }
 
-:host(.select-label-placement-stacked) .select-wrapper-inner,
-:host(.select-label-placement-floating) .select-wrapper-inner {
-  width: 100%;
+.select-wrapper .select-placeholder {
+  /**
+   * When the floating label appears on top of the
+   * select, we need to fade the text out so that the
+   * label does not overlap with the placeholder.
+   */
+  transition: opacity var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 .native-wrapper {
@@ -759,16 +880,6 @@ button {
   color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
 }
 
-:host(.select-label-placement-stacked) .native-wrapper,
-:host(.select-label-placement-floating) .native-wrapper {
-  /**
-   * Text should not extend beyond the bounds of the select.
-   * This is done by setting the width to the full width minus
-   * the icon width and the gap between the icon and the text.
-   */
-  width: calc(100% - var(--token-scale-400, 16px) - var(--token-space-200, var(--token-scale-200, 8px)));
-}
-
 /**
  * Slotted buttons have a lot of default padding that can
  * cause them to look misaligned from other pieces such
@@ -811,6 +922,18 @@ button {
   color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
 }
 
+/**
+ * The icon renders inside the end container for floating and stacked labels and
+ * inside the native wrapper otherwise, the structure BREAKING.md documents for
+ * v9. Using `order` moves it past the slotted end content so the chevron stays
+ * on the field's trailing edge. The other themes leave it ahead of that
+ * content.
+ */
+:host(.select-label-placement-stacked) .select-icon,
+:host(.select-label-placement-floating) .select-icon {
+  order: 1;
+}
+
 :host(.has-value) .select-icon {
   color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));
 }
@@ -849,16 +972,4 @@ button {
 
 :host(.select-shape-rectangular) {
   --border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
-}
-
-:host(.select-size-small) .select-wrapper-inner {
-  height: var(--token-scale-1000, 40px);
-}
-
-:host(.select-size-medium) .select-wrapper-inner {
-  height: var(--token-scale-1200, 48px);
-}
-
-:host(.select-size-large) .select-wrapper-inner {
-  height: var(--token-scale-1400, 56px);
 }

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

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretDownRegular from "@phosphor-icons/core/assets/regular/caret-down.svg";
 import { Build, Host, h, forceUpdate } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { compareOptions, createNotchController, createStartContainerController, isOptionSelected, checkInvalidState, } from "../../utils/forms/index";
@@ -36,9 +35,8 @@ import { getIonTheme } from "../../global/ionic-global";
  * @part bottom - The container element for helper text, error text, and counter.
  * @part wrapper - The clickable label element that wraps the entire form field (label text, slots, selected values or placeholder, and toggle icons).
  * @part start - The wrapper element for the content in the start slot.
- * @part control - The wrapper element containing the native select control. In the `"ios"` and `"md"` themes it also contains the label, and the dropdown icon when the label is not floating or stacked.
- * @part end - The wrapper element for the content in the end slot. In the `"ios"` and `"md"` themes it also contains the dropdown icon when the label is floating or stacked.
- * @part inner - The wrapper element containing the start, control and end wrappers and the dropdown icon. Only rendered in the `"ionic"` theme.
+ * @part control - The wrapper element containing the label, the native select control, and the dropdown icon when the label is not floating or stacked. The `"ionic"` theme flattens this wrapper, so it cannot be given a box of its own there.
+ * @part end - The wrapper element for the content in the end slot. It also contains the dropdown icon when the label is floating or stacked.
  */
 export class Select {
     constructor() {
@@ -834,24 +832,13 @@ export class Select {
     renderStartContainer() {
         return (h("div", { key: "start", class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { name: "start" })));
     }
-    renderNativeWrapper() {
-        return (h("div", { class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()));
-    }
-    /**
-     * The ionic theme keeps the label above a field box that wraps the slots and
-     * the control, so the label can size independently of the slotted content.
-     */
-    renderIonicField() {
-        return [
-            this.renderLabel(),
-            h("div", { key: "inner", class: "select-wrapper-inner", part: "inner" }, this.fill === 'outline' && h("div", { key: "outline", class: "select-outline" }), this.renderStartContainer(), h("div", { key: "control", class: "select-control", part: "control" }, this.renderNativeWrapper()), h("div", { key: "end", class: "select-end", part: "end" }, h("slot", { name: "end" })), this.renderSelectIcon()),
-        ];
-    }
     /**
-     * The ios and md themes nest the label alongside the control so a floating
-     * label can escape it and clear the start and end slots.
+     * Every theme renders the same label and control structure, aside from the md
+     * outline container below. The label is nested alongside the control so the
+     * ios and md floating label can escape it and clear the start and end slots.
+     * The ionic theme lifts it outside the field with grid instead.
      */
-    renderNativeField() {
+    renderField() {
         const { fill, labelPlacement } = this;
         const hasOutlineFill = getIonTheme(this) === 'md' && fill === 'outline';
         const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
@@ -993,16 +980,9 @@ export class Select {
         else if (this.toggleIcon != null) {
             return this.toggleIcon;
         }
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronExpand,
-            ionic: caretDownRegular,
-            md: caretDownSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured select expanded icon or the default icon
+        const defaultIcon = theme === 'ios' ? chevronExpand : caretDownSharp;
         return config.get('selectExpandedIcon', defaultIcon);
     }
     /**
@@ -1016,15 +996,9 @@ export class Select {
         if (this.toggleIcon) {
             return this.toggleIcon;
         }
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronExpand,
-            ionic: caretDownRegular,
-            md: caretDownSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        const defaultIcon = theme === 'ios' ? chevronExpand : caretDownSharp;
         return config.get('selectCollapsedIcon', defaultIcon);
     }
     getHintTextId() {
@@ -1076,7 +1050,7 @@ export class Select {
         const hasValue = this.hasValue();
         renderHiddenInput(true, el, name, parseValue(value), disabled);
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
-        return (h(Host, { key: '1169073985fabca41a2c0a15f07d155a19fd1197', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd6d5a554df0aabf73531762d3e8f7f7757f1dd7e', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -1085,6 +1059,7 @@ export class Select {
                 'has-expanded-icon': expandedIcon !== undefined,
                 'has-value': hasValue,
                 'label-floating': labelShouldFloat,
+                'has-label': this.hasLabel,
                 'has-placeholder': placeholder !== undefined,
                 'has-focus': hasFocus,
                 // TODO(FW-6451): Remove `ion-focusable` class in favor of `has-focus`.
@@ -1095,7 +1070,7 @@ export class Select {
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
                 [`select-size-${size}`]: size !== undefined,
-            }) }, h("label", { key: 'b384d441d2dcaff191d978ce7ee1fb2a4dd74545', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, theme === 'ionic' ? this.renderIonicField() : this.renderNativeField(), shouldRenderHighlight && h("div", { key: '114d10e8e1aaa6fda0b9a6b35de52b37afe79b25', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '9ef1351faed0a57fc0911705102dd115ca72ed48', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderField(), shouldRenderHighlight && h("div", { key: '7f384deb139daec2556636fa07d6a384da04b437', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { config } from "../../global/config";
 import { getIonMode, getIonTheme } from "../../global/ionic-global";
-import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Host, forceUpdate, h } from "@stencil/core";
 import { getOverlayLabelJustify, getOverlayLabelPlacement } from "../../utils/overlay-control-label";
 import { safeCall } from "../../utils/overlays";
@@ -65,14 +65,16 @@ export class SelectModal {
             option.checked = ev.detail.checked;
         }
     }
-    get cancelButtonIcon() {
+    /**
+     * Get the icon to use for the cancel icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get selectModalCancelIcon() {
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const icons = {
-            ios: closeOutline,
-            md: closeSharp,
-            ionic: xRegular,
-        };
-        return icons[theme];
+        const defaultIcon = theme === 'ios' ? closeOutline : closeSharp;
+        return config.get('selectModalCancelIcon', defaultIcon);
     }
     getModalContextClasses() {
         const el = this.el;
@@ -166,10 +168,10 @@ export class SelectModal {
         });
     }
     render() {
-        return (h(Host, { key: '42d29e9c9a0b34243014e2d573349720ef42d0f4', class: {
+        return (h(Host, { key: '4f80b69495a5fdcc4d99f72aa035264e1d283012', class: {
                 [getIonMode(this)]: true,
                 ...this.getModalContextClasses(),
-            } }, h("ion-header", { key: '7fdccbdbb2df084cc6f46e0bc670420994876c23' }, h("ion-toolbar", { key: '43aec16af281bd7b8da6472793fd66f4d7e2c062' }, this.header !== undefined && h("ion-title", { key: '7abe8c10fe6bfd8ead09dfc12e1317055096e010' }, this.header), h("ion-buttons", { key: '3d5e1847487bdbf78165b97df063258ef96c93bd', slot: "end" }, h("ion-button", { key: '004fff6115dbeabcc6090fe35b5d4006fb96ec34', "aria-label": this.cancelIcon ? this.cancelText : undefined, "data-focus-order": "2", onClick: () => this.closeModal() }, this.cancelIcon ? (h("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: this.cancelButtonIcon })) : (this.cancelText))))), h("ion-content", { key: 'dede04ba473ff70e60320d1ed0313c15f7707e4f' }, h("ion-list", { key: '2064751ebacd1599ec097e43cd8b982ac8ce3b54' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+            } }, h("ion-header", { key: '59fd93f200eeed35e411bc12d1355747d6d3b003' }, h("ion-toolbar", { key: 'd443f633558101e8623c3d7aeab62b5a8dbaaea5' }, this.header !== undefined && h("ion-title", { key: '5038f4d67ec9ce335c9a543e209dc1e5e669f802' }, this.header), h("ion-buttons", { key: '047fd2497d20324433ca175441d60cf17095dadb', slot: "end" }, h("ion-button", { key: '0058eee326e1540c969decd9b8a9baa5b307dfde', "aria-label": this.cancelIcon ? this.cancelText : undefined, "data-focus-order": "2", onClick: () => this.closeModal() }, this.cancelIcon ? (h("ion-icon", { "aria-hidden": "true", slot: "icon-only", icon: this.selectModalCancelIcon })) : (this.cancelText))))), h("ion-content", { key: '1cde46ff794118bf086735289b83d6354ee4bc99' }, h("ion-list", { key: '19e238faabd981565590723323fa8442a77eb8b4' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     static get is() { return "ion-select-modal"; }
     static get encapsulation() { return "scoped"; }