Components

Core

Button: A native button or link with its own visual style, size, and loading and disabled states.
Button group: Several buttons joined into one visual control, laid out in a row or column with the seam between them collapsed.
Icon: One glyph from Oblyx's semantic icon set, rendered as inline SVG with no network request.
Card: A bordered container for a self-contained chunk of content, with optional header, body, and footer.

Input: A labeled text input that uses native HTML form submission and constraint validation, no wrapper element.
Textarea: A labeled multi-line text control, the textarea counterpart to input.
Checkbox: A labeled checkbox for a single boolean value, painted by a visual sibling next to the real input.
Radio: A single labeled radio button; grouping is the native name attribute, with no group wrapper element.
Switch: A checkbox that reads as a toggle: same boolean value, a pill-and-thumb visual instead of a box.
Select: A labeled dropdown composed from option children, backed by a real hidden native select.
Combobox: A labeled dropdown that filters its option children as you type, backed by a real hidden native select.
Segmented control: A small set of mutually exclusive choices shown side by side, backed by real radio inputs in a fieldset.
Slider: A labeled single-value range control built on a native range input, with a live value readout.

Stack: A one-dimensional flex layout: a row or column of children with a token-based gap between them.
Grid: A two-dimensional CSS grid layout, for children that need to span more than one track.
Divider: A horizontal or vertical rule, with an optional centered label, and no margin of its own.
Layout: A two-dimensional application shell: header, footer, and a content region with optional side panels.

Alert: A persistent status panel with an icon, a message, and an optional dismiss control.
Toast: A singleton viewport that stacks and announces self-dismissing notifications.
Empty state: A placeholder for a region with no content yet, with an optional icon and action.

Spinner: An indeterminate loading indicator: an animated ring, with an optional visible label.
Skeleton: A pulsing placeholder block that mimics the shape of content still loading.
Progress bar: A determinate or indeterminate progress meter with a required label.
Progress ring: The circular counterpart to progress bar: the same determinate or indeterminate meter, drawn as a ring.
Status dot: A fixed-size, color-only presence or severity indicator for inline use.

Badge: A small status or category label, driven by a semantic variant or a categorical color.
Tag: A sizeable, removable, optionally linked entity chip, with no status axis of its own.
Table: A data table with sortable columns, sticky header and column, and an empty state.
List: A list of items with optional dividers, header, and interactive or selected items.
Avatar: A circular image with initials fallback, an optional status dot, and grouping with overflow.

Collapsible: A single labeled disclosure region built on native details/summary, with native name-based grouping.

Dialog: A centered modal built on the native dialog element and showModal(), for a title, body, and action row.
Drawer: An edge-anchored panel on the same native dialog foundation as Dialog, sliding in from a viewport edge.
Popover: A click-triggered surface anchored to a trigger button, for content that needs real interaction.
Tooltip: A short hint anchored to its trigger content, shown on hover or keyboard focus, advisory only.
Menu: A trigger button that opens a popup list of actions.

Link: A plain, styled anchor with no router indirection or client-side interaction logic.
Tabs: A tab strip, its tabs, and the panels they control, with full ARIA wiring for server-rendered content.
Breadcrumbs: A trail of items in a nav landmark, each a real link except for the current page.
Pagination: Previous, indicator, and next controls as real links, built from an href pattern with no routing scheme.
Side nav: A nav landmark that lays out headings, sections, and items, including nested items, in document order.