fix: uncheck server-rendered picker input

[danielroe]

this addresses another hydration mismatch

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 7, 2026 11:59pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 7, 2026 11:59pm
npmx-lunaria	Ignored		Feb 7, 2026 11:59pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The AccentColorPicker.vue component has been modified to enhance how it handles the prehydration of selected accent colours. When the server-selected colour ID is found, the code now both sets input.checked to true and explicitly adds the checked attribute using setAttribute(). Additionally, the implementation now explicitly deselects the default "clear" option by unchecking it and removing its checked attribute when a non-default accent colour is loaded. These changes ensure consistent handling of input state between property values and DOM attributes.

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description directly addresses the changeset purpose: fixing a hydration mismatch in the accent color picker component.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/checked-picker

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

app/components/Settings/AccentColorPicker.vue (1)

10-10: Consider using CSS.escape() for the selector value.

If id ever contains CSS selector metacharacters (e.g., ", ], \), the query selector would break or behave unexpectedly. While the risk is low since id comes from controlled localStorage data, escaping is a more robust pattern.

♻️ Suggested improvement

-    const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
+    const input = el.querySelector<HTMLInputElement>(`input[value="${CSS.escape(id)}"]`)

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!