voyager-ionic-core 7.7.2 → 8.0.0-beta.1

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/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.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-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.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.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;
 }

package/dist/collection/components/checkbox/checkbox.js

@@ -2,9 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { createLegacyFormController } from "../../utils/forms/index";
-import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from "../../utils/helpers";
-import { printIonWarning } from "../../utils/logging/index";
+import { inheritAriaAttributes, renderHiddenInput } from "../../utils/helpers";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 /**
@@ -20,9 +18,6 @@ export class Checkbox {
     constructor() {
         this.inputId = `ion-cb-${checkboxIds++}`;
         this.inheritedAttributes = {};
-        // TODO(FW-3100): remove this
-        // This flag ensures we log the deprecation warning at most once.
-        this.hasLoggedDeprecationWarning = false;
         /**
          * Sets the checked property and emits
          * the ionChange event. Use this to update the
@@ -63,49 +58,21 @@ export class Checkbox {
         this.labelPlacement = 'start';
         this.justify = 'space-between';
         this.alignment = 'center';
-        this.legacy = undefined;
-    }
-    connectedCallback() {
-        this.legacyFormController = createLegacyFormController(this.el); // TODO(FW-3100): remove this
     }
     componentWillLoad() {
-        this.emitStyle();
-        // TODO(FW-3100): remove check
-        if (!this.legacyFormController.hasLegacyControl()) {
-            this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
-        }
-    }
-    styleChanged() {
-        this.emitStyle();
-    }
-    emitStyle() {
-        const style = {
-            'interactive-disabled': this.disabled,
-            // TODO(FW-3100): remove this
-            legacy: !!this.legacy,
-        };
-        // TODO(FW-3100): remove this
-        if (this.legacyFormController.hasLegacyControl()) {
-            style['checkbox-checked'] = this.checked;
-        }
-        this.ionStyle.emit(style);
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     setFocus() {
         if (this.focusEl) {
             this.focusEl.focus();
         }
     }
-    // TODO(FW-3100): run contents of renderCheckbox directly instead
     render() {
-        const { legacyFormController } = this;
-        return legacyFormController.hasLegacyControl() ? this.renderLegacyCheckbox() : this.renderCheckbox();
-    }
-    renderCheckbox() {
         const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
         const mode = getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { class: createColorClasses(color, {
+        return (h(Host, { key: 'be30606f48a3adf62eddc68b7d7f908d0c46f96d', class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -115,40 +82,10 @@ export class Checkbox {
                 [`checkbox-justify-${justify}`]: true,
                 [`checkbox-alignment-${alignment}`]: true,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, h("label", { class: "checkbox-wrapper" }, h("input", Object.assign({ type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { class: {
+            }), onClick: this.onClick }, h("label", { key: '96c3f85a0ae6970743f6965d614033426cf2b163', class: "checkbox-wrapper" }, h("input", Object.assign({ key: 'd998089218bcb6065228095e38af936eebfa3780', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { key: 'f2374957e47eec899aa2ca49ede4cfdf8397fc18', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, h("slot", null)), h("div", { class: "native-wrapper" }, h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
-    }
-    // TODO(FW-3100): remove this
-    renderLegacyCheckbox() {
-        if (!this.hasLoggedDeprecationWarning) {
-            printIonWarning(`ion-checkbox now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.
-
-Example: <ion-checkbox>Label</ion-checkbox>
-Example with aria-label: <ion-checkbox aria-label="Label"></ion-checkbox>
-
-Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);
-            if (this.legacy) {
-                printIonWarning(`ion-checkbox is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
-Developers can dismiss this warning by removing their usage of the "legacy" property and using the new checkbox syntax.`, this.el);
-            }
-            this.hasLoggedDeprecationWarning = true;
-        }
-        const { color, checked, disabled, el, getSVGPath, indeterminate, inputId, name, value } = this;
-        const mode = getIonMode(this);
-        const { label, labelId, labelText } = getAriaLabel(el, inputId);
-        const path = getSVGPath(mode, indeterminate);
-        renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { "aria-labelledby": label ? labelId : null, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "checkbox", class: createColorClasses(color, {
-                [mode]: true,
-                'in-item': hostContext('ion-item', el),
-                'checkbox-checked': checked,
-                'checkbox-disabled': disabled,
-                'checkbox-indeterminate': indeterminate,
-                'legacy-checkbox': true,
-                interactive: true,
-            }), onClick: this.onClick }, h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path), h("label", { htmlFor: inputId }, labelText), h("input", { type: "checkbox", "aria-checked": `${checked}`, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));
+            }, part: "label" }, h("slot", { key: '3bd6bc289c26e96cc0b4a8b39154fec1d02ba426' })), h("div", { key: '30397663226d628859d3814f9dc53ee4aad57de5', class: "native-wrapper" }, h("svg", { key: '53374f787677adfdb3b693ead3f8d86412127c10', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
@@ -339,23 +276,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                 "attribute": "alignment",
                 "reflect": false,
                 "defaultValue": "'center'"
-            },
-            "legacy": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt checkboxes in to the modern form markup when they are\nusing either the `aria-label` attribute or have text in the default slot. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\n\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup."
-                },
-                "attribute": "legacy",
-                "reflect": false
             }
         };
     }
@@ -411,41 +331,8 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
                     "resolved": "void",
                     "references": {}
                 }
-            }, {
-                "method": "ionStyle",
-                "name": "ionStyle",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": "Emitted when the styles change."
-                },
-                "complexType": {
-                    "original": "StyleEventDetail",
-                    "resolved": "StyleEventDetail",
-                    "references": {
-                        "StyleEventDetail": {
-                            "location": "import",
-                            "path": "../../interface",
-                            "id": "src/interface.d.ts::StyleEventDetail"
-                        }
-                    }
-                }
             }];
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "checked",
-                "methodName": "styleChanged"
-            }, {
-                "propName": "disabled",
-                "methodName": "styleChanged"
-            }];
-    }
 }
 let checkboxIds = 0;