Bernt
558303784a
- 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.
nordea-kyc-fraga3
@ f831552401
