@agentero/design-system 0.25.3 → 0.26.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">25 components ok</span><span class="filter-pill ok" aria-disabled="true">194 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">26 components ok</span><span class="filter-pill ok" aria-disabled="true">203 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>3.7s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>4.0s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -2019,7 +2019,7 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Button</h2>
       <div class="badges">
-        <label for="c-4-components-button-props" class="badge ok as-toggle">12 prop types</label>
+        <label for="c-4-components-button-props" class="badge ok as-toggle">13 prop types</label>
         
         <label for="c-4-components-button-stories" class="badge ok as-toggle">11 stories</label>
         
@@ -2061,7 +2061,7 @@ without Button binding to any particular framework.</div>
           <div class="note ok">
             <div class="row">
               <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
-              <span class="badge ok">12 prop types</span>
+              <span class="badge ok">13 prop types</span>
             </div>
             <pre><code>Component: src/button/button.tsx::Button</code></pre>
             <pre><code>Props:</code></pre>
@@ -2139,6 +2139,18 @@ ref?: Ref&lt;HTMLButtonElement | HTMLAnchorElement&gt; | undefined
  */
 rounded?: boolean
 
+/**
+ * When `true`, the button dips to 97% while held so the control answers the
+ * pointer instead of only changing color. Defaults to `false`.
+ * 
+ * Has no effect with `variant=&quot;link&quot;` (scaling bare text with no padding or
+ * background reads as a wobble) or while the button is disabled or loading,
+ * including the `asChild` anchor form, which stays keyboard-focusable and
+ * would otherwise dip on Enter. The dip is gated behind `motion-safe`, so it
+ * disappears under `prefers-reduced-motion`.
+ */
+scaleOnPress?: boolean
+
 /**
  * Control size. Defaults to `&#39;sm&#39;`.
  * - `xs` (24px) — dense toolbars, compact inline actions.
@@ -2186,8 +2198,8 @@ variant?: &quot;link&quot; | &quot;ghost&quot; | &quot;primary&quot; | &quot;sec
               </div>
               <div>Default args playground for Button</div>
               <div class="hint">Args-controlled playground. Toggle `variant`, `size`, `status`, `loading`,
-`disabled`, and `rounded` from the Controls panel to explore every visual
-combination of the Button.</div>
+`disabled`, `rounded`, and `scaleOnPress` from the Controls panel to explore
+every visual combination of the Button.</div>
               <pre><code>const Default = () =&gt; &lt;Button variant=&quot;primary&quot; size=&quot;sm&quot;&gt;{TEXT}&lt;/Button&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -2412,31 +2424,37 @@ router. In app code, swap the plain `&lt;a&gt;` below for your framework&#39;s L
                 <span class="ex-name">Pressed</span>
                 <span class="badge ok">story ok</span>
               </div>
-              <div>Press feedback dips the button, excluding `link` and disabled</div>
-              <div class="hint">Buttons dip to 97% while held so the control answers the pointer rather than
-only changing color. Press and hold one below to feel it — the effect is
-deliberately small, and if a quick click draws the eye it is too strong.
+              <div>Opt-in press feedback via `scaleOnPress`, excluding `link` and disabled</div>
+              <div class="hint">With `scaleOnPress`, a button dips to 97% while held so the control answers
+the pointer rather than only changing color. Press and hold one below to
+feel it — the effect is deliberately small, and if a quick click draws the
+eye it is too strong. It is off by default: pass the prop where the extra
+feedback is wanted.
 
-`variant=&quot;link&quot;` is excluded: it has no padding or background, so scaling
-bare text reads as a wobble rather than a button being pushed. Disabled
-buttons are excluded too, including the `asChild` anchor form, which stays
-keyboard-focusable and would otherwise dip on Enter. The whole effect is
-gated behind `motion-safe`, so it disappears under `prefers-reduced-motion`.</div>
+`variant=&quot;link&quot;` is excluded even with the prop set: it has no padding or
+background, so scaling bare text reads as a wobble rather than a button
+being pushed. Disabled buttons are excluded too, including the `asChild`
+anchor form, which stays keyboard-focusable and would otherwise dip on
+Enter. The whole effect is gated behind `motion-safe`, so it disappears
+under `prefers-reduced-motion`.</div>
               <pre><code>const Pressed = () =&gt; (
     &lt;Stack&gt;
         &lt;Row&gt;
             {NON_LINK_VARIANTS.map(variant =&gt; (
-                &lt;Button key={variant} variant={variant}&gt;
+                &lt;Button key={variant} variant={variant} scaleOnPress&gt;
                     Press {variant}
                 &lt;/Button&gt;
             ))}
         &lt;/Row&gt;
         &lt;Row&gt;
-            &lt;Button variant=&quot;link&quot;&gt;Link stays still&lt;/Button&gt;
-            &lt;Button variant=&quot;primary&quot; disabled&gt;
+            &lt;Button variant=&quot;primary&quot;&gt;Opted out stays still&lt;/Button&gt;
+            &lt;Button variant=&quot;link&quot; scaleOnPress&gt;
+                Link stays still
+            &lt;/Button&gt;
+            &lt;Button variant=&quot;primary&quot; scaleOnPress disabled&gt;
                 Disabled stays still
             &lt;/Button&gt;
-            &lt;Button asChild variant=&quot;secondary&quot; disabled&gt;
+            &lt;Button asChild variant=&quot;secondary&quot; scaleOnPress disabled&gt;
                 &lt;a href=&quot;/dashboard&quot;&gt;Disabled anchor stays still&lt;/a&gt;
             &lt;/Button&gt;
         &lt;/Row&gt;
@@ -4486,6 +4504,245 @@ trigger-dense UIs where an instant preview reads as more responsive.</div>
         </div>
     
     
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="Input">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> Input</h2>
+      <div class="badges">
+        <label for="c-11-components-input-props" class="badge ok as-toggle">7 prop types</label>
+        
+        <label for="c-11-components-input-stories" class="badge ok as-toggle">9 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/input/input.stories.tsx">components-input · ./src/input/input.stories.tsx</div>
+    <div>Base single-line text control, unaware of fields and form libraries</div>
+    <div class="hint">Input is the base single-line text control. It is intentionally unaware of
+form fields and form libraries: `id`, `aria-invalid` and `aria-describedby`
+are plain props, set by a field wrapper or by hand.
+
+There is no `status` prop. Mark the control `aria-invalid` and the
+destructive border follows, so the styling can never disagree with what
+assistive technology announces.</div>
+    <div class="kv"><span class="chip">summary: Base single-line text control, unaware of fields and form libraries</span><span class="chip">example: &lt;Label htmlFor=&quot;email&quot;&gt;Email&lt;/Label&gt;
+&lt;Input id=&quot;email&quot; type=&quot;email&quot; placeholder=&quot;you@example.com&quot; /&gt;</span><span class="chip">example: &lt;Input id=&quot;email&quot; aria-invalid aria-describedby=&quot;email-error&quot; /&gt;
+&lt;span id=&quot;email-error&quot;&gt;Enter a valid email address.&lt;/span&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-11-components-input-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-11-components-input-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">7 prop types</span>
+            </div>
+            <pre><code>Component: src/input/input.tsx::Input</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * Indicates the entered value does not conform to the format expected by the application.
+ * Set this when the value fails validation: it drives the destructive border
+ * and is what assistive technology announces. Point `aria-describedby` at
+ * the error message so the two are read together.
+ */
+aria-invalid?: boolean | &quot;true&quot; | &quot;false&quot; | &quot;grammar&quot; | &quot;spelling&quot; | undefined
+
+/**
+ * Blocks interaction, greys the control out and drops its shadow. The value
+ * is not submitted. When the user still needs to read or copy the value,
+ * use `readOnly` instead.
+ */
+disabled?: boolean
+
+/**
+ * Short hint shown while the field is empty. It disappears on the first
+ * keystroke, so it is never a substitute for a label.
+ */
+placeholder?: string
+
+/**
+ * Keeps the value focusable and copyable but not editable, and still
+ * submits it. Unlike `disabled`, it stays in the tab order.
+ */
+readOnly?: boolean
+
+/**
+ * Marks the control required for both the browser and assistive technology.
+ */
+required?: boolean
+
+/**
+ * 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;
+
+/**
+ * Native input type. Picks the on-screen keyboard on touch devices and the
+ * browser&#39;s own parsing, so set it even when you validate yourself.
+ * Defaults to `&#39;text&#39;`. Multi-line text is not one of the options — that is
+ * a TextArea.
+ */
+type?: HTMLInputTypeAttribute | undefined</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 { Input } 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>Default standalone input</div>
+              <div class="hint">The default control at `md`, usable anywhere without a surrounding field.</div>
+              <pre><code>const Default = () =&gt; &lt;Input type=&quot;text&quot; placeholder=&quot;Insert value&quot; aria-label=&quot;Value&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Small</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Small 32px control for dense layouts</div>
+              <div class="hint">`sm` (32px) keeps dense layouts compact where vertical space is tight.</div>
+              <pre><code>const Small = () =&gt; &lt;Input type=&quot;text&quot; placeholder=&quot;Insert value&quot; aria-label=&quot;Value&quot; size=&quot;sm&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Medium</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Medium 40px control, the default</div>
+              <div class="hint">`md` (40px) is the default and covers standard form density.</div>
+              <pre><code>const Medium = () =&gt; &lt;Input type=&quot;text&quot; placeholder=&quot;Insert value&quot; aria-label=&quot;Value&quot; size=&quot;md&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Large</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Large 48px control for low-density forms</div>
+              <div class="hint">`lg` (48px) suits low-density forms and larger touch targets. It also raises
+the text to `base` and the corner radius to `lg`.</div>
+              <pre><code>const Large = () =&gt; &lt;Input type=&quot;text&quot; placeholder=&quot;Insert value&quot; aria-label=&quot;Value&quot; size=&quot;lg&quot; /&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>Visual comparison of the three input sizes</div>
+              <div class="hint">All three heights together for visual comparison.</div>
+              <pre><code>const AllSizes = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39;, maxWidth: &#39;20rem&#39; }}&gt;
+    &lt;Input type=&quot;text&quot; size=&quot;sm&quot; aria-label=&quot;Small input&quot; placeholder=&quot;sm — 32px&quot; /&gt;
+    &lt;Input type=&quot;text&quot; size=&quot;md&quot; aria-label=&quot;Medium input&quot; placeholder=&quot;md — 40px&quot; /&gt;
+    &lt;Input type=&quot;text&quot; size=&quot;lg&quot; aria-label=&quot;Large input&quot; placeholder=&quot;lg — 48px&quot; /&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Types</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Common input types side by side</div>
+              <div class="hint">A range of input types. The type picks the on-screen keyboard on touch
+devices and the browser&#39;s own parsing, so set it even when you validate
+yourself.</div>
+              <pre><code>const Types = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39;, maxWidth: &#39;20rem&#39; }}&gt;
+    &lt;Input type=&quot;text&quot; aria-label=&quot;Text&quot; placeholder=&quot;Text&quot; /&gt;
+    &lt;Input type=&quot;email&quot; aria-label=&quot;Email address&quot; placeholder=&quot;you@example.com&quot; /&gt;
+    &lt;Input type=&quot;password&quot; aria-label=&quot;Password&quot; placeholder=&quot;Password&quot; /&gt;
+    &lt;Input type=&quot;number&quot; aria-label=&quot;Amount&quot; placeholder=&quot;0&quot; /&gt;
+    &lt;Input type=&quot;date&quot; aria-label=&quot;Date&quot; placeholder=&quot;&quot; /&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 state driven by aria-invalid</div>
+              <div class="hint">The invalid treatment comes purely from `aria-invalid`, so the border can
+never disagree with what assistive technology announces. Point
+`aria-describedby` at the message so it is read out with the control.</div>
+              <pre><code>const Invalid = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;0.25rem&#39;, maxWidth: &#39;20rem&#39; }}&gt;
+    &lt;Input
+        type=&quot;email&quot;
+        placeholder=&quot;Insert value&quot;
+        aria-label=&quot;Email&quot;
+        aria-invalid
+        aria-describedby=&quot;email-error&quot;
+        defaultValue=&quot;not-an-email&quot; /&gt;
+    &lt;span id=&quot;email-error&quot;&gt;Enter a valid email address.&lt;/span&gt;
+&lt;/div&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 state</div>
+              <div class="hint">A disabled input keeps its value readable but blocks interaction, drops its
+shadow and leaves the tab order.</div>
+              <pre><code>const Disabled = () =&gt; &lt;Input
+    type=&quot;text&quot;
+    placeholder=&quot;Insert value&quot;
+    aria-label=&quot;Value&quot;
+    disabled
+    defaultValue=&quot;Cannot be edited&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Read Only</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Read-only value that stays focusable and copyable</div>
+              <div class="hint">Read-only inputs stay focusable and copyable and still submit their value —
+reach for this over `disabled` when the user needs to read or copy something
+they cannot change.</div>
+              <pre><code>const ReadOnly = () =&gt; &lt;Input
+    type=&quot;text&quot;
+    placeholder=&quot;Insert value&quot;
+    aria-label=&quot;Value&quot;
+    readOnly
+    defaultValue=&quot;Copy me, but do not change me&quot; /&gt;;</code></pre>
+            </div>
+        </div>
+    
+    
   </div>
 </article>
 <article
@@ -4500,9 +4757,9 @@ trigger-dense UIs where an instant preview reads as more responsive.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Label</h2>
       <div class="badges">
-        <label for="c-11-components-label-props" class="badge ok as-toggle">3 prop types</label>
+        <label for="c-12-components-label-props" class="badge ok as-toggle">3 prop types</label>
         
-        <label for="c-11-components-label-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-12-components-label-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -4522,10 +4779,10 @@ still has to carry `required` / `aria-required`.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-11-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-12-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-11-components-label-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-12-components-label-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -4623,9 +4880,9 @@ dropped, so a mistake never takes the page down.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Loading</h2>
       <div class="badges">
-        <label for="c-12-components-loading-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-13-components-loading-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-12-components-loading-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-13-components-loading-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -4642,10 +4899,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-12-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-13-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-12-components-loading-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-13-components-loading-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -4796,9 +5053,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-13-components-modal-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-14-components-modal-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-13-components-modal-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-14-components-modal-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -4844,10 +5101,10 @@ import { Modal } from &#39;@agentero/design-system/modal&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-13-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-14-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-13-components-modal-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-14-components-modal-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5044,9 +5301,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-14-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-15-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-14-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-15-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -5076,10 +5333,10 @@ const [page, setPage] = useState(1);
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-14-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-15-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-14-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-15-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5234,9 +5491,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-15-components-popover-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-16-components-popover-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-15-components-popover-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-16-components-popover-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -5265,10 +5522,10 @@ import { Popover } from &#39;@agentero/design-system/popover&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-15-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-16-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-15-components-popover-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-16-components-popover-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5423,9 +5680,9 @@ useful when the visual anchor differs from the toggle button.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Progress</h2>
       <div class="badges">
-        <label for="c-16-components-progress-props" class="badge ok as-toggle">4 prop types</label>
+        <label for="c-17-components-progress-props" class="badge ok as-toggle">4 prop types</label>
         
-        <label for="c-16-components-progress-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-17-components-progress-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -5444,10 +5701,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-16-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-17-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-16-components-progress-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-17-components-progress-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5566,7 +5823,7 @@ percentage: number</code></pre>
       <div class="badges">
         
         
-        <label for="c-17-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-18-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -5583,7 +5840,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-17-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-18-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
   
@@ -5679,9 +5936,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-18-components-switch-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-19-components-switch-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-18-components-switch-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-19-components-switch-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -5697,10 +5954,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-18-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-19-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-18-components-switch-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-19-components-switch-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5881,9 +6138,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-19-components-table-props" class="badge ok as-toggle">6 prop types</label>
+        <label for="c-20-components-table-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-19-components-table-stories" class="badge ok as-toggle">9 stories</label>
+        <label for="c-20-components-table-stories" class="badge ok as-toggle">9 stories</label>
         
         
       </div>
@@ -5914,10 +6171,10 @@ import { Table } from &#39;@agentero/design-system/table&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-19-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-20-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-19-components-table-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-20-components-table-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -6112,9 +6369,9 @@ import { Fragment } from "react";</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
       <div class="badges">
-        <label for="c-20-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
+        <label for="c-21-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
         
-        <label for="c-20-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
+        <label for="c-21-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
         
         
       </div>
@@ -6145,10 +6402,10 @@ import { Tabs } from &#39;@agentero/design-system/tabs&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-20-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-21-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-20-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-21-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -6369,9 +6626,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-21-components-tag-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-22-components-tag-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-21-components-tag-stories" class="badge ok as-toggle">12 stories</label>
+        <label for="c-22-components-tag-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -6390,10 +6647,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-21-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-22-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-21-components-tag-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-22-components-tag-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -6818,9 +7075,9 @@ leading + trailing icons, and icon-only.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Toast</h2>
       <div class="badges">
-        <label for="c-22-components-toast-props" class="badge ok as-toggle">11 prop types</label>
+        <label for="c-23-components-toast-props" class="badge ok as-toggle">11 prop types</label>
         
-        <label for="c-22-components-toast-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-23-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
         
       </div>
@@ -6839,10 +7096,10 @@ common feedback patterns.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-22-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-23-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-22-components-toast-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-23-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7271,9 +7528,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-23-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
+        <label for="c-24-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
         
-        <label for="c-23-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-24-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -7292,10 +7549,10 @@ on hover or focus.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-23-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-24-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-23-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-24-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7467,9 +7724,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-24-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
+        <label for="c-25-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
         
-        <label for="c-24-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-25-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -7490,10 +7747,10 @@ your form validation; it does not own the input or block submission.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-24-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-25-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-24-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-25-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">