# API index > Package `@umriss-ui/core`, version 0.40.0. Demo page: . Every page in one line: [llms.txt](https://romanhaendler.github.io/umriss-ui/core/llms.txt); every page in full: [llms-full.txt](https://romanhaendler.github.io/umriss-ui/core/llms-full.txt). Everything `@umriss-ui/core` exports, with its signature. A component's props stand on its own page. Demo page: https://romanhaendler.github.io/umriss-ui/core/api/ ## Components ### `Accordion` [Accordion](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/commandpalette/) and [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/). ### `AccordionItem` [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/) – One section of an `Accordion`: its header and the content it opens. Used on [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/). ### `Alert` [Alert](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Splitter](https://romanhaendler.github.io/umriss-ui/core/splitter/), [Textarea](https://romanhaendler.github.io/umriss-ui/core/textarea/), [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/), [FileInput](https://romanhaendler.github.io/umriss-ui/core/fileinput/), [DateTimePicker](https://romanhaendler.github.io/umriss-ui/core/datetimepicker/), [Alert](https://romanhaendler.github.io/umriss-ui/core/alert/) and [Stepper](https://romanhaendler.github.io/umriss-ui/core/stepper/). ### `AngleGlyph` The chevron that expands and collapses a branch. Drawn pointing right; rotate it by 90 degrees for an open branch. ```ts function AngleGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element; ``` Used on [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `Badge` [Badge](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Theming](https://romanhaendler.github.io/umriss-ui/core/theming/), [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/), [Card](https://romanhaendler.github.io/umriss-ui/core/card/), [Splitter](https://romanhaendler.github.io/umriss-ui/core/splitter/), [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/), [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/), [Switch](https://romanhaendler.github.io/umriss-ui/core/switch/), [MultiSelect](https://romanhaendler.github.io/umriss-ui/core/multiselect/), [ProgressBar](https://romanhaendler.github.io/umriss-ui/core/progressbar/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/), [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/), [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/) and [Badge](https://romanhaendler.github.io/umriss-ui/core/badge/). ### `Breadcrumb` [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/) and [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/). ### `Button` [Button](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Installation](https://romanhaendler.github.io/umriss-ui/core/installation/), [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/), [Theming](https://romanhaendler.github.io/umriss-ui/core/theming/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Language](https://romanhaendler.github.io/umriss-ui/core/language/), [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/), [Divider](https://romanhaendler.github.io/umriss-ui/core/divider/), [Card](https://romanhaendler.github.io/umriss-ui/core/card/), [Splitter](https://romanhaendler.github.io/umriss-ui/core/splitter/), [VisuallyHidden](https://romanhaendler.github.io/umriss-ui/core/visuallyhidden/), [Button](https://romanhaendler.github.io/umriss-ui/core/button/), [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/), [ButtonGroup](https://romanhaendler.github.io/umriss-ui/core/buttongroup/), [Input](https://romanhaendler.github.io/umriss-ui/core/input/), [FormField](https://romanhaendler.github.io/umriss-ui/core/formfield/), [Textarea](https://romanhaendler.github.io/umriss-ui/core/textarea/), [FileInput](https://romanhaendler.github.io/umriss-ui/core/fileinput/), [Combobox](https://romanhaendler.github.io/umriss-ui/core/combobox/), [Spinner](https://romanhaendler.github.io/umriss-ui/core/spinner/), [ProgressBar](https://romanhaendler.github.io/umriss-ui/core/progressbar/), [Skeleton](https://romanhaendler.github.io/umriss-ui/core/skeleton/), [Alert](https://romanhaendler.github.io/umriss-ui/core/alert/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [EmptyState](https://romanhaendler.github.io/umriss-ui/core/emptystate/), [Tooltip](https://romanhaendler.github.io/umriss-ui/core/tooltip/), [Popover](https://romanhaendler.github.io/umriss-ui/core/popover/), [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/), [ConfirmDialog](https://romanhaendler.github.io/umriss-ui/core/confirmdialog/), [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/), [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/), [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/), [Stepper](https://romanhaendler.github.io/umriss-ui/core/stepper/), [TreeView](https://romanhaendler.github.io/umriss-ui/core/treeview/), [Benchmark](https://romanhaendler.github.io/umriss-ui/core/benchmark/), [Badge](https://romanhaendler.github.io/umriss-ui/core/badge/) and [Tag](https://romanhaendler.github.io/umriss-ui/core/tag/). ### `ButtonGroup` [ButtonGroup](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/sizes/), [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/) and [ButtonGroup](https://romanhaendler.github.io/umriss-ui/core/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. ```ts function CalendarGlyph({ ref, size, range, ...rest }: GlyphProps & { range?: boolean; }): import("react").JSX.Element; ``` ### `Card` [Card](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/), [Theming](https://romanhaendler.github.io/umriss-ui/core/theming/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/), [Card](https://romanhaendler.github.io/umriss-ui/core/card/), [Splitter](https://romanhaendler.github.io/umriss-ui/core/splitter/), [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/), [Button](https://romanhaendler.github.io/umriss-ui/core/button/), [NumberInput](https://romanhaendler.github.io/umriss-ui/core/numberinput/), [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/), [Switch](https://romanhaendler.github.io/umriss-ui/core/switch/), [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/segmentedcontrol/), [FileInput](https://romanhaendler.github.io/umriss-ui/core/fileinput/), [Combobox](https://romanhaendler.github.io/umriss-ui/core/combobox/), [Spinner](https://romanhaendler.github.io/umriss-ui/core/spinner/), [ProgressBar](https://romanhaendler.github.io/umriss-ui/core/progressbar/), [EmptyState](https://romanhaendler.github.io/umriss-ui/core/emptystate/), [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/), [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/), [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/), [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/), [Stepper](https://romanhaendler.github.io/umriss-ui/core/stepper/) and [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/). ### `CardBody` [Card](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/), [Theming](https://romanhaendler.github.io/umriss-ui/core/theming/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/), [Card](https://romanhaendler.github.io/umriss-ui/core/card/), [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/), [Button](https://romanhaendler.github.io/umriss-ui/core/button/), [NumberInput](https://romanhaendler.github.io/umriss-ui/core/numberinput/), [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/), [Switch](https://romanhaendler.github.io/umriss-ui/core/switch/), [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/segmentedcontrol/), [FileInput](https://romanhaendler.github.io/umriss-ui/core/fileinput/), [Combobox](https://romanhaendler.github.io/umriss-ui/core/combobox/), [Spinner](https://romanhaendler.github.io/umriss-ui/core/spinner/), [ProgressBar](https://romanhaendler.github.io/umriss-ui/core/progressbar/), [EmptyState](https://romanhaendler.github.io/umriss-ui/core/emptystate/), [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/), [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/), [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/), [Stepper](https://romanhaendler.github.io/umriss-ui/core/stepper/) and [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/). ### `CardHeader` [Card](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/), [Theming](https://romanhaendler.github.io/umriss-ui/core/theming/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Card](https://romanhaendler.github.io/umriss-ui/core/card/), [Button](https://romanhaendler.github.io/umriss-ui/core/button/), [NumberInput](https://romanhaendler.github.io/umriss-ui/core/numberinput/), [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/), [Switch](https://romanhaendler.github.io/umriss-ui/core/switch/), [FileInput](https://romanhaendler.github.io/umriss-ui/core/fileinput/), [Combobox](https://romanhaendler.github.io/umriss-ui/core/combobox/), [Spinner](https://romanhaendler.github.io/umriss-ui/core/spinner/), [ProgressBar](https://romanhaendler.github.io/umriss-ui/core/progressbar/), [EmptyState](https://romanhaendler.github.io/umriss-ui/core/emptystate/), [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/), [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/), [Stepper](https://romanhaendler.github.io/umriss-ui/core/stepper/) and [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/). ### `Checkbox` [Checkbox](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Theming](https://romanhaendler.github.io/umriss-ui/core/theming/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [ButtonGroup](https://romanhaendler.github.io/umriss-ui/core/buttongroup/), [FormField](https://romanhaendler.github.io/umriss-ui/core/formfield/), [Checkbox](https://romanhaendler.github.io/umriss-ui/core/checkbox/), [Popover](https://romanhaendler.github.io/umriss-ui/core/popover/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/) and [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `ClockGlyph` A clock face at a quarter past - the time pickers' character. ```ts function ClockGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element; ``` ### `Combobox` [Combobox](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Language](https://romanhaendler.github.io/umriss-ui/core/language/), [Combobox](https://romanhaendler.github.io/umriss-ui/core/combobox/), [Popover](https://romanhaendler.github.io/umriss-ui/core/popover/) and [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `CommandPalette` [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `ConfirmDialog` [ConfirmDialog](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/) and [ConfirmDialog](https://romanhaendler.github.io/umriss-ui/core/confirmdialog/). ### `ContextMenu` [ContextMenu](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/contextmenu/). ### `ControlSizeProvider` [Sizes](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/sizes/) and [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/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. ```ts function CrossGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element; ``` Used on [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/). ### `DatePicker` [DatePicker](https://romanhaendler.github.io/umriss-ui/core/datepicker/) – One day, picked in a calendar (date field): a delivery date, a due date. Weeks begin on Monday. Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Language](https://romanhaendler.github.io/umriss-ui/core/language/), [FormField](https://romanhaendler.github.io/umriss-ui/core/formfield/) and [DatePicker](https://romanhaendler.github.io/umriss-ui/core/datepicker/). ### `DateRangePicker` [DateRangePicker](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/sizes/) and [DateRangePicker](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/). ### `DateTimePicker` [DateTimePicker](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/) and [DateTimePicker](https://romanhaendler.github.io/umriss-ui/core/datetimepicker/). ### `DateTimeRangePicker` [DateTimeRangePicker](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/sizes/) and [DateTimeRangePicker](https://romanhaendler.github.io/umriss-ui/core/datetimerangepicker/). ### `Divider` [Divider](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/), [Divider](https://romanhaendler.github.io/umriss-ui/core/divider/), [Switch](https://romanhaendler.github.io/umriss-ui/core/switch/), [ProgressBar](https://romanhaendler.github.io/umriss-ui/core/progressbar/) and [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `Drawer` [Drawer](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/) and [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `EmptyState` [EmptyState](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/card/), [EmptyState](https://romanhaendler.github.io/umriss-ui/core/emptystate/), [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/) and [Tag](https://romanhaendler.github.io/umriss-ui/core/tag/). ### `FileInput` [FileInput](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/sizes/) and [FileInput](https://romanhaendler.github.io/umriss-ui/core/fileinput/). ### `FormField` [FormField](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Language](https://romanhaendler.github.io/umriss-ui/core/language/), [Button](https://romanhaendler.github.io/umriss-ui/core/button/), [Input](https://romanhaendler.github.io/umriss-ui/core/input/), [FormField](https://romanhaendler.github.io/umriss-ui/core/formfield/), [Textarea](https://romanhaendler.github.io/umriss-ui/core/textarea/), [NumberInput](https://romanhaendler.github.io/umriss-ui/core/numberinput/), [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/), [Checkbox](https://romanhaendler.github.io/umriss-ui/core/checkbox/), [Switch](https://romanhaendler.github.io/umriss-ui/core/switch/), [RadioGroup](https://romanhaendler.github.io/umriss-ui/core/radiogroup/), [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/segmentedcontrol/), [FileInput](https://romanhaendler.github.io/umriss-ui/core/fileinput/), [Select](https://romanhaendler.github.io/umriss-ui/core/select/), [Combobox](https://romanhaendler.github.io/umriss-ui/core/combobox/), [MultiSelect](https://romanhaendler.github.io/umriss-ui/core/multiselect/), [DatePicker](https://romanhaendler.github.io/umriss-ui/core/datepicker/), [DateTimePicker](https://romanhaendler.github.io/umriss-ui/core/datetimepicker/), [DateRangePicker](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/), [DateTimeRangePicker](https://romanhaendler.github.io/umriss-ui/core/datetimerangepicker/), [Alert](https://romanhaendler.github.io/umriss-ui/core/alert/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/), [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/), [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/) and [TreeView](https://romanhaendler.github.io/umriss-ui/core/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. ```ts function FormFieldBoundary({ children }: { children: ReactNode; }): import("react").JSX.Element; ``` ### `Grid` [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Theming](https://romanhaendler.github.io/umriss-ui/core/theming/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Language](https://romanhaendler.github.io/umriss-ui/core/language/), [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/), [Card](https://romanhaendler.github.io/umriss-ui/core/card/), [Splitter](https://romanhaendler.github.io/umriss-ui/core/splitter/), [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/), [Input](https://romanhaendler.github.io/umriss-ui/core/input/), [FormField](https://romanhaendler.github.io/umriss-ui/core/formfield/), [Textarea](https://romanhaendler.github.io/umriss-ui/core/textarea/), [NumberInput](https://romanhaendler.github.io/umriss-ui/core/numberinput/), [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/), [Checkbox](https://romanhaendler.github.io/umriss-ui/core/checkbox/), [Switch](https://romanhaendler.github.io/umriss-ui/core/switch/), [RadioGroup](https://romanhaendler.github.io/umriss-ui/core/radiogroup/), [FileInput](https://romanhaendler.github.io/umriss-ui/core/fileinput/), [Select](https://romanhaendler.github.io/umriss-ui/core/select/), [Combobox](https://romanhaendler.github.io/umriss-ui/core/combobox/), [MultiSelect](https://romanhaendler.github.io/umriss-ui/core/multiselect/), [DatePicker](https://romanhaendler.github.io/umriss-ui/core/datepicker/), [DateTimePicker](https://romanhaendler.github.io/umriss-ui/core/datetimepicker/), [DateRangePicker](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/), [DateTimeRangePicker](https://romanhaendler.github.io/umriss-ui/core/datetimerangepicker/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/), [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/), [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/), [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/), [TreeView](https://romanhaendler.github.io/umriss-ui/core/treeview/), [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/) and [Meter](https://romanhaendler.github.io/umriss-ui/core/meter/). ### `GridGlyph` The grid laid over an area. Two by two lines; the frame is missing on purpose, otherwise it would be a window. ```ts function GridGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element; ``` Used on [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `GripGlyph` The grip a drag is taken by: two grooves. Dots are fill, and point 4 of the specification draws with the stroke. ```ts function GripGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element; ``` ### `Heading` [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/) – A heading whose level and size are independent: a small heading can still be the second level of the page. Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/), [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/) and [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/). ### `IconButton` [IconButton](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/button/), [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/) and [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/). ### `Input` [Input](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/numberinput/). Used on [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Button](https://romanhaendler.github.io/umriss-ui/core/button/), [Input](https://romanhaendler.github.io/umriss-ui/core/input/), [FormField](https://romanhaendler.github.io/umriss-ui/core/formfield/), [Alert](https://romanhaendler.github.io/umriss-ui/core/alert/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/), [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/) and [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/). ### `LanguageProvider` Sets formatting and wording for the subtree below. Used by the root provider, and usable directly for a section as well. ```ts function LanguageProvider({ formats, wording, children }: LanguageProviderProps): import("react").JSX.Element; ``` Used on [Language](https://romanhaendler.github.io/umriss-ui/core/language/). ### `Link` [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/) – A link in the size of its text; `external` opens it in a new tab with the protective attributes set. Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [Theming](https://romanhaendler.github.io/umriss-ui/core/theming/), [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/) and [Menu](https://romanhaendler.github.io/umriss-ui/core/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. ```ts function MeasureGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element; ``` ### `Menu` [Menu](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/), [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/), [Popover](https://romanhaendler.github.io/umriss-ui/core/popover/), [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/) and [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `MenuItem` [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/) – An entry of a `Menu` or a `ContextMenu`. It runs `onSelect` and closes the menu. Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/), [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/), [ButtonGroup](https://romanhaendler.github.io/umriss-ui/core/buttongroup/), [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/) and [ContextMenu](https://romanhaendler.github.io/umriss-ui/core/contextmenu/). ### `MenuSeparator` Fine dividing line between groups of menu entries. ```ts function MenuSeparator({ ref, className, ...rest }: HTMLAttributes & RefProp): import("react").JSX.Element; ``` Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/), [ButtonGroup](https://romanhaendler.github.io/umriss-ui/core/buttongroup/), [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/) and [ContextMenu](https://romanhaendler.github.io/umriss-ui/core/contextmenu/). ### `Meter` [Meter](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/) and [Meter](https://romanhaendler.github.io/umriss-ui/core/meter/). ### `MinusGlyph` The minus of `NumberInput`'s step buttons. ```ts function MinusGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element; ``` Used on [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/). ### `Modal` [Modal](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/) and [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `ModalBody` The content of a `Modal` or `Drawer` - the part that scrolls while head and foot stand fast. ```ts function ModalBody({ ref, className, children, ...rest }: HTMLAttributes & RefProp): import("react").JSX.Element; ``` Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/) and [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/). ### `ModalFooter` The foot of a `Modal` or `Drawer`, for its buttons; they stand at the end. ```ts function ModalFooter({ ref, className, children, ...rest }: HTMLAttributes & RefProp): import("react").JSX.Element; ``` Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/) and [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/). ### `ModalHeader` [Modal](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/) and [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/). ### `MultiSelect` [MultiSelect](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [MultiSelect](https://romanhaendler.github.io/umriss-ui/core/multiselect/), [Popover](https://romanhaendler.github.io/umriss-ui/core/popover/) and [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `NumberInput` [NumberInput](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Language](https://romanhaendler.github.io/umriss-ui/core/language/), [FormField](https://romanhaendler.github.io/umriss-ui/core/formfield/), [NumberInput](https://romanhaendler.github.io/umriss-ui/core/numberinput/), [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/), [Switch](https://romanhaendler.github.io/umriss-ui/core/switch/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/), [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/) and [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/). ### `PlusGlyph` The plus of `NumberInput`'s step buttons. ```ts function PlusGlyph({ ref, size, ...rest }: GlyphProps): import("react").JSX.Element; ``` Used on [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/). ### `Popover` [Popover](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/popover/) and [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `ProgressBar` [ProgressBar](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [ProgressBar](https://romanhaendler.github.io/umriss-ui/core/progressbar/) and [Stepper](https://romanhaendler.github.io/umriss-ui/core/stepper/). ### `RadioGroup` [RadioGroup](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/) and [RadioGroup](https://romanhaendler.github.io/umriss-ui/core/radiogroup/). ### `SegmentedControl` [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/sizes/) and [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/segmentedcontrol/). ### `Select` [Select](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [FormField](https://romanhaendler.github.io/umriss-ui/core/formfield/), [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/segmentedcontrol/), [Select](https://romanhaendler.github.io/umriss-ui/core/select/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [Popover](https://romanhaendler.github.io/umriss-ui/core/popover/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/), [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/), [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/) and [Tag](https://romanhaendler.github.io/umriss-ui/core/tag/). ### `Skeleton` [Skeleton](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/skeleton/) and [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/). ### `Slider` [Slider](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/), [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/), [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/) and [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/). ### `Sparkline` [Sparkline](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/splitter/) and [Sparkline](https://romanhaendler.github.io/umriss-ui/core/sparkline/). ### `Spinner` [Spinner](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/spinner/). ### `SplitButton` [ButtonGroup](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/buttongroup/). ### `Splitter` [Splitter](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/splitter/) and [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `Stack` [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/) – Children below or beside one another, spaced by a step of the spacing scale. Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/), [Theming](https://romanhaendler.github.io/umriss-ui/core/theming/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Language](https://romanhaendler.github.io/umriss-ui/core/language/), [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/), [Divider](https://romanhaendler.github.io/umriss-ui/core/divider/), [Card](https://romanhaendler.github.io/umriss-ui/core/card/), [Splitter](https://romanhaendler.github.io/umriss-ui/core/splitter/), [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/), [VisuallyHidden](https://romanhaendler.github.io/umriss-ui/core/visuallyhidden/), [Button](https://romanhaendler.github.io/umriss-ui/core/button/), [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/), [ButtonGroup](https://romanhaendler.github.io/umriss-ui/core/buttongroup/), [Input](https://romanhaendler.github.io/umriss-ui/core/input/), [FormField](https://romanhaendler.github.io/umriss-ui/core/formfield/), [Textarea](https://romanhaendler.github.io/umriss-ui/core/textarea/), [NumberInput](https://romanhaendler.github.io/umriss-ui/core/numberinput/), [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/), [Checkbox](https://romanhaendler.github.io/umriss-ui/core/checkbox/), [Switch](https://romanhaendler.github.io/umriss-ui/core/switch/), [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/segmentedcontrol/), [FileInput](https://romanhaendler.github.io/umriss-ui/core/fileinput/), [Select](https://romanhaendler.github.io/umriss-ui/core/select/), [Combobox](https://romanhaendler.github.io/umriss-ui/core/combobox/), [MultiSelect](https://romanhaendler.github.io/umriss-ui/core/multiselect/), [DatePicker](https://romanhaendler.github.io/umriss-ui/core/datepicker/), [DateTimePicker](https://romanhaendler.github.io/umriss-ui/core/datetimepicker/), [DateRangePicker](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/), [DateTimeRangePicker](https://romanhaendler.github.io/umriss-ui/core/datetimerangepicker/), [Spinner](https://romanhaendler.github.io/umriss-ui/core/spinner/), [ProgressBar](https://romanhaendler.github.io/umriss-ui/core/progressbar/), [Skeleton](https://romanhaendler.github.io/umriss-ui/core/skeleton/), [Alert](https://romanhaendler.github.io/umriss-ui/core/alert/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [EmptyState](https://romanhaendler.github.io/umriss-ui/core/emptystate/), [Tooltip](https://romanhaendler.github.io/umriss-ui/core/tooltip/), [Popover](https://romanhaendler.github.io/umriss-ui/core/popover/), [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/), [ContextMenu](https://romanhaendler.github.io/umriss-ui/core/contextmenu/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/), [ConfirmDialog](https://romanhaendler.github.io/umriss-ui/core/confirmdialog/), [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/), [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/), [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/), [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/), [Stepper](https://romanhaendler.github.io/umriss-ui/core/stepper/), [TreeView](https://romanhaendler.github.io/umriss-ui/core/treeview/), [Badge](https://romanhaendler.github.io/umriss-ui/core/badge/), [Tag](https://romanhaendler.github.io/umriss-ui/core/tag/), [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/), [Meter](https://romanhaendler.github.io/umriss-ui/core/meter/) and [Sparkline](https://romanhaendler.github.io/umriss-ui/core/sparkline/). ### `Stat` [Stat](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Language](https://romanhaendler.github.io/umriss-ui/core/language/), [Splitter](https://romanhaendler.github.io/umriss-ui/core/splitter/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/) and [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/). ### `Stepper` [Stepper](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [FileInput](https://romanhaendler.github.io/umriss-ui/core/fileinput/), [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/) and [Stepper](https://romanhaendler.github.io/umriss-ui/core/stepper/). ### `Switch` [Switch](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Theming](https://romanhaendler.github.io/umriss-ui/core/theming/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Switch](https://romanhaendler.github.io/umriss-ui/core/switch/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/), [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/) and [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/). ### `Tab` [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/) – One tab of a `TabList`; choosing it shows the `TabPanel` of the same `value`. Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [Card](https://romanhaendler.github.io/umriss-ui/core/card/), [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/), [VisuallyHidden](https://romanhaendler.github.io/umriss-ui/core/visuallyhidden/), [Button](https://romanhaendler.github.io/umriss-ui/core/button/), [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/), [ButtonGroup](https://romanhaendler.github.io/umriss-ui/core/buttongroup/), [Input](https://romanhaendler.github.io/umriss-ui/core/input/), [Textarea](https://romanhaendler.github.io/umriss-ui/core/textarea/), [RadioGroup](https://romanhaendler.github.io/umriss-ui/core/radiogroup/), [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/segmentedcontrol/), [Select](https://romanhaendler.github.io/umriss-ui/core/select/), [Alert](https://romanhaendler.github.io/umriss-ui/core/alert/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [Tooltip](https://romanhaendler.github.io/umriss-ui/core/tooltip/), [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/), [ConfirmDialog](https://romanhaendler.github.io/umriss-ui/core/confirmdialog/), [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/), [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/), [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/) and [Tag](https://romanhaendler.github.io/umriss-ui/core/tag/). ### `TabList` The row of `Tab`s inside `Tabs`. The arrow keys, Home and End move between the tabs and choose them. ```ts function TabList({ ref, className, children, onKeyDown, ...rest }: HTMLAttributes & RefProp): import("react").JSX.Element; ``` Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/) and [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/). ### `TabPanel` [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/) – The content of one tab. Only the panel whose `value` is chosen stands in the document. Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/) and [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/). ### `Tabs` [Tabs](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/) and [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/). ### `Tag` [Tag](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/), [EmptyState](https://romanhaendler.github.io/umriss-ui/core/emptystate/) and [Tag](https://romanhaendler.github.io/umriss-ui/core/tag/). ### `TagGroup` [Tag](https://romanhaendler.github.io/umriss-ui/core/tag/) – A list of `Tag`s with one tab stop: the arrow keys move between them, and the focus stays in the group when one is removed. Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [EmptyState](https://romanhaendler.github.io/umriss-ui/core/emptystate/) and [Tag](https://romanhaendler.github.io/umriss-ui/core/tag/). ### `Text` [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/) – Body text from the token set; `as` chooses the element, independent of the size. Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/), [Theming](https://romanhaendler.github.io/umriss-ui/core/theming/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Language](https://romanhaendler.github.io/umriss-ui/core/language/), [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/), [Divider](https://romanhaendler.github.io/umriss-ui/core/divider/), [Card](https://romanhaendler.github.io/umriss-ui/core/card/), [Splitter](https://romanhaendler.github.io/umriss-ui/core/splitter/), [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/), [VisuallyHidden](https://romanhaendler.github.io/umriss-ui/core/visuallyhidden/), [Button](https://romanhaendler.github.io/umriss-ui/core/button/), [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/), [ButtonGroup](https://romanhaendler.github.io/umriss-ui/core/buttongroup/), [Input](https://romanhaendler.github.io/umriss-ui/core/input/), [FormField](https://romanhaendler.github.io/umriss-ui/core/formfield/), [Textarea](https://romanhaendler.github.io/umriss-ui/core/textarea/), [NumberInput](https://romanhaendler.github.io/umriss-ui/core/numberinput/), [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/), [Switch](https://romanhaendler.github.io/umriss-ui/core/switch/), [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/segmentedcontrol/), [FileInput](https://romanhaendler.github.io/umriss-ui/core/fileinput/), [Select](https://romanhaendler.github.io/umriss-ui/core/select/), [Combobox](https://romanhaendler.github.io/umriss-ui/core/combobox/), [MultiSelect](https://romanhaendler.github.io/umriss-ui/core/multiselect/), [DatePicker](https://romanhaendler.github.io/umriss-ui/core/datepicker/), [DateTimePicker](https://romanhaendler.github.io/umriss-ui/core/datetimepicker/), [DateRangePicker](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/), [DateTimeRangePicker](https://romanhaendler.github.io/umriss-ui/core/datetimerangepicker/), [Spinner](https://romanhaendler.github.io/umriss-ui/core/spinner/), [ProgressBar](https://romanhaendler.github.io/umriss-ui/core/progressbar/), [Skeleton](https://romanhaendler.github.io/umriss-ui/core/skeleton/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [EmptyState](https://romanhaendler.github.io/umriss-ui/core/emptystate/), [Tooltip](https://romanhaendler.github.io/umriss-ui/core/tooltip/), [Popover](https://romanhaendler.github.io/umriss-ui/core/popover/), [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/), [ContextMenu](https://romanhaendler.github.io/umriss-ui/core/contextmenu/), [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/), [ConfirmDialog](https://romanhaendler.github.io/umriss-ui/core/confirmdialog/), [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/), [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/), [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/), [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/), [Stepper](https://romanhaendler.github.io/umriss-ui/core/stepper/), [TreeView](https://romanhaendler.github.io/umriss-ui/core/treeview/), [Benchmark](https://romanhaendler.github.io/umriss-ui/core/benchmark/), [Badge](https://romanhaendler.github.io/umriss-ui/core/badge/), [Tag](https://romanhaendler.github.io/umriss-ui/core/tag/), [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/), [Meter](https://romanhaendler.github.io/umriss-ui/core/meter/) and [Sparkline](https://romanhaendler.github.io/umriss-ui/core/sparkline/). ### `Textarea` [Textarea](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [Textarea](https://romanhaendler.github.io/umriss-ui/core/textarea/) and [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `ToastProvider` Holds the toasts and draws them; [`useToast`](https://romanhaendler.github.io/umriss-ui/core/api/#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. ```ts function ToastProvider({ children, held }: ToastProviderProps): import("react").JSX.Element; ``` Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/) and [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/). ### `Tooltip` [Tooltip](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/iconbutton/). Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/), [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/), [Tooltip](https://romanhaendler.github.io/umriss-ui/core/tooltip/), [Popover](https://romanhaendler.github.io/umriss-ui/core/popover/) and [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `TreeSearch` [TreeView](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/treeview/). ### `TreeView` [TreeView](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/), [TreeView](https://romanhaendler.github.io/umriss-ui/core/treeview/) and [Benchmark](https://romanhaendler.github.io/umriss-ui/core/benchmark/). ### `UmrissProvider` [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/) and [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/). ### `VisuallyHidden` [VisuallyHidden](https://romanhaendler.github.io/umriss-ui/core/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](https://romanhaendler.github.io/umriss-ui/core/visuallyhidden/). ## Hooks ### `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. ```ts function useCommandPaletteShortcut(onOpen: () => void): void; ``` Used on [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `useDensity` The configured density; without a provider, "comfortable". ```ts 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. ```ts function useDensityFor(own: "regular" | "compact" | undefined, fallback: "regular" | "compact"): "regular" | "compact"; ``` ### `useFormats` Only the formatting. ```ts const useFormats: () => Formats; ``` Used on [Language](https://romanhaendler.github.io/umriss-ui/core/language/), [NumberInput](https://romanhaendler.github.io/umriss-ui/core/numberinput/), [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/), [DatePicker](https://romanhaendler.github.io/umriss-ui/core/datepicker/), [DateTimePicker](https://romanhaendler.github.io/umriss-ui/core/datetimepicker/), [DateRangePicker](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/) and [DateTimeRangePicker](https://romanhaendler.github.io/umriss-ui/core/datetimerangepicker/). ### `useFormField` Used by Input, Select and Checkbox to wire up id and aria automatically. ```ts function useFormField(): FormFieldContextValue | null; ``` Used on [FormField](https://romanhaendler.github.io/umriss-ui/core/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. ```ts function useFreshness(asOf: Date | number | null | undefined, ages: FreshnessAges): FreshnessReading; ``` Used on [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/). ### `useLanguage` Formatting and wording together; without a provider, the defaults. ```ts 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 `` 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. ```ts function usePortalTarget(): () => HTMLElement | null; ``` ### `useToast` Access to `toast()`, `update()` and `dismiss()`; requires a ToastProvider. ```ts function useToast(): ToastContextValue; ``` Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/) and [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/). ### `useToastConfig` The setting for toasts; without a provider, empty. ```ts 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`. ```ts function useTree(roots: readonly K[], options: TreeOptions): Tree; ``` Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [TreeView](https://romanhaendler.github.io/umriss-ui/core/treeview/) and [Benchmark](https://romanhaendler.github.io/umriss-ui/core/benchmark/). ### `useUmriss` The whole configuration; without a provider, the defaults. ```ts 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. ```ts function useVirtual(count: number, options: VirtualOptions): VirtualRows; ``` Used on [Benchmark](https://romanhaendler.github.io/umriss-ui/core/benchmark/). ### `useWording` Only the wording. ```ts const useWording: () => Wording; ``` Used on [Language](https://romanhaendler.github.io/umriss-ui/core/language/). ## Functions ### `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. ```ts function age(asOf: Instant, now: Instant): number | null; ``` Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/). ### `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](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0005-what-cannot-be-checked.md)). ```ts function allBranches(roots: readonly K[], reader: NodeReader): 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 `` 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. ```ts function announce(text: string, at?: Element | null): void; ``` Used on [VisuallyHidden](https://romanhaendler.github.io/umriss-ui/core/visuallyhidden/) and [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/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. ```ts 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. ```ts 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`](https://romanhaendler.github.io/umriss-ui/core/api/#useTree) reports that during development. ```ts function duplicateKey(roots: readonly K[], reader: NodeReader): 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. ```ts function freshness(asOf: Instant, now: Instant, ages: FreshnessAges): Freshness; ``` Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/) and [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/). ### `mergeLanguage` Builds a complete instance from the default and a partial value. ```ts 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. ```ts const rangeDays: (from: Date, to: Date) => number; ``` Used on [DateRangePicker](https://romanhaendler.github.io/umriss-ui/core/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. ```ts 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. ```ts 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. ```ts function treeModel(roots: readonly K[], reader: NodeReader, snapshot: TreeSnapshot): readonly FlatteningEntry[]; ``` ### `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. ```ts 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. ```ts function visibleWindow({ count, rowHeight, scrollTop, viewportHeight, overscan, }: WindowInput): RowWindow; ``` ## Constants ### `DEFAULT_FORMATS` The instance shipped by default: English notation on a 24-hour clock ([ADR-0024](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0024-the-formats-are-english-german-is-freight.md)). German is `GERMAN_FORMATS` in `@umriss-ui/core/wording/de`. Every entry, with its value, stands in the table [Formats](https://romanhaendler.github.io/umriss-ui/core/language/#format) on the Language page. ```ts const DEFAULT_FORMATS: Formats; ``` ### `DEFAULT_LANGUAGE` English formats and English wording - what every component uses without a `LanguageProvider`. ```ts const DEFAULT_LANGUAGE: Language; ``` ### `DEFAULT_PRESETS` The same time spans with the preset labels. ```ts const DEFAULT_PRESETS: RangePreset[]; ``` ### `DEFAULT_SEPARATORS` The separators of the default notation. ```ts const DEFAULT_SEPARATORS: Separators; ``` ### `DEFAULT_WORDING` The instance shipped by default. English; German is `GERMAN_WORDING` in `@umriss-ui/core/wording/de` ([ADR-0019](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0019-two-wordings-ship-english-is-the-default.md)). Every entry, with its value, stands in the table [Wording](https://romanhaendler.github.io/umriss-ui/core/language/#wording) on the Language page. ```ts const DEFAULT_WORDING: Wording; ``` ## Types ### `AccordionItemProps` Its table stands on [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/#type-AccordionItemProps). ### `AccordionProps` Its table stands on [Accordion](https://romanhaendler.github.io/umriss-ui/core/accordion/#type-AccordionProps). ### `AlertProps` Its table stands on [Alert](https://romanhaendler.github.io/umriss-ui/core/alert/#type-AlertProps). ### `AlertTone` How urgent an alert is; it also decides whether a screen reader is interrupted. ```ts type AlertTone = "neutral" | "accent" | "success" | "warning" | "danger"; ``` ### `Align` Where the panel lines up with its anchor along the side it stands on. ```ts type Align = "start" | "end" | "center"; ``` ### `Assessment` The verdict and what led to it. | Prop | Type | Default | Description | |---|---|---|---| | `verdict` *required* | [`Verdict`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Verdict)
`"ok" \| "unknown" \| "warning" \| "alarm"` | — | | | `limit` | [`Limit`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Limit) | — | The violated limit - the same object the caller passed in. Absent where none is violated. | | `excess` | `number` | — | The amount beyond the bound, always positive. Absent where none is violated. | | `deviation` | `number` | — | The signed distance from the target. Absent where none is set: no target means no deviation, not a deviation of zero. | ### `BadgeProps` Its table stands on [Badge](https://romanhaendler.github.io/umriss-ui/core/badge/#type-BadgeProps). ### `BadgeTone` What a badge stands for - never the only statement, a word stands beside it. ```ts type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger"; ``` Used on [Badge](https://romanhaendler.github.io/umriss-ui/core/badge/). ### `BreadcrumbEntry` Its table stands on [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/#type-BreadcrumbEntry). ### `BreadcrumbProps` Its table stands on [Breadcrumb](https://romanhaendler.github.io/umriss-ui/core/breadcrumb/#type-BreadcrumbProps). ### `ButtonGroupProps` Its table stands on [ButtonGroup](https://romanhaendler.github.io/umriss-ui/core/buttongroup/#type-ButtonGroupProps). ### `ButtonProps` Its table stands on [Button](https://romanhaendler.github.io/umriss-ui/core/button/#type-ButtonProps). ### `ButtonSize` A button's two heights - the controls' (`ControlSize`). ```ts type ButtonSize = ControlSize; ``` Resolves to `"sm" | "md"`. ### `ButtonVariant` How loud a button is: `primary` for the one main action, `secondary` by default, `ghost` quiet in the accent, `plain` quiet and neutral, `danger` for a destructive action. ```ts type ButtonVariant = "primary" | "secondary" | "ghost" | "plain" | "danger"; ``` ### `CardBodyProps` Its table stands on [Card](https://romanhaendler.github.io/umriss-ui/core/card/#type-CardBodyProps). ### `CardHeaderProps` Its table stands on [Card](https://romanhaendler.github.io/umriss-ui/core/card/#type-CardHeaderProps). ### `CardProps` Its table stands on [Card](https://romanhaendler.github.io/umriss-ui/core/card/#type-CardProps). ### `CheckboxProps` Its table stands on [Checkbox](https://romanhaendler.github.io/umriss-ui/core/checkbox/#type-CheckboxProps). ### `ComboboxOption` Its table stands on [Combobox](https://romanhaendler.github.io/umriss-ui/core/combobox/#type-ComboboxOption). Used on [Combobox](https://romanhaendler.github.io/umriss-ui/core/combobox/). ### `ComboboxProps` Its table stands on [Combobox](https://romanhaendler.github.io/umriss-ui/core/combobox/#type-ComboboxProps). ### `CommandPaletteItem` Its table stands on [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/#type-CommandPaletteItem). Used on [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/). ### `CommandPaletteProps` Its table stands on [CommandPalette](https://romanhaendler.github.io/umriss-ui/core/commandpalette/#type-CommandPaletteProps). ### `ConfirmDialogProps` Its table stands on [ConfirmDialog](https://romanhaendler.github.io/umriss-ui/core/confirmdialog/#type-ConfirmDialogProps). ### `ContextMenuProps` Its table stands on [ContextMenu](https://romanhaendler.github.io/umriss-ui/core/contextmenu/#type-ContextMenuProps). ### `ControlSize` The two heights of a control: `sm` for a toolbar and dense forms, `md` otherwise. ```ts type ControlSize = "sm" | "md"; ``` Used on [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/) and [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/segmentedcontrol/). ### `ControlSizeProviderProps` Its table stands on [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/#type-ControlSizeProviderProps). ### `DatePickerProps` Its table stands on [DatePicker](https://romanhaendler.github.io/umriss-ui/core/datepicker/#type-DatePickerProps). ### `DateRange` A span between two dates, both ends included - the value of `DateRangePicker` and `DateTimeRangePicker`. | Prop | Type | Default | Description | |---|---|---|---| | `from` *required* | `Date` | — |
Shown in: [Narrow places (Sizes)](https://romanhaendler.github.io/umriss-ui/core/sizes/#narrow-places), [A span of days (DateRangePicker)](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/#a-span-of-days), [Presets (DateRangePicker)](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/#presets) and 6 more | | `to` *required* | `Date` | — |
Shown in: [Narrow places (Sizes)](https://romanhaendler.github.io/umriss-ui/core/sizes/#narrow-places), [A span of days (DateRangePicker)](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/#a-span-of-days), [Presets (DateRangePicker)](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/#presets) and 6 more | Used on [Sizes](https://romanhaendler.github.io/umriss-ui/core/sizes/), [DateRangePicker](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/) and [DateTimeRangePicker](https://romanhaendler.github.io/umriss-ui/core/datetimerangepicker/). ### `DateRangePickerProps` Its table stands on [DateRangePicker](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/#type-DateRangePickerProps). ### `DateTimePickerProps` Its table stands on [DateTimePicker](https://romanhaendler.github.io/umriss-ui/core/datetimepicker/#type-DateTimePickerProps). ### `DateTimeRangePickerProps` Its table stands on [DateTimeRangePicker](https://romanhaendler.github.io/umriss-ui/core/datetimerangepicker/#type-DateTimeRangePickerProps). ### `Density` How densely the library builds. A component with a density of its own takes it through `useDensityFor` as the default for its `density` - in ```ts type Density = "comfortable" | "compact"; ``` ### `Direction` Where the active node moves: up and down the visible rows, in and out of a branch, to the first or the last row. ```ts type Direction = "up" | "down" | "in" | "out" | "start" | "end"; ``` ### `DividerProps` Its table stands on [Divider](https://romanhaendler.github.io/umriss-ui/core/divider/#type-DividerProps). ### `DrawerProps` Its table stands on [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/#type-DrawerProps). ### `EmptyStateProps` Its table stands on [EmptyState](https://romanhaendler.github.io/umriss-ui/core/emptystate/#type-EmptyStateProps). ### `FileInputProps` Its table stands on [FileInput](https://romanhaendler.github.io/umriss-ui/core/fileinput/#type-FileInputProps). ### `FlatteningEntry` One visible node of a tree, with everything a row needs to be drawn and read out: level, branch or leaf, check state, search state and position among its siblings. | Prop | Type | Default | Description | |---|---|---|---| | `node` *required* | `K` | — |
Shown in: [A tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#a-tree), [Tick a selection (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#tick-a-selection), [Load branches on demand (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#load-branches-on-demand) and 5 more | | `key` *required* | `S` | — | | | `level` *required* | `number` | — | Roots stand at 0. Drives the indentation and what is read out. | | `label` *required* | `string` | — | The node's text; here, so that typeahead can be a pure function over the flattening and needs no reader. | | `branch` *required* | `boolean` | — | | | `empty` *required* | `boolean` | — | Branch without content: expanding it showed nothing. An unloaded branch is not empty - it could have children. | | `disabled` *required* | `boolean` | — | May not be checked ([ADR-0005](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0005-what-cannot-be-checked.md)). It stays navigable. | | `unloaded` *required* | `boolean` | — | Could have children that are not present. For checking exactly the same as disabled: whatever has to reach its descendants may not act on it. | | `expanded` *required* | `boolean` | — | | | `checked` *required* | `boolean` | — | | | `indeterminate` *required* | `boolean` | — | Derived: not checked itself, but at least one descendant is. | | `active` *required* | `boolean` | — | | | `matches` *required* | `boolean` | — | Matched the search itself. Without a search text every entry matches, so that the surface needs no special case. | | `pathOnly` *required* | `boolean` | — | Stands there only because a descendant matches - a signpost. The surface dims these and only these. A child under a matching branch is neither a match nor a signpost but context: it stays normal. | | `position` *required* | `number` | — | 1-based, among the siblings that survive the filter. | | `siblings` *required* | `number` | — | | ### `Formats` Everything the library knows about formatting. | Prop | Type | Default | Description | |---|---|---|---| | `date` *required* | `(d: Date) => string` | — | Date as displayed: 17/03/2026
Shown in: [A span of days (DateRangePicker)](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/#a-span-of-days) | | `dateShort` *required* | `(d: Date) => string` | — | Short form without the year, in the range footer: 17/03 | | `month` *required* | `(d: Date) => string` | — | The calendar's month header: March 2026 | | `dateLong` *required* | `(d: Date) => string` | — | Accessible name of a calendar cell: Tuesday, 17 March 2026 | | `time` *required* | `(d: Date, withSeconds: boolean) => string` | — | Time of day, optionally with seconds: 09:05 or 09:05:03 | | `dateTime` *required* | `(d: Date, withSeconds: boolean) => string` | — | Date and time together: 17/03/2026, 09:05
Shown in: [Use the language in your own components (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#own-components), [Pick a day (DatePicker)](https://romanhaendler.github.io/umriss-ui/core/datepicker/#pick-a-day), [Set an instant (DateTimePicker)](https://romanhaendler.github.io/umriss-ui/core/datetimepicker/#set-an-instant) and 1 more | | `offset` *required* | `(d: Date) => string` | — | Short form of the UTC offset: GMT+2
Shown in: [Set an instant (DateTimePicker)](https://romanhaendler.github.io/umriss-ui/core/datetimepicker/#set-an-instant) | | `number` *required* | `(n: number, decimals?: number) => string` | — | A number in the set's notation. Without a digit count the value stands to the tenth decimal place; with one it is padded and rounded to exactly that many places.
Shown in: [Write numbers in your own notation (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#own-notation), [Price an invoice line (NumberInput)](https://romanhaendler.github.io/umriss-ui/core/numberinput/#price-an-invoice-line), [Split a budget (Slider)](https://romanhaendler.github.io/umriss-ui/core/slider/#split-a-budget) | | `count` *required* | `(n: number) => string` | — | A count. Kept apart from `number` because it makes a different promise: a count is whole, and Intl's own rounding (at most three decimal places) is right for it and wrong for a measurement.
Shown in: [Write numbers in your own notation (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#own-notation), [Use the language in your own components (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#own-components) | | `percent` *required* | `(share: number) => string` | — | A share from 0 to 1 as whole per cent: 74 % | | `compareText` *required* | `(a: string, b: string) => number` | — | The ordering of two texts by the set's collation. | | `relative` *required* | `(ms: number) => string` | — | An elapsed duration as a phrase: "3 minutes ago". The amount comes in milliseconds, counted back from now. | ### `FormFieldProps` Its table stands on [FormField](https://romanhaendler.github.io/umriss-ui/core/formfield/#type-FormFieldProps). ### `Freshness` How much a value can be relied on right now - independently of how it is judged. ```ts type Freshness = "fresh" | "stale" | "lost"; ``` Used on [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/). ### `FreshnessAges` The two ages at which a value changes its state, in milliseconds. Both bounds belong to the older state: exactly five minutes old is already `stale`. `alt <= lost` is the sensible order. Stated the other way round, the harder statement still wins - the middle state simply falls away. | Prop | Type | Default | Description | |---|---|---|---| | `stale` *required* | `number` | — | From this age on the value counts as stale, but keeps its verdict.
Shown in: [Show how fresh a value is (Stat)](https://romanhaendler.github.io/umriss-ui/core/stat/#freshness), [Watch the services that page at night (Stat)](https://romanhaendler.github.io/umriss-ui/core/stat/#a-service-overview), [Watch a kiln line over a shift (Scenarios)](https://romanhaendler.github.io/umriss-ui/core/#watch-a-kiln-line) | | `lost` *required* | `number` | — | From this age on the connection counts as disconnected.
Shown in: [Show how fresh a value is (Stat)](https://romanhaendler.github.io/umriss-ui/core/stat/#freshness), [Watch the services that page at night (Stat)](https://romanhaendler.github.io/umriss-ui/core/stat/#a-service-overview), [Watch a kiln line over a shift (Scenarios)](https://romanhaendler.github.io/umriss-ui/core/#watch-a-kiln-line) | Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/) and [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/). ### `FreshnessReading` What `useFreshness` returns: how fresh the value is, how old, and the time the reading was taken at. | Prop | Type | Default | Description | |---|---|---|---| | `freshness` *required* | [`Freshness`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Freshness)
`"fresh" \| "stale" \| "lost"` | — | `fresh`, `stale` or `lost` - never a verdict.
Shown in: [Show how fresh a value is (Stat)](https://romanhaendler.github.io/umriss-ui/core/stat/#freshness) | | `age` *required* | `number \| null` | — | Age in milliseconds, never negative; `null` without an as-of time. For the wording. | | `now` *required* | `number` | — | The reference time of this reading, in milliseconds since the epoch. | ### `GlyphProps` The props of a glyph: an SVG's attributes and its edge length. | Prop | Type | Default | Description | |---|---|---|---| | `size` | `number` | `12` | Edge length in pixels. The default is the size the glyph is drawn at in the components. | | `ref` | `Ref` | — | Receives the component's root element. From `RefProp`.
Shown in: [A row that holds still (Sizes)](https://romanhaendler.github.io/umriss-ui/core/sizes/#a-row-that-holds-still), [An anchored surface (Popover)](https://romanhaendler.github.io/umriss-ui/core/popover/#anchored-surface), [Take the width of the trigger (Popover)](https://romanhaendler.github.io/umriss-ui/core/popover/#width-from-anchor) and 2 more | Also takes every attribute of `` – without `children`, `viewBox`. ### `GridColumnWidth` The width of one column in `Grid`'s list: a number in pixels, or `"fill"` for a share of what the other columns leave. ```ts type GridColumnWidth = number | "fill"; ``` ### `GridProps` Its table stands on [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/#type-GridProps). ### `HeadingProps` Its table stands on [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/#type-HeadingProps). ### `IconButtonProps` Its table stands on [IconButton](https://romanhaendler.github.io/umriss-ui/core/iconbutton/#type-IconButtonProps). ### `InputProps` Its table stands on [Input](https://romanhaendler.github.io/umriss-ui/core/input/#type-InputProps). ### `Key` A node's key, as `reader.key` returns it. ```ts type Key = string | number; ``` ### `Language` A complete language: the formats for numbers and dates, and the wording. | Prop | Type | Default | Description | |---|---|---|---| | `formats` *required* | [`Formats`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Formats) | — | | | `wording` *required* | [`Wording`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Wording) | — | | Used on [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/). ### `LanguageOptions` Its table stands on [Language](https://romanhaendler.github.io/umriss-ui/core/language/#type-LanguageOptions). Used on [Language](https://romanhaendler.github.io/umriss-ui/core/language/). ### `LanguageProviderProps` The props of `LanguageProvider`: the parts of the formats and the wording that differ from the default. | Prop | Type | Default | Description | |---|---|---|---| | `children` *required* | `ReactNode` | — |
Shown in: [German (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#german), [English and German side by side (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#side-by-side), [Replace single entries (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#single-entries) and 2 more | | `formats` | `Partial<`[`Formats`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Formats)`>` | — | How numbers, dates and durations are written. Overridden entry by entry; what is left out keeps writing as `DEFAULT_FORMATS` does - in English notation, whatever the wording says ([ADR-0024](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0024-the-formats-are-english-german-is-freight.md)). From `LanguageOptions`.
Shown in: [Set up an application (UmrissProvider)](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/#everything-at-once), [German (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#german), [English and German side by side (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#side-by-side) and 2 more | | `wording` | `Partial> & { presets?: Partial<`[`Wording`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Wording)`["presets"]> }` | — | The presets are a register of their own and are likewise overridden entry by entry. From `LanguageOptions`.
Shown in: [Set up an application (UmrissProvider)](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/#everything-at-once), [German (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#german), [English and German side by side (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#side-by-side) and 2 more | ### `Limit` A bound: a value, a side, a severity. No tolerance band as input. A band is derived - two limits of equal severity on opposite sides enclose one - and as an input type it would force a `null` on one edge in the one-sided case. | Prop | Type | Default | Description | |---|---|---|---| | `value` *required* | `number` | — |
Shown in: [English and German side by side (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#side-by-side), [Replace single entries (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#single-entries), [Three panes (Splitter)](https://romanhaendler.github.io/umriss-ui/core/splitter/#three-panes) and 12 more | | `side` *required* | [`Side`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Side)
`"upper" \| "lower"` | — |
Shown in: [English and German side by side (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#side-by-side), [Replace single entries (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#single-entries), [Three panes (Splitter)](https://romanhaendler.github.io/umriss-ui/core/splitter/#three-panes) and 12 more | | `severity` *required* | [`Severity`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Severity)
`"warning" \| "alarm"` | — |
Shown in: [English and German side by side (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#side-by-side), [Replace single entries (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#single-entries), [Three panes (Splitter)](https://romanhaendler.github.io/umriss-ui/core/splitter/#three-panes) and 12 more | ### `LimitSet` The set a value is read against. The target stands beside the limits and is not one: it is missed, never violated, and it is never the edge of a region. | Prop | Type | Default | Description | |---|---|---|---| | `limits` | `readonly `[`Limit`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Limit)`[]` | — | In any order; none, one or several.
Shown in: [English and German side by side (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#side-by-side), [Replace single entries (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#single-entries), [Three panes (Splitter)](https://romanhaendler.github.io/umriss-ui/core/splitter/#three-panes) and 12 more | | `target` | `number` | — |
Shown in: [English and German side by side (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#side-by-side), [Replace single entries (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#single-entries), [Measure against a target (Stat)](https://romanhaendler.github.io/umriss-ui/core/stat/#a-target) and 3 more | Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [Language](https://romanhaendler.github.io/umriss-ui/core/language/), [Drawer](https://romanhaendler.github.io/umriss-ui/core/drawer/) and [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/). ### `LinkProps` Its table stands on [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/#type-LinkProps). ### `MenuItemProps` Its table stands on [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/#type-MenuItemProps). ### `MenuProps` Its table stands on [Menu](https://romanhaendler.github.io/umriss-ui/core/menu/#type-MenuProps). ### `MeterProps` Its table stands on [Meter](https://romanhaendler.github.io/umriss-ui/core/meter/#type-MeterProps). ### `MeterTone` The colour of a meter's bar - an assessment, never the only statement. ```ts type MeterTone = "neutral" | "accent" | "success" | "warning" | "danger"; ``` Used on [Meter](https://romanhaendler.github.io/umriss-ui/core/meter/). ### `ModalHeaderProps` Its table stands on [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/#type-ModalHeaderProps). ### `ModalProps` Its table stands on [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/#type-ModalProps). ### `ModalSize` The width of a `Modal`. ```ts type ModalSize = "sm" | "md" | "lg"; ``` Used on [Modal](https://romanhaendler.github.io/umriss-ui/core/modal/). ### `MultiSelectOption` Its table stands on [MultiSelect](https://romanhaendler.github.io/umriss-ui/core/multiselect/#type-MultiSelectOption). Used on [MultiSelect](https://romanhaendler.github.io/umriss-ui/core/multiselect/). ### `MultiSelectProps` Its table stands on [MultiSelect](https://romanhaendler.github.io/umriss-ui/core/multiselect/#type-MultiSelectProps). ### `NodeReader` How a node is read - handed over once, not per node. The node's own type thereby stays entirely the caller's. | Prop | Type | Default | Description | |---|---|---|---| | `key` *required* | `(node: K) => S` | — |
Shown in: [A tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#a-tree), [Tick a selection (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#tick-a-selection), [Load branches on demand (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#load-branches-on-demand) and 5 more | | `children` *required* | `(node: K) => readonly K[] \| undefined` | — | `undefined` means leaf, an empty list means empty branch - the difference is visible and intended.
Shown in: [A tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#a-tree), [Tick a selection (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#tick-a-selection), [Load branches on demand (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#load-branches-on-demand) and 5 more | | `label` *required* | `(node: K) => string` | — | Text the search checks against.
Shown in: [A tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#a-tree), [Tick a selection (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#tick-a-selection), [Load branches on demand (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#load-branches-on-demand) and 5 more | | `disabled` | `(node: K) => boolean` | — | May this node be checked? Without an answer: everyone may. Disabled is a statement about the checkbox, not about the node - it stays navigable ([ADR-0005](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0005-what-cannot-be-checked.md)).
Shown in: [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal) | | `unloaded` | `(node: K) => boolean` | — | Can this branch have children that are not present? Without an answer: no.
Shown in: [Load branches on demand (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#load-branches-on-demand), [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal) | | `matches` | `(node: K) => boolean` | — | Does this node match? Given, it filters instead of the search text, which is then not read - a table matches by its columns and filters, not by one label. The path rule stays the same. | Used on [Scenarios](https://romanhaendler.github.io/umriss-ui/core/), [TreeView](https://romanhaendler.github.io/umriss-ui/core/treeview/) and [Benchmark](https://romanhaendler.github.io/umriss-ui/core/benchmark/). ### `NumberInputProps` Its table stands on [NumberInput](https://romanhaendler.github.io/umriss-ui/core/numberinput/#type-NumberInputProps). ### `PopoverProps` Its table stands on [Popover](https://romanhaendler.github.io/umriss-ui/core/popover/#type-PopoverProps). ### `PortalTarget` Where overlays portal to. A function is evaluated on every opening - a target that only comes into the tree later cannot be given otherwise. `null`, or a result of `null`, means "as before". ```ts type PortalTarget = HTMLElement | (() => HTMLElement | null) | null; ``` Used on [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/). ### `ProgressBarProps` Its table stands on [ProgressBar](https://romanhaendler.github.io/umriss-ui/core/progressbar/#type-ProgressBarProps). ### `RadioGroupProps` Its table stands on [RadioGroup](https://romanhaendler.github.io/umriss-ui/core/radiogroup/#type-RadioGroupProps). ### `RadioOption` Its table stands on [RadioGroup](https://romanhaendler.github.io/umriss-ui/core/radiogroup/#type-RadioOption). ### `RangePreset` A shortcut in a range picker's panel: its label, and a function that computes the range when it is chosen - so that "Last 7 days" is counted from the moment of the click. | Prop | Type | Default | Description | |---|---|---|---| | `label` *required* | `string` | — |
Shown in: [Presets (DateRangePicker)](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/#presets) | | `range` *required* | `() => `[`DateRange`](https://romanhaendler.github.io/umriss-ui/core/api/#type-DateRange) | — |
Shown in: [Presets (DateRangePicker)](https://romanhaendler.github.io/umriss-ui/core/daterangepicker/#presets) | ### `RefProp` The `ref` of a component: the element it renders at its root. | Prop | Type | Default | Description | |---|---|---|---| | `ref` | `Ref` | — | Receives the component's root element.
Shown in: [A row that holds still (Sizes)](https://romanhaendler.github.io/umriss-ui/core/sizes/#a-row-that-holds-still), [An anchored surface (Popover)](https://romanhaendler.github.io/umriss-ui/core/popover/#anchored-surface), [Take the width of the trigger (Popover)](https://romanhaendler.github.io/umriss-ui/core/popover/#width-from-anchor) and 2 more | ### `RowPlacement` What `scrollForRow` needs to know about a scroll area. | Prop | Type | Default | Description | |---|---|---|---| | `rowHeight` *required* | `number` | — | | | `scrollTop` *required* | `number` | — | | | `viewportHeight` *required* | `number` | — | | | `headerHeight` | `number` | — | Height of the sticky header; it covers the upper edge. | ### `RowWindow` The rows to render - `from` up to, not including, `to` - and the heights of the filler rows that stand for the rest. | Prop | Type | Default | Description | |---|---|---|---| | `from` *required* | `number` | — | First rendered index. | | `to` *required* | `number` | — | First index no longer rendered (exclusive). | | `before` *required* | `number` | — | Height of the filler row above, in pixels. | | `after` *required* | `number` | — | Height of the filler row below, in pixels. | ### `SegmentedControlProps` Its table stands on [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/segmentedcontrol/#type-SegmentedControlProps). ### `SegmentedOption` Its table stands on [SegmentedControl](https://romanhaendler.github.io/umriss-ui/core/segmentedcontrol/#type-SegmentedOption). ### `SelectProps` Its table stands on [Select](https://romanhaendler.github.io/umriss-ui/core/select/#type-SelectProps). ### `Separators` The two characters a notation separates with. | Prop | Type | Default | Description | |---|---|---|---| | `group` *required* | `string` | — | Between thousands: "," in English, "." in German, empty where a notation does not group. | | `decimal` *required* | `string` | — | Before the decimals: "." in English, "," in German. | ### `Severity` How seriously a violation weighs: one severity that advises and one that calls for action. Exactly two; for a third distinction one sets a second limit. ```ts type Severity = "warning" | "alarm"; ``` ### `Side` Whether a limit is an upper or a lower bound. ```ts type Side = "upper" | "lower"; ``` ### `SkeletonProps` Its table stands on [Skeleton](https://romanhaendler.github.io/umriss-ui/core/skeleton/#type-SkeletonProps). ### `SliderMark` A mark on the track: a value, or a value with the word beneath it. ```ts type SliderMark = number | { value: number; label?: ReactNode }; ``` ### `SliderProps` Its table stands on [Slider](https://romanhaendler.github.io/umriss-ui/core/slider/#type-SliderProps). ### `SpaceStep` A step of the spacing scale, from 1 (4 px) to 8 (40 px) - the tokens `--u-space-1` to `--u-space-8`. ```ts type SpaceStep = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8; ``` ### `SparklineProps` Its table stands on [Sparkline](https://romanhaendler.github.io/umriss-ui/core/sparkline/#type-SparklineProps). ### `SpinnerProps` Its table stands on [Spinner](https://romanhaendler.github.io/umriss-ui/core/spinner/#type-SpinnerProps). ### `SplitButtonProps` Its table stands on [ButtonGroup](https://romanhaendler.github.io/umriss-ui/core/buttongroup/#type-SplitButtonProps). ### `SplitterProps` Its table stands on [Splitter](https://romanhaendler.github.io/umriss-ui/core/splitter/#type-SplitterProps). ### `StackProps` Its table stands on [Stack and Grid](https://romanhaendler.github.io/umriss-ui/core/stack-and-grid/#type-StackProps). ### `StatProps` Its table stands on [Stat](https://romanhaendler.github.io/umriss-ui/core/stat/#type-StatProps). ### `StepperProps` Its table stands on [Stepper](https://romanhaendler.github.io/umriss-ui/core/stepper/#type-StepperProps). ### `StepperStep` Its table stands on [Stepper](https://romanhaendler.github.io/umriss-ui/core/stepper/#type-StepperStep). ### `SwitchProps` Its table stands on [Switch](https://romanhaendler.github.io/umriss-ui/core/switch/#type-SwitchProps). ### `TabPanelProps` Its table stands on [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/#type-TabPanelProps). ### `TabProps` Its table stands on [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/#type-TabProps). ### `TabsProps` Its table stands on [Tabs](https://romanhaendler.github.io/umriss-ui/core/tabs/#type-TabsProps). ### `TagGroupProps` Its table stands on [Tag](https://romanhaendler.github.io/umriss-ui/core/tag/#type-TagGroupProps). ### `TagProps` Its table stands on [Tag](https://romanhaendler.github.io/umriss-ui/core/tag/#type-TagProps). ### `TagTone` What a tag stands for - never the only statement, its text says it too. ```ts type TagTone = "neutral" | "accent" | "success" | "warning" | "danger"; ``` ### `TextareaProps` Its table stands on [Textarea](https://romanhaendler.github.io/umriss-ui/core/textarea/#type-TextareaProps). ### `TextLeading` The line height of the token set. ```ts type TextLeading = "normal" | "tight"; ``` ### `TextProps` Its table stands on [Typography](https://romanhaendler.github.io/umriss-ui/core/typography/#type-TextProps). ### `TextSize` A type size of the token set. ```ts type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"; ``` ### `TextTone` How loud a text is; `secondary` and `muted` step back without falling below the contrast threshold. ```ts type TextTone = "default" | "secondary" | "muted"; ``` ### `TextTracking` The letter spacing of the token set. ```ts type TextTracking = "normal" | "tight" | "display" | "caps"; ``` ### `TextWeight` A font weight of the token set. ```ts type TextWeight = "regular" | "medium" | "semibold"; ``` ### `ToastAction` Its table stands on [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/#type-ToastAction). ### `ToastCloseReason` Why a toast went: its time ran out, it was closed (or gave way to a newer one), or its action was taken. ```ts type ToastCloseReason = "timeout" | "dismiss" | "action"; ``` Used on [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/). ### `ToastConfig` Its table stands on [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/#type-ToastConfig). Used on [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/) and [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/). ### `ToastOptions` Its table stands on [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/#type-ToastOptions). ### `ToastPosition` Where the toasts stand: an edge of the window and a place along it. On a phone they take the width of the window, and only the edge counts. ```ts type ToastPosition = "top-start" | "top-center" | "top-end" | "bottom-start" | "bottom-center" | "bottom-end"; ``` Used on [Toast](https://romanhaendler.github.io/umriss-ui/core/toast/). ### `ToastProviderProps` The props of `ToastProvider`. | Prop | Type | Default | Description | |---|---|---|---| | `children` *required* | `ReactNode` | — |
Shown in: [Resolve an incident (Scenarios)](https://romanhaendler.github.io/umriss-ui/core/#resolve-an-incident), [Approve spending against a budget (Scenarios)](https://romanhaendler.github.io/umriss-ui/core/#approve-spending), [Set up a team (Scenarios)](https://romanhaendler.github.io/umriss-ui/core/#set-up-a-team) | | `held` | `boolean` | `false` | While true, the toasts are held back: none is seen or heard, no time runs out, and a new one waits. When false again they come back with the time they had left. For a surface the toasts must not cover for a while, where there is no room beside it: nothing is lost, as it would be by dismissing.
Shown in: [Hold the toasts (Toast)](https://romanhaendler.github.io/umriss-ui/core/toast/#hold-the-toasts) | ### `ToastTone` How the message turns out; `loading` is a toast still at work. ```ts type ToastTone = "neutral" | "success" | "warning" | "danger" | "loading"; ``` ### `TooltipProps` Its table stands on [Tooltip](https://romanhaendler.github.io/umriss-ui/core/tooltip/#type-TooltipProps). ### `Tree` What `useTree` returns: the visible nodes and the gestures on them. Hand it to `TreeView` and `TreeSearch`. | Prop | Type | Default | Description | |---|---|---|---| | `flattening` *required* | `readonly `[`FlatteningEntry`](https://romanhaendler.github.io/umriss-ui/core/api/#type-FlatteningEntry)`[]` | — | The visible nodes – complete, even where only a window of them is rendered. Positions and sibling counts come from here and never from what stands in the document ([ADR-0004](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0004-a-flat-accessibility-tree.md)). | | `active` *required* | `S \| null` | — |
Shown in: [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal) | | `search` *required* | `string` | — | | | `toggleExpanded` *required* | `(key: S) => void` | — | | | `toggleCheck` *required* | `(key: S) => void` | — | | | `activate` *required* | `(key: S) => void` | — | | | `move` *required* | `(direction: `[`Direction`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Direction)`) => void` | — | | | `setSearch` *required* | `(text: string) => void` | — | | | `revealNode` *required* | `(key: S) => S \| null` | — | Expands the ancestors, brings the row into view and sets the active node. Returns the key, or null if it does not exist in the data.
Shown in: [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal) | | `revealPath` *required* | `(path: readonly S[]) => S \| null` | — | Like revealNode, but with a path the caller knows and the data does not yet - from a deep link, say. Returns the deepest key reached; if the run gets stuck at an unloaded branch, that is its key, and it has been expanded in the process. Loading and calling again is the caller's business. | | `expandAll` *required* | `() => void` | — |
Shown in: [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal) | | `collapseAll` *required* | `() => void` | — |
Shown in: [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal) | | `typeahead` *required* | `(prefix: string) => void` | — | Moves the active node to the next one whose label starts like this. Changes nothing else – not the expanding, not the checks, not the search. | | `checkTo` *required* | `(to: S) => void` | — | Checks the range from the anchor up to this node. | | `moveAndCheck` *required* | `(direction: `[`Direction`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Direction)`) => void` | — | Moves the active node **and** toggles the new one – one gesture, one report. Separate from move(), so that plain movement checks nothing; to be called instead of move(), not in addition to it. | | `toggleAll` *required* | `() => void` | — | Checks everything checkable – or empties, if everything is on already. | | `revealCount` *required* | `number` | — | Counts up every explicit request "show me this node". Otherwise the presentation follows the focus to the active node only where it already lies inside the tree - otherwise a state change from outside would tear the focus away. An explicit request, however, is exactly the opposite of an incidental change, and for that it needs a sign. | | `virtual` | [`VirtualRows`](https://romanhaendler.github.io/umriss-ui/core/api/#type-VirtualRows) | — | Set where virtualisation runs; goes to ``. | ### `TreeOptions` The options of `useTree`: how a node is read, and each of its values either uncontrolled (`default…`) or controlled with its `on…` handler. | Prop | Type | Default | Description | |---|---|---|---| | `reader` *required* | [`NodeReader`](https://romanhaendler.github.io/umriss-ui/core/api/#type-NodeReader)`` | — |
Shown in: [A tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#a-tree), [Tick a selection (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#tick-a-selection), [Load branches on demand (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#load-branches-on-demand) and 5 more | | `defaultExpanded` | `Iterable` | — | Initial values, where the tree holds its own state.
Shown in: [A tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#a-tree), [Tick a selection (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#tick-a-selection), [With an error (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#with-an-error) and 3 more | | `expanded` | `ReadonlySet` | — | Controlled from outside; where set, it wins over the tree's own state. | | `defaultChecked` | `Iterable` | — | | | `checked` | `ReadonlySet` | — |
Shown in: [Tick a selection (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#tick-a-selection), [With an error (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#with-an-error), [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal) | | `defaultActive` | `S \| null` | — |
Shown in: [A tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#a-tree), [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal), [Measure a large tree (Benchmark)](https://romanhaendler.github.io/umriss-ui/core/benchmark/#benchmark) | | `active` | `S \| null` | — |
Shown in: [Dispatch a tour (Scenarios)](https://romanhaendler.github.io/umriss-ui/core/#dispatch-a-tour) | | `anchor` | `S \| null` | — | Where a range gesture spans from. Steerable from outside like the other four values, so that a range is repeatable. | | `search` | `string` | — |
Shown in: [Search with the path (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-with-the-path), [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal) | | `virtual` | [`VirtualOptions`](https://romanhaendler.github.io/umriss-ui/core/api/#type-VirtualOptions) | — | Render only what stands in the scroll area. Optional: without it every row is rendered and no row height is needed.
Shown in: [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal), [Measure a large tree (Benchmark)](https://romanhaendler.github.io/umriss-ui/core/benchmark/#benchmark) | #### Events | Prop | Type | Default | Description | |---|---|---|---| | `onExpanded` | `(next: ReadonlySet) => void` | — | | | `onChecked` | `(next: ReadonlySet) => void` | — |
Shown in: [Tick a selection (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#tick-a-selection), [With an error (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#with-an-error), [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal) | | `onActive` | `(next: S \| null) => void` | — |
Shown in: [Dispatch a tour (Scenarios)](https://romanhaendler.github.io/umriss-ui/core/#dispatch-a-tour) | | `onAnchor` | `(next: S \| null) => void` | — | | | `onSearch` | `(text: string) => void` | — |
Shown in: [Search with the path (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-with-the-path), [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal) | | `onActivate` | `(node: K) => void` | — | Enter on a node, or a click on its label. | | `onLoadChildren` | `(node: K) => void` | — | An unloaded branch has been expanded: now would be the moment to fetch its children. The tree fetches nothing – it is driven by nested data, and whoever adds to them sees it render anew. Concurrency, errors and cancellation thereby stay outside ([ADR-0005](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0005-what-cannot-be-checked.md)).
Shown in: [Load branches on demand (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#load-branches-on-demand), [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal) | ### `TreeSearchProps` Its table stands on [TreeView](https://romanhaendler.github.io/umriss-ui/core/treeview/#type-TreeSearchProps). ### `TreeSnapshot` The whole state of a tree, as plain values: the open branches, the checked nodes, the active node, the anchor and the search text. The transitions take one and return the next. | Prop | Type | Default | Description | |---|---|---|---| | `expanded` *required* | `ReadonlySet` | — | | | `checked` *required* | `ReadonlySet` | — | | | `active` *required* | `S \| null` | — | | | `anchor` *required* | `S \| null` | — | Where a range selection spans from: the node checked last on its own. Neither the active one nor part of the checked set - it stands in the snapshot so that a range is repeatable and steerable from outside. | | `search` *required* | `string` | — | | ### `TreeViewProps` Its table stands on [TreeView](https://romanhaendler.github.io/umriss-ui/core/treeview/#type-TreeViewProps). ### `UmrissConfig` The settings of `UmrissProvider` as the components read them, every value filled in. | Prop | Type | Default | Description | |---|---|---|---| | `density` *required* | [`Density`](https://romanhaendler.github.io/umriss-ui/core/api/#type-Density)
`"comfortable" \| "compact"` | — | | | `portalTarget` *required* | [`PortalTarget`](https://romanhaendler.github.io/umriss-ui/core/api/#type-PortalTarget) | — | | | `toast` *required* | [`ToastConfig`](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/#type-ToastConfig) | — | | ### `UmrissProviderProps` Its table stands on [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/#type-UmrissProviderProps). Used on [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/). ### `Verdict` What a value is. Four outcomes, ordered by severity, `unknown` between `ok` and `warning`: a value nobody has is a reason to look. The fourth outcome is not a `null`, which would invite `?? "ok"` at the call site: a dead data source would look like a healthy service. ```ts type Verdict = "ok" | "unknown" | "warning" | "alarm"; ``` ### `VirtualOptions` The options of `useVirtual`. | Prop | Type | Default | Description | |---|---|---|---| | `rowHeight` *required* | `number` | — | Expected row height in pixels. It is re-measured on a real row after the first render; the value given is the starting point, so that the first window is not empty.
Shown in: [Search, check and reveal in a large tree (TreeView)](https://romanhaendler.github.io/umriss-ui/core/treeview/#search-check-and-reveal), [Measure a large tree (Benchmark)](https://romanhaendler.github.io/umriss-ui/core/benchmark/#benchmark) | | `overscan` | `number` | `4` | Rows above and below the visible area. | ### `VirtualRows` What `useVirtual` returns: the ref for the scroll area, the window of rows to render and the heights of the filler rows around it. | Prop | Type | Default | Description | |---|---|---|---| | `scrollRef` *required* | `RefObject` | — | Goes on the scroll area - in | | `from` *required* | `number` | — | Index of the first rendered row within the filtered set. | | `to` *required* | `number` | — | | | `fillerBefore` *required* | `number` | — | Height of the upper filler row, in pixels. | | `fillerAfter` *required* | `number` | — | Height of the lower filler row, in pixels. | | `count` *required* | `number` | — | Rows in total - the filler rows carry the rest. | | `showRow` *required* | `(index: number) => void` | — | Brings a row into view; for the keyboard. | #### Events | Prop | Type | Default | Description | |---|---|---|---| | `onScroll` *required* | `() => void` | — | Reports a new scroll position to the container. Internal. | ### `VisuallyHiddenProps` Its table stands on [VisuallyHidden](https://romanhaendler.github.io/umriss-ui/core/visuallyhidden/#type-VisuallyHiddenProps). ### `WindowInput` What `visibleWindow` needs to know about a scroll area and its rows. | Prop | Type | Default | Description | |---|---|---|---| | `count` *required* | `number` | — | Rows in total, not only the rendered ones. | | `rowHeight` *required* | `number` | — | Measured height of one row, in pixels. | | `scrollTop` *required* | `number` | — | The container's current scroll position. | | `viewportHeight` *required* | `number` | — | Visible height of the scroll area. | | `overscan` | `number` | `4` | Rows rendered along above and below the visible area. Without an overscan a blank area appears briefly during fast scrolling, because rendering trails the scrolling by a frame. | ### `Wording` Everything the library puts out as text. | Prop | Type | Default | Description | |---|---|---|---| | `clearInput` *required* | `string` | — | The cross in the text field. | | `clearSelection` *required* | `string` | — | The cross in the select and in the combobox. | | `decreaseValue` *required* | `string` | — | Stepper buttons of the number field. | | `increaseValue` *required* | `string` | — | | | `comboboxPlaceholder` *required* | `string` | — | | | `noMatches` *required* | `string` | — | Empty state of both lists. | | `multiSelectPlaceholder` *required* | `string` | — | | | `multiSelectSearchPlaceholder` *required* | `string` | — | | | `searchOptions` *required* | `string` | — | | | `options` *required* | `string` | — | Group name of the option list. | | `optionScope` *required* | `string` | — | Group name of the scope switch. | | `optionScopeAll` *required* | `string` | — | | | `optionScopeSelected` *required* | `(count: number) => string` | — | The second scope, with the count in the text. | | `selectAll` *required* | `string` | — | | | `selectNone` *required* | `string` | — | | | `invertSelection` *required* | `string` | — | | | `nothingSelected` *required* | `string` | — | | | `removeSelectedValue` *required* | `(beschriftung: string) => string` | — | The cross on a selected value in the trigger. | | `manageMoreSelected` *required* | `(count: number) => string` | — | The "+N" counter in the trigger. | | `multiSelectSummary` *required* | `(gewaehlt: number, total: number) => string` | — | The summary in the panel: "3 / 12". The sentence structure belongs to the language, even where it is only a slash here. | | `optionCount` *required* | `(count: number) => string` | — | How many options stand, when a list opens or its filter changes; never zero - an empty list says its own empty text. Named, like the three below, after the moment it is spoken in: an announcement labels no element. | | `optionActive` *required* | `( label: string, state: { selected?: boolean; disabled?: boolean; group?: string }, ) => string` | — | The option the keys moved onto, with what VoiceOver leaves out. | | `optionAdded` *required* | `(label: string) => string` | — | A value the multi-select took or gave away where no checkbox had the focus to say it - Enter in the search, a chip, Backspace. | | `optionRemoved` *required* | `(label: string) => string` | — | | | `palettePlaceholder` *required* | `string` | — | What stands in the empty field. | | `paletteField` *required* | `string` | — | Accessible name of the field. Deliberately kept apart from the placeholder - whoever labels the field differently does not thereby rename the window. | | `palettePanel` *required* | `string` | — | Accessible name of the window. | | `paletteList` *required* | `string` | — | Accessible name of the list of finds. | | `paletteNoFinds` *required* | `string` | — | The one line when the query finds nothing. | | `paletteFindCount` *required* | `(count: number) => string` | — | What the screen reader hears when the number of finds changes. | | `paletteMoreFinds` *required* | `(count: number) => string` | — | The last line when more finds exist than `maxFinds` lets stand. | | `paletteHintMove` *required* | `string` | — | The three key hints in the footer, each the text beside the key. | | `paletteHintChoose` *required* | `string` | — | | | `paletteHintClose` *required* | `string` | — | | | `paletteKeyEsc` *required* | `string` | — | The legend on the Escape key. The arrows and the return key are glyphs and therefore do not stand here; "Esc" is a word and is called something else elsewhere. | | `datePlaceholder` *required* | `string` | — | | | `datePanel` *required* | `string` | — | Accessible name of the panel. Deliberately kept apart from the placeholder: whoever labels the field differently does not thereby rename the dialog. | | `dateClear` *required* | `string` | — | | | `dateTimePlaceholder` *required* | `string` | — | | | `dateTimePanel` *required* | `string` | — | | | `dateTimeClear` *required* | `string` | — | | | `dateRangePlaceholder` *required* | `string` | — | | | `dateRangePanel` *required* | `string` | — | | | `dateRangeClear` *required* | `string` | — | | | `dateTimeRangePanel` *required* | `string` | — | Accessible name of the panel in the range with time of day. | | `dateTimeRangeClear` *required* | `string` | — | The clearing x of the range with time - kept apart from the range without, so that an application can call the two differently. | | `previousMonth` *required* | `string` | — | | | `nextMonth` *required* | `string` | — | | | `quickSelect` *required* | `string` | — | Group name of the preset column. | | `today` *required* | `string` | — |
Shown in: [Use the language in your own components (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#own-components) | | `now` *required* | `string` | — | | | `clear` *required* | `string` | — | | | `apply` *required* | `string` | — | | | `allDay` *required* | `string` | — | | | `timeOfDay` *required* | `string` | — | | | `hour` *required* | `string` | — | | | `minute` *required* | `string` | — | | | `second` *required* | `string` | — | | | `sideFrom` *required* | `string` | — | Header of the two time columns in the range with time of day. | | `sideTo` *required* | `string` | — | | | `startHour` *required* | `string` | — | Accessible name of the time fields, per side. | | `startMinute` *required* | `string` | — | | | `startSecond` *required* | `string` | — | | | `endHour` *required* | `string` | — | | | `endMinute` *required* | `string` | — | | | `endSecond` *required* | `string` | — | | | `timeFieldIncrease` *required* | `(feld: string) => string` | — | Stepper buttons of a time field; the label comes from above. | | `timeFieldDecrease` *required* | `(feld: string) => string` | — | | | `chooseStartDate` *required* | `string` | — | Footer of the range panels. | | `chooseEndDate` *required* | `string` | — | | | `days` *required* | `(count: number) => string` | — | "3 days" or "1 day" - the plural belongs to the language. | | `daysSelected` *required* | `(count: number) => string` | — | "3 days selected" | | `rangePreview` *required* | `(from: string, to: string, count: number) => string` | — | "17.03. – 19.03. · 3 days" while dragging; the dates come from the formats. | | `daysAllDay` *required* | `(count: number) => string` | — | "3 days (all day)" | | `duration` *required* | `(teile: readonly string[]) => string` | — | "Duration: 1 day 2 hrs 30 min" | | `hoursShort` *required* | `(count: number) => string` | — | | | `minutesShort` *required* | `(count: number) => string` | — | | | `timeMissingHint` *required* | `(timeOfDay: string) => string` | — | Daylight-saving change: the hour that does not exist. | | `timeMissingHintSide` *required* | `(side: string, timeOfDay: string) => string` | — | The same, with the side put in front ("From"/"To"). | | `timeAmbiguousHint` *required* | `string` | — | Daylight-saving change: the hour that occurs twice. | | `timeAmbiguousHintSide` *required* | `(side: string) => string` | — | | | `timeEarlier` *required* | `(versatz: string) => string` | — | | | `timeLater` *required* | `(versatz: string) => string` | — | | | `weekdays` *required* | `readonly string[]` | — | The calendar's weekday headers, starting at Monday. | | `presets` *required* | `{ today: string; yesterday: string; last7Days: string; last30Days: string; thisMonth: string; previousMonth: string; thisQuarter: string; thisYear: string; }` | — | The quick-select ranges, in the order of PRESET_LABELS. | | `pagination` *required* | `string` | — | | | `rows` *required* | `string` | — | | | `rowsPerPage` *required* | `string` | — | | | `pageOfPages` *required* | `(page: number, total: number, formatted?: { page: string; total: string }) => string` | — | "Page 2 of 7". `formatted` carries both numbers in the provider's formats, where the caller has them - a table over a server has "Page 1 of 100,000". | | `previousPage` *required* | `string` | — | | | `nextPage` *required* | `string` | — | | | `filterReset` *required* | `string` | — | The two buttons in the column filter's footer. | | `filterDone` *required* | `string` | — | | | `columns` *required* | `string` | — | The column menu's button. | | `arrangeColumns` *required* | `string` | — | Accessible name of the list in the column menu. | | `columnForward` *required* | `(column: string) => string` | — | The two buttons that move a column in the column menu. | | `columnBackward` *required* | `(column: string) => string` | — | | | `pinColumnToStart` *required* | `(column: string) => string` | — | The column menu's pin keys: to a side, and back when it is pinned there. | | `pinColumnToEnd` *required* | `(column: string) => string` | — | | | `unpinColumn` *required* | `(column: string) => string` | — | | | `columnForwardHint` *required* | `string` | — | The tooltips over those four keys: short, without the column, which stands in the same line. The keys' names above keep it for a screen reader. | | `columnBackwardHint` *required* | `string` | — | | | `pinToStartHint` *required* | `string` | — | | | `pinToEndHint` *required* | `string` | — | | | `unpinHint` *required* | `string` | — | | | `exportLabel` *required* | `string` | — | The export button. | | `exportPageLabel` *required* | `string` | — | The export button of a table in server mode, which holds and writes one page. | | `exportFileName` *required* | `string` | — | The export's file name, where the application names none. | | `tableSearchPlaceholder` *required* | `string` | — | Placeholder and accessible name of the search field. | | `tableSearchLabel` *required* | `string` | — | | | `filterColumn` *required* | `(column: string) => string` | — | The filter button of a column: "Filter Region". | | `filterHint` *required* | `string` | — | The tooltip over that button. | | `selectRow` *required* | `(row: string) => string` | — | The selection of one row, named after its row header. | | `selectAllRows` *required* | `string` | — | The selection of every row in the filtered set. | | `selectAllOnPage` *required* | `string` | — | The same checkbox in server mode, where the table holds one page of a server's. | | `expandRowNamed` *required* | `(row: string) => string` | — | The expand button, named after the row header. | | `collapseRowNamed` *required* | `(row: string) => string` | — | | | `rowActions` *required* | `string` | — | Header of the actions column - for the screen reader, not visible. | | `rowAction` *required* | `(aktion: string, row: string) => string` | — | One action on a row: "Open: A-2041". | | `rowActionsMenu` *required* | `(row: string) => string` | — | The menu holding a row's actions. | | `editCell` *required* | `(column: string, row: string) => string` | — | The editor of a cell in a table's grid mode, named after its column and its row: "Edit Budget: Marketing". | | `newRow` *required* | `string` | — | The button above a grid that opens an empty row to fill in, and the name of that row while it has none ([ADR-0036](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0036-a-grid-edits-on-the-first-click-and-saves-rows-on-purpose.md)). | | `saveRow` *required* | `string` | — | A row draft's buttons, named with the row through `rowAction`. | | `discardRow` *required* | `string` | — | | | `deleteRow` *required* | `string` | — | A row's delete button, and its question once pressed: Delete? Delete / Keep. | | `deleteRowAsk` *required* | `string` | — | | | `keepRow` *required* | `string` | — | | | `saveOrDiscardFirst` *required* | `string` | — | Said where someone tries to leave a row draft unsaved. | | `cellAbsentValue` *required* | `string` | — | What the screen reader hears for an absent value. Visibly a muted dash stands there. | | `booleanYes` *required* | `string` | — | A boolean without a presentation of its own. | | `booleanNo` *required* | `string` | — | | | `footerSum` *required* | `string` | — | The kind of a footer number, read out before the number. | | `footerAverage` *required* | `string` | — | | | `footerMinimum` *required* | `string` | — | | | `footerMaximum` *required* | `string` | — | | | `footerRange` *required* | `string` | — | | | `footerCount` *required* | `string` | — | | | `footerDistinct` *required* | `string` | — | | | `footerAggregate` *required* | `string` | — | An aggregate the application computes itself. | | `grouping` *required* | `string` | — | The grouping section of the column menu, and the menu entry per column. | | `groupBy` *required* | `(label: string) => string` | — | | | `groupedBy` *required* | `string` | — | The grouping's tag in the table toolbar: "Grouped by" Region › Customer. | | `removeGrouping` *required* | `string` | — | | | `removeGroupingLevel` *required* | `(label: string) => string` | — | | | `foldAll` *required* | `string` | — | | | `unfoldAll` *required* | `string` | — | | | `groupNoValue` *required* | `string` | — | The group of rows without a value. | | `groupContinued` *required* | `string` | — | Beside a group repeated at the top of a page that begins inside it. | | `foldGroup` *required* | `(name: string, count: string) => string` | — | The fold of a group, with its value and its count. | | `unfoldGroup` *required* | `(name: string, count: string) => string` | — | | | `foldBranch` *required* | `(row: string) => string` | — | The fold of a branch in a table with tree rows, named after its row - not `expandRowNamed`, which names the row detail's expander on the same row. | | `unfoldBranch` *required* | `(row: string) => string` | — | | | `levelColumn` *required* | `string` | — | The first column of a tree's export. | | `pathRow` *required* | `string` | — | A row shown only because a descendant matches the search or a filter. | | `footerTopLevel` *required* | `string` | — | The footer of a tree: it sums the top level, since a parent holds its children. | | `selectGroup` *required* | `(name: string) => string` | — | The box that selects every row of a group. | | `calendarWeek` *required* | `(week: number, year: number) => string` | — | A group of the week key: "Week 42, 2026". | | `entries` *required* | `(count: number, formatted: string) => string` | — | "128 entries" in the pagination bar; the plural belongs to the language. | | `selectedCount` *required* | `(count: number, formatted: string) => string` | — | "3 selected" in the pagination bar and the table toolbar. | | `copiedRows` *required* | `(count: number, formatted: string) => string` | — | Said to a screen reader after Ctrl+C copied rows: "3 rows copied". | | `copiedCell` *required* | `string` | — | Said after Ctrl+C copied the active cell of a grid. | | `copyFailed` *required* | `string` | — | Said when the clipboard refused or is not there. | | `noEntries` *required* | `string` | — | Empty because there are no rows. | | `nothingMatchesFilters` *required* | `string` | — | Empty because search and filters leave nothing - something else. | | `treeSearchPlaceholder` *required* | `string` | — | | | `treeNoMatches` *required* | `string` | — | | | `conditions` *required* | `string` | — | Group name of the conditions in the table toolbar. | | `removeConditionNamed` *required* | `(label: string, value: string) => string` | — | The button that removes a condition: "Remove Region: EU, US". | | `editConditionNamed` *required* | `(label: string, value: string) => string` | — | The condition itself, which opens its filter: "Edit Region: EU, US". | | `moreValues` *required* | `(count: number, formatted: string) => string` | — | The remainder of a long list in a condition: "+1". | | `filterFrom` *required* | `string` | — | The two fields of the range filter. | | `filterTo` *required* | `string` | — | | | `rangeFromTo` *required* | `(from: string, to: string) => string` | — | The condition of a range filter: "100–500", "from 100", "to 500". | | `rangeFrom` *required* | `(from: string) => string` | — | | | `rangeTo` *required* | `(to: string) => string` | — | | | `rangeInvalid` *required* | `string` | — | When "From" lies behind "To". The condition stays the last valid one. | | `resetAll` *required* | `string` | — | Clears search and conditions - in the table toolbar and in the empty body. | | `filteredOfTotal` *required* | `(matches: string, total: string) => string` | — | "43 of 1.204" - the numbers come from the formats. | | `verdictOk` *required* | `string` | — | The four outcomes of an assessment, as a word beside the value. Colour alone carries no meaning - the word stands here for that reason.
Shown in: [Replace single entries (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#single-entries) | | `verdictWarning` *required* | `string` | — |
Shown in: [Replace single entries (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#single-entries) | | `verdictAlarm` *required* | `string` | — |
Shown in: [Replace single entries (Language)](https://romanhaendler.github.io/umriss-ui/core/language/#single-entries) | | `verdictUnknown` *required* | `string` | — | | | `statAbsentValue` *required* | `string` | — | What stands in the value field when there is no value. No dash, no zero: either could be a value. | | `target` *required* | `string` | — | | | `deviationAbove` *required* | `(betrag: string) => string` | — | "3,2 above target" or "1,5 below target" - the amount comes from the formats, which is where the comma is from. | | `deviationBelow` *required* | `(betrag: string) => string` | — | | | `deviationOnTarget` *required* | `string` | — | | | `freshnessFresh` *required* | `string` | — | The three freshness states. They are a DIFFERENT axis from the verdict: a stale value keeps its verdict ([ADR-0010](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0010-a-stale-value-keeps-its-verdict.md)). | | `freshnessStale` *required* | `string` | — | | | `freshnessDisconnected` *required* | `string` | — | | | `asOfAgo` *required* | `(duration: string) => string` | — | "As of: 3 minutes ago", where the duration comes from the formats. | | `close` *required* | `string` | — | | | `closeToast` *required* | `string` | — | | | `toastDeckCount` *required* | `(count: number) => string` | — | The count on the front toast of a closed deck; pressing it shows them all. | | `toastRegion` *required* | `string` | — | The name of the toasts' region, which Alt+T moves the focus into. | | `confirm` *required* | `string` | — | | | `cancel` *required* | `string` | — | | | `loading` *required* | `string` | — | | | `fillLevel` *required* | `string` | — | Generic name of a fill-level bar, where the caller names none. | | `progress` *required* | `string` | — | Generic name of a progress bar, where the caller names none. | | `breadcrumb` *required* | `string` | — | The accessible name of a breadcrumb's navigation landmark. | | `breadcrumbFolded` *required* | `string` | — | The key that opens a breadcrumb's folded middle levels as a menu. | | `splitter` *required* | `string` | — | The separator between a splitter's panes, where the caller names none - a caller who can should name the first pane instead (APG). | | `stepDone` *required* | `string` | — | A stepper's step that is behind it, said beside its label to a screen reader; the current step is `aria-current` and needs no word. | | `stepUpcoming` *required* | `string` | — | A step still ahead. | | `stepFailed` *required* | `string` | — | A step that failed - behind the current one or the current one itself. | | `chooseFile` *required* | `string` | — | The key of a file input that takes one file - and its name where no field names it. | | `chooseFiles` *required* | `string` | — | The same key where it takes several. | | `dropFile` *required* | `string` | — | The words beside the key that say the zone takes a drop. | | `dropFiles` *required* | `string` | — | | | `removeFile` *required* | `(name: string) => string` | — | The cross beside a chosen file. | | `fileNotAccepted` *required* | `(name: string) => string` | — | A dropped file the input's `accept` does not take. | | `show` *required* | `string` | — | | | `hide` *required* | `string` | — | | | `moreActions` *required* | `string` | — | | | `remove` *required* | `string` | — | The cross on a tag without text content. | | `removeTag` *required* | `(beschriftung: string) => string` | — | The cross on a tag with text content. | | `scheduleOverlap` *required* | `string` | — | The two findings, named on the ghost of a drag. | | `scheduleViolatedDependency` *required* | `string` | — | | | `scheduleGhostTimes` *required* | `(from: string, to: string) => string` | — | The new times on the ghost: "08:15–10:00" - the times come from the formats. | | `scheduleLeadIn` *required* | `string` | — | The parts of a subtask and a dependency, named in the tooltip. | | `scheduleLeadOut` *required* | `string` | — | | | `scheduleDependency` *required* | `string` | — | | | `scheduleRoute` *required* | `(from: string, to: string) => string` | — | "A-2041-1 → A-2041-2": the two subtasks a dependency joins. | | `scheduleOverlapWith` *required* | `(other: string) => string` | — | "Overlap with A-2043-2" - the other subtask on the lane. | | `scheduleViolatedBy` *required* | `(amount: string) => string` | — | "Violated dependency, 15 min short" - the amount from `minutesShort`. | | `scheduleLaneRefused` *required* | `string` | — | On the ghost of a drag over a lane the subtask may not go to. | | `scheduleBlockedTime` *required* | `string` | — | On the ghost of a drag held back from a lane's blocked time. | | `scheduleInBlockedTime` *required* | `(label: string \| undefined) => string` | — | "In blocked time (Leave)" - a subtask covering its lane's blocked time, with the blocked time's label where it has one. | | `scheduleMilestone` *required* | `(name: string) => string` | — | "Milestone: Release" - a milestone named by its label (or id), so that the tooltip and the spoken readout say what kind of thing it is. | | `scheduleFoldGroup` *required* | `string` | — | The chevron of a lane group's header, which folds it into one row and unfolds it again. The group's own label stands beside the button, so the name is what the ACTION is, not which group it acts on. | | `scheduleUnfoldGroup` *required* | `string` | — | | | `scheduleLaneCount` *required* | `(count: number) => string` | — | How many lanes a group holds, beside its name in the header. | | `scheduleRoleDescription` *required* | `string` | — | What a screen reader calls the plot that takes the keys (`aria-roledescription`, schedule-a11y S1). | | `scheduleSummary` *required* | `(summary: { lanes: number; subtasks: number; from: string; to: string; overlaps: number; violated: number; /** Subtasks in blocked time; said only where there are any. */ blocked: number; /** Milestones of the plan; said only where there are any. */ milestones: number; }) => string` | — | The plot's description (S6): the lanes, the subtasks in view, the visible span with both ends formatted, and the findings of the plan by kind. | | `scheduleKeyHelp` *required* | `string` | — | The keys that walk the plot, select and edit - read after the summary. | | `dashboardEdit` *required* | `string` | — | The editing bar's buttons and the label that says the mode is on. | | `dashboardEditing` *required* | `string` | — | | | `dashboardCancel` *required* | `string` | — | | | `dashboardDone` *required* | `string` | — | | | `dashboardUndo` *required* | `string` | — | | | `dashboardRedo` *required* | `string` | — | | | `dashboardReset` *required* | `string` | — | | | `dashboardMenu` *required* | `(title: string) => string` | — | The name of a widget's menu button: the widget's title is the thing. | | `dashboardPlace` *required* | `(place: number, of: number) => string` | — | At the top of the menu, and in the name of a head the arrow keys move. | | `dashboardHead` *required* | `(title: string, place: number, of: number) => string` | — | | | `dashboardMoveStart` *required* | `string` | — | | | `dashboardMoveEarlier` *required* | `string` | — | | | `dashboardMoveLater` *required* | `string` | — | | | `dashboardMoveEnd` *required* | `string` | — | | | `dashboardRemove` *required* | `string` | — | | | `dashboardSizes` *required* | `{ small: string; medium: string; wide: string; tall: string; large: string; full: string }` | — | The closed set of size names, worded once for every widget type. | | `dashboardSizeEntry` *required* | `(size: string, share: string, current: boolean) => string` | — | A size's entry in a widget's menu: its name and its share of the width (`share` is "¼" or "5/12", empty for the whole width); `current` marks the size the widget stands at. | | `dashboardHeadingLabel` *required* | `string` | — | The built-in heading type: its name, its sentence in the catalogue, the text a new heading starts with and the label of its text field. | | `dashboardHeadingSentence` *required* | `string` | — | | | `dashboardHeadingText` *required* | `string` | — | | | `dashboardHeadingField` *required* | `string` | — | | | `dashboardLeft` *required* | `string` | — | Said when "Done" leaves the mode and nothing was changed. | | `dashboardMoved` *required* | `(title: string, from: number, to: number, of: number) => string` | — | What is spoken after a change. | | `dashboardDragCancelled` *required* | `(title: string) => string` | — | | | `dashboardResized` *required* | `(title: string, size: string) => string` | — | | | `dashboardRemoved` *required* | `(title: string) => string` | — | | | `dashboardKept` *required* | `string` | — | | | `dashboardCancelled` *required* | `string` | — | | | `dashboardAddWidget` *required* | `string` | — | The catalogue and the options. | | `dashboardCatalogue` *required* | `string` | — | | | `dashboardCatalogueSentence` *required* | `string` | — | | | `dashboardAdd` *required* | `string` | — | | | `dashboardAddType` *required* | `(label: string) => string` | — | | | `dashboardFootprint` *required* | `(columns: number, rows: number) => string` | — | | | `dashboardAdded` *required* | `(title: string, place: number, of: number) => string` | — | | | `dashboardOptions` *required* | `string` | — | | | `dashboardOptionsChanged` *required* | `(title: string) => string` | — | | | `dashboardEmpty` *required* | `string` | — | | | `dashboardEmptyEditing` *required* | `string` | — | | | `dashboardFailed` *required* | `string` | — | | | `dashboardUndone` *required* | `string` | — | | | `dashboardRedone` *required* | `string` | — | | | `dashboardResetDone` *required* | `string` | — | | | `calculationSumSymbol` *required* | `string` | — | The four operators as symbols in a formula line. | | `calculationDifferenceSymbol` *required* | `string` | — | | | `calculationProductSymbol` *required* | `string` | — | | | `calculationQuotientSymbol` *required* | `string` | — | | | `calculationSumWord` *required* | `string` | — | The same four as words, in the accessible sentence of a line. | | `calculationDifferenceWord` *required* | `string` | — | | | `calculationProductWord` *required* | `string` | — | | | `calculationQuotientWord` *required* | `string` | — | | | `calculationEquals` *required* | `string` | — | Between the parts of the sentence: "Availability equals ...". | | `calculationApproximately` *required* | `string` | — | Before a result marked "≈" in the sentence. | | `calculationApproximateNote` *required* | `string` | — | Beside a result marked "≈": why the rounded operands do not give it. | | `calculationPercent` *required* | `string` | — | How a percentage is read out: "91.6 percent". | | `calculationMissing` *required* | `(label: string) => string` | — | Why a quantity has no number - the label is the given at the root of it, or the divisor that is zero. | | `calculationDivisionByZero` *required* | `(label: string) => string` | — | | | `calculationAboveTarget` *required* | `(target: string) => string` | — | The target beside the result, with the target's number and unit. | | `calculationBelowTarget` *required* | `(target: string) => string` | — | | | `calculationOnTarget` *required* | `(target: string) => string` | — | | | `calculationWorstInside` *required* | `(verdict: string) => string` | — | The quiet marker on a folded quantity whose derivation holds a worse verdict than its own; the verdict word comes from `verdict*`. | | `calculationSource` *required* | `(source: string) => string` | — | Where a given number came from. | | `calculationShowDerivation` *required* | `(label: string) => string` | — | The disclosure button of a derivation, named after the quantity. | | `calculationHideDerivation` *required* | `(label: string) => string` | — | | | `calculationOperandCount` *required* | `(count: number) => string` | — | On a folded line whose operator has more operands than are written out beneath it ([ADR-0028](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0028-a-calculation-is-a-tree-or-a-chain.md)): how many there are. | | `calculationNoOperands` *required* | `string` | — | On the line of a sum with no operands, where its formula would stand ([ADR-0049](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0049-a-sum-takes-rows-from-data.md)). | Used on [Language](https://romanhaendler.github.io/umriss-ui/core/language/). ## @umriss-ui/core/wording/de ### `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](https://romanhaendler.github.io/umriss-ui/core/language/#format) on the Language page. ```ts const GERMAN_FORMATS: Formats; ``` Used on [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/) and [Language](https://romanhaendler.github.io/umriss-ui/core/language/). ### `GERMAN_WORDING` The German instance. Complete, because it is typed `Wording`. Every entry, with its value, stands in the table [Wording](https://romanhaendler.github.io/umriss-ui/core/language/#wording) on the Language page. ```ts const GERMAN_WORDING: Wording; ``` Used on [UmrissProvider](https://romanhaendler.github.io/umriss-ui/core/umrissprovider/) and [Language](https://romanhaendler.github.io/umriss-ui/core/language/). ## Types on this page ### `FormFieldContextValue` | Prop | Type | Default | Description | |---|---|---|---| | `id` *required* | `string` | — | | | `labelId` *required* | `string` | — | The label's own id. `label htmlFor` names only what HTML can label - an input, a select, a button; a group (`role="radiogroup"`) is named through `aria-labelledby` with this. | | `describedBy` | `string` | — | | | `invalid` *required* | `boolean` | — | | | `required` *required* | `boolean` | — | A required field. Every field whose role carries it turns this into `aria-required` - just as it does with `aria-describedby` and `aria-invalid`. | ### `ToastContextValue` | Prop | Type | Default | Description | |---|---|---|---| | `toast` *required* | `(options: `[`ToastOptions`](https://romanhaendler.github.io/umriss-ui/core/toast/#type-ToastOptions)`) => number` | — | Shows a toast and returns its id.
Shown in: [Show a toast (Toast)](https://romanhaendler.github.io/umriss-ui/core/toast/#show-a-toast), [Tones (Toast)](https://romanhaendler.github.io/umriss-ui/core/toast/#tones), [Undo (Toast)](https://romanhaendler.github.io/umriss-ui/core/toast/#undo) and 10 more | | `update` *required* | `(id: number, options: Partial<`[`ToastOptions`](https://romanhaendler.github.io/umriss-ui/core/toast/#type-ToastOptions)`>) => void` | — | Changes a standing toast. A new tone or a new `duration` starts its time afresh - so a `loading` toast turned into `success` begins to count then. An id that no longer stands is ignored: a timed toast that gave way to newer ones has said so through `onClose`. A `loading` toast turned into its outcome counts toward the limit from the next arrival on; `update` itself pushes nothing out.
Shown in: [Save, and say how it went (Toast)](https://romanhaendler.github.io/umriss-ui/core/toast/#save-with-loading) | | `dismiss` *required* | `(id: number) => void` | — | Closes a toast, with the reason `dismiss`. | ### `Instant` What may come in as an as-of time or a reference time. ```ts type Instant = Date | number | null | undefined; ```