feat(config): add icon options and align ionic theme with md defaults

core/api.txt

@@ -565,6 +565,7 @@ ion-checkbox,css-prop,--border-style,md
 ion-checkbox,css-prop,--border-width,ionic
 ion-checkbox,css-prop,--border-width,ios
 ion-checkbox,css-prop,--border-width,md
+ion-checkbox,css-prop,--checkbox-background,ionic
 ion-checkbox,css-prop,--checkbox-background,ios
 ion-checkbox,css-prop,--checkbox-background,md
 ion-checkbox,css-prop,--checkbox-background-checked,ionic
@@ -573,7 +574,6 @@ ion-checkbox,css-prop,--checkbox-background-checked,md
 ion-checkbox,css-prop,--checkmark-color,ionic
 ion-checkbox,css-prop,--checkmark-color,ios
 ion-checkbox,css-prop,--checkmark-color,md
-ion-checkbox,css-prop,--checkmark-height,ionic
 ion-checkbox,css-prop,--checkmark-width,ionic
 ion-checkbox,css-prop,--checkmark-width,ios
 ion-checkbox,css-prop,--checkmark-width,md
@@ -589,6 +589,7 @@ ion-checkbox,css-prop,--transition,md
 ion-checkbox,part,container
 ion-checkbox,part,error-text
 ion-checkbox,part,helper-text
+ion-checkbox,part,icon
 ion-checkbox,part,label
 ion-checkbox,part,mark
 ion-checkbox,part,supporting-text

core/package.json

@@ -34,7 +34,6 @@
     "loader/"
   ],
   "dependencies": {
-    "@phosphor-icons/core": "^2.1.1",
     "@stencil/core": "4.43.5",
     "ionicons": "^8.1.0",
     "tslib": "^2.1.0"

core/src/components/accordion/accordion.tsx

@@ -1,4 +1,3 @@
-import caretDownRegular from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from '@utils/helpers';
@@ -242,25 +241,19 @@ export class Accordion implements ComponentInterface {
     button.setAttribute('aria-expanded', `${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', defaultIcon);
+    return config.get('accordionToggleIcon', chevronDown);
   }
 
   private slotToggleIcon = () => {

core/src/components/alert/alert.ionic.scss

@@ -316,15 +316,6 @@
   @include globals.position-horizontal(null, globals.$ion-space-400);
 }
 
-.alert-checkbox-inner {
-  width: globals.$ion-scale-400;
-  height: globals.$ion-scale-400;
-}
-
-.alert-checkbox-inner path {
-  fill: globals.$ion-bg-surface-default;
-}
-
 // Ionic Alert Checkbox Checkmark: Checked
 // --------------------------------------------------
 
@@ -334,6 +325,19 @@
   background-color: globals.$ion-bg-primary-base-default;
 }
 
+// The checkmark is a box clipped to the outline of the mark ion-checkbox
+// draws. It represents a two-segment polyline with a 3-unit stroke in a
+// 24-unit box. The polygon points trace the outer and inner edges of that
+// stroke and are derived from the checkmark's geometry.
+[aria-checked="true"] .alert-checkbox-inner {
+  width: globals.$ion-scale-400;
+  height: globals.$ion-scale-400;
+
+  background-color: globals.$ion-bg-surface-default;
+
+  clip-path: polygon(2.79% 58.21%, 33.75% 89.17%, 99.38% 23.54%, 90.54% 14.71%, 33.75% 71.49%, 11.63% 49.37%);
+}
+
 // Ionic Alert Button
 // --------------------------------------------------
 

core/src/components/alert/alert.tsx

@@ -634,13 +634,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
                 }}
               >
                 <div class="alert-checkbox-icon">
-                  {theme === 'ionic' ? (
-                    <svg class="alert-checkbox-inner" viewBox="0 0 256 256" aria-hidden="true">
-                      <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" />
-                    </svg>
-                  ) : (
-                    <div class="alert-checkbox-inner"></div>
-                  )}
+                  <div class="alert-checkbox-inner"></div>
                 </div>
                 {renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')}
               </div>

core/src/components/back-button/back-button.tsx

@@ -1,4 +1,3 @@
-import caretLeftRegular from '@phosphor-icons/core/assets/regular/caret-left.svg';
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 import type { ButtonInterface } from '@utils/element-interface';
@@ -80,24 +79,22 @@ export class BackButton implements ComponentInterface, ButtonInterface {
     }
   }
 
+  /**
+   * 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 default icons
+    // Determine the theme and map to the default icon
     const theme = getIonTheme(this);
-    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;
+    const defaultIcon = theme === 'ios' ? chevronBack : arrowBackSharp;
 
-    // Return the configured back button icon or the default icon
     return config.get('backButtonIcon', defaultIcon);
   }
 

core/src/components/breadcrumb/breadcrumb.tsx

@@ -1,5 +1,3 @@
-import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg';
-import dotsThreeRegular from '@phosphor-icons/core/assets/regular/dots-three.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 import type { Attributes } from '@utils/helpers';
@@ -135,36 +133,22 @@ export class Breadcrumb implements ComponentInterface {
     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);
   }
 
   private isClickable(): boolean {

core/src/components/checkbox/checkbox.common.scss

@@ -7,6 +7,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
@@ -97,17 +98,52 @@ input {
 }
 
 .native-wrapper {
+  @include mixins.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;
 }
 
+// Checkbox Icon
+// ----------------------------------------------------------------
+
+/**
+ * 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 Content
@@ -247,15 +283,15 @@ input {
 // Checked / Indeterminate Checkbox
 // ---------------------------------------------
 
-: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;
 }