@agentero/design-system 0.33.0 → 0.34.0

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">35 components ok</span><span class="filter-pill ok" aria-disabled="true">286 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">36 components ok</span><span class="filter-pill ok" aria-disabled="true">294 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.7s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>3.8s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -3170,8 +3170,8 @@ import { Suspense } from "react";</code></pre>
               <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. 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>
+a search out of the box — a magnifier in front, a clear button once there is
+text — and the list hangs from the whole field. Clearing drops the picked option.</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;
@@ -3339,11 +3339,19 @@ here as tags.</div>
               
               <div class="hint">Options fetched as you type, the way the apps load data: the rows are a component
 that suspends on the request, so a `Suspense` boundary inside `Content` shows
-placeholder rows until they land. Nothing tracks `loading` by hand and no stale
-list lingers under the wait: the data is read by query, which is also what makes
-out-of-order responses harmless. Drop a `useSuspenseQuery` where `use()` is.</div>
+placeholder rows until the first results land. The rows read a deferred copy of
+the query, so a new search keeps the previous rows on screen while it loads and
+`Content` is marked busy until they are replaced; the placeholders never come
+back. Nothing tracks `loading` by hand, and reading the data by query is what
+makes out-of-order responses harmless. With react-query, drop a
+`useSuspenseQuery` where `use()` is, or use `placeholderData: keepPreviousData`
+with a plain `useQuery` for the same behaviour.</div>
               <pre><code>const AsyncSearch = () =&gt; {
     const [query, setQuery] = useState(&#39;&#39;);
+    // The rows read the deferred query: while the new one suspends, React keeps rendering the
+    // old rows instead of falling back to the placeholders.
+    const deferredQuery = useDeferredValue(query);
+    const isStale = query !== deferredQuery;
 
     return (
         // No `items` and `filter={null}`: the server did the filtering, the child renders what came
@@ -3357,9 +3365,9 @@ out-of-order responses harmless. Drop a `useSuspenseQuery` where `use()` is.</di
                 if (reason !== &#39;item-press&#39;) setQuery(value);
             }}&gt;
             &lt;Combobox.Input placeholder=&quot;Search agencies&quot; aria-label=&quot;Search agencies&quot; /&gt;
-            &lt;Combobox.Content&gt;
+            &lt;Combobox.Content aria-busy={isStale || undefined}&gt;
                 &lt;Suspense fallback={&lt;SkeletonRows /&gt;}&gt;
-                    &lt;AgencyItems query={query} /&gt;
+                    &lt;AgencyItems query={deferredQuery} /&gt;
                 &lt;/Suspense&gt;
             &lt;/Combobox.Content&gt;
         &lt;/Combobox.Root&gt;
@@ -3374,8 +3382,10 @@ out-of-order responses harmless. Drop a `useSuspenseQuery` where `use()` is.</di
               <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.
+`Content` is marked busy and `Status` announces the wait. Placeholder rows show
+only while there is nothing to show yet; after that, the previous rows stay
+until the new ones replace them. 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
@@ -3394,9 +3404,7 @@ no request goes out for a shorter query either.</div>
             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.
-        setResults([]);
+        // The previous rows stay through the wait, marked busy, rather than blinking out and back.
         setIsLoading(true);
         const agencies = await searchAgencies(query);
         if (request !== latestRequest.current) return;
@@ -3421,7 +3429,7 @@ no request goes out for a shorter query either.</div>
                 &lt;Combobox.Status className=&quot;sr-only&quot;&gt;
                     {isLoading ? &#39;Searching…&#39; : undefined}
                 &lt;/Combobox.Status&gt;
-                {isLoading &amp;&amp; &lt;SkeletonRows /&gt;}
+                {isLoading &amp;&amp; results.length === 0 &amp;&amp; &lt;SkeletonRows /&gt;}
                 &lt;Combobox.Empty&gt;{isLoading ? undefined : &#39;No agencies found&#39;}&lt;/Combobox.Empty&gt;
                 &lt;Combobox.List&gt;
                     {(agency: Agency) =&gt; (
@@ -3463,8 +3471,8 @@ rest of the page from assistive technology, label included, and a
                 &lt;/Combobox.List&gt;
             &lt;/Combobox.Content&gt;
         &lt;/Combobox.Root&gt;
-        &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;Field.Description&gt;The agency this agent will be added to.&lt;/Field.Description&gt;
     &lt;/FieldText&gt;
 );</code></pre>
             </div>
@@ -5217,7 +5225,7 @@ actions outright unless the user needs to see them and understand why.</div>
       <div class="badges">
         <label for="c-12-components-field-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-12-components-field-stories" class="badge ok as-toggle">16 stories</label>
+        <label for="c-12-components-field-stories" class="badge ok as-toggle">17 stories</label>
         
         
       </div>
@@ -5241,8 +5249,8 @@ absent when there is none.</div>
     <div class="kv"><span class="chip">summary: Wraps a label, control, description and error into one field</span><span class="chip">example: &lt;Field.Root invalid={!!error} required&gt;
   &lt;Field.Label&gt;Email&lt;/Field.Label&gt;
   &lt;Input type=&quot;email&quot; /&gt;
-  &lt;Field.Description&gt;We only use this for policy documents.&lt;/Field.Description&gt;
   &lt;Field.Error errors={[error]} /&gt;
+  &lt;Field.Description&gt;We only use this for policy documents.&lt;/Field.Description&gt;
 &lt;/Field.Root&gt;</span></div>
   </div>
 
@@ -5492,6 +5500,37 @@ either, the control carries no `aria-describedby` at all.</div>
     &lt;DemoInput type=&quot;email&quot; /&gt;
     &lt;Field.Error errors={[undefined]} /&gt;
 &lt;/Field.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Error Before Description</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Error announced before the description, whenever it appears</div>
+              <div class="hint">The error sits right under the control and is announced before the
+description, even when it appears after the description is on screen and
+carries an `id` of its own.</div>
+              <pre><code>const ErrorBeforeDescription = () =&gt; {
+    const [error, setError] = useState&lt;string&gt;();
+
+    return (
+        &lt;div className=&quot;flex flex-col items-start gap-4&quot;&gt;
+            &lt;Field.Root
+                orientation=&quot;vertical&quot;
+                disabled={false}
+                readOnly={false}
+                required={false}
+                invalid={!!error}&gt;
+                &lt;Label&gt;Tax ID&lt;/Label&gt;
+                &lt;DemoInput inputMode=&quot;numeric&quot; /&gt;
+                &lt;Field.Error id=&quot;tax-id-error&quot;&gt;{error}&lt;/Field.Error&gt;
+                &lt;Field.Description&gt;Nine digits, with or without the dash.&lt;/Field.Description&gt;
+            &lt;/Field.Root&gt;
+            &lt;button type=&quot;button&quot; onClick={() =&gt; setError(&#39;Enter the tax ID.&#39;)}&gt;Validate
+                                &lt;/button&gt;
+        &lt;/div&gt;
+    );
+};</code></pre>
             </div>
             <div class="note ok">
               <div class="row">
@@ -5743,8 +5782,8 @@ and `name`, and `FieldContext` with the errors, as the last story shows.</div>
     <div class="kv"><span class="chip">summary: Field for a single-line text control, wiring the Input inside it</span><span class="chip">example: &lt;FieldText invalid={!!error} required&gt;
   &lt;Label&gt;Email&lt;/Label&gt;
   &lt;Input type=&quot;email&quot; /&gt;
-  &lt;Field.Description&gt;We only use this for policy documents.&lt;/Field.Description&gt;
   &lt;Field.Error errors={[error]} /&gt;
+  &lt;Field.Description&gt;We only use this for policy documents.&lt;/Field.Description&gt;
 &lt;/FieldText&gt;</span></div>
   </div>
 
@@ -6163,7 +6202,7 @@ Validation is react-hook-form&#39;s alone.</div>
       <div class="badges">
         <label for="c-15-components-formtext-props" class="badge ok as-toggle">15 prop types</label>
         
-        <label for="c-15-components-formtext-stories" class="badge ok as-toggle">9 stories</label>
+        <label for="c-15-components-formtext-stories" class="badge ok as-toggle">10 stories</label>
         
         
       </div>
@@ -6226,9 +6265,9 @@ control?: Control&lt;FieldValues, any, unknown&gt;
 controlId?: string
 
 /**
- * Helper text shown under the control and announced through its
- * `aria-describedby`. Use it for guidance the user needs before typing; put
- * details worth a click in `tooltip` instead.
+ * Helper text shown under the control, below the error when there is one,
+ * and announced through its `aria-describedby`. Use it for guidance the
+ * user needs before typing; put details worth a click in `tooltip` instead.
  */
 description?: ReactNode
 
@@ -6442,6 +6481,36 @@ not mark the field required: that stays an explicit `required` prop.</div>
             &lt;Button type=&quot;submit&quot;&gt;Save&lt;/Button&gt;
         &lt;/Form.Root&gt;
     );
+};</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Error And Description</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Error under the input, above the helper text</div>
+              <div class="hint">The error sits right under the input and the description stays below it, so
+the message lands next to the value it is about. Screen readers announce
+them in the same order.</div>
+              <pre><code>const ErrorAndDescription = () =&gt; {
+    const methods = useForm&lt;TaxValues&gt;({ defaultValues: { taxId: &#39;&#39; } });
+
+    return (
+        &lt;Form.Root
+            methods={methods}
+            onSubmit={onSubmit}
+            aria-label=&quot;Tax details&quot;
+            className=&quot;flex flex-col items-start gap-7&quot;&gt;
+            &lt;FormText
+                name=&quot;taxId&quot;
+                label=&quot;Tax ID&quot;
+                description=&quot;Nine digits, with or without the dash.&quot;
+                rules={{ required: &#39;Enter the tax ID.&#39; }}
+                inputProps={{ inputMode: &#39;numeric&#39;, autoComplete: &#39;off&#39; }}
+            /&gt;
+            &lt;Button type=&quot;submit&quot;&gt;Save&lt;/Button&gt;
+        &lt;/Form.Root&gt;
+    );
 };</code></pre>
             </div>
             <div class="note ok">
@@ -7115,7 +7184,7 @@ they cannot change.</div>
       <div class="badges">
         
         
-        <label for="c-18-components-inputgroup-stories" class="badge ok as-toggle">13 stories</label>
+        <label for="c-18-components-inputgroup-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -7162,7 +7231,6 @@ hands its state to the frame through `:has()`, so focus, `disabled`,
     DropdownMenu,
     Field,
     FieldText,
-    IconCancel,
     IconKeyboardArrowDown,
     IconSearch,
     Input,
@@ -7181,7 +7249,9 @@ hands its state to the frame through `:has()`, so focus, `disabled`,
               <div>Leading icon addon with the frame drawing the focus ring</div>
               <div class="hint">A search field: the icon leads and the input takes the rest of the frame.
 Pressing the icon focuses the input, and the frame — not the input — draws the
-focus ring, so the two never show a double border.</div>
+focus ring, so the two never show a double border. A search field with a
+clear button and a loading state is
+[InputSearch](?path=/docs/components-inputsearch--docs), built on this frame.</div>
               <pre><code>const Default = () =&gt; (
     &lt;InputGroup.Root&gt;
         &lt;InputGroup.Addon&gt;
@@ -7352,25 +7422,6 @@ describes it with no ids written by hand. The frame is not in the way.</div>
         &lt;/InputGroup.Root&gt;
         &lt;Field.Description&gt;Shown on your public profile.&lt;/Field.Description&gt;
     &lt;/FieldText&gt;
-);</code></pre>
-            </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">Search Field</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              
-              
-              <pre><code>const SearchField = () =&gt; (
-    &lt;form onSubmit={handleSearchSubmit}&gt;
-        &lt;FieldStates
-            label=&quot;Agency&quot;
-            tooltip=&quot;Search by agency name or NPN.&quot;
-            required
-            error=&quot;Pick an agency from the list.&quot;&gt;
-            &lt;SearchInput /&gt;
-        &lt;/FieldStates&gt;
-    &lt;/form&gt;
 );</code></pre>
             </div>
             <div class="note ok">
@@ -7594,6 +7645,236 @@ the field through the frame. A disabled field removes the toggle too.</div>
         </div>
     
     
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="InputSearch">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> InputSearch</h2>
+      <div class="badges">
+        <label for="c-20-components-inputsearch-props" class="badge ok as-toggle">3 prop types</label>
+        
+        <label for="c-20-components-inputsearch-stories" class="badge ok as-toggle">7 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/input-search/input-search.stories.tsx">components-inputsearch · ./src/input-search/input-search.stories.tsx</div>
+    <div>Search input with a leading icon, a clear button and a loading slot</div>
+    <div class="hint">InputSearch is a search field with a magnifier in front and a clear button
+once there is text. It is an `Input` of `type=&quot;search&quot;` inside an
+`InputGroup`: `className` styles the frame and every other prop reaches the
+`&lt;input&gt;`. Clearing reports a real change event with an empty value, and
+`isLoading` swaps the clear button for a spinner.</div>
+    <div class="kv"><span class="chip">summary: Search input with a leading icon, a clear button and a loading slot</span><span class="chip">dataAttribute: {string} data-slot - Always set to &quot;input-search&quot; on the frame</span><span class="chip">example: &lt;InputSearch
+  aria-label=&quot;Search agencies&quot;
+  value={query}
+  onChange={event =&gt; setQuery(event.target.value)}
+  isLoading={isFetching}
+/&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-20-components-inputsearch-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-20-components-inputsearch-props" class="tg tg-props" type="checkbox" hidden />
+
+  <div class="panels">
+    
+    
+    
+        <div class="panel panel-props">
+          <div class="note ok">
+            <div class="row">
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
+              <span class="badge ok">3 prop types</span>
+            </div>
+            <pre><code>Component: src/input-search/input-search.tsx::InputSearch</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * Accessible name of the clear button. Defaults to `&#39;Clear search&#39;`; name it
+ * after what is searched (`&#39;Clear agency search&#39;`) when a page carries
+ * several search fields.
+ */
+clearLabel?: string = &#39;Clear search&#39;
+
+/**
+ * Shows a spinner at the end of the frame, in place of the clear button,
+ * while the results for the current text are on their way. Defaults to
+ * `false`.
+ */
+isLoading?: boolean = false
+
+/**
+ * Control height. Defaults to `&#39;md&#39;`.
+ * - `sm` (32px) — dense layouts where vertical space is tight.
+ * - `md` (40px) — standard form density.
+ * - `lg` (48px) — low-density forms and larger touch targets. Also raises
+ *   the text to `base` and the corner radius to `lg`.
+ */
+size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
+          </div>
+        </div>
+    
+        <div class="panel panel-stories">
+          
+          
+          
+          <div class="note ok">
+                <div class="row">
+                  <span class="ex-name">Imports</span>
+                </div>
+                <pre><code>import { Field, FieldText, InputSearch, Label } from "@agentero/design-system";</code></pre>
+              </div>
+          
+          
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Default</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Controlled search with a clear button that empties the query</div>
+              <div class="hint">A controlled search. The clear button appears once there is text; pressing
+it calls `onChange` with an empty `event.target.value`, so the state that
+owns the query empties too, and focus goes back to the input. The browser&#39;s
+own cancel button is hidden.</div>
+              <pre><code>const Default = () =&gt; {
+    const [query, setQuery] = useState(&#39;&#39;);
+
+    return (
+        &lt;InputSearch
+            aria-label=&quot;Search agencies&quot;
+            value={query}
+            onChange={event =&gt; {
+                setQuery(event.target.value);
+                args.onChange?.(event);
+            }} /&gt;
+    );
+};</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Loading</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Spinner in place of the clear button while results load</div>
+              <div class="hint">While `isLoading` is set a spinner takes the clear button&#39;s place, even with
+text in the field.</div>
+              <pre><code>const Loading = () =&gt; &lt;InputSearch
+    aria-label=&quot;Search agencies&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+    isLoading
+    defaultValue=&quot;Acme&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Uncontrolled</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Uncontrolled search starting from a default value</div>
+              <div class="hint">An uncontrolled search with a `defaultValue`. The clear button follows what
+is in the field, and clearing still calls `onChange` with an empty value.</div>
+              <pre><code>const Uncontrolled = () =&gt; &lt;InputSearch
+    aria-label=&quot;Search agencies&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+    defaultValue=&quot;Acme Insurance&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Disabled</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Disabled search with the clear button removed</div>
+              <div class="hint">A disabled search has no clear button, whether `disabled` is set on the
+input itself or comes from a `&lt;fieldset disabled&gt;` around it.</div>
+              <pre><code>const Disabled = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39; }}&gt;
+    &lt;InputSearch
+        aria-label=&quot;Search agencies&quot;
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        disabled
+        defaultValue=&quot;Acme&quot; /&gt;
+    &lt;fieldset disabled style={{ border: 0, margin: 0, padding: 0 }}&gt;
+        &lt;InputSearch
+            onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+            aria-label=&quot;Search carriers&quot;
+            defaultValue=&quot;Travelers&quot; /&gt;
+    &lt;/fieldset&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">All Sizes</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>The three sizes side by side</div>
+              <div class="hint">The three sizes match Input&#39;s: the frame is 32, 40 or 48px tall.</div>
+              <pre><code>const AllSizes = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39; }}&gt;
+    &lt;InputSearch
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        size=&quot;sm&quot;
+        aria-label=&quot;Small&quot;
+        defaultValue=&quot;Acme&quot; /&gt;
+    &lt;InputSearch
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        size=&quot;md&quot;
+        aria-label=&quot;Medium&quot;
+        defaultValue=&quot;Acme&quot; /&gt;
+    &lt;InputSearch
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        size=&quot;lg&quot;
+        aria-label=&quot;Large&quot;
+        defaultValue=&quot;Acme&quot; /&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Inside Field Text</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Label and disabled state reaching the input through the frame</div>
+              <div class="hint">Inside a `FieldText` the input takes its label, description and states from
+the field through the frame. A disabled field removes the clear button too.</div>
+              <pre><code>const InsideFieldText = () =&gt; (
+    &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1.5rem&#39; }}&gt;
+        &lt;FieldText&gt;
+            &lt;Label&gt;Agency&lt;/Label&gt;
+            &lt;InputSearch defaultValue=&quot;Acme&quot; /&gt;
+            &lt;Field.Description&gt;Search by agency name or NPN.&lt;/Field.Description&gt;
+        &lt;/FieldText&gt;
+        &lt;FieldText disabled&gt;
+            &lt;Label&gt;Carrier&lt;/Label&gt;
+            &lt;InputSearch defaultValue=&quot;Travelers&quot; /&gt;
+        &lt;/FieldText&gt;
+    &lt;/div&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Clear Label</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Clear button named after what the field searches</div>
+              <div class="hint">`clearLabel` names the clear button after what is searched, so a page with
+several search fields does not read &quot;Clear search&quot; twice.</div>
+              <pre><code>const ClearLabel = () =&gt; &lt;InputSearch
+    aria-label=&quot;Search agencies&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+    defaultValue=&quot;Acme&quot;
+    clearLabel=&quot;Clear agency search&quot; /&gt;;</code></pre>
+            </div>
+        </div>
+    
+    
   </div>
 </article>
 <article
@@ -7608,9 +7889,9 @@ the field through the frame. A disabled field removes the toggle too.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Label</h2>
       <div class="badges">
-        <label for="c-20-components-label-props" class="badge ok as-toggle">3 prop types</label>
+        <label for="c-21-components-label-props" class="badge ok as-toggle">3 prop types</label>
         
-        <label for="c-20-components-label-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-21-components-label-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -7630,10 +7911,10 @@ still has to carry `required` / `aria-required`.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-20-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-21-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-20-components-label-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-21-components-label-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7753,9 +8034,9 @@ field&#39;s control with no `htmlFor`. An explicit `htmlFor` still wins.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Loading</h2>
       <div class="badges">
-        <label for="c-21-components-loading-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-22-components-loading-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-21-components-loading-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-22-components-loading-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -7772,10 +8053,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-21-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-22-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-21-components-loading-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-22-components-loading-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7926,9 +8207,9 @@ against the dark background.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Modal.Root</h2>
       <div class="badges">
-        <label for="c-22-components-modal-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-23-components-modal-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-22-components-modal-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-23-components-modal-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -7974,10 +8255,10 @@ import { Modal } from &#39;@agentero/design-system/modal&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-22-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-23-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-22-components-modal-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-23-components-modal-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8197,9 +8478,9 @@ announced as an `alertdialog`. Only the footer actions close it.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Pagination</h2>
       <div class="badges">
-        <label for="c-23-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-24-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-23-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-24-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -8229,10 +8510,10 @@ const [page, setPage] = useState(1);
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-23-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-24-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-23-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-24-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8387,9 +8668,9 @@ entries summary follow along.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Popover.Root</h2>
       <div class="badges">
-        <label for="c-24-components-popover-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-25-components-popover-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-24-components-popover-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-25-components-popover-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -8418,10 +8699,10 @@ import { Popover } from &#39;@agentero/design-system/popover&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-24-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-25-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-24-components-popover-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-25-components-popover-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8620,9 +8901,9 @@ focus returning to its trigger once the modal closes.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Progress</h2>
       <div class="badges">
-        <label for="c-25-components-progress-props" class="badge ok as-toggle">4 prop types</label>
+        <label for="c-26-components-progress-props" class="badge ok as-toggle">4 prop types</label>
         
-        <label for="c-25-components-progress-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-26-components-progress-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -8641,10 +8922,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-25-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-26-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-25-components-progress-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-26-components-progress-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8763,7 +9044,7 @@ percentage: number</code></pre>
       <div class="badges">
         
         
-        <label for="c-26-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-27-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -8780,7 +9061,7 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-26-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-27-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
   
@@ -8876,9 +9157,9 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Switch</h2>
       <div class="badges">
-        <label for="c-27-components-switch-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-28-components-switch-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-27-components-switch-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-28-components-switch-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -8894,10 +9175,10 @@ a Checkbox for a single boolean that applies instantly, and pair it with a
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-27-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-28-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-27-components-switch-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-28-components-switch-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9078,9 +9359,9 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Table.Root</h2>
       <div class="badges">
-        <label for="c-28-components-table-props" class="badge ok as-toggle">6 prop types</label>
+        <label for="c-29-components-table-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-28-components-table-stories" class="badge ok as-toggle">10 stories</label>
+        <label for="c-29-components-table-stories" class="badge ok as-toggle">10 stories</label>
         
         
       </div>
@@ -9111,10 +9392,10 @@ import { Table } from &#39;@agentero/design-system/table&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-28-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-29-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-28-components-table-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-29-components-table-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9332,9 +9613,9 @@ keeps its padding.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
       <div class="badges">
-        <label for="c-29-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
+        <label for="c-30-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
         
-        <label for="c-29-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
+        <label for="c-30-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
         
         
       </div>
@@ -9365,10 +9646,10 @@ import { Tabs } from &#39;@agentero/design-system/tabs&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-29-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-30-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-29-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-30-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9589,9 +9870,9 @@ tablist role is announced.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tag</h2>
       <div class="badges">
-        <label for="c-30-components-tag-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-31-components-tag-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-30-components-tag-stories" class="badge ok as-toggle">12 stories</label>
+        <label for="c-31-components-tag-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -9610,10 +9891,10 @@ it an interactive link or button, which adds the pointer cursor and hover fill.<
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-30-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-31-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-30-components-tag-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-31-components-tag-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10038,9 +10319,9 @@ leading + trailing icons, and icon-only.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> TextArea</h2>
       <div class="badges">
-        <label for="c-31-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-32-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-31-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-32-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -10057,10 +10338,10 @@ states. It wires nothing on its own: `id`, `aria-invalid` and
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-31-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-32-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-31-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-32-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10192,9 +10473,9 @@ size and the minimum height shows three rows.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Toast</h2>
       <div class="badges">
-        <label for="c-32-components-toast-props" class="badge ok as-toggle">11 prop types</label>
+        <label for="c-33-components-toast-props" class="badge ok as-toggle">11 prop types</label>
         
-        <label for="c-32-components-toast-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-33-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
         
       </div>
@@ -10213,10 +10494,10 @@ common feedback patterns.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-32-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-33-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-32-components-toast-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-33-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10645,9 +10926,9 @@ action (e.g., a sync icon for a sync-in-progress toast).</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tooltip</h2>
       <div class="badges">
-        <label for="c-33-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
+        <label for="c-34-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
         
-        <label for="c-33-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-34-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -10666,10 +10947,10 @@ on hover or focus.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-33-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-34-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-33-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-34-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10841,9 +11122,9 @@ sideOffset?: number = 4</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> ValidationList</h2>
       <div class="badges">
-        <label for="c-34-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
+        <label for="c-35-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
         
-        <label for="c-34-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-35-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -10864,10 +11145,10 @@ your form validation; it does not own the input or block submission.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-34-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-35-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-34-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-35-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">