voyager-ionic-core 8.0.0 → 8.0.1

package/dist/cjs/{status-tap-81daddfa.js → status-tap-c47ff5f5.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-bbc6c29f.js');
+const index = require('./index-1437d080.js');
 const index$1 = require('./index-5b6a7459.js');
 const helpers = require('./helpers-afaa9001.js');
 require('./index-5915f9b3.js');

package/dist/collection/collection-manifest.json

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

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

@@ -169,6 +169,7 @@ export class Input {
          * such as [type] in Angular.
          */
         this.onTypeChange();
+        this.debounceChanged();
     }
     componentDidRender() {
         var _a;
@@ -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: '083568e68a2970485e93a84ad3b837c117e03fed', 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: '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: 'b9eab01b390581d20c861ae6a4c49bde0841f14c', "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: '8284ba60924a42fd6d352d23441524f8a027e0ce', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '8f3c04ecc32cb04a06ebb916b79071414b2a5263', name: "end" })), shouldRenderHighlight && h("div", { key: '7e97782b292fd140b3fe7f13de05dfafb4b0fa28', 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/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-18T14:38:08",
+  "timestamp": "2024-04-25T02:36:29",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.15.0",
-    "typescriptVersion": "5.4.4"
+    "version": "4.17.1",
+    "typescriptVersion": "5.4.5"
   },
   "components": [
     {

package/dist/esm/{app-globals-49873df1.js → app-globals-3cbaf9d9.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { i as initialize } from './ionic-global-e6c98cd0.js';
+import { i as initialize } from './ionic-global-d2d8f882.js';
 
 const globalScripts = initialize;
 

package/dist/esm/{button-active-46df59c1.js → button-active-9e3c1f3b.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-bcd8859b.js';
+import { w as writeTask } from './index-5dc2b88e.js';
 import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-ac164e4c.js';
 import { createGesture } from './index-39782642.js';
 

package/dist/esm/{hardware-back-button-ba8f64c2.js → hardware-back-button-804f43bb.js}

@@ -2,8 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as win } from './index-a5d50daf.js';
-import { c as config } from './ionic-global-e6c98cd0.js';
-import './index-bcd8859b.js';
+import { c as config } from './ionic-global-d2d8f882.js';
+import './index-5dc2b88e.js';
 
 /**
  * CloseWatcher is a newer API that lets