@agentero/design-system 0.32.2 → 0.33.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">281 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">35 components ok</span><span class="filter-pill ok" aria-disabled="true">288 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.9s</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">
@@ -3463,8 +3463,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 +5217,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 +5241,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 +5492,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 +5774,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 +6194,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 +6257,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 +6473,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">
@@ -7426,6 +7487,174 @@ button&#39;s start corners with the frame.</div>
         </div>
     
     
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="InputPassword">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> InputPassword</h2>
+      <div class="badges">
+        <label for="c-19-components-inputpassword-props" class="badge ok as-toggle">1 prop type</label>
+        
+        <label for="c-19-components-inputpassword-stories" class="badge ok as-toggle">5 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/input-password/input-password.stories.tsx">components-inputpassword · ./src/input-password/input-password.stories.tsx</div>
+    <div>Password input with a show/hide toggle inside the frame</div>
+    <div class="hint">InputPassword is a password field with a show/hide toggle at the end of its
+frame. It is an `Input` inside an `InputGroup`: `className` styles the
+frame and every other prop reaches the `&lt;input&gt;`, which takes its label,
+messages and states from a surrounding `FieldText`. The toggle is not
+rendered while the input is disabled.</div>
+    <div class="kv"><span class="chip">summary: Password input with a show/hide toggle inside the frame</span><span class="chip">dataAttribute: {string} data-slot - Always set to &quot;input-password&quot; on the frame</span><span class="chip">example: &lt;FieldText required&gt;
+  &lt;Label&gt;Password&lt;/Label&gt;
+  &lt;InputPassword name=&quot;password&quot; autoComplete=&quot;current-password&quot; /&gt;
+&lt;/FieldText&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-19-components-inputpassword-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-19-components-inputpassword-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">1 prop type</span>
+            </div>
+            <pre><code>Component: src/input-password/input-password.tsx::InputPassword</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * 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, InputPassword, 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>Hidden value with a toggle that reveals and hides it</div>
+              <div class="hint">The value starts hidden. The toggle shows it as plain text and hides it
+again; pressing it leaves focus and the caret in the input.</div>
+              <pre><code>const Default = () =&gt; &lt;InputPassword aria-label=&quot;Password&quot; autoComplete=&quot;current-password&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 input with the toggle removed</div>
+              <div class="hint">A disabled input has no toggle, 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;InputPassword
+        aria-label=&quot;Password&quot;
+        autoComplete=&quot;current-password&quot;
+        disabled
+        defaultValue=&quot;hunter22&quot; /&gt;
+    &lt;fieldset disabled style={{ border: 0, margin: 0, padding: 0 }}&gt;
+        &lt;InputPassword aria-label=&quot;New password&quot; autoComplete=&quot;new-password&quot; /&gt;
+    &lt;/fieldset&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Invalid</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Invalid field driving the frame&#39;s destructive border</div>
+              <div class="hint">`invalid` on the surrounding `FieldText` sets `aria-invalid` on the input,
+which paints the frame&#39;s destructive border, and `Field.Error` is announced
+with the input.</div>
+              <pre><code>const Invalid = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1.5rem&#39; }}&gt;
+    &lt;InputPassword
+        autoComplete=&quot;current-password&quot;
+        aria-label=&quot;Valid password&quot;
+        defaultValue=&quot;hunter22&quot; /&gt;
+    &lt;FieldText invalid&gt;
+        &lt;Label&gt;Password&lt;/Label&gt;
+        &lt;InputPassword autoComplete=&quot;new-password&quot; defaultValue=&quot;hunter&quot; /&gt;
+        &lt;Field.Error errors={[{ message: &#39;Use at least 8 characters.&#39; }]} /&gt;
+    &lt;/FieldText&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, with the toggle scaled and evenly inset</div>
+              <div class="hint">The three sizes match Input&#39;s: the frame is 32, 40 or 48px tall. The toggle
+grows with it (a 24px button with a 16px icon at `sm`, 32px with 20px at
+`md`, 32px with 24px at `lg`) and sits as far from the right edge as from
+the top and bottom.</div>
+              <pre><code>const AllSizes = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39; }}&gt;
+    &lt;InputPassword autoComplete=&quot;current-password&quot; size=&quot;sm&quot; aria-label=&quot;Small&quot; /&gt;
+    &lt;InputPassword autoComplete=&quot;current-password&quot; size=&quot;md&quot; aria-label=&quot;Medium&quot; /&gt;
+    &lt;InputPassword autoComplete=&quot;current-password&quot; size=&quot;lg&quot; aria-label=&quot;Large&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 toggle too.</div>
+              <pre><code>const InsideFieldText = () =&gt; (
+    &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1.5rem&#39; }}&gt;
+        &lt;FieldText required&gt;
+            &lt;Label&gt;Password&lt;/Label&gt;
+            &lt;InputPassword autoComplete=&quot;new-password&quot; /&gt;
+            &lt;Field.Description&gt;At least 8 characters.&lt;/Field.Description&gt;
+        &lt;/FieldText&gt;
+        &lt;FieldText disabled&gt;
+            &lt;Label&gt;Current password&lt;/Label&gt;
+            &lt;InputPassword autoComplete=&quot;current-password&quot; defaultValue=&quot;hunter22&quot; /&gt;
+        &lt;/FieldText&gt;
+    &lt;/div&gt;
+);</code></pre>
+            </div>
+        </div>
+    
+    
   </div>
 </article>
 <article
@@ -7440,9 +7669,9 @@ button&#39;s start corners with the frame.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Label</h2>
       <div class="badges">
-        <label for="c-19-components-label-props" class="badge ok as-toggle">3 prop types</label>
+        <label for="c-20-components-label-props" class="badge ok as-toggle">3 prop types</label>
         
-        <label for="c-19-components-label-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-20-components-label-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -7462,10 +7691,10 @@ still has to carry `required` / `aria-required`.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-19-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-20-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-19-components-label-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-20-components-label-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7585,9 +7814,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-20-components-loading-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-21-components-loading-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-20-components-loading-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-21-components-loading-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -7604,10 +7833,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-20-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-21-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-20-components-loading-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-21-components-loading-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7758,9 +7987,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-21-components-modal-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-22-components-modal-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-21-components-modal-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-22-components-modal-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -7806,10 +8035,10 @@ import { Modal } from &#39;@agentero/design-system/modal&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-21-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-22-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-21-components-modal-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-22-components-modal-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8029,9 +8258,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-22-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-23-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-22-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-23-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -8061,10 +8290,10 @@ const [page, setPage] = useState(1);
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-22-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-23-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-22-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-23-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8219,9 +8448,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-23-components-popover-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-24-components-popover-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-23-components-popover-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-24-components-popover-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -8250,10 +8479,10 @@ import { Popover } from &#39;@agentero/design-system/popover&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-23-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-24-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-23-components-popover-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-24-components-popover-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8452,9 +8681,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-24-components-progress-props" class="badge ok as-toggle">4 prop types</label>
+        <label for="c-25-components-progress-props" class="badge ok as-toggle">4 prop types</label>
         
-        <label for="c-24-components-progress-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-25-components-progress-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -8473,10 +8702,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-24-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-25-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-24-components-progress-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-25-components-progress-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8595,7 +8824,7 @@ percentage: number</code></pre>
       <div class="badges">
         
         
-        <label for="c-25-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-26-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -8612,7 +8841,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-25-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-26-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
   
@@ -8708,9 +8937,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-26-components-switch-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-27-components-switch-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-26-components-switch-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-27-components-switch-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -8726,10 +8955,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-26-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-27-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-26-components-switch-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-27-components-switch-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8910,9 +9139,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-27-components-table-props" class="badge ok as-toggle">6 prop types</label>
+        <label for="c-28-components-table-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-27-components-table-stories" class="badge ok as-toggle">10 stories</label>
+        <label for="c-28-components-table-stories" class="badge ok as-toggle">10 stories</label>
         
         
       </div>
@@ -8943,10 +9172,10 @@ import { Table } from &#39;@agentero/design-system/table&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-27-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-28-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-27-components-table-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-28-components-table-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9164,9 +9393,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-28-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
+        <label for="c-29-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
         
-        <label for="c-28-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
+        <label for="c-29-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
         
         
       </div>
@@ -9197,10 +9426,10 @@ import { Tabs } from &#39;@agentero/design-system/tabs&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-28-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-29-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-28-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-29-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9421,9 +9650,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-29-components-tag-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-30-components-tag-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-29-components-tag-stories" class="badge ok as-toggle">12 stories</label>
+        <label for="c-30-components-tag-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -9442,10 +9671,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-29-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-30-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-29-components-tag-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-30-components-tag-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9870,9 +10099,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-30-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-31-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-30-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-31-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -9889,10 +10118,10 @@ states. It wires nothing on its own: `id`, `aria-invalid` and
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-30-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-31-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-30-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-31-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10024,9 +10253,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-31-components-toast-props" class="badge ok as-toggle">11 prop types</label>
+        <label for="c-32-components-toast-props" class="badge ok as-toggle">11 prop types</label>
         
-        <label for="c-31-components-toast-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-32-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
         
       </div>
@@ -10045,10 +10274,10 @@ common feedback patterns.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-31-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-32-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-31-components-toast-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-32-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10477,9 +10706,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-32-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
+        <label for="c-33-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
         
-        <label for="c-32-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-33-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -10498,10 +10727,10 @@ on hover or focus.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-32-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-33-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-32-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-33-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10673,9 +10902,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-33-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
+        <label for="c-34-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
         
-        <label for="c-33-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-34-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -10696,10 +10925,10 @@ your form validation; it does not own the input or block submission.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-33-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-34-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-33-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-34-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">