Checkbox element input and web component `checked` property can become out of sync

[brentswisher]

Expected behavior
No matter how I select/toggle/clear the outer <pharos-checkbox> checked status, the inner input's checked property remains in sync with it.

Actual behavior
When checked is changed programmatically on a <pharos-checkbox> that has previously been clicked, the component's visual state updates but the <input type="checkbox"> inside the shadow root does not.
The next click then toggles the stale native input back toward the state already displayed, so the click appears to do nothing, taking a second click to actually change the checkbox.

Steps to reproduce the issue

1. Visit the Pharos Checkbox Storybook
2. Click the checkbox, see it show as clicked
3. Open the dev console and run this : document.querySelector('storybook-pharos-checkbox').checked = false - see it show as unchecked
4. Click the checkbox again, see it come into focus but not change to its clicked state

Screenshots or code
Here is a walkthrough to recreate it:

Screen.Recording.2026-06-12.at.4.29.04.PM.mov

Pharos version
v14.23.0

Your environment

• OS: macOS
• Browser: Chrome
• Version: 149.0.7827.114

Additional information
This was really hard to track down because if you inspect the elements in the browser, the attributes on the elements themselves are staying in sync. It's the actual underlying JavaScript properties that are getting out of sync.

It looks like the Lit live directive might be useful to resolve this