Ensure checkbox checked property stays synced across elements

packages/pharos/src/components/checkbox/pharos-checkbox.test.ts

@@ -306,6 +306,36 @@ describe('pharos-checkbox', () => {
     expect(getComputedStyle(component).width).to.not.equal('400px');
   });
 
+  it('keeps the native input in sync when checked is set programmatically after a click', async () => {
+    component['_checkbox'].click();
+    await component.updateComplete;
+    expect(component.checked).to.be.true;
+
+    component.checked = false;
+    await component.updateComplete;
+    expect(component['_checkbox'].checked).to.be.false;
+  });
+
+  it('re-checks on the next click after being unchecked programmatically', async () => {
+    let lastChecked: boolean | null = null;
+    component.addEventListener('change', () => {
+      lastChecked = component.checked;
+    });
+
+    component['_checkbox'].click();
+    await component.updateComplete;
+    expect(component.checked).to.be.true;
+
+    component.checked = false;
+    await component.updateComplete;
+
+    component['_checkbox'].click();
+    await component.updateComplete;
+
+    expect(component.checked).to.be.true;
+    expect(lastChecked).to.be.true;
+  });
+
   it('resets checked when the form is reset', async () => {
     const parentNode = document.createElement('form');
     parentNode.setAttribute('name', 'my-form');

packages/pharos/src/components/checkbox/pharos-checkbox.ts

@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import type { TemplateResult, CSSResultArray } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
 import { checkboxStyles } from './pharos-checkbox.css';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -146,7 +147,7 @@ export class PharosCheckbox extends FormMixin(FormElement) {
         type="checkbox"
         .value=${this.value}
         .indeterminate=${this.indeterminate}
-        ?checked=${this.checked}
+        .checked=${live(this.checked)}
         ?required=${this.required}
         ?disabled=${this.disabled}
         aria-required=${this.required}