File dropzone

[pghqdev]

What to build

A file dropzone — label[data-dropzone] wrapping a hidden input[type="file"]. Renders as a dashed-border card area with hover/focus state and a prompt message. Clicking or dragging files onto it triggers the native file picker or upload.

CSS-only for the visual styling. Optional JS enhancement in hikari.js for drag-and-drop feedback (highlight on drag-over, filename display after selection).

Acceptance criteria

• label[data-dropzone] wrapping an input[type="file"] renders as a dashed-border card
• Hover/focus state shows active drag zone styling
• Prompt text inside the label is styled (muted, centered)
• File input hidden but accessible (screen-reader friendly)
• Optional JS: hikari.js adds drag-over highlight and filename display
• All styles in @layer hikari
• Kitchen-sink demo shows a dropzone
• rules/hikari-rules.md updated with markup example

Blocked by

• Missing form elements #12 Missing form elements