@agentero/design-system 0.27.1 → 0.29.0

package/mcp/manifests/components.html

@@ -588,13 +588,13 @@
 <header>
   <div class="wrap">
     <h1>Manifest Debugger</h1>
-    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">27 components ok</span><span class="filter-pill ok" aria-disabled="true">215 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">31 components ok</span><span class="filter-pill ok" aria-disabled="true">250 stories ok</span></div>
   </div>
 </header>
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-component-meta</code>. Generation took <strong>4.7s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>4.3s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -4487,6 +4487,1170 @@ actions outright unless the user needs to see them and understand why.</div>
         </div>
     
     
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="Field.Root">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> Field.Root</h2>
+      <div class="badges">
+        <label for="c-11-components-field-props" class="badge ok as-toggle">6 prop types</label>
+        
+        <label for="c-11-components-field-stories" class="badge ok as-toggle">16 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/field/field.stories.tsx">components-field · ./src/field/field.stories.tsx</div>
+    <div>Wraps a label, control, description and error into one field</div>
+    <div class="hint">Field lays out a single form field — label, control, helper text and error —
+and wires the accessibility relationships between them. `Field.Root`
+generates the ids and shares them through context: `Label` reads
+`LabelContext`, `Field.Description` and `Field.Error` read `FieldContext`,
+and a `Field&lt;X&gt;` such as `FieldText` provides the control&#39;s context. Nobody
+passes an `id` by hand.
+
+Presentational and form-library agnostic: pass `invalid` and the error
+messages from whatever validates the form. Spacing between fields belongs to
+`Field.Group`, never to a margin on the field itself.
+
+`Field.Description` and `Field.Error` register themselves with the root, so
+the control&#39;s `aria-describedby` lists exactly the messages on screen and is
+absent when there is none.</div>
+    <div class="kv"><span class="chip">summary: Wraps a label, control, description and error into one field</span><span class="chip">example: &lt;Field.Root invalid={!!error} required&gt;
+  &lt;Field.Label&gt;Email&lt;/Field.Label&gt;
+  &lt;Input type=&quot;email&quot; /&gt;
+  &lt;Field.Description&gt;We only use this for policy documents.&lt;/Field.Description&gt;
+  &lt;Field.Error errors={[error]} /&gt;
+&lt;/Field.Root&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-11-components-field-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-11-components-field-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/field/index.ts::Field</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * `id` for the control. Generated when omitted. Set it here, not on the
+ * control, so the label and the messages keep pointing at the right element.
+ */
+controlId?: string
+
+/**
+ * Disables the control through its context and sets `data-disabled` on the root.
+ */
+disabled?: boolean = false
+
+/**
+ * Marks the field as failing validation: sets `data-invalid` on the root and
+ * `aria-invalid` on the control through its context, which drives the
+ * control&#39;s destructive border. The label keeps its color by design.
+ */
+invalid?: boolean = false
+
+/**
+ * Layout of the field. `vertical` (default) stacks label, control and
+ * messages. `horizontal` is one row at every width: the first child fills it
+ * and the rest keep their natural width, aligned to the right, so the
+ * controls of stacked fields line up. `responsive` stacks below `28rem` and
+ * behaves like `horizontal` from there, measured on the field itself, so it
+ * needs no particular wrapper. In both, `Field.Content` groups a control with
+ * its messages, or a label with its description.
+ */
+orientation?: &quot;horizontal&quot; | &quot;vertical&quot; | &quot;responsive&quot; = &#39;vertical&#39;
+
+/**
+ * Makes the control read-only through its context (focusable and copyable,
+ * not editable, still submitted) and sets `data-readonly` on the root.
+ */
+readOnly?: boolean = false
+
+/**
+ * Single source of truth for a required field: the `Label` shows its
+ * asterisk and the control receives `required`, both through context.
+ */
+required?: boolean = false</code></pre>
+          </div>
+        </div>
+    
+        <div class="panel panel-stories">
+          
+          
+          
+          <div class="note ok">
+                <div class="row">
+                  <span class="ex-name">Imports</span>
+                </div>
+                <pre><code>import { Field, FieldContext, Label } from "@agentero/design-system";</code></pre>
+              </div>
+          
+          
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Default</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Default vertical field with label, control and description</div>
+              <div class="hint">A vertical field with a label, a control and helper text. The label points
+at the control and the description is referenced by it — neither needed an
+explicit `id`.</div>
+              <pre><code>const Default = () =&gt; &lt;Field.Root
+    orientation=&quot;vertical&quot;
+    invalid={false}
+    disabled={false}
+    readOnly={false}
+    required={false}&gt;
+    &lt;Label&gt;Email&lt;/Label&gt;
+    &lt;DemoInput placeholder=&quot;you@example.com&quot; /&gt;
+    &lt;Field.Description&gt;We only use this to send policy documents.&lt;/Field.Description&gt;
+&lt;/Field.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Required</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Required field driven from the root alone</div>
+              <div class="hint">`required` on the root is the single source of truth: the label shows its
+asterisk and the control receives `required`, both through context.</div>
+              <pre><code>const Required = () =&gt; &lt;Field.Root
+    orientation=&quot;vertical&quot;
+    invalid={false}
+    disabled={false}
+    readOnly={false}
+    required&gt;
+    &lt;Label&gt;Full name&lt;/Label&gt;
+    &lt;DemoInput placeholder=&quot;Jane Doe&quot; /&gt;
+&lt;/Field.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Optional</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Optional field with the muted label suffix</div>
+              <div class="hint">`optional` on the label appends the muted suffix; the control stays
+non-required.</div>
+              <pre><code>const Optional = () =&gt; &lt;Field.Root
+    orientation=&quot;vertical&quot;
+    invalid={false}
+    disabled={false}
+    readOnly={false}
+    required={false}&gt;
+    &lt;Label optional&gt;Phone number&lt;/Label&gt;
+    &lt;DemoInput type=&quot;tel&quot; placeholder=&quot;+1 (555) 000-0000&quot; /&gt;
+&lt;/Field.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">With Tooltip</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Label with a tooltip trigger beside it</div>
+              <div class="hint">`Field.Label` puts an info button beside the caption. It is a sibling of the
+`&lt;label&gt;`, so it keeps its own accessible name, clicking it does not focus
+the control, and the control&#39;s name stays clean. It opens on focus too.</div>
+              <pre><code>const WithTooltip = () =&gt; &lt;Field.Root
+    orientation=&quot;vertical&quot;
+    invalid={false}
+    disabled={false}
+    readOnly={false}
+    required&gt;
+    &lt;Field.Label tooltip=&quot;Issued by the IRS to identify your business.&quot;&gt;Tax ID&lt;/Field.Label&gt;
+    &lt;DemoInput placeholder=&quot;XX-XXXXXXX&quot; /&gt;
+&lt;/Field.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Invalid</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Invalid field with a single error message</div>
+              <div class="hint">`invalid` on the root sets `data-invalid` for styling and `aria-invalid` on
+the control, which drives its destructive border; the label keeps its color
+by design. `Field.Error` takes the error objects as they come from a form
+library.</div>
+              <pre><code>const Invalid = () =&gt; &lt;Field.Root
+    orientation=&quot;vertical&quot;
+    invalid
+    disabled={false}
+    readOnly={false}
+    required={false}&gt;
+    &lt;Label&gt;Email&lt;/Label&gt;
+    &lt;DemoInput type=&quot;email&quot; defaultValue=&quot;not-an-email&quot; /&gt;
+    &lt;Field.Error errors={[{ message: &#39;Enter a valid email address.&#39; }]} /&gt;
+&lt;/Field.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Multiple Errors</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Several errors rendered as a de-duplicated list</div>
+              <div class="hint">Several errors render as a list, de-duplicated by message.</div>
+              <pre><code>const MultipleErrors = () =&gt; &lt;Field.Root
+    orientation=&quot;vertical&quot;
+    invalid
+    disabled={false}
+    readOnly={false}
+    required={false}&gt;
+    &lt;Label&gt;Password&lt;/Label&gt;
+    &lt;DemoInput type=&quot;password&quot; defaultValue=&quot;abc&quot; /&gt;
+    &lt;Field.Error
+        errors={[
+            { message: &#39;Use at least 8 characters.&#39; },
+            { message: &#39;Include a number.&#39; },
+            { message: &#39;Use at least 8 characters.&#39; }
+        ]} /&gt;
+&lt;/Field.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Error With Types</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Every rule a single error collected, rendered as a list</div>
+              <div class="hint">One error whose `types` lists every rule that failed renders as that same
+list. A form library fills it when it collects all the failures instead of
+stopping at the first (react-hook-form&#39;s `criteriaMode: &#39;all&#39;`), leaving only
+the first one in `message`, so the messages take precedence over it. A rule
+that failed without a message of its own contributes nothing.</div>
+              <pre><code>const ErrorWithTypes = () =&gt; &lt;Field.Root
+    orientation=&quot;vertical&quot;
+    invalid
+    disabled={false}
+    readOnly={false}
+    required={false}&gt;
+    &lt;Label&gt;Password&lt;/Label&gt;
+    &lt;DemoInput type=&quot;password&quot; defaultValue=&quot;short&quot; /&gt;
+    &lt;Field.Error
+        errors={[
+            {
+                message: &#39;At least one uppercase letter.&#39;,
+                types: {
+                    uppercase: &#39;At least one uppercase letter.&#39;,
+                    number: &#39;At least one number.&#39;,
+                    length: [&#39;At least 10 characters.&#39;],
+                    unnamed: true
+                }
+            }
+        ]} /&gt;
+&lt;/Field.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">No Error</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Error stays mounted and renders nothing while valid</div>
+              <div class="hint">`Field.Error` renders nothing without a message, so it can stay mounted and
+receive `undefined` entries while the field is valid. With no description
+either, the control carries no `aria-describedby` at all.</div>
+              <pre><code>const NoError = () =&gt; &lt;Field.Root
+    orientation=&quot;vertical&quot;
+    invalid={false}
+    disabled={false}
+    readOnly={false}
+    required={false}&gt;
+    &lt;Label&gt;Email&lt;/Label&gt;
+    &lt;DemoInput type=&quot;email&quot; /&gt;
+    &lt;Field.Error errors={[undefined]} /&gt;
+&lt;/Field.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Disabled</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Disabled field driven from the root</div>
+              <div class="hint">`disabled` on the root disables the control through context and sets
+`data-disabled` for styling.</div>
+              <pre><code>const Disabled = () =&gt; &lt;Field.Root
+    orientation=&quot;vertical&quot;
+    invalid={false}
+    disabled
+    readOnly={false}
+    required={false}&gt;
+    &lt;Label&gt;Agency&lt;/Label&gt;
+    &lt;DemoInput defaultValue=&quot;Acme Insurance&quot; /&gt;
+    &lt;Field.Description&gt;Managed by your administrator.&lt;/Field.Description&gt;
+&lt;/Field.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Read Only</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Read-only field driven from the root</div>
+              <div class="hint">`readOnly` on the root makes the control read-only through context and sets
+`data-readonly` for styling. Unlike `disabled`, the value stays focusable,
+copyable and submitted.</div>
+              <pre><code>const ReadOnly = () =&gt; &lt;Field.Root
+    orientation=&quot;vertical&quot;
+    invalid={false}
+    disabled={false}
+    readOnly
+    required={false}&gt;
+    &lt;Label&gt;Policy number&lt;/Label&gt;
+    &lt;DemoInput defaultValue=&quot;POL-2049-118&quot; /&gt;
+    &lt;Field.Description&gt;Assigned by the carrier; contact support to change it.&lt;/Field.Description&gt;
+&lt;/Field.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Horizontal</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Horizontal field, one row at every width, controls right-aligned</div>
+              <div class="hint">`horizontal` is one row at every width. The first child fills the row and
+everything after it keeps its natural width, aligned to the right edge, so
+the controls of stacked fields line up whatever their labels measure. Wrap a
+label with its description, or a control with its messages, in
+`Field.Content`. A control sets its own width: `Input` is `w-full`, so it
+gets one here.</div>
+              <pre><code>const Horizontal = () =&gt; (
+    &lt;Field.Group className=&quot;w-[40rem]&quot;&gt;
+        &lt;Field.Root orientation=&quot;horizontal&quot; data-testid=&quot;short&quot;&gt;
+            &lt;Label&gt;Full name&lt;/Label&gt;
+            &lt;DemoInput defaultValue=&quot;Rafa Moro&quot; className=&quot;w-72&quot; /&gt;
+        &lt;/Field.Root&gt;
+
+        &lt;Field.Root orientation=&quot;horizontal&quot; data-testid=&quot;long&quot;&gt;
+            &lt;Label&gt;Title&lt;/Label&gt;
+            &lt;Field.Content className=&quot;w-72&quot;&gt;
+                &lt;DemoInput placeholder=&quot;Software engineer&quot; /&gt;
+                &lt;Field.Description&gt;Shown on your public profile.&lt;/Field.Description&gt;
+            &lt;/Field.Content&gt;
+        &lt;/Field.Root&gt;
+
+        &lt;Field.Root orientation=&quot;horizontal&quot; data-testid=&quot;switch&quot;&gt;
+            &lt;Field.Content&gt;
+                &lt;Label&gt;Auto-renew&lt;/Label&gt;
+                &lt;Field.Description&gt;Renews the policy automatically before it expires.&lt;/Field.Description&gt;
+            &lt;/Field.Content&gt;
+            &lt;DemoInput type=&quot;checkbox&quot; className=&quot;size-5&quot; /&gt;
+        &lt;/Field.Root&gt;
+
+        &lt;div className=&quot;w-[20rem]&quot; data-testid=&quot;narrow&quot;&gt;
+            &lt;Field.Root orientation=&quot;horizontal&quot;&gt;
+                &lt;Label&gt;Email&lt;/Label&gt;
+                &lt;DemoInput type=&quot;email&quot; placeholder=&quot;you@example.com&quot; className=&quot;w-40&quot; /&gt;
+            &lt;/Field.Root&gt;
+        &lt;/div&gt;
+    &lt;/Field.Group&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Responsive</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Responsive field that stacks when narrow</div>
+              <div class="hint">`responsive` stacks the parts below `28rem` and behaves like `horizontal`
+from there: first child fills, the rest keep their width on the right. It
+measures the field itself, so it needs no particular wrapper. A width that
+should only apply once horizontal goes behind `@md/field:`.</div>
+              <pre><code>const Responsive = () =&gt; (
+    &lt;div className=&quot;flex flex-col gap-8&quot;&gt;
+        &lt;div className=&quot;w-full max-w-[40rem]&quot; data-testid=&quot;wide&quot;&gt;
+            &lt;Field.Root orientation=&quot;responsive&quot;&gt;
+                &lt;Label&gt;Email&lt;/Label&gt;
+                &lt;Field.Content className=&quot;@md/field:w-72&quot;&gt;
+                    &lt;DemoInput type=&quot;email&quot; placeholder=&quot;you@example.com&quot; /&gt;
+                    &lt;Field.Description&gt;
+                        We only use this to send policy documents, and never to contact you about anything
+                        else.
+                    &lt;/Field.Description&gt;
+                &lt;/Field.Content&gt;
+            &lt;/Field.Root&gt;
+        &lt;/div&gt;
+
+        &lt;div className=&quot;w-full max-w-[20rem]&quot; data-testid=&quot;narrow&quot;&gt;
+            &lt;Field.Root orientation=&quot;responsive&quot;&gt;
+                &lt;Label&gt;Email&lt;/Label&gt;
+                &lt;Field.Content&gt;
+                    &lt;DemoInput type=&quot;email&quot; placeholder=&quot;you@example.com&quot; /&gt;
+                    &lt;Field.Description&gt;We only use this to send policy documents.&lt;/Field.Description&gt;
+                &lt;/Field.Content&gt;
+            &lt;/Field.Root&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Group</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Several fields stacked in a group</div>
+              <div class="hint">`Field.Group` stacks fields and owns the space between them. Each field gets
+its own ids, so several on one page never collide.</div>
+              <pre><code>const Group = () =&gt; (
+    &lt;Field.Group&gt;
+        &lt;Field.Root required&gt;
+            &lt;Label&gt;Full name&lt;/Label&gt;
+            &lt;DemoInput placeholder=&quot;Jane Doe&quot; /&gt;
+        &lt;/Field.Root&gt;
+
+        &lt;Field.Root required invalid&gt;
+            &lt;Label&gt;Email&lt;/Label&gt;
+            &lt;DemoInput type=&quot;email&quot; defaultValue=&quot;not-an-email&quot; /&gt;
+            &lt;Field.Error&gt;Enter a valid email address.&lt;/Field.Error&gt;
+        &lt;/Field.Root&gt;
+
+        &lt;Field.Root&gt;
+            &lt;Label optional&gt;Phone number&lt;/Label&gt;
+            &lt;DemoInput type=&quot;tel&quot; placeholder=&quot;+1 (555) 000-0000&quot; /&gt;
+        &lt;/Field.Root&gt;
+    &lt;/Field.Group&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Standalone Outside Field</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Label and Field.Error used without a Field.Root</div>
+              <div class="hint">Outside a `Field.Root` every part reads a `null` context and works on its own
+props alone: `Label` needs its `htmlFor`, `Field.Error` its own `id`.</div>
+              <pre><code>const StandaloneOutsideField = () =&gt; (
+    &lt;div className=&quot;flex flex-col gap-2&quot;&gt;
+        &lt;Label htmlFor=&quot;standalone-email&quot;&gt;Email&lt;/Label&gt;
+        &lt;DemoInput id=&quot;standalone-email&quot; type=&quot;email&quot; aria-describedby=&quot;standalone-error&quot; /&gt;
+        &lt;Field.Error id=&quot;standalone-error&quot;&gt;Something went wrong.&lt;/Field.Error&gt;
+    &lt;/div&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Own Props Win</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Explicit props on a part win over the field&#39;s context</div>
+              <div class="hint">A context is a default, never an override: an explicit `htmlFor` or `id` on a
+part wins over what `Field.Root` provides.</div>
+              <pre><code>const OwnPropsWin = () =&gt; (
+    &lt;Field.Root&gt;
+        &lt;Label htmlFor=&quot;own-input&quot;&gt;Email&lt;/Label&gt;
+        &lt;input id=&quot;own-input&quot; type=&quot;email&quot; className={inputRecipe()} /&gt;
+        &lt;Field.Description id=&quot;own-description&quot;&gt;Points wherever you say.&lt;/Field.Description&gt;
+    &lt;/Field.Root&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Errors From Context</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Errors supplied to a bare Field.Error through context</div>
+              <div class="hint">`FieldContext` is an extension point: re-provided under the root with the
+errors, a bare `&lt;Field.Error /&gt;` renders them — here with `useState` and no
+form library. `InputContext` extends the same way with `value`, `onChange`,
+`onBlur` and `name`; see `FieldText`.</div>
+              <pre><code>const ErrorsFromContext = () =&gt; &lt;FieldWithSuppliedErrors /&gt;;</code></pre>
+            </div>
+        </div>
+    
+    
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="FieldText">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> FieldText</h2>
+      <div class="badges">
+        <label for="c-12-components-fieldtext-props" class="badge ok as-toggle">6 prop types</label>
+        
+        <label for="c-12-components-fieldtext-stories" class="badge ok as-toggle">7 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/field-text/field-text.stories.tsx">components-fieldtext · ./src/field-text/field-text.stories.tsx</div>
+    <div>Field for a single-line text control, wiring the Input inside it</div>
+    <div class="hint">FieldText is a `Field.Root` for a single-line text control. It provides
+`InputContext`, so the `Input` inside associates itself with the label and
+the messages and takes `invalid`, `required`, `disabled` and `readOnly` from
+the field — no `id`, `htmlFor`, `aria-describedby` or `aria-invalid` written
+by hand.
+
+It knows nothing about form libraries, and its contexts compose: a provider
+nested inside it can extend `InputContext` with `value`, `onChange`, `onBlur`
+and `name`, and `FieldContext` with the errors, as the last story shows.</div>
+    <div class="kv"><span class="chip">summary: Field for a single-line text control, wiring the Input inside it</span><span class="chip">example: &lt;FieldText invalid={!!error} required&gt;
+  &lt;Label&gt;Email&lt;/Label&gt;
+  &lt;Input type=&quot;email&quot; /&gt;
+  &lt;Field.Description&gt;We only use this for policy documents.&lt;/Field.Description&gt;
+  &lt;Field.Error errors={[error]} /&gt;
+&lt;/FieldText&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-12-components-fieldtext-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-12-components-fieldtext-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/field-text/index.ts::FieldText</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * `id` for the control. Generated when omitted. Set it here, not on the
+ * control, so the label and the messages keep pointing at the right element.
+ */
+controlId?: string
+
+/**
+ * Disables the control through its context and sets `data-disabled` on the root.
+ */
+disabled?: boolean
+
+/**
+ * Marks the field as failing validation: sets `data-invalid` on the root and
+ * `aria-invalid` on the control through its context, which drives the
+ * control&#39;s destructive border. The label keeps its color by design.
+ */
+invalid?: boolean
+
+/**
+ * Layout of the field. `vertical` (default) stacks label, control and
+ * messages. `horizontal` is one row at every width: the first child fills it
+ * and the rest keep their natural width, aligned to the right, so the
+ * controls of stacked fields line up. `responsive` stacks below `28rem` and
+ * behaves like `horizontal` from there, measured on the field itself, so it
+ * needs no particular wrapper. In both, `Field.Content` groups a control with
+ * its messages, or a label with its description.
+ */
+orientation?: &quot;horizontal&quot; | &quot;vertical&quot; | &quot;responsive&quot;
+
+/**
+ * Makes the control read-only through its context (focusable and copyable,
+ * not editable, still submitted) and sets `data-readonly` on the root.
+ */
+readOnly?: boolean
+
+/**
+ * Single source of truth for a required field: the `Label` shows its
+ * asterisk and the control receives `required`, both through context.
+ */
+required?: boolean</code></pre>
+          </div>
+        </div>
+    
+        <div class="panel panel-stories">
+          
+          
+          
+          <div class="note ok">
+                <div class="row">
+                  <span class="ex-name">Imports</span>
+                </div>
+                <pre><code>import { Field, FieldContext, FieldText, Input, InputContext, Label } from "@agentero/design-system";</code></pre>
+              </div>
+          
+          
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Default</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Label, Input and description wired with no ids</div>
+              <div class="hint">The composition consumers write: a label, the design system&#39;s `Input` and
+helper text. The label points at the input and the input is described by the
+text, all through context.</div>
+              <pre><code>const Default = () =&gt; &lt;FieldText
+    orientation=&quot;vertical&quot;
+    invalid={false}
+    disabled={false}
+    readOnly={false}
+    required={false}&gt;
+    &lt;Label&gt;Email&lt;/Label&gt;
+    &lt;Input type=&quot;email&quot; placeholder=&quot;you@example.com&quot; /&gt;
+    &lt;Field.Description&gt;We only use this to send policy documents.&lt;/Field.Description&gt;
+&lt;/FieldText&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Required</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Required field driven from the root alone</div>
+              <div class="hint">`required` on the field reaches both the label&#39;s asterisk and the input&#39;s
+`required` attribute.</div>
+              <pre><code>const Required = () =&gt; &lt;FieldText
+    orientation=&quot;vertical&quot;
+    invalid={false}
+    disabled={false}
+    readOnly={false}
+    required&gt;
+    &lt;Label&gt;Full name&lt;/Label&gt;
+    &lt;Input placeholder=&quot;Jane Doe&quot; /&gt;
+&lt;/FieldText&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Invalid</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Invalid field with the Input styled by aria-invalid</div>
+              <div class="hint">`invalid` on the field sets `aria-invalid` on the input, which drives its
+destructive border, and the error is announced with the input.</div>
+              <pre><code>const Invalid = () =&gt; &lt;FieldText
+    orientation=&quot;vertical&quot;
+    invalid
+    disabled={false}
+    readOnly={false}
+    required={false}&gt;
+    &lt;Label&gt;Email&lt;/Label&gt;
+    &lt;Input type=&quot;email&quot; defaultValue=&quot;not-an-email&quot; /&gt;
+    &lt;Field.Error errors={[{ message: &#39;Enter a valid email address.&#39; }]} /&gt;
+&lt;/FieldText&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Disabled</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Disabled field driven from the root</div>
+              <div class="hint">`disabled` on the field disables the input through context.</div>
+              <pre><code>const Disabled = () =&gt; &lt;FieldText
+    orientation=&quot;vertical&quot;
+    invalid={false}
+    disabled
+    readOnly={false}
+    required={false}&gt;
+    &lt;Label&gt;Agency&lt;/Label&gt;
+    &lt;Input defaultValue=&quot;Acme Insurance&quot; /&gt;
+&lt;/FieldText&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Read Only</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Read-only field driven from the root</div>
+              <div class="hint">`readOnly` on the field reaches the input through context. The value stays
+focusable, copyable and submitted, and the input looks like any other.</div>
+              <pre><code>const ReadOnly = () =&gt; &lt;FieldText
+    orientation=&quot;vertical&quot;
+    invalid={false}
+    disabled={false}
+    readOnly
+    required={false}&gt;
+    &lt;Label&gt;Policy number&lt;/Label&gt;
+    &lt;Input defaultValue=&quot;POL-2049-118&quot; /&gt;
+    &lt;Field.Description&gt;Assigned by the carrier; contact support to change it.&lt;/Field.Description&gt;
+&lt;/FieldText&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Own Props Win</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Input&#39;s own props merge with, and win over, the field&#39;s context</div>
+              <div class="hint">The context is a default, never an override: an extra `aria-describedby` is
+concatenated with the field&#39;s ids, `className` is merged and `size` passes
+through untouched.</div>
+              <pre><code>const OwnPropsWin = () =&gt; &lt;div className=&quot;flex flex-col gap-2&quot;&gt;
+    &lt;FieldText
+        orientation=&quot;vertical&quot;
+        invalid={false}
+        disabled={false}
+        readOnly={false}
+        required={false}&gt;
+        &lt;Label&gt;Website&lt;/Label&gt;
+        &lt;Input type=&quot;url&quot; size=&quot;lg&quot; className=&quot;max-w-xs&quot; aria-describedby=&quot;website-hint&quot; /&gt;
+        &lt;Field.Description&gt;Include the protocol.&lt;/Field.Description&gt;
+    &lt;/FieldText&gt;
+    &lt;p id=&quot;website-hint&quot; className=&quot;text-sm&quot;&gt;Shown on your public profile.
+                    &lt;/p&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Controlled From Context</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Input controlled and errors supplied from outside the field</div>
+              <div class="hint">The contexts are an extension point: a provider nested in the field adds
+`name`, `value`, `onChange` and `onBlur` to `InputContext`, so a bare
+`&lt;Input /&gt;` becomes controlled, and the errors to `FieldContext`, so a bare
+`&lt;Field.Error /&gt;` renders them — here with `useState` and no form library.
+The input&#39;s own `onChange` still runs, chained after the provider&#39;s.</div>
+              <pre><code>const ControlledFromContext = () =&gt; &lt;ControlledField /&gt;;</code></pre>
+            </div>
+        </div>
+    
+    
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="Form.Root">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> Form.Root</h2>
+      <div class="badges">
+        <label for="c-13-components-form-props" class="badge ok as-toggle">3 prop types</label>
+        
+        <label for="c-13-components-form-stories" class="badge ok as-toggle">2 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/form/form.stories.tsx">components-form · ./src/form/form.stories.tsx</div>
+    <div>Form element bound to a react-hook-form instance, shared with its fields</div>
+    <div class="hint">Form is the react-hook-form binding of the design system. `Form.Root` renders
+the `&lt;form&gt;` and provides the `useForm()` instance to the form fields inside
+it — `FormText` and the other `Form&lt;X&gt;` components — which bind themselves by
+`name`. The submit goes through `handleSubmit`, so `onSubmit` only runs with
+valid, typed values, and the element is always `noValidate`: validation is
+react-hook-form&#39;s, and the `required` a field sets is announced without the
+browser&#39;s own bubble.
+
+`react-hook-form` is an optional peer dependency: install it in the app and
+keep a single copy, since the provider and the fields share one context.</div>
+    <div class="kv"><span class="chip">summary: Form element bound to a react-hook-form instance, shared with its fields</span><span class="chip">example: const methods = useForm&lt;Values&gt;({ defaultValues: { agencyName: &#39;&#39;, email: &#39;&#39; } });
+
+&lt;Form.Root methods={methods} onSubmit={saveAgency} aria-label=&quot;Agency profile&quot;&gt;
+  &lt;FormText name=&quot;agencyName&quot; label=&quot;Agency name&quot; required rules={{ required: &#39;Enter the agency name.&#39; }} /&gt;
+  &lt;FormText name=&quot;email&quot; label=&quot;Email&quot; inputProps={{ type: &#39;email&#39; }} /&gt;
+  &lt;Button type=&quot;submit&quot;&gt;Save&lt;/Button&gt;
+&lt;/Form.Root&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-13-components-form-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-13-components-form-props" class="tg tg-props" type="checkbox" hidden />
+
+  <div class="panels">
+    
+    
+    
+        <div class="panel panel-props">
+          <div class="note ok">
+            <div class="row">
+              <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
+              <span class="badge ok">3 prop types</span>
+            </div>
+            <pre><code>Component: src/form/index.ts::Form</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * Defines a string value that labels the current element.
+ * Accessible name of the form. A `&lt;form&gt;` only becomes a landmark when it is
+ * named, and screen readers list landmarks by name, so it is required.
+ */
+aria-label: string
+
+/**
+ * The object `useForm()` returns. `Form.Root` hands it to every form field
+ * inside through react-hook-form&#39;s `FormProvider`, so a `FormText` needs only
+ * its `name`. Create it in the component that owns the form and pass
+ * `defaultValues`: a field whose value is `undefined` on the first render
+ * starts uncontrolled. A form whose resolver transforms the values
+ * (`useForm&lt;Input, Context, Output&gt;`) is accepted as is.
+ */
+methods: UseFormReturn&lt;AgencyValues, any, AgencyValues&gt;
+
+/**
+ * Called with the validated values once validation passes: the resolver&#39;s
+ * output when it transforms them, the form&#39;s values otherwise. Wrapped in
+ * `methods.handleSubmit`, which prevents the native submit and focuses the
+ * first invalid field; when it is omitted the form validates and does nothing
+ * else.
+ */
+onSubmit?: SubmitHandler&lt;AgencyValues&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, Field, Form, FormText } 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>Form.Root with FormText fields validating on submit</div>
+              <div class="hint">A form with two required fields and a submit button. Submitting empty shows
+both errors, marks both inputs invalid and focuses the first one — proof that
+react-hook-form&#39;s `ref` reached the inputs. Once filled in, `onSubmit`
+receives the typed values.</div>
+              <pre><code>const Default = () =&gt; &lt;AgencyForm /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">No Validate</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Native required never triggers the browser&#39;s validation bubble</div>
+              <div class="hint">`required` on a field reaches the native attribute, so assistive technology
+announces it, but the form renders `noValidate`: without `rules`, submitting
+the field empty is not blocked by the browser and `onSubmit` still runs.
+Validation is react-hook-form&#39;s alone.</div>
+              <pre><code>const NoValidate = () =&gt; &lt;NicknameForm /&gt;;</code></pre>
+            </div>
+        </div>
+    
+    
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="FormText">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> FormText</h2>
+      <div class="badges">
+        <label for="c-14-components-formtext-props" class="badge ok as-toggle">15 prop types</label>
+        
+        <label for="c-14-components-formtext-stories" class="badge ok as-toggle">9 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/form-text/form-text.stories.tsx">components-formtext · ./src/form-text/form-text.stories.tsx</div>
+    <div>Label, Input, description and error bound to one react-hook-form field</div>
+    <div class="hint">FormText is a complete text field bound to one react-hook-form value: label,
+`Input`, helper text and validation error in the standard order, wired
+through `useController`. It renders inside a `Form.Root` and needs only a
+`name`; `required`, `invalid` and the error reach the label, the input&#39;s
+`aria-*` attributes and the message with no ids written by hand.
+
+It covers the common case. For another layout — an input with addons, a
+different control, a message rendered elsewhere — compose `useController`
+with the `FieldText`, `Label`, `Input` and `Field.*` primitives directly.</div>
+    <div class="kv"><span class="chip">summary: Label, Input, description and error bound to one react-hook-form field</span><span class="chip">example: &lt;FormText
+  name=&quot;taxId&quot;
+  label=&quot;Tax ID&quot;
+  tooltip=&quot;The EIN the IRS issued to the agency.&quot;
+  description=&quot;Nine digits, with or without the dash.&quot;
+  required
+  rules={{ required: &#39;Enter the tax ID.&#39;, pattern: { value: /^\d{2}-?\d{7}$/, message: &#39;Nine digits.&#39; } }}
+  inputProps={{ inputMode: &#39;numeric&#39;, autoComplete: &#39;off&#39; }}
+/&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-14-components-formtext-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-14-components-formtext-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">15 prop types</span>
+            </div>
+            <pre><code>Component: src/form-text/index.ts::FormText</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * The form&#39;s `control`, from `useForm()`. Defaults to the one the
+ * surrounding `Form.Root` provides; pass it explicitly to get `name`
+ * inference without writing the generic, or when the field renders outside
+ * a `Form.Root`. A `control` whose resolver transforms the values is
+ * accepted as is.
+ */
+control?: Control&lt;FieldValues, any, FieldValues&gt;
+
+/**
+ * `id` for the control. Generated when omitted. Set it here, not on the
+ * control, so the label and the messages keep pointing at the right element.
+ */
+controlId?: string
+
+/**
+ * Helper text shown under the control and announced through its
+ * `aria-describedby`. Use it for guidance the user needs before typing; put
+ * details worth a click in `tooltip` instead.
+ */
+description?: ReactNode
+
+/**
+ * Disables the control through its context and sets `data-disabled` on the root.
+ * Disables the input and marks the field. Unlike react-hook-form&#39;s own
+ * `disabled` option, the value stays in the submitted data: disabling a
+ * field is a presentation decision, not a change to the form&#39;s values.
+ */
+disabled?: boolean
+
+/**
+ * Everything else the `Input` should receive: `type`, `placeholder`,
+ * `maxLength`, `autoComplete`, `size`, `className`… Handlers such as
+ * `onChange` and `onBlur` run after react-hook-form&#39;s, which are already
+ * wired.
+ */
+inputProps?: FormTextInputProps
+
+/**
+ * The caption, rendered as the field&#39;s label. Text in almost every case.
+ */
+label: ReactNode
+
+/**
+ * Path of the value in the form, nested paths included (`&#39;agency.npn&#39;`).
+ * Type it against the form&#39;s values with the generic
+ * (`&lt;FormText&lt;Values&gt; name=&quot;agency.npn&quot; /&gt;`) or by passing `control`: the
+ * path must then exist and hold a string (`FormTextPath`).
+ */
+name: &quot;agencyName&quot;
+
+/**
+ * Appends a muted &quot; (optional)&quot; to the label. The forms mark optional fields
+ * rather than required ones; ignored when `required` is set.
+ */
+optional?: boolean
+
+/**
+ * Layout of the field. `vertical` (default) stacks label, control and
+ * messages. `horizontal` is one row at every width: the first child fills it
+ * and the rest keep their natural width, aligned to the right, so the
+ * controls of stacked fields line up. `responsive` stacks below `28rem` and
+ * behaves like `horizontal` from there, measured on the field itself, so it
+ * needs no particular wrapper. In both, `Field.Content` groups a control with
+ * its messages, or a label with its description.
+ */
+orientation?: &quot;horizontal&quot; | &quot;vertical&quot; | &quot;responsive&quot;
+
+/**
+ * Makes the control read-only through its context (focusable and copyable,
+ * not editable, still submitted) and sets `data-readonly` on the root.
+ */
+readOnly?: boolean
+
+/**
+ * Single source of truth for a required field: the `Label` shows its
+ * asterisk and the control receives `required`, both through context.
+ * Marks the field required: an asterisk on the label and the native
+ * `required` attribute on the input, which assistive technology announces.
+ * It does not validate — pair it with `rules.required` or a resolver — and it
+ * never triggers the browser bubble, since `Form.Root` renders `noValidate`.
+ */
+required?: boolean
+
+/**
+ * react-hook-form validation rules for this field (`required`, `pattern`,
+ * `validate`…), same as `register`&#39;s. They only validate: `rules.required`
+ * does not mark the field `required` — that is a separate, visible decision.
+ */
+rules?: Omit&lt;RegisterOptions&lt;FieldValues, &quot;agencyName&quot;&gt;, &quot;disabled&quot; | &quot;valueAsNumber&quot; | &quot;valueAsDate&quot; | &quot;setValueAs&quot;&gt;
+
+/**
+ * Drops the value from the form when the field unmounts, react-hook-form&#39;s
+ * `shouldUnregister`. Defaults to `false`: a field revealed by another one
+ * keeps its value while hidden.
+ */
+shouldUnregister?: boolean
+
+/**
+ * Content of an info tooltip rendered beside the label, for details that
+ * would clutter the description. The trigger is a sibling of the label, so
+ * the field&#39;s accessible name stays the label text.
+ */
+tooltip?: ReactNode
+
+/**
+ * Preferred side of the tooltip. Defaults to `&#39;top&#39;`.
+ */
+tooltipSide?: &quot;right&quot; | &quot;top&quot; | &quot;bottom&quot; | &quot;left&quot;</code></pre>
+          </div>
+        </div>
+    
+        <div class="panel panel-stories">
+          
+          
+          
+          <div class="note ok">
+                <div class="row">
+                  <span class="ex-name">Imports</span>
+                </div>
+                <pre><code>import { Button, Field, Form, FormText } 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>Required text field validating on submit</div>
+              <div class="hint">The field consumers write: a `name`, a `label` and the validation rule.
+Submitting empty renders the error and marks the input invalid; typing
+clears both and the value reaches `onSubmit`.</div>
+              <pre><code>const Default = () =&gt; &lt;AgencyNameForm
+    name=&quot;agencyName&quot;
+    label=&quot;Agency name&quot;
+    orientation=&quot;vertical&quot;
+    required
+    optional={false}
+    disabled={false}
+    readOnly={false} /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">With Description And Tooltip</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Helper text under the input and an info tooltip beside the label</div>
+              <div class="hint">`description` is helper text under the input, announced through
+`aria-describedby`. `tooltip` is an info button beside the label for details
+worth a click; it is a sibling of the `&lt;label&gt;`, so the field&#39;s accessible
+name stays the label text.</div>
+              <pre><code>const WithDescriptionAndTooltip = () =&gt; &lt;TaxIdForm /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Optional</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Optional field with the &quot; (optional)&quot; label suffix</div>
+              <div class="hint">The forms mark optional fields rather than required ones: `optional`
+appends a muted suffix to the label and leaves the input without the
+`required` attribute.</div>
+              <pre><code>const Optional = () =&gt; &lt;PhoneForm /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">With Rules</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Nested path with validation rules, typed through the generic</div>
+              <div class="hint">`rules` are react-hook-form&#39;s, and `name` accepts nested paths typed against
+the form&#39;s values through the generic. `rules.required` validates but does
+not mark the field required: that stays an explicit `required` prop.</div>
+              <pre><code>const WithRules = () =&gt; &lt;NpnForm /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">All Errors</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Every failed rule listed under criteriaMode &#39;all&#39;</div>
+              <div class="hint">A form set to react-hook-form&#39;s `criteriaMode: &#39;all&#39;` collects every rule
+that failed instead of stopping at the first, and the field lists them all.
+With the default `&#39;firstError&#39;` a single message is rendered, as in the other
+stories.</div>
+              <pre><code>const AllErrors = () =&gt; &lt;PasswordRulesForm /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Input Props Chaining</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Input attributes and a consumer onChange chained after the form&#39;s</div>
+              <div class="hint">`inputProps` carries the input&#39;s own attributes — `type`, `placeholder`,
+`maxLength`, `size`… — and its handlers. A consumer `onChange` runs after
+react-hook-form&#39;s: by the time it fires, `getValues` already returns the new
+value.</div>
+              <pre><code>const InputPropsChaining = () =&gt; &lt;MobileForm /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Horizontal</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Horizontal orientation and class names through the root props</div>
+              <div class="hint">Root props pass through: `orientation=&quot;horizontal&quot;` lays the label and the
+control in a row, and `className` on the root or in `inputProps` sizes them.
+The `Input` is full-width by default, so a settings row gives it a width.
+`responsive` stacks the field below 28rem and rows it from there.</div>
+              <pre><code>const Horizontal = () =&gt; &lt;ProfileForm /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Disabled</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Disabled field whose value is still submitted</div>
+              <div class="hint">`disabled` disables the input and marks the field, and the value still
+reaches `onSubmit` — unlike react-hook-form&#39;s own `disabled` option, which
+drops it. Use `readOnly` for a value the user can copy but not edit.</div>
+              <pre><code>const Disabled = () =&gt; &lt;AccountForm /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Set Focus</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>setFocus reaches the input through the merged ref</div>
+              <div class="hint">react-hook-form&#39;s `ref` reaches the `&lt;input&gt;`, so `setFocus` and the focus
+on the first invalid field after submit both work with no ref written by
+hand.</div>
+              <pre><code>const SetFocus = () =&gt; &lt;SetFocusForm /&gt;;</code></pre>
+            </div>
+        </div>
+    
+    
   </div>
 </article>
 <article
@@ -4501,9 +5665,9 @@ actions outright unless the user needs to see them and understand why.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> HoverCard.Root</h2>
       <div class="badges">
-        <label for="c-11-components-hovercard-props" class="badge ok as-toggle">6 prop types</label>
+        <label for="c-15-components-hovercard-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-11-components-hovercard-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-15-components-hovercard-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -4535,10 +5699,10 @@ import { HoverCard } from &#39;@agentero/design-system/hover-card&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-11-components-hovercard-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-15-components-hovercard-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-11-components-hovercard-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-15-components-hovercard-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -4785,23 +5949,24 @@ trigger-dense UIs where an instant preview reads as more responsive.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Input</h2>
       <div class="badges">
-        <label for="c-12-components-input-props" class="badge ok as-toggle">7 prop types</label>
+        <label for="c-16-components-input-props" class="badge ok as-toggle">7 prop types</label>
         
-        <label for="c-12-components-input-stories" class="badge ok as-toggle">9 stories</label>
+        <label for="c-16-components-input-stories" class="badge ok as-toggle">9 stories</label>
         
         
       </div>
     </div>
     <div class="meta" title="./src/input/input.stories.tsx">components-input · ./src/input/input.stories.tsx</div>
-    <div>Base single-line text control, unaware of fields and form libraries</div>
-    <div class="hint">Input is the base single-line text control. It is intentionally unaware of
-form fields and form libraries: `id`, `aria-invalid` and `aria-describedby`
-are plain props, set by a field wrapper or by hand.
+    <div>Base single-line text control that takes its wiring from InputContext</div>
+    <div class="hint">Input is the base single-line text control. When a container such as
+`FieldText` provides `InputContext`, it picks up `id`, `aria-invalid` and
+`aria-describedby` on its own; standalone, as here, they are plain props set
+by hand.
 
 There is no `status` prop. Mark the control `aria-invalid` and the
 destructive border follows, so the styling can never disagree with what
 assistive technology announces.</div>
-    <div class="kv"><span class="chip">summary: Base single-line text control, unaware of fields and form libraries</span><span class="chip">example: &lt;Label htmlFor=&quot;email&quot;&gt;Email&lt;/Label&gt;
+    <div class="kv"><span class="chip">summary: Base single-line text control that takes its wiring from InputContext</span><span class="chip">example: &lt;Label htmlFor=&quot;email&quot;&gt;Email&lt;/Label&gt;
 &lt;Input id=&quot;email&quot; type=&quot;email&quot; placeholder=&quot;you@example.com&quot; /&gt;</span><span class="chip">example: &lt;Input id=&quot;email&quot; aria-invalid aria-describedby=&quot;email-error&quot; /&gt;
 &lt;span id=&quot;email-error&quot;&gt;Enter a valid email address.&lt;/span&gt;</span></div>
   </div>
@@ -4809,10 +5974,10 @@ assistive technology announces.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-12-components-input-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-16-components-input-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-12-components-input-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-16-components-input-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5024,9 +6189,9 @@ they cannot change.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Label</h2>
       <div class="badges">
-        <label for="c-13-components-label-props" class="badge ok as-toggle">3 prop types</label>
+        <label for="c-17-components-label-props" class="badge ok as-toggle">3 prop types</label>
         
-        <label for="c-13-components-label-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-17-components-label-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -5046,10 +6211,10 @@ still has to carry `required` / `aria-required`.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-13-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-17-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-13-components-label-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-17-components-label-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5085,7 +6250,7 @@ required?: boolean = false</code></pre>
                 <div class="row">
                   <span class="ex-name">Imports</span>
                 </div>
-                <pre><code>import { Label } from "@agentero/design-system";</code></pre>
+                <pre><code>import { Field, Label } from "@agentero/design-system";</code></pre>
               </div>
           
           
@@ -5098,7 +6263,7 @@ required?: boolean = false</code></pre>
               <div class="hint">A plain caption, associated with its control through `htmlFor`.</div>
               <pre><code>const Default = () =&gt; &lt;&gt;
     &lt;Label htmlFor=&quot;email&quot;&gt;Email&lt;/Label&gt;
-    &lt;input id=&quot;email&quot; placeholder=&quot;you@example.com&quot; /&gt;
+    &lt;input id=&quot;email&quot; placeholder=&quot;you@example.com&quot; className={inputRecipe()} /&gt;
 &lt;/&gt;;</code></pre>
             </div>
             <div class="note ok">
@@ -5130,6 +6295,28 @@ required?: boolean = false</code></pre>
 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 class="note ok">
+              <div class="row">
+                <span class="ex-name">Inside Field</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Inside a Field the label associates itself; explicit htmlFor wins</div>
+              <div class="hint">Inside a `Field.Root` the label reads `LabelContext` and points at the
+field&#39;s control with no `htmlFor`. An explicit `htmlFor` still wins.</div>
+              <pre><code>const InsideField = () =&gt; (
+    &lt;div className=&quot;flex flex-col gap-6&quot;&gt;
+        &lt;Field.Root&gt;
+            &lt;Label&gt;Email&lt;/Label&gt;
+            &lt;FieldInput /&gt;
+        &lt;/Field.Root&gt;
+
+        &lt;Field.Root&gt;
+            &lt;Label htmlFor=&quot;explicit-control&quot;&gt;Phone&lt;/Label&gt;
+            &lt;input id=&quot;explicit-control&quot; className={inputRecipe()} /&gt;
+        &lt;/Field.Root&gt;
+    &lt;/div&gt;
+);</code></pre>
+            </div>
         </div>
     
     
@@ -5147,9 +6334,9 @@ dropped, so a mistake never takes the page down.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Loading</h2>
       <div class="badges">
-        <label for="c-14-components-loading-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-18-components-loading-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-14-components-loading-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-18-components-loading-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -5166,10 +6353,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-14-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-18-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-14-components-loading-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-18-components-loading-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5320,9 +6507,9 @@ against the dark background.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Modal.Root</h2>
       <div class="badges">
-        <label for="c-15-components-modal-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-19-components-modal-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-15-components-modal-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-19-components-modal-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -5368,10 +6555,10 @@ import { Modal } from &#39;@agentero/design-system/modal&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-15-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-19-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-15-components-modal-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-19-components-modal-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5568,9 +6755,9 @@ announced as an `alertdialog`. Only the footer actions close it.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Pagination</h2>
       <div class="badges">
-        <label for="c-16-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-20-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-16-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-20-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -5600,10 +6787,10 @@ const [page, setPage] = useState(1);
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-16-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-20-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-16-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-20-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5758,9 +6945,9 @@ entries summary follow along.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Popover.Root</h2>
       <div class="badges">
-        <label for="c-17-components-popover-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-21-components-popover-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-17-components-popover-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-21-components-popover-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -5789,10 +6976,10 @@ import { Popover } from &#39;@agentero/design-system/popover&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-17-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-21-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-17-components-popover-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-21-components-popover-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5991,9 +7178,9 @@ focus returning to its trigger once the modal closes.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Progress</h2>
       <div class="badges">
-        <label for="c-18-components-progress-props" class="badge ok as-toggle">4 prop types</label>
+        <label for="c-22-components-progress-props" class="badge ok as-toggle">4 prop types</label>
         
-        <label for="c-18-components-progress-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-22-components-progress-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -6012,10 +7199,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-18-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-22-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-18-components-progress-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-22-components-progress-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -6134,7 +7321,7 @@ percentage: number</code></pre>
       <div class="badges">
         
         
-        <label for="c-19-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-23-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -6151,7 +7338,7 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-19-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-23-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
   
@@ -6247,9 +7434,9 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Switch</h2>
       <div class="badges">
-        <label for="c-20-components-switch-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-24-components-switch-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-20-components-switch-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-24-components-switch-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -6265,10 +7452,10 @@ a Checkbox for a single boolean that applies instantly, and pair it with a
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-20-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-24-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-20-components-switch-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-24-components-switch-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -6449,9 +7636,9 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Table.Root</h2>
       <div class="badges">
-        <label for="c-21-components-table-props" class="badge ok as-toggle">6 prop types</label>
+        <label for="c-25-components-table-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-21-components-table-stories" class="badge ok as-toggle">9 stories</label>
+        <label for="c-25-components-table-stories" class="badge ok as-toggle">9 stories</label>
         
         
       </div>
@@ -6482,10 +7669,10 @@ import { Table } from &#39;@agentero/design-system/table&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-21-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-25-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-21-components-table-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-25-components-table-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -6680,9 +7867,9 @@ import { Fragment } from "react";</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
       <div class="badges">
-        <label for="c-22-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
+        <label for="c-26-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
         
-        <label for="c-22-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
+        <label for="c-26-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
         
         
       </div>
@@ -6713,10 +7900,10 @@ import { Tabs } from &#39;@agentero/design-system/tabs&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-22-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-26-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-22-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-26-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -6937,9 +8124,9 @@ tablist role is announced.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tag</h2>
       <div class="badges">
-        <label for="c-23-components-tag-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-27-components-tag-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-23-components-tag-stories" class="badge ok as-toggle">12 stories</label>
+        <label for="c-27-components-tag-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -6958,10 +8145,10 @@ it an interactive link or button, which adds the pointer cursor and hover fill.<
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-23-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-27-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-23-components-tag-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-27-components-tag-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7386,9 +8573,9 @@ leading + trailing icons, and icon-only.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Toast</h2>
       <div class="badges">
-        <label for="c-24-components-toast-props" class="badge ok as-toggle">11 prop types</label>
+        <label for="c-28-components-toast-props" class="badge ok as-toggle">11 prop types</label>
         
-        <label for="c-24-components-toast-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-28-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
         
       </div>
@@ -7407,10 +8594,10 @@ common feedback patterns.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-24-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-28-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-24-components-toast-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-28-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7839,9 +9026,9 @@ action (e.g., a sync icon for a sync-in-progress toast).</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tooltip</h2>
       <div class="badges">
-        <label for="c-25-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
+        <label for="c-29-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
         
-        <label for="c-25-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-29-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -7860,10 +9047,10 @@ on hover or focus.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-25-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-29-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-25-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-29-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8035,9 +9222,9 @@ sideOffset?: number = 4</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> ValidationList</h2>
       <div class="badges">
-        <label for="c-26-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
+        <label for="c-30-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
         
-        <label for="c-26-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-30-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -8058,10 +9245,10 @@ your form validation; it does not own the input or block submission.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-26-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-30-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-26-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-30-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">