ionbase-ui 0.51.0 → 0.59.0

package/dist/meta/Accordion.json

@@ -0,0 +1,123 @@
+{
+  "name": "Accordion",
+  "source": "src/components/Accordion.tsx",
+  "propsType": "AccordionProps",
+  "description": "Accordion — sections that collapse, with the heading structure intact.\n\nWHY THE TRIGGER IS A BUTTON INSIDE A HEADING\n\nBoth parts are load-bearing and the obvious implementations drop one of them.\nThe heading is how a screen-reader user navigates a long page — pressing `h`\nmoves between sections, and an accordion built from `div`s removes every one\nof those stops. The button is what makes the section operable by keyboard and\nannounced as expandable; a heading with a click handler is neither.\n\nSo the shape is `<h3><button aria-expanded aria-controls>`, which is the only\narrangement that keeps document structure AND operability.\n\n`headingLevel` is a prop with no safe default beyond 3, because the right\nlevel depends on the document around it and nothing here can see that. Two\naccordions at the wrong level produce a page whose outline is nonsense while\nlooking perfectly fine.\n\nTHE PANEL IS NOT UNMOUNTED\n\nCollapsed sections keep their DOM and are hidden with `hidden`. Unmounting\nwould lose form state in a collapsed section — the classic multi-step-form\nbug where answers vanish when a section is folded away — and would break\nin-page search, which cannot find text that is not there.",
+  "import": "import { Accordion } from 'ionbase-ui';",
+  "status": "stable",
+  "summary": "Sections that collapse, with the document's heading structure intact. Holds the open set and the heading level.",
+  "useWhen": [
+    "a page has several long sections and most users need one of them",
+    "optional or advanced settings should be present but not in the way",
+    "an FAQ or a reference list where scanning titles is the primary action"
+  ],
+  "useInstead": [
+    {
+      "when": "the sections are alternatives and only one is ever relevant",
+      "use": "Tabs",
+      "why": "tabs say \"pick one\"; an accordion says \"all of these exist, open what you need\""
+    },
+    {
+      "when": "hiding the content would hide something the user must act on",
+      "use": "render it directly",
+      "why": "a required field inside a collapsed section is a form that cannot be completed without exploration"
+    }
+  ],
+  "slots": {
+    "children": {
+      "accepts": "AccordionItem"
+    }
+  },
+  "a11y": {
+    "requires": [
+      "`headingLevel` that fits the surrounding document — the default of 3 is a guess this component cannot verify"
+    ],
+    "notes": [
+      "each section's trigger is a button inside a heading, which is the only arrangement that keeps both document structure and operability",
+      "collapsed panels are hidden rather than unmounted, so form state survives and in-page search still finds the text"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "allowsMultiple on a long FAQ",
+      "do": "leave it off, so opening one section closes the last",
+      "why": "with every section openable at once the page has no maximum height, and a user who opens six is scrolling a wall of text looking for the one they wanted. Reach for it when sections are settings or reference material a user may need to compare side by side"
+    },
+    {
+      "dont": "headingLevel left at 3 inside a section already under an h4",
+      "do": "headingLevel={5}",
+      "why": "the page looks correct and its outline is nonsense — a heading-level jump is invisible to sighted users and disorienting to everyone navigating by headings"
+    },
+    {
+      "dont": "an accordion holding a single section",
+      "do": "a heading and the content",
+      "why": "one collapsible section is a control that exists to hide the only thing on screen"
+    }
+  ],
+  "stylesheet": "src/styles/accordion.css",
+  "tokens": [
+    "--border-focus",
+    "--border-subtle",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--icon-disabled",
+    "--icon-secondary",
+    "--icon-size-md",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--radius-xs",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-4",
+    "--text-default",
+    "--text-disabled",
+    "--text-primary",
+    "--text-secondary",
+    "--type-body",
+    "--type-body-line-height"
+  ],
+  "props": {
+    "allowsMultiple": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Let more than one section be open at once."
+    },
+    "defaultExpandedKeys": {
+      "type": "string[] | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Uncontrolled: which sections start open."
+    },
+    "expandedKeys": {
+      "type": "string[] | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Controlled: which sections are open. Pass `onExpandedChange` with it."
+    },
+    "onExpandedChange": {
+      "type": "((keys: string[]) => void) | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "headingLevel": {
+      "type": "AccordionHeadingLevel | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The level each section's heading renders at. Must fit the surrounding\ndocument — a panel inside an `h2` section wants `3`."
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 6,
+    "aria": 0,
+    "dom": 276,
+    "other": 0
+  }
+}

package/dist/meta/AccordionItem.json

@@ -0,0 +1,90 @@
+{
+  "name": "AccordionItem",
+  "source": "src/components/Accordion.tsx",
+  "propsType": "AccordionItemProps",
+  "import": "import { AccordionItem } from 'ionbase-ui';",
+  "status": "stable",
+  "summary": "One collapsible section: an always-visible title that toggles a region beneath it.",
+  "useWhen": [
+    "inside an Accordion, once per section"
+  ],
+  "slots": {
+    "title": {
+      "accepts": "text",
+      "note": "always visible, so it must say what is inside — \"Advanced\" tells the user nothing about whether to open it"
+    },
+    "children": {
+      "accepts": "any content"
+    }
+  },
+  "a11y": {
+    "requires": [
+      "a stable `id`, which is the section's identity in the open set — an index breaks the moment the list reorders"
+    ],
+    "notes": [
+      "the trigger carries aria-expanded and aria-controls; the panel is a region labelled by the trigger",
+      "the panel keeps its DOM when collapsed, so a half-filled form inside one does not lose its answers"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "a required form field inside a collapsed section",
+      "do": "keep required fields outside, or expand the section when validation fails",
+      "why": "a user cannot fix an error they cannot see, and the browser cannot focus a hidden invalid field"
+    }
+  ],
+  "stylesheet": "src/styles/accordion.css",
+  "tokens": [
+    "--border-focus",
+    "--border-subtle",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--icon-disabled",
+    "--icon-secondary",
+    "--icon-size-md",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--radius-xs",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-4",
+    "--text-default",
+    "--text-disabled",
+    "--text-primary",
+    "--text-secondary",
+    "--type-body",
+    "--type-body-line-height"
+  ],
+  "props": {
+    "id": {
+      "type": "string",
+      "required": true,
+      "origin": "own",
+      "description": "Stable identity for the open set. Required."
+    },
+    "title": {
+      "type": "React.ReactNode",
+      "required": true,
+      "origin": "own",
+      "description": "The always-visible label."
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 4,
+    "aria": 0,
+    "dom": 275,
+    "other": 0
+  }
+}

package/dist/meta/Breadcrumb.json

@@ -0,0 +1,87 @@
+{
+  "name": "Breadcrumb",
+  "source": "src/components/Breadcrumb.tsx",
+  "propsType": "BreadcrumbProps",
+  "description": "Breadcrumb — where this page sits, and how to get back up.\n\nWHY AN ORDERED LIST INSIDE A NAMED LANDMARK\n\nThe trail is a sequence, and `ol` is what says so: a screen reader announces\n\"list, 4 items\" and the position within it, which is the entire content of a\nbreadcrumb. A row of `div`s with slashes conveys none of that, and the\nslashes themselves get read out as punctuation.\n\nThe separator here is drawn by CSS `::before` on each item after the first,\nso it is decoration that never enters the accessibility tree. Putting a \"/\"\nin the markup is the usual version of this component and the usual defect.\n\nTHE LAST CRUMB IS NOT A LINK\n\n`isCurrent` renders text with `aria-current=\"page\"`. A link to the page you\nare already on is a dead control: it announces as a link, invites a click,\nand does nothing. This is the most common breadcrumb bug and the reason the\nprop exists rather than being inferred from position — a trail whose last\ncrumb IS a link to somewhere else is legitimate, and inferring would break it.",
+  "import": "import { Breadcrumb } from 'ionbase-ui';",
+  "status": "stable",
+  "summary": "Where this page sits in the hierarchy, and how to get back up. An ordered list inside a named landmark.",
+  "useWhen": [
+    "a page sits more than one level deep and the parent is not otherwise reachable",
+    "a record view needs its collection one click away",
+    "the hierarchy itself is information the user needs — which project, which environment"
+  ],
+  "useInstead": [
+    {
+      "when": "the destinations are siblings rather than ancestors",
+      "use": "Tabs",
+      "why": "a breadcrumb describes depth; tabs describe alternatives at the same depth"
+    },
+    {
+      "when": "the trail is the primary navigation for the whole app",
+      "use": "NavItem inside the app shell",
+      "why": "a breadcrumb supplements navigation, it does not replace it — it appears after a user has already gone somewhere"
+    }
+  ],
+  "slots": {
+    "children": {
+      "accepts": "BreadcrumbItem",
+      "note": "ancestor first, current page last. Anything else and the trail reads backwards"
+    }
+  },
+  "a11y": {
+    "requires": [
+      "`label` when a page has more than one nav landmark — it defaults to \"Breadcrumb\", which is what screen-reader users listen for"
+    ],
+    "notes": [
+      "the separator is drawn by CSS ::before and never enters the accessibility tree; a \"/\" in the markup is announced as punctuation between every crumb",
+      "the list is an `ol`, so the position and length are announced — which is the entire content of a breadcrumb"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "<div>Home / Projects / Invoice 12</div>",
+      "do": "<Breadcrumb><BreadcrumbItem href=\"/\">Home</BreadcrumbItem>…</Breadcrumb>",
+      "why": "a row of divs conveys neither sequence nor position, and the slashes are read aloud"
+    },
+    {
+      "dont": "a full trail on a top-level page",
+      "do": "omit it",
+      "why": "a breadcrumb with one crumb is furniture — it takes vertical space to say nothing"
+    }
+  ],
+  "stylesheet": "src/styles/breadcrumb.css",
+  "tokens": [
+    "--border-focus",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--radius-xs",
+    "--spacing-8",
+    "--text-default",
+    "--text-secondary",
+    "--text-tertiary",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "label": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Names the landmark. A page with more than one `nav` needs them told apart,\nand \"Breadcrumb\" is what screen-reader users are listening for."
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "`BreadcrumbItem` elements, ancestor first."
+    }
+  },
+  "propCounts": {
+    "own": 2,
+    "aria": 0,
+    "dom": 277,
+    "other": 0
+  }
+}

package/dist/meta/BreadcrumbItem.json

@@ -0,0 +1,78 @@
+{
+  "name": "BreadcrumbItem",
+  "source": "src/components/Breadcrumb.tsx",
+  "propsType": "BreadcrumbItemProps",
+  "import": "import { BreadcrumbItem } from 'ionbase-ui';",
+  "status": "stable",
+  "summary": "One crumb. A link to an ancestor, or the current page rendered as text.",
+  "useWhen": [
+    "inside a Breadcrumb, once per level"
+  ],
+  "useInstead": [
+    {
+      "when": "outside a breadcrumb trail",
+      "use": "Link",
+      "why": "the crumb's density, colour and truncation are tuned for a trail and look wrong on their own"
+    }
+  ],
+  "slots": {
+    "children": {
+      "accepts": "text",
+      "note": "the name of the level, not its path"
+    }
+  },
+  "a11y": {
+    "requires": [
+      "`isCurrent` on the last crumb, which renders it as text with aria-current=\"page\" rather than as a link"
+    ],
+    "notes": [
+      "isCurrent is a prop rather than inferred from position: a trail whose last crumb legitimately links elsewhere exists, and inferring would break it"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "<BreadcrumbItem href=\"/invoices/12\">Invoice 12</BreadcrumbItem> for the page you are on",
+      "do": "<BreadcrumbItem isCurrent>Invoice 12</BreadcrumbItem>",
+      "why": "a link to the current page is a dead control — it announces as a link, invites a click and does nothing"
+    }
+  ],
+  "stylesheet": "src/styles/breadcrumb.css",
+  "tokens": [
+    "--border-focus",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--radius-xs",
+    "--spacing-8",
+    "--text-default",
+    "--text-secondary",
+    "--text-tertiary",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "href": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Omit on the current page — the last crumb is not a link."
+    },
+    "isCurrent": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The page the user is on. Marked `aria-current=\"page\"` and rendered as text\nrather than a link."
+    },
+    "children": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 3,
+    "aria": 0,
+    "dom": 277,
+    "other": 0
+  }
+}

package/dist/meta/Checkbox.json

@@ -78,6 +78,11 @@
     {
       "dont": "a div with `role=\"checkbox\"`",
       "why": "form association, the indeterminate property and label clicking are not free to reimplement"
+    },
+    {
+      "dont": "<Checkbox isSelected={on} onChange={(isSelected) => setOn(isSelected)} />",
+      "do": "<Checkbox isSelected={on} onSelectionChange={setOn} />",
+      "why": "both selection shapes work, but they pair: `isSelected` goes with `onSelectionChange`, which receives the boolean, and `checked` goes with `onChange`, which receives the change event. Passing the Aria selection prop with the DOM handler name is the one combination that does not type — `onChange` is still the event handler. There is no `CheckboxChange` type; a generated eval invented one."
     }
   ],
   "deprecated": [
@@ -184,10 +189,22 @@
       "required": false,
       "origin": "own",
       "description": "Figma's `Show Label` + `Label`. Omit for a bare box."
+    },
+    "isSelected": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "React Aria's name for `checked`. Wins when both are passed."
+    },
+    "onSelectionChange": {
+      "type": "((isSelected: boolean) => void) | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Receives the new selection state rather than the change event."
     }
   },
   "propCounts": {
-    "own": 6,
+    "own": 8,
     "aria": 0,
     "dom": 304,
     "other": 0

package/dist/meta/Combobox.json

@@ -0,0 +1,265 @@
+{
+  "name": "Combobox",
+  "source": "src/components/Combobox.tsx",
+  "propsType": "ComboboxProps",
+  "description": "Combobox — a text field that filters a list, with one selected value.\n\nDrawn in Figma as `Combobox` (1370:2359) — three sizes by seven states, the\nsame axes `Input` carries, because the field IS Input's box. The open list is\na second Figma component, `Combobox Menu`, with no React export behind it.\n\nWHY THIS IS NOT `Select` WITH A SEARCH BOX\n\n`Select` wraps a native `<select>`, whose list the browser owns: it cannot be\nfiltered, and its rows can only hold text. Everything above about twenty\noptions needs filtering, and `Select`'s own contract has pointed at \"a\ncombobox — not yet in this system\" since it was written. This is it.\n\nThe cost is that everything the native control gave away for free — keyboard\nhandling, the mobile picker, screen-reader semantics — now has to be built.\nReact Aria's `useComboBox` builds it: `role=\"combobox\"` with `aria-expanded`,\n`aria-controls` and `aria-activedescendant`, arrow keys that move a virtual\nfocus while the real focus stays in the input, and Escape that reverts.\n\nFILTERING IS LOCALE-AWARE, NOT `toLowerCase().includes()`\n\n`useFilter({ sensitivity: 'base' })` is `Intl.Collator` underneath, so\n\"resume\" matches \"résumé\" and Turkish dotted/dotless I behave the way a\nTurkish reader expects. The lowercase-and-includes version fails both, and\nfails them silently in exactly the locales least likely to be tested.",
+  "import": "import { Combobox } from 'ionbase-ui';",
+  "status": "stable",
+  "summary": "A text field that filters a list of options down to one selected value.",
+  "useWhen": [
+    "the list is long enough that scanning it is worse than typing",
+    "the user picks exactly one value from a known set",
+    "the options carry a second line of context the native <select> cannot render"
+  ],
+  "useInstead": [
+    {
+      "when": "the list is short and fully scannable",
+      "use": "Select",
+      "why": "the native control brings keyboard handling and the mobile platform picker for free; this rebuilds all of it"
+    },
+    {
+      "when": "there are two or three mutually exclusive choices worth showing at once",
+      "use": "RadioGroup"
+    },
+    {
+      "when": "the value is free text and the list is only a convenience",
+      "use": "Input",
+      "why": "or set `allowsCustomValue`, which is the same decision made explicitly"
+    },
+    {
+      "when": "the rows are commands rather than values",
+      "use": "Menu",
+      "why": "options are selected and stay selected; menu items are invoked and the menu closes"
+    }
+  ],
+  "variants": {
+    "size": {
+      "sm": {
+        "use": "dense forms, table filters"
+      },
+      "md": {
+        "use": "the default"
+      },
+      "lg": {
+        "use": "prominent single-field forms"
+      }
+    }
+  },
+  "a11y": {
+    "guarantees": [
+      "role=combobox with aria-expanded, aria-controls and aria-activedescendant, from react-aria's useComboBox",
+      "real focus never leaves the input; arrow keys move a virtual focus through the list, which is what keeps typing and browsing possible at once",
+      "the popover is non-modal, so the page behind stays readable and focus stays in the field",
+      "Escape reverts to the last committed value rather than clearing the field",
+      "filtering is Intl.Collator-based, so accents and locale-specific casing behave correctly",
+      "the empty message is a sibling of the listbox, not an option in it, so it is never counted, focused or selectable",
+      "the menu matches the field's width, clamped to the space right of it so a full-bleed field cannot push the menu past the viewport edge"
+    ],
+    "requires": [
+      "`label`, or an `aria-label` when no visible label is rendered",
+      "`emptyLabel` wording that says why nothing is listed, if the default is too terse"
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "giving the disclosure button a tab stop",
+      "why": "the input already opens the list with ArrowDown. A second tab stop doubles the cost of tabbing past every combobox in a form and adds nothing"
+    },
+    {
+      "dont": "styling the focused option with :hover or :focus",
+      "why": "no option is ever either — focus is virtual. Use [data-focused], which react-aria sets for both pointer and keyboard"
+    },
+    {
+      "dont": "posting the input's text in a form",
+      "why": "the text is the label and the value is the key; pass `name` and the component posts the key in a hidden input"
+    },
+    {
+      "dont": "filtering with toLowerCase().includes()",
+      "why": "it fails on accents and on Turkish dotted/dotless I, silently, in the locales least likely to be tested"
+    },
+    {
+      "dont": "writing a width onto the menu from a ResizeObserver or any effect that runs while it is open",
+      "why": "a positioned popover that changes size feeds back into react-aria's positioning, and any scrollbar that results is read by useCloseOnScroll as a real scroll. The menu opens and closes within about a hundred milliseconds, which presents as a keyboard bug rather than a layout one"
+    }
+  ],
+  "slots": {
+    "emptyLabel": {
+      "expects": "what to show when the filter matches nothing"
+    }
+  },
+  "stylesheet": "src/styles/combobox.css",
+  "tokens": [
+    "--border-subtle",
+    "--border-width-default",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--icon-disabled",
+    "--icon-secondary",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--ion-input-icon-size",
+    "--ion-shadow-shadow-lg",
+    "--radius-md",
+    "--radius-sm",
+    "--spacing-12",
+    "--spacing-2",
+    "--spacing-4",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-hover",
+    "--surface-primary-subtle",
+    "--surface-raised",
+    "--text-default",
+    "--text-disabled",
+    "--text-tertiary",
+    "--type-body",
+    "--type-body-line-height",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "options": {
+      "type": "readonly ComboboxOption[]",
+      "required": true,
+      "origin": "own",
+      "description": "The full option list. Filtering happens here, against what is typed."
+    },
+    "label": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Field label. Required for a usable control — see `a11y.requires`."
+    },
+    "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"
+    },
+    "isReadOnly": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "size": {
+      "type": "ComboboxSize | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches Input's `Size` variant: Small, Medium, Large.",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "placeholder": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "selectedKey": {
+      "type": "string | null | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Controlled selection. `null` means nothing is selected."
+    },
+    "defaultSelectedKey": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "onSelectionChange": {
+      "type": "((key: string | null) => void) | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "inputValue": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Controlled text. Usually only needed for async/remote filtering."
+    },
+    "defaultInputValue": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "onInputChange": {
+      "type": "((value: string) => void) | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "allowsCustomValue": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Accept text that matches no option. Off by default: a combobox whose value\nis a free string is a text field with suggestions, and the caller should\nhave to say that is what they want."
+    },
+    "menuTrigger": {
+      "type": "\"focus\" | \"input\" | \"manual\" | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "What opens the list. `input` — react-aria's default and this one — opens it\non the first keystroke; the chevron opens it on demand. `focus` opens it\nthe moment the field is tabbed into, which is loud in a long form.",
+      "values": [
+        "focus",
+        "input",
+        "manual"
+      ]
+    },
+    "emptyLabel": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Shown in place of the list when nothing matches."
+    },
+    "buttonLabel": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Accessible label for the disclosure button."
+    },
+    "name": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Posts the selected value under this name, for an uncontrolled form."
+    },
+    "className": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "wrapperClassName": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "id": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 23,
+    "aria": 0,
+    "dom": 0,
+    "other": 0
+  }
+}