@ionic/core 8.7.6-dev.11762427934.1558d09f → 8.7.6-dev.11762446926.123acdf7

package/dist/collection/components/card-content/card-content.ios.css

@@ -1,4 +1,4 @@
-ion-card-content {
+:host {
   position: relative;
 }
 
@@ -63,7 +63,7 @@ ion-card-content {
  *   }
  * }
  */
-ion-card-content {
+:host {
   display: block;
 }
 
@@ -128,7 +128,7 @@ ion-card-content {
  *   }
  * }
  */
-.card-content-ios {
+:host {
   -webkit-padding-start: 20px;
   padding-inline-start: 20px;
   -webkit-padding-end: 20px;
@@ -138,7 +138,8 @@ ion-card-content {
   font-size: 1rem;
   line-height: 1.4;
 }
-.card-content-ios h1 {
+
+::slotted(h1) {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -146,7 +147,8 @@ ion-card-content {
   font-size: 1.5rem;
   font-weight: normal;
 }
-.card-content-ios h2 {
+
+::slotted(h2) {
   margin-left: 0;
   margin-right: 0;
   margin-top: 2px;
@@ -154,10 +156,11 @@ ion-card-content {
   font-size: 1rem;
   font-weight: normal;
 }
-.card-content-ios h3,
-.card-content-ios h4,
-.card-content-ios h5,
-.card-content-ios h6 {
+
+::slotted(h3),
+::slotted(h4),
+::slotted(h5),
+::slotted(h6) {
   margin-left: 0;
   margin-right: 0;
   margin-top: 2px;
@@ -165,14 +168,11 @@ ion-card-content {
   font-size: 0.875rem;
   font-weight: normal;
 }
-.card-content-ios p {
+
+::slotted(p) {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 2px;
   font-size: 0.875rem;
-}
-
-ion-card-header + .card-content-ios {
-  padding-top: 0;
 }

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

@@ -10,13 +10,12 @@ import { getIonTheme } from "../../global/ionic-global";
 export class CardContent {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '9e0a23306b43bafffd82900a4da7e020fe45c04f', class: {
+        return (h(Host, { key: 'c01bc2a0212e1567b9654a4a79670ae636779764', class: {
                 [theme]: true,
-                // Used internally for styling
-                [`card-content-${theme}`]: true,
-            } }));
+            } }, h("slot", { key: 'beb72f0ed2c9924eb198a30bf6942a430b22d2a7' })));
     }
     static get is() { return "ion-card-content"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["card-content.ios.scss"],

package/dist/collection/components/card-content/card-content.md.css

@@ -1,4 +1,4 @@
-ion-card-content {
+:host {
   position: relative;
 }
 
@@ -63,7 +63,7 @@ ion-card-content {
  *   }
  * }
  */
-ion-card-content {
+:host {
   display: block;
 }
 
@@ -128,7 +128,7 @@ ion-card-content {
  *   }
  * }
  */
-.card-content-md {
+:host {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;
   -webkit-padding-end: 16px;
@@ -138,7 +138,8 @@ ion-card-content {
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.card-content-md h1 {
+
+::slotted(h1) {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -146,7 +147,8 @@ ion-card-content {
   font-size: 1.5rem;
   font-weight: normal;
 }
-.card-content-md h2 {
+
+::slotted(h2) {
   margin-left: 0;
   margin-right: 0;
   margin-top: 2px;
@@ -154,10 +156,11 @@ ion-card-content {
   font-size: 1rem;
   font-weight: normal;
 }
-.card-content-md h3,
-.card-content-md h4,
-.card-content-md h5,
-.card-content-md h6 {
+
+::slotted(h3),
+::slotted(h4),
+::slotted(h5),
+::slotted(h6) {
   margin-left: 0;
   margin-right: 0;
   margin-top: 2px;
@@ -165,7 +168,8 @@ ion-card-content {
   font-size: 0.875rem;
   font-weight: normal;
 }
-.card-content-md p {
+
+::slotted(p) {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -173,8 +177,4 @@ ion-card-content {
   font-size: 0.875rem;
   font-weight: normal;
   line-height: 1.5;
-}
-
-ion-card-header + .card-content-md {
-  padding-top: 0;
 }

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

@@ -19,11 +19,11 @@ export class CardHeader {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '2d5d1399c54960f0ccb114a6aaddd7ff16d3d091', class: createColorClasses(this.color, {
+        return (h(Host, { key: '5bc382eaec57b8b5805ebbe6e20975fef774863e', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [theme]: true,
-            }) }, h("slot", { key: 'aae02f8bcd357d741990353cc09dafcbce3139c5' })));
+            }) }, h("slot", { key: 'ffa37e23c45c9df26198b78c152252afa62c436e' })));
     }
     static get is() { return "ion-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-subtitle/card-subtitle.js

@@ -11,10 +11,10 @@ import { getIonTheme } from "../../global/ionic-global";
 export class CardSubtitle {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '91e326f598ccf4f2c6b3030cbdb69b065d9a8434', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        return (h(Host, { key: '2599d9c0cdbe4dc8d35a0013d9884b88cd96acfc', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [theme]: true,
-            }) }, h("slot", { key: 'b23b77de6877e1e1212bc624410ad4d0ce4727a9' })));
+            }) }, h("slot", { key: 'e786776c98e3a8b046777f185bb721fe6739c4cf' })));
     }
     static get is() { return "ion-card-subtitle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-title/card-title.js

@@ -11,10 +11,10 @@ import { getIonTheme } from "../../global/ionic-global";
 export class CardTitle {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'abcd0c06a8afd4b358442588a0171354c4b24b45', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        return (h(Host, { key: 'bf74b6498640e8207d9962453e5b351aad480547', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [theme]: true,
-            }) }, h("slot", { key: '8bf45935b7d625d379d7fb6e87fc9db7dddd15f9' })));
+            }) }, h("slot", { key: 'ffc0863719f4582028a1249fdcb78aa03b123d3f' })));
     }
     static get is() { return "ion-card-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -157,7 +157,7 @@ export class Checkbox {
         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: 'd6cffe4c15f84f1d80996b152e24a27410f67974', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
+        return (h(Host, { key: '15c8a86ab8e23dc44d09cfe4dee99a83dda87eca', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -170,10 +170,10 @@ export class Checkbox {
                 [`checkbox-label-placement-${labelPlacement}`]: true,
                 [`checkbox-size-${size}`]: size !== undefined,
                 [`checkbox-shape-${shape}`]: true,
-            }), onClick: this.onClick }, h("label", { key: '8718460c6d837cc85dd4abc499e272dd54c99123', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '5890992eab61c5559fc07fd2c8376ffe2f832d30', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '31393af0106b916dac2cee77fa481e3d5693b3b5', class: {
+            }), onClick: this.onClick }, h("label", { key: 'fe6f228d2e862b86e70a165baf268e972dcfb867', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'afdb90c4e051ff30ec20d5fecfce2771b28c1f20', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '136503a047d9b478203e06d126a52947fa595c53', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: 'd4fc48668b7b07e6d9f227bd1bf41482602fdbe6' }), this.renderHintText()), h("div", { key: '02758e75d81616e5ffa764b5e6d7f3137473a408', class: "native-wrapper" }, h("svg", { key: '770fd7b860b07cd8d174337b90e5d4d24d175268', 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: '35fa9cdb5be4097a05b4dfb4a7d02fb21ecca1fa' }), this.renderHintText()), h("div", { key: '4f55349dc40001dc9f27ec60ed9e95732126c219', class: "native-wrapper" }, h("svg", { key: '92ed9f0aa55db43c9aa7ef86bdf9e8bbc8e0df17', class: "checkbox-icon", viewBox: theme === 'ionic' ? '0 0 256 256' : '0 0 24 24', part: "container", "aria-hidden": "true" }, path)))));
     }
     getSVGPath(theme, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));

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

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

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

@@ -80,12 +80,12 @@ export class Col {
         const colSize = this.getSizeClass();
         const colOrder = this.getOrderClass();
         const colOffset = this.getOffsetClass();
-        return (h(Host, { key: 'e4a5e41ee5cd7ef62aa32a1f4f290a3be2fae212', class: {
+        return (h(Host, { key: '4620a4eb3c94f744d6169ae9d4cc43e86a271a52', class: {
                 [theme]: true,
                 [`${colSize}`]: colSize !== undefined,
                 [`${colOrder}`]: colOrder !== undefined,
                 [`${colOffset}`]: colOffset !== undefined,
-            } }, h("slot", { key: '7058c34c183cdad24630314ec0bedffef40a32af' })));
+            } }, h("slot", { key: '5c3be98deed2050634396339b7787f2770a05d35' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

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

@@ -364,7 +364,7 @@ export class Content {
         const forceOverscroll = this.shouldForceOverscroll(mode);
         const transitionShadow = theme === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: 'ee94e34dd128cb2a21ef2b370d35e099a1125447', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, Object.assign({ key: 'bb748c71d1b37dd18e39d4993a02e259a5797ee5', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [theme]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -372,12 +372,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '75954692de33cae260441064d0c4034d818b7de6', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '374f5d2da6f15b42df0ad268c2f9a188ac6aedcb', class: {
+            } }, inheritedAttributes), h("div", { key: '2f5df1e55ba6425f5fdf46887be023d2b76f28a9', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '809f63d3a58637dec2fb854f38733c3f7879b439', 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: '625c1dc26f6b6c43ade2de6f61a92ae7a8bcbaa7' })), 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: 'c7c648ea22a5955170b8eaf1e48ff9799728addc' })), 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

@@ -1733,7 +1733,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: 'd87c9e8d85ae7b1c8af3c8f266b76dd8d364a446', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '7f0b297fa794a28497ec2b98173da884abdbdf1b', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [theme]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1743,7 +1743,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '4d2e7316268ebbadf79f00b5d85928bbeffd283d', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
+            })) }, h("div", { key: '44ae95f094db5f7e2d45c98478636da9e6ab3491', 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

@@ -342,11 +342,11 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '2ecfe6f03acf6c81f1e650f1fee86c481e18b1bd', class: createColorClasses(color, {
+        return (h(Host, { key: '3051e96ef973302ba87c85515660c48b8136cba2', class: createColorClasses(color, {
                 [theme]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: '1aa569cc7c7522d1be720912d070299782619991', 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: '09357e2f4756bd4a842e3742af28c09baa615cc3', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: '36d4f288b353d1a3627045d9ea960cf943c1faee' }))), timeText && (h("button", { key: 'f66b309484b1c859b88c635e55b35dcc522bb6fd', 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: '72edee77f6bd115c664e6ed2ddeba030f5c0ee91', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: '98c5184fed75174d16412197aa91702e39175032' })))));
+            }) }, dateText && (h("button", { key: 'e3d968bcf0e7c1911bb16076123ffc1daeee62ed', 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: 'cdf1f60a0e42cd32633563c8256a1132798e47a1', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: '2284ac36fd7522a6a2e9f7f906b2e94c48680045' }))), timeText && (h("button", { key: 'e591b668ffd90538716082a3648a50422c24a7c1', 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: '5ef09df0f59663bf2437d05e16ef9d1f05ba25bd', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: 'a7b5de6e3d0df722cc62abf0e8a1140463af35b5' })))));
     }
     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: '387f7cb3ce69a1d4aa299f988d21d731fd5775d9', class: {
+        return (h(Host, { key: '6cc1572a93abaf49be7e27348bf513cb7ee24bff', class: {
                 [theme]: true,
                 [`divider-spacing-${spacing}`]: spacing !== undefined,
                 [`divider-inset`]: inset,
-            } }, h("hr", { key: 'cecfeab61e8f532a1eda36e73011f5447be63480' })));
+            } }, 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: '8b758c5283382f1bddd051f5a575d4952b001c50', 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: '45ce20f308b3de9c09d625d45b3f3dc7b4ee8652' })));
+            } }, h("slot", { key: 'cd10d4baa1c2e8c2dcfefe66bdb7ffb8262f8e17' })));
     }
     static get is() { return "ion-fab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -96,7 +96,7 @@ export class FabButton {
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(Host, { key: 'ffc552ad3b542e0f79e319fa86b063c3289e1a23', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '7d1b93dbec8f6b974db63168c55353b93ff169aa', 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,
@@ -107,7 +107,7 @@ export class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({ key: 'acf0c99822630499b171f0873924cfe10ef41547' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: '236a7340cf8213a69325716cb3b813abb627b40a', "aria-hidden": "true", icon: fabButtonCloseIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '908a53794c801a64c8cdae9b08ae75deb93a5b22', class: "button-inner" }, h("slot", { key: '41bf30e091cfcf90dcf3975a4b05a30c987e8aae' })), theme === 'md' && h("ion-ripple-effect", { key: 'b665e44a357138ef30454e267a2214356dc0fe3b' }))));
+            }) }, h(TagType, Object.assign({ key: 'cac887802056b25fee955e272febdb41745c731c' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { key: 'c5a932c45ec7ff131d484463203275210cdc5b3a', "aria-hidden": "true", icon: fabButtonCloseIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'bf8f5208c941dc3ddc2b719dbb2f2cf999e2b6a8', class: "button-inner" }, h("slot", { key: '213ca4696b7072ef2dfee806d11d8ddd26abf7af' })), theme === 'md' && h("ion-ripple-effect", { key: 'a2947193263e8ef97eccb15de9f5aa937e87086b' }))));
     }
     static get is() { return "ion-fab-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,11 +28,11 @@ export class FabList {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'b0e984c110ea8bf4aa0daeca5f66253c9e0666fd', class: {
+        return (h(Host, { key: '8b4d0419170ba48e5d9d1152dcae2b35281cd800', class: {
                 [theme]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: '7bedbb010e89d1304d86c4261f5378e90741611e' })));
+            } }, h("slot", { key: '9276798e2c581440c46ff9914809e87203a86b1b' })));
     }
     static get is() { return "ion-fab-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -90,7 +90,7 @@ export class Footer {
         const theme = getIonTheme(this);
         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: 'e70e2616f69a6205a1c2045bf13a792c9a6bc27c', role: "contentinfo", class: {
+        return (h(Host, { key: '5b61216dcb168a45472e037f9015c5e0f5bf7356', role: "contentinfo", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`footer-${theme}`]: true,
@@ -98,7 +98,7 @@ export class Footer {
                 [`footer-translucent-${theme}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, theme === 'ios' && translucent && h("div", { key: '72803059c1d82a766a0ce69e5a8a6a3b7e576700', class: "footer-background" }), h("slot", { key: 'de450e4eb8f5c63b11f548061f29d957ef308539' })));
+            } }, theme === 'ios' && translucent && h("div", { key: 'a6af70930e7be3ec51fe692d664304ced53ffe3e', class: "footer-background" }), h("slot", { key: '3591c712d6a3eceb5dc6c7307c32ceff54b1f9a7' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {

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

@@ -16,10 +16,10 @@ export class Grid {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f439594e1c4186e30d5b57bf3ca95c220df954fa', class: {
+        return (h(Host, { key: 'cd55886cabaeab57e3b13193381b196bec2f07f8', class: {
                 [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: 'e8e01f0b46a05fb3220837fbfa9f161b086c06ad' })));
+            } }, h("slot", { key: 'c9b95999e6a274a8a0c997451c0be45b1304d77b' })));
     }
     static get is() { return "ion-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -155,7 +155,7 @@ export class Header {
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (h(Host, Object.assign({ key: 'f5c81cee59b635b407fcad7732c793c651edb91e', role: roleType, class: {
+        return (h(Host, Object.assign({ key: '6a3ad0b3da7b27c42f96a9a7e2d2380406bfa604', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -163,7 +163,7 @@ export class Header {
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'd8373a8418756961185de934082142da01b27a26', class: "header-background" }), h("slot", { key: '9fda3dcb16fd09f7f6fa1c345d17cdf130e1e331' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'c0464df06d745da49d3163837180b21ec9fc2bdb', class: "header-background" }), h("slot", { key: '304859e675c67154563afb85c8e9358a8a6fb27b' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {

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

@@ -71,9 +71,9 @@ export class Img {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '70377d0128ad109580598f5c0a19cdee1d1f8f2a', class: {
+        return (h(Host, { key: '1aa7be8e15beabbc92ee21127960f7cfc778555d', class: {
                 [theme]: true,
-            } }, h("img", { key: '022467667337d04384d19d78378b5cf499e1b6c9', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+            } }, h("img", { key: 'a74a222d3b9d232619471ac9089c365b3e7a9b04', 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: 'd2505798673c258aa017ecbe646b59105a62970d', class: {
+        return (h(Host, { key: '22d99824cb589d9024666a3c1ed205f781858eed', 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: '51742937a374c43c290c20569857f617c99e1e7c', class: {
+        return (h(Host, { key: 'e94d19f17ef9d4d77786716152e3206366feb546', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${theme}`]: true,
-            } }, h("div", { key: '42c249b6df301004a834bb615766c38d5ab03d91', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '7cc7aab81997ef58b914e084402f45dc3abf2ce4', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '5c84df7096076580e0bb4926d377c2fac4f75c3d', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, h("div", { key: '35fcc0572ad27a683aa55a704bd11b19fcdfd29c', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: 'fec3c13dbb2fa98699401147ce442b73e97e8bd8', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '6cd6083255dacc891b4d201477e6bffccb1084bc', 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

@@ -596,7 +596,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '83b06d3ba2deb8be1aac86573e44eb9fedaf8ebc', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c01b7ed35861999d1a73b12d853fa90deb831963', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -609,7 +609,7 @@ export class Input {
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, h("label", { key: 'd30a09196b14b7c50c81ee81b0db153a0a552ff8', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'bd215e071a7c82b530c36bf98481b8a21bf827a8', class: "native-wrapper", onClick: this.onLabelClick }, 
+            }) }, h("label", { key: '49b13f7970d0839d8286a32b52360356f9bd7399', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '2a976896662e4f18f5b86d7dada141222533047e', 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
@@ -619,14 +619,14 @@ export class Input {
          * <label> element, ensuring that clicking the label text
          * focuses the input.
          */
-        theme === 'ionic' && h("div", { key: 'f77b77e9b3fa8f704f676a876abb237ade2c6a80', class: "input-outline" }), h("slot", { key: '5bf76988e97fb13db47b10a2ea9016c9db582d64', name: "start" }), h("input", Object.assign({ key: '98772c54302eb90155511e234d3c0948b46f7907', 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 }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: 'd0adf91f18cdff60b5d5055a53fb8a1e33cda140', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+        theme === 'ionic' && h("div", { key: '47fe7d74f50bfa1aeec03ba3cb1edb0df941773f', class: "input-outline" }), h("slot", { key: 'f9b9884467a216bd0c7af49b512ed22ef67f81f2', name: "start" }), h("input", Object.assign({ key: '12ab5fe9b82083637dbb2c6163b829af69cc9a5f', 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 }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: '284e6a89fe06fc7de2d0d7cac24ae5330f10594c', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '6fc9e8afce4d19cfbad9fb8044c32beb4a5734a5', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: '493645d76a65e3e469c516e1244e3ff23d9d6f29', name: "end" })), shouldRenderHighlight && h("div", { key: '270caadc085e6f30b663b2bac03495bb8ce47e42', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '58ceb89a48d5db08ddb5b22397d29e6ab3524f9c', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: 'a90f9f0b9439e0aa19de35e24ea9ed587ab51add', name: "end" })), shouldRenderHighlight && h("div", { key: '413fe8aa2eeaf41ab90a3b77a6abb20b19ad8446', 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

@@ -605,7 +605,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: '16e1e487d2aabe8e9f84682fb50f30966179ffa6', class: createColorClasses(color, {
+        return (h(Host, { key: 'b7709a1fd155bd4484fb6f20a2f0c1cdb13809a7', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -613,10 +613,10 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", Object.assign({ key: 'd7757f5984abe39da9b6320683198db040d0220e', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", 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" }))))), h("div", { key: '6254cef5b2379359b319b4e573868340885e310a', class: {
+            }) }, h("div", Object.assign({ key: '5948befd722de44eea8aa1a759ae465bebef0d52', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", 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" }))))), h("div", { key: 'bb4cdd1da7e42b6d2b8b50fc2ec52ed526608cdd', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, h("slot", { key: '4f4b63bb67a01b7618719f9bde56ef60d582e7d6' }))));
+            } }, h("slot", { key: '006fe25a24266eae57a9c1b58fbfc28008cfb816' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "scoped"; }

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

@@ -94,16 +94,16 @@ export class InputPasswordToggle {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode(this);
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: 'e265bb6460041189fea1812d391121a9e8dde669', class: createColorClasses(color, {
+        return (h(Host, { key: 'e3c21d5bedebeadb57c0c9b7f065d15ab0d49e4a', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: 'b7ca2e12e3b1b9a161acc002abb8f1b8efeea46e', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', role: "switch", type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: 'c2529009a921f2fd133f2b3c4f8d36fa66fbfd30', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', role: "switch", 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: '4d5ba21325812d9c820ae26688d17ae821ffd25c', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'bc25d56ce0402565a2c7c0d617349138a04c008d', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     static get is() { return "ion-input-password-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,11 +25,11 @@ export class ItemDivider {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f026528e983b0b77cd059400d961d012dec9caae', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'ff60c2ed224911e4369138287da9610564785c7f', class: createColorClasses(this.color, {
                 [theme]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, h("slot", { key: '409f111b2b37782bd242af5f3205d871d85b6254', name: "start" }), h("div", { key: '6811502ae39e51104b46f4f3b272631017a91e4a', class: "item-divider-inner" }, h("div", { key: 'c7cf5918a8e8f891426fda028586b36f21909b00', class: "item-divider-wrapper" }, h("slot", { key: '7db6745917458bb6d854c0662bbf0394142d2996' })), h("slot", { key: 'bad5e02a4d4852fc6e106552b314a42842a0b2e7', name: "end" }))));
+            }) }, h("slot", { key: '992f32a67a2ecf8ee94d5c8b9bfd231b4b4510d9', name: "start" }), h("div", { key: '44ad1d56fe4c9644267ca285199bcc66cf7269d3', class: "item-divider-inner" }, h("div", { key: '8237db8eb57c0b877da7efa45f10214063e3ac8f', class: "item-divider-wrapper" }, h("slot", { key: '9ac2bf96cfa368d4f6daba9b6fcced3f597dfb4f' })), h("slot", { key: '19bdddb51ac10f0a11c5b50d4ad51a55cada278a', name: "end" }))));
     }
     static get is() { return "ion-item-divider"; }
     static get encapsulation() { return "shadow"; }