@ionic/core 8.0.0-dev.11711734184.18e3ccbf → 8.0.0-dev.11712072527.1dd97c66

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

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: '4e7a269caceb9cf7a71c3ba5dc15903a72203132', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'af95e7123b3d39110425c16cb4f7f8efb1ee1536', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'e42d43e85a57a2ac16579021df43ade524f1d9bf', class: "toolbar-title" }, h("slot", { key: '2319bcfdb2b79eec9c03db84bea2a9f133cc8576' }))));
+            }) }, h("div", { key: '54efce3d5769fb3de297a6d534dc87d57f365004', class: "toolbar-title" }, h("slot", { key: 'f7ed25c6b178cad1840e35e81e3eeeca3aacea3f' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/toast.js

@@ -388,9 +388,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: 'ebab697ab245b8ffe7163c59ee059d143242845a', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '45b52c210cc3e9ac130f695f29b03d771959f64f', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '94d1bcbb17cb4ed81ec67d63ccf61822fedbed94', class: wrapperClass }, h("div", { key: 'd10a99dcdf94d70003b70dea7d965c05baefa934', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '6475020a6890eb79bb37638c0ad0267f1cbf89fb', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '10f25e094028f4855828ba2e04e71445b05198eb', class: wrapperClass }, h("div", { key: 'a1312a8878dd8a02798de0a1f136d03c287a34a8', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '0f19c24f130c04ff41a3098bf6d9b17e2c8a2d12', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/toggle.js

@@ -157,7 +157,7 @@ export class Toggle {
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '9ea705862e0a6c8c3250d19d6487ba5a312557f4', onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: 'f90c95348f1251c077187f0d30f6f4a5198cde68', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -167,10 +167,10 @@ export class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '6347141bd48c42c10f358bdf95ee5c3e9719f7e7', class: "toggle-wrapper" }, h("input", Object.assign({ key: 'a81935c322ccdec55723986bc69556833e057b7b', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: '0ab294895807335c63c9a31685d861a9f75f0129', class: {
+            }) }, h("label", { key: '3b86ca8cc4a19b6bc17784cd01fcb7697c58d108', class: "toggle-wrapper" }, h("input", Object.assign({ key: '3773acdfdfe5263517980f19a698bdbb572a68eb', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), h("div", { key: 'bb10a95f701d5f9c343c7d46a5bb690ee42eaa1d', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, h("slot", { key: '918de14911b5c1453ac1b817a92614d80fe81082' })), h("div", { key: 'f7f8b23c1de4eacdf912034286d51d88dde09699', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, h("slot", { key: '7ff69b1184f0abbefdb9642400885baf3b2abd38' })), h("div", { key: '3df2f297d9c0b53e7997841b822845af7ad6a058', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.js

@@ -62,10 +62,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'f11da98ce3398f95930cd6f5b95783a5b658e206', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: 'f72d6a7ed20c88ba15d64050acfc20f320569862', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '2e473c8bebf448f411ec1a579f0c81eb05310c56', class: "toolbar-background" }), h("div", { key: 'cf2d7c69bc028410338942aaea37527c570ccec5', class: "toolbar-container" }, h("slot", { key: '445cbd5299188eef4761c605b4a8d20a61079590', name: "start" }), h("slot", { key: '77675b5c0c0afffe5251ba271f5db23f87339859', name: "secondary" }), h("div", { key: '7d5967c4ad6c0fca7573aa48da707c8b0dfcd052', class: "toolbar-content" }, h("slot", { key: 'ad5530d63df9ca101760fb9f71e3641c66e95b6c' })), h("slot", { key: '35837ac1b7a4a59f000149d480900bc19015b258', name: "primary" }), h("slot", { key: '504904cf46e2190dd0a3aa5b7855b5fc54f73726', name: "end" }))));
+            })) }, h("div", { key: 'ccf18eea9756ca56ca828b05bd3f86cf8a32e24c', class: "toolbar-background" }), h("div", { key: '1fa699d8e17f57b42a52d47a1bdb793f2cbbfe5d', class: "toolbar-container" }, h("slot", { key: 'ef4d877bad0918eefdc67fa7aa258024a58d26ef', name: "start" }), h("slot", { key: '41858db7a8d58c9165952c9336731d621ec3c2b8', name: "secondary" }), h("div", { key: '577770b9346b48a0fa1412cbdbd9393d553d2286', class: "toolbar-content" }, h("slot", { key: 'ae47b29e1f7d2c3dde7a170c9737b48f075139c2' })), h("slot", { key: 'cfbf7879daf1a38fee434335abff936d8f3690e0', name: "primary" }), h("slot", { key: 'ed3a66248f43e0749f6aef9fb78ea4f5034c0774', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/themes/test/colors/theme.e2e.js

@@ -49,10 +49,8 @@ const styleTestHelpers = `
  * 5) The base color as the text color against the base color at 0.08 opacity as the background color
  * 6) The base color as the text color against the base color at 0.12 opacity as the background color
  * 7) The base color as the text color against the base color at 0.16 opacity as the background color
- *
- * Important: We test both modes because the dark palette colors differ on iOS and MD.
  */
-configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
+configs({ modes: ['md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
     const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
     test.describe(title('theme'), () => {
         test.beforeEach(({ skip }) => {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-03-29T17:45:08",
+  "timestamp": "2024-04-02T15:44:28",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.13.0",
@@ -6309,6 +6309,33 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "fixedSlotPlacement",
+          "type": "\"after\" | \"before\"",
+          "complexType": {
+            "original": "'after' | 'before'",
+            "resolved": "\"after\" | \"before\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "fixed-slot-placement",
+          "reflectToAttr": false,
+          "docs": "Controls where the fixed content is placed relative to the main content\nin the DOM. This can be used to control the order in which fixed elements\nreceive keyboard focus.\nFor example, if a FAB in the fixed slot should receive keyboard focus before\nthe main page content, set this property to `'before'`.",
+          "docsTags": [],
+          "default": "'after'",
+          "values": [
+            {
+              "value": "after",
+              "type": "string"
+            },
+            {
+              "value": "before",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "forceOverscroll",
           "type": "boolean | undefined",
@@ -10073,6 +10100,30 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "clearInputIcon",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "clear-input-icon",
+          "reflectToAttr": false,
+          "docs": "The icon to use for the clear button. Only applies when `clearInput` is set to `true`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "clearOnEdit",
           "type": "boolean | undefined",

package/dist/esm/ion-app_8.entry.js

@@ -184,6 +184,7 @@ const Content = class {
         };
         this.color = undefined;
         this.fullscreen = false;
+        this.fixedSlotPlacement = 'after';
         this.forceOverscroll = undefined;
         this.scrollX = false;
         this.scrollY = true;
@@ -465,13 +466,13 @@ const Content = class {
         }
     }
     render() {
-        const { isMainContent, scrollX, scrollY, el } = this;
+        const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const mode = getIonMode(this);
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, { key: '133795359748c29c2f26f2c4b05315c1ee2ebf14', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'ff21c25f4ad5d668e04b45d4f5278c3f0bbdee4e', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -479,12 +480,12 @@ const Content = class {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { key: 'cec324eeb397b9947b48706a726a71c0a338c47b', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h("div", { key: 'da55ddf94fe7fba83e3625f08ce0561136911828', class: {
+            } }, h("div", { key: 'a0781a593ec14977240318c1268971612f990edf', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '216bfc31280b7c3b4cbcd54edc4caab01f60b463', 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: '5277456fa0cca2680fbb3ae48f90100ba16bf90d' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: 'e3dfb4aa64d29e5cc24e8b0cd75a7eb1e0d6954c', name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: 'ac6f8ce8da08a5a55e6f1cfc77b07d4f2e1e5dda' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     get el() { return getElement(this); }
 };
@@ -652,7 +653,7 @@ const Footer = class {
         const mode = getIonMode(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: 'c6f57ef061d44a475dd2c3361e73199a1820e2ea', role: "contentinfo", class: {
+        return (h(Host, { key: 'b8b57c6d3ffcb100330c0f19f1f567db89569efd', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`footer-${mode}`]: true,
@@ -660,7 +661,7 @@ const Footer = class {
                 [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", { key: '5f27edadd5c05c38d0ba9de0277bac675f5b36b3' })));
+            } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", { key: 'a9f465cbd6100ba16fd1e02e382997ac87303bb7' })));
     }
     get el() { return getElement(this); }
 };
@@ -982,14 +983,14 @@ const Header = class {
         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: '9f30ede40eaf89b3e0adbcd03e1d08d0d4ca762b', role: roleType, class: {
+        return (h(Host, Object.assign({ key: '37ded46927283f6aa2c2b069510e37d427a908ad', role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", { key: '029aa484210e8dd5c5404a84c134d64a9100ba6e' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", { key: '3d25f5606e297ba9e0fea3c2fe0d7da542089075' })));
     }
     get el() { return getElement(this); }
 };
@@ -1173,7 +1174,7 @@ const RouterOutlet = class {
         return true;
     }
     render() {
-        return h("slot", { key: '42ee7dad5f8ae08d8204c56fbe9970b938ce5746' });
+        return h("slot", { key: 'b90c776f7924a88b1b36befe7e6f8943fc20dfe3' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1213,11 +1214,11 @@ const ToolbarTitle = class {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: '4e7a269caceb9cf7a71c3ba5dc15903a72203132', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'af95e7123b3d39110425c16cb4f7f8efb1ee1536', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'e42d43e85a57a2ac16579021df43ade524f1d9bf', class: "toolbar-title" }, h("slot", { key: '2319bcfdb2b79eec9c03db84bea2a9f133cc8576' }))));
+            }) }, h("div", { key: '54efce3d5769fb3de297a6d534dc87d57f365004', class: "toolbar-title" }, h("slot", { key: 'f7ed25c6b178cad1840e35e81e3eeeca3aacea3f' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1285,10 +1286,10 @@ const Toolbar = class {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: 'f11da98ce3398f95930cd6f5b95783a5b658e206', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: 'f72d6a7ed20c88ba15d64050acfc20f320569862', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '2e473c8bebf448f411ec1a579f0c81eb05310c56', class: "toolbar-background" }), h("div", { key: 'cf2d7c69bc028410338942aaea37527c570ccec5', class: "toolbar-container" }, h("slot", { key: '445cbd5299188eef4761c605b4a8d20a61079590', name: "start" }), h("slot", { key: '77675b5c0c0afffe5251ba271f5db23f87339859', name: "secondary" }), h("div", { key: '7d5967c4ad6c0fca7573aa48da707c8b0dfcd052', class: "toolbar-content" }, h("slot", { key: 'ad5530d63df9ca101760fb9f71e3641c66e95b6c' })), h("slot", { key: '35837ac1b7a4a59f000149d480900bc19015b258', name: "primary" }), h("slot", { key: '504904cf46e2190dd0a3aa5b7855b5fc54f73726', name: "end" }))));
+            })) }, h("div", { key: 'ccf18eea9756ca56ca828b05bd3f86cf8a32e24c', class: "toolbar-background" }), h("div", { key: '1fa699d8e17f57b42a52d47a1bdb793f2cbbfe5d', class: "toolbar-container" }, h("slot", { key: 'ef4d877bad0918eefdc67fa7aa258024a58d26ef', name: "start" }), h("slot", { key: '41858db7a8d58c9165952c9336731d621ec3c2b8', name: "secondary" }), h("div", { key: '577770b9346b48a0fa1412cbdbd9393d553d2286', class: "toolbar-content" }, h("slot", { key: 'ae47b29e1f7d2c3dde7a170c9737b48f075139c2' })), h("slot", { key: 'cfbf7879daf1a38fee434335abff936d8f3690e0', name: "primary" }), h("slot", { key: 'ed3a66248f43e0749f6aef9fb78ea4f5034c0774', name: "end" }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ion-avatar_3.entry.js

@@ -55,7 +55,7 @@ const Thumbnail = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'b1fe245cf42f0462336519d07afd6c91eef388cf', class: getIonMode(this) }, h("slot", { key: '5e0f575864fcd9ae03ec8f5f7eb915efcf568337' })));
+        return (h(Host, { key: '68bac4e80f5d27131690fd20dfabff2618743206', class: getIonMode(this) }, h("slot", { key: '89f46a686288428391cdfaef3384824751ae3d05' })));
     }
 };
 Thumbnail.style = IonThumbnailStyle0;

package/dist/esm/ion-col_3.entry.js

@@ -153,10 +153,10 @@ const Grid = class {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f16254ea58e52b57b2de5cb33a7e84ad544361af', class: {
+        return (h(Host, { key: 'd240212314811650765ac22936da13b0a92680b8', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '42f4eff0d912dc0112fa74d7de69f3a6a8e04a2e' })));
+            } }, h("slot", { key: 'd0b55fd347db2b2f92805975c61da093c762c26d' })));
     }
 };
 Grid.style = IonGridStyle0;
@@ -169,7 +169,7 @@ const Row = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '99e5562cd37159634f14d351e5a09233c9da9611', class: getIonMode(this) }, h("slot", { key: '07beb06113ae641d7b3d6c24307861d74c31a8d5' })));
+        return (h(Host, { key: 'e52c499804f7bebc1c4ab8fb69ef1b452eae58c1', class: getIonMode(this) }, h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
     }
 };
 Row.style = IonRowStyle0;

package/dist/esm/ion-datetime-button.entry.js

@@ -334,7 +334,7 @@ const DatetimeButton = class {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f0ee6b859ad193be78cfc49d4d66373adfdbd618', class: createColorClasses(color, {
+        return (h(Host, { key: '49854fc8a4b9875194c1537d0b3b59459e39606f', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,

package/dist/esm/ion-datetime_3.entry.js

@@ -1758,7 +1758,7 @@ const Datetime = class {
         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: '79357d753d003539aaadbc30aa0ca7e2ab97415d', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '89de4c9f54e7c11038c62ecaa2e90aea47948393', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1768,7 +1768,7 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '18b6631ffcf028c5062659e75be5d6712ac30402', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: 'b9de6cc68dc7b7773bb408fd55a7d1872460a5f9', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -2020,11 +2020,11 @@ const Picker = class {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: '91d3d127c46d125a2a86222e3002d804ebd8bc84', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '1cf2f8a25a3eca7ac59eff969803c85540f102fc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '63140c43f7a2e3000076adec0406197cb569f985', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '3e86ec5e61adf40983a1d33ef24f66f4f75307e8', tabindex: "0" }), h("div", { key: '3c3844f369da33e35c9a498d88d1b7e4d686b8ce', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'e03200231976723409505b0c4070e7f596815e50', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'd59de79e8c364376bc16d2edae3672b21443f3fe', class: "picker-columns" }, h("div", { key: 'e79cb88c5397047bc8c7e71efb4f1a338773e744', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '776de64da09485ad1dbf78d4d402e297b94348a6', class: "picker-below-highlight" }))), h("div", { key: 'f0aa77e3b467c3fb4950389d27c13769dc913b14', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '3a70c7c6e0457afda2e9ef4619cb253b583b7805', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4c90cf7dfeb9d2bdb5e947739864dbc2d1e327e0', tabindex: "0" }), h("div", { key: '050098ced341fd86bfcd72595b1f7a52c3b01b46', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'b0d9420fb053d0c71af04c88224a38f804fd99ba', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '82cd2788c394079cb8843c240c17e3629eef0953', class: "picker-columns" }, h("div", { key: '34d2ce59e88b5967e52fe8077ef3a151c6ce38e5', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'b604b101bc0006efc246aea9320d9f44419c531f', class: "picker-below-highlight" }))), h("div", { key: '70437d735b009386b4f5ae250b555c039c366183', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -2381,9 +2381,9 @@ const PickerColumnCmp = class {
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: '90b9d07917c0643cf8a622f090abefcd2846ac96', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: '0337ac8379be177501b8d61f0ac0f68ecbb8344d', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '4adca834de9295a18bdb355ebbfa49813f0f93f8', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '013ba8ea1c2fe4fe717386b9cc87484913c234f7', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-fab_3.entry.js

@@ -55,12 +55,12 @@ const Fab = class {
     render() {
         const { horizontal, vertical, edge } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a25aae31396546595b21a760ced22ee92d2379d6', class: {
+        return (h(Host, { key: '8d10537e35f518b03a840de9a0fbe7973abc4290', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, h("slot", { key: 'b01cc2572213bfa6c12111e32e2f7702e6d93621' })));
+            } }, h("slot", { key: '77331bf85f939b20ff14886f0a8b0f13c5ca392a' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -129,7 +129,7 @@ const FabButton = class {
                 rel: this.rel,
                 target: this.target,
             };
-        return (h(Host, { key: 'f342fbd54263de388bc49e54af61ce4aaaef1f2e', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'bc00fdb39e41787a3b4c53aededfc32485ee9211', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -140,7 +140,7 @@ const FabButton = class {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, h(TagType, Object.assign({ key: 'cd29a22c7d8ea02ab3469ba8a5878fd1cb28286a' }, 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: '046a1254b728b43e2f4496ad96fff7bb8827df19', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '9b5c11105d2b7c37c82f7eea2264e29c5f939262', class: "button-inner" }, h("slot", { key: '283fe50749e5537bc7d21159c36c9eb3fbe45415' })), mode === 'md' && h("ion-ripple-effect", null))));
+            }) }, h(TagType, Object.assign({ key: 'fe13b3e19638177b516e6e530e6ff0b745856481' }, 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: '210e4a3cd39e0ff6fc300eeaafa3a9330a9dc73f', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'c6547612ff58a1e46bae2e91302b6b86a49d6429', class: "button-inner" }, h("slot", { key: '48abc7e6a27391f2595eeddf9abd8d16c0a86630' })), mode === 'md' && h("ion-ripple-effect", null))));
     }
     get el() { return getElement(this); }
 };
@@ -168,11 +168,11 @@ const FabList = class {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '62d22c1907677360d91fc0386ab05379bcc9de8a', class: {
+        return (h(Host, { key: 'ccce297302fa14d6ce0646d4bb14a74e71d68cb9', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, h("slot", { key: '4f9b6b9620c0ec79006663c5981140184129b7ce' })));
+            } }, h("slot", { key: '9007d178411ea80db29d2034473e3f9d61157fa1' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-img.entry.js

@@ -76,7 +76,7 @@ const Img = class {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { key: 'fa0d0e73693f4d5454dde2397a333143ab00a145', class: getIonMode(this) }, h("img", { key: '70198693643ab6a33816c6e1b0ed23b368208fbb', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (h(Host, { key: '167143c9e996a0b2f78841e6c427c57a322189d7', class: getIonMode(this) }, h("img", { key: 'e840d04e5d0a939cd4c2d19f915a3fee394419b5', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-infinite-scroll_2.entry.js

@@ -176,7 +176,7 @@ const InfiniteScroll = class {
     render() {
         const mode = getIonMode(this);
         const disabled = this.disabled;
-        return (h(Host, { key: 'be1a720fcf686dc48468de968d84ea58bfe0a06d', class: {
+        return (h(Host, { key: '69e7741fd2eb2053ba1d59d00d307d2f662fcf13', class: {
                 [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
@@ -218,11 +218,11 @@ const InfiniteScrollContent = class {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '44b11681f802fb0d1c565810f71f7672453e16ca', class: {
+        return (h(Host, { key: '7c32cbd526ef8a151df1c870bd3a4f0c9d764154', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${mode}`]: true,
-            } }, h("div", { key: 'd7e7d5beedf1e22a009e87790ca024b8f15c462b', class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, h("div", { key: '6bd67f2c9f3f23edc2f81b6de16134b853bea716', class: "infinite-loading" }, this.loadingSpinner && (h("div", { class: "infinite-loading-spinner" }, h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
 };
 InfiniteScrollContent.style = {

package/dist/esm/ion-input-password-toggle.entry.js

@@ -65,16 +65,16 @@ const InputPasswordToggle = class {
         const showPasswordIcon = (_a = this.showIcon) !== null && _a !== void 0 ? _a : eye;
         const hidePasswordIcon = (_b = this.hideIcon) !== null && _b !== void 0 ? _b : eyeOff;
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: '1cb075999e41c2fde3a3d6cafe6f37c9b5429299', class: createColorClasses(color, {
+        return (h(Host, { key: '9dd0f6e44824961eb19de2af03ed0237551bc623', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: 'cfaaec221f530ecc475690b6508c2333e32ff609', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: '72737f52a8a9767f14bde3851a28368c3420a408', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "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: 'dc0fc5fe8df4df4c145e29b30e589f159aab9cd9', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '17a7d7681e8509aa6feab3d54ce6ca1c87b631b0', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-input.entry.js

@@ -87,6 +87,7 @@ const Input = class {
         this.autocorrect = 'off';
         this.autofocus = false;
         this.clearInput = false;
+        this.clearInputIcon = undefined;
         this.clearOnEdit = undefined;
         this.counter = false;
         this.counterFormatter = undefined;
@@ -376,11 +377,13 @@ const Input = class {
         return this.renderLabel();
     }
     render() {
-        const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this;
+        const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus, clearInputIcon } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
         const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const defaultClearIcon = mode === 'ios' ? closeCircle : closeSharp;
+        const clearIconData = clearInputIcon !== null && clearInputIcon !== void 0 ? clearInputIcon : defaultClearIcon;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         /**
@@ -401,7 +404,7 @@ const Input = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'f1007469471c9610950749d87f1aa8165cea4dbb', class: createColorClasses(this.color, {
+        return (h(Host, { key: '12e9da8ff2d6ecce8e3ce1880ea46e71260c81fc', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -412,14 +415,14 @@ const Input = class {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '12a5a2a2b942e4d7420b7e10b98dc3f5b15c6e28', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '938381505753fbc842583215e32d74dd3a383742', class: "native-wrapper" }, h("slot", { key: '0e835fd6b94f7407696d4ab097a02c6e4b742fc9', name: "start" }), h("input", Object.assign({ key: '1835e2bbbdcaf8a80e3a7665536afb02d571bcb9', 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 }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: 'c241838173e639eebad7d8067063999fc609320b', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'c392fcd8367aa3a05fac3a5774dad0525670d4d0', class: "native-wrapper" }, h("slot", { key: '3f6bb21aab004dfc7957ca42d18acac73c240a0e', name: "start" }), h("input", Object.assign({ key: '86720e7d2b4e2f5cfe7dfee4c9947f0998279e17', 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 }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { "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", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: 'bdcffc81c8d07c793a06d9880a02d7b94ddfff2e', name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '55cf54320c1555fd3501374d2c2b4e9c1dce046f', name: "end" })), shouldRenderHighlight && h("div", { class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-item-option_3.entry.js

@@ -44,12 +44,12 @@ const ItemOption = class {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: '85fe8f529ab0673f1ddba299473690590a1bca88', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '8cae654786fadc2cfe864e495645715cb53a3e68', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: 'cde9bca980cb5589204017d80483baab0996586e' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'e2b7886b53b0b85d81fbfd9209c2989673cdb863', class: "button-inner" }, h("slot", { key: 'eaf089857ff0a22d3a9c12574596002e32a28c75', name: "top" }), h("div", { key: '12f5d46fe5b8b5d2a5d2bd9e4782376c5af86f1c', class: "horizontal-wrapper" }, h("slot", { key: 'ba6d89b7c7f9470f73e17808f90d578fbcceba48', name: "start" }), h("slot", { key: '22ad963dd37ae40c03a5723c3e3b05970f40d871', name: "icon-only" }), h("slot", { key: 'a1596a1961b5757828fafaa9edf9da3381482ff3' }), h("slot", { key: 'ad0d2b50de279a712e18985ce9aceda7b5d45712', name: "end" })), h("slot", { key: '2940933c947f7e2d9875f0fb980aff392d5ea7fa', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", null))));
+            }) }, h(TagType, Object.assign({ key: '296e26957428fc701d52695cfbad83d507e02060' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: '51b3d2e3ce737c8034678dec4fcda4dfbc1438e6', class: "button-inner" }, h("slot", { key: 'be0fbb128ef61a6deaa52eb1197c0f3481cc4ae3', name: "top" }), h("div", { key: '7ba732ae5b8c94c0448df3c3500d9f6eac71d61c', class: "horizontal-wrapper" }, h("slot", { key: '90bf045e30ae006aa7418fd25c1090de27164980', name: "start" }), h("slot", { key: '6858e4a608a4ac9144de58ada851ae3497ae7f74', name: "icon-only" }), h("slot", { key: 'a35037681327fd5753f6d3d7c9ad37b960885e96' }), h("slot", { key: '834c710c88cead42fe3d9ce7f714b62df8a8a604', name: "end" })), h("slot", { key: 'b574fe0f3655dfd9ef1e668983278b28951269e4', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", null))));
     }
     get el() { return getElement(this); }
 };
@@ -79,7 +79,7 @@ const ItemOptions = class {
     render() {
         const mode = getIonMode(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: 'ac0cec6a2ea83c9633c10bce379ffdcc99221b52', class: {
+        return (h(Host, { key: '3d1b754bcc184044cd0213eab08fb22224abddfb', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,
@@ -487,7 +487,7 @@ const ItemSliding = class {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ae9da267d130e2875b2d854952b70daa739effd8', class: {
+        return (h(Host, { key: '1c2d40968e7a306e4d63443571a7581e0511c9c4', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,