fix(web): docs layout, homepage hardening, and accessibility

[jal-co]

What

Docs layout overhaul, homepage stability fixes, and accessibility improvements across the web package.

Why

The docs sidebar was too long with all sections always open, the homepage had hydration errors and Motion warnings, and badge sandbox forms lacked accessible labels. This branch consolidates those fixes.

Type

• fix — Bug fix
• style — Visual / CSS changes
• docs — Documentation

Changes

Docs layout

• Wider sidebar (w-72) with subtle background tint
• Collapsible nav sections (only active group auto-expands)
• Added aria-expanded to collapsible section buttons
• Docs content grid with max-width constraint (52rem) and responsive TOC
• TOC now scrollable with focus-visible ring on links
• Heading text-balance, prose text-pretty, and scroll-mt-24 for anchor jumps

Homepage hardening

• Fixed hydration error: HeroSubtext changed from <p> to <div> (Motion renders block elements inside)
• Fixed SVG circle r attribute error in theme switcher (removed motion.circle, use static <circle>)
• Fixed Motion opacity warning with initial={false} on theme switcher rays
• Replaced theme switcher useState/useEffect mounted pattern with useSyncExternalStore
• Added empty-submit error feedback to homepage generator input
• Hidden icon cloud on mobile (bled off-screen)
• Hidden scroll CTA on mobile (invisible below fold)
• Replaced animate-bounce with gentler scroll-hint keyframe

Accessibility

• Badge sandbox: added id, name, aria-label to all inputs, selects, checkboxes, and copy button
• ColorInput: added inputId, inputName, ariaLabel props; labeled internal hex input, eyedropper, and presets
• Generator input: added id, name, aria-label, aria-describedby, aria-invalid
• Fixed ColorPicker lint errors (removed setState in effects, moved hexInput state before usage)

Docs content

• npm provider: wrapped endpoint details in <details> disclosure
• Moved Data source section back to last position per convention

Code quality

• Removed stray import Script from layout
• Removed extra blank lines from page.tsx
• Removed semicolons from announcement component (project convention)
• Detector returns clean on all touched files

Checklist

• Branch follows conventional naming (docs/consolidate-badge-docs)
• Commits follow Conventional Commits
• Tested locally with pnpm dev
• Docs updated
• No console errors on homepage or docs (except pre-existing external 401)

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
shieldcn	Ready	Preview, Comment	Jun 9, 2026 4:16am