@ionic/core 7.7.2-dev.11707425083.192d8103 → 7.7.2-dev.11707881769.185d2a14

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

@@ -87,13 +87,13 @@
   --placeholder-opacity: 0.6;
   --padding-top: 0;
   --padding-end: 0;
-  --padding-bottom: 8px;
+  --padding-bottom: 0;
   --padding-start: 0;
   --border-radius: 0;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -104,13 +104,16 @@
   display: block;
   position: relative;
   width: 100%;
-  min-height: 44px;
   color: var(--color);
   font-family: var(--ion-font-family, inherit);
   z-index: 2;
   box-sizing: border-box;
 }
 
+:host(:not(.legacy-textarea)) {
+  min-height: 44px;
+}
+
 /**
  * Since the label sits on top of the element,
  * the component needs to be taller otherwise the
@@ -141,6 +144,20 @@
   width: fit-content;
 }
 
+:host(.legacy-textarea) {
+  flex: 1;
+  background: var(--background);
+  white-space: pre-wrap;
+}
+
+:host(.legacy-textarea.ion-color) {
+  color: var(--ion-color-base);
+}
+
+:host(:not(.legacy-textarea)) {
+  --padding-bottom: 8px;
+}
+
 :host(.ion-color) {
   --highlight-color-focused: var(--ion-color-base);
   background: initial;
@@ -204,6 +221,21 @@
   opacity: var(--placeholder-opacity);
 }
 
+:host(.legacy-textarea) .native-textarea {
+  white-space: inherit;
+}
+
+:host(.legacy-textarea) .native-textarea,
+:host(.legacy-textarea) .textarea-legacy-wrapper::after {
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  border-radius: var(--border-radius);
+}
+
 .native-textarea {
   color: inherit;
   font-family: inherit;
@@ -220,14 +252,55 @@
   word-break: break-word;
 }
 
+:host(.legacy-textarea) .textarea-legacy-wrapper::after {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  text-align: inherit;
+  white-space: inherit;
+  color: inherit;
+  grid-area: 1/1/2/2;
+  word-break: break-word;
+}
+
 .cloned-input {
   top: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none;
 }
-.cloned-input {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .cloned-input {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .cloned-input {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .cloned-input:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 /**
@@ -239,6 +312,13 @@
   opacity: 1;
 }
 
+:host(.legacy-textarea[auto-grow]) .cloned-input {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 :host([auto-grow]) .cloned-input {
   height: 100%;
 }
@@ -294,7 +374,8 @@
   padding-bottom: var(--padding-bottom);
 }
 
-.native-wrapper {
+.native-wrapper,
+.textarea-legacy-wrapper {
   display: grid;
   min-width: inherit;
   max-width: inherit;
@@ -309,7 +390,8 @@
    */
   grid-auto-rows: 100%;
 }
-.native-wrapper::after {
+.native-wrapper::after,
+.textarea-legacy-wrapper::after {
   white-space: pre-wrap;
   content: attr(data-replicated-value) " ";
   visibility: hidden;
@@ -1331,6 +1413,24 @@
   font-size: inherit;
 }
 
+:host(.legacy-textarea) {
+  --padding-top: 10px;
+  --padding-end: 0;
+  --padding-bottom: 11px;
+  --padding-start: 8px;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 8px;
+  margin-bottom: 0;
+}
+
+:host-context(.item-label-stacked),
+:host-context(.item-label-floating) {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --padding-start: 0;
+}
+
 .textarea-bottom .counter {
   letter-spacing: 0.0333333333em;
 }
@@ -1366,8 +1466,32 @@
   transition: transform 200ms;
   background: var(--highlight-color);
 }
-.textarea-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .textarea-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .textarea-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .textarea-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .textarea-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .textarea-highlight:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.has-focus) .textarea-highlight {
@@ -1382,8 +1506,27 @@
 :host(.in-item) .textarea-highlight {
   bottom: 0;
 }
-:host(.in-item) .textarea-highlight {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  :host(.in-item) .textarea-highlight {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  :host(.in-item) .textarea-highlight {
+    left: 0;
+  }
+  :host-context([dir=rtl]):host(.in-item) .textarea-highlight, :host-context([dir=rtl]).in-item .textarea-highlight {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    :host(.in-item:dir(rtl)) .textarea-highlight {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 :host(.textarea-shape-round) {

package/dist/collection/components/thumbnail/thumbnail.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
-        return (h(Host, { key: '7b729411f622e6b05229c8347ac02aa12587ecae', class: getIonMode(this) }, h("slot", { key: '4648e9b7b7eef02e292a4b235dd5c725cb41bc79' })));
+        return (h(Host, { key: '2b3d5139161f4b9075dce537c14b4087986b37c4', class: getIonMode(this) }, h("slot", { key: '3c4838c43e1230f9413a3cb66584417fd11382b2' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -100,8 +100,27 @@
   box-sizing: border-box;
   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(.title-small) {

package/dist/collection/components/title/title.js

@@ -27,11 +27,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: '4406722aef95bc230d0c6bcd32c61f96828c8e96', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b68a272a33ec81d282629a569676f64d3215a0c7', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '21ca11ed8cc40a8fc80e2dae820503125a451c29', class: "toolbar-title" }, h("slot", { key: '43cf049c99c08883684f3177e686af51b2d257a5' }))));
+            }) }, h("div", { key: '9069816a14e6e358695c5bd465787cf297c761bc', class: "toolbar-title" }, h("slot", { key: '8894bd04f2292b54050ee864abb5396deadf9874' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,62 +4,6 @@
 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
  */
@@ -68,6 +12,30 @@ 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');

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

@@ -80,6 +80,18 @@ describe('toast: a11y smoke test', () => {
     });
 });
 describe('toast: duration config', () => {
+    afterEach(() => {
+        /**
+         * Important: Reset the config
+         * after each test as it is not
+         * automatically reset.
+         * Otherwise, toasts in other tests
+         * will take on any toastDuration value
+         * set and timeouts will potentially run
+         * after tests are finished.
+         */
+        config.reset({});
+    });
     it('should have duration set to 0', async () => {
         const page = await newSpecPage({
             components: [Toast],

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 {
@@ -276,7 +323,7 @@
 :host {
   --background: var(--ion-color-step-50, #f2f2f2);
   --border-radius: 14px;
-  --button-color: var(--ion-color-primary, #0054e9);
+  --button-color: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-step-850, #262626);
   --max-width: 700px;
   --max-height: 478px;

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

@@ -217,6 +217,10 @@ export class Toast {
      * This can be useful in a button handler for determining which button was
      * clicked to dismiss the toast.
      * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+     *
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      */
     async dismiss(data, role) {
         var _a, _b;
@@ -384,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: '50a65164800ad5047ae49d6f7d652414ed52d12f', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'c8d7e7d2baa01d3ed5d65a845bc61acf087c0b18', 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: 'f02cc859c7659dc988026af398856863056510ba', class: wrapperClass }, h("div", { key: '879f5647fc785509a063f820d929603b55343fb9', 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: '16c029f50ab8e0536bd17484e24f8f0c3d55c20a', 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: '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')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -1032,7 +1036,7 @@ export class Toast {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                            "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
                         }],
                     "references": {
                         "Promise": {
@@ -1054,7 +1058,7 @@ export class Toast {
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+                            "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
                         }]
                 }
             },
@@ -1127,13 +1131,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 {
@@ -277,7 +324,7 @@
   --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);
+  --button-color: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-step-50, #f2f2f2);
   --max-width: 700px;
   --start: 8px;
@@ -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([]);
         });