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

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -1,8 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretRightRegular from "@phosphor-icons/core/assets/regular/caret-right.svg";
-import dotsThreeRegular from "@phosphor-icons/core/assets/regular/dots-three.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
@@ -50,31 +48,21 @@ export class Breadcrumb {
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
+    /**
+     * Get the icon to use for the collapsed icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
     get breadcrumbCollapsedIcon() {
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: ellipsisHorizontal,
-            ionic: dotsThreeRegular,
-            md: ellipsisHorizontal,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured breadcrumb collapsed icon or the default icon
-        return config.get('breadcrumbCollapsedIcon', defaultIcon);
+        return config.get('breadcrumbCollapsedIcon', ellipsisHorizontal);
     }
+    /**
+     * Get the icon to use for the separator icon.
+     * Use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
     get breadcrumbSeparatorIcon() {
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronForwardOutline,
-            ionic: caretRightRegular,
-            md: chevronForwardOutline,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured breadcrumb separator icon or the default icon
-        return config.get('breadcrumbSeparatorIcon', defaultIcon);
+        return config.get('breadcrumbSeparatorIcon', chevronForwardOutline);
     }
     isClickable() {
         return this.href !== undefined;
@@ -98,7 +86,7 @@ export class Breadcrumb {
         // to show the separator as long as it isn't also the last breadcrumb
         // otherwise if not collapsed use the value in separator
         const showSeparator = last ? false : collapsed ? (showCollapsedIndicator && !last ? true : false) : separator;
-        return (h(Host, { key: 'eb02645656f4ee3752aa9f6c4dee2e57a8ee7527', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '031903ec1227baa7843454eae78f856f41492d4a', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
@@ -108,15 +96,15 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, { key: '54ea53cd2e2f6cabca07565574971c80681f49d8', ...attrs, class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, ...inheritedAttributes }, h("slot", { key: 'bd61fa6839550c381d559b0c3dccd42469374de2', name: "start" }), h("slot", { key: '095a422dc68e1ed78ea1b301bbea9c53e177cbba' }), h("slot", { key: '958b819ab4a37c9e6d6b5ea06da5bbcb01840627', name: "end" })), showCollapsedIndicator && (h("button", { key: '068f87ca666e09286e2fc09fae63e8bdbaad0900', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, { key: 'fa6064b743ee439c8c017494a4237f0905a290ac', ...attrs, class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, ...inheritedAttributes }, h("slot", { key: '7a53001136b8d12d10fa33073dbf83f10895f0a5', name: "start" }), h("slot", { key: '8c3b8954a9dc1eea47b5b57992d98a871b78ea96' }), h("slot", { key: '91a87b34f478ab380bc116d2756f0dee099e071d', name: "end" })), showCollapsedIndicator && (h("button", { key: 'f9b87383ec50f3dc9d0863879fa87366a1013781', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
-            } }, h("ion-icon", { key: '46d5821fee23327a23a4dfd7ad507ce551f7b00c', "aria-hidden": "true", icon: breadcrumbCollapsedIcon, lazy: false }))), showSeparator && (
+            } }, h("ion-icon", { key: '0d11ad830325fc6e614fc54577f50c400862690b', "aria-hidden": "true", icon: breadcrumbCollapsedIcon, lazy: false }))), showSeparator && (
         /**
          * Separators should not be announced by narrators.
          * We add aria-hidden on the span so that this applies
          * to any custom separators too.
          */
-        h("span", { key: '2520520d582b923c635548be4da74c138db38b46', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: 'e134f59f8fdc1d8602817a072adfc6f2a89885d7', name: "separator" }, theme === 'ios' || theme === 'ionic' ? (h("ion-icon", { icon: breadcrumbSeparatorIcon, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
+        h("span", { key: '7f167f93e1a46a8d6ae6de04c1dfc77cc0c1e7df', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: 'c75a176e0d2d5689470382b55dfcaac0299a6182', name: "separator" }, theme === 'ios' || theme === 'ionic' ? (h("ion-icon", { icon: breadcrumbSeparatorIcon, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
     }
     static get is() { return "ion-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -347,7 +347,7 @@ ion-ripple-effect {
   --padding-end: var(--token-space-0, var(--token-scale-0, 0px));
   --padding-bottom: var(--padding-top);
   --padding-start: var(--padding-end);
-  --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));
   position: relative;
 }
@@ -365,7 +365,7 @@ ion-ripple-effect {
 }
 
 :host(.button-clear) {
-  --color: var(--ion-color-primary-foreground, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
+  --color: var(--ion-color-primary-foreground, var(--token-text-primary, var(--token-semantics-primary-800, var(--token-primitives-blue-800, #0f54da))));
 }
 
 :host(.button-solid) {
@@ -381,7 +381,7 @@ ion-ripple-effect {
 
 :host(.button-outline) {
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-style: var(--token-border-style-solid, solid);
+  --border-style: solid;
   --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))));
   --background-focused: transparent;
   --background-hover: var(--ion-color-primary-subtle-shade, var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa))));
@@ -393,8 +393,8 @@ ion-ripple-effect {
 }
 
 :host(.button-outline.ion-color-warning) .button-native {
-  border-color: var(--ion-color-warning-foreground, var(--token-text-warning, var(--token-semantics-warning-1000, var(--token-primitives-yellow-1000, #704b02))));
-  color: var(--ion-color-warning-foreground, var(--token-text-warning, var(--token-semantics-warning-1000, var(--token-primitives-yellow-1000, #704b02))));
+  border-color: var(--ion-color-warning-foreground, var(--token-text-warning, var(--token-semantics-warning-1000, var(--token-primitives-yellow-1000, #925f00))));
+  color: var(--ion-color-warning-foreground, var(--token-text-warning, var(--token-semantics-warning-1000, var(--token-primitives-yellow-1000, #925f00))));
 }
 
 :host(.button-clear) {
@@ -402,7 +402,7 @@ ion-ripple-effect {
   --background-focused: transparent;
   --background-hover: var(--ion-color-primary-subtle-shade, var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa))));
   --background-hover-opacity: 1;
-  --color: var(--ion-color-primary-foreground, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
+  --color: var(--ion-color-primary-foreground, var(--token-text-primary, var(--token-semantics-primary-800, var(--token-primitives-blue-800, #0f54da))));
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
@@ -419,12 +419,11 @@ ion-ripple-effect {
 /* Small Button */
 :host(.button-small) {
   --padding-end: 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-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);
   min-width: var(--token-scale-1600, 64px);
   min-height: var(--token-scale-1000, 40px);
 }
@@ -432,12 +431,11 @@ ion-ripple-effect {
 /* Medium Button */
 :host(.button-medium) {
   --padding-end: var(--token-space-500, var(--token-scale-500, 20px));
+  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);
   min-width: var(--token-scale-1800, 72px);
   min-height: var(--token-scale-1200, 48px);
 }
@@ -445,12 +443,11 @@ ion-ripple-effect {
 /* Large Button */
 :host(.button-large) {
   --padding-end: var(--token-space-700, var(--token-scale-700, 28px));
+  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-500, 1.25rem);
   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);
   min-width: var(--token-scale-2000, 80px);
   min-height: var(--token-scale-1400, 56px);
 }
@@ -490,19 +487,19 @@ ion-ripple-effect {
 }
 
 :host(.button-soft) {
-  --border-radius: var(--token-soft-xs, var(--token-border-radius-200, var(--token-scale-200, 8px)));
+  --border-radius: var(--token-shape-soft-xs, 8px);
 }
 
 :host(.button-round) {
-  --border-radius: var(--token-round-xs, var(--token-border-radius-full, 999px));
+  --border-radius: var(--token-shape-round-xs, 999px);
 }
 
 :host(.button-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-focused) .button-native {
-  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);
   outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
 }
 
@@ -634,11 +631,10 @@ ion-ripple-effect {
 }
 
 :host(.in-datetime) {
+  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);
   min-height: var(--token-space-1200, var(--token-scale-1200, 48px));
 }

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

@@ -80,7 +80,7 @@
 }
 
 ::slotted(*) .button-clear {
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
   --background: transparent;
   --background-activated: transparent;
   --background-focused: transparent;

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

@@ -119,10 +119,10 @@ ion-ripple-effect {
 :host {
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-color: var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5));
-  --border-style: var(--token-border-style-solid, solid);
-  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
-  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  --border-color: var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));
+  --border-style: solid;
+  --border-radius: var(--token-shape-round-xl, 16px);
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
   min-width: var(--token-scale-2400, 96px);
   border: var(--border-width) var(--border-style) var(--border-color);
 }
@@ -132,13 +132,13 @@ ion-ripple-effect {
 }
 
 :host(.card-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(.card-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(.card-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);
 }

package/dist/collection/components/card-content/card-content.ionic.css

@@ -70,12 +70,11 @@
   padding-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
   padding-top: var(--token-space-400, var(--token-scale-400, 16px));
   padding-bottom: 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-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);
   display: flex;
   flex-direction: column;
   gap: var(--token-space-400, var(--token-scale-400, 16px));

package/dist/collection/components/card-subtitle/card-subtitle.ionic.css

@@ -134,11 +134,10 @@
  * convert to a unit other than $baselineUnit.
  */
 :host {
-  --color: var(--token-primitives-neutral-800, #626262);
+  --color: var(--token-primitives-neutral-800, #6c727a);
+  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-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);
 }

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

@@ -63,6 +63,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
@@ -74,7 +75,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;
@@ -137,16 +138,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 {
@@ -266,14 +290,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;
 }
 
@@ -283,18 +307,15 @@ input {
 
 :host {
   /**
-   * @prop --checkmark-height: Stroke height of the checkbox checkmark
-   *
    * @prop --focus-ring-color: Color of the focus ring
    * @prop --focus-ring-width: Width of the focus ring
    * @prop --focus-ring-offset: Offset of the focus ring
    */
   --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
-  --border-style: var(--token-border-style-solid, solid);
-  --border-color: var(--token-primitives-neutral-800, #626262);
-  --checkmark-width: var(--token-scale-400, 16px);
-  --checkmark-height: var(--checkmark-width);
-  --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
+  --border-style: solid;
+  --border-color: var(--token-primitives-neutral-800, #6c727a);
+  --checkmark-width: 3;
+  --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));
   --focus-ring-offset: var(--token-space-050, var(--token-scale-050, 2px));
   --size: var(--token-scale-600, 24px);
@@ -317,12 +338,9 @@ input {
   cursor: pointer;
   z-index: 1;
 }
-:host .native-wrapper {
-  position: relative;
-}
 
 .label-text-wrapper {
-  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
 :host(.in-item) .label-text-wrapper {
@@ -359,43 +377,27 @@ input {
 }
 
 .native-wrapper {
-  border-radius: var(--border-radius);
-  flex-shrink: 0;
   justify-content: 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;
 }
 
 .checkbox-icon {
-  width: var(--checkmark-width);
-  height: var(--checkmark-height);
-}
-
-.checkbox-icon path {
-  fill: var(--checkmark-color);
+  font-size: calc(var(--size) * 2 / 3);
 }
 
 .checkbox-bottom {
+  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);
 }
 
 .checkbox-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)));
 }
 
 .checkbox-bottom .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(.checkbox-label-placement-start) .label-text-wrapper {
@@ -455,19 +457,13 @@ input {
   --size: var(--token-scale-400, 16px);
 }
 
-:host(.checkbox-checked) .native-wrapper,
-:host(.checkbox-indeterminate) .native-wrapper {
-  border-color: var(--border-color-checked);
-  background: var(--checkbox-background-checked);
-}
-
 :host(.ion-invalid) {
-  --focus-ring-color: var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));
+  --focus-ring-color: var(--token-border-danger-default, var(--token-semantics-danger-600, var(--token-primitives-red-600, #ef5264)));
 }
 
 :host(.ion-invalid:not(.checkbox-checked)) .native-wrapper,
 :host(.ion-invalid:not(.checkbox-checked).checkbox-disabled) .native-wrapper {
-  border-color: var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));
+  border-color: var(--token-border-danger-default, var(--token-semantics-danger-600, var(--token-primitives-red-600, #ef5264)));
 }
 
 :host(.checkbox-disabled) .native-wrapper:after {
@@ -494,36 +490,32 @@ input {
 
 @media (any-hover: hover) {
   :host(:hover) .native-wrapper {
-    background-color: var(--token-primitives-neutral-100, #f3f3f3);
+    background-color: var(--token-primitives-neutral-100, #f6f7fa);
   }
   :host(:hover.checkbox-checked) .native-wrapper,
-  :host(:hover.checkbox-checked) .checkbox-icon,
-  :host(:hover.checkbox-indeterminate) .native-wrapper,
-  :host(:hover.checkbox-indeterminate) .checkbox-icon {
+  :host(:hover.checkbox-indeterminate) .native-wrapper {
     background-color: var(--token-semantics-primary-800, var(--token-primitives-blue-800, #0f54da));
   }
 }
 :host(.ion-focused:not(.checkbox-disabled)) .native-wrapper {
   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) .native-wrapper {
-  background-color: var(--token-bg-input-press, var(--token-primitives-neutral-200, #eae9e9));
+  background-color: var(--token-bg-input-press, var(--token-primitives-neutral-200, #ebeef2));
 }
 
 :host(.ion-activated.checkbox-checked) .native-wrapper,
-:host(.ion-activated.checkbox-checked) .checkbox-icon,
-:host(.ion-activated.checkbox-indeterminate) .native-wrapper,
-:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
+:host(.ion-activated.checkbox-indeterminate) .native-wrapper {
   background-color: var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)));
 }
 
 :host(.ion-activated.ion-invalid:not(.checkbox-checked)) {
-  background-color: var(--token-bg-input-press, var(--token-primitives-neutral-200, #eae9e9));
+  background-color: var(--token-bg-input-press, var(--token-primitives-neutral-200, #ebeef2));
 }
 :host(.ion-activated.ion-invalid:not(.checkbox-checked)) .native-wrapper {
-  border-color: var(--token-border-danger-press, var(--token-semantics-danger-1000, var(--token-primitives-red-1000, #761515)));
+  border-color: var(--token-border-danger-press, var(--token-semantics-danger-700, var(--token-primitives-red-700, #e0243a)));
 }
 
 :host(.checkbox-shape-soft) {

package/dist/collection/components/checkbox/checkbox.ios.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 {