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

package/dist/collection/components/checkbox/checkbox.js

@@ -5,6 +5,7 @@ import { Build, Host, forceUpdate, h } from "@stencil/core";
 import { checkInvalidState, createItemMultipleInputsObserver } from "../../utils/forms/index";
 import { inheritAriaAttributes, renderHiddenInput } from "../../utils/helpers";
 import { createColorClasses, hostContext } from "../../utils/theme";
+import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -14,7 +15,8 @@ import { getIonTheme } from "../../global/ionic-global";
  *
  * @part container - The container for the checkbox mark.
  * @part label - The label text describing the checkbox.
- * @part mark - The checkmark used to indicate the checked state.
+ * @part icon - The icon that displays the checked or indeterminate mark.
+ * @part mark - The mark used to indicate the checked or indeterminate state. Only applies when no icon is set in the config.
  * @part supporting-text - Supporting text displayed beneath the checkbox label.
  * @part helper-text - Supporting text displayed beneath the checkbox label when the checkbox is valid.
  * @part error-text - Supporting text displayed beneath the checkbox label when the checkbox is invalid and touched.
@@ -189,6 +191,20 @@ export class Checkbox {
     async setFocus() {
         this.el.focus();
     }
+    /**
+     * Get the icon to use for the checked icon.
+     * Use the icon set in the config.
+     */
+    get checkboxCheckedIcon() {
+        return config.get('checkboxCheckedIcon');
+    }
+    /**
+     * Get the icon to use for the indeterminate icon.
+     * Use the icon set in the config.
+     */
+    get checkboxIndeterminateIcon() {
+        return config.get('checkboxIndeterminateIcon');
+    }
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         if (isInvalid && errorText) {
@@ -216,15 +232,16 @@ export class Checkbox {
         return (h("div", { class: "checkbox-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     render() {
-        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, shape, size, } = this;
+        const { color, checkboxCheckedIcon, checkboxIndeterminateIcon, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, shape, size, } = this;
         const theme = getIonTheme(this);
+        const markIcon = indeterminate ? checkboxIndeterminateIcon : checkboxCheckedIcon;
         const path = getSVGPath(theme, indeterminate);
         const inItem = hostContext('ion-item', el);
         const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
         // The host element must have a checkbox role to ensure proper VoiceOver
         // support in Safari for accessibility.
-        return (h(Host, { key: '4a87b4c232e9dbf71a489ecd02ec94c1bd5cac24', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'f7e1aa9fd8d2050334c976f0c9cc9ed6c798ae5f', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': inItem,
                 'checkbox-checked': checked,
@@ -239,23 +256,16 @@ export class Checkbox {
                 [`checkbox-label-placement-${labelPlacement}`]: true,
                 [`checkbox-size-${size}`]: size !== undefined,
                 [`checkbox-shape-${shape}`]: true,
-            }) }, h("label", { key: '97aebc716e0ab1ef850620011a4e65f6318fca2c', class: "checkbox-wrapper", htmlFor: inputId }, h("input", { key: '47d3d3c93438cf3a135c162893ed502af8914a75', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required, ...inheritedAttributes }), h("div", { key: '70935ad2274e5b3f4973cda326abca237aa302f9', class: {
+            }) }, h("label", { key: 'eff61c7348c1f71f67e463134e105bf4d51faa67', class: "checkbox-wrapper", htmlFor: inputId }, h("input", { key: 'd0518f83bbd5ff3d7617233b65b0bd39a4c03cfe', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required, ...inheritedAttributes }), h("div", { key: 'f518f660f5c2b9d22492a85c1fede5bb496d47e8', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '22f27bd7afd0abefb112419355a0ce9f1a1403e9' }), this.renderHintText()), h("div", { key: 'fda4acb438bafcfdcfefd860e3f92335d4b9ea74', class: "native-wrapper" }, h("svg", { key: 'bab1161b88d36511546cb49ae3d411a16bd60a08', class: "checkbox-icon", viewBox: theme === 'ionic' ? '0 0 256 256' : '0 0 24 24', part: "container", "aria-hidden": "true" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'abe67b013d1927716ab117909591ff9e1592a18c' }), this.renderHintText()), h("div", { key: 'b72d4125c89a2246ed68664f25a8dd633db173b9', class: "native-wrapper", part: "container" }, h("ion-icon", { key: markIcon ? 'config-icon' : 'theme-mark', class: "checkbox-icon", icon: markIcon, part: "icon", "aria-hidden": "true" }, !markIcon && h("svg", { key: 'b28bce725997e1a9bc345651c366c96c7257cbcd', viewBox: "0 0 24 24" }, path))))));
     }
     getSVGPath(theme, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
-        if (theme === 'md') {
+        if (theme === 'md' || theme === 'ionic') {
             path = indeterminate ? (h("path", { d: "M2 12H22", part: "mark" })) : (h("path", { d: "M1.73,12.91 8.1,19.28 22.79,4.59", part: "mark" }));
         }
-        else if (theme === 'ionic') {
-            path = indeterminate ? (
-            // Phosphor Icon - minus bold
-            h("path", { d: "M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z" })) : (
-            // Phosphor Icon - check bold
-            h("path", { d: "M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z" }));
-        }
         return path;
     }
     static get is() { return "ion-checkbox"; }

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

@@ -146,6 +146,7 @@
   /**
    * @prop --size: Size of the checkbox icon
    *
+   * @prop --checkbox-background: Background of the checkbox icon
    * @prop --checkbox-background-checked: Background of the checkbox icon when checked
    *
    * @prop --border-color: Border color of the checkbox icon
@@ -157,7 +158,7 @@
    * @prop --transition: Transition of the checkbox icon
    *
    * @prop --checkmark-color: Color of the checkbox checkmark when checked
-   * @prop --checkmark-width: Stroke width of the checkbox checkmark
+   * @prop --checkmark-width: Stroke width of the checkbox checkmark. Only applies when no icon is set in the config.
    */
   display: inline-block;
   position: relative;
@@ -220,16 +221,39 @@ input {
 }
 
 .native-wrapper {
+  border-radius: var(--border-radius);
   display: flex;
+  position: relative;
+  flex-shrink: 0;
   align-items: center;
+  width: var(--size);
+  height: var(--size);
+  transition: var(--transition);
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  background: var(--checkbox-background);
+  box-sizing: border-box;
 }
 
+/**
+ * Apply the color to the ion-icon container so that the default
+ * checkmark icon and any configured icon apply color consistently.
+ */
 .checkbox-icon {
-  position: relative;
+  color: var(--checkmark-color);
+  opacity: 0;
+}
+
+.checkbox-icon svg {
+  width: 100%;
+  height: 100%;
 }
 
 .checkbox-icon path {
-  opacity: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--checkmark-width);
 }
 
 .checkbox-bottom {
@@ -349,14 +373,14 @@ input {
   display: block;
 }
 
-:host(.checkbox-checked) .checkbox-icon,
-:host(.checkbox-indeterminate) .checkbox-icon {
+:host(.checkbox-checked) .native-wrapper,
+:host(.checkbox-indeterminate) .native-wrapper {
   border-color: var(--border-color-checked);
   background: var(--checkbox-background-checked);
 }
 
-:host(.checkbox-checked) .checkbox-icon path,
-:host(.checkbox-indeterminate) .checkbox-icon path {
+:host(.checkbox-checked) .checkbox-icon,
+:host(.checkbox-indeterminate) .checkbox-icon {
   opacity: 1;
 }
 
@@ -365,9 +389,6 @@ input {
 }
 
 :host {
-  /**
-   * @prop --checkbox-background: Background of the checkbox icon
-   */
   --checkbox-background-checked: var(--ion-color-primary, #0054e9);
   --border-color-checked: var(--ion-color-primary, #0054e9);
   --checkmark-color: var(--ion-color-primary-contrast, #fff);
@@ -381,10 +402,6 @@ input {
   --checkmark-color: var(--ion-color-contrast);
 }
 
-.native-wrapper {
-  position: relative;
-}
-
 :host(.ion-focused) .native-wrapper::after {
   border-radius: 50%;
   display: block;
@@ -415,21 +432,8 @@ input {
 }
 
 .checkbox-icon {
-  border-radius: var(--border-radius);
-  width: var(--size);
-  height: var(--size);
-  transition: var(--transition);
-  border-width: var(--border-width);
-  border-style: var(--border-style);
-  border-color: var(--border-color);
-  background: var(--checkbox-background);
-  box-sizing: border-box;
-}
-
-.checkbox-icon path {
-  fill: none;
-  stroke: var(--checkmark-color);
-  stroke-width: var(--checkmark-width);
+  width: 100%;
+  height: 100%;
 }
 
 .checkbox-bottom {

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

@@ -111,7 +111,7 @@
    * @prop --focus-ring-color: Color of the focus ring
    * @prop --focus-ring-width: Width of the focus ring
    */
-  --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));
   -webkit-padding-start: var(--token-space-200, var(--token-scale-200, 8px));
   padding-inline-start: var(--token-space-200, var(--token-scale-200, 8px));
@@ -120,25 +120,24 @@
   padding-top: var(--token-space-150, var(--token-scale-150, 6px));
   padding-bottom: var(--token-space-150, var(--token-scale-150, 6px));
   border-radius: var(--border-radius);
+  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);
   gap: var(--token-space-100, var(--token-scale-100, 4px));
-  line-height: var(--token-font-line-height-full, 100%);
+  line-height: 100%;
   cursor: auto;
 }
 
 :host(.chip-outline) {
   border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  border-style: var(--token-border-style-solid, solid);
+  border-style: solid;
 }
 
 :host(.ion-focused) {
   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(--focus-ring-color);
+  outline: var(--token-border-size-050, var(--token-scale-050, 2px)) solid var(--focus-ring-color);
 }
 
 :host(.chip-disabled)::after {
@@ -181,21 +180,21 @@
 }
 
 :host(.chip-subtle) {
-  --background: var(--token-primitives-neutral-100, #f3f3f3);
-  --color: var(--token-primitives-neutral-800, #626262);
+  --background: var(--token-primitives-neutral-100, #f6f7fa);
+  --color: var(--token-primitives-neutral-800, #6c727a);
 }
 
 :host(.chip-outline.chip-subtle) {
-  border-color: var(--token-primitives-neutral-300, #e0e0e0);
+  border-color: var(--token-primitives-neutral-300, #e6eaee);
 }
 
 :host(.chip-bold) {
-  --background: var(--token-bg-neutral-bold-default, var(--token-primitives-neutral-1000, #3b3b3b));
+  --background: var(--token-bg-neutral-bold-default, var(--token-primitives-neutral-1000, #383e45));
   --color: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
 }
 
 :host(.chip-outline.chip-bold) {
-  border-color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  border-color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 :host(.chip-subtle.ion-color) {

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

@@ -450,7 +450,7 @@
    * @prop --focus-ring-width: The width of the ring around the focused element.
    */
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-  --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-radius-025, var(--token-scale-050, 2px));
   /**
    * TODO(FW-6931): Remove these variables upon solving the root cause
@@ -491,27 +491,25 @@
   justify-content: space-between;
   height: var(--token-scale-1400, 56px);
   margin-bottom: var(--token-space-200, var(--token-scale-200, 8px));
-  border-bottom: var(--token-border-style-solid, solid) var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d5d5d5);
+  border-bottom: solid var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d0d7df);
 }
 
 :host .datetime-header .datetime-title {
+  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;
-  color: var(--token-primitives-neutral-800, #626262);
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-700, 1.75rem);
+  color: var(--token-primitives-neutral-800, #6c727a);
 }
 
 :host .datetime-header .datetime-selected-date {
+  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;
-  color: var(--token-primitives-neutral-1000, #3b3b3b);
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
+  color: var(--token-primitives-neutral-1000, #383e45);
 }
 
 .calendar-action-buttons {
@@ -528,12 +526,11 @@
 
 .calendar-month-year-toggle {
   border-radius: var(--token-border-radius-full, 999px);
+  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-1, 1%);
-  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-100, 0.01em);
+  line-height: var(--token-font-line-height-600, 1.5rem);
   -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
   padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
   -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
@@ -542,13 +539,13 @@
   padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
   min-width: var(--token-scale-1600, 64px);
   min-height: var(--token-scale-1000, 40px);
-  border: var(--focus-ring-width) var(--token-border-style-solid, solid) transparent;
+  border: var(--focus-ring-width) solid transparent;
   color: var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)));
 }
 
 @media (any-hover: hover) {
   .calendar-month-year-toggle:hover {
-    background: var(--token-primitives-neutral-200, #eae9e9);
+    background: var(--token-primitives-neutral-200, #ebeef2);
   }
 }
 .calendar-month-year-toggle.ion-focused {
@@ -556,32 +553,32 @@
 }
 
 .calendar-month-year-toggle.ion-activated {
-  background: var(--token-primitives-neutral-200, #eae9e9);
+  background: var(--token-primitives-neutral-200, #ebeef2);
 }
 
 .calendar-next-prev ion-button.button-has-icon-only {
-  --color: var(--token-primitives-neutral-1000, #3b3b3b);
-  --background-activated: var(--token-primitives-neutral-200, #eae9e9);
-  --background-hover: var(--token-primitives-neutral-200, #eae9e9);
+  --color: var(--token-primitives-neutral-1000, #383e45);
+  --background-activated: var(--token-primitives-neutral-200, #ebeef2);
+  --background-hover: var(--token-primitives-neutral-200, #ebeef2);
   --background-hover-opacity: 1;
   min-height: var(--token-scale-1000, 40px);
 }
 
 .calendar-next-prev ion-button.button-has-icon-only.ion-focused::part(native) {
-  border: 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));
+  border: 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)));
   outline: none;
 }
 
 .calendar-days-of-week {
+  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-2, 1.5%);
-  line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
-  text-decoration: none;
+  letter-spacing: var(--token-font-letter-spacing-150, 0.015em);
+  line-height: var(--token-font-line-height-500, 1.25rem);
   text-transform: uppercase;
   align-content: center;
   height: var(--token-scale-1200, 48px);
-  color: var(--token-primitives-neutral-800, #626262);
+  color: var(--token-primitives-neutral-800, #6c727a);
 }
 
 .calendar-day {
@@ -592,20 +589,19 @@
   padding-inline-end: var(--token-space-100, var(--token-scale-100, 4px));
   padding-top: var(--token-space-100, var(--token-scale-100, 4px));
   padding-bottom: 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-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);
   width: var(--token-scale-1200, 48px);
   min-width: var(--token-scale-1200, 48px);
   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));
 }
 
 .calendar-day[disabled]:not(.calendar-day-constrained) {
-  color: var(--token-primitives-neutral-500, #a2a2a2);
+  color: var(--token-primitives-neutral-500, #9fa5ad);
 }
 
 .calendar-day.calendar-day-today {
@@ -614,11 +610,11 @@
 
 .calendar-day.calendar-day-active,
 .calendar-day.calendar-day-active.calendar-day-adjacent-day {
-  background: var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc));
+  background: var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff));
 }
 
 .calendar-day:focus-visible {
-  border: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
+  border: var(--focus-ring-width) solid var(--focus-ring-color);
 }
 
 @media (any-hover: hover) {
@@ -632,11 +628,11 @@
 }
 
 .calendar-day.calendar-day-adjacent-day {
-  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
+  color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
 .calendar-day.calendar-day-active.calendar-day-adjacent-day {
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 :host .datetime-time {
@@ -649,13 +645,12 @@
 }
 
 :host .datetime-time .time-header {
+  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-1, 1%);
-  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
-  text-decoration: none;
-  text-transform: none;
-  color: var(--token-primitives-neutral-800, #626262);
+  letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
+  line-height: var(--token-font-line-height-600, 1.5rem);
+  color: var(--token-primitives-neutral-800, #6c727a);
 }
 
 :host .datetime-time button {
@@ -665,18 +660,17 @@
   padding-inline-end: var(--token-space-200, var(--token-scale-200, 8px));
   padding-top: var(--token-space-0, var(--token-scale-0, 0px));
   padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
+  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);
   border-radius: var(--token-border-radius-full, 999px);
   display: flex;
   align-items: center;
   height: var(--token-scale-800, 32px);
-  background-color: var(--token-primitives-neutral-100, #f3f3f3);
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  background-color: var(--token-primitives-neutral-100, #f6f7fa);
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 :host .datetime-footer {
@@ -690,7 +684,7 @@
   margin-bottom: 0;
   border-left: 0;
   border-right: 0;
-  border-top: var(--token-border-style-solid, solid) var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d5d5d5);
+  border-top: solid var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d0d7df);
   border-bottom: 0;
 }
 

package/dist/collection/components/datetime/datetime.ios.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/datetime/datetime.js

@@ -1,8 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretLeftRegular from "@phosphor-icons/core/assets/regular/caret-left.svg";
-import caretRightRegular from "@phosphor-icons/core/assets/regular/caret-right.svg";
 import { Host, h, writeTask } from "@stencil/core";
 import { startFocusVisible } from "../../utils/focus-visible";
 import { getElementRoot, raf, renderHiddenInput } from "../../utils/helpers";
@@ -1818,74 +1816,40 @@ export class Datetime {
     }
     /**
      * Get the icon to use for the next icon.
-     * Otherwise, use the icon set in the config.
+     * Use the icon set in the config.
      * If no icon is set in the config, use the default icon.
      */
     get datetimeNextIcon() {
-        // 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 datetime next icon or the default icon
-        return config.get('datetimeNextIcon', defaultIcon);
+        return config.get('datetimeNextIcon', chevronForward);
     }
     /**
      * Get the icon to use for the previous icon.
-     * Otherwise, use the icon set in the config.
+     * Use the icon set in the config.
      * If no icon is set in the config, use the default icon.
      */
     get datetimePreviousIcon() {
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronBack,
-            ionic: caretLeftRegular,
-            md: chevronBack,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured datetime previous icon or the default icon
-        return config.get('datetimePreviousIcon', defaultIcon);
+        return config.get('datetimePreviousIcon', chevronBack);
     }
     /**
      * Get the icon to use for the show month and year icon.
-     * Otherwise, use the icon set in the config.
+     * Use the icon set in the config.
      * If no icon is set in the config, use the default icon.
      */
     get datetimeCollapsedIcon() {
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronForward,
-            ionic: undefined,
-            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 datetime show month and year icon or the default icon
+        const defaultIcon = theme === 'ios' ? chevronForward : caretDownSharp;
         return config.get('datetimeCollapsedIcon', defaultIcon);
     }
     /**
      * Get the icon to use for the hide month and year icon.
-     * Otherwise, use the icon set in the config.
+     * Use the icon set in the config.
      * If no icon is set in the config, use the default icon.
      */
     get datetimeExpandedIcon() {
-        // Determine the theme and map to default icons
+        // Determine the theme and map to the default icon
         const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronDown,
-            ionic: undefined,
-            md: caretUpSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured datetime hide month and year icon or the default icon
+        const defaultIcon = theme === 'ios' ? chevronDown : caretUpSharp;
         return config.get('datetimeExpandedIcon', defaultIcon);
     }
     render() {
@@ -1897,7 +1861,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: 'b231d8dc9d386f39c2810e7d9e19683ea3fd1d17', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
+        return (h(Host, { key: '0c30b5453796094b4ef46ebf4f5bf0879db55ec9', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
                 ...createColorClasses(color, {
                     [theme]: true,
                     ['datetime-readonly']: readonly,
@@ -1909,7 +1873,7 @@ export class Datetime {
                     [`datetime-prefer-wheel`]: hasWheelVariant,
                     [`datetime-grid`]: isGridStyle,
                 }),
-            } }, h("div", { key: '8c12785325294a9e3eb61292a737efd4643e68eb', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
+            } }, h("div", { key: '4daf05c55cb51b877970fc72bb0ad490b740d54c', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }