@ionic/core 9.0.3-dev.11788456135.1ab1d6cd → 9.0.3-dev.11790016799.1e269b7a

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 {

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/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"; }

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

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes, hasShadowDom } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
@@ -133,22 +132,18 @@ export class FabButton {
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
+    /**
+     * Get the icon to use for the close 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 fabButtonCloseIcon() {
         // Return the icon if it is explicitly set
         if (this.closeIcon != null) {
             return this.closeIcon;
         }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: close,
-            ionic: xRegular,
-            md: close,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured fab button close icon or the default icon
-        return config.get('fabButtonCloseIcon', defaultIcon);
+        return config.get('fabButtonCloseIcon', close);
     }
     render() {
         const { el, disabled, fabButtonCloseIcon, color, href, activated, show, translucent, size, inheritedAttributes, type, } = this;
@@ -170,7 +165,7 @@ export class FabButton {
         if (type !== 'button') {
             this.renderHiddenButton();
         }
-        return (h(Host, { key: 'af84019ef7cee19ca5578a9a274d3890da83bf83', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'fc2e7284b76590aa65e45b8251f7c7776e11f0dc', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -181,7 +176,7 @@ export class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, { key: '90b4b17993b3feab7194790c4497d0fd9860e01a', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: 'a6d2cf73b627ead797c8efa82e0b7cd6aa845603', "aria-hidden": "true", icon: fabButtonCloseIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '3f08bc8aa15bcb72ecf11a81b50e2c79ab4d841a', class: "button-inner" }, h("slot", { key: 'c5c5921194b2c6b81dab2f9338298ab1c31367c5' })), theme === 'md' && h("ion-ripple-effect", { key: '78952651d0662304bd74ab8dc4cd09eb2d5ed455' }))));
+            }) }, h(TagType, { key: '21598ba114ac64d8f98bc0f16934678166def17e', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: '673609441ffe18d6e8f4b2dc2de37eda7efdda75', "aria-hidden": "true", icon: fabButtonCloseIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '13b3dac62a91549431d227676bbe8a0a0fc93665', class: "button-inner" }, h("slot", { key: 'aefbe96ef9790dd85002432d7bb5a70f17e52a15' })), theme === 'md' && h("ion-ripple-effect", { key: '6888c7374b87c08a9a04009549026ae7365f4b92' }))));
     }
     static get is() { return "ion-fab-button"; }
     static get encapsulation() { return "shadow"; }