Custom elements (ui-*, x-*) and shared CSS patterns, grouped by role.
The category taxonomy follows the cross-system reference,
which also cross-references each component to Open UI, Radix, Material Web, Bootstrap, and WAI-ARIA APG.
Tag-name prefixes: ui- generic reusable widget · x- polyfill for a native element ·
app- app-specific (not documented here). See Conventions.
Each component registers its tag when its module is imported. For example, load <script type="module" src="/ui/components/ui-statusbar.mjs"></script>; no registration call is needed. Some modules also export an idempotent init({tag}) helper. Calling it after import does nothing. See Getting started for a complete page example.
Controls that trigger an operation. Use the lowest-emphasis variant that still communicates the action's role. See the shared variant names and rules for choosing classes or attributes on Modifiers.
.btn — Button — primary / outline / ghost / destructive variants plus .btn-icon..badge — Badge — status pills (secondary, outline, brand, destructive, warning, cancelled).<ui-theme-toggle> — Theme toggle — animated sun-and-moon button over the 3-state theme model (toggling onto the OS's own value returns to System).Input controls. Native HTML elements with shared styling; custom elements only where native gaps exist.
.form-fields — Form fields — input / textarea / native select with .form-group layout.role="switch" — Switch — CSS-only on/off toggle (styled <input type="checkbox" role="switch">, keyed off the role — no class); token-driven with --switch-* overrides.<fieldset> of radios — Radio group — CSS-only one-of-many choice; native radios supply the APG keyboard and selection behavior (one Tab stop, arrow keys that select, <legend> as the group name), so there is no JavaScript. data-look="segmented" draws it as a segmented button (shared frame + dividers, equal segments, a filled and checked selection — cross-system) and .option-card draws each option as a card with a description; token-driven with --segmented-* overrides..input-group — input with prefix/suffix decoration (icons, units, clear buttons, async state indicators). Validation coloring is driven by native :user-valid / :user-invalid.disabled, readonly, user-valid/user-invalid, error, flux, updating, locked; companion .field-help (with .info or .warning) / .field-error / .field-success.<ui-combobox> — APG combobox with async source, four autocomplete sub-variants (mode="none|list|inline|both"), and tag-input modes (chips single-token, multiple). Supports [raw] for input-group composition.<x-select> — customizable select with option groups (fills the gap until <select> customization ships across browsers). Supports [raw] for input-group composition.Moving between views or sections.
<ui-toolbar> — horizontal group with roving tabindex (arrow-key nav).<ui-tab> / <ui-outlet> — tab list bound to a view switcher.tree() — decorates a nested <ul>/<li> into an APG tree view (roving tabindex, expand/collapse, lazy children).listbox() — turns existing page elements into an APG listbox (roving focus, typeahead, restrict()); contained is for one nested inside another composite widget, where it adds no Tab stop and stops keyboard events from reaching the outer widget.scroll_to_if_needed() — scrolls a target into view only when it has left the middle third of the reading zone, then places it at the golden ratio (clamped by the zone top for a target taller than the zone). The same test and placement run on the horizontal axis, on the nearest ancestor of the target that scrolls sideways, found by walking up from the target. Takes the scroller for the vertical axis — window by default, an element for a page that scrolls an inner box — and guards the smooth-scroll cancellation race.Floating surfaces above page content. All use native <dialog> or the Popover API.
<ui-dialog> — modal, alert, response, and slide (sheet) variants.<ui-menu> — dropdown menu with keyboard navigation and submenus; trigger="contextmenu" makes it a context menu on another element, opened by right-click or Shift+F10.<ui-popover> — anchored popover with light-dismiss.toast() — transient status notification.tooltip() — description shown on hover, on focus, and on a long press on touch devices.Communicating state changes, errors, and loading.
.callout — Callout — a tinted remark about the element beside it, with the tint set by the caller through --_tint and an optional .callout-actions cluster. Not a page-level status surface: that is the statusbar or a toast.<ui-notifications> — persistent list of warnings opened from a trigger button.<ui-statusbar> — projects the top active notification inline (role="status"); opens the linked <ui-notifications> popover when there's more than one.<ui-statusbar> and <ui-notifications>; drive these surfaces from notifications.mjs..spin inline spinner, the view/dialog busy overlay, and which loading indicator to use when.<bg-jobs> — an operator table for the background job queue: every job in the browser, counts by status, per-row delete and a Retry all. Use it on a page dedicated to managing the queue. It accepts no configuration attributes or filters, and its actions reach every job in the database, not the rows on screen. To show progress for a particular task, render a status from query_group() instead.Show/hide regions built on native <details>/<summary>.
accordion() — styled disclosure (zero-JS) and exclusive accordion; the decorator adds APG region wiring, exclusivity, and lazy load().Static presentation primitives.
article — Card — list item with title, meta, and actions, plus an opt-in .card-media leading picture.<ui-icon> — Phosphor icon loader with searchable grid of 1200+ icons.<ui-code> — syntax-highlighted code display used throughout these docs.Page-shape patterns. Plain CSS over wrapper components — see Breakpoints for the project's breakpoint vocabulary.
<aside> at ≥ lg, hamburger + <ui-dialog> below.<aside> that slides out at its own edge, with an open/close handle attached to its edge (side_panel(), four handle looks, either side) — or, for several views on one side, collapses to a rail of disclosure buttons (--sp-rail, panel-rail).Cross-system reference — the full mapping: for every component pattern, see its status in Open UI, the native HTML element (if any), Material Web, Radix UI, Bootstrap, the WAI-ARIA APG pattern, and this library's implementation with direct links and accessibility notes.