Cross-cutting: responsive design, touch support & inline/stacked labels #30

REQUIREMENTS §3 R3.18–R3.35. Applies to every component group; this issue tracks the shared pieces.

Responsive

• Mobile-first from 320px to ≥1920px; container queries for components that sit in narrow columns
• Built-in patterns: table → cards, panels → bottom sheets, sidebar → drawer, save bar → bottom bar, forms stack
• No horizontal page scroll; 200% zoom / 400% reflow
• Visual tests at 375 / 768 / 1280px

Touch

• Pointer events everywhere; ≥44px targets on coarse pointers
• No hover-only content
• Gestures with button alternatives (swipe, drag-to-dismiss, touch sensors for drag-and-drop, pinch-zoom, finger/pen drawing)
• Pickers as bottom sheets on phones; correct inputmode; safe-area insets; touch-action

Form labels

• labelLayout="stacked" | "inline" per field and via form/fieldset context
• --onu-label-width; inline falls back to stacked in narrow containers; RTL alignment