@ionic/core 8.2.3-dev.11724326037.1eacfaff → 8.2.3-dev.11724680612.1b9ef92a

package/dist/collection/components/toggle/toggle.md.css

@@ -59,6 +59,28 @@
  *   }
  * }
  */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 :host {
   /**
    * @prop --track-background: Background of the toggle track
@@ -84,7 +106,6 @@
   outline: none;
   cursor: pointer;
   user-select: none;
-  z-index: 2;
 }
 
 :host(.in-item) {
@@ -141,26 +162,6 @@ input {
   cursor: inherit;
 }
 
-.label-text-wrapper {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-:host(.in-item) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {
-  margin-top: 10px;
-  margin-bottom: 16px;
-}
-
-:host(.in-item.toggle-label-placement-stacked) .native-wrapper {
-  margin-bottom: 10px;
-}
-
 /**
  * If no label text is placed into the slot
  * then the element should be hidden otherwise
@@ -175,26 +176,6 @@ input {
   align-items: center;
 }
 
-:host(.toggle-justify-space-between) .toggle-wrapper {
-  justify-content: space-between;
-}
-
-:host(.toggle-justify-start) .toggle-wrapper {
-  justify-content: start;
-}
-
-:host(.toggle-justify-end) .toggle-wrapper {
-  justify-content: end;
-}
-
-:host(.toggle-alignment-start) .toggle-wrapper {
-  align-items: start;
-}
-
-:host(.toggle-alignment-center) .toggle-wrapper {
-  align-items: center;
-}
-
 /**
  * Label is on the left of the input in LTR and
  * on the right in RTL.
@@ -203,18 +184,6 @@ input {
   flex-direction: row;
 }
 
-:host(.toggle-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
-   */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-}
-
 /**
  * Label is on the right of the input in LTR and
  * on the left in RTL.
@@ -223,91 +192,6 @@ input {
   flex-direction: row-reverse;
 }
 
-/**
- * The margin between the label and
- * the input should be on the start
- * when the label sits at the end.
- */
-:host(.toggle-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: 16px;
-  margin-inline-start: 16px;
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
-}
-
-:host(.toggle-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the input should be on the end
-   * when the label sits at the start.
-   */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-}
-
-/**
- * Label is on the left of the input in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.toggle-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-/**
- * Label is on top of the toggle.
- */
-:host(.toggle-label-placement-stacked) .toggle-wrapper {
-  flex-direction: column;
-}
-
-:host(.toggle-label-placement-stacked) .label-text-wrapper {
-  transform: scale(0.75);
-  /**
-   * The margin between the label and
-   * the toggle should be on the bottom
-   * when the label sits on top.
-   */
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 16px;
-  /**
-   * Label text should not extend
-   * beyond the bounds of the toggle.
-   */
-  max-width: calc(100% / 0.75);
-}
-
-:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper {
-  transform-origin: left top;
-}
-:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper {
-  transform-origin: right top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
-
-:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper {
-  transform-origin: center top;
-}
-:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper {
-  transform-origin: calc(100% - center) top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {
-    transform-origin: calc(100% - center) top;
-  }
-}
-
 .toggle-icon-wrapper {
   display: flex;
   position: relative;
@@ -378,6 +262,147 @@ input {
   transform: translate3d(calc(var(--handle-spacing) * 2), 0, 0);
 }
 
+:host {
+  z-index: 2;
+}
+
+:host(.in-item) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+:host(.in-item.toggle-label-placement-stacked) .native-wrapper {
+  margin-bottom: 10px;
+}
+
+.label-text-wrapper {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:host(.toggle-justify-space-between) .toggle-wrapper {
+  justify-content: space-between;
+}
+
+:host(.toggle-justify-start) .toggle-wrapper {
+  justify-content: start;
+}
+
+:host(.toggle-justify-end) .toggle-wrapper {
+  justify-content: end;
+}
+
+:host(.toggle-alignment-start) .toggle-wrapper {
+  align-items: start;
+}
+
+:host(.toggle-alignment-center) .toggle-wrapper {
+  align-items: center;
+}
+
+:host(.toggle-label-placement-fixed) .label-text-wrapper {
+  /**
+     * The margin between the label and
+     * the input should be on the end
+     * when the label sits at the start.
+     */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+}
+
+/**
+* Label is on the left of the input in LTR and
+* on the right in RTL. Label also has a fixed width.
+*/
+:host(.toggle-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+/**
+* Label is on top of the toggle.
+*/
+:host(.toggle-label-placement-stacked) .toggle-wrapper {
+  flex-direction: column;
+}
+
+:host(.toggle-label-placement-stacked) .label-text-wrapper {
+  transform: scale(0.75);
+  /**
+    * The margin between the label and
+    * the toggle should be on the bottom
+    * when the label sits on top.
+    */
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 16px;
+  /**
+    * Label text should not extend
+    * beyond the bounds of the toggle.
+    */
+  max-width: calc(100% / 0.75);
+}
+
+:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper {
+  transform-origin: left top;
+}
+:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
+
+:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper {
+  transform-origin: center top;
+}
+:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper, :host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper {
+  transform-origin: calc(100% - center) top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper {
+    transform-origin: calc(100% - center) top;
+  }
+}
+
+:host(.toggle-label-placement-start) .label-text-wrapper {
+  /**
+    * The margin between the label and
+    * the input should be on the end
+    * when the label sits at the start.
+    */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+}
+
+/**
+* The margin between the label and
+* the input should be on the start
+* when the label sits at the end.
+*/
+:host(.toggle-label-placement-end) .label-text-wrapper {
+  -webkit-margin-start: 16px;
+  margin-inline-start: 16px;
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

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

@@ -63,10 +63,10 @@ export class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '958f4b7dd7edd7e14188ede019a3ec83955047e7', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '0b157e806d08ed75667a8d4c824531274c636c3f', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '13c34671af2a47ee2d13c3348d87590696fe2043', class: "toolbar-background" }), h("div", { key: '00cb26c46ab564017c5b59133082966487f3268a', class: "toolbar-container" }, h("slot", { key: 'a9c5fc777ff5eab4ef91d7c9b274a53012280f35', name: "start" }), h("slot", { key: 'a5a4e11b5d5847ff167ae95b86cd3625d482e257', name: "secondary" }), h("div", { key: 'e9f06b74b6aa933363aa0b671216b37300cc660c', class: "toolbar-content" }, h("slot", { key: '05929530a64a6d497ef5bc69dbc42adc11c9694f' })), h("slot", { key: 'f03445495cd36c54a7a43b47ab47169c53d9d15b', name: "primary" }), h("slot", { key: 'd8a60db04c290933462b517cc6627500bd9ebe34', name: "end" }))));
+            })) }, h("div", { key: '8413374c1b4f3d16afb265d89a2506c83983da11', class: "toolbar-background" }), h("div", { key: 'da917701a03f82fe0030c68663381f99324dd9aa', class: "toolbar-container" }, h("slot", { key: '89cbc4450b377901cd732dcef02303a41205f202', name: "start" }), h("slot", { key: 'ee00a40995e755970cb9be8ccacaefbe394bca93', name: "secondary" }), h("div", { key: 'ae653739005ac675f789a57a6c5ee6899d24c34b', class: "toolbar-content" }, h("slot", { key: 'e90829ef9c274f14bfd8e85834183d3498bd2825' })), h("slot", { key: '8f5106bb52b434a6760cf6f7848471ab99f2c80b', name: "primary" }), h("slot", { key: '9d20e5120164268411bd7e9e091ced61d24da5cc', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-08-22T11:30:28",
+  "timestamp": "2024-08-26T13:59:49",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.18.3",
@@ -36120,22 +36120,64 @@
         },
         {
           "name": "shape",
-          "type": "\"round\" | undefined",
+          "type": "\"rectangular\" | \"round\" | \"soft\" | undefined",
           "complexType": {
-            "original": "'round'",
-            "resolved": "\"round\" | undefined",
+            "original": "'soft' | 'round' | 'rectangular'",
+            "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
             "references": {}
           },
           "mutable": false,
           "attr": "shape",
           "reflectToAttr": false,
-          "docs": "The shape of the textarea. If \"round\" it will have an increased border radius.",
+          "docs": "Set to `\"soft\"` for a textarea with slightly rounded corners,\n`\"round\"` for a textarea with fully rounded corners, or `\"rectangular\"`\nfor a textarea without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes.",
           "docsTags": [],
           "values": [
+            {
+              "value": "rectangular",
+              "type": "string"
+            },
             {
               "value": "round",
               "type": "string"
             },
+            {
+              "value": "soft",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "size",
+          "type": "\"large\" | \"medium\" | \"small\" | undefined",
+          "complexType": {
+            "original": "'small' | 'medium' | 'large'",
+            "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "size",
+          "reflectToAttr": false,
+          "docs": "The size of the textarea. If \"large\" it will increase the height of the textarea, while\n\"small\" and \"medium\" provide progressively smaller heights. The default size is \"medium\".\nThis property only applies to the `\"ionic\"` theme.",
+          "docsTags": [],
+          "default": "'medium'",
+          "values": [
+            {
+              "value": "large",
+              "type": "string"
+            },
+            {
+              "value": "medium",
+              "type": "string"
+            },
+            {
+              "value": "small",
+              "type": "string"
+            },
             {
               "type": "undefined"
             }

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

@@ -1230,11 +1230,11 @@ const ToolbarTitle = class {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '67f00e2664322d0a5df32e093c7e227fc6f16c98', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f381a740291cd926b40f52a3020fe3905f96fe1f', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: 'cfc8295c9c599a9a61ea794b30169fdd574708f1', class: "toolbar-title" }, h("slot", { key: '2065458af3ed39d230c935332e7ff9c9d2d20e78' }))));
+            }) }, h("div", { key: '01169b8d89fe706b3d6700d60429963be41ccd8d', class: "toolbar-title" }, h("slot", { key: '38222a860da0030c168c3adc8361796e1ba7598f' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1306,10 +1306,10 @@ const Toolbar = class {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '958f4b7dd7edd7e14188ede019a3ec83955047e7', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+        return (h(Host, { key: '0b157e806d08ed75667a8d4c824531274c636c3f', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '13c34671af2a47ee2d13c3348d87590696fe2043', class: "toolbar-background" }), h("div", { key: '00cb26c46ab564017c5b59133082966487f3268a', class: "toolbar-container" }, h("slot", { key: 'a9c5fc777ff5eab4ef91d7c9b274a53012280f35', name: "start" }), h("slot", { key: 'a5a4e11b5d5847ff167ae95b86cd3625d482e257', name: "secondary" }), h("div", { key: 'e9f06b74b6aa933363aa0b671216b37300cc660c', class: "toolbar-content" }, h("slot", { key: '05929530a64a6d497ef5bc69dbc42adc11c9694f' })), h("slot", { key: 'f03445495cd36c54a7a43b47ab47169c53d9d15b', name: "primary" }), h("slot", { key: 'd8a60db04c290933462b517cc6627500bd9ebe34', name: "end" }))));
+            })) }, h("div", { key: '8413374c1b4f3d16afb265d89a2506c83983da11', class: "toolbar-background" }), h("div", { key: 'da917701a03f82fe0030c68663381f99324dd9aa', class: "toolbar-container" }, h("slot", { key: '89cbc4450b377901cd732dcef02303a41205f202', name: "start" }), h("slot", { key: 'ee00a40995e755970cb9be8ccacaefbe394bca93', name: "secondary" }), h("div", { key: 'ae653739005ac675f789a57a6c5ee6899d24c34b', class: "toolbar-content" }, h("slot", { key: 'e90829ef9c274f14bfd8e85834183d3498bd2825' })), h("slot", { key: '8f5106bb52b434a6760cf6f7848471ab99f2c80b', name: "primary" }), h("slot", { key: '9d20e5120164268411bd7e9e091ced61d24da5cc', name: "end" }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -136,9 +136,9 @@ const Thumbnail = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '8911848dc9edd536023c8a68e51752b751e3f0ab', class: {
+        return (h(Host, { key: '8913b780b1ac6a325126622f992da0d4169b5c8c', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'aaa7d7010d4050eebaed490b3ef7e641b076607c' })));
+            } }, h("slot", { key: '10127c5603bc9b750e060e35f8b7f665befce81a' })));
     }
 };
 Thumbnail.style = IonThumbnailStyle0;

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

@@ -264,6 +264,14 @@ const Input = class {
     getValue() {
         return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
     }
+    getFill() {
+        const theme = getIonTheme(this);
+        const { fill } = this;
+        if (theme === 'ionic' && fill === undefined) {
+            return 'outline';
+        }
+        return fill;
+    }
     getLabelPlacement() {
         const theme = getIonTheme(this);
         const { el, labelPlacement } = this;
@@ -449,9 +457,10 @@ const Input = class {
         return config.get('inputClearIcon', defaultIcon);
     }
     render() {
-        const { disabled, fill, readonly, inputId, el, hasFocus, clearInput, inputClearIcon } = this;
+        const { disabled, readonly, inputId, el, hasFocus, clearInput, inputClearIcon } = this;
         const theme = getIonTheme(this);
         const value = this.getValue();
+        const fill = this.getFill();
         const size = this.getSize();
         const shape = this.getShape();
         const inItem = hostContext('ion-item', this.el);
@@ -477,7 +486,7 @@ const Input = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '7ff842b13cd33bc119946de09f790f1563e31518', class: createColorClasses(this.color, {
+        return (h(Host, { key: '95fe18aa3f3056ce88a2f08c0e47382213e0eeb2', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -490,7 +499,7 @@ const Input = class {
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, h("label", { key: '218e909896d3f467b29821c1a209b4180b071427', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '022a9ead5769f532052b6c675a87cd79db98db7e', class: "native-wrapper" }, 
+            }) }, h("label", { key: '088e5cbdc63481e83f2cecf1228e31533de11fe3', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '0311bc8d8ca91920c9ed8630762933d10a5d8df4', class: "native-wrapper" }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -500,7 +509,7 @@ const Input = class {
          * <label> element, ensuring that clicking the label text
          * focuses the input.
          */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: '387fda749ac395c9f4b478c9267f25991238103c', class: "input-outline" }), h("slot", { key: '5a135729d8efda822d3b6e9004148c3233fd8085', name: "start" }), h("input", Object.assign({ key: 'b64d49881b9de32ea40a9fb5be45e3cb167929ea', 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)), clearInput && !readonly && !disabled && (h("button", { key: 'f04bdaf678c49d11fbe69eaa9710a1585cbca438', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+        theme === 'ionic' && fill === 'outline' && h("div", { key: '8dd4695edebba5964e1dbb1d733b2d2e636ec581', class: "input-outline" }), h("slot", { key: '2065978166c9017f9383de71861babdfc3fb1cbe', name: "start" }), h("input", Object.assign({ key: '8fb6627afac9457eb23abb149607566a18175ef4', 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)), clearInput && !readonly && !disabled && (h("button", { key: '739f486081fc9e7ba6b1387dd6a813f3a2eb484a', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
@@ -515,7 +524,7 @@ const Input = class {
                  * for screen readers as it means users would be unable to swipe past the clear button.
                  */
                 ev.stopPropagation();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'e06cb3f0c583d3d1c6a1b41a3903f7252957c913', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: 'b0b22fe170a3ed593aa1ad20a20669cafc1e1062', name: "end" })), shouldRenderHighlight && h("div", { key: 'f06bd25e97d79f2d7a44105ab113187692cc52d3', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '0775e8fa9b9cf9df17743472edbc2f307e4f4b9a', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: '72e48a851f3fb2450af96f9d271b27dcb0bca047', name: "end" })), shouldRenderHighlight && h("div", { key: 'e91752ecd290374ae7adbe0b99163092a9e3f0fd', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {