@ionic/core 7.6.2-dev.11705694334.11b34c62 → 7.6.2-dev.11706202387.1dfcd9b8

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

@@ -19,6 +19,28 @@ const testAria = async (page, buttonID, expectedAriaLabelledBy, expectedAriaDesc
     expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
     expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);
 };
+configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ title, config }) => {
+    test.describe(title('alert: Axe testing'), () => {
+        test('should not have accessibility violations when header and message are defined', async ({ page }) => {
+            await page.setContent(`
+          <ion-alert></ion-alert>
+
+          <script>
+            const alert = document.querySelector('ion-alert');
+            alert.header = 'Header';
+            alert.subHeader = 'Subtitle';
+            alert.buttons = ['OK'];
+          </script>
+        `, config);
+            const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+            const alert = page.locator('ion-alert');
+            await alert.evaluate((el) => el.present());
+            await ionAlertDidPresent.next();
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('alert: text wrapping'), () => {
         test('should break on words and white spaces for radios', async ({ page }, testInfo) => {
@@ -72,15 +94,6 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
         test.beforeEach(async ({ page }) => {
             await page.goto(`/src/components/alert/test/a11y`, config);
         });
-        test('should not have accessibility violations when header and message are defined', async ({ page }) => {
-            const didPresent = await page.spyOnEvent('ionAlertDidPresent');
-            const button = page.locator('#bothHeaders');
-            await button.click();
-            await didPresent.next();
-            // TODO FW-4375
-            const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
-            expect(results.violations).toEqual([]);
-        });
         test('should have aria-labelledby when header is set', async ({ page }) => {
             await testAria(page, 'noMessage', 'alert-1-hdr', null);
         });

package/dist/collection/components/back-button/back-button.ios.css

@@ -331,7 +331,7 @@ ion-icon {
   --background-focused: currentColor;
   --background-focused-opacity: .1;
   --border-radius: 4px;
-  --color: var(--ion-color-primary, #3880ff);
+  --color: var(--ion-color-primary, #0054e9);
   --icon-margin-end: 1px;
   --icon-margin-start: -4px;
   /**

package/dist/collection/components/back-button/test/a11y/back-button.e2e.js

@@ -1,8 +1,29 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * Only ios mode uses ion-color() for the back button
+ */
+configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+    test.describe(title('back-button: a11y for ion-color()'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          ion-back-button {
+            display: inline-block !important;
+            vertical-align: middle;
+          }
+        </style>
+        <ion-back-button text="Back" aria-label="back button"></ion-back-button>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('back-button: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {

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

@@ -63,7 +63,7 @@
    * @prop --padding-bottom: Bottom padding of the badge
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
    */
-  --background: var(--ion-color-primary, #3880ff);
+  --background: var(--ion-color-primary, #0054e9);
   --color: var(--ion-color-primary-contrast, #fff);
   --padding-top: 3px;
   --padding-end: 8px;

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

@@ -63,7 +63,7 @@
    * @prop --padding-bottom: Bottom padding of the badge
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
    */
-  --background: var(--ion-color-primary, #3880ff);
+  --background: var(--ion-color-primary, #0054e9);
   --color: var(--ion-color-primary-contrast, #fff);
   --padding-top: 3px;
   --padding-end: 8px;

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

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
@@ -20,3 +21,20 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
+configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+    test.describe(title('badge: a11y'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            /**
+             * All page content should be contained by landmarks (main, nav, etc.)
+             * By containing the badge in a main element, we can avoid this violation.
+             */
+            await page.setContent(`
+        <main>
+          <ion-badge>123</ion-badge>
+        </main>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});

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

@@ -114,20 +114,20 @@
 }
 
 :host(.button-solid) {
-  --background: var(--ion-color-primary, #3880ff);
+  --background: var(--ion-color-primary, #0054e9);
   --color: var(--ion-color-primary-contrast, #fff);
 }
 
 :host(.button-outline) {
-  --border-color: var(--ion-color-primary, #3880ff);
+  --border-color: var(--ion-color-primary, #0054e9);
   --background: transparent;
-  --color: var(--ion-color-primary, #3880ff);
+  --color: var(--ion-color-primary, #0054e9);
 }
 
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
-  --color: var(--ion-color-primary, #3880ff);
+  --color: var(--ion-color-primary, #0054e9);
 }
 
 :host(.button-block) {
@@ -465,9 +465,9 @@ ion-ripple-effect {
 }
 
 :host(.button-solid) {
-  --background-activated: var(--ion-color-primary-shade, #3171e0);
-  --background-focused: var(--ion-color-primary-shade, #3171e0);
-  --background-hover: var(--ion-color-primary-tint, #4c8dff);
+  --background-activated: var(--ion-color-primary-shade, #004acd);
+  --background-focused: var(--ion-color-primary-shade, #004acd);
+  --background-hover: var(--ion-color-primary-tint, #1a65eb);
   --background-activated-opacity: 1;
   --background-focused-opacity: 1;
   --background-hover-opacity: 1;
@@ -477,8 +477,8 @@ ion-ripple-effect {
   --border-radius: 14px;
   --border-width: 1px;
   --border-style: solid;
-  --background-activated: var(--ion-color-primary, #3880ff);
-  --background-focused: var(--ion-color-primary, #3880ff);
+  --background-activated: var(--ion-color-primary, #0054e9);
+  --background-focused: var(--ion-color-primary, #0054e9);
   --background-hover: transparent;
   --background-focused-opacity: .1;
   --color-activated: var(--ion-color-primary-contrast, #fff);
@@ -487,7 +487,7 @@ ion-ripple-effect {
 :host(.button-clear) {
   --background-activated: transparent;
   --background-activated-opacity: 0;
-  --background-focused: var(--ion-color-primary, #3880ff);
+  --background-focused: var(--ion-color-primary, #0054e9);
   --background-hover: transparent;
   --background-focused-opacity: .1;
   font-size: min(1.0625rem, 51px);

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

@@ -114,20 +114,20 @@
 }
 
 :host(.button-solid) {
-  --background: var(--ion-color-primary, #3880ff);
+  --background: var(--ion-color-primary, #0054e9);
   --color: var(--ion-color-primary-contrast, #fff);
 }
 
 :host(.button-outline) {
-  --border-color: var(--ion-color-primary, #3880ff);
+  --border-color: var(--ion-color-primary, #0054e9);
   --background: transparent;
-  --color: var(--ion-color-primary, #3880ff);
+  --color: var(--ion-color-primary, #0054e9);
 }
 
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
-  --color: var(--ion-color-primary, #3880ff);
+  --color: var(--ion-color-primary, #0054e9);
 }
 
 :host(.button-block) {
@@ -431,8 +431,8 @@ ion-ripple-effect {
   --border-style: solid;
   --box-shadow: none;
   --background-activated: transparent;
-  --background-focused: var(--ion-color-primary, #3880ff);
-  --background-hover: var(--ion-color-primary, #3880ff);
+  --background-focused: var(--ion-color-primary, #0054e9);
+  --background-hover: var(--ion-color-primary, #0054e9);
   --background-activated-opacity: 0;
   --background-focused-opacity: .12;
   --background-hover-opacity: .04;
@@ -444,8 +444,8 @@ ion-ripple-effect {
 
 :host(.button-clear) {
   --background-activated: transparent;
-  --background-focused: var(--ion-color-primary, #3880ff);
-  --background-hover: var(--ion-color-primary, #3880ff);
+  --background-focused: var(--ion-color-primary, #0054e9);
+  --background-hover: var(--ion-color-primary, #0054e9);
   --background-activated-opacity: 0;
   --background-focused-opacity: .12;
   --background-hover-opacity: .04;

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

@@ -1,8 +1,56 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+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 }) => {
+    test.describe(title('button: a11y for ion-color()'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <ion-button>Default</ion-button>
+        <ion-button fill="solid">Solid</ion-button>
+        <ion-button fill="outline">Outline</ion-button>
+        <ion-button fill="clear">Clear</ion-button>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+        test('focused state should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <ion-button class="ion-focused" fill="solid">Solid</ion-button>
+        <ion-button class="ion-focused" fill="outline">Outline</ion-button>
+        <ion-button class="ion-focused" fill="clear">Clear</ion-button>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+        test('button in toolbar should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <ion-toolbar>
+          <ion-button fill="outline" class="ion-activated">Start</ion-button>
+        </ion-toolbar>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
+/**
+ * Only ios mode uses ion-color() for the activated button state
+ */
+configs({ directions: ['ltr'], modes: ['ios'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+    test.describe(title('button: ios contrast'), () => {
+        test('activated state should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <ion-button class="ion-activated" fill="solid">Solid</ion-button>
+        <ion-button class="ion-activated" fill="outline">Outline</ion-button>
+      `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('button: font scaling'), () => {
         test('should scale default button text on larger font sizes', async ({ page }) => {

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

@@ -71,9 +71,10 @@
    * @prop --checkmark-color: Color of the checkbox checkmark when checked
    * @prop --checkmark-width: Stroke width of the checkbox checkmark
    */
-  --checkbox-background-checked: var(--ion-color-primary, #3880ff);
-  --border-color-checked: var(--ion-color-primary, #3880ff);
+  --checkbox-background-checked: var(--ion-color-primary, #0054e9);
+  --border-color-checked: var(--ion-color-primary, #0054e9);
   --checkmark-color: var(--ion-color-primary-contrast, #fff);
+  --checkmark-width: 1;
   --transition: none;
   display: inline-block;
   position: relative;
@@ -503,12 +504,11 @@ input {
  */
 :host {
   --border-radius: 50%;
-  --border-width: 0.125rem;
+  --border-width: 0.0625rem;
   --border-style: solid;
   --border-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);
   --checkbox-background: var(--ion-item-background, var(--ion-background-color, #fff));
-  --size: min(1.375rem, 55.836px);
-  --checkmark-width: 1.5px;
+  --size: min(1.625rem, 65.988px);
 }
 
 :host(.checkbox-disabled) {

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

@@ -71,9 +71,10 @@
    * @prop --checkmark-color: Color of the checkbox checkmark when checked
    * @prop --checkmark-width: Stroke width of the checkbox checkmark
    */
-  --checkbox-background-checked: var(--ion-color-primary, #3880ff);
-  --border-color-checked: var(--ion-color-primary, #3880ff);
+  --checkbox-background-checked: var(--ion-color-primary, #0054e9);
+  --border-color-checked: var(--ion-color-primary, #0054e9);
   --checkmark-color: var(--ion-color-primary-contrast, #fff);
+  --checkmark-width: 1;
   --transition: none;
   display: inline-block;
   position: relative;

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

@@ -4,10 +4,19 @@
 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('checkbox: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
-            await page.goto(`/src/components/checkbox/test/a11y`, config);
+            await page.setContent(`
+        <main>
+          <ion-checkbox>Label</ion-checkbox>
+          <ion-checkbox aria-label="my aria label"></ion-checkbox>
+          <ion-checkbox checked="true">Checked</ion-checkbox>
+          <ion-item>
+            <ion-checkbox>Checkbox in item</ion-checkbox>
+          </ion-item>
+        </main>
+      `, config);
             const results = await new AxeBuilder({ page }).analyze();
             expect(results.violations).toEqual([]);
         });

package/dist/collection/components/checkbox/test/basic/checkbox.e2e.js

@@ -5,16 +5,6 @@ import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
     test.describe(title('checkbox: basic visual tests'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.setContent(`
-        <div id="checkboxes">
-          <ion-checkbox>Unchecked</ion-checkbox>
-          <ion-checkbox checked>Checked</ion-checkbox>
-        </div>
-      `, config);
-            const checkboxes = page.locator('#checkboxes');
-            await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-basic`));
-        });
         test('should render custom checkmark-width correctly', async ({ page }) => {
             await page.setContent(`
         <ion-checkbox checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox>

package/dist/collection/components/content/content.js

@@ -334,9 +334,8 @@ export class Content {
         const mode = getIonMode(this);
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
-        const TagType = isMainContent ? 'main' : 'div';
         this.resize();
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -344,7 +343,7 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { class: {
+            } }, h("div", { ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h("div", { class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,

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

@@ -613,8 +613,8 @@ ion-picker {
  * }
  */
 :host {
-  --background: var(--ion-color-light, #ffffff);
-  --background-rgb: var(--ion-color-light-rgb);
+  --background: var(--ion-color-light, #f6f8fc);
+  --background-rgb: var(--ion-color-light-rgb, 246, 248, 252);
   --title-color: var(--ion-color-step-600, #666666);
 }
 
@@ -837,7 +837,6 @@ ion-picker {
 
 .calendar-day.calendar-day-active {
   background: rgba(var(--ion-color-base-rgb), 0.2);
-  font-size: min(1.375rem, 35.2px);
 }
 
 /**

package/dist/collection/components/datetime-button/{datetime-button.md.css → datetime-button.css}

@@ -62,6 +62,12 @@
 
 :host button {
   border-radius: 8px;
+  -webkit-padding-start: 12px;
+  padding-inline-start: 12px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
   -webkit-margin-start: 2px;
   margin-inline-start: 2px;
   -webkit-margin-end: 2px;
@@ -91,13 +97,4 @@
 
 :host(.datetime-button-disabled) button {
   opacity: 0.4;
-}
-
-:host button {
-  -webkit-padding-start: 12px;
-  padding-inline-start: 12px;
-  -webkit-padding-end: 12px;
-  padding-inline-end: 12px;
-  padding-top: 6px;
-  padding-bottom: 6px;
 }

package/dist/collection/components/datetime-button/datetime-button.js

@@ -346,14 +346,14 @@ export class DatetimeButton {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["datetime-button.ios.scss"],
-            "md": ["datetime-button.md.scss"]
+            "ios": ["datetime-button.scss"],
+            "md": ["datetime-button.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["datetime-button.ios.css"],
-            "md": ["datetime-button.md.css"]
+            "ios": ["datetime-button.css"],
+            "md": ["datetime-button.css"]
         };
     }
     static get properties() {

package/dist/collection/components/datetime-button/test/basic/datetime-button.e2e.js

@@ -3,18 +3,6 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs().forEach(({ config, screenshot, title }) => {
-    test.describe(title('datetime-button: basic'), () => {
-        test('should not have visual regressions', async ({ page }) => {
-            await page.setContent(`
-        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
-        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
-      `, config);
-            const datetimeButton = page.locator('ion-datetime-button');
-            await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-basic`));
-        });
-    });
-});
 /**
  * The tested behavior does not
  * vary across modes/directions

package/dist/collection/components/fab-button/fab-button.ios.css

@@ -334,10 +334,10 @@ ion-ripple-effect {
  * }
  */
 :host {
-  --background: var(--ion-color-primary, #3880ff);
-  --background-activated: var(--ion-color-primary-shade, #3171e0);
-  --background-focused: var(--ion-color-primary-shade, #3171e0);
-  --background-hover: var(--ion-color-primary-tint, #4c8dff);
+  --background: var(--ion-color-primary, #0054e9);
+  --background-activated: var(--ion-color-primary-shade, #004acd);
+  --background-focused: var(--ion-color-primary-shade, #004acd);
+  --background-hover: var(--ion-color-primary-tint, #1a65eb);
   --background-activated-opacity: 1;
   --background-focused-opacity: 1;
   --background-hover-opacity: 1;
@@ -358,10 +358,10 @@ ion-ripple-effect {
 }
 
 :host(.fab-button-in-list) {
-  --background: var(--ion-color-light, #f4f5f8);
-  --background-activated: var(--ion-color-light-shade, #d7d8da);
+  --background: var(--ion-color-light, #f6f8fc);
+  --background-activated: var(--ion-color-light-shade, #d8dade);
   --background-focused: var(--background-activated);
-  --background-hover: var(--ion-color-light-tint, #f5f6f9);
+  --background-hover: var(--ion-color-light-tint, #f7f9fc);
   --color: var(--ion-color-light-contrast, #000);
   --color-activated: var(--ion-color-light-contrast, #000);
   --color-focused: var(--color-activated);
@@ -395,15 +395,15 @@ ion-ripple-effect {
 }
 @supports (backdrop-filter: blur(0)) {
   :host(.fab-button-translucent) {
-    --background: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.9);
-    --background-hover: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.8);
-    --background-focused: rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.82);
+    --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.9);
+    --background-hover: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.8);
+    --background-focused: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.82);
     --backdrop-filter: saturate(180%) blur(20px);
   }
   :host(.fab-button-translucent-in-list) {
-    --background: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.9);
-    --background-hover: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.8);
-    --background-focused: rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.82);
+    --background: rgba(var(--ion-color-light-rgb, 246, 248, 252), 0.9);
+    --background-hover: rgba(var(--ion-color-light-rgb, 246, 248, 252), 0.8);
+    --background-focused: rgba(var(--ion-color-light-rgb, 246, 248, 252), 0.82);
   }
 }
 @supports (backdrop-filter: blur(0)) {

package/dist/collection/components/fab-button/fab-button.md.css

@@ -334,7 +334,7 @@ ion-ripple-effect {
  * }
  */
 :host {
-  --background: var(--ion-color-primary, #3880ff);
+  --background: var(--ion-color-primary, #0054e9);
   --background-activated: transparent;
   --background-focused: currentColor;
   --background-hover: currentColor;
@@ -359,10 +359,10 @@ ion-ripple-effect {
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
   --color-activated: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
   --color-focused: var(--color-activated);
-  --background: var(--ion-color-light, #f4f5f8);
+  --background: var(--ion-color-light, #f6f8fc);
   --background-activated: transparent;
-  --background-focused: var(--ion-color-light-shade, #d7d8da);
-  --background-hover: var(--ion-color-light-tint, #f5f6f9);
+  --background-focused: var(--ion-color-light-shade, #d8dade);
+  --background-hover: var(--ion-color-light-tint, #f7f9fc);
 }
 
 :host(.fab-button-in-list) ::slotted(ion-icon) {

package/dist/collection/components/fab-button/test/a11y/fab-button.e2e.js

@@ -1,8 +1,58 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+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 }) => {
+    test.describe(title('fab-button: a11y'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <ion-fab-button>FAB</ion-fab-button>
+        <ion-fab-button class="ion-activated">FAB</ion-fab-button>
+        `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+    test.describe(title('fab-list: contrast'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <ion-fab activated="true">
+          <ion-fab-button>
+            Open
+          </ion-fab-button>
+          <ion-fab-list side="bottom">
+            <ion-fab-button>Down</ion-fab-button>
+            <ion-fab-button class="ion-activated">Down</ion-fab-button>
+            <ion-fab-button class="ion-focused">Down</ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+        `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+    test.describe(title('fab: translucent contrast'), () => {
+        test('should not have accessibility violations', async ({ page }) => {
+            await page.setContent(`
+        <ion-fab-button translucent="true">FAB</ion-fab-button>
+        <ion-fab-button class="ion-focused" translucent="true">FAB</ion-fab-button>
+        <ion-fab activated="true">
+          <ion-fab-button>
+            Open
+          </ion-fab-button>
+          <ion-fab-list side="bottom">
+            <ion-fab-button translucent="true">Down</ion-fab-button>
+            <ion-fab-button class="ion-focused" translucent="true">Down</ion-fab-button>
+          </ion-fab-list>
+        </ion-fab>
+        `, config);
+            const results = await new AxeBuilder({ page }).analyze();
+            expect(results.violations).toEqual([]);
+        });
+    });
+});
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     test.describe(title('fab-button: aria attributes'), () => {
         test('should inherit aria attributes to inner button', async ({ page }) => {

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

@@ -89,9 +89,9 @@
   --background: transparent;
   --color: initial;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state

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

@@ -89,9 +89,9 @@
   --background: transparent;
   --color: initial;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #3880ff);
-  --highlight-color-valid: var(--ion-color-success, #2dd36f);
-  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
+  --highlight-color-focused: var(--ion-color-primary, #0054e9);
+  --highlight-color-valid: var(--ion-color-success, #2dd55b);
+  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state