API index

Accordion

Accordion – Long content in sections behind headers the user opens one or several at a time (also called collapsible sections or a disclosure). Reach for it where a reader needs a few of many sections, such as settings, a runbook or a report.

Used on CommandPalette and Accordion.

AccordionItem

Accordion – One section of an Accordion: its header and the content it opens.

Used on Accordion.

Alert

Alert – A message that stays in the page until its matter is settled (also called a banner or callout). Reach for it when the reader must notice something here: a failed import, an approval waiting, a form that did not save.

Used on Scenarios, Splitter, Textarea, Slider, FileInput, DateTimePicker, Alert and Stepper.

AngleGlyph

The chevron that expands and collapses a branch. Drawn pointing right; rotate it by 90 degrees for an open branch.

function AngleGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element;

Used on CommandPalette.

Badge

Badge – A small word or number at the edge of something else: a status, a count (also called a label or chip). Reach for it to mark the state of a row, or how many items wait behind a button.

Used on Scenarios, Theming, Stack and Grid, Card, Splitter, Typography, Slider, Switch, MultiSelect, ProgressBar, Toast, Menu, Drawer, Tabs, Accordion and Badge.

Breadcrumb

Breadcrumb – Shows where the current page sits in a hierarchy and leads back up to any level above it (also called a trail or path). Where the trail runs out of room, its middle levels fold into a menu.

Used on Scenarios and Breadcrumb.

Button

Button – Starts one action when pressed: save, send, deploy, delete. Its variant says how much weight the action carries beside its neighbours, and while the action runs it shows that it is busy and cannot be pressed twice.

Used on Scenarios, Installation, UmrissProvider, Theming, Sizes, Language, Stack and Grid, Divider, Card, Splitter, VisuallyHidden, Button, IconButton, ButtonGroup, Input, FormField, Textarea, FileInput, Combobox, Spinner, ProgressBar, Skeleton, Alert, Toast, EmptyState, Tooltip, Popover, Menu, Modal, Drawer, ConfirmDialog, CommandPalette, Breadcrumb, Accordion, Stepper, TreeView, Benchmark, Badge and Tag.

ButtonGroup

ButtonGroup – Joins buttons that act on the same thing into one control. Its companion SplitButton runs one main action and keeps the rarer variants in a menu beside it (also called a dropdown or menu button).

Used on Sizes, IconButton and ButtonGroup.

CalendarGlyph

A calendar leaf: a sheet with its header and two rings. With range, a bar across the sheet stands for the span a range picker chooses.

function CalendarGlyph({ ref, size, range, ...rest }: GlyphProps & {
    range?: boolean;
}): import("react").JSX.Element;

Card

Card – A surface that holds one block of a screen together: a head with its title and actions, and a body (also called a panel or tile). Reach for it for each block of a dashboard or a detail view.

Used on Scenarios, UmrissProvider, Theming, Sizes, Stack and Grid, Card, Splitter, Typography, Button, NumberInput, Slider, Switch, SegmentedControl, FileInput, Combobox, Spinner, ProgressBar, EmptyState, CommandPalette, Breadcrumb, Tabs, Accordion, Stepper and Stat.

CardBody

Card – The content of a Card; the part that folds away in a collapsible card. flush removes the padding for a table or a log.

Used on Scenarios, UmrissProvider, Theming, Sizes, Stack and Grid, Card, Typography, Button, NumberInput, Slider, Switch, SegmentedControl, FileInput, Combobox, Spinner, ProgressBar, EmptyState, Breadcrumb, Tabs, Accordion, Stepper and Stat.

CardHeader

Card – The head of a Card: title, an optional eyebrow and actions on the right. In a collapsible card it carries the fold key.

Used on Scenarios, UmrissProvider, Theming, Sizes, Card, Button, NumberInput, Slider, Switch, FileInput, Combobox, Spinner, ProgressBar, EmptyState, Tabs, Accordion, Stepper and Stat.

Checkbox

Checkbox – A yes or no that counts when the form is saved (tick box). It also shows the mixed state of a parent whose children are partly checked.

Used on Scenarios, Theming, Sizes, ButtonGroup, FormField, Checkbox, Popover, Drawer and CommandPalette.

ClockGlyph

A clock face at a quarter past - the time pickers' character.

function ClockGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element;

Combobox

Combobox – One choice from a long list, found by typing (autocomplete, typeahead, searchable select): a driver, a service, an account. The list filters along while the value stays exactly one.

Used on Scenarios, Language, Combobox, Popover and CommandPalette.

CommandPalette

CommandPalette – A search field above the page that finds commands and places as you type (also called a command menu or quick switcher). Reach for it when an application has more actions and pages than any menu can show.

Used on CommandPalette.

ConfirmDialog

ConfirmDialog – A small modal window with one question and two buttons, for the moment before something that cannot be undone (also called a confirmation). Reach for it before deleting, rejecting or closing for good.

Used on Scenarios, Modal and ConfirmDialog.

ContextMenu

ContextMenu – A menu that opens at a point, for a right-click on something that is not a button: a row, a canvas, a bar in a schedule (also called a right-click menu). The entries and the keyboard are those of the menu.

Used on ContextMenu.

ControlSizeProvider

Sizes – Sets the size of the controls inside it - every control with size takes it unless it says its own. A popover, dialog or tooltip opened from inside starts without it.

Used on Sizes and SegmentedControl.

CrossGlyph

The cross that clears a field, removes a tag or a chip, and closes a dialog, a toast or an alert - one drawing at the size of its place.

function CrossGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element;

Used on IconButton.

DatePicker

DatePicker – One day, picked in a calendar (date field): a delivery date, a due date. Weeks begin on Monday.

Used on Scenarios, UmrissProvider, Sizes, Language, FormField and DatePicker.

DateRangePicker

DateRangePicker – A span of days, from one day to another (date range): leave, a sprint, a reporting period. Two months side by side, presets for the usual spans, and the days counted while the pointer moves.

Used on Sizes and DateRangePicker.

DateTimePicker

DateTimePicker – One moment, day and time of day in one field (date-time field): when an incident began, when an alert fired.

Used on Scenarios and DateTimePicker.

DateTimeRangePicker

DateTimeRangePicker – A span with a time at each end (date-time range): a planned downtime, a release freeze, the minutes an objective was breached. The footer shows the duration while it is set.

Used on Sizes and DateTimeRangePicker.

Divider

Divider – A line between two groups of content, across or upright, that may name the part after it (also called a separator or rule).

Used on Stack and Grid, Divider, Switch, ProgressBar and CommandPalette.

Drawer

Drawer – A modal window that slides in from the left or right edge of the screen (also called a side sheet or side panel). Reach for it for the detail of something picked from a list, while the list stays in sight behind it.

Used on Scenarios, Modal, Drawer and CommandPalette.

EmptyState

EmptyState – What stands where a list or panel has nothing to show: what is missing, why, and the way forward (also called a blank slate). Reach for it for a first use, a filter that found nothing, or a queue that is clear.

Used on Card, EmptyState, Tabs and Tag.

FileInput

FileInput – Choose files from the system's dialog or drop them on the zone (file picker, upload field). The chosen files are listed with their size and can be removed one by one.

Used on Sizes and FileInput.

FormField

FormField – The frame around a field: its label, a hint below it and the error that replaces the hint. Wrap every field in one, so the question, the help and the problem are read out together.

Used on Scenarios, UmrissProvider, Sizes, Language, Button, Input, FormField, Textarea, NumberInput, Slider, Checkbox, Switch, RadioGroup, SegmentedControl, FileInput, Select, Combobox, MultiSelect, DatePicker, DateTimePicker, DateRangePicker, DateTimeRangePicker, Alert, Toast, Modal, Breadcrumb, Accordion and TreeView.

FormFieldBoundary

Resets the FormField context. For the innards of panels (search field, option checkboxes) that are rendered through a portal inside a FormField: without a boundary they inherit its field id - a click on an option label then activates the field's trigger through htmlFor and closes the panel again immediately.

function FormFieldBoundary({ children }: {
    children: ReactNode;
}): import("react").JSX.Element;

Grid

Stack and Grid – Children in a grid: a fixed number of columns, a list of column widths, or as many columns as fit at minItemWidth.

Used on Scenarios, Theming, Sizes, Language, Stack and Grid, Card, Splitter, Typography, Input, FormField, Textarea, NumberInput, Slider, Checkbox, Switch, RadioGroup, FileInput, Select, Combobox, MultiSelect, DatePicker, DateTimePicker, DateRangePicker, DateTimeRangePicker, Modal, Drawer, CommandPalette, Breadcrumb, Tabs, TreeView, Stat and Meter.

GridGlyph

The grid laid over an area. Two by two lines; the frame is missing on purpose, otherwise it would be a window.

function GridGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element;

Used on CommandPalette.

GripGlyph

The grip a drag is taken by: two grooves. Dots are fill, and point 4 of the specification draws with the stroke.

function GripGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element;

Heading

Typography – A heading whose level and size are independent: a small heading can still be the second level of the page.

Used on Scenarios, Stack and Grid, Typography and Breadcrumb.

IconButton

IconButton – A square button that shows only an icon (also called an icon-only button): refresh, export, close, the actions of a row. Reach for it where the icon is known well enough to stand alone; its name is required and shows as a tooltip.

Used on Button, IconButton and Menu.

Input

Input – A single line of text (text field, text box): names, references, addresses, search terms. Reach for it whenever the answer is short free text; for numbers take a NumberInput.

Used on Sizes, Button, Input, FormField, Alert, Toast, Modal, CommandPalette and Accordion.

LanguageProvider

Sets formatting and wording for the subtree below. Used by the root provider, and usable directly for a section as well.

function LanguageProvider({ formats, wording, children }: LanguageProviderProps): import("react").JSX.Element;

Used on Language.

Link

Typography – A link in the size of its text; external opens it in a new tab with the protective attributes set.

Used on Scenarios, Theming, Typography and Menu.

MeasureGlyph

Measuring: a line with two end marks. Not a ruler with a scale: the teeth would be a grey stripe at ten nominal units.

function MeasureGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element;

Menu

Menu – A list of actions that opens under a button (also called a dropdown menu). Reach for it when a place has more actions than room for buttons, or for the actions of each row in a list.

Used on Scenarios, UmrissProvider, IconButton, Popover, Menu and CommandPalette.

MenuItem

Menu – An entry of a Menu or a ContextMenu. It runs onSelect and closes the menu.

Used on Scenarios, UmrissProvider, IconButton, ButtonGroup, Menu and ContextMenu.

MenuSeparator

Fine dividing line between groups of menu entries.

function MenuSeparator({ ref, className, ...rest }: HTMLAttributes<HTMLDivElement> & RefProp<HTMLDivElement>): import("react").JSX.Element;

Used on Scenarios, IconButton, ButtonGroup, Menu and ContextMenu.

Meter

Meter – A bar that shows a measured share, such as capacity booked or budget used, coloured by your verdict on it (also called a gauge bar or level indicator). Reach for it in lists and tables where a percentage alone is hard to compare.

Used on Scenarios, Drawer and Meter.

MinusGlyph

The minus of NumberInput's step buttons.

function MinusGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element;

Used on IconButton.

Modal

Modal – A window above the page that holds the focus until it is answered or closed (also called a dialog). Reach for it for a short task that interrupts the page: create an item, edit its settings, read a policy.

Used on Scenarios, Sizes, Toast, Modal, Drawer and CommandPalette.

ModalBody

The content of a Modal or Drawer - the part that scrolls while head and foot stand fast.

function ModalBody({ ref, className, children, ...rest }: HTMLAttributes<HTMLDivElement> & RefProp<HTMLDivElement>): import("react").JSX.Element;

Used on Scenarios, Sizes, Toast, Modal and Drawer.

ModalFooter

The foot of a Modal or Drawer, for its buttons; they stand at the end.

function ModalFooter({ ref, className, children, ...rest }: HTMLAttributes<HTMLDivElement> & RefProp<HTMLDivElement>): import("react").JSX.Element;

Used on Scenarios, Sizes, Toast, Modal and Drawer.

ModalHeader

Modal – The head of a Modal or Drawer: its title, which names the dialog for a screen reader, an optional sentence below it, and the close cross.

Used on Scenarios, Sizes, Toast, Modal and Drawer.

MultiSelect

MultiSelect – Several values from a list (multi-select, tag picker): a project team, services to filter by. The chosen ones stand as chips in the field, with a view in the panel that shows only them.

Used on Scenarios, Sizes, MultiSelect, Popover and CommandPalette.

NumberInput

NumberInput – A number typed exactly (numeric field, spin box): an amount, a weight, hours. It shows the unit inside the field, keeps the value in its range and steps with the arrow keys.

Used on Scenarios, Sizes, Language, FormField, NumberInput, Slider, Switch, Modal, CommandPalette and Accordion.

PlusGlyph

The plus of NumberInput's step buttons.

function PlusGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element;

Used on IconButton.

Popover

Popover – A surface that hangs from a trigger and closes on Escape, an outside click or scrolling (also called a popup, flyout or dropdown panel). Reach for it for a small panel of your own: a filter, a detail, a short form.

Used on Popover and CommandPalette.

ProgressBar

ProgressBar – A bar that shows how far a job has come, or that it runs while nobody knows how far (also called a progress indicator). Reach for it for imports, uploads and anything else that counts towards an end.

Used on Scenarios, ProgressBar and Stepper.

RadioGroup

RadioGroup – One choice out of a few that all stay in view (radio buttons, option group). Each option may carry a sentence that explains it.

Used on Scenarios, Sizes and RadioGroup.

SegmentedControl

SegmentedControl – One choice out of a few short possibilities, drawn as one control with a segment for each (segmented button, button toggle): a sunken track, the choice lifted out of it. As tall as a select, so it stands in a row of fields too.

Used on Sizes and SegmentedControl.

Select

Select – One choice from a short, known list (dropdown). Under a mouse and the keys it opens the Combobox's list; under a finger the system's picker, a wheel on the phone.

Used on Scenarios, Sizes, FormField, SegmentedControl, Select, Toast, Popover, Modal, CommandPalette, Accordion and Tag.

Skeleton

Skeleton – Grey shapes that stand where content is still loading and hold the height it will have (also called a placeholder or shimmer). Reach for it when you know the layout of what is coming, so nothing jumps when it arrives.

Used on Skeleton and Tabs.

Slider

Slider – A value set roughly between two bounds (range slider): a share of traffic, an alert threshold, weekly hours. The position on the track says as much as the figure.

Used on Scenarios, Sizes, Slider, CommandPalette, Breadcrumb and Accordion.

Sparkline

Sparkline – A small line of a history, at the height of a line of text, without axes or labels (also called a micro chart). Reach for it beside a value or in a table cell, where the shape of the last hours tells more than the figure alone.

Used on Splitter and Sparkline.

Spinner

Spinner – A turning circle that says something is running, without saying how far (also called a loading indicator). Reach for it for short waits whose length nobody knows, beside a word that says what runs.

Used on Spinner.

SplitButton

ButtonGroup – A main action with a menu of its variants: the button on the left runs onClick, the arrow on the right opens menu. The ref goes to the main button.

Used on ButtonGroup.

Splitter

Splitter – Two panes with a draggable line between them (also called a split view or resizable panes). Use it when the user needs both at once and decides how much of each: a list beside its detail, a chart above its alerts.

Used on Splitter and CommandPalette.

Stack

Stack and Grid – Children below or beside one another, spaced by a step of the spacing scale.

Used on Scenarios, UmrissProvider, Theming, Sizes, Language, Stack and Grid, Divider, Card, Splitter, Typography, VisuallyHidden, Button, IconButton, ButtonGroup, Input, FormField, Textarea, NumberInput, Slider, Checkbox, Switch, SegmentedControl, FileInput, Select, Combobox, MultiSelect, DatePicker, DateTimePicker, DateRangePicker, DateTimeRangePicker, Spinner, ProgressBar, Skeleton, Alert, Toast, EmptyState, Tooltip, Popover, Menu, ContextMenu, Modal, Drawer, ConfirmDialog, CommandPalette, Breadcrumb, Tabs, Accordion, Stepper, TreeView, Badge, Tag, Stat, Meter and Sparkline.

Stat

Stat – A single figure with its verdict: read against limits, with the history before it, the deviation from its target and how fresh it is (also called a KPI tile or metric card). Reach for it for the few numbers a screen is watched for.

Used on Scenarios, Language, Splitter, Drawer and Stat.

Stepper

Stepper – Shows how far a procedure has come: which steps are done, which one is being worked on, which lie ahead and which failed (also called a progress tracker). Reach for it for approvals, rollouts and closing routines.

Used on Scenarios, FileInput, Tabs and Stepper.

Switch

Switch – On or off, taking effect at once (toggle): paging at night, autoscaling, a feature for one service. A screen reader announces it as a switch, on or off.

Used on Scenarios, Theming, Sizes, Switch, Toast, Drawer, CommandPalette and Accordion.

Tab

Tabs – One tab of a TabList; choosing it shows the TabPanel of the same value.

Used on Scenarios, Card, Typography, VisuallyHidden, Button, IconButton, ButtonGroup, Input, Textarea, RadioGroup, SegmentedControl, Select, Alert, Toast, Tooltip, Menu, Modal, Drawer, ConfirmDialog, Breadcrumb, Tabs, Accordion and Tag.

TabList

The row of Tabs inside Tabs. The arrow keys, Home and End move between the tabs and choose them.

function TabList({ ref, className, children, onKeyDown, ...rest }: HTMLAttributes<HTMLDivElement> & RefProp<HTMLDivElement>): import("react").JSX.Element;

Used on Scenarios and Tabs.

TabPanel

Tabs – The content of one tab. Only the panel whose value is chosen stands in the document.

Used on Scenarios and Tabs.

Tabs

Tabs – Several views of one thing in one place, exactly one of them visible (also called a tab bar). Reach for tabs when the views are alternatives the user switches between, not content to compare side by side.

Used on Scenarios, CommandPalette and Tabs.

Tag

Tag – A short label on content that the user can remove where you allow it (also called a chip). Reach for it for active filters, chosen values and assignments.

Used on Scenarios, Stack and Grid, EmptyState and Tag.

TagGroup

Tag – A list of Tags with one tab stop: the arrow keys move between them, and the focus stays in the group when one is removed.

Used on Scenarios, EmptyState and Tag.

Text

Typography – Body text from the token set; as chooses the element, independent of the size.

Used on Scenarios, UmrissProvider, Theming, Sizes, Language, Stack and Grid, Divider, Card, Splitter, Typography, VisuallyHidden, Button, IconButton, ButtonGroup, Input, FormField, Textarea, NumberInput, Slider, Switch, SegmentedControl, FileInput, Select, Combobox, MultiSelect, DatePicker, DateTimePicker, DateRangePicker, DateTimeRangePicker, Spinner, ProgressBar, Skeleton, Toast, EmptyState, Tooltip, Popover, Menu, ContextMenu, Modal, Drawer, ConfirmDialog, CommandPalette, Breadcrumb, Tabs, Accordion, Stepper, TreeView, Benchmark, Badge, Tag, Stat, Meter and Sparkline.

Textarea

Textarea – Text over several lines (multi-line text field): a comment, a summary, a note to the driver. It can grow with its text and count the characters left.

Used on Scenarios, Sizes, Textarea and CommandPalette.

ToastProvider

Holds the toasts and draws them; useToast works only below it. Put it once at the root of the application: a second one draws a second deck at the same place, and the two lie on each other. Duration, position and limit come from UmrissProvider's toast where one stands around it.

function ToastProvider({ children, held }: ToastProviderProps): import("react").JSX.Element;

Used on Scenarios, UmrissProvider and Toast.

Tooltip

Tooltip – A sentence of explanation that appears while the pointer rests on an element or the keyboard focus is on it (also called a hint). Reach for it to explain an abbreviation or a control; an icon button names itself as an IconButton.

Used on Scenarios, IconButton, Toast, Tooltip, Popover and CommandPalette.

TreeSearch

TreeView – The search field of a tree: an Input that writes into the tree's search text, so that the TreeView filters on it.

Used on TreeView.

TreeView

TreeView – A hierarchy the user expands, walks with the keys and optionally ticks (also called a tree or outline). Reach for it for folders, teams and cost-centre structures; large trees stay quick because only the visible rows are drawn.

Used on Scenarios, TreeView and Benchmark.

UmrissProvider

UmrissProvider – Sets once, at the root, what an application shares: the density of its tables, where overlays open, how long toasts stay and where they stand, and the language. It is optional; every component works the same without it.

Used on UmrissProvider and Toast.

VisuallyHidden

VisuallyHidden – Text a screen reader announces but the eye does not see (also called screen-reader-only or sr-only). Reach for it when a visible label is clear from its surroundings but not on its own, and for a skip link.

Used on VisuallyHidden.

useCommandPaletteShortcut

Binds Cmd+K/Ctrl+K and "/" to the opening of a palette. onOpen may be new on every render: the hook remembers the current version rather than unsubscribing and resubscribing the listener each time.

function useCommandPaletteShortcut(onOpen: () => void): void;

Used on CommandPalette.

useDensity

The configured density; without a provider, "comfortable".

const useDensity: () => Density;

useDensityFor

A component's density: its own value, else the density the provider explicitly configured, else its own default. "comfortable" means "regular" here. A compact set of tokens does not exist.

function useDensityFor(own: "regular" | "compact" | undefined, fallback: "regular" | "compact"): "regular" | "compact";

useFormats

Only the formatting.

const useFormats: () => Formats;

Used on Language, NumberInput, Slider, DatePicker, DateTimePicker, DateRangePicker and DateTimeRangePicker.

useFormField

Used by Input, Select and Checkbox to wire up id and aria automatically.

function useFormField(): FormFieldContextValue | null;

Used on FormField.

useFreshness

Judges a value's as-of time continuously and causes a redraw when it changes state. The caller gives the ages; there is deliberately no default, because "stale" on a live latency panel means something other than "stale" on a monthly budget overview.

function useFreshness(asOf: Date | number | null | undefined, ages: FreshnessAges): FreshnessReading;

Used on Stat.

useLanguage

Formatting and wording together; without a provider, the defaults.

const useLanguage: () => Language;

usePortalTarget

Resolves the configured portal target. null means expressly "no statement" and not "to the body": the callers have rules of their own that take precedence - the popover seam portals into the nearest <dialog> ancestor, because a portal at the body does not reach the top layer. That rule beats the setting; otherwise a panel inside a modal would be invisible.

function usePortalTarget(): () => HTMLElement | null;

useToast

Access to toast(), update() and dismiss(); requires a ToastProvider.

function useToast(): ToastContextValue;

Used on Scenarios, UmrissProvider and Toast.

useToastConfig

The setting for toasts; without a provider, empty.

const useToastConfig: () => ToastConfig;

useTree

The state of a tree - which branches are open, which nodes are checked, the active node, the anchor and the search text - and the gestures on it. Each of these can be controlled from outside, so that a tree can be restored from a link.

• roots – The top-level nodes, in your own type.
• options – How a node is read, and the initial or controlled state with its change handlers.
• Returns The tree to hand to TreeView and TreeSearch.

function useTree<K, S extends Key = string>(roots: readonly K[], options: TreeOptions<K, S>): Tree<K, S>;

Used on Scenarios, TreeView and Benchmark.

useUmriss

The whole configuration; without a provider, the defaults.

const useUmriss: () => UmrissConfig;

useVirtual

Holds the scroll position and the measured heights and derives the window from them. It is measured on the first rendered row rather than taken from the caller's value: row height depends on density, font size and zoom, and a small error adds up over many rows to a scrollbar that lies.

function useVirtual(count: number, options: VirtualOptions): VirtualRows;

Used on Benchmark.

useWording

Only the wording.

const useWording: () => Wording;

Used on Language.

age

The age of an as-of time at the reference time, in milliseconds. Never negative: an as-of time in the future is real - the clocks of source and screen drift apart - and does not mean that a value is about to become true, but that it is true right now. It counts as zero old. null where there is no computable age: without an as-of time there is none.

function age(asOf: Instant, now: Instant): number | null;

Used on Scenarios.

allBranches

Every loaded branch with content. Empty ones stay out because expanding them showed nothing; unloaded ones stay out because one click would otherwise trigger a thousand requests (ADR-0005).

function allBranches<K, S extends Key = string>(roots: readonly K[], reader: NodeReader<K, S>): S[];

announce

The library's one voice: says text in a polite live region, for what happened without a visible change in the place a reader is at - a copy made, a count after a filter. Use it instead of a region of your own: there is one region, so two announcements never speak over each other. Says text once announcements have rested for ANNOUNCE_REST; a later call within the rest replaces an earlier one. at is the element that speaks. Inside a modal <dialog> everything else is inert and a region there is silent, so the region is the dialog's own - the portal target's rule, without the provider's setting: that decides where a surface is laid out, and a region is laid out nowhere.

function announce(text: string, at?: Element | null): void;

Used on VisuallyHidden and CommandPalette.

assess

What the value is, given the limit set. A pure function of the two. A missing or non-finite value yields unknown - and nothing else: nobody knows the deviation of a value nobody has. Where several bounds are violated the most severe wins, and among equally severe ones the one with the greatest excess. A warning must not hide an alarm, even where the value lies further beyond the warning. No hysteresis: that would need the previous state, and a function of a single value has none.

function assess(value: number | null | undefined, set?: LimitSet): Assessment;

cadence

The cadence at which a display has to re-judge itself, in milliseconds - derived from the ages, not from a fixed second. A tile that goes stale after five minutes must not look sixty times a minute. A tenth of the smaller age: the change then appears late by at most ten per cent of that age. Clamped to at most once a second and at least once a minute. Where no age ever takes effect - infinite, not a number - or where both took effect at once, the state no longer changes by itself; the slowest cadence is then enough.

function cadence(ages: FreshnessAges): number;

duplicateKey

The first key that occurs twice, otherwise null. Two nodes with the same key break the cascade and the active node silently - useTree reports that during development.

function duplicateKey<K, S extends Key = string>(roots: readonly K[], reader: NodeReader<K, S>): S | null;

freshness

The freshness of a value: its as-of time, measured against a reference time, placed against the two ages. A missing as-of time yields lost, and that is decided rather than computed: stale presupposes that we know the age. Where we do not know it, nothing covers the value, and that is the same statement as a broken connection. The check therefore stands before any arithmetic and not inside it. What the value means - good, critical, whatever - is not at issue here and is not touched by this function.

function freshness(asOf: Instant, now: Instant, ages: FreshnessAges): Freshness;

Used on Scenarios and Stat.

mergeLanguage

Builds a complete instance from the default and a partial value.

function mergeLanguage(options: LanguageOptions | undefined): Language;

rangeDays

The number of days in the range, both ends included. It is calculated on day boundaries and rounded, so that the 23 and 25 hour days of the daylight saving change do not shift the result.

const rangeDays: (from: Date, to: Date) => number;

Used on DateRangePicker.

scrollForRow

The scroll position at which a row is visible - or null where it already is. This is the arithmetic the keyboard handling hangs on: without it the focus moves into a row that is not rendered. The sticky header counts against the upper edge: a row standing exactly at scrollTop lies behind it.

function scrollForRow(index: number, { rowHeight, scrollTop, viewportHeight, headerHeight }: RowPlacement): number | null;

separatorsOf

The separators a set of formats writes, read off the formats themselves. A field that formats a number must be able to read its own output back, and an application may have replaced number with anything. So the separators are measured: one number with one decimal place, digits struck out, and what remains is the notation's own punctuation.

function separatorsOf(formats: Formats): Separators;

treeModel

The visible nodes in reading order. While a search runs: a node survives if it matches itself or a descendant matches - so a match always appears together with the path that leads to it. A branch that stands there only because of its descendant is treated as if it were open, without the expanded state being written: if the search text falls away, the tree stands exactly as it did before. A branch that matches itself brings its whole subtree along, but only visibly so if it is actually expanded.

function treeModel<K, S extends Key = string>(roots: readonly K[], reader: NodeReader<K, S>, snapshot: TreeSnapshot<S>): readonly FlatteningEntry<K, S>[];

verdictWeight

How heavily a verdict weighs - for sorting and comparing, as when a matrix brings the worst tile to the top. It stands here so that the order is not reinvented at every call site.

function verdictWeight(verdict: Verdict): number;

visibleWindow

The window for the current scroll position. before + rendered + after always adds up to the full height of all rows. That is the promise the scrollbar hangs on: it must not jump while scrolling because the rendered set changed.

function visibleWindow({ count, rowHeight, scrollTop, viewportHeight, overscan, }: WindowInput): RowWindow;

DEFAULT_FORMATS

The instance shipped by default: English notation on a 24-hour clock (ADR-0024). German is GERMAN_FORMATS in @umriss-ui/core/wording/de.

Every entry, with its value, stands in the table Formats on the Language page.

const DEFAULT_FORMATS: Formats;

DEFAULT_LANGUAGE

English formats and English wording - what every component uses without a LanguageProvider.

const DEFAULT_LANGUAGE: Language;

DEFAULT_PRESETS

The same time spans with the preset labels.

const DEFAULT_PRESETS: RangePreset[];

DEFAULT_SEPARATORS

The separators of the default notation.

const DEFAULT_SEPARATORS: Separators;

DEFAULT_WORDING

The instance shipped by default. English; German is GERMAN_WORDING in @umriss-ui/core/wording/de (ADR-0019).

Every entry, with its value, stands in the table Wording on the Language page.

const DEFAULT_WORDING: Wording;

AccordionItemProps

Its table stands on Accordion.

AccordionProps

Its table stands on Accordion.

AlertProps

Its table stands on Alert.

BadgeProps

Its table stands on Badge.

type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger";

Used on Badge.

BreadcrumbEntry

Its table stands on Breadcrumb.

BreadcrumbProps

Its table stands on Breadcrumb.

ButtonGroupProps

Its table stands on ButtonGroup.

ButtonProps

Its table stands on Button.

CardBodyProps

Its table stands on Card.

CardHeaderProps

Its table stands on Card.

CardProps

Its table stands on Card.

CheckboxProps

Its table stands on Checkbox.

ComboboxOption

Its table stands on Combobox.

Used on Combobox.

ComboboxProps

Its table stands on Combobox.

CommandPaletteItem

Its table stands on CommandPalette.

Used on CommandPalette.

CommandPaletteProps

Its table stands on CommandPalette.

ConfirmDialogProps

Its table stands on ConfirmDialog.

ContextMenuProps

Its table stands on ContextMenu.

type ControlSize = "sm" | "md";

Used on Sizes and SegmentedControl.

ControlSizeProviderProps

Its table stands on Sizes.

DatePickerProps

Its table stands on DatePicker.

Used on Sizes, DateRangePicker and DateTimeRangePicker.

DateRangePickerProps

Its table stands on DateRangePicker.

DateTimePickerProps

Its table stands on DateTimePicker.

DateTimeRangePickerProps

Its table stands on DateTimeRangePicker.

DividerProps

Its table stands on Divider.

DrawerProps

Its table stands on Drawer.

EmptyStateProps

Its table stands on EmptyState.

FileInputProps

Its table stands on FileInput.

FormFieldProps

Its table stands on FormField.

type Freshness = "fresh" | "stale" | "lost";

Used on Stat.

Used on Scenarios and Stat.

GridProps

Its table stands on Stack and Grid.

HeadingProps

Its table stands on Typography.

IconButtonProps

Its table stands on IconButton.

InputProps

Its table stands on Input.

Used on Toast.

LanguageOptions

Its table stands on Language.

Used on Language.

Used on Scenarios, Language, Drawer and Stat.

LinkProps

Its table stands on Typography.

MenuItemProps

Its table stands on Menu.

MenuProps

Its table stands on Menu.

MeterProps

Its table stands on Meter.

type MeterTone = "neutral" | "accent" | "success" | "warning" | "danger";

Used on Meter.

ModalHeaderProps

Its table stands on Modal.

ModalProps

Its table stands on Modal.

type ModalSize = "sm" | "md" | "lg";

Used on Modal.

MultiSelectOption

Its table stands on MultiSelect.

Used on MultiSelect.

MultiSelectProps

Its table stands on MultiSelect.

Used on Scenarios, TreeView and Benchmark.

NumberInputProps

Its table stands on NumberInput.

PopoverProps

Its table stands on Popover.

type PortalTarget = HTMLElement | (() => HTMLElement | null) | null;

Used on UmrissProvider.

ProgressBarProps

Its table stands on ProgressBar.

RadioGroupProps

Its table stands on RadioGroup.

RadioOption

Its table stands on RadioGroup.

SegmentedControlProps

Its table stands on SegmentedControl.

SegmentedOption

Its table stands on SegmentedControl.

SelectProps

Its table stands on Select.

SkeletonProps

Its table stands on Skeleton.

SliderProps

Its table stands on Slider.

SparklineProps

Its table stands on Sparkline.

SpinnerProps

Its table stands on Spinner.

SplitButtonProps

Its table stands on ButtonGroup.

SplitterProps

Its table stands on Splitter.

StackProps

Its table stands on Stack and Grid.

StatProps

Its table stands on Stat.

StepperProps

Its table stands on Stepper.

StepperStep

Its table stands on Stepper.

SwitchProps

Its table stands on Switch.

TabPanelProps

Its table stands on Tabs.

TabProps

Its table stands on Tabs.

TabsProps

Its table stands on Tabs.

TagGroupProps

Its table stands on Tag.

TagProps

Its table stands on Tag.

TextareaProps

Its table stands on Textarea.

TextProps

Its table stands on Typography.

ToastAction

Its table stands on Toast.

type ToastCloseReason = "timeout" | "dismiss" | "action";

Used on Toast.

ToastConfig

Its table stands on UmrissProvider.

Used on UmrissProvider and Toast.

ToastOptions

Its table stands on Toast.

type ToastPosition = "top-start" | "top-center" | "top-end" | "bottom-start" | "bottom-center" | "bottom-end";

Used on Toast.

TooltipProps

Its table stands on Tooltip.

TreeSearchProps

Its table stands on TreeView.

TreeViewProps

Its table stands on TreeView.

UmrissProviderProps

Its table stands on UmrissProvider.

Used on UmrissProvider.

VisuallyHiddenProps

Its table stands on VisuallyHidden.

Used on Language.

GERMAN_FORMATS

The German notation: 17.03.2026, 09:05, 1.204,5, "vor 3 Minuten" - and German collation, which files Ä with A. The clock is 24-hour here as it is in the default; that never was a question of language.

Every entry, with its value, stands in the table Formats on the Language page.

const GERMAN_FORMATS: Formats;

Used on UmrissProvider and Language.

GERMAN_WORDING

The German instance. Complete, because it is typed Wording.

Every entry, with its value, stands in the table Wording on the Language page.

const GERMAN_WORDING: Wording;

Used on UmrissProvider and Language.

FormFieldContextValue

ToastContextValue

Instant

What may come in as an as-of time or a reference time.

type Instant = Date | number | null | undefined;