@agentero/design-system 0.32.0 → 0.32.1

package/mcp/manifests/components.html

@@ -588,13 +588,13 @@
 <header>
   <div class="wrap">
     <h1>Manifest Debugger</h1>
-    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">34 components ok</span><span class="filter-pill ok" aria-disabled="true">279 stories ok</span></div>
+    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">34 components ok</span><span class="filter-pill ok" aria-disabled="true">281 stories ok</span></div>
   </div>
 </header>
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-component-meta</code>. Generation took <strong>5.2s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>4.0s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -2855,9 +2855,9 @@ import { CheckList } from &#39;@agentero/design-system/check-list&#39;;
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Combobox.Root</h2>
       <div class="badges">
-        <label for="c-7-components-combobox-props" class="badge ok as-toggle">38 prop types</label>
+        <label for="c-7-components-combobox-props" class="badge ok as-toggle">39 prop types</label>
         
-        <label for="c-7-components-combobox-stories" class="badge ok as-toggle">8 stories</label>
+        <label for="c-7-components-combobox-stories" class="badge ok as-toggle">10 stories</label>
         
         
       </div>
@@ -2900,7 +2900,7 @@ import { Combobox } from &#39;@agentero/design-system/combobox&#39;;
           <div class="note ok">
             <div class="row">
               <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
-              <span class="badge ok">38 prop types</span>
+              <span class="badge ok">39 prop types</span>
             </div>
             <pre><code>Component: src/combobox/index.ts::Combobox</code></pre>
             <pre><code>Props:</code></pre>
@@ -3060,6 +3060,14 @@ locale?: LocalesArgument
  */
 loopFocus?: boolean = true
 
+/**
+ * Characters the query needs, spaces aside, before the list opens. Below it
+ * focusing, clicking or pressing the chevron leaves the list shut, and
+ * deleting back under it closes the list. Defaults to `0`: the list opens on
+ * focus.
+ */
+minInputLength?: number = 0
+
 /**
  * Determines if the popup enters a modal state when open.
  * - `true`: user interaction is limited to the popup: document page scroll is locked and pointer interactions on outside elements are disabled.
@@ -3149,17 +3157,7 @@ virtualized?: boolean = false</code></pre>
                 <div class="row">
                   <span class="ex-name">Imports</span>
                 </div>
-                <pre><code>import {
-    Button,
-    Combobox,
-    Field,
-    FieldText,
-    IconSearch,
-    Label,
-    Modal,
-    Skeleton,
-    Tag,
-} from "@agentero/design-system";
+                <pre><code>import { Button, Combobox, Field, FieldText, Label, Modal, Skeleton, Tag } from "@agentero/design-system";
 import { Suspense } from "react";</code></pre>
               </div>
           
@@ -3169,9 +3167,11 @@ import { Suspense } from "react";</code></pre>
                 <span class="ex-name">Default</span>
                 <span class="badge ok">story ok</span>
               </div>
-              
+              <div>Search field with a magnifier and clear button over an in-memory list</div>
               <div class="hint">The common case: options are already in memory and Base UI filters them against
-what you type. Selecting a row fills the input and closes the list.</div>
+what you type. Selecting a row fills the input and closes the list. The field is
+a search out of the box — a magnifier in front, a clear button once something is
+picked — and the list hangs from the whole field.</div>
               <pre><code>const Default = () =&gt; (
     &lt;Combobox.Root items={STATES}&gt;
         &lt;Combobox.Input placeholder=&quot;Search states&quot; aria-label=&quot;Search states&quot; /&gt;
@@ -3186,6 +3186,83 @@ what you type. Selecting a row fills the input and closes the list.</div>
             &lt;/Combobox.List&gt;
         &lt;/Combobox.Content&gt;
     &lt;/Combobox.Root&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Plain</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Bare input with no icon and no clear button</div>
+              <div class="hint">`variant=&quot;plain&quot;`: the input alone, with no magnifier and no clear button, for a
+field that needs no affordance — a FEIN lookup, a template name. The list still
+matches the field&#39;s width.</div>
+              <pre><code>const Plain = () =&gt; (
+    &lt;Combobox.Root items={STATES}&gt;
+        &lt;Combobox.Input variant=&quot;plain&quot; placeholder=&quot;State&quot; aria-label=&quot;State&quot; /&gt;
+        &lt;Combobox.Content&gt;
+            &lt;Combobox.Empty&gt;No matches found&lt;/Combobox.Empty&gt;
+            &lt;Combobox.List&gt;
+                {(state: string) =&gt; (
+                    &lt;Combobox.Item key={state} value={state}&gt;
+                        {state}
+                    &lt;/Combobox.Item&gt;
+                )}
+            &lt;/Combobox.List&gt;
+        &lt;/Combobox.Content&gt;
+    &lt;/Combobox.Root&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Select</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Field with a chevron that toggles the list, for short known lists</div>
+              <div class="hint">`variant=&quot;select&quot;`: a chevron after the input opens and closes the list, for a
+short known list the user may want to browse before typing. It has no clear
+button by default. The chevron is out of the tab order — the input already
+opens the list from the keyboard with the arrow keys.</div>
+              <pre><code>const Select = () =&gt; (
+    &lt;Combobox.Root items={STATES}&gt;
+        &lt;Combobox.Input variant=&quot;select&quot; placeholder=&quot;Choose a state&quot; aria-label=&quot;State&quot; /&gt;
+        &lt;Combobox.Content&gt;
+            &lt;Combobox.Empty&gt;No matches found&lt;/Combobox.Empty&gt;
+            &lt;Combobox.List&gt;
+                {(state: string) =&gt; (
+                    &lt;Combobox.Item key={state} value={state}&gt;
+                        {state}
+                    &lt;/Combobox.Item&gt;
+                )}
+            &lt;/Combobox.List&gt;
+        &lt;/Combobox.Content&gt;
+    &lt;/Combobox.Root&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Select With Clear</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Select field with a clear button added through showClear</div>
+              <div class="hint">`showClear` overrides the variant&#39;s default: here it adds the clear button to a
+`select`, so a picked option can be removed without selecting the text and
+deleting it. While there is a value it takes the chevron&#39;s place; clearing
+brings the chevron back. Passing `false` drops it from `search`.</div>
+              <pre><code>const SelectWithClear = () =&gt; (
+    &lt;Combobox.Root items={STATES} defaultValue=&quot;Florida&quot;&gt;
+        &lt;Combobox.Input variant=&quot;select&quot; showClear placeholder=&quot;Choose a state&quot; aria-label=&quot;State&quot; /&gt;
+        &lt;Combobox.Content&gt;
+            &lt;Combobox.Empty&gt;No matches found&lt;/Combobox.Empty&gt;
+            &lt;Combobox.List&gt;
+                {(state: string) =&gt; (
+                    &lt;Combobox.Item key={state} value={state}&gt;
+                        {state}
+                    &lt;/Combobox.Item&gt;
+                )}
+            &lt;/Combobox.List&gt;
+        &lt;/Combobox.Content&gt;
+    &lt;/Combobox.Root&gt;
 );</code></pre>
             </div>
             <div class="note ok">
@@ -3294,11 +3371,15 @@ out-of-order responses harmless. Drop a `useSuspenseQuery` where `use()` is.</di
                 <span class="ex-name">Async Search With Status</span>
                 <span class="badge ok">story ok</span>
               </div>
-              
+              <div>API search that waits for two characters, with loading status</div>
               <div class="hint">The same search without Suspense, for a consumer that gets a `loading` flag from
 its data layer instead: `filter={null}`, the rows arrive through `filteredItems`,
 `Content` is marked busy and `Status` announces the wait. The list is cleared
-before each request and a request that is no longer the latest is dropped.</div>
+before each request and a request that is no longer the latest is dropped.
+
+`minInputLength` keeps the list shut until two characters are typed — focusing
+the field opens nothing, and deleting back under the minimum closes it — and
+no request goes out for a shorter query either.</div>
               <pre><code>const AsyncSearchWithStatus = () =&gt; {
     const [results, setResults] = useState&lt;Agency[]&gt;([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -3307,6 +3388,11 @@ before each request and a request that is no longer the latest is dropped.</div>
 
     const onInputValueChange = async (query: string) =&gt; {
         const request = ++latestRequest.current;
+        if (query.trim().length &lt; MIN_QUERY_LENGTH) {
+            setResults([]);
+            setIsLoading(false);
+            return;
+        }
 
         // The previous rows go before the wait starts: a list that no longer matches what is typed
         // must not sit under the loading state.
@@ -3325,6 +3411,7 @@ before each request and a request that is no longer the latest is dropped.</div>
             items={results}
             filteredItems={results}
             filter={null}
+            minInputLength={MIN_QUERY_LENGTH}
             itemToStringLabel={(agency: Agency) =&gt; agency.name}
             isItemEqualToValue={(a: Agency, b: Agency) =&gt; a.id === b.id}
             onInputValueChange={onInputValueChange}&gt;
@@ -3379,39 +3466,6 @@ rest of the page from assistive technology, label included, and a
         &lt;Field.Description&gt;The agency this agent will be added to.&lt;/Field.Description&gt;
         &lt;Field.Error errors={[{ message: &#39;Pick an agency from the list&#39; }]} /&gt;
     &lt;/FieldText&gt;
-);</code></pre>
-            </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">With Leading Icon</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              
-              <div class="hint">A leading icon is composed around the input, not baked in: not every combobox
-is a search (a FEIN lookup or a template picker are not), so the component
-ships no icon of its own. Until `InputGroup` lands in the design system, the
-marketplace search fields get theirs like this — the icon overlaid, the input
-padded past it.</div>
-              <pre><code>const WithLeadingIcon = () =&gt; (
-    &lt;Combobox.Root items={STATES}&gt;
-        &lt;div className=&quot;relative&quot;&gt;
-            &lt;IconSearch
-                aria-hidden
-                className=&quot;pointer-events-none absolute top-1/2 left-3 -z-hide size-6 -translate-y-1/2 [&amp;&gt;path]:fill-icon-default-base-tertiary&quot;
-            /&gt;
-            &lt;Combobox.Input className=&quot;pl-11&quot; placeholder=&quot;Search states&quot; aria-label=&quot;Search states&quot; /&gt;
-        &lt;/div&gt;
-        &lt;Combobox.Content&gt;
-            &lt;Combobox.Empty&gt;No matches found&lt;/Combobox.Empty&gt;
-            &lt;Combobox.List&gt;
-                {(state: string) =&gt; (
-                    &lt;Combobox.Item key={state} value={state}&gt;
-                        {state}
-                    &lt;/Combobox.Item&gt;
-                )}
-            &lt;/Combobox.List&gt;
-        &lt;/Combobox.Content&gt;
-    &lt;/Combobox.Root&gt;
 );</code></pre>
             </div>
             <div class="note ok">

package/mcp/manifests/components.json

@@ -2007,7 +2007,7 @@
         "displayName": "Combobox.Root",
         "exportName": "Combobox",
         "filePath": "/home/runner/work/design-system/design-system/src/combobox/index.ts",
-        "description": "Root of a combobox: a text input that filters a list of options and writes the\nchosen one back into itself. With `Input` as the only trigger, the list opens on\nfocus or on the first keystroke.\n\nPass the options as `items`. For a list that comes from the server, set\n`filter={null}`, hand the already-filtered rows to `filteredItems`, and request\nthem from `onInputValueChange`; `Status` then announces the wait.\n\nWith `multiple`, the value is an array and picking a row toggles it. The list\nstays open and keeps the typed query between picks, so several rows can be\nticked from one search; closing the list (Escape, a click outside) still resets\nthe query. Each row then shows whether it is selected — see `Item`. Nothing is\nwritten back into the input: render the selection next to the field.",
+        "description": "Root of a combobox: a text input that filters a list of options and writes the\nchosen one back into itself. The list opens on focus, on the first keystroke\nor from the chevron of `Input`'s `select` variant.\n\nFor a search against an API, set `minInputLength` so the list stays shut until\nthe query is worth sending: a field that opens an empty list on focus reads as\nbroken. For a pick from a short fixed list with no typing at all, prefer a\nselect.\n\nPass the options as `items`. For a list that comes from the server, set\n`filter={null}`, hand the already-filtered rows to `filteredItems`, and request\nthem from `onInputValueChange`; `Status` then announces the wait.\n\nEvery Base UI root prop is accepted and forwarded — `items`, `filter`,\n`value`, `onValueChange` and so on. `open` stays the consumer's to control;\n`minInputLength` only refuses to open below the minimum.\n\nWith `multiple`, the value is an array and picking a row toggles it. The list\nstays open and keeps the typed query between picks, so several rows can be\nticked from one search; closing the list (Escape, a click outside) still resets\nthe query. Each row then shows whether it is selected — see `Item`. Nothing is\nwritten back into the input: render the selection next to the field.",
         "jsDocTags": {
           "summary": [
             "Root provider for an input-triggered filterable list"
@@ -2769,6 +2769,27 @@
                 "fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
               }
             ]
+          },
+          "minInputLength": {
+            "name": "minInputLength",
+            "required": false,
+            "type": {
+              "name": "number"
+            },
+            "description": "Characters the query needs, spaces aside, before the list opens. Below it\nfocusing, clicking or pressing the chevron leaves the list shut, and\ndeleting back under it closes the list. Defaults to `0`: the list opens on\nfocus.",
+            "defaultValue": {
+              "value": "0"
+            },
+            "parent": {
+              "name": "ComboboxRootProps",
+              "fileName": "src/combobox/combobox.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/combobox/combobox.tsx"
+              }
+            ]
           }
         }
       },
@@ -2777,7 +2798,29 @@
           "id": "components-combobox--default",
           "name": "Default",
           "snippet": "const Default = () => (\n    <Combobox.Root items={STATES}>\n        <Combobox.Input placeholder=\"Search states\" aria-label=\"Search states\" />\n        <Combobox.Content>\n            <Combobox.Empty>No matches found</Combobox.Empty>\n            <Combobox.List>\n                {(state: string) => (\n                    <Combobox.Item key={state} value={state}>\n                        {state}\n                    </Combobox.Item>\n                )}\n            </Combobox.List>\n        </Combobox.Content>\n    </Combobox.Root>\n);",
-          "description": "The common case: options are already in memory and Base UI filters them against\nwhat you type. Selecting a row fills the input and closes the list."
+          "description": "The common case: options are already in memory and Base UI filters them against\nwhat you type. Selecting a row fills the input and closes the list. The field is\na search out of the box — a magnifier in front, a clear button once something is\npicked — and the list hangs from the whole field.",
+          "summary": "Search field with a magnifier and clear button over an in-memory list"
+        },
+        {
+          "id": "components-combobox--plain",
+          "name": "Plain",
+          "snippet": "const Plain = () => (\n    <Combobox.Root items={STATES}>\n        <Combobox.Input variant=\"plain\" placeholder=\"State\" aria-label=\"State\" />\n        <Combobox.Content>\n            <Combobox.Empty>No matches found</Combobox.Empty>\n            <Combobox.List>\n                {(state: string) => (\n                    <Combobox.Item key={state} value={state}>\n                        {state}\n                    </Combobox.Item>\n                )}\n            </Combobox.List>\n        </Combobox.Content>\n    </Combobox.Root>\n);",
+          "description": "`variant=\"plain\"`: the input alone, with no magnifier and no clear button, for a\nfield that needs no affordance — a FEIN lookup, a template name. The list still\nmatches the field's width.",
+          "summary": "Bare input with no icon and no clear button"
+        },
+        {
+          "id": "components-combobox--select",
+          "name": "Select",
+          "snippet": "const Select = () => (\n    <Combobox.Root items={STATES}>\n        <Combobox.Input variant=\"select\" placeholder=\"Choose a state\" aria-label=\"State\" />\n        <Combobox.Content>\n            <Combobox.Empty>No matches found</Combobox.Empty>\n            <Combobox.List>\n                {(state: string) => (\n                    <Combobox.Item key={state} value={state}>\n                        {state}\n                    </Combobox.Item>\n                )}\n            </Combobox.List>\n        </Combobox.Content>\n    </Combobox.Root>\n);",
+          "description": "`variant=\"select\"`: a chevron after the input opens and closes the list, for a\nshort known list the user may want to browse before typing. It has no clear\nbutton by default. The chevron is out of the tab order — the input already\nopens the list from the keyboard with the arrow keys.",
+          "summary": "Field with a chevron that toggles the list, for short known lists"
+        },
+        {
+          "id": "components-combobox--select-with-clear",
+          "name": "Select With Clear",
+          "snippet": "const SelectWithClear = () => (\n    <Combobox.Root items={STATES} defaultValue=\"Florida\">\n        <Combobox.Input variant=\"select\" showClear placeholder=\"Choose a state\" aria-label=\"State\" />\n        <Combobox.Content>\n            <Combobox.Empty>No matches found</Combobox.Empty>\n            <Combobox.List>\n                {(state: string) => (\n                    <Combobox.Item key={state} value={state}>\n                        {state}\n                    </Combobox.Item>\n                )}\n            </Combobox.List>\n        </Combobox.Content>\n    </Combobox.Root>\n);",
+          "description": "`showClear` overrides the variant's default: here it adds the clear button to a\n`select`, so a picked option can be removed without selecting the text and\ndeleting it. While there is a value it takes the chevron's place; clearing\nbrings the chevron back. Passing `false` drops it from `search`.",
+          "summary": "Select field with a clear button added through showClear"
         },
         {
           "id": "components-combobox--no-matches",
@@ -2800,8 +2843,9 @@
         {
           "id": "components-combobox--async-search-with-status",
           "name": "Async Search With Status",
-          "snippet": "const AsyncSearchWithStatus = () => {\n    const [results, setResults] = useState<Agency[]>([]);\n    const [isLoading, setIsLoading] = useState(false);\n    // Only the latest request may land; fast typing returns responses out of order.\n    const latestRequest = useRef(0);\n\n    const onInputValueChange = async (query: string) => {\n        const request = ++latestRequest.current;\n\n        // The previous rows go before the wait starts: a list that no longer matches what is typed\n        // must not sit under the loading state.\n        setResults([]);\n        setIsLoading(true);\n        const agencies = await searchAgencies(query);\n        if (request !== latestRequest.current) return;\n\n        setResults(agencies);\n        setIsLoading(false);\n    };\n\n    return (\n        // `filter={null}` hands filtering to the server; `filteredItems` is what came back.\n        <Combobox.Root\n            items={results}\n            filteredItems={results}\n            filter={null}\n            itemToStringLabel={(agency: Agency) => agency.name}\n            isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}\n            onInputValueChange={onInputValueChange}>\n            <Combobox.Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n            <Combobox.Content aria-busy={isLoading || undefined}>\n                {/* The rows show the wait; `Status` only announces it. */}\n                <Combobox.Status className=\"sr-only\">\n                    {isLoading ? 'Searching…' : undefined}\n                </Combobox.Status>\n                {isLoading && <SkeletonRows />}\n                <Combobox.Empty>{isLoading ? undefined : 'No agencies found'}</Combobox.Empty>\n                <Combobox.List>\n                    {(agency: Agency) => (\n                        <Combobox.Item key={agency.id} value={agency}>\n                            {agency.name}\n                        </Combobox.Item>\n                    )}\n                </Combobox.List>\n            </Combobox.Content>\n        </Combobox.Root>\n    );\n};",
-          "description": "The same search without Suspense, for a consumer that gets a `loading` flag from\nits data layer instead: `filter={null}`, the rows arrive through `filteredItems`,\n`Content` is marked busy and `Status` announces the wait. The list is cleared\nbefore each request and a request that is no longer the latest is dropped."
+          "snippet": "const AsyncSearchWithStatus = () => {\n    const [results, setResults] = useState<Agency[]>([]);\n    const [isLoading, setIsLoading] = useState(false);\n    // Only the latest request may land; fast typing returns responses out of order.\n    const latestRequest = useRef(0);\n\n    const onInputValueChange = async (query: string) => {\n        const request = ++latestRequest.current;\n        if (query.trim().length < MIN_QUERY_LENGTH) {\n            setResults([]);\n            setIsLoading(false);\n            return;\n        }\n\n        // The previous rows go before the wait starts: a list that no longer matches what is typed\n        // must not sit under the loading state.\n        setResults([]);\n        setIsLoading(true);\n        const agencies = await searchAgencies(query);\n        if (request !== latestRequest.current) return;\n\n        setResults(agencies);\n        setIsLoading(false);\n    };\n\n    return (\n        // `filter={null}` hands filtering to the server; `filteredItems` is what came back.\n        <Combobox.Root\n            items={results}\n            filteredItems={results}\n            filter={null}\n            minInputLength={MIN_QUERY_LENGTH}\n            itemToStringLabel={(agency: Agency) => agency.name}\n            isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}\n            onInputValueChange={onInputValueChange}>\n            <Combobox.Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n            <Combobox.Content aria-busy={isLoading || undefined}>\n                {/* The rows show the wait; `Status` only announces it. */}\n                <Combobox.Status className=\"sr-only\">\n                    {isLoading ? 'Searching…' : undefined}\n                </Combobox.Status>\n                {isLoading && <SkeletonRows />}\n                <Combobox.Empty>{isLoading ? undefined : 'No agencies found'}</Combobox.Empty>\n                <Combobox.List>\n                    {(agency: Agency) => (\n                        <Combobox.Item key={agency.id} value={agency}>\n                            {agency.name}\n                        </Combobox.Item>\n                    )}\n                </Combobox.List>\n            </Combobox.Content>\n        </Combobox.Root>\n    );\n};",
+          "description": "The same search without Suspense, for a consumer that gets a `loading` flag from\nits data layer instead: `filter={null}`, the rows arrive through `filteredItems`,\n`Content` is marked busy and `Status` announces the wait. The list is cleared\nbefore each request and a request that is no longer the latest is dropped.\n\n`minInputLength` keeps the list shut until two characters are typed — focusing\nthe field opens nothing, and deleting back under the minimum closes it — and\nno request goes out for a shorter query either.",
+          "summary": "API search that waits for two characters, with loading status"
         },
         {
           "id": "components-combobox--inside-field-text",
@@ -2809,12 +2853,6 @@
           "snippet": "const InsideFieldText = () => (\n    <FieldText invalid required>\n        <Label>Agency</Label>\n        <Combobox.Root items={STATES}>\n            <Combobox.Input placeholder=\"Search agencies\" />\n            <Combobox.Content>\n                <Combobox.Empty>No matches found</Combobox.Empty>\n                <Combobox.List>\n                    {(state: string) => (\n                        <Combobox.Item key={state} value={state}>\n                            {state}\n                        </Combobox.Item>\n                    )}\n                </Combobox.List>\n            </Combobox.Content>\n        </Combobox.Root>\n        <Field.Description>The agency this agent will be added to.</Field.Description>\n        <Field.Error errors={[{ message: 'Pick an agency from the list' }]} />\n    </FieldText>\n);",
           "description": "Dropped into a `FieldText`, the input takes the label, the description and\nthe error from the field with nothing wired by hand: `Combobox.Input` reads the\nsame `InputContext` the plain `Input` does. It also points `aria-labelledby`\nat the label, so the name survives the list opening: Base UI then hides the\nrest of the page from assistive technology, label included, and a\n`<label for>` alone would stop naming the input."
         },
-        {
-          "id": "components-combobox--with-leading-icon",
-          "name": "With Leading Icon",
-          "snippet": "const WithLeadingIcon = () => (\n    <Combobox.Root items={STATES}>\n        <div className=\"relative\">\n            <IconSearch\n                aria-hidden\n                className=\"pointer-events-none absolute top-1/2 left-3 -z-hide size-6 -translate-y-1/2 [&>path]:fill-icon-default-base-tertiary\"\n            />\n            <Combobox.Input className=\"pl-11\" placeholder=\"Search states\" aria-label=\"Search states\" />\n        </div>\n        <Combobox.Content>\n            <Combobox.Empty>No matches found</Combobox.Empty>\n            <Combobox.List>\n                {(state: string) => (\n                    <Combobox.Item key={state} value={state}>\n                        {state}\n                    </Combobox.Item>\n                )}\n            </Combobox.List>\n        </Combobox.Content>\n    </Combobox.Root>\n);",
-          "description": "A leading icon is composed around the input, not baked in: not every combobox\nis a search (a FEIN lookup or a template picker are not), so the component\nships no icon of its own. Until `InputGroup` lands in the design system, the\nmarketplace search fields get theirs like this — the icon overlaid, the input\npadded past it."
-        },
         {
           "id": "components-combobox--inside-modal",
           "name": "Inside Modal",
@@ -2822,7 +2860,7 @@
           "description": "Inside a `Modal`, which is a Radix Dialog. The surface portals to the body, so\nthis checks that the dialog's modal layer neither blocks pointer events on the\nlist nor treats a click in it as a click outside and closes."
         }
       ],
-      "import": "import {\n    Button,\n    Combobox,\n    Field,\n    FieldText,\n    IconSearch,\n    Label,\n    Modal,\n    Skeleton,\n    Tag,\n} from \"@agentero/design-system\";\nimport { Suspense } from \"react\";"
+      "import": "import { Button, Combobox, Field, FieldText, Label, Modal, Skeleton, Tag } from \"@agentero/design-system\";\nimport { Suspense } from \"react\";"
     },
     "components-command": {
       "id": "components-command",
@@ -9552,6 +9590,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 5204
+    "durationMs": 3999
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.32.0",
+	"version": "0.32.1",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",

package/src/combobox/combobox.d.ts

@@ -2,8 +2,13 @@ import { ComponentPropsWithRef } from 'react';
 import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
 import { InputSize } from '../input';
 /**
- * Style recipe for Combobox. The surface carries its own chrome — border,
- * background and shadow — because the list it holds is plain content.
+ * Style recipe for Combobox. Slots: `action` and `trigger` (the clear and
+ * chevron buttons inside the input's frame, which is `InputGroup`'s),
+ * `triggerReplaced` (hides the chevron once the clear button has a value to
+ * clear), `content`,
+ * `list`, `item`, `indicator` and `message`. The surface carries its
+ * own chrome — border, background and shadow — because the list it holds is
+ * plain content.
  *
  * @summary tailwind-variants recipe backing the Combobox surface and list styles
  */
@@ -12,11 +17,12 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
         [key: string]: import('tailwind-merge').ClassNameValue | {
             content?: import('tailwind-merge').ClassNameValue;
             list?: import('tailwind-merge').ClassNameValue;
-            clear?: import('tailwind-merge').ClassNameValue;
             item?: import('tailwind-merge').ClassNameValue;
             indicator?: import('tailwind-merge').ClassNameValue;
             message?: import('tailwind-merge').ClassNameValue;
-            field?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            trigger?: import('tailwind-merge').ClassNameValue;
+            triggerReplaced?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
@@ -24,16 +30,18 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
         [x: string]: import('tailwind-merge').ClassNameValue | {
             content?: import('tailwind-merge').ClassNameValue;
             list?: import('tailwind-merge').ClassNameValue;
-            clear?: import('tailwind-merge').ClassNameValue;
             item?: import('tailwind-merge').ClassNameValue;
             indicator?: import('tailwind-merge').ClassNameValue;
             message?: import('tailwind-merge').ClassNameValue;
-            field?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            trigger?: import('tailwind-merge').ClassNameValue;
+            triggerReplaced?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
-    field: string;
-    clear: string[];
+    action: string[];
+    trigger: string;
+    triggerReplaced: string;
     content: string[];
     list: string[];
     item: string[];
@@ -44,39 +52,60 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
         [key: string]: import('tailwind-merge').ClassNameValue | {
             content?: import('tailwind-merge').ClassNameValue;
             list?: import('tailwind-merge').ClassNameValue;
-            clear?: import('tailwind-merge').ClassNameValue;
             item?: import('tailwind-merge').ClassNameValue;
             indicator?: import('tailwind-merge').ClassNameValue;
             message?: import('tailwind-merge').ClassNameValue;
-            field?: import('tailwind-merge').ClassNameValue;
+            action?: import('tailwind-merge').ClassNameValue;
+            trigger?: import('tailwind-merge').ClassNameValue;
+            triggerReplaced?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
-    field: string;
-    clear: string[];
+    action: string[];
+    trigger: string;
+    triggerReplaced: string;
     content: string[];
     list: string[];
     item: string[];
     indicator: string[];
     message: string[];
 }, import('tailwind-variants').TVReturnType<unknown, {
-    field: string;
-    clear: string[];
+    action: string[];
+    trigger: string;
+    triggerReplaced: string;
     content: string[];
     list: string[];
     item: string[];
     indicator: string[];
     message: string[];
 }, undefined, unknown, unknown, undefined>>;
+export type ComboboxRootProps<Value, Multiple extends boolean | undefined, Item> = ComboboxPrimitive.Root.Props<Value, Multiple, Item> & {
+    /**
+     * Characters the query needs, spaces aside, before the list opens. Below it
+     * focusing, clicking or pressing the chevron leaves the list shut, and
+     * deleting back under it closes the list. Defaults to `0`: the list opens on
+     * focus.
+     */
+    minInputLength?: number;
+};
 /**
  * Root of a combobox: a text input that filters a list of options and writes the
- * chosen one back into itself. With `Input` as the only trigger, the list opens on
- * focus or on the first keystroke.
+ * chosen one back into itself. The list opens on focus, on the first keystroke
+ * or from the chevron of `Input`'s `select` variant.
+ *
+ * For a search against an API, set `minInputLength` so the list stays shut until
+ * the query is worth sending: a field that opens an empty list on focus reads as
+ * broken. For a pick from a short fixed list with no typing at all, prefer a
+ * select.
  *
  * Pass the options as `items`. For a list that comes from the server, set
  * `filter={null}`, hand the already-filtered rows to `filteredItems`, and request
  * them from `onInputValueChange`; `Status` then announces the wait.
  *
+ * Every Base UI root prop is accepted and forwarded — `items`, `filter`,
+ * `value`, `onValueChange` and so on. `open` stays the consumer's to control;
+ * `minInputLength` only refuses to open below the minimum.
+ *
  * With `multiple`, the value is an array and picking a row toggles it. The list
  * stays open and keeps the typed query between picks, so several rows can be
  * ticked from one search; closing the list (Escape, a click outside) still resets
@@ -102,20 +131,37 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
  * ```
  */
 export declare const Root: {
-    <Value, Multiple extends boolean | undefined = false, Item = Value>({ onOpenChange, ...props }: ComboboxPrimitive.Root.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
+    <Value, Multiple extends boolean | undefined = false, Item = Value>({ minInputLength, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onInputValueChange, ...props }: ComboboxRootProps<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type InputProps = Omit<ComponentPropsWithRef<typeof ComboboxPrimitive.Input>, 'size'> & {
     /** Control height, matching `Input`. Defaults to `'md'`. */
     size?: InputSize;
+    /**
+     * What surrounds the input. Defaults to `'search'`.
+     * - `search` — magnifier in front, clear button after: a lookup the user types
+     * - `plain` — the input alone
+     * - `select` — a chevron that toggles the list: a short list to browse
+     */
+    variant?: 'search' | 'plain' | 'select';
+    /**
+     * Whether a clear button follows the input once an option is picked.
+     * Defaults to `true` for `search` and `false` for `plain` and `select`; pass
+     * it to override the variant. On a `select` it replaces the chevron while
+     * there is a value. Ignored under a `multiple` root, which never
+     * shows one.
+     */
+    showClear?: boolean;
     /**
      * Accessible name for the clear button. Defaults to `'Clear'`; name it after
      * the field when a page carries several comboboxes.
      */
     clearLabel?: string;
+    /** Accessible name for the chevron of the `select` variant. Defaults to `'Show options'`. */
+    triggerLabel?: string;
 };
 /**
- * The search field, which doubles as the trigger: focusing or typing opens the
+ * The text field, which doubles as the trigger: focusing or typing opens the
  * list. It wears the same styling as `Input` and takes the same wiring from
  * `InputContext`, so inside a `FieldText` the label, the hint and the error point
  * at it with nothing passed by hand. Its own props win over the context.
@@ -127,21 +173,38 @@ type InputProps = Omit<ComponentPropsWithRef<typeof ComboboxPrimitive.Input>, 's
  * reference keeps the name. Outside a field, give it `aria-label` or an
  * `aria-labelledby` of your own.
  *
- * It carries a clear button, which Base UI mounts only once there is something
- * to clear, so an untouched field shows nothing. Name it with `clearLabel` when
- * a page has more than one combobox. Under a `multiple` root there is no clear
- * button: Base UI's would drop the whole selection, while a cross inside a search
- * field reads as "clear what I typed" — and the selection is rendered outside
- * the field, with its own way to remove each entry.
+ * It is drawn as an `InputGroup` frame, and the list anchors to that whole
+ * frame, so it is as wide as the field and starts at its left edge whatever
+ * sits beside the input. `variant` picks what does:
+ *
+ * - `search` (default): a magnifier in front and a clear button. For any field
+ *   where the user types to look something up.
+ * - `plain`: the input alone, with no icon and no button. When the field needs
+ *   no affordance at all.
+ * - `select`: a chevron that opens and closes the list. For a short known list
+ *   the user may want to browse before typing.
+ *
+ * Only `search` carries a clear button by default; `showClear` adds it to the
+ * other two or drops it from `search`. On a `select`, the clear button takes the
+ * chevron's place once an option is picked; the list still opens from the input. Base UI mounts it only once there is
+ * something to clear — a picked option — so an untouched field shows nothing. Name it with
+ * `clearLabel`, and the chevron with `triggerLabel`, when a page has more than
+ * one combobox.
+ *
+ * Under a `multiple` root there is neither: the list stays open between picks,
+ * so a chevron has nothing to toggle, and Base UI's clear button would drop the
+ * whole selection while a cross inside a search field reads as "clear what I
+ * typed". The selection is rendered outside the field, with its own way to
+ * remove each entry.
  *
- * Pass `render` to swap the element for a richer control — a field with a leading
- * search icon, for instance — and the combobox wiring rides along.
+ * Every native input attribute is accepted and forwarded to the `<input>` —
+ * `placeholder`, `disabled`, `autoComplete` — and so is `className`.
  *
- * @summary Search field that opens the list on focus and filters it as you type
+ * @summary Search, plain or select field that opens and filters the list
  * @dataAttribute {string} data-slot - Always set to "combobox-input"
  */
 export declare const Input: {
-    ({ clearLabel, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, showClear, clearLabel, triggerLabel, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type ContentProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Popup> & Pick<ComponentPropsWithRef<typeof ComboboxPrimitive.Positioner>, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor' | 'collisionPadding'>;

package/src/combobox/combobox.js

@@ -4,20 +4,22 @@ import { useMergeProps as t } from "../../lib/merge-props.js";
 import { useFieldContext as n } from "../field/context.js";
 import { InputContext as r } from "../input/context.js";
 import { inputRecipe as i } from "../input/input.js";
-import { IconCancel as a, IconCheck as o } from "./icons.js";
-import { tv as s } from "tailwind-variants";
-import { createContext as c, use as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Combobox as f } from "@base-ui/react/combobox";
+import { InputGroup as a } from "../input-group/index.js";
+import { IconCancel as o, IconCheck as s, IconKeyboardArrowDown as c, IconSearch as l } from "./icons.js";
+import { tv as u } from "tailwind-variants";
+import { createContext as d, use as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Combobox as _ } from "@base-ui/react/combobox";
 //#region src/combobox/combobox.tsx
-var p = s({ slots: {
-	field: "relative",
-	clear: [
-		"absolute top-1/2 right-3 flex size-6 -translate-y-1/2 cursor-pointer items-center",
-		"justify-center rounded-sm [&>svg>path]:fill-icon-input-default",
-		"hover:[&>svg>path]:fill-icon-default-base-primary",
+var v = u({ slots: {
+	action: [
+		"flex size-6 shrink-0 cursor-pointer items-center justify-center self-center rounded-sm",
+		"[&>svg>path]:fill-icon-input-default hover:[&>svg>path]:fill-icon-default-base-primary",
+		"focus-visible:outline-2 focus-visible:outline-border-input-focus",
 		"disabled:cursor-default disabled:[&>svg>path]:fill-icon-input-disable"
 	],
+	trigger: "transition-[rotate] duration-100 data-popup-open:rotate-180 motion-reduce:transition-none",
+	triggerReplaced: "[[data-slot=combobox-field]:not([data-placeholder])_&]:hidden",
 	content: [
 		"w-(--anchor-width) max-h-(--available-height) overflow-hidden rounded-md",
 		"border border-border-default-base-primary bg-bg-default-base-primary shadow-lg",
@@ -27,7 +29,7 @@ var p = s({ slots: {
 		"data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
 		"motion-reduce:transition-none"
 	],
-	list: ["max-h-[min(10.25rem,var(--available-height))] overflow-y-auto scroll-py-2 py-2 outline-none", "data-empty:py-0"],
+	list: ["max-h-[min(10.25rem,var(--available-height))] overflow-y-auto scroll-py-2 py-2 outline-none", "empty:py-0"],
 	item: [
 		"group/item mx-2 my-px flex cursor-pointer items-center rounded-[calc(var(--radius-md)-2px)]",
 		"px-3 py-2 text-sm text-text-default-base-primary select-none",
@@ -45,49 +47,78 @@ var p = s({ slots: {
 		"group-data-disabled/item:data-selected:bg-bg-checkbox-disabled"
 	],
 	message: ["mx-2 my-px px-3 py-2 text-sm text-text-default-base-tertiary", "empty:m-0 empty:p-0"]
-} }), m = p(), h = c(!1), g = ({ onOpenChange: e, ...t }) => {
-	let n = !!t.multiple;
-	return /* @__PURE__ */ u(h, {
-		value: n,
-		children: /* @__PURE__ */ u(f.Root, {
-			onOpenChange: (t, r) => {
-				e?.(t, r), n && !t && r.reason === "item-press" && r.cancel();
-			},
-			...t
+} }), y = v(), b = d(!1), x = ({ minInputLength: e = 0, open: t, defaultOpen: n = !1, onOpenChange: r, onOpenChangeComplete: i, onInputValueChange: a, ...o }) => {
+	let s = !!o.multiple, [c, l] = m(n), u = p(String(o.inputValue ?? o.defaultInputValue ?? ""));
+	o.inputValue !== void 0 && (u.current = String(o.inputValue));
+	let d = (t) => t.trim().length < e, f = p(!1), g = p(!1), v = (e, t) => {
+		if (e && d(u.current)) {
+			t.cancel();
+			return;
+		}
+		f.current = !1, r?.(e, t), s && !e && t.reason === "item-press" && t.cancel(), t.isCanceled || l(e);
+	}, y = (e) => {
+		i?.(e), !e && f.current && (f.current = !1, g.current = !0, queueMicrotask(() => g.current = !1));
+	}, x = (e, n) => {
+		if (g.current) {
+			g.current = !1, n.cancel();
+			return;
+		}
+		u.current = e, a?.(e, n), d(e) && t === void 0 && c && (f.current = !0, l(!1));
+	}, S = t ?? (e > 0 ? c : void 0);
+	return /* @__PURE__ */ h(b, {
+		value: s,
+		children: /* @__PURE__ */ h(_.Root, {
+			open: S,
+			defaultOpen: n,
+			onOpenChange: v,
+			onOpenChangeComplete: y,
+			onInputValueChange: x,
+			...o
 		})
 	});
 };
-g.displayName = "Combobox.Root";
-var _ = /* @__PURE__ */ new Set([
+x.displayName = "Combobox.Root";
+var S = /* @__PURE__ */ new Set([
 	"value",
 	"defaultValue",
 	"onChange"
-]), v = (e) => {
-	let i = l(r), a = n(), o = i ? Object.fromEntries(Object.entries(i).filter(([e]) => !_.has(e))) : null, s = !("aria-label" in e || "aria-labelledby" in e) && a ? { "aria-labelledby": a.labelId } : null;
+]), C = (e) => {
+	let i = f(r), a = n(), o = i ? Object.fromEntries(Object.entries(i).filter(([e]) => !S.has(e))) : null, s = !("aria-label" in e || "aria-labelledby" in e) && a ? { "aria-labelledby": a.labelId } : null;
 	return t({
 		...o,
 		...s
 	}, e);
-}, y = ({ clearLabel: t = "Clear", ...n }) => {
-	let { className: r, size: o = "md", ...s } = v(n), c = l(h);
-	return /* @__PURE__ */ d("div", {
+}, w = ({ variant: t = "search", showClear: n = t === "search", clearLabel: r = "Clear", triggerLabel: s = "Show options", ...u }) => {
+	let { className: d, size: p = "md", ...m } = C(u), v = f(b);
+	return /* @__PURE__ */ g(_.InputGroup, {
+		render: /* @__PURE__ */ h(a.Root, {}),
 		"data-slot": "combobox-field",
-		className: m.field(),
-		children: [/* @__PURE__ */ u(f.Input, {
-			"data-slot": "combobox-input",
-			"data-size": o,
-			className: e(i({ size: o }), "pr-11", r),
-			...s
-		}), !c && /* @__PURE__ */ u(f.Clear, {
-			"data-slot": "combobox-clear",
-			"aria-label": t,
-			className: m.clear(),
-			children: /* @__PURE__ */ u(a, {})
-		})]
+		className: t === "plain" ? "px-4" : void 0,
+		children: [
+			t === "search" && /* @__PURE__ */ h(a.Addon, { children: /* @__PURE__ */ h(l, {}) }),
+			/* @__PURE__ */ h(_.Input, {
+				"data-slot": "combobox-input",
+				"data-size": p,
+				className: e(i({ size: p }), d),
+				...m
+			}),
+			n && !v && /* @__PURE__ */ h(_.Clear, {
+				"data-slot": "combobox-clear",
+				"aria-label": r,
+				className: y.action(),
+				children: /* @__PURE__ */ h(o, {})
+			}),
+			t === "select" && !v && /* @__PURE__ */ h(_.Trigger, {
+				"data-slot": "combobox-trigger",
+				"aria-label": s,
+				className: e(y.action(), y.trigger(), n && y.triggerReplaced()),
+				children: /* @__PURE__ */ h(c, {})
+			})
+		]
 	});
 };
-y.displayName = "Combobox.Input";
-var b = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: s = 8, ...c }) => /* @__PURE__ */ u(f.Portal, { children: /* @__PURE__ */ u(f.Positioner, {
+w.displayName = "Combobox.Input";
+var T = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: s = 8, ...c }) => /* @__PURE__ */ h(_.Portal, { children: /* @__PURE__ */ h(_.Positioner, {
 	side: n,
 	align: r,
 	sideOffset: i,
@@ -95,49 +126,49 @@ var b = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i =
 	anchor: o,
 	collisionPadding: s,
 	className: "isolate z-(--z-index-top-layer) pointer-events-auto",
-	children: /* @__PURE__ */ u(f.Popup, {
+	children: /* @__PURE__ */ h(_.Popup, {
 		"data-slot": "combobox-content",
-		className: e(m.content(), t),
+		className: e(y.content(), t),
 		...c
 	})
 }) });
-b.displayName = "Combobox.Content";
-var x = ({ className: t, ...n }) => {
+T.displayName = "Combobox.Content";
+var E = ({ className: t, ...n }) => {
 	let r = "aria-label" in n || "aria-labelledby" in n;
-	return /* @__PURE__ */ u(f.List, {
+	return /* @__PURE__ */ h(_.List, {
 		"data-slot": "combobox-list",
 		"aria-label": r ? void 0 : "Suggestions",
-		className: e(m.list(), t),
+		className: e(y.list(), t),
 		...n
 	});
 };
-x.displayName = "Combobox.List";
-var S = ({ className: t, children: n, ...r }) => {
-	let i = l(h);
-	return /* @__PURE__ */ d(f.Item, {
+E.displayName = "Combobox.List";
+var D = ({ className: t, children: n, ...r }) => {
+	let i = f(b);
+	return /* @__PURE__ */ g(_.Item, {
 		"data-slot": "combobox-item",
-		className: e(m.item(), t),
+		className: e(y.item(), t),
 		...r,
-		children: [i && /* @__PURE__ */ u(f.ItemIndicator, {
+		children: [i && /* @__PURE__ */ h(_.ItemIndicator, {
 			keepMounted: !0,
 			"data-slot": "combobox-item-indicator",
-			className: m.indicator(),
-			children: /* @__PURE__ */ u(o, { className: "size-3.5" })
+			className: y.indicator(),
+			children: /* @__PURE__ */ h(s, { className: "size-3.5" })
 		}), n]
 	});
 };
-S.displayName = "Combobox.Item";
-var C = ({ className: t, ...n }) => /* @__PURE__ */ u(f.Empty, {
+D.displayName = "Combobox.Item";
+var O = ({ className: t, ...n }) => /* @__PURE__ */ h(_.Empty, {
 	"data-slot": "combobox-empty",
-	className: e(m.message(), t),
+	className: e(y.message(), t),
 	...n
 });
-C.displayName = "Combobox.Empty";
-var w = ({ className: t, ...n }) => /* @__PURE__ */ u(f.Status, {
+O.displayName = "Combobox.Empty";
+var k = ({ className: t, ...n }) => /* @__PURE__ */ h(_.Status, {
 	"data-slot": "combobox-status",
-	className: e(m.message(), t),
+	className: e(y.message(), t),
 	...n
 });
-w.displayName = "Combobox.Status";
+k.displayName = "Combobox.Status";
 //#endregion
-export { b as Content, C as Empty, y as Input, S as Item, x as List, g as Root, w as Status, p as comboboxRecipe };
+export { T as Content, O as Empty, w as Input, D as Item, E as List, x as Root, k as Status, v as comboboxRecipe };

package/src/combobox/icons.d.ts

@@ -16,3 +16,19 @@ export declare const IconCancel: (props: SVGProps<SVGSVGElement>) => import("rea
  * @summary 24px check used by the Combobox selection indicator
  */
 export declare const IconCheck: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Magnifier leading the `search` variant of `Combobox.Input`, the same glyph
+ * `Command` uses. Fill color comes from the input group addon, so it follows
+ * the field's disabled state.
+ *
+ * @summary 24px search icon leading the Combobox search field
+ */
+export declare const IconSearch: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Downward chevron inside the `chevron` variant's trigger, the same glyph
+ * `Accordion` uses. Fill color is supplied by the trigger's class so it
+ * follows the button's state.
+ *
+ * @summary 24px chevron-down icon used as the Combobox list trigger
+ */
+export declare const IconKeyboardArrowDown: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/combobox/icons.js

@@ -18,6 +18,24 @@ var t = (t) => /* @__PURE__ */ e("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	...t,
 	children: /* @__PURE__ */ e("path", { d: "M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" })
+}), r = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M9.52 15.615q-2.562 0-4.34-1.777Q3.405 12.062 3.405 9.5T5.18 5.162q1.776-1.777 4.338-1.777t4.339 1.777q1.777 1.776 1.777 4.338 0 1.071-.36 2.046a5.7 5.7 0 0 1-.96 1.696l5.754 5.754q.209.209.213.522a.7.7 0 0 1-.213.532.72.72 0 0 1-.527.217.72.72 0 0 1-.527-.217l-5.753-5.754q-.75.62-1.725.97t-2.018.35m0-1.5q1.933 0 3.273-1.341 1.342-1.34 1.342-3.274 0-1.932-1.342-3.274-1.34-1.341-3.274-1.341-1.932 0-3.274 1.34Q4.904 7.569 4.904 9.5q0 1.933 1.341 3.274 1.342 1.341 3.274 1.341" })
+}), i = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M12 14.677a.83.83 0 0 1-.633-.256L6.873 9.927a.73.73 0 0 1-.212-.522.7.7 0 0 1 .212-.532.72.72 0 0 1 .527-.217q.31 0 .527.217L12 12.946l4.073-4.073a.73.73 0 0 1 .522-.212.7.7 0 0 1 .532.212q.217.217.217.527a.72.72 0 0 1-.217.527l-4.494 4.494a.83.83 0 0 1-.633.256" })
 });
 //#endregion
-export { t as IconCancel, n as IconCheck };
+export { t as IconCancel, n as IconCheck, i as IconKeyboardArrowDown, r as IconSearch };

package/src/combobox/index.d.ts

@@ -1,13 +1,17 @@
 export { comboboxRecipe } from './combobox';
+export type { ComboboxRootProps } from './combobox';
 export declare const Combobox: {
     Root: {
-        <Value, Multiple extends boolean | undefined = false, Item = Value>({ onOpenChange, ...props }: import("@base-ui/react/combobox").ComboboxRoot.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
+        <Value, Multiple extends boolean | undefined = false, Item = Value>({ minInputLength, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onInputValueChange, ...props }: import('./combobox').ComboboxRootProps<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Input: {
-        ({ clearLabel, ...props }: Omit<Omit<import('@base-ui/react/combobox').ComboboxInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>, "size"> & {
+        ({ variant, showClear, clearLabel, triggerLabel, ...props }: Omit<Omit<import('@base-ui/react/combobox').ComboboxInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>, "size"> & {
             size?: import('../input').InputSize;
+            variant?: "search" | "plain" | "select";
+            showClear?: boolean;
             clearLabel?: string;
+            triggerLabel?: string;
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };