@ionic/core 7.7.4 → 8.0.0-beta.1

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

@@ -4,6 +4,62 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ title, config }) => {
+    test.describe(title('toast: Axe testing'), () => {
+        test('should not have any axe violations with inline toasts', async ({ page }) => {
+            await page.setContent(`
+          <ion-toast></ion-toast>
+
+          <script>
+            const toast = document.querySelector('ion-toast');
+            toast.icon = 'person';
+            toast.header = 'Inline Toast Header';
+            toast.message = 'Inline Toast Message';
+            toast.buttons = ['OK'];
+          </script>
+        `, config);
+            const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+            const toast = page.locator('ion-toast');
+            await toast.evaluate((el) => el.present());
+            await ionToastDidPresent.next();
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+        test('should not have any axe violations with controller toasts', async ({ page }) => {
+            await page.setContent(`
+          <script type="module">
+            import { toastController } from '../../../../dist/ionic/index.esm.js';
+            window.toastController = toastController;
+          </script>
+
+          <ion-button onclick="presentToast()">Present</ion-button>
+
+          <script>
+            const presentToast = async () => {
+              // we only want to test color contrast on the toast itself
+              const button = document.querySelector('ion-button');
+              button.style.display = 'none';
+
+              const toast = await toastController.create({
+                icon: 'person',
+                header: 'Controller Toast Header',
+                message: 'Controller Toast Message',
+                buttons: ['OK']
+              });
+
+              await toast.present();
+            };
+          </script>
+        `, config);
+            const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+            const button = page.locator('ion-button');
+            await button.click();
+            await ionToastDidPresent.next();
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
 /**
  * This test does not check LTR vs RTL layouts
  */
@@ -12,30 +68,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         test.beforeEach(async ({ page }) => {
             await page.goto(`/src/components/toast/test/a11y`, config);
         });
-        test('should not have any axe violations with inline toasts', async ({ page }) => {
-            const didPresent = await page.spyOnEvent('ionToastDidPresent');
-            await page.click('#inline-toast-trigger');
-            await didPresent.next();
-            /**
-             * IonToast overlays the entire screen, so
-             * Axe will be unable to verify color contrast
-             * on elements under the toast.
-             */
-            const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
-            expect(results.violations).toEqual([]);
-        });
-        test('should not have any axe violations with controller toasts', async ({ page }) => {
-            const didPresent = await page.spyOnEvent('ionToastDidPresent');
-            await page.click('#controller-toast-trigger');
-            await didPresent.next();
-            /**
-             * IonToast overlays the entire screen, so
-             * Axe will be unable to verify color contrast
-             * on elements under the toast.
-             */
-            const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
-            expect(results.violations).toEqual([]);
-        });
         test('should have aria-labelledby and aria-label added to the button when htmlAttributes is set', async ({ page, }) => {
             const didPresent = await page.spyOnEvent('ionToastDidPresent');
             await page.click('#aria-label-toast-trigger');
@@ -143,3 +175,36 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
+/**
+ * High contrast mode tests
+ */
+configs({ directions: ['ltr'], themes: ['high-contrast-dark', 'high-contrast'] }).forEach(({ title, config, screenshot }) => {
+    test.describe(title('toast: high contrast: buttons'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.setContent(`
+        <ion-toast is-open="true" header="Testing" message="Hello world"></ion-toast>
+        <script>
+          const toast = document.querySelector('ion-toast');
+          toast.buttons = [
+            { text: 'Cancel', role: 'cancel' },
+            { text: 'OK' }
+          ];
+        </script>
+      `, config);
+        });
+        test('should not have visual regressions', async ({ page }) => {
+            const toast = page.locator('ion-toast');
+            await expect(toast).toBeVisible();
+            const toastWrapper = toast.locator('.toast-wrapper');
+            await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-high-contrast-buttons`));
+        });
+        test('should pass AAA guidelines', async ({ page }) => {
+            const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+            await ionToastDidPresent.next();
+            const results = await new AxeBuilder({ page })
+                .options({ rules: { 'color-contrast-enhanced': { enabled: true } } })
+                .analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});

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

@@ -102,27 +102,8 @@
   z-index: 1001;
   pointer-events: none;
 }
-@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 {
+  inset-inline-start: 0;
 }
 
 :host(.overlay-hidden) {
@@ -156,37 +137,9 @@
   background: var(--background);
   box-shadow: var(--box-shadow);
 }
-@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 {
+  inset-inline-start: var(--start);
+  inset-inline-end: var(--end);
 }
 
 .toast-wrapper.toast-top {
@@ -321,10 +274,10 @@
  * }
  */
 :host {
-  --background: var(--ion-color-step-50, #f2f2f2);
+  --background: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));
   --border-radius: 14px;
-  --button-color: var(--ion-color-primary, #3880ff);
-  --color: var(--ion-color-step-850, #262626);
+  --button-color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   --max-width: 700px;
   --max-height: 478px;
   --start: 10px;

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

@@ -388,9 +388,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: 'c8d7e7d2baa01d3ed5d65a845bc61acf087c0b18', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '45b52c210cc3e9ac130f695f29b03d771959f64f', 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: '27c0feeb89c4efb47c42623a4b036ed84338ed10', class: wrapperClass }, h("div", { key: '41d5a3069f92e4a6acef2793fa4e236cdbdaae88', 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: '176f497bc990ef2ecc14c7fa90dd3a54a912030a', 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: '10f25e094028f4855828ba2e04e71445b05198eb', class: wrapperClass }, h("div", { key: 'a1312a8878dd8a02798de0a1f136d03c287a34a8', 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: '0f19c24f130c04ff41a3098bf6d9b17e2c8a2d12', 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"; }
@@ -1131,7 +1131,13 @@ export class Toast {
     }
 }
 const buttonClass = (button) => {
-    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));
+    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,
+    };
 };
 const buttonPart = (button) => {
     return isCancel(button.role) ? 'button cancel' : 'button';

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

@@ -102,27 +102,8 @@
   z-index: 1001;
   pointer-events: none;
 }
-@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 {
+  inset-inline-start: 0;
 }
 
 :host(.overlay-hidden) {
@@ -156,37 +137,9 @@
   background: var(--background);
   box-shadow: var(--box-shadow);
 }
-@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 {
+  inset-inline-start: var(--start);
+  inset-inline-end: var(--end);
 }
 
 .toast-wrapper.toast-top {
@@ -321,11 +274,11 @@
  * }
  */
 :host {
-  --background: var(--ion-color-step-800, #333333);
+  --background: var(--ion-color-step-800, var(--ion-background-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, #3880ff);
-  --color: var(--ion-color-step-50, #f2f2f2);
+  --button-color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-step-50, var(--ion-text-color-step-950, #f2f2f2));
   --max-width: 700px;
   --start: 8px;
   --end: 8px;
@@ -404,7 +357,7 @@
 }
 
 .toast-button-cancel {
-  color: var(--ion-color-step-100, #e6e6e6);
+  color: var(--ion-color-step-100, var(--ion-text-color-step-900, #e6e6e6));
 }
 
 .toast-button-icon-only {
@@ -421,7 +374,7 @@
 
 @media (any-hover: hover) {
   .toast-button:hover {
-    background-color: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08);
+    background-color: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 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,10 +4,16 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('toggle: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/toggle/test/a11y`, config);
+            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);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });

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

@@ -81,7 +81,7 @@
   z-index: 2;
 }
 
-:host(.in-item:not(.legacy-toggle)) {
+:host(.in-item) {
   width: 100%;
   height: 100%;
 }
@@ -92,16 +92,11 @@
  * toolbar which is why we do not
  * limit the below behavior to just ion-item.
  */
-:host([slot=start]:not(.legacy-toggle)),
-:host([slot=end]:not(.legacy-toggle)) {
+:host([slot=start]),
+:host([slot=end]) {
   width: auto;
 }
 
-:host(.legacy-toggle) {
-  contain: content;
-  touch-action: none;
-}
-
 :host(.ion-focused) input {
   border: 2px solid #5e9ed6;
 }
@@ -110,51 +105,6 @@
   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;
@@ -189,7 +139,7 @@ input {
   overflow: hidden;
 }
 
-:host(.in-item:not(.legacy-toggle)) .label-text-wrapper {
+:host(.in-item) .label-text-wrapper {
   margin-top: 10px;
   margin-bottom: 10px;
 }
@@ -532,29 +482,22 @@ input {
  */
 :host {
   --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);
-  --track-background-checked: var(--ion-color-primary, #3880ff);
-  --border-radius: 16px;
+  --track-background-checked: var(--ion-color-primary, #0054e9);
+  --border-radius: 15.5px;
   --handle-background: #ffffff;
   --handle-background-checked: #ffffff;
   --handle-border-radius: 25.5px;
-  --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-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-max-height: calc(100% - var(--handle-spacing) * 2);
-  --handle-width: calc(32px - (2px * 2));
+  --handle-width: calc(31px - (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: 32px;
+  height: 31px;
   /**
    * The handle box shadow should not
    * overflow outside of the track container.
@@ -590,7 +533,7 @@ input {
 
 .toggle-switch-icon {
   position: absolute;
-  color: var(--ion-color-dark);
+  color: var(--ion-color-dark, #222428);
 }
 
 :host(.toggle-ltr) .toggle-switch-icon {
@@ -655,26 +598,4 @@ 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;
 }