@pearpages/pulp-react 0.0.0

package/dist/component-manifest.json

@@ -0,0 +1,3370 @@
+{
+  "package": "@pearpages/pulp-react",
+  "categories": [
+    "Typography",
+    "Layout",
+    "Actions",
+    "Forms",
+    "Navigation",
+    "Overlays",
+    "Feedback",
+    "Data",
+    "Utilities"
+  ],
+  "requires": {
+    "tokens": "@pearpages/pulp-tokens/tokens.css (every --<component>-* value resolves through it; without it components render unstyled)",
+    "base": "@pearpages/pulp-css (optional: layer order, reset, body defaults, vendor layer)",
+    "icons": "@pearpages/pulp-icons (optional: stroke glyphs; wrap them in Icon or pass them to Button slots)",
+    "dialogs": "@pearpages/modals/styles.css (only when using Dialog; import it into the vendor layer)",
+    "headless": "react-aria-components (installed automatically; Combobox, Listbox, Picker, Calendar, DatePicker, Slider and Table build on it, see docs/decisions/001)",
+    "fonts": "consumers load the brand typefaces themselves (pulp: Archivo, Instrument Sans, Geist Mono; bitepals: Nunito, Inter)"
+  },
+  "components": [
+    {
+      "name": "Accordion",
+      "description": "Vertically stacked sections that expand one at a time or independently.\nEach trigger is a button inside a real heading, each panel a labelled\nregion; arrows, Home and End move between triggers. Controlled or\nuncontrolled by `value`. Compose with `Accordion.Item`,\n`Accordion.Trigger` and `Accordion.Panel`.",
+      "status": "stable",
+      "category": "Navigation",
+      "accessibility": "Each trigger is a `button` inside a heading of the given `headingLevel`; each panel is a `region` labelled by its trigger. Arrows, Home and End move between triggers; Enter or Space toggles.",
+      "do": [
+        "Set `headingLevel` to fit the page outline.",
+        "Use `multiple` when sections are independent reference material."
+      ],
+      "dont": [
+        "Nest interactive content in the trigger; it is one button.",
+        "Use it for a single show-more; use Popover or plain content instead."
+      ],
+      "import": "import { Accordion } from '@pearpages/pulp-react/accordion';",
+      "css": "@pearpages/pulp-react/accordion.css",
+      "tokens": "--accordion-*",
+      "props": [
+        {
+          "name": "collapsible",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "In `single` mode, whether the open item can be closed again."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | string[]",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "headingLevel",
+          "type": "enum",
+          "required": false,
+          "default": "3",
+          "description": "The heading level of every trigger, for the document outline."
+        },
+        {
+          "name": "onValueChange",
+          "type": "((value: string | string[]) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "type",
+          "type": "enum",
+          "required": false,
+          "default": "single",
+          "description": "`single` keeps one item open; `multiple` allows any number."
+        },
+        {
+          "name": "value",
+          "type": "string | string[]",
+          "required": false,
+          "default": null,
+          "description": "Controlled open item(s): a string for `single`, an array for `multiple`."
+        }
+      ],
+      "parts": [
+        {
+          "name": "Accordion.Item",
+          "description": "",
+          "props": [
+            {
+              "name": "value",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": ""
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "required": false,
+              "default": "false",
+              "description": ""
+            },
+            {
+              "name": "ref",
+              "type": "Ref<HTMLDivElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Accordion.Trigger",
+          "description": "",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<HTMLButtonElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Accordion.Panel",
+          "description": "",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<HTMLDivElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Alert",
+      "description": "An inline message with a tone. Tint, accent and title colour come from\nthe status tokens; the body keeps the default text colour so long\nmessages stay readable. Toast renders one Alert per notification.",
+      "status": "stable",
+      "category": "Feedback",
+      "accessibility": "`role=\"alert\"` for `tone=\"error\"` (assertive), `role=\"status\"` otherwise (polite); `live=\"off\"` opts out. The glyph is decorative; the tone is carried by the title and text, never by colour alone.",
+      "do": [
+        "Give it a `title` when the body is more than one sentence.",
+        "Use `onDismiss` for messages the user can act on and clear."
+      ],
+      "dont": [
+        "Announce errors through both an Alert and a Toast.",
+        "Use it as a page-level banner for marketing copy."
+      ],
+      "import": "import { Alert } from '@pearpages/pulp-react/alert';",
+      "css": "@pearpages/pulp-react/alert.css",
+      "tokens": "--alert-*",
+      "props": [
+        {
+          "name": "action",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Buttons or links placed under the body."
+        },
+        {
+          "name": "dismissLabel",
+          "type": "string",
+          "required": false,
+          "default": "Dismiss",
+          "description": ""
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Replaces the tone's default glyph; `null` shows none."
+        },
+        {
+          "name": "live",
+          "type": "enum",
+          "required": false,
+          "default": null,
+          "description": "How assistive technology announces it: `assertive` (`role=\"alert\"`),\n`polite` (`role=\"status\"`) or `off` (no live role, for content present at\npage load or inside another live region). Defaults to assertive for\n`error`, polite otherwise."
+        },
+        {
+          "name": "onDismiss",
+          "type": "(() => void)",
+          "required": false,
+          "default": null,
+          "description": "Renders a dismiss button that calls this."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "tone",
+          "type": "enum",
+          "required": false,
+          "default": "info",
+          "description": ""
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Badge",
+      "description": "A small label for status, counts and tags. Tone and variant resolve\nthrough `--badge-*` onto the status tokens, whose contrast is proven by\nthe token tests. Not interactive: for a removable chip, compose with a\nButton.",
+      "status": "stable",
+      "category": "Feedback",
+      "accessibility": "Plain text: no role, no interaction. Every tone × variant pair meets WCAG AA, proven by the token tests. Tone is reinforced by the text, not only by colour.",
+      "do": [
+        "Keep the text to one or two words.",
+        "Pair a leading icon with text, never alone."
+      ],
+      "dont": [
+        "Make it clickable; compose a Button for a removable chip.",
+        "Use tone alone to convey meaning; say it in the text."
+      ],
+      "import": "import { Badge } from '@pearpages/pulp-react/badge';",
+      "css": "@pearpages/pulp-react/badge.css",
+      "tokens": "--badge-*",
+      "props": [
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Leading glyph, decorative."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLSpanElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        },
+        {
+          "name": "tone",
+          "type": "enum",
+          "required": false,
+          "default": "neutral",
+          "description": "Meaning, not colour: `neutral` for counts and tags."
+        },
+        {
+          "name": "variant",
+          "type": "enum",
+          "required": false,
+          "default": "subtle",
+          "description": "`solid` fills with the tone; `subtle` tints and uses the tone as text."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Button",
+      "description": "The one action component. Variants map to emphasis, not colour: one\n`primary` per view, `secondary` for the rest, `ghost` inside other content.\nEvery value comes from `--button-*` tokens, so a brand restyles it without\ntouching the component. State is exposed as `data-variant`, `data-size` and\n`data-loading` for styling, tests and agents alike.",
+      "status": "stable",
+      "category": "Actions",
+      "accessibility": "A native `button` (or the child element with `asChild`). `loading` sets `aria-disabled` and `aria-busy` and keeps focus; only `disabled` removes it from the tab order. Icon-only use warns in development: use IconButton, which requires a name.",
+      "do": [
+        "One `primary` per view.",
+        "Use `asChild` for links that look like buttons, keeping the `a` semantics."
+      ],
+      "dont": [
+        "Use `loading` on a button that is not the one that started the work.",
+        "Rely on colour to tell variants apart; the label carries the meaning."
+      ],
+      "import": "import { Button } from '@pearpages/pulp-react/button';",
+      "css": "@pearpages/pulp-react/button.css",
+      "tokens": "--button-*",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Render the single child element instead of a `<button>`, merging the\nbutton's props into it. Use it to style a router `<Link>` or an `<a>` as a\nbutton. Disabled and loading states then use `aria-disabled`, and the\nchild's own `onClick` does not run while the control is inert."
+        },
+        {
+          "name": "iconEnd",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Decorative element after the label. Hidden from assistive technology."
+        },
+        {
+          "name": "iconStart",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Decorative element before the label. Hidden from assistive technology."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Shows a spinner, sets `aria-busy` and `aria-disabled`, and blocks\nactivation. The element stays focusable so focus is not lost mid-action,\nand the label stays in place so the button keeps its width."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<E>",
+          "required": false,
+          "default": null,
+          "description": "The rendered element. With `asChild` that is the child's element, so pass\nthe type parameter: `<Button<HTMLAnchorElement> asChild ref={anchorRef}>`."
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        },
+        {
+          "name": "variant",
+          "type": "enum",
+          "required": false,
+          "default": "primary",
+          "description": "Visual emphasis. One `primary` per view; `secondary` for the rest;\n`ghost` for actions that sit inside other content."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Calendar",
+      "description": "A month grid for choosing one date, on React Aria's calendar (decision\nrecord 001): arrows move by day and week, Page Up/Down by month, Home and\nEnd to the edges of the week, Enter or Space selects; every cell is\nannounced with its full date and the grid is named by a visually hidden\nlevel-2 heading. Dates cross the API as ISO strings. For a date inside a\nform, DatePicker wraps this in a field with a popover.",
+      "status": "experimental",
+      "category": "Forms",
+      "accessibility": "The grid is `role=\"grid\"` named by a visually hidden level-2 heading (\"Calendar, September 2026\"); each day is a button announced with its full date, today and selection state. Arrows move by day and week, Page Up/Down by month, Home/End to the week edges, Enter or Space selects.",
+      "do": [
+        "Pass `locale` when the app's language is not the browser's.",
+        "Mark unavailable dates with `isDateUnavailable` rather than removing them."
+      ],
+      "dont": [
+        "Use it inside a form; use DatePicker, which adds the field and the popover.",
+        "Set `min` after `max`; the vendor disables the whole grid."
+      ],
+      "import": "import { Calendar } from '@pearpages/pulp-react/calendar';",
+      "css": "@pearpages/pulp-react/calendar.css",
+      "tokens": "--calendar-*",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": false,
+          "default": "Calendar",
+          "description": "The grid's accessible name."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | null",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "isDateUnavailable",
+          "type": "((date: string) => boolean)",
+          "required": false,
+          "default": null,
+          "description": "Marks single dates as unavailable (shown, not selectable)."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "BCP 47 tag. Month names, weekday order and the first day of the week follow it; defaults to the browser's."
+        },
+        {
+          "name": "max",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Latest selectable date, `YYYY-MM-DD`."
+        },
+        {
+          "name": "min",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Earliest selectable date, `YYYY-MM-DD`."
+        },
+        {
+          "name": "onChange",
+          "type": "((value: string | null) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "value",
+          "type": "string | null",
+          "required": false,
+          "default": null,
+          "description": "Selected date as `YYYY-MM-DD` (controlled). `null` is \"none\"."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Card",
+      "description": "A surface that groups related content. Compose with `Card.Header`,\n`Card.Body` and `Card.Footer`; the slots carry the padding and dividers so\nthe root stays a plain surface. Every value comes from `--card-*` tokens;\nstate is exposed as `data-variant`, `data-padding` and `data-interactive`.",
+      "status": "stable",
+      "category": "Layout",
+      "accessibility": "A `section` by default (a `region` when it has an accessible name); with `asChild` the child element's own semantics apply. `interactive` adds a focus ring and a tab stop only when the element is not already focusable.",
+      "do": [
+        "Give a card an `aria-label` or a heading in `Card.Header` when it is a landmark worth naming.",
+        "Use `asChild` with an `a` for a whole-card link."
+      ],
+      "dont": [
+        "Put more than one primary action inside an interactive card.",
+        "Nest interactive cards."
+      ],
+      "import": "import { Card } from '@pearpages/pulp-react/card';",
+      "css": "@pearpages/pulp-react/card.css",
+      "tokens": "--card-*",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Render the single child element as the card (an `<a>` for a link card),\nmerging the card's props into it."
+        },
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Hover and focus affordances for a card that is itself a target. Pair it\nwith `asChild` and a link, or supply your own role and handlers."
+        },
+        {
+          "name": "padding",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": "One knob for every slot's inner spacing."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<E>",
+          "required": false,
+          "default": null,
+          "description": "The rendered element; a `<section>` unless `asChild`."
+        },
+        {
+          "name": "variant",
+          "type": "enum",
+          "required": false,
+          "default": "raised",
+          "description": "How the card separates from the page: `raised` by shadow, `outlined` by\nborder, `sunken` by a recessed surface."
+        }
+      ],
+      "parts": [
+        {
+          "name": "Card.Header",
+          "description": "",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<HTMLDivElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Card.Body",
+          "description": "",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<HTMLDivElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Card.Footer",
+          "description": "",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<HTMLDivElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Checkbox",
+      "description": "A native checkbox drawn with tokens: `appearance: none` on the input, the\nbox and tick in CSS, so keyboard, forms and assistive technology are the\nbrowser's own. Label, description and error come from Field. Controlled and\nuncontrolled behave like the native input. State is the native `:checked`\nand `:indeterminate`, plus `data-indeterminate` on the input.",
+      "status": "stable",
+      "category": "Forms",
+      "accessibility": "A native `input type=\"checkbox\"` with `appearance: none`; label, description and error wire through Field. `indeterminate` sets the DOM property and `aria-checked=\"mixed\"`. Keyboard: Space toggles.",
+      "do": [
+        "Use `indeterminate` for a parent whose children are partly selected.",
+        "Group related checkboxes under a `fieldset`."
+      ],
+      "dont": [
+        "Use it for an immediate setting; use Switch.",
+        "Hide the label; the description does not name the control."
+      ],
+      "import": "import { Checkbox } from '@pearpages/pulp-react/checkbox';",
+      "css": "@pearpages/pulp-react/checkbox.css",
+      "tokens": "--checkbox-*",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Visible label beside the box."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Applied to the wrapper, not the input."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Presence marks the control invalid and announces the message."
+        },
+        {
+          "name": "indeterminate",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "The \"some selected\" state; visual and `aria-checked=\"mixed\"`, independent of `checked`."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLInputElement>",
+          "required": false,
+          "default": null,
+          "description": "The `<input>` element."
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Combobox",
+      "description": "A text input that suggests options as the user types, on React Aria's\ncombobox (decision record 001): the list is announced through\n`aria-activedescendant`, arrows move, Enter selects, Escape closes and\nthen clears. Static lists filter themselves; for async options, control\n`inputValue`, fetch, and pass the results with `filter=\"none\"` and\n`loading` while they arrive. Options look the same as Listbox's.",
+      "status": "experimental",
+      "category": "Forms",
+      "accessibility": "A `combobox` input with `aria-autocomplete=\"list\"`; the open list is a `listbox` announced through `aria-activedescendant`, so focus stays in the input. Arrows move, Enter selects, Escape closes and then clears. Loading and empty states are announced from inside the list.",
+      "do": [
+        "Use `filter=\"none\"` with controlled `inputValue` for server-side search.",
+        "Keep `loading` true until the results for the current text arrive."
+      ],
+      "dont": [
+        "Use it for fewer than five fixed options; use Picker or the native Select.",
+        "Set `menuTrigger=\"focus\"` on a long list; opening on every focus is noisy."
+      ],
+      "import": "import { Combobox } from '@pearpages/pulp-react/combobox';",
+      "css": "@pearpages/pulp-react/combobox.css",
+      "tokens": "--combobox-*",
+      "props": [
+        {
+          "name": "items",
+          "type": "readonly ListboxItem[]",
+          "required": true,
+          "default": null,
+          "description": "The options. With `filter=\"none\"` they are shown as given."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Visible label. Always rendered."
+        },
+        {
+          "name": "allowsCustomValue",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Let the typed text stand as the value even when it matches no option."
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Applied to the field wrapper, not the input."
+        },
+        {
+          "name": "defaultInputValue",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | null",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "emptyMessage",
+          "type": "ReactNode",
+          "required": false,
+          "default": "No results",
+          "description": "Shown in the open list when no option matches."
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Presence marks the control invalid and announces the message."
+        },
+        {
+          "name": "filter",
+          "type": "enum",
+          "required": false,
+          "default": "contains",
+          "description": ""
+        },
+        {
+          "name": "inputValue",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "The text in the input (controlled). Pair with `onInputChange` to fetch options as the user types."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Keeps the list open with a spinner in the control while options load."
+        },
+        {
+          "name": "loadingMessage",
+          "type": "ReactNode",
+          "required": false,
+          "default": "Loading…",
+          "description": "Announced while `loading`."
+        },
+        {
+          "name": "menuTrigger",
+          "type": "enum",
+          "required": false,
+          "default": "input",
+          "description": "When the list opens: on focus, on typing, or only from the button and arrow keys."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Submitted with a form: the selected id (or the text with `allowsCustomValue`)."
+        },
+        {
+          "name": "onChange",
+          "type": "((value: string | null) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "onInputChange",
+          "type": "((text: string) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLInputElement>",
+          "required": false,
+          "default": null,
+          "description": "The `<input>` element."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        },
+        {
+          "name": "value",
+          "type": "string | null",
+          "required": false,
+          "default": null,
+          "description": "Selected id (controlled). `null` is \"nothing selected\"."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "DatePicker",
+      "description": "A date field with a calendar popover, on React Aria's date picker\n(decision record 001): the date is typed segment by segment in the\nuser's locale order (arrows and digits, no free text to parse), and the\nbutton opens the same month grid as Calendar. Dates cross the API as\nISO strings.",
+      "status": "experimental",
+      "category": "Forms",
+      "accessibility": "A `group` named by the label holding one `spinbutton` per date segment (day, month, year in the locale's order), a button that opens a `dialog` containing the Calendar grid, and a hidden input for forms. Arrows step a segment, digits type it, Escape closes the dialog and returns focus.",
+      "do": [
+        "Pass `locale` when the app's language is not the browser's.",
+        "Use `min`/`max` for ranges the user cannot choose outside of."
+      ],
+      "dont": [
+        "Parse the value yourself; it is always `YYYY-MM-DD`.",
+        "Use it for a date of birth decades away; the segments are faster than the calendar."
+      ],
+      "import": "import { DatePicker } from '@pearpages/pulp-react/date-picker';",
+      "css": "@pearpages/pulp-react/date-picker.css",
+      "tokens": "--date-picker-*",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Visible label. Always rendered."
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Applied to the field wrapper."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | null",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Presence marks the control invalid and announces the message."
+        },
+        {
+          "name": "isDateUnavailable",
+          "type": "((date: string) => boolean)",
+          "required": false,
+          "default": null,
+          "description": "Marks single dates as unavailable in the calendar."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "BCP 47 tag. Segment order, month names and the first weekday follow it; defaults to the browser's."
+        },
+        {
+          "name": "max",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Latest selectable date, `YYYY-MM-DD`."
+        },
+        {
+          "name": "min",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Earliest selectable date, `YYYY-MM-DD`."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Submitted with a form as `YYYY-MM-DD` through a hidden input."
+        },
+        {
+          "name": "onChange",
+          "type": "((value: string | null) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "default": null,
+          "description": "The wrapper element."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        },
+        {
+          "name": "value",
+          "type": "string | null",
+          "required": false,
+          "default": null,
+          "description": "The date as `YYYY-MM-DD` (controlled). `null` is \"none\"."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "DialogSystem",
+      "description": "Mount once near the app root. Owns the portal element every dialog renders\ninto and sets the vendor's `--modal-*` variables on it from pulp's\n`--dialog-*` tokens, so backdrop, surface, type and motion follow the\ncurrent brand and scheme. Because the variables sit on an ancestor of the\ndialog, they win over the vendor stylesheet regardless of cascade layers\nor import order.",
+      "status": "stable",
+      "category": "Overlays",
+      "accessibility": "Renders nothing visible itself; the portal element it owns is where every dialog mounts, so the vendor's focus trap and `inert` handling apply to the rest of the page.",
+      "do": [
+        "Mount it once, near the app root, inside any providers dialogs need."
+      ],
+      "dont": [
+        "Nest it; one system serves every dialog."
+      ],
+      "import": "import { DialogSystem } from '@pearpages/pulp-react/dialog';",
+      "css": "@pearpages/pulp-react/dialog.css",
+      "tokens": "--dialog-*",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Children components"
+        },
+        {
+          "name": "baseZIndex",
+          "type": "number",
+          "required": false,
+          "default": null,
+          "description": "Base z-index for modal layering"
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Dialog",
+      "description": "An accessible modal dialog: focus trap, inert page, Escape and backdrop\ndismissal, stacking. Built on `@pearpages/modals`; pulp adds the theming and\nthe compound API (`Dialog.Trigger`, `Dialog.Content`, `Dialog.Header`,\n`Dialog.Title`, `Dialog.Description`, `Dialog.Close`, `Dialog.Body`,\n`Dialog.Footer`). The trigger is a sibling of the dialog, not a child: a\ndialog's children render only while it is open. Use pulp's `Button` for\nactions. Requires `DialogSystem` above it and the vendor stylesheet\n`@pearpages/modals/styles.css`.",
+      "status": "stable",
+      "category": "Overlays",
+      "accessibility": "`role=\"dialog\"` with `aria-modal`, named by `Dialog.Title` and described by `Dialog.Description`; focus moves in on open and back to the trigger on close; the page behind is inert; Escape and the backdrop close it. Provided by `@pearpages/modals`.",
+      "do": [
+        "Always render a `Dialog.Title`.",
+        "Put the destructive action last in `Dialog.Footer` and make the safe one the default focus."
+      ],
+      "dont": [
+        "Open a dialog from inside a Menu or Popover that stays open.",
+        "Use it for content that does not need the page blocked; use Popover."
+      ],
+      "import": "import { Dialog } from '@pearpages/pulp-react/dialog';",
+      "css": "@pearpages/pulp-react/dialog.css",
+      "tokens": "--dialog-*",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Children components (typically Modal.Content)"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": true,
+          "default": null,
+          "description": "Unique identifier for the modal within a ModalSystem instance"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((open: boolean) => void)",
+          "required": false,
+          "default": null,
+          "description": "Callback fired when open state changes"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "default": null,
+          "description": "Controlled open state"
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Field",
+      "description": "The wiring every form control shares: a label pointing at the control, a\ndescription and an error exposed through `aria-describedby`, and invalid,\ndisabled and required state in one place. Only parts that are mounted end\nup in `aria-describedby`, so no id ever dangles. Compose with\n`Field.Label`, `Field.Control`, `Field.Description` and `Field.Error`\n(one of each); state on the DOM as `data-invalid`, `data-disabled`,\n`data-required`.\n\nKnown limitation: parts register in a layout effect, so server-rendered\nHTML carries no `aria-describedby` until hydration. The relationship is\ncomplete for every interactive use; static HTML consumers should not rely\non it yet.",
+      "status": "stable",
+      "category": "Forms",
+      "accessibility": "Wires `label[for]`, `aria-describedby` (only mounted parts), `aria-invalid`, `aria-required` and `disabled` onto the control. Server-rendered HTML has no `aria-describedby` until hydration (a test pins the gap).",
+      "do": [
+        "Use `Field.Label as=\"span\"` with `useField().labelId` for groups that cannot be labelled by `for`."
+      ],
+      "dont": [
+        "Mount two `Field.Description` or two `Field.Error`; ids would collide (development warns)."
+      ],
+      "import": "import { Field } from '@pearpages/pulp-react/field';",
+      "css": "@pearpages/pulp-react/field.css",
+      "tokens": "--field-*",
+      "props": [
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "The control's id. Generated when omitted."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        }
+      ],
+      "parts": [
+        {
+          "name": "Field.Label",
+          "description": "",
+          "props": [
+            {
+              "name": "as",
+              "type": "enum",
+              "required": false,
+              "default": "label",
+              "description": "`label` points at the control with `for`. `span` is for controls that are\nnot labelable (a radio group, a fieldset): it carries `labelId` and the\ncontrol references it with `aria-labelledby`."
+            },
+            {
+              "name": "ref",
+              "type": "Ref<HTMLLabelElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Field.Control",
+          "description": "",
+          "props": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": true,
+              "default": null,
+              "description": "The single control element; the field's wiring is merged into it."
+            },
+            {
+              "name": "aria-describedby",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "Extra ids to describe the control by, kept alongside the field's own."
+            }
+          ]
+        },
+        {
+          "name": "Field.Description",
+          "description": "",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<HTMLParagraphElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Field.Error",
+          "description": "",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<HTMLParagraphElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Heading",
+      "description": "A heading whose outline level and visual size are separate decisions, so\nthe document structure stays honest while the design stays flexible.\nDisplay family and tight leading from `--heading-*` tokens.",
+      "status": "stable",
+      "category": "Typography",
+      "accessibility": "Renders the `h1`–`h6` element of `level`; `size` changes only the look, so the outline stays truthful.",
+      "do": [
+        "Pick `level` from the outline, then `size` from the design."
+      ],
+      "dont": [
+        "Skip heading levels to get a smaller size; change `size` instead."
+      ],
+      "import": "import { Heading } from '@pearpages/pulp-react/heading';",
+      "css": "@pearpages/pulp-react/heading.css",
+      "tokens": "--heading-*",
+      "props": [
+        {
+          "name": "level",
+          "type": "enum",
+          "required": true,
+          "default": null,
+          "description": "The document outline level; sets the element (`h1`–`h6`)."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLHeadingElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": null,
+          "description": "Visual size, decoupled from the level. Defaults by level: 1→2xl, 2→xl, 3→lg, 4→md, 5 and 6→sm."
+        },
+        {
+          "name": "tone",
+          "type": "enum",
+          "required": false,
+          "default": "default",
+          "description": ""
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Icon",
+      "description": "Sizes any SVG to the icon scale and settles its accessibility: decorative\nby default, an image when given a `label`. Colour is `currentColor`, so an\nicon inherits the text tone around it.",
+      "status": "stable",
+      "category": "Utilities",
+      "accessibility": "`aria-hidden` by default (decorative); `role=\"img\"` with `aria-label` when `label` is given. Sized in `em` so it follows the text around it.",
+      "do": [
+        "Give `label` only when the icon carries meaning the text around it does not."
+      ],
+      "dont": [
+        "Use a labelled icon as the only name of a control; use IconButton."
+      ],
+      "import": "import { Icon } from '@pearpages/pulp-react/icon';",
+      "css": "@pearpages/pulp-react/icon.css",
+      "tokens": "--icon-*",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Any SVG (for instance from `@pearpages/pulp-icons`); it is sized to the icon box."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Accessible name. Without it the icon is decorative and hidden from\nassistive technology; with it the icon is an image with that name."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLSpanElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": "`inherit` follows the surrounding font size, for icons inside text-sized controls."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "IconButton",
+      "description": "A square Button that shows only an icon and therefore *requires* a name.\nEverything else (variants, sizes, loading, asChild) is Button's; the\n`--icon-button-size-*` tokens make it square.",
+      "status": "stable",
+      "category": "Actions",
+      "accessibility": "A Button with `aria-label` from the required `label`; `title` shows it as a tooltip. Everything else is Button's.",
+      "do": [
+        "Write the label as the action (\"Close\", \"Add item\")."
+      ],
+      "dont": [
+        "Use the icon's name as the label."
+      ],
+      "import": "import { IconButton } from '@pearpages/pulp-react/icon-button';",
+      "css": "@pearpages/pulp-react/icon-button.css",
+      "tokens": "--icon-button-*",
+      "props": [
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "The glyph, for instance from `@pearpages/pulp-icons`."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": true,
+          "default": null,
+          "description": "The accessible name. Required: an icon alone is not a name. Also used as the tooltip unless `title` is given."
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Render the single child element instead of a `<button>`, merging the\nbutton's props into it. Use it to style a router `<Link>` or an `<a>` as a\nbutton. Disabled and loading states then use `aria-disabled`, and the\nchild's own `onClick` does not run while the control is inert."
+        },
+        {
+          "name": "children",
+          "type": "ReactElement<unknown, string | JSXElementConstructor<any>>",
+          "required": false,
+          "default": null,
+          "description": "With `asChild`: the element to render (a link, for instance). Its own children are replaced by the icon."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Shows a spinner, sets `aria-busy` and `aria-disabled`, and blocks\nactivation. The element stays focusable so focus is not lost mid-action,\nand the label stays in place so the button keeps its width."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<E>",
+          "required": false,
+          "default": null,
+          "description": "The rendered element. With `asChild` that is the child's element, so pass\nthe type parameter: `<Button<HTMLAnchorElement> asChild ref={anchorRef}>`."
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "'md'",
+          "description": ""
+        },
+        {
+          "name": "variant",
+          "type": "enum",
+          "required": false,
+          "default": "'primary'",
+          "description": "Visual emphasis. One `primary` per view; `secondary` for the rest;\n`ghost` for actions that sit inside other content."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Inline",
+      "description": "A flex row whose gap is a step on the spacing scale, so consumers\ncompose layout from tokens instead of writing padding and margins.\nRendered as `ul`/`ol` it keeps `role=\"list\"` explicitly, because Safari\nstops announcing a list once `list-style` is removed.",
+      "status": "stable",
+      "category": "Layout",
+      "accessibility": "Layout only: no role unless rendered as `ul`/`ol`, where `role=\"list\"` is kept explicitly because Safari drops list semantics without markers.",
+      "do": [
+        "Use `as=\"ul\"` for a list of like items so the count is announced."
+      ],
+      "dont": [
+        "Use it to space unrelated regions; it is one flex row."
+      ],
+      "import": "import { Inline } from '@pearpages/pulp-react/inline';",
+      "css": "@pearpages/pulp-react/inline.css",
+      "tokens": "--inline-*",
+      "props": [
+        {
+          "name": "align",
+          "type": "enum",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "as",
+          "type": "enum",
+          "required": false,
+          "default": "div",
+          "description": ""
+        },
+        {
+          "name": "gap",
+          "type": "enum",
+          "required": false,
+          "default": "3",
+          "description": "Step on the spacing scale (`--space-1` … `--space-8`)."
+        },
+        {
+          "name": "justify",
+          "type": "enum",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "wrap",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Wrap onto new lines when the row overflows."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Listbox",
+      "description": "A visible list of options with single or multiple selection, on React\nAria's listbox (decision record 001): arrow keys move, Space toggles,\ntyping jumps, Shift and Ctrl/Cmd extend a multiple selection, Ctrl/Cmd+A\nselects all. For a list that opens from a control, use Picker; for one\nthat filters as you type, use Combobox. Both render these options.",
+      "status": "experimental",
+      "category": "Forms",
+      "accessibility": "`role=\"listbox\"` (with `aria-multiselectable` when multiple) named by `aria-label` or `aria-labelledby`; options carry `aria-selected` and `aria-disabled`. One tab stop: arrows move, Space toggles, typing jumps, Shift and Ctrl/Cmd extend, Ctrl/Cmd+A selects all.",
+      "do": [
+        "Give it a name: `aria-label`, or `aria-labelledby` pointing at a visible heading.",
+        "Use `selectionMode=\"multiple\"` for several choices; a group of Checkboxes works too and needs no explanation."
+      ],
+      "dont": [
+        "Show more than a screen of options; filter with Combobox."
+      ],
+      "import": "import { Listbox } from '@pearpages/pulp-react/listbox';",
+      "css": "@pearpages/pulp-react/listbox.css",
+      "tokens": "--listbox-*",
+      "props": [
+        {
+          "name": "items",
+          "type": "readonly ListboxItem[]",
+          "required": true,
+          "default": null,
+          "description": "The options, in order. Ids are the values."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "The list's accessible name. Pass `aria-labelledby` instead when a visible heading names it."
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "defaultValue",
+          "type": "readonly string[]",
+          "required": false,
+          "default": "[]",
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "emptyMessage",
+          "type": "ReactNode",
+          "required": false,
+          "default": "No options",
+          "description": "Shown when `items` is empty."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "onChange",
+          "type": "((value: string[]) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "default": null,
+          "description": "The list element (`role=\"listbox\"`)."
+        },
+        {
+          "name": "selectionMode",
+          "type": "enum",
+          "required": false,
+          "default": "single",
+          "description": ""
+        },
+        {
+          "name": "value",
+          "type": "readonly string[]",
+          "required": false,
+          "default": null,
+          "description": "Selected ids (controlled). An array in both modes; single mode holds at most one."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Menu",
+      "description": "A list of actions opened from a button, following the WAI-ARIA menu\nbutton pattern: Down/Up arrow on the trigger opens and focuses the first\nor last item, arrows move with wraparound, Home and End jump, typing\njumps to the next item starting with that letter, Enter, Space or click\nselects and closes, Escape and Tab close and return focus. Compose with\n`Menu.Trigger`, `Menu.Content`, `Menu.Item` and `Menu.Separator`.",
+      "status": "stable",
+      "category": "Overlays",
+      "accessibility": "The WAI-ARIA menu button pattern: the trigger has `aria-haspopup=\"menu\"` and `aria-expanded`; the popup is `role=\"menu\"` named by the trigger with `menuitem` children. Down/Up opens to the first/last item, arrows wrap, Home/End jump, typing jumps, Enter/Space/click select and close, Escape and Tab close and return focus.",
+      "do": [
+        "Use `tone=\"danger\"` for destructive items and put them after a separator."
+      ],
+      "dont": [
+        "Put form controls or links that navigate inside a menu; those want Popover or a navigation list.",
+        "Use it for navigation between pages."
+      ],
+      "import": "import { Menu } from '@pearpages/pulp-react/menu';",
+      "css": "@pearpages/pulp-react/menu.css",
+      "tokens": "--menu-*",
+      "props": [
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((open: boolean) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "placement",
+          "type": "enum",
+          "required": false,
+          "default": "bottom-start",
+          "description": ""
+        }
+      ],
+      "parts": [
+        {
+          "name": "Menu.Trigger",
+          "description": "",
+          "props": [
+            {
+              "name": "asChild",
+              "type": "boolean",
+              "required": false,
+              "default": "false",
+              "description": ""
+            },
+            {
+              "name": "ref",
+              "type": "Ref<HTMLButtonElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Menu.Content",
+          "description": "",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<HTMLDivElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Menu.Item",
+          "description": "",
+          "props": [
+            {
+              "name": "icon",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "Leading glyph, decorative."
+            },
+            {
+              "name": "onSelect",
+              "type": "(() => void)",
+              "required": false,
+              "default": null,
+              "description": "Called when the item is chosen; the menu closes afterwards."
+            },
+            {
+              "name": "ref",
+              "type": "Ref<HTMLButtonElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            },
+            {
+              "name": "tone",
+              "type": "enum",
+              "required": false,
+              "default": "default",
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Menu.Separator",
+          "description": "",
+          "props": []
+        }
+      ]
+    },
+    {
+      "name": "Pagination",
+      "description": "Page controls in a `nav` landmark: previous, numbered pages with the\ncurrent one marked `aria-current=\"page\"`, and next. Distant pages\ncollapse into an ellipsis. Buttons by default; `getHref` renders links so\nthe pages are crawlable and open in new tabs. Built from Button and\nIconButton, so it needs no keyboard model of its own.",
+      "status": "experimental",
+      "category": "Navigation",
+      "accessibility": "A `nav` landmark named by `aria-label`; the current page carries `aria-current=\"page\"`; previous and next are IconButtons with names; ellipses are hidden from assistive technology. With `getHref` the controls are links.",
+      "do": [
+        "Use `getHref` when pages have URLs so they can be opened in new tabs and crawled.",
+        "Keep `siblings` at 1 on narrow screens."
+      ],
+      "dont": [
+        "Disable the whole component while a page loads; disable only what cannot be pressed."
+      ],
+      "import": "import { Pagination } from '@pearpages/pulp-react/pagination';",
+      "css": "@pearpages/pulp-react/pagination.css",
+      "tokens": "--pagination-*",
+      "props": [
+        {
+          "name": "count",
+          "type": "number",
+          "required": true,
+          "default": null,
+          "description": "Total number of pages."
+        },
+        {
+          "name": "page",
+          "type": "number",
+          "required": true,
+          "default": null,
+          "description": "The current page, 1-based."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": false,
+          "default": "Pagination",
+          "description": "The landmark's name."
+        },
+        {
+          "name": "boundaries",
+          "type": "number",
+          "required": false,
+          "default": "1",
+          "description": "Pages always shown at each end."
+        },
+        {
+          "name": "getHref",
+          "type": "((page: number) => string)",
+          "required": false,
+          "default": null,
+          "description": "Render pages as links (server-side or router pagination) instead of buttons."
+        },
+        {
+          "name": "nextLabel",
+          "type": "string",
+          "required": false,
+          "default": "Next page",
+          "description": ""
+        },
+        {
+          "name": "onPageChange",
+          "type": "((page: number) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "pageLabel",
+          "type": "((page: number) => string)",
+          "required": false,
+          "default": "(n) => `Page ${n}`",
+          "description": "Accessible name of a page control."
+        },
+        {
+          "name": "previousLabel",
+          "type": "string",
+          "required": false,
+          "default": "Previous page",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "siblings",
+          "type": "number",
+          "required": false,
+          "default": "1",
+          "description": "Pages shown on each side of the current one."
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Picker",
+      "description": "A single-choice select with rich options (a description line, consistent\nstyling in every browser), on React Aria's select (decision record 001):\na button opens a listbox, arrows and typing move, Enter chooses, Escape\ncloses, and a hidden native select carries the value in forms. For a\nplain list of words, the native `Select` is the default; for several\nchoices at once, use Listbox.",
+      "status": "experimental",
+      "category": "Forms",
+      "accessibility": "A `button` named by the label with `aria-haspopup=\"listbox\"` and `aria-expanded`; the popup is a `listbox` with selected and disabled options; a hidden native select carries `name` and value for forms. Arrows open and move, typing jumps, Enter chooses, Escape closes and returns focus.",
+      "do": [
+        "Use a `description` line on options when the label alone is ambiguous.",
+        "Prefer the native Select for a plain list of words."
+      ],
+      "dont": [
+        "Use `placeholder` as the only label."
+      ],
+      "import": "import { Picker } from '@pearpages/pulp-react/picker';",
+      "css": "@pearpages/pulp-react/picker.css",
+      "tokens": "--picker-*",
+      "props": [
+        {
+          "name": "items",
+          "type": "readonly ListboxItem[]",
+          "required": true,
+          "default": null,
+          "description": "The options. Ids are the values."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Visible label. Always rendered."
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Applied to the field wrapper, not the button."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | null",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "emptyMessage",
+          "type": "ReactNode",
+          "required": false,
+          "default": "No options",
+          "description": "Shown when `items` is empty."
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Presence marks the control invalid and announces the message."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Submitted with a form through a hidden native select."
+        },
+        {
+          "name": "onChange",
+          "type": "((value: string | null) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "default": "Select…",
+          "description": "Shown in the control until a value is chosen."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLButtonElement>",
+          "required": false,
+          "default": null,
+          "description": "The trigger `<button>`."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        },
+        {
+          "name": "value",
+          "type": "string | null",
+          "required": false,
+          "default": null,
+          "description": "Selected id (controlled). `null` is \"nothing selected\"."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Popover",
+      "description": "A non-modal layer anchored to its trigger: a small form, a filter, a\ndetail panel. The page stays interactive; Escape, a click outside or\n`Popover.Close` dismiss it and focus returns to the trigger. Compose with\n`Popover.Trigger`, `Popover.Content` and `Popover.Close`. For anything that\nmust block the page, use Dialog.",
+      "status": "stable",
+      "category": "Overlays",
+      "accessibility": "A non-modal `role=\"dialog\"` named by `title` (or `aria-label`); the trigger has `aria-haspopup=\"dialog\"` and `aria-expanded`. Focus moves to the first focusable element on open and back to the trigger on close; Escape and a click outside dismiss it.",
+      "do": [
+        "Give it a `title` or `aria-label`.",
+        "Use `Popover.Close` inside forms so a keyboard user has a clear exit."
+      ],
+      "dont": [
+        "Put a long form or a destructive confirmation in it; use Dialog.",
+        "Open it on hover; that is Tooltip."
+      ],
+      "import": "import { Popover } from '@pearpages/pulp-react/popover';",
+      "css": "@pearpages/pulp-react/popover.css",
+      "tokens": "--popover-*",
+      "props": [
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "onOpenChange",
+          "type": "((open: boolean) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "default": null,
+          "description": "Controlled open state."
+        },
+        {
+          "name": "placement",
+          "type": "enum",
+          "required": false,
+          "default": "bottom-start",
+          "description": "Preferred side; flips when there is no room."
+        }
+      ],
+      "parts": [
+        {
+          "name": "Popover.Trigger",
+          "description": "",
+          "props": [
+            {
+              "name": "asChild",
+              "type": "boolean",
+              "required": false,
+              "default": "false",
+              "description": "Render the child element as the trigger instead of a plain button."
+            },
+            {
+              "name": "ref",
+              "type": "Ref<HTMLButtonElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Popover.Content",
+          "description": "",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<HTMLDivElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            },
+            {
+              "name": "title",
+              "type": "ReactNode",
+              "required": false,
+              "default": null,
+              "description": "Rendered as the dialog's heading and used as its accessible name. Otherwise pass `aria-label`."
+            }
+          ]
+        },
+        {
+          "name": "Popover.Close",
+          "description": "",
+          "props": [
+            {
+              "name": "asChild",
+              "type": "boolean",
+              "required": false,
+              "default": "false",
+              "description": ""
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Progress",
+      "description": "A determinate or indeterminate progress bar. The bar is `role=\"progressbar\"`\nlabelled by the visible (or visually hidden) label; the fill width is the\none place in the library that carries a per-instance inline value, set as\na custom property. Indeterminate motion stops under reduced motion.",
+      "status": "stable",
+      "category": "Feedback",
+      "accessibility": "`role=\"progressbar\"` labelled by the required `label` (visible or visually hidden), with `aria-valuenow`/`aria-valuemin`/`aria-valuemax` when determinate and `aria-valuetext` from `valueText`. Indeterminate bars omit `aria-valuenow`.",
+      "do": [
+        "Set `valueText` when the percentage is not the meaningful reading (\"3 of 5 files\")."
+      ],
+      "dont": [
+        "Use it for an unknown wait shorter than a few seconds; use Spinner."
+      ],
+      "import": "import { Progress } from '@pearpages/pulp-react/progress';",
+      "css": "@pearpages/pulp-react/progress.css",
+      "tokens": "--progress-*",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Required: what is progressing. Visible unless `hideLabel`."
+        },
+        {
+          "name": "hideLabel",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Keep the label for assistive technology only."
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "required": false,
+          "default": "100",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        },
+        {
+          "name": "tone",
+          "type": "enum",
+          "required": false,
+          "default": "primary",
+          "description": ""
+        },
+        {
+          "name": "value",
+          "type": "number",
+          "required": false,
+          "default": null,
+          "description": "Current value; omit for indeterminate."
+        },
+        {
+          "name": "valueText",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Human-readable value (\"3 of 10 files\"); defaults to a percentage."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "RadioGroup",
+      "description": "A set of native radios under one label. The group is labelled by\nreference (`aria-labelledby`) and described through Field, so description\nand error apply to the whole set. Keyboard is the browser's own: arrows\nmove and select within the group. Controlled or uncontrolled by `value`.",
+      "status": "stable",
+      "category": "Forms",
+      "accessibility": "A `radiogroup` labelled by reference through Field and described by its description and error. Native radios: arrows move and select within the group, Tab leaves it.",
+      "do": [
+        "Use it for two to five exclusive options that should all be visible."
+      ],
+      "dont": [
+        "Preselect a consequential choice; leave the group empty and mark it required."
+      ],
+      "import": "import { RadioGroup } from '@pearpages/pulp-react/radio';",
+      "css": "@pearpages/pulp-react/radio.css",
+      "tokens": "--radio-*",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Visible group label."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Initially selected value when uncontrolled."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Form field name shared by the radios. Generated when omitted."
+        },
+        {
+          "name": "onValueChange",
+          "type": "((value: string) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "orientation",
+          "type": "enum",
+          "required": false,
+          "default": "vertical",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Controlled selected value."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Radio",
+      "description": "One option of a RadioGroup: a native radio with its own visible label.",
+      "status": "stable",
+      "category": "Forms",
+      "accessibility": "A native `input type=\"radio\"` labelled by its visible text; the group semantics, description and error come from RadioGroup.",
+      "do": [
+        "Render it only inside RadioGroup."
+      ],
+      "dont": [
+        "Disable a single radio without saying why in its label or the group description."
+      ],
+      "import": "import { Radio } from '@pearpages/pulp-react/radio';",
+      "css": "@pearpages/pulp-react/radio.css",
+      "tokens": "--radio-*",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Visible label beside the radio."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": true,
+          "default": null,
+          "description": "The value this radio contributes to the group."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Applied to the wrapping label, not the input."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLInputElement>",
+          "required": false,
+          "default": null,
+          "description": "The `<input>` element."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Select",
+      "description": "A native `<select>` on top of Field: the browser's own popup, keyboard and\nassistive-technology support, with the closed control drawn from\n`--select-*` tokens. For rich options or multi-select, a listbox component\ncomes later on a headless layer; this one stays native on purpose.",
+      "status": "stable",
+      "category": "Forms",
+      "accessibility": "A native `select` on top of Field: the browser's own popup, keyboard and screen-reader behaviour; the placeholder is a disabled empty option when `required`.",
+      "do": [
+        "Use it for a plain list of words; it is the most robust choice on every platform."
+      ],
+      "dont": [
+        "Use it for options that need a description or an icon; use Picker."
+      ],
+      "import": "import { Select } from '@pearpages/pulp-react/select';",
+      "css": "@pearpages/pulp-react/select.css",
+      "tokens": "--select-*",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "`<option>` and `<optgroup>` elements."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Visible label. Always rendered."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Applied to the wrapper, not the select."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Presence marks the control invalid and announces the message."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "An empty first option shown until a value is chosen."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLSelectElement>",
+          "required": false,
+          "default": null,
+          "description": "The `<select>` element."
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Skeleton",
+      "description": "A placeholder for content that is loading. Decorative: hidden from\nassistive technology, so mark the *container* `aria-busy` and announce\nthe loaded state there. Width for text and rect is the consumer's (pass\na `className`); the shimmer runs only when motion is allowed.",
+      "status": "stable",
+      "category": "Feedback",
+      "accessibility": "`aria-hidden`: a placeholder has nothing to announce. Mark the container `aria-busy` while loading and clear it when content arrives; the shimmer stops under reduced motion.",
+      "do": [
+        "Match the shape of the content it stands in for.",
+        "Set `aria-busy` on the region, not on the skeleton."
+      ],
+      "dont": [
+        "Show it for content that arrives in under a few hundred milliseconds.",
+        "Animate it when the user prefers reduced motion; the CSS already stops it."
+      ],
+      "import": "import { Skeleton } from '@pearpages/pulp-react/skeleton';",
+      "css": "@pearpages/pulp-react/skeleton.css",
+      "tokens": "--skeleton-*",
+      "props": [
+        {
+          "name": "lines",
+          "type": "number",
+          "required": false,
+          "default": "1",
+          "description": "Number of text lines; the last is shorter."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLSpanElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "shape",
+          "type": "enum",
+          "required": false,
+          "default": "text",
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": "Circle diameter, from the control scale."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Slider",
+      "description": "Picks a number, or a range, on a track: React Aria's slider (decision\nrecord 001) provides the hidden range inputs, arrow, Page Up/Down, Home and\nEnd keys, drag with a thumb that stays under the pointer, and\n`aria-valuetext` in the formatted form. The output element shows the\nsame text, so what a screen reader hears is what sighted users see.",
+      "status": "experimental",
+      "category": "Forms",
+      "accessibility": "A `group` named by the label containing one hidden `input type=\"range\"` per thumb (named by `thumbLabels` for a range) with `aria-valuetext` in the formatted form; the `output` element shows the same text. Arrows step, Page Up/Down step by ten, Home/End jump; thumbs drag with mouse or touch.",
+      "do": [
+        "Set `formatOptions` so the spoken value matches the unit (\"40%\", \"€200\").",
+        "Use `hideLabel` only when a visible heading already names it."
+      ],
+      "dont": [
+        "Use it for precise values; provide a numeric field alongside.",
+        "Use a `step` so small the keyboard cannot reach the ends in reasonable time."
+      ],
+      "import": "import { Slider } from '@pearpages/pulp-react/slider';",
+      "css": "@pearpages/pulp-react/slider.css",
+      "tokens": "--slider-*",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Visible label. Always rendered; `hideLabel` keeps it for assistive technology only."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "defaultValue",
+          "type": "SliderValue",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "formatOptions",
+          "type": "NumberFormatOptions",
+          "required": false,
+          "default": null,
+          "description": "How the value reads in the output and to assistive technology, for instance `{ style: 'percent' }` or `{ style: 'currency', currency: 'EUR' }`."
+        },
+        {
+          "name": "hideLabel",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": ""
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "required": false,
+          "default": "100",
+          "description": ""
+        },
+        {
+          "name": "min",
+          "type": "number",
+          "required": false,
+          "default": "0",
+          "description": ""
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Submitted with a form; a range submits two inputs with this name."
+        },
+        {
+          "name": "onChange",
+          "type": "((value: T) => void)",
+          "required": false,
+          "default": null,
+          "description": "Called on every change while dragging or pressing arrows."
+        },
+        {
+          "name": "onChangeEnd",
+          "type": "((value: T) => void)",
+          "required": false,
+          "default": null,
+          "description": "Called once when the drag ends or the key is released."
+        },
+        {
+          "name": "orientation",
+          "type": "enum",
+          "required": false,
+          "default": "horizontal",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "default": null,
+          "description": "The group element."
+        },
+        {
+          "name": "showOutput",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Show the formatted value next to the label."
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "required": false,
+          "default": "1",
+          "description": ""
+        },
+        {
+          "name": "thumbLabels",
+          "type": "readonly [string, string]",
+          "required": false,
+          "default": "['Minimum', 'Maximum']",
+          "description": "Names for the two thumbs of a range."
+        },
+        {
+          "name": "value",
+          "type": "SliderValue",
+          "required": false,
+          "default": null,
+          "description": "One number, or a `[start, end]` pair for a range with two thumbs."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Spinner",
+      "description": "An indeterminate progress indicator. Announces its label as a status\nunless `decorative`, in which case the parent is responsible (Button sets\n`aria-busy`). Under reduced motion the ring stops but keeps its coloured\nquarter, so it still reads as \"in progress\".",
+      "status": "stable",
+      "category": "Feedback",
+      "accessibility": "`role=\"status\"` with a visually hidden label (\"Loading\" by default) unless `decorative`, in which case the parent announces busy. Under reduced motion the ring stops but keeps its coloured quarter.",
+      "do": [
+        "Use `decorative` inside a control that already sets `aria-busy`."
+      ],
+      "dont": [
+        "Show several spinners for one operation."
+      ],
+      "import": "import { Spinner } from '@pearpages/pulp-react/spinner';",
+      "css": "@pearpages/pulp-react/spinner.css",
+      "tokens": "--spinner-*",
+      "props": [
+        {
+          "name": "decorative",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Hide from assistive technology: the parent already announces busy."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "default": "Loading",
+          "description": "Announced to assistive technology (`role=\"status\"`)."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLSpanElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": "`inherit` follows the surrounding font size, for spinners inside controls."
+        },
+        {
+          "name": "tone",
+          "type": "enum",
+          "required": false,
+          "default": "default",
+          "description": "`inherit` draws with the surrounding text colour, for coloured controls."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Stack",
+      "description": "A flex column whose gap is a step on the spacing scale, so consumers\ncompose layout from tokens instead of writing padding and margins.\nRendered as `ul`/`ol` it keeps `role=\"list\"` explicitly, because Safari\nstops announcing a list once `list-style` is removed.",
+      "status": "stable",
+      "category": "Layout",
+      "accessibility": "Layout only: no role unless rendered as `ul`/`ol`, where `role=\"list\"` is kept explicitly because Safari drops list semantics without markers.",
+      "do": [
+        "Use `as=\"ul\"` for a list of like items so the count is announced."
+      ],
+      "dont": [
+        "Use it to space unrelated regions; it is one flex column."
+      ],
+      "import": "import { Stack } from '@pearpages/pulp-react/stack';",
+      "css": "@pearpages/pulp-react/stack.css",
+      "tokens": "--stack-*",
+      "props": [
+        {
+          "name": "align",
+          "type": "enum",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "as",
+          "type": "enum",
+          "required": false,
+          "default": "div",
+          "description": ""
+        },
+        {
+          "name": "gap",
+          "type": "enum",
+          "required": false,
+          "default": "3",
+          "description": "Step on the spacing scale (`--space-1` … `--space-8`)."
+        },
+        {
+          "name": "justify",
+          "type": "enum",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Switch",
+      "description": "An on/off control: a native checkbox with `role=\"switch\"`, so assistive\ntechnology announces on and off, and the browser handles keyboard, forms\nand state. Use it for settings that take effect immediately; use Checkbox\nfor choices submitted with a form. Drawn with `--switch-*` tokens.",
+      "status": "stable",
+      "category": "Forms",
+      "accessibility": "A native checkbox with `role=\"switch\"`, so on and off are announced; Space toggles; label, description and error wire through Field.",
+      "do": [
+        "Use it for settings that apply immediately."
+      ],
+      "dont": [
+        "Use it inside a form that needs a submit; use Checkbox."
+      ],
+      "import": "import { Switch } from '@pearpages/pulp-react/switch';",
+      "css": "@pearpages/pulp-react/switch.css",
+      "tokens": "--switch-*",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Visible label beside the switch."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Applied to the wrapper, not the input."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLInputElement>",
+          "required": false,
+          "default": null,
+          "description": "The `<input>` element."
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Table",
+      "description": "A data table on React Aria's grid (decision record 001): one Tab stop,\narrows move between rows and cells, Space toggles selection, Enter runs\nthe row action (see `onRowAction` for the selection rule), sortable\nheaders carry `aria-sort` and are pressed to change direction. Selection and sort are the caller's state; the table\nreports changes and renders them. Compose with `Table.Header`,\n`Table.Column`, `Table.Body`, `Table.Row` and `Table.Cell`; the selection\ncolumn appears by itself when rows are selectable.",
+      "status": "experimental",
+      "category": "Data",
+      "accessibility": "`role=\"grid\"` named by `aria-label` or `aria-labelledby`; one column is the row header (`isRowHeader`), sortable columns carry `aria-sort`, selectable rows `aria-selected`, and the selection column holds real checkboxes (\"Select All\" in the header). One tab stop: arrows move between rows and cells, Space toggles selection, Enter runs the row action, the header cells are pressed to sort.",
+      "do": [
+        "Mark exactly one column `isRowHeader`.",
+        "Give the table a name that says what the rows are."
+      ],
+      "dont": [
+        "Sort the data inside the table; sort your data from `onSortChange` and pass it back.",
+        "Use it for layout."
+      ],
+      "import": "import { Table } from '@pearpages/pulp-react/table';",
+      "css": "@pearpages/pulp-react/table.css",
+      "tokens": "--table-*",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "`Table.Header` then `Table.Body`."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "The table's accessible name. Pass `aria-labelledby` instead when a visible heading names it."
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Applied to the scroll container around the table."
+        },
+        {
+          "name": "defaultSelected",
+          "type": "readonly string[]",
+          "required": false,
+          "default": "[]",
+          "description": ""
+        },
+        {
+          "name": "defaultSort",
+          "type": "TableSort",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "density",
+          "type": "enum",
+          "required": false,
+          "default": "default",
+          "description": "Row padding steps down one token. The brand's `space.unit` sets the base."
+        },
+        {
+          "name": "disabledIds",
+          "type": "readonly string[]",
+          "required": false,
+          "default": null,
+          "description": "Rows that cannot be selected or activated."
+        },
+        {
+          "name": "onRowAction",
+          "type": "((id: string) => void)",
+          "required": false,
+          "default": null,
+          "description": "Called with the row id on Enter, on click, and on double click. Once\nrows are selectable and a selection exists, Enter and click toggle the\nselection instead (the vendor's rule, so touch users select without a\nmodifier key); double click still runs the action."
+        },
+        {
+          "name": "onSelectedChange",
+          "type": "((ids: string[]) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "onSortChange",
+          "type": "((sort: TableSort) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLTableElement>",
+          "required": false,
+          "default": null,
+          "description": "The `<table>` element."
+        },
+        {
+          "name": "selected",
+          "type": "readonly string[]",
+          "required": false,
+          "default": null,
+          "description": "Selected row ids (controlled)."
+        },
+        {
+          "name": "selectionMode",
+          "type": "enum",
+          "required": false,
+          "default": "none",
+          "description": ""
+        },
+        {
+          "name": "sort",
+          "type": "TableSort | null",
+          "required": false,
+          "default": null,
+          "description": "Current sort (controlled). Sorting the data is the caller's job: this is the header state."
+        },
+        {
+          "name": "stickyHeader",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "The header stays visible while the container scrolls. Give the container a height through `className`."
+        }
+      ],
+      "parts": [
+        {
+          "name": "Table.Header",
+          "description": "",
+          "props": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": true,
+              "default": null,
+              "description": "`Table.Column` elements."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Table.Column",
+          "description": "",
+          "props": [
+            {
+              "name": "align",
+              "type": "enum",
+              "required": false,
+              "default": "start",
+              "description": ""
+            },
+            {
+              "name": "allowsSorting",
+              "type": "boolean",
+              "required": false,
+              "default": "false",
+              "description": "Pressing the header sorts by it; the table reports the change through `onSortChange`."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": ""
+            },
+            {
+              "name": "id",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The column id `sort.column` refers to. Defaults to the column's text."
+            },
+            {
+              "name": "isRowHeader",
+              "type": "boolean",
+              "required": false,
+              "default": "false",
+              "description": "This column names the row for assistive technology. Exactly one column per table."
+            }
+          ]
+        },
+        {
+          "name": "Table.Body",
+          "description": "",
+          "props": [
+            {
+              "name": "children",
+              "type": "ReactNode | ((item: T) => ReactElement<unknown, string | JSXElementConstructor<any>>)",
+              "required": true,
+              "default": null,
+              "description": "`Table.Row` elements, or a function from an item to one when `items` is given."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": ""
+            },
+            {
+              "name": "emptyMessage",
+              "type": "ReactNode",
+              "required": false,
+              "default": "No rows",
+              "description": "Shown when there are no rows."
+            },
+            {
+              "name": "items",
+              "type": "Iterable<T>",
+              "required": false,
+              "default": null,
+              "description": "Rows from data: each item renders through the `children` function, keyed by `item.id`."
+            }
+          ]
+        },
+        {
+          "name": "Table.Row",
+          "description": "",
+          "props": [
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": true,
+              "default": null,
+              "description": "`Table.Cell` elements."
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": ""
+            },
+            {
+              "name": "id",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": "The row id used for selection, sorting callbacks and `onRowAction`. Required unless the row comes from `items`."
+            }
+          ]
+        },
+        {
+          "name": "Table.Cell",
+          "description": "",
+          "props": [
+            {
+              "name": "align",
+              "type": "enum",
+              "required": false,
+              "default": "start",
+              "description": ""
+            },
+            {
+              "name": "className",
+              "type": "string",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Tabs",
+      "description": "Tabbed sections following the WAI-ARIA Tabs pattern. Compose with\n`Tabs.List`, `Tabs.Tab` and `Tabs.Panel`; ids and ARIA relationships are\nwired automatically. One tab stop: arrows move between tabs, Home and End\njump to the ends, disabled tabs are skipped. State on the DOM:\n`data-orientation`, `data-state=\"active|inactive\"`.",
+      "status": "stable",
+      "category": "Navigation",
+      "accessibility": "The WAI-ARIA Tabs pattern: `tablist` with `aria-orientation`, `tab`s carrying `aria-selected` and `aria-controls`, `tabpanel`s labelled by their tab. One tab stop: arrows move (and select with automatic activation), Home/End jump, disabled tabs are skipped.",
+      "do": [
+        "Use `activation=\"manual\"` when switching a tab is expensive.",
+        "Name the `Tabs.List` with `aria-label`."
+      ],
+      "dont": [
+        "Use tabs for sequential steps; use a stepper pattern.",
+        "Put a link inside a tab."
+      ],
+      "import": "import { Tabs } from '@pearpages/pulp-react/tabs';",
+      "css": "@pearpages/pulp-react/tabs.css",
+      "tokens": "--tabs-*",
+      "props": [
+        {
+          "name": "activation",
+          "type": "enum",
+          "required": false,
+          "default": "automatic",
+          "description": "`automatic` selects a tab when it receives focus (arrow keys); `manual`\nmoves focus only and selects on Enter, Space or click."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Initially selected tab when uncontrolled."
+        },
+        {
+          "name": "onValueChange",
+          "type": "((value: string) => void)",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "orientation",
+          "type": "enum",
+          "required": false,
+          "default": "horizontal",
+          "description": "Layout and arrow-key axis."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Controlled selected tab."
+        }
+      ],
+      "parts": [
+        {
+          "name": "Tabs.List",
+          "description": "",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<HTMLDivElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Tabs.Tab",
+          "description": "",
+          "props": [
+            {
+              "name": "value",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": "Identifies the tab; the panel with the same value belongs to it."
+            },
+            {
+              "name": "ref",
+              "type": "Ref<HTMLButtonElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        },
+        {
+          "name": "Tabs.Panel",
+          "description": "",
+          "props": [
+            {
+              "name": "value",
+              "type": "string",
+              "required": true,
+              "default": null,
+              "description": ""
+            },
+            {
+              "name": "ref",
+              "type": "Ref<HTMLDivElement>",
+              "required": false,
+              "default": null,
+              "description": ""
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Text",
+      "description": "The type scale as a component. Every combination of size, weight, tone and\nfamily resolves through `--text-*` tokens, so body copy never carries its\nown font declarations. State on the DOM: `data-size`, `data-weight`,\n`data-tone`, `data-family`, `data-align`, `data-truncate`.",
+      "status": "stable",
+      "category": "Typography",
+      "accessibility": "Plain text with no role beyond the element chosen by `as`; `truncate` clips visually while the full text stays in the accessibility tree.",
+      "do": [
+        "Use `tone=\"faint\"` only on base and raised surfaces (its contrast is promised there)."
+      ],
+      "dont": [
+        "Use `as=\"label\"`; labels belong to Field."
+      ],
+      "import": "import { Text } from '@pearpages/pulp-react/text';",
+      "css": "@pearpages/pulp-react/text.css",
+      "tokens": "--text-*",
+      "props": [
+        {
+          "name": "align",
+          "type": "enum",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "as",
+          "type": "enum",
+          "required": false,
+          "default": "p",
+          "description": "The element to render. For a label use `Field.Label`."
+        },
+        {
+          "name": "family",
+          "type": "enum",
+          "required": false,
+          "default": "body",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        },
+        {
+          "name": "tone",
+          "type": "enum",
+          "required": false,
+          "default": "default",
+          "description": "Emphasis: `muted` for secondary text, `faint` for the least important."
+        },
+        {
+          "name": "truncate",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Single line with an ellipsis."
+        },
+        {
+          "name": "weight",
+          "type": "enum",
+          "required": false,
+          "default": "regular",
+          "description": ""
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "TextField",
+      "description": "A single-line text input on top of `Field`: label, description and error\nwired for assistive technology. Controlled and uncontrolled behave exactly\nlike the native input (`value`/`onChange` or `defaultValue`). Every value\ncomes from `--text-field-*` and `--field-*` tokens; state is exposed as\n`data-size`, `data-invalid`, `data-disabled` and `data-readonly` on the\nwrapper.",
+      "status": "stable",
+      "category": "Forms",
+      "accessibility": "A native text `input` wired through Field: `label[for]`, `aria-describedby` for description and error, `aria-invalid` and `aria-required`. Everything the browser gives a native input (autofill, IME, forms) applies.",
+      "do": [
+        "Always pass `label`; use a visible one.",
+        "Prefer `error` text that says how to fix the value."
+      ],
+      "dont": [
+        "Use `placeholder` as the label.",
+        "Use it for multi-line text; use Textarea."
+      ],
+      "import": "import { TextField } from '@pearpages/pulp-react/text-field';",
+      "css": "@pearpages/pulp-react/text-field.css",
+      "tokens": "--text-field-*",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Visible label. Always rendered: a placeholder is not a label."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Applied to the wrapper, not the input."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Help text under the field, exposed as the input's accessible description."
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Error message. Its presence marks the input invalid (`aria-invalid`,\n`data-invalid`) and the message is announced as an alert."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLInputElement>",
+          "required": false,
+          "default": null,
+          "description": "The `<input>` element."
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Textarea",
+      "description": "A multi-line text input on top of Field. Same contract as TextField;\nits own `--textarea-*` tokens so it can diverge. `rows` sets the initial\nheight; `autoGrow` follows the content in browsers that support\n`field-sizing`, and falls back to `rows` elsewhere.",
+      "status": "stable",
+      "category": "Forms",
+      "accessibility": "A native `textarea` wired through Field; `autoGrow` uses `field-sizing: content` where supported and falls back to `rows`.",
+      "do": [
+        "Set `rows` to the typical length of the answer."
+      ],
+      "dont": [
+        "Disable `resize` without giving the field enough rows."
+      ],
+      "import": "import { Textarea } from '@pearpages/pulp-react/textarea';",
+      "css": "@pearpages/pulp-react/textarea.css",
+      "tokens": "--textarea-*",
+      "props": [
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "Visible label. Always rendered."
+        },
+        {
+          "name": "autoGrow",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Grow with the content (`field-sizing: content`, where supported)."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Applied to the wrapper, not the textarea."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": ""
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Presence marks the control invalid and announces the message."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLTextAreaElement>",
+          "required": false,
+          "default": null,
+          "description": "The `<textarea>` element."
+        },
+        {
+          "name": "resize",
+          "type": "enum",
+          "required": false,
+          "default": "vertical",
+          "description": ""
+        },
+        {
+          "name": "size",
+          "type": "enum",
+          "required": false,
+          "default": "md",
+          "description": ""
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "ToastProvider",
+      "description": "Mount once near the app root. Owns a portal element with a polite live\nregion; `useToast()` adds notifications to it. Timers pause while the\nregion is hovered or holds focus, Escape dismisses the focused toast, and\nerror toasts stay until dismissed. Each toast is an Alert.",
+      "status": "stable",
+      "category": "Feedback",
+      "accessibility": "Owns a `region` named \"Notifications\" with `aria-live=\"polite\"`; each toast is an Alert with its live role off (the region announces). Timers pause while the region is hovered or holds focus; Escape dismisses the focused toast; error toasts stay until dismissed.",
+      "do": [
+        "Mount it once near the app root.",
+        "Keep messages to one sentence; put detail behind an `action`."
+      ],
+      "dont": [
+        "Use a toast for an error the user must fix in a form; show it at the field.",
+        "Stack more than a few; the cap drops the oldest."
+      ],
+      "import": "import { ToastProvider } from '@pearpages/pulp-react/toast';",
+      "css": "@pearpages/pulp-react/toast.css",
+      "tokens": "--toast-*",
+      "props": [
+        {
+          "name": "duration",
+          "type": "number",
+          "required": false,
+          "default": "6000",
+          "description": "Default auto-dismiss time in milliseconds."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "default": "Notifications",
+          "description": "Accessible name of the region."
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "required": false,
+          "default": "5",
+          "description": "Most toasts shown at once; the oldest is dismissed first."
+        },
+        {
+          "name": "placement",
+          "type": "enum",
+          "required": false,
+          "default": "bottom-end",
+          "description": ""
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "Tooltip",
+      "description": "A short description shown on hover or focus and linked with\n`aria-describedby` while visible. Never the only name of a control: use it\nfor extra detail, and give icon-only controls a real label. Escape hides it.",
+      "status": "stable",
+      "category": "Overlays",
+      "accessibility": "Shown on hover after a delay and on focus immediately; the trigger gets `aria-describedby` pointing at the `tooltip` while it is visible; Escape hides it. It is a description, never a name.",
+      "do": [
+        "Use it for extra detail on controls that already have a name."
+      ],
+      "dont": [
+        "Put interactive content in it.",
+        "Use it to name an icon-only control; use IconButton's `label`."
+      ],
+      "import": "import { Tooltip } from '@pearpages/pulp-react/tooltip';",
+      "css": "@pearpages/pulp-react/tooltip.css",
+      "tokens": "--tooltip-*",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactElement<unknown, string | JSXElementConstructor<any>>",
+          "required": true,
+          "default": null,
+          "description": "The single element that owns the tooltip; it receives the hover, focus and `aria-describedby` wiring."
+        },
+        {
+          "name": "content",
+          "type": "ReactNode",
+          "required": true,
+          "default": null,
+          "description": "The tooltip text. Supplementary only: it must not be the control's only name."
+        },
+        {
+          "name": "delay",
+          "type": "number",
+          "required": false,
+          "default": "300",
+          "description": "Hover delay in milliseconds. Focus shows immediately."
+        },
+        {
+          "name": "placement",
+          "type": "enum",
+          "required": false,
+          "default": "top",
+          "description": "Preferred side; flips when there is no room."
+        }
+      ],
+      "parts": []
+    },
+    {
+      "name": "VisuallyHidden",
+      "description": "Content for assistive technology only: read by screen readers, invisible\non screen, still in the accessibility tree (unlike `display: none`). Use\nit to give icon-only controls a name or to add context a sighted user\ngets from layout.",
+      "status": "stable",
+      "category": "Utilities",
+      "accessibility": "In the accessibility tree, out of the layout (clip-path, not `display: none`).",
+      "do": [
+        "Use it for context a sighted user gets from layout (\"Sort by\", \"Step 2 of 4\")."
+      ],
+      "dont": [
+        "Hide instructions that sighted users also need."
+      ],
+      "import": "import { VisuallyHidden } from '@pearpages/pulp-react/visually-hidden';",
+      "css": "@pearpages/pulp-react/visually-hidden.css",
+      "tokens": "--visually-hidden-*",
+      "props": [
+        {
+          "name": "as",
+          "type": "enum",
+          "required": false,
+          "default": "span",
+          "description": ""
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "required": false,
+          "default": null,
+          "description": ""
+        }
+      ],
+      "parts": []
+    }
+  ]
+}