@ionic/core 7.6.2-dev.11704998705.1e1f9850 → 7.6.2-dev.11705694334.11b34c62

package/dist/collection/components/action-sheet/action-sheet.md.css

@@ -83,6 +83,7 @@
    * @prop --button-color-hover: Color of the action sheet button on hover
    * @prop --button-color-focused: Color of the action sheet button when tabbed to
    * @prop --button-color-selected: Color of the selected action sheet button
+   * @prop --button-color-disabled: Color of the selected action sheet button when disabled
    */
   --color: initial;
   --button-color-activated: var(--button-color);
@@ -143,6 +144,11 @@
   overflow: hidden;
 }
 
+.action-sheet-button:disabled {
+  color: var(--button-color-disabled);
+  opacity: 0.4;
+}
+
 .action-sheet-button-inner {
   display: flex;
   position: relative;
@@ -232,10 +238,10 @@
 }
 
 @media (any-hover: hover) {
-  .action-sheet-button:hover {
+  .action-sheet-button:not(:disabled):hover {
     color: var(--button-color-hover);
   }
-  .action-sheet-button:hover::after {
+  .action-sheet-button:not(:disabled):hover::after {
     background: var(--button-background-hover);
     opacity: var(--button-background-hover-opacity);
   }
@@ -308,6 +314,7 @@
   --button-background-focused: currentColor;
   --button-background-focused-opacity: .12;
   --button-color: var(--ion-color-step-850, #262626);
+  --button-color-disabled: var(--button-color);
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
 }
 

package/dist/collection/components/action-sheet/test/a11y/action-sheet.e2e.js

@@ -26,33 +26,24 @@ const testAriaButton = async (page, buttonID, expectedAriaLabelledBy, expectedAr
     await expect(actionSheetButton).toHaveAttribute('aria-labelledby', expectedAriaLabelledBy);
     await expect(actionSheetButton).toHaveAttribute('aria-label', expectedAriaLabel);
 };
-configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ config, title }) => {
-    test.describe(title('action-sheet: Axe testing'), () => {
-        test('should not have accessibility violations when header is defined', async ({ page }) => {
-            await page.setContent(`
-          <ion-action-sheet></ion-action-sheet>
-
-          <script>
-            const actionSheet = document.querySelector('ion-action-sheet');
-            actionSheet.header = 'Header';
-            actionSheet.subHeader = 'Subtitle';
-            actionSheet.buttons = ['Confirm'];
-          </script>
-        `, config);
-            const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
-            const actionSheet = page.locator('ion-action-sheet');
-            await actionSheet.evaluate((el) => el.present());
-            await ionActionSheetDidPresent.next();
-            const results = await new AxeBuilder({ page }).analyze();
-            expect(results.violations).toEqual([]);
-        });
-    });
-});
 configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
-    test.describe(title('action-sheet: aria attributes'), () => {
+    test.describe(title('action-sheet: a11y'), () => {
         test.beforeEach(async ({ page }) => {
             await page.goto(`/src/components/action-sheet/test/a11y`, config);
         });
+        test('should not have accessibility violations when header is defined', async ({ page }) => {
+            const button = page.locator('#bothHeaders');
+            const didPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+            await button.click();
+            await didPresent.next();
+            /**
+             * action-sheet overlays the entire screen, so
+             * Axe will be unable to verify color contrast
+             * on elements under the backdrop.
+             */
+            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, 'bothHeaders', 'action-sheet-1-header');
         });

package/dist/collection/components/action-sheet/test/basic/action-sheet-rendering.e2e.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 import { ActionSheetFixture } from "./fixture";
 configs().forEach(({ config, screenshot, title }) => {
@@ -39,3 +40,21 @@ configs().forEach(({ config, screenshot, title }) => {
         });
     });
 });
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('action sheet: disabled buttons'), () => {
+        test('should render disabled button', async ({ page }) => {
+            await page.setContent(`
+        <ion-action-sheet></ion-action-sheet>
+        <script>
+          const actionSheet = document.querySelector('ion-action-sheet');
+          actionSheet.buttons = [
+            { text: 'Disabled', disabled: true }
+          ];
+        </script>
+      `, config);
+            const actionSheet = page.locator('ion-action-sheet');
+            await actionSheet.evaluate((el) => el.present());
+            await expect(actionSheet).toHaveScreenshot(screenshot('action-sheet-disabled'));
+        });
+    });
+});

package/dist/collection/components/action-sheet/test/basic/action-sheet.spec.js

@@ -16,3 +16,25 @@ describe('action sheet: htmlAttributes inheritance', () => {
         await expect(actionSheet.getAttribute('data-testid')).toBe('basic-action-sheet');
     });
 });
+describe('action sheet: disabled buttons', () => {
+    it('regular button should be disabled', async () => {
+        const page = await newSpecPage({
+            components: [ActionSheet],
+            template: () => (h("ion-action-sheet", { buttons: [{ text: 'cancel', disabled: true }], overlayIndex: 1 })),
+        });
+        const actionSheet = page.body.querySelector('ion-action-sheet');
+        await actionSheet.present();
+        const button = actionSheet.querySelector('.action-sheet-button');
+        await expect(button.hasAttribute('disabled')).toBe(true);
+    });
+    it('cancel button should not be disabled', async () => {
+        const page = await newSpecPage({
+            components: [ActionSheet],
+            template: () => (h("ion-action-sheet", { buttons: [{ text: 'cancel', role: 'cancel', disabled: true }], overlayIndex: 1 })),
+        });
+        const actionSheet = page.body.querySelector('ion-action-sheet');
+        await actionSheet.present();
+        const cancelButton = actionSheet.querySelector('.action-sheet-cancel');
+        await expect(cancelButton.hasAttribute('disabled')).toBe(false);
+    });
+});

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

@@ -477,17 +477,18 @@ textarea.alert-input {
 }
 
 .alert-input {
-  border-radius: 4px;
+  border-radius: 7px;
   margin-top: 10px;
-  -webkit-padding-start: 6px;
-  padding-inline-start: 6px;
-  -webkit-padding-end: 6px;
-  padding-inline-end: 6px;
-  padding-top: 6px;
-  padding-bottom: 6px;
+  -webkit-padding-start: 7px;
+  padding-inline-start: 7px;
+  -webkit-padding-end: 7px;
+  padding-inline-end: 7px;
+  padding-top: 7px;
+  padding-bottom: 7px;
   border: 0.55px solid var(--ion-color-step-250, #bfbfbf);
   background-color: var(--ion-background-color, #fff);
   appearance: none;
+  font-size: 1rem;
 }
 .alert-input::placeholder {
   color: var(--ion-placeholder-color, var(--ion-color-step-400, #999999));
@@ -499,10 +500,10 @@ textarea.alert-input {
 }
 .alert-input::-webkit-date-and-time-value {
   /**
-   * The -webkit-date-and-time-value pseudo element is used 
+   * The -webkit-date-and-time-value pseudo element is used
    * to style the date/time input on iOS/Mobile Safari.
    * To avoid layout shift between an empty state and a selected state,
-   * we set the height `18px` to match the native input height for 
+   * we set the height `18px` to match the native input height for
    * date/time inputs on iOS/Mobile Safari.
    */
   height: 18px;
@@ -534,7 +535,7 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-radio-label {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
 }
 
 .alert-radio-icon {
@@ -553,7 +554,7 @@ textarea.alert-input {
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
-  border-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, #3880ff);
 }
 @supports (inset-inline-start: 0) {
   [aria-checked=true] .alert-radio-inner {
@@ -603,9 +604,9 @@ textarea.alert-input {
   margin-top: 10px;
   margin-bottom: 10px;
   position: relative;
-  width: min(1.5rem, 66px);
-  height: min(1.5rem, 66px);
-  border-width: 0.0625rem;
+  width: min(1.375rem, 55.836px);
+  height: min(1.375rem, 55.836px);
+  border-width: 0.125rem;
   border-style: solid;
   border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
   background-color: var(--ion-item-background, var(--ion-background-color, #fff));
@@ -613,17 +614,17 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-checkbox-icon {
-  border-color: var(--ion-color-primary, #0054e9);
-  background-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, #3880ff);
+  background-color: var(--ion-color-primary, #3880ff);
 }
 
 [aria-checked=true] .alert-checkbox-inner {
-  top: calc(min(1.5rem, 66px) / 6);
+  top: calc(min(1.375rem, 55.836px) / 8);
   position: absolute;
-  width: calc(min(1.5rem, 66px) / 6 + 1px);
-  height: calc(min(1.5rem, 66px) * 0.5);
+  width: calc(min(1.375rem, 55.836px) / 6 + 1px);
+  height: calc(min(1.375rem, 55.836px) * 0.5);
   transform: rotate(45deg);
-  border-width: 0.0625rem;
+  border-width: 0.125rem;
   border-top-width: 0;
   border-left-width: 0;
   border-style: solid;
@@ -631,28 +632,28 @@ textarea.alert-input {
 }
 @supports (inset-inline-start: 0) {
   [aria-checked=true] .alert-checkbox-inner {
-    inset-inline-start: calc(min(1.5rem, 66px) / 3 + 1px);
+    inset-inline-start: calc(min(1.375rem, 55.836px) / 3);
   }
 }
 @supports not (inset-inline-start: 0) {
   [aria-checked=true] .alert-checkbox-inner {
-    left: calc(min(1.5rem, 66px) / 3 + 1px);
+    left: calc(min(1.375rem, 55.836px) / 3);
   }
   :host-context([dir=rtl]) [aria-checked=true] .alert-checkbox-inner {
     left: unset;
     right: unset;
-    right: calc(min(1.5rem, 66px) / 3 + 1px);
+    right: calc(min(1.375rem, 55.836px) / 3);
   }
   [dir=rtl] [aria-checked=true] .alert-checkbox-inner {
     left: unset;
     right: unset;
-    right: calc(min(1.5rem, 66px) / 3 + 1px);
+    right: calc(min(1.375rem, 55.836px) / 3);
   }
   @supports selector(:dir(rtl)) {
     [aria-checked=true] .alert-checkbox-inner:dir(rtl) {
       left: unset;
       right: unset;
-      right: calc(min(1.5rem, 66px) / 3 + 1px);
+      right: calc(min(1.375rem, 55.836px) / 3);
     }
   }
 }
@@ -684,7 +685,7 @@ textarea.alert-input {
   border-top: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   border-right: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
   background-color: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
   font-size: max(17px, 1.0625rem);
   overflow: hidden;
 }
@@ -728,5 +729,5 @@ textarea.alert-input {
 .alert-button-role-destructive,
 .alert-button-role-destructive.ion-activated,
 .alert-button-role-destructive.ion-focused {
-  color: var(--ion-color-danger, #c5000f);
+  color: var(--ion-color-danger, #eb445a);
 }

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

@@ -494,7 +494,7 @@ textarea.alert-input {
 
 .alert-input:focus {
   margin-bottom: 4px;
-  border-bottom: 2px solid var(--ion-color-primary, #0054e9);
+  border-bottom: 2px solid var(--ion-color-primary, #3880ff);
 }
 
 .alert-radio-group,
@@ -580,7 +580,7 @@ textarea.alert-input {
   height: 10px;
   transform: scale3d(0, 0, 0);
   transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: var(--ion-color-primary, #0054e9);
+  background-color: var(--ion-color-primary, #3880ff);
 }
 @supports (inset-inline-start: 0) {
   .alert-radio-inner {
@@ -615,7 +615,7 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-radio-icon {
-  border-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, #3880ff);
 }
 
 [aria-checked=true] .alert-radio-inner {
@@ -675,8 +675,8 @@ textarea.alert-input {
 }
 
 [aria-checked=true] .alert-checkbox-icon {
-  border-color: var(--ion-color-primary, #0054e9);
-  background-color: var(--ion-color-primary, #0054e9);
+  border-color: var(--ion-color-primary, #3880ff);
+  background-color: var(--ion-color-primary, #3880ff);
 }
 
 [aria-checked=true] .alert-checkbox-inner {
@@ -747,7 +747,7 @@ textarea.alert-input {
   padding-bottom: 10px;
   position: relative;
   background-color: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #3880ff);
   font-weight: 500;
   text-align: end;
   text-transform: uppercase;

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

@@ -19,28 +19,6 @@ 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) => {
@@ -94,6 +72,15 @@ 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, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
   --icon-margin-end: 1px;
   --icon-margin-start: -4px;
   /**

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

@@ -1,29 +1,8 @@
 /*!
  * (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, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --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, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
   --padding-top: 3px;
   --padding-end: 8px;

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

@@ -1,7 +1,6 @@
 /*!
  * (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 }) => {
@@ -21,20 +20,3 @@ 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, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
 }
 
 :host(.button-outline) {
-  --border-color: var(--ion-color-primary, #0054e9);
+  --border-color: var(--ion-color-primary, #3880ff);
   --background: transparent;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
 }
 
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
 }
 
 :host(.button-block) {
@@ -465,9 +465,9 @@ ion-ripple-effect {
 }
 
 :host(.button-solid) {
-  --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: var(--ion-color-primary-shade, #3171e0);
+  --background-focused: var(--ion-color-primary-shade, #3171e0);
+  --background-hover: var(--ion-color-primary-tint, #4c8dff);
   --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, #0054e9);
-  --background-focused: var(--ion-color-primary, #0054e9);
+  --background-activated: var(--ion-color-primary, #3880ff);
+  --background-focused: var(--ion-color-primary, #3880ff);
   --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, #0054e9);
+  --background-focused: var(--ion-color-primary, #3880ff);
   --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, #0054e9);
+  --background: var(--ion-color-primary, #3880ff);
   --color: var(--ion-color-primary-contrast, #fff);
 }
 
 :host(.button-outline) {
-  --border-color: var(--ion-color-primary, #0054e9);
+  --border-color: var(--ion-color-primary, #3880ff);
   --background: transparent;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
 }
 
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
-  --color: var(--ion-color-primary, #0054e9);
+  --color: var(--ion-color-primary, #3880ff);
 }
 
 :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, #0054e9);
-  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-focused: var(--ion-color-primary, #3880ff);
+  --background-hover: var(--ion-color-primary, #3880ff);
   --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, #0054e9);
-  --background-hover: var(--ion-color-primary, #0054e9);
+  --background-focused: var(--ion-color-primary, #3880ff);
+  --background-hover: var(--ion-color-primary, #3880ff);
   --background-activated-opacity: 0;
   --background-focused-opacity: .12;
   --background-hover-opacity: .04;

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

@@ -1,56 +1,8 @@
 /*!
  * (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,10 +71,9 @@
    * @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, #0054e9);
-  --border-color-checked: var(--ion-color-primary, #0054e9);
+  --checkbox-background-checked: var(--ion-color-primary, #3880ff);
+  --border-color-checked: var(--ion-color-primary, #3880ff);
   --checkmark-color: var(--ion-color-primary-contrast, #fff);
-  --checkmark-width: 1;
   --transition: none;
   display: inline-block;
   position: relative;
@@ -504,11 +503,12 @@ input {
  */
 :host {
   --border-radius: 50%;
-  --border-width: 0.0625rem;
+  --border-width: 0.125rem;
   --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.625rem, 65.988px);
+  --size: min(1.375rem, 55.836px);
+  --checkmark-width: 1.5px;
 }
 
 :host(.checkbox-disabled) {