# Ropav

> Accessible Vue 3 components for Vapor Mode, with the keyboard, focus and screen-reader
> behaviour implemented rather than approximated.

Ropav components are compound: a family root provides context and named parts
arrange inside it. The arrangement is the API, and it is not guessable from the names.

- A part only works inside its root. Contexts are strict, so a part rendered outside its family
  throws during setup rather than degrading. There is no standalone SelectTrigger.
- Collections arrive as data, not as children. Select takes a required `items` array;
  `item-text-value` is the string typeahead matches and `item-key` is the identity.
- Overlays take a positional trigger. Modal, Popover, Dropdown, Drawer and AlertDialog make their
  first child the trigger. There is no trigger slot.
- The part holding the state is not always the root. Table takes `class` and `variant`;
  TableContent owns `aria-label`, `selection-mode`, `v-model:selected-keys` and
  `v-model:sort-descriptor`.
- An indicator belongs to its item. TabsIndicator goes inside each TabsTab, ListBoxItemIndicator
  inside ListBoxItem, MenuItemIndicator inside MenuItem.
- Menu parts are shared. There is no DropdownItem — compose MenuItem inside DropdownMenu.
- Menu is the open list and needs its own Surface; Dropdown is that menu in a popover.
- Every collection item needs an `id`, and a `text-value` when its content is not plain text.
- Props are camelCase in the types and kebab-case in a template: `itemTextValue` is written
  `item-text-value`.
- Every component forwards `class`, `aria-label`, `aria-labelledby` and `aria-describedby`;
  those are not repeated per component.

- [Full reference](https://ropav.netlify.app/llms-full.txt): every family's arrangement and props, in one file.

## Start here

- [Accessibility](https://ropav.netlify.app/guide/accessibility): What the library guarantees, what it audits, and what stays yours.
- [Calendar systems](https://ropav.netlify.app/guide/calendar-systems): Why dates are Gregorian by default, and what it costs to change that.
- [Composables](https://ropav.netlify.app/guide/composables): The behaviour the components are built from, for building your own.
- [Introduction](https://ropav.netlify.app/guide/): What Ropav is, and what it is made of.
- [Installation](https://ropav.netlify.app/guide/installation): The package, the stylesheet, and how to import less of it.
- [The rest of the components](https://ropav.netlify.app/guide/storybook): Where to find what these pages do not cover yet.
- [Vapor mode](https://ropav.netlify.app/guide/vapor): What compiling without a virtual DOM changes for you, and the one line a VDOM app needs.

## Patterns

- [App shell](https://ropav.netlify.app/patterns/app-shell): A collapsing sidebar, a header that says where you are, and the account menu.
- [Async states](https://ropav.netlify.app/patterns/async): Loading, failed and empty around one collection, and the rule that only one of them shows.
- [Data table](https://ropav.netlify.app/patterns/data-table): Search, bulk actions, sorting, selection and pagination around one table.
- [Form](https://ropav.netlify.app/patterns/form): Fields in a fieldset, reporting what the browser rejected and what the server did.
- [Patterns](https://ropav.netlify.app/patterns/): Whole screen fragments, built from several component families at once.
- [Overlays](https://ropav.netlify.app/patterns/overlays): A menu, a drawer and a confirm dialog over one row, each reporting through a toast.
- [Scheduling](https://ropav.netlify.app/patterns/scheduling): A date and a time held separately, joined into one instant only where it is needed.
- [Settings](https://ropav.netlify.app/patterns/settings): Tabs over several sections of fields that share one save.
- [Upload](https://ropav.netlify.app/patterns/upload): A drop zone, a file list with progress, and the refusals the zone will not report.

## Components

- [Accordion](https://ropav.netlify.app/components/accordion): A stack of sections, each opening under its own heading.
- [AlertDialog](https://ropav.netlify.app/components/alert-dialog): A dialog that asks for a decision and will not take silence for an answer.
- [Alert](https://ropav.netlify.app/components/alert): A message about the state of something, in five statuses.
- [Autocomplete](https://ropav.netlify.app/components/autocomplete): A select whose options can be narrowed by typing.
- [AvatarGroup](https://ropav.netlify.app/components/avatar-group): A set of avatars in the space of not many more than one.
- [Avatar](https://ropav.netlify.app/components/avatar): A portrait with something to show while it is not there.
- [Badge](https://ropav.netlify.app/components/badge): A count or a dot pinned to the corner of something else.
- [Breadcrumbs](https://ropav.netlify.app/components/breadcrumbs): The trail back up, with the current page at the end of it.
- [ButtonGroup](https://ropav.netlify.app/components/button-group): Several buttons joined into one control.
- [Button](https://ropav.netlify.app/components/button): A button fires an action, in seven variants and four sizes.
- [Calendar](https://ropav.netlify.app/components/calendar): A month grid for choosing a date.
- [Card](https://ropav.netlify.app/components/card): A surface that groups related content, in four depths.
- [CheckboxGroup](https://ropav.netlify.app/components/checkbox-group): Several checkboxes under one name, one validation state and one message.
- [Checkbox](https://ropav.netlify.app/components/checkbox): A box that is on, off, or standing for a mixed set below it.
- [Chip](https://ropav.netlify.app/components/chip): A small standalone label, for a status or a category.
- [CloseButton](https://ropav.netlify.app/components/close-button): The button that dismisses whatever it sits in.
- [ColorArea](https://ropav.netlify.app/components/color-area): Two colour channels on two axes, with one thumb between them.
- [ColorField](https://ropav.netlify.app/components/color-field): A colour typed in, as a hex value or as one channel.
- [ColorPicker](https://ropav.netlify.app/components/color-picker): One colour, shared with every colour control under it.
- [ColorSlider](https://ropav.netlify.app/components/color-slider): One channel of a colour, on a track painted with the values it can take.
- [ColorSwatchPicker](https://ropav.netlify.app/components/color-swatch-picker): A set of colours to choose from, rather than a whole colour space.
- [ColorSwatch](https://ropav.netlify.app/components/color-swatch): One colour, shown and named.
- [ComboBox](https://ropav.netlify.app/components/combo-box): A text field that filters a list as you type.
- [DateField](https://ropav.netlify.app/components/date-field): A date typed in segments, with no calendar attached.
- [DatePicker](https://ropav.netlify.app/components/date-picker): A date, typed in segments or picked from a calendar.
- [DateRangePicker](https://ropav.netlify.app/components/date-range-picker): Two dates, typed or picked from one calendar.
- [DisclosureGroup](https://ropav.netlify.app/components/disclosure-group): Several disclosures that answer to one another.
- [Disclosure](https://ropav.netlify.app/components/disclosure): A heading that opens the section under it.
- [Drawer](https://ropav.netlify.app/components/drawer): A dialog that slides in from an edge of the screen.
- [DropZone](https://ropav.netlify.app/components/drop-zone): A target for files, from a drag or from the picker.
- [Dropdown](https://ropav.netlify.app/components/dropdown): A menu of actions, anchored to the control that opened it.
- [EmptyState](https://ropav.netlify.app/components/empty-state): The message that stands in for a collection with nothing in it.
- [Fieldset](https://ropav.netlify.app/components/fieldset): A real fieldset, for fields that share a legend and a disabled state.
- [Components](https://ropav.netlify.app/components/): Every component the library ships, and where each one is documented.
- [InputGroup](https://ropav.netlify.app/components/input-group): An input with something fixed attached to it.
- [InputOTP](https://ropav.netlify.app/components/input-otp): A one-time code, one character per box.
- [Input](https://ropav.netlify.app/components/input): The control a text field is built around.
- [Kbd](https://ropav.netlify.app/components/kbd): A keyboard shortcut, with the modifiers spelled out for a reader.
- [Link](https://ropav.netlify.app/components/link): An anchor with the library's press, hover and focus behaviour, and a way into your router.
- [ListBox](https://ropav.netlify.app/components/list-box): A list you choose from, in place on the page.
- [Menu](https://ropav.netlify.app/components/menu): A list of actions, keyboard-navigable, usually inside a dropdown.
- [Meter](https://ropav.netlify.app/components/meter): A quantity inside a known range, like storage used or budget spent.
- [Modal](https://ropav.netlify.app/components/modal): A dialog that takes over the page until it is answered.
- [NumberField](https://ropav.netlify.app/components/number-field): A number, with steppers and locale-aware formatting.
- [Pagination](https://ropav.netlify.app/components/pagination): The controls for moving through a long list a page at a time.
- [Popover](https://ropav.netlify.app/components/popover): A small dialog anchored to the thing that opened it.
- [ProgressBar](https://ropav.netlify.app/components/progress-bar): How far along a task is, on a horizontal track.
- [ProgressCircle](https://ropav.netlify.app/components/progress-circle): The same reading as a progress bar, drawn as a ring.
- [RadioGroup](https://ropav.netlify.app/components/radio-group): One choice out of a few, with the group owning the state.
- [RangeCalendar](https://ropav.netlify.app/components/range-calendar): A month grid for choosing a start and an end together.
- [ScrollShadow](https://ropav.netlify.app/components/scroll-shadow): A scrolling box that fades the edge it has content past.
- [SearchField](https://ropav.netlify.app/components/search-field): A text field that knows it is a search, with a clear button and an Escape key.
- [SegmentedControl](https://ropav.netlify.app/components/segmented-control): A few mutually exclusive choices, laid out as one track.
- [Select](https://ropav.netlify.app/components/select): A choice from a list, in a popover that stays inside the viewport.
- [Separator](https://ropav.netlify.app/components/separator): A rule between things that belong to different groups.
- [Sidebar](https://ropav.netlify.app/components/sidebar): An application shell that collapses, remembers its width, and gets out of the way.
- [Skeleton](https://ropav.netlify.app/components/skeleton): A placeholder in the shape of what is coming.
- [Slider](https://ropav.netlify.app/components/slider): A value picked from a range, with one thumb or two.
- [Spinner](https://ropav.netlify.app/components/spinner): An indeterminate wait, in five sizes.
- [Splitter](https://ropav.netlify.app/components/splitter): Resizable panels, with a divider you can drag, type at, or leave alone.
- [Surface](https://ropav.netlify.app/components/surface): A background fill and the foreground colour that belongs on it.
- [SwitchGroup](https://ropav.netlify.app/components/switch-group): Layout for a run of switches, along either axis.
- [Switch](https://ropav.netlify.app/components/switch): A control that takes effect as you flip it.
- [Table](https://ropav.netlify.app/components/table): Rows and columns, with selection, sorting and resizing as parts rather than flags.
- [Tabs](https://ropav.netlify.app/components/tabs): One panel at a time, with the tab list as a single stop in the tab order.
- [TagGroup](https://ropav.netlify.app/components/tag-group): A set of tags that can be selected, removed, or just read.
- [TextArea](https://ropav.netlify.app/components/textarea): A multi-line text input, sized and styled like the fields beside it.
- [TextField](https://ropav.netlify.app/components/textfield): A single-line text input, with its label, description and error kept together.
- [TimeField](https://ropav.netlify.app/components/time-field): A time typed in segments, hours through to seconds.
- [Toast](https://ropav.netlify.app/components/toast): A message that arrives after the fact, and leaves on its own.
- [ToggleButtonGroup](https://ropav.netlify.app/components/toggle-button-group): Buttons that stay pressed, sharing one selection.
- [ToggleButton](https://ropav.netlify.app/components/toggle-button): A button that stays pressed, for a setting you can see the state of.
- [Toolbar](https://ropav.netlify.app/components/toolbar): A row of controls that a keyboard leaves in one press.
- [Tooltip](https://ropav.netlify.app/components/tooltip): A short label that appears on hover or focus, and never holds anything interactive.
- [Typography](https://ropav.netlify.app/components/typography): One scale for every piece of text, with the semantics kept separate from the size.

## Theming

- [Class names](https://ropav.netlify.app/theming/class-names): The prefixed BEM scheme, and why a utility passed through `class` just works.
- [Custom themes](https://ropav.netlify.app/theming/custom-theme): Overriding the default palette, or adding one of your own.
- [Forced colors](https://ropav.netlify.app/theming/forced-colors): The authoring rules for High Contrast, including the trap no computed style can see.
- [Theming](https://ropav.netlify.app/theming/): Two independent axes, and the palettes that ship with the library.
- [State colors](https://ropav.netlify.app/theming/state-colors): Retuning one state without flattening the rest.
- [Tokens](https://ropav.netlify.app/theming/tokens): The custom properties, and which of them survive a surface you can see through.
- [Variants](https://ropav.netlify.app/theming/variants): Going from props to class names without going through a component.