# Unbranded 1.0.0 registry

Generated by source/build.mjs from the annotations in components.css. One block per component.

## stack

Vertical rhythm for components and forms.

- Use: Forms, panels, lists of controls. Never around prose (use flow).
- Classes: `.ub-stack`
- Knobs: `--ub-stack-space`
- Since: 1.0.0

## flow

Prose rhythm: space between blocks, more above headings than below.

- Use: Articles and any running text.
- Classes: `.ub-flow`
- Knobs: `--ub-flow-space`
- Since: 1.0.0

## box

A bordered padded area.

- Use: Grouping without a title. Never inside another box or panel.
- Classes: `.ub-box`
- Knobs: `--ub-box-pad`
- Since: 1.0.0

## center

Centered content column with the page gutter.

- Use: Inside every full-bleed band or page.
- Classes: `.ub-center`
- Knobs: `--ub-center-max`
- Since: 1.0.0

## cluster

Wrapping row of items.

- Use: Button groups, tags, inline metadata.
- Classes: `.ub-cluster`
- Knobs: `--ub-cluster-space`, `--ub-cluster-align`, `--ub-cluster-justify`
- Since: 1.0.0

## with-sidebar

Sidebar beside content that wraps under it when narrow.

- Use: Marginalia, filters, page index.
- Classes: `.ub-sidebar`, `.ub-with-sidebar`
- Knobs: `--ub-sidebar-width`, `--ub-content-min`
- Since: 1.0.0

## switcher

Row that becomes a column below a container width.

- Use: Two or three unlike blocks side by side.
- Classes: `.ub-switcher`
- Knobs: `--ub-switcher-threshold`
- Since: 1.0.0

## cover

Fills the viewport height with one centered main block.

- Use: Sign-in, empty app states, a title screen.
- Classes: `.ub-cover`, `.ub-cover-main`
- Knobs: `--ub-cover-min`
- Since: 1.0.0

## grid

Two-track grid with one dominant track (7/5); equal tracks only with data-fit.

- Use: Claim beside evidence, content beside a figure. data-fit only for galleries of like items.
- Classes: `.ub-grid`
- Knobs: `--ub-grid-cols`, `--ub-grid-min`
- Since: 1.0.0

## frame

Crops media to an aspect ratio.

- Use: Photos and screenshots in a fixed shape.
- Classes: `.ub-frame`
- Knobs: `--ub-frame-ratio`
- Since: 1.0.0

## reel

Horizontal scroller.

- Use: A strip of screenshots. Never for primary content.
- Classes: `.ub-reel`
- Knobs: `--ub-reel-item`
- Since: 1.0.0

## with-icon

Icon aligned to the first line of text.

- Use: Inline status text, links with an icon.
- Classes: `.ub-with-icon`
- Since: 1.0.0

## cq

Marks a container for container queries.

- Use: Components that change layout by their own width.
- Classes: `.ub-cq`
- Since: 1.0.0

## table-wrap

Scroll container for wide tables.

- Use: Every table that can exceed a phone's width. Add tabindex="0", role="region", aria-label.
- Classes: `.ub-table-wrap`
- Knobs: `--ub-table-max-h`
- Since: 1.0.0

## band

Full-width page section that carries its own ground.

- Use: Page sections. data-scheme="dark" on a light page makes an inverse band; data-ground="sunken" or "accent" changes the ground.
- Classes: `.ub-band`
- Variants: default, sunken, accent
- Since: 1.0.0

## display

Display-size headline for one short phrase (six words at most).

- Use: The page's main headline on explainer and argument pages.
- Classes: `.ub-display`
- Variants: 4xl, 5xl
- Since: 1.0.0

## lead

The paragraph that says what the page is for.

- Use: Once, under the page headline.
- Classes: `.ub-lead`
- Since: 1.0.0

## icon

Inline SVG icon from the page's Lucide sprite.

- Use: Controls, status, navigation only. Never above a heading, never larger than 24px.
- Classes: `.ub-icon`
- Variants: sm, md, lg
- Since: 1.0.0

## button

The action control.

- Use: One solid accent button per view for the primary action; soft, outline, or ghost for the rest.
- Classes: `.ub-button`
- Variants: solid, soft, outline, ghost, link
- States: default, hover, focus-visible, active, disabled, loading
- Also called: btn, cta
- Since: 1.0.0

## icon-button

A button that shows only an icon.

- Use: Toolbar and close actions. Requires aria-label.
- Classes: `.ub-icon-button`
- Variants: solid, soft, outline, ghost
- States: default, hover, focus-visible, active, disabled
- Also called: icon-btn
- Since: 1.0.0

## field

A label, a control, help text, and an error message.

- Use: Every form control. The error shows once the control is invalid after interaction.
- Classes: `.ub-field`, `.ub-field-error`, `.ub-field-help`, `.ub-field-label`
- States: default, error, success, disabled
- Since: 1.0.0

## input

Text input, select, or textarea.

- Use: Inside a field. Inputs never render under 16px.
- Classes: `.ub-input`
- States: default, hover, focus-visible, disabled, read-only, error
- Also called: text-field, textbox
- Since: 1.0.0

## check

Checkbox or radio with its label.

- Use: Group related checks in a fieldset.
- Classes: `.ub-check`
- States: unchecked, checked, indeterminate, disabled, focus-visible
- Also called: checkbox, radio
- Since: 1.0.0

## switch

On and off for one setting that applies immediately.

- Use: Settings. Never for a choice that needs a save button (use a checkbox).
- Classes: `.ub-switch`
- States: off, on, disabled, focus-visible
- Also called: toggle
- Since: 1.0.0

## segmented

A small set of mutually exclusive views or values.

- Use: Two to five short options. Built from radios in a fieldset.
- Classes: `.ub-segmented`
- States: selected, focus-visible, disabled
- Also called: segmented-control, toggle-group
- Since: 1.0.0

## fieldset

Groups related fields under a legend.

- Use: Forms. data-layout picks stack, inline, or grid.
- Classes: `.ub-fieldset`
- Variants: stack, inline, grid
- Since: 1.0.0

## panel

Groups one task's content with a title and optional actions.

- Use: Tool screens, settings, one record. Never inside another panel or box.
- Classes: `.ub-panel`, `.ub-panel-head`, `.ub-panel-sub`, `.ub-panel-title`
- Variants: default, quiet
- States: default, focus-within, loading
- Also called: card, box, tile
- Knobs: `--ub-panel-pad`
- Never nested inside another panel or box.
- Since: 1.0.0

## dl

Label and value pairs, value next to its label.

- Use: Record details and settings summaries. Replaces two-column label and value tables.
- Classes: `.ub-dl`
- Also called: description-list, key-value
- Since: 1.0.0

## callout

A message with a status: full border, tinted ground, icon, and a word.

- Use: Notes, warnings, errors, and confirmations inside a page. Never a colored side stripe.
- Classes: `.ub-callout`, `.ub-callout-title`
- Variants: info, success, warning, danger
- Also called: alert, banner, notice
- Since: 1.0.0

## table

Data table sized to its contents, headers on one line, numbers right-aligned.

- Use: Any list of records with more than one value. Put it in table-wrap. data-sortable turns on sorting.
- Classes: `.ub-table`
- States: default, row hover, selected, sorted, sticky header, empty, loading
- Since: 1.0.0

## sort

The button inside a sortable column header.

- Use: Only inside th of a data-sortable table.
- Classes: `.ub-sort`
- Since: 1.0.0

## stat

One sourced figure with a label, an optional change, and its basis.

- Use: Up to four key figures at the top of a report. A figure with %, x, or + needs a source.
- Classes: `.ub-stat`, `.ub-stat-basis`, `.ub-stat-delta`, `.ub-stat-label`, `.ub-stat-value`
- Variants: default
- Also called: metric, kpi
- Since: 1.0.0

## stats

A row of two to four stats divided by hairlines.

- Use: The opening figures of a report. Never filler: every figure is real and sourced.
- Classes: `.ub-stats`
- Since: 1.0.0

## figure

A figure, diagram, or image with a caption and a required source line.

- Use: Any number, chart, or image whose origin matters.
- Classes: `.ub-figure`, `.ub-figure-caption`, `.ub-figure-source`
- Also called: image, diagram
- Since: 1.0.0

## badge

A short status or count.

- Use: Status words and counts. data-tone is required. Never a decoration above a heading.
- Classes: `.ub-badge`
- Variants: neutral, accent, info, success, warning, danger
- Also called: tag, pill, label, chip
- Since: 1.0.0

## chart

The frame every chart sits in: title, subtitle with units, plot, legend for two or more series, source line.

- Use: Every Chart.js or Recharts chart. Color the chart only through ub.chart.theme().
- Classes: `.ub-chart`, `.ub-chart-head`, `.ub-chart-legend`, `.ub-chart-plot`, `.ub-chart-source`, `.ub-chart-sub`, `.ub-chart-title`
- States: ready, loading, empty, error
- Also called: chart-frame, graph
- Knobs: `--ub-chart-h`
- Since: 1.0.0

## map

Frame for a Leaflet map on OpenFreeMap tiles.

- Use: Location data. The style follows the page scheme.
- Classes: `.ub-map`, `.ub-map-canvas`
- Knobs: `--ub-map-h`
- Since: 1.0.0

## tip

A short CSS tooltip from data-tip.

- Use: Explaining an icon button or a truncated value. Never for essential information.
- Classes: `.ub-tip`
- States: hidden, shown on hover and focus-visible
- Also called: tooltip
- Since: 1.0.0

## popover

Floating content opened by a button (popovertarget).

- Use: Small forms, filters, extra details. ub.js anchors it to its button.
- Classes: `.ub-popover`
- States: closed, open
- Since: 1.0.0

## dialog

A modal dialog on the native dialog element.

- Use: Confirmations and short tasks. Open with command="show-modal" commandfor="id".
- Classes: `.ub-dialog`, `.ub-dialog-actions`, `.ub-dialog-body`, `.ub-dialog-head`, `.ub-dialog-title`
- States: closed, open, entering
- Also called: modal
- Since: 1.0.0

## drawer

A dialog attached to one side of the screen.

- Use: Record details and filters beside a list. data-side="start" opens on the left.
- Classes: `.ub-drawer`
- States: closed, open
- Also called: sheet, tray, side-panel
- Since: 1.0.0

## toast

A short confirmation that disappears on its own.

- Use: After an action completes. Created with ub.toast(text, {tone}).
- Classes: `.ub-toast`, `.ub-toast-region`
- States: entering, visible, exiting
- Also called: snackbar, notification
- Since: 1.0.0

## tabs

Peer views of one dataset.

- Use: Only when the views are peers (week, month, year). Content that should be read in order stays on the page, not behind tabs.
- Classes: `.ub-tab`, `.ub-tablist`, `.ub-tabs`
- States: selected, hover, focus-visible, disabled
- Since: 1.0.0

## accordion

Sections that open one at a time, on details name.

- Use: Secondary detail and FAQs that are genuinely optional reading.
- Classes: `.ub-accordion`
- States: closed, open, focus-visible
- Since: 1.0.0

## empty

What is missing, what to do, and one button.

- Use: Every list, table, and chart that can be empty. No illustration.
- Classes: `.ub-empty`, `.ub-empty-title`
- Also called: empty-state, zero-state
- Since: 1.0.0

## skeleton

A static placeholder block while content loads. No shimmer.

- Use: Holding layout for content that loads after the page.
- Classes: `.ub-skeleton`
- Knobs: `--ub-skeleton-w`, `--ub-skeleton-h`
- Since: 1.0.0

## spinner

The only infinite animation in the system.

- Use: Inside a busy button or region, with role="status" and visually hidden text.
- Classes: `.ub-spinner`
- Variants: sm, md
- Since: 1.0.0

## progress

Determinate or indeterminate progress, or a meter.

- Use: Uploads, steps of a job, a level against a range.
- Classes: `.ub-progress`
- States: determinate, indeterminate, complete
- Since: 1.0.0

## appbar

The full-width bar at the top of a page or app.

- Use: Product name or mark, primary navigation, one or two actions. Never the system wordmark beside a title.
- Classes: `.ub-appbar`, `.ub-appbar-brand`, `.ub-appbar-end`, `.ub-appbar-inner`
- Also called: header, navbar, topbar
- Since: 1.0.0

## nav

A list of page links.

- Use: Top navigation in an appbar. aria-current="page" marks the current page.
- Classes: `.ub-nav`
- States: current page, hover, focus-visible
- Since: 1.0.0

## sidenav

A vertical list of sections or pages.

- Use: App sidebars and long-page indexes.
- Classes: `.ub-sidenav`, `.ub-sidenav-label`
- States: current, hover, focus-visible
- Since: 1.0.0

## app

App shell: appbar on top, sidebar beside main.

- Use: Tool pages. Below 64rem the sidebar stacks above main.
- Classes: `.ub-app`, `.ub-app-main`, `.ub-app-side`
- Since: 1.0.0

## toolbar

A row of controls above a table or view.

- Use: Filters, search, and view switches.
- Classes: `.ub-toolbar`, `.ub-toolbar-end`
- Since: 1.0.0

## code

A code block with a copy button.

- Use: Snippets someone will copy.
- Classes: `.ub-code`, `.ub-code-copy`
- States: default, copied
- Since: 1.0.0

## skip

Skip link to the main content.

- Use: First focusable element on every page.
- Classes: `.ub-skip`
- Since: 1.0.0

## num

Right-aligned tabular figure.

- Use: Number cells and inline figures.
- Classes: `.ub-num`
- Since: 1.0.0

## nowrap

Keeps a value on one line.

- Use: 
- Classes: `.ub-nowrap`
- Since: 1.0.0

## sr-only

Visually hidden, still read by screen readers.

- Use: 
- Classes: `.ub-sr-only`
- Also called: visually-hidden
- Since: 1.0.0

## muted

Secondary text color.

- Use: Captions and metadata. Never on body text.
- Classes: `.ub-muted`
- Since: 1.0.0

## Tokens

`--ub-accent`, `--ub-accent-1`, `--ub-accent-2`, `--ub-accent-3`, `--ub-accent-4`, `--ub-accent-5`, `--ub-accent-6`, `--ub-accent-7`, `--ub-accent-8`, `--ub-accent-9`, `--ub-accent-10`, `--ub-accent-11`, `--ub-accent-12`, `--ub-accent-border`, `--ub-accent-hover`, `--ub-accent-subtle`, `--ub-accent-text`, `--ub-bg`, `--ub-block`, `--ub-border`, `--ub-border-control`, `--ub-border-strong`, `--ub-chart-1`, `--ub-chart-2`, `--ub-chart-3`, `--ub-chart-4`, `--ub-chart-5`, `--ub-chart-6`, `--ub-chart-7`, `--ub-chart-8`, `--ub-chart-grid`, `--ub-control-lg`, `--ub-control-md`, `--ub-control-sm`, `--ub-control-xs`, `--ub-danger`, `--ub-danger-border`, `--ub-danger-subtle`, `--ub-danger-text`, `--ub-div-1`, `--ub-div-2`, `--ub-div-3`, `--ub-div-4`, `--ub-div-5`, `--ub-div-6`, `--ub-div-7`, `--ub-div-8`, `--ub-div-9`, `--ub-dur-base`, `--ub-dur-fast`, `--ub-dur-slow`, `--ub-ease-in-out`, `--ub-ease-out`, `--ub-fg`, `--ub-fg-faint`, `--ub-fg-muted`, `--ub-focus`, `--ub-focus-offset`, `--ub-focus-width`, `--ub-font-body`, `--ub-font-display`, `--ub-font-mono`, `--ub-font-ui`, `--ub-gap`, `--ub-gutter`, `--ub-h1`, `--ub-h2`, `--ub-h3`, `--ub-h4`, `--ub-heading-after`, `--ub-heading-before`, `--ub-icon-lg`, `--ub-icon-md`, `--ub-icon-sm`, `--ub-icon-stroke`, `--ub-info`, `--ub-info-border`, `--ub-info-subtle`, `--ub-info-text`, `--ub-leading-body`, `--ub-leading-control`, `--ub-leading-display`, `--ub-leading-h1`, `--ub-leading-h2`, `--ub-leading-h3`, `--ub-leading-h4`, `--ub-leading-ui`, `--ub-measure`, `--ub-measure-heading`, `--ub-measure-ui`, `--ub-neutral-1`, `--ub-neutral-2`, `--ub-neutral-3`, `--ub-neutral-4`, `--ub-neutral-5`, `--ub-neutral-6`, `--ub-neutral-7`, `--ub-neutral-8`, `--ub-neutral-9`, `--ub-neutral-10`, `--ub-neutral-11`, `--ub-neutral-12`, `--ub-on-accent`, `--ub-on-danger`, `--ub-on-info`, `--ub-on-success`, `--ub-on-warning`, `--ub-page-default`, `--ub-page-narrow`, `--ub-page-wide`, `--ub-radius-control`, `--ub-radius-full`, `--ub-radius-overlay`, `--ub-radius-surface`, `--ub-scrim`, `--ub-section`, `--ub-seq-1`, `--ub-seq-2`, `--ub-seq-3`, `--ub-seq-4`, `--ub-seq-5`, `--ub-seq-6`, `--ub-seq-7`, `--ub-shadow-overlay`, `--ub-space-1`, `--ub-space-2`, `--ub-space-3`, `--ub-space-4`, `--ub-space-5`, `--ub-space-6`, `--ub-space-8`, `--ub-space-10`, `--ub-space-12`, `--ub-space-16`, `--ub-space-20`, `--ub-space-24`, `--ub-success`, `--ub-success-border`, `--ub-success-subtle`, `--ub-success-text`, `--ub-surface`, `--ub-surface-overlay`, `--ub-surface-raised`, `--ub-surface-sunken`, `--ub-text-2xl`, `--ub-text-3xl`, `--ub-text-4xl`, `--ub-text-5xl`, `--ub-text-base`, `--ub-text-body`, `--ub-text-lg`, `--ub-text-sm`, `--ub-text-ui`, `--ub-text-xl`, `--ub-text-xs`, `--ub-tracking-display`, `--ub-tracking-h2`, `--ub-tracking-h3`, `--ub-tracking-small`, `--ub-warning`, `--ub-warning-border`, `--ub-warning-subtle`, `--ub-warning-text`, `--ub-weight-body`, `--ub-weight-heading`, `--ub-weight-medium`, `--ub-weight-strong`, `--ub-z-overlay`, `--ub-z-sticky`, `--ub-z-toast`