@skrewww

Universal Primitive/Semantic/Brand tokens, component-tier defaults required by distributed components, Shape/Surface mode overrides, and the shared .sr-only ac…

Button is a primary interactive trigger for user actions — submit, confirm, navigate, or initiate a process.

Card is a general-purpose content container grouping related information with a clear visual boundary.

Text Input is a single-line text entry for short, free-form data such as names, emails, or search terms.

Form Field is a shared field wrapper for label, description, required indicator, and validation placement — not a visual input.

Validation Message is inline typed feedback paired with a field — error, warning, success, or info — with icon and text.

Spinner is an indeterminate loading indicator for operations without a meaningful completion percentage.

Divider is a thin separator line between content sections — horizontal or vertical, semantic or decorative.

Link is semantic navigational text styled as inline or standalone links — not for primary actions.

Checkbox is a native checkbox for independent or multi-select choices, including indeterminate group states.

React progress bar for uploads and background tasks, with measured value/max progress, an indeterminate mode, a visible label, and optional percentage text.

Skeleton is temporary placeholder shapes that preserve layout while known content is loading.

Radio is a native radio button for a single option inside a mutually exclusive group.

Switch is a boolean settings control for immediate on/off changes — not a substitute for Checkbox in forms.

Textarea is a multi-line native textarea for longer free-text content, composed with FormField for label and validation.

Pagination is a paged navigation control with Previous/Next boundaries, numbered pages, and optional ellipsis.

Avatar is a circular visual identity for a user or entity with image, initials, or icon fallback.

Breadcrumb is an ordered hierarchical trail showing location with navigable ancestors and a current-page indicator.

Radio Group is an accessible grouping layer for mutually exclusive radio options with legend, helper text, and errors.

Slider is a single-value control for selecting a number within min/max by dragging or keyboard-adjusting a thumb along a track.

Stepper shows progress through a fixed, known-length, ordered sequence of named steps — a compound Stepper + Step API built against the verified live Navigatio…

Table is a native HTML table foundation with captions, headers, body rows, footers, cell alignment, responsive overflow, RTL support, print-friendly scrolling,…

Badge is a compact non-interactive label for status, classification, or numeric counts at a glance.

Tag is a compact classification label for categories, filters, or user-applied values — distinct from read-only Badge status metadata.

List Item is a single row inside a collection — avatar, title, description, metadata, and optional trailing content.

Timeline is a vertical, chronological event list built on Content/Timeline Item rows — Default outlined-ring or Highlighted solid-dot markers, connector suppre…

Empty State is a zero-content placeholder with title, description, and optional recovery actions for collections, search, or first-use flows.

Alert is a persistent inline feedback block for contextual status tied to page content — not auto-dismissing.

Toast is a transient floating notification for confirming actions or reporting short-lived events.

Button Group joins related independent Buttons with shared outer chrome and a 2px divider gap — layout only; each Button keeps its own behavior.

Toggle Group is exclusive segmented selection (radiogroup) with joined chrome — Segmented Control is this presentation, not a separate component.

Accordion is a set of stacked collapsible sections for progressive disclosure, built from Accordion Item building blocks.

Tabs is a navigation pattern that switches between related in-context views using tablist/tab/tabpanel semantics and roving focus.

Search Field is a search-specific text field with leading magnifying-glass icon and optional clear action — built on shared text-input control behavior.

Credit Card Field is a compound UI control for card number, expiry, and CVC in one shell — visual pattern only, not a payment processor or PCI vault.

Number Input is direct numeric entry with optional steppers and min/max/step — not currency, quantity business logic, or a Slider.

File Upload is a native file input with drag-and-drop dropzone, advisory validation, selected-file list, and multipart form submission — selection only, not ne…

Popover is a non-modal floating panel for supplementary or lightly interactive content anchored to a trigger.

Tooltip is a brief supplementary label for a trigger, shown on keyboard focus or pointer hover.

Dialog is a modal overlay that interrupts workflow for focused attention, information, or a decision.

Drawer is an edge-anchored modal panel for supplementary settings, filters, or secondary forms.

Menu is a compact command surface for contextual actions — distinct from Select (form values) and Popover (supplementary content).

Split Button joins one primary Button action with a related Menu trigger using shared outer chrome — composition only; Button and Menu keep their own APIs.

Calendar Day is a single selectable day cell inside a month calendar grid.

Calendar Grid is a composed month-view calendar with single-date or range selection and grid keyboard navigation.

Select is a combobox-style single-select with a Popover listbox trigger and hidden native select for form submission.

Combobox is an editable searchable single-select with a filterable listbox — distinct from non-searchable Select and query-only Search Field.

Date Picker is a date-only field with editable D MMM YYYY text entry (en-GB) and calendar popover for single-date selection.

Phone Number Field pairs a country/dial-code selector with a phone number input — UI pattern only, not SMS verification or carrier lookup.

Tree View is a hierarchical, keyboard-navigable tree — file explorers, nested category browsers, org charts. Composes Content/Tree Item rows with roving-tabind…

Data Table is an interactive data-table pattern composing Table with header sorting and external Pagination — no columns-config prop; the consumer writes their…

Bar Chart compares categories with vertical or horizontal bars — a single series by default, or several series grouped, stacked, or stacked to 100%. Static and…

Line Chart shows a trend across ordered categories — a single series by default, or several series as separate lines. Static and non-tabbable, with an optional…

Area Chart shows magnitude over ordered categories with a filled area under each line — a single series by default, or several series overlapped, stacked, or s…

Chart Card is a Card composed for a chart: an optional title/description/actions header, and a body that owns loading/empty/error presentation around a chart t…

Chart Metric is a labeled value with an optional directional delta, for use above a chart or standalone — the delta's direction drives only its icon, never a c…