# Skrewww Design System

> Machine-readable overview for search engines and AI answer systems.

## What Skrewww is
AI-first design system platform with token-driven components, native-first form semantics with accessible custom controls where native HTML cannot represent the confirmed interaction model, and documentation for designers, developers, and coding agents.

## Who it is for
Designers, frontend engineers, design-system maintainers, and coding agents building product UI with token-driven components.

## Four-layer architecture
1. Foundation — tokens, color, type, spacing, radius, elevation, motion, icons, accessibility.
2. Component Library — Actions, Forms, Navigation, Feedback, Containers & Overlays, Content & Data.
3. Style Systems — Shape and Surface personalities applied through tokens, not forks.
4. Industry Systems — Banking pilot shipped (3 components); additional industries planned via the CLI preset model, composing Layer 2 rather than forking it.

## Current status
- Design system version: 0.2.0-beta
- Implemented React components: 47 (Beta)
- Accessibility baseline: WCAG 2.2 AA (target)
- Last updated: 2026-07-13

## Canonical documentation
- Homepage: https://skrewww.com/
- Components index: https://skrewww.com/components
- Foundations: https://skrewww.com/foundations
- Component registry JSON: https://skrewww.com/registry.json
- Expanded machine index: https://skrewww.com/llms-full.txt

## Component categories
- Actions: https://skrewww.com/components/category/actions
- Forms: https://skrewww.com/components/category/forms
- Navigation: https://skrewww.com/components/category/navigation
- Feedback: https://skrewww.com/components/category/feedback
- Containers & Overlays: https://skrewww.com/components/category/containers-overlays
- Content & Data: https://skrewww.com/components/category/content-data

## Industries (Layer 4 — distinct from Component categories above)
- Industries index: https://skrewww.com/components/industries
- Banking: https://skrewww.com/components/industries/banking

## Implemented components
- Button (beta): https://skrewww.com/components/button — Button is a primary interactive trigger for user actions — submit, confirm, navigate, or initiate a process.
- Card (beta): https://skrewww.com/components/card — Card is a general-purpose content container grouping related information with a clear visual boundary.
- Text Input (beta): https://skrewww.com/components/text-input — Text Input is a single-line text entry for short, free-form data such as names, emails, or search terms.
- Form Field (beta): https://skrewww.com/components/form-field — Form Field is a shared field wrapper for label, description, required indicator, and validation placement — not a visual input.
- Validation Message (beta): https://skrewww.com/components/validation-message — Validation Message is inline typed feedback paired with a field — error, warning, success, or info — with icon and text.
- Checkbox (beta): https://skrewww.com/components/checkbox — Checkbox is a native checkbox for independent or multi-select choices, including indeterminate group states.
- Radio (beta): https://skrewww.com/components/radio — Radio is a native radio button for a single option inside a mutually exclusive group.
- Radio Group (beta): https://skrewww.com/components/radio-group — Radio Group is an accessible grouping layer for mutually exclusive radio options with legend, helper text, and errors.
- Switch (beta): https://skrewww.com/components/switch — Switch is a boolean settings control for immediate on/off changes — not a substitute for Checkbox in forms.
- Textarea (beta): https://skrewww.com/components/textarea — Textarea is a multi-line native textarea for longer free-text content, composed with FormField for label and validation.
- Select (beta): https://skrewww.com/components/select — Select is a combobox-style single-select with a Popover listbox trigger and hidden native select for form submission.
- Combobox (beta): https://skrewww.com/components/combobox — Combobox is an editable searchable single-select with a filterable listbox — distinct from non-searchable Select and query-only Search Field.
- Search Field (beta): https://skrewww.com/components/search-field — Search Field is a search-specific text field with leading magnifying-glass icon and optional clear action — built on shared text-input control behavior.
- Date Picker (beta): https://skrewww.com/components/date-picker — Date Picker is a date-only field with editable D MMM YYYY text entry (en-GB) and calendar popover for single-date selection.
- File Upload (beta): https://skrewww.com/components/file-upload — File Upload is a native file input with drag-and-drop dropzone, advisory validation, selected-file list, and multipart form submission — selection only, not network upload.
- Alert (beta): https://skrewww.com/components/alert — Alert is a persistent inline feedback block for contextual status tied to page content — not auto-dismissing.
- Toast (beta): https://skrewww.com/components/toast — Toast is a transient floating notification for confirming actions or reporting short-lived events.
- Progress Bar (beta): https://skrewww.com/components/progress-bar — Progress Bar is determinate or indeterminate progress toward a known or unknown completion point.
- Spinner (beta): https://skrewww.com/components/spinner — Spinner is an indeterminate loading indicator for operations without a meaningful completion percentage.
- Badge (beta): https://skrewww.com/components/badge — Badge is a compact non-interactive label for status, classification, or numeric counts at a glance.
- Tooltip (beta): https://skrewww.com/components/tooltip — Tooltip is a brief supplementary label for a trigger, shown on keyboard focus or pointer hover.
- Skeleton (beta): https://skrewww.com/components/skeleton — Skeleton is temporary placeholder shapes that preserve layout while known content is loading.
- Link (beta): https://skrewww.com/components/link — Link is semantic navigational text styled as inline or standalone links — not for primary actions.
- Breadcrumb (beta): https://skrewww.com/components/breadcrumb — Breadcrumb is an ordered hierarchical trail showing location with navigable ancestors and a current-page indicator.
- Tabs (beta): https://skrewww.com/components/tabs — Tabs is a navigation pattern that switches between related in-context views using tablist/tab/tabpanel semantics and roving focus.
- Pagination (beta): https://skrewww.com/components/pagination — Pagination is a paged navigation control with Previous/Next boundaries, numbered pages, and optional ellipsis.
- Menu (beta): https://skrewww.com/components/menu — Menu is a compact command surface for contextual actions — distinct from Select (form values) and Popover (supplementary content).
- Accordion (beta): https://skrewww.com/components/accordion — Accordion is a set of stacked collapsible sections for progressive disclosure, built from Accordion Item building blocks.
- Dialog (beta): https://skrewww.com/components/dialog — Dialog is a modal overlay that interrupts workflow for focused attention, information, or a decision.
- Popover (beta): https://skrewww.com/components/popover — Popover is a non-modal floating panel for supplementary or lightly interactive content anchored to a trigger.
- Drawer (beta): https://skrewww.com/components/drawer — Drawer is an edge-anchored modal panel for supplementary settings, filters, or secondary forms.
- Tag (beta): https://skrewww.com/components/tag — Tag is a compact classification label for categories, filters, or user-applied values — distinct from read-only Badge status metadata.
- Avatar (beta): https://skrewww.com/components/avatar — Avatar is a circular visual identity for a user or entity with image, initials, or icon fallback.
- Divider (beta): https://skrewww.com/components/divider — Divider is a thin separator line between content sections — horizontal or vertical, semantic or decorative.
- List Item (beta): https://skrewww.com/components/list-item — List Item is a single row inside a collection — avatar, title, description, metadata, and optional trailing content.
- Table (beta): https://skrewww.com/components/table — Table is a native HTML table foundation with captions, headers, body rows, footers, cell alignment, responsive overflow, RTL support, print-friendly scrolling, and composition patterns for empty/loading/error — not the interactive Data Table pattern (no sorting, selection, or pagination).
- Data Table (beta): https://skrewww.com/components/data-table — Data Table is an interactive data-table pattern composing Table with header sorting and external Pagination — no columns-config prop; the consumer writes their own Table/TableHead/TableBody markup and drops in DataTableSortHeader for sortable columns.
- Tree View (beta): https://skrewww.com/components/tree-view — Tree View is a hierarchical, keyboard-navigable tree — file explorers, nested category browsers, org charts. Composes Content/Tree Item rows with roving-tabindex keyboard navigation and depth-based indentation.
- Bar Chart (beta): https://skrewww.com/components/bar-chart — Bar Chart is a single-series, static bar chart built on recharts — real proportional bar heights, month labels below, no Y-axis/gridlines/legend/tooltip.
- Line Chart (beta): https://skrewww.com/components/line-chart — Line Chart is a single-series, static line chart built on recharts — a single stroked path with hollow-ring point markers, no axes/gridlines/legend/tooltip.
- Timeline (beta): https://skrewww.com/components/timeline — Timeline is a vertical, chronological event list built on Content/Timeline Item rows — Default outlined-ring or Highlighted solid-dot markers, connector suppression purely positional.
- Empty State (beta): https://skrewww.com/components/empty-state — Empty State is a zero-content placeholder with title, description, and optional recovery actions for collections, search, or first-use flows.
- Banking Transaction Row (beta): https://skrewww.com/components/banking-transaction-row — Banking Transaction Row is a single financial transaction entry — merchant, date, amount, and status — with a Popover for full transaction detail.
- Banking Account Card (beta): https://skrewww.com/components/banking-account-card — Banking Account Card is a summary card for one financial account — account type, current balance, a compact balance-history sparkline, and an action button.
- Banking Balance Summary (beta): https://skrewww.com/components/banking-balance-summary — Banking Balance Summary is a spending/income overview card with a time-range-filtered Bar Chart and a loading state.
- Calendar Day (beta): https://skrewww.com/components/calendar-day — Calendar Day is a single selectable day cell inside a month calendar grid.
- Calendar Grid (beta): https://skrewww.com/components/calendar-grid — Calendar Grid is a composed month-view calendar with single-date or range selection and grid keyboard navigation.

## Forms architecture (important)
- Controls use native HTML semantics (input, textarea, select, checkbox, radio, switch).
- ValidationMessage's inline feedback is linked to its field via aria-describedby — an accessibility-wiring detail not tracked as a discrete registry field.
- Form Field: https://skrewww.com/components/form-field — Form Field is a shared field wrapper for label, description, required indicator, and validation placement — not a visual input.
- Search Field: https://skrewww.com/components/search-field — Search Field is a search-specific text field with leading magnifying-glass icon and optional clear action — built on shared text-input control behavior.
- Combobox: https://skrewww.com/components/combobox — Combobox is an editable searchable single-select with a filterable listbox — distinct from non-searchable Select and query-only Search Field.
- File Upload: https://skrewww.com/components/file-upload — File Upload is a native file input with drag-and-drop dropzone, advisory validation, selected-file list, and multipart form submission — selection only, not network upload.
- Table: https://skrewww.com/components/table — Table is a native HTML table foundation with captions, headers, body rows, footers, cell alignment, responsive overflow, RTL support, print-friendly scrolling, and composition patterns for empty/loading/error — not the interactive Data Table pattern (no sorting, selection, or pagination).
- Data Table: https://skrewww.com/components/data-table — Data Table is an interactive data-table pattern composing Table with header sorting and external Pagination — no columns-config prop; the consumer writes their own Table/TableHead/TableBody markup and drops in DataTableSortHeader for sortable columns.
- Select: https://skrewww.com/components/select — Select is a combobox-style single-select with a Popover listbox trigger and hidden native select for form submission.

## Figma and React relationship
Figma documents component intent, variants, and tokens. React implementations track Figma where confirmed and document open questions when parity is incomplete. Beta status means production use is possible but APIs and visuals may change.

## Documented components (indexable)
- icon-button: https://skrewww.com/components/icon-button
- button-group: https://skrewww.com/components/button-group
- split-button: https://skrewww.com/components/split-button
- slider: https://skrewww.com/components/slider
- credit-card-field: https://skrewww.com/components/credit-card-field
- phone-number-field: https://skrewww.com/components/phone-number-field
- breadcrumb-item: https://skrewww.com/components/breadcrumb-item
- page-item: https://skrewww.com/components/page-item
- step-item: https://skrewww.com/components/step-item
- menu-item: https://skrewww.com/components/menu-item
- dropdown-trigger: https://skrewww.com/components/dropdown-trigger
- sidebar-nav-item: https://skrewww.com/components/sidebar-nav-item
- top-nav-item: https://skrewww.com/components/top-nav-item
- tree-item: https://skrewww.com/components/tree-item
- timeline-item: https://skrewww.com/components/timeline-item

## Limitations
- File Upload: Figma component-set node ID unresolved — live MCP verification pending.
- File Upload: Temporary file-upload tokens await Figma variable confirmation.
- File Upload: Controlled files prop is intentionally unsupported in this MVP.
- File Upload: Upload progress, retry, preview, and async behavior are deferred.
- Table: Figma component-set node ID unresolved — live MCP verification pending.
- Table: Temporary table geometry and scroll-shadow tokens await Figma confirmation.
- Table: Data Table (implemented 2026-07-15) composes Table for the narrow MVP scope approved 2026-07-13 — sorting only, external Pagination; selection, sticky headers, and density remain excluded from v1.
- Data Table: No Figma component set exists for Data Table yet — sort-header anatomy and token bindings are React-first, same precedent as Table.
- Data Table: Row selection (Checkbox column), sticky headers, density variants, and virtualization remain deferred to a later pass — not in this MVP.
- Data Table: Row-actions conventions beyond composing Menu in a cell are still open.
- Combobox: Figma MCP inspection unavailable in parity pass — component-set node ID and exact token values remain unresolved.
- Combobox: Multi-select chips mode exists in Figma but is deferred in Beta.
- Combobox: Clear control not confirmed via MCP — deferred.
- Combobox: Option leading icons and descriptions not confirmed via MCP — deferred.
- Combobox: Remote/async fetching is not implemented.
- Combobox: Free-form custom values are not supported — closed predefined option list only.
- Combobox: Diacritic-insensitive filtering is not implemented — locale lowercase only.
- Select uses a Popover listbox with a hidden native select for form submission — not searchable (see Combobox for the searchable equivalent).
- Multi-select Combobox and advanced overlays remain documented but not implemented.
- Control-only composition exports are internal implementation details and are not public registry components.



## Registry detail (generated)

### Button
- Slug: button
- Category: Actions
- Status: beta
- Version: 0.1.0-beta
- URL: https://skrewww.com/components/button
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Button is a primary interactive trigger for user actions — submit, confirm, navigate, or initiate a process.
- Variants: primary, secondary, danger
- Sizes: sm, md, lg
- Tokens: component/radius/control, semantic/action/primary, semantic/action/danger, semantic/surface/default, semantic/text/inverse, semantic/text/primary, semantic/focus-ring, opacity/disabled
- Open questions: Confirm exact control height and horizontal padding per size from Figma. | Trailing icon is not defined as a separate Figma property on Button — supported in code for composition; confirm with design. | Gradient and Glass surface personalities for Button need Surface collection token values.
- Related:
  - Icon Button — compact icon-only actions: https://skrewww.com/components/icon-button
  - Link — inline navigational text: https://skrewww.com/components/link
  - Split Button — default action plus menu: https://skrewww.com/components/split-button

### Card
- Slug: card
- Category: Containers & Overlays
- Status: beta
- Version: 0.1.0-beta
- URL: https://skrewww.com/components/card
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Card is a general-purpose content container grouping related information with a clear visual boundary.
- Variants: flat, raised
- Sizes: none
- Tokens: semantic/surface/default, semantic/border/default, component/radius/container, shadow-blur/3, shadow-color/3
- Open questions: Confirm raised elevation shadow offset/spread values from Figma shadow tokens. | Clickable-card pattern (single interactive target) not implemented — TODO before using Card as a link surface.
- Related:
  - Dialog — modal attention pattern: https://skrewww.com/components/dialog
  - Accordion — collapsible sections: https://skrewww.com/components/accordion

### Text Input
- Slug: text-input
- Category: Forms
- Status: beta
- Version: 0.1.0-beta
- URL: https://skrewww.com/components/text-input
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Text Input is a single-line text entry for short, free-form data such as names, emails, or search terms.
- Variants: default, error, disabled
- Sizes: sm, md, lg
- Tokens: component/radius/control, semantic/border/default, semantic/border/strong, semantic/focus-ring, semantic/action/danger, semantic/surface/default
- Open questions: FormField composes label/helper/error internally — confirm parity with Figma Form Field Wrapper split. | Hover state token mapping not explicitly documented — uses semantic/border/strong on hover. | Trailing action slot is a documentation convenience; confirm Figma trailing icon property semantics.
- Related:
  - Form Field — shared label and helper pattern: https://skrewww.com/components/form-field
  - Validation Message — typed inline feedback: https://skrewww.com/components/validation-message
  - Textarea — multi-line entry: https://skrewww.com/components/textarea
  - Search Field — search-specific input: https://skrewww.com/components/search-field

### Form Field
- Slug: form-field
- Category: Forms
- Status: beta
- Version: 0.2.0-beta
- URL: https://skrewww.com/components/form-field
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Form Field is a shared field wrapper for label, description, required indicator, and validation placement — not a visual input.
- Variants: default, error
- Sizes: none
- Tokens: semantic/text/primary, semantic/text/secondary, semantic/action/danger
- Open questions: Horizontal label layout is unresolved in Figma — vertical layout only. | React name is FormField; Figma name is Form Field Wrapper.
- Related:
  - Validation Message — typed inline feedback: https://skrewww.com/components/validation-message
  - Text Input — control composed with FormField: https://skrewww.com/components/text-input
  - Textarea — multi-line control composition: https://skrewww.com/components/textarea
  - Select — native dropdown composition: https://skrewww.com/components/select
  - Search Field — search-specific composition: https://skrewww.com/components/search-field
  - Checkbox — inline label control: https://skrewww.com/components/checkbox

### Validation Message
- Slug: validation-message
- Category: Forms
- Status: beta
- Version: 0.2.0-beta
- URL: https://skrewww.com/components/validation-message
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Validation Message is inline typed feedback paired with a field — error, warning, success, or info — with icon and text.
- Variants: error, warning, success, info
- Sizes: none
- Tokens: semantic/action/danger, semantic/feedback/warning, semantic/feedback/success, semantic/feedback/info
- Open questions: Info type icon swap to dedicated Info icon is pending Figma confirmation.
- Related:
  - Form Field — positions validation below controls: https://skrewww.com/components/form-field
  - Text Input — common consumer of validation output: https://skrewww.com/components/text-input

### Checkbox
- Slug: checkbox
- Category: Forms
- Status: beta
- Version: 0.2.0-beta
- URL: https://skrewww.com/components/checkbox
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Checkbox is a native checkbox for independent or multi-select choices, including indeterminate group states.
- Variants: unchecked, checked, indeterminate, disabled, error
- Sizes: none
- Tokens: semantic/surface/default, semantic/border/default, semantic/action/primary, semantic/focus-ring, semantic/action/danger
- Open questions: Figma does not define a separate Checkbox size variant — single control size implemented. | Checkbox controls intentionally ignore decorative Gradient/Glass surfaces.
- Related:
  - Switch — immediate settings toggle: https://skrewww.com/components/switch
  - Radio — mutually exclusive choice: https://skrewww.com/components/radio
  - Form Field — group label and validation: https://skrewww.com/components/form-field

### Radio
- Slug: radio
- Category: Forms
- Status: beta
- Version: 0.2.0-beta
- URL: https://skrewww.com/components/radio
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Radio is a native radio button for a single option inside a mutually exclusive group.
- Variants: unselected, selected, disabled, error
- Sizes: none
- Tokens: semantic/surface/default, semantic/border/default, semantic/action/primary, semantic/focus-ring
- Open questions: Radio indicator remains circular in all shape personalities by design.
- Related:
  - Radio Group — group label and selection management: https://skrewww.com/components/radio-group
  - Select — long option lists: https://skrewww.com/components/select

### Radio Group
- Slug: radio-group
- Category: Forms
- Status: beta
- Version: 0.2.0-beta
- URL: https://skrewww.com/components/radio-group
- React availability: available
- Figma availability: partial
- Accessibility: WCAG 2.2 AA (target)
- Summary: Radio Group is an accessible grouping layer for mutually exclusive radio options with legend, helper text, and errors.
- Variants: default, disabled, error
- Sizes: none
- Tokens: semantic/surface/default, semantic/border/default, semantic/action/primary, semantic/focus-ring, semantic/action/danger
- Open questions: Figma documents Radio variants but not a separate Radio Group component frame — group behavior inferred from accessibility requirements.
- Related:
  - Radio — individual option control: https://skrewww.com/components/radio
  - Select — hidden long option lists: https://skrewww.com/components/select
  - Form Field — shared validation pattern: https://skrewww.com/components/form-field

### Switch
- Slug: switch
- Category: Forms
- Status: beta
- Version: 0.2.0-beta
- URL: https://skrewww.com/components/switch
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Switch is a boolean settings control for immediate on/off changes — not a substitute for Checkbox in forms.
- Variants: off, on, disabled
- Sizes: none
- Tokens: semantic/border/strong, semantic/action/primary, semantic/surface/default, semantic/focus-ring
- Open questions: Switch thumb travel uses temporary spacing tokens pending Figma alignment property confirmation. | Switch surfaces remain functionally flat in Gradient/Glass modes.
- Related:
  - Checkbox — form and multi-select choices: https://skrewww.com/components/checkbox
  - Form Field — settings section descriptions: https://skrewww.com/components/form-field

### Textarea
- Slug: textarea
- Category: Forms
- Status: beta
- Version: 0.2.0-beta
- URL: https://skrewww.com/components/textarea
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Textarea is a multi-line native textarea for longer free-text content, composed with FormField for label and validation.
- Variants: default, error, disabled, read-only
- Sizes: sm, md, lg
- Tokens: component/radius/control, semantic/border/default, semantic/focus-ring, semantic/surface/default
- Open questions: Minimum height uses temporary tokens — Figma has no numeric height property. | Vertical resize enabled as temporary default pending Figma confirmation.
- Related:
  - Form Field — label and validation placement: https://skrewww.com/components/form-field
  - Text Input — single-line counterpart: https://skrewww.com/components/text-input
  - Validation Message — typed inline feedback: https://skrewww.com/components/validation-message

### Select
- Slug: select
- Category: Forms
- Status: beta
- Version: 0.2.0-beta
- URL: https://skrewww.com/components/select
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Select is a combobox-style single-select with a Popover listbox trigger and hidden native select for form submission.
- Variants: default, error, disabled
- Sizes: sm, md, lg
- Tokens: component/radius/control, semantic/border/default, semantic/icon/muted, semantic/focus-ring
- Open questions: Decorative CaretDown icon overlays native appearance:none styling.
- Related:
  - Form Field — label and validation placement: https://skrewww.com/components/form-field
  - Radio Group — visible mutually exclusive options: https://skrewww.com/components/radio-group
  - Combobox — searchable predefined option selection: https://skrewww.com/components/combobox

### Combobox
- Slug: combobox
- Category: Forms
- Status: beta
- Version: 0.2.0-beta
- URL: https://skrewww.com/components/combobox
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Combobox is an editable searchable single-select with a filterable listbox — distinct from non-searchable Select and query-only Search Field.
- Variants: default, error, disabled
- Sizes: sm, md, lg
- Tokens: component/radius/control, combobox/popup-surface, combobox/option-active-surface, semantic/focus-ring
- Open questions: Figma MCP inspection unavailable in parity pass — component-set node ID and exact token values remain unresolved. | Multi-select chips mode exists in Figma but is deferred in Beta. | Clear control not confirmed via MCP — deferred. | Option leading icons and descriptions not confirmed via MCP — deferred. | Remote/async fetching is not implemented. | Free-form custom values are not supported — closed predefined option list only. | Diacritic-insensitive filtering is not implemented — locale lowercase only.
- Related:
  - Select — non-searchable predefined choice: https://skrewww.com/components/select
  - Search Field — query input without option picking: https://skrewww.com/components/search-field
  - Form Field — label and validation placement: https://skrewww.com/components/form-field

### Search Field
- Slug: search-field
- Category: Forms
- Status: beta
- Version: 0.2.0-beta
- URL: https://skrewww.com/components/search-field
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Search Field is a search-specific text field with leading magnifying-glass icon and optional clear action — built on shared text-input control behavior.
- Variants: default, error, disabled
- Sizes: sm, md, lg
- Tokens: component/radius/control, semantic/border/default, semantic/icon/muted, semantic/focus-ring
- Open questions: No autocomplete, suggestions, or result popover in this phase. | Escape clears the field when a value is present and showClear is enabled.
- Related:
  - Text Input — general single-line entry: https://skrewww.com/components/text-input
  - Form Field — label and validation placement: https://skrewww.com/components/form-field

### Date Picker
- Slug: date-picker
- Category: Forms
- Status: beta
- Version: 0.5.0-beta
- URL: https://skrewww.com/components/date-picker
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Date Picker is a date-only field with editable D MMM YYYY text entry (en-GB) and calendar popover for single-date selection.
- Variants: single-date
- Sizes: sm, md, lg
- Tokens: component/radius/control, semantic/border/default, semantic/icon/muted, semantic/focus-ring
- Open questions: Custom formatDate/parseDate pairs override locale display when both are provided.
- Related:
  - Calendar Grid — month selection surface: https://skrewww.com/components/calendar-grid
  - Calendar Day — day cell building block: https://skrewww.com/components/calendar-day
  - Form Field — label and validation wrapper: https://skrewww.com/components/form-field
  - Popover — non-modal calendar shell: https://skrewww.com/components/popover

### File Upload
- Slug: file-upload
- Category: Forms
- Status: beta
- Version: 0.1.0-beta
- URL: https://skrewww.com/components/file-upload
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: File Upload is a native file input with drag-and-drop dropzone, advisory validation, selected-file list, and multipart form submission — selection only, not network upload.
- Variants: empty, dragging, filled, error, disabled
- Sizes: none
- Tokens: semantic/border/default, semantic/action/primary, semantic/action/danger, semantic/surface/elevated, file-upload-surface, file-upload-border-dragging
- Open questions: Figma component-set node ID unresolved — live MCP verification pending. | Temporary file-upload tokens await Figma variable confirmation. | Controlled files prop is intentionally unsupported in this MVP. | Upload progress, retry, preview, and async behavior are deferred.
- Related:
  - Form Field — label and validation wrapper: https://skrewww.com/components/form-field
  - Validation Message — inline field feedback: https://skrewww.com/components/validation-message
  - Progress Bar — deferred consumer-owned upload progress: https://skrewww.com/components/progress-bar
  - Button — not duplicated; remove uses native button styling: https://skrewww.com/components/button

### Alert
- Slug: alert
- Category: Feedback
- Status: beta
- Version: 0.3.0-beta
- URL: https://skrewww.com/components/alert
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Alert is a persistent inline feedback block for contextual status tied to page content — not auto-dismissing.
- Variants: info, success, warning, error
- Sizes: none
- Tokens: component/radius/container, semantic/feedback/info, semantic/feedback/success, semantic/feedback/warning, semantic/action/danger
- Open questions: Optional action slot semantics pending Figma confirmation for primary action placement.
- Related:
  - Toast — transient notifications: https://skrewww.com/components/toast
  - Validation Message — field-level feedback only: https://skrewww.com/components/validation-message

### Toast
- Slug: toast
- Category: Feedback
- Status: beta
- Version: 0.3.0-beta
- URL: https://skrewww.com/components/toast
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Toast is a transient floating notification for confirming actions or reporting short-lived events.
- Variants: info, success, warning, error
- Sizes: none
- Tokens: component/radius/container, semantic/surface/default, semantic/feedback/info, semantic/feedback/success
- Open questions: Undo action pattern pending Figma confirmation for Toast action slot.
- Related:
  - Alert — persistent inline feedback: https://skrewww.com/components/alert
  - Dialog — decisions requiring explicit confirmation: https://skrewww.com/components/dialog

### Progress Bar
- Slug: progress-bar
- Category: Feedback
- Status: beta
- Version: 0.3.0-beta
- URL: https://skrewww.com/components/progress-bar
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Progress Bar is determinate or indeterminate progress toward a known or unknown completion point.
- Variants: default, success, warning, danger
- Sizes: none
- Tokens: semantic/border/default, semantic/action/primary, semantic/feedback/success, semantic/feedback/warning, semantic/action/danger
- Open questions: Figma has no numeric value property — React exposes value/max for determinate usage.
- Related:
  - Spinner — indeterminate loading without measurable progress: https://skrewww.com/components/spinner

### Spinner
- Slug: spinner
- Category: Feedback
- Status: beta
- Version: 0.3.0-beta
- URL: https://skrewww.com/components/spinner
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Spinner is an indeterminate loading indicator for operations without a meaningful completion percentage.
- Variants: decorative, labeled
- Sizes: sm, md, lg
- Tokens: semantic/border/default, semantic/action/primary
- Open questions: Reduced-motion fallback uses stepped opacity pulse rather than rotation.
- Related:
  - Progress Bar — measurable progress: https://skrewww.com/components/progress-bar

### Badge
- Slug: badge
- Category: Feedback
- Status: beta
- Version: 0.3.0-beta
- URL: https://skrewww.com/components/badge
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Badge is a compact non-interactive label for status, classification, or numeric counts at a glance.
- Variants: neutral, info, success, warning, error
- Sizes: sm, md, lg
- Tokens: semantic/surface/elevated, semantic/feedback/info, semantic/feedback/success, semantic/feedback/warning, semantic/action/danger, component/radius/control
- Open questions: Removable Badge behavior is deferred — use Content/Tag when user-generated removable labels are required.
- Related:
  - Alert — persistent inline messages: https://skrewww.com/components/alert
  - Validation Message — field-level feedback only: https://skrewww.com/components/validation-message

### Tooltip
- Slug: tooltip
- Category: Feedback
- Status: beta
- Version: 0.3.0-beta
- URL: https://skrewww.com/components/tooltip
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Tooltip is a brief supplementary label for a trigger, shown on keyboard focus or pointer hover.
- Variants: top, right, bottom, left
- Sizes: none
- Tokens: color/neutral/900, component/radius/container, semantic/text/inverse
- Open questions: Arrow pointer position remains a fixed Figma approximation — not dynamically bound to label width.
- Related:
  - Popover — richer supplementary content: https://skrewww.com/components/popover
  - Form Field — helper text for essential guidance: https://skrewww.com/components/form-field

### Skeleton
- Slug: skeleton
- Category: Feedback
- Status: beta
- Version: 0.3.0-beta
- URL: https://skrewww.com/components/skeleton
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Skeleton is temporary placeholder shapes that preserve layout while known content is loading.
- Variants: text, circle, rectangle
- Sizes: none
- Tokens: color/neutral/300, semantic/border/default, component/radius/control
- Open questions: Composite skeleton layouts remain documentation examples until Figma confirms reusable list-item presets.
- Related:
  - Spinner — indeterminate loading without layout placeholder: https://skrewww.com/components/spinner
  - Progress Bar — measurable completion: https://skrewww.com/components/progress-bar

### Link
- Slug: link
- Category: Actions
- Status: beta
- Version: 0.4.0-beta
- URL: https://skrewww.com/components/link
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Link is semantic navigational text styled as inline or standalone links — not for primary actions.
- Variants: default, subtle, danger
- Sizes: sm, md, lg
- Tokens: semantic/text/secondary, semantic/action/primary, semantic/action/danger, semantic/focus-ring
- Open questions: Visited link styling is not confirmed in Figma — omitted in Beta. | Disabled link styling is not confirmed — use non-navigating text instead.
- Related:
  - Button — primary actions: https://skrewww.com/components/button
  - Breadcrumb — hierarchical location trail: https://skrewww.com/components/breadcrumb

### Breadcrumb
- Slug: breadcrumb
- Category: Navigation
- Status: beta
- Version: 0.4.0-beta
- URL: https://skrewww.com/components/breadcrumb
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Breadcrumb is an ordered hierarchical trail showing location with navigable ancestors and a current-page indicator.
- Variants: default
- Sizes: none
- Tokens: semantic/text/secondary, semantic/text/primary, semantic/action/primary
- Open questions: Collapsed breadcrumb ellipsis is not confirmed in Figma — deferred.
- Related:
  - Link — inline navigational text: https://skrewww.com/components/link
  - Tabs — related in-context views: https://skrewww.com/components/tabs

### Tabs
- Slug: tabs
- Category: Navigation
- Status: beta
- Version: 0.4.0-beta
- URL: https://skrewww.com/components/tabs
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Tabs is a navigation pattern that switches between related in-context views using tablist/tab/tabpanel semantics and roving focus.
- Variants: automatic, manual
- Sizes: sm, md, lg
- Tokens: semantic/text/secondary, semantic/action/primary, semantic/focus-ring
- Open questions: Vertical Tabs orientation is documented in APG but not confirmed as a Figma variant — horizontal default only.
- Related:
  - Breadcrumb — hierarchical location: https://skrewww.com/components/breadcrumb
  - Top Nav Item — primary app navigation: https://skrewww.com/components/top-nav-item

### Pagination
- Slug: pagination
- Category: Navigation
- Status: beta
- Version: 0.4.0-beta
- URL: https://skrewww.com/components/pagination
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Pagination is a paged navigation control with Previous/Next boundaries, numbered pages, and optional ellipsis.
- Variants: link, button
- Sizes: none
- Tokens: semantic/text/secondary, semantic/action/primary, semantic/surface/elevated
- Open questions: Responsive collapsed pagination is not confirmed in Figma — sibling/boundary range only.
- Related:
  - Link — URL-addressable navigation: https://skrewww.com/components/link
  - Spinner — loading changed results: https://skrewww.com/components/spinner

### Menu
- Slug: menu
- Category: Navigation
- Status: beta
- Version: 0.4.0-beta
- URL: https://skrewww.com/components/menu
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Menu is a compact command surface for contextual actions — distinct from Select (form values) and Popover (supplementary content).
- Variants: default, destructive
- Sizes: none
- Tokens: menu/surface, menu/border, menu/item-text, menu/item-hover-surface, menu/item-destructive-text, semantic/focus-ring
- Open questions: Checkbox and radio menu items are not confirmed in Figma — deferred. | Submenus and Context Menu are separate future components. | Dropdown Menu is documented as a usage pattern, not a duplicate public component.
- Related:
  - Popover — supplementary non-command content: https://skrewww.com/components/popover
  - Select — form field value selection: https://skrewww.com/components/select
  - Button — primary actions: https://skrewww.com/components/button
  - Menu Item — Figma building block (compound subcomponent): https://skrewww.com/components/menu-item

### Accordion
- Slug: accordion
- Category: Containers & Overlays
- Status: beta
- Version: 0.5.0-beta
- URL: https://skrewww.com/components/accordion
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Accordion is a set of stacked collapsible sections for progressive disclosure, built from Accordion Item building blocks.
- Variants: single, multiple
- Sizes: none
- Tokens: semantic/border/default, semantic/text/primary, semantic/icon/muted, component/radius/container, semantic/focus-ring
- Open questions: Figma documents Accordion Item only — single vs multiple expansion is an implementation convention, not a separate Figma variant. | Disabled accordion items, leading icons, and size variants are not confirmed in Figma. | Arrow-key roving accordion pattern is intentionally not implemented.
- Related:
  - Tabs — mutually exclusive views with tablist semantics: https://skrewww.com/components/tabs
  - Card — static grouped content: https://skrewww.com/components/card
  - Dialog — modal attention pattern: https://skrewww.com/components/dialog

### Dialog
- Slug: dialog
- Category: Containers & Overlays
- Status: beta
- Version: 0.5.0-beta
- URL: https://skrewww.com/components/dialog
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Dialog is a modal overlay that interrupts workflow for focused attention, information, or a decision.
- Variants: modal
- Sizes: none
- Tokens: semantic/surface/default, component/radius/container, shadow-blur/5, shadow-color/5, semantic/focus-ring
- Open questions: Destructive alertdialog variant not confirmed as a separate Figma pattern — use Dialog with danger actions for now. | Full-screen mobile Dialog layout not confirmed — viewport padding and max-height cap used instead.
- Related:
  - Popover — non-blocking supplementary panel: https://skrewww.com/components/popover
  - Drawer — edge-anchored panel: https://skrewww.com/components/drawer
  - Card — non-modal content grouping: https://skrewww.com/components/card

### Popover
- Slug: popover
- Category: Containers & Overlays
- Status: beta
- Version: 0.5.0-beta
- URL: https://skrewww.com/components/popover
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Popover is a non-modal floating panel for supplementary or lightly interactive content anchored to a trigger.
- Variants: default
- Sizes: none
- Tokens: semantic/surface/default, semantic/border/default, component/radius/container, shadow-blur/4, shadow-color/4, semantic/focus-ring
- Open questions: Confirm whether additional arrow placements beyond the Figma bottom variant are required. | Popover inside scrollable clipped containers may need dedicated collision tuning.
- Related:
  - Tooltip — short non-interactive hint: https://skrewww.com/components/tooltip
  - Dialog — modal attention pattern: https://skrewww.com/components/dialog
  - Card — bounded static content: https://skrewww.com/components/card

### Drawer
- Slug: drawer
- Category: Containers & Overlays
- Status: beta
- Version: 0.5.0-beta
- URL: https://skrewww.com/components/drawer
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Drawer is an edge-anchored modal panel for supplementary settings, filters, or secondary forms.
- Variants: left
- Sizes: none
- Tokens: semantic/surface/default, component/radius/container, shadow-blur/5, shadow-color/5, semantic/focus-ring
- Open questions: Right, top, and bottom placements are not confirmed in Figma — only left placement is implemented. | Swipe-to-close, drag handles, and snap points are not confirmed. | Full-screen mobile Drawer layout is not confirmed — max-width cap used instead. | Figma prose said “left corners rounded, right edge flush” but topRightRadius=0 refers to the viewport-attached corner. Implementation uses left edge flush with right-corner radius per edge-attachment geometry.
- Related:
  - Dialog — centered modal attention: https://skrewww.com/components/dialog
  - Popover — non-blocking supplementary panel: https://skrewww.com/components/popover
  - Card — static content grouping: https://skrewww.com/components/card

### Tag
- Slug: tag
- Category: Content & Data
- Status: beta
- Version: 0.5.0-beta
- URL: https://skrewww.com/components/tag
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Tag is a compact classification label for categories, filters, or user-applied values — distinct from read-only Badge status metadata.
- Variants: default, removable
- Sizes: none
- Tokens: semantic/surface/elevated, semantic/border/default, semantic/text/primary, semantic/icon/muted, radius/full
- Open questions: Selectable or filter-chip Tag behavior is not confirmed in Figma — only removable label is implemented. | Chip is not a separate Figma component — Tag is the canonical name.
- Related:
  - Badge — read-only status metadata: https://skrewww.com/components/badge
  - Button — primary actions: https://skrewww.com/components/button

### Avatar
- Slug: avatar
- Category: Content & Data
- Status: beta
- Version: 0.5.0-beta
- URL: https://skrewww.com/components/avatar
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Avatar is a circular visual identity for a user or entity with image, initials, or icon fallback.
- Variants: image, initials, icon
- Sizes: sm, md, lg
- Tokens: semantic/action/primary, semantic/text/inverse, semantic/border/default, radius/full
- Open questions: Avatar Group overflow behavior is not confirmed — deferred. | Status indicator ring on Avatar is not confirmed in Figma.
- Related:
  - List Item — row composition with Avatar: https://skrewww.com/components/list-item
  - Badge — status metadata, not identity: https://skrewww.com/components/badge

### Divider
- Slug: divider
- Category: Content & Data
- Status: beta
- Version: 0.5.0-beta
- URL: https://skrewww.com/components/divider
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Divider is a thin separator line between content sections — horizontal or vertical, semantic or decorative.
- Variants: thematic, decorative, structural
- Sizes: none
- Tokens: semantic/border/default
- Open questions: Separator is a synonym — Divider is the established Figma name. | Inset divider variants are not confirmed.
- Related:
  - Card — grouped content with optional footer border: https://skrewww.com/components/card

### List Item
- Slug: list-item
- Category: Content & Data
- Status: beta
- Version: 0.5.0-beta
- URL: https://skrewww.com/components/list-item
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: List Item is a single row inside a collection — avatar, title, description, metadata, and optional trailing content.
- Variants: static, navigational, action
- Sizes: none
- Tokens: semantic/surface/elevated, semantic/text/primary, semantic/text/secondary, component/radius/control, semantic/focus-ring
- Open questions: Selected and density variants are not confirmed in Figma — not implemented. | Compose List Item inside native ul/ol — no separate List component. | Nested Avatar initials cannot be driven from List Item Figma properties.
- Related:
  - Avatar — leading identity: https://skrewww.com/components/avatar
  - Badge — trailing status metadata: https://skrewww.com/components/badge
  - Menu Item — command/menu semantics: https://skrewww.com/components/menu-item
  - Card — grouped static content: https://skrewww.com/components/card

### Table
- Slug: table
- Category: Content & Data
- Status: beta
- Version: 0.1.1-beta
- URL: https://skrewww.com/components/table
- React availability: available
- Figma availability: unavailable
- Accessibility: WCAG 2.2 AA (target)
- Summary: Table is a native HTML table foundation with captions, headers, body rows, footers, cell alignment, responsive overflow, RTL support, print-friendly scrolling, and composition patterns for empty/loading/error — not the interactive Data Table pattern (no sorting, selection, or pagination).
- Variants: layout-auto, layout-fixed
- Sizes: none
- Tokens: semantic/surface/default, semantic/surface/elevated, semantic/border/default, semantic/text/primary, semantic/text/secondary, semantic/focus-ring, table-surface, table-cell-padding-inline, table-scroll-shadow
- Open questions: Figma component-set node ID unresolved — live MCP verification pending. | Temporary table geometry and scroll-shadow tokens await Figma confirmation. | Data Table (implemented 2026-07-15) composes Table for the narrow MVP scope approved 2026-07-13 — sorting only, external Pagination; selection, sticky headers, and density remain excluded from v1.
- Related:
  - List Item — single-column rows, not multi-column tables: https://skrewww.com/components/list-item
  - Badge — status metadata inside cells: https://skrewww.com/components/badge
  - Link — navigational cell content: https://skrewww.com/components/link
  - Menu — row actions inside cells: https://skrewww.com/components/menu
  - Checkbox — selection controls inside cells (composition only): https://skrewww.com/components/checkbox
  - Empty State — compose manually when a table has no rows: https://skrewww.com/components/empty-state
  - Skeleton — loading placeholder rows: https://skrewww.com/components/skeleton
  - Alert — error messaging above or beside tables: https://skrewww.com/components/alert
  - Pagination — external composition for paged data: https://skrewww.com/components/pagination

### Data Table
- Slug: data-table
- Category: Content & Data
- Status: beta
- Version: 0.1.0-beta
- URL: https://skrewww.com/components/data-table
- React availability: available
- Figma availability: unavailable
- Accessibility: WCAG 2.2 AA (target)
- Summary: Data Table is an interactive data-table pattern composing Table with header sorting and external Pagination — no columns-config prop; the consumer writes their own Table/TableHead/TableBody markup and drops in DataTableSortHeader for sortable columns.
- Variants: sortable-header
- Sizes: none
- Tokens: semantic/surface/default, semantic/surface/elevated, semantic/border/default, semantic/text/primary, semantic/icon/muted, semantic/focus-ring, table-header-text
- Open questions: No Figma component set exists for Data Table yet — sort-header anatomy and token bindings are React-first, same precedent as Table. | Row selection (Checkbox column), sticky headers, density variants, and virtualization remain deferred to a later pass — not in this MVP. | Row-actions conventions beyond composing Menu in a cell are still open.
- Related:
  - Table — presentational foundation Data Table composes: https://skrewww.com/components/table
  - Pagination — external composition for paged data: https://skrewww.com/components/pagination
  - Menu — row actions inside cells: https://skrewww.com/components/menu
  - Checkbox — selection controls inside cells (composition only, not a Data Table API): https://skrewww.com/components/checkbox

### Tree View
- Slug: tree-view
- Category: Content & Data
- Status: beta
- Version: 0.1.0-beta
- URL: https://skrewww.com/components/tree-view
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Tree View is a hierarchical, keyboard-navigable tree — file explorers, nested category browsers, org charts. Composes Content/Tree Item rows with roving-tabindex keyboard navigation and depth-based indentation.
- Variants: default, hover, selected
- Sizes: none
- Tokens: component/menu/item-hover, semantic/action/primary, semantic/icon/muted, semantic/text/primary, component/radius/control, semantic/focus-ring
- Open questions: Multi-select is a deferred v2 — not shown in the Figma reference and not built here. | Drag-and-drop reordering, virtualization, and async/lazy-loaded children are all out of scope — none are shown in the Figma reference.
- Related:
  - List Item — flat, non-nested row alternative: https://skrewww.com/components/list-item
  - Menu — the item-hover token Tree Item reuses: https://skrewww.com/components/menu

### Bar Chart
- Slug: bar-chart
- Category: Content & Data
- Status: beta
- Version: 0.1.0-beta
- URL: https://skrewww.com/components/bar-chart
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Bar Chart is a single-series, static bar chart built on recharts — real proportional bar heights, month labels below, no Y-axis/gridlines/legend/tooltip.
- Variants: default
- Sizes: none
- Tokens: semantic/action/primary, semantic/text/secondary
- Open questions: Multi-series support is deferred — not shown in the Figma reference and not built here; v1 is single-series only. | Interactivity (hover tooltips, legend interactivity) is deferred — v1 is deliberately static, per the approved v1 scope. | A Y-axis and gridlines beyond the existing X-axis month labels are deferred — not shown in the Figma reference. | Bar corner radius/spacing beyond fill color and the X-axis label treatment is this implementation's own decision, not something Figma specified.
- Related:
  - Line Chart — trend data over the same single-series shape: https://skrewww.com/components/line-chart

### Line Chart
- Slug: line-chart
- Category: Content & Data
- Status: beta
- Version: 0.1.0-beta
- URL: https://skrewww.com/components/line-chart
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Line Chart is a single-series, static line chart built on recharts — a single stroked path with hollow-ring point markers, no axes/gridlines/legend/tooltip.
- Variants: default
- Sizes: none
- Tokens: semantic/action/primary, semantic/surface/default
- Open questions: Multi-series support is deferred — not shown in the Figma reference and not built here; v1 is single-series only. | Interactivity (hover tooltips, legend interactivity) is deferred — v1 is deliberately static, per the approved v1 scope. | Axis labels and gridlines are deferred — the Figma reference has none at all for Line Chart. | Fixed chart height (width is fluid) is this implementation's own decision, not something Figma specified.
- Related:
  - Bar Chart — categorical data over the same single-series shape: https://skrewww.com/components/bar-chart

### Timeline
- Slug: timeline
- Category: Content & Data
- Status: beta
- Version: 0.1.0-beta
- URL: https://skrewww.com/components/timeline
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Timeline is a vertical, chronological event list built on Content/Timeline Item rows — Default outlined-ring or Highlighted solid-dot markers, connector suppression purely positional.
- Variants: default, highlighted
- Sizes: none
- Tokens: semantic/action/primary, semantic/border/default, semantic/text/primary
- Open questions: Exact marker/connector pixel sizing, using one shared marker color across both states, and the Timestamp/Description secondary-text token choice are this implementation's own decisions where the given facts didn't specify them. | No truncation is applied anywhere (Title, Timestamp, or Description) — Alert and Card don't truncate their titles either, and Figma's own reference shows the Description wrapping, not truncating, at 220px. List Item does truncate, but its single-line row density isn't comparable to Timeline's larger content blocks. | An empty data array renders nothing (null) — no other collection component in this codebase (Table, Tree View, Bar Chart, Line Chart) has an established empty-state convention to follow instead.
- Related:
  - Tree View — hierarchical rather than chronological structure: https://skrewww.com/components/tree-view
  - List Item — flat, non-chronological row alternative: https://skrewww.com/components/list-item

### Empty State
- Slug: empty-state
- Category: Content & Data
- Status: beta
- Version: 0.5.0-beta
- URL: https://skrewww.com/components/empty-state
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Empty State is a zero-content placeholder with title, description, and optional recovery actions for collections, search, or first-use flows.
- Variants: first-use, no-results, informational
- Sizes: none
- Tokens: semantic/icon/muted, semantic/text/primary, semantic/text/secondary
- Open questions: No Results, Placeholder State, and Result Empty State are synonyms — Empty State is canonical. | Permission-restricted empty states are not confirmed as a separate variant. | Error states remain separate from Empty State.
- Related:
  - Alert — persistent inline feedback, not empty collections: https://skrewww.com/components/alert
  - Skeleton — loading placeholder: https://skrewww.com/components/skeleton
  - Button — primary recovery actions: https://skrewww.com/components/button
  - Link — secondary navigation actions: https://skrewww.com/components/link

### Banking Transaction Row
- Slug: banking-transaction-row
- Category: Content & Data
- Status: beta
- Version: 0.1.0-beta
- URL: https://skrewww.com/components/banking-transaction-row
- React availability: available
- Figma availability: unavailable
- Accessibility: WCAG 2.2 AA (target)
- Summary: Banking Transaction Row is a single financial transaction entry — merchant, date, amount, and status — with a Popover for full transaction detail.
- Variants: success, warning, error
- Sizes: none
- Tokens: semantic/feedback/success, semantic/feedback/warning, semantic/action/danger, semantic/text/primary, semantic/text/secondary
- Open questions: No Figma reference exists for this component or for Industry Systems generally — confirmed absent via full file search on 2026-07-25, not an oversight. | List Item gained aria-expanded/aria-haspopup/aria-controls passthrough for this component's disclosure trigger — a genuine Layer 2 extension, not a Banking-specific workaround (see components/ui/ListItem.tsx). | Currency/amount formatting is the consumer's responsibility — amount is a pre-formatted display string, not a number with a built-in formatter, consistent with how Account Card and Balance Summary also take pre-formatted figures.
- Related:
  - List Item — the row shell this composes: https://skrewww.com/components/list-item
  - Avatar — merchant/counterparty logo or initials: https://skrewww.com/components/avatar
  - Badge — the status indicator this composes: https://skrewww.com/components/badge
  - Popover — the detail-view trigger this composes: https://skrewww.com/components/popover
  - Banking Account Card — sibling Layer 4 Banking pilot component: https://skrewww.com/components/banking-account-card

### Banking Account Card
- Slug: banking-account-card
- Category: Content & Data
- Status: beta
- Version: 0.1.0-beta
- URL: https://skrewww.com/components/banking-account-card
- React availability: available
- Figma availability: unavailable
- Accessibility: WCAG 2.2 AA (target)
- Summary: Banking Account Card is a summary card for one financial account — account type, current balance, a compact balance-history sparkline, and an action button.
- Variants: none
- Sizes: none
- Tokens: semantic/text/primary, semantic/text/secondary
- Open questions: No Figma reference exists for this component or for Industry Systems generally — confirmed absent via full file search on 2026-07-25, not an oversight. | Line Chart gained an additive `sparkline` prop for this component's balance-history treatment — a genuine Layer 2 extension (suppresses point-marker dots, uses a thinner stroke), not a Banking-specific style override (see components/ui/LineChart.tsx). | Glass Surface + Pill Shape inheritance was verified live (not assumed) — this component sets no background-color or border-radius of its own anywhere in its stylesheet; every surface property comes from Card's own custom properties.
- Related:
  - Card — the surface shell this composes: https://skrewww.com/components/card
  - Tag — the account-type indicator this composes: https://skrewww.com/components/tag
  - Button — the action trigger this composes: https://skrewww.com/components/button
  - Line Chart — the balance-history sparkline this composes: https://skrewww.com/components/line-chart
  - Banking Transaction Row — sibling Layer 4 Banking pilot component: https://skrewww.com/components/banking-transaction-row

### Banking Balance Summary
- Slug: banking-balance-summary
- Category: Content & Data
- Status: beta
- Version: 0.1.0-beta
- URL: https://skrewww.com/components/banking-balance-summary
- React availability: available
- Figma availability: unavailable
- Accessibility: WCAG 2.2 AA (target)
- Summary: Banking Balance Summary is a spending/income overview card with a time-range-filtered Bar Chart and a loading state.
- Variants: none
- Sizes: none
- Tokens: semantic/text/primary, semantic/text/secondary
- Open questions: No Figma reference exists for this component or for Industry Systems generally — confirmed absent via full file search on 2026-07-25, not an oversight. | Each time range renders its own Bar Chart instance inside its own Tabs panel — real per-range data is expected from the consumer, not one dataset re-scaled across ranges.
- Related:
  - Card — the layout wrapper this composes: https://skrewww.com/components/card
  - Bar Chart — the spending/income visualization this composes: https://skrewww.com/components/bar-chart
  - Tabs — the time-range filter this composes: https://skrewww.com/components/tabs
  - Skeleton — the loading state this composes: https://skrewww.com/components/skeleton
  - Banking Transaction Row — sibling Layer 4 Banking pilot component: https://skrewww.com/components/banking-transaction-row

### Calendar Day
- Slug: calendar-day
- Category: Content & Data
- Status: beta
- Version: 0.5.0-beta
- URL: https://skrewww.com/components/calendar-day
- React availability: available
- Figma availability: available
- Accessibility: WCAG 2.2 AA (target)
- Summary: Calendar Day is a single selectable day cell inside a month calendar grid.
- Variants: default, today, selected, disabled, outside
- Sizes: none
- Tokens: semantic/text/primary, semantic/text/secondary, semantic/text/disabled, semantic/action/primary, semantic/focus-ring, component/radius/control
- Open questions: Multi-select and event-indicator states are not confirmed. Range start/middle/end states are implemented — see Calendar Grid's range mode. | Calendar Day should be composed inside Calendar Grid — not used standalone without grid context.
- Related:
  - Calendar Grid — month composition: https://skrewww.com/components/calendar-grid
  - Date Picker — popover field composition: https://skrewww.com/components/date-picker

### Calendar Grid
- Slug: calendar-grid
- Category: Content & Data
- Status: beta
- Version: 0.5.0-beta
- URL: https://skrewww.com/components/calendar-grid
- React availability: available
- Figma availability: partial
- Accessibility: WCAG 2.2 AA (target)
- Summary: Calendar Grid is a composed month-view calendar with single-date or range selection and grid keyboard navigation.
- Variants: single-date, range
- Sizes: none
- Tokens: semantic/surface/default, semantic/border/default, semantic/text/primary, semantic/text/secondary, component/radius/container, semantic/focus-ring
- Open questions: Month/year drill-up and range selection are implemented on Calendar Grid. | Six-week grid with outside-month days visible is an initial policy — not fully verified in Figma Month Grid.
- Related:
  - Calendar Day — day cell building block: https://skrewww.com/components/calendar-day
  - Date Picker — field + popover composition: https://skrewww.com/components/date-picker
  - Popover — non-modal calendar shell in Date Picker: https://skrewww.com/components/popover