# Ropav — full reference

Generated from the library's own sources. The site is https://ropav.netlify.app.

```bash
npm install ropav
```

```ts
import "ropav/styles/bundled.css";
import { Button } from "ropav";
```

The published package also carries one subpath per family — `import { Button } from
"ropav/button"` — so a bundler drops what is never imported.

## Rules

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.

# Patterns

Whole screen fragments, each a single file that runs as it stands. The app shell is the
frame the others go inside: put them in its `SidebarInset`, which already sets `min-width:
0`, so a table wider than the room it is given scrolls rather than stopping the sidebar
collapsing. An overlay is teleported out of the inset, so that `overflow: hidden` never
clips a menu, a dialog or a toast.

## Pattern: app-shell

```vue
<script setup lang="ts">
import {
  Avatar,
  AvatarFallback,
  Breadcrumbs,
  BreadcrumbsItem,
  Button,
  Dropdown,
  DropdownMenu,
  DropdownPopover,
  IconCalendar,
  IconSearch,
  InfoIcon,
  Label,
  MenuItem,
  Separator,
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarItem,
  SidebarItemIcon,
  SidebarItemLabel,
  SidebarItemTooltip,
  SidebarPanel,
  SidebarRail,
  SidebarTrigger,
} from "ropav";
import { computed, shallowRef } from "vue";

const sections = [
  { id: "overview", name: "Overview" },
  { id: "search", name: "Search" },
  { id: "schedule", name: "Schedule" },
];

const current = shallowRef("overview");

const section = computed(() => sections.find((entry) => entry.id === current.value));
</script>

<template>
  <div class="frame">
    <Sidebar collapsible="icon">
      <SidebarPanel aria-label="Main">
        <SidebarHeader>Acme</SidebarHeader>

        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Workspace</SidebarGroupLabel>

            <SidebarItemTooltip label="Overview">
              <SidebarItem
                :aria-current="current === 'overview' ? 'page' : undefined"
                @press="current = 'overview'"
              >
                <SidebarItemIcon><InfoIcon /></SidebarItemIcon>
                <SidebarItemLabel>Overview</SidebarItemLabel>
              </SidebarItem>
            </SidebarItemTooltip>

            <SidebarItemTooltip label="Search">
              <SidebarItem
                :aria-current="current === 'search' ? 'page' : undefined"
                @press="current = 'search'"
              >
                <SidebarItemIcon><IconSearch /></SidebarItemIcon>
                <SidebarItemLabel>Search</SidebarItemLabel>
              </SidebarItem>
            </SidebarItemTooltip>

            <SidebarItemTooltip label="Schedule">
              <SidebarItem
                :aria-current="current === 'schedule' ? 'page' : undefined"
                @press="current = 'schedule'"
              >
                <SidebarItemIcon><IconCalendar /></SidebarItemIcon>
                <SidebarItemLabel>Schedule</SidebarItemLabel>
              </SidebarItem>
            </SidebarItemTooltip>
          </SidebarGroup>
        </SidebarContent>
      </SidebarPanel>

      <SidebarRail />

      <SidebarInset>
        <div class="bar">
          <SidebarTrigger />
          <Separator class="rule" orientation="vertical" />

          <Breadcrumbs>
            <BreadcrumbsItem href="#">Acme</BreadcrumbsItem>
            <BreadcrumbsItem>{{ section?.name }}</BreadcrumbsItem>
          </Breadcrumbs>

          <Dropdown>
            <Button aria-label="Account" class="account" size="sm" variant="tertiary">
              <Avatar size="sm">
                <AvatarFallback>AL</AvatarFallback>
              </Avatar>
            </Button>

            <DropdownPopover>
              <DropdownMenu>
                <MenuItem id="profile" text-value="Profile">
                  <Label>Profile</Label>
                </MenuItem>
                <MenuItem id="sign-out" text-value="Sign out" variant="danger">
                  <Label>Sign out</Label>
                </MenuItem>
              </DropdownMenu>
            </DropdownPopover>
          </Dropdown>
        </div>

        <div class="page">
          <div class="page__title">{{ section?.name }}</div>
          <div class="page__body">Whatever this section renders goes here.</div>
        </div>
      </SidebarInset>
    </Sidebar>
  </div>
</template>

<style scoped>
.frame {
  width: 100%;
  height: calc(var(--rp-spacing) * 80);
  overflow: hidden;
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
}

.bar {
  display: flex;
  gap: calc(var(--rp-spacing) * 2);
  align-items: center;
  padding: calc(var(--rp-spacing) * 3);
  border-bottom: 1px solid var(--rp-border);
}

.rule {
  height: calc(var(--rp-spacing) * 5);
}

/* Pushed to the far end, so the account sits opposite the trail whatever the trail says. */
.account {
  margin-inline-start: auto;
}

.page {
  padding: calc(var(--rp-spacing) * 6);
}

.page__title {
  font-size: var(--rp-text-lg);
  line-height: var(--rp-text-lg--line-height);
  font-weight: var(--rp-font-weight-semibold);
}

.page__body {
  margin-top: calc(var(--rp-spacing) * 2);
  font-size: var(--rp-text-sm);
  line-height: var(--rp-text-sm--line-height);
  color: var(--rp-muted);
}
</style>
```

## Pattern: async

```vue
<script setup lang="ts">
import {
  Alert,
  AlertContent,
  AlertDescription,
  AlertIndicator,
  AlertTitle,
  Button,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  EmptyState,
  Skeleton,
  Toolbar,
} from "ropav";
import { onBeforeUnmount, shallowRef } from "vue";

type Outcome = "empty" | "error" | "ready";

interface Project {
  id: string;
  name: string;
  owner: string;
  summary: string;
}

const ALL: Project[] = [
  { id: "atlas", name: "Atlas", owner: "Ada", summary: "Tiles the coastline survey." },
  { id: "beacon", name: "Beacon", owner: "Grace", summary: "Watches the ingest queue." },
  { id: "cinder", name: "Cinder", owner: "Alan", summary: "Rebuilds the search index nightly." },
];

const projects = shallowRef<Project[]>([]);
const error = shallowRef<null | string>(null);
const isLoading = shallowRef(true);

let timer: ReturnType<typeof setTimeout> | undefined;

onBeforeUnmount(() => clearTimeout(timer));

/* Stands in for the request. Only the three states it settles into are worth copying. */
const load = (outcome: Outcome) => {
  clearTimeout(timer);

  isLoading.value = true;
  error.value = null;

  timer = setTimeout(() => {
    isLoading.value = false;
    projects.value = outcome === "ready" ? ALL : [];
    error.value = outcome === "error" ? "The project service did not answer." : null;
  }, 1200);
};

load("ready");
</script>

<template>
  <div class="screen">
    <Toolbar aria-label="Load the projects">
      <Button :is-pending="isLoading" @click="load('ready')">Reload</Button>
      <Button :is-pending="isLoading" variant="secondary" @click="load('empty')">
        Return nothing
      </Button>
      <Button :is-pending="isLoading" variant="secondary" @click="load('error')">Fail</Button>
    </Toolbar>

    <!-- One of four, never two: loading wins, then the error, then the empty collection. -->
    <div v-if="isLoading" class="list">
      <Card v-for="placeholder in 3" :key="placeholder" class="card">
        <Skeleton class="line line--title" />
        <Skeleton class="line" />
      </Card>
    </div>

    <Alert v-else-if="error" status="danger">
      <AlertIndicator />
      <AlertContent>
        <AlertTitle>Could not load projects</AlertTitle>
        <AlertDescription>{{ error }}</AlertDescription>
      </AlertContent>
      <Button size="sm" @click="load('ready')">Try again</Button>
    </Alert>

    <EmptyState v-else-if="projects.length === 0">
      No projects yet. The first one you create lands here.
    </EmptyState>

    <div v-else class="list">
      <Card v-for="project in projects" :key="project.id" class="card">
        <CardHeader>
          <CardTitle>{{ project.name }}</CardTitle>
          <CardDescription>Kept by {{ project.owner }}</CardDescription>
        </CardHeader>
        <CardContent>{{ project.summary }}</CardContent>
      </Card>
    </div>
  </div>
</template>

<style scoped>
.screen {
  display: flex;
  max-width: var(--rp-container-md);
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 4);
}

.list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 3);
}

.card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 2);
}

/* Sized to the text it stands in for, so the list does not resize when the rows arrive. */
.line {
  height: calc(var(--rp-spacing) * 3);
  width: 70%;
  border-radius: var(--rp-radius);
}

.line.line--title {
  width: 35%;
}
</style>
```

## Pattern: data-table

```vue
<script setup lang="ts">
import type { CollectionSelection, TableSortDescriptor } from "ropav";

import {
  Button,
  Chip,
  ChipLabel,
  Dropdown,
  DropdownMenu,
  DropdownPopover,
  EmptyState,
  Label,
  MenuItem,
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationNextIcon,
  PaginationPrevious,
  PaginationPreviousIcon,
  PaginationSummary,
  SearchField,
  SearchFieldClearButton,
  SearchFieldGroup,
  SearchFieldInput,
  SearchFieldSearchIcon,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableContent,
  TableFooter,
  TableHeader,
  TableRow,
  TableScrollContainer,
  TableSelectionCheckbox,
  TableSortableColumnHeader,
  Toolbar,
} from "ropav";
import { computed, shallowRef, watch } from "vue";

const PAGE_SIZE = 4;

const STATUS_COLOR = { Active: "success", Invited: "warning", Suspended: "danger" } as const;

interface Member {
  id: string;
  name: string;
  role: string;
  status: keyof typeof STATUS_COLOR;
}

const members: Member[] = [
  { id: "1", name: "Ada Lovelace", role: "Owner", status: "Active" },
  { id: "2", name: "Grace Hopper", role: "Admin", status: "Active" },
  { id: "3", name: "Katherine Johnson", role: "Engineer", status: "Active" },
  { id: "4", name: "Radia Perlman", role: "Engineer", status: "Invited" },
  { id: "5", name: "Barbara Liskov", role: "Engineer", status: "Active" },
  { id: "6", name: "Margaret Hamilton", role: "Admin", status: "Suspended" },
  { id: "7", name: "Frances Allen", role: "Engineer", status: "Invited" },
  { id: "8", name: "Karen Spärck Jones", role: "Researcher", status: "Active" },
  { id: "9", name: "Shafi Goldwasser", role: "Researcher", status: "Active" },
];

const columns = [
  { id: "name", isRowHeader: true, name: "Member" },
  { id: "role", name: "Role" },
  { id: "status", name: "Status" },
];

const page = shallowRef(1);
const query = shallowRef("");
const selectedKeys = shallowRef<CollectionSelection>(new Set());
const sortDescriptor = shallowRef<TableSortDescriptor>({ column: "name", direction: "ascending" });

const matched = computed(() => {
  const needle = query.value.trim().toLowerCase();

  return members.filter((member) => `${member.name} ${member.role}`.toLowerCase().includes(needle));
});

// The table reports what was asked for and renders what it is handed; the ordering is yours.
const sorted = computed(() => {
  const { column, direction } = sortDescriptor.value;

  return [...matched.value].sort((a, b) => {
    const order = String(a[column as keyof Member]).localeCompare(
      String(b[column as keyof Member]),
    );

    return direction === "descending" ? -order : order;
  });
});

const pageCount = computed(() => Math.max(1, Math.ceil(sorted.value.length / PAGE_SIZE)));

const pages = computed(() => Array.from({ length: pageCount.value }, (_, index) => index + 1));

const rows = computed(() =>
  sorted.value.slice((page.value - 1) * PAGE_SIZE, page.value * PAGE_SIZE),
);

const selectedCount = computed(() =>
  selectedKeys.value === "all" ? sorted.value.length : selectedKeys.value.size,
);

// A narrowed search otherwise leaves the reader on a page that no longer exists.
watch(pageCount, (count) => {
  page.value = Math.min(page.value, count);
});
</script>

<template>
  <div class="screen">
    <Toolbar aria-label="Member actions" class="screen__header">
      <SearchField v-model:value="query" aria-label="Search members">
        <SearchFieldGroup>
          <SearchFieldSearchIcon />
          <SearchFieldInput placeholder="Search members…" />
          <SearchFieldClearButton />
        </SearchFieldGroup>
      </SearchField>

      <Button :is-disabled="selectedCount === 0" variant="secondary">
        Export{{ selectedCount ? ` (${selectedCount})` : "" }}
      </Button>

      <Dropdown>
        <Button variant="secondary">Actions</Button>

        <DropdownPopover>
          <DropdownMenu>
            <MenuItem id="invite" text-value="Resend invite">
              <Label>Resend invite</Label>
            </MenuItem>
            <MenuItem id="suspend" text-value="Suspend" variant="danger">
              <Label>Suspend</Label>
            </MenuItem>
          </DropdownMenu>
        </DropdownPopover>
      </Dropdown>
    </Toolbar>

    <Table class="frame">
      <TableScrollContainer>
        <TableContent
          v-model:selected-keys="selectedKeys"
          v-model:sort-descriptor="sortDescriptor"
          aria-label="Members"
          class="table"
          selection-mode="multiple"
        >
          <TableHeader>
            <TableColumn><TableSelectionCheckbox /></TableColumn>
            <TableColumn
              v-for="column in columns"
              :id="column.id"
              :key="column.id"
              v-slot="{ sortDirection }"
              allows-sorting
              :is-row-header="column.isRowHeader"
            >
              <TableSortableColumnHeader :sort-direction="sortDirection">
                {{ column.name }}
              </TableSortableColumnHeader>
            </TableColumn>
          </TableHeader>

          <TableBody>
            <template #empty>
              <EmptyState>No members match that search.</EmptyState>
            </template>

            <TableRow v-for="member in rows" :id="member.id" :key="member.id">
              <TableCell><TableSelectionCheckbox variant="secondary" /></TableCell>
              <TableCell>{{ member.name }}</TableCell>
              <TableCell>{{ member.role }}</TableCell>
              <TableCell>
                <Chip :color="STATUS_COLOR[member.status]" variant="soft">
                  <ChipLabel>{{ member.status }}</ChipLabel>
                </Chip>
              </TableCell>
            </TableRow>
          </TableBody>
        </TableContent>
      </TableScrollContainer>

      <TableFooter>
        <Pagination aria-label="Members" size="sm">
          <PaginationSummary>{{ sorted.length }} members</PaginationSummary>

          <PaginationContent>
            <PaginationItem>
              <PaginationPrevious :is-disabled="page === 1" @click="page -= 1">
                <PaginationPreviousIcon />
                <span>Previous</span>
              </PaginationPrevious>
            </PaginationItem>

            <PaginationItem v-for="entry in pages" :key="entry">
              <PaginationLink :is-active="entry === page" @click="page = entry">
                {{ entry }}
              </PaginationLink>
            </PaginationItem>

            <PaginationItem>
              <PaginationNext :is-disabled="page === pageCount" @click="page += 1">
                <span>Next</span>
                <PaginationNextIcon />
              </PaginationNext>
            </PaginationItem>
          </PaginationContent>
        </Pagination>
      </TableFooter>
    </Table>
  </div>
</template>

<style scoped>
.screen {
  display: flex;
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 4);
}

/* A toolbar sizes itself to its controls; widening it and letting the first column take the
   slack puts the search field across the row with the actions at its end. */
.screen__header {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--rp-spacing) * 3);
}

/* Enough room for the empty state to stand in, rather than collapsing the body to one line. */
.frame {
  min-height: calc(var(--rp-spacing) * 56);
}

.table {
  height: 100%;
  min-width: calc(var(--rp-spacing) * 120);
}
</style>
```

## Pattern: form

```vue
<script setup lang="ts">
import {
  Button,
  Checkbox,
  CheckboxContent,
  CheckboxControl,
  CheckboxIndicator,
  Description,
  FieldError,
  FieldGroup,
  Fieldset,
  FieldsetActions,
  FieldsetLegend,
  Form,
  Input,
  Label,
  ListBox,
  ListBoxItem,
  ListBoxItemIndicator,
  Select,
  SelectIndicator,
  SelectPopover,
  SelectTrigger,
  SelectValue,
  TextArea,
  TextField,
} from "ropav";
import { shallowRef } from "vue";

const plans = [
  { id: "starter", name: "Starter" },
  { id: "team", name: "Team" },
  { id: "enterprise", name: "Enterprise" },
];

const byName = (plan: { name: string }) => plan.name;

const serverErrors = shallowRef<Record<string, string>>({});

const validateSlug = (value: string) =>
  /^[a-z0-9-]*$/.test(value) ? null : "Lowercase letters, numbers and dashes only.";

const onSubmit = (event: Event) => {
  event.preventDefault();

  const data = new FormData(event.target as HTMLFormElement);

  // A fresh object each time, so the same field rejected twice reads as a new response.
  serverErrors.value = data.get("slug") === "acme" ? { slug: "That URL is taken." } : {};
};
</script>

<template>
  <Form
    class="form"
    validation-behavior="aria"
    :validation-errors="serverErrors"
    @submit="onSubmit"
  >
    <Fieldset>
      <FieldsetLegend>Workspace</FieldsetLegend>
      <Description>Everyone you invite lands here.</Description>

      <FieldGroup>
        <TextField is-required name="name">
          <Label>Name</Label>
          <Input placeholder="Acme Research" />
          <FieldError />
        </TextField>

        <TextField default-value="acme" is-required name="slug" :validate="validateSlug">
          <Label>URL</Label>
          <Input />
          <Description>Appears in every link to this workspace.</Description>
          <FieldError />
        </TextField>

        <Select
          full-width
          is-required
          :item-text-value="byName"
          :items="plans"
          name="plan"
          placeholder="Choose a plan"
        >
          <Label>Plan</Label>
          <SelectTrigger>
            <SelectValue />
            <SelectIndicator />
          </SelectTrigger>
          <SelectPopover>
            <ListBox>
              <ListBoxItem
                v-for="plan in plans"
                :id="plan.id"
                :key="plan.id"
                :text-value="plan.name"
              >
                {{ plan.name }}
                <ListBoxItemIndicator />
              </ListBoxItem>
            </ListBox>
          </SelectPopover>
          <FieldError />
        </Select>

        <TextField name="notes">
          <Label>Notes</Label>
          <TextArea full-width placeholder="Anything the team should know." rows="3" />
        </TextField>

        <Checkbox name="digest" value="weekly">
          <CheckboxContent>
            <CheckboxControl>
              <CheckboxIndicator />
            </CheckboxControl>
            Send a weekly digest
          </CheckboxContent>
        </Checkbox>
      </FieldGroup>

      <FieldsetActions>
        <Button type="reset" variant="secondary">Cancel</Button>
        <Button type="submit">Save</Button>
      </FieldsetActions>
    </Fieldset>
  </Form>
</template>

<style scoped>
.form {
  max-width: var(--rp-container-md);
}
</style>
```

## Pattern: overlays

```vue
<script setup lang="ts">
import type { CollectionKey } from "ropav";

import {
  Button,
  Drawer,
  DrawerBackdrop,
  DrawerBody,
  DrawerContent,
  DrawerDialog,
  DrawerFooter,
  DrawerHandle,
  DrawerHeader,
  DrawerHeading,
  Dropdown,
  DropdownMenu,
  DropdownPopover,
  Label,
  MenuItem,
  Modal,
  ModalBackdrop,
  ModalBody,
  ModalClose,
  ModalCloseTrigger,
  ModalContainer,
  ModalDialog,
  ModalFooter,
  ModalHeader,
  ModalHeading,
  Switch,
  SwitchContent,
  SwitchControl,
  SwitchGroup,
  SwitchThumb,
  ToastProvider,
  ToastQueue,
} from "ropav";
import { shallowRef } from "vue";

const queue = new ToastQueue({ maxVisibleToasts: 3 });

const isDrawerOpen = shallowRef(false);

const say = (title: string, variant: "danger" | "default" | "success" = "default") => {
  queue.add({ title, variant });
};

const settings = [
  { label: "Email me on every reply", name: "replies" },
  { label: "Weekly digest", name: "digest" },
];

// A menu reports which item was chosen; the items themselves do not each need a handler.
const onAction = (key: CollectionKey) => {
  say(`Chose ${String(key)}`);
};

const apply = () => {
  isDrawerOpen.value = false;
  say("Preferences saved", "success");
};
</script>

<template>
  <div class="row">
    <Dropdown>
      <Button variant="secondary">Actions</Button>

      <DropdownPopover>
        <DropdownMenu aria-label="Document actions" @action="onAction">
          <MenuItem id="rename" text-value="Rename">
            <Label>Rename</Label>
          </MenuItem>
          <MenuItem id="duplicate" text-value="Duplicate">
            <Label>Duplicate</Label>
          </MenuItem>
        </DropdownMenu>
      </DropdownPopover>
    </Dropdown>

    <Drawer v-model:is-open="isDrawerOpen">
      <Button variant="secondary">Preferences</Button>

      <DrawerBackdrop>
        <DrawerContent placement="right">
          <DrawerDialog>
            <DrawerHandle />

            <DrawerHeader>
              <DrawerHeading>Preferences</DrawerHeading>
            </DrawerHeader>

            <DrawerBody>
              <SwitchGroup>
                <Switch
                  v-for="setting in settings"
                  :key="setting.name"
                  :name="setting.name"
                  value="on"
                >
                  <SwitchContent>
                    <SwitchControl>
                      <SwitchThumb />
                    </SwitchControl>
                    {{ setting.label }}
                  </SwitchContent>
                </Switch>
              </SwitchGroup>
            </DrawerBody>

            <DrawerFooter>
              <Button variant="tertiary" @click="isDrawerOpen = false">Cancel</Button>
              <Button @click="apply">Apply</Button>
            </DrawerFooter>
          </DrawerDialog>
        </DrawerContent>
      </DrawerBackdrop>
    </Drawer>

    <Modal>
      <Button variant="danger-soft">Delete</Button>

      <ModalBackdrop>
        <ModalContainer>
          <ModalDialog class="dialog">
            <ModalCloseTrigger />

            <ModalHeader>
              <ModalHeading>Delete this document?</ModalHeading>
            </ModalHeader>

            <ModalBody>Everything in it goes with it. This cannot be undone.</ModalBody>

            <ModalFooter>
              <ModalClose>
                <Button variant="tertiary">Cancel</Button>
              </ModalClose>
              <ModalClose>
                <Button variant="danger" @click="say('Document deleted', 'danger')">Delete</Button>
              </ModalClose>
            </ModalFooter>
          </ModalDialog>
        </ModalContainer>
      </ModalBackdrop>
    </Modal>

    <ToastProvider placement="bottom" :queue />
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--rp-spacing) * 3);
  align-items: center;
}

.dialog {
  @media (width >= 40rem) {
    max-width: 360px;
  }
}
</style>
```

## Pattern: scheduling

```vue
<script setup lang="ts">
import type { DateValue } from "@internationalized/date";

import {
  getLocalTimeZone,
  isWeekend,
  Time,
  toCalendarDateTime,
  today,
} from "@internationalized/date";
import {
  Calendar,
  CalendarCell,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHeader,
  CalendarHeader,
  CalendarHeaderCell,
  CalendarNavButton,
  DatePicker,
  DatePickerGroup,
  DatePickerInput,
  DatePickerPopover,
  DatePickerSegment,
  DatePickerSuffix,
  DatePickerTrigger,
  DatePickerTriggerIndicator,
  Description,
  FieldGroup,
  Label,
  TimeField,
  TimeFieldGroup,
  TimeFieldInput,
  TimeFieldSegment,
  useLocale,
} from "ropav";
import { computed, shallowRef } from "vue";

const zone = getLocalTimeZone();
const locale = useLocale();

const earliest = today(zone);

const date = shallowRef<DateValue | null>(earliest.add({ days: 1 }));
const time = shallowRef<Time | null>(new Time(9, 30));

/* Which days are the weekend is a property of the locale, not of the calendar. */
const isDateUnavailable = (value: DateValue) => isWeekend(value, locale.value.locale);

/*
 * A date and a time are separate values and stay that way until something needs one instant. The
 * screen is what joins them, because only the screen knows they belong to the same booking.
 */
const booking = computed(() =>
  date.value && time.value ? toCalendarDateTime(date.value, time.value) : null,
);

const formatted = computed(() =>
  booking.value
    ? booking.value.toDate(zone).toLocaleString(locale.value.locale, {
        dateStyle: "full",
        timeStyle: "short",
      })
    : "Pick a weekday and a time.",
);
</script>

<template>
  <div class="screen">
    <FieldGroup>
      <DatePicker
        v-model:value="date"
        is-required
        :is-date-unavailable="isDateUnavailable"
        :min-value="earliest"
        name="day"
      >
        <Label>Day</Label>

        <DatePickerGroup full-width>
          <DatePickerInput>
            <template #default="{ segment }">
              <DatePickerSegment :segment />
            </template>
          </DatePickerInput>
          <DatePickerSuffix>
            <DatePickerTrigger>
              <DatePickerTriggerIndicator />
            </DatePickerTrigger>
          </DatePickerSuffix>
        </DatePickerGroup>

        <Description>Weekends and anything before today are not bookable.</Description>

        <DatePickerPopover>
          <Calendar aria-label="Booking day">
            <CalendarHeader>
              <CalendarNavButton slot="previous" />
              <CalendarNavButton slot="next" />
            </CalendarHeader>
            <CalendarGrid>
              <CalendarGridHeader>
                <template #default="{ day }">
                  <CalendarHeaderCell>{{ day }}</CalendarHeaderCell>
                </template>
              </CalendarGridHeader>
              <CalendarGridBody>
                <template #default="{ date: cell }">
                  <CalendarCell :date="cell" />
                </template>
              </CalendarGridBody>
            </CalendarGrid>
          </Calendar>
        </DatePickerPopover>
      </DatePicker>

      <TimeField v-model:value="time" is-required name="start">
        <Label>Start</Label>
        <TimeFieldGroup>
          <TimeFieldInput>
            <template #default="{ segment }">
              <TimeFieldSegment :segment />
            </template>
          </TimeFieldInput>
        </TimeFieldGroup>
      </TimeField>
    </FieldGroup>

    <p class="result">{{ formatted }}</p>
  </div>
</template>

<style scoped>
.screen {
  display: flex;
  max-width: var(--rp-container-sm);
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 5);
}

.result {
  padding-top: calc(var(--rp-spacing) * 4);
  border-top: 1px solid var(--rp-border);
  color: var(--rp-muted);
  font-size: var(--rp-text-sm);
  line-height: var(--rp-text-sm--line-height);
}
</style>
```

## Pattern: settings

```vue
<script setup lang="ts">
import {
  Button,
  Description,
  FieldGroup,
  Fieldset,
  FieldsetLegend,
  Form,
  Input,
  Label,
  ListBox,
  ListBoxItem,
  ListBoxItemIndicator,
  Select,
  SelectIndicator,
  SelectPopover,
  SelectTrigger,
  SelectValue,
  Switch,
  SwitchContent,
  SwitchControl,
  SwitchGroup,
  SwitchThumb,
  Tabs,
  TabsIndicator,
  TabsList,
  TabsListContainer,
  TabsPanel,
  TabsTab,
  TextArea,
  TextField,
  ToastProvider,
  ToastQueue,
} from "ropav";

const queue = new ToastQueue({ maxVisibleToasts: 3 });

const sections = [
  { id: "profile", label: "Profile" },
  { id: "notifications", label: "Notifications" },
  { id: "advanced", label: "Advanced" },
];

const alerts = [
  { isOn: true, label: "Email me on every reply", name: "replies" },
  { label: "Weekly digest", name: "digest" },
  { label: "Product announcements", name: "announcements" },
];

const regions = [
  { id: "eu", name: "Europe" },
  { id: "us", name: "United States" },
  { id: "ap", name: "Asia Pacific" },
];

const byName = (region: { name: string }) => region.name;

const onSubmit = (event: Event) => {
  event.preventDefault();

  const data = new FormData(event.target as HTMLFormElement);

  queue.add({
    description: `Submitted: ${[...data.keys()].join(", ")}.`,
    title: "Settings saved",
    variant: "success",
  });
};
</script>

<template>
  <Form class="settings" @submit="onSubmit">
    <Tabs>
      <TabsListContainer>
        <TabsList aria-label="Settings">
          <TabsTab v-for="section in sections" :id="section.id" :key="section.id">
            {{ section.label }}
            <TabsIndicator />
          </TabsTab>
        </TabsList>
      </TabsListContainer>

      <TabsPanel id="profile" class="panel" should-force-mount>
        <Fieldset>
          <FieldsetLegend>Profile</FieldsetLegend>

          <FieldGroup>
            <TextField default-value="Ada Lovelace" is-required name="name">
              <Label>Name</Label>
              <Input />
            </TextField>

            <TextField name="bio">
              <Label>Bio</Label>
              <TextArea full-width rows="3" />
              <Description>Shown beside your name on anything you publish.</Description>
            </TextField>
          </FieldGroup>
        </Fieldset>
      </TabsPanel>

      <TabsPanel id="notifications" class="panel" should-force-mount>
        <Fieldset>
          <FieldsetLegend>Notifications</FieldsetLegend>

          <SwitchGroup>
            <Switch
              v-for="alert in alerts"
              :key="alert.name"
              :default-selected="alert.isOn"
              :name="alert.name"
              value="on"
            >
              <SwitchContent>
                <SwitchControl>
                  <SwitchThumb />
                </SwitchControl>
                {{ alert.label }}
              </SwitchContent>
            </Switch>
          </SwitchGroup>
        </Fieldset>
      </TabsPanel>

      <TabsPanel id="advanced" class="panel" should-force-mount>
        <Fieldset>
          <FieldsetLegend>Advanced</FieldsetLegend>

          <FieldGroup>
            <Select
              default-value="eu"
              full-width
              :item-text-value="byName"
              :items="regions"
              name="region"
            >
              <Label>Region</Label>
              <SelectTrigger>
                <SelectValue />
                <SelectIndicator />
              </SelectTrigger>
              <SelectPopover>
                <ListBox>
                  <ListBoxItem
                    v-for="region in regions"
                    :id="region.id"
                    :key="region.id"
                    :text-value="region.name"
                  >
                    {{ region.name }}
                    <ListBoxItemIndicator />
                  </ListBoxItem>
                </ListBox>
              </SelectPopover>
              <Description>Where this workspace stores its data.</Description>
            </Select>
          </FieldGroup>
        </Fieldset>
      </TabsPanel>
    </Tabs>

    <div class="actions">
      <Button type="reset" variant="secondary">Cancel</Button>
      <Button type="submit">Save changes</Button>
    </div>

    <ToastProvider placement="bottom" :queue />
  </Form>
</template>

<style scoped>
.settings {
  max-width: var(--rp-container-md);
}

.panel {
  padding-block: calc(var(--rp-spacing) * 4);
}

/* Force-mounting keeps a panel in the layout as well as in the DOM. A hidden field still submits. */
.panel[data-inert] {
  display: none;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--rp-spacing) * 3);
  padding-top: calc(var(--rp-spacing) * 4);
  border-top: 1px solid var(--rp-border);
}
</style>
```

## Pattern: upload

```vue
<script setup lang="ts">
import {
  Alert,
  AlertContent,
  AlertDescription,
  AlertIndicator,
  AlertTitle,
  CloseButton,
  DropZone,
  DropZoneTrigger,
  EmptyState,
  Label,
  ProgressBar,
  ProgressBarFill,
  ProgressBarOutput,
  ProgressBarTrack,
} from "ropav";
import { onBeforeUnmount, shallowRef, triggerRef } from "vue";

const MAX_BYTES = 2 * 1024 * 1024;

interface Upload {
  id: number;
  name: string;
  progress: number;
}

const uploads = shallowRef<Upload[]>([]);
const refused = shallowRef<string[]>([]);

const timers = new Map<number, ReturnType<typeof setInterval>>();

const stop = (id: number) => {
  clearInterval(timers.get(id));
  timers.delete(id);
};

onBeforeUnmount(() => {
  for (const id of [...timers.keys()]) stop(id);
});

/* Stands in for the request. Everything above it is the part worth copying. */
const send = (upload: Upload) => {
  timers.set(
    upload.id,
    setInterval(() => {
      upload.progress = Math.min(100, upload.progress + 20);
      triggerRef(uploads);

      if (upload.progress === 100) stop(upload.id);
    }, 400),
  );
};

const onSelect = (files: File[]) => {
  /*
   * `accept` has already dropped the wrong types without saying so. A size cap is not something it
   * can express, which is why this half is the half that can explain itself.
   */
  const tooBig = files.filter((file) => file.size > MAX_BYTES);
  const taken = files.filter((file) => file.size <= MAX_BYTES);

  refused.value = tooBig.map((file) => file.name);

  const added = taken.map((file, index) => ({
    id: Date.now() + index,
    name: file.name,
    progress: 0,
  }));

  uploads.value = [...uploads.value, ...added];
  added.forEach(send);
};

const remove = (id: number) => {
  stop(id);
  uploads.value = uploads.value.filter((upload) => upload.id !== id);
};
</script>

<template>
  <div class="upload">
    <DropZone
      accept="image/*,.pdf"
      aria-label="Upload attachments"
      class="zone"
      multiple
      @select="onSelect"
    >
      <template #default="{ status }">
        <p v-if="status === 'reject'">Images and PDFs only</p>
        <p v-else>Drop images or PDFs here, or <DropZoneTrigger>browse</DropZoneTrigger></p>
        <p class="hint">Up to 2 MB each</p>
      </template>
    </DropZone>

    <Alert v-if="refused.length > 0" status="warning">
      <AlertIndicator />
      <AlertContent>
        <AlertTitle>Some files were too large</AlertTitle>
        <AlertDescription>
          {{ refused.join(", ") }} — each file has to be under 2 MB.
        </AlertDescription>
      </AlertContent>
      <CloseButton aria-label="Dismiss" @click="refused = []" />
    </Alert>

    <EmptyState v-if="uploads.length === 0">Nothing uploaded yet.</EmptyState>

    <ul v-else class="list">
      <li v-for="upload in uploads" :key="upload.id">
        <div class="row">
          <ProgressBar class="bar" :value="upload.progress">
            <Label>{{ upload.name }}</Label>
            <ProgressBarOutput />
            <ProgressBarTrack><ProgressBarFill /></ProgressBarTrack>
          </ProgressBar>

          <CloseButton :aria-label="`Remove ${upload.name}`" @click="remove(upload.id)" />
        </div>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.upload {
  display: flex;
  max-width: var(--rp-container-md);
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 4);
}

.hint {
  color: var(--rp-muted);
  font-size: var(--rp-text-sm);
  line-height: var(--rp-text-sm--line-height);
}

.list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  gap: calc(var(--rp-spacing) * 4);
  list-style: none;
}

.row {
  display: flex;
  gap: calc(var(--rp-spacing) * 3);
  align-items: end;
}

.bar {
  flex: 1;
  min-width: 0;
}
</style>
```

# Components

## Accordion

`import { Accordion, AccordionBody, AccordionHeading, AccordionIndicator, AccordionItem, AccordionPanel, AccordionTrigger } from "ropav"`
Page: https://ropav.netlify.app/components/accordion

```vue-html
<Accordion class="panel" :default-expanded-keys="['styling']">
  <AccordionItem v-for="question in questions" :id="question.id" :key="question.id">
    <AccordionHeading>
      <AccordionTrigger>
        {{ question.title }}
        <AccordionIndicator />
      </AccordionTrigger>
    </AccordionHeading>
    <AccordionPanel>
      <AccordionBody>{{ question.answer }}</AccordionBody>
    </AccordionPanel>
  </AccordionItem>
</Accordion>
```

- allowsMultipleExpanded?: boolean
- defaultExpandedKeys?: Iterable<DisclosureKey>
- expandedKeys?: Iterable<DisclosureKey>
- hideSeparator?: boolean = false — Removes the separator drawn between items.
- isDisabled?: boolean
- variant?: "default" | "surface"
@expandedChange: Set<DisclosureKey>
@update:expandedKeys: Set<DisclosureKey>
AccordionItem: id?: string; isDisabled?: boolean
AccordionPanel: role?: string = "group"
Structure only: AccordionBody, AccordionHeading, AccordionIndicator, AccordionTrigger.

## Alert

`import { Alert, AlertContent, AlertDescription, AlertIndicator, AlertTitle } from "ropav"`
Page: https://ropav.netlify.app/components/alert

```vue-html
<Alert>
  <AlertContent>
    <AlertTitle>Update available</AlertTitle>
    <AlertDescription>A new version is ready to install.</AlertDescription>
  </AlertContent>
</Alert>
```

- status?: "default" | "accent" | "success" | "warning" | "danger" = "default"
Structure only: AlertContent, AlertDescription, AlertIndicator, AlertTitle.

## AlertDialog

`import { AlertDialog, AlertDialogBackdrop, AlertDialogBody, AlertDialogClose, AlertDialogCloseTrigger, AlertDialogContainer, AlertDialogDialog, AlertDialogFooter, AlertDialogHeader, AlertDialogHeading, AlertDialogIcon, AlertDialogTrigger } from "ropav"`
Page: https://ropav.netlify.app/components/alert-dialog

```vue-html
<AlertDialog>
  <Button variant="danger">Delete project</Button>

  <AlertDialogBackdrop>
    <AlertDialogContainer>
      <AlertDialogDialog class="dialog">
        <AlertDialogHeader>
          <AlertDialogIcon status="danger" />
          <AlertDialogHeading>Delete this project?</AlertDialogHeading>
        </AlertDialogHeader>

        <AlertDialogBody>
          <p class="note">Everything in it goes with it. This cannot be undone.</p>
        </AlertDialogBody>

        <AlertDialogFooter>
          <AlertDialogClose><Button variant="tertiary">Cancel</Button></AlertDialogClose>
          <AlertDialogClose><Button variant="danger">Delete</Button></AlertDialogClose>
        </AlertDialogFooter>
      </AlertDialogDialog>
    </AlertDialogContainer>
  </AlertDialogBackdrop>
</AlertDialog>
```

- defaultOpen?: boolean
- isDisabled?: boolean
- isOpen?: boolean
- state?: OverlayTriggerState
@openChange: boolean
@update:isOpen: boolean
AlertDialogBackdrop: isDismissable?: boolean = false; isEntering?: boolean; isExiting?: boolean; isKeyboardDismissDisabled?: boolean = true; portalContainer?: string | HTMLElement = document.body; shouldCloseOnInteractOutside?: ((element: Element) => boolean); style?: string | CSSProperties; variant?: "blur" | "opaque" | "transparent" = "opaque"
AlertDialogContainer: placement?: "auto" | "bottom" | "center" | "top" = "auto"; size?: "xs" | "sm" | "md" | "lg" | "cover" = "md"
AlertDialogDialog #default: { close: () => void }
AlertDialogHeading: level?: number = 2
AlertDialogIcon: status?: "default" | "accent" | "success" | "warning" | "danger" = "danger"
Structure only: AlertDialogBody, AlertDialogClose, AlertDialogCloseTrigger, AlertDialogFooter, AlertDialogHeader, AlertDialogTrigger.

## Autocomplete

`import { Autocomplete, AutocompleteClearButton, AutocompleteFilter, AutocompleteIndicator, AutocompletePopover, AutocompleteTrigger, AutocompleteValue } from "ropav"`
Page: https://ropav.netlify.app/components/autocomplete

```vue-html
<Autocomplete
  class="field"
  :item-text-value="byName"
  :items="cities"
  placeholder="Pick a city"
  selection-mode="single"
>
  <Label>Destination</Label>
  <AutocompleteTrigger>
    <AutocompleteValue />
    <AutocompleteIndicator />
  </AutocompleteTrigger>

  <AutocompletePopover>
    <AutocompleteFilter v-slot="{ items: matches }" :filter="filter.contains">
      <SearchField auto-focus aria-label="Search cities" name="search" variant="secondary">
        <SearchFieldGroup>
          <SearchFieldSearchIcon />
          <SearchFieldInput placeholder="Search…" />
          <SearchFieldClearButton />
        </SearchFieldGroup>
      </SearchField>

      <ListBox>
        <ListBoxItem v-for="city in matches" :id="city.id" :key="city.id" :text-value="city.name">
          {{ city.name }}
          <ListBoxItemIndicator />
        </ListBoxItem>
      </ListBox>
    </AutocompleteFilter>
  </AutocompletePopover>
</Autocomplete>
```

- allowsEmptyCollection?: boolean
- autoComplete?: string
- defaultOpen?: boolean
- defaultValue?: SelectedValue
- disabledBehavior?: "all" | "selection" = "all"
- disabledKeys?: Iterable<CollectionKey>
- form?: string
- fullWidth?: boolean
- isDisabled?: boolean
- isInvalid?: boolean
- isOpen?: boolean
- isRequired?: boolean
- itemDisabled?: ((item: T) => boolean) — Whether an item cannot be chosen.
- itemKey?: ((item: T, index: number) => CollectionKey) — An item's key.
- items!: readonly T[] — The options, as data.
- itemTextValue?: ((item: T) => string | undefined) — Text shown for an item in the trigger, and matched on when typing.
- name?: string
- placeholder?: string
- selectionMode?: "single" | "multiple" = "single"
- shouldCloseOnSelect?: boolean = true when single — Whether choosing an option closes the popover.
- size?: "xs" | "sm" | "md" | "lg" = "md"
- validate?: ValidationFunction<SelectedValue>
- validationBehavior?: "aria" | "native" = "native"
- value?: SelectedValue
- variant?: "primary" | "secondary" = "primary"
@change: SelectedValue
@clear: —
@focusChange: boolean
@openChange: boolean
@update:isOpen: boolean
@update:value: SelectedValue
#default: { isDisabled: boolean; isFocused: boolean; isInvalid: boolean; isOpen: boolean; isRequired: boolean }
AutocompleteFilter: defaultInputValue?: string; disableAutoFocusFirst?: boolean; disableVirtualFocus?: boolean; filter?: ((textValue: string, inputValue: string) => boolean); inputValue?: string; items?: readonly T[]
AutocompleteFilter @inputChange: string
AutocompleteFilter @update:inputValue: string
AutocompletePopover: arrowBoundaryOffset?: number; containerPadding?: number; crossOffset?: number; isKeyboardDismissDisabled?: boolean; offset?: number = 8; placement?: "bottom" | "bottom end" | "bottom left" | "bottom right" | "bottom start" | "end" | "end bottom" | "end top" | "left" | "left bottom" | "left top" | "right" | "right bottom" | "right top" | "start" | "start bottom" | "start top" | "top" | "top end" | "top left" | "top right" | "top start" = "bottom"; shouldFlip?: boolean
AutocompleteTrigger: isDisabled?: boolean
AutocompleteTrigger #default: { isDisabled: boolean; isFocusWithin: boolean; isHovered: boolean; isInvalid: boolean }
Structure only: AutocompleteClearButton, AutocompleteIndicator, AutocompleteValue.

## Avatar

`import { Avatar, AvatarFallback, AvatarImage } from "ropav"`
Page: https://ropav.netlify.app/components/avatar

```vue-html
<Avatar>
  <AvatarFallback>JD</AvatarFallback>
</Avatar>
```

- color?: "default" | "accent" | "success" | "warning" | "danger"
- size?: "xs" | "sm" | "md" | "lg" = "md"
- variant?: "default" | "soft"
AvatarFallback: color?: "default" | "accent" | "success" | "warning" | "danger"; delayMs?: number
AvatarImage: alt?: string; crossOrigin?: "" | "anonymous" | "use-credentials"; loading?: "eager" | "lazy"; referrerPolicy?: "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"; sizes?: string; src?: string; srcSet?: string
AvatarImage @error: Event
AvatarImage @load: Event
AvatarImage @loadingStatusChange: ImageLoadingStatus

## AvatarGroup

`import { AvatarGroup, AvatarGroupOverflow } from "ropav"`
Page: https://ropav.netlify.app/components/avatar-group

```vue-html
<AvatarGroup>
  <Avatar>
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>KM</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>EW</AvatarFallback>
  </Avatar>
  <AvatarGroupOverflow :count="5" />
</AvatarGroup>
```

- front?: "last" | "first" = "last"
- orientation?: "horizontal" | "vertical" = "horizontal"
- overlap?: "none" | "sm" | "md" | "lg" = "md"
- size?: "xs" | "sm" | "md" | "lg" = "md"
AvatarGroupOverflow: count?: number

## Badge

`import { Badge, BadgeAnchor, BadgeLabel } from "ropav"`
Page: https://ropav.netlify.app/components/badge

```vue-html
<BadgeAnchor>
  <Avatar>
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
  <Badge>
    <BadgeLabel>5</BadgeLabel>
  </Badge>
</BadgeAnchor>
```

- color?: "default" | "accent" | "success" | "warning" | "danger" = "default"
- placement?: "top-right" | "top-left" | "bottom-right" | "bottom-left" = "top-right"
- size?: "xs" | "sm" | "md" | "lg" = "md"
- variant?: "primary" | "secondary" | "soft" = "primary"
Structure only: BadgeAnchor, BadgeLabel.

## Breadcrumbs

`import { Breadcrumbs, BreadcrumbsItem } from "ropav"`
Page: https://ropav.netlify.app/components/breadcrumbs

```vue-html
<Breadcrumbs>
  <BreadcrumbsItem v-for="crumb in trail" :key="crumb.name" :href="crumb.href">
    {{ crumb.name }}
  </BreadcrumbsItem>
</Breadcrumbs>
```

- isDisabled?: boolean
- separator?: unknown
@action: string | number
BreadcrumbsItem: download?: string | boolean; href?: string; hrefLang?: string; id?: BreadcrumbKey; isDisabled?: boolean; ping?: string; referrerPolicy?: "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"; rel?: string; routerOptions?: unknown; target?: string
BreadcrumbsItem @click: MouseEvent
BreadcrumbsItem #default: { isCurrent: boolean; isDisabled: boolean }

## Button

`import { Button } from "ropav"`
Page: https://ropav.netlify.app/components/button

```vue-html
<Button>Get started</Button>
```

- fullWidth?: boolean
- isDisabled?: boolean
- isIconOnly?: boolean
- isPending?: boolean
- size?: "xs" | "sm" | "md" | "lg" = "md"
- type?: "button" | "submit" | "reset" = "button"
- variant?: "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "danger" | "danger-soft" = "primary"
@click: MouseEvent
#default: { isDisabled: boolean; isFocusVisible: boolean; isHovered: boolean; isPending: boolean; isPressed: boolean }

## ButtonGroup

`import { ButtonGroup, ButtonGroupSeparator } from "ropav"`
Page: https://ropav.netlify.app/components/button-group

```vue-html
<ButtonGroup aria-label="History">
  <Button>Undo</Button>
  <Button>
    <ButtonGroupSeparator />
    Redo
  </Button>
</ButtonGroup>
```

- fullWidth?: boolean
- isDisabled?: boolean
- orientation?: "horizontal" | "vertical" = "horizontal"
- size?: "xs" | "sm" | "md" | "lg"
- variant?: "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "danger" | "danger-soft"
Structure only: ButtonGroupSeparator.

## Calendar

`import { Calendar, CalendarCell, CalendarCellIndicator, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeader, CalendarHeaderCell, CalendarHeading, CalendarNavButton } from "ropav"`
Page: https://ropav.netlify.app/components/calendar

```vue-html
<Calendar aria-label="Event date">
  <CalendarHeader>
    <CalendarNavButton slot="previous" />
    <CalendarHeading />
    <CalendarNavButton slot="next" />
  </CalendarHeader>

  <CalendarGrid>
    <CalendarGridHeader>
      <template #default="{ day }">
        <CalendarHeaderCell>{{ day }}</CalendarHeaderCell>
      </template>
    </CalendarGridHeader>
    <CalendarGridBody>
      <template #default="{ date }">
        <CalendarCell :date />
      </template>
    </CalendarGridBody>
  </CalendarGrid>
</Calendar>
```

- autoFocus?: boolean
- createCalendar?: ((identifier: CalendarIdentifier) => Calendar) — Builds the calendar system for an identifier.
- defaultFocusedValue?: DateValue | null
- defaultValue?: CalendarValue
- defaultYearPickerOpen?: boolean = false
- firstDayOfWeek?: "fri" | "mon" | "sat" | "sun" | "thu" | "tue" | "wed"
- focusedValue?: DateValue | null
- id?: string
- isDateUnavailable?: ((date: DateValue) => boolean) — Rules a date out even though it is inside the range.
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isYearPickerOpen?: boolean
- maxValue?: DateValue | null
- minValue?: DateValue | null
- pageBehavior?: "single" | "visible" = "visible"
- selectionAlignment?: "center" | "end" | "start" = "center"
- selectionMode?: "single" | "multiple" = "single"
- value?: CalendarValue
- visibleDuration?: DateDuration = {months: 1}
- weeksInMonth?: number
@update:focusedValue: CalendarDate
@update:value: CalendarValue
@update:yearPickerOpen: boolean
#default: { isDisabled: boolean; isInvalid: boolean; state: AnyCalendarState }
CalendarCell: date!: CalendarDate
CalendarCell #default: { date: CalendarDate; formattedDate: string; isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isInvalid: boolean; isOutsideMonth: boolean; isOutsideVisibleRange: boolean; isPressed: boolean; isSelected: boolean; isToday: boolean; isUnavailable: boolean }
CalendarGrid: offset?: DateDuration; weekdayStyle?: "long" | "narrow" | "short" = "short"
CalendarGridBody #default: { date: CalendarDate }
CalendarGridHeader #default: { day: string }
CalendarHeading: format?: CalendarHeadingFormatOptions; offset?: DateDuration
CalendarNavButton: slot?: "next" | "previous" = "next"
Structure only: CalendarCellIndicator, CalendarHeader, CalendarHeaderCell.

## CalendarYearPickerCell

`import { CalendarYearPickerCell, CalendarYearPickerGrid, CalendarYearPickerGridBody, CalendarYearPickerTrigger, CalendarYearPickerTriggerHeading, CalendarYearPickerTriggerIndicator } from "ropav"`

No worked example yet.

CalendarYearPickerCell: excludeFromTabOrder?: boolean; id!: number
CalendarYearPickerCell #default: { formattedYear: string; id: number; isCurrentYear: boolean; isOpen: boolean; isSelected: boolean; selectYear: () => void; year: number }
CalendarYearPickerGrid: format?: CalendarYearPickerFormatOptions; visibleYears?: number
CalendarYearPickerGridBody #default: { formattedYear: string; id: number; isCurrentYear: boolean; isOpen: boolean; isSelected: boolean; selectYear: () => void; year: number }
CalendarYearPickerTrigger #default: { isOpen: boolean; monthYear: string; toggle: () => void }
CalendarYearPickerTriggerHeading: format?: CalendarHeadingFormatOptions; offset?: DateDuration
CalendarYearPickerTriggerHeading #default: { isOpen: boolean; monthYear: string; toggle: () => void }
CalendarYearPickerTriggerIndicator #default: { isOpen: boolean; monthYear: string; toggle: () => void }

## Card

`import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "ropav"`
Page: https://ropav.netlify.app/components/card

```vue-html
<Card class="w-80">
  <CardHeader>
    <CardTitle>Weekly report</CardTitle>
    <CardDescription>Sent every Monday at 9am.</CardDescription>
  </CardHeader>
  <CardContent>Open rate held steady across the last four sends.</CardContent>
</Card>
```

- variant?: "default" | "secondary" | "tertiary" | "transparent" = "default"
Structure only: CardContent, CardDescription, CardFooter, CardHeader, CardTitle.

## Checkbox

`import { Checkbox, CheckboxContent, CheckboxControl, CheckboxIndicator } from "ropav"`
Page: https://ropav.netlify.app/components/checkbox

```vue-html
<Checkbox>
  <CheckboxContent>
    <CheckboxControl>
      <CheckboxIndicator />
    </CheckboxControl>
    Accept the terms
  </CheckboxContent>
</Checkbox>
```

- defaultSelected?: boolean
- form?: string
- id?: string
- isDisabled?: boolean
- isIndeterminate?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- isSelected?: boolean
- name?: string
- validate?: ValidationFunction<boolean>
- validationBehavior?: "aria" | "native" = "native"
- value?: string = "on"
- variant?: "primary" | "secondary" = "primary"
@change: boolean
@update:isSelected: boolean
#default: { isDisabled: boolean; isIndeterminate: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean; isSelected: boolean }
CheckboxContent #default: { isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isIndeterminate: boolean; isInvalid: boolean; isPressed: boolean; isReadOnly: boolean; isRequired: boolean; isSelected: boolean }
CheckboxIndicator #default: { isDisabled: boolean; isIndeterminate: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean; isSelected: boolean }
Structure only: CheckboxControl.

## CheckboxGroup

`import { CheckboxGroup } from "ropav"`
Page: https://ropav.netlify.app/components/checkbox-group

```vue-html
<CheckboxGroup name="interests">
  <Label>Interests</Label>
  <Checkbox value="coding">
    <CheckboxContent>
      <CheckboxControl>
        <CheckboxIndicator />
      </CheckboxControl>
      Coding
    </CheckboxContent>
  </Checkbox>
  <Checkbox value="design">
    <CheckboxContent>
      <CheckboxControl>
        <CheckboxIndicator />
      </CheckboxControl>
      Design
    </CheckboxContent>
  </Checkbox>
</CheckboxGroup>
```

- defaultValue?: string[]
- form?: string
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- name?: string
- validate?: ValidationFunction<string[]>
- validationBehavior?: "aria" | "native" = "native"
- value?: string[]
- variant?: "primary" | "secondary" = "primary"
@change: string[]
@update:value: string[]
#default: { isDisabled: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean; value: string[] }

## Chip

`import { Chip, ChipLabel } from "ropav"`
Page: https://ropav.netlify.app/components/chip

```vue-html
<Chip>
  <ChipLabel>Label</ChipLabel>
</Chip>
```

- color?: "default" | "accent" | "success" | "warning" | "danger" = "default"
- size?: "xs" | "sm" | "md" | "lg"
- variant?: "primary" | "secondary" | "tertiary" | "soft" = "secondary"
Structure only: ChipLabel.

## CloseButton

`import { CloseButton } from "ropav"`
Page: https://ropav.netlify.app/components/close-button

```vue-html
<CloseButton />
```

- isDisabled?: boolean
- isPending?: boolean
- type?: "button" | "reset" | "submit" = "button"
- variant?: "default"
@click: MouseEvent
#default: { isDisabled: boolean; isFocusVisible: boolean; isHovered: boolean; isPending: boolean; isPressed: boolean }

## ColorArea

`import { ColorArea, ColorAreaThumb } from "ropav"`
Page: https://ropav.netlify.app/components/color-area

```vue-html
<ColorArea aria-label="Brand" class="w-64" default-value="hsl(200, 100%, 50%)">
  <ColorAreaThumb />
</ColorArea>
```

- colorSpace?: "hsb" | "hsl" | "rgb"
- defaultValue?: string | Color
- form?: string
- id?: string
- isDisabled?: boolean
- showDots?: boolean = false

Declared as a plain `boolean` rather than as `ColorAreaVariants["showDots"]`: Vue's compiler
only casts a bare `show-dots` attribute to `true` for a prop it can see is Boolean, and an
indexed access into an imported type is not something it can resolve. Written the other way
the attribute arrives as `""`, which no variant matches, and the dots silently never appear. — Overlays a dot pattern, purely decorative.
- value?: string | Color
- xChannel?: "alpha" | "blue" | "brightness" | "green" | "hue" | "lightness" | "red" | "saturation"
- xName?: string
- yChannel?: "alpha" | "blue" | "brightness" | "green" | "hue" | "lightness" | "red" | "saturation"
- yName?: string
@change: Color
@changeEnd: Color
@update:value: Color
#default: { color: Color; isDisabled: boolean }
ColorAreaThumb #default: { color: Color; isDisabled: boolean; isDragging: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean }

## ColorField

`import { ColorField } from "ropav"`
Page: https://ropav.netlify.app/components/color-field

```vue-html
<ColorField class="w-72" default-value="#0485f7">
  <Label>Brand colour</Label>
  <ColorInputGroup>
    <ColorInputGroupPrefix>
      <ColorSwatch />
    </ColorInputGroupPrefix>
    <ColorInputGroupInput />
  </ColorInputGroup>
</ColorField>
```

- autoFocus?: boolean
- channel?: "alpha" | "blue" | "brightness" | "green" | "hue" | "lightness" | "red" | "saturation"
- colorSpace?: "hsb" | "hsl" | "rgb"
- defaultValue?: string | Color | null
- form?: string
- fullWidth?: boolean
- id?: string
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- isWheelDisabled?: boolean
- name?: string
- validate?: ValidationFunction<Color | null>
- validationBehavior?: "aria" | "native"
- value?: string | Color | null
@change: Color | null
@focusChange: boolean
@update:value: Color | null
#default: { channel: "hex" | ColorChannel; colorValue: Color | null; isDisabled: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean; validationDetails: ValidationDetails; validationErrors: string[] }

## ColorInputGroup

`import { ColorInputGroup, ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupSuffix } from "ropav"`

Arranged inside: color-field.

- fullWidth?: boolean
- isDisabled?: boolean
- isInvalid?: boolean
- size?: "xs" | "sm" | "md" | "lg" = "md"
- variant?: "primary" | "secondary" = "primary"
#default: { isDisabled: boolean; isFocusVisible: boolean; isFocusWithin: boolean; isHovered: boolean; isInvalid: boolean }
ColorInputGroupInput: placeholder?: string
Structure only: ColorInputGroupPrefix, ColorInputGroupSuffix.

## ColorPicker

`import { ColorPicker, ColorPickerPopover, ColorPickerTrigger } from "ropav"`
Page: https://ropav.netlify.app/components/color-picker

```vue-html
<ColorPicker default-value="#0485f7">
  <ColorPickerTrigger>
    <ColorSwatch size="lg" />
    <Label>Brand colour</Label>
  </ColorPickerTrigger>

  <ColorPickerPopover>
    <ColorArea
      aria-label="Saturation and brightness"
      class="picker"
      color-space="hsb"
      x-channel="saturation"
      y-channel="brightness"
    >
      <ColorAreaThumb />
    </ColorArea>

    <ColorSlider channel="hue" class="channel" color-space="hsb">
      <ColorSliderTrack>
        <ColorSliderThumb />
      </ColorSliderTrack>
    </ColorSlider>
  </ColorPickerPopover>
</ColorPicker>
```

- defaultOpen?: boolean
- defaultValue?: string | Color = "#000000"
- isOpen?: boolean
- value?: string | Color
@change: Color
@openChange: boolean
@update:isOpen: boolean
@update:value: Color
#default: { color: Color }
ColorPickerPopover: containerPadding?: number; crossOffset?: number; isKeyboardDismissDisabled?: boolean; offset?: number; placement?: "bottom" | "bottom end" | "bottom left" | "bottom right" | "bottom start" | "end" | "end bottom" | "end top" | "left" | "left bottom" | "left top" | "right" | "right bottom" | "right top" | "start" | "start bottom" | "start top" | "top" | "top end" | "top left" | "top right" | "top start" = "bottom left"; shouldFlip?: boolean
ColorPickerTrigger: type?: "button" | "reset" | "submit" = "button"

## ColorSlider

`import { ColorSlider, ColorSliderOutput, ColorSliderThumb, ColorSliderTrack } from "ropav"`
Page: https://ropav.netlify.app/components/color-slider

```vue-html
<ColorSlider channel="hue" class="w-72" color-space="hsl" default-value="hsl(200, 100%, 50%)">
  <Label>Hue</Label>
  <ColorSliderOutput />
  <ColorSliderTrack>
    <ColorSliderThumb />
  </ColorSliderTrack>
</ColorSlider>
```

- channel!: "alpha" | "blue" | "brightness" | "green" | "hue" | "lightness" | "red" | "saturation" — The channel the slider drives.
- colorSpace?: "hsb" | "hsl" | "rgb"
- defaultValue?: string | Color
- form?: string
- id?: string
- isDisabled?: boolean
- name?: string
- orientation?: "horizontal" | "vertical" = "horizontal"
- value?: string | Color
@change: Color
@changeEnd: Color
@update:value: Color
#default: { color: Color; isDisabled: boolean; orientation: SliderOrientation }
ColorSliderThumb #default: { color: Color; isDisabled: boolean; isDragging: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean }
ColorSliderTrack #default: { color: Color; isDisabled: boolean; orientation: SliderOrientation }
Structure only: ColorSliderOutput.

## ColorSwatch

`import { ColorSwatch } from "ropav"`
Page: https://ropav.netlify.app/components/color-swatch

```vue-html
<ColorSwatch color="#0485f7" />
```

- color?: string | Color = "#fff0"
- colorName?: string
- id?: string
- shape?: "circle" | "square" = "circle"
- size?: "xs" | "sm" | "md" | "lg" | "xl" = "md"
#default: { color: Color }

## ColorSwatchPicker

`import { ColorSwatchPicker, ColorSwatchPickerIndicator, ColorSwatchPickerItem, ColorSwatchPickerSwatch } from "ropav"`
Page: https://ropav.netlify.app/components/color-swatch-picker

```vue-html
<ColorSwatchPicker aria-label="Brand colour" default-value="#3b82f6">
  <ColorSwatchPickerItem color="#f43f5e">
    <ColorSwatchPickerSwatch />
    <ColorSwatchPickerIndicator />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#8b5cf6">
    <ColorSwatchPickerSwatch />
    <ColorSwatchPickerIndicator />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#3b82f6">
    <ColorSwatchPickerSwatch />
    <ColorSwatchPickerIndicator />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#10b981">
    <ColorSwatchPickerSwatch />
    <ColorSwatchPickerIndicator />
  </ColorSwatchPickerItem>
</ColorSwatchPicker>
```

- defaultValue?: string | Color = "#000000"
- layout?: "grid" | "stack" = "grid"
- size?: "xs" | "sm" | "md" | "lg" | "xl" = "md"
- value?: string | Color
- variant?: "circle" | "square" = "circle"
@change: Color
@update:value: Color
#default: { color: Color }
ColorSwatchPickerIndicator #default: { color: Color; isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean; isSelected: boolean }
ColorSwatchPickerItem: color?: string | Color = "#0000"; isDisabled?: boolean
ColorSwatchPickerItem #default: { color: Color; isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean; isSelected: boolean }
ColorSwatchPickerSwatch: color?: string | Color; colorName?: string; id?: string

## ComboBox

`import { ComboBox, ComboBoxInputGroup, ComboBoxPopover, ComboBoxTrigger, ComboBoxValue } from "ropav"`
Page: https://ropav.netlify.app/components/combo-box

```vue-html
<ComboBox v-slot="{ items: matches }" class="field" :item-text-value="byName" :items="cities">
  <Label>Destination</Label>
  <ComboBoxInputGroup>
    <Input placeholder="Start typing…" />
    <ComboBoxTrigger />
  </ComboBoxInputGroup>

  <ComboBoxPopover>
    <ListBox>
      <ListBoxItem v-for="city in matches" :id="city.id" :key="city.id" :text-value="city.name">
        {{ city.name }}
        <ListBoxItemIndicator />
      </ListBoxItem>
    </ListBox>
  </ComboBoxPopover>
</ComboBox>
```

- allowsCustomValue?: boolean
- allowsEmptyCollection?: boolean
- autoComplete?: string
- autoFocus?: boolean
- defaultFilter?: ComboBoxFilter | null
- defaultInputValue?: string
- defaultValue?: SelectedValue
- disabledBehavior?: "all" | "selection" = "all"
- disabledKeys?: Iterable<CollectionKey>
- form?: string
- formValue?: "key" | "text" = "key"

Forced to `"text"` by `allowsCustomValue`, where text matching no option is the whole point
and there is no key to send.
- fullWidth?: boolean
- id?: string
- inputMode?: string
- inputValue?: string
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- itemDisabled?: ((item: T) => boolean) — Whether an item cannot be chosen.
- itemKey?: ((item: T, index: number) => CollectionKey) — An item's key.
- items!: readonly T[] — The options, as data.
- itemTextValue?: ((item: T) => string | undefined) — Text shown for an item in the field, and matched on by the filter.
- maxLength?: number
- menuTrigger?: "focus" | "input" | "manual" = "focus"
- minLength?: number
- name?: string
- pattern?: string
- placeholder?: string
- selectionMode?: "single" | "multiple" = "single"
- shouldCloseOnBlur?: boolean = true — Whether leaving the field commits what is in it and closes the popover.
- shouldFocusWrap?: boolean
- size?: "xs" | "sm" | "md" | "lg" = "md"
- validate?: ValidationFunction<ComboBoxValidationValue>
- validationBehavior?: "aria" | "native" = "native"
- value?: SelectedValue
- variant?: "primary" | "secondary" = "primary"
@change: SelectedValue
@focusChange: boolean
@inputChange: string
@openChange: boolean, "focus" | "input" | "manual" | undefined
@update:inputValue: string
@update:value: SelectedValue
ComboBoxInputGroup #default: { isDisabled: boolean; isFocusVisible: boolean; isFocusWithin: boolean; isHovered: boolean; isInvalid: boolean }
ComboBoxPopover: arrowBoundaryOffset?: number; containerPadding?: number; crossOffset?: number; isKeyboardDismissDisabled?: boolean; offset?: number = 8; placement?: "bottom" | "bottom end" | "bottom left" | "bottom right" | "bottom start" | "end" | "end bottom" | "end top" | "left" | "left bottom" | "left top" | "right" | "right bottom" | "right top" | "start" | "start bottom" | "start top" | "top" | "top end" | "top left" | "top right" | "top start" = "bottom"; shouldFlip?: boolean
ComboBoxValue: placeholder?: string
Structure only: ComboBoxTrigger.

## DateField

`import { DateField } from "ropav"`
Page: https://ropav.netlify.app/components/date-field

```vue-html
<div class="field">
  <DateField name="date">
    <Label>Date of birth</Label>
    <DateFieldGroup>
      <DateFieldInput>
        <template #default="{ segment }">
          <DateFieldSegment :segment />
        </template>
      </DateFieldInput>
    </DateFieldGroup>
  </DateField>
</div>
```

- autoComplete?: string
- autoFocus?: boolean
- createCalendar?: ((identifier: CalendarIdentifier) => Calendar) — Builds the calendar system for an identifier.
- defaultValue?: DateValue | null
- form?: string
- fullWidth?: boolean
- granularity?: "day" | "hour" | "minute" | "second"
- hideTimeZone?: boolean
- hourCycle?: 12 | 24
- id?: string
- isDateUnavailable?: ((date: DateValue) => boolean) — Rules a date out even though it is inside the range.
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- locale?: string
- maxGranularity?: "day" | "hour" | "minute" | "month" | "second" | "year" = "year"
- maxValue?: DateValue | null
- minValue?: DateValue | null
- name?: string
- placeholderValue?: DateValue | null
- shouldForceLeadingZeros?: boolean
- validate?: ((value: DateValue | null) => string | true | string[] | null | undefined) — Extra rule the value has to satisfy, beyond the range.
- validationBehavior?: "aria" | "native" = "native"
- value?: DateValue | null
@change: DateValue | null
@focusChange: boolean
@update:value: DateValue | null
#default: { isDisabled: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean }

## DatePicker

`import { DatePicker, DatePickerPopover, DatePickerTrigger, DatePickerTriggerIndicator } from "ropav"`
Page: https://ropav.netlify.app/components/date-picker

```vue-html
<div class="field">
  <DatePicker name="date">
    <Label>Date</Label>

    <DatePickerGroup full-width>
      <DatePickerInput>
        <template #default="{ segment }">
          <DatePickerSegment :segment />
        </template>
      </DatePickerInput>
      <DatePickerSuffix>
        <DatePickerTrigger>
          <DatePickerTriggerIndicator />
        </DatePickerTrigger>
      </DatePickerSuffix>
    </DatePickerGroup>

    <DatePickerPopover>
      <Calendar aria-label="Selected date">
        <CalendarHeader>
          <CalendarNavButton slot="previous" />
          <CalendarNavButton slot="next" />
        </CalendarHeader>
        <CalendarGrid>
          <CalendarGridHeader>
            <template #default="{ day }">
              <CalendarHeaderCell>{{ day }}</CalendarHeaderCell>
            </template>
          </CalendarGridHeader>
          <CalendarGridBody>
            <template #default="{ date }">
              <CalendarCell :date />
            </template>
          </CalendarGridBody>
        </CalendarGrid>
      </Calendar>
    </DatePickerPopover>
  </DatePicker>
</div>
```

- autoComplete?: string
- autoFocus?: boolean
- createCalendar?: ((identifier: CalendarIdentifier) => Calendar) — Builds the calendar system for an identifier.
- defaultOpen?: boolean
- defaultValue?: DateValue | null
- firstDayOfWeek?: "fri" | "mon" | "sat" | "sun" | "thu" | "tue" | "wed"
- form?: string
- granularity?: "day" | "hour" | "minute" | "second"
- hideTimeZone?: boolean
- hourCycle?: 12 | 24
- id?: string
- isDateUnavailable?: ((date: DateValue) => boolean) — Rules a date out even though it is inside the range.
- isDisabled?: boolean
- isInvalid?: boolean
- isOpen?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- locale?: string
- maxValue?: DateValue | null
- minValue?: DateValue | null
- name?: string
- pageBehavior?: "single" | "visible" = "visible"
- placeholderValue?: DateValue | null
- shouldCloseOnSelect?: boolean | (() => boolean) = true — Whether picking a date closes the popover.
- shouldForceLeadingZeros?: boolean
- validate?: ((value: DateValue | null) => string | true | string[] | null | undefined) — Extra rule the value has to satisfy, beyond the range.
- validationBehavior?: "aria" | "native" = "native"
- value?: DateValue | null
@change: DateValue | null
@focusChange: boolean
@openChange: boolean
@update:isOpen: boolean
@update:value: DateValue | null
#default: { isDisabled: boolean; isInvalid: boolean; isOpen: boolean; isReadOnly: boolean; isRequired: boolean }
DatePickerPopover: containerPadding?: number; crossOffset?: number; isKeyboardDismissDisabled?: boolean = false; offset?: number; placement?: "bottom" | "bottom end" | "bottom left" | "bottom right" | "bottom start" | "end" | "end bottom" | "end top" | "left" | "left bottom" | "left top" | "right" | "right bottom" | "right top" | "start" | "start bottom" | "start top" | "top" | "top end" | "top left" | "top right" | "top start" = "bottom"; shouldFlip?: boolean
Structure only: DatePickerTrigger, DatePickerTriggerIndicator.

## DateRangePicker

`import { DateRangePicker, DateRangePickerPopover, DateRangePickerRangeSeparator, DateRangePickerTrigger, DateRangePickerTriggerIndicator } from "ropav"`
Page: https://ropav.netlify.app/components/date-range-picker

```vue-html
<DateRangePicker class="field" end-name="endDate" start-name="startDate">
  <Label>Trip dates</Label>

  <DateRangePickerGroup full-width>
    <DateRangePickerInput slot="start">
      <template #default="{ segment }">
        <DateRangePickerSegment :segment />
      </template>
    </DateRangePickerInput>
    <DateRangePickerRangeSeparator />
    <DateRangePickerInput slot="end">
      <template #default="{ segment }">
        <DateRangePickerSegment :segment />
      </template>
    </DateRangePickerInput>
    <DateRangePickerSuffix>
      <DateRangePickerTrigger>
        <DateRangePickerTriggerIndicator />
      </DateRangePickerTrigger>
    </DateRangePickerSuffix>
  </DateRangePickerGroup>

  <DateRangePickerPopover>
    <RangeCalendar aria-label="Selected range">
      <RangeCalendarHeader>
        <RangeCalendarNavButton slot="previous" />
        <RangeCalendarHeading />
        <RangeCalendarNavButton slot="next" />
      </RangeCalendarHeader>
      <RangeCalendarGrid>
        <RangeCalendarGridHeader>
          <template #default="{ day }">
            <RangeCalendarHeaderCell>{{ day }}</RangeCalendarHeaderCell>
          </template>
        </RangeCalendarGridHeader>
        <RangeCalendarGridBody>
          <template #default="{ date }">
            <RangeCalendarCell :date />
          </template>
        </RangeCalendarGridBody>
      </RangeCalendarGrid>
    </RangeCalendar>
  </DateRangePickerPopover>
</DateRangePicker>
```

- allowsNonContiguousRanges?: boolean
- autoFocus?: boolean
- createCalendar?: ((identifier: CalendarIdentifier) => Calendar) — Builds the calendar system for an identifier.
- defaultOpen?: boolean
- defaultValue?: DateRange | null
- endName?: string
- firstDayOfWeek?: "fri" | "mon" | "sat" | "sun" | "thu" | "tue" | "wed"
- form?: string
- granularity?: "day" | "hour" | "minute" | "second"
- hideTimeZone?: boolean
- hourCycle?: 12 | 24
- id?: string
- isDateUnavailable?: ((date: DateValue) => boolean) — Rules a date out even though it is inside the range.
- isDisabled?: boolean
- isInvalid?: boolean
- isOpen?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- locale?: string
- maxValue?: DateValue | null
- minValue?: DateValue | null
- pageBehavior?: "single" | "visible" = "visible"
- placeholderValue?: DateValue | null
- shouldCloseOnSelect?: boolean | (() => boolean) = true — Whether picking a range closes the popover.
- shouldForceLeadingZeros?: boolean
- startName?: string
- validate?: ((value: DateRange | null) => string | true | string[] | null | undefined) — Extra rule the range has to satisfy, beyond the bounds.
- validationBehavior?: "aria" | "native" = "native"
- value?: DateRange | null
@change: DateRange | null
@focusChange: boolean
@openChange: boolean
@update:isOpen: boolean
@update:value: DateRange | null
#default: { isDisabled: boolean; isInvalid: boolean; isOpen: boolean; isReadOnly: boolean; isRequired: boolean }
DateRangePickerPopover: containerPadding?: number; crossOffset?: number; isKeyboardDismissDisabled?: boolean = false; offset?: number; placement?: "bottom" | "bottom end" | "bottom left" | "bottom right" | "bottom start" | "end" | "end bottom" | "end top" | "left" | "left bottom" | "left top" | "right" | "right bottom" | "right top" | "start" | "start bottom" | "start top" | "top" | "top end" | "top left" | "top right" | "top start" = "bottom"; shouldFlip?: boolean
Structure only: DateRangePickerRangeSeparator, DateRangePickerTrigger, DateRangePickerTriggerIndicator.

## Description

`import { Description } from "ropav"`

Arranged inside: fieldset, the form pattern, the scheduling pattern, the settings pattern.

## Disclosure

`import { Disclosure, DisclosureBody, DisclosureContent, DisclosureHeading, DisclosureIndicator, DisclosureTrigger } from "ropav"`
Page: https://ropav.netlify.app/components/disclosure

```vue-html
<Disclosure class="panel" default-expanded>
  <DisclosureHeading>
    <Button class="trigger" variant="tertiary">
      What is in the box?
      <DisclosureIndicator class="indicator" />
    </Button>
  </DisclosureHeading>
  <DisclosureContent>
    <DisclosureBody class="body">
      Every component, its stylesheet, and the types that go with them.
    </DisclosureBody>
  </DisclosureContent>
</Disclosure>
```

- defaultExpanded?: boolean
- id?: string
- isDisabled?: boolean
- isExpanded?: boolean
@expandedChange: boolean
@update:isExpanded: boolean
DisclosureContent: role?: string = "group"
Structure only: DisclosureBody, DisclosureHeading, DisclosureIndicator, DisclosureTrigger.

## DisclosureGroup

`import { DisclosureGroup } from "ropav"`
Page: https://ropav.netlify.app/components/disclosure-group

```vue-html
<DisclosureGroup class="panel" :default-expanded-keys="['styling']">
  <Disclosure v-for="section in sections" :id="section.id" :key="section.id">
    <DisclosureHeading>
      <Button class="trigger" variant="tertiary">
        {{ section.label }}
        <DisclosureIndicator class="indicator" />
      </Button>
    </DisclosureHeading>
    <DisclosureContent>
      <DisclosureBody class="body">{{ section.body }}</DisclosureBody>
    </DisclosureContent>
  </Disclosure>
</DisclosureGroup>
```

- allowsMultipleExpanded?: boolean
- defaultExpandedKeys?: Iterable<DisclosureKey>
- expandedKeys?: Iterable<DisclosureKey>
- isDisabled?: boolean
@expandedChange: Set<DisclosureKey>
@update:expandedKeys: Set<DisclosureKey>

## DragPreview

`import { DragPreview } from "ropav"`

No worked example yet.

#default: { items: DragItem[] }

## Drawer

`import { Drawer, DrawerBackdrop, DrawerBody, DrawerClose, DrawerCloseTrigger, DrawerContent, DrawerDialog, DrawerFooter, DrawerHandle, DrawerHeader, DrawerHeading, DrawerTrigger } from "ropav"`
Page: https://ropav.netlify.app/components/drawer

```vue-html
<Drawer v-for="placement in placements" :key="placement">
  <Button class="side" variant="secondary">{{ placement }}</Button>

  <DrawerBackdrop>
    <DrawerContent :placement="placement">
      <DrawerDialog>
        <DrawerHandle />
        <DrawerHeader>
          <DrawerHeading>Filters</DrawerHeading>
        </DrawerHeader>
        <DrawerBody>
          <p class="note">
            The handle is draggable, so the drawer can be dismissed by flicking it away.
          </p>
        </DrawerBody>
        <DrawerFooter>
          <DrawerClose><Button variant="tertiary">Reset</Button></DrawerClose>
          <DrawerClose><Button>Apply</Button></DrawerClose>
        </DrawerFooter>
      </DrawerDialog>
    </DrawerContent>
  </DrawerBackdrop>
</Drawer>
```

- defaultOpen?: boolean
- isDisabled?: boolean
- isOpen?: boolean
- state?: OverlayTriggerState
@openChange: boolean
@update:isOpen: boolean
DrawerBackdrop: isDismissable?: boolean; isEntering?: boolean; isExiting?: boolean; isKeyboardDismissDisabled?: boolean = false; portalContainer?: string | HTMLElement = document.body; shouldCloseOnInteractOutside?: ((element: Element) => boolean); style?: string | CSSProperties; variant?: "blur" | "opaque" | "transparent" = "opaque"
DrawerContent: placement?: "bottom" | "left" | "right" | "top" = "bottom"
DrawerDialog #default: { close: () => void }
DrawerHeading: level?: number = 2
DrawerTrigger: isDisabled?: boolean
Structure only: DrawerBody, DrawerClose, DrawerCloseTrigger, DrawerFooter, DrawerHandle, DrawerHeader.

## DropZone

`import { DropZone, DropZoneTrigger } from "ropav"`
Page: https://ropav.netlify.app/components/drop-zone

```vue-html
<div class="stack">
  <DropZone aria-label="Upload files" multiple @select="onSelect">
    <p>Drop files here, or <DropZoneTrigger>browse</DropZoneTrigger></p>
  </DropZone>

  <p v-if="taken.length" class="note">Took: {{ taken.join(", ") }}</p>
</div>
```

- accept?: string
- isDisabled?: boolean
- multiple?: boolean
@select: File[]
#default: { isDisabled: boolean; isDropTarget: boolean; open: () => void; status: DropZoneStatus }
Structure only: DropZoneTrigger.

## Dropdown

`import { Dropdown, DropdownMenu, DropdownPopover, DropdownSubmenuTrigger, DropdownTrigger } from "ropav"`
Page: https://ropav.netlify.app/components/dropdown

```vue-html
<Dropdown>
  <Button variant="secondary">Actions</Button>

  <DropdownPopover>
    <DropdownMenu>
      <MenuSection>
        <MenuItem id="new" text-value="New file">
          <Label>New file</Label>
        </MenuItem>
        <MenuItem id="copy" text-value="Copy link">
          <Label>Copy link</Label>
        </MenuItem>
      </MenuSection>

      <Separator />

      <MenuSection>
        <MenuItem id="delete" text-value="Delete file" variant="danger">
          <Label>Delete file</Label>
        </MenuItem>
      </MenuSection>
    </DropdownMenu>
  </DropdownPopover>
</Dropdown>
```

- defaultOpen?: boolean
- isDisabled?: boolean
- isOpen?: boolean
- trigger?: "longPress" | "press" = "press"
@openChange: boolean
@update:isOpen: boolean
DropdownMenu: defaultSelectedKeys?: "all" | Iterable<CollectionKey>; disabledBehavior?: "all" | "selection" = "all"; disabledKeys?: Iterable<CollectionKey>; disallowEmptySelection?: boolean; selectedKeys?: "all" | Iterable<CollectionKey>; selectionBehavior?: "replace" | "toggle" = "toggle"; selectionMode?: "none" | "single" | "multiple" = "none"; shouldCloseOnSelect?: boolean = true; size?: "xs" | "sm" | "md" | "lg" = "md"
DropdownMenu @action: CollectionKey
DropdownMenu @selectionChange: CollectionSelection
DropdownMenu @update:selectedKeys: CollectionSelection
DropdownPopover: arrowBoundaryOffset?: number = 0; containerPadding?: number = 12; crossOffset?: number = 0; isKeyboardDismissDisabled?: boolean = false; offset?: number = 8; placement?: "bottom" | "bottom end" | "bottom left" | "bottom right" | "bottom start" | "end" | "end bottom" | "end top" | "left" | "left bottom" | "left top" | "right" | "right bottom" | "right top" | "start" | "start bottom" | "start top" | "top" | "top end" | "top left" | "top right" | "top start"; shouldFlip?: boolean = true
DropdownSubmenuTrigger: delay?: number = HOVER_DELAY_MS; isDisabled?: boolean
DropdownTrigger: isDisabled?: boolean; type?: "button" | "reset" | "submit" = "button"

## EmptyState

`import { EmptyState } from "ropav"`
Page: https://ropav.netlify.app/components/empty-state

```vue-html
<div class="stack">
  <SearchField v-model:value="query" aria-label="Search reviewers">
    <SearchFieldGroup>
      <SearchFieldSearchIcon />
      <SearchFieldInput placeholder="Search reviewers…" />
      <SearchFieldClearButton />
    </SearchFieldGroup>
  </SearchField>

  <Surface class="surface">
    <ListBox aria-label="Reviewers">
      <template #empty>
        <EmptyState>Nobody matches that search.</EmptyState>
      </template>

      <ListBoxItem v-for="person in matched" :id="person.id" :key="person.id">
        <Label>{{ person.name }}</Label>
      </ListBoxItem>
    </ListBox>
  </Surface>
</div>
```

## ErrorMessage

`import { ErrorMessage } from "ropav"`

No worked example yet.

## FieldError

`import { FieldError, FieldErrorContent } from "ropav"`

Arranged inside: the form pattern.

#default: { validationDetails: ValidationDetails; validationErrors: string[] }
Structure only: FieldErrorContent.

## Fieldset

`import { Fieldset, FieldGroup, FieldsetActions, FieldsetLegend } from "ropav"`
Page: https://ropav.netlify.app/components/fieldset

```vue-html
<Fieldset class="fieldset">
  <FieldsetLegend>Billing address</FieldsetLegend>
  <Description>Where the invoice is sent.</Description>

  <FieldGroup>
    <TextField name="street">
      <Label>Street</Label>
      <Input placeholder="221B Baker Street" />
    </TextField>
    <TextField name="city">
      <Label>City</Label>
      <Input placeholder="London" />
    </TextField>
  </FieldGroup>

  <FieldsetActions>
    <Button variant="secondary">Cancel</Button>
    <Button>Save</Button>
  </FieldsetActions>
</Fieldset>
```

- disabled?: boolean
Structure only: FieldGroup, FieldsetActions, FieldsetLegend.

## Form

`import { Form } from "ropav"`

Arranged inside: the form pattern, the settings pattern.

- validationBehavior?: "aria" | "native" = "native"
- validationErrors?: FormValidationErrors

## Header

`import { Header } from "ropav"`

No worked example yet.

## I18nProvider

`import { I18nProvider } from "ropav"`

No worked example yet.

- locale?: string | null

## DangerIcon

`import { DangerIcon, ExternalLinkIcon, IconCalendar, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClose, IconMinus, IconOverlayArrow, IconPlus, IconSearch, InfoIcon, SuccessIcon, WarningIcon } from "ropav"`

Arranged inside: input-group, sidebar, the app-shell pattern.

IconChevronRight: height?: string | number = 16; width?: string | number = 16
Structure only: DangerIcon, ExternalLinkIcon, IconCalendar, IconChevronDown, IconChevronLeft, IconChevronUp, IconClose, IconMinus, IconOverlayArrow, IconPlus, IconSearch, InfoIcon, SuccessIcon, WarningIcon.

## Input

`import { Input } from "ropav"`
Page: https://ropav.netlify.app/components/input

```vue-html
<div class="stack">
  <TextField v-for="size in sizes" :key="size" :size="size">
    <Label class="label">{{ size }}</Label>
    <Input class="field" :placeholder="`A ${size} control`" />
  </TextField>
</div>
```

- fullWidth?: boolean
- placeholder?: string
- size?: "xs" | "sm" | "md" | "lg" = "md"
- value?: string
- variant?: "primary" | "secondary" = "primary"
@change: string
@update:value: string

## InputGroup

`import { InputGroup, InputGroupInput, InputGroupPrefix, InputGroupSuffix, InputGroupTextArea } from "ropav"`
Page: https://ropav.netlify.app/components/input-group

```vue-html
<InputGroup class="w-72">
  <InputGroupPrefix>
    <IconSearch />
  </InputGroupPrefix>
  <InputGroupInput placeholder="Anything at all" />
</InputGroup>
```

- fullWidth?: boolean
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- size?: "xs" | "sm" | "md" | "lg" = "md"
- variant?: "primary" | "secondary" = "primary"
#default: { isDisabled: boolean; isFocusVisible: boolean; isFocusWithin: boolean; isHovered: boolean; isInvalid: boolean }
InputGroupInput: placeholder?: string; value?: string
InputGroupInput @change: string
InputGroupInput @update:value: string
InputGroupTextArea: placeholder?: string; value?: string
InputGroupTextArea @change: string
InputGroupTextArea @update:value: string
Structure only: InputGroupPrefix, InputGroupSuffix.

## InputOTP

`import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "ropav"`
Page: https://ropav.netlify.app/components/input-otp

```vue-html
<InputOTP aria-label="Verification code" default-value="04" :max-length="4">
  <InputOTPGroup>
    <InputOTPSlot :index="0" />
    <InputOTPSlot :index="1" />
    <InputOTPSlot :index="2" />
    <InputOTPSlot :index="3" />
  </InputOTPGroup>
</InputOTP>
```

- autoComplete?: string = "one-time-code"
- defaultValue?: string
- form?: string
- id?: string
- inputClass?: string
- inputMode?: string = "numeric"
- isDisabled?: boolean
- isInvalid?: boolean
- maxLength!: number — How many characters the code is.
- name?: string
- pasteTransformer?: ((pasted: string) => string) — Rewrites pasted text before it is accepted — to strip spaces or a prefix, say.
- pattern?: string | RegExp
- placeholder?: string
- pushPasswordManagerStrategy?: "increase-width" | "none" = "increase-width"
- textAlign?: "center" | "left" | "right" = "left"
- validationDetails?: ValidationDetails
- validationErrors?: string[]
- value?: string
- variant?: "primary" | "secondary" = "primary"
@change: string
@complete: string
@update:value: string
InputOTPSlot: index!: number
Structure only: InputOTPGroup, InputOTPSeparator.

## Kbd

`import { Kbd, KbdAbbr, KbdContent } from "ropav"`
Page: https://ropav.netlify.app/components/kbd

```vue-html
<Kbd>
  <KbdAbbr key-value="command" />
  <KbdContent>K</KbdContent>
</Kbd>
```

- variant?: "default" | "light"
KbdAbbr: keyValue!: "alt" | "capslock" | "command" | "ctrl" | "delete" | "down" | "end" | "enter" | "escape" | "fn" | "help" | "home" | "left" | "option" | "pagedown" | "pageup" | "right" | "shift" | "space" | "tab" | "up" | "win"
Structure only: KbdContent.

## Label

`import { Label } from "ropav"`

Arranged inside: autocomplete, checkbox-group, color-field, color-picker, color-slider, combo-box, date-field, date-picker, date-range-picker, dropdown, empty-state, fieldset, input, list-box, menu, meter, number-field, progress-bar, radio-group, search-field, select, slider, tag-group, textfield, time-field, the app-shell pattern, the data-table pattern, the form pattern, the overlays pattern, the scheduling pattern, the settings pattern, the upload pattern.

- isDisabled?: boolean
- isInvalid?: boolean
- isRequired?: boolean

## Link

`import { Link, LinkIcon } from "ropav"`
Page: https://ropav.netlify.app/components/link

```vue-html
<Link href="https://github.com/daopk/ropav" rel="noopener noreferrer" target="_blank">
  Ropav on GitHub
  <LinkIcon />
</Link>

<Link href="#" is-disabled>
  Not available yet
  <LinkIcon />
</Link>
```

- download?: string | boolean
- href?: string
- hrefLang?: string
- isDisabled?: boolean
- ping?: string
- referrerPolicy?: "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"
- rel?: string
- routerOptions?: unknown
- target?: string
@press: PressEvent
#default: { isCurrent: boolean; isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean }
Structure only: LinkIcon.

## ListBox

`import { ListBox, ListBoxDropIndicator, ListBoxLoadMoreItem } from "ropav"`
Page: https://ropav.netlify.app/components/list-box

```vue-html
<Surface class="surface">
  <ListBox aria-label="Reviewers" :default-selected-keys="['ada']" selection-mode="multiple">
    <ListBoxSection>
      <ListBoxItem v-for="person in people" :id="person.id" :key="person.id">
        <Label>{{ person.name }}</Label>
        <ListBoxItemIndicator />
      </ListBoxItem>
    </ListBoxSection>
  </ListBox>
</Surface>
```

- defaultSelectedKeys?: "all" | Iterable<CollectionKey>
- disabledBehavior?: "all" | "selection" = "all"
- disabledKeys?: Iterable<CollectionKey>
- disallowEmptySelection?: boolean
- dragAndDropHooks?: DragAndDropHooks
- itemKey?: ((item: T, index: number) => CollectionKey) — An item's key.
- items?: readonly T[]
- itemTextValue?: ((item: T) => string | undefined) — Text an item is matched on by typeahead.
- selectedKeys?: "all" | Iterable<CollectionKey>
- selectionBehavior?: "replace" | "toggle" = "toggle"
- selectionMode?: "none" | "single" | "multiple" = "none"
- size?: "xs" | "sm" | "md" | "lg" = "md"
- variant?: "danger" | "default"
@action: CollectionKey
@selectionChange: CollectionSelection
@update:selectedKeys: CollectionSelection
ListBoxDropIndicator: target!: DropTarget
ListBoxLoadMoreItem: isLoading?: boolean; scrollOffset?: number = 1
ListBoxLoadMoreItem @loadMore: —

## ListBoxItem

`import { ListBoxItem, ListBoxItemIndicator } from "ropav"`

Arranged inside: autocomplete, combo-box, empty-state, list-box, select, the form pattern, the settings pattern.

- id?: CollectionKey
- isDisabled?: boolean
- textValue?: string
- variant?: "danger" | "default"
#default: { isDisabled: boolean; isDragging: boolean | undefined; isDropTarget: boolean | undefined; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean; isSelected: boolean; selectionMode: "multiple" | "none" | "single" }
ListBoxItemIndicator #default: { isSelected: boolean }

## ListBoxSection

`import { ListBoxSection } from "ropav"`

Arranged inside: list-box.

## Menu

`import { Menu } from "ropav"`
Page: https://ropav.netlify.app/components/menu

```vue-html
<Surface class="surface">
  <Menu aria-label="File actions">
    <MenuItem id="new" text-value="New file">
      <Label>New file</Label>
    </MenuItem>
    <MenuItem id="copy" text-value="Copy link">
      <Label>Copy link</Label>
    </MenuItem>

    <Separator />

    <MenuItem id="delete" text-value="Delete file" variant="danger">
      <Label>Delete file</Label>
    </MenuItem>
  </Menu>
</Surface>
```

- autoFocus?: boolean | FocusStrategy
- defaultSelectedKeys?: "all" | Iterable<CollectionKey>
- disabledBehavior?: "all" | "selection" = "all"
- disabledKeys?: Iterable<CollectionKey>
- disallowEmptySelection?: boolean
- id?: string
- selectedKeys?: "all" | Iterable<CollectionKey>
- selectionBehavior?: "replace" | "toggle" = "toggle"
- selectionMode?: "none" | "single" | "multiple" = "none"
- shouldCloseOnSelect?: boolean = true — Whether choosing an item closes the menu.
- size?: "xs" | "sm" | "md" | "lg" = "md"
@action: CollectionKey
@close: —
@selectionChange: CollectionSelection
@update:selectedKeys: CollectionSelection

## MenuItem

`import { MenuItem, MenuItemIndicator, MenuItemSubmenuIndicator } from "ropav"`

Arranged inside: dropdown, menu, the app-shell pattern, the data-table pattern, the overlays pattern.

- id?: CollectionKey
- isDisabled?: boolean
- textValue?: string
- variant?: "danger" | "default" = "default"
#default: { hasSubmenu: boolean; isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isOpen: boolean; isPressed: boolean; isSelected: boolean; selectionMode: SelectionMode }
MenuItemIndicator: type?: "checkmark" | "dot" = "checkmark"
MenuItemIndicator #default: { isSelected: boolean }
Structure only: MenuItemSubmenuIndicator.

## MenuSection

`import { MenuSection } from "ropav"`

Arranged inside: dropdown.

- defaultSelectedKeys?: "all" | Iterable<CollectionKey>
- disallowEmptySelection?: boolean
- selectedKeys?: "all" | Iterable<CollectionKey>
- selectionBehavior?: "replace" | "toggle" = "toggle"
- selectionMode?: "none" | "single" | "multiple"
- shouldCloseOnSelect?: boolean
@selectionChange: CollectionSelection
@update:selectedKeys: CollectionSelection

## Meter

`import { Meter, MeterFill, MeterOutput, MeterTrack } from "ropav"`
Page: https://ropav.netlify.app/components/meter

```vue-html
<Meter class="w-80" :value="72">
  <Label>Storage</Label>
  <MeterOutput />
  <MeterTrack>
    <MeterFill />
  </MeterTrack>
</Meter>
```

- color?: "default" | "accent" | "success" | "warning" | "danger" = "accent"
- formatOptions?: Intl.NumberFormatOptions = {style: "percent"}
- id?: string
- maxValue?: number = 100
- minValue?: number = 0
- size?: "xs" | "sm" | "md" | "lg" = "md"
- value?: number = 0
- valueLabel?: string
#default: { percentage: number; valueText: string | undefined }
MeterFill: style?: string | CSSProperties
Structure only: MeterOutput, MeterTrack.

## Modal

`import { Modal, ModalBackdrop, ModalBody, ModalClose, ModalCloseTrigger, ModalContainer, ModalDialog, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalTrigger } from "ropav"`
Page: https://ropav.netlify.app/components/modal

```vue-html
<Modal>
  <Button variant="secondary">Open</Button>

  <ModalBackdrop>
    <ModalContainer>
      <ModalDialog class="dialog">
        <ModalCloseTrigger />

        <ModalHeader>
          <ModalHeading>Delete this project?</ModalHeading>
        </ModalHeader>

        <ModalBody>Everything in it goes with it. This cannot be undone.</ModalBody>

        <ModalFooter>
          <ModalClose>
            <Button variant="tertiary">Cancel</Button>
          </ModalClose>
          <ModalClose>
            <Button variant="danger">Delete</Button>
          </ModalClose>
        </ModalFooter>
      </ModalDialog>
    </ModalContainer>
  </ModalBackdrop>
</Modal>
```

- defaultOpen?: boolean
- isDisabled?: boolean
- isOpen?: boolean
- state?: OverlayTriggerState
@openChange: boolean
@update:isOpen: boolean
ModalBackdrop: isDismissable?: boolean = true; isEntering?: boolean; isExiting?: boolean; isKeyboardDismissDisabled?: boolean = false; portalContainer?: string | HTMLElement = document.body; shouldCloseOnInteractOutside?: ((element: Element) => boolean); style?: string | CSSProperties; variant?: "blur" | "opaque" | "transparent" = "opaque"
ModalContainer: placement?: "auto" | "bottom" | "center" | "top" = "auto"; scroll?: "inside" | "outside" = "inside"; size?: "xs" | "sm" | "md" | "lg" | "cover" | "full" = "md"
ModalDialog #default: { close: () => void }
ModalHeading: level?: number = 2
Structure only: ModalBody, ModalClose, ModalCloseTrigger, ModalFooter, ModalHeader, ModalIcon, ModalTrigger.

## NumberField

`import { NumberField, NumberFieldDecrementButton, NumberFieldGroup, NumberFieldIncrementButton, NumberFieldInput } from "ropav"`
Page: https://ropav.netlify.app/components/number-field

```vue-html
<NumberField class="w-48" :default-value="1024" name="width">
  <Label>Width</Label>
  <NumberFieldGroup>
    <NumberFieldDecrementButton />
    <NumberFieldInput />
    <NumberFieldIncrementButton />
  </NumberFieldGroup>
</NumberField>
```

- autoFocus?: boolean
- commitBehavior?: "snap" | "validate" = "snap"
- decrementAriaLabel?: string
- defaultValue?: number
- form?: string
- formatOptions?: Intl.NumberFormatOptions
- fullWidth?: boolean
- id?: string
- incrementAriaLabel?: string
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- isWheelDisabled?: boolean
- locale?: string
- maxValue?: number
- minValue?: number
- name?: string
- size?: "xs" | "sm" | "md" | "lg" = "md"
- step?: number = 1, or 0.01 for a percentage
- validate?: ValidationFunction<number>
- validationBehavior?: "aria" | "native" = "native"
- value?: number | null
- variant?: "primary" | "secondary" = "primary"
@change: number
@focusChange: boolean
@update:value: number
#default: { isDisabled: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean; numberValue: number; validationDetails: ValidationDetails; validationErrors: string[] }
NumberFieldGroup #default: { isDisabled: boolean; isFocusWithin: boolean; isHovered: boolean; isInvalid: boolean }
NumberFieldInput: placeholder?: string
Structure only: NumberFieldDecrementButton, NumberFieldIncrementButton.

## Pagination

`import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextIcon, PaginationPrevious, PaginationPreviousIcon, PaginationSummary } from "ropav"`
Page: https://ropav.netlify.app/components/pagination

```vue-html
<Pagination aria-label="Search results">
  <PaginationSummary>Showing 21–40 of 312</PaginationSummary>

  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious>
        <PaginationPreviousIcon />
        <span>Previous</span>
      </PaginationPrevious>
    </PaginationItem>

    <PaginationItem><PaginationLink>1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink is-active>2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink>3</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationLink>16</PaginationLink></PaginationItem>

    <PaginationItem>
      <PaginationNext>
        <span>Next</span>
        <PaginationNextIcon />
      </PaginationNext>
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

- size?: "xs" | "sm" | "md" | "lg" = "md"
PaginationLink: isActive?: boolean; isDisabled?: boolean; type?: "button" | "reset" | "submit" = "button"
PaginationLink @click: MouseEvent
PaginationLink #default: { isDisabled: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean }
PaginationNext: isDisabled?: boolean; type?: "button" | "reset" | "submit" = "button"
PaginationNext @click: MouseEvent
PaginationNext #default: { isDisabled: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean }
PaginationPrevious: isDisabled?: boolean; type?: "button" | "reset" | "submit" = "button"
PaginationPrevious @click: MouseEvent
PaginationPrevious #default: { isDisabled: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean }
Structure only: PaginationContent, PaginationEllipsis, PaginationItem, PaginationNextIcon, PaginationPreviousIcon, PaginationSummary.

## Popover

`import { Popover, PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverTrigger } from "ropav"`
Page: https://ropav.netlify.app/components/popover

```vue-html
<Popover>
  <Button variant="secondary">Share</Button>

  <PopoverContent placement="bottom">
    <PopoverArrow />
    <PopoverDialog class="dialog">
      <PopoverHeading>Share this project</PopoverHeading>
      <p class="note">Anyone with the link can read it. Nobody can edit.</p>
    </PopoverDialog>
  </PopoverContent>
</Popover>
```

- defaultOpen?: boolean
- isOpen?: boolean
@openChange: boolean
@update:isOpen: boolean
PopoverContent: arrowBoundaryOffset?: number = 0; containerPadding?: number = 12; crossOffset?: number = 0; isEntering?: boolean; isExiting?: boolean; isKeyboardDismissDisabled?: boolean = false; isNonModal?: boolean = false; offset?: number = 8; placement?: "bottom" | "bottom end" | "bottom left" | "bottom right" | "bottom start" | "end" | "end bottom" | "end top" | "left" | "left bottom" | "left top" | "right" | "right bottom" | "right top" | "start" | "start bottom" | "start top" | "top" | "top end" | "top left" | "top right" | "top start" = "bottom"; shouldCloseOnInteractOutside?: ((element: Element) => boolean); shouldFlip?: boolean = true
PopoverDialog #default: { close: () => void }
PopoverHeading: level?: number = 2 inside a dialog, 3 on its own
Structure only: PopoverArrow, PopoverTrigger.

## PortalProvider

`import { PortalProvider } from "ropav"`

No worked example yet.

- container?: string | HTMLElement | null
- root?: HTMLElement | null

## ProgressBar

`import { ProgressBar, ProgressBarFill, ProgressBarOutput, ProgressBarTrack } from "ropav"`
Page: https://ropav.netlify.app/components/progress-bar

```vue-html
<ProgressBar class="w-80" :value="60">
  <Label>Uploading</Label>
  <ProgressBarOutput />
  <ProgressBarTrack>
    <ProgressBarFill />
  </ProgressBarTrack>
</ProgressBar>
```

- color?: "default" | "accent" | "success" | "warning" | "danger" = "accent"
- formatOptions?: Intl.NumberFormatOptions = {style: "percent"}
- id?: string
- isAnimated?: boolean
- isIndeterminate?: boolean
- isStriped?: boolean
- maxValue?: number = 100
- minValue?: number = 0
- size?: "xs" | "sm" | "md" | "lg" = "md"
- value?: number = 0
- valueLabel?: string
#default: { isIndeterminate: boolean; percentage: number | undefined; valueText: string | undefined }
ProgressBarFill: style?: string | CSSProperties
Structure only: ProgressBarOutput, ProgressBarTrack.

## ProgressCircle

`import { ProgressCircle, ProgressCircleFillCircle, ProgressCircleTrack, ProgressCircleTrackCircle } from "ropav"`
Page: https://ropav.netlify.app/components/progress-circle

```vue-html
<ProgressCircle aria-label="Uploading" :value="60">
  <ProgressCircleTrack>
    <ProgressCircleTrackCircle />
    <ProgressCircleFillCircle />
  </ProgressCircleTrack>
</ProgressCircle>
```

- color?: "default" | "accent" | "success" | "warning" | "danger" = "accent"
- formatOptions?: Intl.NumberFormatOptions = {style: "percent"}
- id?: string
- isIndeterminate?: boolean
- maxValue?: number = 100
- minValue?: number = 0
- size?: "xs" | "sm" | "md" | "lg" = "md"
- value?: number = 0
- valueLabel?: string
#default: { isIndeterminate: boolean; percentage: number | undefined; valueText: string | undefined }
Structure only: ProgressCircleFillCircle, ProgressCircleTrack, ProgressCircleTrackCircle.

## Radio

`import { Radio, RadioContent, RadioControl, RadioIndicator } from "ropav"`

Arranged inside: radio-group.

- id?: string
- isDisabled?: boolean
- value!: string — Value this radio contributes to the group's selection.
#default: { isDisabled: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean; isSelected: boolean }
RadioContent #default: { isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isInvalid: boolean; isPressed: boolean; isReadOnly: boolean; isRequired: boolean; isSelected: boolean }
RadioIndicator #default: { isDisabled: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean; isSelected: boolean }
Structure only: RadioControl.

## RadioGroup

`import { RadioGroup } from "ropav"`
Page: https://ropav.netlify.app/components/radio-group

```vue-html
<RadioGroup default-value="premium" name="plan">
  <Label>Plan</Label>
  <Radio value="free">
    <RadioContent>
      <RadioControl>
        <RadioIndicator />
      </RadioControl>
      Free
    </RadioContent>
  </Radio>
  <Radio value="premium">
    <RadioContent>
      <RadioControl>
        <RadioIndicator />
      </RadioControl>
      Premium
    </RadioContent>
  </Radio>
</RadioGroup>
```

- defaultValue?: string | null
- form?: string
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- name?: string
- orientation?: "horizontal" | "vertical" = "vertical"
- validate?: ValidationFunction<string | null>
- validationBehavior?: "aria" | "native" = "native"
- value?: string | null
- variant?: "primary" | "secondary" = "primary"
@change: string | null
@update:value: string | null
#default: { isDisabled: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean; selectedValue: string | null }

## RangeCalendar

`import { RangeCalendar, RangeCalendarCell, RangeCalendarCellIndicator, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHeader, RangeCalendarHeader, RangeCalendarHeaderCell, RangeCalendarHeading, RangeCalendarNavButton } from "ropav"`
Page: https://ropav.netlify.app/components/range-calendar

```vue-html
<RangeCalendar aria-label="Stay">
  <RangeCalendarHeader>
    <RangeCalendarNavButton slot="previous" />
    <RangeCalendarHeading />
    <RangeCalendarNavButton slot="next" />
  </RangeCalendarHeader>

  <RangeCalendarGrid>
    <RangeCalendarGridHeader>
      <template #default="{ day }">
        <RangeCalendarHeaderCell>{{ day }}</RangeCalendarHeaderCell>
      </template>
    </RangeCalendarGridHeader>
    <RangeCalendarGridBody>
      <template #default="{ date }">
        <RangeCalendarCell :date />
      </template>
    </RangeCalendarGridBody>
  </RangeCalendarGrid>
</RangeCalendar>
```

- allowsNonContiguousRanges?: boolean
- autoFocus?: boolean
- commitBehavior?: "clear" | "reset" | "select" = "select"
- createCalendar?: ((identifier: CalendarIdentifier) => Calendar) — Builds the calendar system for an identifier.
- defaultFocusedValue?: DateValue | null
- defaultValue?: DateRange | null
- defaultYearPickerOpen?: boolean = false
- firstDayOfWeek?: "fri" | "mon" | "sat" | "sun" | "thu" | "tue" | "wed"
- focusedValue?: DateValue | null
- id?: string
- isDateUnavailable?: ((date: DateValue, anchorDate: CalendarDate | null) => boolean) — Rules a date out even though it is inside the range.
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isYearPickerOpen?: boolean
- maxValue?: DateValue | null
- minValue?: DateValue | null
- pageBehavior?: "single" | "visible" = "visible"
- selectionAlignment?: "center" | "end" | "start" = "center"
- value?: DateRange | null
- visibleDuration?: DateDuration = {months: 1}
- weeksInMonth?: number
@update:focusedValue: CalendarDate
@update:value: DateRange | null
@update:yearPickerOpen: boolean
#default: { isDisabled: boolean; isInvalid: boolean; state: AnyCalendarState }
RangeCalendarCell: date!: CalendarDate
RangeCalendarCell #default: { date: CalendarDate; formattedDate: string; isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isInvalid: boolean; isOutsideMonth: boolean; isOutsideVisibleRange: boolean; isPressed: boolean; isSelected: boolean; isSelectionEnd: boolean; isSelectionStart: boolean; isToday: boolean; isUnavailable: boolean }
RangeCalendarGrid: offset?: DateDuration; weekdayStyle?: "long" | "narrow" | "short" = "short"
RangeCalendarGridBody #default: { date: CalendarDate }
RangeCalendarGridHeader #default: { day: string }
RangeCalendarHeading: format?: CalendarHeadingFormatOptions; offset?: DateDuration
RangeCalendarNavButton: slot?: "next" | "previous" = "next"
Structure only: RangeCalendarCellIndicator, RangeCalendarHeader, RangeCalendarHeaderCell.

## RouterProvider

`import { RouterProvider } from "ropav"`

No worked example yet.

- isCurrent?: ((href: string) => boolean) — Whether an href addresses the route showing now, for links that ask with `aria-current="auto"`.
- navigate!: (href: string, options?: unknown) => void — Performs a client-side navigation to `href`.
- resolveHref?: ((href: string) => string) — Rewrites an app-relative href into the URL the anchor should carry, for a router mounted
under a base path or running in hash mode — `(href) => router.resolve(href).href`.
Omitted, the href renders as written.

## ScrollShadow

`import { ScrollShadow } from "ropav"`
Page: https://ropav.netlify.app/components/scroll-shadow

```vue-html
<ScrollShadow class="flex max-h-32 w-72 flex-col gap-3 p-4">
  <Typography>
    A scroll shadow is the edge of the box saying there is more where that came from.
  </Typography>
  <Typography>
    It fades whichever edge has content past it, and only that edge — so the top stays sharp until something has been scrolled away.
  </Typography>
  <Typography>
    Nothing here is painted over the content. The fade is a mask, which is why it works over any background the box happens to sit on.
  </Typography>
</ScrollShadow>
```

- hideScrollBar?: boolean = false
- isEnabled?: boolean = true — Whether automatic overflow detection is enabled.
- offset?: number = 0
- onVisibilityChange?: ((visibility: ScrollShadowVisibility) => void) — Called when automatic detection reaches a different visibility state.
- orientation?: "horizontal" | "vertical" = "vertical"
- size?: number = 40
- style?: StyleValue
- variant?: "fade" = "fade"
- visibility?: "auto" | "both" | "top" | "bottom" | "left" | "right" | "none" = "auto"

## SearchField

`import { SearchField, SearchFieldClearButton, SearchFieldGroup, SearchFieldInput, SearchFieldSearchIcon } from "ropav"`
Page: https://ropav.netlify.app/components/search-field

```vue-html
<SearchField default-value="oklch">
  <Label>Search</Label>
  <SearchFieldGroup>
    <SearchFieldSearchIcon />
    <SearchFieldInput class="w-64" placeholder="Search…" />
    <SearchFieldClearButton />
  </SearchFieldGroup>
</SearchField>
```

- autoCapitalize?: string
- autoComplete?: string
- autoCorrect?: string
- autoFocus?: boolean
- defaultValue?: string
- enterKeyHint?: string
- form?: string
- fullWidth?: boolean
- id?: string
- inputMode?: string
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- maxLength?: number
- minLength?: number
- name?: string
- onSubmit?: ((value: string) => void) — Called when the search is submitted from the keyboard.
- placeholder?: string
- size?: "xs" | "sm" | "md" | "lg" = "md"
- spellCheck?: string | boolean
- type?: string = "search"
- validate?: ValidationFunction<string>
- validationBehavior?: "aria" | "native" = "native"
- value?: string
- variant?: "primary" | "secondary" = "primary"
@change: string
@clear: —
@focusChange: boolean
@update:value: string
#default: { isDisabled: boolean; isEmpty: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean; validationDetails: ValidationDetails; validationErrors: string[] }
SearchFieldGroup #default: { isDisabled: boolean; isFocusVisible: boolean; isFocusWithin: boolean; isHovered: boolean; isInvalid: boolean }
SearchFieldInput: placeholder?: string; value?: string
SearchFieldInput @change: string
SearchFieldInput @update:value: string
Structure only: SearchFieldClearButton, SearchFieldSearchIcon.

## SegmentedControl

`import { SegmentedControl, SegmentedControlIndicator, SegmentedControlItem, SegmentedControlSeparator } from "ropav"`
Page: https://ropav.netlify.app/components/segmented-control

```vue-html
<SegmentedControl aria-label="Reporting range" default-selected-key="weekly">
  <SegmentedControlItem id="daily">
    Daily
    <SegmentedControlIndicator />
  </SegmentedControlItem>
  <SegmentedControlItem id="weekly">
    Weekly
    <SegmentedControlIndicator />
  </SegmentedControlItem>
  <SegmentedControlItem id="monthly">
    Monthly
    <SegmentedControlIndicator />
  </SegmentedControlItem>
</SegmentedControl>
```

- defaultSelectedKey?: CollectionKey
- disabledKeys?: CollectionKey[]
- fullWidth?: boolean
- isDisabled?: boolean
- selectedKey?: CollectionKey
- size?: "xs" | "sm" | "md" | "lg" = "md"
@selectionChange: CollectionKey
@update:selectedKey: CollectionKey
#default: { isDisabled: boolean; selectedKey: CollectionKey | null }
SegmentedControlItem: id!: CollectionKey; isDisabled?: boolean; textValue?: string
SegmentedControlItem #default: { isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean; isSelected: boolean }
Structure only: SegmentedControlIndicator, SegmentedControlSeparator.

## Select

`import { Select, SelectClearButton, SelectIndicator, SelectPopover, SelectTrigger, SelectValue } from "ropav"`
Page: https://ropav.netlify.app/components/select

```vue-html
<Select
  class="w-64"
  :items='[{"id":"lisbon","name":"Lisbon"},{"id":"osaka","name":"Osaka"}]'
  placeholder="Pick a city"
>
  <Label>Destination</Label>
  <SelectTrigger>
    <SelectValue />
    <SelectIndicator />
  </SelectTrigger>
  <SelectPopover>
    <ListBox>
      <ListBoxItem id="lisbon" text-value="Lisbon">
        Lisbon
        <ListBoxItemIndicator />
      </ListBoxItem>
      <ListBoxItem id="osaka" text-value="Osaka">
        Osaka
        <ListBoxItemIndicator />
      </ListBoxItem>
    </ListBox>
  </SelectPopover>
</Select>
```

- allowsEmptyCollection?: boolean
- autoComplete?: string
- defaultOpen?: boolean
- defaultValue?: SelectedValue
- disabledBehavior?: "all" | "selection" = "all"
- disabledKeys?: Iterable<CollectionKey>
- form?: string
- fullWidth?: boolean
- isDisabled?: boolean
- isInvalid?: boolean
- isOpen?: boolean
- isRequired?: boolean
- itemDisabled?: ((item: T) => boolean) — Whether an item cannot be chosen.
- itemKey?: ((item: T, index: number) => CollectionKey) — An item's key.
- items!: readonly T[] — The options, as data.
- itemTextValue?: ((item: T) => string | undefined) — Text shown for an item in the trigger, and matched on when typing.
- name?: string
- placeholder?: string
- selectionMode?: "single" | "multiple" = "single"
- shouldCloseOnSelect?: boolean = true when single — Whether choosing an option closes the popover.
- size?: "xs" | "sm" | "md" | "lg" = "md"
- validate?: ValidationFunction<SelectedValue>
- validationBehavior?: "aria" | "native" = "native"
- value?: SelectedValue
- variant?: "primary" | "secondary"
@change: SelectedValue
@clear: —
@focusChange: boolean
@openChange: boolean
@update:isOpen: boolean
@update:value: SelectedValue
#default: { isDisabled: boolean; isFocused: boolean; isInvalid: boolean; isOpen: boolean; isRequired: boolean }
SelectPopover: arrowBoundaryOffset?: number; containerPadding?: number; crossOffset?: number; isKeyboardDismissDisabled?: boolean; offset?: number = 8; placement?: "bottom" | "bottom end" | "bottom left" | "bottom right" | "bottom start" | "end" | "end bottom" | "end top" | "left" | "left bottom" | "left top" | "right" | "right bottom" | "right top" | "start" | "start bottom" | "start top" | "top" | "top end" | "top left" | "top right" | "top start" = "bottom"; shouldFlip?: boolean
Structure only: SelectClearButton, SelectIndicator, SelectTrigger, SelectValue.

## Separator

`import { Separator } from "ropav"`
Page: https://ropav.netlify.app/components/separator

```vue-html
<div
  style="display: flex; flex-direction: column; gap: calc(var(--rp-spacing) * 4); width: 100%; max-width: var(--rp-container-xs)"
>
  <Button variant="secondary">Undo</Button>
  <Separator />
  <Button>Publish</Button>
</div>
```

- orientation?: "horizontal" | "vertical" = "horizontal"
- variant?: "default" | "secondary" | "tertiary" = "default"

## Sidebar

`import { Sidebar, SidebarCollapsible, SidebarCollapsibleTrigger, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarItem, SidebarItemIcon, SidebarItemIndicator, SidebarItemLabel, SidebarItemTooltip, SidebarItemTrailing, SidebarPanel, SidebarRail, SidebarSeparator, SidebarSubMenu, SidebarTrigger } from "ropav"`
Page: https://ropav.netlify.app/components/sidebar

```vue-html
<div class="frame">
  <Sidebar collapsible="icon">
    <SidebarPanel aria-label="Main">
      <SidebarHeader>Acme</SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Workspace</SidebarGroupLabel>

          <SidebarItem>
            <SidebarItemIcon><IconSearch /></SidebarItemIcon>
            <SidebarItemLabel>Search</SidebarItemLabel>
          </SidebarItem>

          <SidebarItem>
            <SidebarItemIcon><IconCalendar /></SidebarItemIcon>
            <SidebarItemLabel>Schedule</SidebarItemLabel>
          </SidebarItem>
        </SidebarGroup>
      </SidebarContent>
    </SidebarPanel>

    <SidebarInset class="inset">
      <SidebarTrigger />
    </SidebarInset>
  </Sidebar>
</div>
```

- autoSaveId?: string
- breakpoint?: string = "(max-width: 47.99rem)"
- collapsible?: "icon" | "none" | "offcanvas" = "icon"
- defaultExpanded?: boolean = true — Whether the panel starts expanded, when the caller is not controlling it.
- defaultMobileOpen?: boolean = false
- defaultWidth?: string
- isExpanded?: boolean
- isMobileOpen?: boolean
- side?: "left" | "right" = "left"
- style?: StyleValue
- variant?: "floating" | "inset" | "sidebar" = "sidebar"
- width?: string
@expandedChange: boolean
@mobileOpenChange: boolean
@update:isExpanded: boolean
@update:isMobileOpen: boolean
@update:width: string
#default: { collapsible: SidebarCollapsibleMode; isCollapsed: boolean; isExpanded: boolean; isMobile: boolean; isOpen: boolean; side: SidebarSide }
SidebarCollapsible: defaultExpanded?: boolean = false; isDisabled?: boolean; isExpanded?: boolean
SidebarCollapsible @expandedChange: boolean
SidebarCollapsible @update:isExpanded: boolean
SidebarCollapsible #default: { isCollapsed: boolean; isDisabled: boolean; isExpanded: boolean }
SidebarCollapsibleTrigger: isDisabled?: boolean
SidebarCollapsibleTrigger #default: { isCollapsed: boolean; isDisabled: boolean; isExpanded: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean }
SidebarContent: scrollShadowSize?: number = 40; showScrollShadow?: boolean = true
SidebarContent #default: { isCollapsed: boolean; isMobile: boolean; isOpen: boolean }
SidebarFooter #default: { isCollapsed: boolean; isMobile: boolean; isOpen: boolean }
SidebarGroup #default: { isCollapsed: boolean; isMobile: boolean; isOpen: boolean }
SidebarGroupLabel #default: { isCollapsed: boolean; isMobile: boolean; isOpen: boolean }
SidebarHeader #default: { isCollapsed: boolean; isMobile: boolean; isOpen: boolean }
SidebarInset #default: { isCollapsed: boolean; isMobile: boolean; isOpen: boolean }
SidebarItem: href?: string; isDisabled?: boolean; rel?: string; routerOptions?: unknown; target?: string
SidebarItem @press: PressEvent
SidebarItem #default: { isCollapsed: boolean; isCurrent: boolean; isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean }
SidebarItemLabel #default: { isCollapsed: boolean; isMobile: boolean; isOpen: boolean }
SidebarItemTooltip: closeDelay?: number; delay?: number; label?: string
SidebarItemTrailing #default: { isCollapsed: boolean; isMobile: boolean; isOpen: boolean }
SidebarPanel #default: { isCollapsed: boolean; isMobile: boolean; isOpen: boolean }
SidebarRail: isDisabled?: boolean; isResizable?: boolean = false; keyboardLargeStep?: number = 50; keyboardStep?: number = 10; maxWidth?: number = 480; minWidth?: number = 180
SidebarRail #default: { isCollapsed: boolean; isDisabled: boolean; isDragging: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isResizable: boolean }
SidebarSubMenu #default: { isExpanded: boolean }
SidebarTrigger: isDisabled?: boolean
SidebarTrigger #default: { isCollapsed: boolean; isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isOpen: boolean; isPressed: boolean }
Structure only: SidebarItemIcon, SidebarItemIndicator, SidebarSeparator.

## Skeleton

`import { Skeleton } from "ropav"`
Page: https://ropav.netlify.app/components/skeleton

```vue-html
<Skeleton class="h-24 w-64 rounded-xl" />
```

- animationType?: "shimmer" | "pulse" | "none"

## Slider

`import { Slider, SliderFill, SliderMarks, SliderOutput, SliderThumb, SliderTrack } from "ropav"`
Page: https://ropav.netlify.app/components/slider

```vue-html
<Slider class="w-64" :default-value="30">
  <Label>Volume</Label>
  <SliderOutput />
  <SliderTrack>
    <SliderFill />
    <SliderThumb />
  </SliderTrack>
</Slider>
```

- defaultValue?: number | number[]
- formatOptions?: Intl.NumberFormatOptions
- id?: string
- isDisabled?: boolean
- maxValue?: number = 100
- minValue?: number = 0
- orientation?: "horizontal" | "vertical" = "horizontal"
- step?: number = 1
- value?: number | number[]
@change: number | number[]
@changeEnd: number | number[]
@update:value: number | number[]
#default: { isDisabled: boolean; orientation: SliderOrientation; values: number[] }
SliderThumb: form?: string; index?: number = 0; isDisabled?: boolean; name?: string
SliderThumb #default: { isDisabled: boolean; isDragging: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean }
SliderTrack #default: { isDisabled: boolean; orientation: SliderOrientation; values: number[] }
Structure only: SliderFill, SliderMarks, SliderOutput.

## Spinner

`import { Spinner } from "ropav"`
Page: https://ropav.netlify.app/components/spinner

```vue-html
<Spinner />
```

- color?: "accent" | "success" | "warning" | "danger" | "current" = "accent"
- size?: "xs" | "sm" | "md" | "lg" | "xl" = "md"

## Splitter

`import { Splitter, SplitterHandle, SplitterPanel } from "ropav"`
Page: https://ropav.netlify.app/components/splitter

```vue-html
<Splitter
  aria-label="Editor layout"
  class="h-48 w-full max-w-sm overflow-hidden rounded-xl border border-[var(--rp-border)]"
>
  <SplitterPanel class="grid h-full place-items-center text-sm" default-size="1fr" min-size="80px">
    Sidebar
  </SplitterPanel>
  <SplitterHandle />
  <SplitterPanel class="grid h-full place-items-center text-sm" default-size="2fr" min-size="80px">
    Editor
  </SplitterPanel>
</Splitter>
```

- autoSaveId?: string
- defaultSizes?: FlexSize[]
- isDisabled?: boolean
- keyboardLargeStep?: number = 50
- keyboardStep?: number = 10
- orientation?: "horizontal" | "vertical" = "horizontal"
- sizes?: FlexSize[]
@collapse: CollectionKey
@expand: CollectionKey
@resize: FlexSize[]
@resizeEnd: FlexSize[]
@resizeStart: FlexSize[]
@update:sizes: FlexSize[]
#default: { isDisabled: boolean; isDragging: boolean; layout: number[]; orientation: SplitterOrientation }
SplitterHandle: id?: CollectionKey; isDisabled?: boolean; resetOnDoubleClick?: boolean = true; showGrip?: boolean = false
SplitterHandle #default: { isDisabled: boolean; isDragging: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; orientation: SplitterOrientation }
SplitterPanel: collapsedSize?: FlexSize = 0; defaultSize?: FlexSize = "1fr"; id?: CollectionKey; isCollapsible?: boolean; maxSize?: FlexSize; minSize?: FlexSize = 0; size?: FlexSize
SplitterPanel #default: { isCollapsed: boolean; isCollapsible: boolean; orientation: SplitterOrientation; size: number }

## Surface

`import { Surface } from "ropav"`
Page: https://ropav.netlify.app/components/surface

```vue-html
<Surface class="flex w-72 flex-col gap-2 rounded-2xl p-6">
  <Typography type="h4">Weekly report</Typography>
  <Typography color="muted" type="body-sm">
    Open rate held steady across the last four sends.
  </Typography>
</Surface>
```

- variant?: "default" | "secondary" | "tertiary" | "transparent" = "default"

## Switch

`import { Switch, SwitchContent, SwitchControl, SwitchIcon, SwitchThumb } from "ropav"`
Page: https://ropav.netlify.app/components/switch

```vue-html
<Switch>
  <SwitchContent>
    <SwitchControl>
      <SwitchThumb />
    </SwitchControl>
    Notify me
  </SwitchContent>
</Switch>
```

- defaultSelected?: boolean
- form?: string
- id?: string
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- isSelected?: boolean
- name?: string
- size?: "xs" | "sm" | "md" | "lg" = "md"
- validate?: ValidationFunction<boolean>
- validationBehavior?: "aria" | "native" = "native"
- value?: string = "on"
@change: boolean
@update:isSelected: boolean
#default: { isDisabled: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean; isSelected: boolean }
SwitchContent #default: { isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isInvalid: boolean; isPressed: boolean; isReadOnly: boolean; isRequired: boolean; isSelected: boolean }
Structure only: SwitchControl, SwitchIcon, SwitchThumb.

## SwitchGroup

`import { SwitchGroup } from "ropav"`
Page: https://ropav.netlify.app/components/switch-group

```vue-html
<SwitchGroup>
  <Switch v-for="setting in settings" :key="setting.name" :name="setting.name" value="on">
    <SwitchContent>
      <SwitchControl>
        <SwitchThumb />
      </SwitchControl>
      {{ setting.label }}
    </SwitchContent>
  </Switch>
</SwitchGroup>
```

- orientation?: "horizontal" | "vertical" = "vertical"

## Table

`import { Table, TableBody, TableCell, TableColumn, TableColumnResizer, TableContent, TableDragHandle, TableDropIndicator, TableExpandTrigger, TableFooter, TableHeader, TableLoadMore, TableLoadMoreContent, TableResizableContainer, TableRow, TableScrollContainer, TableSelectionCheckbox, TableSortableColumnHeader } from "ropav"`
Page: https://ropav.netlify.app/components/table

```vue-html
<div class="frame">
  <Table>
    <TableScrollContainer>
      <TableContent aria-label="Team" class="table">
        <TableHeader>
          <TableColumn
            v-for="column in columns"
            :id="column.id"
            :key="column.id"
            :is-row-header="column.isRowHeader"
          >
            {{ column.name }}
          </TableColumn>
        </TableHeader>

        <TableBody>
          <TableRow v-for="person in people" :id="person.id" :key="person.id">
            <TableCell v-for="column in columns" :key="column.id">
              {{ person[column.id as keyof typeof person] }}
            </TableCell>
          </TableRow>
        </TableBody>
      </TableContent>
    </TableScrollContainer>
  </Table>
</div>
```

- variant?: "primary" | "secondary" = "primary"
TableBody: itemKey?: ((item: T, index: number) => CollectionKey); items?: readonly T[]; itemTextValue?: ((item: T) => string | undefined)
TableCell: textValue?: string
TableCell #default: { hasChildRows: boolean; isDisabled: boolean; isExpanded: boolean; isSelected: boolean; isTreeColumn: boolean }
TableColumn: allowsSorting?: boolean; defaultWidth?: FlexSize = "1fr"; id?: CollectionKey; isRowHeader?: boolean; maxWidth?: FlexSize; minWidth?: FlexSize = 75; width?: FlexSize
TableColumn #default: { allowsSorting: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean; isResizing: boolean; sort: (direction?: TableSortDirection | undefined) => void; sortDirection: TableSortDirection | undefined; startResize: () => void }
TableContent: defaultExpandedKeys?: Iterable<CollectionKey>; defaultSelectedKeys?: "all" | Iterable<CollectionKey>; disabledBehavior?: "all" | "selection" = "all"; disabledKeys?: Iterable<CollectionKey>; disallowEmptySelection?: boolean; dragAndDropHooks?: DragAndDropHooks; expandedKeys?: Iterable<CollectionKey>; selectedKeys?: "all" | Iterable<CollectionKey>; selectionBehavior?: "replace" | "toggle" = "toggle"; selectionMode?: "none" | "single" | "multiple" = "none"; sortDescriptor?: TableSortDescriptor | null; treeColumn?: CollectionKey
TableContent @expandedChange: Set<CollectionKey>
TableContent @selectionChange: CollectionSelection
TableContent @sortChange: TableSortDescriptor
TableContent @update:expandedKeys: Set<CollectionKey>
TableContent @update:selectedKeys: CollectionSelection
TableContent @update:sortDescriptor: TableSortDescriptor
TableDropIndicator: target!: DropTarget
TableHeader #default: { allowsDragging: boolean }
TableLoadMore: isLoading?: boolean; scrollOffset?: number = 1
TableLoadMore @loadMore: —
TableResizableContainer @resize: Map<CollectionKey, FlexSize>
TableResizableContainer @resizeEnd: Map<CollectionKey, FlexSize>
TableResizableContainer @resizeStart: Map<CollectionKey, FlexSize>
TableRow: hasChildRows?: boolean; id?: CollectionKey; level?: number = 0; parentKey?: CollectionKey; textValue?: string
TableRow #default: { allowsDragging: boolean; hasChildRows: boolean; isDisabled: boolean; isDragging: boolean; isDropTarget: boolean; isExpanded: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean; isSelected: boolean; selectionMode: SelectionMode }
TableSelectionCheckbox: variant?: "primary" | "secondary"
TableSortableColumnHeader: showIndicator?: boolean = true; sortDirection?: "ascending" | "descending"
Structure only: TableColumnResizer, TableDragHandle, TableExpandTrigger, TableFooter, TableLoadMoreContent, TableScrollContainer.

## Tabs

`import { Tabs, TabsIndicator, TabsList, TabsListContainer, TabsPanel, TabsSeparator, TabsTab } from "ropav"`
Page: https://ropav.netlify.app/components/tabs

```vue-html
<Tabs class="w-full max-w-md">
  <TabsListContainer>
    <TabsList aria-label="Project settings">
      <TabsTab id="activity">
        Activity
        <TabsIndicator />
      </TabsTab>
      <TabsTab id="access">
        Access
        <TabsIndicator />
      </TabsTab>
    </TabsList>
  </TabsListContainer>
  <TabsPanel class="pt-4" id="activity">Everything that happened while you were away.</TabsPanel>
  <TabsPanel class="pt-4" id="access">Who can see this, and what they can do.</TabsPanel>
</Tabs>
```

- align?: "start" | "center" | "end" = "center"
- defaultSelectedKey?: CollectionKey
- disabledKeys?: CollectionKey[]
- fullWidth?: boolean = true — Whether the tabs share the row between them.
- id?: string
- isDisabled?: boolean
- keyboardActivation?: "automatic" | "manual" = "automatic"
- orientation?: "horizontal" | "vertical" = "horizontal"
- selectedKey?: CollectionKey
- variant?: "primary" | "secondary"
@selectionChange: CollectionKey
@update:selectedKey: CollectionKey
#default: { isFocusVisible: boolean; isFocusWithin: boolean; orientation: TabsOrientation }
TabsPanel: id!: CollectionKey; shouldForceMount?: boolean
TabsPanel #default: { isEntering: boolean; isExiting: boolean; isFocused: boolean; isFocusVisible: boolean }
TabsTab: id!: CollectionKey; isDisabled?: boolean; textValue?: string
TabsTab #default: { isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean; isSelected: boolean }
Structure only: TabsIndicator, TabsList, TabsListContainer, TabsSeparator.

## Tag

`import { Tag, TagRemoveButton } from "ropav"`

Arranged inside: tag-group.

- id?: CollectionKey
- isDisabled?: boolean
- textValue?: string
#default: { isDisabled: boolean; isFocused: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean; isSelected: boolean }
Structure only: TagRemoveButton.

## TagGroup

`import { TagGroup, TagGroupList } from "ropav"`
Page: https://ropav.netlify.app/components/tag-group

```vue-html
<TagGroup>
  <Label>Categories</Label>
  <TagGroupList>
    <Tag id="news">News</Tag>
    <Tag id="travel">Travel</Tag>
    <Tag id="gaming">Gaming</Tag>
  </TagGroupList>
</TagGroup>
```

- defaultSelectedKeys?: "all" | Iterable<CollectionKey>
- disabledBehavior?: "all" | "selection" = "all"
- disabledKeys?: Iterable<CollectionKey>
- disallowEmptySelection?: boolean
- onRemove?: ((keys: Set<CollectionKey>) => void) — Called with the keys to remove.
- selectedKeys?: "all" | Iterable<CollectionKey>
- selectionBehavior?: "replace" | "toggle" = "toggle"
- selectionMode?: "none" | "single" | "multiple" = "none"
- size?: "xs" | "sm" | "md" | "lg"
- variant?: "default" | "surface"
@selectionChange: CollectionSelection
@update:selectedKeys: CollectionSelection
Structure only: TagGroupList.

## TextArea

`import { TextArea } from "ropav"`
Page: https://ropav.netlify.app/components/textarea

```vue-html
<TextArea placeholder="What changed in this release?" />
```

- autosize?: boolean = false — Whether the control grows with its content.
- fullWidth?: boolean
- maxRows?: number
- minRows?: number
- placeholder?: string
- resize?: "none" | "vertical" | "both" = "none"
- size?: "xs" | "sm" | "md" | "lg" = "md"
- value?: string
- variant?: "primary" | "secondary" = "primary"
@change: string
@update:value: string

## TextField

`import { TextField } from "ropav"`
Page: https://ropav.netlify.app/components/textfield

```vue-html
<TextField class="w-72" name="email">
  <Label>Email address</Label>
  <Input placeholder="name@example.com" />
</TextField>
```

- autoCapitalize?: string
- autoComplete?: string
- autoCorrect?: string
- autoFocus?: boolean
- defaultValue?: string
- enterKeyHint?: string
- form?: string
- fullWidth?: boolean
- id?: string
- inputMode?: string
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- maxLength?: number
- minLength?: number
- name?: string
- pattern?: string
- placeholder?: string
- size?: "xs" | "sm" | "md" | "lg" = "md"
- spellCheck?: string | boolean
- type?: string = "text"
- validate?: ValidationFunction<string>
- validationBehavior?: "aria" | "native" = "native"
- value?: string
- variant?: "primary" | "secondary" = "primary"
@change: string
@focusChange: boolean
@update:value: string
#default: { isDisabled: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean; validationDetails: ValidationDetails; validationErrors: string[] }

## TimeField

`import { TimeField } from "ropav"`
Page: https://ropav.netlify.app/components/time-field

```vue-html
<TimeField class="field" name="time">
  <Label>Start time</Label>
  <TimeFieldGroup>
    <TimeFieldInput>
      <template #default="{ segment }">
        <TimeFieldSegment :segment />
      </template>
    </TimeFieldInput>
  </TimeFieldGroup>
</TimeField>
```

- autoFocus?: boolean
- defaultValue?: TimeValue | null
- form?: string
- fullWidth?: boolean
- granularity?: "hour" | "minute" | "second" = "minute"
- hideTimeZone?: boolean
- hourCycle?: 12 | 24
- id?: string
- isDisabled?: boolean
- isInvalid?: boolean
- isReadOnly?: boolean
- isRequired?: boolean
- locale?: string
- maxValue?: TimeValue | null
- minValue?: TimeValue | null
- name?: string
- placeholderValue?: TimeValue | null
- shouldForceLeadingZeros?: boolean
- validate?: ((value: TimeValue | null) => string | true | string[] | null | undefined) — Extra rule the value has to satisfy, beyond the range.
- validationBehavior?: "aria" | "native" = "native"
- value?: TimeValue | null
@change: TimeValue | null
@focusChange: boolean
@update:value: TimeValue | null
#default: { isDisabled: boolean; isInvalid: boolean; isReadOnly: boolean; isRequired: boolean }

## Toast

`import { Toast, ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastTitle } from "ropav"`
Page: https://ropav.netlify.app/components/toast

```vue-html
<div class="row">
  <Button size="sm" variant="secondary" @click="show('default')">Default</Button>
  <Button size="sm" variant="secondary" @click="show('success')">Success</Button>
  <Button size="sm" variant="danger-soft" @click="show('danger')">Danger</Button>

  <ToastProvider placement="bottom" :queue />
</div>
```

- placement?: "bottom" | "bottom end" | "bottom start" | "top" | "top end" | "top start"
- scaleFactor?: number
- toast!: QueuedToast<ToastContentValue>
- variant?: "danger" | "accent" | "default" | "success" | "warning"
ToastActionButton: fullWidth?: boolean; isDisabled?: boolean; isIconOnly?: boolean; isPending?: boolean; size?: "xs" | "sm" | "md" | "lg" = "md"; type?: "button" | "reset" | "submit" = "button"; variant?: "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "danger" | "danger-soft" = "primary"
ToastActionButton @click: MouseEvent
ToastIndicator: isSwapped?: boolean; variant?: "danger" | "accent" | "default" | "success" | "warning"
ToastProvider: gap?: number = 12; hotkey?: readonly string[] = ["altKey","KeyT"]; isExpanded?: boolean; maxVisibleToasts?: number; placement?: "bottom" | "bottom end" | "bottom start" | "top" | "top end" | "top start" = "bottom"; portalContainer?: string | HTMLElement = "body"; queue?: ToastQueue<ToastContentValue>; scaleFactor?: number = 0.05; width?: string | number = 460
ToastProvider #default: { isLoading: boolean; toast: QueuedToast<ToastContentValue> }
Structure only: ToastCloseButton, ToastContent, ToastDescription, ToastTitle.

## ToggleButton

`import { ToggleButton } from "ropav"`
Page: https://ropav.netlify.app/components/toggle-button

```vue-html
<ToggleButton>Follow</ToggleButton>
```

- defaultSelected?: boolean
- id?: ToggleGroupKey
- isDisabled?: boolean
- isIconOnly?: boolean
- isSelected?: boolean
- size?: "xs" | "sm" | "md" | "lg"
- type?: "button" | "reset" | "submit" = "button"
- variant?: "default" | "ghost"
@change: boolean
@click: MouseEvent
#default: { isDisabled: boolean; isFocusVisible: boolean; isHovered: boolean; isPressed: boolean; isSelected: boolean }

## ToggleButtonGroup

`import { ToggleButtonGroup, ToggleButtonGroupSeparator } from "ropav"`
Page: https://ropav.netlify.app/components/toggle-button-group

```vue-html
<ToggleButtonGroup aria-label="Text style" :default-selected-keys='["bold"]'>
  <ToggleButton id="bold">Bold</ToggleButton>
  <ToggleButton id="italic">
    <ToggleButtonGroupSeparator />
    Italic
  </ToggleButton>
</ToggleButtonGroup>
```

- defaultSelectedKeys?: Iterable<ToggleGroupKey>
- disallowEmptySelection?: boolean
- fullWidth?: boolean
- isDetached?: boolean = false — Separates the buttons visually instead of joining them into one control.
- isDisabled?: boolean
- orientation?: "horizontal" | "vertical" = "horizontal"
- selectedKeys?: Iterable<ToggleGroupKey>
- selectionMode?: "single" | "multiple" = "single"
- size?: "xs" | "sm" | "md" | "lg"
@selectionChange: Set<ToggleGroupKey>
Structure only: ToggleButtonGroupSeparator.

## Toolbar

`import { Toolbar } from "ropav"`
Page: https://ropav.netlify.app/components/toolbar

```vue-html
<Toolbar aria-label="Document actions">
  <Button variant="secondary">Undo</Button>
  <Button variant="secondary">Redo</Button>
  <Separator />
  <Button>Publish</Button>
</Toolbar>
```

- isAttached?: boolean
- orientation?: "horizontal" | "vertical" = "horizontal"

## Tooltip

`import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "ropav"`
Page: https://ropav.netlify.app/components/tooltip

```vue-html
<Tooltip v-for="placement in placements" :key="placement" :delay="0">
  <Button variant="secondary">{{ placement }}</Button>
  <TooltipContent :placement>
    <TooltipArrow />
    Placed {{ placement }}
  </TooltipContent>
</Tooltip>
```

- closeDelay?: number = the `--rp-tooltip-close-delay` custom property, or 500 — How long the tooltip stays after the pointer leaves.
- defaultOpen?: boolean
- delay?: number = the `--rp-tooltip-delay` custom property, or 1500 — How long the pointer has to rest on the trigger before the tooltip opens.
- isDisabled?: boolean
- isOpen?: boolean
- shouldCloseOnPress?: boolean = true — Whether pressing the trigger closes the tooltip.
- shouldSkipAnimation?: boolean = false — Whether a tooltip replacing another one appears without an animation.
- trigger?: "focus" | "hover" = "hover"
@openChange: boolean
@update:isOpen: boolean
TooltipContent: arrowBoundaryOffset?: number = 0; containerPadding?: number = 12; crossOffset?: number = 0; isEntering?: boolean; isExiting?: boolean; offset?: number = 7 with an arrow, 3 without; placement?: "bottom" | "bottom end" | "bottom left" | "bottom right" | "bottom start" | "end" | "end bottom" | "end top" | "left" | "left bottom" | "left top" | "right" | "right bottom" | "right top" | "start" | "start bottom" | "start top" | "top" | "top end" | "top left" | "top right" | "top start" = "top"; portalContainer?: string | HTMLElement = document.body; shouldFlip?: boolean = true; showArrow?: boolean = false
Structure only: TooltipArrow, TooltipTrigger.

## Typography

`import { Typography, Code, Heading, Paragraph, Prose } from "ropav"`
Page: https://ropav.netlify.app/components/typography

```vue-html
<Typography class="w-80">The quick brown fox jumps over the lazy dog.</Typography>
```

- align?: "start" | "center" | "end" | "justify" = "start"
- color?: "default" | "muted" = "default"
- slot?: string
- truncate?: boolean
- type?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "body-sm" | "body-xs" | "code" = "body"
- weight?: "normal" | "medium" | "semibold" | "bold"
Code: align?: "start" | "center" | "end" | "justify" = "start"; color?: "default" | "muted" = "default"; slot?: string; truncate?: boolean; weight?: "normal" | "medium" | "semibold" | "bold"
Heading: align?: "start" | "center" | "end" | "justify" = "start"; color?: "default" | "muted" = "default"; level?: 1 | 2 | 3 | 4 | 5 | 6 = 1; slot?: string; truncate?: boolean; weight?: "normal" | "medium" | "semibold" | "bold"
Paragraph: align?: "start" | "center" | "end" | "justify" = "start"; color?: "default" | "muted" = "default"; size?: "xs" | "sm" | "base" = "base"; slot?: string; truncate?: boolean; weight?: "normal" | "medium" | "semibold" | "bold"
Prose: slot?: string

## VirtualizerRoot

`import { VirtualizerRoot, VirtualizerItem, VirtualizerScrollbar } from "ropav"`

No worked example yet.

- layout!: VirtualizerLayoutProp<object> — The layout that decides where each element goes.
- layoutOptions?: object
- shouldObserveItemSize?: boolean
VirtualizerItem: layoutInfo?: LayoutInfo | null; parentLayoutInfo?: LayoutInfo | null
Structure only: VirtualizerScrollbar.