 Bernt
|
558303784a
|
docs: RFC-003 Select + RFC-004 Card + Compliance Matrix update
- RFC-003: Canonical Select Component:
- Cognitive Purpose: choose one from predefined list
- When to Use/NOT Use: clear boundaries vs Radio Group, Autocomplete, Multi-Select
- Interaction Contract: click, arrow keys, type-to-search, escape
- Failure Behaviour: empty, required, disabled, async loading, load failure
- Accessibility Contract: combobox role, aria-expanded, aria-selected, focus management
- AI Contract: when to choose Select vs alternatives
- Token Dependencies: 21 tokens (trigger + dropdown + options)
- Layout: trigger + dropdown with sections
- Sizes (sm/md/lg), Variants (default/ghost/filled), States (10 states)
- Keyboard: full navigation (Tab, Arrows, Enter, Escape, Home, End, letter keys)
- Touch: 44px option targets, native scroll
- Motion: dropdown open/close, option hover/select, chevron rotate
- Anti-Patterns: < 4 options, > 50 options, no placeholder, clipping
- Related Components: Input, Radio Group, Checkbox Group, Multi-Select, Autocomplete
- DDR References: DDR-001 through DDR-004
- RFC-004: Canonical Card Component:
- Cognitive Purpose: group related information into bounded unit
- When to Use/NOT Use: clear boundaries vs List Item, Modal, Page
- Interaction Contract: click/hover/focus for actionable, none for static
- Failure Behaviour: overflow, image load fail, action fail, loading, empty
- Accessibility Contract: role, focus, label, keyboard activation
- AI Contract: when to choose Card vs alternatives
- Token Dependencies: 12 tokens (bg, border, radius, padding, shadows, text)
- Layout: Header + Body + Footer with optional divider
- Sizes (sm/md/lg/fluid), Variants (default/elevated/outlined/interactive)
- States (7 states), Keyboard, Touch, Motion (with reduced motion)
- Anti-Patterns: nested cards, excessive padding, no distinction, event collision
- Related Components: Modal, Panel, List Item, Tile, KPI Card, Dataset Card
- DDR References: DDR-001, DDR-002, DDR-003, DDR-005
- COMPLIANCE_MATRIX.md: Select and Card updated to 33%
Rationale: Validate RFC-001 template works for selection and container
component types. Three different component types (action, selection,
container) now tested. Mallen håller.
|
2026-07-02 10:41:19 +00:00 |
|