From 512751e4cc74f71bb7bf25f60dd83eea6b4d76ab Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 12 Feb 2024 15:11:59 -0500
Subject: [PATCH 1/5] refactor(checkbox): remove legacy implementation

---
 core/src/components.d.ts                  |   5 -
 core/src/components/checkbox/checkbox.tsx | 127 +---------------------
 packages/vue/src/proxies.ts               |   3 +-
 3 files changed, 6 insertions(+), 129 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 668cb2d85fa..e00959ed6d0 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3655,7 +3655,6 @@ declare global {
         "ionChange": CheckboxChangeEventDetail;
         "ionFocus": void;
         "ionBlur": void;
-        "ionStyle": StyleEventDetail;
     }
     interface HTMLIonCheckboxElement extends Components.IonCheckbox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonCheckboxElementEventMap>(type: K, listener: (this: HTMLIonCheckboxElement, ev: IonCheckboxCustomEvent<HTMLIonCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5365,10 +5364,6 @@ declare namespace LocalJSX {
           * Emitted when the checkbox has focus.
          */
         "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
-        /**
-          * Emitted when the styles change.
-         */
-        "onIonStyle"?: (event: IonCheckboxCustomEvent<StyleEventDetail>) => void;
         /**
           * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          */
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index ab65f51a831..c537c047d3c 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -1,14 +1,11 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
-import type { LegacyFormController } from '@utils/forms';
-import { createLegacyFormController } from '@utils/forms';
+import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 import type { Attributes } from '@utils/helpers';
-import { getAriaLabel, inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
-import { printIonWarning } from '@utils/logging';
+import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
 import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
-import type { Color, Mode, StyleEventDetail } from '../../interface';
+import type { Color, Mode } from '../../interface';
 
 import type { CheckboxChangeEventDetail } from './checkbox-interface';
 
@@ -32,13 +29,8 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
 export class Checkbox implements ComponentInterface {
   private inputId = `ion-cb-${checkboxIds++}`;
   private focusEl?: HTMLElement;
-  private legacyFormController!: LegacyFormController; // TODO(FW-3100): remove this
   private inheritedAttributes: Attributes = {};
 
-  // TODO(FW-3100): remove this
-  // This flag ensures we log the deprecation warning at most once.
-  private hasLoggedDeprecationWarning = false;
-
   @Element() el!: HTMLIonCheckboxElement;
 
   /**
@@ -135,46 +127,10 @@ export class Checkbox implements ComponentInterface {
    */
   @Event() ionBlur!: EventEmitter<void>;
 
-  /**
-   * Emitted when the styles change.
-   * @internal
-   */
-  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
-
-  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 = {
-        ...inheritAriaAttributes(this.el),
-      };
-    }
-  }
-
-  @Watch('checked')
-  @Watch('disabled')
-  protected styleChanged() {
-    this.emitStyle();
-  }
-
-  private emitStyle() {
-    const style: StyleEventDetail = {
-      'interactive-disabled': this.disabled,
-      // TODO(FW-3100): remove this
-      legacy: !!this.legacy,
+    this.inheritedAttributes = {
+      ...inheritAriaAttributes(this.el),
     };
-
-    // TODO(FW-3100): remove this
-    if (this.legacyFormController.hasLegacyControl()) {
-      style['checkbox-checked'] = this.checked;
-    }
-
-    this.ionStyle.emit(style);
   }
 
   private setFocus() {
@@ -221,14 +177,7 @@ export class Checkbox implements ComponentInterface {
     this.toggleChecked(ev);
   };
 
-  // TODO(FW-3100): run contents of renderCheckbox directly instead
   render() {
-    const { legacyFormController } = this;
-
-    return legacyFormController.hasLegacyControl() ? this.renderLegacyCheckbox() : this.renderCheckbox();
-  }
-
-  private renderCheckbox() {
     const {
       color,
       checked,
@@ -299,72 +248,6 @@ export class Checkbox implements ComponentInterface {
     );
   }
 
-  // TODO(FW-3100): remove this
-  private 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 (
-      <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}
-      >
-        <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
-          {path}
-        </svg>
-        <label htmlFor={inputId}>{labelText}</label>
-        <input
-          type="checkbox"
-          aria-checked={`${checked}`}
-          disabled={disabled}
-          id={inputId}
-          onChange={this.toggleChecked}
-          onFocus={() => this.onFocus()}
-          onBlur={() => this.onBlur()}
-          ref={(focusEl) => (this.focusEl = focusEl)}
-        />
-      </Host>
-    );
-  }
-
   private getSVGPath(mode: Mode, indeterminate: boolean): HTMLElement {
     let path = indeterminate ? (
       <path d="M6 12L18 12" part="mark" />
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 910a609e349..56836a1fb49 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -219,8 +219,7 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
   'legacy',
   'ionChange',
   'ionFocus',
-  'ionBlur',
-  'ionStyle'
+  'ionBlur'
 ],
 'checked', 'ion-change');
 

From 6cad69408173e6f85cd42f2f1bf5db9f2fe99897 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 12 Feb 2024 15:21:53 -0500
Subject: [PATCH 2/5] remove legacy css

---
 .../src/components/checkbox/checkbox.ios.scss | 18 ----------
 .../checkbox/checkbox.ios.vars.scss           | 24 -------------
 core/src/components/checkbox/checkbox.md.scss | 19 -----------
 .../components/checkbox/checkbox.md.vars.scss | 24 -------------
 core/src/components/checkbox/checkbox.scss    | 34 ++-----------------
 5 files changed, 3 insertions(+), 116 deletions(-)

diff --git a/core/src/components/checkbox/checkbox.ios.scss b/core/src/components/checkbox/checkbox.ios.scss
index 6502aee8f3d..7c7bcafc9fd 100644
--- a/core/src/components/checkbox/checkbox.ios.scss
+++ b/core/src/components/checkbox/checkbox.ios.scss
@@ -31,21 +31,3 @@
 :host(.checkbox-disabled) {
   opacity: $checkbox-ios-disabled-opacity;
 }
-
-
-// iOS Checkbox Within An Item
-// TODO(FW-3100): remove this
-// -----------------------------------------
-
-:host(.in-item.legacy-checkbox) {
-  // end position by default
-  @include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start);
-
-  display: block;
-
-  position: static;
-}
-
-:host(.in-item.legacy-checkbox[slot="start"]) {
-  @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start);
-}
diff --git a/core/src/components/checkbox/checkbox.ios.vars.scss b/core/src/components/checkbox/checkbox.ios.vars.scss
index b53c6c6f425..b63650a309c 100644
--- a/core/src/components/checkbox/checkbox.ios.vars.scss
+++ b/core/src/components/checkbox/checkbox.ios.vars.scss
@@ -26,29 +26,5 @@ $checkbox-ios-icon-border-radius:         50% !default;
 /// @prop - Opacity of the disabled checkbox
 $checkbox-ios-disabled-opacity:           $form-control-ios-disabled-opacity !default;
 
-/// @prop - Margin top of the left checkbox item
-$checkbox-ios-item-start-margin-top:      8px !default;
-
-/// @prop - Margin end of the left checkbox item
-$checkbox-ios-item-start-margin-end:      $item-ios-padding-end !default;
-
-/// @prop - Margin bottom of the left checkbox item
-$checkbox-ios-item-start-margin-bottom:   $checkbox-ios-item-start-margin-top !default;
-
-/// @prop - Margin start of the left checkbox item
-$checkbox-ios-item-start-margin-start:    2px !default;
-
-/// @prop - Margin top of the right checkbox item
-$checkbox-ios-item-end-margin-top:        10px !default;
-
-/// @prop - Margin end of the right checkbox item
-$checkbox-ios-item-end-margin-end:        8px !default;
-
-/// @prop - Margin bottom of the right checkbox item
-$checkbox-ios-item-end-margin-bottom:     9px !default;
-
-/// @prop - Margin start of the right checkbox item
-$checkbox-ios-item-end-margin-start:      0 !default;
-
 /// @prop - Checkmark width of the checkbox icon
 $checkbox-ios-icon-checkmark-width:       1.5px !default;
diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss
index 5b7b59470df..e87f7bbf1a0 100644
--- a/core/src/components/checkbox/checkbox.md.scss
+++ b/core/src/components/checkbox/checkbox.md.scss
@@ -44,7 +44,6 @@
 // opacity set by its spec, while the label
 // should match the other form controls
 
-:host(.legacy-checkbox.checkbox-disabled),
 :host(.checkbox-disabled) .label-text-wrapper {
   opacity: $checkbox-md-disabled-opacity;
 }
@@ -52,21 +51,3 @@
 :host(.checkbox-disabled) .native-wrapper {
   opacity: $checkbox-md-icon-disabled-opacity;
 }
-
-
-// Material Design Checkbox Within An Item
-// TODO(FW-3100): remove this
-// --------------------------------------------------------
-
-:host(.in-item.legacy-checkbox) {
-  // end position by default
-  @include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start);
-
-  display: block;
-
-  position: static;
-}
-
-:host(.in-item.legacy-checkbox[slot="start"]) {
-  @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start);
-}
diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss
index 307ba249cb3..d2359c4067d 100644
--- a/core/src/components/checkbox/checkbox.md.vars.scss
+++ b/core/src/components/checkbox/checkbox.md.vars.scss
@@ -30,30 +30,6 @@ $checkbox-md-transition-duration:        180ms !default;
 /// @prop - Transition easing of the checkbox
 $checkbox-md-transition-easing:          cubic-bezier(.4, 0, .2, 1) !default;
 
-/// @prop - Margin top of the start checkbox item
-$checkbox-md-item-start-margin-top:      18px !default;
-
-/// @prop - Margin end of the start checkbox item
-$checkbox-md-item-start-margin-end:      36px !default;
-
-/// @prop - Margin bottom of the start checkbox item
-$checkbox-md-item-start-margin-bottom:   $checkbox-md-item-start-margin-top !default;
-
-/// @prop - Margin start of the start checkbox item
-$checkbox-md-item-start-margin-start:    4px !default;
-
-/// @prop - Margin top of the end checkbox item
-$checkbox-md-item-end-margin-top:        18px !default;
-
-/// @prop - Margin end of the end checkbox item
-$checkbox-md-item-end-margin-end:        0 !default;
-
-/// @prop - Margin bottom of the end checkbox item
-$checkbox-md-item-end-margin-bottom:     $checkbox-md-item-end-margin-top !default;
-
-/// @prop - Margin start of the end checkbox item
-$checkbox-md-item-end-margin-start:      0 !default;
-
 /// @prop - Opacity of the disabled checkbox
 /// This value is used because the checkbox color is set to
 /// `rgb(0, 0, 0, 0.60)` when enabled and we need it to be
diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index a47f3d7b449..2f9733ec0ef 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -48,34 +48,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;
 }
 
-// TODO(FW-3100): remove this
-:host(.legacy-checkbox) {
-  width: var(--size);
-  height: var(--size);
-}
-
 :host(.ion-color) {
   --checkbox-background-checked: #{current-color(base)};
   --border-color-checked: #{current-color(base)};
   --checkmark-color: #{current-color(contrast)};
 }
 
-// TODO(FW-3100): remove this
-:host(.legacy-checkbox) label {
-  @include input-cover();
-
-  display: flex;
-
-  align-items: center;
-
-  opacity: 0;
-}
-
 .checkbox-wrapper {
   display: flex;
 
@@ -96,7 +79,7 @@
   overflow: hidden;
 }
 
-:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper {
+:host(.in-item) .label-text-wrapper {
   @include margin($checkbox-item-label-margin-top, null, $checkbox-item-label-margin-bottom, null);
 }
 
@@ -141,18 +124,7 @@ input {
   background: var(--checkbox-background);
 
   box-sizing: border-box;
-}
-
-// TODO(FW-3100): remove this
-:host(.legacy-checkbox) .checkbox-icon {
-  display: block;
-
-  width: 100%;
-  height: 100%;
-}
 
-// TODO(FW-3100): merge this with other .checkbox-icon styles above
-:host(:not(.legacy-checkbox)) .checkbox-icon {
   width: var(--size);
   height: var(--size);
 }

From 84999004064b47ba995147ab8bcfe1b0f12edf9e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 12 Feb 2024 15:23:33 -0500
Subject: [PATCH 3/5] update breaking changes

---
 BREAKING.md                                | 5 +++++
 core/src/components/checkbox/checkbox.scss | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/BREAKING.md b/BREAKING.md
index 9d14348f30a..ba79741297e 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -18,6 +18,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 - [Global Styles](#version-8x-global-styles)
 - [Components](#version-8x-components)
   - [Button](#version-8x-button)
+  - [Checkbox](#version-8x-checkbox)
   - [Content](#version-8x-content)
   - [Datetime](#version-8x-datetime)
   - [Input](#version-8x-input)
@@ -134,6 +135,10 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc
 
 - Button text now wraps by default. If this behavior is not desired, add the `ion-text-nowrap` class from the [CSS Utilities](https://ionicframework.com/docs/layout/css-utilities).
 
+<h4 id="version-8x-checkbox">Checkbox</h4>
+
+ The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
+
 <h4 id="version-8x-content">Content</h4>
 
 - Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index 2f9733ec0ef..47e9f6d7043 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -115,6 +115,9 @@ input {
 
   position: relative;
 
+  width: var(--size);
+  height: var(--size);
+
   transition: var(--transition);
 
   border-width: var(--border-width);
@@ -124,9 +127,6 @@ input {
   background: var(--checkbox-background);
 
   box-sizing: border-box;
-
-  width: var(--size);
-  height: var(--size);
 }
 
 .checkbox-icon path {

From 5332ac8c72f90a6d5a807e5bcc869243411fa073 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 12 Feb 2024 15:55:48 -0500
Subject: [PATCH 4/5] remove legacy prop

---
 core/api.txt                               |  1 -
 core/src/components.d.ts                   |  8 --------
 core/src/components/checkbox/checkbox.tsx  | 13 -------------
 packages/angular/src/directives/proxies.ts |  4 ++--
 packages/vue/src/proxies.ts                |  1 -
 5 files changed, 2 insertions(+), 25 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 2ac742620f6..461cf4dd14d 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -297,7 +297,6 @@ ion-checkbox,prop,disabled,boolean,false,false,false
 ion-checkbox,prop,indeterminate,boolean,false,false,false
 ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',false,false
 ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
-ion-checkbox,prop,legacy,boolean | undefined,undefined,false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
 ion-checkbox,prop,value,any,'on',false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index e00959ed6d0..9a00a9db823 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -630,10 +630,6 @@ export namespace Components {
           * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
         "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
-        /**
-          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior.  Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
-         */
-        "legacy"?: boolean;
         /**
           * The mode determines which platform styles to use.
          */
@@ -5340,10 +5336,6 @@ declare namespace LocalJSX {
           * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
-        /**
-          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior.  Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
-         */
-        "legacy"?: boolean;
         /**
           * The mode determines which platform styles to use.
          */
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index c537c047d3c..d1cddf90363 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -96,19 +96,6 @@ export class Checkbox implements ComponentInterface {
    */
   @Prop() alignment: 'start' | 'center' = 'center';
 
-  // TODO(FW-3100): remove this
-  /**
-   * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
-   * Ionic will only opt checkboxes in to the modern form markup when they are
-   * using either the `aria-label` attribute or have text in the default slot. As a result,
-   * the `legacy` property should only be used as an escape hatch when you want to
-   * avoid this automatic opt-in behavior.
-   *
-   * Note that this property will be removed in an upcoming major release
-   * of Ionic, and all form components will be opted-in to using the modern form markup.
-   */
-  @Prop() legacy?: boolean;
-
   /**
    * Emitted when the checked property has changed
    * as a result of a user action such as a click.
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index d038c6f8700..60e36e8cd43 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -507,14 +507,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 
 @ProxyCmp({
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'legacy', 'mode', 'name', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
 })
 export class IonCheckbox {
   protected el: HTMLElement;
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 56836a1fb49..7e14121b819 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -216,7 +216,6 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
   'labelPlacement',
   'justify',
   'alignment',
-  'legacy',
   'ionChange',
   'ionFocus',
   'ionBlur'

From 38cba18c3a1d5d40a04a4eba1d72f6d5d81ae4c9 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 13 Feb 2024 19:33:20 -0500
Subject: [PATCH 5/5] remove legacy

---
 packages/angular/standalone/src/directives/checkbox.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/angular/standalone/src/directives/checkbox.ts b/packages/angular/standalone/src/directives/checkbox.ts
index 7dad42fefc3..c1259d10800 100644
--- a/packages/angular/standalone/src/directives/checkbox.ts
+++ b/packages/angular/standalone/src/directives/checkbox.ts
@@ -23,7 +23,6 @@ const CHECKBOX_INPUTS = [
   'indeterminate',
   'justify',
   'labelPlacement',
-  'legacy',
   'mode',
   'name',
   'value',