@abuzareal/contour-ui 0.5.0 → 0.6.0

package/README.md

@@ -6,7 +6,7 @@ Use it when you want this visual style with typed controls, feedback, navigation
 
 [Live catalogue](https://contour.abuzr.in/) · [npm package](https://www.npmjs.com/package/@abuzareal/contour-ui) · [Maintainer](https://github.com/abuzareal)
 
-This source checkout targets **0.5.0**. Package publication and application upgrades are separate; check the npm registry for release availability and each application's manifest for its installed version. Catalogue examples include application patterns as well as package components. Check the exports below before treating an example as an importable component.
+This source checkout targets **0.6.0**. Package publication and application upgrades are separate; check the npm registry for release availability and each application's manifest for its installed version. Catalogue examples include application patterns as well as package components. Check the exports below before treating an example as an importable component.
 
 [Public API and maturity register](PUBLIC-API.md) · [Architecture, scope and compatibility](CONTRACTS.md)
 
@@ -16,12 +16,14 @@ Version 0.4.0 adds native named/external form submission and controlled/default/
 
 Version 0.5 adds topmost overlay dismissal, hoverable hints, collision-aware body/modal portals, scoped/prefixed CSS and themes, local labels/formatters, selective style entries and measured size gates. Floating UI DOM is a new runtime positioning dependency. Default portal DOM placement changes ancestor selectors; see [overlay migration](OVERLAYS.md), [styling and embedding](STYLING.md) and [measured costs](SIZE.md). Legacy styles/imports remain available. This is an early 0.x release, not a 1.0 milestone.
 
+Version 0.6 adds a single-select [Combobox](COMBOBOX.md) backed by pinned Base UI, a semantic [Table and application recipes](RECIPES.md), public standalone Vite/Next starters, CSP setup and a minimal reproduction. [Start here](GETTING-STARTED.md); [foundation decision and measured dependency cost](FOUNDATION.md); [documentation coverage](DOCS.md). DataTable retains local scalar sorting. Async requests, deletion and remote table state stay application-owned. The private catalogue and independent consumers are not upgraded by this release.
+
 ## Install
 
 Use an existing React application with a bundler that resolves package CSS imports. Contour ships ESM and TypeScript declarations. The package declares Node.js 22 or newer; repository tooling uses Vite 8, which needs Node.js 22.12+ or 24+.
 
 ```sh
-npm install @abuzareal/contour-ui@0.5.0 --save-exact
+npm install @abuzareal/contour-ui@0.6.0 --save-exact
 ```
 
 Your app must provide matching `react` and `react-dom` versions: **18.3.1 or React 19**. The compatibility script covers 18.3.1, 19.0.0, and 19.3.0; it doesn't establish support for every framework or React Server Component setup. Put interactive components inside a client boundary when your framework requires one.
@@ -121,9 +123,9 @@ For theme selection before first paint, inject `themeBootstrapScript` from `@abu
 | Area                        | Public exports                                                                                                                                                  |
 | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Actions                     | `Button`, `IconButton`, `ExternalLink`, `SegmentedControl`, `ThemeToggle`                                                                                       |
-| Forms                       | `Field`, `TextField`, `TextArea`, `SelectField`, `Checkbox`, `RadioGroup`, `Switch`, `Slider`                                                                   |
+| Forms                       | `Field`, `TextField`, `TextArea`, `SelectField`, `Combobox`, `Checkbox`, `RadioGroup`, `Switch`, `Slider`                                                       |
 | Navigation                  | `Tabs`, `Breadcrumbs`, `Pagination`, `Stepper`, `DropdownMenu`                                                                                                  |
-| Data and layout             | `Avatar`, `Badge`, `Card`, `DataTable`, `Disclosure`, `Divider`, `EmptyState`, `Kbd`, `SectionLabel`, `Stat`, `Tag`, `Timeline`                                 |
+| Data and layout             | `Avatar`, `Badge`, `Card`, `DataTable`, `Table`, `Disclosure`, `Divider`, `EmptyState`, `Kbd`, `SectionLabel`, `Stat`, `Tag`, `Timeline`                        |
 | Feedback                    | `Alert`, `ProgressBar`, `Skeleton`, `Spinner`, `ToastProvider`, `useToast`                                                                                      |
 | Motion and identity         | `BrandMark`, `CountUp`, `DepthButton`, `FlipCard`, `Magnetic`, `Marquee`, `Reveal`, `RevealHeading`, `ScrollProgress`, `TiltCard`, `GitHubIcon`, `LinkedInIcon` |
 | Overlays and scene fallback | `Dialog`, `Popover`, `Tooltip`, `SceneBoundary`                                                                                                                 |
@@ -178,7 +180,7 @@ Give scenes a sized container and a usable static fallback. `SceneBoundary` hide
 **0.2.0** adds native field refs, controlled tabs and popover/menu open state, menu keyboard improvements, native reset synchronization, Three.js lifecycle fixes and a tested Next.js App Router integration. Existing uncontrolled defaults and React 18/19 support remain. `fonts-latin.css`, introduced in 0.1.2, now uses packaged relative font URLs for webpack resolution. `CHANGELOG.md` is included in the package archive and [npm's Code view](https://www.npmjs.com/package/@abuzareal/contour-ui?activeTab=code); it contains the upgrade details for each version.
 
 ```sh
-npm install @abuzareal/contour-ui@0.5.0 --save-exact
+npm install @abuzareal/contour-ui@0.6.0 --save-exact
 ```
 
 Commit your manifest and lockfile, run your application's checks, and review both themes, dialogs, forms, and motion before deploying. Version 0.1.1 includes a document scroll lock for dialogs and drawers. Review any app-level lock before removing it, including nested dialogs and short screens. Package publication doesn't update deployed consumers automatically.

package/RECIPES.md

@@ -0,0 +1,43 @@
+# Application recipes — 0.6.0
+
+The source linked here is the code copied, compiled and exercised by the package checks. These files are application code, not additional exports. Import components directly from the public package; copy only the recipe needed. There are no live services or fabricated successful operations. [Source at this release](https://github.com/abuzareal/contour-ui/tree/v0.6.0/examples/recipes).
+
+## Async single-select
+
+Copy [AsyncProjectPicker.tsx](examples/recipes/AsyncProjectPicker.tsx) and [useRemoteResource.ts](examples/recipes/useRemoteResource.ts). Supply a stable searchProjects(query, signal) function, normally defined outside render or with useCallback. It must validate response IDs/labels, reject malformed data, bound results, and map denied requests to RecipeServiceError("permission"). The component retains one selected record separately from current results. It aborts obsolete work and ignores a response even if the transport ignores abort. Debounce, authentication, caching and data updates are application policies.
+
+The controlled selection and text query are independent; typed text never becomes a project ID. Filtering/reordering preserves identity. Loading, no matches, permission failure, service failure and retry are explicit. A failed or stale response cannot replace a newer selection. Use the native name/form/value contracts from [Combobox](COMBOBOX.md); parent form reset should reset the application's controlled selected/query state when required. No hidden network request is made by the library.
+
+## Destructive confirmation
+
+Copy [DeleteProjectConfirmation.tsx](examples/recipes/DeleteProjectConfirmation.tsx). It composes the existing native **Dialog**; no new AlertDialog export is added. This confirmation is a user-initiated decision with clear consequences, not an urgent unsolicited alert. The title names the project, the description states irreversible consequences, “Keep project” receives initial focus and “Permanently delete project” is explicit. The trigger regains focus after dismissal while it remains connected.
+
+The deleteProject(id, signal) function performs the real server operation; resolving it means the server confirmed success. A disabled pending action prevents duplicate submissions; an immediate ref also guards repeated activation before rendering. A rejected operation keeps the dialog open with a persistent error and an explicit retry action. The example does not announce success until the operation resolves. Target identity keys the interaction, so changing projects or unmounting invalidates the old request.
+
+Escape, backdrop, close and “Keep project” cancel waiting and dismiss, including while pending. Abort cannot guarantee a server rollback; the pending message says the server may still complete. Cancelled or obsolete requests cannot invoke onDeleted or close a later confirmation. The application must reconcile server state before retrying an uncertain outcome and implement authorization/idempotency at its server boundary. Use a different explicit contract if a product must prohibit cancellation during a critical phase. Dialog semantics, keyboard containment and return are inherited from the released Dialog; physical assistive-technology verification is separate.
+
+## Tables: local versus remote
+
+**DataTable** is deliberately small: `Row extends Record<string, string | number>`, caption, columns and a stable rowKey. Local sorting compares string/number values or column.compare; render formats a cell but does not remove the row constraint. Use immutable stable IDs, not array indexes or translated labels. DataTable has no remote sorting/filtering/pagination, selection, bulk actions, virtualization, editing or adjustable density.
+
+**Table** is a new semantic presentation primitive for application-owned native thead/tbody/tr/th/td markup. It accepts native table attributes/events, forwards ref to HTMLTableElement, requires a string caption and children, hides the caption visually by default (`showCaption=false`) and offers native scrollProps/ref for the existing focusable scroll region. It owns one caption; do not supply a second caption in children. Use scope, headers, aria-sort and text equivalents according to the data. It adds no sorting engine, ARIA grid keyboard model or layout algorithm. Overflow is horizontally scrollable. Use data-display.css or scoped.css; contour-table-scroll/contour-data-table and semantic typography/border tokens supply the shared styling.
+
+Copy [RemoteRecordsTable.tsx](examples/recipes/RemoteRecordsTable.tsx) and useRemoteResource.ts. Install **@tanstack/react-table@9.3.1** and **@tanstack/react-store@0.11.2** as your application's direct dependencies; neither is a Contour runtime dependency. This recipe uses v9 useTable/tableFeatures/FlexRender and controlled application state, not the older v8 useReactTable API. [Official v9 state guide](https://tanstack.com/table/latest/docs/framework/react/guide/table-state), [migration guide](https://tanstack.com/table/latest/docs/framework/react/guide/migrating).
+
+loadRecords(query, signal) must perform the requested filter, sorting and pagination remotely. Validate parsed JSON with parseRecordsPage and validate/whitelist query fields at the server; never interpolate arbitrary column IDs into SQL. Only name/owner columns exist in this example. Return rows, filtered total and unfilteredTotal consistently. Name/id/owner are demo record fields, not a prescribed business model.
+
+The app controls query, resets the page when filter/sort changes, ignores obsolete responses, retains and **labels** the previous successful snapshot on loading/service failure, and hides old rows after permission failure. Headers describe the displayed snapshot; pending controls request new data rather than locally sorting old rows. A table caption, native headers, stable row/cell IDs and status text preserve semantics. Loading, empty database, no filter matches, missing page, denied/service error and retry are distinct. Pagination is disabled while the requested result is unresolved or failed. Changes to dataset totals may require “First page”; they do not masquerade as an empty database.
+
+Selection/bulk actions, density, virtualization, pinned columns and enterprise grid behavior are explicitly unsupported in this bounded recipe. If required, define stable selection across pages, permissions, indeterminate/select-all scope, destructive bulk outcomes and keyboard behavior before enabling engine features. Use a mature grid for grid behavior; do not add role=grid to this table without its keyboard contract. Styling is not evidence of a complete enterprise grid.
+
+## Input and typography decisions
+
+[InputCompositions.tsx](examples/recipes/InputCompositions.tsx) demonstrates existing TextField leadingIcon/trailing slots and native form identity. Decorative icons/units use aria-hidden; meaningful units belong in the label/hint. Interactive trailing content needs its own accessible name, button type and focus style; keep long content responsive. No new prefix/suffix API is needed for the demonstrated cases.
+
+A native type=number field is sufficient for the bounded integer seat quantity. There is no recorded adopter requirement for a new locale-aware NumberField. Decimal/group separators, transient minus/decimal input, locale parsing/formatting, range/step, currency precision and serialization need a separate demand/contract gate. Financial amounts must not inherit a binary-floating point money model from a generic input. The conditional NumberField remains deferred.
+
+The optional **password visibility recipe** keeps the same input mounted, name and current-password autocomplete stable, and a named aria-pressed toggle. Focus returns to the input after toggling; no value is copied, transformed or logged. Real password-manager/browser compatibility remains app/device verification. A standalone library PasswordInput is unnecessary without a stronger reusable requirement.
+
+Use native p/span and h1–h6 with [typography tokens](STYLING.md). Heading level follows the document outline; size/weight are CSS choices. No Text/Heading wrappers are added without an independent semantic/variant contract. These explicit scope decisions do not complete deferred NumberField, full grid, calendar or other optional features.
+
+[Report Table/recipes 0.6.0](https://github.com/abuzareal/contour-ui/issues/new?template=bug_report.yml&title=Table%20recipes%200.6.0%3A%20&component=Table%20recipes&version=0.6.0); [standalone reproduction](examples/reproduction). See [public API](PUBLIC-API.md) for exact types, [styling](STYLING.md) and [onboarding](GETTING-STARTED.md). Release source links become available with the published tag.

package/RELEASING.md

@@ -9,10 +9,10 @@ Use [the public contract and compatibility policy](CONTRACTS.md#change-deprecati
 1. Obtain maintainer authorization to publish; validation alone is not authorization.
 2. Select an unused registry version and update package.json, its lockfile and release notes. Never reuse an existing registry version; a locally verified archive does not make it publishable under an already released version. Use a reviewed release commit on main and a matching `vVERSION` tag. The hosted workflow checks the tag version and that its source is an ancestor of origin/main. It cannot publish from a pull request.
 3. Run `npm ci --ignore-scripts`; install Chromium once with `npx playwright install chromium`. Use Node 22.12+ or 24+.
-4. Set `CONTOUR_RELEASE_DIR` to a temporary directory and run `npm run verify:release`. It runs validate once, packs one archive, tests that archive in clean React 18/19 core and optional consumers plus the pinned Next App Router fixtures, checks public API/generated styles and production size budgets, audits dependencies, and writes `verified-archive.json` with its SHA-256. Core consumers must have no Three.js or Lenis installed. Review failures and advisories instead of bypassing gates.
+4. Set `CONTOUR_RELEASE_DIR` to a temporary directory and run `npm run verify:release`. It runs validate once, packs one archive, tests that archive in clean React 18/19 core and optional consumers plus the pinned Next App Router fixtures, checks public API/documentation/generated styles and production size budgets, audits dependencies, and writes `verified-archive.json` with its SHA-256. Core consumers must have no Three.js, Lenis, RHF, TanStack Table or optional date peers installed. Copied adoption recipes run on React 18/19; standalone Vite/Next/reproduction folders run from that archive with their exact versions and production CSP. Review failures and advisories instead of bypassing gates.
 5. Inspect the archive contents, verify its checksum against `verified-archive.json`, and publish that exact path using `npm publish /absolute/path/to/archive.tgz --ignore-scripts --access public`. `--ignore-scripts` is appropriate here because that exact archive has already passed the release gates; it is not permission to publish an unchecked package. Source `npm publish` retains a prepublishOnly guard. The hosted workflow verifies the checksum again and publishes the archive with provenance, avoiding duplicate source gates.
 6. The owner completes npm authentication/2FA personally. Never put tokens, OTPs or credentials in this repository or logs. Prefer configured trusted publishing and short-lived identity over persistent tokens.
-7. Verify registry version, tarball/integrity and publication date; install that exact registry version in each affected consumer, commit its manifest/lockfile, and run its required checks before deployment. Do not substitute a local link or source copy for release validation.
+7. Verify registry version, tarball/integrity and publication date; install that exact registry version in each affected consumer, commit its manifest/lockfile, and run its required checks before deployment. Before closing the starter publication gate, run `CONTOUR_STARTER_REGISTRY=1 npm run test:starters` to verify clean published-package installs; the prepublish archive run alone does not satisfy that gate. Do not substitute a local link or source copy for release validation.
 
 The tag workflow is configured for a public repository on main. Configuration does not prove that its npm trusted-publisher relationship is active; check npm/GitHub settings before relying on it. Publication requires authorization even when CI passes.
 

package/SIZE.md

@@ -1,6 +1,6 @@
 # Package and application size
 
-A package archive, installed dependencies and a browser download are different costs. Contour does not claim to be zero-dependency or the lightest library. `scripts/measure-size.mjs` builds public-import Button, settings-form and table journeys in Vite and pinned Next App Router/webpack, loads fresh browser pages, and writes a JSON report. An additional Button-with-ArrowRight fixture measures the incremental selected-icon journey; it is not an isolated icon-function byte count.
+A package archive, installed dependencies and a browser download are different costs. Contour does not claim to be zero-dependency or the lightest library. `scripts/measure-size.mjs` builds public-import Button, settings-form, table and Combobox journeys in Vite and pinned Next App Router/webpack, loads fresh browser pages, and writes a JSON report. An additional Button-with-ArrowRight fixture measures the incremental selected-icon journey; it is not an isolated icon-function byte count.
 
 ```sh
 npm run build
@@ -8,7 +8,7 @@ CONTOUR_SIZE_OUTPUT=/absolute/path/sizes.json npm run measure:size
 CONTOUR_SIZE_OUTPUT=/absolute/path/check.json npm run check:size
 ```
 
-Set `CONTOUR_ARCHIVE` to the already packed candidate to reuse it. Fixtures install React/React DOM 19.3.0; Next uses 16.4.0, and Vite/Chromium/Node versions are recorded from the running tools. The report names package/source commit/dirty state, archive checksum/files/compressed/unpacked bytes, the fresh dependency lock hash, resolved dependency versions, fixtures, exclusions, raw/gzip file sizes and actual Resource Timing transfers. These are reproducible fixtures, not latency or production-site benchmarks. No React/framework externals are removed from the application totals. Next shared JS is the intersection of actually fetched URLs across the three fresh routes; route-specific JS is listed separately. Server build output is excluded from client bytes.
+Set `CONTOUR_ARCHIVE` to the already packed candidate to reuse it. Fixtures install React/React DOM 19.3.0; Next uses 16.4.0, and Vite/Chromium/Node versions are recorded from the running tools. The report names package/source commit/dirty state, archive checksum/files/compressed/unpacked bytes, the fresh dependency lock hash, resolved dependency versions, fixtures, exclusions, raw/gzip file sizes and actual Resource Timing transfers. These are reproducible fixtures, not latency or production-site benchmarks. No React/framework externals are removed from the application totals. Next shared JS is the intersection of actually fetched URLs across the measured fresh routes; route-specific JS is listed separately. Server build output is excluded from client bytes.
 
 Raw minified JS/CSS is reported per actual fetched file and by fixture. Gzip level 9 is reported **per file**, never summed and advertised as an application gzip total. Network transfer, encoded body and decoded body measurements are kept separately, including document/RSC resources. CSS/font requests, archive size and library dependency-closure installed file bytes are separate categories. Install counts exclude Next/Vite/development tooling and record React peers separately. Optional Three.js, Lenis and RHF are absent from core fixtures.
 
@@ -23,7 +23,7 @@ The 13 October Vite comparison used identical React 19.3.0 journeys against 0.4.
 | actions.css      | Button/IconButton/DepthButton, SegmentedControl, Magnetic, ThemeToggle; required loading Spinner styles |
 | forms.css        | Field/TextField/TextArea/SelectField, Checkbox/RadioGroup/Switch/Slider                                 |
 | navigation.css   | Tabs, Breadcrumbs, Pagination, Stepper                                                                  |
-| data-display.css | Card/Avatar/Badge/Tag/Stat, DataTable/Timeline and value-display patterns                               |
+| data-display.css | Card/Avatar/Badge/Tag/Stat, Table/DataTable/Timeline and value-display patterns                         |
 | feedback.css     | Alert, ToastProvider, ProgressBar, Spinner, Skeleton, EmptyState                                        |
 | overlays.css     | Tooltip, Popover, DropdownMenu, Dialog/drawers                                                          |
 | effects.css      | TiltCard/FlipCard/Marquee and CSS effects                                                               |
@@ -43,3 +43,9 @@ Three.js/Lenis stay optional peers behind their entries. Core imports do not ins
 ## Regression policy
 
 `scripts/size-baseline.json` records the actual measured baseline and budgets. The gate allows 10% plus 1,024 bytes on raw fetched JS/CSS totals for deliberate review and chunk/minifier drift, and requires zero font requests in system-font fixtures. Update a baseline only after reviewing a real report and explaining intentional growth; do not automatically ratchet it to pass. Source/package/dependency changes can alter results even with the same components. Release verification and CI use the same packed archive and run this gate. The library-only samples from earlier research are not substituted for these application measurements.
+
+## 0.6 Combobox measurement
+
+On 14 October 2026, an initial 0.6.0 candidate used the same production fixtures to measure the new Combobox journey with React 19.3.0, Vite 8.3.2, Next 16.4.0/webpack, Node 26.10.0 and Chromium 153. A fresh Vite page fetched 365,549 raw JS bytes; selective forms/actions CSS fetched 24,729 bytes (aggregate 47,625). The Next Combobox route fetched 593,605 raw client JS bytes and 46,807 CSS bytes, including framework/shared assets. These are dated candidate measurements, not immutable final-archive byte counts. The release gate remeasures its exact archive. These whole-application fixtures are not an isolated component size or an upstream bundle-size badge. Per-file gzip and actual Resource Timing are retained in the report; independent gzip files are not advertised as an additive component total.
+
+Every previous journey stays within its existing budget. Initial Combobox budgets are added separately under the same 10% plus 1,024-byte policy; old budgets are not reset to the new measurements. The root Button fixture remains 227,291 raw Vite JS bytes with zero font requests; importing one component does not require downloading the Combobox route's full client code. All runtime dependencies still install with the package. Base UI adds installed files and an unstyled interaction dependency; see FOUNDATION.md for the identical-host comparison and its limitations. Its optional date/time peers are absent from core consumers. TanStack Table/Store and RHF are recipe dependencies only.

package/dist/components/ui/Combobox.d.ts

@@ -0,0 +1,325 @@
+export type { ComboboxOption, ComboboxProps } from "./Combobox.types.js";
+import type { ComboboxOption } from "./Combobox.types.js";
+/** Searchable allowed-value selection. The forwarded ref targets the visible input. */
+declare const Combobox: import("react").ForwardRefExoticComponent<import("../../hooks/useFloatingPanel.js").FloatingOptions & {
+    label: string;
+    options: readonly ComboboxOption[];
+    filteredOptions?: readonly ComboboxOption[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputValueChange?: (query: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    id?: string;
+    name?: string;
+    form?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    hint?: string;
+    error?: string;
+    hideLabel?: boolean;
+    loading?: boolean;
+    searchError?: string;
+    onRetry?: () => void;
+    loadingText?: string;
+    emptyText?: string;
+    retryLabel?: string;
+    triggerLabel?: string;
+    missingValueText?: string;
+    inputProps?: {
+        [x: `data-${string}`]: string | number | boolean | undefined;
+        title?: string | undefined | undefined;
+        ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        className?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        height?: number | string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        max?: number | string | undefined | undefined;
+        min?: number | string | undefined | undefined;
+        style?: import("react").CSSProperties | undefined;
+        width?: number | string | undefined | undefined;
+        role?: import("react").AriaRole | undefined;
+        tabIndex?: number | undefined | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
+        onCopy?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCopyCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCut?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCutCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPaste?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPasteCapture?: import("react").ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCompositionEnd?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStart?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdate?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLInputElement> | undefined;
+        onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        onFocusCapture?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        onBlurCapture?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
+        onChangeCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInput?: import("react").InputEventHandler<HTMLInputElement> | undefined;
+        onBeforeInputCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onInput?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onInputCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onReset?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onResetCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onSubmit?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onSubmitCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onInvalid?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onInvalidCapture?: import("react").FormEventHandler<HTMLInputElement> | undefined;
+        onLoad?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onError?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onErrorCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPress?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUp?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
+        onAbort?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onAbortCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlay?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThrough?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChange?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChangeCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptied?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptiedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onEncrypted?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onEncryptedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onEnded?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onEndedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedData?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedDataCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadata?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStart?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStartCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onPause?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onPauseCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onPlay?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onPlaying?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayingCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onProgress?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onProgressCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChange?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChangeCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeked?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekedCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeking?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekingCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onStalled?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onStalledCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspend?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspendCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdate?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChange?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onWaiting?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onWaitingCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onAuxClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onAuxClickCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onClickCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenu?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenuCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClickCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onDrag?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnd?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragEndCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnter?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnterCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragExit?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragExitCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeave?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeaveCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragOver?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragOverCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragStart?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDragStartCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDrop?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onDropCapture?: import("react").DragEventHandler<HTMLInputElement> | undefined;
+        onMouseDown?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseDownCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseEnter?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseLeave?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMove?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMoveCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOut?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOutCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOver?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOverCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUp?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUpCapture?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onSelect?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onSelectCapture?: import("react").ReactEventHandler<HTMLInputElement> | undefined;
+        onTouchCancel?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchCancelCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEnd?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEndCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMove?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMoveCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStart?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStartCapture?: import("react").TouchEventHandler<HTMLInputElement> | undefined;
+        onPointerDown?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerDownCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMove?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMoveCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUp?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUpCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancel?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancelCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerEnter?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerLeave?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOver?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOverCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOut?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOutCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLInputElement> | undefined;
+        onScroll?: import("react").UIEventHandler<HTMLInputElement> | undefined;
+        onScrollCapture?: import("react").UIEventHandler<HTMLInputElement> | undefined;
+        onWheel?: import("react").WheelEventHandler<HTMLInputElement> | undefined;
+        onWheelCapture?: import("react").WheelEventHandler<HTMLInputElement> | undefined;
+        onAnimationStart?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEnd?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIteration?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLInputElement> | undefined;
+        onTransitionEnd?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
+        key?: import("react").Key | null | undefined;
+        size?: number | undefined | undefined;
+        list?: string | undefined | undefined;
+        src?: string | undefined | undefined;
+        alt?: string | undefined | undefined;
+        step?: number | string | undefined | undefined;
+        formAction?: string | undefined;
+        formEncType?: string | undefined | undefined;
+        formMethod?: string | undefined | undefined;
+        formNoValidate?: boolean | undefined | undefined;
+        formTarget?: string | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        hidden?: boolean | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radioGroup?: string | undefined | undefined;
+        about?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
+        accept?: string | undefined | undefined;
+        autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
+        capture?: boolean | "user" | "environment" | undefined | undefined;
+        checked?: boolean | undefined | undefined;
+        maxLength?: number | undefined | undefined;
+        minLength?: number | undefined | undefined;
+        multiple?: boolean | undefined | undefined;
+        pattern?: string | undefined | undefined;
+        placeholder?: string | undefined | undefined;
+    };
+    popupProps?: import("../../lib/componentProps.js").NativePartProps<"div">;
+    rootProps?: import("../../lib/componentProps.js").NativePartProps<"div">;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Combobox;