Add opt-in focusIndicator option

[captbaritone]

Adds a focusIndicator constructor option. When it's on, Webamp draws a focus ring around the focused control for keyboard users.

new Webamp({ focusIndicator: true });

Design constraints

Rendering skins faithfully is the point of Webamp, so:

• Off by default. With the option off, nothing changes. #webamp *:focus { outline: 0 } still applies, so Webamp renders exactly as before.
• Keyboard only. The ring is drawn only under :focus-visible, so mouse and touch users never see it.
• Never over the sprite. It's drawn with outline (no inward offset) plus a box-shadow spread, both of which paint entirely outside the element's box.
• Visible on any skin. It's two-tone: a 2px white ring directly around the control, inside a 2px black ring. Whatever the skin's colors, at least one of the two rings has 3:1 or better contrast with what's around it, and the rings are 21:1 against each other.
• Not hidden by neighbours. Sprites sit flush against each other, so the focused element gets z-index: 1 to keep its ring from being painted over by the next sprite. Every window wrapper has a transform and so is its own stacking context, which means this can't lift a control above another window.
• Range sliders included. The selector includes input[type="range"]:focus-visible to beat the existing range-input reset (#webamp input[type="range"]:focus { outline: none }) on specificity.

Implementation

• New focusIndicator option in Options, passed to App.
• App toggles a webamp-focus-indicator class on the #webamp root node.
• The new CSS lives in webamp.css.
• Documented in the constructor options docs.

This PR doesn't depend on the other accessibility PRs (#1365 etc.). The ring shows up on whatever is focusable, and #1365 makes all the buttons focusable.

Testing

• tsc, eslint, prettier --check and vitest run pass locally.
• Not yet verified in a browser. I couldn't launch one from my environment. The things to check:
  • With the option off, nothing appears on Tab.
  • With it on, Tab shows the ring and a mouse click doesn't.
  • The ring is visible on a range slider.

[netlify]

✅ Deploy Preview for tourmaline-kringle-c98715 ready!

Name	Link
🔨 Latest commit	6221a4f
🔍 Latest deploy log	https://app.netlify.com/projects/tourmaline-kringle-c98715/deploys/6ad10abc93e559969b8efe1f
😎 Deploy Preview	https://deploy-preview-1368--tourmaline-kringle-c98715.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Size Change: +634 B (+0.13%)

Total Size: 491 kB

📦 View Changed

Filename	Size	Change
packages/webamp/built/webamp.bundle.min.js	298 kB	+315 B (+0.11%)
packages/webamp/built/webamp.lazy-bundle.min.js	193 kB	+319 B (+0.17%)

_{compressed-size-action}