@vjdesigns/vjdesigns-ui 1.5.0 → 2.1.0

package/dist/ai/llms-full.txt

@@ -1,511 +1,511 @@
-# @vjdesigns/vjdesigns-ui 1.5.0: full reference
+# @vjdesigns/vjdesigns-ui 2.0.0: full reference
 
 > Accessible React 19 component library: WCAG 2.2 AA verified (axe on every story, a contrast check on every color pair), 31 languages with right-to-left support, themeable with any brand color (auto-adjusted to stay accessible), tree-shakable, no runtime dependencies besides React.
 
 - 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.
 
 # Guide: Installation
 
-Install the package along with React and React DOM (version 18 or 19), which the components need in order to render:
-
-```bash
-npm install @vjdesigns/vjdesigns-ui react react-dom
-```
-
-If your project already uses React, you only need the first package:
-
-```bash
-npm install @vjdesigns/vjdesigns-ui
-```
-
-### Import the styles
-
-The component styles and shared design tokens ship as a separate stylesheet. Import it **once** at your app's entry point, or the components will render unstyled.
-
-**React:** in `main.tsx` (or `App.tsx`)
-
-```ts
-import "@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css";
-```
-
-**Angular:** add it to the `styles` array in `angular.json`
-
-```json
-"styles": [
-  "node_modules/@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css",
-  "src/styles.css"
-]
-```
-
-**Vue:** in `main.ts`
-
-```ts
-import "@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css";
+Install the package along with React and React DOM (version 18 or 19), which the components need in order to render:
+
+```bash
+npm install @vjdesigns/vjdesigns-ui react react-dom
+```
+
+If your project already uses React, you only need the first package:
+
+```bash
+npm install @vjdesigns/vjdesigns-ui
+```
+
+### Import the styles
+
+The component styles and shared design tokens ship as a separate stylesheet. Import it **once** at your app's entry point, or the components will render unstyled.
+
+**React:** in `main.tsx` (or `App.tsx`)
+
+```ts
+import "@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css";
+```
+
+**Angular:** add it to the `styles` array in `angular.json`
+
+```json
+"styles": [
+  "node_modules/@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css",
+  "src/styles.css"
+]
+```
+
+**Vue:** in `main.ts`
+
+```ts
+import "@vjdesigns/vjdesigns-ui/dist/vjdesigns-ui.css";
 ```
 
 # Guide: Usage
 
-The components are built with React. You can use them directly in a React project. In Angular or Vue, you mount them inside a small wrapper component, as shown below.
-
-### React
-
-```tsx
-import { useState } from "react";
-import { Button, CheckBox } from "@vjdesigns/vjdesigns-ui";
-
-export function SignupForm() {
-  const [accepted, setAccepted] = useState(false);
-
-  return (
-    <form>
-      <CheckBox
-        label="Accept terms"
-        checked={accepted}
-        onCheckedChange={setAccepted}
-      />
-      <Button
-        variant="solid"
-        tone="primary"
-        size="md"
-        disabled={!accepted}
-        onClick={() => console.log("Submitted")}
-      >
-        Submit
-      </Button>
-    </form>
-  );
-}
-```
-
-### Angular
-
-Make a standalone wrapper that renders the React component into its host element. The wrapper uses `createElement`, so you don't need to change your JSX or TSX settings.
-
-```ts
-// vj-button.component.ts
-import {
-  AfterViewInit,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnDestroy,
-  Output,
-  ViewChild,
-} from "@angular/core";
-import { createElement, type MouseEvent as ReactMouseEvent, type ReactElement } from "react";
-import { createRoot, Root } from "react-dom/client";
-import {
-  Button,
-  type ButtonProps,
-  type ButtonVariant,
-  type Size,
-  type Tone,
-} from "@vjdesigns/vjdesigns-ui";
-
-// Button has overloaded types (for `href` and `as`). Narrowing it here lets createElement type-check.
-const ReactButton = Button as (props: ButtonProps) => ReactElement;
-
-@Component({
-  selector: "vj-button",
-  standalone: true,
-  template: `<span #host></span>`,
-})
-export class VjButtonComponent implements AfterViewInit, OnChanges, OnDestroy {
-  @ViewChild("host", { static: true }) host!: ElementRef<HTMLElement>;
-
-  @Input() label = "";
-  @Input() variant: ButtonVariant = "solid";
-  @Input() tone: Tone = "primary";
-  @Input() size: Size = "md";
-  @Input() disabled = false;
-  @Output() clicked = new EventEmitter<MouseEvent>();
-
-  private root?: Root;
-
-  ngAfterViewInit() {
-    this.root = createRoot(this.host.nativeElement);
-    this.render();
-  }
-
-  ngOnChanges() {
-    this.render();
-  }
-
-  ngOnDestroy() {
-    this.root?.unmount();
-  }
-
-  private render() {
-    this.root?.render(
-      createElement(
-        ReactButton,
-        {
-          variant: this.variant,
-          tone: this.tone,
-          size: this.size,
-          disabled: this.disabled,
-          onClick: (event: ReactMouseEvent) => this.clicked.emit(event.nativeEvent),
-        },
-        this.label // the button's text is passed as children
-      )
-    );
-  }
-}
-```
-
-Import the wrapper wherever you need it:
-
-```ts
-// app.component.ts
-import { Component } from "@angular/core";
-import { VjButtonComponent } from "./vj-button.component";
-
-@Component({
-  selector: "app-root",
-  standalone: true,
-  imports: [VjButtonComponent],
-  template: `<vj-button label="Submit" tone="primary" (clicked)="onSubmit()" />`,
-})
-export class AppComponent {
-  onSubmit() {
-    console.log("Submitted");
-  }
-}
-```
-
-### Vue 3
-
-Make a wrapper component that mounts the React component when it loads and re-renders it whenever its props change.
-
-```vue
-<!-- VjButton.vue -->
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
-import { createElement, type MouseEvent as ReactMouseEvent, type ReactElement } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import {
-  Button,
-  type ButtonProps,
-  type ButtonVariant,
-  type Size,
-  type Tone,
-} from "@vjdesigns/vjdesigns-ui";
-
-// Button has overloaded types (for `href` and `as`). Narrowing it here lets createElement type-check.
-const ReactButton = Button as (props: ButtonProps) => ReactElement;
-
-const props = withDefaults(
-  defineProps<{
-    label: string;
-    variant?: ButtonVariant;
-    tone?: Tone;
-    size?: Size;
-    disabled?: boolean;
-  }>(),
-  { variant: "solid", tone: "primary", size: "md", disabled: false }
-);
-
-const emit = defineEmits<{ click: [event: MouseEvent] }>();
-
-const host = ref<HTMLElement | null>(null);
-let root: Root | undefined;
-
-function render() {
-  root?.render(
-    createElement(
-      ReactButton,
-      {
-        variant: props.variant,
-        tone: props.tone,
-        size: props.size,
-        disabled: props.disabled,
-        onClick: (event: ReactMouseEvent) => emit("click", event.nativeEvent),
-      },
-      props.label // the button's text is passed as children
-    )
-  );
-}
-
-onMounted(() => {
-  root = createRoot(host.value!);
-  render();
-});
-
-watch(() => ({ ...props }), render);
-
-onBeforeUnmount(() => root?.unmount());
-</script>
-
-<template>
-  <span ref="host" />
-</template>
-```
-
-Use it like any other Vue component:
-
-```vue
-<script setup lang="ts">
-import VjButton from "./VjButton.vue";
-
-const onSubmit = () => console.log("Submitted");
-</script>
-
-<template>
-  <VjButton label="Submit" tone="primary" @click="onSubmit" />
-</template>
-```
-
+The components are built with React. You can use them directly in a React project. In Angular or Vue, you mount them inside a small wrapper component, as shown below.
+
+### React
+
+```tsx
+import { useState } from "react";
+import { Button, CheckBox } from "@vjdesigns/vjdesigns-ui";
+
+export function SignupForm() {
+  const [accepted, setAccepted] = useState(false);
+
+  return (
+    <form>
+      <CheckBox
+        label="Accept terms"
+        checked={accepted}
+        onCheckedChange={setAccepted}
+      />
+      <Button
+        variant="solid"
+        tone="primary"
+        size="md"
+        disabled={!accepted}
+        onClick={() => console.log("Submitted")}
+      >
+        Submit
+      </Button>
+    </form>
+  );
+}
+```
+
+### Angular
+
+Make a standalone wrapper that renders the React component into its host element. The wrapper uses `createElement`, so you don't need to change your JSX or TSX settings.
+
+```ts
+// vj-button.component.ts
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  ViewChild,
+} from "@angular/core";
+import { createElement, type MouseEvent as ReactMouseEvent, type ReactElement } from "react";
+import { createRoot, Root } from "react-dom/client";
+import {
+  Button,
+  type ButtonProps,
+  type ButtonVariant,
+  type Size,
+  type Tone,
+} from "@vjdesigns/vjdesigns-ui";
+
+// Button has overloaded types (for `href` and `as`). Narrowing it here lets createElement type-check.
+const ReactButton = Button as (props: ButtonProps) => ReactElement;
+
+@Component({
+  selector: "vj-button",
+  standalone: true,
+  template: `<span #host></span>`,
+})
+export class VjButtonComponent implements AfterViewInit, OnChanges, OnDestroy {
+  @ViewChild("host", { static: true }) host!: ElementRef<HTMLElement>;
+
+  @Input() label = "";
+  @Input() variant: ButtonVariant = "solid";
+  @Input() tone: Tone = "primary";
+  @Input() size: Size = "md";
+  @Input() disabled = false;
+  @Output() clicked = new EventEmitter<MouseEvent>();
+
+  private root?: Root;
+
+  ngAfterViewInit() {
+    this.root = createRoot(this.host.nativeElement);
+    this.render();
+  }
+
+  ngOnChanges() {
+    this.render();
+  }
+
+  ngOnDestroy() {
+    this.root?.unmount();
+  }
+
+  private render() {
+    this.root?.render(
+      createElement(
+        ReactButton,
+        {
+          variant: this.variant,
+          tone: this.tone,
+          size: this.size,
+          disabled: this.disabled,
+          onClick: (event: ReactMouseEvent) => this.clicked.emit(event.nativeEvent),
+        },
+        this.label // the button's text is passed as children
+      )
+    );
+  }
+}
+```
+
+Import the wrapper wherever you need it:
+
+```ts
+// app.component.ts
+import { Component } from "@angular/core";
+import { VjButtonComponent } from "./vj-button.component";
+
+@Component({
+  selector: "app-root",
+  standalone: true,
+  imports: [VjButtonComponent],
+  template: `<vj-button label="Submit" tone="primary" (clicked)="onSubmit()" />`,
+})
+export class AppComponent {
+  onSubmit() {
+    console.log("Submitted");
+  }
+}
+```
+
+### Vue 3
+
+Make a wrapper component that mounts the React component when it loads and re-renders it whenever its props change.
+
+```vue
+<!-- VjButton.vue -->
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { createElement, type MouseEvent as ReactMouseEvent, type ReactElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import {
+  Button,
+  type ButtonProps,
+  type ButtonVariant,
+  type Size,
+  type Tone,
+} from "@vjdesigns/vjdesigns-ui";
+
+// Button has overloaded types (for `href` and `as`). Narrowing it here lets createElement type-check.
+const ReactButton = Button as (props: ButtonProps) => ReactElement;
+
+const props = withDefaults(
+  defineProps<{
+    label: string;
+    variant?: ButtonVariant;
+    tone?: Tone;
+    size?: Size;
+    disabled?: boolean;
+  }>(),
+  { variant: "solid", tone: "primary", size: "md", disabled: false }
+);
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>();
+
+const host = ref<HTMLElement | null>(null);
+let root: Root | undefined;
+
+function render() {
+  root?.render(
+    createElement(
+      ReactButton,
+      {
+        variant: props.variant,
+        tone: props.tone,
+        size: props.size,
+        disabled: props.disabled,
+        onClick: (event: ReactMouseEvent) => emit("click", event.nativeEvent),
+      },
+      props.label // the button's text is passed as children
+    )
+  );
+}
+
+onMounted(() => {
+  root = createRoot(host.value!);
+  render();
+});
+
+watch(() => ({ ...props }), render);
+
+onBeforeUnmount(() => root?.unmount());
+</script>
+
+<template>
+  <span ref="host" />
+</template>
+```
+
+Use it like any other Vue component:
+
+```vue
+<script setup lang="ts">
+import VjButton from "./VjButton.vue";
+
+const onSubmit = () => console.log("Submitted");
+</script>
+
+<template>
+  <VjButton label="Submit" tone="primary" @click="onSubmit" />
+</template>
+```
+
 > **Tip:** Wrap `CheckBox` and any other component the same way. Pass its props into `createElement`, and send its callbacks back out as Angular outputs or Vue emits. For `CheckBox`, that means sending `onCheckedChange` back out.
 
 # Guide: Theming
 
-Wrap any part of your app in `Theme` to set the color mode, brand palette, and accent for everything inside it:
-
-```tsx
-import { Theme, Button } from "@vjdesigns/vjdesigns-ui";
-
-<Theme mode="dark" brand="purple" fill>
-  <Button>Dark, purple button</Button>
-</Theme>
-```
-
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `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. |
-| `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">
-```
-
-### Accent color
-
-The accent is the energetic highlight: badges, switches, progress bars, sliders, steppers, and the active link in the Navbar. By default it follows the brand, as a bright shade of the brand's own color, so it always fits:
-
-| Brand | Default accent |
-| --- | --- |
-| `blue` (default) | sky blue `#76c7ff` |
-| `purple` | lavender `#c0b0ff` |
-| `gold` | amber `#f5ad5f` |
-| `green` | mint `#72d4ad` |
-| `black` | volt `#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="#ff6b00">…</Theme>   // any color
-<Theme accent="brand">…</Theme>     // back to the brand's own, inside an area with another accent
-```
-
-Accents always carry dark text. A color too dark for that is lightened (same hue) just enough to meet WCAG AA, with a warning in development. An accent you set also holds inside nested brands. In CSS, `accentCss("name", "#ff6b00")` generates a `[data-accent="name"]` rule, like `brandCss` below.
-
-### Custom brand colors
-
-Pass any hex color as `brand` and a full palette is generated for both modes:
-
-```tsx
-<Theme brand="#e11d48">…</Theme>
-<Theme brand={{ light: "#4338ca", dark: "#f472b6" }}>…</Theme>
-```
-
-Every generated palette meets WCAG 2.2 AA. A single color is used exactly as given in the mode where it has enough contrast (dark colors in light mode, light colors in dark mode), and the other mode gets a matching shade of the same hue. If a color doesn't have enough contrast (for example, a mid-tone that fails in both modes), its lightness is shifted just enough to pass, and a warning is logged in development.
-
-To define a brand in CSS instead (for the whole page, applied before any JavaScript runs), generate a stylesheet rule with `brandCss`:
-
-```ts
-import { brandCss } from "@vjdesigns/vjdesigns-ui";
-
-brandCss("acme", "#e11d48"); // '[data-brand="acme"] { --brand-light-primary: … }'
-```
-
+Wrap any part of your app in `Theme` to set the color mode, brand palette, and accent for everything inside it:
+
+```tsx
+import { Theme, Button } from "@vjdesigns/vjdesigns-ui";
+
+<Theme mode="dark" brand="purple" fill>
+  <Button>Dark, purple button</Button>
+</Theme>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `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" | "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="lime">
+```
+
+### Accent color
+
+The accent is the energetic highlight: badges, switches, progress bars, sliders, steppers, and the active link in the Navbar. By default it follows the brand, as a bright shade of the brand's own color, so it always fits:
+
+| Brand | Default accent |
+| --- | --- |
+| `blue` (default) | sky blue `#76c7ff` |
+| `purple` | lavender `#c0b0ff` |
+| `gold` | amber `#f5ad5f` |
+| `green` | mint `#72d4ad` |
+| `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="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
+```
+
+Accents always carry dark text. A color too dark for that is lightened (same hue) just enough to meet WCAG AA, with a warning in development. An accent you set also holds inside nested brands. In CSS, `accentCss("name", "#ff6b00")` generates a `[data-accent="name"]` rule, like `brandCss` below.
+
+### Custom brand colors
+
+Pass any hex color as `brand` and a full palette is generated for both modes:
+
+```tsx
+<Theme brand="#e11d48">…</Theme>
+<Theme brand={{ light: "#4338ca", dark: "#f472b6" }}>…</Theme>
+```
+
+Every generated palette meets WCAG 2.2 AA. A single color is used exactly as given in the mode where it has enough contrast (dark colors in light mode, light colors in dark mode), and the other mode gets a matching shade of the same hue. If a color doesn't have enough contrast (for example, a mid-tone that fails in both modes), its lightness is shifted just enough to pass, and a warning is logged in development.
+
+To define a brand in CSS instead (for the whole page, applied before any JavaScript runs), generate a stylesheet rule with `brandCss`:
+
+```ts
+import { brandCss } from "@vjdesigns/vjdesigns-ui";
+
+brandCss("acme", "#e11d48"); // '[data-brand="acme"] { --brand-light-primary: … }'
+```
+
 Add the rule to your stylesheet and use `<html data-brand="acme">`. `createBrandPalette(color)` returns the generated colors as an object, if you need them directly.
 
 # Guide: Languages
 
-Components have built-in text: button names like "Close" and "Next page", screen-reader announcements like "3 results available", validation messages, and date formats. Wrap your app in `LocaleProvider` to show all of it in another language:
-
-```tsx
-import { LocaleProvider } from "@vjdesigns/vjdesigns-ui";
-import es from "@vjdesigns/vjdesigns-ui/locales/es";
-
-<LocaleProvider locale="es" messages={es}>
-  <App />
-</LocaleProvider>
-```
-
-`LocaleProvider` sets:
-
-- **Built-in text** for every component, from `messages`.
-- **Dates and numbers** in the locale's format (`23/10/2026`, `1.234,5`), and plurals that follow the language's rules.
-- **Writing direction**: Arabic, Hebrew, Persian, and Urdu get `dir="rtl"`, and layouts and arrow keys mirror.
-- **`lang`** on its wrapper, so screen readers pronounce the text correctly. Popups (menus, dialogs, tooltips) keep the language of the area that opened them.
-
-Each locale is a separate import, so your app only downloads the languages it uses. Without a `LocaleProvider`, components use English text and the browser's date and number format.
-
-This library only translates its own built-in text. Text your app passes in, like `<Button>Save</Button>`, is your app's content: translate it with your app's i18n library (react-i18next, FormatJS, and so on).
-
-### What gets translated
-
-The language is never picked automatically from where the user lives or their browser settings. Your app chooses it by rendering a `LocaleProvider`. For example, with `<LocaleProvider locale="de" messages={de}>`:
-
-| | Translated? |
-| --- | --- |
-| Text your app passes in, like `<Button>Save</Button>` | No: your app translates it |
-| Built-in names, like "Close", "Next page", "Clear search" | Yes: "Schließen", "Nächste Seite", "Suche löschen" |
-| Screen-reader announcements, like "3 results available" | Yes: "3 Ergebnisse verfügbar" |
-| Validation messages, empty states, file-upload prompts | Yes |
-| Dates and numbers | Yes: "23.10.2026", "4,5" |
-
-To follow the user's browser language, pass it yourself: `locale={navigator.language}` together with the matching `messages` (see [Switching language at runtime](#switching-language-at-runtime)).
-
-### Bundled languages
-
-`ar` Arabic · `bn` Bengali · `cs` Czech · `da` Danish · `de` German · `el` Greek · `es` Spanish · `fa` Persian · `fi` Finnish · `fr` French · `he` Hebrew · `hi` Hindi · `hu` Hungarian · `id` Indonesian · `it` Italian · `ja` Japanese · `ko` Korean · `nb` Norwegian Bokmål · `nl` Dutch · `pl` Polish · `pt-BR` Portuguese (Brazil) · `ro` Romanian · `ru` Russian · `sv` Swedish · `th` Thai · `tr` Turkish · `uk` Ukrainian · `ur` Urdu · `vi` Vietnamese · `zh-Hans` Chinese (Simplified) · `zh-Hant` Chinese (Traditional), plus English (the default).
-
-The translations are machine-generated and haven't been reviewed by native speakers yet. If you find a wrong or awkward phrase, override it (below) and report it so the bundled locale can be fixed.
-
-### Changing a few strings
-
-Pass only the strings you want to change. Everything else falls back to the outer provider's language (English at the top):
-
-```tsx
-<LocaleProvider locale="en-GB" messages={{ pagination: { next: "Onwards" } }}>
-```
-
-Providers nest, so an inner provider can switch the language for one part of the page. Per-component props such as `clearLabel` or `labels` still win over the provider.
-
-### Other languages
-
-For a language that isn't bundled, write a complete messages object. TypeScript flags any missing string. Use English as the template:
-
-```ts
-import { en, plural, type Messages } from "@vjdesigns/vjdesigns-ui";
-
-const p = plural("sw");
-export const sw: Messages = {
-  ...en,
-  pagination: { ...en.pagination, next: "Ukurasa unaofuata", previous: "Ukurasa uliopita" },
-  searchInput: {
-    ...en.searchInput,
-    results: (count) => p(count, { "=0": "Hakuna matokeo", one: "Tokeo #", other: "Matokeo #" }),
-  },
-  // ...
-};
-```
-
-`plural(locale)` picks the right plural form for any language (`#` is the formatted number).
-
-### Switching language at runtime
-
-List the languages your app offers as loaders, so each one is downloaded only when picked:
-
-```tsx
-import { LocaleProvider, type Messages } from "@vjdesigns/vjdesigns-ui";
-
-const loaders: Record<string, () => Promise<{ default: Messages }>> = {
-  es: () => import("@vjdesigns/vjdesigns-ui/locales/es"),
-  fr: () => import("@vjdesigns/vjdesigns-ui/locales/fr"),
-  ar: () => import("@vjdesigns/vjdesigns-ui/locales/ar"),
-};
-
-function App({ lang }: { lang: string }) {
-  const [messages, setMessages] = useState<Messages>();
-  useEffect(() => {
-    const load = loaders[lang];
-    if (load) load().then((mod) => setMessages(mod.default));
-    else setMessages(undefined); // English
-  }, [lang]);
-  // Until a language loads, the previous one (or English) shows.
-  return <LocaleProvider locale={lang} messages={messages}>…</LocaleProvider>;
-}
-```
-
+Components have built-in text: button names like "Close" and "Next page", screen-reader announcements like "3 results available", validation messages, and date formats. Wrap your app in `LocaleProvider` to show all of it in another language:
+
+```tsx
+import { LocaleProvider } from "@vjdesigns/vjdesigns-ui";
+import es from "@vjdesigns/vjdesigns-ui/locales/es";
+
+<LocaleProvider locale="es" messages={es}>
+  <App />
+</LocaleProvider>
+```
+
+`LocaleProvider` sets:
+
+- **Built-in text** for every component, from `messages`.
+- **Dates and numbers** in the locale's format (`23/10/2026`, `1.234,5`), and plurals that follow the language's rules.
+- **Writing direction**: Arabic, Hebrew, Persian, and Urdu get `dir="rtl"`, and layouts and arrow keys mirror.
+- **`lang`** on its wrapper, so screen readers pronounce the text correctly. Popups (menus, dialogs, tooltips) keep the language of the area that opened them.
+
+Each locale is a separate import, so your app only downloads the languages it uses. Without a `LocaleProvider`, components use English text and the browser's date and number format.
+
+This library only translates its own built-in text. Text your app passes in, like `<Button>Save</Button>`, is your app's content: translate it with your app's i18n library (react-i18next, FormatJS, and so on).
+
+### What gets translated
+
+The language is never picked automatically from where the user lives or their browser settings. Your app chooses it by rendering a `LocaleProvider`. For example, with `<LocaleProvider locale="de" messages={de}>`:
+
+| | Translated? |
+| --- | --- |
+| Text your app passes in, like `<Button>Save</Button>` | No: your app translates it |
+| Built-in names, like "Close", "Next page", "Clear search" | Yes: "Schließen", "Nächste Seite", "Suche löschen" |
+| Screen-reader announcements, like "3 results available" | Yes: "3 Ergebnisse verfügbar" |
+| Validation messages, empty states, file-upload prompts | Yes |
+| Dates and numbers | Yes: "23.10.2026", "4,5" |
+
+To follow the user's browser language, pass it yourself: `locale={navigator.language}` together with the matching `messages` (see [Switching language at runtime](#switching-language-at-runtime)).
+
+### Bundled languages
+
+`ar` Arabic · `bn` Bengali · `cs` Czech · `da` Danish · `de` German · `el` Greek · `es` Spanish · `fa` Persian · `fi` Finnish · `fr` French · `he` Hebrew · `hi` Hindi · `hu` Hungarian · `id` Indonesian · `it` Italian · `ja` Japanese · `ko` Korean · `nb` Norwegian Bokmål · `nl` Dutch · `pl` Polish · `pt-BR` Portuguese (Brazil) · `ro` Romanian · `ru` Russian · `sv` Swedish · `th` Thai · `tr` Turkish · `uk` Ukrainian · `ur` Urdu · `vi` Vietnamese · `zh-Hans` Chinese (Simplified) · `zh-Hant` Chinese (Traditional), plus English (the default).
+
+The translations are machine-generated and haven't been reviewed by native speakers yet. If you find a wrong or awkward phrase, override it (below) and report it so the bundled locale can be fixed. (Working on the library itself? See [Translating built-in text](#translating-built-in-text).)
+
+### Changing a few strings
+
+Pass only the strings you want to change. Everything else falls back to the outer provider's language (English at the top):
+
+```tsx
+<LocaleProvider locale="en-GB" messages={{ pagination: { next: "Onwards" } }}>
+```
+
+Providers nest, so an inner provider can switch the language for one part of the page. Per-component props such as `clearLabel` or `labels` still win over the provider.
+
+### Other languages
+
+For a language that isn't bundled, write a complete messages object. TypeScript flags any missing string. Use English as the template:
+
+```ts
+import { en, plural, type Messages } from "@vjdesigns/vjdesigns-ui";
+
+const p = plural("sw");
+export const sw: Messages = {
+  ...en,
+  pagination: { ...en.pagination, next: "Ukurasa unaofuata", previous: "Ukurasa uliopita" },
+  searchInput: {
+    ...en.searchInput,
+    results: (count) => p(count, { "=0": "Hakuna matokeo", one: "Tokeo #", other: "Matokeo #" }),
+  },
+  // ...
+};
+```
+
+`plural(locale)` picks the right plural form for any language (`#` is the formatted number).
+
+### Switching language at runtime
+
+List the languages your app offers as loaders, so each one is downloaded only when picked:
+
+```tsx
+import { LocaleProvider, type Messages } from "@vjdesigns/vjdesigns-ui";
+
+const loaders: Record<string, () => Promise<{ default: Messages }>> = {
+  es: () => import("@vjdesigns/vjdesigns-ui/locales/es"),
+  fr: () => import("@vjdesigns/vjdesigns-ui/locales/fr"),
+  ar: () => import("@vjdesigns/vjdesigns-ui/locales/ar"),
+};
+
+function App({ lang }: { lang: string }) {
+  const [messages, setMessages] = useState<Messages>();
+  useEffect(() => {
+    const load = loaders[lang];
+    if (load) load().then((mod) => setMessages(mod.default));
+    else setMessages(undefined); // English
+  }, [lang]);
+  // Until a language loads, the previous one (or English) shows.
+  return <LocaleProvider locale={lang} messages={messages}>…</LocaleProvider>;
+}
+```
+
 For server rendering, also set `<html lang="…" dir="…">` on the page. `getLocaleDirection(locale)` returns `"ltr"` or `"rtl"`.
 
 # Guide: Form validation
 
-> **Front-end validation is not security.** It helps people fill in a form correctly, but anyone can turn off JavaScript or send requests straight to your server. Always validate again on the server. The format checks below (`isEmail`, `isIP`, …) are plain functions you can reuse there.
-
-`useFormValidation` checks a form when it's submitted, using the browser's own rules on each input (`required`, `type="email"`, `minLength`, `pattern`, `min` / `max`) plus any rules you add. Messages follow the current language.
-
-```tsx
-import {
-  useFormValidation, rules, ErrorSummary, Field, Input, PasswordInput, Button,
-} from "@vjdesigns/vjdesigns-ui";
-
-function SignUp() {
-  const form = useFormValidation({
-    rules: {
-      confirm: rules.matches("password", "The passwords don't match."),
-      serverIp: rules.ip(),                       // IPv4 or IPv6
-    },
-    // Runs only when everything is valid. Return the server's errors to show them on their fields.
-    onValid: async (values) => {
-      const response = await api.signUp(values);
-      return response.errors;                     // e.g. { username: "That username is taken." }
-    },
-  });
-
-  return (
-    <form {...form.formProps}>
-      <ErrorSummary ref={form.summaryRef} errors={form.errorList} />
-      <Field label="Email" required error={form.errors.email}>
-        <Input name="email" type="email" />
-      </Field>
-      <Field label="Password" required error={form.errors.password}>
-        <PasswordInput name="password" minLength={12} />
-      </Field>
-      <Field label="Confirm password" required error={form.errors.confirm}>
-        <PasswordInput name="confirm" />
-      </Field>
-      <Field label="Server IP" error={form.errors.serverIp}>
-        <Input name="serverIp" />
-      </Field>
-      <Button type="submit" loading={form.isSubmitting}>Create account</Button>
-    </form>
-  );
-}
-```
-
-How it behaves:
-
-- **On submit**, every field is checked. If anything is wrong, the `ErrorSummary` at the top lists the problems and takes focus, so screen readers announce it. Each item links to its field. Without a summary, focus goes to the first invalid field.
-- **Errors are keyed by the field's `name`.** Pass `form.errors.<name>` to each `Field`'s `error`.
-- **After a failed submit**, an error disappears as soon as the field is fixed (while typing), and a field is fully re-checked when you leave it. It doesn't nag while you're still typing.
-- **Server errors** (returned from `onValid`, or set with `form.setErrors({...})`) show on their fields and stay until that field is edited.
-- **Emails** must have a real domain (`name@example.com`). The browser's own check also accepts `name@localhost`.
-
-### Rules and format checks
-
-| Rule | Checks |
-| --- | --- |
-| `rules.required()` | Not empty (for controls without a native `required`) |
-| `rules.email()` | An email address in the usual format, with a top-level domain |
-| `rules.ip()` / `rules.ip({ version: 4 })` / `rules.ip({ version: 6 })` | An IPv4 or IPv6 address |
-| `rules.minLength(n)` / `rules.maxLength(n)` | Length in characters |
-| `rules.pattern(/regex/, "message")` | The whole value matches |
-| `rules.matches("otherField")` | Equals another field (confirm password) |
-| your own `(value, { values }) => message` | Anything else |
-
-Each rule takes an optional custom message. The checks behind them are exported for use anywhere, including your server:
-
-- `isEmail(value)`
-- `isIPv4(value)`: four numbers 0–255, no leading zeros
-- `isIPv6(value)`: including `::` shorthand and IPv4 tails like `::ffff:192.168.0.1`
+> **Front-end validation is not security.** It helps people fill in a form correctly, but anyone can turn off JavaScript or send requests straight to your server. Always validate again on the server. The format checks below (`isEmail`, `isIP`, …) are plain functions you can reuse there.
+
+`useFormValidation` checks a form when it's submitted, using the browser's own rules on each input (`required`, `type="email"`, `minLength`, `pattern`, `min` / `max`) plus any rules you add. Messages follow the current language.
+
+```tsx
+import {
+  useFormValidation, rules, ErrorSummary, Field, Input, PasswordInput, Button,
+} from "@vjdesigns/vjdesigns-ui";
+
+function SignUp() {
+  const form = useFormValidation({
+    rules: {
+      confirm: rules.matches("password", "The passwords don't match."),
+      serverIp: rules.ip(),                       // IPv4 or IPv6
+    },
+    // Runs only when everything is valid. Return the server's errors to show them on their fields.
+    onValid: async (values) => {
+      const response = await api.signUp(values);
+      return response.errors;                     // e.g. { username: "That username is taken." }
+    },
+  });
+
+  return (
+    <form {...form.formProps}>
+      <ErrorSummary ref={form.summaryRef} errors={form.errorList} />
+      <Field label="Email" required error={form.errors.email}>
+        <Input name="email" type="email" />
+      </Field>
+      <Field label="Password" required error={form.errors.password}>
+        <PasswordInput name="password" minLength={12} />
+      </Field>
+      <Field label="Confirm password" required error={form.errors.confirm}>
+        <PasswordInput name="confirm" />
+      </Field>
+      <Field label="Server IP" error={form.errors.serverIp}>
+        <Input name="serverIp" />
+      </Field>
+      <Button type="submit" loading={form.isSubmitting}>Create account</Button>
+    </form>
+  );
+}
+```
+
+How it behaves:
+
+- **On submit**, every field is checked. If anything is wrong, the `ErrorSummary` at the top lists the problems and takes focus, so screen readers announce it. Each item links to its field. Without a summary, focus goes to the first invalid field.
+- **Errors are keyed by the field's `name`.** Pass `form.errors.<name>` to each `Field`'s `error`.
+- **After a failed submit**, an error disappears as soon as the field is fixed (while typing), and a field is fully re-checked when you leave it. It doesn't nag while you're still typing.
+- **Server errors** (returned from `onValid`, or set with `form.setErrors({...})`) show on their fields and stay until that field is edited.
+- **Emails** must have a real domain (`name@example.com`). The browser's own check also accepts `name@localhost`.
+
+### Rules and format checks
+
+| Rule | Checks |
+| --- | --- |
+| `rules.required()` | Not empty (for controls without a native `required`) |
+| `rules.email()` | An email address in the usual format, with a top-level domain |
+| `rules.ip()` / `rules.ip({ version: 4 })` / `rules.ip({ version: 6 })` | An IPv4 or IPv6 address |
+| `rules.minLength(n)` / `rules.maxLength(n)` | Length in characters |
+| `rules.pattern(/regex/, "message")` | The whole value matches |
+| `rules.matches("otherField")` | Equals another field (confirm password) |
+| your own `(value, { values }) => message` | Anything else |
+
+Each rule takes an optional custom message. The checks behind them are exported for use anywhere, including your server:
+
+- `isEmail(value)`
+- `isIPv4(value)`: four numbers 0–255, no leading zeros
+- `isIPv6(value)`: including `::` shorthand and IPv4 tails like `::ffff:192.168.0.1`
 - `isIP(value, version?)`
 
 # Components
@@ -927,6 +927,77 @@ view, so keyboard and screen reader users only reach what is shown.
 - Controlled Edge Cases: Controlled: the viewport only moves when the parent accepts the new index. A parent that ignores `onIndexChange` keeps the slide (and dots) in place, and an out-of-range `index` is reported back clamped.
 - Resize Keeps Slide: After a resize the same slide stays in view (slide widths change, so scroll is realigned).
 
+## Chat
+
+import { Chat } from "@vjdesigns/vjdesigns-ui";
+
+Category: data-display · Storybook: Data Display/Chat
+
+A chat interface for an AI assistant (or a person), with no backend of its
+own: `onSend` connects it to any API and can stream the reply. Includes a
+scrolling conversation that follows new messages, an auto-growing message
+box (Enter sends, Shift+Enter adds a line), Stop and Retry, copy buttons,
+suggested prompts, and screen reader announcements of each reply.
+
+```tsx
+<Chat
+  style={{ blockSize: 560 }}
+  onSend={async function* (text, { messages, signal }) {
+    const res = await fetch("/api/chat", {
+      method: "POST",
+      body: JSON.stringify({ messages }),
+      signal,
+    });
+    yield* readTextStream(res);
+  }}
+/>
+```
+
+### Props
+
+- `messages`: `ChatMessage[]`. Controlled conversation.
+- `defaultMessages`: `ChatMessage[]`. Initial conversation when uncontrolled.
+- `onMessagesChange`: `(messages: ChatMessage[]) => void`. Called with the whole conversation whenever it changes (new messages, every streamed chunk, status changes).
+- `onSend`: `( text: string, context: ChatSendContext, ) => ChatSendResult | Promise<ChatSendResult>`. Connects the Chat to your backend. Called with the user's text when they send a message (or retry). Return the reply as a string, stream it as an `AsyncIterable<string>`, or return nothing and add it yourself through controlled `messages`. Throwing (or rejecting) turns the reply into an error with a Retry button.
+- `onStop`: `() => void`. Called when the user stops a reply, after its `signal` is aborted.
+- `onError`: `(error: unknown) => void`. Called with whatever `onSend` threw, for logging. The user sees `labels.error` (or the message's `error`).
+- `draft`: `string`. Controlled text of the message box.
+- `defaultDraft`: `string`. Initial text of the message box when uncontrolled.
+- `onDraftChange`: `(draft: string) => void`. Called with the message box text on every edit.
+- `suggestions`: `string[]`. Prompts offered as buttons while the conversation is empty. Pressing one sends it.
+- `emptyState`: `ReactNode`. Shown while the conversation is empty, above the suggestions. Defaults to a short greeting (`labels.emptyTitle`).
+- `renderContent`: `(message: ChatMessage) => ReactNode`. Renders a message's content, e.g. through your Markdown renderer. Defaults to plain text with line breaks kept. Never render unsanitized HTML from a model or a user.
+- `assistantName`: `string`. Name of the assistant, read to screen readers ("Coach said:"). Defaults to `labels.assistant`.
+- `assistantAvatar`: `ReactNode`. Shown beside assistant messages (e.g. an `Avatar` or `Icon`). Decorative: hidden from assistive technology.
+- `userAvatar`: `ReactNode`. Shown beside user messages. Decorative: hidden from assistive technology.
+- `copyable`: `boolean` (default true). Show a Copy button under finished assistant messages.
+- `disclaimer`: `ReactNode`. Small print under the message box, e.g. "AI can make mistakes."
+- `placeholder`: `string`. Placeholder of the message box. Defaults to `labels.placeholder`.
+- `maxLength`: `number`. Maximum length of a message, in characters. Shows a counter near the limit.
+- `disabled`: `boolean`. Disables the message box and the suggestions.
+- `labels`: `Partial<ChatLabels>`. Overrides for the built-in text.
+- Plus every native `<section>` attribute (className, style, id, aria-*, data-*, event handlers), spread onto the root.
+
+### Examples (Storybook stories)
+
+- Playground
+- Send And Stream: Type a message and press Enter: it is sent, and the streamed reply is announced when done.
+- Shift Enter Adds Line: Shift+Enter adds a line instead of sending.
+- String Reply: `onSend` can return the whole reply as a string (or a promise of one).
+- With Suggestions: While the conversation is empty, `emptyState` and `suggestions` show. Pressing a suggestion sends it.
+- With Avatars: Avatars beside each speaker. They're decorative; the speaker is read from hidden text.
+- Long Conversation: A long conversation. Scroll up, and a button jumps back to the latest message.
+- Long Content: A long unbroken string (a URL, say) wraps instead of overflowing the bubble.
+- Error And Retry: When `onSend` throws, the reply shows an error with a Retry button. This backend fails the first time.
+- Stop Streaming: While a reply streams, the send button becomes Stop (Escape in the message box works too).
+- Disabled
+- With Max Length: `maxLength` limits a message and shows a counter near the limit.
+- System Messages: System messages (joins, handoffs, context notes) are centered notes.
+- Custom Rendering: `renderContent` renders messages your way, e.g. through a Markdown renderer. This one turns `**bold**` into `<strong>` and keeps paragraphs. Never render unsanitized HTML from a model.
+- Controlled: Controlled: the parent owns the messages, so it can save, clear, or seed them. Here, `onSend` returns nothing and the parent adds the reply itself (the way a WebSocket or a human agent would).
+- Connecting ABackend: How to connect a real backend: stream server-sent events from your API route with `readEventStream`, passing `signal` so Stop cancels the request. ```tsx import { Chat, readEventStream } from "@vjdesigns/vjdesigns-ui"; <Chat onSend={async function* (_text, { messages, signal }) { const res = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: messages.map(({ role, content }) => ({ role, content })), }), signal, }); if (!res.ok) throw new Error(`Chat request failed: ${res.status}`); for await (const data of readEventStream(res)) { if (data === "[DONE]") break; yield JSON.parse(data).text ?? ""; } }} /> ``` Keep API keys on your server: the browser should call your own route, which calls the model provider. This story fakes the server with an in-memory event stream.
+- Right To Left: Right-to-left: user messages sit on the inline end, which is the left in RTL.
+
 ## Chip
 
 import { Chip } from "@vjdesigns/vjdesigns-ui";
@@ -1107,36 +1178,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 +1887,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 +2040,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 +2084,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 +2590,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 +2800,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 +2887,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 +2952,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 +3657,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 +3716,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 +4065,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 +4196,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 +4760,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 +4928,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 +4971,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 +4983,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 +5201,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 +5240,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 +6337,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 +6381,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 +6801,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 +7136,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 +7156,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 +7375,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 +7390,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 +7405,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 +7420,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 +7434,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 +7449,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 +7463,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 +7477,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 +7489,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 +7512,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 +7528,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 +7549,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 +7564,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 +7580,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 +7595,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 +7610,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 +7625,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 +7635,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 +7644,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 +7654,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 +7663,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 +7673,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 +7720,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 +7729,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 +7750,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 +7894,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 +8101,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 +8136,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 +8188,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 +8199,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 +8208,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 +8243,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 +8263,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 +8297,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.