Semantic by construction

Primary, secondary, destructive, and ghost variants on a native button.

Text, email, password, and search inputs with label, help, and error states.

Auto-sizing textarea with field-sizing: content and a vertical resize handle.

Native select with appearance: base-select progressive enhancement.

Native checkbox with custom indicator built from CSS pseudo-elements.

Grouped radio inputs inside a fieldset/legend with keyboard support.

Switch-style checkbox with role="switch" and animated thumb.

Filterable single-select with listbox semantics and keyboard navigation.

Tag-based multi-value select over a hidden select multiple; initMultiselect adds chip removal, Backspace and datalist entry.

The form-field unit: label, control, help text and error composed as one piece of markup, with the help/error ids the controls’ aria-describedby points at.

Compose a whole field in one call: name a built-in control (input, textarea, select, checkbox, radio, toggle) or pass pre-rendered markup, plus the shared label, help and error options.

Inline status box with info, success, warning, and error variants.

Native progress element with deterministic and indeterminate states.

CSS-only loading indicator with three sizes and a screen-reader label.

Animated placeholder for content that is still loading.

Compact status pill with semantic color variants.

Article element with header/body/footer slots and hover affordance.

Native details/summary stack — exclusive or multi-open.

Tablist with proper ARIA wiring; initTabs adds the APG arrow-key navigation.

Initials fallback with optional image source and four sizes.

The minimal page shell: skip link, header slot, main landmark and footer slot, with the skip link and the main id kept in sync by construction.

Ordered list of links inside a nav with aria-current on the leaf.

Page navigation with prev, next, and ellipsis handling.

Modal dialog with grouped commands and shortcuts; initCommandPalette adds the substring filter and the keys its footer names.

Brand link, nav toggle and primary nav menu; initSiteHeader wires the toggle (aria-expanded, Escape and outside-click close) for narrow viewports.

A standalone labelled nav list — the header’s menu contract without the header around it.

Brand block, grouped link columns as labelled navs, and a legal bar with copyright line.

Native table with caption, sticky header, and hover row highlight.

Sortable, selectable grid built on native table; initDataGrid adds sorting, selection and arrow-key cell navigation.

role="tree" list; initTree adds expand/collapse, selection state and the APG tree keys.

Windowed list — the server renders only the first slice; initVirtualList re-slices it on scroll.

Native modal dialog with backdrop, focus trap, and escape-to-close.

Side sheet for settings and secondary tasks. Slides in from the left or right.

Popover-anchored menu with shortcuts; open, Escape and light dismiss are native, initDropdownMenu adds the arrow keys and close-on-select.

Popover-anchored tooltip with role="tooltip" and four positions.

Live region for non-blocking notifications. Auto-dismisses.

Opening section of a marketing page: badge, heading, lead, actions, social proof and an optional visual; the page variant renders the compact heading-and-lead hero for interior pages.

One plan: badge, name, price, tagline, check-marked features and a CTA; a featured plan is stamped and its CTA turns primary. renderPricingCards renders the whole list.

Icon, tag, title and description for feature grids; the description is escaped text or a body HTML slot.

A value, its label and an optional up/down trend indicator, for dashboards and proof sections.

A definition-list FAQ: each item is a question/answer pair in a faq-item wrapper; renderFaqItem renders a single entry.