@vjdesigns/vjdesigns-ui 1.5.0 → 2.0.0

package/dist/ai/llms-full.txt

@@ -5,7 +5,7 @@
 - Install: `npm install @vjdesigns/vjdesigns-ui` (peer: react, react-dom 18 or 19).
 - Import the stylesheet once: `import "@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css";`
 - Import components from the package root: `import { Button, Field, Input } from "@vjdesigns/vjdesigns-ui";`
-- Theme: wrap the app in `<Theme brand="blue" | "purple" | ... | "#hex" mode="light" | "dark" accent="brand" | "volt" | "#hex">`.
+- Theme: wrap the app in `<Theme brand="blue" | "purple" | ... | "#hex" mode="light" | "dark" accent="brand" | "lime" | "#hex">`.
 - Language: `<LocaleProvider locale="es" messages={es}>` with `import es from "@vjdesigns/vjdesigns-ui/locales/es"`.
 - Forms: wrap each control in `Field` (label, hint, error, required); validate with `useFormValidation` + `ErrorSummary`.
 - Style with the props (variant, tone, size) and the --color-*, --space-*, --radius-* CSS variables; don't override internal class names.
@@ -281,13 +281,13 @@ import { Theme, Button } from "@vjdesigns/vjdesigns-ui";
 | --- | --- | --- | --- |
 | `mode` | `"light" \| "dark"` | inherited | Color mode for everything inside. |
 | `brand` | `"black" \| "blue" \| "gold" \| "green" \| "purple"`, a hex color, or `{ light, dark }` | inherited | Brand palette for buttons, links, focus rings and indicators. |
-| `accent` | `"brand" | "volt"`, a hex color, or `{ light, dark }` | inherited (the brand's own) | The bright highlight on badges, switches, progress bars, sliders, steppers, and active navigation. |
+| `accent` | `"brand" | "lime"`, a hex color, or `{ light, dark }` | inherited (the brand's own) | The bright highlight on badges, switches, progress bars, sliders, steppers, and active navigation. |
 | `fill` | `boolean` | `false` | Paints the theme's background and text color on the wrapper. |
 
 Outside React (or to theme the whole page), set the attributes on `<html>` instead:
 
 ```html
-<html data-theme="dark" data-brand="purple" data-accent="volt">
+<html data-theme="dark" data-brand="purple" data-accent="lime">
 ```
 
 ### Accent color
@@ -300,13 +300,13 @@ The accent is the energetic highlight: badges, switches, progress bars, sliders,
 | `purple` | lavender `#c0b0ff` |
 | `gold` | amber `#f5ad5f` |
 | `green` | mint `#72d4ad` |
-| `black` | volt `#c8f031` (black has no hue to build on) |
+| `black` | lime `#c8f031` (black has no hue to build on) |
 | a custom hex | generated from that color |
 
 To choose a different one:
 
 ```tsx
-<Theme accent="volt">…</Theme>      // the original bright yellow-green
+<Theme accent="lime">…</Theme>      // the original bright yellow-green ("volt", its former name, still works)
 <Theme accent="#ff6b00">…</Theme>   // any color
 <Theme accent="brand">…</Theme>     // back to the brand's own, inside an area with another accent
 ```
@@ -1107,36 +1107,36 @@ import { DataGrid } from "@vjdesigns/vjdesigns-ui";
 
 Category: data-display · Storybook: Data display/DataGrid
 
-An interactive data table (WAI-ARIA APG "Data Grid"): sortable columns
-(with Shift for multi-column sorts), search filtering, single or
-multiple row selection, pagination, and a full keyboard model. Works with
-client-side data, or server-side data with `manual`.
-
-Keyboard: the grid is one Tab stop. Arrow keys move between cells
-(mirrored in RTL), Home / End go to the row's first or last cell, Ctrl+Home
-/ Ctrl+End to the first or last cell of the grid, Page Up / Page Down move
-ten rows. On a header, Enter sorts (Shift+Enter adds a secondary sort).
-Space selects the row, Shift+click or Shift+Space selects a range, and
-Ctrl/⌘+A selects every row. A cell with a single button, link, or
-checkbox focuses it directly; for cells with several controls or a text
-field, Enter or F2 moves into the cell, Tab cycles inside it, and Escape
-returns to the grid.
-
-Screen readers hear sort changes and filter result counts; the grid is a
-real `<table role="grid">` with `aria-sort`, `aria-selected`,
-`aria-rowcount`, and `aria-rowindex`.
-
-```tsx
-<DataGrid
-  aria-label="Roster"
-  rows={players}
-  columns={[
-    { key: "name", header: "Player", sortable: true, rowHeader: true },
-    { key: "ppg", header: "PPG", sortable: true, numeric: true },
-  ]}
-  selectionMode="multiple"
-  pageSize={10}
-/>
+An interactive data table (WAI-ARIA APG "Data Grid"): sortable columns
+(with Shift for multi-column sorts), search filtering, single or
+multiple row selection, pagination, and a full keyboard model. Works with
+client-side data, or server-side data with `manual`.
+
+Keyboard: the grid is one Tab stop. Arrow keys move between cells
+(mirrored in RTL), Home / End go to the row's first or last cell, Ctrl+Home
+/ Ctrl+End to the first or last cell of the grid, Page Up / Page Down move
+ten rows. On a header, Enter sorts (Shift+Enter adds a secondary sort).
+Space selects the row, Shift+click or Shift+Space selects a range, and
+Ctrl/⌘+A selects every row. A cell with a single button, link, or
+checkbox focuses it directly; for cells with several controls or a text
+field, Enter or F2 moves into the cell, Tab cycles inside it, and Escape
+returns to the grid.
+
+Screen readers hear sort changes and filter result counts; the grid is a
+real `<table role="grid">` with `aria-sort`, `aria-selected`,
+`aria-rowcount`, and `aria-rowindex`.
+
+```tsx
+<DataGrid
+  aria-label="Roster"
+  rows={players}
+  columns={[
+    { key: "name", header: "Player", sortable: true, rowHeader: true },
+    { key: "ppg", header: "PPG", sortable: true, numeric: true },
+  ]}
+  selectionMode="multiple"
+  pageSize={10}
+/>
 ```
 
 ### Props
@@ -1816,25 +1816,25 @@ import { VirtualList } from "@vjdesigns/vjdesigns-ui";
 
 Category: data-display · Storybook: Data display/VirtualList
 
-A list that renders only the items in view, so tens of thousands of rows
-scroll smoothly. Items may have any height (they're measured as they
-render). Built on `useVirtualizer` and `ScrollArea`.
-
-Accessibility: a real `role="list"` whose items carry `aria-setsize` and
-`aria-posinset`, so screen readers announce "item 4,812 of 10,000" even
-though only a few dozen exist in the page. The scroll area is keyboard
-scrollable, and Tab through items' links and buttons keeps working (new
-items render as focus scrolls them into view). Browser find-in-page only
-sees rendered items, so offer search for long lists.
-
-```tsx
-<VirtualList
-  aria-label="All players"
-  items={players}
-  height="24rem"
-  getKey={(p) => p.id}
-  renderItem={(p) => <PlayerRow player={p} />}
-/>
+A list that renders only the items in view, so tens of thousands of rows
+scroll smoothly. Items may have any height (they're measured as they
+render). Built on `useVirtualizer` and `ScrollArea`.
+
+Accessibility: a real `role="list"` whose items carry `aria-setsize` and
+`aria-posinset`, so screen readers announce "item 4,812 of 10,000" even
+though only a few dozen exist in the page. The scroll area is keyboard
+scrollable, and Tab through items' links and buttons keeps working (new
+items render as focus scrolls them into view). Browser find-in-page only
+sees rendered items, so offer search for long lists.
+
+```tsx
+<VirtualList
+  aria-label="All players"
+  items={players}
+  height="24rem"
+  getKey={(p) => p.id}
+  renderItem={(p) => <PlayerRow player={p} />}
+/>
 ```
 
 ### Props
@@ -1969,7 +1969,7 @@ Accessibility:
 
 - Playground
 - Tones: Every tone, solid. `accent` is the promo strip, always with dark text.
-- Volt Promo: The accent promo strip: bold, dark text on accent, with a strong call to action.
+- Accent Promo: The accent promo strip: bold, dark text on accent, with a strong call to action.
 - Variants: Solid and soft side by side for every tone. Check both themes.
 - Sizes: Small, medium, and large. Buttons inside are one step smaller than the strip.
 - With Actions: Buttons get a verified default look for the strip. Links in the message use `tone="neutral"` so they take the strip's text color and stay underlined.
@@ -2013,15 +2013,15 @@ import { ErrorSummary } from "@vjdesigns/vjdesigns-ui";
 
 Category: feedback · Storybook: Feedback/ErrorSummary
 
-The list of a form's errors, shown above it after a failed submit: a danger
-`Alert` whose items link to their fields (activating one moves focus to the
-field). It's focusable (`tabIndex={-1}`): give `useFormValidation`'s
-`summaryRef` as `ref` and a failed submit moves focus here, so screen
-readers announce the heading and the list. The title is a real heading
-(`h2` by default; set `headingLevel` to fit the page outline).
-
-```tsx
-<ErrorSummary ref={form.summaryRef} errors={form.errorList} />
+The list of a form's errors, shown above it after a failed submit: a danger
+`Alert` whose items link to their fields (activating one moves focus to the
+field). It's focusable (`tabIndex={-1}`): give `useFormValidation`'s
+`summaryRef` as `ref` and a failed submit moves focus here, so screen
+readers announce the heading and the list. The title is a real heading
+(`h2` by default; set `headingLevel` to fit the page outline).
+
+```tsx
+<ErrorSummary ref={form.summaryRef} errors={form.errorList} />
 ```
 
 ### Props
@@ -2519,16 +2519,16 @@ import { ColorInput } from "@vjdesigns/vjdesigns-ui";
 
 Category: forms · Storybook: Forms/ColorPicker
 
-A pill field showing a swatch and the color value; pressing it opens a
-`ColorPicker` in a `Popover` (a non-modal dialog on the shared overlay
-layer stack: Escape and outside presses close it, focus returns to the
-field). Takes the same value, format, alpha, swatch, and state props as
-`ColorPicker`.
-
-The trigger is a native `<button>` with `aria-haspopup="dialog"` and
-`aria-expanded`. Its name is the label plus the current value and a plain
-description ("Jersey color, #1d4ed8, dark blue"). Inside a `Field`, the
-label, hint, error, invalid, disabled, and read-only state are wired to
+A pill field showing a swatch and the color value; pressing it opens a
+`ColorPicker` in a `Popover` (a non-modal dialog on the shared overlay
+layer stack: Escape and outside presses close it, focus returns to the
+field). Takes the same value, format, alpha, swatch, and state props as
+`ColorPicker`.
+
+The trigger is a native `<button>` with `aria-haspopup="dialog"` and
+`aria-expanded`. Its name is the label plus the current value and a plain
+description ("Jersey color, #1d4ed8, dark blue"). Inside a `Field`, the
+label, hint, error, invalid, disabled, and read-only state are wired to
 it. A read-only field still opens, so the values can be inspected.
 
 ### Props
@@ -2729,22 +2729,22 @@ import { DatePicker } from "@vjdesigns/vjdesigns-ui";
 
 Category: forms · Storybook: Forms/DatePicker
 
-A date field: type a date in the locale's short format (or ISO), or press
-the calendar button to pick one from a `Calendar` in a popup dialog.
-
-The value is an ISO date string ("YYYY-MM-DD"), so it never shifts with
-time zones. The text field shows it in the locale's numeric format; on
-blur (or Enter), typed text is parsed and normalized, or rejected with an
-inline error. Inside a `Field`, label, hint, error, required, disabled,
-and invalid state are wired to the text input.
-
-The popup is a modal `Popover` on the shared overlay layer stack, so
-Escape closes only the calendar, also inside a `Modal` or `Drawer`.
-
-```tsx
-<Field label="Game day">
-  <DatePicker name="gameDay" min="2026-10-01" onValueChange={setDay} />
-</Field>
+A date field: type a date in the locale's short format (or ISO), or press
+the calendar button to pick one from a `Calendar` in a popup dialog.
+
+The value is an ISO date string ("YYYY-MM-DD"), so it never shifts with
+time zones. The text field shows it in the locale's numeric format; on
+blur (or Enter), typed text is parsed and normalized, or rejected with an
+inline error. Inside a `Field`, label, hint, error, required, disabled,
+and invalid state are wired to the text input.
+
+The popup is a modal `Popover` on the shared overlay layer stack, so
+Escape closes only the calendar, also inside a `Modal` or `Drawer`.
+
+```tsx
+<Field label="Game day">
+  <DatePicker name="gameDay" min="2026-10-01" onValueChange={setDay} />
+</Field>
 ```
 
 ### Props
@@ -2816,25 +2816,25 @@ import { DateRangePicker } from "@vjdesigns/vjdesigns-ui";
 
 Category: forms · Storybook: Forms/DatePicker
 
-A date range field: two text fields (start and end) typed in the locale's
-short format, plus a calendar button that opens a range `Calendar` (two
-months by default) in a modal popup.
-
-The value is `{ start, end }` with ISO dates ("YYYY-MM-DD"). In the
-calendar, the first pick sets the start and the second the end; the range
-is committed (and the popup closes) only when both are picked, so Escape
-after one pick changes nothing. Typed dates are validated like
-`DatePicker`'s, plus an end before the start is rejected.
-
-Accessibility: the pair is a `role="group"` named by the `Field` label
-(or `aria-label`); each field is named by that label plus its own
-visible label ("Season dates, Start date"). Field hint, error, required, disabled, and
-invalid state reach both fields. Errors are announced politely.
-
-```tsx
-<Field label="Season dates">
-  <DateRangePicker startName="from" endName="to" onValueChange={setRange} />
-</Field>
+A date range field: two text fields (start and end) typed in the locale's
+short format, plus a calendar button that opens a range `Calendar` (two
+months by default) in a modal popup.
+
+The value is `{ start, end }` with ISO dates ("YYYY-MM-DD"). In the
+calendar, the first pick sets the start and the second the end; the range
+is committed (and the popup closes) only when both are picked, so Escape
+after one pick changes nothing. Typed dates are validated like
+`DatePicker`'s, plus an end before the start is rejected.
+
+Accessibility: the pair is a `role="group"` named by the `Field` label
+(or `aria-label`); each field is named by that label plus its own
+visible label ("Season dates, Start date"). Field hint, error, required, disabled, and
+invalid state reach both fields. Errors are announced politely.
+
+```tsx
+<Field label="Season dates">
+  <DateRangePicker startName="from" endName="to" onValueChange={setRange} />
+</Field>
 ```
 
 ### Props
@@ -2881,25 +2881,25 @@ import { DateTimePicker } from "@vjdesigns/vjdesigns-ui";
 
 Category: forms · Storybook: Forms/DateTimePicker
 
-A date and a time together: a `DatePicker` and a `TimePicker` side by
-side, with one value, "YYYY-MM-DDTHH:mm" (the format of a native
-`datetime-local` input, with no time zone). Each half keeps its full
-behavior: typed dates in the locale's format or the calendar popup, typed
-times in any common form or the list of times.
-
-`min` and `max` limit the calendar by their dates, and the time list by
-their times on those boundary dates. `defaultTime` fills the time when a
-date is picked first.
-
-Accessibility: the pair is a `role="group"` named by the `Field` label
-(or `aria-label`); each field is named by that label plus its own
-visible label ("Tip-off, Date", "Tip-off, Time"). Field hint, error,
-required, disabled, and invalid state reach both.
-
-```tsx
-<Field label="Tip-off">
-  <DateTimePicker name="tipoff" defaultTime="19:00" step={15} />
-</Field>
+A date and a time together: a `DatePicker` and a `TimePicker` side by
+side, with one value, "YYYY-MM-DDTHH:mm" (the format of a native
+`datetime-local` input, with no time zone). Each half keeps its full
+behavior: typed dates in the locale's format or the calendar popup, typed
+times in any common form or the list of times.
+
+`min` and `max` limit the calendar by their dates, and the time list by
+their times on those boundary dates. `defaultTime` fills the time when a
+date is picked first.
+
+Accessibility: the pair is a `role="group"` named by the `Field` label
+(or `aria-label`); each field is named by that label plus its own
+visible label ("Tip-off, Date", "Tip-off, Time"). Field hint, error,
+required, disabled, and invalid state reach both.
+
+```tsx
+<Field label="Tip-off">
+  <DateTimePicker name="tipoff" defaultTime="19:00" step={15} />
+</Field>
 ```
 
 ### Props
@@ -3586,10 +3586,10 @@ import { Rating } from "@vjdesigns/vjdesigns-ui";
 
 Category: forms · Storybook: Forms/Rating
 
-An editable star (or custom icon) rating, built on real native radios
-(visually hidden but focusable, sharing one `name`) inside
-`role="radiogroup"`. Tab lands on the selected value (or the first option),
-arrow keys move and select, and the value submits with a form. Supports
+An editable star (or custom icon) rating, built on real native radios
+(visually hidden but focusable, sharing one `name`) inside
+`role="radiogroup"`. Tab lands on the selected value (or the first option),
+arrow keys move and select, and the value submits with a form. Supports
 half values, clearing, hover preview, and Field/Fieldset wiring.
 
 ### Props
@@ -3645,9 +3645,9 @@ import { RatingDisplay } from "@vjdesigns/vjdesigns-ui";
 
 Category: forms · Storybook: Forms/Rating
 
-A read-only rating: a row of icons with fractional fill, exposed to
-assistive tech as a single `role="img"` named "Rated 4.5 out of 5",
-optionally followed by the value ("4.5 / 5") and a review count.
+A read-only rating: a row of icons with fractional fill, exposed to
+assistive tech as a single `role="img"` named "Rated 4.5 out of 5",
+optionally followed by the value ("4.5 / 5") and a review count.
 Not focusable. For an editable rating use `Rating`.
 
 ### Props
@@ -3994,29 +3994,29 @@ import { TagInput } from "@vjdesigns/vjdesigns-ui";
 
 Category: forms · Storybook: Forms/TagInput
 
-A text field that turns entries into removable tags (chips). Type and
-press Enter (or a delimiter such as a comma) to add; paste "a, b, c" to
-add several at once.
-
-Keyboard:
-- Enter / delimiters (and Tab with `addOnTab`): add the typed text.
-- Backspace in an empty input, or Left Arrow with the caret at the
-  start: move focus to the last tag's remove button. A second Backspace
-  (or Delete) removes that tag and focus returns to the next tag, or the
-  input. This two-step pattern avoids deleting a tag by accident and
-  lets screen readers announce which tag is about to be removed.
-- On a tag: Left / Right Arrow move between tags and back to the input;
-  Home / End jump to the first tag / the input; Backspace or Delete removes.
-
-Inside a `Field`, the label, hint, error, required, disabled, read-only,
-and size are wired automatically. `ref` points at the `<input>`;
-native input props are spread onto it, while `className` and `style` go
-to the outer wrapper.
-
-```tsx
-<Field label="Skills">
-  <TagInput defaultValue={["Defense"]} placeholder="Add a skill" />
-</Field>
+A text field that turns entries into removable tags (chips). Type and
+press Enter (or a delimiter such as a comma) to add; paste "a, b, c" to
+add several at once.
+
+Keyboard:
+- Enter / delimiters (and Tab with `addOnTab`): add the typed text.
+- Backspace in an empty input, or Left Arrow with the caret at the
+  start: move focus to the last tag's remove button. A second Backspace
+  (or Delete) removes that tag and focus returns to the next tag, or the
+  input. This two-step pattern avoids deleting a tag by accident and
+  lets screen readers announce which tag is about to be removed.
+- On a tag: Left / Right Arrow move between tags and back to the input;
+  Home / End jump to the first tag / the input; Backspace or Delete removes.
+
+Inside a `Field`, the label, hint, error, required, disabled, read-only,
+and size are wired automatically. `ref` points at the `<input>`;
+native input props are spread onto it, while `className` and `style` go
+to the outer wrapper.
+
+```tsx
+<Field label="Skills">
+  <TagInput defaultValue={["Defense"]} placeholder="Add a skill" />
+</Field>
 ```
 
 ### Props
@@ -4125,23 +4125,23 @@ import { TimePicker } from "@vjdesigns/vjdesigns-ui";
 
 Category: forms · Storybook: Forms/TimePicker
 
-A time field: type a time in almost any form ("2:30 pm", "1430", "230p",
-"14h30", the locale's own format), or pick one from a list of times
-`step` minutes apart. Built on `Combobox`, so the list follows the
-WAI-ARIA combobox pattern: ArrowDown opens it on the selected time,
-arrows move, Enter picks, Escape closes, and typing filters it.
-
-The value is a 24-hour "HH:mm" string, the same as a native
-`<input type="time">`, so it never shifts with time zones. The field
-shows it in the locale's clock (12- or 24-hour, override with
-`hourCycle`). On blur (or Enter), typed text is parsed and normalized, or
-rejected with an inline, announced error. Inside a `Field`, label, hint,
-error, required, disabled, and invalid state are wired to the input.
-
-```tsx
-<Field label="Tip-off">
-  <TimePicker name="tipoff" min="08:00" max="22:00" step={15} />
-</Field>
+A time field: type a time in almost any form ("2:30 pm", "1430", "230p",
+"14h30", the locale's own format), or pick one from a list of times
+`step` minutes apart. Built on `Combobox`, so the list follows the
+WAI-ARIA combobox pattern: ArrowDown opens it on the selected time,
+arrows move, Enter picks, Escape closes, and typing filters it.
+
+The value is a 24-hour "HH:mm" string, the same as a native
+`<input type="time">`, so it never shifts with time zones. The field
+shows it in the locale's clock (12- or 24-hour, override with
+`hourCycle`). On blur (or Enter), typed text is parsed and normalized, or
+rejected with an inline, announced error. Inside a `Field`, label, hint,
+error, required, disabled, and invalid state are wired to the input.
+
+```tsx
+<Field label="Tip-off">
+  <TimePicker name="tipoff" min="08:00" max="22:00" step={15} />
+</Field>
 ```
 
 ### Props
@@ -4689,24 +4689,24 @@ import { ScrollArea } from "@vjdesigns/vjdesigns-ui";
 
 Category: layout · Storybook: Layout/ScrollArea
 
-A scrolling region with slim, on-brand scrollbars that work the same in
-every browser. Scrolling itself stays native (wheel, touch, trackpad
-momentum, keyboard, find-in-page, scroll anchoring); only the look of the
-bars is custom. The thumbs can be dragged, and pressing the track pages
-toward the press.
-
-Accessibility: while the content overflows, the viewport is focusable
-(`tabIndex=0`) so keyboard users can scroll it with the arrow keys, Page
-Up / Page Down, and Home / End. Give it a name with `aria-label` or
-`aria-labelledby`, which also makes it a `region` landmark. The custom
-bars are hidden from assistive technology (they duplicate native
-scrolling). Edge shadows show there is more to see. In Windows High
-Contrast mode the native scrollbars come back.
-
-```tsx
-<ScrollArea maxHeight="20rem" aria-label="Roster">
-  <List>…</List>
-</ScrollArea>
+A scrolling region with slim, on-brand scrollbars that work the same in
+every browser. Scrolling itself stays native (wheel, touch, trackpad
+momentum, keyboard, find-in-page, scroll anchoring); only the look of the
+bars is custom. The thumbs can be dragged, and pressing the track pages
+toward the press.
+
+Accessibility: while the content overflows, the viewport is focusable
+(`tabIndex=0`) so keyboard users can scroll it with the arrow keys, Page
+Up / Page Down, and Home / End. Give it a name with `aria-label` or
+`aria-labelledby`, which also makes it a `region` landmark. The custom
+bars are hidden from assistive technology (they duplicate native
+scrolling). Edge shadows show there is more to see. In Windows High
+Contrast mode the native scrollbars come back.
+
+```tsx
+<ScrollArea maxHeight="20rem" aria-label="Roster">
+  <List>…</List>
+</ScrollArea>
 ```
 
 ### Props
@@ -4857,32 +4857,32 @@ import { ContextMenu } from "@vjdesigns/vjdesigns-ui";
 
 Category: navigation · Storybook: Navigation/ContextMenu
 
-A menu that opens at the pointer on right-click (or a long press on touch
-screens), for actions on the thing under the pointer. It is a `Menu` in
-every other way: compose it from the same items (`ContextMenu.Item`,
-`.CheckboxItem`, `.RadioGroup` / `.RadioItem`, `.Group` / `.Label`,
-`.Separator`, and submenus), with the same keyboard model (arrows, Home /
-End, typeahead, Escape, Tab) and RTL support.
-
-Keyboard: with focus inside the trigger area, Shift+F10 or the Menu key
-opens the menu next to the focused element and focuses its first item.
-On close, focus goes back to where it was.
-
-Right-click menus are hard to discover, and many touch screens and
-assistive technologies never open them, so offer the same actions
-somewhere visible too (a `Menu` button, a toolbar). Treat the context
-menu as a shortcut, never the only way.
-
-```tsx
-<ContextMenu>
-  <ContextMenu.Trigger>
-    <Card tabIndex={0}>Game film</Card>
-  </ContextMenu.Trigger>
-  <ContextMenu.Content>
-    <ContextMenu.Item onSelect={rename}>Rename</ContextMenu.Item>
-    <ContextMenu.Item tone="danger" onSelect={remove}>Delete</ContextMenu.Item>
-  </ContextMenu.Content>
-</ContextMenu>
+A menu that opens at the pointer on right-click (or a long press on touch
+screens), for actions on the thing under the pointer. It is a `Menu` in
+every other way: compose it from the same items (`ContextMenu.Item`,
+`.CheckboxItem`, `.RadioGroup` / `.RadioItem`, `.Group` / `.Label`,
+`.Separator`, and submenus), with the same keyboard model (arrows, Home /
+End, typeahead, Escape, Tab) and RTL support.
+
+Keyboard: with focus inside the trigger area, Shift+F10 or the Menu key
+opens the menu next to the focused element and focuses its first item.
+On close, focus goes back to where it was.
+
+Right-click menus are hard to discover, and many touch screens and
+assistive technologies never open them, so offer the same actions
+somewhere visible too (a `Menu` button, a toolbar). Treat the context
+menu as a shortcut, never the only way.
+
+```tsx
+<ContextMenu>
+  <ContextMenu.Trigger>
+    <Card tabIndex={0}>Game film</Card>
+  </ContextMenu.Trigger>
+  <ContextMenu.Content>
+    <ContextMenu.Item onSelect={rename}>Rename</ContextMenu.Item>
+    <ContextMenu.Item tone="danger" onSelect={remove}>Delete</ContextMenu.Item>
+  </ContextMenu.Content>
+</ContextMenu>
 ```
 
 ### Props
@@ -4900,8 +4900,8 @@ menu as a shortcut, never the only way.
 
 Also exported as `ContextMenuTrigger`.
 
-The area that opens the menu: right-click, a touch long press, or
-Shift+F10 / the Menu key while focus is inside it. Make the area (or the
+The area that opens the menu: right-click, a touch long press, or
+Shift+F10 / the Menu key while focus is inside it. Make the area (or the
 items in it) focusable so keyboard users can reach the menu.
 
 - `children`: `ReactNode`. The area that answers right-clicks: plain content (wrapped in a `div`) or a single element.
@@ -4912,8 +4912,8 @@ items in it) focusable so keyboard users can reach the menu.
 
 Also exported as `ContextMenuContent`.
 
-The floating menu (`role="menu"`), opened at the pointer. Takes the same
-props as `Menu.Content`; `placement` is relative to the pointer, and
+The floating menu (`role="menu"`), opened at the pointer. Takes the same
+props as `Menu.Content`; `placement` is relative to the pointer, and
 flips and clamps to stay on screen. @see MenuContent
 
 - `children`: `ReactNode`. Menu items, groups, separators, and submenus.
@@ -5130,30 +5130,30 @@ import { Menu } from "@vjdesigns/vjdesigns-ui";
 
 Category: navigation · Storybook: Navigation/Menu
 
-A dropdown menu of actions or options, opened from a button (WAI-ARIA APG
-"Menu Button" and "Menu" patterns). Compose it from `Menu.Trigger`,
-`Menu.Content`, `Menu.Item`, `Menu.CheckboxItem`, `Menu.RadioGroup` /
-`Menu.RadioItem`, `Menu.Group` / `Menu.Label`, `Menu.Separator`, and
-submenus (`Menu.Sub`, `Menu.SubTrigger`, `Menu.SubContent`).
-
-Keyboard: Enter, Space, or ArrowDown on the trigger opens the menu and
-focuses the first item (ArrowUp: the last). Inside, ArrowUp/ArrowDown move
-(wrapping), Home/End jump, typing a character jumps to the next matching
-item, Enter/Space activates, ArrowRight opens a submenu and ArrowLeft
-closes it (mirrored in RTL), Escape closes the current level and returns
-focus to its trigger, and Tab closes the whole menu.
-
-Disabled items stay focusable (`aria-disabled="true"`) so keyboard and
-screen reader users can still discover them, but can't be activated.
-
-```tsx
-<Menu>
-  <Menu.Trigger>Actions</Menu.Trigger>
-  <Menu.Content>
-    <Menu.Item onSelect={edit}>Edit</Menu.Item>
-    <Menu.Item tone="danger" onSelect={remove}>Delete</Menu.Item>
-  </Menu.Content>
-</Menu>
+A dropdown menu of actions or options, opened from a button (WAI-ARIA APG
+"Menu Button" and "Menu" patterns). Compose it from `Menu.Trigger`,
+`Menu.Content`, `Menu.Item`, `Menu.CheckboxItem`, `Menu.RadioGroup` /
+`Menu.RadioItem`, `Menu.Group` / `Menu.Label`, `Menu.Separator`, and
+submenus (`Menu.Sub`, `Menu.SubTrigger`, `Menu.SubContent`).
+
+Keyboard: Enter, Space, or ArrowDown on the trigger opens the menu and
+focuses the first item (ArrowUp: the last). Inside, ArrowUp/ArrowDown move
+(wrapping), Home/End jump, typing a character jumps to the next matching
+item, Enter/Space activates, ArrowRight opens a submenu and ArrowLeft
+closes it (mirrored in RTL), Escape closes the current level and returns
+focus to its trigger, and Tab closes the whole menu.
+
+Disabled items stay focusable (`aria-disabled="true"`) so keyboard and
+screen reader users can still discover them, but can't be activated.
+
+```tsx
+<Menu>
+  <Menu.Trigger>Actions</Menu.Trigger>
+  <Menu.Content>
+    <Menu.Item onSelect={edit}>Edit</Menu.Item>
+    <Menu.Item tone="danger" onSelect={remove}>Delete</Menu.Item>
+  </Menu.Content>
+</Menu>
 ```
 
 ### Props
@@ -5169,8 +5169,8 @@ screen reader users can still discover them, but can't be activated.
 
 Also exported as `MenuTrigger`.
 
-The button that opens the menu. Adds `aria-haspopup="menu"`,
-`aria-expanded`, and `aria-controls`. Pass a single `Button`/`IconButton`
+The button that opens the menu. Adds `aria-haspopup="menu"`,
+`aria-expanded`, and `aria-controls`. Pass a single `Button`/`IconButton`
 to use it as-is, or plain content to get a default `Button`.
 
 - `variant`: `ButtonVariant` (default "solid"). Visual style. Inherits from a surrounding `ButtonGroup`.
@@ -6266,27 +6266,27 @@ import { HoverCard } from "@vjdesigns/vjdesigns-ui";
 
 Category: overlays · Storybook: Overlays/HoverCard
 
-A preview card that opens while the pointer rests on a link or button, or
-while it has keyboard focus: a player's profile behind their name, a page
-preview behind a link. Unlike `Tooltip`, the card can hold rich and
-interactive content (links, buttons).
-
-Meets WCAG 1.4.13: the pointer can move onto the card, it stays open
-while hovered or focused, and Escape closes it. Keyboard users get it
-too: focusing the trigger opens it, Tab moves into the card's links, and
-Tab past the last one continues to whatever follows the trigger.
-
-Touch screens have no hover, so the card never opens from a tap (the tap
-follows the link). Treat it as a preview: everything in it must also be
-reachable from the page the trigger leads to.
-
-```tsx
-<HoverCard>
-  <HoverCard.Trigger>
-    <Link href="/players/23">Jordan Reyes</Link>
-  </HoverCard.Trigger>
-  <HoverCard.Content>…profile…</HoverCard.Content>
-</HoverCard>
+A preview card that opens while the pointer rests on a link or button, or
+while it has keyboard focus: a player's profile behind their name, a page
+preview behind a link. Unlike `Tooltip`, the card can hold rich and
+interactive content (links, buttons).
+
+Meets WCAG 1.4.13: the pointer can move onto the card, it stays open
+while hovered or focused, and Escape closes it. Keyboard users get it
+too: focusing the trigger opens it, Tab moves into the card's links, and
+Tab past the last one continues to whatever follows the trigger.
+
+Touch screens have no hover, so the card never opens from a tap (the tap
+follows the link). Treat it as a preview: everything in it must also be
+reachable from the page the trigger leads to.
+
+```tsx
+<HoverCard>
+  <HoverCard.Trigger>
+    <Link href="/players/23">Jordan Reyes</Link>
+  </HoverCard.Trigger>
+  <HoverCard.Content>…profile…</HoverCard.Content>
+</HoverCard>
 ```
 
 ### Props
@@ -6310,7 +6310,7 @@ The link or button that opens the card. Its own role and name are left untouched
 
 Also exported as `HoverCardContent`.
 
-The floating card. Rendered in a portal, positioned against the trigger
+The floating card. Rendered in a portal, positioned against the trigger
 with flip and viewport clamping, and mounted only while open.
 
 - `placement`: `Placement` (default "bottom"). Preferred side and alignment. Flips to the other side when there isn't room.
@@ -6730,6 +6730,7 @@ is passed.
 - With Icons
 - Loading: The button keeps its width, sets `aria-busy`, ignores clicks, and stays focusable.
 - Disabled
+- Disabled but focusable: `aria-disabled="true"` instead of `disabled`: the button looks and acts unavailable (clicks are ignored) but stays focusable, so a tooltip or a countdown ("Resend code in 0:24") can still be reached and read.
 - As Router Link: `as` renders your router's link with the button's styling, and its props (here `to`) are typed. While disabled or loading it becomes a plain `<a aria-disabled="true">`, since a router link can't render without a destination.
 - As Link: Passing `href` renders an `<a>` with the same styling. Disabled links drop `href` and get `aria-disabled`.
 - Full Width
@@ -7064,12 +7065,12 @@ any part of it; themes nest (a blue area inside a purple app, a dark panel
 on a light page). Overlays opened inside (Popover, Menu, Modal, Tooltip,
 Toast, ...) render elsewhere in the page but keep this theme. For the whole
 page you can instead set the attributes on `<html>`:
-`<html data-theme="dark" data-brand="purple" data-accent="volt">`.
+`<html data-theme="dark" data-brand="purple" data-accent="lime">`.
 
 ### Props
 
 - `brand`: `ThemeBrand | BrandColor`. Brand palette for everything inside: buttons, links, focus rings, selection, and indicators all switch at once. Leave unset to inherit. A preset name, or any hex color (`"#e11d48"`) for a custom palette generated in both modes. One hex is used as given in the mode where it meets WCAG AA (dark colors in light mode, light colors in dark mode) and the other mode gets a matching shade; pass `{ light, dark }` to choose both. A color that fails contrast is shifted lighter or darker (same hue) just enough to pass, with a console warning in development.
-- `accent`: `ThemeAccent | BrandColor`. The accent: the energetic highlight on badges, switches, progress bars, sliders, steppers, and active navigation. Leave unset to inherit; with no accent set anywhere, each brand uses its own (a bright shade of its hue). `"volt"` for the original yellow-green, `"brand"` to go back to the brand's own inside an area with another accent, or any hex color for a custom accent. Accents always carry dark text, so a color too dark for that is lightened (same hue), with a console warning in development. An accent set here also holds inside nested brands.
+- `accent`: `ThemeAccent | BrandColor`. The accent: the energetic highlight on badges, switches, progress bars, sliders, steppers, and active navigation. Leave unset to inherit; with no accent set anywhere, each brand uses its own (a bright shade of its hue). `"lime"` for the original bright yellow-green, `"brand"` to go back to the brand's own inside an area with another accent, or any hex color for a custom accent. Accents always carry dark text, so a color too dark for that is lightened (same hue), with a console warning in development. An accent set here also holds inside nested brands.
 - `mode`: `ThemeMode`. Color mode for everything inside. Leave unset to inherit.
 - `fill`: `boolean` (default false). Paint the page background and text color of the theme on this wrapper (useful when `mode` differs from the page around it).
 - Plus every native `<div>` attribute (className, style, id, aria-*, data-*, event handlers), spread onto the root.
@@ -7084,7 +7085,7 @@ page you can instead set the attributes on `<html>`:
 - Custom colors per mode: `{ light, dark }` picks the color for each mode; each is still checked for contrast.
 - Custom colors in overlays: Overlays opened inside a custom-colored Theme keep the generated palette.
 - Theme builder: Pick any color and see the generated palette in both modes, with code to copy.
-- Accents: The accent (badges, switches, progress, sliders, active navigation) follows the brand by default: a bright shade of its hue, always with dark text. `accent="volt"` restores the original yellow-green, and any hex makes a custom accent (kept accessible: too-dark colors are lightened).
+- Accents: The accent (badges, switches, progress, sliders, active navigation) follows the brand by default: a bright shade of its hue, always with dark text. `accent="lime"` restores the original bright yellow-green, and any hex makes a custom accent (kept accessible: too-dark colors are lightened).
 - Accent nesting: An explicit accent holds inside nested brands; `accent="brand"` goes back to the nearest brand's own accent. Overlays keep the accent of their area.
 
 ## VisuallyHidden
@@ -7303,13 +7304,13 @@ During server rendering it returns `base` (or `fallback`).
 useDisclosure(initial = false, options: UseDisclosureOptions = {}): [opened: boolean, handlers: DisclosureHandlers]
 ```
 
-Open/closed state for anything that shows and hides (a Modal, Drawer,
-Popover, a collapsible section), with stable handlers.
-
-```tsx
-const [opened, { open, close }] = useDisclosure();
-<Button onClick={open}>Edit</Button>
-<Modal open={opened} onOpenChange={(next) => (next ? open() : close())}>…</Modal>
+Open/closed state for anything that shows and hides (a Modal, Drawer,
+Popover, a collapsible section), with stable handlers.
+
+```tsx
+const [opened, { open, close }] = useDisclosure();
+<Button onClick={open}>Edit</Button>
+<Modal open={opened} onOpenChange={(next) => (next ? open() : close())}>…</Modal>
 ```
 
 ## useToggle
@@ -7318,13 +7319,13 @@ const [opened, { open, close }] = useDisclosure();
 useToggle(values: readonly T[] = [false, true] as unknown as readonly T[]): [value: T, toggle: (value?: T) => void]
 ```
 
-Cycles through values: `[false, true]` by default (a boolean toggle), or
-any list (`["list", "grid"]`). `toggle()` moves to the next value (wrapping);
-`toggle(value)` jumps to one.
-
-```tsx
-const [view, toggleView] = useToggle(["list", "grid"] as const);
-<Button onClick={() => toggleView()}>Show {view === "list" ? "grid" : "list"}</Button>
+Cycles through values: `[false, true]` by default (a boolean toggle), or
+any list (`["list", "grid"]`). `toggle()` moves to the next value (wrapping);
+`toggle(value)` jumps to one.
+
+```tsx
+const [view, toggleView] = useToggle(["list", "grid"] as const);
+<Button onClick={() => toggleView()}>Show {view === "list" ? "grid" : "list"}</Button>
 ```
 
 ## useDebouncedCallback
@@ -7333,13 +7334,13 @@ const [view, toggleView] = useToggle(["list", "grid"] as const);
 useDebouncedCallback(callback: (...args: A) => void, wait: number, { leading = false, maxWait }: { leading?: boolean; maxWait?: number } = {}): ControlledCallback<A>
 ```
 
-A function that waits until calls stop for `wait` ms, then runs once with
-the last arguments. Always calls the latest `callback`; a pending call is
-dropped on unmount. Use it to save, search, or validate after typing pauses.
-
-```tsx
-const save = useDebouncedCallback((text: string) => api.saveDraft(text), 500);
-<Textarea onChange={(e) => save(e.target.value)} />
+A function that waits until calls stop for `wait` ms, then runs once with
+the last arguments. Always calls the latest `callback`; a pending call is
+dropped on unmount. Use it to save, search, or validate after typing pauses.
+
+```tsx
+const save = useDebouncedCallback((text: string) => api.saveDraft(text), 500);
+<Textarea onChange={(e) => save(e.target.value)} />
 ```
 
 ## useThrottledCallback
@@ -7348,12 +7349,12 @@ const save = useDebouncedCallback((text: string) => api.saveDraft(text), 500);
 useThrottledCallback(callback: (...args: A) => void, wait: number): ControlledCallback<A>
 ```
 
-A function that runs at most once every `wait` ms: the first call runs
-right away, and the last call made during the wait runs when it ends.
-Use it for scroll, resize, or pointer-move handlers.
-
-```tsx
-const track = useThrottledCallback((x: number) => setPosition(x), 100);
+A function that runs at most once every `wait` ms: the first call runs
+right away, and the last call made during the wait runs when it ends.
+Use it for scroll, resize, or pointer-move handlers.
+
+```tsx
+const track = useThrottledCallback((x: number) => setPosition(x), 100);
 ```
 
 ## useDebouncedValue
@@ -7362,13 +7363,13 @@ const track = useThrottledCallback((x: number) => setPosition(x), 100);
 useDebouncedValue(value: T, wait: number): [debounced: T, controls: { cancel: () => void; flush: () => void }]
 ```
 
-The value, updated only after it stops changing for `wait` ms. Use it to
-search or fetch as someone types, without a request per keystroke.
-
-```tsx
-const [query, setQuery] = useState("");
-const [debouncedQuery] = useDebouncedValue(query, 300);
-useEffect(() => { search(debouncedQuery); }, [debouncedQuery]);
+The value, updated only after it stops changing for `wait` ms. Use it to
+search or fetch as someone types, without a request per keystroke.
+
+```tsx
+const [query, setQuery] = useState("");
+const [debouncedQuery] = useDebouncedValue(query, 300);
+useEffect(() => { search(debouncedQuery); }, [debouncedQuery]);
 ```
 
 ## useInterval
@@ -7377,12 +7378,12 @@ useEffect(() => { search(debouncedQuery); }, [debouncedQuery]);
 useInterval(callback: () => void, delay: number | null): void
 ```
 
-Calls `callback` every `delay` ms while `delay` is a number; pass `null`
-to pause. Always calls the latest `callback`, and stops on unmount.
-
-```tsx
-const [running, setRunning] = useState(true);
-useInterval(() => setSeconds((s) => s + 1), running ? 1000 : null);
+Calls `callback` every `delay` ms while `delay` is a number; pass `null`
+to pause. Always calls the latest `callback`, and stops on unmount.
+
+```tsx
+const [running, setRunning] = useState(true);
+useInterval(() => setSeconds((s) => s + 1), running ? 1000 : null);
 ```
 
 ## useTimeout
@@ -7391,12 +7392,12 @@ useInterval(() => setSeconds((s) => s + 1), running ? 1000 : null);
 useTimeout(callback: () => void, delay: number | null): { clear: () => void; reset: () => void }
 ```
 
-Calls `callback` once, `delay` ms after mount (or after `delay` changes);
-pass `null` to not schedule it. Returns `clear` and `reset` (restart the
-wait).
-
-```tsx
-const { reset } = useTimeout(() => setSaved(false), 2000);
+Calls `callback` once, `delay` ms after mount (or after `delay` changes);
+pass `null` to not schedule it. Returns `clear` and `reset` (restart the
+wait).
+
+```tsx
+const { reset } = useTimeout(() => setSaved(false), 2000);
 ```
 
 ## usePrevious
@@ -7405,10 +7406,10 @@ const { reset } = useTimeout(() => setSaved(false), 2000);
 usePrevious(value: T): T | undefined
 ```
 
-The value from before its last change (undefined until it first changes).
-
-```tsx
-const previousCount = usePrevious(count);
+The value from before its last change (undefined until it first changes).
+
+```tsx
+const previousCount = usePrevious(count);
 ```
 
 ## useLocalStorage
@@ -7417,13 +7418,13 @@ const previousCount = usePrevious(count);
 useLocalStorage(key: string, defaultValue: T, options?: UseStorageOptions<T>)
 ```
 
-State saved in `localStorage` under `key`: it survives reloads and stays in
-sync across every component using the key and across browser tabs. Values
-are JSON by default. Returns `defaultValue` during server rendering, when
-nothing is stored, or when storage is blocked (it never throws).
-
-```tsx
-const [density, setDensity] = useLocalStorage("table-density", "comfortable");
+State saved in `localStorage` under `key`: it survives reloads and stays in
+sync across every component using the key and across browser tabs. Values
+are JSON by default. Returns `defaultValue` during server rendering, when
+nothing is stored, or when storage is blocked (it never throws).
+
+```tsx
+const [density, setDensity] = useLocalStorage("table-density", "comfortable");
 ```
 
 ## useSessionStorage
@@ -7440,14 +7441,14 @@ Like `useLocalStorage`, in `sessionStorage`: kept until the tab closes.
 useClipboard({ timeout = 2000 }: { timeout?: number } = {}): UseClipboardResult
 ```
 
-Copies text to the clipboard, with a `copied` flag that resets after
-`timeout` ms. Uses the Clipboard API, with a fallback for browsers or
-contexts that block it. Pair a visible "Copied" change with an
-announcement (`announce`) so screen readers hear it too.
-
-```tsx
-const { copy, copied } = useClipboard();
-<Button onClick={() => copy(inviteLink)}>{copied ? "Copied" : "Copy link"}</Button>
+Copies text to the clipboard, with a `copied` flag that resets after
+`timeout` ms. Uses the Clipboard API, with a fallback for browsers or
+contexts that block it. Pair a visible "Copied" change with an
+announcement (`announce`) so screen readers hear it too.
+
+```tsx
+const { copy, copied } = useClipboard();
+<Button onClick={() => copy(inviteLink)}>{copied ? "Copied" : "Copy link"}</Button>
 ```
 
 ## useHotkeys
@@ -7456,19 +7457,19 @@ const { copy, copied } = useClipboard();
 useHotkeys(hotkeys: HotkeyItem[], { enabled = true, target }: UseHotkeysOptions = {}): void
 ```
 
-Keyboard shortcuts for the whole page (or one element). `mod` is ⌘ on Mac
-and Ctrl elsewhere; separate alternatives with commas (`"mod+k, /"`).
-Shortcuts with ⌘, Ctrl, or Alt work everywhere; plain keys don't fire while
-typing in a text field. Show each shortcut to users (`Kbd`,
-`aria-keyshortcuts`) so it can be found, and avoid single-key shortcuts that
-screen readers or browsers use, or let users turn them off (WCAG 2.1.4).
-
-```tsx
-useHotkeys([
-  ["mod+k", () => setPaletteOpen(true)],
-  ["/", () => searchRef.current?.focus()],
-  ["shift+?", () => setHelpOpen(true)],
-]);
+Keyboard shortcuts for the whole page (or one element). `mod` is ⌘ on Mac
+and Ctrl elsewhere; separate alternatives with commas (`"mod+k, /"`).
+Shortcuts with ⌘, Ctrl, or Alt work everywhere; plain keys don't fire while
+typing in a text field. Show each shortcut to users (`Kbd`,
+`aria-keyshortcuts`) so it can be found, and avoid single-key shortcuts that
+screen readers or browsers use, or let users turn them off (WCAG 2.1.4).
+
+```tsx
+useHotkeys([
+  ["mod+k", () => setPaletteOpen(true)],
+  ["/", () => searchRef.current?.focus()],
+  ["shift+?", () => setHelpOpen(true)],
+]);
 ```
 
 ## useEventListener
@@ -7477,13 +7478,13 @@ useHotkeys([
 useEventListener(type: K, handler: (event: WindowEventMap[K]) => void, target?: ListenerTarget | RefObject<HTMLElement | null>, options?: boolean | AddEventListenerOptions): void
 ```
 
-Adds an event listener and removes it on unmount. Always calls the latest
-`handler` (no re-subscribing when it changes). `target` defaults to
-`window`; pass an element, `document`, or a ref.
-
-```tsx
-useEventListener("beforeunload", (e) => { if (dirty) e.preventDefault(); });
-useEventListener("scroll", onScroll, panelRef, { passive: true });
+Adds an event listener and removes it on unmount. Always calls the latest
+`handler` (no re-subscribing when it changes). `target` defaults to
+`window`; pass an element, `document`, or a ref.
+
+```tsx
+useEventListener("beforeunload", (e) => { if (dirty) e.preventDefault(); });
+useEventListener("scroll", onScroll, panelRef, { passive: true });
 ```
 
 ## useClickOutside
@@ -7492,14 +7493,14 @@ useEventListener("scroll", onScroll, panelRef, { passive: true });
 useClickOutside(handler: (event: Event) => void, { enabled = true, ignore = [] }: { enabled?: boolean; ignore?: Array<RefObject<HTMLElement | null> | HTMLElement | null> } = {}): RefObject<T | null>
 ```
 
-Calls `handler` when a pointer press or a focus move lands outside the
-returned ref's element (and outside any `ignore` elements). Use it for
-custom popups; the library's own overlays already close on outside
-presses, through the shared layer stack.
-
-```tsx
-const ref = useClickOutside<HTMLDivElement>(() => setOpen(false));
-<div ref={ref}>…</div>
+Calls `handler` when a pointer press or a focus move lands outside the
+returned ref's element (and outside any `ignore` elements). Use it for
+custom popups; the library's own overlays already close on outside
+presses, through the shared layer stack.
+
+```tsx
+const ref = useClickOutside<HTMLDivElement>(() => setOpen(false));
+<div ref={ref}>…</div>
 ```
 
 ## useIntersection
@@ -7508,13 +7509,13 @@ const ref = useClickOutside<HTMLDivElement>(() => setOpen(false));
 useIntersection({ root, rootMargin, threshold = 0, once = false, }: UseIntersectionOptions = {}): { ref: (node: T | null) => void; entry: IntersectionObserverEntry | null; isIntersecting: boolean }
 ```
 
-Whether an element is in view (IntersectionObserver). Attach the returned
-`ref`; read `isIntersecting` or the full `entry`. Returns false during
-server rendering.
-
-```tsx
-const { ref, isIntersecting } = useIntersection<HTMLDivElement>({ rootMargin: "200px", once: true });
-<div ref={ref}>{isIntersecting && <HeavyChart />}</div>
+Whether an element is in view (IntersectionObserver). Attach the returned
+`ref`; read `isIntersecting` or the full `entry`. Returns false during
+server rendering.
+
+```tsx
+const { ref, isIntersecting } = useIntersection<HTMLDivElement>({ rootMargin: "200px", once: true });
+<div ref={ref}>{isIntersecting && <HeavyChart />}</div>
 ```
 
 ## useElementSize
@@ -7523,13 +7524,13 @@ const { ref, isIntersecting } = useIntersection<HTMLDivElement>({ rootMargin: "2
 useElementSize(): { ref: (node: T | null) => void; width: number; height: number; }
 ```
 
-An element's content-box size, kept current as it resizes
-(ResizeObserver). Attach the returned `ref`. Both are 0 until measured
-(and during server rendering).
-
-```tsx
-const { ref, width } = useElementSize<HTMLDivElement>();
-<div ref={ref}>{width > 600 ? <WideLayout /> : <NarrowLayout />}</div>
+An element's content-box size, kept current as it resizes
+(ResizeObserver). Attach the returned `ref`. Both are 0 until measured
+(and during server rendering).
+
+```tsx
+const { ref, width } = useElementSize<HTMLDivElement>();
+<div ref={ref}>{width > 600 ? <WideLayout /> : <NarrowLayout />}</div>
 ```
 
 ## useHydrated
@@ -7538,13 +7539,13 @@ const { ref, width } = useElementSize<HTMLDivElement>();
 useHydrated(): boolean
 ```
 
-False during server rendering and hydration, true after. Use it to render
-browser-only content (dates in the user's time zone, `window` values)
-without a hydration mismatch.
-
-```tsx
-const hydrated = useHydrated();
-return <span>{hydrated ? new Date().toLocaleTimeString() : null}</span>;
+False during server rendering and hydration, true after. Use it to render
+browser-only content (dates in the user's time zone, `window` values)
+without a hydration mismatch.
+
+```tsx
+const hydrated = useHydrated();
+return <span>{hydrated ? new Date().toLocaleTimeString() : null}</span>;
 ```
 
 ## useReducedMotion
@@ -7553,8 +7554,8 @@ return <span>{hydrated ? new Date().toLocaleTimeString() : null}</span>;
 useReducedMotion(): boolean
 ```
 
-True when the user asked the system to reduce motion. The library's own
-transitions already respect it (through the duration tokens); use this for
+True when the user asked the system to reduce motion. The library's own
+transitions already respect it (through the duration tokens); use this for
 motion you drive from JavaScript (autoplay, scroll animations).
 
 ## useColorScheme
@@ -7563,7 +7564,7 @@ motion you drive from JavaScript (autoplay, scroll animations).
 useColorScheme(): "light" | "dark"
 ```
 
-The system color scheme, `"light"` or `"dark"`, kept in sync (`"light"`
+The system color scheme, `"light"` or `"dark"`, kept in sync (`"light"`
 during server rendering). To follow it, pass it to `Theme mode`.
 
 ## useOnline
@@ -7572,8 +7573,8 @@ during server rendering). To follow it, pass it to `Theme mode`.
 useOnline(): boolean
 ```
 
-Whether the browser has a network connection, kept in sync (true during
-server rendering). Pair a visible change (a Banner) with a polite
+Whether the browser has a network connection, kept in sync (true during
+server rendering). Pair a visible change (a Banner) with a polite
 announcement when it goes offline.
 
 ## useDocumentVisibility
@@ -7582,7 +7583,7 @@ announcement when it goes offline.
 useDocumentVisibility(): DocumentVisibilityState
 ```
 
-`"visible"` or `"hidden"` (another tab, minimized window), kept in sync.
+`"visible"` or `"hidden"` (another tab, minimized window), kept in sync.
 Use it to pause polling, video, or animations in the background.
 
 ## useViewportSize
@@ -7591,8 +7592,8 @@ Use it to pause polling, video, or animations in the background.
 useViewportSize(): { width: number; height: number }
 ```
 
-The viewport's width and height in CSS pixels, kept in sync (0 × 0 during
-server rendering). For layout decisions, prefer CSS or `useMediaQuery`;
+The viewport's width and height in CSS pixels, kept in sync (0 × 0 during
+server rendering). For layout decisions, prefer CSS or `useMediaQuery`;
 use this when you need the numbers.
 
 ## useVirtualizer
@@ -7601,27 +7602,27 @@ use this when you need the numbers.
 useVirtualizer({ count, scrollElement, estimateSize, overscan = 6, gap = 0, paddingStart = 0, paddingEnd = 0, initialCount = 10, }: UseVirtualizerOptions): Virtualizer
 ```
 
-Headless list virtualization: renders only the items in view (plus
-`overscan`), so lists of 100,000 rows stay fast. Works with variable
-heights by measuring rendered items, and is SSR-safe (the server renders
-the first `initialCount` items). `VirtualList` is built on it; use the
-hook directly for custom layouts.
-
-```tsx
-const scrollRef = useRef<HTMLDivElement>(null);
-const { virtualItems, totalSize, measureElement } = useVirtualizer({
-  count: rows.length, scrollElement: scrollRef, estimateSize: 48,
-});
-<div ref={scrollRef} style={{ overflow: "auto", height: 400 }}>
-  <div style={{ position: "relative", height: totalSize }}>
-    {virtualItems.map((item) => (
-      <div key={item.index} data-index={item.index} ref={measureElement}
-        style={{ position: "absolute", top: 0, width: "100%", transform: `translateY(${item.start}px)` }}>
-        {rows[item.index].name}
-      </div>
-    ))}
-  </div>
-</div>
+Headless list virtualization: renders only the items in view (plus
+`overscan`), so lists of 100,000 rows stay fast. Works with variable
+heights by measuring rendered items, and is SSR-safe (the server renders
+the first `initialCount` items). `VirtualList` is built on it; use the
+hook directly for custom layouts.
+
+```tsx
+const scrollRef = useRef<HTMLDivElement>(null);
+const { virtualItems, totalSize, measureElement } = useVirtualizer({
+  count: rows.length, scrollElement: scrollRef, estimateSize: 48,
+});
+<div ref={scrollRef} style={{ overflow: "auto", height: 400 }}>
+  <div style={{ position: "relative", height: totalSize }}>
+    {virtualItems.map((item) => (
+      <div key={item.index} data-index={item.index} ref={measureElement}
+        style={{ position: "absolute", top: 0, width: "100%", transform: `translateY(${item.start}px)` }}>
+        {rows[item.index].name}
+      </div>
+    ))}
+  </div>
+</div>
 ```
 
 ## useFillSlot
@@ -7648,7 +7649,7 @@ Pixel widths for each breakpoint, for use in JS.
 getLocaleDirection(locale: string): "ltr" | "rtl"
 ```
 
-The writing direction of a BCP 47 locale: `"rtl"` for Arabic, Hebrew,
+The writing direction of a BCP 47 locale: `"rtl"` for Arabic, Hebrew,
 Persian, Urdu, and other right-to-left languages and scripts, else `"ltr"`.
 
 ## plural
@@ -7657,11 +7658,11 @@ Persian, Urdu, and other right-to-left languages and scripts, else `"ltr"`.
 plural(locale: string): PluralFn
 ```
 
-Plural selector bound to a locale:
-
-```ts
-const p = plural("ru");
-p(3, { one: "# файл", few: "# файла", many: "# файлов", other: "# файла" }); // "3 файла"
+Plural selector bound to a locale:
+
+```ts
+const p = plural("ru");
+p(3, { one: "# файл", few: "# файла", many: "# файлов", other: "# файла" }); // "3 файла"
 ```
 
 ## en
@@ -7678,7 +7679,7 @@ English: the default messages, and the template for every other locale.
 mergeMessages(base: Messages, override: PartialMessages | undefined): Messages
 ```
 
-Overlays partial messages on a complete set: missing strings keep the
+Overlays partial messages on a complete set: missing strings keep the
 base value. Functions and arrays replace whole.
 
 ## resolveElement
@@ -7822,12 +7823,12 @@ Locks page scrolling. Returns a function that releases this lock (safe to call t
 getHotkeyHandler(hotkeys: HotkeyItem[])
 ```
 
-A `keydown` handler for one element (an editor, a list): pass it to
-`onKeyDown`. Same shortcut format as `useHotkeys`; shortcuts fire while
-typing in that element.
-
-```tsx
-<Textarea onKeyDown={getHotkeyHandler([["mod+enter", send]])} />
+A `keydown` handler for one element (an editor, a list): pass it to
+`onKeyDown`. Same shortcut format as `useHotkeys`; shortcuts fire while
+typing in that element.
+
+```tsx
+<Textarea onKeyDown={getHotkeyHandler([["mod+enter", send]])} />
 ```
 
 ## cx
@@ -8029,13 +8030,21 @@ createBrandPalette(color: BrandColor): BrandPalette
 Builds an accessible brand palette, for both modes, from any hex color.
 Throws a TypeError for anything that isn't `#rgb` or `#rrggbb`.
 
+## LIME_ACCENT
+
+```ts
+LIME_ACCENT: AccentPalette
+```
+
+The lime accent (`accent="lime"`, and the black brand's accent): the original bright yellow-green.
+
 ## VOLT_ACCENT
 
 ```ts
-VOLT_ACCENT: AccentPalette
+VOLT_ACCENT
 ```
 
-The original volt accent (`accent="volt"`, and the black brand's accent).
+@deprecated Renamed to `LIME_ACCENT`.
 
 ## createAccentPalette
 
@@ -8056,7 +8065,7 @@ brandAccent(primary: string): AccentPalette
 
 The default accent of a brand: a bright, lighter shade of its primary
 hue (blue gets a sky blue, purple a lavender, gold an amber, green a
-mint). Colorless brands (black) keep the volt.
+mint). Colorless brands (black) keep the lime.
 
 ## accentPaletteVars
 
@@ -8108,9 +8117,9 @@ Then use `<html data-brand="acme">`. Names are letters, digits, and dashes.
 isEmail(value: string, { requireTld = true }: EmailOptions = {}): boolean
 ```
 
-True for an email address in the usual format: the HTML spec's rules
-(what browsers check for `type="email"`), plus no leading, trailing, or
-doubled dots before the `@`, length limits (64 before the `@`, 254 in all),
+True for an email address in the usual format: the HTML spec's rules
+(what browsers check for `type="email"`), plus no leading, trailing, or
+doubled dots before the `@`, length limits (64 before the `@`, 254 in all),
 and, by default, a top-level domain.
 
 ## isIPv4
@@ -8119,7 +8128,7 @@ and, by default, a top-level domain.
 isIPv4(value: string): boolean
 ```
 
-True for a dotted IPv4 address: four numbers 0-255 (`192.168.0.1`), no
+True for a dotted IPv4 address: four numbers 0-255 (`192.168.0.1`), no
 leading zeros (`010.0.0.1` is ambiguous, so it's rejected).
 
 ## isIPv6
@@ -8128,9 +8137,9 @@ leading zeros (`010.0.0.1` is ambiguous, so it's rejected).
 isIPv6(value: string): boolean
 ```
 
-True for an IPv6 address: eight groups of 1-4 hex digits, with `::`
-standing for one or more zero groups (once at most), and an optional
-IPv4 tail (`::ffff:192.168.0.1`). Zone ids (`%eth0`) and brackets aren't
+True for an IPv6 address: eight groups of 1-4 hex digits, with `::`
+standing for one or more zero groups (once at most), and an optional
+IPv4 tail (`::ffff:192.168.0.1`). Zone ids (`%eth0`) and brackets aren't
 accepted.
 
 ## isIP
@@ -8163,10 +8172,10 @@ True when a value counts as empty (nothing, blank text, or an empty file input).
 rules
 ```
 
-Rule helpers for `useFormValidation`, with messages from the locale:
-
-```ts
-useFormValidation({ rules: { email: rules.email(), server: rules.ip({ version: 4 }) } });
+Rule helpers for `useFormValidation`, with messages from the locale:
+
+```ts
+useFormValidation({ rules: { email: rules.email(), server: rules.ip({ version: 4 }) } });
 ```
 
 ## detectPlatform
@@ -8183,8 +8192,8 @@ The current platform from the browser (`"windows"` during server rendering).
 parseHotkey(hotkey: string, platform: HotkeyPlatform = detectPlatform()): ParsedHotkey | null
 ```
 
-Parses a shortcut like `"mod+k"`, `"shift+mod+p"`, `"ctrl+/"`, or
-`"escape"` into modifiers and a key. `mod` is ⌘ on Mac and Ctrl
+Parses a shortcut like `"mod+k"`, `"shift+mod+p"`, `"ctrl+/"`, or
+`"escape"` into modifiers and a key. `mod` is ⌘ on Mac and Ctrl
 elsewhere. Returns null when there is no key.
 
 ## matchesHotkey
@@ -8217,6 +8226,6 @@ True when the element accepts typed text, so a global hotkey must not steal its
 copyToClipboard(text: string): Promise<void>
 ```
 
-Copies text to the clipboard: the async Clipboard API when it's allowed,
-else a hidden-textarea fallback (insecure contexts, denied permission,
+Copies text to the clipboard: the async Clipboard API when it's allowed,
+else a hidden-textarea fallback (insecure contexts, denied permission,
 older browsers). Focus returns to where it was. Rejects when both fail.