@agentero/design-system 0.31.5 → 0.31.6

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">33 components ok</span><span class="filter-pill ok" aria-disabled="true">265 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">33 components ok</span><span class="filter-pill ok" aria-disabled="true">266 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>4.8s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>3.9s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -2857,7 +2857,7 @@ import { CheckList } from &#39;@agentero/design-system/check-list&#39;;
       <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-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-7-components-combobox-stories" class="badge ok as-toggle">8 stories</label>
         
         
       </div>
@@ -2866,8 +2866,9 @@ import { CheckList } from &#39;@agentero/design-system/check-list&#39;;
     <div>Root provider for an input-triggered filterable list</div>
     <div class="hint">Combobox is a text input that filters a list and writes the chosen option back
 into itself. Focusing the input or typing opens the list; picking a row fills the
-input and closes it. Built on Base UI, whose Combobox primitive owns the
-filtering, the keyboard navigation and the `role=&quot;combobox&quot;` wiring.</div>
+input and closes it. With `multiple` the rows become checkbox-like toggles and the
+list stays open between picks. Built on Base UI, whose Combobox primitive owns
+the filtering, the keyboard navigation and the `role=&quot;combobox&quot;` wiring.</div>
     <div class="kv"><span class="chip">summary: Root provider for an input-triggered filterable list</span><span class="chip">see: {@link https://base-ui.com/react/components/combobox Base UI Combobox}</span><span class="chip">example: ```tsx
 import { Combobox } from &#39;@agentero/design-system/combobox&#39;;
 
@@ -3148,7 +3149,17 @@ 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 } from "@agentero/design-system";
+                <pre><code>import {
+    Button,
+    Combobox,
+    Field,
+    FieldText,
+    IconSearch,
+    Label,
+    Modal,
+    Skeleton,
+    Tag,
+} from "@agentero/design-system";
 import { Suspense } from "react";</code></pre>
               </div>
           
@@ -3200,6 +3211,48 @@ children only while nothing matches. It needs `items` on `Root` to know that.</d
         &lt;/Combobox.Content&gt;
     &lt;/Combobox.Root&gt;
 );</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Multiple Selection</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">Several values from one list, the way Lines of Authority or locations are
+assigned: each row leads with a checkbox-shaped indicator, picking a row toggles
+it, and the list stays open with the query intact so the next pick is one click
+away. The input never shows the selection; the field renders it alongside,
+here as tags.</div>
+              <pre><code>const MultipleSelection = () =&gt; {
+    const [selected, setSelected] = useState&lt;string[]&gt;([]);
+
+    return (
+        &lt;div className=&quot;flex flex-col gap-4&quot;&gt;
+            &lt;Combobox.Root items={STATES} multiple value={selected} onValueChange={setSelected}&gt;
+                &lt;Combobox.Input placeholder=&quot;Assign states&quot; aria-label=&quot;Assign states&quot; /&gt;
+                &lt;Combobox.Content&gt;
+                    &lt;Combobox.Empty&gt;No matches found&lt;/Combobox.Empty&gt;
+                    &lt;Combobox.List aria-label=&quot;States&quot;&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;
+            {selected.length &gt; 0 &amp;&amp; (
+                &lt;ul aria-label=&quot;Selected states&quot; className=&quot;flex flex-wrap gap-2&quot;&gt;
+                    {selected.map(state =&gt; (
+                        &lt;li key={state}&gt;
+                            &lt;Tag size=&quot;sm&quot;&gt;{state}&lt;/Tag&gt;
+                        &lt;/li&gt;
+                    ))}
+                &lt;/ul&gt;
+            )}
+        &lt;/div&gt;
+    );
+};</code></pre>
             </div>
             <div class="note ok">
               <div class="row">
@@ -3303,7 +3356,10 @@ before each request and a request that is no longer the latest is dropped.</div>
               
               <div class="hint">Dropped into a `FieldText`, the input takes the label, the description and
 the error from the field with nothing wired by hand: `Combobox.Input` reads the
-same `InputContext` the plain `Input` does.</div>
+same `InputContext` the plain `Input` does. It also points `aria-labelledby`
+at the label, so the name survives the list opening: Base UI then hides the
+rest of the page from assistive technology, label included, and a
+`&lt;label for&gt;` alone would stop naming the input.</div>
               <pre><code>const InsideFieldText = () =&gt; (
     &lt;FieldText invalid required&gt;
         &lt;Label&gt;Agency&lt;/Label&gt;
@@ -5207,7 +5263,7 @@ required?: boolean = false</code></pre>
                 <div class="row">
                   <span class="ex-name">Imports</span>
                 </div>
-                <pre><code>import { Field, FieldContext, Label } from "@agentero/design-system";</code></pre>
+                <pre><code>import { Field, FieldContext, Label, Switch } from "@agentero/design-system";</code></pre>
               </div>
           
           
@@ -5454,7 +5510,7 @@ gets one here.</div>
                 &lt;Label&gt;Auto-renew&lt;/Label&gt;
                 &lt;Field.Description&gt;Renews the policy automatically before it expires.&lt;/Field.Description&gt;
             &lt;/Field.Content&gt;
-            &lt;DemoInput type=&quot;checkbox&quot; className=&quot;size-5&quot; /&gt;
+            &lt;DemoSwitch className=&quot;self-center&quot; /&gt;
         &lt;/Field.Root&gt;
 
         &lt;div className=&quot;w-[20rem]&quot; data-testid=&quot;narrow&quot;&gt;

package/mcp/manifests/components.json

@@ -2001,13 +2001,13 @@
           "```tsx\nimport { Combobox } from '@agentero/design-system/combobox';\n\n<Combobox.Root items={states}>\n  <Combobox.Input placeholder=\"Search states\" />\n  <Combobox.Content>\n    <Combobox.Empty>No matches found</Combobox.Empty>\n    <Combobox.List>\n      {(state: string) => <Combobox.Item key={state} value={state}>{state}</Combobox.Item>}\n    </Combobox.List>\n  </Combobox.Content>\n</Combobox.Root>\n```"
         ]
       },
-      "description": "Combobox is a text input that filters a list and writes the chosen option back\ninto itself. Focusing the input or typing opens the list; picking a row fills the\ninput and closes it. Built on Base UI, whose Combobox primitive owns the\nfiltering, the keyboard navigation and the `role=\"combobox\"` wiring.",
+      "description": "Combobox is a text input that filters a list and writes the chosen option back\ninto itself. Focusing the input or typing opens the list; picking a row fills the\ninput and closes it. With `multiple` the rows become checkbox-like toggles and the\nlist stays open between picks. Built on Base UI, whose Combobox primitive owns\nthe filtering, the keyboard navigation and the `role=\"combobox\"` wiring.",
       "summary": "Root provider for an input-triggered filterable list",
       "reactComponentMeta": {
         "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.",
+        "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.",
         "jsDocTags": {
           "summary": [
             "Root provider for an input-triggered filterable list"
@@ -2785,6 +2785,12 @@
           "snippet": "const NoMatches = () => (\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": "`Empty` stays mounted so screen readers announce the change; it renders its\nchildren only while nothing matches. It needs `items` on `Root` to know that."
         },
+        {
+          "id": "components-combobox--multiple-selection",
+          "name": "Multiple Selection",
+          "snippet": "const MultipleSelection = () => {\n    const [selected, setSelected] = useState<string[]>([]);\n\n    return (\n        <div className=\"flex flex-col gap-4\">\n            <Combobox.Root items={STATES} multiple value={selected} onValueChange={setSelected}>\n                <Combobox.Input placeholder=\"Assign states\" aria-label=\"Assign states\" />\n                <Combobox.Content>\n                    <Combobox.Empty>No matches found</Combobox.Empty>\n                    <Combobox.List aria-label=\"States\">\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            {selected.length > 0 && (\n                <ul aria-label=\"Selected states\" className=\"flex flex-wrap gap-2\">\n                    {selected.map(state => (\n                        <li key={state}>\n                            <Tag size=\"sm\">{state}</Tag>\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n};",
+          "description": "Several values from one list, the way Lines of Authority or locations are\nassigned: each row leads with a checkbox-shaped indicator, picking a row toggles\nit, and the list stays open with the query intact so the next pick is one click\naway. The input never shows the selection; the field renders it alongside,\nhere as tags."
+        },
         {
           "id": "components-combobox--async-search",
           "name": "Async Search",
@@ -2801,7 +2807,7 @@
           "id": "components-combobox--inside-field-text",
           "name": "Inside Field Text",
           "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."
+          "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",
@@ -2816,7 +2822,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 { Button, Combobox, Field, FieldText, IconSearch, Label, Modal, Skeleton } from \"@agentero/design-system\";\nimport { Suspense } from \"react\";"
+      "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\";"
     },
     "components-command": {
       "id": "components-command",
@@ -5469,7 +5475,7 @@
         "displayName": "Field.Root",
         "exportName": "Field",
         "filePath": "/home/runner/work/design-system/design-system/src/field/index.ts",
-        "description": "Wraps one label, control, description and error into a single field and\nwires the accessibility relationships between them. It generates the ids\nand shares them through context: `Label` reads `LabelContext`,\n`Field.Description` and `Field.Error` read `FieldContext` and register\nthemselves so the control's `aria-describedby` lists exactly the messages on\nscreen, and a `Field<X>` such as `FieldText` provides the control's context so\nthe control associates itself too. Nobody passes an `id` by hand.\n\nPresentational and form-library agnostic: pass `invalid` and the error\nmessages from whatever validates the form. Deliberately not a `role=\"group\"`:\none field is not a set of related controls, and an unnamed group only adds\nscreen-reader verbosity. Real groupings belong to a fieldset with a legend.",
+        "description": "Wraps one label, control, description and error into a single field and\nwires the accessibility relationships between them. It generates the ids\nand shares them through context: `Label` reads `LabelContext`,\n`Field.Description` and `Field.Error` read `FieldContext` and register\nthemselves so the control's `aria-describedby` lists exactly the messages on\nscreen, and a `Field<X>` such as `FieldText` provides the control's context so\nthe control associates itself too. Nobody passes an `id` by hand. The label\ngets an id as well (`labelId` in `FieldContext`) for a control that must\nname itself with `aria-labelledby`, as `Combobox.Input` does.\n\nPresentational and form-library agnostic: pass `invalid` and the error\nmessages from whatever validates the form. Deliberately not a `role=\"group\"`:\none field is not a set of related controls, and an unnamed group only adds\nscreen-reader verbosity. Real groupings belong to a fieldset with a legend.",
         "jsDocTags": {
           "summary": [
             "Wraps a label, control, description and error into one field"
@@ -5691,7 +5697,7 @@
         {
           "id": "components-field--horizontal",
           "name": "Horizontal",
-          "snippet": "const Horizontal = () => (\n    <Field.Group className=\"w-160\">\n        <Field.Root orientation=\"horizontal\" data-testid=\"short\">\n            <Label>Full name</Label>\n            <DemoInput defaultValue=\"Rafa Moro\" className=\"w-72\" />\n        </Field.Root>\n\n        <Field.Root orientation=\"horizontal\" data-testid=\"long\">\n            <Label>Title</Label>\n            <Field.Content className=\"w-72\">\n                <DemoInput placeholder=\"Software engineer\" />\n                <Field.Description>Shown on your public profile.</Field.Description>\n            </Field.Content>\n        </Field.Root>\n\n        <Field.Root orientation=\"horizontal\" data-testid=\"switch\">\n            <Field.Content>\n                <Label>Auto-renew</Label>\n                <Field.Description>Renews the policy automatically before it expires.</Field.Description>\n            </Field.Content>\n            <DemoInput type=\"checkbox\" className=\"size-5\" />\n        </Field.Root>\n\n        <div className=\"w-[20rem]\" data-testid=\"narrow\">\n            <Field.Root orientation=\"horizontal\">\n                <Label>Email</Label>\n                <DemoInput type=\"email\" placeholder=\"you@example.com\" className=\"w-40\" />\n            </Field.Root>\n        </div>\n    </Field.Group>\n);",
+          "snippet": "const Horizontal = () => (\n    <Field.Group className=\"w-160\">\n        <Field.Root orientation=\"horizontal\" data-testid=\"short\">\n            <Label>Full name</Label>\n            <DemoInput defaultValue=\"Rafa Moro\" className=\"w-72\" />\n        </Field.Root>\n\n        <Field.Root orientation=\"horizontal\" data-testid=\"long\">\n            <Label>Title</Label>\n            <Field.Content className=\"w-72\">\n                <DemoInput placeholder=\"Software engineer\" />\n                <Field.Description>Shown on your public profile.</Field.Description>\n            </Field.Content>\n        </Field.Root>\n\n        <Field.Root orientation=\"horizontal\" data-testid=\"switch\">\n            <Field.Content>\n                <Label>Auto-renew</Label>\n                <Field.Description>Renews the policy automatically before it expires.</Field.Description>\n            </Field.Content>\n            <DemoSwitch className=\"self-center\" />\n        </Field.Root>\n\n        <div className=\"w-[20rem]\" data-testid=\"narrow\">\n            <Field.Root orientation=\"horizontal\">\n                <Label>Email</Label>\n                <DemoInput type=\"email\" placeholder=\"you@example.com\" className=\"w-40\" />\n            </Field.Root>\n        </div>\n    </Field.Group>\n);",
           "description": "`horizontal` is one row at every width. The first child fills the row and\neverything after it keeps its natural width, aligned to the right edge, so\nthe controls of stacked fields line up whatever their labels measure. Wrap a\nlabel with its description, or a control with its messages, in\n`Field.Content`. A control sets its own width: `Input` is `w-full`, so it\ngets one here.",
           "summary": "Horizontal field, one row at every width, controls right-aligned"
         },
@@ -5731,7 +5737,7 @@
           "summary": "Errors supplied to a bare Field.Error through context"
         }
       ],
-      "import": "import { Field, FieldContext, Label } from \"@agentero/design-system\";"
+      "import": "import { Field, FieldContext, Label, Switch } from \"@agentero/design-system\";"
     },
     "components-formtext": {
       "id": "components-formtext",
@@ -9420,6 +9426,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 4808
+    "durationMs": 3936
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.31.5",
+	"version": "0.31.6",
 	"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

@@ -14,8 +14,9 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
             list?: import('tailwind-merge').ClassNameValue;
             clear?: import('tailwind-merge').ClassNameValue;
             item?: import('tailwind-merge').ClassNameValue;
-            field?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
             message?: import('tailwind-merge').ClassNameValue;
+            field?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
@@ -25,8 +26,9 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
             list?: import('tailwind-merge').ClassNameValue;
             clear?: import('tailwind-merge').ClassNameValue;
             item?: import('tailwind-merge').ClassNameValue;
-            field?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
             message?: import('tailwind-merge').ClassNameValue;
+            field?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -35,6 +37,7 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
     content: string[];
     list: string[];
     item: string[];
+    indicator: string[];
     message: string[];
 }, undefined, {
     [key: string]: {
@@ -43,8 +46,9 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
             list?: import('tailwind-merge').ClassNameValue;
             clear?: import('tailwind-merge').ClassNameValue;
             item?: import('tailwind-merge').ClassNameValue;
-            field?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
             message?: import('tailwind-merge').ClassNameValue;
+            field?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
@@ -53,6 +57,7 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
     content: string[];
     list: string[];
     item: string[];
+    indicator: string[];
     message: string[];
 }, import('tailwind-variants').TVReturnType<unknown, {
     field: string;
@@ -60,6 +65,7 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
     content: string[];
     list: string[];
     item: string[];
+    indicator: string[];
     message: string[];
 }, undefined, unknown, unknown, undefined>>;
 /**
@@ -71,6 +77,12 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
  * `filter={null}`, hand the already-filtered rows to `filteredItems`, and request
  * them from `onInputValueChange`; `Status` then announces the wait.
  *
+ * 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
+ * the query. Each row then shows whether it is selected — see `Item`. Nothing is
+ * written back into the input: render the selection next to the field.
+ *
  * @summary Root provider for an input-triggered filterable list
  * @see {@link https://base-ui.com/react/components/combobox|Base UI Combobox}
  *
@@ -90,7 +102,7 @@ export declare const comboboxRecipe: import('tailwind-variants').TVReturnType<{
  * ```
  */
 export declare const Root: {
-    <Value, Multiple extends boolean | undefined = false, Item = Value>(props: ComboboxPrimitive.Root.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
+    <Value, Multiple extends boolean | undefined = false, Item = Value>({ onOpenChange, ...props }: ComboboxPrimitive.Root.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type InputProps = Omit<ComponentPropsWithRef<typeof ComboboxPrimitive.Input>, 'size'> & {
@@ -108,9 +120,19 @@ type InputProps = Omit<ComponentPropsWithRef<typeof ComboboxPrimitive.Input>, 's
  * `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.
  *
- * It always 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.
+ * Inside a field it also names itself with `aria-labelledby` pointing at the
+ * label, on top of the label's own `for`. While the list is open, Base UI hides
+ * everything but the input and the list from assistive technology, label
+ * included, and a `<label for>` alone then stops naming the input; a direct
+ * 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.
  *
  * 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.
@@ -163,11 +185,17 @@ type ItemProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Item>;
  * A selectable row. `value` is what the combobox stores and what
  * `itemToStringLabel` turns into the text written back into the input.
  *
+ * Under a `multiple` root it leads with a checkbox-shaped indicator that fills
+ * while the row is selected, and the row announces `aria-selected` to assistive
+ * technology. The indicator is decoration, not a control: clicking anywhere on
+ * the row, or pressing Enter on it, is what toggles the selection.
+ *
  * @summary Selectable row inside the list
  * @dataAttribute {string} data-slot - Always set to "combobox-item"
+ * @dataAttribute {string} data-selected - Present while the row is selected
  */
 export declare const Item: {
-    ({ className, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type EmptyProps = ComponentPropsWithRef<typeof ComboboxPrimitive.Empty>;

package/src/combobox/combobox.js

@@ -1,15 +1,16 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { useMergeProps as t } from "../../lib/merge-props.js";
-import { InputContext as n } from "../input/context.js";
-import { inputRecipe as r } from "../input/input.js";
-import { IconCancel as i } from "./icons.js";
-import { tv as a } from "tailwind-variants";
-import { use as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Combobox as l } from "@base-ui/react/combobox";
+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";
 //#region src/combobox/combobox.tsx
-var u = a({ slots: {
+var p = s({ slots: {
 	field: "relative",
 	clear: [
 		"absolute top-1/2 right-3 flex size-6 -translate-y-1/2 cursor-pointer items-center",
@@ -28,82 +29,115 @@ var u = a({ slots: {
 	],
 	list: ["max-h-[min(10.25rem,var(--available-height))] overflow-y-auto scroll-py-2 py-2 outline-none", "data-empty:py-0"],
 	item: [
-		"mx-2 my-px flex cursor-pointer items-center rounded-[calc(var(--radius-md)-2px)]",
+		"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",
 		"data-highlighted:bg-bg-default-base-primary-hover",
 		"data-disabled:cursor-default data-disabled:text-text-default-base-tertiary"
 	],
+	indicator: [
+		"mr-2 flex size-4 shrink-0 items-center justify-center rounded-sm",
+		"border border-border-input-default bg-bg-input-normal",
+		"text-text-default-base-inverse-primary transition-colors duration-200 ease-in-out",
+		"data-selected:border-bg-checkbox-selected data-selected:bg-bg-checkbox-selected",
+		"[&>svg]:hidden data-selected:[&>svg]:block",
+		"group-data-disabled/item:border-border-checkbox-disabled",
+		"group-data-disabled/item:data-selected:border-bg-checkbox-disabled",
+		"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"]
-} }), d = u(), f = (e) => /* @__PURE__ */ s(l.Root, { ...e });
-f.displayName = "Combobox.Root";
-var p = /* @__PURE__ */ new Set([
+} }), 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
+		})
+	});
+};
+g.displayName = "Combobox.Root";
+var _ = /* @__PURE__ */ new Set([
 	"value",
 	"defaultValue",
 	"onChange"
-]), m = (e) => {
-	let r = o(n), i = r ? Object.fromEntries(Object.entries(r).filter(([e]) => !p.has(e))) : null;
-	return t(i, e);
-}, h = ({ clearLabel: t = "Clear", ...n }) => {
-	let { className: a, size: o = "md", ...u } = m(n);
-	return /* @__PURE__ */ c("div", {
+]), 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;
+	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", {
 		"data-slot": "combobox-field",
-		className: d.field(),
-		children: [/* @__PURE__ */ s(l.Input, {
+		className: m.field(),
+		children: [/* @__PURE__ */ u(f.Input, {
 			"data-slot": "combobox-input",
 			"data-size": o,
-			className: e(r({ size: o }), "pr-11", a),
-			...u
-		}), /* @__PURE__ */ s(l.Clear, {
+			className: e(i({ size: o }), "pr-11", r),
+			...s
+		}), !c && /* @__PURE__ */ u(f.Clear, {
 			"data-slot": "combobox-clear",
 			"aria-label": t,
-			className: d.clear(),
-			children: /* @__PURE__ */ s(i, {})
+			className: m.clear(),
+			children: /* @__PURE__ */ u(a, {})
 		})]
 	});
 };
-h.displayName = "Combobox.Input";
-var g = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: c = 8, ...u }) => /* @__PURE__ */ s(l.Portal, { children: /* @__PURE__ */ s(l.Positioner, {
+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, {
 	side: n,
 	align: r,
 	sideOffset: i,
 	alignOffset: a,
 	anchor: o,
-	collisionPadding: c,
+	collisionPadding: s,
 	className: "isolate z-(--z-index-top-layer) pointer-events-auto",
-	children: /* @__PURE__ */ s(l.Popup, {
+	children: /* @__PURE__ */ u(f.Popup, {
 		"data-slot": "combobox-content",
-		className: e(d.content(), t),
-		...u
+		className: e(m.content(), t),
+		...c
 	})
 }) });
-g.displayName = "Combobox.Content";
-var _ = ({ className: t, ...n }) => {
+b.displayName = "Combobox.Content";
+var x = ({ className: t, ...n }) => {
 	let r = "aria-label" in n || "aria-labelledby" in n;
-	return /* @__PURE__ */ s(l.List, {
+	return /* @__PURE__ */ u(f.List, {
 		"data-slot": "combobox-list",
 		"aria-label": r ? void 0 : "Suggestions",
-		className: e(d.list(), t),
+		className: e(m.list(), t),
 		...n
 	});
 };
-_.displayName = "Combobox.List";
-var v = ({ className: t, ...n }) => /* @__PURE__ */ s(l.Item, {
-	"data-slot": "combobox-item",
-	className: e(d.item(), t),
-	...n
-});
-v.displayName = "Combobox.Item";
-var y = ({ className: t, ...n }) => /* @__PURE__ */ s(l.Empty, {
+x.displayName = "Combobox.List";
+var S = ({ className: t, children: n, ...r }) => {
+	let i = l(h);
+	return /* @__PURE__ */ d(f.Item, {
+		"data-slot": "combobox-item",
+		className: e(m.item(), t),
+		...r,
+		children: [i && /* @__PURE__ */ u(f.ItemIndicator, {
+			keepMounted: !0,
+			"data-slot": "combobox-item-indicator",
+			className: m.indicator(),
+			children: /* @__PURE__ */ u(o, { className: "size-3.5" })
+		}), n]
+	});
+};
+S.displayName = "Combobox.Item";
+var C = ({ className: t, ...n }) => /* @__PURE__ */ u(f.Empty, {
 	"data-slot": "combobox-empty",
-	className: e(d.message(), t),
+	className: e(m.message(), t),
 	...n
 });
-y.displayName = "Combobox.Empty";
-var b = ({ className: t, ...n }) => /* @__PURE__ */ s(l.Status, {
+C.displayName = "Combobox.Empty";
+var w = ({ className: t, ...n }) => /* @__PURE__ */ u(f.Status, {
 	"data-slot": "combobox-status",
-	className: e(d.message(), t),
+	className: e(m.message(), t),
 	...n
 });
-b.displayName = "Combobox.Status";
+w.displayName = "Combobox.Status";
 //#endregion
-export { g as Content, y as Empty, h as Input, v as Item, _ as List, f as Root, b as Status, u as comboboxRecipe };
+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 };

package/src/combobox/icons.d.ts

@@ -8,3 +8,11 @@ import { SVGProps } from 'react';
  * @summary 24px cancel icon used as the Combobox clear affordance
  */
 export declare const IconCancel: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Material Sharp check drawn inside a selected row's indicator, the same glyph
+ * `Checkbox` uses, so a multi-select row reads as a ticked checkbox. Takes its
+ * color from the surrounding text.
+ *
+ * @summary 24px check used by the Combobox selection indicator
+ */
+export declare const IconCheck: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/combobox/icons.js

@@ -8,6 +8,16 @@ var t = (t) => /* @__PURE__ */ e("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	...t,
 	children: /* @__PURE__ */ e("path", { d: "M12 13.0538L15.0731 16.1269C15.2115 16.2654 15.3856 16.3362 15.5952 16.3394C15.8048 16.3426 15.982 16.2718 16.1269 16.1269C16.2718 15.982 16.3442 15.8064 16.3442 15.6C16.3442 15.3936 16.2718 15.218 16.1269 15.0731L13.0538 12L16.1269 8.9269C16.2653 8.78845 16.3362 8.61442 16.3394 8.4048C16.3426 8.1952 16.2718 8.01797 16.1269 7.8731C15.982 7.72822 15.8064 7.65577 15.6 7.65577C15.3936 7.65577 15.2179 7.72822 15.0731 7.8731L12 10.9462L8.92688 7.8731C8.78842 7.73463 8.61439 7.6638 8.40478 7.6606C8.19518 7.65738 8.01794 7.72822 7.87308 7.8731C7.72819 8.01797 7.65575 8.1936 7.65575 8.4C7.65575 8.6064 7.72819 8.78203 7.87308 8.9269L10.9461 12L7.87308 15.0731C7.73461 15.2115 7.66378 15.3856 7.66058 15.5952C7.65736 15.8048 7.72819 15.982 7.87308 16.1269C8.01794 16.2718 8.19358 16.3442 8.39998 16.3442C8.60638 16.3442 8.78201 16.2718 8.92688 16.1269L12 13.0538ZM12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5766 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45271 3.248 8.29657C3.74667 7.14042 4.42342 6.13474 5.27825 5.27952C6.1331 4.42429 7.13834 3.74723 8.29398 3.24835C9.44959 2.74947 10.6844 2.50002 11.9983 2.50002C13.3122 2.50002 14.5473 2.74936 15.7034 3.24802C16.8596 3.74669 17.8652 4.42344 18.7205 5.27827C19.5757 6.13312 20.2527 7.13837 20.7516 8.294C21.2505 9.44962 21.5 10.6844 21.5 11.9983C21.5 13.3123 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8653 18.7217 18.7205C17.8669 19.5757 16.8616 20.2528 15.706 20.7516C14.5504 21.2505 13.3156 21.5 12.0016 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76664 4 7.87498 4.775 6.32498 6.325C4.77498 7.875 3.99998 9.76667 3.99998 12C3.99998 14.2333 4.77498 16.125 6.32498 17.675C7.87498 19.225 9.76664 20 12 20Z" })
+}), n = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	stroke: "currentColor",
+	"aria-hidden": "true",
+	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" })
 });
 //#endregion
-export { t as IconCancel };
+export { t as IconCancel, n as IconCheck };

package/src/combobox/index.d.ts

@@ -1,7 +1,7 @@
 export { comboboxRecipe } from './combobox';
 export declare const Combobox: {
     Root: {
-        <Value, Multiple extends boolean | undefined = false, Item = Value>(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>({ onOpenChange, ...props }: import("@base-ui/react/combobox").ComboboxRoot.Props<Value, Multiple, Item>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Input: {
@@ -20,7 +20,7 @@ export declare const Combobox: {
         displayName: string;
     };
     Item: {
-        ({ className, ...props }: Omit<import('@base-ui/react/combobox').ComboboxItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ className, children, ...props }: Omit<import('@base-ui/react/combobox').ComboboxItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Empty: {

package/src/field/context.d.ts

@@ -19,6 +19,13 @@ export type FieldErrorLike = {
 export type FieldContextValue = {
     /** `id` the control must carry so the label points at it. */
     controlId: string;
+    /**
+     * `id` the `Label` carries, for a control that names itself with
+     * `aria-labelledby` because a plain `<label for>` is not enough: a floating
+     * surface that hides the rest of the page from assistive technology hides
+     * the label with it, and only a direct reference survives that.
+     */
+    labelId: string;
     /** `id` the `Field.Description` takes by default. One description per field. */
     descriptionId: string;
     /** `id` the `Field.Error` takes by default. One error element per field. */

package/src/field/field.d.ts

@@ -126,7 +126,9 @@ export type FieldRootProps = ComponentPropsWithRef<'div'> & {
  * `Field.Description` and `Field.Error` read `FieldContext` and register
  * themselves so the control's `aria-describedby` lists exactly the messages on
  * screen, and a `Field<X>` such as `FieldText` provides the control's context so
- * the control associates itself too. Nobody passes an `id` by hand.
+ * the control associates itself too. Nobody passes an `id` by hand. The label
+ * gets an id as well (`labelId` in `FieldContext`) for a control that must
+ * name itself with `aria-labelledby`, as `Combobox.Input` does.
  *
  * Presentational and form-library agnostic: pass `invalid` and the error
  * messages from whatever validates the form. Deliberately not a `role="group"`:

package/src/field/field.js

@@ -45,21 +45,23 @@ var m = s({
 });
 g.displayName = "Field.Group";
 var _ = ({ className: n, orientation: r = "vertical", invalid: a = !1, disabled: o = !1, readOnly: s = !1, required: u = !1, controlId: p, ...m }) => {
-	let g = l(), _ = p ?? `${g}-control`, v = `${g}-description`, y = `${g}-error`, [b, x] = d([]), S = c((e) => (x((t) => t.includes(e) ? t : [...t, e]), () => x((t) => t.filter((t) => t !== e))), []), C = {
+	let g = l(), _ = p ?? `${g}-control`, v = `${g}-label`, y = `${g}-description`, b = `${g}-error`, [x, S] = d([]), C = c((e) => (S((t) => t.includes(e) ? t : [...t, e]), () => S((t) => t.filter((t) => t !== e))), []), w = {
 		controlId: _,
-		descriptionId: v,
-		errorId: y,
-		describedBy: [...[v, y].filter((e) => b.includes(e)), ...b.filter((e) => e !== v && e !== y)].join(" ") || void 0,
-		registerMessage: S,
+		labelId: v,
+		descriptionId: y,
+		errorId: b,
+		describedBy: [...[y, b].filter((e) => x.includes(e)), ...x.filter((e) => e !== y && e !== b)].join(" ") || void 0,
+		registerMessage: C,
 		invalid: a,
 		disabled: o,
 		readOnly: s,
 		required: u
 	};
 	return /* @__PURE__ */ f(i, {
-		value: C,
+		value: w,
 		children: /* @__PURE__ */ f(t, {
 			value: {
+				id: v,
 				htmlFor: _,
 				required: u || void 0
 			},

package/src/field-text/field-text.js

@@ -1,11 +1,11 @@
 "use client";
-import { InputContext as e } from "../input/context.js";
-import { useFieldContext as t } from "../field/context.js";
-import { Field as n } from "../field/index.js";
+import { useFieldContext as e } from "../field/context.js";
+import { Field as t } from "../field/index.js";
+import { InputContext as n } from "../input/context.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/field-text/field-text.tsx
-var i = ({ children: n }) => {
-	let i = t(), a = i && {
+var i = ({ children: t }) => {
+	let i = e(), a = i && {
 		id: i.controlId,
 		"aria-describedby": i.describedBy,
 		"aria-invalid": i.invalid || void 0,
@@ -13,12 +13,12 @@ var i = ({ children: n }) => {
 		disabled: i.disabled || void 0,
 		readOnly: i.readOnly || void 0
 	};
-	return /* @__PURE__ */ r(e, {
+	return /* @__PURE__ */ r(n, {
 		value: a,
-		children: n
+		children: t
 	});
-}, a = ({ children: e, ...t }) => /* @__PURE__ */ r(n.Root, {
-	...t,
+}, a = ({ children: e, ...n }) => /* @__PURE__ */ r(t.Root, {
+	...n,
 	children: /* @__PURE__ */ r(i, { children: e })
 });
 a.displayName = "FieldText";

package/src/form-text/form-text.js

@@ -1,7 +1,7 @@
 "use client";
 import { mergeProps as e } from "../../lib/merge-props.js";
-import { Input as t } from "../input/input.js";
-import { Field as n } from "../field/index.js";
+import { Field as t } from "../field/index.js";
+import { Input as n } from "../input/input.js";
 import { FieldText as r } from "../field-text/field-text.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { useController as o } from "react-hook-form";
@@ -23,15 +23,15 @@ var s = ({ name: s, control: c, rules: l, shouldUnregister: u, disabled: d, labe
 		invalid: b.invalid,
 		disabled: d || y.disabled,
 		...v,
-		children: [/* @__PURE__ */ i(n.Label, {
+		children: [/* @__PURE__ */ i(t.Label, {
 			tooltip: m,
 			tooltipSide: h,
 			optional: g,
 			children: f
-		}), /* @__PURE__ */ a(n.Content, { children: [
-			/* @__PURE__ */ i(t, { ...e(x, _ ?? {}) }),
-			p && /* @__PURE__ */ i(n.Description, { children: p }),
-			/* @__PURE__ */ i(n.Error, { errors: b.error ? [b.error] : void 0 })
+		}), /* @__PURE__ */ a(t.Content, { children: [
+			/* @__PURE__ */ i(n, { ...e(x, _ ?? {}) }),
+			p && /* @__PURE__ */ i(t.Description, { children: p }),
+			/* @__PURE__ */ i(t.Error, { errors: b.error ? [b.error] : void 0 })
 		] })]
 	});
 };