[alexgrozav]

What changed

The Input page is now a folder shaped like the Button's, so readers get a page per layer rather than one long page. The Overview keeps the intro, At a glance, the Checklist's intro, the reference implementation and the sources, and links each layer from a card. The UI, UX, DX and AX pages hold their sections, then their rules under ## <Layer> Checklist, then their questions. The text moves as it is: agents still read one page at /raw/docs/components/input.md, with the same outline, rules and contract as before, and old links like /docs/components/input#every-state go on to the right part.

Links on the Input's own pages to its own sections now point to the part that holds them. Links to other components' sections, and other pages' links into the Input, are left for the layer that links the split pages to each other.

Each FAQ item went to the layer it answers:

• User Interface: "Why is there no borderless variant?"
• User Experience: "Input or something else?" (with its table), "Should I mark required fields, or optional ones?", "Can I use the browser's own validation?"
• Developer Experience: "Does the Input work before JavaScript loads?", "Why doesn't the Input render its own label?"
• Agentic Experience: none

The live examples went with their sections: the playground on the Overview, four on User Interface and five on User Experience. The Developer Experience and Agentic Experience pages have none.

Checklist

• The title follows Conventional Commits, as in feat(docs): add the focus guideline.
• pnpm check-types passes.
• Docs changes: the pages read well on pnpm dev. (Read on the built site served by wrangler dev instead, with Chrome at 1440px and 375px.)
• Homepage changes: pnpm build, then pnpm lighthouse, still scores 100 in every category. (No homepage changes. pnpm lighthouse passes the 0.95 budget, with Best Practices at 0.96.)