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

package/dist/collection/components/content/content.js

@@ -422,7 +422,7 @@ export class Content {
         const forceOverscroll = this.shouldForceOverscroll(mode);
         const transitionShadow = theme === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: '6be663a1c94186ab306827797e0743d936616b8f', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, Object.assign({ key: '8c7f646f58e7c38fb6d8661b1629b847a16753fb', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [theme]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
@@ -431,12 +431,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '237014db6e83ca2651eed9968b2d909af3658d14', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: 'cafc39be73fc71223f57d283b46c94ddb5605ab3', class: {
+            } }, inheritedAttributes), h("div", { key: '2b0505c3fdf5c92938b8419c0f57f8d999aec6b3', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '6b769596e491dea1d3618551497fde9364afdeda', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: 'b93929f7d6d8512a042892532f58b5fbbafec449' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: 'ba36c8468681d028352415039d2cb2a750f2638f' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/datetime/datetime.js

@@ -1,6 +1,8 @@
 /*!
  * (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";
@@ -1751,43 +1753,73 @@ export class Datetime {
     }
     /**
      * Get the icon to use for the next icon.
-     * Use the icon set in the config.
+     * Otherwise, 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', chevronForward);
+        return config.get('datetimeNextIcon', defaultIcon);
     }
     /**
      * Get the icon to use for the previous icon.
-     * Use the icon set in the config.
+     * Otherwise, 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', chevronBack);
+        return config.get('datetimePreviousIcon', defaultIcon);
     }
     /**
      * Get the icon to use for the show month and year icon.
-     * Use the icon set in the config.
+     * Otherwise, 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 the default icon
+        // Determine the theme and map to default icons
         const theme = getIonTheme(this);
-        const defaultIcon = theme === 'ios' ? chevronForward : caretDownSharp;
+        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
         return config.get('datetimeCollapsedIcon', defaultIcon);
     }
     /**
      * Get the icon to use for the hide month and year icon.
-     * Use the icon set in the config.
+     * Otherwise, 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 the default icon
+        // Determine the theme and map to default icons
         const theme = getIonTheme(this);
-        const defaultIcon = theme === 'ios' ? chevronDown : caretUpSharp;
+        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
         return config.get('datetimeExpandedIcon', defaultIcon);
     }
@@ -1800,7 +1832,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: '81d6d431595fc287861af22aff9cad3b94f4ce97', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '04fb1740b1d722d20cdbb32b19d9a3b7d3334db0', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [theme]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1810,7 +1842,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: 'a5043ea9c7cabb5333edf82c8563fac2f6488086', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
+            })) }, h("div", { key: '0cbb85b4c71e521c81b37a98da0123a1c3a15fac', 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-button/datetime-button.js

@@ -343,11 +343,11 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '5324999adc34e2f34aae2825427c28130bc399b4', class: createColorClasses(color, {
+        return (h(Host, { key: '8cdd9935131b68d84ac601f78d5967383eaaf25e', class: createColorClasses(color, {
                 [theme]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: '565c74efa16fc02a70a6f1ef6b073eb143ab9f07', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'c487bd5ae42a089ce22a7cb1bb67016910e24bd0', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: 'c871fee2350e3207efc2338d229b809f8b44dca9' }))), timeText && (h("button", { key: '7acf19c3d1446133107a622851dfff2d6088cb8d', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '6091b9d32d423ce438605005077087fc009fd8e7', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: 'b71f93aa14aa0b7bdfe9ad4ca9bcb90880d23b0e' })))));
+            }) }, dateText && (h("button", { key: 'dfd6d83cdca3673383a21e213dae825b5643600d', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'f7cabbcd6474c66283fb0681a3d75f36a88750d6', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: '3aace053cea80aa3bb30a06c8e1f1d18650d8796' }))), timeText && (h("button", { key: 'c8fac088f4e6ee2486110a59574bd95cd3be870b', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '195df2d17f6bd28c9cf6ad657e55948472544985', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: 'aa1a1f5ea120558174b166c2b2d5fa970ca00d2c' })))));
     }
     static get is() { return "ion-datetime-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/divider/divider.js

@@ -25,11 +25,11 @@ export class Divider {
     render() {
         const { inset, spacing } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '90772ad228282d0be4f9f18fcd14bc7af0f52e0e', class: {
+        return (h(Host, { key: '6cc1572a93abaf49be7e27348bf513cb7ee24bff', class: {
                 [theme]: true,
                 [`divider-spacing-${spacing}`]: spacing !== undefined,
                 [`divider-inset`]: inset,
-            } }, h("hr", { key: 'e70ea44fa8e6af6156c19a60302f4e9785b74dae' })));
+            } }, h("hr", { key: '19e4cef3f90d92b56ae0bece15dbdcfbf18d72d9' })));
     }
     static get is() { return "ion-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fab/fab.js

@@ -58,12 +58,12 @@ export class Fab {
     render() {
         const { horizontal, vertical, edge } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'fde83d0b3abd9f0315405f1212202fcc2ee939c3', class: {
+        return (h(Host, { key: '569b07978a63756169d050f3b67368cecf26dd98', class: {
                 [theme]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, h("slot", { key: 'aa393e8a368a4c3aef9ac1f8f38bdfca3b0cbc74' })));
+            } }, h("slot", { key: 'cd10d4baa1c2e8c2dcfefe66bdb7ffb8262f8e17' })));
     }
     static get is() { return "ion-fab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,7 @@
 /*!
  * (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";
@@ -132,19 +133,22 @@ 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', close);
+        return config.get('fabButtonCloseIcon', defaultIcon);
     }
     render() {
         const { el, disabled, fabButtonCloseIcon, color, href, activated, show, translucent, size, inheritedAttributes, type, } = this;
@@ -166,7 +170,7 @@ export class FabButton {
         if (type !== 'button') {
             this.renderHiddenButton();
         }
-        return (h(Host, { key: '6cbdca34ede5d2ab6d9453f8453e608e596122f6', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'af84019ef7cee19ca5578a9a274d3890da83bf83', 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,
@@ -177,7 +181,7 @@ export class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({ key: '7e660c3401d3e42ba9b11784cf8c30a6ef3e79ed' }, 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: 'eb8fedfd907fe3f2fb94382891ac399a34e19510', "aria-hidden": "true", icon: fabButtonCloseIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '3ed25f178824632c99714c2c406b64ffa4358367', class: "button-inner" }, h("slot", { key: '27084c351359bb5151059091615c559f1d01df93' })), theme === 'md' && h("ion-ripple-effect", { key: '44c780a6554411d89cc213699b14aec8173ec76f' }))));
+            }) }, h(TagType, Object.assign({ 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' }))));
     }
     static get is() { return "ion-fab-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fab-list/fab-list.js

@@ -35,11 +35,11 @@ export class FabList {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '764dbc440379e7333215c2b69e177d4a7254a899', class: {
+        return (h(Host, { key: 'a9b498b07b2082107cbeef3259bdd3cff429c1ac', class: {
                 [theme]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: '9ea03acea78febe1b379904cef8978bbebcb57cd' })));
+            } }, h("slot", { key: '6e993eab68de44c0bc3396fd4871c3005274a9f5' })));
     }
     static get is() { return "ion-fab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer.js

@@ -167,7 +167,7 @@ export class Footer {
         const hasFade = effect === 'fade' && !isModeRestricted;
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: 'a968cbaa37aa5f66f852b393d17a5617892d3708', role: "contentinfo", class: {
+        return (h(Host, { key: 'a0777b4a639d22e15374879f018efcf589e756f8', role: "contentinfo", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`footer-${theme}`]: true,
@@ -176,7 +176,7 @@ export class Footer {
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 'footer-collapse-fade': hasFade,
                 'footer-scroll-effect-hide': hasHide,
-            } }, theme === 'ios' && translucent && h("div", { key: '5116db55a74d2a738a00c177d797dc03146ea129', class: "footer-background" }), h("slot", { key: 'b61dd28630507aa01c047e119bbc367d26c5be93' })));
+            } }, theme === 'ios' && translucent && h("div", { key: 'd78b46870cbf11c95b066d649c04ec398b66e614', class: "footer-background" }), h("slot", { key: '9dc34787cd29597fe1b1198db317602014ac1483' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/gallery/gallery.js

@@ -536,11 +536,11 @@ export class Gallery {
         const { layout } = this;
         const order = this.getOrder();
         const theme = getIonTheme(this);
-        return (h(Host, { key: '17e0acf09db810e8635b4965faab99da4e675f31', class: {
+        return (h(Host, { key: '4a0a9cdd0da106ac0bd2c188a4c6612edab43b33', class: {
                 [theme]: true,
                 [`gallery-layout-${layout}`]: true,
                 [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
-            } }, h("slot", { key: 'e31f2a92f22e8319011c1d2ceed4a47f733dc96b', onSlotchange: this.onSlotChange })));
+            } }, h("slot", { key: 'dc6414ce9762ad7daaedc1583db35e0613a76e11', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "ion-gallery"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gallery-item/gallery-item.js

@@ -49,10 +49,10 @@ export class GalleryItem {
     render() {
         const { galleryLayout } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'eccce38103a1fca6cd50f7ad1111d0718699a834', class: {
+        return (h(Host, { key: '989b13983917f237604ab2d18456ceef140a7f8c', class: {
                 [theme]: true,
                 [`in-gallery-layout-${galleryLayout}`]: galleryLayout != undefined,
-            } }, h("slot", { key: '4dcc6d4ac94c47b1e5c510e4e365fb1e17e7087f', onSlotchange: this.onSlotChange })));
+            } }, h("slot", { key: 'e4cc9398e55cc1bb19654c8f954eed1edab2e38a', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "ion-gallery-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/grid.js

@@ -16,10 +16,10 @@ export class Grid {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '8211149ce14da893b47d7fb6e1f0bc194dca8490', class: {
+        return (h(Host, { key: 'e3320fc2fc5391d26898cc119505cd3be30dd48b', class: {
                 [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '080ef8c22898ddba8b001282778a78ed54f1e36f' })));
+            } }, h("slot", { key: '2000e6b336c294aadf4585269c301d734d2fe478' })));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -242,9 +242,14 @@ ion-toolbar + ion-toolbar {
     top: 0;
     bottom: 0;
     position: absolute;
-    backdrop-filter: saturate(180%) blur(var(--token-scale-100, 4px));
+    backdrop-filter: blur(var(--token-scale-1600, 64px));
+    mask-image: linear-gradient(to bottom, #000 32.5%, transparent 91%);
   }
   .header-translucent-ionic ion-toolbar {
-    --opacity: 0.7;
+    --background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0.1)
+    );
   }
 }

package/dist/collection/components/header/header.js

@@ -235,7 +235,7 @@ export class Header {
         const isHiddenCondense = effect === 'condense' && !hasCondense;
         // banner role must be at top level, so remove role if inside a menu
         const roleType = isHiddenCondense ? 'none' : getRoleType(hostContext('ion-menu', this.el));
-        return (h(Host, Object.assign({ key: '41cc94124ed8dfb413deecfd3369facbbbd91096', role: roleType, class: {
+        return (h(Host, Object.assign({ key: '09f60ca014bb7b3a85d3c0a94e7989d5dbc43f46', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -246,7 +246,7 @@ export class Header {
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
                 'header-scroll-effect-hide': hasHide,
-            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'bbf8d7571a1c1f07ddd03d806218b26a4b32e2c3', class: "header-background" }), h("slot", { key: '84cad2cdebcdc2902b7a19042a83d8c56a19612d' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'fd5ff245ae0166e5e1d50936cacc98c90625db48', class: "header-background" }), h("slot", { key: '1baa31af87b9eb6406a21073ec65afa191dfbb3d' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/img/img.js

@@ -80,9 +80,9 @@ export class Img {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f6f8d76f7019338f9b07ce9738fdf9b15b0f3e9f', class: {
+        return (h(Host, { key: 'ba84621055567b2a35387709d9d89b97ad853274', class: {
                 [theme]: true,
-            } }, h("img", { key: '0e571771fdf3008bd83588e1924d4f6a91e0ede8', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+            } }, h("img", { key: '9d6118bbf69e2cccbb0603802c03b9a0d101e2c3', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     static get is() { return "ion-img"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/infinite-scroll/infinite-scroll.js

@@ -264,7 +264,7 @@ export class InfiniteScroll {
     render() {
         const theme = getIonTheme(this);
         const disabled = this.disabled;
-        return (h(Host, { key: '042d76f3640398a71ff23c84f8df3e25d30536a6', class: {
+        return (h(Host, { key: 'e3a3cde079dfd6f07e565eb462765df757cbb128', class: {
                 [theme]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js

@@ -29,11 +29,11 @@ export class InfiniteScrollContent {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '16d080c074d3b61ef884e4f7f5bd5f70aec1aeac', class: {
+        return (h(Host, { key: '263a27297159ced042f7552a1e14b8c6aba62fa8', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${theme}`]: true,
-            } }, h("div", { key: 'dc5fa503c8b90255e4c898ceb4d0ec59467ec5a5', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '091cbc7bfefca20130090a0269a8241a4e0f60a9', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '89e7fa70d0846207a8289a0ada9ea38c6fd6bfbc', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, h("div", { key: 'ee38d3c52df9dc5de186406b3087f20917a17252', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: 'e2348727f79a26f52f42641d4334a0ba9d4aa03e', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '41be6f2747f3af5f46c8738e2ef56083ecd95e99', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get is() { return "ion-infinite-scroll-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/input/input.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import xRegular from "@phosphor-icons/core/assets/regular/x.svg";
 import { Build, Host, forceUpdate, h, } from "@stencil/core";
 import { createClearButtonPressController, createNotchController, checkInvalidState } from "../../utils/forms/index";
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
@@ -579,9 +580,15 @@ export class Input {
         if (this.clearInputIcon != null) {
             return this.clearInputIcon;
         }
-        // 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' ? closeCircle : closeSharp;
+        const defaultIcons = {
+            ios: closeCircle,
+            ionic: xRegular,
+            md: closeSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
         // Return the configured input clear icon or the default icon
         return config.get('inputClearIcon', defaultIcon);
     }
@@ -615,7 +622,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'ae0920d7c93498741a5a066a5518f89f0c5b43c2', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f4009568b582fa080103dfb3f490595d5d7e9706', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -628,7 +635,7 @@ export class Input {
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, h("label", { key: 'b9fd3366b0fb429ebacc02a16ae27e29b1b485aa', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'eb02cef1a79a43f9fc8eb55bd7f3dcd4ca2e81d3', class: "native-wrapper", onClick: this.onLabelClick }, 
+            }) }, h("label", { key: 'a05502716afcf5d286f197131619b2bc57ba61e0', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'de4621c5eff21e26197f28a3e66217fcae449c75', class: "native-wrapper", onClick: this.onLabelClick }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -638,10 +645,10 @@ export class Input {
          * <label> element, ensuring that clicking the label text
          * focuses the input.
          */
-        theme === 'ionic' && h("div", { key: '1d35432c405e9d6fec8c4d411bf33e2950a02fb5', class: "input-outline" }), h("slot", { key: '627e09591ad9915b8b62b6ad8b8f359f1b010f01', name: "start" }), h("input", Object.assign({ key: '3bd035e03868067ea6dbba5c7a28383474f67ba3', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: 'dfec9566c3dd743dae34afe0de03aabb180a371e', "aria-label": "reset", type: "button", class: {
+        theme === 'ionic' && h("div", { key: '79e084dd8d7b0f530ea6518ee6f2ceb2ac099a8e', class: "input-outline" }), h("slot", { key: 'a4d0f148035c0f8afca5171139a05665d778bd07', name: "start" }), h("input", Object.assign({ key: 'f399d498b4c289571a114347c08c2ae16266ba6f', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: 'f6672256dfebae3bae35afd61d26bb705e8f268c', "aria-label": "reset", type: "button", class: {
                 'input-clear-icon': true,
                 'input-clear-button-pressed': this.isClearButtonPressed,
-            }, onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: this.clearTextInput }, h("ion-icon", { key: 'c736514c2df8f78196bd6426fd8d80d282c7aeb7', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: 'b6a250b6aaacb7a7ec0e09cc93a8b8dce973bb5b', name: "end" })), shouldRenderHighlight && h("div", { key: '989a73bb9210f3ef8084a265533063cdb4b8142c', class: "input-highlight" })), this.renderBottomContent()));
+            }, onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: this.clearTextInput }, h("ion-icon", { key: '999e8ec2b4c1614ce8f396b6a3e2ff26cb41dfbd', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: '2d0df6c7dd9dc17d8bd5e33b9eac1e11a25dd874', name: "end" })), shouldRenderHighlight && h("div", { key: 'f80b2c9fe4dfbb038e6c7b5a98e775cdd5ef6a21', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input-otp/input-otp.js

@@ -680,7 +680,7 @@ export class InputOTP {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
-        return (h(Host, { key: '67df3d392e0336b65363fff7cb0d093b7c535b3f', class: createColorClasses(color, {
+        return (h(Host, { key: '2bdd205b13281373a43d1a86a25df950a6f36ae1', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -688,10 +688,10 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", Object.assign({ key: 'b68d6bfae96d7f381ce66819d9cff0aa2b1d8a44', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper", part: "container" }, h("input", { class: "native-input", part: "native", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator", part: "separator" }))))), h("div", { key: '346450b2da262c6543e5dc2c0bbac27c541f4e18', class: {
+            }) }, h("div", Object.assign({ key: 'b82d198138929327cd5429bbeb482248935ae88d', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper", part: "container" }, h("input", { class: "native-input", part: "native", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator", part: "separator" }))))), h("div", { key: '0bb5444d4e653bb7310abec502f5b1d76e681c37', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            }, part: "description" }, h("slot", { key: '31ad8b75d9b2808b49f488e7ff2f235099e31b30' }))));
+            }, part: "description" }, h("slot", { key: 'f717bda988a6e9b97d67025c1d3163d838f27bb5' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-password-toggle/input-password-toggle.js

@@ -1,12 +1,14 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import eyeSlashRegular from "@phosphor-icons/core/assets/regular/eye-slash.svg";
+import eyeRegular from "@phosphor-icons/core/assets/regular/eye.svg";
 import { Host, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
 import { eyeOff, eye } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
@@ -54,48 +56,54 @@ export class InputPasswordToggle {
     disconnectedCallback() {
         this.inputElRef = null;
     }
-    /**
-     * Get the icon to use for the hide 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 inputPasswordHideIcon() {
         // Return the icon if it is explicitly set
         if (this.hideIcon != null) {
             return this.hideIcon;
         }
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: eyeOff,
+            ionic: eyeSlashRegular,
+            md: eyeOff,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
         // Return the configured input password hide icon or the default icon
-        return config.get('inputPasswordHideIcon', eyeOff);
+        return config.get('inputPasswordHideIcon', defaultIcon);
     }
-    /**
-     * Get the icon to use for the show 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 inputPasswordShowIcon() {
         // Return the icon if it is explicitly set
         if (this.showIcon != null) {
             return this.showIcon;
         }
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: eye,
+            ionic: eyeRegular,
+            md: eye,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
         // Return the configured input password show icon or the default icon
-        return config.get('inputPasswordShowIcon', eye);
+        return config.get('inputPasswordShowIcon', defaultIcon);
     }
     render() {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode(this);
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: '67dff695db35fe17927c62f88eb4d1b8a83cf9c1', class: createColorClasses(color, {
+        return (h(Host, { key: 'f11e3bf4d3255e003aec504e6dd3ee1e0caaf767', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: '75edb85478a55b76fc1b4b3ecb65d593dee0b3ee', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: '5bba43f7755857fd9347612bb906c389b60386b4', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '811e6f30fdc0e78fb23318823fc2bb2135647ca1', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'c0eb0e4e2f3e9553bfd519ff655064c9f62af406', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     static get is() { return "ion-input-password-toggle"; }
     static get encapsulation() { return "shadow"; }