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.
3.3 KiB
3.3 KiB
COMPLIANCE MATRIX
Component Readiness Tracking
| Version | 1.0 |
| Status | DRAFT — Updated as components are specified |
Legend
| Symbol | Meaning |
|---|---|
| ✅ | Complete |
| 🟡 | Partial / In Progress |
| ⏳ | Not Started |
| ❌ | Not Applicable |
Tier 1 — Canonical Components
| Component | Governance | Tokens | Motion | Accessibility | AI | QA | Overall |
|---|---|---|---|---|---|---|---|
| Button | ✅ | ✅ | ✅ | 🟡 | ✅ | ⏳ | 82% |
| Input | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
| Select | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
| Card | 🟡 | 🟡 | 🟡 | 🟡 | ✅ | ⏳ | 33% |
| Modal | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Navigation | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Table | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Data Grid | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Search | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Map Panel | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
Tier 2 — Derived Components
| Component | Governance | Tokens | Motion | Accessibility | AI | QA | Overall |
|---|---|---|---|---|---|---|---|
| Badge | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Alert | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Toast | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Tooltip | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Accordion | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Tabs | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Breadcrumb | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Pagination | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Empty State | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Skeleton | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
Tier 3 — Domain Components
| Component | Governance | Tokens | Motion | Accessibility | AI | QA | Overall |
|---|---|---|---|---|---|---|---|
| KPI Card | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Map Overlay Panel | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Layer Selector | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Mission Status | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Dataset Card | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Geospatial Inspector | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Asset Summary | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Coordinate Picker | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
| Timeline Panel | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | ⏳ | 0% |
Foundation Documents
| Document | Status | Completeness |
|---|---|---|
| Design Constitution | ✅ | 100% |
| Token Philosophy | ✅ | 100% |
| Design Specification | 🟡 | 70% |
| Component Template | ✅ | 100% |
| Component Decision Tree | ✅ | 100% |
| AI Design Principles | ✅ | 100% |
| Design Anti-Patterns | ✅ | 100% |
| Glossary | ✅ | 100% |
| Release Definition | 🟡 | 80% |
How to Update
When a component is specified, update this matrix:
- Mark completed sections as ✅
- Calculate overall percentage
- Update this file in same PR as component spec
ÄNDRINGSHISTORIA
| Version | Datum | Beskrivning |
|---|---|---|
| 1.0 | 2026-07-02 | Initial compliance matrix with all components and foundation documents |
STATUS
DRAFT — Updated as work progresses