@ionic/core 8.8.20-dev.11789504012.1a675914 → 8.8.20-dev.11790000033.12788d65

package/dist/collection/components/accordion/accordion.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import caretDownRegular from "@phosphor-icons/core/assets/regular/caret-down.svg";
 import { Host, h } from "@stencil/core";
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
@@ -364,19 +365,22 @@ export class Accordion {
             this.setAria(expanded);
         });
     }
-    /**
-     * Get the icon to use for the toggle 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 accordionToggleIcon() {
         // Return the icon if it is explicitly set
         if (this.toggleIcon != null) {
             return this.toggleIcon;
         }
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronDown,
+            ionic: caretDownRegular,
+            md: chevronDown,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
         // Return the configured accordion toggle icon or the default icon
-        return config.get('accordionToggleIcon', chevronDown);
+        return config.get('accordionToggleIcon', defaultIcon);
     }
     toggleExpanded() {
         const { accordionGroupEl, disabled, readonly, value, state } = this;
@@ -407,7 +411,7 @@ export class Accordion {
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
         this.setAria(expanded);
-        return (h(Host, { key: '2e516386263715b2843c0af02e7ac928df1da007', class: {
+        return (h(Host, { key: 'dc4f4369be66507b8b0f0e28a8ab73d0d11d89ca', class: {
                 [theme]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
@@ -420,7 +424,7 @@ export class Accordion {
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
                 'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
-            }, tabindex: disabled ? '-1' : undefined }, h("div", { key: 'd865a68388a1a7e6d594258a277a0b72a2565043', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '1a5b7987a7e2b4903bdf5575c10f2995bcbc7a64', name: "header" })), h("div", { key: 'dbba2ad70c192a08e73e490876ad57f35499c551', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '0183fb76b3a8356b0d1d3f5cd53dd77e1bc196f4', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'fa38df103feb66a412d7998e664f3c4818b20f75', name: "content" })))));
+            }, tabindex: disabled ? '-1' : undefined }, h("div", { key: '3e67b334a8b12eb337d2deae47b6a661cba41c74', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: 'ae7618fb460577c6c31995d8e842c1de16263985', name: "header" })), h("div", { key: '9fc9964f77b9344f763c9adf69ce0bc09534bc75', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '996cf517f866dc516e4ce488c647364e8b2726c8', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'b48b4bc14e8ea1ef04c3e5acebbdf6f7c543c4c7', name: "content" })))));
     }
     static get is() { return "ion-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import caretLeftRegular from "@phosphor-icons/core/assets/regular/caret-left.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
@@ -41,20 +42,20 @@ export class BackButton {
             this.defaultHref = config.get('backButtonDefaultHref');
         }
     }
-    /**
-     * Get the icon to use for the back button 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 backButtonIcon() {
         // Return the icon if it is explicitly set
         if (this.icon != null) {
             return this.icon;
         }
-        // Determine the theme and map to the default icon
+        // Determine the theme and map to default icons
         const theme = getIonTheme(this);
-        const defaultIcon = theme === 'ios' ? chevronBack : arrowBackSharp;
+        const defaultIcons = {
+            ios: chevronBack,
+            ionic: caretLeftRegular,
+            md: arrowBackSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
         // Return the configured back button icon or the default icon
         return config.get('backButtonIcon', defaultIcon);
     }
@@ -78,7 +79,7 @@ export class BackButton {
         const showBackButton = defaultHref !== undefined;
         const theme = getIonTheme(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { key: '3ca97664cddb7582c8344b79143b81a9fb7f167a', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '30cb7e566ef5182691373de93dbe694fb8cf72ed', onClick: this.onClick, class: createColorClasses(color, {
                 [theme]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
@@ -88,7 +89,7 @@ export class BackButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { key: '49ec4655d6fbec75fd2b6f70973f98896d9accfe', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '8d701f9933253edab3627adf1b4dae681993e901', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: 'd5064dc4e5a327335fd45f21567fc1188cfcb635', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: '9c6611126bc7df058cb4c5669ec35c2456568717', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), theme === 'md' && h("ion-ripple-effect", { key: '2a88e395bc178ff2d1d14fcb8def5d679cb2e527', type: this.rippleType }))));
+            }) }, h("button", { key: 'be59bfbfec6e6591afee4beff7f0527bdd432dab', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '9118e5a082f9092307d80a53307f768461403928', class: "button-inner" }, backButtonIcon && (h("ion-icon", { key: '14193bf4f0edd1ba45f83ab664ddbe08f541997f', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { key: 'a83a8cdb8a95d67ff997c1e366a46c7ec2f7b9fc', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), theme === 'md' && h("ion-ripple-effect", { key: '11c5cc4b5eb3fc19db6e094d549546200ba2b90e', type: this.rippleType }))));
     }
     static get is() { return "ion-back-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,8 @@
 /*!
  * (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";
@@ -48,23 +50,31 @@ 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', ellipsisHorizontal);
+        return config.get('breadcrumbCollapsedIcon', defaultIcon);
     }
-    /**
-     * 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', chevronForwardOutline);
+        return config.get('breadcrumbSeparatorIcon', defaultIcon);
     }
     isClickable() {
         return this.href !== undefined;
@@ -88,7 +98,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: '6b586bce50f2956edf0acd8506381b2cb14875f7', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'eb02645656f4ee3752aa9f6c4dee2e57a8ee7527', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
@@ -98,15 +108,15 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, Object.assign({ key: '5125505691163148ed2289355d5a2be93db7639d' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: 'c11682664ec3ad64f3e59a47f06cf5273b09fa5a', name: "start" }), h("slot", { key: 'eecb817103602a7c5d58f42dd4a1562333b0eabd' }), h("slot", { key: 'b9e050d01d0ba8491d64a670c151a2444be4c6b0', name: "end" })), showCollapsedIndicator && (h("button", { key: '72e49a761f43645987cf0adabd0698c724e87ce1', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, Object.assign({ 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: {
                 'breadcrumbs-collapsed-indicator': true,
-            } }, h("ion-icon", { key: '8efee3f1675165e1bc92c57aef93aa74b53374cc', "aria-hidden": "true", icon: breadcrumbCollapsedIcon, lazy: false }))), showSeparator && (
+            } }, h("ion-icon", { key: '46d5821fee23327a23a4dfd7ad507ce551f7b00c', "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: '17bf73869ccb702646afdc3498ef180aa3713b19', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, h("slot", { key: '13ac39a16f7fe90aaa65165b274ade80e01180b4', name: "separator" }, theme === 'ios' || theme === 'ionic' ? (h("ion-icon", { icon: breadcrumbSeparatorIcon, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
+        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, "/")))))));
     }
     static get is() { return "ion-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -137,40 +137,16 @@ 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 {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: var(--checkmark-width);
+  opacity: 0;
 }
 
 .checkbox-bottom {
@@ -290,14 +266,14 @@ input {
   display: block;
 }
 
-:host(.checkbox-checked) .native-wrapper,
-:host(.checkbox-indeterminate) .native-wrapper {
+:host(.checkbox-checked) .checkbox-icon,
+:host(.checkbox-indeterminate) .checkbox-icon {
   border-color: var(--border-color-checked);
   background: var(--checkbox-background-checked);
 }
 
-:host(.checkbox-checked) .checkbox-icon,
-:host(.checkbox-indeterminate) .checkbox-icon {
+:host(.checkbox-checked) .checkbox-icon path,
+:host(.checkbox-indeterminate) .checkbox-icon path {
   opacity: 1;
 }
 
@@ -307,6 +283,8 @@ 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
@@ -314,7 +292,8 @@ input {
   --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: 3;
+  --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));
   --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));
@@ -338,6 +317,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));
@@ -377,11 +359,26 @@ 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 {
-  font-size: calc(var(--size) * 2 / 3);
+  width: var(--checkmark-width);
+  height: var(--checkmark-height);
+}
+
+.checkbox-icon path {
+  fill: var(--checkmark-color);
 }
 
 .checkbox-bottom {
@@ -458,6 +455,12 @@ 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)));
 }
@@ -494,7 +497,9 @@ input {
     background-color: var(--token-primitives-neutral-100, #f3f3f3);
   }
   :host(:hover.checkbox-checked) .native-wrapper,
-  :host(:hover.checkbox-indeterminate) .native-wrapper {
+  :host(:hover.checkbox-checked) .checkbox-icon,
+  :host(:hover.checkbox-indeterminate) .native-wrapper,
+  :host(:hover.checkbox-indeterminate) .checkbox-icon {
     background-color: var(--token-semantics-primary-800, var(--token-primitives-blue-800, #0f54da));
   }
 }
@@ -508,7 +513,9 @@ input {
 }
 
 :host(.ion-activated.checkbox-checked) .native-wrapper,
-:host(.ion-activated.checkbox-indeterminate) .native-wrapper {
+:host(.ion-activated.checkbox-checked) .checkbox-icon,
+:host(.ion-activated.checkbox-indeterminate) .native-wrapper,
+:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
   background-color: var(--token-bg-primary-base-press, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)));
 }
 

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

@@ -220,40 +220,16 @@ 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 {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: var(--checkmark-width);
+  opacity: 0;
 }
 
 .checkbox-bottom {
@@ -373,14 +349,14 @@ input {
   display: block;
 }
 
-:host(.checkbox-checked) .native-wrapper,
-:host(.checkbox-indeterminate) .native-wrapper {
+:host(.checkbox-checked) .checkbox-icon,
+:host(.checkbox-indeterminate) .checkbox-icon {
   border-color: var(--border-color-checked);
   background: var(--checkbox-background-checked);
 }
 
-:host(.checkbox-checked) .checkbox-icon,
-:host(.checkbox-indeterminate) .checkbox-icon {
+:host(.checkbox-checked) .checkbox-icon path,
+:host(.checkbox-indeterminate) .checkbox-icon path {
   opacity: 1;
 }
 
@@ -405,6 +381,10 @@ input {
   --checkmark-color: var(--ion-color-contrast);
 }
 
+.native-wrapper {
+  position: relative;
+}
+
 :host(.ion-focused) .native-wrapper::after {
   border-radius: 50%;
   display: block;
@@ -435,7 +415,21 @@ input {
 }
 
 .checkbox-icon {
-  font-size: calc(var(--size) - 2 * var(--border-width));
+  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);
 }
 
 .checkbox-bottom {

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

@@ -5,7 +5,6 @@ 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.
@@ -15,8 +14,7 @@ import { getIonTheme } from "../../global/ionic-global";
  *
  * @part container - The container for the checkbox mark.
  * @part label - The label text describing the checkbox.
- * @part icon - The icon that displays the checkmark.
- * @part mark - The checkmark used to indicate the checked state. Only applies when no icon is set in the config.
+ * @part mark - The checkmark used to indicate the checked state.
  * @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,20 +187,6 @@ 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) {
@@ -232,14 +216,13 @@ export class Checkbox {
     render() {
         const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, shape, size, } = this;
         const theme = getIonTheme(this);
-        const markIcon = indeterminate ? this.checkboxIndeterminateIcon : this.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: 'c1eda757784c401a112edfc02c24e89a122fed4a', 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: '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, {
                 [theme]: true,
                 'in-item': inItem,
                 'checkbox-checked': checked,
@@ -254,16 +237,23 @@ export class Checkbox {
                 [`checkbox-label-placement-${labelPlacement}`]: true,
                 [`checkbox-size-${size}`]: size !== undefined,
                 [`checkbox-shape-${shape}`]: true,
-            }) }, h("label", { key: '7d0ef2a71eeb2f6f49b506cf4e9e9917d70cecf5', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '676b7c47f3f8b971fd3c944381fa5c666c848817', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: 'e1e8083fc65c6708c4a9f918a05fe619b0397679', class: {
+            }) }, h("label", { key: '97aebc716e0ab1ef850620011a4e65f6318fca2c', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '47d3d3c93438cf3a135c162893ed502af8914a75', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '70935ad2274e5b3f4973cda326abca237aa302f9', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '22c909d61b4e8c14826818ae8329a45f77d5b414' }), this.renderHintText()), h("div", { key: 'f13a5f97d12d3b7753bf3734dac0ad70ad396c2b', class: "native-wrapper", part: "container" }, h("ion-icon", { key: '5976bb2ecf452a2a75412c667f1df7fc678d1179', class: "checkbox-icon", icon: markIcon, part: "icon", "aria-hidden": "true" }, h("svg", { key: '6f9306fdb6e3b332eb689dc8be329bc7679a492b', viewBox: "0 0 24 24" }, path))))));
+            }, 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)))));
     }
     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' || theme === 'ionic') {
+        if (theme === 'md') {
             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

@@ -220,40 +220,16 @@ 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 {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: var(--checkmark-width);
+  opacity: 0;
 }
 
 .checkbox-bottom {
@@ -373,14 +349,14 @@ input {
   display: block;
 }
 
-:host(.checkbox-checked) .native-wrapper,
-:host(.checkbox-indeterminate) .native-wrapper {
+:host(.checkbox-checked) .checkbox-icon,
+:host(.checkbox-indeterminate) .checkbox-icon {
   border-color: var(--border-color-checked);
   background: var(--checkbox-background-checked);
 }
 
-:host(.checkbox-checked) .checkbox-icon,
-:host(.checkbox-indeterminate) .checkbox-icon {
+:host(.checkbox-checked) .checkbox-icon path,
+:host(.checkbox-indeterminate) .checkbox-icon path {
   opacity: 1;
 }
 
@@ -405,6 +381,10 @@ input {
   --checkmark-color: var(--ion-color-contrast);
 }
 
+.native-wrapper {
+  position: relative;
+}
+
 :host(.ion-focused) .native-wrapper::after {
   border-radius: 50%;
   display: block;
@@ -435,7 +415,21 @@ input {
 }
 
 .checkbox-icon {
-  font-size: calc(var(--size) - 2 * var(--border-width));
+  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);
 }
 
 .checkbox-bottom {

package/dist/collection/components/chip/chip.js

@@ -56,7 +56,7 @@ export class Chip {
         const theme = getIonTheme(this);
         const size = this.getSize();
         const shape = this.getShape();
-        return (h(Host, { key: 'b6ac6f314aca3dae06b9a6b38468d82807f7f883', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'ec10528929fb43fcae7d2d7c9cc52bcf67d9823e', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [theme]: true,
                 [`chip-${shape}`]: true,
                 'chip-outline': this.outline,
@@ -65,7 +65,7 @@ export class Chip {
                 'ion-focusable': !this.disabled,
                 [`chip-${size}`]: size !== undefined,
                 [`chip-${hue}`]: hue !== undefined,
-            }) }, h("slot", { key: '0da90695097e5403e6e540f592e67240fb6c4a14' }), theme === 'md' && h("ion-ripple-effect", { key: '764b2a54d45120578a178054ea44b6980e3f63e9' })));
+            }) }, h("slot", { key: 'c88e9a90b9de62fded05d4323c5b4f86f2f3e96d' }), theme === 'md' && h("ion-ripple-effect", { key: 'f0395345064db0e02cbc886386b07d0d01cb02be' })));
     }
     static get is() { return "ion-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/col/col.js

@@ -81,12 +81,12 @@ export class Col {
         const colSize = this.getSizeClass();
         const colOrder = this.getOrderClass();
         const colOffset = this.getOffsetClass();
-        return (h(Host, { key: '3a56b2a9b995148f709dc3c0fe862ea6d1a273d8', class: {
+        return (h(Host, { key: '7fc98e15bd75e9c22fe7eaf71f2f49f5d987613a', class: {
                 [theme]: true,
                 [`${colSize}`]: colSize !== undefined,
                 [`${colOrder}`]: colOrder !== undefined,
                 [`${colOffset}`]: colOffset !== undefined,
-            } }, h("slot", { key: '1b7336c386b92376cd287ebf85b10d245f5c9ab4' })));
+            } }, h("slot", { key: '6ed04a2c2bcdb0400354368c568e58414a60fc39' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }