@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

package/dist/collection/components/toast/toast.ios.css

@@ -102,8 +102,27 @@
   z-index: 1001;
   pointer-events: none;
 }
-:host {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host {
+    left: 0;
+  }
+  :host-context([dir=rtl]) {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(:dir(rtl)) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.overlay-hidden) {
@@ -137,9 +156,37 @@
   background: var(--background);
   box-shadow: var(--box-shadow);
 }
-.toast-wrapper {
-  inset-inline-start: var(--start);
-  inset-inline-end: var(--end);
+@supports (inset-inline-start: 0) {
+  .toast-wrapper {
+    inset-inline-start: var(--start);
+    inset-inline-end: var(--end);
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .toast-wrapper {
+    left: var(--start);
+    right: var(--end);
+  }
+  :host-context([dir=rtl]) .toast-wrapper {
+    left: unset;
+    right: unset;
+    left: var(--end);
+    right: var(--start);
+  }
+  [dir=rtl] .toast-wrapper {
+    left: unset;
+    right: unset;
+    left: var(--end);
+    right: var(--start);
+  }
+  @supports selector(:dir(rtl)) {
+    .toast-wrapper:dir(rtl) {
+      left: unset;
+      right: unset;
+      left: var(--end);
+      right: var(--start);
+    }
+  }
 }
 
 .toast-wrapper.toast-top {
@@ -274,10 +321,10 @@
  * }
  */
 :host {
-  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
+  --background: var(--ion-color-step-50, #f2f2f2);
   --border-radius: 14px;
-  --button-color: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
+  --button-color: var(--ion-color-primary, #3880ff);
+  --color: var(--ion-color-step-850, #262626);
   --max-width: 700px;
   --max-height: 478px;
   --start: 10px;

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

@@ -384,9 +384,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: '9575ee7d0195f7f2a95486d4b193beb58d966941', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '15a5c3e8d475435c838b70c55ef2e7cc12d6abfb', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'cf152835fe8d8cc499214443b5fa23bf5ef076a1', class: wrapperClass }, h("div", { key: 'c0d331df574399e541fcefb3987777692be10e6c', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '3d6ffa739935f5c92d81ccaccb673cb46b794472', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: 'a6ed7fb75ab098dc632d1a546b4d5298675c14c1', class: wrapperClass }, h("div", { key: '68ff7219e9abae0b7c2030369ebffd2fe0edf7de', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '6b45ca5e283d3507c682cbe733e27a94460a7f69', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -1127,13 +1127,7 @@ export class Toast {
     }
 }
 const buttonClass = (button) => {
-    return {
-        'toast-button': true,
-        'toast-button-icon-only': button.icon !== undefined && button.text === undefined,
-        [`toast-button-${button.role}`]: button.role !== undefined,
-        'ion-focusable': true,
-        'ion-activatable': true,
-    };
+    return Object.assign({ 'toast-button': true, 'toast-button-icon-only': button.icon !== undefined && button.text === undefined, [`toast-button-${button.role}`]: button.role !== undefined, 'ion-focusable': true, 'ion-activatable': true }, getClassMap(button.cssClass));
 };
 const buttonPart = (button) => {
     return isCancel(button.role) ? 'button cancel' : 'button';

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

@@ -102,8 +102,27 @@
   z-index: 1001;
   pointer-events: none;
 }
-:host {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host {
+    left: 0;
+  }
+  :host-context([dir=rtl]) {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(:dir(rtl)) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.overlay-hidden) {
@@ -137,9 +156,37 @@
   background: var(--background);
   box-shadow: var(--box-shadow);
 }
-.toast-wrapper {
-  inset-inline-start: var(--start);
-  inset-inline-end: var(--end);
+@supports (inset-inline-start: 0) {
+  .toast-wrapper {
+    inset-inline-start: var(--start);
+    inset-inline-end: var(--end);
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .toast-wrapper {
+    left: var(--start);
+    right: var(--end);
+  }
+  :host-context([dir=rtl]) .toast-wrapper {
+    left: unset;
+    right: unset;
+    left: var(--end);
+    right: var(--start);
+  }
+  [dir=rtl] .toast-wrapper {
+    left: unset;
+    right: unset;
+    left: var(--end);
+    right: var(--start);
+  }
+  @supports selector(:dir(rtl)) {
+    .toast-wrapper:dir(rtl) {
+      left: unset;
+      right: unset;
+      left: var(--end);
+      right: var(--start);
+    }
+  }
 }
 
 .toast-wrapper.toast-top {
@@ -274,11 +321,11 @@
  * }
  */
 :host {
-  --background: var(--ion-color-step-800, var(--ion-background-color-step-800, #333333));
+  --background: var(--ion-color-step-800, #333333);
   --border-radius: 4px;
   --box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
-  --button-color: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-step-50, var(--ion-text-color-step-950, #f2f2f2));
+  --button-color: var(--ion-color-primary, #3880ff);
+  --color: var(--ion-color-step-50, #f2f2f2);
   --max-width: 700px;
   --start: 8px;
   --end: 8px;
@@ -357,7 +404,7 @@
 }
 
 .toast-button-cancel {
-  color: var(--ion-color-step-100, var(--ion-text-color-step-900, #e6e6e6));
+  color: var(--ion-color-step-100, #e6e6e6);
 }
 
 .toast-button-icon-only {
@@ -374,7 +421,7 @@
 
 @media (any-hover: hover) {
   .toast-button:hover {
-    background-color: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
+    background-color: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08);
   }
   .toast-button-cancel:hover {
     background-color: rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08);

package/dist/collection/components/toggle/test/a11y/toggle.e2e.js

@@ -4,16 +4,10 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('toggle: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
-            await page.setContent(`
-        <main>
-          <ion-toggle>my label</ion-toggle>
-          <ion-toggle aria-label="my aria label"></ion-toggle>
-          <ion-toggle checked="true">Checked</ion-toggle>
-        </main>
-      `, config);
+            await page.goto(`/src/components/toggle/test/a11y`, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });

package/dist/collection/components/toggle/test/legacy/basic/toggle.e2e.js

@@ -0,0 +1,83 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs().forEach(({ title, screenshot, config }) => {
+    test.describe(title('toggle: rendering'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/components/toggle/test/legacy/basic`, config);
+            await page.setIonViewport();
+            await expect(page).toHaveScreenshot(screenshot(`toggle-diff`));
+        });
+    });
+});
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('toggle: functionality'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto(`/src/components/toggle/test/legacy/basic`, config);
+        });
+        test('should have proper class and aria role when checked', async ({ page }) => {
+            const toggle = page.locator('#orange');
+            await expect(toggle).not.toHaveClass(/toggle-checked/);
+            await expect(toggle).toHaveAttribute('aria-checked', 'false');
+            await toggle.click();
+            await page.waitForChanges();
+            await expect(toggle).toHaveClass(/toggle-checked/);
+            await expect(toggle).toHaveAttribute('aria-checked', 'true');
+            await toggle.click();
+            await page.waitForChanges();
+            await expect(toggle).not.toHaveClass(/toggle-checked/);
+            await expect(toggle).toHaveAttribute('aria-checked', 'false');
+        });
+        test('should fire change event with detail', async ({ page }) => {
+            const toggle = page.locator('#orange');
+            const ionChange = await page.spyOnEvent('ionChange');
+            await toggle.click();
+            await page.waitForChanges();
+            expect(ionChange).toHaveReceivedEventDetail({
+                checked: true,
+                value: 'on',
+            });
+            await toggle.click();
+            await page.waitForChanges();
+            expect(ionChange).toHaveReceivedEventDetail({
+                checked: false,
+                value: 'on',
+            });
+        });
+        test('should not fire change event if checked prop is changed directly', async ({ page }) => {
+            const toggle = page.locator('#orange');
+            const ionChange = await page.spyOnEvent('ionChange');
+            await toggle.evaluate((el) => (el.checked = true));
+            await page.waitForChanges();
+            expect(ionChange).toHaveReceivedEventTimes(0);
+        });
+        test('should pass properties down to hidden input', async ({ page }) => {
+            const toggle = page.locator('#grapeChecked');
+            await expect(toggle).toHaveJSProperty('disabled', true);
+            await expect(toggle).toHaveJSProperty('value', 'grape');
+            await expect(toggle).toHaveJSProperty('name', 'grape');
+            const hiddenInput = page.locator('#grapeChecked input[type=hidden]');
+            await expect(hiddenInput).toBeDisabled();
+            await expect(hiddenInput).toHaveJSProperty('value', 'grape');
+            await expect(hiddenInput).toHaveJSProperty('name', 'grape');
+            await toggle.evaluate((el) => {
+                el.disabled = false;
+                el.checked = false;
+                el.value = 'new-value';
+                el.name = 'new-name';
+            });
+            await page.waitForChanges();
+            await expect(hiddenInput).not.toBeDisabled();
+            await expect(hiddenInput).toHaveJSProperty('name', 'new-name');
+            // shouldn't have a value because it's unchecked
+            // note: using toHaveJSProperty to check empty string triggers error for some reason
+            const value = await hiddenInput.evaluate((el) => el.value);
+            expect(value).toBe('');
+        });
+    });
+});

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

@@ -0,0 +1,37 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs().forEach(({ title, screenshot, config }) => {
+    test.describe(title('toggle: enableOnOffLabels'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/components/toggle/test/legacy/enable-on-off-labels`, config);
+            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('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/components/toggle/test/legacy/enable-on-off-labels`, config);
+            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`));
+        });
+    });
+});

package/dist/collection/components/toggle/test/legacy/sizes/power-outline.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><title>ionicons-v5-p</title><path d='M378,108a191.41,191.41,0,0,1,70,148c0,106-86,192-192,192S64,362,64,256a192,192,0,0,1,69-148' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line x1='256' y1='64' x2='256' y2='256' style='fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>

package/dist/collection/components/toggle/test/legacy/sizes/toggle.e2e.js

@@ -0,0 +1,14 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs().forEach(({ title, screenshot, config }) => {
+    test.describe(title('toggle: sizes'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/components/toggle/test/legacy/sizes`, config);
+            await page.setIonViewport();
+            await expect(page).toHaveScreenshot(screenshot(`toggle-sizes-diff`));
+        });
+    });
+});

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

@@ -81,7 +81,7 @@
   z-index: 2;
 }
 
-:host(.in-item) {
+:host(.in-item:not(.legacy-toggle)) {
   width: 100%;
   height: 100%;
 }
@@ -92,11 +92,16 @@
  * toolbar which is why we do not
  * limit the below behavior to just ion-item.
  */
-:host([slot=start]),
-:host([slot=end]) {
+:host([slot=start]:not(.legacy-toggle)),
+:host([slot=end]:not(.legacy-toggle)) {
   width: auto;
 }
 
+:host(.legacy-toggle) {
+  contain: content;
+  touch-action: none;
+}
+
 :host(.ion-focused) input {
   border: 2px solid #5e9ed6;
 }
@@ -105,6 +110,51 @@
   pointer-events: none;
 }
 
+:host(.legacy-toggle) label {
+  top: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+  outline: none;
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+}
+@supports (inset-inline-start: 0) {
+  :host(.legacy-toggle) label {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.legacy-toggle) label {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.legacy-toggle) label, :host-context([dir=rtl]).legacy-toggle label {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.legacy-toggle:dir(rtl)) label {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
+}
+:host(.legacy-toggle) label::-moz-focus-inner {
+  border: 0;
+}
+
 input {
   position: absolute;
   top: 0;
@@ -139,7 +189,7 @@ input {
   overflow: hidden;
 }
 
-:host(.in-item) .label-text-wrapper {
+:host(.in-item:not(.legacy-toggle)) .label-text-wrapper {
   margin-top: 10px;
   margin-bottom: 10px;
 }
@@ -482,22 +532,29 @@ input {
  */
 :host {
   --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);
-  --track-background-checked: var(--ion-color-primary, #0054e9);
-  --border-radius: 15.5px;
+  --track-background-checked: var(--ion-color-primary, #3880ff);
+  --border-radius: 16px;
   --handle-background: #ffffff;
   --handle-background-checked: #ffffff;
   --handle-border-radius: 25.5px;
-  --handle-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.06);
-  --handle-height: calc(31px - (2px * 2));
+  --handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1);
+  --handle-height: calc(32px - (2px * 2));
   --handle-max-height: calc(100% - var(--handle-spacing) * 2);
-  --handle-width: calc(31px - (2px * 2));
+  --handle-width: calc(32px - (2px * 2));
   --handle-spacing: 2px;
   --handle-transition: transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;
 }
 
+:host(.legacy-toggle) {
+  width: 51px;
+  height: 32px;
+  contain: strict;
+  overflow: hidden;
+}
+
 .native-wrapper .toggle-icon {
   width: 51px;
-  height: 31px;
+  height: 32px;
   /**
    * The handle box shadow should not
    * overflow outside of the track container.
@@ -533,7 +590,7 @@ input {
 
 .toggle-switch-icon {
   position: absolute;
-  color: var(--ion-color-dark, #222428);
+  color: var(--ion-color-dark);
 }
 
 :host(.toggle-ltr) .toggle-switch-icon {
@@ -598,4 +655,26 @@ input {
 
 :host(.toggle-disabled) {
   opacity: 0.3;
+}
+
+:host(.in-item.legacy-toggle) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  -webkit-padding-start: 16px;
+  padding-inline-start: 16px;
+  -webkit-padding-end: 0;
+  padding-inline-end: 0;
+  padding-top: 6px;
+  padding-bottom: 5px;
+}
+
+:host(.in-item.legacy-toggle[slot=start]) {
+  -webkit-padding-start: 0;
+  padding-inline-start: 0;
+  -webkit-padding-end: 16px;
+  padding-inline-end: 16px;
+  padding-top: 6px;
+  padding-bottom: 5px;
 }