{ "name": "unbranded", "version": "1.0.0", "released": "2026-11-01", "layers": [ "ub.reset", "ub.tokens", "ub.base", "ub.layout", "ub.components", "ub.utilities", "ub.compat" ], "attributes": { "data-preset": [ "standard", "tool", "reading", "report" ], "data-scheme": [ "light", "dark", "auto" ], "data-density": [ "compact", "regular", "comfortable" ], "data-contrast": [ "more" ], "data-variant": [ "solid", "soft", "outline", "ghost", "link" ], "data-tone": [ "neutral", "accent", "info", "success", "warning", "danger" ], "data-size": [ "xs", "sm", "md", "lg", "4xl", "5xl" ], "data-ground": [ "sunken", "accent" ], "data-side": [ "start", "end" ], "data-layout": [ "stack", "inline", "grid" ], "data-state": [ "ready", "loading", "empty", "error" ], "data-direction": [ "up", "down" ] }, "deprecated": {}, "aliases": { "btn": "button", "cta": "button", "icon-btn": "icon-button", "text-field": "input", "textbox": "input", "checkbox": "check", "radio": "check", "toggle": "switch", "segmented-control": "segmented", "toggle-group": "segmented", "card": "panel", "box": "panel", "tile": "panel", "description-list": "dl", "key-value": "dl", "alert": "callout", "banner": "callout", "notice": "callout", "metric": "stat", "kpi": "stat", "image": "figure", "diagram": "figure", "tag": "badge", "pill": "badge", "label": "badge", "chip": "badge", "chart-frame": "chart", "graph": "chart", "tooltip": "tip", "modal": "dialog", "sheet": "drawer", "tray": "drawer", "side-panel": "drawer", "snackbar": "toast", "notification": "toast", "empty-state": "empty", "zero-state": "empty", "header": "appbar", "navbar": "appbar", "topbar": "appbar", "visually-hidden": "sr-only" }, "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" ], "knobs": [ "--ub-box-pad", "--ub-center-max", "--ub-chart-h", "--ub-cluster-align", "--ub-cluster-justify", "--ub-cluster-space", "--ub-content-min", "--ub-cover-min", "--ub-flow-space", "--ub-frame-ratio", "--ub-grid-cols", "--ub-grid-min", "--ub-map-h", "--ub-panel-pad", "--ub-reel-item", "--ub-sidebar-width", "--ub-skeleton-h", "--ub-skeleton-w", "--ub-stack-space", "--ub-switcher-threshold", "--ub-table-max-h" ], "classes": [ "ub-accordion", "ub-app", "ub-app-main", "ub-app-side", "ub-appbar", "ub-appbar-brand", "ub-appbar-end", "ub-appbar-inner", "ub-badge", "ub-band", "ub-box", "ub-button", "ub-callout", "ub-callout-title", "ub-center", "ub-chart", "ub-chart-head", "ub-chart-legend", "ub-chart-plot", "ub-chart-source", "ub-chart-sub", "ub-chart-title", "ub-check", "ub-cluster", "ub-code", "ub-code-copy", "ub-cover", "ub-cover-main", "ub-cq", "ub-dialog", "ub-dialog-actions", "ub-dialog-body", "ub-dialog-head", "ub-dialog-title", "ub-display", "ub-dl", "ub-drawer", "ub-empty", "ub-empty-title", "ub-field", "ub-field-error", "ub-field-help", "ub-field-label", "ub-fieldset", "ub-figure", "ub-figure-caption", "ub-figure-source", "ub-flow", "ub-frame", "ub-grid", "ub-icon", "ub-icon-button", "ub-input", "ub-lead", "ub-map", "ub-map-canvas", "ub-muted", "ub-nav", "ub-nowrap", "ub-num", "ub-panel", "ub-panel-head", "ub-panel-sub", "ub-panel-title", "ub-popover", "ub-progress", "ub-reel", "ub-segmented", "ub-sidebar", "ub-sidenav", "ub-sidenav-label", "ub-skeleton", "ub-skip", "ub-sort", "ub-spinner", "ub-sr-only", "ub-stack", "ub-stat", "ub-stat-basis", "ub-stat-delta", "ub-stat-label", "ub-stat-value", "ub-stats", "ub-switch", "ub-switcher", "ub-tab", "ub-table", "ub-table-wrap", "ub-tablist", "ub-tabs", "ub-tip", "ub-toast", "ub-toast-region", "ub-toolbar", "ub-toolbar-end", "ub-with-icon", "ub-with-sidebar" ], "components": [ { "name": "stack", "summary": "Vertical rhythm for components and forms.", "use": "Forms, panels, lists of controls. Never around prose (use flow).", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-stack-space" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-stack" ] }, { "name": "flow", "summary": "Prose rhythm: space between blocks, more above headings than below.", "use": "Articles and any running text.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-flow-space" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-flow" ] }, { "name": "box", "summary": "A bordered padded area.", "use": "Grouping without a title. Never inside another box or panel.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-box-pad" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-box" ] }, { "name": "center", "summary": "Centered content column with the page gutter.", "use": "Inside every full-bleed band or page.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-center-max" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-center" ] }, { "name": "cluster", "summary": "Wrapping row of items.", "use": "Button groups, tags, inline metadata.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-cluster-space", "--ub-cluster-align", "--ub-cluster-justify" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-cluster" ] }, { "name": "with-sidebar", "summary": "Sidebar beside content that wraps under it when narrow.", "use": "Marginalia, filters, page index.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-sidebar-width", "--ub-content-min" ], "parts": [ "ub-sidebar" ], "nests": true, "since": "1.0.0", "classes": [ "ub-sidebar", "ub-with-sidebar" ] }, { "name": "switcher", "summary": "Row that becomes a column below a container width.", "use": "Two or three unlike blocks side by side.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-switcher-threshold" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-switcher" ] }, { "name": "cover", "summary": "Fills the viewport height with one centered main block.", "use": "Sign-in, empty app states, a title screen.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-cover-min" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-cover", "ub-cover-main" ] }, { "name": "grid", "summary": "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.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-grid-cols", "--ub-grid-min" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-grid" ] }, { "name": "frame", "summary": "Crops media to an aspect ratio.", "use": "Photos and screenshots in a fixed shape.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-frame-ratio" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-frame" ] }, { "name": "reel", "summary": "Horizontal scroller.", "use": "A strip of screenshots. Never for primary content.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-reel-item" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-reel" ] }, { "name": "with-icon", "summary": "Icon aligned to the first line of text.", "use": "Inline status text, links with an icon.", "aliases": [], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-with-icon" ] }, { "name": "cq", "summary": "Marks a container for container queries.", "use": "Components that change layout by their own width.", "aliases": [], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-cq" ] }, { "name": "table-wrap", "summary": "Scroll container for wide tables.", "use": "Every table that can exceed a phone's width. Add tabindex=\"0\", role=\"region\", aria-label.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-table-max-h" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-table-wrap" ] }, { "name": "band", "summary": "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.", "aliases": [], "variants": [ "default", "sunken", "accent" ], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-band" ] }, { "name": "display", "summary": "Display-size headline for one short phrase (six words at most).", "use": "The page's main headline on explainer and argument pages.", "aliases": [], "variants": [ "4xl", "5xl" ], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-display" ] }, { "name": "lead", "summary": "The paragraph that says what the page is for.", "use": "Once, under the page headline.", "aliases": [], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-lead" ] }, { "name": "icon", "summary": "Inline SVG icon from the page's Lucide sprite.", "use": "Controls, status, navigation only. Never above a heading, never larger than 24px.", "aliases": [], "variants": [ "sm", "md", "lg" ], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-icon" ] }, { "name": "button", "summary": "The action control.", "use": "One solid accent button per view for the primary action; soft, outline, or ghost for the rest.", "aliases": [ "btn", "cta" ], "variants": [ "solid", "soft", "outline", "ghost", "link" ], "states": [ "default", "hover", "focus-visible", "active", "disabled", "loading" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-button" ] }, { "name": "icon-button", "summary": "A button that shows only an icon.", "use": "Toolbar and close actions. Requires aria-label.", "aliases": [ "icon-btn" ], "variants": [ "solid", "soft", "outline", "ghost" ], "states": [ "default", "hover", "focus-visible", "active", "disabled" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-icon-button" ] }, { "name": "field", "summary": "A label, a control, help text, and an error message.", "use": "Every form control. The error shows once the control is invalid after interaction.", "aliases": [], "variants": [], "states": [ "default", "error", "success", "disabled" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-field", "ub-field-error", "ub-field-help", "ub-field-label" ] }, { "name": "input", "summary": "Text input, select, or textarea.", "use": "Inside a field. Inputs never render under 16px.", "aliases": [ "text-field", "textbox" ], "variants": [], "states": [ "default", "hover", "focus-visible", "disabled", "read-only", "error" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-input" ] }, { "name": "check", "summary": "Checkbox or radio with its label.", "use": "Group related checks in a fieldset.", "aliases": [ "checkbox", "radio" ], "variants": [], "states": [ "unchecked", "checked", "indeterminate", "disabled", "focus-visible" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-check" ] }, { "name": "switch", "summary": "On and off for one setting that applies immediately.", "use": "Settings. Never for a choice that needs a save button (use a checkbox).", "aliases": [ "toggle" ], "variants": [], "states": [ "off", "on", "disabled", "focus-visible" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-switch" ] }, { "name": "segmented", "summary": "A small set of mutually exclusive views or values.", "use": "Two to five short options. Built from radios in a fieldset.", "aliases": [ "segmented-control", "toggle-group" ], "variants": [], "states": [ "selected", "focus-visible", "disabled" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-segmented" ] }, { "name": "fieldset", "summary": "Groups related fields under a legend.", "use": "Forms. data-layout picks stack, inline, or grid.", "aliases": [], "variants": [ "stack", "inline", "grid" ], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-fieldset" ] }, { "name": "panel", "summary": "Groups one task's content with a title and optional actions.", "use": "Tool screens, settings, one record. Never inside another panel or box.", "aliases": [ "card", "box", "tile" ], "variants": [ "default", "quiet" ], "states": [ "default", "focus-within", "loading" ], "knobs": [ "--ub-panel-pad" ], "parts": [], "nests": false, "since": "1.0.0", "classes": [ "ub-panel", "ub-panel-head", "ub-panel-sub", "ub-panel-title" ] }, { "name": "dl", "summary": "Label and value pairs, value next to its label.", "use": "Record details and settings summaries. Replaces two-column label and value tables.", "aliases": [ "description-list", "key-value" ], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-dl" ] }, { "name": "callout", "summary": "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.", "aliases": [ "alert", "banner", "notice" ], "variants": [ "info", "success", "warning", "danger" ], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-callout", "ub-callout-title" ] }, { "name": "table", "summary": "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.", "aliases": [], "variants": [], "states": [ "default", "row hover", "selected", "sorted", "sticky header", "empty", "loading" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-table" ] }, { "name": "sort", "summary": "The button inside a sortable column header.", "use": "Only inside th of a data-sortable table.", "aliases": [], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-sort" ] }, { "name": "stat", "summary": "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.", "aliases": [ "metric", "kpi" ], "variants": [ "default" ], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-stat", "ub-stat-basis", "ub-stat-delta", "ub-stat-label", "ub-stat-value" ] }, { "name": "stats", "summary": "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.", "aliases": [], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-stats" ] }, { "name": "figure", "summary": "A figure, diagram, or image with a caption and a required source line.", "use": "Any number, chart, or image whose origin matters.", "aliases": [ "image", "diagram" ], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-figure", "ub-figure-caption", "ub-figure-source" ] }, { "name": "badge", "summary": "A short status or count.", "use": "Status words and counts. data-tone is required. Never a decoration above a heading.", "aliases": [ "tag", "pill", "label", "chip" ], "variants": [ "neutral", "accent", "info", "success", "warning", "danger" ], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-badge" ] }, { "name": "chart", "summary": "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().", "aliases": [ "chart-frame", "graph" ], "variants": [], "states": [ "ready", "loading", "empty", "error" ], "knobs": [ "--ub-chart-h" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-chart", "ub-chart-head", "ub-chart-legend", "ub-chart-plot", "ub-chart-source", "ub-chart-sub", "ub-chart-title" ] }, { "name": "map", "summary": "Frame for a Leaflet map on OpenFreeMap tiles.", "use": "Location data. The style follows the page scheme.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-map-h" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-map", "ub-map-canvas" ] }, { "name": "tip", "summary": "A short CSS tooltip from data-tip.", "use": "Explaining an icon button or a truncated value. Never for essential information.", "aliases": [ "tooltip" ], "variants": [], "states": [ "hidden", "shown on hover and focus-visible" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-tip" ] }, { "name": "popover", "summary": "Floating content opened by a button (popovertarget).", "use": "Small forms, filters, extra details. ub.js anchors it to its button.", "aliases": [], "variants": [], "states": [ "closed", "open" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-popover" ] }, { "name": "dialog", "summary": "A modal dialog on the native dialog element.", "use": "Confirmations and short tasks. Open with command=\"show-modal\" commandfor=\"id\".", "aliases": [ "modal" ], "variants": [], "states": [ "closed", "open", "entering" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-dialog", "ub-dialog-actions", "ub-dialog-body", "ub-dialog-head", "ub-dialog-title" ] }, { "name": "drawer", "summary": "A dialog attached to one side of the screen.", "use": "Record details and filters beside a list. data-side=\"start\" opens on the left.", "aliases": [ "sheet", "tray", "side-panel" ], "variants": [], "states": [ "closed", "open" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-drawer" ] }, { "name": "toast", "summary": "A short confirmation that disappears on its own.", "use": "After an action completes. Created with ub.toast(text, {tone}).", "aliases": [ "snackbar", "notification" ], "variants": [], "states": [ "entering", "visible", "exiting" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-toast", "ub-toast-region" ] }, { "name": "tabs", "summary": "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.", "aliases": [], "variants": [], "states": [ "selected", "hover", "focus-visible", "disabled" ], "knobs": [], "parts": [ "ub-tablist", "ub-tab" ], "nests": true, "since": "1.0.0", "classes": [ "ub-tab", "ub-tablist", "ub-tabs" ] }, { "name": "accordion", "summary": "Sections that open one at a time, on details name.", "use": "Secondary detail and FAQs that are genuinely optional reading.", "aliases": [], "variants": [], "states": [ "closed", "open", "focus-visible" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-accordion" ] }, { "name": "empty", "summary": "What is missing, what to do, and one button.", "use": "Every list, table, and chart that can be empty. No illustration.", "aliases": [ "empty-state", "zero-state" ], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-empty", "ub-empty-title" ] }, { "name": "skeleton", "summary": "A static placeholder block while content loads. No shimmer.", "use": "Holding layout for content that loads after the page.", "aliases": [], "variants": [], "states": [], "knobs": [ "--ub-skeleton-w", "--ub-skeleton-h" ], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-skeleton" ] }, { "name": "spinner", "summary": "The only infinite animation in the system.", "use": "Inside a busy button or region, with role=\"status\" and visually hidden text.", "aliases": [], "variants": [ "sm", "md" ], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-spinner" ] }, { "name": "progress", "summary": "Determinate or indeterminate progress, or a meter.", "use": "Uploads, steps of a job, a level against a range.", "aliases": [], "variants": [], "states": [ "determinate", "indeterminate", "complete" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-progress" ] }, { "name": "appbar", "summary": "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.", "aliases": [ "header", "navbar", "topbar" ], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-appbar", "ub-appbar-brand", "ub-appbar-end", "ub-appbar-inner" ] }, { "name": "nav", "summary": "A list of page links.", "use": "Top navigation in an appbar. aria-current=\"page\" marks the current page.", "aliases": [], "variants": [], "states": [ "current page", "hover", "focus-visible" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-nav" ] }, { "name": "sidenav", "summary": "A vertical list of sections or pages.", "use": "App sidebars and long-page indexes.", "aliases": [], "variants": [], "states": [ "current", "hover", "focus-visible" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-sidenav", "ub-sidenav-label" ] }, { "name": "app", "summary": "App shell: appbar on top, sidebar beside main.", "use": "Tool pages. Below 64rem the sidebar stacks above main.", "aliases": [], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-app", "ub-app-main", "ub-app-side" ] }, { "name": "toolbar", "summary": "A row of controls above a table or view.", "use": "Filters, search, and view switches.", "aliases": [], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-toolbar", "ub-toolbar-end" ] }, { "name": "code", "summary": "A code block with a copy button.", "use": "Snippets someone will copy.", "aliases": [], "variants": [], "states": [ "default", "copied" ], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-code", "ub-code-copy" ] }, { "name": "skip", "summary": "Skip link to the main content.", "use": "First focusable element on every page.", "aliases": [], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-skip" ] }, { "name": "num", "summary": "Right-aligned tabular figure.", "use": "Number cells and inline figures.", "aliases": [], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-num" ] }, { "name": "nowrap", "summary": "Keeps a value on one line.", "use": "", "aliases": [], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-nowrap" ] }, { "name": "sr-only", "summary": "Visually hidden, still read by screen readers.", "use": "", "aliases": [ "visually-hidden" ], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-sr-only" ] }, { "name": "muted", "summary": "Secondary text color.", "use": "Captions and metadata. Never on body text.", "aliases": [], "variants": [], "states": [], "knobs": [], "parts": [], "nests": true, "since": "1.0.0", "classes": [ "ub-muted" ] } ] }