@ionic/core 8.0.0-rc.2 → 8.0.1-dev.11713535425.1a4afba3

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, true);
+        componentEl.removeEventListener('focusout', focusOut);
     };
     /**
      * 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, true);
+        componentEl.addEventListener('focusout', focusOut);
     };
-    componentEl.addEventListener('focusin', focusIn, true);
+    componentEl.addEventListener('focusin', focusIn);
     return () => {
-        componentEl.removeEventListener('focusin', focusIn, true);
+        componentEl.removeEventListener('focusin', focusIn);
         win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.removeEventListener('focusout', focusOut, true);
+        componentEl.removeEventListener('focusout', focusOut);
     };
 };
 /**

package/components/ion-input.js

@@ -75,6 +75,7 @@ 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 = '';
@@ -401,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: '51c797adf8a7a03e82e02d218addad81836e1e98', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c151cc531804483693052773aeeec1ee5f0c8a47', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -412,14 +413,22 @@ 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: '6d00404de6673d9c650162a8fd23acc8981bff05', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'ebb124f7f8a0c885043be776242648681a79a47c', class: "native-wrapper" }, h("slot", { key: '9075ddd2b68afa3f1989d09ab5b88403eb20aa00', name: "start" }), h("input", Object.assign({ key: '8be4b3cd6b438742d62db98e00ee788a03673ca4', 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: 'f06624d084ac036981e499b6145bee957311fc74', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, 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) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'aaa15a1ab70c008ee6b5e3c64abc1480e5732fc9', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '67abecd72bf5a764e79504b59d9934dbeb66cff9', name: "end" })), shouldRenderHighlight && h("div", { key: '048a7aa3cc8fef97a34f2b25de10730a1de30c0e', class: "input-highlight" })), this.renderBottomContent()));
+            }, 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()));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/cjs/{input-shims-20d639e6.js → input-shims-9e59ef62.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, true);
+        componentEl.removeEventListener('focusout', focusOut);
     };
     /**
      * 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, true);
+        componentEl.addEventListener('focusout', focusOut);
     };
-    componentEl.addEventListener('focusin', focusIn, true);
+    componentEl.addEventListener('focusin', focusIn);
     return () => {
-        componentEl.removeEventListener('focusin', focusIn, true);
+        componentEl.removeEventListener('focusin', focusIn);
         index.win === null || index.win === void 0 ? void 0 : index.win.removeEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.removeEventListener('focusout', focusOut, true);
+        componentEl.removeEventListener('focusout', focusOut);
     };
 };
 /**

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-20d639e6.js'); }).then((module) => module.startInputShims(ionicGlobal.config, platform));
+                    Promise.resolve().then(function () { return require('./input-shims-9e59ef62.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,6 +79,7 @@ const Input = class {
                 ev.preventDefault();
                 ev.stopPropagation();
                 // Attempt to focus input again after pressing clear button
+                console.log('hi there');
                 this.setFocus();
             }
             this.value = '';
@@ -405,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: '51c797adf8a7a03e82e02d218addad81836e1e98', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: 'c151cc531804483693052773aeeec1ee5f0c8a47', class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -416,14 +417,22 @@ const Input = class {
                 'in-item': inItem,
                 'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, index.h("label", { key: '6d00404de6673d9c650162a8fd23acc8981bff05', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: 'ebb124f7f8a0c885043be776242648681a79a47c', class: "native-wrapper" }, index.h("slot", { key: '9075ddd2b68afa3f1989d09ab5b88403eb20aa00', name: "start" }), index.h("input", Object.assign({ key: '8be4b3cd6b438742d62db98e00ee788a03673ca4', 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: 'f06624d084ac036981e499b6145bee957311fc74', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, 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) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, index.h("ion-icon", { key: 'aaa15a1ab70c008ee6b5e3c64abc1480e5732fc9', "aria-hidden": "true", icon: mode === 'ios' ? index$1.closeCircle : index$1.closeSharp }))), index.h("slot", { key: '67abecd72bf5a764e79504b59d9934dbeb66cff9', name: "end" })), shouldRenderHighlight && index.h("div", { key: '048a7aa3cc8fef97a34f2b25de10730a1de30c0e', class: "input-highlight" })), this.renderBottomContent()));
+            }, 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()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/datetime/test/color/datetime.e2e.js

@@ -6,15 +6,22 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across directions
  */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('datetime: color'), () => {
         test('should not have visual regressions', async ({ page }) => {
-            await page.goto('/src/components/datetime/test/color', config);
-            const datetime = page.locator('#color-datetime');
-            await expect(datetime).toHaveScreenshot(screenshot(`datetime-color`));
-            await page.evaluate(() => document.body.classList.toggle('dark'));
-            await page.waitForChanges();
-            await expect(datetime).toHaveScreenshot(screenshot(`datetime-color-dark`));
+            await page.setContent(`
+        <div id="container" style="width: 250px;">
+          <ion-datetime
+            color="danger"
+            value="2022-05-03"
+            show-default-title="true"
+            show-default-buttons="true"
+          ></ion-datetime>
+        </div>
+      `, config);
+            const container = page.locator('#container');
+            await page.locator('.datetime-ready').waitFor();
+            await expect(container).toHaveScreenshot(screenshot(`datetime-color`));
         });
     });
 });

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

@@ -69,6 +69,7 @@ export class Input {
                 ev.preventDefault();
                 ev.stopPropagation();
                 // Attempt to focus input again after pressing clear button
+                console.log('hi there');
                 this.setFocus();
             }
             this.value = '';
@@ -395,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: '51c797adf8a7a03e82e02d218addad81836e1e98', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c151cc531804483693052773aeeec1ee5f0c8a47', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -406,14 +407,22 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '6d00404de6673d9c650162a8fd23acc8981bff05', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'ebb124f7f8a0c885043be776242648681a79a47c', class: "native-wrapper" }, h("slot", { key: '9075ddd2b68afa3f1989d09ab5b88403eb20aa00', name: "start" }), h("input", Object.assign({ key: '8be4b3cd6b438742d62db98e00ee788a03673ca4', 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: 'f06624d084ac036981e499b6145bee957311fc74', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, 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) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'aaa15a1ab70c008ee6b5e3c64abc1480e5732fc9', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '67abecd72bf5a764e79504b59d9934dbeb66cff9', name: "end" })), shouldRenderHighlight && h("div", { key: '048a7aa3cc8fef97a34f2b25de10730a1de30c0e', class: "input-highlight" })), this.renderBottomContent()));
+            }, 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()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/toggle/test/enable-on-off-labels/toggle.e2e.js

@@ -3,39 +3,59 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs().forEach(({ title, screenshot, config }) => {
-    test.describe(title('toggle: enableOnOffLabels'), () => {
-        test.beforeEach(async ({ page }) => {
-            await page.goto(`/src/components/toggle/test/enable-on-off-labels`, config);
-        });
+configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('toggle: enable-on-off-labels'), () => {
         test('should not have visual regressions', async ({ page }) => {
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-diff`));
-        });
-    });
-});
-/**
- * This behavior does not vary across directions
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('toggle: dark mode'), () => {
-        test.beforeEach(async ({ page }) => {
-            await page.goto(`/src/components/toggle/test/enable-on-off-labels`, config);
+            await page.setContent(`
+        <style>
+          #container {
+            display: grid;
+            grid-template-columns: repeat(2, auto);
+            justify-content: space-evenly;
+            gap: 8px;
+            padding: 16px 0;
+          }
+        </style>
+
+        <div id="container">
+          <ion-toggle enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle enable-on-off-labels="true" checked>Checked</ion-toggle>
+        </div>
+      `, config);
+            const container = page.locator('#container');
+            await expect(container).toHaveScreenshot(screenshot(`toggle-on-off-labels`));
         });
-        test('should not have visual regressions', async ({ page }) => {
-            const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
-            const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
-            await page.click('#popover-trigger');
-            await ionPopoverDidPresent.next();
-            await page.click('#dark-mode');
-            await page.evaluate(() => {
-                const popover = document.querySelector('ion-popover');
-                return popover === null || popover === void 0 ? void 0 : popover.dismiss();
-            });
-            await ionPopoverDidDismiss.next();
-            await page.waitForChanges();
-            await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-dark-mode-diff`));
+        test('should not have visual regressions with color', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          #container {
+            display: grid;
+            grid-template-columns: repeat(2, auto);
+            justify-content: space-evenly;
+            gap: 8px;
+            padding: 16px 0;
+          }
+        </style>
+
+        <div id="container">
+          <ion-toggle color="secondary" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="secondary" enable-on-off-labels="true" checked>Checked</ion-toggle>
+          <ion-toggle color="success" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="success" enable-on-off-labels="true" checked>Checked</ion-toggle>
+          <ion-toggle color="danger" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="danger" enable-on-off-labels="true" checked>Checked</ion-toggle>
+          <ion-toggle color="tertiary" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="tertiary" enable-on-off-labels="true" checked>Checked</ion-toggle>
+          <ion-toggle color="light" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="light" enable-on-off-labels="true" checked>Checked</ion-toggle>
+          <ion-toggle color="medium" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="medium" enable-on-off-labels="true" checked>Checked</ion-toggle>
+          <ion-toggle color="dark" enable-on-off-labels="true">Unchecked</ion-toggle>
+          <ion-toggle color="dark" enable-on-off-labels="true" checked>Checked</ion-toggle>
+        </div>
+      `, config);
+            const container = page.locator('#container');
+            await expect(container).toHaveScreenshot(screenshot(`toggle-on-off-labels-color`));
         });
     });
 });

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, true);
+        componentEl.removeEventListener('focusout', focusOut);
     };
     /**
      * 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, true);
+        componentEl.addEventListener('focusout', focusOut);
     };
-    componentEl.addEventListener('focusin', focusIn, true);
+    componentEl.addEventListener('focusin', focusIn);
     return () => {
-        componentEl.removeEventListener('focusin', focusIn, true);
+        componentEl.removeEventListener('focusin', focusIn);
         win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.removeEventListener('focusout', focusOut, true);
+        componentEl.removeEventListener('focusout', focusOut);
     };
 };
 /**

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-04-17T13:21:49",
+  "timestamp": "2024-04-19T14:05:43",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.15.0",

package/dist/esm/{input-shims-4530285e.js → input-shims-0314bbe5.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, true);
+        componentEl.removeEventListener('focusout', focusOut);
     };
     /**
      * 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, true);
+        componentEl.addEventListener('focusout', focusOut);
     };
-    componentEl.addEventListener('focusin', focusIn, true);
+    componentEl.addEventListener('focusin', focusIn);
     return () => {
-        componentEl.removeEventListener('focusin', focusIn, true);
+        componentEl.removeEventListener('focusin', focusIn);
         win === null || win === void 0 ? void 0 : win.removeEventListener('ionKeyboardDidShow', keyboardShow);
-        componentEl.removeEventListener('focusout', focusOut, true);
+        componentEl.removeEventListener('focusout', focusOut);
     };
 };
 /**

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-4530285e.js').then((module) => module.startInputShims(config, platform));
+                    import('./input-shims-0314bbe5.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,6 +75,7 @@ const Input = class {
                 ev.preventDefault();
                 ev.stopPropagation();
                 // Attempt to focus input again after pressing clear button
+                console.log('hi there');
                 this.setFocus();
             }
             this.value = '';
@@ -401,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: '51c797adf8a7a03e82e02d218addad81836e1e98', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c151cc531804483693052773aeeec1ee5f0c8a47', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -412,14 +413,22 @@ const Input = class {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '6d00404de6673d9c650162a8fd23acc8981bff05', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'ebb124f7f8a0c885043be776242648681a79a47c', class: "native-wrapper" }, h("slot", { key: '9075ddd2b68afa3f1989d09ab5b88403eb20aa00', name: "start" }), h("input", Object.assign({ key: '8be4b3cd6b438742d62db98e00ee788a03673ca4', 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: 'f06624d084ac036981e499b6145bee957311fc74', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, 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) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'aaa15a1ab70c008ee6b5e3c64abc1480e5732fc9', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '67abecd72bf5a764e79504b59d9934dbeb66cff9', name: "end" })), shouldRenderHighlight && h("div", { key: '048a7aa3cc8fef97a34f2b25de10730a1de30c0e', class: "input-highlight" })), this.renderBottomContent()));
+            }, 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()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm-es5/input-shims-0314bbe5.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)};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);return[2]}))}))};r.addEventListener("focusin",v);return function(){r.removeEventListener("focusin",v);win===null||win===void 0?void 0:win.removeEventListener("ionKeyboardDidShow",l);r.removeEventListener("focusout",s)}};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};