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

BREAKING.md

@@ -18,6 +18,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 - [Components](#version-10x-components)
   - [Button](#version-10x-button)
   - [Card](#version-10x-card)
+  - [Checkbox](#version-10x-checkbox)
   - [Chip](#version-10x-chip)
   - [Datetime](#version-10x-datetime)
   - [Grid](#version-10x-grid)
@@ -63,6 +64,29 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   }
   ```
 
+<h4 id="version-10x-checkbox">Checkbox</h4>
+
+- The `container` CSS shadow part is now the element that wraps the checkmark instead of the `svg` element that draws it. The part still controls the checkbox's size, border, and background, so existing styles for those properties are unaffected.
+
+  SVG-specific properties such as `fill`, `stroke` and `stroke-width` no longer have any effect through `::part(container)` because `container` is no longer an SVG element. To set the color of the checkmark, use the `icon` part instead:
+
+  ```diff
+  - ion-checkbox::part(container) {
+  -   stroke: purple;
+  - }
+  + ion-checkbox::part(icon) {
+  +   color: purple;
+  + }
+  ```
+
+  The `--checkmark-color` CSS variable can also be used to set the checkmark color. Both `::part(icon)` and `--checkmark-color` apply to the default checkmark as well as to an icon set with the `checkboxCheckedIcon` or `checkboxIndeterminateIcon` global config options. In contrast, the `mark` part only applies to states that do not have a configured icon.
+
+  Setting `color` on the `container` part has no effect because the icon sets its own color.
+
+  To change the thickness of the default checkmark, use the `--checkmark-width` CSS variable or set `stroke-width` on the `mark` part. These apply to each state (`checked` and `indeterminate`) unless an icon is configured for that state. For example, when `checkboxCheckedIcon` is configured, these properties do not apply to the checked state but continue to apply to the indeterminate state. Similarly, when `checkboxIndeterminateIcon` is configured, they do not apply to the indeterminate state but continue to apply to the checked state.
+
+  For a configured Ionicon drawn with a stroke, set `--ionicon-stroke-width` on the `icon` part. For a configured SVG, set `stroke-width` on the `icon` part; this applies unless the SVG sets its own `stroke-width`.
+
 <h4 id="version-10x-chip">Chip</h4>
 
 - The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.

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

@@ -66,7 +66,6 @@
     "loader/"
   ],
   "dependencies": {
-    "@phosphor-icons/core": "^2.1.1",
     "@stencil/core": "^4.44.2",
     "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 accordionToggleIcon() {
+  /**
+   * 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(): string {
     // 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

@@ -308,15 +308,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
 // --------------------------------------------------
 
@@ -326,6 +317,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

@@ -650,13 +650,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 backButtonIcon() {
+  /**
+   * 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(): string {
     // 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);
   }
 
@@ -106,8 +103,8 @@ export class BackButton implements ComponentInterface, ButtonInterface {
     return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
   }
 
-  get hasIconOnly() {
-    return this.backButtonIcon && !this.backButtonText;
+  get hasIconOnly(): boolean {
+    return !!this.backButtonIcon && !this.backButtonText;
   }
 
   get rippleType() {

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 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);
+  /**
+   * 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(): string {
+    return config.get('breadcrumbCollapsedIcon', ellipsisHorizontal);
   }
 
-  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);
+  /**
+   * 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(): string {
+    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
@@ -18,7 +19,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;
@@ -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;
 }