ionbase-ui 0.16.0 → 0.17.0

package/dist/meta/components.json

@@ -0,0 +1,4757 @@
+{
+  "package": "ionbase-ui",
+  "version": "0.17.0",
+  "generated": "by scripts/build-meta.mjs — do not edit; intent lives in meta/*.json",
+  "hooks": [
+    "useToast"
+  ],
+  "components": {
+    "Alert": {
+      "name": "Alert",
+      "source": "src/components/Alert.tsx",
+      "propsType": "AlertProps",
+      "description": "Alert — Figma `Alert` (812:1902).\n\n`Intent` x `Emphasis` x `Layout`, with the parts as props rather than\nvariants. Intents match `Badge` exactly, so a status mapped to one can be\npassed to the other.\n\nROLE IS CHOSEN BY INTENT, NOT PASSED IN. `error` and `warning` render\n`role=\"alert\"`, which interrupts a screen reader; the rest render\n`role=\"status\"`, which waits for a pause. Getting this backwards is the\ncommon failure — a page of `role=\"alert\"` status messages talks over the\nuser, and an error announced as a status is missed.\n\nThe icon is decorative: it repeats what the intent's colour and copy already\nsay, so it is `aria-hidden` and the live region carries the text alone.",
+      "import": "import { Alert } from 'ionbase-ui';",
+      "status": "stable",
+      "since": "0.13.1",
+      "summary": "A persistent, in-page status message. Intent picks the ARIA role for you.",
+      "useWhen": [
+        "the message belongs to the page and should stay until the condition clears",
+        "form-level validation summaries, permission notices, degraded-state banners"
+      ],
+      "useInstead": [
+        {
+          "when": "the message is transient and self-dismissing",
+          "use": "Toast",
+          "why": "an Alert stays in the layout; a Toast does not"
+        },
+        {
+          "when": "it labels a value inline rather than telling the user something",
+          "use": "Badge",
+          "why": "Badge shares Alert's intent vocabulary exactly, so a status mapped to one passes to the other"
+        }
+      ],
+      "variants": {
+        "intent": {
+          "error": {
+            "use": "something failed and the user must act",
+            "aria": "role=alert — interrupts the screen reader"
+          },
+          "warning": {
+            "use": "something may fail or has degraded",
+            "aria": "role=alert — interrupts the screen reader"
+          },
+          "success": {
+            "use": "an operation completed",
+            "aria": "role=status"
+          },
+          "information": {
+            "use": "neutral context the user did not ask for",
+            "aria": "role=status"
+          },
+          "primary": {
+            "use": "product announcements and promotions",
+            "aria": "role=status"
+          },
+          "neutral": {
+            "use": "low-emphasis context",
+            "aria": "role=status"
+          }
+        },
+        "emphasis": {
+          "subtle": {
+            "use": "the default — tinted surface, readable in long pages"
+          },
+          "solid": {
+            "use": "reserve for a single high-stakes banner; it dominates the layout"
+          }
+        },
+        "layout": {
+          "inline": {
+            "use": "inside a form or card, in the flow of content"
+          },
+          "banner": {
+            "use": "full-bleed at the top of a page or region"
+          }
+        }
+      },
+      "a11y": {
+        "guarantees": [
+          "the role follows the intent — error and warning are role=alert, everything else role=status",
+          "the icon is aria-hidden, so the live region announces the text once and not the glyph"
+        ],
+        "requires": [
+          "`dismissLabel` when `onDismiss` is set and the surrounding copy does not name the action"
+        ],
+        "notes": [
+          "role=alert interrupts whatever the screen reader is saying; role=status waits for a pause. This is why the role is not a prop."
+        ]
+      },
+      "antiPatterns": [
+        {
+          "dont": "using intent=\"error\" for a message that is merely informational",
+          "why": "error renders role=alert, which interrupts the screen reader. A page of interrupting status messages talks over the user."
+        },
+        {
+          "dont": "using intent=\"information\" for a genuine failure",
+          "why": "role=status waits for a pause, so a real error can be missed entirely"
+        },
+        {
+          "dont": "rendering an Alert conditionally for a transient confirmation",
+          "do": "useToast",
+          "why": "an Alert that appears and disappears shifts the layout under the user"
+        }
+      ],
+      "stylesheet": "src/styles/alert.css",
+      "tokens": [
+        "--border-default",
+        "--border-error-strong",
+        "--border-error-subtle",
+        "--border-information-strong",
+        "--border-information-subtle",
+        "--border-inverse",
+        "--border-primary-strong",
+        "--border-primary-subtle",
+        "--border-success-strong",
+        "--border-success-subtle",
+        "--border-warning-strong",
+        "--border-warning-subtle",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-regular",
+        "--icon-error",
+        "--icon-information",
+        "--icon-on-color",
+        "--icon-primary",
+        "--icon-secondary",
+        "--icon-size-md",
+        "--icon-success",
+        "--icon-warning",
+        "--ion-alert-border",
+        "--ion-alert-icon",
+        "--ion-alert-surface",
+        "--ion-alert-text",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--radius-md",
+        "--radius-sm",
+        "--ring-focus",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-32",
+        "--spacing-8",
+        "--surface-error",
+        "--surface-error-subtle",
+        "--surface-hover",
+        "--surface-information",
+        "--surface-information-subtle",
+        "--surface-inverse",
+        "--surface-muted",
+        "--surface-primary",
+        "--surface-primary-subtle",
+        "--surface-success",
+        "--surface-success-subtle",
+        "--surface-warning",
+        "--surface-warning-subtle",
+        "--text-error",
+        "--text-information",
+        "--text-link",
+        "--text-on-color",
+        "--text-secondary",
+        "--text-success",
+        "--text-warning",
+        "--type-body",
+        "--type-body-line-height"
+      ],
+      "props": {
+        "intent": {
+          "type": "AlertIntent | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Intent` variant. Same vocabulary as `Badge`.",
+          "values": [
+            "neutral",
+            "primary",
+            "success",
+            "warning",
+            "error",
+            "information"
+          ],
+          "default": "information"
+        },
+        "emphasis": {
+          "type": "AlertEmphasis | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Emphasis` variant.",
+          "values": [
+            "subtle",
+            "solid"
+          ],
+          "default": "subtle"
+        },
+        "layout": {
+          "type": "AlertLayout | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Layout` variant.",
+          "values": [
+            "inline",
+            "banner"
+          ],
+          "default": "inline"
+        },
+        "title": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Optional heading above the message."
+        },
+        "hideIcon": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Hide the leading icon. Shown by default."
+        },
+        "icon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Replace the intent's glyph."
+        },
+        "actions": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Action buttons, rendered under the message."
+        },
+        "onDismiss": {
+          "type": "(() => void) | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Called when the dismiss button is pressed. Omit for no dismiss button."
+        },
+        "dismissLabel": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Accessible name for the dismiss button.",
+          "default": "Dismiss"
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "The message."
+        }
+      },
+      "propCounts": {
+        "own": 10,
+        "aria": 0,
+        "dom": 276,
+        "other": 0
+      }
+    },
+    "Avatar": {
+      "name": "Avatar",
+      "source": "src/components/Avatar.tsx",
+      "propsType": "AvatarProps",
+      "description": "Avatar picks its content the way Figma's `Type` variant does, but by\nprecedence rather than by a prop: image, then initials, then icon. A caller\npassing `src` and `initials` gets the image with the initials as its alt\nfallback, which is what you want when the image 404s.\n\nA failed `src` falls through to initials (then icon) rather than leaving the\nbrowser's broken-image glyph — that is why initials exist alongside `src`.\n\nIt is a `<span>`, not a `<div>`, so it can sit inline beside text without the\ncaller fighting a block element.",
+      "import": "import { Avatar } from 'ionbase-ui';",
+      "stylesheet": "src/styles/avatar.css",
+      "tokens": [
+        "--border-strong",
+        "--border-width-default",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--icon-size-2xs",
+        "--icon-size-lg",
+        "--icon-size-md",
+        "--icon-size-sm",
+        "--icon-tertiary",
+        "--ion-avatar-font-size",
+        "--ion-avatar-group-overlap",
+        "--ion-avatar-icon",
+        "--ion-avatar-line-height",
+        "--ion-avatar-radius",
+        "--ion-avatar-size",
+        "--radius-full",
+        "--radius-md",
+        "--radius-sm",
+        "--radius-xs",
+        "--spacing-24",
+        "--spacing-32",
+        "--spacing-40",
+        "--spacing-48",
+        "--surface-muted",
+        "--text-tertiary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height",
+        "--type-caption",
+        "--type-caption-line-height",
+        "--type-h5",
+        "--type-h5-line-height"
+      ],
+      "props": {
+        "size": {
+          "type": "AvatarSize | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Size` variant: Mini 24, Small 32, Medium 40, Large 48.",
+          "values": [
+            "mini",
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        "shape": {
+          "type": "AvatarShape | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Shape` variant.",
+          "values": [
+            "circle",
+            "square"
+          ]
+        },
+        "src": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Image source. Figma's `Type=Image`."
+        },
+        "alt": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Describes the person, not the picture. Falls back to `initials` so the\navatar is never announced as an unlabelled image."
+        },
+        "initials": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Type=Character`. Rendered when there is no `src`, or when `src`\nfails to load."
+        },
+        "icon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Type=Icon`. Rendered when there is neither `src` nor `initials`."
+        }
+      },
+      "propCounts": {
+        "own": 6,
+        "aria": 0,
+        "dom": 278,
+        "other": 0
+      }
+    },
+    "AvatarGroup": {
+      "name": "AvatarGroup",
+      "source": "src/components/Avatar.tsx",
+      "propsType": "AvatarGroupProps",
+      "description": "AvatarGroup overlaps its children by a quarter of the avatar size, matching\nFigma's -6 / -8 / -10 / -12 gaps at Mini / Small / Medium / Large.\n\nGroup defaults fill in `size` / `shape` only when a child Avatar has not set\nthem itself — an explicit child prop wins. Non-Avatar children are left\nalone so `size`/`shape` are never pushed onto arbitrary DOM nodes.\n\nChildren render in source order because that is Figma's stacking: each avatar\npaints over the one before it, so the `+N` overflow ends up on top. Later\nsiblings paint later, so this needs no z-index.",
+      "import": "import { AvatarGroup } from 'ionbase-ui';",
+      "stylesheet": "src/styles/avatar.css",
+      "tokens": [
+        "--border-strong",
+        "--border-width-default",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--icon-size-2xs",
+        "--icon-size-lg",
+        "--icon-size-md",
+        "--icon-size-sm",
+        "--icon-tertiary",
+        "--ion-avatar-font-size",
+        "--ion-avatar-group-overlap",
+        "--ion-avatar-icon",
+        "--ion-avatar-line-height",
+        "--ion-avatar-radius",
+        "--ion-avatar-size",
+        "--radius-full",
+        "--radius-md",
+        "--radius-sm",
+        "--radius-xs",
+        "--spacing-24",
+        "--spacing-32",
+        "--spacing-40",
+        "--spacing-48",
+        "--surface-muted",
+        "--text-tertiary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height",
+        "--type-caption",
+        "--type-caption-line-height",
+        "--type-h5",
+        "--type-h5-line-height"
+      ],
+      "props": {
+        "size": {
+          "type": "AvatarSize | undefined",
+          "required": false,
+          "origin": "own",
+          "values": [
+            "mini",
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        "max": {
+          "type": "number | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Cap on avatars shown; the remainder becomes a `+N` overflow avatar."
+        },
+        "shape": {
+          "type": "AvatarShape | undefined",
+          "required": false,
+          "origin": "own",
+          "values": [
+            "circle",
+            "square"
+          ]
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 4,
+        "aria": 0,
+        "dom": 277,
+        "other": 0
+      }
+    },
+    "Badge": {
+      "name": "Badge",
+      "source": "src/components/Badge.tsx",
+      "propsType": "BadgeProps",
+      "description": "Badge is presentational — no role, no interaction. React Aria has nothing to\noffer here, so this is a plain span rather than a hook wrapper for its own\nsake.\n\nIt carries no `status` or `alert` role on purpose: a badge is a label on\nsomething else, and announcing it as a live region would interrupt screen\nreader users on every render. Wrap it yourself if the value genuinely changes\nand matters.",
+      "import": "import { Badge } from 'ionbase-ui';",
+      "stylesheet": "src/styles/badge.css",
+      "tokens": [
+        "--border-default",
+        "--border-error-subtle",
+        "--border-information-subtle",
+        "--border-primary-subtle",
+        "--border-success-subtle",
+        "--border-warning-subtle",
+        "--border-width-default",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--icon-error",
+        "--icon-information",
+        "--icon-primary",
+        "--icon-secondary",
+        "--icon-success",
+        "--icon-warning",
+        "--radius-full",
+        "--spacing-2",
+        "--spacing-4",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-error-subtle",
+        "--surface-information-subtle",
+        "--surface-muted",
+        "--surface-primary-subtle",
+        "--surface-success-subtle",
+        "--surface-warning-subtle",
+        "--text-error",
+        "--text-information",
+        "--text-link",
+        "--text-secondary",
+        "--text-success",
+        "--text-warning",
+        "--type-caption",
+        "--type-caption-line-height"
+      ],
+      "props": {
+        "intent": {
+          "type": "BadgeIntent | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Intent` variant.",
+          "values": [
+            "neutral",
+            "primary",
+            "success",
+            "warning",
+            "error",
+            "information"
+          ]
+        },
+        "dot": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Show the leading dot marker. Figma's `Show Dot` boolean.\nThe dot inherits the intent's foreground colour, so it needs no prop."
+        },
+        "icon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Leading icon. Figma's `Show Icon` + `Icon` swap. Mutually exclusive with `dot`."
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 4,
+        "aria": 0,
+        "dom": 277,
+        "other": 0
+      }
+    },
+    "Button": {
+      "name": "Button",
+      "source": "src/components/Button.tsx",
+      "propsType": "ButtonProps",
+      "import": "import { Button } from 'ionbase-ui';",
+      "status": "stable",
+      "summary": "Triggers an action in place. Never navigates.",
+      "useWhen": [
+        "the interaction performs an action — submit, save, delete, open a dialog",
+        "the result stays on the current page"
+      ],
+      "useInstead": [
+        {
+          "when": "it navigates to a URL or changes route",
+          "use": "Link",
+          "why": "Link renders an <a>. Middle-click, cmd-click, copy-link-address and 'open in new tab' all work on an anchor and none of them work on a button."
+        },
+        {
+          "when": "it toggles a persistent boolean setting",
+          "use": "Toggle",
+          "why": "a toggle announces its on/off state; a button announces only its name"
+        }
+      ],
+      "variants": {
+        "variant": {
+          "primary-brand": {
+            "use": "the single most important action in a view",
+            "limit": "one per view or dialog"
+          },
+          "primary-neutral": {
+            "use": "a primary action that should not carry brand colour"
+          },
+          "primary-soft": {
+            "use": "a primary action on a dense or already-colourful surface"
+          },
+          "secondary": {
+            "use": "supporting actions shown alongside a primary one"
+          },
+          "tertiary": {
+            "use": "low-emphasis actions — Cancel, Back, inline row actions"
+          },
+          "destructive": {
+            "use": "irreversible actions",
+            "requires": "a Modal confirmation before the action runs"
+          },
+          "success": {
+            "use": "confirms the end of a flow. Rarely the right answer — prefer primary-brand."
+          }
+        },
+        "size": {
+          "sm": {
+            "use": "table rows, toolbars, dense layouts"
+          },
+          "md": {
+            "use": "the default; forms and page-level actions"
+          },
+          "lg": {
+            "use": "prominent standalone actions"
+          },
+          "xl": {
+            "use": "marketing and empty-state calls to action"
+          }
+        }
+      },
+      "slots": {
+        "startIcon": {
+          "accepts": "Icon",
+          "note": "omit Icon's `label` — the Button's own text already names it, and a labelled icon is announced twice"
+        },
+        "endIcon": {
+          "accepts": "Icon",
+          "note": "same as startIcon"
+        }
+      },
+      "a11y": {
+        "role": "button",
+        "guarantees": [
+          "the focus ring appears for keyboard focus and not for a mouse click",
+          "hover does not latch on touch devices"
+        ],
+        "requires": [
+          "an accessible name — `children`, or `aria-label` when the button is icon-only"
+        ]
+      },
+      "antiPatterns": [
+        {
+          "dont": "<Button onPress={() => router.push('/settings')}>Settings</Button>",
+          "do": "<Link href=\"/settings\">Settings</Link>",
+          "why": "a button that navigates breaks middle-click, cmd-click and copy-link, and is announced as a button rather than a link"
+        },
+        {
+          "dont": "two variant=\"primary-brand\" buttons in the same dialog",
+          "do": "one primary-brand, the rest secondary or tertiary",
+          "why": "two primaries is the same as none — nothing indicates the expected action"
+        },
+        {
+          "dont": "<Button variant=\"destructive\" onPress={deleteAccount}>",
+          "do": "open a Modal first and put the destructive Button in its footer",
+          "why": "irreversible actions need a confirmation step"
+        },
+        {
+          "dont": "<Button><Icon as={Trash} /></Button>",
+          "do": "<Button aria-label=\"Delete\"><Icon as={Trash} /></Button>",
+          "why": "an icon-only button with no aria-label is announced as just 'button'"
+        },
+        {
+          "dont": "<Button onClick={...}>",
+          "do": "<Button onPress={...}>",
+          "why": "onPress is React Aria's unified pointer/keyboard/touch handler. onClick works but skips the touch and keyboard normalisation the rest of the system relies on."
+        }
+      ],
+      "deprecated": [
+        {
+          "prop": "disabled",
+          "replacement": "isDisabled",
+          "note": "still type-checks, so this will not fail loudly"
+        }
+      ],
+      "stylesheet": "src/styles/button.css",
+      "tokens": [
+        "--border-disabled",
+        "--border-error-strong",
+        "--border-inverse",
+        "--border-primary",
+        "--border-primary-strong",
+        "--border-primary-subtle",
+        "--border-strong",
+        "--border-stronger",
+        "--border-success-strong",
+        "--border-width-default",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--icon-size-lg",
+        "--icon-size-md",
+        "--icon-size-xs",
+        "--ion-button-elevation",
+        "--ion-button-font-size",
+        "--ion-button-gap",
+        "--ion-button-icon-size",
+        "--ion-button-inset-flush",
+        "--ion-button-inset-lifted",
+        "--ion-button-line-height",
+        "--ion-button-padding-x",
+        "--ion-button-pressed",
+        "--ion-button-raised",
+        "--ion-button-ring",
+        "--ion-button-size",
+        "--ion-duration-base",
+        "--ion-duration-fast",
+        "--ion-ease-out",
+        "--ion-shadow-focus-md",
+        "--ion-shadow-inset-flush-lg",
+        "--ion-shadow-inset-flush-sm",
+        "--ion-shadow-inset-flush-xs",
+        "--ion-shadow-inset-lifted-lg",
+        "--ion-shadow-inset-lifted-sm",
+        "--ion-shadow-inset-lifted-xs",
+        "--ion-shadow-none",
+        "--ion-shadow-raised-lifted-lg",
+        "--ion-shadow-raised-lifted-sm",
+        "--ion-shadow-raised-lifted-xs",
+        "--radius-md",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-20",
+        "--spacing-24",
+        "--spacing-32",
+        "--spacing-40",
+        "--spacing-48",
+        "--spacing-56",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-disabled",
+        "--surface-error",
+        "--surface-error-hover",
+        "--surface-error-pressed",
+        "--surface-inverse",
+        "--surface-inverse-subtle",
+        "--surface-muted",
+        "--surface-page",
+        "--surface-primary",
+        "--surface-primary-hover",
+        "--surface-primary-pressed",
+        "--surface-primary-subtle",
+        "--surface-primary-subtle-hover",
+        "--surface-primary-tint",
+        "--surface-success",
+        "--surface-success-hover",
+        "--surface-success-pressed",
+        "--text-disabled",
+        "--text-on-color",
+        "--text-primary",
+        "--text-secondary",
+        "--type-body",
+        "--type-body-lg",
+        "--type-body-lg-line-height",
+        "--type-body-line-height",
+        "--type-body-md",
+        "--type-body-md-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "variant": {
+          "type": "\"success\" | \"primary-brand\" | \"primary-neutral\" | \"primary-soft\" | \"secondary\" | \"tertiary\" | \"destructive\" | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "The visual style variant of the button.",
+          "values": [
+            "success",
+            "primary-brand",
+            "primary-neutral",
+            "primary-soft",
+            "secondary",
+            "tertiary",
+            "destructive"
+          ],
+          "default": "primary-brand"
+        },
+        "size": {
+          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "The size of the button.",
+          "values": [
+            "sm",
+            "md",
+            "lg",
+            "xl"
+          ],
+          "default": "md"
+        },
+        "startIcon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Optional icon to render before the label."
+        },
+        "endIcon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Optional icon to render after the label."
+        },
+        "className": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Additional CSS class names."
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Children element to render inside the button."
+        },
+        "disabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "tags": {
+            "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+          }
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether the button is disabled."
+        },
+        "onPress": {
+          "type": "((e: PressEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the press is released over the target."
+        },
+        "onPressStart": {
+          "type": "((e: PressEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a press interaction starts."
+        },
+        "onPressEnd": {
+          "type": "((e: PressEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target."
+        },
+        "onPressChange": {
+          "type": "((isPressed: boolean) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the press state changes."
+        },
+        "onPressUp": {
+          "type": "((e: PressEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not."
+        },
+        "onClick": {
+          "type": "((e: MouseEvent<FocusableElement>) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "**Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress`\nprovided for compatibility with other libraries. `onPress` provides\nadditional event details for non-mouse interactions."
+        },
+        "autoFocus": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether the element should receive focus on render."
+        },
+        "onFocus": {
+          "type": "((e: FocusEvent<Element, Element>) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the element receives focus."
+        },
+        "onBlur": {
+          "type": "((e: FocusEvent<Element, Element>) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the element loses focus."
+        },
+        "onFocusChange": {
+          "type": "((isFocused: boolean) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the element's focus status changes."
+        },
+        "onKeyDown": {
+          "type": "((e: KeyboardEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a key is pressed."
+        },
+        "onKeyUp": {
+          "type": "((e: KeyboardEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a key is released."
+        },
+        "href": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "A URL to link to if elementType=\"a\"."
+        },
+        "target": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The target window for the link."
+        },
+        "rel": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The relationship between the linked resource and the current page. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)."
+        },
+        "elementType": {
+          "type": "JSXElementConstructor<any> | \"button\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.",
+          "tags": {
+            "default": "'button'"
+          }
+        },
+        "aria-disabled": {
+          "type": "boolean | \"true\" | \"false\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Indicates whether the element is disabled to users of assistive technology."
+        },
+        "aria-expanded": {
+          "type": "boolean | \"true\" | \"false\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Indicates whether the element, or another grouping element it controls, is currently expanded\nor collapsed."
+        },
+        "aria-haspopup": {
+          "type": "boolean | \"true\" | \"false\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that\ncan be triggered by an element."
+        },
+        "aria-controls": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) whose contents or presence are controlled by the current\nelement."
+        },
+        "aria-pressed": {
+          "type": "boolean | \"true\" | \"false\" | \"mixed\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Indicates the current \"pressed\" state of toggle buttons."
+        },
+        "aria-current": {
+          "type": "boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Indicates whether this element represents the current item within a container or set of related\nelements."
+        },
+        "type": {
+          "type": "\"button\" | \"submit\" | \"reset\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The behavior of the button when used in an HTML form.",
+          "values": [
+            "button",
+            "submit",
+            "reset"
+          ],
+          "tags": {
+            "default": "'button'"
+          }
+        },
+        "preventFocusOnPress": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether to prevent focus from moving to the button when pressing it.\n\nCaution, this can make the button inaccessible and should only be used when alternative\nkeyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's\nincrement/decrement control."
+        },
+        "form": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The `<form>` element to associate the button with.\nThe value of this attribute must be the id of a `<form>` in the same document.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form)."
+        },
+        "formAction": {
+          "type": "string | ((formData: FormData) => void | Promise<void>) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The URL that processes the information submitted by the button.\nOverrides the action attribute of the button's form owner."
+        },
+        "formEncType": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Indicates how to encode the form data that is submitted."
+        },
+        "formMethod": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Indicates the HTTP method used to submit the form."
+        },
+        "formNoValidate": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Indicates that the form is not to be validated when it is submitted."
+        },
+        "formTarget": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Overrides the target attribute of the button's form owner."
+        },
+        "name": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Submitted as a pair with the button's value as part of the form data."
+        },
+        "value": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The value associated with the button's name when it's submitted with the form data."
+        },
+        "excludeFromTabOrder": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available."
+        },
+        "id": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The element's unique identifier. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)."
+        },
+        "aria-label": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Defines a string value that labels the current element."
+        },
+        "aria-labelledby": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that labels the current element."
+        },
+        "aria-describedby": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that describes the object."
+        },
+        "aria-details": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that provide a detailed, extended description for the\nobject."
+        }
+      },
+      "propCounts": {
+        "own": 7,
+        "aria": 39,
+        "dom": 0,
+        "other": 0
+      }
+    },
+    "Checkbox": {
+      "name": "Checkbox",
+      "source": "src/components/Checkbox.tsx",
+      "propsType": "CheckboxProps",
+      "description": "Checkbox wraps a native `<input type=\"checkbox\">` and hides it.\n\nThe native input is kept rather than replaced by a div with `role=checkbox`\nbecause it brings form association, the indeterminate property, label\nclicking, and correct announcement — none of which are free to reimplement,\nand all of which are easy to get subtly wrong.\n\n`indeterminate` is the reason for the effect below: HTML has no\n`indeterminate` attribute, only a DOM property, so React cannot set it\ndeclaratively and it must be written after every render.",
+      "import": "import { Checkbox } from 'ionbase-ui';",
+      "stylesheet": "src/styles/checkbox.css",
+      "tokens": [
+        "--border-disabled",
+        "--border-error-strong",
+        "--border-focus",
+        "--border-inverse",
+        "--border-primary-strong",
+        "--border-stronger",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--icon-disabled",
+        "--icon-on-color",
+        "--ion-checkbox-border",
+        "--ion-checkbox-fill",
+        "--ion-checkbox-font-size",
+        "--ion-checkbox-gap",
+        "--ion-checkbox-line-height",
+        "--ion-checkbox-mark",
+        "--ion-checkbox-radius",
+        "--ion-checkbox-raised",
+        "--ion-checkbox-size",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--ion-shadow-raised-flush-lg",
+        "--ion-shadow-raised-flush-sm",
+        "--ion-shadow-raised-flush-xs",
+        "--radius-sm",
+        "--radius-xs",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-20",
+        "--spacing-24",
+        "--spacing-4",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-disabled",
+        "--surface-error",
+        "--surface-inverse",
+        "--surface-primary",
+        "--text-disabled",
+        "--text-secondary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "size": {
+          "type": "CheckboxSize | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Size` variant: Small, Medium, Large.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        "intent": {
+          "type": "CheckboxIntent | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Color` variant: Brand, Neutral, Danger.",
+          "values": [
+            "neutral",
+            "brand",
+            "danger"
+          ],
+          "default": "brand"
+        },
+        "isIndeterminate": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Indeterminate` state. Not an HTML attribute — `indeterminate` is a\nDOM property only, so it has to be assigned after render.",
+          "default": false
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Whether the checkbox is disabled."
+        },
+        "disabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "tags": {
+            "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+          }
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Show Label` + `Label`. Omit for a bare box."
+        }
+      },
+      "propCounts": {
+        "own": 6,
+        "aria": 0,
+        "dom": 304,
+        "other": 0
+      }
+    },
+    "Divider": {
+      "name": "Divider",
+      "source": "src/components/Divider.tsx",
+      "propsType": "DividerProps",
+      "description": "A single `<hr>`, matching Figma's `Border` (70:22153).\n\n`<hr>` rather than a styled `<div>`: it is a semantic thematic break, so a\nscreen reader announces it as one, and it needs no `role` to get there.\n`aria-orientation` is set for the vertical case, since a vertical rule\ninside a horizontal toolbar is the one shape a screen reader cannot infer\nfrom the element alone.",
+      "import": "import { Divider } from 'ionbase-ui';",
+      "stylesheet": "src/styles/divider.css",
+      "tokens": [
+        "--border-strong",
+        "--border-width-default"
+      ],
+      "props": {
+        "orientation": {
+          "type": "DividerOrientation | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches Figma's `Style` variant.",
+          "values": [
+            "horizontal",
+            "vertical"
+          ]
+        }
+      },
+      "propCounts": {
+        "own": 1,
+        "aria": 0,
+        "dom": 278,
+        "other": 0
+      }
+    },
+    "FullCard": {
+      "name": "FullCard",
+      "source": "src/components/FullCard.tsx",
+      "propsType": "FullCardProps",
+      "description": "Full Card — the full-bleed case study row from Figma `Full Card` (592:857).\n\nA text column beside a framed media panel, split down the middle, mirrored\nby the `Alignment` variant.\n\nThe split holds from 1080 and stacks below it, media above content in BOTH\nalignments — `Alignment` names a horizontal side and\nstops meaning anything once there is one column, so it does not get to\ndecide the vertical order too. Size is a media query, not a prop, the same\ncall Header makes about Device.\n\nWHY THE `show*` BOOLEANS ARE GONE\n\nFigma carries `Show Eyebrow`, `Show Description` and `Show Actions` beside\nthe slots they gate, because a Figma component instance always holds every\nlayer and needs a switch to hide one. React has no such constraint — an\nabsent prop is the switch. Badge made the same call with `Show Dot`, and\nkeeping both would have let `showActions` and `actions` disagree.\n\n`headline` is required, and it is the only required prop. The heading is\nwhat makes this a section rather than a decorated div, and every other part\nof the card is optional in Figma too.\n\nNo `'use client'`: nothing here is stateful or interactive. The interactive\nparts arrive through `actions`, and they carry their own boundary.",
+      "import": "import { FullCard } from 'ionbase-ui';",
+      "stylesheet": "src/styles/full-card.css",
+      "tokens": [
+        "--border-default",
+        "--border-width-default",
+        "--font-family-sans",
+        "--font-weight-regular",
+        "--font-weight-semibold",
+        "--ion-full-card-gap",
+        "--ion-full-card-media-gutter",
+        "--ion-full-card-media-min-height",
+        "--ion-full-card-media-width",
+        "--ion-full-card-padding-x",
+        "--ion-full-card-padding-y",
+        "--radius-5xl",
+        "--radius-6xl",
+        "--radius-none",
+        "--spacing-0",
+        "--spacing-24",
+        "--spacing-32",
+        "--spacing-48",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-page",
+        "--surface-sunken",
+        "--text-default",
+        "--text-secondary",
+        "--type-body-sm",
+        "--type-body-sm-line-height",
+        "--type-h3",
+        "--type-h3-line-height"
+      ],
+      "props": {
+        "alignment": {
+          "type": "FullCardAlignment | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Which side the media panel sits on. Matches Figma's `Alignment` variant,\nwhose `Right` / `Left` name the media, not the text.",
+          "values": [
+            "right",
+            "left"
+          ]
+        },
+        "eyebrow": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Eyebrow` slot — a Badge in the design, but any node works."
+        },
+        "headline": {
+          "type": "React.ReactNode",
+          "required": true,
+          "origin": "own",
+          "description": "Figma's `Headline`. Required: a card with no headline has no accessible name."
+        },
+        "description": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Description`."
+        },
+        "actions": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Actions` slot — a secondary Button in the design."
+        },
+        "media": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Media` slot. Rendered inside the framed screen holder, so pass\nthe screenshot or embed itself, not the frame."
+        },
+        "headingLevel": {
+          "type": "FullCardHeadingLevel | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Heading element for the headline. Defaults to `h3`, matching the `Type/H3`\ntext style Figma applies — but the level is a document-outline decision\nonly the page knows, so it is a prop rather than a constant."
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 8,
+        "aria": 0,
+        "dom": 276,
+        "other": 0
+      }
+    },
+    "Header": {
+      "name": "Header",
+      "source": "src/components/Header.tsx",
+      "propsType": "HeaderProps",
+      "description": "Header renders Figma's four Device variants — Desktop, Tablet,\nMobile-Closed, Mobile-Open — from one DOM tree.\n\nTWO AXES, AND THEY ARE NOT THE SAME KIND OF THING\n\nFigma spells Device as a single four-way variant, but it is really two: a\n*breakpoint* (Desktop / Tablet / Mobile) and a *state* (Closed / Open). They\nare modelled differently here because they are known by different people.\n\n  Breakpoint is a media query. It is the one variant axis in the system the\n  browser already knows the answer to — a header is Mobile because the\n  viewport is narrow — and having React duplicate that judgement is how the\n  two drift apart. Breakpoints match the Breakpoint collection's container\n  widths: Tablet below 1216, Mobile below 896.\n\n  Open/Closed is a prop, because only the caller knows. It follows the\n  controlled/uncontrolled pair the rest of the system uses.\n\nONE TREE, TWO LAYOUTS\n\n`center` and `end` sit inline in the bar on Desktop and Tablet, and inside\nthe dropped Menu-Container on Mobile-Open. They are rendered once, in one\nwrapper, which is `display: contents` above the mobile breakpoint and an\nabsolutely positioned panel below it. Rendering them twice — or moving them\nwith JavaScript — would mean the same nav link exists twice in the\naccessibility tree, and would reset any state a caller put in a slot every\ntime the viewport crossed 896px.\n\nThe centre slot is no longer hidden on Tablet. Figma's Tablet variant ships\nit populated; the previous release collapsed it, which was correct for the\nprevious design and is not for this one.\n\nA `<header>` element with no explicit role: it is a landmark already when it\nis a direct child of body, which is where a page header sits.",
+      "import": "import { Header } from 'ionbase-ui';",
+      "stylesheet": "src/styles/header.css",
+      "tokens": [
+        "--border-default",
+        "--border-strong",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--icon-default",
+        "--icon-size-sm",
+        "--ion-header-center-gap",
+        "--ion-header-end-gap",
+        "--ion-header-height",
+        "--ion-header-padding-x",
+        "--ion-header-padding-y",
+        "--ion-shadow-raised-lifted-xs",
+        "--radius-md",
+        "--radius-sm",
+        "--ring-focus",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-2",
+        "--spacing-24",
+        "--spacing-32",
+        "--spacing-4",
+        "--spacing-48",
+        "--spacing-64",
+        "--spacing-8",
+        "--surface-default"
+      ],
+      "props": {
+        "brand": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's Logo slot. Rendered at the start, never shrinks."
+        },
+        "center": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Center Slot` — nav items. Inline on Desktop and Tablet; moves\ninto the Mobile-Open menu below the mobile breakpoint."
+        },
+        "end": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `End Slot` — buttons and actions. Same placement rules as `center`."
+        },
+        "open": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Controlled Mobile-Open state. Pair with `onOpenChange`."
+        },
+        "defaultOpen": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Initial Mobile-Open state when uncontrolled."
+        },
+        "onOpenChange": {
+          "type": "((open: boolean) => void) | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Fires whenever the menu toggle changes the state, controlled or not."
+        },
+        "menuLabel": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Accessible name for the mobile menu toggle."
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 8,
+        "aria": 0,
+        "dom": 276,
+        "other": 0
+      }
+    },
+    "Icon": {
+      "name": "Icon",
+      "source": "src/Icon.tsx",
+      "propsType": "IconProps",
+      "description": "Wrapper that applies the design system's icon sizing and accessibility\ndefaults to whatever icon component you hand it.\n\n  import { Plus } from 'lucide-react';\n  <Icon as={Plus} size=\"sm\" />\n  <Icon as={Plus} label=\"Add item\" />   // meaningful, gets an a11y name\n\nTakes the icon as a prop rather than re-exporting a set: a barrel of a\nthousand-plus icons defeats tree-shaking in several bundlers, and pinning one\nicon library would force it on every consumer. You import the one icon you\nneed, from whichever library you use, and it is the only one bundled.",
+      "import": "import { Icon } from 'ionbase-ui';",
+      "stylesheet": "src/styles/icon.css",
+      "tokens": [],
+      "props": {
+        "as": {
+          "type": "IconComponent",
+          "required": true,
+          "origin": "own",
+          "description": "The icon component to render, e.g. `import { Plus } from 'lucide-react'`.\nAny SVG component works — the design system does not ship an icon set."
+        },
+        "size": {
+          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xs\" | \"xs\" | (string & {}) | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "A rung on the `icon-size` ladder — `2xs` 12, `xs` 14, `sm` 16, `md` 20,\n`lg` 24, `xl` 32 — or any CSS length for a one-off. Omit to inherit the surrounding\nfont size, which is what lets an icon sit correctly inside a Button without\nthe Button having to know anything about this component."
+        },
+        "label": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Accessible name. Provide it when the icon carries meaning on its own — an\nicon-only button, a status marker. Omit it for decoration next to a visible\nlabel, and the icon is hidden from assistive tech instead of read out twice."
+        }
+      },
+      "propCounts": {
+        "own": 3,
+        "aria": 0,
+        "dom": 487,
+        "other": 0
+      }
+    },
+    "Input": {
+      "name": "Input",
+      "source": "src/components/Input.tsx",
+      "propsType": "InputProps",
+      "description": "Input covers both Figma components on the Input page: the field itself\n(`Input`, 80:275) and the label/helper stack around it (`Form Field`,\n80:330). They are separate there because a Figma component cannot make a\nslot optional without a boolean; here the wrapper simply isn't rendered when\nthere is nothing to put in it.\n\n`useTextField` owns the wiring that is tedious and easy to get subtly wrong:\nit generates the ids, points `aria-labelledby` at the label and\n`aria-describedby` at whichever of the helper or error message is actually\nshowing, and sets `aria-invalid`. Hand-rolling that is where form fields\nusually lose their accessibility.\n\nFigma's seven states map to three props and three CSS states. Hover and Focus\nare interaction; Filled is the placeholder distinction, which CSS already\nexpresses; Default, Invalid, Disabled and Read-only are props.",
+      "import": "import { Input } from 'ionbase-ui';",
+      "status": "stable",
+      "summary": "A single-line text field, together with its label, helper text and error message.",
+      "useWhen": [
+        "collecting one line of free text",
+        "the field needs a label, helper text, or validation messaging"
+      ],
+      "useInstead": [
+        {
+          "when": "the user picks from a fixed set of options",
+          "use": "Select"
+        },
+        {
+          "when": "it is a phone number",
+          "use": "PhoneInput",
+          "why": "country code and formatting are handled for you"
+        },
+        {
+          "when": "it is a single boolean",
+          "use": "Checkbox or Toggle"
+        }
+      ],
+      "variants": {
+        "size": {
+          "sm": {
+            "use": "dense forms, table filters, toolbars"
+          },
+          "md": {
+            "use": "the default"
+          },
+          "lg": {
+            "use": "prominent single-field forms — search, sign-in"
+          }
+        }
+      },
+      "slots": {
+        "leadingIcon": {
+          "accepts": "Icon",
+          "note": "decorative; omit Icon's `label`"
+        },
+        "trailingIcon": {
+          "accepts": "Icon",
+          "note": "decorative unless it is interactive, in which case it needs its own button and name"
+        },
+        "leadingAddon": {
+          "note": "a static prefix such as a protocol or currency; not focusable"
+        }
+      },
+      "a11y": {
+        "guarantees": [
+          "ids are generated and wired — the label points at the input via aria-labelledby",
+          "aria-describedby points at whichever of the helper text or error message is actually showing",
+          "aria-invalid is set from isInvalid"
+        ],
+        "requires": [
+          "`label`, or `aria-label` when the field is visually self-evident and no label is rendered"
+        ],
+        "notes": [
+          "The label/helper/error wrapper is only rendered when there is something to put in it — Figma models it as a separate `Form Field` component, this does not."
+        ]
+      },
+      "antiPatterns": [
+        {
+          "dont": "using `placeholder` as the label",
+          "do": "pass `label`",
+          "why": "the placeholder disappears on focus, so the user loses the field's name exactly when typing"
+        },
+        {
+          "dont": "rendering your own <label htmlFor>",
+          "do": "pass `label`",
+          "why": "the component generates the id; an external htmlFor will not match it"
+        },
+        {
+          "dont": "showing an error by putting the message in `description`",
+          "do": "set `isInvalid` and pass `errorMessage`",
+          "why": "only errorMessage drives aria-invalid and the described-by wiring"
+        }
+      ],
+      "deprecated": [
+        {
+          "prop": "disabled",
+          "replacement": "isDisabled"
+        }
+      ],
+      "stylesheet": "src/styles/input.css",
+      "tokens": [
+        "--border-default",
+        "--border-disabled",
+        "--border-error-strong",
+        "--border-focus",
+        "--border-strong",
+        "--border-subtle",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-regular",
+        "--icon-disabled",
+        "--icon-interactive",
+        "--icon-size-md",
+        "--icon-size-sm",
+        "--icon-tertiary",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--ion-input-border-width",
+        "--ion-input-font-size",
+        "--ion-input-gap",
+        "--ion-input-height",
+        "--ion-input-icon-size",
+        "--ion-input-line-height",
+        "--ion-input-padding-x",
+        "--ion-input-radius",
+        "--radius-md",
+        "--radius-sm",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-32",
+        "--spacing-40",
+        "--spacing-48",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-disabled",
+        "--surface-page",
+        "--text-disabled",
+        "--text-error",
+        "--text-secondary",
+        "--text-tertiary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "size": {
+          "type": "InputSize | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Size` variant: Small, Medium, Large.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        "autoCapitalize": {
+          "type": "\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Narrower than React's own typing, which also allows any `string`.\n`autoCapitalize` is declared on `AriaTextFieldOptions` rather than\n`AriaTextFieldProps`, so `keyof AriaTextFieldProps` above cannot omit it —\nand the wide DOM version does not satisfy what `useTextField` accepts.",
+          "values": [
+            "none",
+            "off",
+            "on",
+            "sentences",
+            "words",
+            "characters"
+          ]
+        },
+        "leadingIcon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Leading icon. Figma's `Show Leading Icon` + `Leading Icon` swap."
+        },
+        "trailingIcon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Trailing icon. Figma's `Show Trailing Icon` + `Trailing Icon` swap."
+        },
+        "leadingAddon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "A segment butted against the left of the control, sharing its outline —\nFigma's `Input/Phone` (80:372) country-code block.\n\nDistinct from `leadingIcon`, which sits *inside* the box: an addon has its\nown surface and border and is a sibling of the control, so the two cannot\nbe the same slot. It lives here rather than in `PhoneInput` because the\n`.ion-field` wrapper has to enclose the addon and the control together —\nbuilding it outside would put the label above only half the control and\nbreak the `aria-labelledby` wiring `useTextField` sets up.\n\nPhone is the only addon Figma specifies. This is a slot, not a system:\nresist growing a trailing counterpart or an addon variant ladder until a\ndesign actually calls for one."
+        },
+        "disabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "tags": {
+            "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+          }
+        },
+        "className": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Class names for the control box (`.ion-input`). Always lands here —\nnever on the form-field wrapper. Use `wrapperClassName` for that."
+        },
+        "wrapperClassName": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Class names for the `.ion-field` wrapper when a label or helper is shown."
+        },
+        "aria-activedescendant": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox,\ngroup, or application."
+        },
+        "aria-autocomplete": {
+          "type": "\"inline\" | \"list\" | \"none\" | \"both\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's\nintended value for an input and specifies how predictions would be presented if they are made.",
+          "values": [
+            "inline",
+            "list",
+            "none",
+            "both"
+          ]
+        },
+        "aria-haspopup": {
+          "type": "boolean | \"true\" | \"false\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that\ncan be triggered by an element."
+        },
+        "aria-controls": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) whose contents or presence are controlled by the current\nelement."
+        },
+        "enterKeyHint": {
+          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "An enumerated attribute that defines what action label or icon to preset for the enter key on\nvirtual keyboards. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).",
+          "values": [
+            "enter",
+            "done",
+            "go",
+            "next",
+            "previous",
+            "search",
+            "send"
+          ]
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether the input is disabled."
+        },
+        "isReadOnly": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether the input can be selected but not changed by the user."
+        },
+        "isRequired": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether user input is required on the input before form submission."
+        },
+        "isInvalid": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether the input value is invalid."
+        },
+        "validationState": {
+          "type": "ValidationState | undefined",
+          "required": false,
+          "origin": "aria",
+          "values": [
+            "valid",
+            "invalid"
+          ],
+          "tags": {
+            "deprecated": "Use `isInvalid` instead."
+          }
+        },
+        "validationBehavior": {
+          "type": "\"aria\" | \"native\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether to use native HTML form validation to prevent form submission\nwhen the value is missing or invalid, or mark the field as required\nor invalid via ARIA.",
+          "values": [
+            "aria",
+            "native"
+          ],
+          "tags": {
+            "default": "'aria'"
+          }
+        },
+        "validate": {
+          "type": "((value: string) => ValidationError | true | null | undefined) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "A function that returns an error message if a given value is invalid.\nValidation errors are displayed to the user when the form is submitted\nif `validationBehavior=\"native\"`. For realtime validation, use the `isInvalid`\nprop instead."
+        },
+        "description": {
+          "type": "ReactNode",
+          "required": false,
+          "origin": "aria",
+          "description": "A description for the field. Provides a hint such as specific requirements for what to choose."
+        },
+        "errorMessage": {
+          "type": "ReactNode | ((v: ValidationResult) => ReactNode)",
+          "required": false,
+          "origin": "aria",
+          "description": "An error message for the field."
+        },
+        "autoFocus": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether the element should receive focus on render."
+        },
+        "onFocus": {
+          "type": "((e: FocusEvent<HTMLInputElement, Element>) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the element receives focus."
+        },
+        "onBlur": {
+          "type": "((e: FocusEvent<HTMLInputElement, Element>) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the element loses focus."
+        },
+        "onFocusChange": {
+          "type": "((isFocused: boolean) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the element's focus status changes."
+        },
+        "onKeyDown": {
+          "type": "((e: KeyboardEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a key is pressed."
+        },
+        "onKeyUp": {
+          "type": "((e: KeyboardEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a key is released."
+        },
+        "placeholder": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Temporary text that occupies the text input when it is empty."
+        },
+        "value": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The current value (controlled)."
+        },
+        "defaultValue": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The default value (uncontrolled)."
+        },
+        "onChange": {
+          "type": "((value: string) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the value changes."
+        },
+        "label": {
+          "type": "ReactNode",
+          "required": false,
+          "origin": "aria",
+          "description": "The content to display as the label."
+        },
+        "aria-label": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Defines a string value that labels the current element."
+        },
+        "aria-labelledby": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that labels the current element."
+        },
+        "aria-describedby": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that describes the object."
+        },
+        "aria-details": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that provide a detailed, extended description for the\nobject."
+        },
+        "excludeFromTabOrder": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available."
+        },
+        "id": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The element's unique identifier. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)."
+        },
+        "autoComplete": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Describes the type of autocomplete functionality the input should provide if any. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete)."
+        },
+        "maxLength": {
+          "type": "number | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The maximum number of characters supported by the input. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength)."
+        },
+        "minLength": {
+          "type": "number | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The minimum number of characters required by the input. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength)."
+        },
+        "pattern": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Regex pattern that the value of the input must match to be valid. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern)."
+        },
+        "type": {
+          "type": "(string & {}) | \"search\" | \"text\" | \"url\" | \"tel\" | \"email\" | \"password\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The type of input to render. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).",
+          "tags": {
+            "default": "'text'"
+          }
+        },
+        "inputMode": {
+          "type": "\"none\" | \"search\" | \"text\" | \"url\" | \"tel\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Hints at the type of data that might be entered by the user while editing the element or its\ncontents. See\n[MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).",
+          "values": [
+            "none",
+            "search",
+            "text",
+            "url",
+            "tel",
+            "email",
+            "numeric",
+            "decimal"
+          ]
+        },
+        "autoCorrect": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "An attribute that takes as its value a space-separated string that describes what, if any, type\nof autocomplete functionality the input should provide. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete)."
+        },
+        "spellCheck": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "An enumerated attribute that defines whether the element may be checked for spelling errors.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)."
+        },
+        "name": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The name of the input element, used when submitting an HTML form. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname)."
+        },
+        "form": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The `<form>` element to associate the input with.\nThe value of this attribute must be the id of a `<form>` in the same document.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form)."
+        },
+        "onCopy": {
+          "type": "ClipboardEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the user copies text. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy)."
+        },
+        "onCut": {
+          "type": "ClipboardEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the user cuts text. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut)."
+        },
+        "onPaste": {
+          "type": "ClipboardEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the user pastes text. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste)."
+        },
+        "onCompositionStart": {
+          "type": "CompositionEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a text composition system starts a new text composition session.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event)."
+        },
+        "onCompositionEnd": {
+          "type": "CompositionEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a text composition system completes or cancels the current text\ncomposition session. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event)."
+        },
+        "onCompositionUpdate": {
+          "type": "CompositionEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a new character is received in the current text composition\nsession. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event)."
+        },
+        "onSelect": {
+          "type": "ReactEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when text in the input is selected. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event)."
+        },
+        "onBeforeInput": {
+          "type": "FormEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the input value is about to be modified. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event)."
+        },
+        "onInput": {
+          "type": "FormEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the input value is modified. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)."
+        },
+        "aria-errormessage": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element that provides an error message for the object."
+        }
+      },
+      "propCounts": {
+        "own": 8,
+        "aria": 51,
+        "dom": 265,
+        "other": 0
+      }
+    },
+    "Link": {
+      "name": "Link",
+      "source": "src/components/Link.tsx",
+      "propsType": "LinkProps",
+      "description": "Link — Figma `Link` (774:1516).\n\nRenders an `<a>` when given an `href` and a `<button>` otherwise, the same\njudgment `NavItem` makes: the element follows what the caller is actually\nbuilding rather than a separate `as` prop. A link that does not navigate is\na button, and shipping one as an anchor breaks middle-click, \"open in new\ntab\" and the screen-reader announcement all at once.\n\nNO SIZE PROP, DELIBERATELY. A link is an inline element and inherits its\ntype from the text around it — `font-size: inherit` in the stylesheet, and\nicons sized in `em` so they scale with it. Figma has to draw its variants at\nsome concrete size (16/24, `type/body`), but that is one sample of an\ninheriting element, not a specification. Do not add a size ladder to match\nthe drawing.",
+      "import": "import { Link } from 'ionbase-ui';",
+      "stylesheet": "src/styles/link.css",
+      "tokens": [
+        "--border-width-thick",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--radius-xs",
+        "--ring-focus",
+        "--spacing-4",
+        "--text-disabled",
+        "--text-link",
+        "--text-link-hover",
+        "--text-link-visited"
+      ],
+      "props": {
+        "variant": {
+          "type": "LinkVariant | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Type` variant.\n\n`inline` is for links inside body copy and is underlined in every state —\na link in a paragraph must not rely on colour alone (WCAG 1.4.1).\n`standalone` is for links that already read as interactive from their\nposition, and underlines on hover only.",
+          "values": [
+            "inline",
+            "standalone"
+          ],
+          "default": "inline"
+        },
+        "startIcon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Optional icon before the label."
+        },
+        "endIcon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Optional icon after the label — the external-link or arrow affordance."
+        },
+        "className": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        },
+        "disabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "tags": {
+            "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+          }
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether the link is disabled."
+        },
+        "elementType": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The HTML element used to render the link, e.g. 'a', or 'span'.",
+          "tags": {
+            "default": "'a'"
+          }
+        },
+        "onPress": {
+          "type": "((e: PressEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the press is released over the target."
+        },
+        "onPressStart": {
+          "type": "((e: PressEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a press interaction starts."
+        },
+        "onPressEnd": {
+          "type": "((e: PressEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target."
+        },
+        "onPressChange": {
+          "type": "((isPressed: boolean) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the press state changes."
+        },
+        "onPressUp": {
+          "type": "((e: PressEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not."
+        },
+        "onClick": {
+          "type": "((e: MouseEvent<FocusableElement>) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "**Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress`\nprovided for compatibility with other libraries. `onPress` provides\nadditional event details for non-mouse interactions."
+        },
+        "autoFocus": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether the element should receive focus on render."
+        },
+        "onFocus": {
+          "type": "((e: FocusEvent<Element, Element>) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the element receives focus."
+        },
+        "onBlur": {
+          "type": "((e: FocusEvent<Element, Element>) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the element loses focus."
+        },
+        "onFocusChange": {
+          "type": "((isFocused: boolean) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the element's focus status changes."
+        },
+        "onKeyDown": {
+          "type": "((e: KeyboardEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a key is pressed."
+        },
+        "onKeyUp": {
+          "type": "((e: KeyboardEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a key is released."
+        },
+        "href": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href)."
+        },
+        "hrefLang": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Hints at the human language of the linked URL.\nSee[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang)."
+        },
+        "target": {
+          "type": "HTMLAttributeAnchorTarget | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The target window for the link. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)."
+        },
+        "rel": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The relationship between the linked resource and the current page. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)."
+        },
+        "download": {
+          "type": "string | boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Causes the browser to download the linked URL. A string may be provided to suggest a file name.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)."
+        },
+        "ping": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "A space-separated list of URLs to ping when the link is followed. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping)."
+        },
+        "referrerPolicy": {
+          "type": "HTMLAttributeReferrerPolicy | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "How much of the referrer to send when following the link. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).",
+          "values": [
+            "",
+            "origin",
+            "no-referrer",
+            "no-referrer-when-downgrade",
+            "origin-when-cross-origin",
+            "same-origin",
+            "strict-origin",
+            "strict-origin-when-cross-origin",
+            "unsafe-url"
+          ]
+        },
+        "routerOptions": {
+          "type": "undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Options for the configured client side router."
+        },
+        "aria-label": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Defines a string value that labels the current element."
+        },
+        "aria-labelledby": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that labels the current element."
+        },
+        "aria-describedby": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that describes the object."
+        },
+        "aria-details": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that provide a detailed, extended description for the\nobject."
+        }
+      },
+      "propCounts": {
+        "own": 6,
+        "aria": 26,
+        "dom": 266,
+        "other": 0
+      }
+    },
+    "Logo": {
+      "name": "Logo",
+      "source": "src/components/Logo.tsx",
+      "propsType": "LogoProps",
+      "description": "The full lockup: mark + wordmark, matching Figma's `Logo-Ionbase`\n(52:21369).\n\nFigma also has a `Property=Name` axis — wordmark only, no mark — but both\nof its variants currently render the placeholder text \"raza\" rather than\n\"IonBase\", in an unbound raw colour. That is leftover debug content, not a\nreal asset, so it is not implemented here. Reproducing it would ship a\nstranger's name into a design system; extending `LogoMark` alone already\ncovers \"no wordmark\" for the cases that are real.",
+      "import": "import { Logo } from 'ionbase-ui';",
+      "stylesheet": "src/styles/logo.css",
+      "tokens": [
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--icon-default",
+        "--spacing-4",
+        "--spacing-8",
+        "--text-tertiary",
+        "--type-body",
+        "--type-body-line-height"
+      ],
+      "props": {
+        "size": {
+          "type": "LogoSize | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches Figma's `Size` variant: Small (24px mark) or Large (32px).",
+          "values": [
+            "sm",
+            "lg"
+          ]
+        },
+        "wordmark": {
+          "type": "LogoWordmark | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches Figma's `Type` variant. `vector` is the serif logotype Figma\ncalls \"Logo\" — what `Header` uses, immune to font substitution and\nvisually distinct from the sans-serif UI type everywhere else. `text` is\nwhat Figma calls \"Icon\": a live `Host Grotesk` run, real and selectable,\nat `text/tertiary` rather than the mark's `icon/default`.",
+          "values": [
+            "text",
+            "vector"
+          ]
+        }
+      },
+      "propCounts": {
+        "own": 2,
+        "aria": 0,
+        "dom": 278,
+        "other": 0
+      }
+    },
+    "LogoMark": {
+      "name": "LogoMark",
+      "source": "src/components/Logo.tsx",
+      "propsType": "LogoMarkProps",
+      "description": "The bare icon glyph, no wordmark — what `Header` actually uses.\n\nColour comes from the `.ion-logo__mark` class (`icon/default`), not the SVG\nitself, so it themes the same way every other icon in the system does.",
+      "import": "import { LogoMark } from 'ionbase-ui';",
+      "stylesheet": "src/styles/logo.css",
+      "tokens": [
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--icon-default",
+        "--spacing-4",
+        "--spacing-8",
+        "--text-tertiary",
+        "--type-body",
+        "--type-body-line-height"
+      ],
+      "props": {
+        "size": {
+          "type": "LogoSize | undefined",
+          "required": false,
+          "origin": "own",
+          "values": [
+            "sm",
+            "lg"
+          ]
+        },
+        "label": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Accessible name for the mark used standalone. Omit when it sits beside\na visible wordmark, which already carries the name."
+        }
+      },
+      "propCounts": {
+        "own": 2,
+        "aria": 0,
+        "dom": 487,
+        "other": 0
+      }
+    },
+    "Menu": {
+      "name": "Menu",
+      "source": "src/components/Menu.tsx",
+      "propsType": "MenuProps",
+      "description": "Menu is the list surface, not a popover.\n\nFigma models the list alone — there is no trigger, anchor or open state in\nthe design — so this renders the surface and nothing else. Positioning it\nagainst a button is the caller's job until Figma has a component that says\nhow. Building a popover here would be inventing design, and it would be the\nhard half to unpick later.\n\n`role=\"menu\"` is deliberately NOT set. A real ARIA menu owes the user\nroving-tabindex arrow navigation, typeahead and focus containment; claiming\nthe role without them is worse for a screen-reader user than an honest list,\nbecause it promises interactions that are not there. When the popover exists,\nthe role comes with it.",
+      "import": "import { Menu } from 'ionbase-ui';",
+      "stylesheet": "src/styles/menu.css",
+      "tokens": [
+        "--border-focus",
+        "--border-subtle",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-regular",
+        "--icon-default",
+        "--icon-disabled",
+        "--icon-primary",
+        "--icon-size-sm",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--radius-sm",
+        "--radius-xl",
+        "--spacing-12",
+        "--spacing-2",
+        "--spacing-40",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-hover",
+        "--surface-primary-subtle",
+        "--text-disabled",
+        "--text-primary",
+        "--text-secondary",
+        "--type-body",
+        "--type-body-line-height"
+      ],
+      "props": {
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 1,
+        "aria": 0,
+        "dom": 277,
+        "other": 0
+      }
+    },
+    "MenuItem": {
+      "name": "MenuItem",
+      "source": "src/components/Menu.tsx",
+      "propsType": "MenuItemProps",
+      "import": "import { MenuItem } from 'ionbase-ui';",
+      "stylesheet": "src/styles/menu.css",
+      "tokens": [
+        "--border-focus",
+        "--border-subtle",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-regular",
+        "--icon-default",
+        "--icon-disabled",
+        "--icon-primary",
+        "--icon-size-sm",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--radius-sm",
+        "--radius-xl",
+        "--spacing-12",
+        "--spacing-2",
+        "--spacing-40",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-hover",
+        "--surface-primary-subtle",
+        "--text-disabled",
+        "--text-primary",
+        "--text-secondary",
+        "--type-body",
+        "--type-body-line-height"
+      ],
+      "props": {
+        "isSelected": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Selected` / `Selected-hover` states. Shows the trailing check."
+        },
+        "icon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Show Leading Icon` + `Leading Icon` swap."
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Whether the item is disabled."
+        },
+        "disabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "tags": {
+            "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+          }
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 5,
+        "aria": 0,
+        "dom": 285,
+        "other": 0
+      }
+    },
+    "Modal": {
+      "name": "Modal",
+      "source": "src/components/Modal.tsx",
+      "propsType": "ModalProps",
+      "description": "Modal — Figma `Modal` (792:1537).\n\n`Size` x `Align`, with the sections as props rather than variants. The panel\nhugs its content at every size except `fullscreen`, which fills the viewport\nand pushes the actions to the bottom edge.\n\nRENDERS NOTHING WHEN CLOSED, and mounts into a portal when open. Both come\nfrom React Aria's `Overlay`, and both matter: a modal left in the tree while\nclosed is still focusable by keyboard, and one rendered inline inherits any\n`overflow: hidden` or stacking context from wherever it was written.\n\nThe scrim is part of this component in code, unlike in Figma — see the note\nin modal.css.",
+      "import": "import { Modal } from 'ionbase-ui';",
+      "status": "stable",
+      "since": "0.11.0",
+      "summary": "A focus-trapping dialog. Renders nothing when closed and portals when open.",
+      "useWhen": [
+        "the task must be completed or abandoned before anything else",
+        "confirming a destructive action",
+        "a short focused form that would otherwise need its own page"
+      ],
+      "useInstead": [
+        {
+          "when": "the content is supplementary and the page stays usable",
+          "use": "Popover",
+          "why": "a Popover does not trap focus or block the page"
+        },
+        {
+          "when": "it is a short label for a control",
+          "use": "Tooltip"
+        }
+      ],
+      "variants": {
+        "size": {
+          "sm": {
+            "use": "confirmations and single-question prompts"
+          },
+          "md": {
+            "use": "the default; short forms"
+          },
+          "lg": {
+            "use": "multi-section forms"
+          },
+          "fullscreen": {
+            "use": "immersive tasks; fills the viewport and pins the actions to the bottom edge"
+          }
+        },
+        "align": {
+          "left": {
+            "use": "the default; forms and anything the user reads"
+          },
+          "center": {
+            "use": "single-message confirmations only"
+          }
+        }
+      },
+      "slots": {
+        "footer": {
+          "accepts": "Button",
+          "note": "the primary action goes last, at the trailing edge"
+        },
+        "media": {
+          "note": "rendered above the title"
+        }
+      },
+      "a11y": {
+        "role": "dialog",
+        "guarantees": [
+          "focus moves into the panel on open and returns to the trigger on close",
+          "Escape and a scrim click both close it",
+          "focus is trapped while open",
+          "nothing is rendered at all while closed, so no closed-modal content is keyboard reachable"
+        ],
+        "requires": [
+          "`title`, which provides the dialog's accessible name"
+        ]
+      },
+      "antiPatterns": [
+        {
+          "dont": "rendering <Modal> only when a state flag is true",
+          "do": "render it always and drive `isOpen`",
+          "why": "Modal already renders nothing when closed. Wrapping it in a conditional discards the open/close transition and the focus-return behaviour."
+        },
+        {
+          "dont": "opening a Modal from inside another Modal",
+          "why": "two focus traps compete and Escape becomes ambiguous"
+        },
+        {
+          "dont": "a destructive action as the only button, with no cancel",
+          "why": "a confirmation with no way out is not a confirmation"
+        }
+      ],
+      "stylesheet": "src/styles/modal.css",
+      "tokens": [
+        "--border-subtle",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-regular",
+        "--font-weight-semibold",
+        "--icon-primary",
+        "--icon-secondary",
+        "--icon-size-lg",
+        "--icon-size-md",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--ion-modal-width",
+        "--ion-shadow-shadow-xl",
+        "--radius-full",
+        "--radius-sm",
+        "--radius-xl",
+        "--ring-focus",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-20",
+        "--spacing-24",
+        "--spacing-32",
+        "--spacing-48",
+        "--spacing-8",
+        "--surface-hover",
+        "--surface-overlay",
+        "--surface-primary-subtle",
+        "--surface-scrim",
+        "--text-default",
+        "--text-secondary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-h5",
+        "--type-h5-line-height"
+      ],
+      "props": {
+        "isOpen": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Whether the modal is shown."
+        },
+        "onOpenChange": {
+          "type": "((isOpen: boolean) => void) | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Called with the next open state — `false` when the modal asks to close."
+        },
+        "size": {
+          "type": "ModalSize | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Size` variant.",
+          "values": [
+            "sm",
+            "md",
+            "lg",
+            "fullscreen"
+          ],
+          "default": "md"
+        },
+        "align": {
+          "type": "ModalAlign | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Align` variant.",
+          "values": [
+            "left",
+            "center"
+          ],
+          "default": "left"
+        },
+        "title": {
+          "type": "React.ReactNode",
+          "required": true,
+          "origin": "own",
+          "description": "Required: the dialog's accessible name, wired via `aria-labelledby`."
+        },
+        "description": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Supporting copy under the title."
+        },
+        "media": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "The featured slot above the title — an icon or an illustration. Rendered\ninside a circular container that hugs it."
+        },
+        "footer": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Action row. Right-aligned when `align=\"left\"`, centred when `\"center\"`."
+        },
+        "showClose": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Show the close button. Defaults to `true`.",
+          "default": true
+        },
+        "closeLabel": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Accessible name for the close button.",
+          "default": "Close dialog"
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Body content."
+        },
+        "className": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "isDismissable": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether to close the modal when the user interacts outside it.",
+          "tags": {
+            "default": "false"
+          }
+        },
+        "isKeyboardDismissDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether pressing the escape key to close the modal should be disabled.",
+          "tags": {
+            "default": "false"
+          }
+        },
+        "shouldCloseOnInteractOutside": {
+          "type": "((element: Element) => boolean) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "When user interacts with the argument element outside of the overlay ref,\nreturn true if onClose should be called.  This gives you a chance to filter\nout interaction with elements that should not dismiss the overlay.\nBy default, onClose will always be called on interaction outside the overlay ref."
+        }
+      },
+      "propCounts": {
+        "own": 12,
+        "aria": 3,
+        "dom": 0,
+        "other": 0
+      }
+    },
+    "NavItem": {
+      "name": "NavItem",
+      "source": "src/components/NavItem.tsx",
+      "propsType": "NavItemProps",
+      "description": "Nav Item renders an `<a>` when given `href`, a `<button>` otherwise —\nchosen by what the caller is actually building, the same judgment call\nMenu and Select make. A primary nav bar is links; a nav item with\n`showChevron` that opens a menu (no `href` of its own) is a button.\n\nInteraction state comes from React Aria rather than CSS pseudo-classes,\nmatching Button: `useHover` is pointer-aware so a tap does not stay\n\"hovered\" until the next tap elsewhere, and `useFocusRing` shows the ring\nonly for keyboard navigation. The CSS keeps its own `:hover` /\n`:focus-visible` rules so the stylesheet still works without React.",
+      "import": "import { NavItem } from 'ionbase-ui';",
+      "stylesheet": "src/styles/nav-item.css",
+      "tokens": [
+        "--border-focus",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-regular",
+        "--icon-disabled",
+        "--icon-interactive-hover",
+        "--icon-size-sm",
+        "--icon-tertiary",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--radius-sm",
+        "--spacing-4",
+        "--spacing-8",
+        "--text-disabled",
+        "--text-interactive-hover",
+        "--text-secondary",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "icon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Icon` slot — an optional leading icon."
+        },
+        "showChevron": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Show Chevron`. Set on a nav item that opens a menu, not a plain link."
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "disabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "tags": {
+            "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+          }
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        },
+        "className": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "href": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 7,
+        "aria": 0,
+        "dom": 276,
+        "other": 0
+      }
+    },
+    "PhoneInput": {
+      "name": "PhoneInput",
+      "source": "src/components/PhoneInput.tsx",
+      "propsType": "PhoneInputProps",
+      "description": "PhoneInput — Figma `Input/Phone` (80:372).\n\nA dial-code block butted against an Input, sharing one outline: the block\ncarries the left radii and the control the right, so the seam is square on\nboth sides and reads as a single control. Both keep their full 1px border,\nwhich is what Figma draws — the 2px seam is the two strokes meeting, not an\naccident.\n\nThree sizes, no State axis. Every interaction state is the Input's, reached\nthrough the ordinary props, because Figma composes this from the same `Input`\ninstance rather than redrawing it.\n\nWHAT THIS DELIBERATELY DOES NOT DO\n\nIt does not pick countries. The chevron implies a menu and Figma specifies no\nopen state for it — no list, no flags, no search, no selected state. Country\ndata and the picker are application concerns with real editorial weight (which\nterritories, which names, which order), and inventing them here would be\ndesigning rather than implementing.\n\nSo the trigger is a real `<button>` with an accessible name, and\n`countryButtonProps` is how you wire it to a `Menu`, a popover or your own\nlistbox — including the `aria-haspopup` and `aria-expanded` that only the\nthing owning the popup can set honestly.",
+      "import": "import { PhoneInput } from 'ionbase-ui';",
+      "stylesheet": "src/styles/phone-input.css",
+      "tokens": [
+        "--border-default",
+        "--border-disabled",
+        "--border-focus",
+        "--border-strong",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-regular",
+        "--icon-disabled",
+        "--icon-size-md",
+        "--icon-size-sm",
+        "--icon-tertiary",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--ion-phone-input-border-width",
+        "--ion-phone-input-font-size",
+        "--ion-phone-input-gap",
+        "--ion-phone-input-icon-size",
+        "--ion-phone-input-line-height",
+        "--ion-phone-input-padding-x",
+        "--ion-phone-input-radius",
+        "--radius-md",
+        "--radius-sm",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-4",
+        "--surface-disabled",
+        "--surface-page",
+        "--text-disabled",
+        "--text-secondary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "dialCode": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "The dial code shown in the leading block, e.g. `+1`.",
+          "default": "+1"
+        },
+        "countryLabel": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Accessible name for the dial-code trigger. It shows only `+1`, which names\na value rather than an action, so the button needs a label of its own.",
+          "default": "Select country calling code"
+        },
+        "countryButtonProps": {
+          "type": "React.ButtonHTMLAttributes<HTMLButtonElement> | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Spread onto the dial-code `<button>`. This is how a country picker gets\nattached — see the note on scope below."
+        },
+        "defaultValue": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The default value (uncontrolled)."
+        },
+        "autoCapitalize": {
+          "type": "\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Narrower than React's own typing, which also allows any `string`.\n`autoCapitalize` is declared on `AriaTextFieldOptions` rather than\n`AriaTextFieldProps`, so `keyof AriaTextFieldProps` above cannot omit it —\nand the wide DOM version does not satisfy what `useTextField` accepts.",
+          "values": [
+            "none",
+            "off",
+            "on",
+            "sentences",
+            "words",
+            "characters"
+          ]
+        },
+        "autoFocus": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether the element should receive focus on render."
+        },
+        "className": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Class names for the control box (`.ion-input`). Always lands here —\nnever on the form-field wrapper. Use `wrapperClassName` for that."
+        },
+        "enterKeyHint": {
+          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "An enumerated attribute that defines what action label or icon to preset for the enter key on\nvirtual keyboards. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).",
+          "values": [
+            "enter",
+            "done",
+            "go",
+            "next",
+            "previous",
+            "search",
+            "send"
+          ]
+        },
+        "id": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The element's unique identifier. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)."
+        },
+        "spellCheck": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "An enumerated attribute that defines whether the element may be checked for spelling errors.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck)."
+        },
+        "autoCorrect": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "An attribute that takes as its value a space-separated string that describes what, if any, type\nof autocomplete functionality the input should provide. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete)."
+        },
+        "inputMode": {
+          "type": "\"none\" | \"search\" | \"text\" | \"url\" | \"tel\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Hints at the type of data that might be entered by the user while editing the element or its\ncontents. See\n[MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).",
+          "values": [
+            "none",
+            "search",
+            "text",
+            "url",
+            "tel",
+            "email",
+            "numeric",
+            "decimal"
+          ]
+        },
+        "aria-activedescendant": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox,\ngroup, or application."
+        },
+        "aria-autocomplete": {
+          "type": "\"inline\" | \"list\" | \"none\" | \"both\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's\nintended value for an input and specifies how predictions would be presented if they are made.",
+          "values": [
+            "inline",
+            "list",
+            "none",
+            "both"
+          ]
+        },
+        "aria-controls": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) whose contents or presence are controlled by the current\nelement."
+        },
+        "aria-describedby": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that describes the object."
+        },
+        "aria-details": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that provide a detailed, extended description for the\nobject."
+        },
+        "aria-errormessage": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element that provides an error message for the object."
+        },
+        "aria-haspopup": {
+          "type": "boolean | \"true\" | \"false\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that\ncan be triggered by an element."
+        },
+        "aria-label": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Defines a string value that labels the current element."
+        },
+        "aria-labelledby": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that labels the current element."
+        },
+        "onCopy": {
+          "type": "ClipboardEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the user copies text. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy)."
+        },
+        "onCut": {
+          "type": "ClipboardEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the user cuts text. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut)."
+        },
+        "onPaste": {
+          "type": "ClipboardEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the user pastes text. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste)."
+        },
+        "onCompositionEnd": {
+          "type": "CompositionEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a text composition system completes or cancels the current text\ncomposition session. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event)."
+        },
+        "onCompositionStart": {
+          "type": "CompositionEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a text composition system starts a new text composition session.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event)."
+        },
+        "onCompositionUpdate": {
+          "type": "CompositionEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a new character is received in the current text composition\nsession. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event)."
+        },
+        "onFocus": {
+          "type": "((e: FocusEvent<HTMLInputElement, Element>) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the element receives focus."
+        },
+        "onBlur": {
+          "type": "((e: FocusEvent<HTMLInputElement, Element>) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the element loses focus."
+        },
+        "onChange": {
+          "type": "((value: string) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the value changes."
+        },
+        "onBeforeInput": {
+          "type": "FormEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the input value is about to be modified. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event)."
+        },
+        "onInput": {
+          "type": "FormEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the input value is modified. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)."
+        },
+        "onKeyDown": {
+          "type": "((e: KeyboardEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a key is pressed."
+        },
+        "onKeyUp": {
+          "type": "((e: KeyboardEvent) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when a key is released."
+        },
+        "onSelect": {
+          "type": "ReactEventHandler<HTMLInputElement> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when text in the input is selected. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event)."
+        },
+        "size": {
+          "type": "InputSize | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Size` variant: Small, Medium, Large.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        "type": {
+          "type": "(string & {}) | \"search\" | \"text\" | \"url\" | \"tel\" | \"email\" | \"password\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The type of input to render. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).",
+          "tags": {
+            "default": "'text'"
+          },
+          "default": "tel"
+        },
+        "autoComplete": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Describes the type of autocomplete functionality the input should provide if any. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete)."
+        },
+        "disabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "tags": {
+            "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+          }
+        },
+        "form": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The `<form>` element to associate the input with.\nThe value of this attribute must be the id of a `<form>` in the same document.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form)."
+        },
+        "maxLength": {
+          "type": "number | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The maximum number of characters supported by the input. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength)."
+        },
+        "minLength": {
+          "type": "number | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The minimum number of characters required by the input. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength)."
+        },
+        "name": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The name of the input element, used when submitting an HTML form. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname)."
+        },
+        "pattern": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Regex pattern that the value of the input must match to be valid. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern)."
+        },
+        "placeholder": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Temporary text that occupies the text input when it is empty."
+        },
+        "value": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The current value (controlled)."
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether the input is disabled."
+        },
+        "isReadOnly": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether the input can be selected but not changed by the user."
+        },
+        "isRequired": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether user input is required on the input before form submission."
+        },
+        "isInvalid": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether the input value is invalid."
+        },
+        "validationState": {
+          "type": "ValidationState | undefined",
+          "required": false,
+          "origin": "aria",
+          "values": [
+            "valid",
+            "invalid"
+          ],
+          "tags": {
+            "deprecated": "Use `isInvalid` instead."
+          }
+        },
+        "validationBehavior": {
+          "type": "\"aria\" | \"native\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether to use native HTML form validation to prevent form submission\nwhen the value is missing or invalid, or mark the field as required\nor invalid via ARIA.",
+          "values": [
+            "aria",
+            "native"
+          ],
+          "tags": {
+            "default": "'aria'"
+          }
+        },
+        "validate": {
+          "type": "((value: string) => ValidationError | true | null | undefined) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "A function that returns an error message if a given value is invalid.\nValidation errors are displayed to the user when the form is submitted\nif `validationBehavior=\"native\"`. For realtime validation, use the `isInvalid`\nprop instead."
+        },
+        "description": {
+          "type": "ReactNode",
+          "required": false,
+          "origin": "aria",
+          "description": "A description for the field. Provides a hint such as specific requirements for what to choose."
+        },
+        "errorMessage": {
+          "type": "ReactNode | ((v: ValidationResult) => ReactNode)",
+          "required": false,
+          "origin": "aria",
+          "description": "An error message for the field."
+        },
+        "onFocusChange": {
+          "type": "((isFocused: boolean) => void) | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Handler that is called when the element's focus status changes."
+        },
+        "label": {
+          "type": "ReactNode",
+          "required": false,
+          "origin": "aria",
+          "description": "The content to display as the label."
+        },
+        "excludeFromTabOrder": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available."
+        },
+        "trailingIcon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Trailing icon. Figma's `Show Trailing Icon` + `Trailing Icon` swap."
+        },
+        "wrapperClassName": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Class names for the `.ion-field` wrapper when a label or helper is shown."
+        }
+      },
+      "propCounts": {
+        "own": 9,
+        "aria": 51,
+        "dom": 265,
+        "other": 0
+      }
+    },
+    "Popover": {
+      "name": "Popover",
+      "source": "src/components/Popover.tsx",
+      "propsType": "PopoverProps",
+      "description": "Popover — Figma `Popover` (825:1853).\n\nSITS BETWEEN TOOLTIP AND MODAL. A tooltip is a hint that cannot hold\nfocusable content; a modal is a task that takes over the page. A popover\nholds interactive content but stays attached to the control that opened it.\n\n`usePopover` contains focus, closes on Escape or an outside click, and hides\nthe rest of the page from assistive tech while open — the same guarantees\nModal gives. What differs is the framing, and it is deliberate: no visible\nscrim, anchored to its trigger, and `surface/raised` rather than Modal's\n`surface/overlay`. It reads as attached to the page rather than replacing it.",
+      "import": "import { Popover } from 'ionbase-ui';",
+      "stylesheet": "src/styles/popover.css",
+      "tokens": [
+        "--border-subtle",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-regular",
+        "--icon-secondary",
+        "--icon-size-md",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--ion-popover-width",
+        "--ion-shadow-shadow-lg",
+        "--radius-md",
+        "--radius-sm",
+        "--ring-focus",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-32",
+        "--spacing-8",
+        "--surface-hover",
+        "--surface-raised",
+        "--text-default",
+        "--text-secondary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "children": {
+          "type": "React.ReactElement<unknown, string | React.JSXElementConstructor<any>>",
+          "required": true,
+          "origin": "own",
+          "description": "The element that opens it. Must accept a ref and DOM props."
+        },
+        "content": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Panel contents."
+        },
+        "title": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Heading. Also gives the dialog its accessible name."
+        },
+        "footer": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Action row, right-aligned."
+        },
+        "placement": {
+          "type": "PopoverPlacement | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Placement` variant, and names where the POPOVER sits —\nnot where the arrow points. A preference, not a guarantee: it flips when\nthere is no room, and the arrow follows.",
+          "values": [
+            "right",
+            "left",
+            "top",
+            "bottom"
+          ]
+        },
+        "size": {
+          "type": "PopoverSize | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Size` variant. Widths only; height always hugs.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        "showClose": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Show the close button. Defaults to `true`."
+        },
+        "hideArrow": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Hide the caret."
+        },
+        "closeLabel": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "isOpen": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "onOpenChange": {
+          "type": "((isOpen: boolean) => void) | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "className": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 12,
+        "aria": 0,
+        "dom": 0,
+        "other": 0
+      }
+    },
+    "Radio": {
+      "name": "Radio",
+      "source": "src/components/Radio.tsx",
+      "propsType": "RadioProps",
+      "import": "import { Radio } from 'ionbase-ui';",
+      "stylesheet": "src/styles/radio.css",
+      "tokens": [
+        "--border-disabled",
+        "--border-error-strong",
+        "--border-focus",
+        "--border-inverse",
+        "--border-primary-strong",
+        "--border-stronger",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--icon-disabled",
+        "--icon-on-color",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--ion-radio-border",
+        "--ion-radio-dot",
+        "--ion-radio-fill",
+        "--ion-radio-font-size",
+        "--ion-radio-gap",
+        "--ion-radio-line-height",
+        "--ion-radio-raised",
+        "--ion-radio-size",
+        "--ion-shadow-raised-flush-lg",
+        "--ion-shadow-raised-flush-sm",
+        "--ion-shadow-raised-flush-xs",
+        "--radius-full",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-2",
+        "--spacing-20",
+        "--spacing-24",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-disabled",
+        "--surface-error",
+        "--surface-inverse",
+        "--surface-primary",
+        "--text-disabled",
+        "--text-secondary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "value": {
+          "type": "string",
+          "required": true,
+          "origin": "own"
+        },
+        "size": {
+          "type": "RadioSize | undefined",
+          "required": false,
+          "origin": "own",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        "intent": {
+          "type": "RadioIntent | undefined",
+          "required": false,
+          "origin": "own",
+          "values": [
+            "neutral",
+            "brand",
+            "danger"
+          ]
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Whether this radio is disabled. Falls back to the group's `isDisabled`."
+        },
+        "disabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "tags": {
+            "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+          }
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 6,
+        "aria": 0,
+        "dom": 303,
+        "other": 0
+      }
+    },
+    "RadioGroup": {
+      "name": "RadioGroup",
+      "source": "src/components/Radio.tsx",
+      "propsType": "RadioGroupProps",
+      "description": "Renders a `<fieldset>` with a `<legend>` rather than a div with\n`role=\"radiogroup\"`. Both are announced correctly, but a fieldset also groups\nthe inputs for form submission and native validation, which the ARIA version\ndoes not.",
+      "import": "import { RadioGroup } from 'ionbase-ui';",
+      "stylesheet": "src/styles/radio.css",
+      "tokens": [
+        "--border-disabled",
+        "--border-error-strong",
+        "--border-focus",
+        "--border-inverse",
+        "--border-primary-strong",
+        "--border-stronger",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--icon-disabled",
+        "--icon-on-color",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--ion-radio-border",
+        "--ion-radio-dot",
+        "--ion-radio-fill",
+        "--ion-radio-font-size",
+        "--ion-radio-gap",
+        "--ion-radio-line-height",
+        "--ion-radio-raised",
+        "--ion-radio-size",
+        "--ion-shadow-raised-flush-lg",
+        "--ion-shadow-raised-flush-sm",
+        "--ion-shadow-raised-flush-xs",
+        "--radius-full",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-2",
+        "--spacing-20",
+        "--spacing-24",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-disabled",
+        "--surface-error",
+        "--surface-inverse",
+        "--surface-primary",
+        "--text-disabled",
+        "--text-secondary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "name": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Shared input name. Generated when omitted."
+        },
+        "value": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "defaultValue": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "onChange": {
+          "type": "((value: string) => void) | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "label": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        },
+        "size": {
+          "type": "RadioSize | undefined",
+          "required": false,
+          "origin": "own",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ]
+        },
+        "intent": {
+          "type": "RadioIntent | undefined",
+          "required": false,
+          "origin": "own",
+          "values": [
+            "neutral",
+            "brand",
+            "danger"
+          ]
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Whether every radio in the group is disabled."
+        },
+        "disabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "tags": {
+            "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+          }
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 10,
+        "aria": 0,
+        "dom": 276,
+        "other": 0
+      }
+    },
+    "ScrollProgress": {
+      "name": "ScrollProgress",
+      "source": "src/components/ScrollProgress.tsx",
+      "propsType": "ScrollProgressProps",
+      "description": "The compact rail is the disclosure trigger. It is a real `<button>`, so a\nkeyboard user reaches it by Tab and opens it the same way as any button —\nEnter or Space — no `:focus-within` trick required; a mouse user can also\njust hover it. Built as a WAI-ARIA Disclosure (`aria-expanded` +\n`aria-controls`) rather than a menu: see the CSS header for why\n`role=\"menu\"` is deliberately not used here.\n\nCloses on outside pointerdown and on Escape — the minimum a disclosure\nneeds to not trap the page once opened, not a full popover/focus-trap\nimplementation.",
+      "import": "import { ScrollProgress } from 'ionbase-ui';",
+      "stylesheet": "src/styles/scroll-progress.css",
+      "tokens": [
+        "--border-default",
+        "--border-focus",
+        "--border-strong",
+        "--border-stronger",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-regular",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--radius-md",
+        "--radius-sm",
+        "--spacing-12",
+        "--spacing-2",
+        "--spacing-32",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-muted",
+        "--text-secondary",
+        "--text-tertiary",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "progress": {
+          "type": "number",
+          "required": true,
+          "origin": "own",
+          "description": "0-100. The caller computes this from whatever it is tracking — a\nwindow scroll fraction, a custom scroll container, a reading-time\nestimate. This component has no opinion on the source."
+        },
+        "sections": {
+          "type": "ScrollProgressSection[]",
+          "required": true,
+          "origin": "own"
+        },
+        "activeId": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "The section the rail's heavier tick and the panel's selected row point\nto. Also the caller's to compute — see `progress`."
+        },
+        "onSelect": {
+          "type": "((id: string) => void) | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Fired when a row is chosen. The component does not scroll anywhere\nitself; matching Menu, it reports the choice and lets the caller decide\nwhat \"select this section\" means for their page."
+        }
+      },
+      "propCounts": {
+        "own": 4,
+        "aria": 0,
+        "dom": 277,
+        "other": 0
+      }
+    },
+    "Select": {
+      "name": "Select",
+      "source": "src/components/Select.tsx",
+      "propsType": "SelectProps",
+      "description": "Select wraps a native `<select>` rather than rebuilding one.\n\nReact Aria's `useSelect` builds a listbox in a popover, which is the right\nanswer when the menu needs custom rows — but Figma models only the trigger\nhere, and the dropdown list is a separate component on the Menu page. Until\nthat is built, the native control is the honest match: it brings keyboard\nhandling, type-ahead and the platform picker on mobile for free, and it is\naccessible without any of it being reimplemented.\n\nFigma's six states map the same way Input's do — Hover and Focus from\ninteraction, Filled from whether a value is set, the rest from props.",
+      "import": "import { Select } from 'ionbase-ui';",
+      "status": "stable",
+      "summary": "A dropdown over a native <select>, with the same label and error wiring as Input.",
+      "useWhen": [
+        "the user picks exactly one value from a known, modest list",
+        "the native platform picker is acceptable — and on mobile it usually is the best option"
+      ],
+      "useInstead": [
+        {
+          "when": "the list is long enough to need search or type-ahead beyond the native behaviour",
+          "use": "a combobox — not yet in this system"
+        },
+        {
+          "when": "the rows need icons, avatars or two lines of text",
+          "use": "Menu",
+          "why": "Select wraps a native <select>, whose options can only be text"
+        },
+        {
+          "when": "there are two or three mutually exclusive choices worth showing at once",
+          "use": "RadioGroup"
+        },
+        {
+          "when": "the user may pick more than one",
+          "use": "Checkbox"
+        }
+      ],
+      "variants": {
+        "size": {
+          "sm": {
+            "use": "dense forms, table filters"
+          },
+          "md": {
+            "use": "the default"
+          },
+          "lg": {
+            "use": "prominent single-field forms"
+          }
+        }
+      },
+      "a11y": {
+        "guarantees": [
+          "keyboard handling, type-ahead and the mobile platform picker come from the native <select> rather than being reimplemented",
+          "label, helper and error wiring match Input"
+        ],
+        "requires": [
+          "`label`, or `aria-label` when no visible label is rendered"
+        ]
+      },
+      "antiPatterns": [
+        {
+          "dont": "passing rich React nodes as option content",
+          "why": "this renders a native <select>; options are text only"
+        },
+        {
+          "dont": "using a Select with two options for an on/off setting",
+          "do": "Toggle",
+          "why": "a two-item dropdown costs two interactions to do what one control does in one"
+        }
+      ],
+      "deprecated": [
+        {
+          "prop": "disabled",
+          "replacement": "isDisabled"
+        }
+      ],
+      "stylesheet": "src/styles/select.css",
+      "tokens": [
+        "--border-default",
+        "--border-disabled",
+        "--border-error-strong",
+        "--border-focus",
+        "--border-strong",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-regular",
+        "--icon-disabled",
+        "--icon-size-md",
+        "--icon-size-sm",
+        "--icon-tertiary",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--ion-select-border-width",
+        "--ion-select-font-size",
+        "--ion-select-gap",
+        "--ion-select-height",
+        "--ion-select-icon-size",
+        "--ion-select-line-height",
+        "--ion-select-padding-x",
+        "--ion-select-radius",
+        "--radius-md",
+        "--radius-sm",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-32",
+        "--spacing-40",
+        "--spacing-48",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-disabled",
+        "--text-disabled",
+        "--text-secondary",
+        "--text-tertiary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "size": {
+          "type": "SelectSize | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Size` variant: Small, Medium, Large.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        "options": {
+          "type": "SelectOption[] | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "The options to render. Omit and pass `children` for grouped options."
+        },
+        "placeholder": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Text shown when nothing is selected. Renders as a disabled option so the\nfield can start empty without that being a valid choice."
+        },
+        "label": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Field label. Renders the Figma `Form Field` wrapper around the control."
+        },
+        "description": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Helper text below the field."
+        },
+        "errorMessage": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Replaces the helper text when `isInvalid` is set."
+        },
+        "isInvalid": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "disabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "tags": {
+            "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+          }
+        },
+        "className": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Class names for the control box (`.ion-select`). Always lands here —\nnever on the form-field wrapper. Use `wrapperClassName` for that."
+        },
+        "wrapperClassName": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Class names for the `.ion-field` wrapper when a label or helper is shown."
+        }
+      },
+      "propCounts": {
+        "own": 11,
+        "aria": 0,
+        "dom": 283,
+        "other": 0
+      }
+    },
+    "TabItem": {
+      "name": "TabItem",
+      "source": "../../node_modules/.pnpm/react-stately@3.48.0_react@19.2.8/node_modules/react-stately/dist/types/src/collections/Item.d.ts",
+      "propsType": null,
+      "import": "import { TabItem } from 'ionbase-ui';",
+      "stylesheet": null,
+      "tokens": [],
+      "props": {},
+      "propCounts": {
+        "own": 0,
+        "aria": 0,
+        "dom": 0,
+        "other": 0
+      }
+    },
+    "Table": {
+      "name": "Table",
+      "source": "src/components/Table.tsx",
+      "propsType": "TableProps",
+      "description": "`Table` owns the scroll container and the density class; everything else\nis composed from `TableHead` / `TableBody` / `TableRow` / `TableCell`,\nmatching how Figma actually layers `Table Row` > `Table Cell` > `Cell Text`\nrather than one component with a wall of props.\n\nDensity has no React state to thread: it only ever changes vertical cell\npadding, which `.ion-table--compact td` and friends apply through the CSS\ncascade from this one class. A context provider for a value nothing in JS\never reads would be infrastructure with no consumer.\n\nThe scroll container is a keyboard-reachable region (WCAG 2.1.1): overflow\nalone is not enough. `aria-label` / `aria-labelledby` on `Table` name that\nregion — the container accepts no props of its own, so the table's name is\nthe only place the label can live. Prefer a `<caption>` via\n`aria-labelledby` when the name should also be visible.",
+      "import": "import { Table } from 'ionbase-ui';",
+      "status": "stable",
+      "summary": "A data table. Table owns the scroll container and density; rows and cells are composed.",
+      "useWhen": [
+        "showing records with more than one attribute worth comparing across rows"
+      ],
+      "useInstead": [
+        {
+          "when": "each item is a self-contained summary rather than a row of fields",
+          "use": "FullCard"
+        },
+        {
+          "when": "it is a layout grid rather than data",
+          "use": "CSS grid",
+          "why": "a <table> announces row and column semantics that a layout does not have"
+        }
+      ],
+      "composition": {
+        "order": [
+          "Table",
+          "TableHead",
+          "TableRow",
+          "TableCell"
+        ],
+        "note": "Table > TableHead/TableBody > TableRow > TableCell, matching how Figma layers Table Row > Table Cell > Cell Text. TableHead and TableBody take no props of their own; they place the rows and give TableCell its head-or-body context.",
+        "example": "<Table aria-label=\"Users\"><TableHead><TableRow><TableCell scope=\"col\">Name</TableCell></TableRow></TableHead><TableBody><TableRow><TableCell>Ada</TableCell></TableRow></TableBody></Table>"
+      },
+      "variants": {
+        "density": {
+          "compact": {
+            "use": "dense operational tables where row count matters more than comfort"
+          },
+          "default": {
+            "use": "the default"
+          },
+          "relaxed": {
+            "use": "short tables where each row deserves attention"
+          }
+        }
+      },
+      "a11y": {
+        "guarantees": [
+          "the scroll container is keyboard reachable, which overflow alone does not provide (WCAG 2.1.1)"
+        ],
+        "requires": [
+          "`aria-label` or `aria-labelledby` on Table — it names the scroll region, and the container takes no props of its own, so this is the only place the name can live",
+          "`scope=\"col\"` on header cells",
+          "an accessible name on every row-selection Checkbox — those have no visible label by design"
+        ],
+        "notes": [
+          "Prefer a visible <caption> referenced by aria-labelledby when the table's name should also be seen."
+        ]
+      },
+      "antiPatterns": [
+        {
+          "dont": "<Table> with no aria-label",
+          "why": "the scroll region is announced with no name, and a keyboard user reaching it is told nothing about what they have entered"
+        },
+        {
+          "dont": "header cells without scope",
+          "why": "screen readers cannot associate data cells with their column"
+        },
+        {
+          "dont": "wrapping Table in your own overflow container",
+          "why": "Table already owns the scroll container and makes it focusable; a second one is unreachable by keyboard"
+        },
+        {
+          "dont": "row-selection checkboxes with no aria-label",
+          "why": "every row announces an unnamed checkbox"
+        }
+      ],
+      "missingStates": {
+        "note": "Table has no empty, loading or error state of its own — those are the caller's, and they are the states most often forgotten. Pattern coverage is planned; see docs/agent-readiness-plan.md phase 4a."
+      },
+      "stylesheet": "src/styles/table.css",
+      "tokens": [
+        "--border-default",
+        "--border-focus",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-regular",
+        "--icon-interactive",
+        "--icon-secondary",
+        "--icon-size-sm",
+        "--icon-tertiary",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--radius-md",
+        "--spacing-16",
+        "--spacing-20",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-hover",
+        "--surface-page",
+        "--surface-primary-subtle",
+        "--text-default",
+        "--text-link",
+        "--text-secondary",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "density": {
+          "type": "TableDensity | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches Figma's `Density` variant on `Table Cell` / `Table Row`.",
+          "values": [
+            "compact",
+            "default",
+            "relaxed"
+          ]
+        },
+        "isStriped": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Alternating row background, read from the row's position, not a prop\nrepeated on every `TableRow`."
+        }
+      },
+      "propCounts": {
+        "own": 2,
+        "aria": 0,
+        "dom": 287,
+        "other": 0
+      }
+    },
+    "TableBody": {
+      "name": "TableBody",
+      "source": "src/components/Table.tsx",
+      "propsType": null,
+      "import": "import { TableBody } from 'ionbase-ui';",
+      "stylesheet": "src/styles/table.css",
+      "tokens": [
+        "--border-default",
+        "--border-focus",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-regular",
+        "--icon-interactive",
+        "--icon-secondary",
+        "--icon-size-sm",
+        "--icon-tertiary",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--radius-md",
+        "--spacing-16",
+        "--spacing-20",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-hover",
+        "--surface-page",
+        "--surface-primary-subtle",
+        "--text-default",
+        "--text-link",
+        "--text-secondary",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {},
+      "propCounts": {
+        "own": 0,
+        "aria": 0,
+        "dom": 0,
+        "other": 0
+      }
+    },
+    "TableCell": {
+      "name": "TableCell",
+      "source": "src/components/Table.tsx",
+      "propsType": "TableCellProps",
+      "description": "One component covers Figma's `Table Cell` + `Cell Text`: the two are never\nused apart in the design (`Table Cell` always wraps exactly one `Cell\nText`), so splitting them into two exported components would only add API\nsurface for a composition nothing ever varies independently.\n\n`header` decides `<th>` vs `<td>` directly rather than a `type` prop that\ncould disagree with where the cell actually sits — a `<th>` rendered inside\n`<tbody>` is still a header cell to the browser and to CSS either way.",
+      "import": "import { TableCell } from 'ionbase-ui';",
+      "stylesheet": "src/styles/table.css",
+      "tokens": [
+        "--border-default",
+        "--border-focus",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-regular",
+        "--icon-interactive",
+        "--icon-secondary",
+        "--icon-size-sm",
+        "--icon-tertiary",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--radius-md",
+        "--spacing-16",
+        "--spacing-20",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-hover",
+        "--surface-page",
+        "--surface-primary-subtle",
+        "--text-default",
+        "--text-link",
+        "--text-secondary",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "header": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Renders `<th>` instead of `<td>` — Figma's header cell, `surface/page`\nfill included."
+        },
+        "scope": {
+          "type": "TableCellScope | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "`<th>` scope. Inferred when omitted: `col` in `<thead>`, `row` in\n`<tbody>`. Pass explicitly when the inference is wrong (e.g. a column\nheader rendered outside `<thead>`).",
+          "values": [
+            "row",
+            "rowgroup",
+            "col",
+            "colgroup"
+          ]
+        },
+        "align": {
+          "type": "TableCellAlign | undefined",
+          "required": false,
+          "origin": "own",
+          "values": [
+            "center",
+            "leading",
+            "trailing"
+          ]
+        },
+        "variant": {
+          "type": "\"link\" | \"default\" | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Type=Link` — recolours the content to `text/link` /\n`icon/primary` rather than the body defaults.",
+          "values": [
+            "link",
+            "default"
+          ]
+        },
+        "showDivider": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's per-cell `Show Divider` — a column rule, not a row rule."
+        },
+        "icon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Figma's `Leading Icon` / `Trailing Icon` slots on `Cell Text`."
+        },
+        "trailingIcon": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 8,
+        "aria": 0,
+        "dom": 284,
+        "other": 0
+      }
+    },
+    "TableHead": {
+      "name": "TableHead",
+      "source": "src/components/Table.tsx",
+      "propsType": null,
+      "import": "import { TableHead } from 'ionbase-ui';",
+      "stylesheet": "src/styles/table.css",
+      "tokens": [
+        "--border-default",
+        "--border-focus",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-regular",
+        "--icon-interactive",
+        "--icon-secondary",
+        "--icon-size-sm",
+        "--icon-tertiary",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--radius-md",
+        "--spacing-16",
+        "--spacing-20",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-hover",
+        "--surface-page",
+        "--surface-primary-subtle",
+        "--text-default",
+        "--text-link",
+        "--text-secondary",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {},
+      "propCounts": {
+        "own": 0,
+        "aria": 0,
+        "dom": 0,
+        "other": 0
+      }
+    },
+    "TableRow": {
+      "name": "TableRow",
+      "source": "src/components/Table.tsx",
+      "propsType": "TableRowProps",
+      "description": "A plain `<tr>`. Hover is CSS-only (`:hover` plus a `data-hovered` escape\nhatch, matching the rest of the system) rather than React Aria's\n`useHover`: a row is not itself an interactive element — nothing about it\ntakes focus or fires a click — so there is no keyboard-vs-pointer\ndistinction to track. A clickable row is a link or button inside a cell,\nthe same accessible pattern Menu and Table Cell's own link variant use;\nnesting an interactive role on `<tr>` itself is not valid HTML.",
+      "import": "import { TableRow } from 'ionbase-ui';",
+      "stylesheet": "src/styles/table.css",
+      "tokens": [
+        "--border-default",
+        "--border-focus",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-regular",
+        "--icon-interactive",
+        "--icon-secondary",
+        "--icon-size-sm",
+        "--icon-tertiary",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--radius-md",
+        "--spacing-16",
+        "--spacing-20",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-hover",
+        "--surface-page",
+        "--surface-primary-subtle",
+        "--text-default",
+        "--text-link",
+        "--text-secondary",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "isSelected": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "selection": {
+          "type": "TableRowSelection | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Renders a leading `Checkbox` cell — Figma's `Show Selection`. Takes the\ncheckbox's own props directly rather than a boolean, since a selectable\nrow needs `checked`/`onChange` wiring, not just a decorative box.\n\nInside `<thead>` the cell is a `<th scope=\"col\">` (select-all). Inside\n`<tbody>` it is a `<td>`."
+        }
+      },
+      "propCounts": {
+        "own": 2,
+        "aria": 0,
+        "dom": 278,
+        "other": 0
+      }
+    },
+    "Tabs": {
+      "name": "Tabs",
+      "source": "src/components/Tabs.tsx",
+      "propsType": "TabsProps",
+      "import": "import { Tabs } from 'ionbase-ui';",
+      "stylesheet": "src/styles/tabs.css",
+      "tokens": [
+        "--border-default",
+        "--border-primary",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--icon-size-sm",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--ion-tabs-icon-size",
+        "--ion-tabs-item-font-size",
+        "--ion-tabs-item-gap",
+        "--ion-tabs-item-line-height",
+        "--ion-tabs-item-padding-x",
+        "--ion-tabs-item-padding-y",
+        "--ion-tabs-item-size",
+        "--radius-full",
+        "--radius-md",
+        "--ring-focus",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-2",
+        "--spacing-20",
+        "--spacing-32",
+        "--spacing-4",
+        "--spacing-40",
+        "--spacing-48",
+        "--spacing-6",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-hover",
+        "--surface-muted",
+        "--surface-page",
+        "--text-default",
+        "--text-disabled",
+        "--text-tertiary",
+        "--type-body",
+        "--type-body-lg",
+        "--type-body-lg-line-height",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "type": {
+          "type": "TabsType | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Visual style. Matches the Figma `Type` variant.",
+          "values": [
+            "pill",
+            "underline"
+          ],
+          "default": "pill"
+        },
+        "size": {
+          "type": "TabsSize | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Size` variant.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        "orientation": {
+          "type": "\"horizontal\" | \"vertical\" | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Drives both the arrow-key axis and the track layout.\n\n`vertical` is keyboard- and ARIA-complete — up/down move between tabs, and\nthe track stacks — but its *decoration* is not: the underline rule and the\npill track's padding are still written for the horizontal axis only. Those\nare Figma's to specify, not this file's to invent. See tabs.css.",
+          "values": [
+            "horizontal",
+            "vertical"
+          ],
+          "tags": {
+            "default": "'horizontal'"
+          },
+          "default": "horizontal"
+        },
+        "className": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own"
+        },
+        "keyboardActivation": {
+          "type": "\"manual\" | \"automatic\" | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Whether tabs are activated automatically on focus or manually.",
+          "values": [
+            "manual",
+            "automatic"
+          ],
+          "tags": {
+            "default": "'automatic'"
+          }
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "other",
+          "description": "Whether the TabList is disabled.\nShows that a selection exists, but is not available in that circumstance."
+        },
+        "selectedKey": {
+          "type": "Key | undefined",
+          "required": false,
+          "origin": "other",
+          "description": "The currently selected key in the collection (controlled)."
+        },
+        "defaultSelectedKey": {
+          "type": "Key | undefined",
+          "required": false,
+          "origin": "other",
+          "description": "The initial selected keys in the collection (uncontrolled)."
+        },
+        "onSelectionChange": {
+          "type": "((key: Key) => void) | undefined",
+          "required": false,
+          "origin": "other",
+          "description": "Handler that is called when the selection changes."
+        },
+        "children": {
+          "type": "CollectionChildren<T>",
+          "required": true,
+          "origin": "aria",
+          "description": "The contents of the collection."
+        },
+        "items": {
+          "type": "Iterable<T> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Item objects in the collection."
+        },
+        "disabledKeys": {
+          "type": "Iterable<Key> | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The item keys that are disabled. These items cannot be selected, focused, or otherwise\ninteracted with."
+        },
+        "id": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "The element's unique identifier. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)."
+        },
+        "aria-label": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Defines a string value that labels the current element."
+        },
+        "aria-labelledby": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that labels the current element."
+        },
+        "aria-describedby": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that describes the object."
+        },
+        "aria-details": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "aria",
+          "description": "Identifies the element (or elements) that provide a detailed, extended description for the\nobject."
+        }
+      },
+      "propCounts": {
+        "own": 4,
+        "aria": 9,
+        "dom": 0,
+        "other": 4
+      }
+    },
+    "Toast": {
+      "name": "Toast",
+      "source": "src/components/Toast.tsx",
+      "propsType": "ToastProps",
+      "description": "Toast — Figma `Toast` (820:1655).\n\nNeutral chrome on `surface/raised`; the intent is carried by the icon alone.\nA tinted panel floating over unknown content competes with whatever is\nbehind it, and makes Toast and Alert indistinguishable at a glance.\n\nAUTO-DISMISS PAUSES ON HOVER AND FOCUS. A toast that keeps counting down\nwhile being read or while its action has keyboard focus takes the action\naway mid-reach — WCAG 2.2.1 asks for exactly this. The timer restarts rather\nthan resumes, which is the forgiving direction.",
+      "import": "import { Toast } from 'ionbase-ui';",
+      "stylesheet": "src/styles/toast.css",
+      "tokens": [
+        "--border-subtle",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-regular",
+        "--icon-error",
+        "--icon-information",
+        "--icon-primary",
+        "--icon-secondary",
+        "--icon-size-md",
+        "--icon-success",
+        "--icon-warning",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--ion-shadow-shadow-lg",
+        "--ion-toast-icon",
+        "--radius-md",
+        "--radius-sm",
+        "--ring-focus",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-32",
+        "--spacing-4",
+        "--surface-hover",
+        "--surface-raised",
+        "--text-default",
+        "--text-link",
+        "--text-link-hover",
+        "--text-secondary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "onDismiss": {
+          "type": "(id: string) => void",
+          "required": true,
+          "origin": "own"
+        },
+        "id": {
+          "type": "string",
+          "required": true,
+          "origin": "own"
+        },
+        "intent": {
+          "type": "ToastIntent | undefined",
+          "required": false,
+          "origin": "own",
+          "values": [
+            "neutral",
+            "primary",
+            "success",
+            "warning",
+            "error",
+            "information"
+          ],
+          "default": "information"
+        },
+        "title": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        },
+        "message": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        },
+        "action": {
+          "type": "{ label: string; onPress: () => void; } | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "One action. A second choice belongs in a dialog, which will still be there."
+        },
+        "duration": {
+          "type": "number | null | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Milliseconds before auto-dismiss. `null` keeps it until dismissed.",
+          "default": 5000
+        },
+        "dismissLabel": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own",
+          "default": "Dismiss"
+        }
+      },
+      "propCounts": {
+        "own": 8,
+        "aria": 0,
+        "dom": 0,
+        "other": 0
+      }
+    },
+    "ToastProvider": {
+      "name": "ToastProvider",
+      "source": "src/components/Toast.tsx",
+      "propsType": "ToastProviderProps",
+      "description": "Renders the queue and supplies `useToast`.\n\nThe live region is the CONTAINER, declared once and always present. A region\nthat appears at the same moment as its content is not reliably announced —\nassistive tech has to be watching the node before the text lands in it.",
+      "import": "import { ToastProvider } from 'ionbase-ui';",
+      "stylesheet": "src/styles/toast.css",
+      "tokens": [
+        "--border-subtle",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-regular",
+        "--icon-error",
+        "--icon-information",
+        "--icon-primary",
+        "--icon-secondary",
+        "--icon-size-md",
+        "--icon-success",
+        "--icon-warning",
+        "--ion-duration-base",
+        "--ion-ease-out",
+        "--ion-shadow-shadow-lg",
+        "--ion-toast-icon",
+        "--radius-md",
+        "--radius-sm",
+        "--ring-focus",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-32",
+        "--spacing-4",
+        "--surface-hover",
+        "--surface-raised",
+        "--text-default",
+        "--text-link",
+        "--text-link-hover",
+        "--text-secondary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        },
+        "placement": {
+          "type": "ToastPlacement | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Where the stack sits. Not a Figma variant — position is the queue's concern.",
+          "values": [
+            "top-left",
+            "top-right",
+            "bottom-left",
+            "bottom-right"
+          ]
+        },
+        "limit": {
+          "type": "number | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Oldest are dropped past this. Prevents an unbounded stack covering the page."
+        }
+      },
+      "propCounts": {
+        "own": 3,
+        "aria": 0,
+        "dom": 0,
+        "other": 0
+      }
+    },
+    "Toggle": {
+      "name": "Toggle",
+      "source": "src/components/Toggle.tsx",
+      "propsType": "ToggleProps",
+      "description": "Toggle is a checkbox with `role=\"switch\"`.\n\nNot a button with aria-pressed: a switch is a form value, and the checkbox\ngives form association and `:checked` for free. `role=\"switch\"` changes only\nhow it is announced — \"on/off\" rather than \"checked/unchecked\" — which is\nwhat Figma's On/Off states describe.\n\nThe visual difference from Checkbox is entirely in CSS; this component and\nCheckbox are near-identical by design rather than by accident, and are kept\napart because Figma models them as separate components with separate size\nramps.",
+      "import": "import { Toggle } from 'ionbase-ui';",
+      "stylesheet": "src/styles/toggle.css",
+      "tokens": [
+        "--border-disabled",
+        "--border-focus",
+        "--border-strong",
+        "--border-width-default",
+        "--border-width-thick",
+        "--font-family-sans",
+        "--ion-duration-base",
+        "--ion-ease-in-out",
+        "--ion-ease-out",
+        "--ion-shadow-raised-flush-lg",
+        "--ion-shadow-raised-flush-sm",
+        "--ion-shadow-raised-flush-xs",
+        "--ion-shadow-shadow-xs",
+        "--ion-toggle-font-size",
+        "--ion-toggle-gap",
+        "--ion-toggle-inset",
+        "--ion-toggle-line-height",
+        "--ion-toggle-on",
+        "--ion-toggle-raised",
+        "--ion-toggle-thumb",
+        "--ion-toggle-track-h",
+        "--ion-toggle-track-w",
+        "--radius-full",
+        "--spacing-12",
+        "--spacing-16",
+        "--spacing-2",
+        "--spacing-20",
+        "--spacing-24",
+        "--spacing-8",
+        "--surface-default",
+        "--surface-disabled",
+        "--surface-error",
+        "--surface-inverse",
+        "--surface-muted",
+        "--surface-primary",
+        "--text-disabled",
+        "--text-secondary",
+        "--type-body",
+        "--type-body-line-height",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "size": {
+          "type": "ToggleSize | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Size` variant: Small, Medium, Large.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        "intent": {
+          "type": "ToggleIntent | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Color` variant: Brand, Neutral, Danger.",
+          "values": [
+            "neutral",
+            "brand",
+            "danger"
+          ],
+          "default": "brand"
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Whether the toggle is disabled."
+        },
+        "disabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "tags": {
+            "deprecated": "Use `isDisabled`. Accepted as an alias for one minor version."
+          }
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 5,
+        "aria": 0,
+        "dom": 304,
+        "other": 0
+      }
+    },
+    "Tooltip": {
+      "name": "Tooltip",
+      "source": "src/components/Tooltip.tsx",
+      "propsType": "TooltipProps",
+      "description": "Tooltip — Figma `Tooltip` (801:1568).\n\nWraps its trigger rather than taking a ref, so the common case is one\nelement deep: `<Tooltip label=\"...\"><Button/></Tooltip>`.\n\nFOCUS OPENS IT, NOT JUST HOVER. A hover-only tooltip is invisible to keyboard\nand switch users, and `useTooltipTrigger` wires both plus Escape to dismiss.\nIt also enforces one open tooltip at a time and a shared warmup, so moving\nalong a row of icon buttons does not flash a tooltip per button.\n\nThe trigger is cloned with the interaction props and a ref, which means it\nmust forward both. Every component in this library does; a bare `<div>` does\ntoo. A function component that drops its ref will render, but the tooltip\nwill have nothing to position against.",
+      "import": "import { Tooltip } from 'ionbase-ui';",
+      "stylesheet": "src/styles/tooltip.css",
+      "tokens": [
+        "--font-family-sans",
+        "--font-weight-medium",
+        "--font-weight-regular",
+        "--ion-shadow-shadow-md",
+        "--ion-tooltip-arrow",
+        "--radius-sm",
+        "--spacing-12",
+        "--spacing-4",
+        "--spacing-8",
+        "--surface-inverse",
+        "--text-inverse",
+        "--type-body-sm",
+        "--type-body-sm-line-height"
+      ],
+      "props": {
+        "label": {
+          "type": "React.ReactNode",
+          "required": true,
+          "origin": "own",
+          "description": "The hint. A tooltip is text only — anything interactive or focusable\nbelongs in a popover, because a tooltip cannot be focused, cannot be\nscrolled, and closes the moment the pointer leaves."
+        },
+        "title": {
+          "type": "React.ReactNode",
+          "required": false,
+          "origin": "own",
+          "description": "Optional heading above the label."
+        },
+        "placement": {
+          "type": "TooltipPlacement | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Matches the Figma `Placement` variant, and names where the TOOLTIP sits —\nnot where the arrow points. `top` is above the trigger, with the arrow on\nthe tooltip's bottom edge.\n\nTreated as a preference, not a guarantee: it flips to the opposite side\nwhen there is no room, which is the behaviour Figma cannot draw.",
+          "values": [
+            "right",
+            "left",
+            "top",
+            "bottom"
+          ]
+        },
+        "delay": {
+          "type": "number | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Milliseconds before it opens on hover. Focus always opens immediately."
+        },
+        "isDisabled": {
+          "type": "boolean | undefined",
+          "required": false,
+          "origin": "own",
+          "description": "Disable the tooltip without unmounting the trigger."
+        },
+        "children": {
+          "type": "React.ReactElement<unknown, string | React.JSXElementConstructor<any>>",
+          "required": true,
+          "origin": "own",
+          "description": "The element the tooltip describes. Must accept a ref and DOM props."
+        },
+        "className": {
+          "type": "string | undefined",
+          "required": false,
+          "origin": "own"
+        }
+      },
+      "propCounts": {
+        "own": 7,
+        "aria": 0,
+        "dom": 0,
+        "other": 0
+      }
+    }
+  }
+}