@agentero/design-system 0.24.3 → 0.24.5

package/mcp/manifests/components.html

@@ -250,6 +250,7 @@
       .tg-info:checked + label.as-toggle,
       .tg-stories:checked + label.as-toggle,
       .tg-docs:checked + label.as-toggle,
+      .tg-subcomponents:checked + label.as-toggle,
       .tg-content:checked + label.as-toggle,
       .tg-props:checked + label.as-toggle {
           box-shadow: 0 0 0 var(--active-ring) currentColor;
@@ -285,6 +286,11 @@
           gap: 8px;
       }
 
+      .tg-subcomponents:checked ~ .panels .panel-subcomponents {
+          display: grid;
+          gap: 8px;
+      }
+
       .tg-content:checked ~ .panels .panel-content {
           display: grid;
           gap: 8px;
@@ -507,6 +513,10 @@
           display: grid;
       }
 
+      .card > .tg-subcomponents:checked ~ .panels .panel-subcomponents {
+          display: grid;
+      }
+
       .card > .tg-content:checked ~ .panels .panel-content {
           display: grid;
       }
@@ -516,6 +526,7 @@
       .card > .tg-info:checked ~ .panels,
       .card > .tg-stories:checked ~ .panels,
       .card > .tg-docs:checked ~ .panels,
+      .card > .tg-subcomponents:checked ~ .panels,
       .card > .tg-content:checked ~ .panels,
       .card > .tg-props:checked ~ .panels {
           margin: 10px 0;
@@ -527,6 +538,7 @@
           .card:has(.tg-info:checked) label[for$='-info'],
           .card:has(.tg-stories:checked) label[for$='-stories'],
           .card:has(.tg-docs:checked) label[for$='-docs'],
+          .card:has(.tg-subcomponents:checked) label[for$='-subcomponents'],
           .card:has(.tg-content:checked) label[for$='-content'],
           .card:has(.tg-props:checked) label[for$='-props'] {
               box-shadow: 0 0 0 1px currentColor;
@@ -576,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><a class="filter-pill err" data-k="errors" href="#filter-errors">1/25 prop type error</a><a class="filter-pill info" data-k="infos" href="#filter-infos">1/25 info</a><span class="filter-pill ok" aria-disabled="true">192 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">25 components ok</span><span class="filter-pill ok" aria-disabled="true">192 stories ok</span></div>
   </div>
 </header>
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-docgen-typescript</code>. Generation took <strong>3.7s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>3.7s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -599,16 +611,29 @@
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Accordion.Root</h2>
       <div class="badges">
-        
+        <label for="c-0-components-accordion-props" class="badge ok as-toggle">10 prop types</label>
         
         <label for="c-0-components-accordion-stories" class="badge ok as-toggle">7 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/accordion/accordion.stories.tsx">components-accordion · ./src/accordion/accordion.stories.tsx</div>
-    
-    <div class="hint">Stacked, collapsible sections built on Radix UI&#39;s Accordion (keyboard nav and ARIA come for free). Compose `Root` with `Item`s, each holding a `Trigger` and `Content`. `type=&quot;single&quot;` (optionally `collapsible`) opens one at a time; `type=&quot;multiple&quot;` opens sections independently. `enclosed` renders the group as a bordered card.</div>
-    
+    <div>Root of a group of collapsible sections</div>
+    <div class="hint">Accordion is a compound built on Radix UI: `Root` holds the `Item`s, each
+with a `Trigger` and a `Content`. `type=&quot;single&quot;` (with optional
+`collapsible`) opens one section at a time; `type=&quot;multiple&quot;` opens them
+independently. `enclosed` renders the group as a bordered card.</div>
+    <div class="kv"><span class="chip">summary: Root of a group of collapsible sections</span><span class="chip">example: ```tsx
+import { Accordion } from &#39;@agentero/design-system/accordion&#39;;
+
+&lt;Accordion.Root type=&quot;single&quot; collapsible&gt;
+  &lt;Accordion.Item value=&quot;coverages&quot;&gt;
+    &lt;Accordion.Trigger&gt;Coverages&lt;/Accordion.Trigger&gt;
+    &lt;Accordion.Content&gt;…&lt;/Accordion.Content&gt;
+  &lt;/Accordion.Item&gt;
+&lt;/Accordion.Root&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -617,11 +642,63 @@
   <input id="c-0-components-accordion-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
+  <input id="c-0-components-accordion-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">10 prop types</span>
+            </div>
+            <pre><code>Component: src/accordion/index.ts::Accordion</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>asChild?: boolean
+
+/**
+ * Whether an accordion item can be collapsed after it has been opened.
+ */
+collapsible?: boolean = false
+
+/**
+ * The value of the item whose content is expanded when the accordion is initially rendered. Use
+ * `defaultValue` if you do not need to control the state of an accordion.
+ */
+defaultValue?: string | string[] | undefined
+
+/**
+ * The language read direction.
+ */
+dir?: &quot;ltr&quot; | &quot;rtl&quot;
+
+/**
+ * Whether or not an accordion is disabled from user interaction.
+ */
+disabled?: boolean = false
+
+enclosed?: boolean
+
+/**
+ * The callback that fires when the state of the accordion changes.
+ */
+onValueChange?: ((value: string) =&gt; void) | ((value: string[]) =&gt; void) | undefined
+
+/**
+ * The layout in which the Accordion operates.
+ */
+orientation?: &quot;horizontal&quot; | &quot;vertical&quot; = vertical
+
+type: &quot;single&quot; | &quot;multiple&quot;
+
+/**
+ * The controlled stateful value of the accordion item whose content is expanded.
+ */
+value?: string | string[] | undefined</code></pre>
+          </div>
+        </div>
     
         <div class="panel panel-stories">
           
@@ -740,6 +817,7 @@
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -758,12 +836,32 @@
         
         <label for="c-1-components-alert-stories" class="badge ok as-toggle">23 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/alert/alert.stories.tsx">components-alert · ./src/alert/alert.stories.tsx</div>
-    
-    <div class="hint">Alert surfaces feedback about outcomes or state changes — success, danger, warning, or info. Compose it from `Alert.Content`, `Alert.Title`, `Alert.Paragraph`, `Alert.Actions`, and `Alert.Button` to build the layout your flow needs. Eight colors, two sizes, and a ghost mode cover most feedback scenarios.</div>
-    
+    <div>Feedback banner with color variants, optional icon, and dismiss</div>
+    <div class="hint">Alert surfaces feedback about outcomes or state changes — success, danger,
+warning, or info. Compose it from `Alert.Content`, `Alert.Title`,
+`Alert.Paragraph`, `Alert.Actions`, and `Alert.Button` to build the layout
+your flow needs. Eight colors, two sizes, and a ghost mode cover most
+feedback scenarios.</div>
+    <div class="kv"><span class="chip">summary: Feedback banner with color variants, optional icon, and dismiss</span><span class="chip">example: &lt;Alert color=&quot;success&quot; size=&quot;sm&quot;&gt;
+  &lt;Alert.Content&gt;
+    &lt;Alert.Title&gt;Policy saved&lt;/Alert.Title&gt;
+    &lt;Alert.Paragraph&gt;Your changes are live.&lt;/Alert.Paragraph&gt;
+  &lt;/Alert.Content&gt;
+&lt;/Alert&gt;</span><span class="chip">example: &lt;Alert color=&quot;warning&quot; onDismiss={() =&gt; setOpen(false)}&gt;
+  &lt;Alert.Content&gt;
+    &lt;Alert.Title&gt;Session expiring&lt;/Alert.Title&gt;
+    &lt;Alert.Paragraph&gt;Renew to continue editing.&lt;/Alert.Paragraph&gt;
+  &lt;/Alert.Content&gt;
+  &lt;Alert.Actions&gt;
+    &lt;Alert.Button onClick={renew}&gt;Renew session&lt;/Alert.Button&gt;
+  &lt;/Alert.Actions&gt;
+&lt;/Alert&gt;</span><span class="chip">example: &lt;Alert color=&quot;danger&quot; ghost&gt;
+  &lt;Alert.Paragraph&gt;This field is required.&lt;/Alert.Paragraph&gt;
+&lt;/Alert&gt;</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -771,6 +869,7 @@
   
   <input id="c-1-components-alert-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-1-components-alert-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -780,7 +879,7 @@
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
               <span class="badge ok">6 prop types</span>
             </div>
             <pre><code>Component: src/alert/alert.tsx::Alert</code></pre>
@@ -794,7 +893,7 @@
  * - `info` — informational highlight.
  * - `creative`, `dynamic`, `playful` — brand-aligned accents.
  */
-color?: &quot;neutral&quot; | &quot;success&quot; | &quot;danger&quot; | &quot;warning&quot; | &quot;info&quot; | &quot;creative&quot; | &quot;dynamic&quot; | &quot;playful&quot; = neutral
+color?: &quot;neutral&quot; | &quot;success&quot; | &quot;danger&quot; | &quot;warning&quot; | &quot;info&quot; | &quot;creative&quot; | &quot;dynamic&quot; | &quot;playful&quot; = &#39;neutral&#39;
 
 /**
  * When `true`, removes background and padding so the alert blends inline
@@ -811,19 +910,19 @@ hasIcon?: boolean = true
 /**
  * Overrides the default icon for the current `color`. Receives the slot-computed className so color tokens still apply.
  */
-icon?: ComponentType&lt;SVGProps&lt;SVGSVGElement&gt;&gt;
+icon?: ComponentType&lt;SVGProps&lt;SVGSVGElement&gt;&gt; | undefined
 
 /**
  * Fires when the dismiss button is clicked. When provided, renders an `iconOnly` close button with `aria-label=&quot;Dismiss&quot;`.
  */
-onDismiss?: (() =&gt; void)
+onDismiss?: () =&gt; void
 
 /**
  * Size treatment. Defaults to `&#39;sm&#39;`.
  * - `sm` — compact inline alerts (1rem padding, 14/12px typography).
  * - `md` — prominent standalone alerts (2rem padding, 18/14px typography).
  */
-size?: AlertSizeType = sm</code></pre>
+size?: &quot;sm&quot; | &quot;md&quot; = &#39;sm&#39;</code></pre>
           </div>
         </div>
     
@@ -845,7 +944,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Default args playground for Alert</div>
-              <div class="hint">Args-controlled playground. Toggle `color`, `size`, `ghost`, `hasIcon`, and `onDismiss` from the Controls panel to explore every visual combination.</div>
+              <div class="hint">Args-controlled playground. Toggle `color`, `size`, `ghost`, `hasIcon`, and
+`onDismiss` from the Controls panel to explore every visual combination.</div>
               <pre><code>const Default = () =&gt; &lt;Alert
     color=&quot;neutral&quot;
     size=&quot;sm&quot;
@@ -864,7 +964,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Neutral color (default)</div>
-              <div class="hint">Neutral color is the default and carries no strong semantic signal — use it for generic inline information.</div>
+              <div class="hint">Neutral color is the default and carries no strong semantic signal — use it
+for generic inline information.</div>
               <pre><code>const Neutral = () =&gt; &lt;Alert
     color=&quot;neutral&quot;
     size=&quot;sm&quot;
@@ -883,7 +984,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Success color for positive outcomes</div>
-              <div class="hint">Success color confirms a positive outcome — saved record, completed task, healthy state.</div>
+              <div class="hint">Success color confirms a positive outcome — saved record, completed task,
+healthy state.</div>
               <pre><code>const Success = () =&gt; &lt;Alert
     color=&quot;success&quot;
     size=&quot;sm&quot;
@@ -902,7 +1004,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Danger color for errors and destructive outcomes</div>
-              <div class="hint">Danger color flags errors and destructive outcomes that require the user&#39;s attention.</div>
+              <div class="hint">Danger color flags errors and destructive outcomes that require the user&#39;s
+attention.</div>
               <pre><code>const Danger = () =&gt; &lt;Alert
     color=&quot;danger&quot;
     size=&quot;sm&quot;
@@ -959,7 +1062,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Creative brand accent color</div>
-              <div class="hint">Creative color uses a brand-aligned purple accent for marketing or onboarding moments.</div>
+              <div class="hint">Creative color uses a brand-aligned purple accent for marketing or
+onboarding moments.</div>
               <pre><code>const Creative = () =&gt; &lt;Alert
     color=&quot;creative&quot;
     size=&quot;sm&quot;
@@ -978,7 +1082,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Dynamic brand accent color</div>
-              <div class="hint">Dynamic color uses a brand-aligned orange accent for activity or momentum-focused content.</div>
+              <div class="hint">Dynamic color uses a brand-aligned orange accent for activity or
+momentum-focused content.</div>
               <pre><code>const Dynamic = () =&gt; &lt;Alert
     color=&quot;dynamic&quot;
     size=&quot;sm&quot;
@@ -997,7 +1102,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Playful brand accent color</div>
-              <div class="hint">Playful color uses a brand-aligned pink accent for lighter or celebratory content.</div>
+              <div class="hint">Playful color uses a brand-aligned pink accent for lighter or celebratory
+content.</div>
               <pre><code>const Playful = () =&gt; &lt;Alert
     color=&quot;playful&quot;
     size=&quot;sm&quot;
@@ -1016,7 +1122,9 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Ghost mode for inline, low-emphasis alerts</div>
-              <div class="hint">Ghost mode removes the background and padding so the alert blends inline with surrounding text (e.g., form field errors). Colors switch to the ghost token ramp for lower visual weight.</div>
+              <div class="hint">Ghost mode removes the background and padding so the alert blends inline
+with surrounding text (e.g., form field errors). Colors switch to the ghost
+token ramp for lower visual weight.</div>
               <pre><code>const Ghost = () =&gt; &lt;Alert
     color=&quot;danger&quot;
     size=&quot;sm&quot;
@@ -1035,7 +1143,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Small size (default, compact)</div>
-              <div class="hint">Small size (default) uses compact padding and 14/12px typography — suitable for inline alerts inside forms, tables, or cards.</div>
+              <div class="hint">Small size (default) uses compact padding and 14/12px typography — suitable
+for inline alerts inside forms, tables, or cards.</div>
               <pre><code>const SmallSize = () =&gt; &lt;Alert
     color=&quot;neutral&quot;
     size=&quot;sm&quot;
@@ -1054,7 +1163,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Medium size (prominent, standalone)</div>
-              <div class="hint">Medium size uses larger padding and 18/14px typography — suitable for standalone alerts in empty states, modals, or dedicated feedback regions.</div>
+              <div class="hint">Medium size uses larger padding and 18/14px typography — suitable for
+standalone alerts in empty states, modals, or dedicated feedback regions.</div>
               <pre><code>const MediumSize = () =&gt; &lt;Alert
     color=&quot;neutral&quot;
     size=&quot;md&quot;
@@ -1073,7 +1183,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Alert with a dismiss button</div>
-              <div class="hint">Dismissible alert. Providing `onDismiss` shows an icon-only close button with `aria-label=&quot;Dismiss&quot;` that inherits the alert&#39;s color.</div>
+              <div class="hint">Dismissible alert. Providing `onDismiss` shows an icon-only close button
+with `aria-label=&quot;Dismiss&quot;` that inherits the alert&#39;s color.</div>
               <pre><code>const WithDismiss = () =&gt; &lt;Alert color=&quot;warning&quot; size=&quot;sm&quot; ghost={false} hasIcon onDismiss={fn()}&gt;
     &lt;Alert.Content&gt;
         &lt;Alert.Title&gt;Title&lt;/Alert.Title&gt;
@@ -1087,7 +1198,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Alert with a trailing action button</div>
-              <div class="hint">Alert with a trailing action pinned to the right edge. Use `Alert.Actions` + `Alert.Button` for the common &quot;message + action&quot; pattern.</div>
+              <div class="hint">Alert with a trailing action pinned to the right edge. Use `Alert.Actions`
++ `Alert.Button` for the common &quot;message + action&quot; pattern.</div>
               <pre><code>const WithActions = () =&gt; &lt;Alert
     color=&quot;info&quot;
     size=&quot;sm&quot;
@@ -1109,7 +1221,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Alert with both dismiss and action</div>
-              <div class="hint">Alert combining a dismiss button with a trailing action. Dismiss is pinned to the right edge after the actions.</div>
+              <div class="hint">Alert combining a dismiss button with a trailing action. Dismiss is pinned
+to the right edge after the actions.</div>
               <pre><code>const WithDismissAndAction = () =&gt; &lt;Alert
     color=&quot;warning&quot;
     size=&quot;md&quot;
@@ -1131,7 +1244,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Alert without the default icon</div>
-              <div class="hint">Alert rendered without the built-in color icon. Use `hasIcon={false}` when the surrounding context already conveys the semantic intent.</div>
+              <div class="hint">Alert rendered without the built-in color icon. Use `hasIcon={false}` when
+the surrounding context already conveys the semantic intent.</div>
               <pre><code>const WithoutIcon = () =&gt; &lt;Alert
     color=&quot;info&quot;
     size=&quot;sm&quot;
@@ -1150,7 +1264,9 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Alert with a custom icon override</div>
-              <div class="hint">Alert with a caller-supplied icon that replaces the default color icon. The custom icon receives the slot-computed className so color tokens still apply.</div>
+              <div class="hint">Alert with a caller-supplied icon that replaces the default color icon. The
+custom icon receives the slot-computed className so color tokens still
+apply.</div>
               <pre><code>const WithCustomIcon = () =&gt; &lt;Alert
     color=&quot;creative&quot;
     size=&quot;sm&quot;
@@ -1170,7 +1286,9 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Alert paragraph rendered from HTML</div>
-              <div class="hint">Alert rendering a paragraph from pre-sanitized HTML via `Alert.ParagraphHtml`. The caller is responsible for sanitizing the HTML string before passing it in.</div>
+              <div class="hint">Alert rendering a paragraph from pre-sanitized HTML via
+`Alert.ParagraphHtml`. The caller is responsible for sanitizing the HTML
+string before passing it in.</div>
               <pre><code>const WithParagraphHtml = () =&gt; &lt;Alert
     color=&quot;success&quot;
     size=&quot;sm&quot;
@@ -1190,7 +1308,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Alert with a pictogram illustration</div>
-              <div class="hint">Alert with a 64×64 pictogram in place of the inline icon. Use `Alert.Pictograms` when the message benefits from a richer illustration.</div>
+              <div class="hint">Alert with a 64×64 pictogram in place of the inline icon. Use
+`Alert.Pictograms` when the message benefits from a richer illustration.</div>
               <pre><code>const WithPictograms = () =&gt; &lt;Alert
     color=&quot;info&quot;
     size=&quot;md&quot;
@@ -1216,7 +1335,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Alert with only a paragraph body</div>
-              <div class="hint">Alert rendered with only a paragraph — no title. The root omits `aria-labelledby` since there is no title to reference.</div>
+              <div class="hint">Alert rendered with only a paragraph — no title. The root omits
+`aria-labelledby` since there is no title to reference.</div>
               <pre><code>const OnlyParagraph = () =&gt; &lt;Alert
     color=&quot;neutral&quot;
     size=&quot;sm&quot;
@@ -1232,7 +1352,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Alert with actions placed below the content</div>
-              <div class="hint">Action button rendered inline below the paragraphs, inside `Alert.Content`, rather than pinned to the right via `Alert.Actions`.</div>
+              <div class="hint">Action button rendered inline below the paragraphs, inside
+`Alert.Content`, rather than pinned to the right via `Alert.Actions`.</div>
               <pre><code>const WithActionsBelow = () =&gt; &lt;Alert
     color=&quot;success&quot;
     size=&quot;sm&quot;
@@ -1254,7 +1375,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Visual comparison of all Alert colors</div>
-              <div class="hint">All eight colors in their primary (non-ghost) treatment, stacked for comparison. Each alert uses the built-in icon mapping for its color.</div>
+              <div class="hint">All eight colors in their primary (non-ghost) treatment, stacked for
+comparison. Each alert uses the built-in icon mapping for its color.</div>
               <pre><code>const AllColors = () =&gt; (
     &lt;Stack&gt;
         {COLORS.map(color =&gt; (
@@ -1276,7 +1398,8 @@ size?: AlertSizeType = sm</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Visual comparison of all Alert colors in ghost mode</div>
-              <div class="hint">All eight colors in ghost mode, stacked for comparison. Ghost alerts use a lower-weight token ramp and omit background + padding.</div>
+              <div class="hint">All eight colors in ghost mode, stacked for comparison. Ghost alerts use a
+lower-weight token ramp and omit background + padding.</div>
               <pre><code>const AllGhostColors = () =&gt; (
     &lt;Stack&gt;
         {COLORS.map(color =&gt; (
@@ -1294,6 +1417,7 @@ size?: AlertSizeType = sm</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -1312,12 +1436,17 @@ size?: AlertSizeType = sm</code></pre>
         
         <label for="c-2-components-avatar-stories" class="badge ok as-toggle">22 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/avatar/avatar.stories.tsx">components-avatar · ./src/avatar/avatar.stories.tsx</div>
-    
-    <div class="hint">Avatar displays a user&#39;s profile image, initials, or a fallback icon. Use for user identification in lists, headers, cards, and comment threads. Supports multiple shapes (`circle`, `square`, `pillow`, `pentagon`), content types (`photo`, `initials`, `isotype`), and sizes from `xs` (24px) to `4xl` (128px).</div>
-    
+    <div>Displays a user&#39;s profile image, initials, or fallback icon</div>
+    <div class="hint">Avatar displays a user&#39;s profile image, initials, or a fallback icon.
+Use for user identification in lists, headers, cards, and comment threads.
+Supports multiple shapes (`circle`, `square`, `pillow`, `pentagon`),
+content types (`photo`, `initials`, `isotype`), and sizes from `xs` (24px)
+to `4xl` (128px).</div>
+    <div class="kv"><span class="chip">summary: Displays a user&#39;s profile image, initials, or fallback icon</span><span class="chip">example: &lt;Avatar src=&quot;/photos/jane.jpg&quot; alt=&quot;Jane Doe&quot; size=&quot;md&quot; variant=&quot;circle&quot; /&gt;</span><span class="chip">example: &lt;Avatar fallback=&quot;JD&quot; size=&quot;lg&quot; variant=&quot;square&quot; /&gt;</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -1325,6 +1454,7 @@ size?: AlertSizeType = sm</code></pre>
   
   <input id="c-2-components-avatar-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-2-components-avatar-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -1334,7 +1464,7 @@ size?: AlertSizeType = sm</code></pre>
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
               <span class="badge ok">8 prop types</span>
             </div>
             <pre><code>Component: src/avatar/avatar.tsx::Avatar</code></pre>
@@ -1412,7 +1542,8 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Default avatar with fallback initials</div>
-              <div class="hint">The default avatar with fallback initials. Renders as a medium circle when no image source is provided.</div>
+              <div class="hint">The default avatar with fallback initials. Renders as a medium circle
+when no image source is provided.</div>
               <pre><code>const Default = () =&gt; &lt;Avatar fallback=&quot;JD&quot; size=&quot;md&quot; variant=&quot;circle&quot; type=&quot;photo&quot; /&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -1421,7 +1552,8 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Avatar with a profile image</div>
-              <div class="hint">Avatar displaying a user profile photo. The image fills the avatar shape and the fallback is hidden while the image loads successfully.</div>
+              <div class="hint">Avatar displaying a user profile photo. The image fills the avatar shape
+and the fallback is hidden while the image loads successfully.</div>
               <pre><code>const WithImage = () =&gt; &lt;Avatar
     fallback=&quot;JD&quot;
     size=&quot;md&quot;
@@ -1436,7 +1568,8 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Fallback content shown when image is unavailable</div>
-              <div class="hint">When the image fails to load, the fallback content is displayed. Pass initials, an icon, or any ReactNode as the `fallback` prop.</div>
+              <div class="hint">When the image fails to load, the fallback content is displayed.
+Pass initials, an icon, or any ReactNode as the `fallback` prop.</div>
               <pre><code>const WithFallbackInitials = () =&gt; &lt;Avatar
     fallback=&quot;AM&quot;
     size=&quot;md&quot;
@@ -1459,7 +1592,8 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Square-shaped avatar for workspaces</div>
-              <div class="hint">The square variant uses a rounded rectangle, suitable for workspace, team, or organization icons.</div>
+              <div class="hint">The square variant uses a rounded rectangle, suitable for workspace,
+team, or organization icons.</div>
               <pre><code>const Square = () =&gt; &lt;Avatar fallback=&quot;WS&quot; size=&quot;md&quot; variant=&quot;square&quot; type=&quot;photo&quot; /&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -1468,7 +1602,8 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Pillow-shaped avatar with organic squircle</div>
-              <div class="hint">The pillow variant uses a soft, organic squircle shape for a friendly and distinctive appearance.</div>
+              <div class="hint">The pillow variant uses a soft, organic squircle shape for a
+friendly and distinctive appearance.</div>
               <pre><code>const Pillow = () =&gt; &lt;Avatar fallback=&quot;PL&quot; size=&quot;md&quot; variant=&quot;pillow&quot; type=&quot;photo&quot; /&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -1477,7 +1612,8 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Pentagon-shaped avatar for unique identity</div>
-              <div class="hint">The pentagon variant uses a five-sided mask for a unique visual identity. Note: the border is hidden in this variant due to the mask shape.</div>
+              <div class="hint">The pentagon variant uses a five-sided mask for a unique visual identity.
+Note: the border is hidden in this variant due to the mask shape.</div>
               <pre><code>const Pentagon = () =&gt; &lt;Avatar fallback=&quot;PT&quot; size=&quot;md&quot; variant=&quot;pentagon&quot; type=&quot;photo&quot; /&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -1486,7 +1622,8 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Photo type fills the avatar shape edge-to-edge</div>
-              <div class="hint">The `photo` type is the default. The image fills the avatar shape edge-to-edge, which is ideal for user profile photographs.</div>
+              <div class="hint">The `photo` type is the default. The image fills the avatar shape edge-to-edge,
+which is ideal for user profile photographs.</div>
               <pre><code>const TypePhoto = () =&gt; &lt;Avatar
     fallback=&quot;AM&quot;
     size=&quot;md&quot;
@@ -1501,7 +1638,9 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Initials type for users without a profile photo</div>
-              <div class="hint">The `initials` type is intended when no image is available and the avatar stands in for a user with their initials. The fallback text is centered within the avatar shape.</div>
+              <div class="hint">The `initials` type is intended when no image is available and the avatar
+stands in for a user with their initials. The fallback text is centered
+within the avatar shape.</div>
               <pre><code>const TypeInitials = () =&gt; &lt;Avatar fallback=&quot;JD&quot; size=&quot;md&quot; variant=&quot;circle&quot; type=&quot;initials&quot; /&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -1510,7 +1649,10 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Isotype type centers a brand icon inside the shape</div>
-              <div class="hint">The `isotype` type renders the image smaller than the avatar shape so a brand or organization icon sits centered inside the container rather than filling it. Use for workspace, team, or company avatars where a logo should remain legible inside the bounding shape.</div>
+              <div class="hint">The `isotype` type renders the image smaller than the avatar shape so a
+brand or organization icon sits centered inside the container rather than
+filling it. Use for workspace, team, or company avatars where a logo
+should remain legible inside the bounding shape.</div>
               <pre><code>const TypeIsotype = () =&gt; &lt;Avatar
     fallback=&quot;FG&quot;
     size=&quot;md&quot;
@@ -1525,7 +1667,8 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Visual comparison of all avatar content types</div>
-              <div class="hint">All content types shown side by side: `photo` fills the shape, `initials` centers text, and `isotype` shrinks a brand icon inside the bounding shape.</div>
+              <div class="hint">All content types shown side by side: `photo` fills the shape, `initials`
+centers text, and `isotype` shrinks a brand icon inside the bounding shape.</div>
               <pre><code>const AllTypes = () =&gt; (
     &lt;div style={{ display: &#39;flex&#39;, alignItems: &#39;center&#39;, gap: &#39;1rem&#39; }}&gt;
         &lt;Avatar
@@ -1553,7 +1696,9 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Isotype scaling across all avatar sizes</div>
-              <div class="hint">The isotype icon scales proportionally smaller than the avatar shape at every size, keeping a consistent inset around the logo from `xs` (24px) to `4xl` (128px).</div>
+              <div class="hint">The isotype icon scales proportionally smaller than the avatar shape at
+every size, keeping a consistent inset around the logo from `xs` (24px)
+to `4xl` (128px).</div>
               <pre><code>const AllSizesIsotype = () =&gt; (
     &lt;div style={{ display: &#39;flex&#39;, alignItems: &#39;center&#39;, gap: &#39;1rem&#39; }}&gt;
         {([&#39;xs&#39;, &#39;sm&#39;, &#39;md&#39;, &#39;lg&#39;, &#39;xl&#39;, &#39;2xl&#39;, &#39;3xl&#39;, &#39;4xl&#39;] as const).map(size =&gt; (
@@ -1612,7 +1757,9 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Colorized avatar based on user name</div>
-              <div class="hint">The `colorize` prop deterministically maps a string (typically a user name) to a color from the palette, applying a tinted background and matching text color. Useful for distinguishing users in lists without profile photos.</div>
+              <div class="hint">The `colorize` prop deterministically maps a string (typically a user name)
+to a color from the palette, applying a tinted background and matching
+text color. Useful for distinguishing users in lists without profile photos.</div>
               <pre><code>const Colorized = () =&gt; &lt;Avatar fallback=&quot;JD&quot; size=&quot;md&quot; variant=&quot;circle&quot; type=&quot;photo&quot; colorize=&quot;jane doe&quot; /&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -1621,7 +1768,8 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Multiple colorized avatars for visual distinction</div>
-              <div class="hint">Multiple colorized avatars showing how different names map to different colors from the palette for visual distinction.</div>
+              <div class="hint">Multiple colorized avatars showing how different names map to different
+colors from the palette for visual distinction.</div>
               <pre><code>const AllColorized = () =&gt; (
     &lt;div style={{ display: &#39;flex&#39;, alignItems: &#39;center&#39;, gap: &#39;1rem&#39; }}&gt;
         {[&#39;alice&#39;, &#39;bob&#39;, &#39;carol&#39;, &#39;dave&#39;, &#39;eve&#39;, &#39;frank&#39;, &#39;grace&#39;, &#39;henry&#39;, &#39;iris&#39;].map(name =&gt; (
@@ -1636,7 +1784,8 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Visual comparison of all avatar sizes</div>
-              <div class="hint">All available sizes displayed together for visual comparison. Sizes range from `xs` (24px) to `4xl` (128px).</div>
+              <div class="hint">All available sizes displayed together for visual comparison.
+Sizes range from `xs` (24px) to `4xl` (128px).</div>
               <pre><code>const AllSizes = () =&gt; (
     &lt;div style={{ display: &#39;flex&#39;, alignItems: &#39;center&#39;, gap: &#39;1rem&#39; }}&gt;
         {([&#39;xs&#39;, &#39;sm&#39;, &#39;md&#39;, &#39;lg&#39;, &#39;xl&#39;, &#39;2xl&#39;, &#39;3xl&#39;, &#39;4xl&#39;] as const).map(size =&gt; (
@@ -1651,7 +1800,8 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>All avatar sizes with a profile image</div>
-              <div class="hint">All sizes with a profile image to verify image scaling and quality across the full size range from `xs` (24px) to `4xl` (128px).</div>
+              <div class="hint">All sizes with a profile image to verify image scaling and quality
+across the full size range from `xs` (24px) to `4xl` (128px).</div>
               <pre><code>const AllSizesWithImage = () =&gt; (
     &lt;div style={{ display: &#39;flex&#39;, alignItems: &#39;center&#39;, gap: &#39;1rem&#39; }}&gt;
         {([&#39;xs&#39;, &#39;sm&#39;, &#39;md&#39;, &#39;lg&#39;, &#39;xl&#39;, &#39;2xl&#39;, &#39;3xl&#39;, &#39;4xl&#39;] as const).map(size =&gt; (
@@ -1672,7 +1822,9 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>Visual comparison of all avatar shapes</div>
-              <div class="hint">All available shape variants displayed together for visual comparison. Each variant serves a different use case: user photos, workspaces, friendly branding, and unique identity.</div>
+              <div class="hint">All available shape variants displayed together for visual comparison.
+Each variant serves a different use case: user photos, workspaces,
+friendly branding, and unique identity.</div>
               <pre><code>const AllVariants = () =&gt; (
     &lt;div style={{ display: &#39;flex&#39;, alignItems: &#39;center&#39;, gap: &#39;1rem&#39; }}&gt;
         {([&#39;circle&#39;, &#39;square&#39;, &#39;pillow&#39;, &#39;pentagon&#39;] as const).map(variant =&gt; (
@@ -1692,7 +1844,9 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <span class="badge ok">story ok</span>
               </div>
               <div>All avatar shapes with a profile image</div>
-              <div class="hint">All shape variants with a profile image to show how each mask clips the photo. Particularly useful for verifying the pentagon mask and pillow shape render correctly with real imagery.</div>
+              <div class="hint">All shape variants with a profile image to show how each mask clips
+the photo. Particularly useful for verifying the pentagon mask and
+pillow shape render correctly with real imagery.</div>
               <pre><code>const AllVariantsWithImage = () =&gt; (
     &lt;div style={{ display: &#39;flex&#39;, alignItems: &#39;center&#39;, gap: &#39;1rem&#39; }}&gt;
         {([&#39;circle&#39;, &#39;square&#39;, &#39;pillow&#39;, &#39;pentagon&#39;] as const).map(variant =&gt; (
@@ -1710,6 +1864,7 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -1724,16 +1879,24 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> AvatarGroup</h2>
       <div class="badges">
-        <label for="c-3-components-avatargroup-props" class="badge ok as-toggle">3 prop types</label>
+        <label for="c-3-components-avatargroup-props" class="badge ok as-toggle">4 prop types</label>
         
         <label for="c-3-components-avatargroup-stories" class="badge ok as-toggle">4 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/avatar-group/avatar-group.stories.tsx">components-avatargroup · ./src/avatar-group/avatar-group.stories.tsx</div>
-    
-    <div class="hint">AvatarGroup stacks `&lt;Avatar&gt;` children into an overlapping row and collapses everything past `max` into a trailing `+N` bubble. The group owns the layout: it forces a uniform `size` (and `variant`, when set) and rings each avatar in the surface color so they read as separate.</div>
-    
+    <div>Overlapping row of avatars, collapsing the rest into `+N`</div>
+    <div class="hint">AvatarGroup stacks `&lt;Avatar&gt;` children into an overlapping row and collapses
+everything past `max` into a trailing `+N` bubble. The group owns the layout:
+it forces a uniform `size` (and `variant`, when set) and rings each avatar in
+the surface color so they read as separate.</div>
+    <div class="kv"><span class="chip">summary: Overlapping row of avatars, collapsing the rest into `+N`</span><span class="chip">example: &lt;AvatarGroup size=&quot;sm&quot; max={3}&gt;
+	&lt;Avatar fallback=&quot;AL&quot; colorize=&quot;Ada Lovelace&quot; /&gt;
+	&lt;Avatar fallback=&quot;GH&quot; colorize=&quot;Grace Hopper&quot; /&gt;
+	&lt;Avatar fallback=&quot;MK&quot; colorize=&quot;Mary Kom&quot; /&gt;
+&lt;/AvatarGroup&gt;</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -1741,6 +1904,7 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
   
   <input id="c-3-components-avatargroup-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-3-components-avatargroup-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -1750,14 +1914,16 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
-              <span class="badge ok">3 prop types</span>
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
+              <span class="badge ok">4 prop types</span>
             </div>
             <pre><code>Component: src/avatar-group/avatar-group.tsx::AvatarGroup</code></pre>
             <pre><code>Props:</code></pre>
-            <pre><code>max?: number = 3
+            <pre><code>children?: ReactNode
+
+max?: number = 3
 
-size?: &quot;sm&quot; | &quot;md&quot; | &quot;xs&quot; | &quot;lg&quot; | &quot;xl&quot; | &quot;2xl&quot; | &quot;3xl&quot; | &quot;4xl&quot; = md
+size?: &quot;sm&quot; | &quot;md&quot; | &quot;xs&quot; | &quot;lg&quot; | &quot;xl&quot; | &quot;2xl&quot; | &quot;3xl&quot; | &quot;4xl&quot; = &#39;md&#39;
 
 /**
  * Shape applied uniformly to every avatar and the `+N` bubble. Defaults to `circle`.
@@ -1838,6 +2004,7 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -1856,12 +2023,26 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
         
         <label for="c-4-components-button-stories" class="badge ok as-toggle">11 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/button/button.stories.tsx">components-button · ./src/button/button.stories.tsx</div>
-    
-    <div class="hint">Button is the design system&#39;s primary actionable control. Pick `variant` to express hierarchy, `size` for prominence, and `status=&quot;danger&quot;` for destructive actions. Pass `asChild` to render Button&#39;s styles on any nested element — a plain `&lt;a&gt;`, a framework `&lt;Link&gt;`, or a custom component — without Button binding to any particular framework.</div>
-    
+    <div>Primary actionable control; renders a `&lt;button&gt;` or, with `asChild`, any nested element</div>
+    <div class="hint">Button is the design system&#39;s primary actionable control. Pick `variant` to
+express hierarchy, `size` for prominence, and `status=&quot;danger&quot;` for
+destructive actions. Pass `asChild` to render Button&#39;s styles on any nested
+element — a plain `&lt;a&gt;`, a framework `&lt;Link&gt;`, or a custom component —
+without Button binding to any particular framework.</div>
+    <div class="kv"><span class="chip">summary: Primary actionable control; renders a `&lt;button&gt;` or, with `asChild`, any nested element</span><span class="chip">example: &lt;Button variant=&quot;primary&quot; size=&quot;sm&quot; onClick={handleSave}&gt;
+  Save changes
+&lt;/Button&gt;</span><span class="chip">example: &lt;Button asChild variant=&quot;secondary&quot;&gt;
+  &lt;a href=&quot;https://agentero.com&quot; target=&quot;_blank&quot; rel=&quot;noreferrer&quot;&gt;Visit Agentero&lt;/a&gt;
+&lt;/Button&gt;</span><span class="chip">example: // Framework-agnostic: wrap any Link implementation
+&lt;Button asChild variant=&quot;primary&quot;&gt;
+  &lt;Link href=&quot;/dashboard&quot;&gt;Go to dashboard&lt;/Link&gt;
+&lt;/Button&gt;</span><span class="chip">example: &lt;Button variant=&quot;primary&quot; status=&quot;danger&quot; loading={isDeleting} onClick={handleDelete}&gt;
+  Delete account
+&lt;/Button&gt;</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -1869,6 +2050,7 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
   
   <input id="c-4-components-button-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-4-components-button-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -1878,7 +2060,7 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
               <span class="badge ok">12 prop types</span>
             </div>
             <pre><code>Component: src/button/button.tsx::Button</code></pre>
@@ -1949,7 +2131,7 @@ loading?: boolean
  * `&lt;button&gt;` and `&lt;a&gt;` because `asChild` lets consumers render either tag
  * (or any forwardRef component) through Radix&#39;s `Slot`.
  */
-ref?: Ref&lt;HTMLButtonElement | HTMLAnchorElement&gt;
+ref?: Ref&lt;HTMLButtonElement | HTMLAnchorElement&gt; | undefined
 
 /**
  * When `true`, renders a fully pill-shaped button (rounded-full). Otherwise
@@ -1964,7 +2146,7 @@ rounded?: boolean
  * - `md` (40px) — prominent actions in modals or feature rows.
  * - `lg` (48px) — hero CTAs and full-width mobile actions.
  */
-size?: ButtonSizeType
+size?: &quot;sm&quot; | &quot;md&quot; | &quot;xs&quot; | &quot;lg&quot;
 
 /**
  * Semantic status override. Set to `&#39;danger&#39;` for destructive actions
@@ -1981,7 +2163,7 @@ status?: &quot;danger&quot;
  * - `ghost` — minimal background; low-emphasis action in dense layouts.
  * - `link` — inline text-style action; no padding or background.
  */
-variant?: ButtonVariantType</code></pre>
+variant?: &quot;link&quot; | &quot;ghost&quot; | &quot;primary&quot; | &quot;secondary&quot; | &quot;tertiary&quot;</code></pre>
           </div>
         </div>
     
@@ -2003,7 +2185,9 @@ variant?: ButtonVariantType</code></pre>
                 <span class="badge ok">story ok</span>
               </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>
+              <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>
               <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">
@@ -2012,7 +2196,10 @@ variant?: ButtonVariantType</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>All Button variants at default size</div>
-              <div class="hint">All five variants at the default `sm` size. Variants express visual hierarchy: `primary` for the main CTA, `secondary` / `tertiary` for supporting actions, `ghost` for low-emphasis inline actions, and `link` for text-only actions.</div>
+              <div class="hint">All five variants at the default `sm` size. Variants express visual
+hierarchy: `primary` for the main CTA, `secondary` / `tertiary` for
+supporting actions, `ghost` for low-emphasis inline actions, and `link`
+for text-only actions.</div>
               <pre><code>const Variants = () =&gt; (
     &lt;Row&gt;
         {VARIANTS.map(variant =&gt; (
@@ -2029,7 +2216,8 @@ variant?: ButtonVariantType</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>All Button sizes at default variant</div>
-              <div class="hint">All four sizes at the default `primary` variant. Sizes scale from `xs` (24px) for dense toolbars up to `lg` (48px) for hero CTAs.</div>
+              <div class="hint">All four sizes at the default `primary` variant. Sizes scale from `xs`
+(24px) for dense toolbars up to `lg` (48px) for hero CTAs.</div>
               <pre><code>const Sizes = () =&gt; (
     &lt;Row&gt;
         {SIZES.map(size =&gt; (
@@ -2046,7 +2234,10 @@ variant?: ButtonVariantType</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Disabled treatment for every variant</div>
-              <div class="hint">Disabled state across all variants. Rendered via `asChild` with `&lt;a&gt;` children to show the disabled treatment applied via className — native anchors ignore the `disabled` attribute, so Button emits `aria-disabled` and `data-disabled` on the child instead.</div>
+              <div class="hint">Disabled state across all variants. Rendered via `asChild` with `&lt;a&gt;`
+children to show the disabled treatment applied via className — native
+anchors ignore the `disabled` attribute, so Button emits `aria-disabled`
+and `data-disabled` on the child instead.</div>
               <pre><code>const Disabled = () =&gt; (
     &lt;Row&gt;
         {VARIANTS.map(variant =&gt; (
@@ -2086,7 +2277,9 @@ variant?: ButtonVariantType</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Icon-only Button across variant × size (excluding `link`)</div>
-              <div class="hint">Icon-only buttons across the variant × size grid. Excludes `variant=&quot;link&quot;` — combining `link` with icon-only children logs a dev-only warning because the link treatment has no padding to accommodate an icon alone.</div>
+              <div class="hint">Icon-only buttons across the variant × size grid. Excludes `variant=&quot;link&quot;`
+— combining `link` with icon-only children logs a dev-only warning because
+the link treatment has no padding to accommodate an icon alone.</div>
               <pre><code>const OnlyIcon = () =&gt; (
     &lt;Stack&gt;
         {NON_LINK_VARIANTS.map(variant =&gt; (
@@ -2107,7 +2300,10 @@ variant?: ButtonVariantType</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Loading state across variant × size (excluding `link`)</div>
-              <div class="hint">Loading state across the variant × size grid. Each row shows two buttons per size: one icon-only, one with text. Loading forces `disabled` and overlays a spinner that inherits the variant&#39;s text color. Excludes `variant=&quot;link&quot;` — combining `link` with `loading` logs a dev-only warning.</div>
+              <div class="hint">Loading state across the variant × size grid. Each row shows two buttons
+per size: one icon-only, one with text. Loading forces `disabled` and
+overlays a spinner that inherits the variant&#39;s text color. Excludes
+`variant=&quot;link&quot;` — combining `link` with `loading` logs a dev-only warning.</div>
               <pre><code>const Loading = () =&gt; (
     &lt;Stack&gt;
         {NON_LINK_VARIANTS.map(variant =&gt; (
@@ -2133,7 +2329,10 @@ variant?: ButtonVariantType</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>`status=&quot;danger&quot;` across every variant, enabled + disabled</div>
-              <div class="hint">Destructive treatment via `status=&quot;danger&quot;`. The top row shows every variant enabled; the bottom row shows every variant disabled. Use `status=&quot;danger&quot;` for delete, remove, or disconnect actions regardless of variant.</div>
+              <div class="hint">Destructive treatment via `status=&quot;danger&quot;`. The top row shows every
+variant enabled; the bottom row shows every variant disabled. Use
+`status=&quot;danger&quot;` for delete, remove, or disconnect actions regardless of
+variant.</div>
               <pre><code>const Status = () =&gt; (
     &lt;Stack&gt;
         &lt;Row&gt;
@@ -2165,7 +2364,8 @@ variant?: ButtonVariantType</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>`rounded` pill shape across variant × size (excluding `link`)</div>
-              <div class="hint">Fully pill-shaped buttons across the variant × size grid. Excludes `variant=&quot;link&quot;` since the link treatment has no background to round.</div>
+              <div class="hint">Fully pill-shaped buttons across the variant × size grid. Excludes
+`variant=&quot;link&quot;` since the link treatment has no background to round.</div>
               <pre><code>const Rounded = () =&gt; (
     &lt;Stack&gt;
         {NON_LINK_VARIANTS.map(variant =&gt; (
@@ -2188,7 +2388,12 @@ variant?: ButtonVariantType</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>`asChild` composes Button&#39;s styles onto any element</div>
-              <div class="hint">`asChild` renders Button&#39;s styles on the nested child element rather than on a `&lt;button&gt;` — the child receives Button&#39;s `className`, `ref`, and merged props via Radix&#39;s `Slot` primitive. Use it to turn any anchor or framework `Link` into a Button without coupling the design system to a router. In app code, swap the plain `&lt;a&gt;` below for your framework&#39;s Link (`next/link`, `react-router`, `@tanstack/react-router`, etc.).</div>
+              <div class="hint">`asChild` renders Button&#39;s styles on the nested child element rather than
+on a `&lt;button&gt;` — the child receives Button&#39;s `className`, `ref`, and
+merged props via Radix&#39;s `Slot` primitive. Use it to turn any anchor or
+framework `Link` into a Button without coupling the design system to a
+router. In app code, swap the plain `&lt;a&gt;` below for your framework&#39;s Link
+(`next/link`, `react-router`, `@tanstack/react-router`, etc.).</div>
               <pre><code>const AsChild = () =&gt; (
     &lt;Row&gt;
         &lt;Button asChild variant=&quot;primary&quot;&gt;
@@ -2208,7 +2413,15 @@ variant?: ButtonVariantType</code></pre>
                 <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. `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>
+              <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.
+
+`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>
               <pre><code>const Pressed = () =&gt; (
     &lt;Stack&gt;
         &lt;Row&gt;
@@ -2232,6 +2445,7 @@ variant?: ButtonVariantType</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -2250,12 +2464,20 @@ variant?: ButtonVariantType</code></pre>
         
         <label for="c-5-components-checklist-stories" class="badge ok as-toggle">2 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/check-list/check-list.stories.tsx">components-checklist · ./src/check-list/check-list.stories.tsx</div>
-    
-    <div class="hint">CheckList renders a vertical list where every row is marked with a check icon. Purely presentational — for interactive selection use a checkbox group.</div>
-    
+    <div>List container for check-marked items</div>
+    <div class="hint">CheckList renders a vertical list where every row is marked with a check
+icon. Purely presentational — for interactive selection use a checkbox group.</div>
+    <div class="kv"><span class="chip">summary: List container for check-marked items</span><span class="chip">example: ```tsx
+import { CheckList } from &#39;@agentero/design-system/check-list&#39;;
+
+&lt;CheckList.Root&gt;
+  &lt;CheckList.Item&gt;Instant appointment&lt;/CheckList.Item&gt;
+&lt;/CheckList.Root&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -2264,6 +2486,7 @@ variant?: ButtonVariantType</code></pre>
   <input id="c-5-components-checklist-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
+  
 
   <div class="panels">
     
@@ -2322,6 +2545,7 @@ variant?: ButtonVariantType</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -2336,16 +2560,36 @@ variant?: ButtonVariantType</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Command.Root</h2>
       <div class="badges">
-        
+        <label for="c-6-components-command-props" class="badge ok as-toggle">10 prop types</label>
         
         <label for="c-6-components-command-stories" class="badge ok as-toggle">5 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/command/command.stories.tsx">components-command · ./src/command/command.stories.tsx</div>
-    
-    <div class="hint">Command is a filterable list built on `cmdk`. Type to narrow the options, navigate with the arrow keys, select with Enter. It carries its own panel chrome, so dropping it inside a `Popover.Content` yields a combobox.</div>
-    
+    <div>Filterable command palette container</div>
+    <div class="hint">Command is a filterable list built on `cmdk`. Type to narrow the options,
+navigate with the arrow keys, select with Enter. It carries its own panel
+chrome, so dropping it inside a `Popover.Content` yields a combobox.</div>
+    <div class="kv"><span class="chip">summary: Filterable command palette container</span><span class="chip">see: {@link https://github.com/pacocoursey/cmdk cmdk}</span><span class="chip">example: ```tsx
+import { Command } from &#39;@agentero/design-system/command&#39;;
+
+&lt;Command.Root label=&quot;Search lines of business&quot;&gt;
+  &lt;Command.Input placeholder=&quot;Search lines of business...&quot; /&gt;
+  &lt;Command.List&gt;
+    &lt;Command.Item onSelect={() =&gt; select(&#39;home&#39;)}&gt;Homeowners&lt;/Command.Item&gt;
+    &lt;Command.Item onSelect={() =&gt; select(&#39;auto&#39;)}&gt;Auto&lt;/Command.Item&gt;
+  &lt;/Command.List&gt;
+  &lt;Command.Empty&gt;No options found&lt;/Command.Empty&gt;
+&lt;/Command.Root&gt;
+```</span><span class="chip">example: ```tsx
+// Filtering handled upstream (async search): let every item through.
+&lt;Command.Root label=&quot;Search options&quot; shouldFilter={false}&gt;
+  &lt;Command.Input placeholder=&quot;Search...&quot; /&gt;
+  &lt;Command.List&gt;...&lt;/Command.List&gt;
+&lt;/Command.Root&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -2354,11 +2598,68 @@ variant?: ButtonVariantType</code></pre>
   <input id="c-6-components-command-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
+  <input id="c-6-components-command-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">10 prop types</span>
+            </div>
+            <pre><code>Component: src/command/index.ts::Command</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>asChild?: boolean
+
+children?: ReactNode
+
+/**
+ * Optionally set to `true` to disable selection via pointer events.
+ */
+disablePointerSelection?: boolean
+
+/**
+ * Custom filter function for whether each command menu item should matches the given search query.
+ * It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely.
+ * By default, uses the `command-score` library.
+ */
+filter?: CommandFilter
+
+/**
+ * Accessible label for this command menu. Not shown visibly.
+ */
+label?: string
+
+/**
+ * Optionally set to `true` to turn on looping around when using the arrow keys.
+ */
+loop?: boolean
+
+/**
+ * Event handler called when the selected item of the menu changes.
+ */
+onValueChange?: (value: string) =&gt; void
+
+/**
+ * Optionally set to `false` to turn off the automatic filtering and sorting.
+ * If `false`, you must conditionally render valid items based on the search query yourself.
+ */
+shouldFilter?: boolean
+
+/**
+ * Optional controlled state of the selected command menu item.
+ */
+value?: string
+
+/**
+ * Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.
+ */
+vimBindings?: boolean</code></pre>
+          </div>
+        </div>
     
         <div class="panel panel-stories">
           
@@ -2416,7 +2717,8 @@ variant?: ButtonVariantType</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               
-              <div class="hint">`Group` sections related options. It ships unstyled, so the heading is styled per usage through the `[cmdk-group-heading]` hook.</div>
+              <div class="hint">`Group` sections related options. It ships unstyled, so the heading is styled
+per usage through the `[cmdk-group-heading]` hook.</div>
               <pre><code>const Grouped = () =&gt; (
     &lt;Command.Root label=&quot;Search commands&quot;&gt;
         &lt;Command.Input placeholder=&quot;Search...&quot; /&gt;
@@ -2440,7 +2742,9 @@ variant?: ButtonVariantType</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               
-              <div class="hint">With more rows than the list cap fits, the list scrolls — by wheel, or by keyboard: cmdk scrolls the active row into view as the arrow keys move it, and `scroll-py-2` keeps that row off the container edges.</div>
+              <div class="hint">With more rows than the list cap fits, the list scrolls — by wheel, or by
+keyboard: cmdk scrolls the active row into view as the arrow keys move it,
+and `scroll-py-2` keeps that row off the container edges.</div>
               <pre><code>const ScrollingList = () =&gt; (
     &lt;Command.Root label=&quot;Search states&quot;&gt;
         &lt;Command.Input placeholder=&quot;Search states...&quot; /&gt;
@@ -2473,6 +2777,7 @@ variant?: ButtonVariantType</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -2487,16 +2792,46 @@ variant?: ButtonVariantType</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> DataTable.Root</h2>
       <div class="badges">
-        
+        <label for="c-7-components-datatable-props" class="badge ok as-toggle">88 prop types</label>
         
         <label for="c-7-components-datatable-stories" class="badge ok as-toggle">4 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/data-table/data-table.stories.tsx">components-datatable · ./src/data-table/data-table.stories.tsx</div>
-    
-    <div class="hint">DataTable is the data-driven table compound built on TanStack Table. This story shows a representative leads table: an `Applicant` column with a name + address, contact info, insurance type with an icon, a sortable `Created` column, a status badge, and hover-revealed row actions (open + a kebab menu). The toolbar (search + filters) and the footer pagination are **separate components** composed inside `ToolBar` / `Footer`.</div>
-    
+    <div>DataTable root that builds the table instance and shares context</div>
+    <div class="hint">DataTable is the data-driven table compound built on TanStack Table. This
+story shows a representative leads table: an `Applicant` column with a name +
+address, contact info, insurance type with an icon, a sortable `Created`
+column, a status badge, and hover-revealed row actions (open + a kebab menu).
+The toolbar (search + filters) and the footer pagination are **separate
+components** composed inside `ToolBar` / `Footer`.</div>
+    <div class="kv"><span class="chip">summary: DataTable root that builds the table instance and shares context</span><span class="chip">see: {@link https://tanstack.com/table/latest TanStack Table}</span><span class="chip">example: ```tsx
+import { DataTable } from &#39;@agentero/design-system/data-table&#39;;
+import { createColumnHelper } from &#39;@tanstack/react-table&#39;;
+
+const columnHelper = createColumnHelper&lt;User&gt;();
+const columns = [
+  columnHelper.accessor(&#39;name&#39;, { header: &#39;Name&#39;, enableSorting: true }),
+  columnHelper.accessor(&#39;email&#39;, { header: &#39;Email&#39; })
+];
+
+&lt;DataTable.Root data={users} columns={columns}&gt;
+  &lt;DataTable.ToolBar&gt;
+    &lt;SearchInput /&gt;
+  &lt;/DataTable.ToolBar&gt;
+  &lt;DataTable.Table /&gt;
+  &lt;DataTable.Footer&gt;
+    &lt;DataTable.Pagination
+      currentPage={page}
+      pageSize={10}
+      totalCount={total}
+      onPageChange={setPage}
+    /&gt;
+  &lt;/DataTable.Footer&gt;
+&lt;/DataTable.Root&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -2505,172 +2840,645 @@ variant?: ButtonVariantType</code></pre>
   <input id="c-7-components-datatable-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
+  <input id="c-7-components-datatable-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
     
     
-    
-        <div class="panel panel-stories">
-          
-          
-          
+        <div class="panel panel-props">
           <div class="note ok">
-                <div class="row">
-                  <span class="ex-name">Imports</span>
-                </div>
-                <pre><code>import { Button, DataTable, DropdownMenu, Pagination, Table } from "@agentero/design-system";</code></pre>
-              </div>
-          
-          
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">Playground</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              <div>Display props playground (size / embed / enclosed / sticky)</div>
-              <div class="hint">Playground for `DataTable.Table` display props — toggle `size`, `embed`, `enclosed`, and `sticky` from the controls panel.</div>
-              <pre><code>const Playground = () =&gt; &lt;div
-    className={args.enclosed ? &#39;flex min-h-0 flex-1 flex-col p-4&#39; : &#39;contents&#39;}&gt;
-    &lt;DataTable.Root data={LEADS} columns={columns}&gt;
-        &lt;DataTable.Table size=&quot;md&quot; embed enclosed={false} sticky=&quot;header&quot; /&gt;
-    &lt;/DataTable.Root&gt;
-&lt;/div&gt;;</code></pre>
+            <div class="row">
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
+              <span class="badge ok">88 prop types</span>
             </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">Leads</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              <div>Representative leads table composition</div>
-              <div class="hint">A leads-table composition: sortable `Created` column, a status badge, row navigation via `rowHref`, hover-revealed actions, a search input + filters in the toolbar, and pagination in the footer.</div>
-              <pre><code>const Leads = () =&gt; {
-    const [sorting, setSorting] = useState&lt;SortingState&gt;([]);
-    const [page, setPage] = useState(1);
-    const [search, setSearch] = useState(&#39;&#39;);
+            <pre><code>Component: src/data-table/index.ts::DataTable</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * An array of extra features that you can add to the table instance.
+ */
+_features?: TableFeature&lt;any&gt;[]
 
-    const data = useMemo(
-        () =&gt; LEADS.filter(l =&gt; l.contact.toLowerCase().includes(search.toLowerCase())),
-        [search]
-    );
+aggregationFns?: Record&lt;string, AggregationFn&lt;any&gt;&gt;
 
-    return (
-        &lt;DataTable.Root
-            data={data}
-            columns={columns}
-            state={{ sorting }}
-            onSortingChange={setSorting}
-            getSortedRowModel={getSortedRowModel()}
-            enableSortingRemoval={false}
-            rowHref={lead =&gt; `/leads/${lead.leadId}`}&gt;
-            &lt;DataTable.ToolBar&gt;
-                &lt;input
-                    value={search}
-                    onChange={e =&gt; setSearch(e.target.value)}
-                    placeholder=&quot;Search...&quot;
-                    aria-label=&quot;Search leads&quot;
-                    className=&quot;h-8 w-60 rounded-md border border-border-default-base-primary px-3 text-sm outline-none&quot;
-                /&gt;
-                &lt;Button variant=&quot;secondary&quot; size=&quot;sm&quot;&gt;
-                    Filters
-                &lt;/Button&gt;
-            &lt;/DataTable.ToolBar&gt;
+/**
+ * Set this option to override any of the `autoReset...` feature options.
+ */
+autoResetAll?: boolean
 
-            &lt;DataTable.Table /&gt;
+/**
+ * Enable this setting to automatically reset the expanded state of the table when expanding state changes.
+ */
+autoResetExpanded?: boolean
 
-            &lt;DataTable.Footer&gt;
-                &lt;Pagination
-                    totalCount={LEADS.length}
-                    currentPage={page}
-                    pageSize={10}
-                    onPageChange={setPage}
-                /&gt;
-            &lt;/DataTable.Footer&gt;
-        &lt;/DataTable.Root&gt;
-    );
-};</code></pre>
-            </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">Empty</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              <div>Empty state when there are no rows</div>
-              <div class="hint">No rows: the table renders its default empty state instead of body rows.</div>
-              <pre><code>const Empty = () =&gt; (
-    &lt;DataTable.Root data={[] as Lead[]} columns={columns}&gt;
-        &lt;DataTable.Table /&gt;
-    &lt;/DataTable.Root&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>Loading state dims the table and hides the empty state</div>
-              <div class="hint">Loading: the body is dimmed and the empty state is suppressed while data is in flight.</div>
-              <pre><code>const Loading = () =&gt; (
-    &lt;DataTable.Root data={[] as Lead[]} columns={columns} isLoading&gt;
-        &lt;DataTable.Table /&gt;
-    &lt;/DataTable.Root&gt;
-);</code></pre>
-            </div>
-        </div>
-    
-  </div>
-</article>
-<article
-  class="card 
-  no-error 
-  no-info 
-  no-story-error
-  no-doc-error"
-  role="listitem"
-  aria-label="Divider">
-  <div class="head">
-    <div class="title">
-      <h2><span class="status-dot dot-ok"></span> Divider</h2>
-      <div class="badges">
-        <label for="c-8-components-divider-props" class="badge ok as-toggle">2 prop types</label>
-        
-        <label for="c-8-components-divider-stories" class="badge ok as-toggle">10 stories</label>
-        
-      </div>
-    </div>
-    <div class="meta" title="./src/divider/divider.stories.tsx">components-divider · ./src/divider/divider.stories.tsx</div>
-    
-    <div class="hint">Divider separates content visually along either a horizontal or vertical axis. Use between page or card sections, between inline items in a toolbar or list, or — with the `label` prop — to render an &quot;or&quot;-style break between options. Set `decorative={false}` when the separator carries semantic meaning so it&#39;s announced to assistive technologies.</div>
-    
-  </div>
+/**
+ * If set to `true`, pagination will be reset to the first page when page-altering state changes eg. `data` is updated, filters change, grouping changes, etc.
+ */
+autoResetPageIndex?: boolean
 
-  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
-  
-  
-  <input id="c-8-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
-  
-  <input id="c-8-components-divider-props" class="tg tg-props" type="checkbox" hidden />
+children?: ReactNode
 
-  <div class="panels">
+/**
+ * Enables or disables right-to-left support for resizing the column. defaults to &#39;ltr&#39;.
+ */
+columnResizeDirection?: &quot;ltr&quot; | &quot;rtl&quot;
+
+/**
+ * Determines when the columnSizing state is updated. `onChange` updates the state when the user is dragging the resize handle. `onEnd` updates the state when the user releases the resize handle.
+ */
+columnResizeMode?: &quot;onChange&quot; | &quot;onEnd&quot;
+
+/**
+ * The array of column defs to use for the table.
+ */
+columns: ColumnDef&lt;Lead, any&gt;[]
+
+/**
+ * The data for the table to display. This array should match the type you provided to `table.setRowType&lt;...&gt;`. Columns can access this data via string/index or a functional accessor. When the `data` option changes reference, the table will reprocess the data.
+ */
+data: Lead[]
+
+/**
+ * Set this option to `true` to output all debugging information to the console.
+ */
+debugAll?: boolean
+
+/**
+ * Set this option to `true` to output cell debugging information to the console.
+ */
+debugCells?: boolean
+
+/**
+ * Set this option to `true` to output column debugging information to the console.
+ */
+debugColumns?: boolean
+
+/**
+ * Set this option to `true` to output header debugging information to the console.
+ */
+debugHeaders?: boolean
+
+/**
+ * Set this option to `true` to output row debugging information to the console.
+ */
+debugRows?: boolean
+
+/**
+ * Set this option to `true` to output table debugging information to the console.
+ */
+debugTable?: boolean
+
+/**
+ * Default column options to use for all column defs supplied to the table.
+ */
+defaultColumn?: Partial&lt;ColumnDef&lt;Lead, unknown&gt;&gt; | undefined
+
+/**
+ * Enables/disables **column** filtering for all columns.
+ */
+enableColumnFilters?: boolean
+
+/**
+ * Enables/disables column pinning for the table. Defaults to `true`.
+ */
+enableColumnPinning?: boolean
+
+/**
+ * Enables or disables column resizing for the column.
+ */
+enableColumnResizing?: boolean
+
+/**
+ * Enable/disable expanding for all rows.
+ */
+enableExpanding?: boolean
+
+/**
+ * Enables/disables all filtering for the table.
+ */
+enableFilters?: boolean
+
+/**
+ * Enables/disables **global** filtering for all columns.
+ */
+enableGlobalFilter?: boolean
+
+/**
+ * Enables/disables grouping for the table.
+ */
+enableGrouping?: boolean
+
+/**
+ * Whether to enable column hiding. Defaults to `true`.
+ */
+enableHiding?: boolean
+
+/**
+ * Enables/disables the ability to remove multi-sorts
+ */
+enableMultiRemove?: boolean
+
+/**
+ * - Enables/disables multiple row selection for all rows in the table OR
+ * - A function that given a row, returns whether to enable/disable multiple row selection for that row&#39;s children/grandchildren
+ */
+enableMultiRowSelection?: boolean | ((row: Row&lt;Lead&gt;) =&gt; boolean) | undefined
+
+/**
+ * Enables/Disables multi-sorting for the table.
+ */
+enableMultiSort?: boolean
+
+enablePinning?: boolean
+
+/**
+ * Enables/disables row pinning for the table. Defaults to `true`.
+ */
+enableRowPinning?: boolean | ((row: Row&lt;Lead&gt;) =&gt; boolean) | undefined
+
+/**
+ * - Enables/disables row selection for all rows in the table OR
+ * - A function that given a row, returns whether to enable/disable row selection for that row
+ */
+enableRowSelection?: boolean | ((row: Row&lt;Lead&gt;) =&gt; boolean) | undefined
+
+/**
+ * Enables/Disables sorting for the table.
+ */
+enableSorting?: boolean
+
+/**
+ * Enables/Disables the ability to remove sorting for the table.
+ * - If `true` then changing sort order will circle like: &#39;none&#39; -&gt; &#39;desc&#39; -&gt; &#39;asc&#39; -&gt; &#39;none&#39; -&gt; ...
+ * - If `false` then changing sort order will circle like: &#39;none&#39; -&gt; &#39;desc&#39; -&gt; &#39;asc&#39; -&gt; &#39;desc&#39; -&gt; &#39;asc&#39; -&gt; ...
+ */
+enableSortingRemoval?: boolean
+
+/**
+ * Enables/disables automatic sub-row selection when a parent row is selected, or a function that enables/disables automatic sub-row selection for each row.
+ * (Use in combination with expanding or grouping features)
+ */
+enableSubRowSelection?: boolean | ((row: Row&lt;Lead&gt;) =&gt; boolean) | undefined
+
+filterFns?: Record&lt;string, FilterFn&lt;any&gt;&gt;
+
+/**
+ * By default, filtering is done from parent rows down (so if a parent row is filtered out, all of its children will be filtered out as well). Setting this option to `true` will cause filtering to be done from leaf rows up (which means parent rows will be included so long as one of their child or grand-child rows is also included).
+ */
+filterFromLeafRows?: boolean
+
+/**
+ * If provided, this function will be called with the column and should return `true` or `false` to indicate whether this column should be used for global filtering.
+ * 
+ * This is useful if the column can contain data that is not `string` or `number` (i.e. `undefined`).
+ */
+getColumnCanGlobalFilter?: (column: Column&lt;Lead, unknown&gt;) =&gt; boolean
+
+/**
+ * This function is responsible for returning the expanded row model. If this function is not provided, the table will not expand rows. You can use the default exported `getExpandedRowModel` function to get the expanded row model or implement your own.
+ */
+getExpandedRowModel?: (table: Table&lt;any&gt;) =&gt; () =&gt; RowModel&lt;any&gt;
+
+getFacetedMinMaxValues?: (table: Table&lt;Lead&gt;, columnId: string) =&gt; () =&gt; [number, number] | undefined
+
+getFacetedRowModel?: (table: Table&lt;Lead&gt;, columnId: string) =&gt; () =&gt; RowModel&lt;Lead&gt;
+
+getFacetedUniqueValues?: (table: Table&lt;Lead&gt;, columnId: string) =&gt; () =&gt; Map&lt;any, number&gt;
+
+/**
+ * If provided, this function is called **once** per table and should return a **new function** which will calculate and return the row model for the table when it&#39;s filtered.
+ * - For server-side filtering, this function is unnecessary and can be ignored since the server should already return the filtered row model.
+ * - For client-side filtering, this function is required. A default implementation is provided via any table adapter&#39;s `{ getFilteredRowModel }` export.
+ */
+getFilteredRowModel?: (table: Table&lt;any&gt;) =&gt; () =&gt; RowModel&lt;any&gt;
+
+/**
+ * Returns the row model after grouping has taken place, but no further.
+ */
+getGroupedRowModel?: (table: Table&lt;any&gt;) =&gt; () =&gt; RowModel&lt;any&gt;
+
+/**
+ * If provided, allows you to override the default behavior of determining whether a row is currently expanded.
+ */
+getIsRowExpanded?: (row: Row&lt;Lead&gt;) =&gt; boolean
+
+/**
+ * Returns the row model after pagination has taken place, but no further.
+ * 
+ * Pagination columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here.
+ */
+getPaginationRowModel?: (table: Table&lt;any&gt;) =&gt; () =&gt; RowModel&lt;any&gt;
+
+/**
+ * If provided, allows you to override the default behavior of determining whether a row can be expanded.
+ */
+getRowCanExpand?: (row: Row&lt;Lead&gt;) =&gt; boolean
+
+/**
+ * This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents&#39; index eg. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it&#39;s suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc.
+ */
+getRowId?: (originalRow: Lead, index: number, parent?: Row&lt;Lead&gt; | undefined) =&gt; string
+
+/**
+ * This function is used to retrieve the sorted row model. If using server-side sorting, this function is not required. To use client-side sorting, pass the exported `getSortedRowModel()` from your adapter to your table or implement your own.
+ */
+getSortedRowModel?: (table: Table&lt;any&gt;) =&gt; () =&gt; RowModel&lt;any&gt;
+
+/**
+ * This optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row.
+ */
+getSubRows?: (originalRow: Lead, index: number) =&gt; Lead[] | undefined
+
+/**
+ * The filter function to use for global filtering.
+ * - A `string` referencing a built-in filter function
+ * - A `string` that references a custom filter functions provided via the `tableOptions.filterFns` option
+ * - A custom filter function
+ */
+globalFilterFn?: FilterFnOption&lt;Lead&gt; | undefined
+
+/**
+ * Grouping columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here.
+ */
+groupedColumnMode?: false | &quot;reorder&quot; | &quot;remove&quot; | undefined
+
+/**
+ * Use this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (eg. `options.autoResetPageIndex`) or via functions like `table.resetRowSelection()`. Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state.
+ * 
+ * Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable.
+ */
+initialState?: InitialTableState
+
+/**
+ * Dims the table while data is loading and suppresses the empty state.
+ */
+isLoading?: boolean = false
+
+/**
+ * Pass a custom function that will be used to determine if a multi-sort event should be triggered. It is passed the event from the sort toggle handler and should return `true` if the event should trigger a multi-sort.
+ */
+isMultiSortEvent?: (e: unknown) =&gt; boolean
+
+/**
+ * When `false`, pinned rows will not be visible if they are filtered or paginated out of the table. When `true`, pinned rows will always be visible regardless of filtering or pagination. Defaults to `true`.
+ */
+keepPinnedRows?: boolean
+
+/**
+ * Renders the per-row link when `rowHref` is set. Defaults to `&#39;a&#39;`; pass a
+ * framework link (e.g. Next.js `Link`) for client-side navigation.
+ */
+linkComponent?: ElementType | undefined = &#39;a&#39;
+
+/**
+ * Enables manual row expansion. If this is set to `true`, `getExpandedRowModel` will not be used to expand rows and you would be expected to perform the expansion in your own data model. This is useful if you are doing server-side expansion.
+ */
+manualExpanding?: boolean
+
+/**
+ * Disables the `getFilteredRowModel` from being used to filter data. This may be useful if your table needs to dynamically support both client-side and server-side filtering.
+ */
+manualFiltering?: boolean
+
+/**
+ * Enables manual grouping. If this option is set to `true`, the table will not automatically group rows using `getGroupedRowModel()` and instead will expect you to manually group the rows before passing them to the table. This is useful if you are doing server-side grouping and aggregation.
+ */
+manualGrouping?: boolean
+
+/**
+ * Enables manual pagination. If this option is set to `true`, the table will not automatically paginate rows using `getPaginationRowModel()` and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation.
+ */
+manualPagination?: boolean
+
+/**
+ * Enables manual sorting for the table. If this is `true`, you will be expected to sort your data before it is passed to the table. This is useful if you are doing server-side sorting.
+ */
+manualSorting?: boolean
+
+/**
+ * By default, filtering is done for all rows (max depth of 100), no matter if they are root level parent rows or the child leaf rows of a parent row. Setting this option to `0` will cause filtering to only be applied to the root level parent rows, with all sub-rows remaining unfiltered. Similarly, setting this option to `1` will cause filtering to only be applied to child leaf rows 1 level deep, and so on.
+ * 
+ * This is useful for situations where you want a row&#39;s entire child hierarchy to be visible regardless of the applied filter.
+ */
+maxLeafRowFilterDepth?: number
+
+/**
+ * Set a maximum number of columns that can be multi-sorted.
+ */
+maxMultiSortColCount?: number
+
+/**
+ * This option is used to optionally implement the merging of table options.
+ */
+mergeOptions?: (defaultOptions: TableOptions&lt;Lead&gt;, options: Partial&lt;TableOptions&lt;Lead&gt;&gt;) =&gt; TableOptions&lt;Lead&gt;
+
+/**
+ * You can pass any object to `options.meta` and access it anywhere the `table` is available via `table.options.meta`.
+ */
+meta?: TableMeta&lt;Lead&gt;
+
+/**
+ * If provided, this function will be called with an `updaterFn` when `state.columnFilters` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+ */
+onColumnFiltersChange?: OnChangeFn&lt;ColumnFiltersState&gt;
+
+/**
+ * If provided, this function will be called with an `updaterFn` when `state.columnOrder` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+ */
+onColumnOrderChange?: OnChangeFn&lt;ColumnOrderState&gt;
+
+/**
+ * If provided, this function will be called with an `updaterFn` when `state.columnPinning` changes. This overrides the default internal state management, so you will also need to supply `state.columnPinning` from your own managed state.
+ */
+onColumnPinningChange?: OnChangeFn&lt;ColumnPinningState&gt;
+
+/**
+ * If provided, this function will be called with an `updaterFn` when `state.columnSizing` changes. This overrides the default internal state management, so you will also need to supply `state.columnSizing` from your own managed state.
+ */
+onColumnSizingChange?: OnChangeFn&lt;ColumnSizingState&gt;
+
+/**
+ * If provided, this function will be called with an `updaterFn` when `state.columnSizingInfo` changes. This overrides the default internal state management, so you will also need to supply `state.columnSizingInfo` from your own managed state.
+ */
+onColumnSizingInfoChange?: OnChangeFn&lt;ColumnSizingInfoState&gt;
+
+/**
+ * If provided, this function will be called with an `updaterFn` when `state.columnVisibility` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+ */
+onColumnVisibilityChange?: OnChangeFn&lt;VisibilityState&gt;
+
+/**
+ * This function is called when the `expanded` table state changes. If a function is provided, you will be responsible for managing this state on your own. To pass the managed state back to the table, use the `tableOptions.state.expanded` option.
+ */
+onExpandedChange?: OnChangeFn&lt;ExpandedState&gt;
+
+/**
+ * If provided, this function will be called with an `updaterFn` when `state.globalFilter` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+ */
+onGlobalFilterChange?: OnChangeFn&lt;any&gt;
+
+/**
+ * If this function is provided, it will be called when the grouping state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the `tableOptions.state.grouping` option.
+ */
+onGroupingChange?: OnChangeFn&lt;GroupingState&gt;
+
+/**
+ * If this function is provided, it will be called when the pagination state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the `tableOptions.state.pagination` option.
+ */
+onPaginationChange?: OnChangeFn&lt;PaginationState&gt;
+
+/**
+ * Called with the row&#39;s data when a non-interactive part of the row is clicked.
+ */
+onRowClick?: (row: Lead) =&gt; void
+
+/**
+ * If provided, this function will be called with an `updaterFn` when `state.rowPinning` changes. This overrides the default internal state management, so you will also need to supply `state.rowPinning` from your own managed state.
+ */
+onRowPinningChange?: OnChangeFn&lt;RowPinningState&gt;
+
+/**
+ * If provided, this function will be called with an `updaterFn` when `state.rowSelection` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+ */
+onRowSelectionChange?: OnChangeFn&lt;RowSelectionState&gt;
+
+/**
+ * If provided, this function will be called with an `updaterFn` when `state.sorting` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
+ */
+onSortingChange?: OnChangeFn&lt;SortingState&gt;
+
+/**
+ * The `onStateChange` option can be used to optionally listen to state changes within the table.
+ */
+onStateChange?: (updater: Updater&lt;TableState&gt;) =&gt; void
+
+/**
+ * When manually controlling pagination, you can supply a total `pageCount` value to the table if you know it (Or supply a `rowCount` and `pageCount` will be calculated). If you do not know how many pages there are, you can set this to `-1`.
+ */
+pageCount?: number
+
+/**
+ * If `true` expanded rows will be paginated along with the rest of the table (which means expanded rows may span multiple pages). If `false` expanded rows will not be considered for pagination (which means expanded rows will always render on their parents page. This also means more rows will be rendered than the set page size)
+ */
+paginateExpandedRows?: boolean
+
+/**
+ * Value used when the desired value is not found in the data.
+ */
+renderFallbackValue?: any
+
+/**
+ * When manually controlling pagination, you can supply a total `rowCount` value to the table if you know it. The `pageCount` can be calculated from this value and the `pageSize`.
+ */
+rowCount?: number
+
+/**
+ * Returns an href for a row; the row becomes a link (see `linkComponent`).
+ */
+rowHref?: (row: Lead) =&gt; string
+
+/**
+ * If `true`, all sorts will default to descending as their first toggle state.
+ */
+sortDescFirst?: boolean
+
+sortingFns?: Record&lt;string, SortingFn&lt;any&gt;&gt;
+
+/**
+ * The `state` option can be used to optionally _control_ part or all of the table state. The state you pass here will merge with and overwrite the internal automatically-managed state to produce the final state for the table. You can also listen to state changes via the `onStateChange` option.
+ * &gt; Note: Any state passed in here will override both the internal state and any other `initialState` you provide.
+ */
+state?: Partial&lt;TableState&gt;</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 { Button, DataTable, DropdownMenu, Pagination, Table } from "@agentero/design-system";</code></pre>
+              </div>
+          
+          
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Playground</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Display props playground (size / embed / enclosed / sticky)</div>
+              <div class="hint">Playground for `DataTable.Table` display props — toggle `size`, `embed`,
+`enclosed`, and `sticky` from the controls panel.</div>
+              <pre><code>const Playground = () =&gt; &lt;div
+    className={args.enclosed ? &#39;flex min-h-0 flex-1 flex-col p-4&#39; : &#39;contents&#39;}&gt;
+    &lt;DataTable.Root data={LEADS} columns={columns}&gt;
+        &lt;DataTable.Table size=&quot;md&quot; embed enclosed={false} sticky=&quot;header&quot; /&gt;
+    &lt;/DataTable.Root&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Leads</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Representative leads table composition</div>
+              <div class="hint">A leads-table composition: sortable `Created` column, a status badge, row
+navigation via `rowHref`, hover-revealed actions, a search input + filters in
+the toolbar, and pagination in the footer.</div>
+              <pre><code>const Leads = () =&gt; {
+    const [sorting, setSorting] = useState&lt;SortingState&gt;([]);
+    const [page, setPage] = useState(1);
+    const [search, setSearch] = useState(&#39;&#39;);
+
+    const data = useMemo(
+        () =&gt; LEADS.filter(l =&gt; l.contact.toLowerCase().includes(search.toLowerCase())),
+        [search]
+    );
+
+    return (
+        &lt;DataTable.Root
+            data={data}
+            columns={columns}
+            state={{ sorting }}
+            onSortingChange={setSorting}
+            getSortedRowModel={getSortedRowModel()}
+            enableSortingRemoval={false}
+            rowHref={lead =&gt; `/leads/${lead.leadId}`}&gt;
+            &lt;DataTable.ToolBar&gt;
+                &lt;input
+                    value={search}
+                    onChange={e =&gt; setSearch(e.target.value)}
+                    placeholder=&quot;Search...&quot;
+                    aria-label=&quot;Search leads&quot;
+                    className=&quot;h-8 w-60 rounded-md border border-border-default-base-primary px-3 text-sm outline-none&quot;
+                /&gt;
+                &lt;Button variant=&quot;secondary&quot; size=&quot;sm&quot;&gt;
+                    Filters
+                &lt;/Button&gt;
+            &lt;/DataTable.ToolBar&gt;
+
+            &lt;DataTable.Table /&gt;
+
+            &lt;DataTable.Footer&gt;
+                &lt;Pagination
+                    totalCount={LEADS.length}
+                    currentPage={page}
+                    pageSize={10}
+                    onPageChange={setPage}
+                /&gt;
+            &lt;/DataTable.Footer&gt;
+        &lt;/DataTable.Root&gt;
+    );
+};</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Empty</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Empty state when there are no rows</div>
+              <div class="hint">No rows: the table renders its default empty state instead of body rows.</div>
+              <pre><code>const Empty = () =&gt; (
+    &lt;DataTable.Root data={[] as Lead[]} columns={columns}&gt;
+        &lt;DataTable.Table /&gt;
+    &lt;/DataTable.Root&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>Loading state dims the table and hides the empty state</div>
+              <div class="hint">Loading: the body is dimmed and the empty state is suppressed while data is
+in flight.</div>
+              <pre><code>const Loading = () =&gt; (
+    &lt;DataTable.Root data={[] as Lead[]} columns={columns} isLoading&gt;
+        &lt;DataTable.Table /&gt;
+    &lt;/DataTable.Root&gt;
+);</code></pre>
+            </div>
+        </div>
+    
+    
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="Divider">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> Divider</h2>
+      <div class="badges">
+        <label for="c-8-components-divider-props" class="badge ok as-toggle">4 prop types</label>
+        
+        <label for="c-8-components-divider-stories" class="badge ok as-toggle">10 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/divider/divider.stories.tsx">components-divider · ./src/divider/divider.stories.tsx</div>
+    <div>Visual or semantic separator that optionally renders a centered label</div>
+    <div class="hint">Divider separates content visually along either a horizontal or vertical
+axis. Use between page or card sections, between inline items in a toolbar
+or list, or — with the `label` prop — to render an &quot;or&quot;-style break between
+options. Set `decorative={false}` when the separator carries semantic
+meaning so it&#39;s announced to assistive technologies.</div>
+    <div class="kv"><span class="chip">summary: Visual or semantic separator that optionally renders a centered label</span><span class="chip">param: orientation - Axis along which the separator renders. Defaults to `&#39;horizontal&#39;`.
+- `horizontal` — 1px line spanning the parent width.
+- `vertical` — 1px line spanning the parent height; parent must establish a height.</span><span class="chip">param: decorative - When `true` (default), the separator is purely visual and hidden
+from assistive technologies. Set to `false` to expose `role=&quot;separator&quot;` plus
+`aria-orientation` for meaningful section breaks.</span><span class="chip">param: label - Optional inline content rendered between two flanking 1px lines.
+When omitted, Divider renders a single line.</span><span class="chip">example: &lt;Divider /&gt;</span><span class="chip">example: &lt;Divider orientation=&quot;vertical&quot; /&gt;</span><span class="chip">example: &lt;Divider label=&quot;or&quot; /&gt;</span><span class="chip">example: &lt;Divider decorative={false} /&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-8-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-8-components-divider-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-docgen-typescript)</small></span>
-              <span class="badge ok">2 prop types</span>
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
+              <span class="badge ok">4 prop types</span>
             </div>
             <pre><code>Component: src/divider/divider.tsx::Divider</code></pre>
             <pre><code>Props:</code></pre>
             <pre><code>asChild?: boolean
 
+/**
+ * Whether or not the component is purely decorative. When true, accessibility-related attributes
+ * are updated so that that the rendered element is removed from the accessibility tree.
+ */
+decorative?: boolean = true
+
 /**
  * Optional label rendered inline between two flanking 1px lines. When set,
  * Divider renders a styled `&lt;div&gt;` (rather than the underlying separator
  * primitive) so the label can sit centered between the two line segments.
  */
-label?: ReactNode</code></pre>
+label?: ReactNode
+
+/**
+ * Either `vertical` or `horizontal`. Defaults to `horizontal`.
+ */
+orientation?: &quot;horizontal&quot; | &quot;vertical&quot; = &#39;horizontal&#39;</code></pre>
           </div>
         </div>
     
@@ -2692,7 +3500,8 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Default horizontal decorative divider</div>
-              <div class="hint">The default horizontal, decorative divider — a 1px line that spans the parent width. Use this form between stacked content blocks.</div>
+              <div class="hint">The default horizontal, decorative divider — a 1px line that spans the
+parent width. Use this form between stacked content blocks.</div>
               <pre><code>const Default = () =&gt; &lt;div
     className={cn(
         &#39;flex gap-4 rounded-lg border border-border-default-base-primary bg-bg-default-base-primary p-6&#39;,
@@ -2717,7 +3526,8 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Horizontal 1px line spanning the parent width</div>
-              <div class="hint">Horizontal divider — a 1px line spanning the parent&#39;s full width. The default orientation; use to separate stacked content.</div>
+              <div class="hint">Horizontal divider — a 1px line spanning the parent&#39;s full width. The
+default orientation; use to separate stacked content.</div>
               <pre><code>const Horizontal = () =&gt; (
     &lt;div className=&quot;w-80&quot;&gt;
         &lt;Divider /&gt;
@@ -2730,7 +3540,9 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Vertical 1px line spanning the parent height</div>
-              <div class="hint">Vertical divider — a 1px line spanning the parent&#39;s full height. Parent must establish a height (via `h-*` or an intrinsic flex item height) for the line to be visible.</div>
+              <div class="hint">Vertical divider — a 1px line spanning the parent&#39;s full height. Parent must
+establish a height (via `h-*` or an intrinsic flex item height) for the line
+to be visible.</div>
               <pre><code>const Vertical = () =&gt; (
     &lt;div className=&quot;flex h-24 items-stretch&quot;&gt;
         &lt;Divider orientation=&quot;vertical&quot; /&gt;
@@ -2743,7 +3555,8 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Horizontal divider with a centered &quot;or&quot; label</div>
-              <div class="hint">Labelled divider. The label sits centered between two flanking 1px lines — a common pattern for &quot;or&quot; breaks between authentication options.</div>
+              <div class="hint">Labelled divider. The label sits centered between two flanking 1px lines —
+a common pattern for &quot;or&quot; breaks between authentication options.</div>
               <pre><code>const WithLabel = () =&gt; &lt;div className=&quot;flex w-80 flex-col gap-2&quot;&gt;
     &lt;Button variant=&quot;primary&quot;&gt;Continue with email&lt;/Button&gt;
     &lt;Divider orientation=&quot;horizontal&quot; decorative label=&quot;or&quot; /&gt;
@@ -2756,7 +3569,8 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Vertical divider with a centered label</div>
-              <div class="hint">Vertical divider with a label. The label sits between two stacked 1px line segments; use sparingly — horizontal labelled dividers are more common.</div>
+              <div class="hint">Vertical divider with a label. The label sits between two stacked 1px line
+segments; use sparingly — horizontal labelled dividers are more common.</div>
               <pre><code>const VerticalWithLabel = () =&gt; &lt;div
     className=&quot;flex h-40 items-stretch gap-4 rounded-lg border border-border-default-base-primary bg-bg-default-base-primary p-6&quot;&gt;
     &lt;div className=&quot;flex flex-col justify-center gap-1&quot;&gt;
@@ -2776,7 +3590,9 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Semantic separator announced to assistive technologies</div>
-              <div class="hint">Semantic divider (`decorative={false}`). Exposes `role=&quot;separator&quot;` and `aria-orientation` to assistive technologies, marking a meaningful section break rather than a purely visual one.</div>
+              <div class="hint">Semantic divider (`decorative={false}`). Exposes `role=&quot;separator&quot;` and
+`aria-orientation` to assistive technologies, marking a meaningful section
+break rather than a purely visual one.</div>
               <pre><code>const Semantic = () =&gt; &lt;div
     className=&quot;flex w-80 flex-col gap-4 rounded-lg border border-border-default-base-primary bg-bg-default-base-primary p-6&quot;&gt;
     &lt;section className=&quot;flex flex-col gap-1&quot;&gt;
@@ -2798,7 +3614,8 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Horizontal dividers between stacked list rows</div>
-              <div class="hint">Divider between list rows. Dividers delineate each item without the visual weight of a full border on every row.</div>
+              <div class="hint">Divider between list rows. Dividers delineate each item without the visual
+weight of a full border on every row.</div>
               <pre><code>const InList = () =&gt; (
     &lt;div className=&quot;w-80 rounded-lg border border-border-default-base-primary bg-bg-default-base-primary&quot;&gt;
         &lt;div className=&quot;flex flex-col gap-1 px-4 py-3&quot;&gt;
@@ -2830,7 +3647,9 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Vertical dividers grouping toolbar actions</div>
-              <div class="hint">Vertical dividers grouping related toolbar actions. Use to separate logical clusters of buttons (editing vs. history vs. settings) without visual weight.</div>
+              <div class="hint">Vertical dividers grouping related toolbar actions. Use to separate logical
+clusters of buttons (editing vs. history vs. settings) without visual
+weight.</div>
               <pre><code>const InToolbar = () =&gt; (
     &lt;div className=&quot;inline-flex h-10 items-center gap-1 rounded-lg border border-border-default-base-primary bg-bg-default-base-primary px-2 shadow-1&quot;&gt;
         &lt;Button variant=&quot;ghost&quot; size=&quot;xs&quot;&gt;
@@ -2862,7 +3681,8 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Horizontal dividers between content sections</div>
-              <div class="hint">Horizontal dividers between content sections in a long-form layout. Helps create visual hierarchy in content-heavy pages.</div>
+              <div class="hint">Horizontal dividers between content sections in a long-form layout. Helps
+create visual hierarchy in content-heavy pages.</div>
               <pre><code>const HorizontalInContent = () =&gt; (
     &lt;div className=&quot;flex w-96 flex-col gap-4 p-6&quot;&gt;
         &lt;div className=&quot;flex flex-col gap-1&quot;&gt;
@@ -2894,7 +3714,8 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Vertical dividers separating inline elements</div>
-              <div class="hint">Vertical dividers between inline elements. Common for separating a row of related controls or inline links without visual weight.</div>
+              <div class="hint">Vertical dividers between inline elements. Common for separating a row of
+related controls or inline links without visual weight.</div>
               <pre><code>const VerticalBetweenElements = () =&gt; (
     &lt;div className=&quot;flex items-stretch gap-3&quot;&gt;
         &lt;Button variant=&quot;primary&quot; size=&quot;sm&quot;&gt;
@@ -2913,6 +3734,7 @@ label?: ReactNode</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -2927,16 +3749,62 @@ label?: ReactNode</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> DropdownMenu.Root</h2>
       <div class="badges">
-        
+        <label for="c-9-components-dropdownmenu-props" class="badge ok as-toggle">6 prop types</label>
         
         <label for="c-9-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/dropdown-menu/dropdown-menu.stories.tsx">components-dropdownmenu · ./src/dropdown-menu/dropdown-menu.stories.tsx</div>
-    
-    <div class="hint">DropdownMenu is a compound overlay for secondary actions, bulk operations, or navigation shortcuts triggered off a button or icon. Compose it from `Root` / `Trigger` / `Portal` / `Content` and fill the menu with `Item`, `Separator`, `Label`, and — for nested flows — `Sub` / `SubTrigger` / `SubContent`. Built on Radix UI&#39;s DropdownMenu primitive, so keyboard navigation, focus trapping, typeahead, and collision detection come for free.</div>
-    
+    <div>Root provider for a DropdownMenu&#39;s open state</div>
+    <div class="hint">DropdownMenu is a compound overlay for secondary actions, bulk operations,
+or navigation shortcuts triggered off a button or icon. Compose it from
+`Root` / `Trigger` / `Portal` / `Content` and fill the menu with `Item`,
+`Separator`, `Label`, and — for nested flows — `Sub` / `SubTrigger` /
+`SubContent`. Built on Radix UI&#39;s DropdownMenu primitive, so keyboard
+navigation, focus trapping, typeahead, and collision detection come for
+free.</div>
+    <div class="kv"><span class="chip">summary: Root provider for a DropdownMenu&#39;s open state</span><span class="chip">see: {@link https://www.radix-ui.com/primitives/docs/components/dropdown-menu Radix UI DropdownMenu}</span><span class="chip">example: ```tsx
+import { DropdownMenu } from &#39;@agentero/design-system/dropdown-menu&#39;;
+
+&lt;DropdownMenu.Root&gt;
+  &lt;DropdownMenu.Trigger&gt;
+    &lt;IconMoreVert /&gt;
+  &lt;/DropdownMenu.Trigger&gt;
+
+  &lt;DropdownMenu.Portal&gt;
+    &lt;DropdownMenu.Content side=&quot;bottom&quot; align=&quot;end&quot;&gt;
+      &lt;DropdownMenu.Label&gt;Actions&lt;/DropdownMenu.Label&gt;
+
+      &lt;DropdownMenu.Item onSelect={() =&gt; handleEdit()}&gt;
+        &lt;IconEdit /&gt;
+        Edit
+      &lt;/DropdownMenu.Item&gt;
+
+      &lt;DropdownMenu.Sub&gt;
+        &lt;DropdownMenu.SubTrigger&gt;Share&lt;/DropdownMenu.SubTrigger&gt;
+        &lt;DropdownMenu.Portal&gt;
+          &lt;DropdownMenu.SubContent&gt;
+            &lt;DropdownMenu.Item&gt;Email&lt;/DropdownMenu.Item&gt;
+            &lt;DropdownMenu.Item&gt;Slack&lt;/DropdownMenu.Item&gt;
+          &lt;/DropdownMenu.SubContent&gt;
+        &lt;/DropdownMenu.Portal&gt;
+      &lt;/DropdownMenu.Sub&gt;
+
+      &lt;DropdownMenu.Separator /&gt;
+
+      &lt;DropdownMenu.Item
+        onSelect={() =&gt; handleDelete()}
+        disabled={!canDelete}
+      &gt;
+        &lt;IconDelete /&gt;
+        Delete
+      &lt;/DropdownMenu.Item&gt;
+    &lt;/DropdownMenu.Content&gt;
+  &lt;/DropdownMenu.Portal&gt;
+&lt;/DropdownMenu.Root&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -2945,11 +3813,33 @@ label?: ReactNode</code></pre>
   <input id="c-9-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
+  <input id="c-9-components-dropdownmenu-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">6 prop types</span>
+            </div>
+            <pre><code>Component: src/dropdown-menu/index.ts::DropdownMenu</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>children?: ReactNode
+
+defaultOpen?: boolean
+
+dir?: &quot;ltr&quot; | &quot;rtl&quot;
+
+modal?: boolean
+
+onOpenChange?: (open: boolean) =&gt; void
+
+open?: boolean</code></pre>
+          </div>
+        </div>
     
         <div class="panel panel-stories">
           
@@ -2969,7 +3859,9 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Basic menu with item rows and a separated destructive action</div>
-              <div class="hint">A minimal DropdownMenu with four `Item`s — edit/duplicate/archive plus a separator before a destructive delete. Use this as the starting point for most overflow menus.</div>
+              <div class="hint">A minimal DropdownMenu with four `Item`s — edit/duplicate/archive plus a
+separator before a destructive delete. Use this as the starting point for
+most overflow menus.</div>
               <pre><code>const Default = () =&gt; (
     &lt;DropdownMenu.Root&gt;
         &lt;DropdownMenu.Trigger asChild&gt;
@@ -3002,7 +3894,9 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Menu with multiple `Separator`-split groups and a disabled item</div>
-              <div class="hint">Multiple clusters of `Item`s split by `Separator` rules — mirrors an &quot;edit history / clipboard / export&quot; overflow menu. Demonstrates the `disabled` state on a menu row.</div>
+              <div class="hint">Multiple clusters of `Item`s split by `Separator` rules — mirrors an
+&quot;edit history / clipboard / export&quot; overflow menu. Demonstrates the
+`disabled` state on a menu row.</div>
               <pre><code>const WithGroupsAndDividers = () =&gt; (
     &lt;DropdownMenu.Root&gt;
         &lt;DropdownMenu.Trigger asChild&gt;
@@ -3033,7 +3927,9 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Icon-leading items with a destructive delete row</div>
-              <div class="hint">Menu items with leading icons and a destructive row using the `data-[highlighted]:bg-red-100` + `text-red-500` escape hatch. Use this pattern when a row should read as destructive.</div>
+              <div class="hint">Menu items with leading icons and a destructive row using the
+`data-[highlighted]:bg-red-100` + `text-red-500` escape hatch. Use this
+pattern when a row should read as destructive.</div>
               <pre><code>const WithIcons = () =&gt; (
     &lt;DropdownMenu.Root&gt;
         &lt;DropdownMenu.Trigger asChild&gt;
@@ -3066,7 +3962,9 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Menu with `Label`-titled sections and a destructive logout row</div>
-              <div class="hint">`Label`-segmented Profile / Settings / Account sections with a destructive Logout row. Use `Label` to name groups that would otherwise be ambiguous from the item text alone.</div>
+              <div class="hint">`Label`-segmented Profile / Settings / Account sections with a
+destructive Logout row. Use `Label` to name groups that would otherwise
+be ambiguous from the item text alone.</div>
               <pre><code>const WithGroupTitles = () =&gt; (
     &lt;DropdownMenu.Root&gt;
         &lt;DropdownMenu.Trigger asChild&gt;
@@ -3112,7 +4010,9 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Single-level submenus for Share and Move-to flows</div>
-              <div class="hint">One level of nesting: Share and Move-to submenus wired via `Sub` / `SubTrigger` / `SubContent`. Each submenu is portaled independently so it escapes the parent&#39;s stacking context.</div>
+              <div class="hint">One level of nesting: Share and Move-to submenus wired via `Sub` /
+`SubTrigger` / `SubContent`. Each submenu is portaled independently so
+it escapes the parent&#39;s stacking context.</div>
               <pre><code>const WithSubmenu = () =&gt; (
     &lt;DropdownMenu.Root&gt;
         &lt;DropdownMenu.Trigger asChild&gt;
@@ -3176,7 +4076,9 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Two-level nested submenus inside a parent menu</div>
-              <div class="hint">Two levels of nesting: Organization → Teams → (Engineering, Design). Deeper nesting is rarely a good UX — prefer splitting into separate screens once the tree grows past two levels.</div>
+              <div class="hint">Two levels of nesting: Organization → Teams → (Engineering, Design).
+Deeper nesting is rarely a good UX — prefer splitting into separate
+screens once the tree grows past two levels.</div>
               <pre><code>const NestedSubmenus = () =&gt; (
     &lt;DropdownMenu.Root&gt;
         &lt;DropdownMenu.Trigger asChild&gt;
@@ -3248,7 +4150,9 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Submenu with `disabled` items and a disabled `SubTrigger`</div>
-              <div class="hint">Submenu that contains `disabled` `Item`s alongside a fully-disabled `SubTrigger`. Use `disabled` sparingly — prefer hiding unavailable actions outright unless the user needs to see them and understand why.</div>
+              <div class="hint">Submenu that contains `disabled` `Item`s alongside a fully-disabled
+`SubTrigger`. Use `disabled` sparingly — prefer hiding unavailable
+actions outright unless the user needs to see them and understand why.</div>
               <pre><code>const SubmenuWithDisabledItems = () =&gt; (
     &lt;DropdownMenu.Root&gt;
         &lt;DropdownMenu.Trigger asChild&gt;
@@ -3297,6 +4201,7 @@ label?: ReactNode</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -3311,16 +4216,35 @@ label?: ReactNode</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> HoverCard.Root</h2>
       <div class="badges">
-        
+        <label for="c-10-components-hovercard-props" class="badge ok as-toggle">6 prop types</label>
         
         <label for="c-10-components-hovercard-stories" class="badge ok as-toggle">7 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/hover-card/hover-card.stories.tsx">components-hovercard · ./src/hover-card/hover-card.stories.tsx</div>
-    
-    <div class="hint">HoverCard reveals rich, sighted-user preview content anchored to a trigger on pointer hover or keyboard focus. Compose it from `Root` / `Trigger` / `Portal` / `Content`. `Trigger` takes any focusable control through `asChild`; these stories use a `secondary` Button throughout. Radix mirrors open state onto whatever you pass, so the trigger can style itself off `data-state`.</div>
-    
+    <div>Root provider for a rich hover preview of an entity</div>
+    <div class="hint">HoverCard reveals rich, sighted-user preview content anchored to a trigger
+on pointer hover or keyboard focus. Compose it from `Root` / `Trigger` /
+`Portal` / `Content`.
+
+`Trigger` takes any focusable control through `asChild`; these stories use a
+`secondary` Button throughout. Radix mirrors open state onto whatever you
+pass, so the trigger can style itself off `data-state`.</div>
+    <div class="kv"><span class="chip">summary: Root provider for a rich hover preview of an entity</span><span class="chip">see: {@link https://www.radix-ui.com/primitives/docs/components/hover-card Radix UI HoverCard}</span><span class="chip">example: ```tsx
+import { HoverCard } from &#39;@agentero/design-system/hover-card&#39;;
+
+&lt;HoverCard.Root&gt;
+  &lt;HoverCard.Trigger&gt;@rafa&lt;/HoverCard.Trigger&gt;
+  &lt;HoverCard.Portal&gt;
+    &lt;HoverCard.Content&gt;
+      &lt;ProfileCard /&gt;
+      &lt;HoverCard.Arrow /&gt;
+    &lt;/HoverCard.Content&gt;
+  &lt;/HoverCard.Portal&gt;
+&lt;/HoverCard.Root&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -3329,11 +4253,33 @@ label?: ReactNode</code></pre>
   <input id="c-10-components-hovercard-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
+  <input id="c-10-components-hovercard-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">6 prop types</span>
+            </div>
+            <pre><code>Component: src/hover-card/index.ts::HoverCard</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>children?: ReactNode
+
+closeDelay?: number
+
+defaultOpen?: boolean
+
+onOpenChange?: (open: boolean) =&gt; void
+
+open?: boolean
+
+openDelay?: number</code></pre>
+          </div>
+        </div>
     
         <div class="panel panel-stories">
           
@@ -3371,7 +4317,11 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               
-              <div class="hint">Brushing the trigger and leaving without ever reaching the card is the most common way a hover card gets dismissed, so the exit reverses the entrance from wherever it got to. Driving it with keyframes instead would restart the exit at full opacity and scale, popping the half-faded card to fully visible on its way out.</div>
+              <div class="hint">Brushing the trigger and leaving without ever reaching the card is the most
+common way a hover card gets dismissed, so the exit reverses the entrance
+from wherever it got to. Driving it with keyframes instead would restart the
+exit at full opacity and scale, popping the half-faded card to fully visible
+on its way out.</div>
               <pre><code>const AbandonedHover = () =&gt; &lt;HoverCard.Root openDelay={0} closeDelay={0}&gt;
     &lt;HoverCard.Trigger asChild&gt;
         &lt;Button variant=&quot;secondary&quot;&gt;Hover me&lt;/Button&gt;
@@ -3389,7 +4339,10 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               
-              <div class="hint">Opens on focus as a supplementary affordance. Note this is not the same as being keyboard-accessible: focus does not move into the card and it closes on blur, so any interactive content inside stays unreachable by keyboard — never put essential actions there.</div>
+              <div class="hint">Opens on focus as a supplementary affordance. Note this is not the same as
+being keyboard-accessible: focus does not move into the card and it closes
+on blur, so any interactive content inside stays unreachable by keyboard —
+never put essential actions there.</div>
               <pre><code>const OpensOnFocus = () =&gt; &lt;HoverCard.Root openDelay={0} closeDelay={0}&gt;
     &lt;HoverCard.Trigger asChild&gt;
         &lt;Button variant=&quot;secondary&quot;&gt;Focus me&lt;/Button&gt;
@@ -3435,7 +4388,10 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               
-              <div class="hint">The whole point of a HoverCard over a Tooltip: freely laid-out content that may include its own links and actions. Keep those actions at `secondary` or below — a primary CTA inside a card the keyboard can&#39;t reach reads as the main path to something it isn&#39;t. The trigger still has to stand on its own.</div>
+              <div class="hint">The whole point of a HoverCard over a Tooltip: freely laid-out content that
+may include its own links and actions. Keep those actions at `secondary` or
+below — a primary CTA inside a card the keyboard can&#39;t reach reads as the
+main path to something it isn&#39;t. The trigger still has to stand on its own.</div>
               <pre><code>const RichContent = () =&gt; &lt;HoverCard.Root openDelay={0} closeDelay={0}&gt;
     &lt;HoverCard.Trigger asChild&gt;
         &lt;Button variant=&quot;secondary&quot;&gt;Hover me&lt;/Button&gt;
@@ -3476,7 +4432,9 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               
-              <div class="hint">An optional `Arrow` points back at the trigger; render it inside `Content`. It carries the card&#39;s border down both slopes and leaves its base open, so the card and the point read as one shape on any background.</div>
+              <div class="hint">An optional `Arrow` points back at the trigger; render it inside `Content`.
+It carries the card&#39;s border down both slopes and leaves its base open, so
+the card and the point read as one shape on any background.</div>
               <pre><code>const WithArrow = () =&gt; &lt;HoverCard.Root openDelay={0} closeDelay={0}&gt;
     &lt;HoverCard.Trigger asChild&gt;
         &lt;Button variant=&quot;secondary&quot;&gt;Hover me&lt;/Button&gt;
@@ -3495,7 +4453,9 @@ label?: ReactNode</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               
-              <div class="hint">`openDelay` / `closeDelay` tune the hover latency. Default is a deliberate `700ms` open so cards don&#39;t flash on incidental passes; drop it to `0` for trigger-dense UIs where an instant preview reads as more responsive.</div>
+              <div class="hint">`openDelay` / `closeDelay` tune the hover latency. Default is a deliberate
+`700ms` open so cards don&#39;t flash on incidental passes; drop it to `0` for
+trigger-dense UIs where an instant preview reads as more responsive.</div>
               <pre><code>const Delays = () =&gt; (
     // Grid rather than flex so both triggers take the wider label&#39;s width —
     // a size difference would read as part of what the delay changes.
@@ -3525,6 +4485,7 @@ label?: ReactNode</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -3543,12 +4504,19 @@ label?: ReactNode</code></pre>
         
         <label for="c-11-components-label-stories" class="badge ok as-toggle">4 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/label/label.stories.tsx">components-label · ./src/label/label.stories.tsx</div>
-    
-    <div class="hint">Label is the accessible caption for a form control, built on Radix&#39;s Label primitive: it associates with the control through `htmlFor` and does not select text on double-click. `optional` and `required` are display-only affordances — the control itself still has to carry `required` / `aria-required`.</div>
-    
+    <div>Accessible caption for a form control</div>
+    <div class="hint">Label is the accessible caption for a form control, built on Radix&#39;s Label
+primitive: it associates with the control through `htmlFor` and does not select
+text on double-click.
+
+`optional` and `required` are display-only affordances — the control itself
+still has to carry `required` / `aria-required`.</div>
+    <div class="kv"><span class="chip">summary: Accessible caption for a form control</span><span class="chip">example: &lt;Label htmlFor=&quot;phone&quot; optional&gt;Phone number&lt;/Label&gt;
+&lt;Input id=&quot;phone&quot; type=&quot;tel&quot; /&gt;</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -3556,6 +4524,7 @@ label?: ReactNode</code></pre>
   
   <input id="c-11-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-11-components-label-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -3565,7 +4534,7 @@ label?: ReactNode</code></pre>
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
+              <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/label/label.tsx::Label</code></pre>
@@ -3623,7 +4592,8 @@ required?: boolean = false</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Required field with a decorative asterisk</div>
-              <div class="hint">Appends an asterisk. It is `aria-hidden`, so the control still needs its own `required` attribute for assistive technology.</div>
+              <div class="hint">Appends an asterisk. It is `aria-hidden`, so the control still needs its own
+`required` attribute for assistive technology.</div>
               <pre><code>const Required = () =&gt; &lt;Label required&gt;Full name&lt;/Label&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -3632,11 +4602,13 @@ required?: boolean = false</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>required takes precedence over optional</div>
-              <div class="hint">Contradictory props do not throw — `required` wins and the optional suffix is dropped, so a mistake never takes the page down.</div>
+              <div class="hint">Contradictory props do not throw — `required` wins and the optional suffix is
+dropped, so a mistake never takes the page down.</div>
               <pre><code>const RequiredWinsOverOptional = () =&gt; &lt;Label optional required&gt;Agency name&lt;/Label&gt;;</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -3655,12 +4627,16 @@ required?: boolean = false</code></pre>
         
         <label for="c-12-components-loading-stories" class="badge ok as-toggle">7 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/loading/loading.stories.tsx">components-loading · ./src/loading/loading.stories.tsx</div>
-    
-    <div class="hint">Loading displays a circular spinner that indicates an in-progress operation. Use for inline fetch, form submission, or asynchronous task indicators. The spinner inherits its color from the parent `color` and scales with the parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
-    
+    <div>Circular spinner for in-progress and loading states</div>
+    <div class="hint">Loading displays a circular spinner that indicates an in-progress operation.
+Use for inline fetch, form submission, or asynchronous task indicators.
+The spinner inherits its color from the parent `color` and scales with the
+parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
+    <div class="kv"><span class="chip">summary: Circular spinner for in-progress and loading states</span><span class="chip">example: &lt;Loading /&gt;</span><span class="chip">example: &lt;Loading size=&quot;lg&quot; className=&quot;text-text-default-brand-primary&quot; /&gt;</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -3668,6 +4644,7 @@ required?: boolean = false</code></pre>
   
   <input id="c-12-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-12-components-loading-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -3677,7 +4654,7 @@ required?: boolean = false</code></pre>
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
+              <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/loading/loading.tsx::Loading</code></pre>
@@ -3711,7 +4688,9 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Default spinner at the `sm` size</div>
-              <div class="hint">The default spinner at `size=&quot;sm&quot;` (1em diameter), inheriting the current text color. Matches the out-of-the-box behavior when Loading is dropped into any layout.</div>
+              <div class="hint">The default spinner at `size=&quot;sm&quot;` (1em diameter), inheriting the current
+text color. Matches the out-of-the-box behavior when Loading is dropped
+into any layout.</div>
               <pre><code>const Default = () =&gt; &lt;Loading size=&quot;sm&quot; /&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -3720,7 +4699,8 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Small 1em spinner for inline indicators</div>
-              <div class="hint">Small spinner (1em diameter) — the default. Ideal for inline indicators, buttons, and compact layouts where the spinner needs to sit next to text.</div>
+              <div class="hint">Small spinner (1em diameter) — the default. Ideal for inline indicators,
+buttons, and compact layouts where the spinner needs to sit next to text.</div>
               <pre><code>const SizeSm = () =&gt; &lt;Loading size=&quot;sm&quot; /&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -3729,7 +4709,8 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Medium 1.5em spinner for cards and panels</div>
-              <div class="hint">Medium spinner (1.5em diameter). Use for cards, panels, and standalone loading states where the spinner is the primary visual signal.</div>
+              <div class="hint">Medium spinner (1.5em diameter). Use for cards, panels, and standalone
+loading states where the spinner is the primary visual signal.</div>
               <pre><code>const SizeMd = () =&gt; &lt;Loading size=&quot;md&quot; /&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -3738,7 +4719,8 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Large 2em spinner for page or section loading</div>
-              <div class="hint">Large spinner (2em diameter). Use for page-level or section-level loading where the spinner needs more visual weight.</div>
+              <div class="hint">Large spinner (2em diameter). Use for page-level or section-level loading
+where the spinner needs more visual weight.</div>
               <pre><code>const SizeLg = () =&gt; &lt;Loading size=&quot;lg&quot; /&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -3747,7 +4729,8 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Visual comparison of all three spinner sizes</div>
-              <div class="hint">All three sizes rendered side by side for visual comparison of the `em`-based scaling. Each spinner inherits the same parent text color.</div>
+              <div class="hint">All three sizes rendered side by side for visual comparison of the
+`em`-based scaling. Each spinner inherits the same parent text color.</div>
               <pre><code>const Sizes = () =&gt; (
     &lt;div style={{ display: &#39;flex&#39;, alignItems: &#39;center&#39;, gap: &#39;2rem&#39; }}&gt;
         {([&#39;sm&#39;, &#39;md&#39;, &#39;lg&#39;] as const).map(size =&gt; (
@@ -3762,7 +4745,9 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Spinner color inherits from the parent text color</div>
-              <div class="hint">The spinner color tracks the parent `color` (text color) via `border-current`. Wrap Loading in any element with a text color utility — or set `color` on Loading itself — and the spinner adopts that color without extra props.</div>
+              <div class="hint">The spinner color tracks the parent `color` (text color) via `border-current`.
+Wrap Loading in any element with a text color utility — or set `color` on
+Loading itself — and the spinner adopts that color without extra props.</div>
               <pre><code>const InheritsColor = () =&gt; (
     &lt;div style={{ display: &#39;flex&#39;, alignItems: &#39;center&#39;, gap: &#39;2rem&#39; }}&gt;
         &lt;div className=&quot;text-text-default-base-primary&quot;&gt;
@@ -3783,7 +4768,9 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Spinner on a dark-background surface</div>
-              <div class="hint">Spinner on a dark surface to verify `border-current` contrast. The parent sets a light text color, which the spinner inherits so it remains visible against the dark background.</div>
+              <div class="hint">Spinner on a dark surface to verify `border-current` contrast. The parent
+sets a light text color, which the spinner inherits so it remains visible
+against the dark background.</div>
               <pre><code>const OnDarkSurface = () =&gt; (
     &lt;div className=&quot;flex items-center gap-8 rounded-lg bg-bg-button-primary-enable p-8 text-text-default-base-inverse-primary&quot;&gt;
         &lt;Loading size=&quot;sm&quot; /&gt;
@@ -3794,6 +4781,7 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -3808,16 +4796,49 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
     <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-13-components-modal-stories" class="badge ok as-toggle">6 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/modal/modal.stories.tsx">components-modal · ./src/modal/modal.stories.tsx</div>
-    
-    <div class="hint">Modal is a compound dialog built on Radix UI: `Root` owns the open state, `Content` is the centered surface (`size` md/lg), and `Title`/`Body`/`Footer` structure it. Close it with `Escape`, the overlay, the X button, or a `Modal.Close asChild` around your own button. `Content` also takes `variant=&quot;alert&quot;` for the modal the user has to answer: it drops all three implicit ways out and is announced as an `alertdialog`.</div>
-    
+    <div>Root provider for a Modal&#39;s open state</div>
+    <div class="hint">Modal is a compound dialog built on Radix UI: `Root` owns the open state,
+`Content` is the centered surface (`size` md/lg), and `Title`/`Body`/`Footer`
+structure it. Close it with `Escape`, the overlay, the X button, or a
+`Modal.Close asChild` around your own button.
+
+`Content` also takes `variant=&quot;alert&quot;` for the modal the user has to answer:
+it drops all three implicit ways out and is announced as an `alertdialog`.</div>
+    <div class="kv"><span class="chip">summary: Root provider for a Modal&#39;s open state</span><span class="chip">example: ```tsx
+import { Modal } from &#39;@agentero/design-system/modal&#39;;
+
+&lt;Modal.Root open={isOpen} onOpenChange={setIsOpen}&gt;
+  &lt;Modal.Content size=&quot;md&quot;&gt;
+    &lt;Modal.Title&gt;Delete carrier&lt;/Modal.Title&gt;
+    &lt;Modal.Description&gt;This action cannot be undone.&lt;/Modal.Description&gt;
+    &lt;Modal.Footer&gt;
+      &lt;Modal.Close asChild&gt;
+        &lt;Button variant=&quot;ghost&quot;&gt;Cancel&lt;/Button&gt;
+      &lt;/Modal.Close&gt;
+      &lt;Button onClick={handleDelete}&gt;Delete&lt;/Button&gt;
+    &lt;/Modal.Footer&gt;
+  &lt;/Modal.Content&gt;
+&lt;/Modal.Root&gt;
+```</span><span class="chip">example: ```tsx
+// Alert: no Escape, no overlay click, no X — the user must answer.
+&lt;Modal.Root open={isOpen}&gt;
+  &lt;Modal.Content variant=&quot;alert&quot;&gt;
+    &lt;Modal.Title&gt;Complete your Docusign integration&lt;/Modal.Title&gt;
+    &lt;Modal.Body&gt;Authorize access to finish connecting your account.&lt;/Modal.Body&gt;
+    &lt;Modal.Footer&gt;
+      &lt;Button onClick={handleAuthorize}&gt;Authorize&lt;/Button&gt;
+    &lt;/Modal.Footer&gt;
+  &lt;/Modal.Content&gt;
+&lt;/Modal.Root&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -3826,11 +4847,31 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
   <input id="c-13-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
+  <input id="c-13-components-modal-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">5 prop types</span>
+            </div>
+            <pre><code>Component: src/modal/index.ts::Modal</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>children?: ReactNode
+
+defaultOpen?: boolean
+
+modal?: boolean
+
+onOpenChange?: (open: boolean) =&gt; void
+
+open?: boolean</code></pre>
+          </div>
+        </div>
     
         <div class="panel panel-stories">
           
@@ -3963,7 +5004,9 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               
-              <div class="hint">`variant=&quot;alert&quot;` for a decision the user cannot skip: `Escape` and overlay clicks are ignored, `Modal.Title` renders no X button, and the surface is announced as an `alertdialog`. Only the footer actions close it.</div>
+              <div class="hint">`variant=&quot;alert&quot;` for a decision the user cannot skip: `Escape` and overlay
+clicks are ignored, `Modal.Title` renders no X button, and the surface is
+announced as an `alertdialog`. Only the footer actions close it.</div>
               <pre><code>const Alert = () =&gt; (
     &lt;Modal.Root&gt;
         &lt;Modal.Trigger asChild&gt;
@@ -3986,6 +5029,7 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -4004,12 +5048,29 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
         
         <label for="c-14-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/pagination/pagination.stories.tsx">components-pagination · ./src/pagination/pagination.stories.tsx</div>
-    
-    <div class="hint">Pagination is a 1-indexed paged navigation control with previous/next icon buttons, numeric page buttons, and a leading &quot;X - Y of Z&quot; entries summary. The page list collapses long ranges with `…` ellipses so the control stays compact regardless of total page count. Use it for lists, tables, or grids that are split across pages.</div>
-    
+    <div>1-indexed paged navigation control with prev/next, numeric pages, and entries summary</div>
+    <div class="hint">Pagination is a 1-indexed paged navigation control with previous/next icon
+buttons, numeric page buttons, and a leading &quot;X - Y of Z&quot; entries summary.
+The page list collapses long ranges with `…` ellipses so the control stays
+compact regardless of total page count. Use it for lists, tables, or grids
+that are split across pages.</div>
+    <div class="kv"><span class="chip">summary: 1-indexed paged navigation control with prev/next, numeric pages, and entries summary</span><span class="chip">example: ```tsx
+import { useState } from &#39;react&#39;;
+import { Pagination } from &#39;@agentero/design-system/pagination&#39;;
+
+const [page, setPage] = useState(1);
+
+&lt;Pagination
+  currentPage={page}
+  pageSize={10}
+  totalCount={1000}
+  onPageChange={setPage}
+/&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -4017,6 +5078,7 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
   
   <input id="c-14-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-14-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -4026,7 +5088,7 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
               <span class="badge ok">5 prop types</span>
             </div>
             <pre><code>Component: src/pagination/pagination.tsx::Pagination</code></pre>
@@ -4061,7 +5123,9 @@ totalCount: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Default args playground for Pagination</div>
-              <div class="hint">Default args playground. The first page of a 1,000-item list paged 10 at a time — renders pages 1–5, an ellipsis, and the last page (100), with the previous-page button disabled because we&#39;re on page 1.</div>
+              <div class="hint">Default args playground. The first page of a 1,000-item list paged 10 at a
+time — renders pages 1–5, an ellipsis, and the last page (100), with the
+previous-page button disabled because we&#39;re on page 1.</div>
               <pre><code>const Default = () =&gt; &lt;Pagination currentPage={1} totalCount={1000} pageSize={10} onPageChange={fn()} /&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -4070,7 +5134,9 @@ totalCount: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Short page list with no ellipsis collapse</div>
-              <div class="hint">Short list whose total pages fit in the visible window — no ellipsis is rendered. Exercises the `totalPageNumbers &gt;= totalPageCount` branch in `getPages`.</div>
+              <div class="hint">Short list whose total pages fit in the visible window — no ellipsis is
+rendered. Exercises the `totalPageNumbers &gt;= totalPageCount` branch in
+`getPages`.</div>
               <pre><code>const FewPages = () =&gt; &lt;Pagination
     currentPage={2}
     totalCount={30}
@@ -4083,7 +5149,8 @@ totalCount: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Right-side ellipsis only (current page near start)</div>
-              <div class="hint">Current page sits near the start of the range — left ellipsis is hidden, right ellipsis is shown, and the last page button anchors the right edge.</div>
+              <div class="hint">Current page sits near the start of the range — left ellipsis is hidden,
+right ellipsis is shown, and the last page button anchors the right edge.</div>
               <pre><code>const DotsRight = () =&gt; &lt;Pagination
     currentPage={2}
     totalCount={1000}
@@ -4096,7 +5163,8 @@ totalCount: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Left-side ellipsis only (current page near end)</div>
-              <div class="hint">Current page sits near the end of the range — left ellipsis is shown, right ellipsis is hidden, and the first page button anchors the left edge.</div>
+              <div class="hint">Current page sits near the end of the range — left ellipsis is shown, right
+ellipsis is hidden, and the first page button anchors the left edge.</div>
               <pre><code>const DotsLeft = () =&gt; &lt;Pagination
     currentPage={99}
     totalCount={1000}
@@ -4109,7 +5177,8 @@ totalCount: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Both ellipses visible (current page in middle)</div>
-              <div class="hint">Current page sits in the middle of the range — both ellipses are visible, with the first and last page buttons anchoring each edge.</div>
+              <div class="hint">Current page sits in the middle of the range — both ellipses are visible,
+with the first and last page buttons anchoring each edge.</div>
               <pre><code>const DotsBoth = () =&gt; &lt;Pagination
     currentPage={50}
     totalCount={1000}
@@ -4122,7 +5191,8 @@ totalCount: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Last page selected with disabled next button</div>
-              <div class="hint">Last page selected — the next-page button is disabled and the active page indicator sits on the trailing number.</div>
+              <div class="hint">Last page selected — the next-page button is disabled and the active page
+indicator sits on the trailing number.</div>
               <pre><code>const LastPage = () =&gt; &lt;Pagination currentPage={100} totalCount={1000} pageSize={10} onPageChange={fn()} /&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -4131,7 +5201,9 @@ totalCount: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Interactive controlled example backed by `useState`</div>
-              <div class="hint">Interactive controlled example. Local `useState` owns the page; clicking a page, previous, or next button updates it so the active page indicator and entries summary follow along.</div>
+              <div class="hint">Interactive controlled example. Local `useState` owns the page; clicking a
+page, previous, or next button updates it so the active page indicator and
+entries summary follow along.</div>
               <pre><code>const Controlled = ({ totalCount, pageSize }) =&gt; {
     const [page, setPage] = useState(1);
 
@@ -4147,6 +5219,7 @@ totalCount: number</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -4161,16 +5234,32 @@ totalCount: number</code></pre>
     <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-15-components-popover-stories" class="badge ok as-toggle">4 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/popover/popover.stories.tsx">components-popover · ./src/popover/popover.stories.tsx</div>
-    
-    <div class="hint">Popover is a non-modal floating surface anchored to a trigger, used for rich interactive overlays such as forms, filters, and pickers. Compose it from `Root` / `Trigger` / `Content`, plus optional `Anchor` and `Close`. Built on Radix UI&#39;s Popover primitive, so focus management, dismissal, and collision detection come for free.</div>
-    
+    <div>Root provider for a floating interactive overlay</div>
+    <div class="hint">Popover is a non-modal floating surface anchored to a trigger, used for
+rich interactive overlays such as forms, filters, and pickers. Compose it
+from `Root` / `Trigger` / `Content`, plus optional `Anchor` and `Close`.
+Built on Radix UI&#39;s Popover primitive, so focus management, dismissal, and
+collision detection come for free.</div>
+    <div class="kv"><span class="chip">summary: Root provider for a floating interactive overlay</span><span class="chip">see: {@link https://www.radix-ui.com/primitives/docs/components/popover Radix UI Popover}</span><span class="chip">example: ```tsx
+import { Popover } from &#39;@agentero/design-system/popover&#39;;
+
+&lt;Popover.Root&gt;
+  &lt;Popover.Trigger asChild&gt;
+    &lt;Button&gt;Filters&lt;/Button&gt;
+  &lt;/Popover.Trigger&gt;
+  &lt;Popover.Content align=&quot;start&quot;&gt;
+    &lt;FiltersForm /&gt;
+  &lt;/Popover.Content&gt;
+&lt;/Popover.Root&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -4179,11 +5268,31 @@ totalCount: number</code></pre>
   <input id="c-15-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
+  <input id="c-15-components-popover-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">5 prop types</span>
+            </div>
+            <pre><code>Component: src/popover/index.ts::Popover</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>children?: ReactNode
+
+defaultOpen?: boolean
+
+modal?: boolean
+
+onOpenChange?: (open: boolean) =&gt; void
+
+open?: boolean</code></pre>
+          </div>
+        </div>
     
         <div class="panel panel-stories">
           
@@ -4203,7 +5312,8 @@ totalCount: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Basic click-to-open popover surface</div>
-              <div class="hint">A minimal Popover: a trigger button that reveals a short text surface on click and dismisses on outside click or Escape.</div>
+              <div class="hint">A minimal Popover: a trigger button that reveals a short text surface on
+click and dismisses on outside click or Escape.</div>
               <pre><code>const Default = () =&gt; (
     &lt;Popover.Root&gt;
         &lt;Popover.Trigger asChild&gt;
@@ -4245,7 +5355,8 @@ totalCount: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Popover holding an interactive form with a `Close` action</div>
-              <div class="hint">Rich interactive content — the primary reason to reach for a Popover over a Tooltip. A `Close` inside the surface dismisses it after submitting.</div>
+              <div class="hint">Rich interactive content — the primary reason to reach for a Popover over a
+Tooltip. A `Close` inside the surface dismisses it after submitting.</div>
               <pre><code>const WithForm = () =&gt; (
     &lt;Popover.Root&gt;
         &lt;Popover.Trigger asChild&gt;
@@ -4277,7 +5388,8 @@ totalCount: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Popover positioned against a separate `Anchor` element</div>
-              <div class="hint">`Anchor` positions the Content against an element other than the Trigger — useful when the visual anchor differs from the toggle button.</div>
+              <div class="hint">`Anchor` positions the Content against an element other than the Trigger —
+useful when the visual anchor differs from the toggle button.</div>
               <pre><code>const WithAnchor = () =&gt; (
     &lt;Popover.Root&gt;
         &lt;div className=&quot;flex flex-col items-center gap-4&quot;&gt;
@@ -4296,6 +5408,7 @@ totalCount: number</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -4314,12 +5427,18 @@ totalCount: number</code></pre>
         
         <label for="c-16-components-progress-stories" class="badge ok as-toggle">4 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/progress/progress.stories.tsx">components-progress · ./src/progress/progress.stories.tsx</div>
-    
-    <div class="hint">Progress shows how far a bounded task has advanced. Pass `percentage` (0–100) and optionally a `label` rendered above the bar. The fill paints with `currentColor`, so recolor it with a plain text class — e.g. `className=&quot;text-brand-400&quot;`.</div>
-    
+    <div>Horizontal progress bar with optional label</div>
+    <div class="hint">Progress shows how far a bounded task has advanced. Pass `percentage`
+(0–100) and optionally a `label` rendered above the bar. The fill paints
+with `currentColor`, so recolor it with a plain text class — e.g.
+`className=&quot;text-brand-400&quot;`.</div>
+    <div class="kv"><span class="chip">summary: Horizontal progress bar with optional label</span><span class="chip">example: ```tsx
+&lt;Progress percentage={62} label=&quot;Profile completion&quot; className=&quot;text-brand-400&quot; /&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -4327,6 +5446,7 @@ totalCount: number</code></pre>
   
   <input id="c-16-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-16-components-progress-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -4336,7 +5456,7 @@ totalCount: number</code></pre>
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
               <span class="badge ok">4 prop types</span>
             </div>
             <pre><code>Component: src/progress/progress.tsx::Progress</code></pre>
@@ -4429,6 +5549,7 @@ percentage: number</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -4447,12 +5568,16 @@ percentage: number</code></pre>
         
         <label for="c-17-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/skeleton/skeleton.stories.tsx">components-skeleton · ./src/skeleton/skeleton.stories.tsx</div>
-    
-    <div class="hint">Skeleton renders a pulsing placeholder box while content loads. Size and shape it with Tailwind classes to mirror the content it stands in for.</div>
-    
+    <div>Pulsing placeholder box for loading content</div>
+    <div class="hint">Skeleton renders a pulsing placeholder box while content loads. Size and
+shape it with Tailwind classes to mirror the content it stands in for.</div>
+    <div class="kv"><span class="chip">summary: Pulsing placeholder box for loading content</span><span class="chip">example: ```tsx
+&lt;Skeleton className=&quot;h-4 w-30&quot; /&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -4461,6 +5586,7 @@ percentage: number</code></pre>
   <input id="c-17-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
+  
 
   <div class="panels">
     
@@ -4538,6 +5664,7 @@ percentage: number</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -4552,16 +5679,19 @@ percentage: number</code></pre>
     <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">4 prop types</label>
+        <label for="c-18-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>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/switch/switch.stories.tsx">components-switch · ./src/switch/switch.stories.tsx</div>
-    
-    <div class="hint">Two-state toggle for a setting that takes effect immediately. Prefer it over a Checkbox for a single boolean that applies instantly, and pair it with a `&lt;label htmlFor&gt;` to give it an accessible name.</div>
-    
+    <div>Instant-effect on/off toggle built on Radix Switch</div>
+    <div class="hint">Two-state toggle for a setting that takes effect immediately. Prefer it over
+a Checkbox for a single boolean that applies instantly, and pair it with a
+`&lt;label htmlFor&gt;` to give it an accessible name.</div>
+    <div class="kv"><span class="chip">summary: Instant-effect on/off toggle built on Radix Switch</span><span class="chip">example: &lt;Switch checked={enabled} onCheckedChange={setEnabled} /&gt;</span><span class="chip">example: &lt;Switch id=&quot;email-notifications&quot; label=&quot;Email&quot; checked={on} onCheckedChange={setOn} /&gt;</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -4569,6 +5699,7 @@ percentage: number</code></pre>
   
   <input id="c-18-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-18-components-switch-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -4578,13 +5709,17 @@ percentage: number</code></pre>
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
-              <span class="badge ok">4 prop types</span>
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
+              <span class="badge ok">8 prop types</span>
             </div>
             <pre><code>Component: src/switch/switch.tsx::Switch</code></pre>
             <pre><code>Props:</code></pre>
             <pre><code>asChild?: boolean
 
+checked?: boolean
+
+defaultChecked?: boolean
+
 /**
  * Optional text rendered beside the toggle and associated with it via
  * `htmlFor`. Provide an `id` so the association resolves. Omit it to keep
@@ -4592,6 +5727,10 @@ percentage: number</code></pre>
  */
 label?: string
 
+onCheckedChange?: (checked: boolean) =&gt; void
+
+required?: boolean
+
 reverse?: boolean
 
 size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
@@ -4695,7 +5834,8 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               
-              <div class="hint">The built-in `label` prop renders an associated text label beside the toggle (wired via `htmlFor`/`id`); `reverse` places the label before the toggle.</div>
+              <div class="hint">The built-in `label` prop renders an associated text label beside the toggle
+(wired via `htmlFor`/`id`); `reverse` places the label before the toggle.</div>
               <pre><code>const WithLabel = () =&gt; (
     &lt;div className=&quot;flex items-center gap-6&quot;&gt;
         &lt;Switch id=&quot;with-label&quot; label=&quot;Email&quot; defaultChecked /&gt;
@@ -4726,6 +5866,7 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -4740,16 +5881,34 @@ 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-19-components-table-stories" class="badge ok as-toggle">9 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/data-table/table.stories.tsx">components-table · ./src/data-table/table.stories.tsx</div>
-    
-    <div class="hint">Low-level presentational table primitive: native `&lt;table&gt;` markup themed for scrolling, sticky rows, cell padding, dividers, hover, and expandable rows. For sorting/toolbar/pagination, prefer `DataTable`.</div>
-    
+    <div>Table root that owns the scroll viewport and `&lt;table&gt;` element</div>
+    <div class="hint">Low-level presentational table primitive: native `&lt;table&gt;` markup themed for
+scrolling, sticky rows, cell padding, dividers, hover, and expandable rows.
+For sorting/toolbar/pagination, prefer `DataTable`.</div>
+    <div class="kv"><span class="chip">summary: Table root that owns the scroll viewport and `&lt;table&gt;` element</span><span class="chip">example: ```tsx
+import { Table } from &#39;@agentero/design-system/data-table&#39;;
+
+&lt;Table.Root size=&quot;md&quot; sticky=&quot;head&quot;&gt;
+  &lt;Table.Head&gt;
+    &lt;Table.Row&gt;
+      &lt;Table.Header&gt;Name&lt;/Table.Header&gt;
+    &lt;/Table.Row&gt;
+  &lt;/Table.Head&gt;
+  &lt;Table.Body&gt;
+    &lt;Table.Row&gt;
+      &lt;Table.Cell&gt;Jane Doe&lt;/Table.Cell&gt;
+    &lt;/Table.Row&gt;
+  &lt;/Table.Body&gt;
+&lt;/Table.Root&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -4758,11 +5917,33 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
   <input id="c-19-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
+  <input id="c-19-components-table-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">6 prop types</span>
+            </div>
+            <pre><code>Component: src/data-table/index.ts::Table</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>children?: ReactNode
+
+embed?: boolean
+
+enclosed?: boolean
+
+ref?: Ref&lt;HTMLDivElement&gt; | undefined
+
+size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;
+
+sticky?: &quot;header&quot; | &quot;headerAndFooter&quot;</code></pre>
+          </div>
+        </div>
     
         <div class="panel panel-stories">
           
@@ -4837,7 +6018,8 @@ import { Fragment } from "react";</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>enclosed — bordered, rounded card container</div>
-              <div class="hint">`enclosed` wraps the table in a bordered, rounded container — the standalone &quot;card&quot; look, as opposed to a full-bleed page table.</div>
+              <div class="hint">`enclosed` wraps the table in a bordered, rounded container — the standalone
+&quot;card&quot; look, as opposed to a full-bleed page table.</div>
               <pre><code>const Enclosed = args =&gt; renderTable(args);</code></pre>
             </div>
             <div class="note ok">
@@ -4915,258 +6097,109 @@ import { Fragment } from "react";</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
   class="card 
-  has-error 
-  has-info 
+  no-error 
+  no-info 
   no-story-error
   no-doc-error"
   role="listitem"
   aria-label="Tabs.Root">
   <div class="head">
     <div class="title">
-      <h2><span class="status-dot dot-err"></span> Tabs.Root</h2>
+      <h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
       <div class="badges">
-        <label for="c-20-components-tabs-err" class="badge err as-toggle">prop type error</label>
-        <label for="c-20-components-tabs-info" class="badge info as-toggle">1 info</label>
+        <label for="c-20-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>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/tabs/tabs.stories.tsx">components-tabs · ./src/tabs/tabs.stories.tsx</div>
-    
-    
-    
+    <div>Root provider for a Tabs group</div>
+    <div class="hint">Tabs is a compound built on Radix UI: `Root` owns the selected tab, `List`
+holds the `Trigger`s, and one `Content` renders per tab. `variant` picks the
+look — `line` (default) underlines the active tab, `enclosed` renders
+segmented pills, `button` renders button-like tabs.
+
+`Label` is text styled as an inactive trigger, for a single title sitting in
+the same row as the tabs.</div>
+    <div class="kv"><span class="chip">summary: Root provider for a Tabs group</span><span class="chip">example: ```tsx
+import { Tabs } from &#39;@agentero/design-system/tabs&#39;;
+
+&lt;Tabs.Root defaultValue=&quot;overview&quot;&gt;
+  &lt;Tabs.List&gt;
+    &lt;Tabs.Trigger value=&quot;overview&quot;&gt;Overview&lt;/Tabs.Trigger&gt;
+    &lt;Tabs.Trigger value=&quot;activity&quot;&gt;Activity&lt;/Tabs.Trigger&gt;
+  &lt;/Tabs.List&gt;
+  &lt;Tabs.Content value=&quot;overview&quot;&gt;…&lt;/Tabs.Content&gt;
+  &lt;Tabs.Content value=&quot;activity&quot;&gt;…&lt;/Tabs.Content&gt;
+&lt;/Tabs.Root&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
-  <input id="c-20-components-tabs-err" class="tg tg-err" type="checkbox" hidden />
-  <input id="c-20-components-tabs-info" class="tg tg-info" type="checkbox" hidden />
+  
+  
   <input id="c-20-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
+  <input id="c-20-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
-        <div class="panel panel-err">
-          
-    <div class="note err">
-      <div class="note-title">Prop type error</div>
-      <div class="note-body"><pre><code>No component file found for the &quot;Tabs.Root&quot; component.
-  4 | import { Tabs } from &#39;.&#39;;
-  5 |
-&gt; 6 | const meta = {
-    | ^
-  7 | 	title: &#39;Components/Tabs&#39;,
-  8 | 	component: Tabs.Root,
-  9 | 	tags: [&#39;autodocs&#39;]
-
-./src/tabs/tabs.stories.tsx:
-import type { Meta, StoryObj } from &#39;@storybook/react-vite&#39;;
-import { expect, userEvent, within } from &#39;storybook/test&#39;;
-
-import { Tabs } from &#39;.&#39;;
-
-const meta = {
-	title: &#39;Components/Tabs&#39;,
-	component: Tabs.Root,
-	tags: [&#39;autodocs&#39;]
-} satisfies Meta&lt;typeof Tabs.Root&gt;;
-
-export default meta;
-
-type Story = StoryObj&lt;typeof meta&gt;;
-
-const TABS = [
-	{ value: &#39;overview&#39;, label: &#39;Overview&#39;, body: &#39;A summary of the policy and its coverage.&#39; },
-	{ value: &#39;documents&#39;, label: &#39;Documents&#39;, body: &#39;Declarations, endorsements and forms.&#39; },
-	{ value: &#39;activity&#39;, label: &#39;Activity&#39;, body: &#39;A timeline of recent changes and events.&#39; }
-] as const;
-
-const TabItems = () =&gt;
-	TABS.map(({ value, label }) =&gt; (
-		&lt;Tabs.Trigger key={value} value={value}&gt;
-			{label}
-		&lt;/Tabs.Trigger&gt;
-	));
-
-const TabPanels = () =&gt;
-	TABS.map(({ value, body }) =&gt; (
-		&lt;Tabs.Content key={value} value={value} className=&quot;p-4 text-sm text-text-default-base-primary&quot;&gt;
-			{body}
-		&lt;/Tabs.Content&gt;
-	));
-
-/** `line` (default): the active tab is marked with an animated underline. */
-export const Default: Story = {
-	args: {
-		variant: &#39;line&#39;,
-		defaultValue: &#39;overview&#39;
-	},
-	argTypes: {
-		variant: {
-			control: &#39;radio&#39;,
-			options: [&#39;line&#39;, &#39;enclosed&#39;, &#39;button&#39;],
-			description: &#39;line = underline; enclosed = segmented pills; button = button-like tabs&#39;
-		}
-	},
-	render: args =&gt; (
-		&lt;Tabs.Root {...args}&gt;
-			&lt;Tabs.List&gt;
-				&lt;TabItems /&gt;
-			&lt;/Tabs.List&gt;
-			&lt;TabPanels /&gt;
-		&lt;/Tabs.Root&gt;
-	)
-};
-
-/** `enclosed` renders segmented pills; the active tab sits on a raised surface. */
-export const Enclosed: Story = {
-	render: () =&gt; (
-		&lt;Tabs.Root variant=&quot;enclosed&quot; defaultValue=&quot;overview&quot;&gt;
-			&lt;Tabs.List&gt;
-				&lt;TabItems /&gt;
-			&lt;/Tabs.List&gt;
-			&lt;TabPanels /&gt;
-		&lt;/Tabs.Root&gt;
-	)
-};
-
-/** `button` renders button-like tabs, with room for a leading icon per trigger. */
-export const Buttons: Story = {
-	render: () =&gt; (
-		&lt;Tabs.Root variant=&quot;button&quot; defaultValue=&quot;overview&quot;&gt;
-			&lt;Tabs.List&gt;
-				&lt;TabItems /&gt;
-			&lt;/Tabs.List&gt;
-			&lt;TabPanels /&gt;
-		&lt;/Tabs.Root&gt;
-	)
-};
-
-/** `position` aligns the tab list within the row (`start` is the default). */
-export const Positions: Story = {
-	render: () =&gt; (
-		&lt;div className=&quot;flex flex-col gap-8&quot;&gt;
-			{([&#39;start&#39;, &#39;center&#39;, &#39;end&#39;] as const).map(position =&gt; (
-				&lt;Tabs.Root key={position} variant=&quot;enclosed&quot; position={position} defaultValue=&quot;overview&quot;&gt;
-					&lt;Tabs.List&gt;
-						&lt;TabItems /&gt;
-					&lt;/Tabs.List&gt;
-					&lt;TabPanels /&gt;
-				&lt;/Tabs.Root&gt;
-			))}
-		&lt;/div&gt;
-	)
-};
-
-/** `position=&quot;full&quot;` stretches the tab list to fill the available width. */
-export const FullWidth: Story = {
-	render: () =&gt; (
-		&lt;Tabs.Root variant=&quot;enclosed&quot; position=&quot;full&quot; defaultValue=&quot;overview&quot;&gt;
-			&lt;Tabs.List&gt;
-				&lt;TabItems /&gt;
-			&lt;/Tabs.List&gt;
-			&lt;TabPanels /&gt;
-		&lt;/Tabs.Root&gt;
-	)
-};
-
-/**
- * Triggers accept `asChild` to render as another element — e.g. a router link.
- * The trigger resets the anchor&#39;s default underline, so link-based tabs match
- * the button-based ones.
- */
-export const AsChildLinks: Story = {
-	render: () =&gt; (
-		&lt;Tabs.Root variant=&quot;line&quot; defaultValue=&quot;overview&quot;&gt;
-			&lt;Tabs.List&gt;
-				{TABS.map(({ value, label }) =&gt; (
-					&lt;Tabs.Trigger key={value} value={value} asChild&gt;
-						&lt;a href={`#${value}`}&gt;{label}&lt;/a&gt;
-					&lt;/Tabs.Trigger&gt;
-				))}
-			&lt;/Tabs.List&gt;
-			&lt;TabPanels /&gt;
-		&lt;/Tabs.Root&gt;
-	),
-	play: async ({ canvasElement }) =&gt; {
-		const canvas = within(canvasElement);
-		const overview = canvas.getByRole(&#39;tab&#39;, { name: /overview/i });
-
-		await expect(overview.tagName).toBe(&#39;A&#39;);
-		await expect(getComputedStyle(overview).textDecorationLine).toBe(&#39;none&#39;);
-	}
-};
-
-/** Selecting a tab reveals its panel and hides the others. */
-export const SwitchTabs: Story = {
-	args: {
-		variant: &#39;line&#39;,
-		defaultValue: &#39;overview&#39;
-	},
-	render: args =&gt; (
-		&lt;Tabs.Root {...args}&gt;
-			&lt;Tabs.List&gt;
-				&lt;TabItems /&gt;
-			&lt;/Tabs.List&gt;
-			&lt;TabPanels /&gt;
-		&lt;/Tabs.Root&gt;
-	),
-	play: async ({ canvasElement }) =&gt; {
-		const canvas = within(canvasElement);
-		const overview = canvas.getByRole(&#39;tab&#39;, { name: /overview/i });
-		const documents = canvas.getByRole(&#39;tab&#39;, { name: /documents/i });
-
-		await expect(overview).toHaveAttribute(&#39;data-state&#39;, &#39;active&#39;);
-		await expect(await canvas.findByText(/summary of the policy/i)).toBeVisible();
-
-		await userEvent.click(documents);
-		await expect(documents).toHaveAttribute(&#39;data-state&#39;, &#39;active&#39;);
-		await expect(overview).toHaveAttribute(&#39;data-state&#39;, &#39;inactive&#39;);
-		await expect(await canvas.findByText(/declarations, endorsements/i)).toBeVisible();
-	}
-};
-
-/**
- * A standalone `Label` gives a panel with a single, non-interactive title the
- * inactive trigger&#39;s exact look: outside a `Root` it never gets the active
- * data-state, and `pointer-events-none` keeps hover styles off. It is a plain
- * `span`, so wrap it in a heading element for heading semantics. No tab or
- * tablist role is announced.
- */
-export const SingleTitle: Story = {
-	render: () =&gt; (
-		&lt;div className=&quot;flex flex-col items-start gap-6&quot;&gt;
-			{([&#39;line&#39;, &#39;enclosed&#39;, &#39;button&#39;] as const).map(variant =&gt; (
-				&lt;h2 key={variant}&gt;
-					&lt;Tabs.Label variant={variant}&gt;Shared coverages ({variant})&lt;/Tabs.Label&gt;
-				&lt;/h2&gt;
-			))}
-		&lt;/div&gt;
-	),
-	play: async ({ canvasElement }) =&gt; {
-		const canvas = within(canvasElement);
-
-		await expect(canvas.getAllByRole(&#39;heading&#39;)).toHaveLength(3);
-		await expect(canvas.queryByRole(&#39;tablist&#39;)).not.toBeInTheDocument();
-		await expect(canvas.queryByRole(&#39;tab&#39;)).not.toBeInTheDocument();
-	}
-};
-</code></pre></div>
-    </div>
-        </div>
     
-        <div class="panel panel-info">
-          
-    <div class="note info">
-      <div class="note-title">Info</div>
-      <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
-    </div>
-        </div>
     
+        <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">9 prop types</span>
+            </div>
+            <pre><code>Component: src/tabs/index.ts::Tabs</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * Whether a tab is activated automatically or manually.
+ */
+activationMode?: &quot;manual&quot; | &quot;automatic&quot; = automatic
+
+asChild?: boolean
+
+/**
+ * The value of the tab to select by default, if uncontrolled
+ */
+defaultValue?: string
+
+/**
+ * The direction of navigation between toolbar items.
+ */
+dir?: &quot;ltr&quot; | &quot;rtl&quot;
+
+/**
+ * A function called when a new tab is selected
+ */
+onValueChange?: (value: string) =&gt; void
+
+/**
+ * The orientation the tabs are layed out.
+ * Mainly so arrow navigation is done accordingly (left &amp; right vs. up &amp; down)
+ */
+orientation?: &quot;horizontal&quot; | &quot;vertical&quot; = horizontal
+
+position?: &quot;center&quot; | &quot;start&quot; | &quot;end&quot; | &quot;full&quot;
+
+/**
+ * The value for the selected tab, if controlled
+ */
+value?: string
+
+variant?: &quot;enclosed&quot; | &quot;button&quot; | &quot;line&quot;</code></pre>
+          </div>
+        </div>
     
         <div class="panel panel-stories">
           
@@ -5268,7 +6301,9 @@ export const SingleTitle: Story = {
                 <span class="badge ok">story ok</span>
               </div>
               
-              <div class="hint">Triggers accept `asChild` to render as another element — e.g. a router link. The trigger resets the anchor&#39;s default underline, so link-based tabs match the button-based ones.</div>
+              <div class="hint">Triggers accept `asChild` to render as another element — e.g. a router link.
+The trigger resets the anchor&#39;s default underline, so link-based tabs match
+the button-based ones.</div>
               <pre><code>const AsChildLinks = () =&gt; (
     &lt;Tabs.Root variant=&quot;line&quot; defaultValue=&quot;overview&quot;&gt;
         &lt;Tabs.List&gt;
@@ -5302,7 +6337,11 @@ export const SingleTitle: Story = {
                 <span class="badge ok">story ok</span>
               </div>
               
-              <div class="hint">A standalone `Label` gives a panel with a single, non-interactive title the inactive trigger&#39;s exact look: outside a `Root` it never gets the active data-state, and `pointer-events-none` keeps hover styles off. It is a plain `span`, so wrap it in a heading element for heading semantics. No tab or tablist role is announced.</div>
+              <div class="hint">A standalone `Label` gives a panel with a single, non-interactive title the
+inactive trigger&#39;s exact look: outside a `Root` it never gets the active
+data-state, and `pointer-events-none` keeps hover styles off. It is a plain
+`span`, so wrap it in a heading element for heading semantics. No tab or
+tablist role is announced.</div>
               <pre><code>const SingleTitle = () =&gt; (
     &lt;div className=&quot;flex flex-col items-start gap-6&quot;&gt;
         {([&#39;line&#39;, &#39;enclosed&#39;, &#39;button&#39;] as const).map(variant =&gt; (
@@ -5315,6 +6354,7 @@ export const SingleTitle: Story = {
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -5329,16 +6369,22 @@ export const SingleTitle: Story = {
     <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">6 prop types</label>
+        <label for="c-21-components-tag-props" class="badge ok as-toggle">8 prop types</label>
         
         <label for="c-21-components-tag-stories" class="badge ok as-toggle">10 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/tag/tag.stories.tsx">components-tag · ./src/tag/tag.stories.tsx</div>
-    
-    <div class="hint">Tag is a compact semantic label for statuses, categories, counts, and attributes. Pick `color` for meaning, `variant` for fill emphasis, and `size` for prominence. A plain Tag is a static badge; pass `asChild` to make it an interactive link or button, which adds the pointer cursor and hover fill.</div>
-    
+    <div>Compact semantic label; renders a static badge `&lt;span&gt;` or, with `asChild`, an interactive element</div>
+    <div class="hint">Tag is a compact semantic label for statuses, categories, counts, and
+attributes. Pick `color` for meaning, `variant` for fill emphasis, and
+`size` for prominence. A plain Tag is a static badge; pass `asChild` to make
+it an interactive link or button, which adds the pointer cursor and hover fill.</div>
+    <div class="kv"><span class="chip">summary: Compact semantic label; renders a static badge `&lt;span&gt;` or, with `asChild`, an interactive element</span><span class="chip">example: &lt;Tag color=&quot;positive&quot;&gt;Active&lt;/Tag&gt;</span><span class="chip">example: &lt;Tag asChild color=&quot;informative&quot;&gt;
+  &lt;a href=&quot;/carriers&quot;&gt;View carriers&lt;/a&gt;
+&lt;/Tag&gt;</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -5346,6 +6392,7 @@ export const SingleTitle: Story = {
   
   <input id="c-21-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-21-components-tag-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -5355,8 +6402,8 @@ export const SingleTitle: Story = {
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
-              <span class="badge ok">6 prop types</span>
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
+              <span class="badge ok">8 prop types</span>
             </div>
             <pre><code>Component: src/tag/tag.tsx::Tag</code></pre>
             <pre><code>Props:</code></pre>
@@ -5367,10 +6414,19 @@ export const SingleTitle: Story = {
  */
 asChild?: boolean
 
+children?: ReactNode
+
 color?: &quot;neutral&quot; | &quot;danger&quot; | &quot;warning&quot; | &quot;creative&quot; | &quot;dynamic&quot; | &quot;playful&quot; | &quot;positive&quot; | &quot;informative&quot;
 
 pill?: boolean
 
+/**
+ * Allows getting a ref to the component instance.
+ * Once the component unmounts, React will set `ref.current` to `null`
+ * (or call the ref with `null` if you passed a callback ref).
+ */
+ref?: ((((instance: HTMLSpanElement | null) =&gt; void | (() =&gt; VoidOrUndefinedOnly)) | RefObject&lt;HTMLSpanElement | null&gt;) &amp; (((instance: HTMLElement | null) =&gt; void | (() =&gt; VoidOrUndefinedOnly)) | RefObject&lt;...&gt;)) | null | undefined
+
 size?: &quot;sm&quot; | &quot;md&quot; | &quot;xs&quot;
 
 truncate?: boolean
@@ -5397,7 +6453,8 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
                 <span class="badge ok">story ok</span>
               </div>
               <div>Default args playground for Tag</div>
-              <div class="hint">Args-controlled playground. Toggle `color`, `variant`, `size`, `pill`, and `truncate` from the Controls panel to explore every visual combination.</div>
+              <div class="hint">Args-controlled playground. Toggle `color`, `variant`, `size`, `pill`, and
+`truncate` from the Controls panel to explore every visual combination.</div>
               <pre><code>const Default = () =&gt; &lt;Tag color=&quot;neutral&quot; variant=&quot;secondary&quot; size=&quot;sm&quot;&gt;Default&lt;/Tag&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -5406,7 +6463,9 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
                 <span class="badge ok">story ok</span>
               </div>
               <div>All three sizes across icon-only, icon + text, and text-only</div>
-              <div class="hint">The three sizes — `xs` (20px), `sm` (24px, default), and `md` (32px) — each shown icon-only, icon + text, and text-only so the type and icon scale are visible.</div>
+              <div class="hint">The three sizes — `xs` (20px), `sm` (24px, default), and `md` (32px) — each
+shown icon-only, icon + text, and text-only so the type and icon scale are
+visible.</div>
               <pre><code>const Sizes = () =&gt; (
     &lt;Stack&gt;
         {([&#39;xs&#39;, &#39;sm&#39;, &#39;md&#39;] as const).map(size =&gt; (
@@ -5440,7 +6499,8 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
                 <span class="badge ok">story ok</span>
               </div>
               <div>Rounded (default) vs pill</div>
-              <div class="hint">The `Style` axis: the default rounded corners (top row) versus `pill` fully rounded (bottom row), shown across every fill variant.</div>
+              <div class="hint">The `Style` axis: the default rounded corners (top row) versus `pill` fully
+rounded (bottom row), shown across every fill variant.</div>
               <pre><code>const Styles = () =&gt; (
     &lt;Stack gap=&quot;0.5rem&quot;&gt;
         &lt;Row&gt;
@@ -5466,7 +6526,10 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
                 <span class="badge ok">story ok</span>
               </div>
               <div>Static badge vs interactive (asChild) hover</div>
-              <div class="hint">Static badge vs interactive Tag. A plain `&lt;span&gt;` badge has no hover; pass `asChild` with a `&lt;button&gt;` (or `&lt;a&gt;`) to make it interactive — that adds the pointer cursor and reveals the hover fill on `:hover`. Hover the middle and right Tags to see it.</div>
+              <div class="hint">Static badge vs interactive Tag. A plain `&lt;span&gt;` badge has no hover; pass
+`asChild` with a `&lt;button&gt;` (or `&lt;a&gt;`) to make it interactive — that adds the
+pointer cursor and reveals the hover fill on `:hover`. Hover the middle and
+right Tags to see it.</div>
               <pre><code>const Interactive = () =&gt; (
     &lt;Row&gt;
         &lt;Tag color=&quot;informative&quot; variant=&quot;secondary&quot;&gt;
@@ -5489,7 +6552,8 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
                 <span class="badge ok">story ok</span>
               </div>
               <div>`secondary` variant across all colors</div>
-              <div class="hint">`secondary` fills with a tinted background plus a matching border, shown across every color.</div>
+              <div class="hint">`secondary` fills with a tinted background plus a matching border, shown
+across every color.</div>
               <pre><code>const Secondary = () =&gt; (
     &lt;Row&gt;
         {COLORS.map(color =&gt; (
@@ -5506,7 +6570,8 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
                 <span class="badge ok">story ok</span>
               </div>
               <div>`tertiary` variant across all colors</div>
-              <div class="hint">`tertiary` (default) fills with a tinted background and no border, shown across every color.</div>
+              <div class="hint">`tertiary` (default) fills with a tinted background and no border, shown
+across every color.</div>
               <pre><code>const Tertiary = () =&gt; (
     &lt;Row&gt;
         {COLORS.map(color =&gt; (
@@ -5523,7 +6588,8 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
                 <span class="badge ok">story ok</span>
               </div>
               <div>`ghost` variant across all colors</div>
-              <div class="hint">`ghost` shows colored text alone with no background or border, across every color.</div>
+              <div class="hint">`ghost` shows colored text alone with no background or border, across every
+color.</div>
               <pre><code>const Ghost = () =&gt; (
     &lt;Row&gt;
         {COLORS.map(color =&gt; (
@@ -5540,7 +6606,9 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
                 <span class="badge ok">story ok</span>
               </div>
               <div>`invisible` variant as span and as interactive button</div>
-              <div class="hint">`invisible` stays fully transparent until hovered, then reveals its fill. The top row renders plain `&lt;span&gt;` Tags; the bottom row renders interactive Tags via `asChild` with a `&lt;button&gt;` child.</div>
+              <div class="hint">`invisible` stays fully transparent until hovered, then reveals its fill.
+The top row renders plain `&lt;span&gt;` Tags; the bottom row renders interactive
+Tags via `asChild` with a `&lt;button&gt;` child.</div>
               <pre><code>const Invisible = () =&gt; (
     &lt;Stack gap=&quot;0.5rem&quot;&gt;
         &lt;Row&gt;
@@ -5566,7 +6634,8 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
                 <span class="badge ok">story ok</span>
               </div>
               <div>Variant × color grid with icons</div>
-              <div class="hint">Every variant for every color rendered with a leading and trailing icon. Icons are tinted with each color&#39;s `icon-tag-*` token.</div>
+              <div class="hint">Every variant for every color rendered with a leading and trailing icon.
+Icons are tinted with each color&#39;s `icon-tag-*` token.</div>
               <pre><code>const WithIcon = () =&gt; (
     &lt;Stack&gt;
         {COLORS.map(color =&gt; (
@@ -5589,7 +6658,9 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
                 <span class="badge ok">story ok</span>
               </div>
               <div>Variant × color matrix — default, pill, button, and icon layouts</div>
-              <div class="hint">Full matrix: every variant for every color, repeated as default, as `pill`, as an interactive `asChild` `&lt;button&gt;`, with a single leading icon, with leading + trailing icons, and icon-only.</div>
+              <div class="hint">Full matrix: every variant for every color, repeated as default, as `pill`,
+as an interactive `asChild` `&lt;button&gt;`, with a single leading icon, with
+leading + trailing icons, and icon-only.</div>
               <pre><code>const Colors = () =&gt; (
     &lt;div style={{ display: &#39;flex&#39;, gap: &#39;4rem&#39;, flexWrap: &#39;wrap&#39; }}&gt;
         &lt;Stack&gt;
@@ -5689,6 +6760,7 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -5707,12 +6779,18 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
         
         <label for="c-22-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/toast/toast.stories.tsx">components-toast · ./src/toast/toast.stories.tsx</div>
-    
-    <div class="hint">Toast renders transient feedback about an outcome — saved, failed, warning, info — without interrupting the user&#39;s flow. Mount `&lt;Toast /&gt;` once near the app root to register the provider, then call the imperative `toast()` API from anywhere in the tree. Five semantic types (`neutral`, `success`, `error`, `warning`, `info`) × two layouts (`inline`, `expanded`) cover the common feedback patterns.</div>
-    
+    <div>Toast provider; mount once near the app root</div>
+    <div class="hint">Toast renders transient feedback about an outcome — saved, failed, warning,
+info — without interrupting the user&#39;s flow. Mount `&lt;Toast /&gt;` once near
+the app root to register the provider, then call the imperative `toast()`
+API from anywhere in the tree. Five semantic types (`neutral`, `success`,
+`error`, `warning`, `info`) × two layouts (`inline`, `expanded`) cover the
+common feedback patterns.</div>
+    <div class="kv"><span class="chip">summary: Toast provider; mount once near the app root</span><span class="chip">example: &lt;Toast /&gt;</span><span class="chip">example: &lt;Toast position=&quot;top-center&quot; duration={4000} /&gt;</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -5720,6 +6798,7 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
   
   <input id="c-22-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-22-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -5729,7 +6808,7 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
               <span class="badge ok">11 prop types</span>
             </div>
             <pre><code>Component: src/toast/toast.tsx::Toast</code></pre>
@@ -5772,12 +6851,12 @@ invert?: boolean
 /**
  * Offset from the screen edge, in pixels or as a CSS length.
  */
-offset?: string | number
+offset?: string | number | undefined
 
 /**
  * Placement of the toaster on the screen. Defaults to `&#39;bottom-right&#39;`.
  */
-position?: ToastPosition = bottom-right
+position?: &quot;top-left&quot; | &quot;top-center&quot; | &quot;top-right&quot; | &quot;bottom-left&quot; | &quot;bottom-center&quot; | &quot;bottom-right&quot; = &#39;bottom-right&#39;
 
 /**
  * When `true`, sonner paints colored backgrounds per type (DS uses its own icon tokens by default).
@@ -5809,7 +6888,9 @@ visibleToasts?: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Default playground for the Toast provider</div>
-              <div class="hint">Args-controlled playground. Click the button to fire a neutral toast; tweak `position` and `duration` from the Controls panel to preview the provider defaults.</div>
+              <div class="hint">Args-controlled playground. Click the button to fire a neutral toast; tweak
+`position` and `duration` from the Controls panel to preview the provider
+defaults.</div>
               <pre><code>const Default = () =&gt; (
     &lt;div style={{ minHeight: &#39;240px&#39; }}&gt;
         &lt;Button variant=&quot;secondary&quot; onClick={() =&gt; toast(&#39;Hello from Toast&#39;)}&gt;
@@ -5824,7 +6905,9 @@ visibleToasts?: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Inline layout across all five semantic types</div>
-              <div class="hint">Inline layout (default). Compact treatment — title with an optional description stacked directly below it. The `type` drives the icon color. Use for short acknowledgments that don&#39;t need a colored rail.</div>
+              <div class="hint">Inline layout (default). Compact treatment — title with an optional
+description stacked directly below it. The `type` drives the icon color.
+Use for short acknowledgments that don&#39;t need a colored rail.</div>
               <pre><code>const Inline = () =&gt; (
     &lt;div style={{ display: &#39;flex&#39;, flexWrap: &#39;wrap&#39;, gap: &#39;0.5rem&#39; }}&gt;
         &lt;Button
@@ -5867,7 +6950,9 @@ visibleToasts?: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Expanded layout across all five semantic types</div>
-              <div class="hint">Expanded layout. Multi-line treatment with a 0.375rem colored left rail that tracks the toast&#39;s `type`. Use for feedback that benefits from a description on its own line or a trailing action button.</div>
+              <div class="hint">Expanded layout. Multi-line treatment with a 0.375rem colored left rail
+that tracks the toast&#39;s `type`. Use for feedback that benefits from a
+description on its own line or a trailing action button.</div>
               <pre><code>const Expanded = () =&gt; (
     &lt;div style={{ display: &#39;flex&#39;, flexWrap: &#39;wrap&#39;, gap: &#39;0.5rem&#39; }}&gt;
         &lt;Button
@@ -5929,7 +7014,9 @@ visibleToasts?: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Toast with a structured action button</div>
-              <div class="hint">Toast with a structured `action` object. Passing `{ label, onClick }` renders the built-in secondary Button; the handler runs and the toast auto-dismisses afterward.</div>
+              <div class="hint">Toast with a structured `action` object. Passing `{ label, onClick }`
+renders the built-in secondary Button; the handler runs and the toast
+auto-dismisses afterward.</div>
               <pre><code>const WithActionObject = () =&gt; (
     &lt;Button
         variant=&quot;secondary&quot;
@@ -5950,7 +7037,9 @@ visibleToasts?: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Toast with a custom ReactNode action</div>
-              <div class="hint">Toast with a raw-ReactNode `action`. Pass any JSX to render a custom trailing control — a link, a pair of buttons, etc. — when the default secondary Button doesn&#39;t fit.</div>
+              <div class="hint">Toast with a raw-ReactNode `action`. Pass any JSX to render a custom
+trailing control — a link, a pair of buttons, etc. — when the default
+secondary Button doesn&#39;t fit.</div>
               <pre><code>const WithActionNode = () =&gt; (
     &lt;Button
         variant=&quot;secondary&quot;
@@ -5974,7 +7063,8 @@ visibleToasts?: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Toast with an action and a cancel control</div>
-              <div class="hint">Toast with both `action` and `cancel`. Cancel renders as a ghost Button next to the action; its handler runs and the toast auto-dismisses.</div>
+              <div class="hint">Toast with both `action` and `cancel`. Cancel renders as a ghost Button
+next to the action; its handler runs and the toast auto-dismisses.</div>
               <pre><code>const WithActionAndCancel = () =&gt; (
     &lt;Button
         variant=&quot;secondary&quot;
@@ -5996,7 +7086,9 @@ visibleToasts?: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Non-dismissible toast (no close button)</div>
-              <div class="hint">Non-dismissible toast. Setting `dismissible: false` hides the close button; the toast still auto-dismisses when its `duration` elapses, or programmatically via `toast.dismiss(id)`.</div>
+              <div class="hint">Non-dismissible toast. Setting `dismissible: false` hides the close button;
+the toast still auto-dismisses when its `duration` elapses, or
+programmatically via `toast.dismiss(id)`.</div>
               <pre><code>const NonDismissible = () =&gt; (
     &lt;Button
         variant=&quot;secondary&quot;
@@ -6016,7 +7108,8 @@ visibleToasts?: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Toast with a custom `duration`</div>
-              <div class="hint">Long-duration toast. `duration` (in ms) overrides the provider default so long-running operations stay visible until they&#39;re relevant.</div>
+              <div class="hint">Long-duration toast. `duration` (in ms) overrides the provider default so
+long-running operations stay visible until they&#39;re relevant.</div>
               <pre><code>const LongDuration = () =&gt; (
     &lt;Button
         variant=&quot;secondary&quot;
@@ -6036,7 +7129,8 @@ visibleToasts?: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Dismiss a toast programmatically via its id</div>
-              <div class="hint">Programmatic dismissal. `toast()` returns the toast id, which you can pass to `toast.dismiss(id)` to clear it before its duration elapses.</div>
+              <div class="hint">Programmatic dismissal. `toast()` returns the toast id, which you can pass
+to `toast.dismiss(id)` to clear it before its duration elapses.</div>
               <pre><code>const ProgrammaticDismiss = () =&gt; {
     let toastId: string | number | undefined;
     return (
@@ -6065,7 +7159,9 @@ visibleToasts?: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Wire a toast to an async operation via `toast.promise`</div>
-              <div class="hint">`toast.promise` wires a toast to an async operation — loading while the promise is pending, success or error when it settles. Useful for save/submit flows where the outcome feeds back into the same toast.</div>
+              <div class="hint">`toast.promise` wires a toast to an async operation — loading while the
+promise is pending, success or error when it settles. Useful for
+save/submit flows where the outcome feeds back into the same toast.</div>
               <pre><code>const WithPromise = () =&gt; {
     const fakeFetch = () =&gt;
         new Promise&lt;string&gt;((resolve, reject) =&gt; {
@@ -6095,7 +7191,9 @@ visibleToasts?: number</code></pre>
                 <span class="badge ok">story ok</span>
               </div>
               <div>Override the default type-based icon</div>
-              <div class="hint">Custom `icon` override. Pass any ReactNode as `icon` to replace the type-based default — helpful when the toast reflects a domain-specific action (e.g., a sync icon for a sync-in-progress toast).</div>
+              <div class="hint">Custom `icon` override. Pass any ReactNode as `icon` to replace the
+type-based default — helpful when the toast reflects a domain-specific
+action (e.g., a sync icon for a sync-in-progress toast).</div>
               <pre><code>const CustomIcon = () =&gt; (
     &lt;Button
         variant=&quot;secondary&quot;
@@ -6115,6 +7213,7 @@ visibleToasts?: number</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -6129,16 +7228,22 @@ visibleToasts?: number</code></pre>
     <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">9 prop types</label>
+        <label for="c-23-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>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/tooltip/tooltip.stories.tsx">components-tooltip · ./src/tooltip/tooltip.stories.tsx</div>
-    
-    <div class="hint">Tooltip reveals a short, non-essential hint anchored to a trigger element on hover or focus.</div>
-    
+    <div>Hover/focus hint anchored to a trigger element</div>
+    <div class="hint">Tooltip reveals a short, non-essential hint anchored to a trigger element
+on hover or focus.</div>
+    <div class="kv"><span class="chip">summary: Hover/focus hint anchored to a trigger element</span><span class="chip">example: ```tsx
+&lt;Tooltip content=&quot;Archive this carrier&quot; asChild&gt;
+  &lt;IconButton aria-label=&quot;Archive&quot;&gt;&lt;IconArchive /&gt;&lt;/IconButton&gt;
+&lt;/Tooltip&gt;
+```</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -6146,6 +7251,7 @@ visibleToasts?: number</code></pre>
   
   <input id="c-23-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-23-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -6155,8 +7261,8 @@ visibleToasts?: number</code></pre>
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
-              <span class="badge ok">9 prop types</span>
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
+              <span class="badge ok">12 prop types</span>
             </div>
             <pre><code>Component: src/tooltip/tooltip.tsx::Tooltip</code></pre>
             <pre><code>Props:</code></pre>
@@ -6185,6 +7291,8 @@ className?: string
  */
 content: ReactNode
 
+defaultOpen?: boolean
+
 /**
  * Delay in ms before opening on hover. Defaults to `0`; focus always opens instantly.
  */
@@ -6195,10 +7303,14 @@ delayDuration?: number = 0
  */
 hideWhenDetached?: boolean
 
+onOpenChange?: (open: boolean) =&gt; void
+
+open?: boolean
+
 /**
  * Preferred side of the trigger; flips on collision. Defaults to `&#39;top&#39;`.
  */
-side?: &quot;top&quot; | &quot;right&quot; | &quot;bottom&quot; | &quot;left&quot; = top
+side?: &quot;right&quot; | &quot;top&quot; | &quot;bottom&quot; | &quot;left&quot; = &#39;top&#39;
 
 /**
  * Distance in pixels between the tooltip and its trigger. Defaults to `4`.
@@ -6297,6 +7409,7 @@ sideOffset?: number = 4</code></pre>
             </div>
         </div>
     
+    
   </div>
 </article>
 <article
@@ -6315,12 +7428,20 @@ sideOffset?: number = 4</code></pre>
         
         <label for="c-24-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
         
+        
       </div>
     </div>
     <div class="meta" title="./src/validation-list/validation-list.stories.tsx">components-validationlist · ./src/validation-list/validation-list.stories.tsx</div>
-    
-    <div class="hint">ValidationList renders a bulleted checklist of rules that light up as a value satisfies them. Each rule&#39;s `pattern` is a `RegExp` or a predicate `(value) =&gt; boolean`, so character-class checks and arbitrary logic (length, membership, …) live in the same list. It is presentational — pair it with your form validation; it does not own the input or block submission.</div>
-    
+    <div>Checklist of rules that turn active as the value satisfies them</div>
+    <div class="hint">ValidationList renders a bulleted checklist of rules that light up as a value
+satisfies them. Each rule&#39;s `pattern` is a `RegExp` or a predicate
+`(value) =&gt; boolean`, so character-class checks and arbitrary logic (length,
+membership, …) live in the same list. It is presentational — pair it with
+your form validation; it does not own the input or block submission.</div>
+    <div class="kv"><span class="chip">summary: Checklist of rules that turn active as the value satisfies them</span><span class="chip">example: &lt;ValidationList
+	value={password}
+	rules={[{ text: &#39;At least 10 characters&#39;, pattern: value =&gt; value.length &gt;= 10 }]}
+/&gt;</span></div>
   </div>
 
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
@@ -6328,6 +7449,7 @@ sideOffset?: number = 4</code></pre>
   
   <input id="c-24-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
   
+  
   <input id="c-24-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
@@ -6337,7 +7459,7 @@ sideOffset?: number = 4</code></pre>
         <div class="panel panel-props">
           <div class="note ok">
             <div class="row">
-              <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
               <span class="badge ok">2 prop types</span>
             </div>
             <pre><code>Component: src/validation-list/validation-list.tsx::ValidationList</code></pre>
@@ -6412,420 +7534,11 @@ value: string</code></pre>
             </div>
         </div>
     
-  </div>
-</article>
-    </div>
-    <div class="error-groups" role="region" aria-label="Prop type error groups">
-        <section class="group">
-          <input id="no-component-import-found-toggle" class="group-tg" type="checkbox" hidden />
-          <label for="no-component-import-found-toggle" class="group-header">
-            <span class="caret">▸</span>
-            <span class="group-title">No component import found</span>
-            <span class="group-count">1</span>
-          </label>
-          <div class="group-cards">
-<article
-  class="card 
-  has-error 
-  has-info 
-  no-story-error
-  no-doc-error"
-  role="listitem"
-  aria-label="Tabs.Root">
-  <div class="head">
-    <div class="title">
-      <h2><span class="status-dot dot-err"></span> Tabs.Root</h2>
-      <div class="badges">
-        <label for="c-error-0-components-tabs-err" class="badge err as-toggle">prop type error</label>
-        <label for="c-error-0-components-tabs-info" class="badge info as-toggle">1 info</label>
-        <label for="c-error-0-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
-        
-      </div>
-    </div>
-    <div class="meta" title="./src/tabs/tabs.stories.tsx">components-tabs · ./src/tabs/tabs.stories.tsx</div>
-    
-    
     
   </div>
-
-  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
-  <input id="c-error-0-components-tabs-err" class="tg tg-err" type="checkbox" hidden />
-  <input id="c-error-0-components-tabs-info" class="tg tg-info" type="checkbox" hidden />
-  <input id="c-error-0-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
-  
-  
-
-  <div class="panels">
-    
-        <div class="panel panel-err">
-          
-    <div class="note err">
-      <div class="note-title">Prop type error</div>
-      <div class="note-body"><pre><code>No component file found for the &quot;Tabs.Root&quot; component.
-  4 | import { Tabs } from &#39;.&#39;;
-  5 |
-&gt; 6 | const meta = {
-    | ^
-  7 | 	title: &#39;Components/Tabs&#39;,
-  8 | 	component: Tabs.Root,
-  9 | 	tags: [&#39;autodocs&#39;]
-
-./src/tabs/tabs.stories.tsx:
-import type { Meta, StoryObj } from &#39;@storybook/react-vite&#39;;
-import { expect, userEvent, within } from &#39;storybook/test&#39;;
-
-import { Tabs } from &#39;.&#39;;
-
-const meta = {
-	title: &#39;Components/Tabs&#39;,
-	component: Tabs.Root,
-	tags: [&#39;autodocs&#39;]
-} satisfies Meta&lt;typeof Tabs.Root&gt;;
-
-export default meta;
-
-type Story = StoryObj&lt;typeof meta&gt;;
-
-const TABS = [
-	{ value: &#39;overview&#39;, label: &#39;Overview&#39;, body: &#39;A summary of the policy and its coverage.&#39; },
-	{ value: &#39;documents&#39;, label: &#39;Documents&#39;, body: &#39;Declarations, endorsements and forms.&#39; },
-	{ value: &#39;activity&#39;, label: &#39;Activity&#39;, body: &#39;A timeline of recent changes and events.&#39; }
-] as const;
-
-const TabItems = () =&gt;
-	TABS.map(({ value, label }) =&gt; (
-		&lt;Tabs.Trigger key={value} value={value}&gt;
-			{label}
-		&lt;/Tabs.Trigger&gt;
-	));
-
-const TabPanels = () =&gt;
-	TABS.map(({ value, body }) =&gt; (
-		&lt;Tabs.Content key={value} value={value} className=&quot;p-4 text-sm text-text-default-base-primary&quot;&gt;
-			{body}
-		&lt;/Tabs.Content&gt;
-	));
-
-/** `line` (default): the active tab is marked with an animated underline. */
-export const Default: Story = {
-	args: {
-		variant: &#39;line&#39;,
-		defaultValue: &#39;overview&#39;
-	},
-	argTypes: {
-		variant: {
-			control: &#39;radio&#39;,
-			options: [&#39;line&#39;, &#39;enclosed&#39;, &#39;button&#39;],
-			description: &#39;line = underline; enclosed = segmented pills; button = button-like tabs&#39;
-		}
-	},
-	render: args =&gt; (
-		&lt;Tabs.Root {...args}&gt;
-			&lt;Tabs.List&gt;
-				&lt;TabItems /&gt;
-			&lt;/Tabs.List&gt;
-			&lt;TabPanels /&gt;
-		&lt;/Tabs.Root&gt;
-	)
-};
-
-/** `enclosed` renders segmented pills; the active tab sits on a raised surface. */
-export const Enclosed: Story = {
-	render: () =&gt; (
-		&lt;Tabs.Root variant=&quot;enclosed&quot; defaultValue=&quot;overview&quot;&gt;
-			&lt;Tabs.List&gt;
-				&lt;TabItems /&gt;
-			&lt;/Tabs.List&gt;
-			&lt;TabPanels /&gt;
-		&lt;/Tabs.Root&gt;
-	)
-};
-
-/** `button` renders button-like tabs, with room for a leading icon per trigger. */
-export const Buttons: Story = {
-	render: () =&gt; (
-		&lt;Tabs.Root variant=&quot;button&quot; defaultValue=&quot;overview&quot;&gt;
-			&lt;Tabs.List&gt;
-				&lt;TabItems /&gt;
-			&lt;/Tabs.List&gt;
-			&lt;TabPanels /&gt;
-		&lt;/Tabs.Root&gt;
-	)
-};
-
-/** `position` aligns the tab list within the row (`start` is the default). */
-export const Positions: Story = {
-	render: () =&gt; (
-		&lt;div className=&quot;flex flex-col gap-8&quot;&gt;
-			{([&#39;start&#39;, &#39;center&#39;, &#39;end&#39;] as const).map(position =&gt; (
-				&lt;Tabs.Root key={position} variant=&quot;enclosed&quot; position={position} defaultValue=&quot;overview&quot;&gt;
-					&lt;Tabs.List&gt;
-						&lt;TabItems /&gt;
-					&lt;/Tabs.List&gt;
-					&lt;TabPanels /&gt;
-				&lt;/Tabs.Root&gt;
-			))}
-		&lt;/div&gt;
-	)
-};
-
-/** `position=&quot;full&quot;` stretches the tab list to fill the available width. */
-export const FullWidth: Story = {
-	render: () =&gt; (
-		&lt;Tabs.Root variant=&quot;enclosed&quot; position=&quot;full&quot; defaultValue=&quot;overview&quot;&gt;
-			&lt;Tabs.List&gt;
-				&lt;TabItems /&gt;
-			&lt;/Tabs.List&gt;
-			&lt;TabPanels /&gt;
-		&lt;/Tabs.Root&gt;
-	)
-};
-
-/**
- * Triggers accept `asChild` to render as another element — e.g. a router link.
- * The trigger resets the anchor&#39;s default underline, so link-based tabs match
- * the button-based ones.
- */
-export const AsChildLinks: Story = {
-	render: () =&gt; (
-		&lt;Tabs.Root variant=&quot;line&quot; defaultValue=&quot;overview&quot;&gt;
-			&lt;Tabs.List&gt;
-				{TABS.map(({ value, label }) =&gt; (
-					&lt;Tabs.Trigger key={value} value={value} asChild&gt;
-						&lt;a href={`#${value}`}&gt;{label}&lt;/a&gt;
-					&lt;/Tabs.Trigger&gt;
-				))}
-			&lt;/Tabs.List&gt;
-			&lt;TabPanels /&gt;
-		&lt;/Tabs.Root&gt;
-	),
-	play: async ({ canvasElement }) =&gt; {
-		const canvas = within(canvasElement);
-		const overview = canvas.getByRole(&#39;tab&#39;, { name: /overview/i });
-
-		await expect(overview.tagName).toBe(&#39;A&#39;);
-		await expect(getComputedStyle(overview).textDecorationLine).toBe(&#39;none&#39;);
-	}
-};
-
-/** Selecting a tab reveals its panel and hides the others. */
-export const SwitchTabs: Story = {
-	args: {
-		variant: &#39;line&#39;,
-		defaultValue: &#39;overview&#39;
-	},
-	render: args =&gt; (
-		&lt;Tabs.Root {...args}&gt;
-			&lt;Tabs.List&gt;
-				&lt;TabItems /&gt;
-			&lt;/Tabs.List&gt;
-			&lt;TabPanels /&gt;
-		&lt;/Tabs.Root&gt;
-	),
-	play: async ({ canvasElement }) =&gt; {
-		const canvas = within(canvasElement);
-		const overview = canvas.getByRole(&#39;tab&#39;, { name: /overview/i });
-		const documents = canvas.getByRole(&#39;tab&#39;, { name: /documents/i });
-
-		await expect(overview).toHaveAttribute(&#39;data-state&#39;, &#39;active&#39;);
-		await expect(await canvas.findByText(/summary of the policy/i)).toBeVisible();
-
-		await userEvent.click(documents);
-		await expect(documents).toHaveAttribute(&#39;data-state&#39;, &#39;active&#39;);
-		await expect(overview).toHaveAttribute(&#39;data-state&#39;, &#39;inactive&#39;);
-		await expect(await canvas.findByText(/declarations, endorsements/i)).toBeVisible();
-	}
-};
-
-/**
- * A standalone `Label` gives a panel with a single, non-interactive title the
- * inactive trigger&#39;s exact look: outside a `Root` it never gets the active
- * data-state, and `pointer-events-none` keeps hover styles off. It is a plain
- * `span`, so wrap it in a heading element for heading semantics. No tab or
- * tablist role is announced.
- */
-export const SingleTitle: Story = {
-	render: () =&gt; (
-		&lt;div className=&quot;flex flex-col items-start gap-6&quot;&gt;
-			{([&#39;line&#39;, &#39;enclosed&#39;, &#39;button&#39;] as const).map(variant =&gt; (
-				&lt;h2 key={variant}&gt;
-					&lt;Tabs.Label variant={variant}&gt;Shared coverages ({variant})&lt;/Tabs.Label&gt;
-				&lt;/h2&gt;
-			))}
-		&lt;/div&gt;
-	),
-	play: async ({ canvasElement }) =&gt; {
-		const canvas = within(canvasElement);
-
-		await expect(canvas.getAllByRole(&#39;heading&#39;)).toHaveLength(3);
-		await expect(canvas.queryByRole(&#39;tablist&#39;)).not.toBeInTheDocument();
-		await expect(canvas.queryByRole(&#39;tab&#39;)).not.toBeInTheDocument();
-	}
-};
-</code></pre></div>
-    </div>
-        </div>
-    
-        <div class="panel panel-info">
-          
-    <div class="note info">
-      <div class="note-title">Info</div>
-      <div class="note-body">No description found. Write a jsdoc comment such as /** Component description */.</div>
+</article>
     </div>
-        </div>
-    
-    
-        <div class="panel panel-stories">
-          
-          
-          
-          <div class="note ok">
-                <div class="row">
-                  <span class="ex-name">Imports</span>
-                </div>
-                <pre><code>import { Tabs } 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 class="hint">`line` (default): the active tab is marked with an animated underline.</div>
-              <pre><code>const Default = () =&gt; &lt;Tabs.Root variant=&quot;line&quot; defaultValue=&quot;overview&quot;&gt;
-    &lt;Tabs.List&gt;
-        &lt;TabItems /&gt;
-    &lt;/Tabs.List&gt;
-    &lt;TabPanels /&gt;
-&lt;/Tabs.Root&gt;;</code></pre>
-            </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">Enclosed</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              
-              <div class="hint">`enclosed` renders segmented pills; the active tab sits on a raised surface.</div>
-              <pre><code>const Enclosed = () =&gt; (
-    &lt;Tabs.Root variant=&quot;enclosed&quot; defaultValue=&quot;overview&quot;&gt;
-        &lt;Tabs.List&gt;
-            &lt;TabItems /&gt;
-        &lt;/Tabs.List&gt;
-        &lt;TabPanels /&gt;
-    &lt;/Tabs.Root&gt;
-);</code></pre>
-            </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">Buttons</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              
-              <div class="hint">`button` renders button-like tabs, with room for a leading icon per trigger.</div>
-              <pre><code>const Buttons = () =&gt; (
-    &lt;Tabs.Root variant=&quot;button&quot; defaultValue=&quot;overview&quot;&gt;
-        &lt;Tabs.List&gt;
-            &lt;TabItems /&gt;
-        &lt;/Tabs.List&gt;
-        &lt;TabPanels /&gt;
-    &lt;/Tabs.Root&gt;
-);</code></pre>
-            </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">Positions</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              
-              <div class="hint">`position` aligns the tab list within the row (`start` is the default).</div>
-              <pre><code>const Positions = () =&gt; (
-    &lt;div className=&quot;flex flex-col gap-8&quot;&gt;
-        {([&#39;start&#39;, &#39;center&#39;, &#39;end&#39;] as const).map(position =&gt; (
-            &lt;Tabs.Root key={position} variant=&quot;enclosed&quot; position={position} defaultValue=&quot;overview&quot;&gt;
-                &lt;Tabs.List&gt;
-                    &lt;TabItems /&gt;
-                &lt;/Tabs.List&gt;
-                &lt;TabPanels /&gt;
-            &lt;/Tabs.Root&gt;
-        ))}
-    &lt;/div&gt;
-);</code></pre>
-            </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">Full Width</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              
-              <div class="hint">`position=&quot;full&quot;` stretches the tab list to fill the available width.</div>
-              <pre><code>const FullWidth = () =&gt; (
-    &lt;Tabs.Root variant=&quot;enclosed&quot; position=&quot;full&quot; defaultValue=&quot;overview&quot;&gt;
-        &lt;Tabs.List&gt;
-            &lt;TabItems /&gt;
-        &lt;/Tabs.List&gt;
-        &lt;TabPanels /&gt;
-    &lt;/Tabs.Root&gt;
-);</code></pre>
-            </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">As Child Links</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              
-              <div class="hint">Triggers accept `asChild` to render as another element — e.g. a router link. The trigger resets the anchor&#39;s default underline, so link-based tabs match the button-based ones.</div>
-              <pre><code>const AsChildLinks = () =&gt; (
-    &lt;Tabs.Root variant=&quot;line&quot; defaultValue=&quot;overview&quot;&gt;
-        &lt;Tabs.List&gt;
-            {TABS.map(({ value, label }) =&gt; (
-                &lt;Tabs.Trigger key={value} value={value} asChild&gt;
-                    &lt;a href={`#${value}`}&gt;{label}&lt;/a&gt;
-                &lt;/Tabs.Trigger&gt;
-            ))}
-        &lt;/Tabs.List&gt;
-        &lt;TabPanels /&gt;
-    &lt;/Tabs.Root&gt;
-);</code></pre>
-            </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">Switch Tabs</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              
-              <div class="hint">Selecting a tab reveals its panel and hides the others.</div>
-              <pre><code>const SwitchTabs = () =&gt; &lt;Tabs.Root variant=&quot;line&quot; defaultValue=&quot;overview&quot;&gt;
-    &lt;Tabs.List&gt;
-        &lt;TabItems /&gt;
-    &lt;/Tabs.List&gt;
-    &lt;TabPanels /&gt;
-&lt;/Tabs.Root&gt;;</code></pre>
-            </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">Single Title</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              
-              <div class="hint">A standalone `Label` gives a panel with a single, non-interactive title the inactive trigger&#39;s exact look: outside a `Root` it never gets the active data-state, and `pointer-events-none` keeps hover styles off. It is a plain `span`, so wrap it in a heading element for heading semantics. No tab or tablist role is announced.</div>
-              <pre><code>const SingleTitle = () =&gt; (
-    &lt;div className=&quot;flex flex-col items-start gap-6&quot;&gt;
-        {([&#39;line&#39;, &#39;enclosed&#39;, &#39;button&#39;] as const).map(variant =&gt; (
-            &lt;h2 key={variant}&gt;
-                &lt;Tabs.Label variant={variant}&gt;Shared coverages ({variant})&lt;/Tabs.Label&gt;
-            &lt;/h2&gt;
-        ))}
-    &lt;/div&gt;
-);</code></pre>
-            </div>
-        </div>
     
-  </div>
-</article></div>
-        </section>
-      </div>
     
     
   </div>