voyager-ionic-core 7.7.3 → 8.0.0-beta.2

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

@@ -100,7 +100,7 @@
   font-family: var(--ion-font-family, inherit);
   text-align: center;
   text-decoration: none;
-  white-space: nowrap;
+  white-space: normal;
   user-select: none;
   vertical-align: top;
   vertical-align: -webkit-baseline-middle;
@@ -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.js

@@ -199,7 +199,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: '8533314504b286ec10e26722f93376d86a7ca1c9', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'cb5af107c877f0c1926045acfd4f6922f7dbcb8d', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -214,7 +214,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: '79bf020fdac0c2ceb2b05547b3e5a9a11e60abb4' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '109481ba86102647023b746b054b2718d3c9d92a', class: "button-inner" }, h("slot", { key: 'f824ddd9f988b9bd33136555b16aa790d9291b49', name: "icon-only" }), h("slot", { key: 'd614f4e430792c5f93be4b3a8c57a826d74b9cfd', name: "start" }), h("slot", { key: '95d00c8a980c31cc7f84732f51a17a0cd285a7cb' }), h("slot", { key: 'a228ff52cbe04dc9d2e22bb66611ecc96d130e6f', name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: 'bc4c5e6a17fa90e172e56bd481ba24c69419dd1a' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: 'f1eac679bcdf2b40177f920025a49705f726bf0c', class: "button-inner" }, h("slot", { key: '19aa897289923c8e7d16a354f9acac312f0641ea', name: "icon-only" }), h("slot", { key: '0a321ca359f631a2c8708566b3f1b936fe9a4d00', name: "start" }), h("slot", { key: '9ec1b7197ec1b4d858338f45433f6bfa46b81a3d' }), h("slot", { key: 'e632fd3b918ec94e119a5e766371886072292d75', name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -100,7 +100,7 @@
   font-family: var(--ion-font-family, inherit);
   text-align: center;
   text-decoration: none;
-  white-space: nowrap;
+  white-space: normal;
   user-select: none;
   vertical-align: top;
   vertical-align: -webkit-baseline-middle;
@@ -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/button/test/wrap/button.e2e.js

@@ -6,33 +6,29 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('button: wrap'), () => {
         test('should render button with long text', async ({ page }) => {
-            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button class="ion-text-wrap">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button>This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `, config);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-wrap`));
         });
         test('should render small button with long text', async ({ page }) => {
-            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button class="ion-text-wrap" size="small">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button size="small">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `, config);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-small`));
         });
         test('should render large button with long text', async ({ page }) => {
-            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button class="ion-text-wrap" size="large">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button size="large">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `, config);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-large`));
         });
         test('should render button with long text and icons', async ({ page }) => {
-            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button class="ion-text-wrap">
+        <ion-button>
           <ion-icon slot="start" name="heart"></ion-icon>
           This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           <ion-icon slot="end" name="star"></ion-icon>
@@ -42,17 +38,15 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-icons`));
         });
         test('should render block button with long text', async ({ page }) => {
-            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button class="ion-text-wrap" expand="block">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button expand="block">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `, config);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-block`));
         });
         test('should render block button with long text and icons', async ({ page }) => {
-            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button class="ion-text-wrap" expand="block">
+        <ion-button expand="block">
           <ion-icon slot="start" name="heart"></ion-icon>
           This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           <ion-icon slot="end" name="star"></ion-icon>
@@ -62,17 +56,15 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-block-icons`));
         });
         test('should render full button with long text', async ({ page }) => {
-            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button class="ion-text-wrap" expand="full">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
+        <ion-button expand="full">This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends</ion-button>
       `, config);
             const button = page.locator('ion-button');
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-full`));
         });
         test('should render full button with long text and icons', async ({ page }) => {
-            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
-        <ion-button class="ion-text-wrap" expand="full">
+        <ion-button expand="full">
           <ion-icon slot="start" name="heart"></ion-icon>
           This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           <ion-icon slot="end" name="star"></ion-icon>
@@ -82,10 +74,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(button).toHaveScreenshot(screenshot(`button-wrap-full-icons`));
         });
         test('should render an item button with long text', async ({ page }) => {
-            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
         <ion-item>
-          <ion-button class="ion-text-wrap" slot="end">
+          <ion-button slot="end">
             This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           </ion-button>
         </ion-item>
@@ -94,10 +85,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(item).toHaveScreenshot(screenshot(`button-wrap-item-button`));
         });
         test('should render an item button with long text and icons', async ({ page }) => {
-            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
         <ion-item>
-          <ion-button class="ion-text-wrap" slot="end">
+          <ion-button slot="end">
             <ion-icon slot="start" name="heart"></ion-icon>
             This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
             <ion-icon slot="end" name="star"></ion-icon>
@@ -108,11 +98,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(item).toHaveScreenshot(screenshot(`button-wrap-item-button-icons`));
         });
         test('should render a list header button with long text', async ({ page }) => {
-            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
         <ion-list-header>
           <ion-label>List Header</ion-label>
-          <ion-button class="ion-text-wrap">
+          <ion-button>
             This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
           </ion-button>
         </ion-list-header>
@@ -121,11 +110,10 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(listHeader).toHaveScreenshot(screenshot(`button-wrap-list-header-button`));
         });
         test('should render a toolbar button with long text', async ({ page }) => {
-            // TODO(FW-4599): remove ion-text-wrap class
             await page.setContent(`
         <ion-toolbar>
           <ion-buttons slot="end">
-            <ion-button class="ion-text-wrap">
+            <ion-button>
               This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
             </ion-button>
           </ion-buttons>

package/dist/collection/components/buttons/buttons.js

@@ -9,10 +9,10 @@ export class Buttons {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '52c0c5535f5688a481746fe8fd92b6c02941526f', class: {
+        return (h(Host, { key: '3b78d2f2ebdc2a1720edb570270dd0228eef6ae5', class: {
                 [mode]: true,
                 ['buttons-collapse']: this.collapse,
-            } }));
+            } }, h("slot", { key: 'a48e728d5d5ecb29965c3a2c9ffa9516b5da5309' })));
     }
     static get is() { return "ion-buttons"; }
     static get encapsulation() { return "scoped"; }

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

@@ -185,7 +185,7 @@ ion-ripple-effect {
  */
 :host {
   --background: var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));
-  --color: var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, #666666)));
+  --color: var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))));
   -webkit-margin-start: 16px;
   margin-inline-start: 16px;
   -webkit-margin-end: 16px;

package/dist/collection/components/card/card.js

@@ -49,7 +49,7 @@ export class Card {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9e35c114ce466623024b94dd6797118ad027417d', class: createColorClasses(this.color, {
+        return (h(Host, { key: '20989b44d99554e110bd2b41dca7f989f038dc5b', class: createColorClasses(this.color, {
                 [mode]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),

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

@@ -185,7 +185,7 @@ ion-ripple-effect {
  */
 :host {
   --background: var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));
-  --color: var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, #737373)));
+  --color: var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))));
   -webkit-margin-start: 10px;
   margin-inline-start: 10px;
   -webkit-margin-end: 10px;

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

@@ -9,7 +9,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class CardContent {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'd4da147bb0b0b14684b54d37d04ba5a8f7a7d71d', class: {
+        return (h(Host, { key: 'c2146c75bb2e20dd975b144dd7a99c122d420aab', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`card-content-${mode}`]: true,

package/dist/collection/components/card-header/card-header.js

@@ -14,11 +14,11 @@ export class CardHeader {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '070294064c4b17c941961c9cccf1ae6592b385b6', class: createColorClasses(this.color, {
+        return (h(Host, { key: '05a406ae897dd0d1564bb9d0e213c5c2c21445fa', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: 'adac918d5e93bf69b07c5bda329ebf8c719bd623' })));
+            }) }, h("slot", { key: '505a74bfb528182bad69d519b848ac2060f4552f' })));
     }
     static get is() { return "ion-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-subtitle/card-subtitle.ios.css

@@ -122,7 +122,7 @@
  * }
  */
 :host {
-  --color: var(--ion-color-step-600, #666666);
+  --color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;

package/dist/collection/components/card-subtitle/card-subtitle.js

@@ -13,10 +13,10 @@ export class CardSubtitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ae115cf349cd13f88d20b1fbab6b8a813a87b925', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        return (h(Host, { key: '4494e715bdff695b17df995bca3c9924cc9dec6c', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: 'f5dd779b34b5c5c541cbbe56cc8a877e50513252' })));
+            }) }, h("slot", { key: '717e7f2b865b7bb6ae570922eb740c4ae731d85d' })));
     }
     static get is() { return "ion-card-subtitle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-subtitle/card-subtitle.md.css

@@ -122,7 +122,7 @@
  * }
  */
 :host {
-  --color: var(--ion-color-step-550, #737373);
+  --color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;

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

@@ -13,10 +13,10 @@ export class CardTitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '432d7bf971fda63c30c748986143ec2a8be9e4af', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        return (h(Host, { key: '1f26cd9bd47f87540dfaff6ac8150a80bcf14475', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: '3c5dcf6ac1bf981c6c0488f0027765269c80db5a' })));
+            }) }, h("slot", { key: 'b2d51db6dc9284e17cb900af557b36ef866cdc3c' })));
     }
     static get is() { return "ion-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-title/card-title.md.css

@@ -122,7 +122,7 @@
  * }
  */
 :host {
-  --color: var(--ion-color-step-850, #262626);
+  --color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;

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, #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;
@@ -94,66 +93,17 @@
  * toolbar which is why we do not
  * limit the below behavior to just ion-item.
  */
-:host([slot=start]:not(.legacy-checkbox)),
-:host([slot=end]:not(.legacy-checkbox)) {
+:host([slot=start]),
+:host([slot=end]) {
   width: auto;
 }
 
-:host(.legacy-checkbox) {
-  width: var(--size);
-  height: var(--size);
-}
-
 :host(.ion-color) {
   --checkbox-background-checked: var(--ion-color-base);
   --border-color-checked: var(--ion-color-base);
   --checkmark-color: var(--ion-color-contrast);
 }
 
-:host(.legacy-checkbox) 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;
-}
-@supports (inset-inline-start: 0) {
-  :host(.legacy-checkbox) label {
-    inset-inline-start: 0;
-  }
-}
-@supports not (inset-inline-start: 0) {
-  :host(.legacy-checkbox) label {
-    left: 0;
-  }
-  :host-context([dir=rtl]):host(.legacy-checkbox) label, :host-context([dir=rtl]).legacy-checkbox label {
-    left: unset;
-    right: unset;
-    right: 0;
-  }
-  @supports selector(:dir(rtl)) {
-    :host(.legacy-checkbox:dir(rtl)) label {
-      left: unset;
-      right: unset;
-      right: 0;
-    }
-  }
-}
-:host(.legacy-checkbox) label::-moz-focus-inner {
-  border: 0;
-}
-
 .checkbox-wrapper {
   display: flex;
   flex-grow: 1;
@@ -168,7 +118,7 @@
   overflow: hidden;
 }
 
-:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper {
+:host(.in-item) .label-text-wrapper {
   margin-top: 10px;
   margin-bottom: 10px;
 }
@@ -218,6 +168,8 @@ input {
 .checkbox-icon {
   border-radius: var(--border-radius);
   position: relative;
+  width: var(--size);
+  height: var(--size);
   transition: var(--transition);
   border-width: var(--border-width);
   border-style: var(--border-style);
@@ -226,17 +178,6 @@ input {
   box-sizing: border-box;
 }
 
-:host(.legacy-checkbox) .checkbox-icon {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-:host(:not(.legacy-checkbox)) .checkbox-icon {
-  width: var(--size);
-  height: var(--size);
-}
-
 .checkbox-icon path {
   fill: none;
   stroke: var(--checkmark-color);
@@ -504,33 +445,14 @@ 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) {
   opacity: 0.3;
-}
-
-:host(.in-item.legacy-checkbox) {
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 8px;
-  margin-inline-end: 8px;
-  margin-top: 10px;
-  margin-bottom: 9px;
-  display: block;
-  position: static;
-}
-
-:host(.in-item.legacy-checkbox[slot=start]) {
-  -webkit-margin-start: 2px;
-  margin-inline-start: 2px;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-  margin-top: 8px;
-  margin-bottom: 8px;
 }