# leptos_aria

> Headless accessible components for Leptos, ported from React Aria with the Radix/shadcn primitive surface completed. No styles ship; state is exposed as `data-*` attributes for Tailwind v4. A shadcn-style CLI copies styled wrapper components into your project.

Install the library, install the CLI, add components:

```
cargo add leptos_aria
cargo install leptos_aria_cli
leptos-aria add button
```

## Docs

- [Tailwind v4 guide](https://ifiokjr.github.io/leptos_aria/tailwind.html): styling states with `data-[state=open]` variants and `@custom-variant` blocks, plus the full data-attribute contract
- [CLI guide](https://ifiokjr.github.io/leptos_aria/cli.html): `init`, `add`, `diff`, `build`, `leptos-aria.json`, theming, and hosting your own registry
- [Components](https://ifiokjr.github.io/leptos_aria/components.html): every styled registry component with install command, usage, and source
- [Registry index](https://ifiokjr.github.io/leptos_aria/r/registry.json): the shadcn-schema registry the CLI reads; each item is at `r/<name>.json`
- [Porting roadmap](https://github.com/ifiokjr/leptos_aria/blob/main/PORTING.md): every upstream hook, utility, and component with its crate
- [API docs](https://docs.rs/leptos_aria): the facade crate on docs.rs
- [Full documentation](https://ifiokjr.github.io/leptos_aria/llms-full.txt): every document above in one file

## The data-attribute contract

Every interactive component exposes its state so styling stays external:

- `data-state`: `open`/`closed` (Modal, Popover, Tooltip, AlertDialog, HoverCard, ContextMenu, Accordion), `checked`/`unchecked` (Switch), `on`/`off` (ToggleGroup), `selected` (Calendar, Tabs, ListBox), `loaded`/`fallback` (Avatar)
- `data-disabled`, `data-dragging`, `data-is-dragging`, `data-current`, `data-orientation`, `data-action`, `data-focused`, `data-expanded`

Tailwind v4's built-in `data-[...]` and `aria-*` variants target these directly with no plugin.

## Component surface

Interactions: usePress, useFocus, useFocusWithin, useHover, useFocusable, useFocusRing, useKeyboard, useLongPress, useMove, useDrag/useDrop, useScroll, useDismiss, useModal, FocusManager, useAutofocus.

Components: Button, AnchorButton, CustomButton, ToggleButton, ToggleGroup, Switch, Form, TextField, TextArea, SearchField, NumberField, OneTimePasswordField, Checkbox, CheckboxGroup, RadioGroup, Slider, ComboBox, SelectBox, ListBox, Menu, MenuTrigger, ContextMenu, Menubar, Tabs, TagGroup, Toolbar, Tooltip, Popover, Modal, AlertDialog, Dialog, HoverCard, Calendar, DatePicker, DateField, DateRangePicker, TimeField, FileTrigger, Grid, Table, Tree, Meter, ProgressBar, Toast, DropZone, DraggableItem, Link, Breadcrumb, Heading, Text, VisuallyHidden, Disclosure, Accordion, Pagination, ScrollArea, Separator, AspectRatio, Avatar, ColorField, ColorArea, ColorSlider, ColorWheel, ColorSwatch.

## Registry CLI

A shadcn/ui-style CLI. `leptos-aria init` writes `leptos-aria.json`, the theme CSS variables, and the `cn` helper. `leptos-aria add <name>` copies a Tailwind-styled component into `src/components/ui` with its dependencies. `list`, `view`, and `diff` read the registry, and `build` turns your own `registry.json` into a hostable registry. Items are served at `https://ifiokjr.github.io/leptos_aria/r/<name>.json` in shadcn's registry-item schema.

---

# Full documentation

## readme

# leptos_aria

> Accessible by default. Styled by you.

`leptos_aria` ports the [React Aria](https://react-spectrum.adobe.com/react-aria/) ecosystem to [Leptos](https://leptos.dev). It brings React Aria's keyboard, focus, and screen-reader behaviour and ships no CSS: every state is exposed as a `data-*` attribute, so Tailwind v4 styles it with the classes you already write.

[Website](https://ifiokjr.github.io/leptos_aria/) · [Tailwind guide](https://ifiokjr.github.io/leptos_aria/tailwind.html) · [Porting roadmap](PORTING.md) · [API docs](https://docs.rs/leptos_aria)

## Install

```bash
cargo add leptos_aria
```

The `leptos_aria` crate re-exports every component, hook, and utility. Each component family also ships as its own `leptos_aria_*` crate if you want a smaller dependency.

On a nightly toolchain, enable the `nightly` feature — `cargo add leptos_aria --features nightly` — to turn on `leptos`'s nightly-only signal and renderer optimizations. The feature is additive and a no-op on stable compilers.

## Style with Tailwind v4

Components are headless. Pass classes with each component's `class` prop and target state with Tailwind's built-in `data-[...]` and `aria-*` variants:

```rust
view! {
	<AccordionItem key="faq".to_string()>
		<AccordionTrigger class="data-[state=open]:font-bold">"Is it accessible?"</AccordionTrigger>
		<AccordionPanel>"By default."</AccordionPanel>
	</AccordionItem>
}
```

See [docs/tailwind.md](docs/tailwind.md) for the full attribute contract and `@custom-variant` recipes.

## Copy styled components with the CLI

```bash
cargo install leptos_aria_cli  # or `cargo binstall leptos_aria_cli` for a prebuilt binary
leptos-aria init               # leptos-aria.json, theme CSS variables, the `cn` helper
leptos-aria add button dialog  # copy components into src/components/ui
leptos-aria diff               # compare your copies with the registry
```

The same workflow as shadcn/ui: copied components are yours to edit, with Tailwind classes on top and the headless crates underneath. Browse the [components](https://ifiokjr.github.io/leptos_aria/components.html) or read the [CLI guide](docs/cli.md), which also covers theming and hosting your own registry. The registry's source is the [`registry`](registry) crate, compiled and tested in CI so every component builds exactly as you receive it.

## Contributing

[`devenv`](https://devenv.sh/) provides a reproducible development environment. Follow its [getting started guide](https://devenv.sh/getting-started/), then [install direnv](https://devenv.sh/automatic-shell-activation/) and allow this repository's `.envrc`:

```bash
direnv allow .
```

Editor configuration for VS Code and Helix is available with `setup:vscode` and `setup:helix`.

These scripts are available inside the devenv shell:

```bash
build:all   # build every crate for the wasm32 target
fix:all     # run dprint fmt and cargo clippy --fix
lint:all    # run dprint check and cargo clippy
test:all    # run the native and wasm32 browser test suites
test:wasm   # run the browser test suite only
test:e2e    # build the site and run Playwright accessibility and keyboard tests
site:build  # render the website and its live previews into target/site
```

Browser tests run through `wasm-bindgen-test-runner` with a local Chrome driven by `chromedriver`; both come from the devenv shell. The `wasm-bindgen` dependency is pinned to the `wasm-bindgen-cli` version in the devenv lock so the runner and the crate always match.

Playwright tests run against the real production website and compiled WASM examples, with no internal mocks. See [e2e/readme.md](e2e/readme.md) for coverage, focused runs, and failure traces.

### Releases

The [release workflow](.github/workflows/release-pr.yml) runs `monochange run release` to prepare versions and changelogs. The hosted `CommitRelease` and `OpenReleaseRequest` steps authenticate with GitHub Actions OIDC, so the monochange GitHub App creates the verified release commits and manages the release pull request as `monochange[bot]`. Preserve that bot authorship when merging release pull requests. Use `monochange preview` for local release planning; package publication runs separately behind the protected `publisher` environment.

### The website

The site at [ifiokjr.github.io/leptos_aria](https://ifiokjr.github.io/leptos_aria/) is built by the `site` binary in [`crates/leptos_aria_docs`](crates/leptos_aria_docs). It renders [`website/layout.html`](website/layout.html) around the landing page and the repository's own markdown (this readme, [docs/tailwind.md](docs/tailwind.md), and [PORTING.md](PORTING.md)), so the site, `llms-full.txt`, and the docs never drift. Static assets, including the logo, live in [`website/public`](website/public).

Each component page frames a live preview of its usage example. [`crates/leptos_aria_preview`](crates/leptos_aria_preview) compiles every registry component's `//!` usage example into a small client-side app, which trunk builds into `preview/` with the registry's own Tailwind theme. The frame loads lazily, so the wasm is only fetched on component pages, when the preview scrolls into view.

## License

[Unlicense](license): public domain.

## Tailwind v4 guide

# Tailwind CSS v4

Every component is headless: no styles ship, and state is exposed as `data-*` attributes so Tailwind's arbitrary variants style it directly. No plugin, no configuration, no dependency — add the crate, style with the classes you already write.

## Style with arbitrary variants

Tailwind v4 supports `data-[...]` variants out of the box. Every component takes a `class` prop, added after its built-in `leptos-aria-*` class on the element it renders. Pass a string, or a closure for classes that change:

```rust
use leptos::prelude::*;
use leptos_aria::Accordion;
use leptos_aria::AccordionItem;
use leptos_aria::AccordionPanel;
use leptos_aria::AccordionTrigger;

view! {
	<Accordion>
		<AccordionItem key="one".to_string()>
			<AccordionTrigger class="data-[state=open]:bg-slate-100 font-medium">
				"Section"
			</AccordionTrigger>
			<AccordionPanel class="data-[state=open]:animate-in">
				"Content"
			</AccordionPanel>
		</AccordionItem>
	</Accordion>
}
```

## Or name the variants once

A short `@custom-variant` block in your CSS turns every state into a one-word variant:

```css
@import "tailwindcss";

@custom-variant open (&:where([data-state="open"], [data-state="checked"], [data-state="on"]));
@custom-variant closed (&:where([data-state="closed"], [data-state="unchecked"], [data-state="off"]));
@custom-variant disabled- (*:disabled, &:where([data-disabled="true"]));
```

```html
<button class="open:bg-slate-100 closed:bg-white disabled-:opacity-50" />
```

## The attribute contract

| Attribute          | Values                    | Where                                                                                      |
| ------------------ | ------------------------- | ------------------------------------------------------------------------------------------ |
| `data-state`       | `open` / `closed`         | Modal, Popover, Tooltip, AlertDialog, HoverCard, ContextMenu, Accordion item/trigger/panel |
| `data-state`       | `checked` / `unchecked`   | Switch                                                                                     |
| `data-state`       | `on` / `off`              | ToggleGroupItem                                                                            |
| `data-state`       | `selected`                | Calendar cells, Tabs, ListBox options                                                      |
| `data-state`       | `loaded` / `fallback`     | Avatar                                                                                     |
| `data-disabled`    | `true` / `false`          | Accordion item, overlay triggers                                                           |
| `data-dragging`    | `true` / `false`          | DropZone                                                                                   |
| `data-is-dragging` | `true` / `false`          | DraggableItem                                                                              |
| `data-current`     | `true`                    | Pagination page buttons                                                                    |
| `data-orientation` | `horizontal` / `vertical` | Separator, Toolbar                                                                         |
| `data-action`      | `cancel` / `confirm`      | AlertDialog buttons                                                                        |
| `data-focused`     | `true` / `false`          | ListBox options (the active option), Tabs (the tab with keyboard focus)                    |
| `data-expanded`    | `true` / `false`          | ComboBox                                                                                   |

Alongside the ARIA attributes (`aria-expanded`, `aria-pressed`, `aria-selected`, ...), Tailwind v4's built-in `aria-*` variants cover the rest: `aria-pressed:bg-blue-500` needs no extra code.

## CLI

# CLI

`leptos-aria` copies styled, accessible components into your Leptos project, the way the [shadcn/ui](https://ui.shadcn.com) CLI does for React. The files become yours: change the classes, the markup, or the API. Behaviour (keyboard, focus, ARIA) keeps coming from the headless `leptos_aria` crates underneath.

```bash
cargo install leptos_aria_cli
```

Skip the compile with a prebuilt binary through [`cargo-binstall`](https://github.com/cargo-bins/cargo-binstall):

```bash
cargo binstall leptos_aria_cli
```

Every [GitHub release](https://github.com/ifiokjr/leptos_aria/releases) also carries `leptos-aria` archives for Linux (glibc and musl), macOS, and Windows on x86_64 and aarch64, each with SHA-256 and SHA-512 checksums. The archives are built by the release workflow and carry a build provenance attestation, which `gh` can verify:

```bash
gh attestation verify leptos-aria-x86_64-unknown-linux-gnu-v0.1.2.tar.gz --repo ifiokjr/leptos_aria
```

## init

Run once, from the crate that renders your UI:

```bash
leptos-aria init
```

It writes `leptos-aria.json`, then installs the `default` style:

- **Theme:** the theme's CSS variables (`--background`, `--primary`, `--radius`, ...) and their `@theme inline` mapping go into your Tailwind CSS file, plus a `dark` variant driven by `class="dark"` on `<html>`.
- **Helper:** `src/components/ui/utils.rs` gets the `cn` helper, which merges Tailwind classes so the ones you pass win conflicts.
- **Modules:** the module declarations (`mod components;`, `pub mod ui;`, `pub mod utils;`) are added so everything compiles.
- **Crates:** `cargo add leptos_aria tw_merge`.

| Flag          | Default             | What it does                                                                                                                        |
| ------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `--css`       | detected            | The Tailwind entry CSS file. Common locations such as `style/tailwind.css` and `input.css` are checked for `@import "tailwindcss"`. |
| `--ui`        | `src/components/ui` | The module directory that receives components.                                                                                      |
| `--force`     |                     | Replace an existing `leptos-aria.json`.                                                                                             |
| `--skip-deps` |                     | Print the `cargo add` command instead of running it.                                                                                |

## add

```bash
leptos-aria add button dialog
leptos-aria add --all
```

Each component arrives with everything it builds on (`registryDependencies`), in dependency order. Its file lands in the component directory, its `pub mod` line is added to `mod.rs`, its crates are added with `cargo add`, and any CSS it needs is written into your Tailwind file.

Running `add` again is safe. Files that already match are left alone. Files you have edited are kept unless you pass `--overwrite`. Each item's CSS lives between `/* leptos-aria: <name> */` markers, so re-installing replaces its block instead of duplicating it.

| Flag          | What it does                                         |
| ------------- | ---------------------------------------------------- |
| `--all`       | Add every component in the registry.                 |
| `--overwrite` | Replace files that differ from the registry.         |
| `--dry-run`   | Show what would change without writing anything.     |
| `--skip-deps` | Print the `cargo add` command instead of running it. |

Besides bare names, `add` accepts a URL (`https://example.com/r/card.json`), a local path ending in `.json`, or a namespaced name from your own registries (`@acme/card`).

## list, view, and diff

```bash
leptos-aria list            # every item the registry serves
leptos-aria view button     # an item's JSON, file contents included
leptos-aria diff            # which installed components differ from the registry
leptos-aria diff button     # a unified diff of one component
```

Use `diff` after upgrading to see what changed upstream, then copy over the parts you want, or run `add <name> --overwrite` to take all of it.

## leptos-aria.json

```json
{
	"$schema": "https://ifiokjr.github.io/leptos_aria/schema.json",
	"style": "default",
	"tailwind": { "css": "style/tailwind.css" },
	"paths": { "ui": "src/components/ui" },
	"registries": {
		"@acme": "https://acme.dev/r/{name}.json"
	}
}
```

- **`tailwind.css`:** the CSS file that imports Tailwind. Theme variables and component CSS are written here.
- **`paths.ui`:** where component files land. A path under `src/` is wired into your crate automatically.
- **`registries`:** extra registries by namespace. `{name}` is replaced with the item name, so `leptos-aria add @acme/card` reads `https://acme.dev/r/card.json`. The template can also be a local path.

## Theming

Components use semantic colours (`bg-primary`, `text-muted-foreground`, `border-input`, `ring-ring`) backed by CSS variables, exactly like shadcn/ui. Re-theme everything by editing the variables in the `/* leptos-aria: default */` block of your CSS file:

```css
:root {
	--primary: oklch(0.55 0.22 30);
	--primary-foreground: oklch(0.98 0 0);
	--radius: 0.5rem;
}
```

The variable names match shadcn/ui's, so its published themes paste straight in.

## Host your own registry

A registry is a folder of JSON files. Item files use shadcn's [`registry-item.json` schema](https://ui.shadcn.com/schema/registry-item.json), so registry tooling that understands shadcn understands yours. Describe your items in a `registry.json`:

```json
{
	"$schema": "https://ui.shadcn.com/schema/registry.json",
	"name": "acme",
	"items": [
		{
			"name": "card",
			"type": "registry:ui",
			"title": "Card",
			"description": "Our card",
			"dependencies": ["leptos_aria"],
			"registryDependencies": ["utils"],
			"files": [{ "path": "src/ui/card.rs", "type": "registry:ui" }]
		}
	]
}
```

Then build it and serve the output from any static host:

```bash
leptos-aria build registry.json --output public/r
```

`build` validates names and dependencies and inlines every file's contents. It writes `public/r/<name>.json` for each item and `public/r/registry.json` for `list`.

- **Bare dependencies:** names in `registryDependencies` refer to the official registry, so your items can build on `utils` or `button`.
- **Install locations:** a file's `target` places it explicitly. `@ui/` is the component directory and `~/` is the project root.

Set `LEPTOS_ARIA_REGISTRY_URL` to point the default registry somewhere else, such as a local build while you develop:

```bash
LEPTOS_ARIA_REGISTRY_URL=./public/r/{name}.json leptos-aria add card
```

## Porting roadmap

# Porting roadmap

A direct port of the [`react-aria`](https://react-spectrum.adobe.com/react-aria/) ecosystem to [`leptos`](https://leptos.dev), one interaction and one component at a time. Each entry links to the upstream source it mirrors; the crate column names where the port lives.

Status legend: **done** (ported and tested), **planned** (not started).

## Interactions

| Hook                  | Status | Crate                                        |
| --------------------- | ------ | -------------------------------------------- |
| `usePress`            | done   | `leptos_aria_interactions::use_press`        |
| `useFocus`            | done   | `leptos_aria_interactions::use_focus`        |
| `useFocusWithin`      | done   | `leptos_aria_interactions::use_focus_within` |
| `useHover`            | done   | `leptos_aria_interactions::use_hover`        |
| `useFocusable`        | done   | `leptos_aria_interactions::use_focusable`    |
| `useFocusRing`        | done   | `leptos_aria_interactions::use_focus_ring`   |
| `useKeyboard`         | done   | `leptos_aria_interactions::use_keyboard`     |
| `useLongPress`        | done   | `leptos_aria_interactions::use_long_press`   |
| `useScroll`           | done   | `leptos_aria_interactions::use_scroll`       |
| `useDrag` / `useDrop` | done   | `leptos_aria_interactions`                   |
| `useMove`             | done   | `leptos_aria_interactions::use_move`         |
| `useDismiss`          | done   | `leptos_aria_overlay::use_overlay_dismiss`   |
| `useModal`            | done   | `leptos_aria_overlay::use_modal`             |

## Utilities

| Utility                                    | Status     | Crate                                        |
| ------------------------------------------ | ---------- | -------------------------------------------- |
| `focusWithoutScrolling`                    | done       | `leptos_aria_utils::focus_without_scrolling` |
| `runAfterTransition`                       | done       | `leptos_aria_utils::run_after_transition`    |
| `isVirtualClick` / `isVirtualPointerEvent` | done       | `leptos_aria_utils`                          |
| `useGlobalListeners`                       | done       | `leptos_aria_utils::GlobalListeners`         |
| `platform` detection                       | done       | `leptos_aria_utils`                          |
| interaction modality                       | done       | `leptos_aria_utils::interaction_modality`    |
| `focusSafely`                              | done       | `leptos_aria_utils::focus_safely`            |
| `isFocusable` / `isTabbable`               | done       | `leptos_aria_utils`                          |
| `useId`                                    | done       | `leptos_aria_utils::use_id`                  |
| `useLabel` / `useLabels`                   | done       | `leptos_aria_utils`                          |
| `getSyntheticLinkProps` / `openLink`       | done       | `leptos_aria_utils::open_link`               |
| `usePreventScroll`                         | done       | `leptos_aria_overlay::use_prevent_scroll`    |
| `useFormReset`                             | done       | `leptos_aria_form::use_form_reset`           |
| `useDeepMemo` equivalent                   | not needed | idiomatic leptos signals memoize             |

## Focus

| Feature                               | Status | Crate                                |
| ------------------------------------- | ------ | ------------------------------------ |
| focus containment (scope equivalent)  | done   | `leptos_aria_overlay::use_modal`     |
| `useFocusManagement` programmatic API | done   | `leptos_aria_overlay::FocusManager`  |
| `useAutofocus`                        | done   | `leptos_aria_overlay::use_autofocus` |

## Selection

| Feature                     | Status | Crate                                                              |
| --------------------------- | ------ | ------------------------------------------------------------------ |
| `useTypeSelect`             | done   | `leptos_aria_selection` (type-ahead in `CollectionKeys` + ListBox) |
| `SelectionManager`          | done   | `leptos_aria_selection` (`SelectionState`)                         |
| `useMultipleSelectionState` | done   | `leptos_aria_selection` (`use_selection_state`)                    |

## Components

| Component                                         | Status  | Crate                                                |
| ------------------------------------------------- | ------- | ---------------------------------------------------- |
| `Button` (native element)                         | done    | `leptos_aria_button::Button`                         |
| `Button` (custom element types)                   | done    | `leptos_aria_button::AnchorButton / CustomButton`    |
| `ToggleButton` / `useToggle`                      | done    | `leptos_aria_toggle`                                 |
| `Switch` (deprecated upstream for `ToggleButton`) | skipped | —                                                    |
| `Form`                                            | done    | `leptos_aria_form::Form`                             |
| `TextField`                                       | done    | `leptos_aria_text_field::TextField`                  |
| `TextArea`                                        | done    | `leptos_aria_text_field::TextArea`                   |
| `SearchField`                                     | done    | `leptos_aria_search_field::SearchField`              |
| `NumberField`                                     | done    | `leptos_aria_number_field::NumberField`              |
| `Checkbox` / `useCheckbox`                        | done    | `leptos_aria_checkbox::Checkbox`                     |
| `CheckboxGroup`                                   | done    | `leptos_aria_checkbox::CheckboxGroup`                |
| `RadioGroup`                                      | done    | `leptos_aria_radio::RadioGroup`                      |
| `Slider`                                          | done    | `leptos_aria_slider::Slider`                         |
| `ComboBox`                                        | done    | `leptos_aria_combo_box::ComboBox`                    |
| `SelectBox`                                       | done    | `leptos_aria_select_box::SelectBox`                  |
| `ListBox`                                         | done    | `leptos_aria_list_box::ListBox`                      |
| `Menu`                                            | done    | `leptos_aria_menu::Menu` + `MenuTrigger`             |
| `Tabs`                                            | done    | `leptos_aria_tabs::Tabs`                             |
| `TagGroup`                                        | done    | `leptos_aria_tag::TagGroup`                          |
| `Toolbar`                                         | done    | `leptos_aria_toolbar::Toolbar`                       |
| `Tooltip`                                         | done    | `leptos_aria_overlay::Tooltip`                       |
| `Popover`                                         | done    | `leptos_aria_overlay::Popover` (flip/shift included) |
| `Modal` / `ModalOverlay`                          | done    | `leptos_aria_overlay::Modal`                         |
| `Dialog`                                          | done    | `leptos_aria_overlay::Dialog`                        |
| `Calendar`                                        | done    | `leptos_aria_calendar::Calendar`                     |
| `DatePicker` / `DateField`                        | done    | `leptos_aria_date_picker`                            |
| `DateRangePicker`                                 | done    | `leptos_aria_date_picker`                            |
| `TimeField`                                       | done    | `leptos_aria_time_field::TimeField`                  |
| `FileTrigger`                                     | done    | `leptos_aria_file_trigger::FileTrigger`              |
| `Grid`                                            | done    | `leptos_aria_grid::Grid`                             |
| `Table`                                           | done    | `leptos_aria_table::Table`                           |
| `Tree`                                            | done    | `leptos_aria_tree::Tree`                             |
| `Meter`                                           | done    | `leptos_aria_progress::Meter`                        |
| `ProgressBar`                                     | done    | `leptos_aria_progress::ProgressBar`                  |
| `Toast`                                           | done    | `leptos_aria_toast`                                  |
| `DropZone`                                        | done    | `leptos_aria_drop_zone::DropZone`                    |
| `DragAndDrop` (newer draggable-item API)          | done    | `leptos_aria_drop_zone::DraggableItem`               |
| `Link`                                            | done    | `leptos_aria_link::Link`                             |
| `Breadcrumb`                                      | done    | `leptos_aria_breadcrumbs`                            |
| `Heading` / `Text` / `VisuallyHidden`             | done    | `leptos_aria_primitives`                             |
| `Disclosure`                                      | done    | `leptos_aria_disclosure::Disclosure`                 |
| `Color` / `ColorField` / `ColorSwatch`            | done    | `leptos_aria_color` (incl. area/slider/wheel)        |
| `DateValue` / `DateDuration`                      | done    | `leptos_aria_date`                                   |

## Porting conventions

- One crate per component family, matching the workspace layout, with a single `leptos_aria` facade crate re-exporting everything; crate names use underscores (`leptos_aria_name`).
- Hooks take a `...Props` builder struct and return a `...Result` carrying the props to spread onto the target element, mirroring the upstream `useX(props) -> {xProps}` shape.
- Upstream refs become `Rc`/`Arc`-shared state structs whose handler methods are wrapped as cloneable callbacks.
- Upstream module-level singletons (`textSelection`, transition tracking, interaction modality) become thread-local state.
- Callbacks are boxed `dyn Fn` in props and `Rc`/`Arc`-wrapped internally; event payloads that upstream wraps (press, hover, focus) become small owned structs carrying the resolved target.
- React-specific polyfills (synthetic blur via `MutationObserver`, the React 16 `PointerEvent` fallbacks) are adapted or noted in code comments where the platform no longer needs them.