@ionic/core 8.0.1-dev.11713535425.1a4afba3 → 8.0.1-dev.11713879639.102f51a0

package/components/input-shims.js

@@ -336,7 +336,7 @@ const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardH
     const focusOut = () => {
         hasKeyboardBeenPresentedForTextField = false;
         win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.removeEventListener('focusout', focusOut);
+        componentEl.removeEventListener('focusout', focusOut, true);
     };
     /**
      * When the input is about to receive
@@ -356,13 +356,13 @@ const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardH
         }
         jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, addScrollPadding, disableClonedInput, platformHeight);
         win === null || win === void 0 ? void 0 : win.addEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.addEventListener('focusout', focusOut);
+        componentEl.addEventListener('focusout', focusOut, true);
     };
-    componentEl.addEventListener('focusin', focusIn);
+    componentEl.addEventListener('focusin', focusIn, true);
     return () => {
-        componentEl.removeEventListener('focusin', focusIn);
+        componentEl.removeEventListener('focusin', focusIn, true);
         win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.removeEventListener('focusout', focusOut);
+        componentEl.removeEventListener('focusout', focusOut, true);
     };
 };
 /**

package/components/ion-input.js

@@ -75,7 +75,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                 ev.preventDefault();
                 ev.stopPropagation();
                 // Attempt to focus input again after pressing clear button
-                console.log('hi there');
                 this.setFocus();
             }
             this.value = '';
@@ -176,6 +175,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
          * such as [type] in Angular.
          */
         this.onTypeChange();
+        this.debounceChanged();
     }
     componentDidRender() {
         var _a;
@@ -402,7 +402,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'c151cc531804483693052773aeeec1ee5f0c8a47', class: createColorClasses(this.color, {
+        return (h(Host, { key: '083568e68a2970485e93a84ad3b837c117e03fed', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -413,22 +413,14 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: 'fbe253f1e0dd24ad13333f4dc06dd13f6b33a042', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '817707ed2e4dce8b5ae2391960d1be367a1e2ddf', class: "native-wrapper" }, h("slot", { key: '776c6b305b275e0babdfd6116ccc3f5399c97d38', name: "start" }), h("input", Object.assign({ key: 'eb5bdc9fda239c8edd7ed7fdc78517728a351a50', 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", { key: '57ff8319da7ca85f3ce41a7581c55b4d91202542', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '5e6767a20b8ac61d5df69106f4ce11ecc46ae5bf', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '4af8df127e8194b4eeb8b16936a36489aee17009', class: "native-wrapper" }, h("slot", { key: '90e925fa36a5c057a4ca5e03d5fcaf8e12e711ad', name: "start" }), h("input", Object.assign({ key: '0a5455e8c31beca48e08b97faa5e3e069822248f', 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", { key: '2f51b23231d9ca819d2af069f3d32df4e29d042d', "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();
-            }, onFocusin: (ev) => {
-                /**
-                 * Prevent the focusin event from bubbling otherwise it will cause the focusin
-                 * event listener in scroll assist to fire. When this fires, focus will be moved
-                 * back to the input even if the clear button was never tapped. This poses issues
-                 * 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: 'c4c74c4387e8e81b4e00e0800ad7fd65d190a4ca', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '6cf9e37091750a70ae97faa0104822f92cd313f5', name: "end" })), shouldRenderHighlight && h("div", { key: 'd4d032e244ae917cbedddac633d83501a1a2cf5b', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '569290d2b83d2752cfda6b5d8a84c06945b5c943', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: 'c94a79a60d5d403941dd641202125367ad490e53', name: "end" })), shouldRenderHighlight && h("div", { key: 'b4f192ac376fdb1a2b0708797cac46f07818e962', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/cjs/{input-shims-9e59ef62.js → input-shims-20d639e6.js}

@@ -340,7 +340,7 @@ const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardH
     const focusOut = () => {
         hasKeyboardBeenPresentedForTextField = false;
         index.win === null || index.win === void 0 ? void 0 : index.win.removeEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.removeEventListener('focusout', focusOut);
+        componentEl.removeEventListener('focusout', focusOut, true);
     };
     /**
      * When the input is about to receive
@@ -360,13 +360,13 @@ const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardH
         }
         jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, addScrollPadding, disableClonedInput, platformHeight);
         index.win === null || index.win === void 0 ? void 0 : index.win.addEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.addEventListener('focusout', focusOut);
+        componentEl.addEventListener('focusout', focusOut, true);
     };
-    componentEl.addEventListener('focusin', focusIn);
+    componentEl.addEventListener('focusin', focusIn, true);
     return () => {
-        componentEl.removeEventListener('focusin', focusIn);
+        componentEl.removeEventListener('focusin', focusIn, true);
         index.win === null || index.win === void 0 ? void 0 : index.win.removeEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.removeEventListener('focusout', focusOut);
+        componentEl.removeEventListener('focusout', focusOut, true);
     };
 };
 /**

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

@@ -45,7 +45,7 @@ const App = class {
                      * platforms proceed into this block.
                      */
                     const platform = ionicGlobal.isPlatform(window, 'ios') ? 'ios' : 'android';
-                    Promise.resolve().then(function () { return require('./input-shims-9e59ef62.js'); }).then((module) => module.startInputShims(ionicGlobal.config, platform));
+                    Promise.resolve().then(function () { return require('./input-shims-20d639e6.js'); }).then((module) => module.startInputShims(ionicGlobal.config, platform));
                 }
                 const hardwareBackButtonModule = await Promise.resolve().then(function () { return require('./hardware-back-button-44e7c052.js'); });
                 const supportsHardwareBackButtonEvents = isHybrid || hardwareBackButton.shouldUseCloseWatcher();

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

@@ -79,7 +79,6 @@ const Input = class {
                 ev.preventDefault();
                 ev.stopPropagation();
                 // Attempt to focus input again after pressing clear button
-                console.log('hi there');
                 this.setFocus();
             }
             this.value = '';
@@ -180,6 +179,7 @@ const Input = class {
          * such as [type] in Angular.
          */
         this.onTypeChange();
+        this.debounceChanged();
     }
     componentDidRender() {
         var _a;
@@ -406,7 +406,7 @@ const Input = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (index.h(index.Host, { key: 'c151cc531804483693052773aeeec1ee5f0c8a47', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '083568e68a2970485e93a84ad3b837c117e03fed', class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -417,22 +417,14 @@ const Input = class {
                 'in-item': inItem,
                 'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, index.h("label", { key: 'fbe253f1e0dd24ad13333f4dc06dd13f6b33a042', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: '817707ed2e4dce8b5ae2391960d1be367a1e2ddf', class: "native-wrapper" }, index.h("slot", { key: '776c6b305b275e0babdfd6116ccc3f5399c97d38', name: "start" }), index.h("input", Object.assign({ key: 'eb5bdc9fda239c8edd7ed7fdc78517728a351a50', 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 && (index.h("button", { key: '57ff8319da7ca85f3ce41a7581c55b4d91202542', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, index.h("label", { key: '5e6767a20b8ac61d5df69106f4ce11ecc46ae5bf', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: '4af8df127e8194b4eeb8b16936a36489aee17009', class: "native-wrapper" }, index.h("slot", { key: '90e925fa36a5c057a4ca5e03d5fcaf8e12e711ad', name: "start" }), index.h("input", Object.assign({ key: '0a5455e8c31beca48e08b97faa5e3e069822248f', 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 && (index.h("button", { key: '2f51b23231d9ca819d2af069f3d32df4e29d042d', "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();
-            }, onFocusin: (ev) => {
-                /**
-                 * Prevent the focusin event from bubbling otherwise it will cause the focusin
-                 * event listener in scroll assist to fire. When this fires, focus will be moved
-                 * back to the input even if the clear button was never tapped. This poses issues
-                 * for screen readers as it means users would be unable to swipe past the clear button.
-                 */
-                ev.stopPropagation();
-            }, onClick: this.clearTextInput }, index.h("ion-icon", { key: 'c4c74c4387e8e81b4e00e0800ad7fd65d190a4ca', "aria-hidden": "true", icon: mode === 'ios' ? index$1.closeCircle : index$1.closeSharp }))), index.h("slot", { key: '6cf9e37091750a70ae97faa0104822f92cd313f5', name: "end" })), shouldRenderHighlight && index.h("div", { key: 'd4d032e244ae917cbedddac633d83501a1a2cf5b', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, index.h("ion-icon", { key: '569290d2b83d2752cfda6b5d8a84c06945b5c943', "aria-hidden": "true", icon: mode === 'ios' ? index$1.closeCircle : index$1.closeSharp }))), index.h("slot", { key: 'c94a79a60d5d403941dd641202125367ad490e53', name: "end" })), shouldRenderHighlight && index.h("div", { key: 'b4f192ac376fdb1a2b0708797cac46f07818e962', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ionic.cjs.js

@@ -10,7 +10,7 @@ const appGlobals = require('./app-globals-5bfa2d7f.js');
 require('./ionic-global-62487d02.js');
 
 /*
- Stencil Client Patch Browser v4.15.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.16.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     {

package/dist/collection/collection-manifest.json

@@ -96,8 +96,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.15.0",
-    "typescriptVersion": "5.4.4"
+    "version": "4.16.0",
+    "typescriptVersion": "5.4.5"
   },
   "collections": [
     {

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

@@ -69,7 +69,6 @@ export class Input {
                 ev.preventDefault();
                 ev.stopPropagation();
                 // Attempt to focus input again after pressing clear button
-                console.log('hi there');
                 this.setFocus();
             }
             this.value = '';
@@ -170,6 +169,7 @@ export class Input {
          * such as [type] in Angular.
          */
         this.onTypeChange();
+        this.debounceChanged();
     }
     componentDidRender() {
         var _a;
@@ -396,7 +396,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'c151cc531804483693052773aeeec1ee5f0c8a47', class: createColorClasses(this.color, {
+        return (h(Host, { key: '083568e68a2970485e93a84ad3b837c117e03fed', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -407,22 +407,14 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: 'fbe253f1e0dd24ad13333f4dc06dd13f6b33a042', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '817707ed2e4dce8b5ae2391960d1be367a1e2ddf', class: "native-wrapper" }, h("slot", { key: '776c6b305b275e0babdfd6116ccc3f5399c97d38', name: "start" }), h("input", Object.assign({ key: 'eb5bdc9fda239c8edd7ed7fdc78517728a351a50', 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", { key: '57ff8319da7ca85f3ce41a7581c55b4d91202542', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '5e6767a20b8ac61d5df69106f4ce11ecc46ae5bf', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '4af8df127e8194b4eeb8b16936a36489aee17009', class: "native-wrapper" }, h("slot", { key: '90e925fa36a5c057a4ca5e03d5fcaf8e12e711ad', name: "start" }), h("input", Object.assign({ key: '0a5455e8c31beca48e08b97faa5e3e069822248f', 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", { key: '2f51b23231d9ca819d2af069f3d32df4e29d042d', "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();
-            }, onFocusin: (ev) => {
-                /**
-                 * Prevent the focusin event from bubbling otherwise it will cause the focusin
-                 * event listener in scroll assist to fire. When this fires, focus will be moved
-                 * back to the input even if the clear button was never tapped. This poses issues
-                 * 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: 'c4c74c4387e8e81b4e00e0800ad7fd65d190a4ca', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '6cf9e37091750a70ae97faa0104822f92cd313f5', name: "end" })), shouldRenderHighlight && h("div", { key: 'd4d032e244ae917cbedddac633d83501a1a2cf5b', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '569290d2b83d2752cfda6b5d8a84c06945b5c943', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: 'c94a79a60d5d403941dd641202125367ad490e53', name: "end" })), shouldRenderHighlight && h("div", { key: 'b4f192ac376fdb1a2b0708797cac46f07818e962', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/utils/input-shims/hacks/scroll-assist.js

@@ -96,7 +96,7 @@ export const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, ke
     const focusOut = () => {
         hasKeyboardBeenPresentedForTextField = false;
         win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.removeEventListener('focusout', focusOut);
+        componentEl.removeEventListener('focusout', focusOut, true);
     };
     /**
      * When the input is about to receive
@@ -116,13 +116,13 @@ export const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, ke
         }
         jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, addScrollPadding, disableClonedInput, platformHeight);
         win === null || win === void 0 ? void 0 : win.addEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.addEventListener('focusout', focusOut);
+        componentEl.addEventListener('focusout', focusOut, true);
     };
-    componentEl.addEventListener('focusin', focusIn);
+    componentEl.addEventListener('focusin', focusIn, true);
     return () => {
-        componentEl.removeEventListener('focusin', focusIn);
+        componentEl.removeEventListener('focusin', focusIn, true);
         win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.removeEventListener('focusout', focusOut);
+        componentEl.removeEventListener('focusout', focusOut, true);
     };
 };
 /**

package/dist/collection/utils/test/playwright/page/utils/goto.js

@@ -9,7 +9,7 @@
  * to be hydrated before proceeding with the test.
  */
 export const goto = async (page, url, testInfo, originalFn, options) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (options === undefined && testInfo.project.metadata.mode === undefined) {
         throw new Error(`
 A config must be passed to page.goto to use a generator test:
@@ -22,13 +22,16 @@ configs().forEach(({ config, title }) => {
     }
     let mode;
     let direction;
+    let palette;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
+        palette = testInfo.project.metadata.palette;
     }
     else {
         mode = options.mode;
         direction = options.direction;
+        palette = options.palette;
     }
     const rtlString = direction === 'rtl' ? 'true' : undefined;
     const splitUrl = url.split('?');
@@ -40,12 +43,14 @@ configs().forEach(({ config, title }) => {
     const urlToParams = new URLSearchParams(paramsString);
     const formattedMode = (_a = urlToParams.get('ionic:mode')) !== null && _a !== void 0 ? _a : mode;
     const formattedRtl = (_b = urlToParams.get('rtl')) !== null && _b !== void 0 ? _b : rtlString;
-    const ionicTesting = (_c = urlToParams.get('ionic:_testing')) !== null && _c !== void 0 ? _c : true;
+    const formattedPalette = (_c = urlToParams.get('palette')) !== null && _c !== void 0 ? _c : palette;
+    const ionicTesting = (_d = urlToParams.get('ionic:_testing')) !== null && _d !== void 0 ? _d : true;
     /**
      * Pass through other custom query params
      */
     urlToParams.delete('ionic:mode');
     urlToParams.delete('rtl');
+    urlToParams.delete('palette');
     urlToParams.delete('ionic:_testing');
     /**
      * Convert remaining query params to a string.
@@ -54,7 +59,7 @@ configs().forEach(({ config, title }) => {
      */
     const remainingQueryParams = decodeURIComponent(urlToParams.toString());
     const remainingQueryParamsString = remainingQueryParams == '' ? '' : `&${remainingQueryParams}`;
-    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&rtl=${formattedRtl}${remainingQueryParamsString}`;
+    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&rtl=${formattedRtl}&palette=${formattedPalette}${remainingQueryParamsString}`;
     testInfo.annotations.push({
         type: 'mode',
         description: formattedMode,
@@ -63,6 +68,10 @@ configs().forEach(({ config, title }) => {
         type: 'direction',
         description: formattedRtl === 'true' ? 'rtl' : 'ltr',
     });
+    testInfo.annotations.push({
+        type: 'palette',
+        description: formattedPalette,
+    });
     const result = await Promise.all([
         page.waitForFunction(() => window.testAppLoaded === true, { timeout: 4750 }),
         originalFn(formattedUrl, options),

package/dist/docs.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2024-04-19T14:05:43",
+  "timestamp": "2024-04-23T13:42:46",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.15.0",
-    "typescriptVersion": "5.4.4"
+    "version": "4.16.0",
+    "typescriptVersion": "5.4.5"
   },
   "components": [
     {

package/dist/esm/{input-shims-0314bbe5.js → input-shims-4530285e.js}

@@ -338,7 +338,7 @@ const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardH
     const focusOut = () => {
         hasKeyboardBeenPresentedForTextField = false;
         win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.removeEventListener('focusout', focusOut);
+        componentEl.removeEventListener('focusout', focusOut, true);
     };
     /**
      * When the input is about to receive
@@ -358,13 +358,13 @@ const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardH
         }
         jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight, addScrollPadding, disableClonedInput, platformHeight);
         win === null || win === void 0 ? void 0 : win.addEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.addEventListener('focusout', focusOut);
+        componentEl.addEventListener('focusout', focusOut, true);
     };
-    componentEl.addEventListener('focusin', focusIn);
+    componentEl.addEventListener('focusin', focusIn, true);
     return () => {
-        componentEl.removeEventListener('focusin', focusIn);
+        componentEl.removeEventListener('focusin', focusIn, true);
         win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.removeEventListener('focusout', focusOut);
+        componentEl.removeEventListener('focusout', focusOut, true);
     };
 };
 /**

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

@@ -41,7 +41,7 @@ const App = class {
                      * platforms proceed into this block.
                      */
                     const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
-                    import('./input-shims-0314bbe5.js').then((module) => module.startInputShims(config, platform));
+                    import('./input-shims-4530285e.js').then((module) => module.startInputShims(config, platform));
                 }
                 const hardwareBackButtonModule = await import('./hardware-back-button-ba8f64c2.js');
                 const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();

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

@@ -75,7 +75,6 @@ const Input = class {
                 ev.preventDefault();
                 ev.stopPropagation();
                 // Attempt to focus input again after pressing clear button
-                console.log('hi there');
                 this.setFocus();
             }
             this.value = '';
@@ -176,6 +175,7 @@ const Input = class {
          * such as [type] in Angular.
          */
         this.onTypeChange();
+        this.debounceChanged();
     }
     componentDidRender() {
         var _a;
@@ -402,7 +402,7 @@ const Input = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'c151cc531804483693052773aeeec1ee5f0c8a47', class: createColorClasses(this.color, {
+        return (h(Host, { key: '083568e68a2970485e93a84ad3b837c117e03fed', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -413,22 +413,14 @@ const Input = class {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: 'fbe253f1e0dd24ad13333f4dc06dd13f6b33a042', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '817707ed2e4dce8b5ae2391960d1be367a1e2ddf', class: "native-wrapper" }, h("slot", { key: '776c6b305b275e0babdfd6116ccc3f5399c97d38', name: "start" }), h("input", Object.assign({ key: 'eb5bdc9fda239c8edd7ed7fdc78517728a351a50', 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", { key: '57ff8319da7ca85f3ce41a7581c55b4d91202542', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '5e6767a20b8ac61d5df69106f4ce11ecc46ae5bf', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '4af8df127e8194b4eeb8b16936a36489aee17009', class: "native-wrapper" }, h("slot", { key: '90e925fa36a5c057a4ca5e03d5fcaf8e12e711ad', name: "start" }), h("input", Object.assign({ key: '0a5455e8c31beca48e08b97faa5e3e069822248f', 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", { key: '2f51b23231d9ca819d2af069f3d32df4e29d042d', "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();
-            }, onFocusin: (ev) => {
-                /**
-                 * Prevent the focusin event from bubbling otherwise it will cause the focusin
-                 * event listener in scroll assist to fire. When this fires, focus will be moved
-                 * back to the input even if the clear button was never tapped. This poses issues
-                 * 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: 'c4c74c4387e8e81b4e00e0800ad7fd65d190a4ca', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '6cf9e37091750a70ae97faa0104822f92cd313f5', name: "end" })), shouldRenderHighlight && h("div", { key: 'd4d032e244ae917cbedddac633d83501a1a2cf5b', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '569290d2b83d2752cfda6b5d8a84c06945b5c943', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: 'c94a79a60d5d403941dd641202125367ad490e53', name: "end" })), shouldRenderHighlight && h("div", { key: 'b4f192ac376fdb1a2b0708797cac46f07818e962', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ionic.js

@@ -7,7 +7,7 @@ import { g as globalScripts } from './app-globals-49873df1.js';
 import './ionic-global-e6c98cd0.js';
 
 /*
- Stencil Client Patch Browser v4.15.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.16.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     {

package/dist/esm-es5/input-shims-4530285e.js

@@ -0,0 +1,4 @@
+import{__awaiter,__generator,__spreadArray}from"tslib";
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */import{w as win,d as doc}from"./index-a5d50daf.js";import{g as getScrollElement,c as scrollByPoint,f as findClosestIonContent}from"./index-5cc724f3.js";import{a as addEventListener,b as removeEventListener,r as raf,c as componentOnReady}from"./helpers-da915de8.js";import{a as KeyboardResize,K as Keyboard}from"./keyboard-73175e24.js";import"./index-9b0d46f4.js";import"./capacitor-59395cbd.js";var cloneMap=new WeakMap;var relocateInput=function(r,n,e,t,i){if(t===void 0){t=0}if(i===void 0){i=false}if(cloneMap.has(r)===e){return}if(e){addClone(r,n,t,i)}else{removeClone(r,n)}};var isFocused=function(r){return r===r.getRootNode().activeElement};var addClone=function(r,n,e,t){if(t===void 0){t=false}var i=n.parentNode;var o=n.cloneNode(false);o.classList.add("cloned-input");o.tabIndex=-1;if(t){o.disabled=true}i.appendChild(o);cloneMap.set(r,o);var a=r.ownerDocument;var u=a.dir==="rtl"?9999:-9999;r.style.pointerEvents="none";n.style.transform="translate3d(".concat(u,"px,").concat(e,"px,0) scale(0)")};var removeClone=function(r,n){var e=cloneMap.get(r);if(e){cloneMap.delete(r);e.remove()}r.style.pointerEvents="";n.style.transform=""};var SCROLL_AMOUNT_PADDING=50;var enableHideCaretOnScroll=function(r,n,e){if(!e||!n){return function(){return}}var t=function(e){if(isFocused(n)){relocateInput(r,n,e)}};var i=function(){return relocateInput(r,n,false)};var o=function(){return t(true)};var a=function(){return t(false)};addEventListener(e,"ionScrollStart",o);addEventListener(e,"ionScrollEnd",a);n.addEventListener("blur",i);return function(){removeEventListener(e,"ionScrollStart",o);removeEventListener(e,"ionScrollEnd",a);n.removeEventListener("blur",i)}};var SKIP_SELECTOR="input, textarea, [no-blur], [contenteditable]";var enableInputBlurring=function(){var r=true;var n=false;var e=document;var t=function(){n=true};var i=function(){r=true};var o=function(t){if(n){n=false;return}var i=e.activeElement;if(!i){return}if(i.matches(SKIP_SELECTOR)){return}var o=t.target;if(o===i){return}if(o.matches(SKIP_SELECTOR)||o.closest(SKIP_SELECTOR)){return}r=false;setTimeout((function(){if(!r){i.blur()}}),50)};addEventListener(e,"ionScrollStart",t);e.addEventListener("focusin",i,true);e.addEventListener("touchend",o,false);return function(){removeEventListener(e,"ionScrollStart",t,true);e.removeEventListener("focusin",i,true);e.removeEventListener("touchend",o,false)}};var SCROLL_ASSIST_SPEED=.3;var getScrollData=function(r,n,e,t){var i;var o=(i=r.closest("ion-item,[ion-item]"))!==null&&i!==void 0?i:r;return calcScrollData(o.getBoundingClientRect(),n.getBoundingClientRect(),e,t)};var calcScrollData=function(r,n,e,t){var i=r.top;var o=r.bottom;var a=n.top;var u=Math.min(n.bottom,t-e);var c=a+15;var d=u-SCROLL_AMOUNT_PADDING;var f=d-o;var l=c-i;var s=Math.round(f<0?-f:l>0?-l:0);var v=Math.min(s,i-a);var S=Math.abs(v);var _=S/SCROLL_ASSIST_SPEED;var w=Math.min(400,Math.max(150,_));return{scrollAmount:v,scrollDuration:w,scrollPadding:e,inputSafeY:-(i-c)+4}};var PADDING_TIMER_KEY="$ionPaddingTimer";var setScrollPadding=function(r,n,e){var t=r[PADDING_TIMER_KEY];if(t){clearTimeout(t)}if(n>0){r.style.setProperty("--keyboard-offset","".concat(n,"px"))}else{r[PADDING_TIMER_KEY]=setTimeout((function(){r.style.setProperty("--keyboard-offset","0px");if(e){e()}}),120)}};var setClearScrollPaddingListener=function(r,n,e){var t=function(){if(n){setScrollPadding(n,0,e)}};r.addEventListener("focusout",t,{once:true})};var currentPadding=0;var SKIP_SCROLL_ASSIST="data-ionic-skip-scroll-assist";var enableScrollAssist=function(r,n,e,t,i,o,a,u){if(u===void 0){u=false}var c=o&&(a===undefined||a.mode===KeyboardResize.None);var d=false;var f=win!==undefined?win.innerHeight:0;var l=function(i){if(d===false){d=true;return}jsSetFocus(r,n,e,t,i.detail.keyboardHeight,c,u,f,false)};var s=function(){d=false;win===null||win===void 0?void 0:win.removeEventListener("ionKeyboardDidShow",l);r.removeEventListener("focusout",s,true)};var v=function(){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(o){if(n.hasAttribute(SKIP_SCROLL_ASSIST)){n.removeAttribute(SKIP_SCROLL_ASSIST);return[2]}jsSetFocus(r,n,e,t,i,c,u,f);win===null||win===void 0?void 0:win.addEventListener("ionKeyboardDidShow",l);r.addEventListener("focusout",s,true);return[2]}))}))};r.addEventListener("focusin",v,true);return function(){r.removeEventListener("focusin",v,true);win===null||win===void 0?void 0:win.removeEventListener("ionKeyboardDidShow",l);r.removeEventListener("focusout",s,true)}};var setManualFocus=function(r){if(document.activeElement===r){return}r.setAttribute(SKIP_SCROLL_ASSIST,"true");r.focus()};var jsSetFocus=function(r,n,e,t,i,o){var a=[];for(var u=6;u<arguments.length;u++){a[u-6]=arguments[u]}return __awaiter(void 0,__spreadArray([r,n,e,t,i,o],a,true),void 0,(function(r,n,e,t,i,o,a,u,c){var d,f,l,s,v,S;if(a===void 0){a=false}if(u===void 0){u=0}if(c===void 0){c=true}return __generator(this,(function(_){switch(_.label){case 0:if(!e&&!t){return[2]}d=getScrollData(r,e||t,i,u);if(e&&Math.abs(d.scrollAmount)<4){setManualFocus(n);if(o&&e!==null){setScrollPadding(e,currentPadding);setClearScrollPaddingListener(n,e,(function(){return currentPadding=0}))}return[2]}relocateInput(r,n,true,d.inputSafeY,a);setManualFocus(n);raf((function(){return r.click()}));if(o&&e){currentPadding=d.scrollPadding;setScrollPadding(e,currentPadding)}if(!(typeof window!=="undefined"))return[3,3];l=function(){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(f!==undefined){clearTimeout(f)}window.removeEventListener("ionKeyboardDidShow",s);window.removeEventListener("ionKeyboardDidShow",l);if(!e)return[3,2];return[4,scrollByPoint(e,0,d.scrollAmount,d.scrollDuration)];case 1:t.sent();t.label=2;case 2:relocateInput(r,n,false,d.inputSafeY);setManualFocus(n);if(o){setClearScrollPaddingListener(n,e,(function(){return currentPadding=0}))}return[2]}}))}))};s=function(){window.removeEventListener("ionKeyboardDidShow",s);window.addEventListener("ionKeyboardDidShow",l)};if(!e)return[3,2];return[4,getScrollElement(e)];case 1:v=_.sent();S=v.scrollHeight-v.clientHeight;if(c&&d.scrollAmount>S-v.scrollTop){if(n.type==="password"){d.scrollAmount+=SCROLL_AMOUNT_PADDING;window.addEventListener("ionKeyboardDidShow",s)}else{window.addEventListener("ionKeyboardDidShow",l)}f=setTimeout(l,1e3);return[2]}_.label=2;case 2:l();_.label=3;case 3:return[2]}}))}))};var INPUT_BLURRING=true;var startInputShims=function(r,n){return __awaiter(void 0,void 0,void 0,(function(){var e,t,i,o,a,u,c,d,f,l,s,v,S,_,w,p;return __generator(this,(function(I){switch(I.label){case 0:if(doc===undefined){return[2]}e=n==="ios";t=n==="android";i=r.getNumber("keyboardHeight",290);o=r.getBoolean("scrollAssist",true);a=r.getBoolean("hideCaretOnScroll",e);u=r.getBoolean("inputBlurring",false);c=r.getBoolean("scrollPadding",true);d=Array.from(doc.querySelectorAll("ion-input, ion-textarea"));f=new WeakMap;l=new WeakMap;return[4,Keyboard.getResizeMode()];case 1:s=I.sent();v=function(r){return __awaiter(void 0,void 0,void 0,(function(){var n,e,u,d,v,S,v;return __generator(this,(function(_){switch(_.label){case 0:return[4,new Promise((function(n){return componentOnReady(r,n)}))];case 1:_.sent();n=r.shadowRoot||r;e=n.querySelector("input")||n.querySelector("textarea");u=findClosestIonContent(r);d=!u?r.closest("ion-footer"):null;if(!e){return[2]}if(!!u&&a&&!f.has(r)){v=enableHideCaretOnScroll(r,e,u);f.set(r,v)}S=e.type==="date"||e.type==="datetime-local";if(!S&&(!!u||!!d)&&o&&!l.has(r)){v=enableScrollAssist(r,e,u,d,i,c,s,t);l.set(r,v)}return[2]}}))}))};S=function(r){if(a){var n=f.get(r);if(n){n()}f.delete(r)}if(o){var n=l.get(r);if(n){n()}l.delete(r)}};if(u&&INPUT_BLURRING){enableInputBlurring()}for(_=0,w=d;_<w.length;_++){p=w[_];v(p)}doc.addEventListener("ionInputDidLoad",(function(r){v(r.detail)}));doc.addEventListener("ionInputDidUnload",(function(r){S(r.detail)}));return[2]}}))}))};export{startInputShims};