[tomayac]

Summary

• Replaces the hand-rolled toggle styling in Settings/Toggle.client.vue with the native <input type="checkbox" switch> element.
• Adds input-switch-polyfill for browsers that don't yet support the native switch attribute, loaded only when needed, kept live-synced with the accent color and color-mode via a MutationObserver.

Split out of #2982 per review feedback to keep that PR focused on PWA/WCO/badging.

Test plan

• pnpm test:unit — 1673/1673 passing
• pnpm run test:types — passing
• vp lint — 0 errors
• knip — clean

[vercel]

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

Project	Deployment	Actions	Updated
npmx.dev	Ready	Preview	Nov 14, 2026 11:36am UTC

2 Skipped Deployments

Project	Deployment	Actions	Updated
docs.npmx.dev	Ignored	Preview	Nov 14, 2026 11:36am UTC
npmx-lunaria	Ignored		Nov 14, 2026 11:36am UTC

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	input-switch-polyfill@​1.12.0

View full report

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

• Last reviewed commit: 50c95c1
• Latest commit, not reviewed: a449b5e

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Summary

Summary by CodeRabbit

• New Features
  • Added broader browser compatibility for toggle switches.
  • Toggle accent colours now remain synchronised when styling changes.
• Style
  • Refined toggle switch appearance with clearer focus-visible ring styling.
  • Improved checked-state accent colours for a more consistent and accessible experience.
  • Simplified the switch presentation while preserving the existing labels and descriptions.

This PR simplifies toggle input styling, adds conditional client-side switch polyfill loading with accent-colour synchronisation, and registers the polyfill stylesheet and runtime dependency.

Changes: Native switch toggle and polyfill

Layer / File(s)	Summary
Toggle component styling simplification app/components/Settings/Toggle.client.vue	The toggle input replaces extensive pseudo-element and checked-state classes with focus-visible styling and inline accent-color.
Input switch polyfill plugin app/plugins/input-switch-polyfill.client.ts	A client plugin detects switch support, dynamically imports the polyfill when absent, applies --switch-accent to matching inputs, and re-synchronises it after document style or class changes.
Stylesheet and dependency wiring nuxt.config.ts, package.json	Nuxt loads the polyfill stylesheet, and input-switch-polyfill version 1.12.0 is added as a runtime dependency.

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant NuxtPlugin as input-switch-polyfill.client.ts
  participant Polyfill as input-switch-polyfill
  participant DOM

  Browser->>NuxtPlugin: plugin initialisation
  NuxtPlugin->>NuxtPlugin: check HTMLInputElement.prototype.switch
  alt switch unsupported
    NuxtPlugin->>Polyfill: dynamic import()
  end
  NuxtPlugin->>DOM: query input.switch elements
  NuxtPlugin->>DOM: read computed accent-color
  NuxtPlugin->>DOM: set --switch-accent on matching inputs
  DOM-->>NuxtPlugin: notify style/class mutation
  NuxtPlugin->>DOM: re-run accent synchronisation

Loading

Possibly related PRs

• npmx-dev/npmx.dev#2742: Both PRs modify app/components/Settings/Toggle.client.vue checkbox styling, but this PR adds switch polyfill and accent-colour support.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly explains the toggle replacement, polyfill integration, synchronisation behaviour, and validation results.
Title check	✅ Passed	The title clearly summarises the main change: replacing the custom toggle with a native input switch polyfill.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn

[codecov]

Codecov Report

❌ Patch coverage is 90.90909% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/plugins/input-switch-polyfill.client.ts	90.90%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[github-actions]

e18e dependency analysis

No dependency warnings found.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

app/components/Settings/Toggle.client.vue (1)

57-63: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Use :id shorthand.

Vue 3.4+ supports same-name shorthand binding; :id="id" can be simplified to :id.

Based on learnings, "In Vue 3.4 and later, you can use same-name shorthand for attribute bindings... Apply this shorthand in .vue components (notably in Settings/Toggle.client.vue)".

✏️ Suggested tweak

-      :id="id"
+      :id

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/components/Settings/Toggle.client.vue` around lines 57 - 63, The toggle
input in Toggle.client.vue still uses the longer same-name binding for the id
attribute; update the checkbox element to use Vue 3.4+ same-name shorthand for
the existing id binding. Locate the input in the Toggle component and simplify
the current :id binding without changing any other props or behavior.

Source: Learnings

app/plugins/input-switch-polyfill.client.ts (1)

1-4: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Avoid awaiting the polyfill import in the plugin chain
defineNuxtPlugin(async () => { ... await import('input-switch-polyfill') }) still serialises later plugins while that import is in flight. This only affects browsers that lack native switch support, so the delay is limited to those clients; if that matters, switch to object syntax with parallel: true or defer the import with void import(...).

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/plugins/input-switch-polyfill.client.ts` around lines 1 - 4, The plugin
in defineNuxtPlugin is still awaiting the input-switch-polyfill import, which
blocks later plugins for clients without native switch support. Update
input-switch-polyfill.client.ts to avoid awaiting the dynamic import in the
plugin chain by using object syntax with parallel: true or by deferring it with
void import('input-switch-polyfill') while keeping the
HTMLInputElement.prototype check.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/plugins/input-switch-polyfill.client.ts`:
- Around line 9-24: The syncSwitchAccent logic only runs on html style/class
mutations, so newly mounted input.switch elements can miss --switch-accent until
something else changes. Update the input-switch-polyfill.client.ts plugin so
syncSwitchAccent is invoked once immediately after setup (on import/mount)
and/or extend the MutationObserver on document.documentElement to also watch
childList changes so late-added switches are resynced.

---

Nitpick comments:
In `@app/components/Settings/Toggle.client.vue`:
- Around line 57-63: The toggle input in Toggle.client.vue still uses the longer
same-name binding for the id attribute; update the checkbox element to use Vue
3.4+ same-name shorthand for the existing id binding. Locate the input in the
Toggle component and simplify the current :id binding without changing any other
props or behavior.

In `@app/plugins/input-switch-polyfill.client.ts`:
- Around line 1-4: The plugin in defineNuxtPlugin is still awaiting the
input-switch-polyfill import, which blocks later plugins for clients without
native switch support. Update input-switch-polyfill.client.ts to avoid awaiting
the dynamic import in the plugin chain by using object syntax with parallel:
true or by deferring it with void import('input-switch-polyfill') while keeping
the HTMLInputElement.prototype check.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a08a862e-e2fd-49d3-abf0-bc5be2643953

📥 Commits

Reviewing files that changed from the base of the PR and between e731a54 and 2a549a9.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (4)

• app/components/Settings/Toggle.client.vue
• app/plugins/input-switch-polyfill.client.ts
• nuxt.config.ts
• package.json

[tomayac]

CC: @userquin per his request :-)

[tomayac]

Chrome and Safari will natively support <input type=checkbox switch>, in which case the polyfill would not even be loaded and we'd ship less code to those browsers. @userquin, do you have an opinion on this?

[trueberryless]

Thanks for the PR, @tomayac!

Looks good to me, but I'll wait for some more feedback and opinions from other maintainers.