@ionic/core 9.0.3-dev.11788456135.1ab1d6cd → 9.0.3-dev.11790116791.11c9cd1e

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) {
@@ -590,55 +557,53 @@ button {
 
 :host {
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-  --border-color: var(--token-primitives-neutral-500, #a2a2a2);
+  --border-color: var(--token-primitives-neutral-500, #9fa5ad);
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
   --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
   --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
   --padding-top: var(--token-space-300, var(--token-scale-300, 12px));
   --padding-bottom: var(--token-space-300, var(--token-scale-300, 12px));
-  --placeholder-color: var(--token-primitives-neutral-800, #626262);
+  --placeholder-color: var(--token-primitives-neutral-800, #6c727a);
   --placeholder-opacity: 1;
-  --highlight-color-focused: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
-  --highlight-color-valid: var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23));
-  --highlight-color-invalid: var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222));
+  --highlight-color-focused: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
+  --highlight-color-valid: var(--token-semantics-success-900, var(--token-primitives-green-900, #037046));
+  --highlight-color-invalid: var(--token-semantics-danger-800, var(--token-primitives-red-800, #d2002b));
   --select-text-gap: var(--token-space-300, var(--token-scale-300, 12px));
   min-height: var(--token-scale-1100, 44px);
 }
 
 .select-bottom {
   padding-top: var(--token-space-100, var(--token-scale-100, 4px));
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-500, 1.25rem);
 }
 
 .select-bottom .helper-text {
-  color: var(--token-primitives-neutral-800, #626262);
+  color: var(--token-primitives-neutral-800, #6c727a);
 }
 
 .select-bottom .error-text {
-  color: var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)));
+  color: var(--token-text-danger, var(--token-semantics-danger-800, var(--token-primitives-red-800, #d2002b)));
 }
 
 .select-text {
   min-width: var(--token-space-400, var(--token-scale-400, 16px));
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 :host(.has-value) .select-text {
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 .label-text-wrapper {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-500, 1.25rem);
   /**
    * Label text should not extend
    * beyond the bounds of the select.
@@ -649,7 +614,7 @@ button {
    */
   max-width: var(--token-scale-5000, 200px);
   transition: color var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--token-transition-time-150, 150ms) var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
-  color: var(--token-primitives-neutral-1000, #3b3b3b);
+  color: var(--token-primitives-neutral-1000, #383e45);
 }
 
 :host(.select-label-placement-start) .label-text-wrapper,
@@ -668,7 +633,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,72 +665,216 @@ 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 {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
   /**
    * When the floating label appears on top of the
    * input, we need to fade the input 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));
-  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)));
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 /**
@@ -808,11 +916,23 @@ button {
   margin-top: 0;
   margin-bottom: 0;
   transition: transform 0.15s var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
+}
+
+/**
+ * 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));
+  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #383e45));
 }
 
 /**
@@ -825,18 +945,18 @@ button {
 }
 
 :host(.select-fill-solid) {
-  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
+  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
 }
 
 :host(.select-disabled) {
-  --background: var(--token-primitives-neutral-100, #f3f3f3);
-  --border-color: var(--token-primitives-neutral-300, #e0e0e0);
+  --background: var(--token-primitives-neutral-100, #f6f7fa);
+  --border-color: var(--token-primitives-neutral-300, #e6eaee);
 }
 
 :host(.select-disabled) .label-text-wrapper,
 :host(.select-disabled) .select-text,
 :host(.select-disabled) .select-icon {
-  color: var(--token-primitives-neutral-500, #a2a2a2);
+  color: var(--token-primitives-neutral-500, #9fa5ad);
 }
 
 :host(.select-shape-soft) {
@@ -849,16 +969,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.ionic.css

@@ -74,19 +74,18 @@
 }
 
 .select-option-description {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
   -webkit-padding-start: var(--token-space-0, var(--token-scale-0, 0px));
   padding-inline-start: var(--token-space-0, var(--token-scale-0, 0px));
   -webkit-padding-end: var(--token-space-0, var(--token-scale-0, 0px));
   padding-inline-end: var(--token-space-0, var(--token-scale-0, 0px));
   padding-top: var(--token-space-0, var(--token-scale-0, 0px));
   padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
-  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));
+  color: var(--token-text-subtle, var(--token-primitives-neutral-1000, #383e45));
   font-size: var(--token-font-size-350, 0.875rem);
 }
 
@@ -197,20 +196,19 @@ ion-item {
   --border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
   --background-focused: transparent;
   --background-focused-opacity: 1;
-  --background-hover: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
+  --background-hover: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));
   --background-hover-opacity: 1;
-  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #eae9e9));
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));
   --background-activated-opacity: 1;
   --border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
 }
 
 ion-toolbar {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-450, 1.125rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-700, 1.75rem);
 }
 
 ion-list ion-radio::part(container) {
@@ -228,17 +226,16 @@ ion-list ion-radio::part(label) {
 
 ion-list ion-radio::part(label),
 ion-list ion-checkbox::part(label) {
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
   font-size: var(--token-font-size-400, 1rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-0, 0%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
 }
 
 .item-radio-checked,
 .item-checkbox-checked {
-  --background: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc)));
+  --background: var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff)));
 }
 
 ion-content {