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

package/dist/collection/components/datetime/datetime.md.css

@@ -509,16 +509,11 @@
 }
 
 .calendar-day:not(.calendar-day-adjacent-day):focus {
-  background: ion-color(primary, base, 0.2);
-  box-shadow: 0px 0px 0px 4px ion-color(primary, base, 0.2);
+  background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+  box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
 }
 
 :host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
-  background: current-color(base, 0.2);
-  box-shadow: 0px 0px 0px 4px current-color(base, 0.2);
-}
-
-.calendar-day:focus {
   background: rgba(var(--ion-color-base-rgb), 0.2);
   box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);
 }
@@ -563,7 +558,7 @@
 }
 
 :host .time-body-active {
-  color: ion-color(primary, base);
+  color: var(--ion-color-primary, #0054e9);
 }
 
 :host(.ion-color) .time-body-active {
@@ -571,7 +566,7 @@
 }
 
 :host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
-  color: ion-color(primary, base);
+  color: var(--ion-color-primary, #0054e9);
 }
 
 :host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
@@ -579,7 +574,7 @@
 }
 
 :host .datetime-action-buttons ion-button {
-  --color: ion-color(primary, base);
+  --color: var(--ion-color-primary, #0054e9);
 }
 
 .calendar-month-year-toggle::after {

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

@@ -109,7 +109,7 @@
 }
 
 :host hr {
-  border-top: var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5));
+  border-top: var(--token-border-size-025, var(--token-scale-025, 1px)) solid var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));
 }
 
 :host(.divider-inset) {

package/dist/collection/components/fab-button/fab-button.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes, hasShadowDom } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
@@ -133,22 +132,18 @@ export class FabButton {
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
+    /**
+     * Get the icon to use for the close icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
     get fabButtonCloseIcon() {
         // Return the icon if it is explicitly set
         if (this.closeIcon != null) {
             return this.closeIcon;
         }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: close,
-            ionic: xRegular,
-            md: close,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured fab button close icon or the default icon
-        return config.get('fabButtonCloseIcon', defaultIcon);
+        return config.get('fabButtonCloseIcon', close);
     }
     render() {
         const { el, disabled, fabButtonCloseIcon, color, href, activated, show, translucent, size, inheritedAttributes, type, } = this;
@@ -170,7 +165,7 @@ export class FabButton {
         if (type !== 'button') {
             this.renderHiddenButton();
         }
-        return (h(Host, { key: 'af84019ef7cee19ca5578a9a274d3890da83bf83', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'fc2e7284b76590aa65e45b8251f7c7776e11f0dc', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -181,7 +176,7 @@ export class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, { key: '90b4b17993b3feab7194790c4497d0fd9860e01a', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: 'a6d2cf73b627ead797c8efa82e0b7cd6aa845603', "aria-hidden": "true", icon: fabButtonCloseIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '3f08bc8aa15bcb72ecf11a81b50e2c79ab4d841a', class: "button-inner" }, h("slot", { key: 'c5c5921194b2c6b81dab2f9338298ab1c31367c5' })), theme === 'md' && h("ion-ripple-effect", { key: '78952651d0662304bd74ab8dc4cd09eb2d5ed455' }))));
+            }) }, h(TagType, { key: '21598ba114ac64d8f98bc0f16934678166def17e', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: '673609441ffe18d6e8f4b2dc2de37eda7efdda75', "aria-hidden": "true", icon: fabButtonCloseIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '13b3dac62a91549431d227676bbe8a0a0fc93665', class: "button-inner" }, h("slot", { key: 'aefbe96ef9790dd85002432d7bb5a70f17e52a15' })), theme === 'md' && h("ion-ripple-effect", { key: '6888c7374b87c08a9a04009549026ae7365f4b92' }))));
     }
     static get is() { return "ion-fab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -227,7 +227,7 @@ ion-header {
   z-index: 10;
 }
 ion-header.header-divider {
-  border-bottom: var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5));
+  border-bottom: var(--token-border-size-025, var(--token-scale-025, 1px)) solid var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));
 }
 
 ion-toolbar + ion-toolbar {

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

@@ -536,20 +536,20 @@
 
 :host(.input-fill-outline) {
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-  --border-color: var(--token-primitives-neutral-500, #a2a2a2);
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
 }
 
 :host(.input-fill-solid) {
-  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));
-  --border-color: 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));
+  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
 }
 
 /**
  * If the input has a validity state, the
  * border should reflect that as a color.
  */
-:host(.input-fill-solid.has-focus.ion-valid) .input-wrapper-inner,
-:host(.input-fill-solid.ion-touched.ion-invalid) .input-wrapper-inner {
+:host(.input-fill-solid.has-focus.ion-valid) .input-wrapper,
+:host(.input-fill-solid.ion-touched.ion-invalid) .input-wrapper {
   --border-color: var(--highlight-color);
 }
 
@@ -559,17 +559,17 @@
  */
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+    --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   }
 }
 :host(.input-fill-solid.input-disabled) {
-  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
-  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
+  --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :host(.input-fill-solid.input-readonly) {
-  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
-  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));
+  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
+  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 /**
@@ -577,49 +577,21 @@
  * much darker on focus.
  */
 :host(.input-fill-solid.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
 }
 
 :host {
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --highlight-color-valid: var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23));
-  --highlight-color-invalid: var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));
-  --placeholder-color: var(--token-primitives-neutral-800, #626262);
+  --highlight-color-valid: var(--token-semantics-success-900, var(--token-primitives-green-900, #037046));
+  --highlight-color-invalid: var(--token-border-danger-default, var(--token-semantics-danger-600, var(--token-primitives-red-600, #ef5264)));
+  --placeholder-color: var(--token-primitives-neutral-800, #6c727a);
   --placeholder-opacity: 1;
+  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;
-}
-
-.input-outline {
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  border-radius: var(--border-radius);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  border: var(--border-width) var(--border-style) var(--border-color);
-}
-
-:host(.input-label-placement-start) .input-wrapper {
-  flex-direction: row;
-}
-
-:host(.input-label-placement-end) .input-wrapper {
-  flex-direction: row-reverse;
-}
-
-:host(.input-label-placement-stacked) .input-wrapper,
-:host(.input-label-placement-floating) .input-wrapper {
-  flex-direction: column;
-  align-items: start;
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
 }
 
 :host(.input-label-placement-stacked) input,
@@ -639,37 +611,95 @@
   padding-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
+ * span its own row above the start slot, the input and the end slot.
+ */
 .input-wrapper {
-  /**
-   * For the ionic theme, the padding needs to sit on the
-   * native wrapper instead, so that it sits within the
-   * outline container but does not always affect the
-   * label text.
-   */
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
   padding-bottom: 0;
+  display: grid;
+  grid-template-columns: [field-start slot-start] auto [native] minmax(0, 1fr) [slot-end] auto [field-end];
+  grid-template-rows: [label] auto [field] auto;
   /**
-   * Outline inputs do not have a bottom border.
-   * Instead, they have a border that wraps the
-   * input + label.
+   * 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.
    */
-  border-bottom: none;
+  align-content: center;
+  align-items: center;
   /**
-   * Do not show a background on the input wrapper as
-   * this includes the label, instead we apply the
-   * background to the native wrapper.
+   * The wrapper spans the label too, so the background belongs on the field
+   * box rather than here.
    */
   background: transparent;
 }
 
+.input-control {
+  display: contents;
+}
+
+/**
+ * A pseudo-element draws the box across the second row, so the label can sit in
+ * the first row and stay outside of it while the tree matches the other themes.
+ */
+.input-wrapper::before {
+  border-radius: var(--border-radius, 0);
+  align-self: stretch;
+  box-sizing: border-box;
+  content: "";
+  pointer-events: none;
+  min-height: var(--token-scale-1000, 40px);
+  border: var(--border-width) var(--border-style) var(--border-color);
+  background: var(--background);
+}
+
+.input-wrapper::before {
+  grid-row: field;
+  grid-column: field-start/field-end;
+}
+
 .label-text-wrapper {
-  /**
-   * The label should appear on top of an outline
-   * container that overlaps it so it is always clickable.
-   */
-  position: relative;
+  grid-row: label;
+  grid-column: field-start/field-end;
+}
+
+.input-start {
+  grid-row: field;
+  grid-column: slot-start;
+}
+
+.native-wrapper {
+  grid-row: field;
+  grid-column: native;
+}
+
+.input-end {
+  grid-row: field;
+  grid-column: slot-end;
+}
+
+/**
+ * The padding sits on the cells that the field box covers, so the label is not
+ * indented by it.
+ */
+.input-start,
+.native-wrapper,
+.input-end {
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+}
+
+.input-start {
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+}
+
+.input-end {
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
 }
 
 :host(.input-label-placement-stacked) .label-text-wrapper {
@@ -698,27 +728,6 @@
   border-top: none;
 }
 
-.input-wrapper-inner {
-  border-radius: inherit;
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  display: flex;
-  position: relative;
-  align-items: center;
-  width: 100%;
-  min-height: var(--token-scale-1000, 40px);
-  box-sizing: border-box;
-  /**
-  * Apply the background to the inner wrapper so the label
-  * above it stays outside the field.
-  */
-  background: var(--background);
-}
-
 :host(.input-size-medium) {
   --padding-start: var(--token-space-300, var(--token-scale-300, 12px));
   --padding-end: var(--token-space-300, var(--token-scale-300, 12px));
@@ -734,28 +743,28 @@
   --padding-end: var(--token-space-500, var(--token-scale-500, 20px));
 }
 
-:host(.input-size-medium) .input-wrapper-inner {
+:host(.input-size-medium) .input-wrapper::before {
   min-height: var(--token-scale-1000, 40px);
 }
 
-:host(.input-size-large) .input-wrapper-inner {
+:host(.input-size-large) .input-wrapper::before {
   min-height: var(--token-scale-1200, 48px);
 }
 
-:host(.input-size-xlarge) .input-wrapper-inner {
+:host(.input-size-xlarge) .input-wrapper::before {
   min-height: var(--token-scale-1400, 56px);
 }
 
 :host(.input-shape-soft) {
-  --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
+  --border-radius: var(--token-shape-soft-lg, 8px);
 }
 
 :host(.input-shape-round) {
-  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
+  --border-radius: var(--token-shape-round-xl, 16px);
 }
 
 :host(.input-shape-rectangular) {
-  --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
+  --border-radius: var(--token-shape-rectangular-xl, 0px);
 }
 
 :host(.input-size-medium) ion-input-password-toggle {
@@ -770,18 +779,31 @@
   --size: var(--token-scale-1400, 56px);
 }
 
-.input-wrapper-inner::after {
-  right: 0;
-  left: 0;
-  top: 50%;
-  position: absolute;
-  height: 100%;
-  min-height: var(--token-scale-1200, 48px);
-  transform: translateY(-50%);
+/**
+ * This stays at the default stacking level. The native input is positioned at
+ * `z-index: 1`, so a target area at that level or above paints over it and
+ * swallows the clicks meant for it. Tree order already puts this above the
+ * field box, which is all it needs to cover.
+ */
+.input-wrapper::after {
+  grid-row: field;
+  grid-column: field-start/field-end;
+  align-self: stretch;
   content: "";
   cursor: text;
 }
 
+/**
+ * The medium field is shorter than the minimum target area, so the negative
+ * block margin lets the target area overflow the row instead of growing it.
+ * The larger sizes are already at least as tall, so they need no correction.
+ */
+:host(.input-size-medium) .input-wrapper::after {
+  margin-top: calc((var(--token-scale-1000, 40px) - var(--token-scale-1200, 48px)) / 2);
+  margin-bottom: calc((var(--token-scale-1000, 40px) - var(--token-scale-1200, 48px)) / 2);
+  min-height: var(--token-scale-1200, 48px);
+}
+
 ::slotted([slot=start]),
 ::slotted([slot=end]),
 .input-clear-icon {
@@ -811,12 +833,12 @@
   margin-bottom: auto;
   width: var(--token-scale-400, 16px);
   height: var(--token-scale-400, 16px);
-  color: var(--token-primitives-neutral-1000, #3b3b3b);
+  color: var(--token-primitives-neutral-1000, #383e45);
 }
 
 .input-clear-icon:focus-visible {
   border-radius: var(--token-border-radius-100, var(--token-scale-100, 4px));
-  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) solid var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   opacity: 1;
 }
 
@@ -843,13 +865,12 @@
 }
 
 .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;
-  color: var(--token-primitives-neutral-1000, #3b3b3b);
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-500, 1.25rem);
+  color: var(--token-primitives-neutral-1000, #383e45);
 }
 
 :host(.label-floating) .label-text-wrapper {
@@ -861,21 +882,20 @@
   padding-right: 0;
   padding-top: var(--token-space-100, var(--token-scale-100, 4px));
   padding-bottom: 0;
+  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);
 }
 
 .input-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)));
 }
 
 .input-bottom .helper-text,
 .input-bottom .counter {
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 :host(.has-focus.ion-valid) .helper-text {
@@ -889,29 +909,29 @@
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --border-color: var(--token-primitives-neutral-600, #8c8c8c);
+    --border-color: var(--token-primitives-neutral-600, #7e858e);
   }
 }
 :host(.input-disabled) {
-  --color: var(--token-primitives-neutral-500, #a2a2a2);
-  --background: var(--token-primitives-neutral-100, #f3f3f3);
-  --border-color: var(--token-primitives-neutral-300, #e0e0e0);
-  --placeholder-color: var(--token-primitives-neutral-500, #a2a2a2);
+  --color: var(--token-primitives-neutral-500, #9fa5ad);
+  --background: var(--token-primitives-neutral-100, #f6f7fa);
+  --border-color: var(--token-primitives-neutral-300, #e6eaee);
+  --placeholder-color: var(--token-primitives-neutral-500, #9fa5ad);
   pointer-events: none;
 }
 
 :host(.input-disabled:not(.ion-valid)) .input-bottom .helper-text,
 :host(.input-disabled) .input-bottom .counter,
 :host(.input-disabled) .label-text-wrapper {
-  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :host(.input-disabled.has-focus.ion-valid) {
-  --border-color: rgba(var(--token-semantics-success-base-rgb, 27, 164, 51), 0.6);
+  --border-color: rgba(var(--token-semantics-success-base-rgb, 74, 174, 131), 0.6);
 }
 
 :host(.input-disabled.ion-touched.ion-invalid) {
-  --border-color: rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6);
+  --border-color: rgba(var(--token-semantics-danger-base-rgb, 224, 36, 58), 0.6);
 }
 
 :host(.input-disabled.ion-color) {
@@ -924,11 +944,11 @@
 }
 
 :host(.input-readonly) {
-  --background: var(--token-primitives-neutral-100, #f3f3f3);
+  --background: var(--token-primitives-neutral-100, #f6f7fa);
 }
 
 :host(.has-focus) {
-  --border-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --border-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   --border-width: var(--token-border-size-050, var(--token-scale-050, 2px));
 }
 

package/dist/collection/components/input/input.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Build, Host, forceUpdate, h, } from "@stencil/core";
 import { createClearButtonPressController, createNotchController, createStartContainerController, checkInvalidState, } from "../../utils/forms/index";
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
@@ -579,27 +578,19 @@ export class Input {
                 'input-clear-button-pressed': this.isClearButtonPressed,
             }, onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: this.inputClearIcon })));
     }
-    /**
-     * The ionic theme keeps the label above a field box that wraps the slots and
-     * the input, so the label can size independently of the slotted content.
-     */
-    renderIonicField() {
-        return [
-            this.renderLabel(),
-            h("div", { key: "inner", class: "input-wrapper-inner" }, h("div", { key: "outline", class: "input-outline" }), this.renderStartContainer(), h("div", { key: "control", class: "input-control" }, h("div", { class: "native-wrapper", onClick: this.onLabelClick }, this.renderNativeInput())), this.renderEndContainer()),
-        ];
-    }
-    /**
-     * The ios and md themes nest the label alongside the input so a floating
-     * label can escape the control and clear the start and end slots.
-     */
     renderStartContainer() {
         return (h("div", { key: "start", class: "input-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { name: "start" })));
     }
     renderEndContainer() {
         return (h("div", { key: "end", class: "input-end" }, this.renderClearButton(), h("slot", { name: "end" })));
     }
-    renderNativeField() {
+    /**
+     * Every theme renders the same label and control structure, aside from the md
+     * outline container below. The label is nested alongside the input so the ios
+     * and md floating label can escape the control and clear the start and end
+     * slots. The ionic theme lifts it above the field with grid instead.
+     */
+    renderField() {
         const hasOutlineFill = getIonTheme(this) === 'md' && this.getFill() === 'outline';
         return [
             hasOutlineFill && this.renderOutlineContainer(),
@@ -621,16 +612,9 @@ export class Input {
         if (this.clearInputIcon != null) {
             return this.clearInputIcon;
         }
-        // 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 input clear icon or the default icon
+        const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
         return config.get('inputClearIcon', defaultIcon);
     }
     render() {
@@ -649,7 +633,7 @@ export class Input {
          * the input has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: '5f43fb688b16cf37221db78eeedbf4b337a51d65', class: createColorClasses(this.color, {
+        return (h(Host, { key: '82d13bcc33e5817aa3afcc0c752cdca87301b1c7', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -662,7 +646,7 @@ export class Input {
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, h("label", { key: '211acead7fe50527b472ebddddca5ecc72ce1ec9', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, theme === 'ionic' ? this.renderIonicField() : this.renderNativeField(), shouldRenderHighlight && h("div", { key: 'b47126f58c61d673ec1c970f1d166284e45b5a9b', class: "input-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '53d8b948776361505a9bc47a4a2e8544d05f6856', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderField(), shouldRenderHighlight && h("div", { key: 'f4c81c4927a685d1474bb4510ad25eb51f77cd99', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }