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

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

@@ -242,23 +242,22 @@
   --padding-end: var(--token-space-0, var(--token-scale-0, 0px));
   --padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
   --padding-start: var(--token-space-0, var(--token-scale-0, 0px));
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
   --min-width: var(--token-scale-1000, 40px);
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-style: var(--token-border-style-solid, solid);
-  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
+  --border-style: solid;
+  --border-color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
   --separator-width: var(--token-scale-200, 8px);
   --separator-border-radius: var(--token-border-radius-full, 999px);
-  --separator-color: var(--token-bg-neutral-subtle-press, var(--token-primitives-neutral-400, #d5d5d5));
-  --highlight-color-focused: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
-  --highlight-color-valid: var(--token-border-success, 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)));
+  --separator-color: var(--token-bg-neutral-subtle-press, var(--token-primitives-neutral-300, #e6eaee));
+  --highlight-color-focused: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
+  --highlight-color-valid: var(--token-border-success, var(--token-semantics-success-500, var(--token-primitives-green-500, #94d9bb)));
+  --highlight-color-invalid: var(--token-border-danger-default, var(--token-semantics-danger-600, var(--token-primitives-red-600, #ef5264)));
+  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);
 }
 
 :host(.has-focus) .native-input:focus {
@@ -266,13 +265,12 @@
 }
 
 .input-otp-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-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-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-500, 1.25rem);
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 :host(.input-otp-size-small) {
@@ -300,15 +298,15 @@
 }
 
 :host(.input-otp-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-otp-shape-soft) {
-  --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
+  --border-radius: var(--token-shape-soft-xl, 12px);
 }
 
 :host(.input-otp-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-otp-fill-outline) {
@@ -316,31 +314,31 @@
 }
 
 :host(.input-otp-fill-solid) {
-  --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, #eae9e9));
+  --border-color: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
+  --background: var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #ebeef2));
 }
 
 :host(.input-otp-disabled) {
-  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
+  --color: var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad));
 }
 
 :host(.input-otp-fill-outline.input-otp-disabled) {
-  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f3f3f3));
-  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e0e0e0));
+  --background: var(--token-bg-input-disabled, var(--token-primitives-neutral-100, #f6f7fa));
+  --border-color: var(--token-border-disabled, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 :host(.input-otp-fill-outline.input-otp-readonly) {
-  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f3f3f3));
+  --background: var(--token-bg-input-read-only, var(--token-primitives-neutral-100, #f6f7fa));
 }
 
 :host(.input-otp-fill-solid.input-otp-disabled) {
-  --border-color: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
-  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));
+  --border-color: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
+  --background: var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 :host(.input-otp-fill-solid.input-otp-readonly) {
-  --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, #e0e0e0));
+  --border-color: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
+  --background: var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e6eaee));
 }
 
 :host(.ion-color) {
@@ -356,14 +354,14 @@
 :host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,
 :host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,
 :host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input {
-  border-color: var(--ion-color-danger, var(--token-bg-danger-base-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222))));
+  border-color: var(--ion-color-danger, var(--token-bg-danger-base-default, var(--token-semantics-danger-700, var(--token-primitives-red-700, #e0243a))));
 }
 
 :host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,
 :host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,
 :host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,
 :host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input {
-  border-color: var(--ion-color-success, var(--token-bg-success-base-default, var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23))));
+  border-color: var(--ion-color-success, var(--token-bg-success-base-default, var(--token-semantics-success-800, var(--token-primitives-green-800, #038855))));
 }
 
 :host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input {

package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css

@@ -60,7 +60,7 @@
  * convert to a unit other than $baselineUnit.
  */
 :host ion-button {
-  --color: var(--token-primitives-neutral-800, #626262);
+  --color: var(--token-primitives-neutral-800, #6c727a);
   --margin-end: calc(-1 * var(--padding-end));
   --padding-end: inherit;
   --icon-size: var(--token-font-size-400, 1rem);

package/dist/collection/components/input-password-toggle/input-password-toggle.js

@@ -1,14 +1,12 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import eyeSlashRegular from "@phosphor-icons/core/assets/regular/eye-slash.svg";
-import eyeRegular from "@phosphor-icons/core/assets/regular/eye.svg";
 import { Host, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
 import { eyeOff, eye } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonMode, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
@@ -56,54 +54,46 @@ export class InputPasswordToggle {
     disconnectedCallback() {
         this.inputElRef = null;
     }
+    /**
+     * Get the icon to use for the hide 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 inputPasswordHideIcon() {
         // Return the icon if it is explicitly set
         if (this.hideIcon != null) {
             return this.hideIcon;
         }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: eyeOff,
-            ionic: eyeSlashRegular,
-            md: eyeOff,
-        };
-        // 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 password hide icon or the default icon
-        return config.get('inputPasswordHideIcon', defaultIcon);
+        return config.get('inputPasswordHideIcon', eyeOff);
     }
+    /**
+     * Get the icon to use for the show 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 inputPasswordShowIcon() {
         // Return the icon if it is explicitly set
         if (this.showIcon != null) {
             return this.showIcon;
         }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: eye,
-            ionic: eyeRegular,
-            md: eye,
-        };
-        // 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 password show icon or the default icon
-        return config.get('inputPasswordShowIcon', defaultIcon);
+        return config.get('inputPasswordShowIcon', eye);
     }
     render() {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode(this);
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: '2734787d7024b5662ab5a3f11d8026d5a514baa3', class: createColorClasses(color, {
+        return (h(Host, { key: '84bc48922e1757b815cc8cfb57120479736c3c60', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: 'f4507daff695b5f2d0b2794ff6cb73ec71917ca8', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: '1ffddcd50039cc044a0ad36e5c8e0465d135518c', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'b1d55b3625cc0a90249090c29b635064e6086075', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '6ee118c5044c11b6db743f3ce6be6ef7ba255292', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     static get is() { return "ion-input-password-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -409,12 +409,12 @@ ion-ripple-effect {
 
 :host {
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-  --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-color: var(--token-primitives-neutral-300, #e0e0e0);
-  --border-style: var(--token-border-style-solid, solid);
+  --border-color: var(--token-primitives-neutral-300, #e6eaee);
+  --border-style: solid;
   --border-width: 0 0 var(--token-border-size-025, var(--token-scale-025, 1px)) 0;
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
   --detail-icon-font-size: var(--token-scale-600, 24px);
   --detail-icon-opacity: 1;
   --min-height: var(--token-scale-1800, 72px);
@@ -422,12 +422,11 @@ ion-ripple-effect {
   --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
   --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
   --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
+  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-inner {
@@ -449,7 +448,7 @@ slot[name=end]::slotted(*) {
 }
 
 ::slotted(ion-icon:not(.item-detail-icon)) {
-  color: var(--token-primitives-neutral-1000, #3b3b3b);
+  color: var(--token-primitives-neutral-1000, #383e45);
   font-size: var(--token-scale-1000, 40px);
 }
 
@@ -471,7 +470,7 @@ slot[name=end]::slotted(*) {
   top: 0;
   bottom: 0;
   outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
-  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)));
   position: absolute;
   outline-offset: calc(var(--token-border-size-050, var(--token-scale-050, 2px)) * -1);
   content: "";

package/dist/collection/components/item/item.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretRightRegular from "@phosphor-icons/core/assets/regular/caret-right.svg";
 import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { inheritAttributes, raf } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
@@ -239,29 +238,25 @@ export class Item {
         const controls = this.el.querySelectorAll('ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled]), ion-input:not([disabled]), ion-textarea:not([disabled])');
         return controls[0];
     }
+    /**
+     * Get the icon to use for the detail 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 itemDetailIcon() {
         // Return the icon if it is explicitly set
         if (this.detailIcon != null) {
             return this.detailIcon;
         }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronForward,
-            ionic: caretRightRegular,
-            md: chevronForward,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured item detail icon or the default icon
-        return config.get('itemDetailIcon', defaultIcon);
+        return config.get('itemDetailIcon', chevronForward);
     }
     /**
      * The icon should be flipped when the app is RTL and
      * the icon is a variation of chevron.
      */
     get shouldFlipIcon() {
-        return this.itemDetailIcon === chevronForward || this.itemDetailIcon === caretRightRegular;
+        return this.itemDetailIcon === chevronForward;
     }
     render() {
         const { detail, download, labelColorStyles, lines, disabled, href, itemDetailIcon, shouldFlipIcon, rel, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
@@ -340,7 +335,7 @@ export class Item {
          * multi-input item, and in a clickable item, which is a second tab stop.
          */
         const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
-        return (h(Host, { key: 'e303a3416c411185a0990ec8dcb1b1479eb236e8', "aria-disabled": ariaDisabled, class: {
+        return (h(Host, { key: '94668203071ec29cbcd4a435cded154d9a6f44e1', "aria-disabled": ariaDisabled, class: {
                 ...childStyles,
                 ...labelColorStyles,
                 ...createColorClasses(this.color, {
@@ -357,7 +352,7 @@ export class Item {
                     'ion-focusable': this.focusable,
                     'item-rtl': document.dir === 'rtl',
                 }),
-            }, role: inList ? 'listitem' : null }, h(TagType, { key: '551e095097f4c241aa0bb0d2aceb0bf4777563b2', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: '8a602938537caaebaad7d72aa3e8d5a4d3a12290', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: 'c82030fdec973d347bc56ae25bb71f6c76173b60', class: "item-inner", part: "inner" }, h("div", { key: '01db0987d735ce734f1edfcd7ee8164e441c840e', class: "input-wrapper", part: "container" }, h("slot", { key: '87e073b45610277443733f8f150d0adf26e6bf86', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: '4446a01b2556284a0d8dfb1c209bec1b064a2341', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '09196aa21716c854cbbd7c5aeefff2bfb859746e', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: '3408c7ffac92c84ad99a9d71f8c26b98583010a0' }))));
+            }, role: inList ? 'listitem' : null }, h(TagType, { key: '5d806a372a58368735fa9ec5d7a91fb9fb0177a1', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: 'f51ab92aa48af5e6061e4ce6054ce758913849e9', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '7f843e3fc8446f137c2ab8e3b9ec761816537f88', class: "item-inner", part: "inner" }, h("div", { key: '7427ac82b29335459ec3b9c8f07d8b92faee675e', class: "input-wrapper", part: "container" }, h("slot", { key: '99306e28323143b5e4b83f548fcbbe693684128b', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'c0da503cade4c5be74c1a06cbda6d381569b0819', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'a4422494c8715cf258655ccc1e1dd7ffd9cc13eb', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: '16aa4720ebfbdc1669cec2769780b4cfc8f775ed' }))));
     }
     static get is() { return "ion-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item-option/item-option.ionic.css

@@ -158,12 +158,11 @@
   padding-right: 0;
   padding-top: 0;
   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-350, 0.875rem);
   font-weight: var(--token-font-weight-medium, 500);
-  letter-spacing: var(--token-font-letter-spacing-1, 1%);
-  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-100, 0.01em);
+  line-height: var(--token-font-line-height-500, 1.25rem);
 }
 
 .button-native {
@@ -251,9 +250,9 @@
 }
 
 :host(.item-option-subtle) {
-  --background: var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));
+  --background: var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff))));
   --background-activated: var(--ion-color-primary-subtle-shade, var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa))));
-  --color: var(--ion-color-primary-subtle-contrast, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
+  --color: var(--ion-color-primary-subtle-contrast, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)));
 }
 
 :host(.item-option-subtle.ion-color) {

package/dist/collection/components/item-sliding/item-sliding.ionic.css

@@ -179,7 +179,7 @@ ion-item-sliding .item {
  * convert to a unit other than $baselineUnit.
  */
 .item-sliding-transition-open .item {
-  transition: transform var(--token-transition-time-250, 250ms) var(--token-transition-curve-smooth, cubic-bezier(0.25, 1, 0.5, 1));
+  transition: transform var(--token-transition-time-200, 200ms) var(--token-transition-curve-smooth, cubic-bezier(0.25, 1, 0.5, 1));
 }
 
 .item-sliding-transition-snapback .item {

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

@@ -149,13 +149,12 @@
 
 :host {
   --background: transparent;
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
+  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-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);
   min-height: calc(var(--token-scale-1400, 56px) + var(--token-scale-050, 2px));
   /**
    * The focus rings from components like buttons and links

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

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import listRegular from "@phosphor-icons/core/assets/regular/list.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
@@ -46,17 +45,15 @@ export class MenuButton {
     async visibilityChanged() {
         this.visible = await updateVisibility(this.menu);
     }
+    /**
+     * Get the icon to use for the menu icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
     get menuIcon() {
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: menuOutline,
-            ionic: listRegular,
-            md: menuSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured menu icon or the default icon
+        const defaultIcon = theme === 'ios' ? menuOutline : menuSharp;
         return config.get('menuIcon', defaultIcon);
     }
     render() {
@@ -67,7 +64,7 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '2129cb866a1acc620f005264340f77311535a0c5', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '0593ed9f0867e28fbb9d79e381282eef93343df8', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -76,7 +73,7 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", { key: '0dc5a571945fc4da0cc639087c8fff7a989caf5d', ...attrs, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: 'e7393a7e22fb8ef73ac9a5899979501f114dabf0', class: "button-inner" }, h("slot", { key: '78b6e51e63ae6d3525021000e94c7ec8ae06cc70' }, h("ion-icon", { key: '2dccf089945d8938799afe970f728ee94acc0d37', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: 'd39348251d4106aabbee9cd9bc4f176a64a090d3', type: "unbounded" }))));
+            }) }, h("button", { key: 'e61f71642db9b719eaf9b71e813fc271ea3b7343', ...attrs, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '8e5bb04a8e56dd02c7c8b2d10166f095ac40e461', class: "button-inner" }, h("slot", { key: '23d1bce767d0d389380fe30b3cd94e6f7c5c98f6' }, h("ion-icon", { key: 'abc88761fa11b5cfa853b58411e1ee8a4f632859', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: '77e328074a65be3b951cf7352aa7f9e82b7f1256', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -198,9 +198,9 @@ ion-backdrop {
 
 :host {
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-  --box-shadow: var(--token-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16));
+  --box-shadow: var(--token-elevation-3, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-6, 6px) var(--token-shadow-blur-32, 32px) var(--token-shadow-spread-0, 0px) var(--token-shadow-6, rgba(0, 0, 0, 0.1607843137)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-2, 2px) var(--token-shadow-blur-7, 7px) var(--token-shadow-spread-0, 0px) var(--token-shadow-2, rgba(0, 0, 0, 0.0509803922)));
   --backdrop-opacity: 0.7;
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 :host(.modal-round) {
@@ -228,7 +228,7 @@ ion-backdrop {
   border-radius: var(--token-border-radius-100, var(--token-scale-100, 4px));
   width: var(--token-scale-1100, 44px);
   height: var(--token-scale-100, 4px);
-  background-color: var(--token-primitives-neutral-300, #e0e0e0);
+  background-color: var(--token-primitives-neutral-300, #e6eaee);
 }
 .modal-handle::before {
   -webkit-padding-start: var(--token-space-100, var(--token-scale-100, 4px));

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

@@ -262,7 +262,7 @@
 :host {
   --width: 250px;
   --max-height: 90%;
-  --box-shadow: var(--token-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18));
+  --box-shadow: var(--token-elevation-4, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-15, 15px) var(--token-shadow-blur-48, 48px) var(--token-shadow-spread-0, 0px) var(--token-shadow-7, rgba(0, 0, 0, 0.1803921569)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-3, 3px) var(--token-shadow-blur-12, 12px) var(--token-shadow-spread-0, 0px) var(--token-shadow-5, rgba(0, 0, 0, 0.1215686275)));
   --backdrop-opacity: 0.3;
 }
 

package/dist/collection/components/progress-bar/progress-bar.ionic.css

@@ -264,17 +264,17 @@
   }
 }
 :host {
-  --background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));
+  --background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-100, #f6f7fa));
   --progress-background: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
   height: var(--token-scale-100, 4px);
 }
 
 :host(.progress-bar-shape-round) {
-  border-radius: var(--token-round-xs, var(--token-border-radius-full, 999px));
+  border-radius: var(--token-shape-round-xs, 999px);
 }
 
 :host(.progress-bar-shape-rectangular) {
-  border-radius: var(--token-rectangular-xs, var(--token-border-radius-0, var(--token-scale-0, 0px)));
+  border-radius: var(--token-shape-rectangular-xs, 0px);
 }
 
 :host(.ion-color) .progress,

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

@@ -276,21 +276,20 @@ input {
 }
 
 :host {
-  --color: var(--token-border-input-default, var(--token-primitives-neutral-600, #8c8c8c));
+  --color: var(--token-border-input-default, var(--token-primitives-neutral-400, #d0d7df));
   --color-checked: var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef))));
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-style: var(--token-border-style-solid, solid);
+  --border-style: solid;
   --border-radius: var(--token-border-radius-full, 999px);
-  --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --focus-ring-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
   --focus-ring-width: var(--token-border-size-050, var(--token-scale-050, 2px));
+  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);
   min-height: var(--token-scale-1200, 48px);
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 :host(.ion-color.radio-checked) .radio-icon {
@@ -399,7 +398,7 @@ input {
 
 :host(.ion-focused) .radio-icon {
   outline-offset: var(--focus-ring-width);
-  outline: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
 }
 
 :host(.ion-activated) .radio-icon::after {
@@ -408,7 +407,7 @@ input {
   top: 0;
   bottom: 0;
   position: absolute;
-  background-color: var(--token-state-press, rgba(36, 36, 36, 0.08));
+  background-color: var(--token-state-press, rgba(0, 0, 0, 0.0705882353));
   content: "";
   border-radius: inherit;
   top: calc(var(--border-width) * -1);

package/dist/collection/components/radio-group/radio-group.ionic.css

@@ -84,20 +84,19 @@
 }
 
 .radio-group-top {
+  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);
 }
 
 .radio-group-top .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)));
 }
 
 .radio-group-top .helper-text {
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 :host(.in-list) .radio-group-top {