fix broken checkboxes (#1547)

* fix broken checkboxes

* update changelog

* prettier

* prettier, you're annoying

* prettier

* fix checkbox test

* Update packages/webawesome/docs/docs/resources/changelog.md

Co-authored-by: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com>

---------

Co-authored-by: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com>

packages/webawesome/docs/docs/resources/changelog.md

@@ -18,6 +18,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-button>` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377]
 - Fixed focus outline styles in `<wa-details>` and native `<details>` [issue:1456]
 - Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484]
+- Fixed a bug in `<wa-checkbox>` where its value would revert to `""` when checked / unchecked [pr:1547]
 - Fixed a bug that caused icon button labels to not render in frameworks [issue:1542]
 - Fixed a bug in `<wa-details>` that caused the `name` property not to reflect [pr:1538]
 
@@ -463,4 +464,4 @@ Many of these changes and improvements were the direct result of feedback from u
 
 </details>
 
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)

packages/webawesome/src/components/checkbox/checkbox.test.ts

@@ -21,7 +21,7 @@ describe('<wa-checkbox>', () => {
         const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
 
         expect(el.name).to.equal('');
-        expect(el.value).to.equal('on');
+        expect(el.value).to.equal(null);
         expect(el.title).to.equal('');
         expect(el.disabled).to.be.false;
         expect(el.required).to.be.false;
@@ -134,7 +134,7 @@ describe('<wa-checkbox>', () => {
         await checkbox.updateComplete;
 
         expect(checkbox.checked).to.equal(false);
-        expect(checkbox.value).to.equal('myvalue');
+        expect(checkbox.value).to.equal(null);
         expect(new FormData(form).get('test')).to.equal(null);
 
         checkbox.checked = true;

packages/webawesome/src/components/checkbox/checkbox.ts

@@ -80,7 +80,8 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
 
   /** The value of the checkbox, submitted as a name/value pair with form data. */
   get value(): string | null {
-    return this._value ?? 'on';
+    const val = this._value || 'on';
+    return this.checked ? val : null;
   }
 
   @property({ reflect: true })