From 4c101b9ab13a7e52de255eb9705edc7d70d70d4c Mon Sep 17 00:00:00 2001
From: John Kreitlow <863023+radium-v@users.noreply.github.com>
Date: Fri, 9 Dec 2022 13:41:10 -0800
Subject: [PATCH 1/5] add open-wc form-control to fast-foundation

---
 packages/web-components/fast-foundation/package.json | 1 +
 yarn.lock                                            | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json
index 80648487ee9..d67f1b0bdad 100644
--- a/packages/web-components/fast-foundation/package.json
+++ b/packages/web-components/fast-foundation/package.json
@@ -97,6 +97,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.0.3",
     "@microsoft/fast-element": "2.0.0-beta.23",
+    "@open-wc/form-control": "^0.4.1",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "tabbable": "^5.2.0",
     "tslib": "^2.4.0"
diff --git a/yarn.lock b/yarn.lock
index 86fa66a3d8b..c0a8a17ccbc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3845,6 +3845,11 @@
   dependencies:
     "@octokit/openapi-types" "^13.11.0"
 
+"@open-wc/form-control@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@open-wc/form-control/-/form-control-0.4.1.tgz#8ad8bd9f83d7619b2d8f71d26ba919f8061b6142"
+  integrity sha512-9mUrlKgB9No56LtcOeG9sTy16r9aQsOR/9fKh3r9xtkAgaU6tK9nlI8u9z/6CHsvMeyumxuWjE5sypajVN7qBA==
+
 "@parcel/watcher@2.0.4":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.0.4.tgz#f300fef4cc38008ff4b8c29d92588eced3ce014b"

From 21505ca48b5d80e22b0f328b7c57a42456f8bcca Mon Sep 17 00:00:00 2001
From: John Kreitlow <863023+radium-v@users.noreply.github.com>
Date: Tue, 17 Jan 2023 12:24:44 -0800
Subject: [PATCH 2/5] work in progress

---
 .../fast-foundation/docs/api-report.md        |  51 +++-
 .../fast-foundation/package.json              |   1 +
 .../fast-foundation/src/checkbox/README.md    |  61 ++++-
 .../src/checkbox/checkbox.template.ts         |   6 +-
 .../fast-foundation/src/checkbox/checkbox.ts  | 242 ++++++++++++++++--
 .../src/checkbox/stories/checkbox.register.ts |   2 -
 .../src/checkbox/stories/checkbox.stories.ts  |   6 +-
 yarn.lock                                     |   5 +
 8 files changed, 324 insertions(+), 50 deletions(-)

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 1b30ff3053d..956b79c7152 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -6,6 +6,7 @@
 
 import { CaptureType } from '@microsoft/fast-element';
 import { Constructable } from '@microsoft/fast-element';
+import { Constructor } from '@open-wc/form-control';
 import { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
 import type { ElementsFilter } from '@microsoft/fast-element';
@@ -13,11 +14,14 @@ import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
+import { FormControlInterface } from '@open-wc/form-control';
 import { HostBehavior } from '@microsoft/fast-element';
 import { HostController } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
+import { PartialFASTElementDefinition } from '@microsoft/fast-element';
 import type { SyntheticViewTemplate } from '@microsoft/fast-element';
+import { Validator } from '@open-wc/form-control';
 import { ViewTemplate } from '@microsoft/fast-element';
 
 // @public
@@ -911,20 +915,53 @@ export interface FASTCalendar extends StartEnd {
 export class FASTCard extends FASTElement {
 }
 
-// Warning: (ae-forgotten-export) The symbol "FormAssociatedCheckbox" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "FASTCheckbox_base" needs to be exported by the entry point index.d.ts
 //
 // @public
-export class FASTCheckbox extends FormAssociatedCheckbox {
-    constructor();
-    // @internal (undocumented)
-    clickHandler: (e: MouseEvent) => void;
+export class FASTCheckbox extends FASTCheckbox_base {
+    // (undocumented)
+    ariaChecked: string | null;
+    // (undocumented)
+    checked: boolean;
+    checkedAttribute: boolean;
+    // (undocumented)
+    protected checkedAttributeChanged(prev: boolean | undefined, next: boolean): void;
+    // (undocumented)
+    checkedChanged(prev: boolean | undefined, next: boolean): void;
+    // @internal
+    clickHandler: (e: Event) => void;
+    currentChecked: boolean;
+    // (undocumented)
+    currentCheckedChanged(prev: boolean | undefined, next: boolean): void;
+    // (undocumented)
+    defaultChecked: boolean;
+    // (undocumented)
+    defaultCheckedChanged(): void;
     // @internal (undocumented)
     defaultSlottedNodes: Node[];
-    indeterminate: boolean;
+    protected dirtyChecked: boolean;
     // @internal
+    dirtyValue: boolean;
+    disabled: boolean;
+    // (undocumented)
+    static formControlValidators: Validator[];
+    indeterminate: boolean | undefined;
+    // (undocumented)
+    indeterminateChanged(prev: boolean | undefined, next: boolean | undefined): void;
     initialValue: string;
-    // @internal (undocumented)
+    initialValueChanged(previous: string, next: string): void;
+    // @internal
     keypressHandler: (e: KeyboardEvent) => void;
+    name: string;
+    required: boolean;
+    // (undocumented)
+    resetFormControl(): void;
+    // (undocumented)
+    shouldFormValueUpdate(): boolean;
+    // (undocumented)
+    value: string;
+    // (undocumented)
+    valueChanged(previous: string, next: string): void;
 }
 
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json
index d67f1b0bdad..c105d35db88 100644
--- a/packages/web-components/fast-foundation/package.json
+++ b/packages/web-components/fast-foundation/package.json
@@ -75,6 +75,7 @@
     "@storybook/html": "6.5.10",
     "@storybook/manager-webpack5": "6.5.10",
     "concurrently": "^7.3.0",
+    "element-internals-polyfill": "^1.1.17",
     "esm": "^3.2.25",
     "express": "^4.18.1",
     "expect": "29.2.1",
diff --git a/packages/web-components/fast-foundation/src/checkbox/README.md b/packages/web-components/fast-foundation/src/checkbox/README.md
index 36c6d7d9ade..3e66a014106 100644
--- a/packages/web-components/fast-foundation/src/checkbox/README.md
+++ b/packages/web-components/fast-foundation/src/checkbox/README.md
@@ -104,16 +104,52 @@ export const myCheckbox = Checkbox.compose<CheckboxOptions>({
 
 #### Superclass
 
-| Name                     | Module                                    | Package |
-| ------------------------ | ----------------------------------------- | ------- |
-| `FormAssociatedCheckbox` | /src/checkbox/checkbox.form-associated.js |         |
+| Name          | Module | Package                 |
+| ------------- | ------ | ----------------------- |
+| `FASTElement` |        | @microsoft/fast-element |
+
+#### Mixins
+
+| Name               | Module | Package               |
+| ------------------ | ------ | --------------------- |
+| `FormControlMixin` |        | @open-wc/form-control |
+
+#### Static Fields
+
+| Name                    | Privacy | Type    | Default               | Description | Inherited From |
+| ----------------------- | ------- | ------- | --------------------- | ----------- | -------------- |
+| `formControlValidators` |         | `array` | `[requiredValidator]` |             |                |
 
 #### Fields
 
-| Name            | Privacy | Type      | Default | Description                            | Inherited From         |
-| --------------- | ------- | --------- | ------- | -------------------------------------- | ---------------------- |
-| `indeterminate` | public  | `boolean` | `false` | The indeterminate state of the control |                        |
-| `proxy`         |         |           |         |                                        | FormAssociatedCheckbox |
+| Name               | Privacy   | Type                   | Default | Description                                                                                                                                                                                                                                                                                                                             | Inherited From |
+| ------------------ | --------- | ---------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `checkedAttribute` | public    | `boolean`              | `false` | The initial state of the checkbox.                                                                                                                                                                                                                                                                                                      |                |
+| `defaultChecked`   | public    | `boolean`              |         |                                                                                                                                                                                                                                                                                                                                         |                |
+| `initialValue`     | public    | `string`               | `"on"`  | The initial value of the form. This value sets the \`value\` property only when the \`value\` property has not been explicitly set.                                                                                                                                                                                                     |                |
+| `value`            | public    | `string`               |         |                                                                                                                                                                                                                                                                                                                                         |                |
+| `currentChecked`   | public    | `boolean`              |         | The current checkedness of the element. This property serves as a mechanism to set the \`checked\` property through both property assignment and the .setAttribute() method. This is useful for setting the field's checkedness in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding. |                |
+| `dirtyChecked`     | protected | `boolean`              | `false` | Tracks whether the "checked" property has been changed. This is necessary to provide consistent behavior with normal input checkboxes                                                                                                                                                                                                   |                |
+| `checked`          | public    | `boolean`              | `false` |                                                                                                                                                                                                                                                                                                                                         |                |
+| `disabled`         | public    | `boolean`              | `false` | Sets the element's disabled state. A disabled element will not be included during form submission.                                                                                                                                                                                                                                      |                |
+| `ariaChecked`      | public    | `string or null`       |         |                                                                                                                                                                                                                                                                                                                                         |                |
+| `indeterminate`    | public    | `boolean or undefined` |         | The indeterminate state of the control                                                                                                                                                                                                                                                                                                  |                |
+| `name`             | public    | `string`               |         | The name of the element. This element's value will be surfaced during form submission under the provided name.                                                                                                                                                                                                                          |                |
+| `required`         | public    | `boolean`              | `false` | The required state of the element. If true, the element will be required to complete the form.                                                                                                                                                                                                                                          |                |
+
+#### Methods
+
+| Name                      | Privacy   | Description                                         | Parameters                                               | Return    | Inherited From |
+| ------------------------- | --------- | --------------------------------------------------- | -------------------------------------------------------- | --------- | -------------- |
+| `checkedAttributeChanged` | protected |                                                     | `prev: boolean or undefined, next: boolean`              | `void`    |                |
+| `defaultCheckedChanged`   | public    |                                                     |                                                          | `void`    |                |
+| `initialValueChanged`     | public    | Invoked when the \`initialValue\` property changes. | `previous: string, next: string`                         | `void`    |                |
+| `valueChanged`            | public    |                                                     | `previous: string, next: string`                         | `void`    |                |
+| `currentCheckedChanged`   | public    |                                                     | `prev: boolean or undefined, next: boolean`              |           |                |
+| `checkedChanged`          | public    |                                                     | `prev: boolean or undefined, next: boolean`              | `void`    |                |
+| `shouldFormValueUpdate`   |           |                                                     |                                                          | `boolean` |                |
+| `resetFormControl`        |           |                                                     |                                                          | `void`    |                |
+| `indeterminateChanged`    | public    |                                                     | `prev: boolean or undefined, next: boolean or undefined` | `void`    |                |
 
 #### Events
 
@@ -121,6 +157,17 @@ export const myCheckbox = Checkbox.compose<CheckboxOptions>({
 | -------- | ---- | ---------------------------------------------------------- | -------------- |
 | `change` |      | Emits a custom change event when the checked state changes |                |
 
+#### Attributes
+
+| Name              | Field            | Inherited From |
+| ----------------- | ---------------- | -------------- |
+| `checked`         | checkedAttribute |                |
+| `value`           | initialValue     |                |
+| `current-checked` | currentChecked   |                |
+|                   | disabled         |                |
+| `name`            | name             |                |
+|                   | required         |                |
+
 #### CSS Parts
 
 | Name      | Description                                          |
diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts
index 9e6975ddb62..555c7783475 100644
--- a/packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts
@@ -12,12 +12,12 @@ export function checkboxTemplate<T extends FASTCheckbox>(
     return html<T>`
         <template
             role="checkbox"
-            aria-checked="${x => (x.indeterminate ? "mixed" : x.checked)}"
-            aria-required="${x => x.required}"
+            aria-checked="${x => x.ariaChecked}"
             aria-disabled="${x => x.disabled}"
+            aria-required="${x => x.required}"
             tabindex="${x => (x.disabled ? null : 0)}"
             @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
-            @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+            @click="${(x, c) => x.clickHandler(c.event)}"
         >
             <div part="control" class="control">
                 <slot name="checked-indicator">
diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts
index 696057d2e5a..6e7604db30d 100644
--- a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts
@@ -1,7 +1,8 @@
-import { observable } from "@microsoft/fast-element";
+import "element-internals-polyfill";
+import { attr, booleanConverter, FASTElement, observable } from "@microsoft/fast-element";
 import { keySpace } from "@microsoft/fast-web-utilities";
+import { FormControlMixin, requiredValidator } from "@open-wc/form-control";
 import type { StaticallyComposableHTML } from "../utilities/template-helpers.js";
-import { FormAssociatedCheckbox } from "./checkbox.form-associated.js";
 
 /**
  * Checkbox configuration options
@@ -23,16 +24,88 @@ export type CheckboxOptions = {
  * @csspart label - The label
  * @fires change - Emits a custom change event when the checked state changes
  *
+ * {@inheritDoc @open-wc/form-control#FormControlMixin}
+ *
  * @public
  */
-export class FASTCheckbox extends FormAssociatedCheckbox {
+export class FASTCheckbox extends FormControlMixin(FASTElement) {
+    static formControlValidators = [requiredValidator];
+
+    @observable
+    public ariaChecked: string | null;
+
+    @observable
+    public checked: boolean = false;
+
+    public checkedChanged(prev: boolean | undefined, next: boolean): void {
+        this.dirtyChecked = true;
+
+        this.ariaChecked = next ? "true" : "false";
+
+        this.currentChecked = this.checked;
+        this.setValue(this.value);
+
+        if (prev !== undefined) {
+            this.$emit("change");
+        }
+    }
+
     /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="checkbox"]
+     * The initial state of the checkbox.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `checked`
+     */
+    @attr({ attribute: "checked", mode: "boolean" })
+    public checkedAttribute: boolean = false;
+
+    /**
+     * Sets the defaultChecked state of the checkbox.
+     * @param prev - the previous value
+     * @param next - the new value
      *
      * @internal
      */
-    public initialValue: string = "on";
+    public checkedAttributeChanged(prev: boolean | undefined, next: boolean): void {
+        this.defaultChecked = next;
+    }
+
+    /**
+     * The current checkedness of the element. This property serves as a mechanism
+     * to set the `checked` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's checkedness
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    @attr({ attribute: "current-checked", converter: booleanConverter })
+    public currentChecked: boolean;
+
+    public currentCheckedChanged(prev: boolean | undefined, next: boolean) {
+        this.checked = this.currentChecked;
+    }
+
+    @observable
+    public defaultChecked: boolean;
+
+    /**
+     * Sets the checked state of the checkbox.
+     *
+     * @param prev - the previous value
+     * @param next - the new value
+     *
+     * @internal
+     */
+    public defaultCheckedChanged(prev: boolean | undefined, next: boolean): void {
+        if (this.dirtyChecked) {
+            return;
+        }
+
+        this.checked = next;
+
+        // setting `checked` also sets `dirtyChecked` to true, so we need to reset it here
+        this.dirtyChecked = false;
+    }
 
     /**
      * @internal
@@ -40,46 +113,161 @@ export class FASTCheckbox extends FormAssociatedCheckbox {
     @observable
     public defaultSlottedNodes: Node[];
 
+    /**
+     * Tracks whether the "checked" property has been changed.
+     * This is necessary to provide consistent behavior with
+     * normal input checkboxes
+     */
+    protected dirtyChecked: boolean = false;
+
+    /**
+     * Tracks whether the "checked" property has been changed from its initial value.
+     *
+     * @internal
+     */
+    public dirtyValue: boolean = false;
+
+    /**
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
+     *
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    @attr({ mode: "boolean" })
+    public disabled: boolean = false;
+
     /**
      * The indeterminate state of the control
      */
     @observable
-    public indeterminate: boolean = false;
+    public indeterminate: boolean | undefined;
 
-    constructor() {
-        super();
-
-        this.proxy.setAttribute("type", "checkbox");
+    /**
+     * Updates the ariaChecked property when the indeterminate property is changed.
+     *
+     * @param prev - the previous value
+     * @param next - the new value
+     *
+     * @internal
+     */
+    public indeterminateChanged(
+        prev: boolean | undefined,
+        next: boolean | undefined
+    ): void {
+        this.ariaChecked = next ? "mixed" : this.checked ? "true" : "false";
     }
 
-    private toggleChecked() {
-        if (this.indeterminate) {
-            this.indeterminate = false;
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     *
+     * @remarks
+     * HTML Attribute: value
+     */
+    @attr({ attribute: "value", mode: "fromView" })
+    public initialValue: string = "on";
+
+    /**
+     * Invoked when the `initialValue` property changes.
+     *
+     * @param previous - the previous value
+     * @param next - the new value
+     *
+     * @remarks
+     * If elements extending `FormAssociated` implement a `initialValueChanged` method
+     * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure
+     * proper functioning of `FormAssociated`
+     */
+    public initialValueChanged(previous: string, next: string): void {
+        // If the value is clean and the component is connected to the DOM
+        // then set value equal to the attribute value.
+        if (!this.dirtyValue) {
+            this.value = this.initialValue;
+            this.dirtyValue = false;
         }
-        this.checked = !this.checked;
     }
 
     /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
+     */
+    @attr
+    public name: string;
+
+    /**
+     * The required state of the element. If true, the element will be required to complete the form.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `required`
+     */
+    @attr({ mode: "boolean" })
+    public required: boolean = false;
+
+    public requiredChanged(): void {
+        this.setValue(this.value);
+    }
+
+    /**
+     * The value of the element. This element's value will be surfaced during form submission under the provided name.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    @observable
+    public value: string;
+
+    public valueChanged(previous: string, next: string): void {
+        this.dirtyValue = true;
+        // this.currentValue = this.value;
+
+        this.setValue(next);
+    }
+
+    /**
+     * Toggles the checked state of the checkbox when the element is clicked.
+     *
      * @internal
      */
-    public keypressHandler = (e: KeyboardEvent): void => {
-        if (this.disabled) {
-            return;
+    public clickHandler(e: Event): void {
+        if (!this.disabled) {
+            this.toggleChecked();
         }
+    }
 
-        switch (e.key) {
-            case keySpace:
-                this.toggleChecked();
-                break;
+    /**
+     * Toggles the checked state of the checkbox when the spacebar is pressed.
+     *
+     * @internal
+     */
+    public keypressHandler(e: KeyboardEvent): void {
+        if (!this.disabled && e.key === keySpace) {
+            this.toggleChecked();
         }
-    };
+    }
+
+    resetFormControl(): void {
+        this.checked = this.defaultChecked;
+    }
+
+    shouldFormValueUpdate(): boolean {
+        return this.checked;
+    }
 
     /**
+     * Toggles the checked state of the checkbox.
+     *
      * @internal
      */
-    public clickHandler = (e: MouseEvent): void => {
-        if (!this.disabled) {
-            this.toggleChecked();
+    private toggleChecked() {
+        if (typeof this.indeterminate === "boolean") {
+            this.indeterminate = false;
         }
-    };
+
+        this.checked = !this.checked;
+    }
 }
diff --git a/packages/web-components/fast-foundation/src/checkbox/stories/checkbox.register.ts b/packages/web-components/fast-foundation/src/checkbox/stories/checkbox.register.ts
index 0c55390aabd..3b64ad382ca 100644
--- a/packages/web-components/fast-foundation/src/checkbox/stories/checkbox.register.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/stories/checkbox.register.ts
@@ -114,8 +114,6 @@ const styles = css`
     }
 
     :host([disabled]) .label,
-    :host([readonly]) .label,
-    :host([readonly]) .control,
     :host([disabled]) .control {
         cursor: var(--disabled-cursor);
     }
diff --git a/packages/web-components/fast-foundation/src/checkbox/stories/checkbox.stories.ts b/packages/web-components/fast-foundation/src/checkbox/stories/checkbox.stories.ts
index b4eff83b01c..778f3d6d7f8 100644
--- a/packages/web-components/fast-foundation/src/checkbox/stories/checkbox.stories.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/stories/checkbox.stories.ts
@@ -8,7 +8,7 @@ const storyTemplate = html<StoryArgs<FASTCheckbox>>`
         ?checked="${x => x.checked}"
         ?disabled="${x => x.disabled}"
         ?required="${x => x.required}"
-        ?readonly="${x => x.readOnly}"
+        name="${x => x.name ?? "something"}"
         :indeterminate="${x => x.indeterminate}"
         value="${x => x.value}"
     >
@@ -23,14 +23,12 @@ export default {
         disabled: false,
         indeterminate: false,
         storyContent: "Checkbox",
-        readOnly: false,
         required: false,
     },
     argTypes: {
         checked: { control: "boolean" },
         disabled: { control: "boolean" },
         indeterminate: { control: "boolean" },
-        readOnly: { control: "boolean" },
         required: { control: "boolean" },
         value: { control: "text" },
         storyContent: { table: { disable: true } },
@@ -74,7 +72,7 @@ CheckboxIndeterminate.args = {
 
 export const CheckboxInForm: Story<FASTCheckbox> = renderComponent(
     html<StoryArgs<FASTCheckbox>>`
-        <form @submit="${() => false}">
+        <form id="someForm" @submit="${() => false}">
             ${storyTemplate}
             <fast-button type="submit">Submit</fast-button>
         </form>
diff --git a/yarn.lock b/yarn.lock
index c0a8a17ccbc..e108dd9aca8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10568,6 +10568,11 @@ electron-to-chromium@^1.4.172:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.180.tgz#380b06037836055d12c7de181ee90b8ed911c3e7"
   integrity sha512-7at5ash3FD9U5gPa3/wPr6OdiZd/zBjvDZaaHBpcqFOFUhZiWnb7stkqk8xUFL9H9nk7Yok5vCCNK8wyC/+f8A==
 
+element-internals-polyfill@^1.1.17:
+  version "1.1.17"
+  resolved "https://registry.yarnpkg.com/element-internals-polyfill/-/element-internals-polyfill-1.1.17.tgz#74b74232dda8d20098c614969007af7e2728bcf5"
+  integrity sha512-sMDJyJiwvcHB6wLnyG+y/9FRxi/9OyI8bmjyw18K6b5iVlBjmA5CJVTFz4K2I7R53yqevK8WkTrfBmSHJXH9Rw==
+
 elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"

From cae74a410a88f668ba6044022065803becf7b76a Mon Sep 17 00:00:00 2001
From: eljefe223 <jes@microsoft.com>
Date: Fri, 17 Feb 2023 15:23:02 -0800
Subject: [PATCH 3/5] updated tests

---
 .../fast-foundation/docs/api-report.md        | 17 ++--
 .../fast-foundation/src/checkbox/README.md    | 38 ++++-----
 .../src/checkbox/checkbox.pw.spec.ts          | 83 ++++++++++++++++++-
 3 files changed, 109 insertions(+), 29 deletions(-)

diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 956b79c7152..00fbea5e275 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -924,19 +924,19 @@ export class FASTCheckbox extends FASTCheckbox_base {
     // (undocumented)
     checked: boolean;
     checkedAttribute: boolean;
-    // (undocumented)
-    protected checkedAttributeChanged(prev: boolean | undefined, next: boolean): void;
+    // @internal
+    checkedAttributeChanged(prev: boolean | undefined, next: boolean): void;
     // (undocumented)
     checkedChanged(prev: boolean | undefined, next: boolean): void;
     // @internal
-    clickHandler: (e: Event) => void;
+    clickHandler(e: Event): void;
     currentChecked: boolean;
     // (undocumented)
     currentCheckedChanged(prev: boolean | undefined, next: boolean): void;
     // (undocumented)
     defaultChecked: boolean;
-    // (undocumented)
-    defaultCheckedChanged(): void;
+    // @internal
+    defaultCheckedChanged(prev: boolean | undefined, next: boolean): void;
     // @internal (undocumented)
     defaultSlottedNodes: Node[];
     protected dirtyChecked: boolean;
@@ -946,19 +946,20 @@ export class FASTCheckbox extends FASTCheckbox_base {
     // (undocumented)
     static formControlValidators: Validator[];
     indeterminate: boolean | undefined;
-    // (undocumented)
+    // @internal
     indeterminateChanged(prev: boolean | undefined, next: boolean | undefined): void;
     initialValue: string;
     initialValueChanged(previous: string, next: string): void;
     // @internal
-    keypressHandler: (e: KeyboardEvent) => void;
+    keypressHandler(e: KeyboardEvent): void;
     name: string;
     required: boolean;
     // (undocumented)
+    requiredChanged(): void;
+    // (undocumented)
     resetFormControl(): void;
     // (undocumented)
     shouldFormValueUpdate(): boolean;
-    // (undocumented)
     value: string;
     // (undocumented)
     valueChanged(previous: string, next: string): void;
diff --git a/packages/web-components/fast-foundation/src/checkbox/README.md b/packages/web-components/fast-foundation/src/checkbox/README.md
index 3e66a014106..a00ca3d15e1 100644
--- a/packages/web-components/fast-foundation/src/checkbox/README.md
+++ b/packages/web-components/fast-foundation/src/checkbox/README.md
@@ -124,47 +124,45 @@ export const myCheckbox = Checkbox.compose<CheckboxOptions>({
 
 | Name               | Privacy   | Type                   | Default | Description                                                                                                                                                                                                                                                                                                                             | Inherited From |
 | ------------------ | --------- | ---------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `ariaChecked`      | public    | `string or null`       |         |                                                                                                                                                                                                                                                                                                                                         |                |
+| `checked`          | public    | `boolean`              | `false` |                                                                                                                                                                                                                                                                                                                                         |                |
 | `checkedAttribute` | public    | `boolean`              | `false` | The initial state of the checkbox.                                                                                                                                                                                                                                                                                                      |                |
-| `defaultChecked`   | public    | `boolean`              |         |                                                                                                                                                                                                                                                                                                                                         |                |
-| `initialValue`     | public    | `string`               | `"on"`  | The initial value of the form. This value sets the \`value\` property only when the \`value\` property has not been explicitly set.                                                                                                                                                                                                     |                |
-| `value`            | public    | `string`               |         |                                                                                                                                                                                                                                                                                                                                         |                |
 | `currentChecked`   | public    | `boolean`              |         | The current checkedness of the element. This property serves as a mechanism to set the \`checked\` property through both property assignment and the .setAttribute() method. This is useful for setting the field's checkedness in UI libraries that bind data through the .setAttribute() API and don't support IDL attribute binding. |                |
+| `defaultChecked`   | public    | `boolean`              |         |                                                                                                                                                                                                                                                                                                                                         |                |
 | `dirtyChecked`     | protected | `boolean`              | `false` | Tracks whether the "checked" property has been changed. This is necessary to provide consistent behavior with normal input checkboxes                                                                                                                                                                                                   |                |
-| `checked`          | public    | `boolean`              | `false` |                                                                                                                                                                                                                                                                                                                                         |                |
 | `disabled`         | public    | `boolean`              | `false` | Sets the element's disabled state. A disabled element will not be included during form submission.                                                                                                                                                                                                                                      |                |
-| `ariaChecked`      | public    | `string or null`       |         |                                                                                                                                                                                                                                                                                                                                         |                |
 | `indeterminate`    | public    | `boolean or undefined` |         | The indeterminate state of the control                                                                                                                                                                                                                                                                                                  |                |
+| `initialValue`     | public    | `string`               | `"on"`  | The initial value of the form. This value sets the \`value\` property only when the \`value\` property has not been explicitly set.                                                                                                                                                                                                     |                |
 | `name`             | public    | `string`               |         | The name of the element. This element's value will be surfaced during form submission under the provided name.                                                                                                                                                                                                                          |                |
 | `required`         | public    | `boolean`              | `false` | The required state of the element. If true, the element will be required to complete the form.                                                                                                                                                                                                                                          |                |
+| `value`            | public    | `string`               |         | The value of the element. This element's value will be surfaced during form submission under the provided name.                                                                                                                                                                                                                         |                |
 
 #### Methods
 
-| Name                      | Privacy   | Description                                         | Parameters                                               | Return    | Inherited From |
-| ------------------------- | --------- | --------------------------------------------------- | -------------------------------------------------------- | --------- | -------------- |
-| `checkedAttributeChanged` | protected |                                                     | `prev: boolean or undefined, next: boolean`              | `void`    |                |
-| `defaultCheckedChanged`   | public    |                                                     |                                                          | `void`    |                |
-| `initialValueChanged`     | public    | Invoked when the \`initialValue\` property changes. | `previous: string, next: string`                         | `void`    |                |
-| `valueChanged`            | public    |                                                     | `previous: string, next: string`                         | `void`    |                |
-| `currentCheckedChanged`   | public    |                                                     | `prev: boolean or undefined, next: boolean`              |           |                |
-| `checkedChanged`          | public    |                                                     | `prev: boolean or undefined, next: boolean`              | `void`    |                |
-| `shouldFormValueUpdate`   |           |                                                     |                                                          | `boolean` |                |
-| `resetFormControl`        |           |                                                     |                                                          | `void`    |                |
-| `indeterminateChanged`    | public    |                                                     | `prev: boolean or undefined, next: boolean or undefined` | `void`    |                |
+| Name                    | Privacy | Description                                         | Parameters                                  | Return    | Inherited From |
+| ----------------------- | ------- | --------------------------------------------------- | ------------------------------------------- | --------- | -------------- |
+| `checkedChanged`        | public  |                                                     | `prev: boolean or undefined, next: boolean` | `void`    |                |
+| `currentCheckedChanged` | public  |                                                     | `prev: boolean or undefined, next: boolean` |           |                |
+| `initialValueChanged`   | public  | Invoked when the \`initialValue\` property changes. | `previous: string, next: string`            | `void`    |                |
+| `requiredChanged`       | public  |                                                     |                                             | `void`    |                |
+| `valueChanged`          | public  |                                                     | `previous: string, next: string`            | `void`    |                |
+| `resetFormControl`      |         |                                                     |                                             | `void`    |                |
+| `shouldFormValueUpdate` |         |                                                     |                                             | `boolean` |                |
 
 #### Events
 
-| Name     | Type | Description                                                | Inherited From |
-| -------- | ---- | ---------------------------------------------------------- | -------------- |
-| `change` |      | Emits a custom change event when the checked state changes |                |
+| Name     | Type | Description                                                                                                     | Inherited From |
+| -------- | ---- | --------------------------------------------------------------------------------------------------------------- | -------------- |
+| `change` |      | Emits a custom change event when the checked state changes {@inheritDoc @open-wc/form-control#FormControlMixin} |                |
 
 #### Attributes
 
 | Name              | Field            | Inherited From |
 | ----------------- | ---------------- | -------------- |
 | `checked`         | checkedAttribute |                |
-| `value`           | initialValue     |                |
 | `current-checked` | currentChecked   |                |
 |                   | disabled         |                |
+| `value`           | initialValue     |                |
 | `name`            | name             |                |
 |                   | required         |                |
 
diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.pw.spec.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.pw.spec.ts
index a4414970bea..51457b9b597 100644
--- a/packages/web-components/fast-foundation/src/checkbox/checkbox.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.pw.spec.ts
@@ -252,6 +252,7 @@ test.describe("Checkbox", () => {
         );
 
         // Playwright doesn't yet see our components as input elements
+        await expect(element).toHaveJSProperty("dirtyValue", false);
         await expect(element).toHaveJSProperty("value", initialValue);
     });
 
@@ -363,7 +364,7 @@ test.describe("Checkbox", () => {
         await expect(element).toHaveJSProperty("checked", false);
     });
 
-    test("should set its checked property to true if the checked attribute is set", async () => {
+    test("should set its `checked` and `defaultChecked` property to true if the checked attribute is set", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
                 <form>
@@ -373,18 +374,21 @@ test.describe("Checkbox", () => {
         });
 
         await expect(element).toHaveJSProperty("checked", false);
+        await expect(element).toHaveJSProperty("defaultChecked", false);
 
         await element.evaluate((node: FASTCheckbox) => {
             node.setAttribute("checked", "");
         });
 
         await expect(element).toHaveJSProperty("checked", true);
+        await expect(element).toHaveJSProperty("defaultChecked", true);
 
         await form.evaluate((node: HTMLFormElement) => {
             node.reset();
         });
 
         await expect(element).toHaveJSProperty("checked", true);
+        await expect(element).toHaveJSProperty("defaultChecked", true);
     });
 
     test("should put the control into a clean state, where checked attribute modifications change the checked property prior to user or programmatic interaction", async () => {
@@ -415,4 +419,81 @@ test.describe("Checkbox", () => {
 
         expect(await element.evaluate((node: FASTCheckbox) => node.value)).toBeTruthy();
     });
+
+    test("should communicate if `checked` to the parent form", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <form>
+                    <fast-checkbox checked name="test"></fast-checkbox>
+                </form>
+            `;
+        });
+
+        const form = page.locator("form");
+
+        expect(
+            await form.evaluate((node: HTMLFormElement) => {
+                const formData = new FormData(node);
+
+                return formData.get("test");
+            })
+        ).toBe("on");
+    });
+
+    test("should not communicate when `disabled` and `checked` to the parent form", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <form>
+                    <fast-checkbox checked disabled name="test"></fast-checkbox>
+                </form>
+            `;
+        });
+
+        const form = page.locator("form");
+
+        expect(
+            await form.evaluate((node: HTMLFormElement) => {
+                const formData = new FormData(node);
+
+                return formData.get("test");
+            })
+        ).toBe(null);
+    });
+
+    test("should align the `checked` property and `current-checked` and `aria-checked` attribute changes", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-checkbox></fast-checkbox>
+            `;
+        });
+
+        const element = page.locator("fast-checkbox");
+
+        await expect(element).toHaveJSProperty("checked", false);
+
+        await expect(element).toHaveAttribute("current-checked", "false");
+
+        await expect(element).toHaveAttribute("aria-checked", "false");
+
+        await element.evaluate((node: FASTCheckbox) => {
+            node.setAttribute("current-checked", "true");
+        });
+
+        await expect(element).toHaveJSProperty("checked", true);
+
+        await expect(element).toHaveAttribute("current-checked", "true");
+
+        await expect(element).toHaveAttribute("aria-checked", "true");
+
+        await element.evaluate((node: FASTCheckbox) => {
+            node.setAttribute("current-checked", "false");
+        });
+
+        await expect(element).toHaveJSProperty("checked", false);
+
+        await expect(element).toHaveAttribute("current-checked", "false");
+
+        await expect(element).toHaveAttribute("aria-checked", "false");
+    });
+
 });

From 6c2379cb9e61ba9142046294289abb65df6f98cc Mon Sep 17 00:00:00 2001
From: eljefe223 <jes@microsoft.com>
Date: Fri, 17 Feb 2023 15:27:37 -0800
Subject: [PATCH 4/5] Change files

---
 ...st-foundation-bc3075de-63e1-41ae-9919-948d46110678.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@microsoft-fast-foundation-bc3075de-63e1-41ae-9919-948d46110678.json

diff --git a/change/@microsoft-fast-foundation-bc3075de-63e1-41ae-9919-948d46110678.json b/change/@microsoft-fast-foundation-bc3075de-63e1-41ae-9919-948d46110678.json
new file mode 100644
index 00000000000..37ad7d91648
--- /dev/null
+++ b/change/@microsoft-fast-foundation-bc3075de-63e1-41ae-9919-948d46110678.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "add open-wc form-control to fast-foundation",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}

From b0f324af52e83ad5dd59847121e7c2c6f5fb1b2c Mon Sep 17 00:00:00 2001
From: eljefe223 <jes@microsoft.com>
Date: Mon, 3 Apr 2023 14:41:44 -0700
Subject: [PATCH 5/5] latest open wc form control

---
 packages/web-components/fast-foundation/package.json | 2 +-
 yarn.lock                                            | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json
index c105d35db88..c97194b8480 100644
--- a/packages/web-components/fast-foundation/package.json
+++ b/packages/web-components/fast-foundation/package.json
@@ -98,7 +98,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.0.3",
     "@microsoft/fast-element": "2.0.0-beta.23",
-    "@open-wc/form-control": "^0.4.1",
+    "@open-wc/form-control": "^0.7.0",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "tabbable": "^5.2.0",
     "tslib": "^2.4.0"
diff --git a/yarn.lock b/yarn.lock
index e108dd9aca8..60761a40974 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3845,10 +3845,10 @@
   dependencies:
     "@octokit/openapi-types" "^13.11.0"
 
-"@open-wc/form-control@^0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@open-wc/form-control/-/form-control-0.4.1.tgz#8ad8bd9f83d7619b2d8f71d26ba919f8061b6142"
-  integrity sha512-9mUrlKgB9No56LtcOeG9sTy16r9aQsOR/9fKh3r9xtkAgaU6tK9nlI8u9z/6CHsvMeyumxuWjE5sypajVN7qBA==
+"@open-wc/form-control@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@open-wc/form-control/-/form-control-0.7.0.tgz#5b313a2caacdc84cbcd6b3fc3daea41f0124518a"
+  integrity sha512-BpB86Im6EJj83Dv3jp8t3Wfk0nVAAuxYUqFvMXlk7bTCi9e62zaVf5cldNfjyWK/obvLzMvhPzxGI2Nh+v4QTg==
 
 "@parcel/watcher@2.0.4":
   version "2.0.4"