Components

The action component. Six variants, four sizes, and a loading state that morphs the button around its own spinner while it stays focused and reachable.

A month grid for picking a single date or a range. It draws the days and owns selection; the trigger, the panel, and the field wiring belong to date-picker.

A tri-state checkbox that owns its label and error message. One 20px size; the check mark morphs into a dash for the indeterminate state.

A text field that opens a panel of the items the app supplies for the current text, taking one value or several as chips, with typed text allowed as a value. It owns its label and error like the rest of the field family; it never filters, fetches, or debounces.

A field that opens a calendar in a panel and posts the chosen dates. It owns its label, error, and trigger like the rest of the field family; the grid inside is calendar.

A layout shell. It gives fields their vertical rhythm, an actions row, and an optional slot where the app places the submit result as an alert.

A single-line text field that owns its label, error message, and busyness. Text-like types only; stays editable while loading.

A numeric field with a unit, bounds, and a step. It owns its label and error like the rest of the field family.

A single choice from a small set of visible options, in one 20px size. It owns its label and error message like the rest of the field family; the checked item fills primary with a knocked-out dot that fades in.

A single-select field that owns its label and error message. The list is a modal surface anchored to the trigger.

An instant-apply on/off control that owns its label and its own busyness. One size, no variants, no error state; a failed toggle is a result the app shows.

A multiline text field that owns its label, error message, and busyness. Autosizes between a row floor and a row cap; stays editable while loading.

A set of chips that toggle in single or multiple mode, wrapping across rows. Single mode returns to empty, multiple mode takes a max, and required blocks the last deselect. No shared track and no tab shape: each chip is its own control.

The identity mark for a person. Image, then two initials on one of eight step-400 hues, then a plain circle. Static and non-focusable.

An overlapping row of avatars with an overflow count past a limit. Hover or keyboard focus parts the row around one avatar until it stands free and reveals its name; the chip reveals the names it hides.

A static marker for a status, a category, or a small count. Six variants, one size, never focusable and never animated.

A horizontal scroll-snap track with previous and next controls. Items keep their own width; the carousel owns the snapping and the keyboard path.

A one-pixel rule that divides content, horizontal or vertical. Decorative by default, announced only when the division carries meaning.

A styled primitive for tabular data in seven parts: Table, TableHeader, TableBody, TableFooter, TableRow, TableHeadCell, and TableCell. Horizontal rules only, a primary header rule, a background step on the hovered body row, and an interactive row whose single link stretches over the whole row. Sorting, selection, and pagination belong to a data table built on top.

A sequence of markers joined by a connector. Content sits beside its marker; meaning stays with the consumer.

A non-modal label anchored to its trigger. It never takes focus, and pointer leave, blur, or Escape dismisses it.

The app's inline vehicle for the result of an action. A neutral surface where the icon carries the variant, two sizes, an optional close button, and its own enter and exit animation.

A resting no-content block: an optional icon, a required title, an optional description, and one or two actions. Two sizes, no variants, and no border or background of its own.

One persistent message for a result with no visible home, dismissed by the user and never by a timer. It links back to its subject and never takes focus.

A bar for an operation of known length, determinate or indeterminate. Spinner covers an action's busyness and skeleton covers a loading region; progress covers measured work.

The region-loading placeholder. Three shape presets sized by the consumer, pulsing on a 2s cycle, always hidden from assistive technology.

The loading primitive for action busyness. One variant, two sizes, a currentColor arc rotating once per 800ms.

Progressive disclosure in a divider list: a heading row opens its own panel on a height animation. Several items open at once by default; type single with collapsible gives a one-item disclosure.

A flat container that groups related content on one surface. Seven slots, one padding step, no variants; `interactive` opts into hover, press, and focus feedback through a stretched title link.

A modal surface over a scrim. It traps focus, locks scroll, and returns focus to its trigger on close.

A modal panel inset at the right edge of the viewport for secondary content that accompanies the page still visible beside it: filters for a list, the detail of a selected row. It is dialog's root and parts with one panel of its own, and it is never app navigation and never a confirm.

A modal menu of actions anchored to its trigger. Arrow keys walk the items; choosing one closes the menu.

A trail showing where the current page sits in a hierarchy. Every level above the current one links back up; the current page is plain text.

One controlled control that moves between the numbered pages of a list or table: previous, a seven-slot window of page numbers with an ellipsis for every run of at least two hidden pages, and next. A compact form reads "Page 3 of 12" instead. Page size and the range line stay with the app.

An aside with header, content, and footer slots that morphs between an expanded column and an icon rail, and becomes one sticky horizontal strip under a 700px container. It hosts navigation items or any other rail content.

A bar of equal segments filled through the current one, for a position in a sequence of known count. It reads as ticks rather than a fraction; progress covers one operation of known length.

A horizontal tab set in one underline variant. A sliding indicator tracks the selected tab; a separate bar marks focus.

An anchor for a sentence or a line of UI copy. It takes its size and weight from the text around it and carries an underline that never leaves; a link navigates and a button acts.