@supersoniks/concorde 5.0.4 → 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="Suffix">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component">
+  <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,83 +15,237 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Card</strong>. Suffix <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. 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>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>
-<pre><code>&lt;div class=&quot;grid grid-cols-3 gap-3&quot;&gt;
-    &lt;sonic-card type=&quot;base&quot;&gt;Base&lt;/sonic-card&gt;
-    &lt;sonic-card type=&quot;light&quot;&gt;Light&lt;/sonic-card&gt;
-    &lt;sonic-card type=&quot;primary&quot;&gt;Primary&lt;/sonic-card&gt;
-    &lt;sonic-card type=&quot;warning&quot;&gt;Warning&lt;/sonic-card&gt;
-    &lt;sonic-card type=&quot;danger&quot;&gt;Danger&lt;/sonic-card&gt;
-    &lt;sonic-card type=&quot;success&quot;&gt;Success&lt;/sonic-card&gt;
-    &lt;sonic-card type=&quot;info&quot;&gt;Info&lt;/sonic-card&gt;
-    &lt;sonic-card type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-card&gt;
-    &lt;sonic-card type=&quot;invert&quot;&gt;Invert&lt;/sonic-card&gt;
-  &lt;/div&gt;
+<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;
+      &lt;sonic-card type=&quot;warning&quot; class=&quot;min-w-[8rem]&quot;&gt;Warning&lt;/sonic-card&gt;
+      &lt;sonic-card type=&quot;danger&quot; class=&quot;min-w-[8rem]&quot;&gt;Danger&lt;/sonic-card&gt;
+      &lt;sonic-card type=&quot;neutral&quot; class=&quot;min-w-[8rem]&quot;&gt;Neutral&lt;/sonic-card&gt;
+      &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>
-<pre><code>&lt;div class=&quot;grid grid-cols-1 gap-3&quot;&gt;
-    &lt;sonic-card &gt;
-      &lt;sonic-card-header label=&quot;Header simple, titre géré via l&#39;attribut : label&quot; description=&quot;Description via l&#39;attribut : description&quot;&gt;
-      &lt;/sonic-card-header&gt;
-    &lt;/sonic-card&gt;
-    &lt;sonic-card type=&quot;neutral&quot;&gt;
-      &lt;sonic-card-header label=&quot;Header composé&quot;&gt;
-        &lt;sonic-card-header-description&gt;Description rendu via le composant : &quot;sonic-card-header-description&quot;&lt;/sonic-card-header-description&gt;
-        &lt;div  slot=&quot;suffix&quot; class=&quot;flex&quot;&gt;
-          Suffix
-        &lt;/div&gt;
-      &lt;/sonic-card-header&gt;
-    &lt;/sonic-card&gt;
-    &lt;sonic-card type=&quot;invert&quot;&gt;
-      &lt;sonic-card-header&gt;
-        &lt;div&gt;Header custom&lt;/div&gt;
-        &lt;div class=&quot;text-lg text-danger&quot;&gt;Tout le contenu excepté l&#39;icône ✈ passe par le slot du header&lt;/div&gt;
-        &lt;span slot=&quot;suffix&quot; &gt;✈&lt;/span&gt;
-      &lt;/sonic-card-header&gt;
-    &lt;/sonic-card&gt;
-  &lt;/div&gt;
+<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
+          label=&quot;Account settings&quot;
+          description=&quot;Manage your profile and preferences.&quot;
+        &gt;&lt;/sonic-card-header&gt;
+        &lt;p class=&quot;m-0 text-sm opacity-80&quot;&gt;Body content goes in the card slot or in &lt;code&gt;sonic-card-main&lt;/code&gt;.&lt;/p&gt;
+      &lt;/sonic-card&gt;
+
+      &lt;sonic-card type=&quot;neutral&quot;&gt;
+        &lt;sonic-card-header label=&quot;Notifications&quot;&gt;
+          &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-card-header&gt;
+      &lt;/sonic-card&gt;
+
+      &lt;sonic-card&gt;
+        &lt;sonic-card-header label=&quot;Team workspace&quot; description=&quot;Shared with 12 members&quot;&gt;
+          &lt;sonic-button
+            slot=&quot;suffix&quot;
+            shape=&quot;circle&quot;
+            variant=&quot;outline&quot;
+            size=&quot;sm&quot;
+            type=&quot;default&quot;
+            icon
+            data-aria-label=&quot;Workspace settings&quot;
+          &gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot;&gt;&lt;/sonic-icon&gt;
+          &lt;/sonic-button&gt;
+        &lt;/sonic-card-header&gt;
+      &lt;/sonic-card&gt;
+
+      &lt;sonic-card type=&quot;primary&quot;&gt;
+        &lt;sonic-card-header&gt;
+          &lt;div&gt;Custom header&lt;/div&gt;
+          &lt;sonic-card-header-description&gt;
+            Use the header slot when attributes are not enough.
+          &lt;/sonic-card-header-description&gt;
+          &lt;sonic-button slot=&quot;suffix&quot; shape=&quot;circle&quot; variant=&quot;ghost&quot; size=&quot;sm&quot; type=&quot;primary&quot; icon&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;nav-arrow-right&quot;&gt;&lt;/sonic-icon&gt;
+          &lt;/sonic-button&gt;
+        &lt;/sonic-card-header&gt;
+      &lt;/sonic-card&gt;
+    &lt;/div&gt;
 </code></pre>
 <h2 id="main">Main</h2>
-<pre><code>&lt;sonic-card &gt;
-    &lt;sonic-card-main &gt;
-      &lt;h3&gt;Main area&lt;/h3&gt;
-      &lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.&lt;/p&gt;
-      &lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/aqz-KE-bpKQ&quot; title=&quot;Big Buck Bunny (Blender Foundation)&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;
-    &lt;/sonic-card-main&gt;
-  &lt;/sonic-card&gt;
+<p>Optional wrapper for the primary content area (typography, media, forms).</p>
+<pre><code>&lt;sonic-card class=&quot;max-w-xl&quot;&gt;
+      &lt;sonic-card-header label=&quot;Release notes&quot; description=&quot;Version 2.4&quot;&gt;&lt;/sonic-card-header&gt;
+      &lt;sonic-card-main&gt;
+        &lt;p class=&quot;mt-0&quot;&gt;
+          Improved performance on large lists and fixed an issue with keyboard navigation in menus.
+        &lt;/p&gt;
+        &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
+        &lt;p class=&quot;mb-0 text-sm opacity-80&quot;&gt;See the changelog for details.&lt;/p&gt;
+      &lt;/sonic-card-main&gt;
+    &lt;/sonic-card&gt;
 </code></pre>
 <h2 id="footer">Footer</h2>
-<pre><code>&lt;sonic-card &gt;
-    &lt;sonic-card-footer &gt;
-      &lt;div &gt;
-        &lt;h4 class=&quot;mb-0&quot;&gt;Footer area&lt;/h4&gt;
-        &lt;small&gt;Debitis deleniti eligendi natus dolorem aufdh.&lt;/small&gt;
-        &lt;div&gt;
-          🛫 ✈ ✈ ✈ ✈ ✈ 🛬
+<p>Optional footer for actions, metadata, or secondary text.</p>
+<pre><code>&lt;sonic-card class=&quot;max-w-xl&quot;&gt;
+      &lt;sonic-card-header label=&quot;Confirm deletion&quot;&gt;&lt;/sonic-card-header&gt;
+      &lt;sonic-card-main&gt;
+        &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;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;
         &lt;/div&gt;
-      &lt;/div&gt;
-    &lt;/sonic-card-footer&gt;
-  &lt;/sonic-card&gt;
+      &lt;/sonic-card-footer&gt;
+    &lt;/sonic-card&gt;
 </code></pre>
-<h2 id="example-of-use">Example of use</h2>
-<pre><code>&lt;sonic-card &gt;
-    &lt;sonic-card-header label=&quot;Header&quot; description=&quot;Header description&quot;&gt;
-      &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;nav-arrow-right&quot; slot=&quot;suffix&quot; &gt;&lt;/sonic-icon&gt;
-    &lt;/sonic-card-header&gt;
-    &lt;sonic-card-main &gt;
-      &lt;sonic-image rounded ratio=&quot;11/4&quot; src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;&gt;
-      &lt;/sonic-image&gt;
-      &lt;p&gt;&lt;b&gt;Main&lt;/b&gt; - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.&lt;/p&gt;
-    &lt;/sonic-card-main&gt;
-    &lt;sonic-card-footer&gt;
-      &lt;div&gt;
-        &lt;i&gt;Footer&lt;/i&gt; - Amet consectetur adipisicing
-      &lt;/div&gt;
-    &lt;/sonic-card-footer&gt;
-  &lt;/sonic-card&gt;
+<h2 id="full-example">Full example</h2>
+<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; 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://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.
+        &lt;/p&gt;
+      &lt;/sonic-card-main&gt;
+      &lt;sonic-card-footer&gt;
+        &lt;div class=&quot;flex items-center justify-between gap-3 flex-wrap&quot;&gt;
+          &lt;span class=&quot;text-sm font-semibold&quot;&gt;From $249&lt;/span&gt;
+          &lt;sonic-button type=&quot;primary&quot; size=&quot;sm&quot;&gt;Book&lt;/sonic-button&gt;
+        &lt;/div&gt;
+      &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>