@supersoniks/concorde 5.0.3 → 5.0.5

package/docs/crawl/core/components/ui/card/card.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Card — Concorde</title>
-  <meta name="description" content="A surface for grouped content: padding, radius, shadow, and semantic type colors via shared theme tokens. Compose sonic-card-header, sonic-card-main, and sonic-card-footer inside the card, or put any ">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component, type, sonic-card-header, sonic-card-main, sonic-card-footer, base, light, invert, neutral, primary">
+  <meta name="description" content="Cards group related content on a padded surface with radius, theme type colors, and elevation. Default shadow is lg. Compose sonic-card-header / sonic-card-main / sonic-card-footer, or place any marku">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component, type, shadow, lg, sonic-card-header, sonic-card-main, sonic-card-footer, base, default, light">
   <meta name="concorde-doc-id" content="core/components/ui/card/card">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html">
 </head>
@@ -15,14 +15,20 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Card</strong>. A surface for grouped content: padding, radius, shadow, and semantic type colors via shared theme tokens. Compose sonic-card-header, sonic-card-main, and sonic-card-footer inside the card, or put any  <span>Doc ID: <code>core/components/ui/card/card</code>. Keywords: Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component, type, sonic-card-header, sonic-card-main, sonic-card-footer, base, light, invert, neutral, primary. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html">https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Card</strong>. Cards group related content on a padded surface with radius, theme type colors, and elevation. Default shadow is lg. Compose sonic-card-header / sonic-card-main / sonic-card-footer, or place any marku <span>Doc ID: <code>core/components/ui/card/card</code>. Keywords: Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component, type, shadow, lg, sonic-card-header, sonic-card-main, sonic-card-footer, base, default, light. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html">https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html</a>.</span></p>
       <h1 id="card">Card</h1>
-<p>A <strong>surface</strong> for grouped content: padding, radius, shadow, and semantic <strong><code>type</code></strong> colors via shared theme tokens. Compose <strong><code>sonic-card-header</code></strong>, <strong><code>sonic-card-main</code></strong>, and <strong><code>sonic-card-footer</code></strong> inside the card, or put any markup in the default slot.</p>
-<p>Default <strong><code>type</code></strong> is <code>base</code> (page background). Use <code>light</code> for a subtle gray panel, <code>invert</code> / <code>neutral</code> for high-contrast blocks, and <code>primary</code>, <code>info</code>, <code>success</code>, <code>warning</code>, or <code>danger</code> for tinted surfaces (divider tokens apply on colored types).</p>
+<p>Cards <strong>group related content</strong> on a padded surface with radius, theme <strong><code>type</code></strong> colors, and elevation. Default <strong><code>shadow</code></strong> is <code>lg</code>. Compose <strong><code>sonic-card-header</code></strong> / <strong><code>sonic-card-main</code></strong> / <strong><code>sonic-card-footer</code></strong>, or place any markup in the default slot.</p>
+<h2 id="basic-example">Basic example</h2>
+<pre><code>&lt;sonic-card class=&quot;max-w-sm&quot;&gt;
+      &lt;p class=&quot;m-0&quot;&gt;Related content on a raised surface.&lt;/p&gt;
+    &lt;/sonic-card&gt;
+</code></pre>
 <h2 id="type">Type</h2>
+<p>Default <strong><code>type</code></strong> is <code>base</code>. <strong><code>default</code></strong> and <strong><code>light</code></strong> share the same surface tokens.</p>
 <pre><code>&lt;div class=&quot;flex flex-wrap gap-3&quot;&gt;
       &lt;sonic-card type=&quot;base&quot; class=&quot;min-w-[8rem]&quot;&gt;Base&lt;/sonic-card&gt;
       &lt;sonic-card type=&quot;light&quot; class=&quot;min-w-[8rem]&quot;&gt;Light&lt;/sonic-card&gt;
+      &lt;sonic-card type=&quot;default&quot; class=&quot;min-w-[8rem]&quot;&gt;Default&lt;/sonic-card&gt;
       &lt;sonic-card type=&quot;primary&quot; class=&quot;min-w-[8rem]&quot;&gt;Primary&lt;/sonic-card&gt;
       &lt;sonic-card type=&quot;info&quot; class=&quot;min-w-[8rem]&quot;&gt;Info&lt;/sonic-card&gt;
       &lt;sonic-card type=&quot;success&quot; class=&quot;min-w-[8rem]&quot;&gt;Success&lt;/sonic-card&gt;
@@ -32,8 +38,18 @@
       &lt;sonic-card type=&quot;invert&quot; class=&quot;min-w-[8rem]&quot;&gt;Invert&lt;/sonic-card&gt;
     &lt;/div&gt;
 </code></pre>
+<h2 id="shadow">Shadow</h2>
+<p>Set <strong><code>shadow</code></strong> to control elevation. Default is <code>lg</code>.</p>
+<pre><code>&lt;div class=&quot;grid gap-4 sm:grid-cols-2 max-w-2xl&quot;&gt;
+      &lt;sonic-card shadow=&quot;none&quot; class=&quot;min-h-[5rem] flex items-center justify-center&quot;&gt;None&lt;/sonic-card&gt;
+      &lt;sonic-card shadow=&quot;sm&quot; class=&quot;min-h-[5rem] flex items-center justify-center&quot;&gt;Small&lt;/sonic-card&gt;
+      &lt;sonic-card shadow=&quot;md&quot; class=&quot;min-h-[5rem] flex items-center justify-center&quot;&gt;Medium&lt;/sonic-card&gt;
+      &lt;sonic-card shadow=&quot;lg&quot; class=&quot;min-h-[5rem] flex items-center justify-center&quot;&gt;Large&lt;/sonic-card&gt;
+    &lt;/div&gt;
+</code></pre>
 <h2 id="header">Header</h2>
-<p>Quick titles with <strong><code>label</code></strong> and <strong><code>description</code></strong> attributes, or full control through the default slot. <strong><code>slot=&quot;suffix&quot;</code></strong> aligns badges or actions on the right; suffix content does not shrink when the title wraps.</p>
+<p>Quick titles with <strong><code>label</code></strong> and <strong><code>description</code></strong>, or full control through the default slot. <strong><code>slot=&quot;suffix&quot;</code></strong> aligns badges or actions on the right; suffix content does not shrink when the title wraps.</p>
+<p><code>label</code> and <code>description</code> accept HTML (rendered as markup). Prefer plain text when possible; use <strong><code>sonic-card-header-description</code></strong> or the default slot for structured content.</p>
 <pre><code>&lt;div class=&quot;grid gap-4 max-w-xl&quot;&gt;
       &lt;sonic-card&gt;
         &lt;sonic-card-header
@@ -48,7 +64,7 @@
           &lt;sonic-card-header-description&gt;
             Choose what we email you about.
           &lt;/sonic-card-header-description&gt;
-          &lt;sonic-badge slot=&quot;suffix&quot;  type=&quot;warning&quot; size=&quot;xs&quot;&gt;3 new&lt;/sonic-badge&gt;
+          &lt;sonic-badge slot=&quot;suffix&quot; type=&quot;warning&quot; size=&quot;xs&quot;&gt;3 new&lt;/sonic-badge&gt;
         &lt;/sonic-card-header&gt;
       &lt;/sonic-card&gt;
 
@@ -81,7 +97,6 @@
       &lt;/sonic-card&gt;
     &lt;/div&gt;
 </code></pre>
-<p><code>label</code> and <code>description</code> accept HTML (rendered as markup). Prefer plain text when possible; use the slot for structured content.</p>
 <h2 id="main">Main</h2>
 <p>Optional wrapper for the primary content area (typography, media, forms).</p>
 <pre><code>&lt;sonic-card class=&quot;max-w-xl&quot;&gt;
@@ -103,7 +118,7 @@
         &lt;p class=&quot;m-0&quot;&gt;This project and all of its data will be removed permanently.&lt;/p&gt;
       &lt;/sonic-card-main&gt;
       &lt;sonic-card-footer&gt;
-      &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
+        &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
         &lt;div class=&quot;flex flex-wrap gap-2 justify-end&quot;&gt;
           &lt;sonic-button variant=&quot;ghost&quot; size=&quot;sm&quot;&gt;Cancel&lt;/sonic-button&gt;
           &lt;sonic-button type=&quot;danger&quot; size=&quot;sm&quot;&gt;Delete&lt;/sonic-button&gt;
@@ -115,14 +130,14 @@
 <p>Header, media, body, and footer together.</p>
 <pre><code>&lt;sonic-card class=&quot;max-w-md&quot;&gt;
       &lt;sonic-card-header label=&quot;Featured route&quot; description=&quot;San Francisco → New York&quot;&gt;
-        &lt;sonic-icon slot=&quot;suffix&quot; library=&quot;iconoir&quot; name=&quot;airplane&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;sonic-icon slot=&quot;suffix&quot; library=&quot;iconoir&quot; name=&quot;airplane&quot; aria-hidden=&quot;true&quot;&gt;&lt;/sonic-icon&gt;
       &lt;/sonic-card-header&gt;
       &lt;sonic-card-main&gt;
         &lt;sonic-image
           rounded
           ratio=&quot;16/9&quot;
-          src=&quot;https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=800&amp;q=80&quot;
-          alt=&quot;&quot;
+          src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
+          alt=&quot;Airplane wing above the clouds&quot;
         &gt;&lt;/sonic-image&gt;
         &lt;p class=&quot;mb-0&quot;&gt;
           Nonstop flight with flexible dates. Prices shown include taxes and fees.
@@ -136,6 +151,101 @@
       &lt;/sonic-card-footer&gt;
     &lt;/sonic-card&gt;
 </code></pre>
+<h2 id="api-reference">API reference</h2>
+<h3 id="sonic-card"><code>sonic-card</code></h3>
+<table>
+<thead>
+<tr>
+<th>Attribute</th>
+<th>Values</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>type</code></td>
+<td><code>base</code> (default) · <code>light</code> · <code>invert</code> · <code>default</code> · <code>primary</code> · <code>warning</code> · <code>danger</code> · <code>success</code> · <code>info</code> · <code>neutral</code></td>
+<td>Semantic background and text (<code>default</code> and <code>light</code> share the same surface)</td>
+</tr>
+<tr>
+<td><code>shadow</code></td>
+<td><code>none</code> · <code>sm</code> · <code>md</code> · <code>lg</code> (default <code>lg</code>)</td>
+<td>Elevation on the card surface</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Free-form content (header, main, footer, or direct markup)</td>
+</tr>
+</tbody></table>
+<h3 id="sonic-card-header"><code>sonic-card-header</code></h3>
+<table>
+<thead>
+<tr>
+<th>Attribute</th>
+<th>Values</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>label</code></td>
+<td>HTML</td>
+<td>Title (rendered as markup)</td>
+</tr>
+<tr>
+<td><code>description</code></td>
+<td>HTML</td>
+<td>Subtitle below the title</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Custom title / description when attributes are not enough</td>
+</tr>
+<tr>
+<td><code>suffix</code></td>
+<td>Actions or badges aligned on the right (does not shrink)</td>
+</tr>
+</tbody></table>
+<h3 id="sonic-card-header-description"><code>sonic-card-header-description</code></h3>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Subtitle text; styled below the title when slotted in <strong><code>sonic-card-header</code></strong></td>
+</tr>
+</tbody></table>
+<h3 id="sonic-card-main--sonic-card-footer"><code>sonic-card-main</code> · <code>sonic-card-footer</code></h3>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Primary content (<code>main</code>) or actions / metadata (<code>footer</code>)</td>
+</tr>
+</tbody></table>
 
     </article>
   </main>

package/docs/crawl/core/components/ui/divider/divider.html

@@ -4,16 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Divider — Concorde</title>
-  <meta name="description" content="Default
-
-Align
-
-Size
-
-Custom
-
-  Lorem ipsum dolor sit amet  +25">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/divider/divider, divider, Divider, UI component, sonic-divider, web component">
+  <meta name="description" content="sonic-divider draws a horizontal or vertical rule with optional centered label copy. Use it to separate sections in forms, cards, and sonic-menu. Set label for simple HTML captions or use the default ">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/divider/divider, divider, Divider, UI component, sonic-divider, web component, sonic-menu, label, align, center, lineStyle, solid, size, 0.5rem">
   <meta name="concorde-doc-id" content="core/components/ui/divider/divider">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/divider/divider.html">
 </head>
@@ -23,34 +15,128 @@ Custom
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Divider</strong>. Default
-
-Align
-
-Size
-
-Custom
-
-  Lorem ipsum dolor sit amet  +25 <span>Doc ID: <code>core/components/ui/divider/divider</code>. Keywords: Concorde, supersoniks, core/components/ui/divider/divider, divider, Divider, UI component, sonic-divider, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/divider/divider.html">https://concorde.supersoniks.org/crawl/core/components/ui/divider/divider.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Divider</strong>. sonic-divider draws a horizontal or vertical rule with optional centered label copy. Use it to separate sections in forms, cards, and sonic-menu. Set label for simple HTML captions or use the default  <span>Doc ID: <code>core/components/ui/divider/divider</code>. Keywords: Concorde, supersoniks, core/components/ui/divider/divider, divider, Divider, UI component, sonic-divider, web component, sonic-menu, label, align, center, lineStyle, solid, size, 0.5rem. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/divider/divider.html">https://concorde.supersoniks.org/crawl/core/components/ui/divider/divider.html</a>.</span></p>
       <h1 id="divider">Divider</h1>
-<h2 id="default">Default</h2>
+<p><strong><code>sonic-divider</code></strong> draws a horizontal or vertical rule with optional <strong>centered label</strong> copy. Use it to separate sections in forms, cards, and <strong><code>sonic-menu</code></strong>. Set <strong><code>label</code></strong> for simple HTML captions or use the <strong>default slot</strong> for richer markup; default <strong><code>align</code></strong> is <strong><code>center</code></strong> and default <strong><code>lineStyle</code></strong> is <strong><code>solid</code></strong>.</p>
+<h2 id="basic-example">Basic example</h2>
+<p>A bare divider is a full-width line with vertical margin. Omit <strong><code>size</code></strong> to use the host default spacing (<code>0.5rem</code> block margin).</p>
 <pre><code>&lt;sonic-divider&gt;&lt;/sonic-divider&gt;
 </code></pre>
-<h2 id="align">Align</h2>
-<pre><code>&lt;sonic-divider label=&quot;Default centered label&quot;&gt;&lt;/sonic-divider&gt;
-  &lt;sonic-divider label=&quot;Right&quot; align=&quot;right&quot;&gt;&lt;/sonic-divider&gt;
-  &lt;sonic-divider label=&quot;Center&quot; align=&quot;center&quot;&gt;&lt;/sonic-divider&gt;
-  &lt;sonic-divider label=&quot;Left&quot; align=&quot;left&quot;&gt;&lt;/sonic-divider&gt;
+<h2 id="label-and-align">Label and align</h2>
+<p><strong><code>label</code></strong> renders inside the line (HTML via the same pipeline as other form labels). <strong><code>align</code></strong> controls which side(s) of the line remain visible: <strong><code>left</code></strong> drops the leading segment, <strong><code>right</code></strong> drops the trailing segment, <strong><code>center</code></strong> keeps both.</p>
+<pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
+      &lt;sonic-divider label=&quot;Default centered label&quot;&gt;&lt;/sonic-divider&gt;
+      &lt;sonic-divider label=&quot;Left&quot; align=&quot;left&quot;&gt;&lt;/sonic-divider&gt;
+      &lt;sonic-divider label=&quot;Center&quot; align=&quot;center&quot;&gt;&lt;/sonic-divider&gt;
+      &lt;sonic-divider label=&quot;Right&quot; align=&quot;right&quot;&gt;&lt;/sonic-divider&gt;
+    &lt;/div&gt;
 </code></pre>
 <h2 id="size">Size</h2>
-<pre><code>&lt;sonic-divider size=&quot;xs&quot; label=&quot;xs&quot;&gt;&lt;/sonic-divider&gt;
-  &lt;sonic-divider size=&quot;sm&quot; label=&quot;sm&quot;&gt;&lt;/sonic-divider&gt;
-  &lt;sonic-divider size=&quot;md&quot; label=&quot;md&quot;&gt;&lt;/sonic-divider&gt;
-  &lt;sonic-divider size=&quot;lg&quot; label=&quot;lg&quot;&gt;&lt;/sonic-divider&gt;
+<p><strong><code>size</code></strong> adjusts block margin and label font size. Values follow the shared Concorde scale (<code>2xs</code> … <code>2xl</code>).</p>
+<pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
+      &lt;sonic-divider size=&quot;2xs&quot; label=&quot;2xs&quot;&gt;&lt;/sonic-divider&gt;
+      &lt;sonic-divider size=&quot;xs&quot; label=&quot;xs&quot;&gt;&lt;/sonic-divider&gt;
+      &lt;sonic-divider size=&quot;sm&quot; label=&quot;sm&quot;&gt;&lt;/sonic-divider&gt;
+      &lt;sonic-divider size=&quot;md&quot; label=&quot;md&quot;&gt;&lt;/sonic-divider&gt;
+      &lt;sonic-divider size=&quot;lg&quot; label=&quot;lg&quot;&gt;&lt;/sonic-divider&gt;
+      &lt;sonic-divider size=&quot;xl&quot; label=&quot;xl&quot;&gt;&lt;/sonic-divider&gt;
+      &lt;sonic-divider size=&quot;2xl&quot; label=&quot;2xl&quot;&gt;&lt;/sonic-divider&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="line-style">Line style</h2>
+<p><strong><code>lineStyle</code></strong> sets the stroke of the rule (<code>solid</code> · <code>dashed</code> · <code>dotted</code>). In HTML use the reflected attribute <strong><code>linestyle</code></strong> (case-insensitive).</p>
+<pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
+      &lt;sonic-divider label=&quot;Solid&quot;&gt;&lt;/sonic-divider&gt;
+      &lt;sonic-divider label=&quot;Dashed&quot; lineStyle=&quot;dashed&quot;&gt;&lt;/sonic-divider&gt;
+      &lt;sonic-divider label=&quot;Dotted&quot; lineStyle=&quot;dotted&quot;&gt;&lt;/sonic-divider&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="vertical-and-margin">Vertical and margin</h2>
+<p>Set <strong><code>vertical</code></strong> for a column rule (for example between toolbar actions). <strong><code>noMargin</code></strong> removes host margin when a parent layout already provides spacing.</p>
+<pre><code>&lt;div class=&quot;flex items-stretch gap-2&quot; style=&quot;min-height: 3rem;&quot;&gt;
+      &lt;span class=&quot;flex items-center px-2&quot;&gt;Before&lt;/span&gt;
+      &lt;sonic-divider vertical noMargin&gt;&lt;/sonic-divider&gt;
+      &lt;span class=&quot;flex items-center px-2&quot;&gt;After&lt;/span&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="default-slot">Default slot</h2>
+<p>Slotted content replaces or augments <strong><code>label</code></strong>. Useful for badges, icons, or mixed markup in menus.</p>
+<pre><code>&lt;sonic-divider&gt;
+      &lt;span class=&quot;mr-2&quot;&gt;Section title&lt;/span&gt;
+      &lt;sonic-badge type=&quot;danger&quot;&gt;+25&lt;/sonic-badge&gt;
+    &lt;/sonic-divider&gt;
 </code></pre>
-<h2 id="custom">Custom</h2>
-<pre><code>&lt;sonic-divider&gt;&lt;span class=&quot;mr-2&quot;&gt;Lorem ipsum dolor sit amet&lt;/span&gt;&lt;sonic-badge type=&quot;danger&quot;&gt;+25&lt;/sonic-badge&gt;&lt;/sonic-divider&gt;
+<h2 id="inside-typed-cards">Inside typed cards</h2>
+<p>On <strong><code>sonic-card</code></strong> with semantic <strong><code>type</code></strong> (<code>primary</code> · <code>warning</code> · <code>danger</code> · <code>info</code> · <code>success</code>), the rule uses the card’s text color at reduced opacity so it stays visible on tinted surfaces. <strong><code>label</code></strong> and slotted captions use the same foreground color as surrounding copy.</p>
+<pre><code>&lt;div class=&quot;grid gap-4 max-w-xl&quot;&gt;
+      &lt;sonic-card type=&quot;danger&quot;&gt;
+        &lt;div&gt;This action cannot be undone.&lt;/div&gt;
+        &lt;sonic-divider label=&quot;Affected resources&quot;&gt;&lt;/sonic-divider&gt;
+        &lt;ul class=&quot;m-0 pl-5 text-sm&quot;&gt;
+          &lt;li&gt;Project files&lt;/li&gt;
+          &lt;li&gt;Shared links&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/sonic-card&gt;
+      &lt;sonic-card type=&quot;info&quot;&gt;
+        &lt;div&gt;Maintenance is scheduled for tonight.&lt;/div&gt;
+        &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
+        &lt;div class=&quot;opacity-60&quot;&gt;Expected downtime: about 15 minutes.&lt;/div&gt;
+      &lt;/sonic-card&gt;
+    &lt;/div&gt;
 </code></pre>
+<h2 id="api-reference">API reference</h2>
+<table>
+<thead>
+<tr>
+<th>Attribute</th>
+<th>Values</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>label</code></td>
+<td>string (HTML)</td>
+<td>Caption centered on the rule; combined with default-slot content when both are set</td>
+</tr>
+<tr>
+<td><code>align</code></td>
+<td><code>left</code> · <code>center</code> · <code>right</code> (default <code>center</code>)</td>
+<td>Hides the leading or trailing line segment for left/right alignment</td>
+</tr>
+<tr>
+<td><code>size</code></td>
+<td><code>2xs</code> · <code>xs</code> · <code>sm</code> · <code>md</code> · <code>lg</code> · <code>xl</code> · <code>2xl</code> · <code>inherit</code></td>
+<td>Vertical margin and label <code>font-size</code>; omit for host defaults</td>
+</tr>
+<tr>
+<td><code>lineStyle</code></td>
+<td><code>solid</code> · <code>dashed</code> · <code>dotted</code> (default <code>solid</code>)</td>
+<td>Stroke style of the rule (HTML attribute <code>linestyle</code>)</td>
+</tr>
+<tr>
+<td><code>vertical</code></td>
+<td>boolean</td>
+<td>Renders a vertical rule; swap block/inline margins</td>
+</tr>
+<tr>
+<td><code>noMargin</code></td>
+<td>boolean</td>
+<td>Sets host margin to <code>0</code></td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Label markup when <strong><code>label</code></strong> is insufficient or empty</td>
+</tr>
+</tbody></table>
+<p>The inner flex container exposes <strong><code>part=&quot;divider&quot;</code></strong> for theme overrides.</p>
 
     </article>
   </main>