@supersoniks/concorde 5.0.3 → 5.0.5

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

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Table — Concorde</title>
-  <meta name="description" content="Values available : primary, info, success, warning, danger">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/table/table, table, Table, UI component, sonic-table, web component">
+  <meta name="description" content="sonic-table lays out tabular data with composable sonic-tr / sonic-th / sonic-td children. The root applies shared typography via size, scrolls horizontally when content overflows, and optionally caps">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/table/table, table, Table, UI component, sonic-table, web component, sonic-tr, sonic-th, sonic-td, size, maxHeight, sonic-thead, sonic-tbody, sonic-list">
   <meta name="concorde-doc-id" content="core/components/ui/table/table">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/table/table.html">
 </head>
@@ -15,9 +15,11 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Table</strong>. Values available : primary, info, success, warning, danger <span>Doc ID: <code>core/components/ui/table/table</code>. Keywords: Concorde, supersoniks, core/components/ui/table/table, table, Table, UI component, sonic-table, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/table/table.html">https://concorde.supersoniks.org/crawl/core/components/ui/table/table.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Table</strong>. sonic-table lays out tabular data with composable sonic-tr / sonic-th / sonic-td children. The root applies shared typography via size, scrolls horizontally when content overflows, and optionally caps <span>Doc ID: <code>core/components/ui/table/table</code>. Keywords: Concorde, supersoniks, core/components/ui/table/table, table, Table, UI component, sonic-table, web component, sonic-tr, sonic-th, sonic-td, size, maxHeight, sonic-thead, sonic-tbody, sonic-list. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/table/table.html">https://concorde.supersoniks.org/crawl/core/components/ui/table/table.html</a>.</span></p>
       <h1 id="table">Table</h1>
-<h2 id="basic-usage">Basic usage</h2>
+<p><strong><code>sonic-table</code></strong> lays out tabular data with composable <strong><code>sonic-tr</code></strong> / <strong><code>sonic-th</code></strong> / <strong><code>sonic-td</code></strong> children. The root applies shared typography via <strong><code>size</code></strong>, scrolls horizontally when content overflows, and optionally caps height with <strong><code>maxHeight</code></strong>. Pair with <strong><code>sonic-thead</code></strong> and <strong><code>sonic-tbody</code></strong> for structure and with <strong><code>sonic-list</code></strong> to render fetched rows.</p>
+<h2 id="basic-example">Basic example</h2>
+<p>A header row plus body rows is enough for static tables; <strong><code>sonic-thead</code></strong> / <strong><code>sonic-tbody</code></strong> are optional for simple layouts.</p>
 <pre><code>&lt;sonic-table&gt;
       &lt;sonic-tr&gt;
         &lt;sonic-th&gt;Id&lt;/sonic-th&gt;
@@ -41,14 +43,15 @@
       &lt;/sonic-tr&gt;
     &lt;/sonic-table&gt;
 </code></pre>
-<h2 id="list--fetch">List / fetch</h2>
+<h2 id="list-and-fetch">List and fetch</h2>
+<p>Place <strong><code>sonic-list</code></strong> inside <strong><code>sonic-tbody</code></strong> so each item template renders a <strong><code>sonic-tr</code></strong>. <strong><code>sonic-list</code></strong> sets row metadata (<code>even</code> / <code>odd</code> / <code>last</code>) on <strong><code>sonic-tr</code></strong> for striping and borders.</p>
 <pre><code>&lt;sonic-table&gt;
       &lt;sonic-thead&gt;
         &lt;sonic-tr&gt;
           &lt;sonic-th&gt;Id&lt;/sonic-th&gt;
           &lt;sonic-th&gt;Name&lt;/sonic-th&gt;
           &lt;sonic-th&gt;Email&lt;/sonic-th&gt;
-        &lt;/sonic-tr&gt; 
+        &lt;/sonic-tr&gt;
       &lt;/sonic-thead&gt;
       &lt;sonic-tbody&gt;
         &lt;sonic-list debug fetch serviceURL=&quot;/docs-mock-api&quot; dataProvider=&quot;api/users&quot; key=&quot;data&quot; displayContents&gt;
@@ -60,6 +63,7 @@
             &lt;/sonic-tr&gt;
 </code></pre>
 <h2 id="size">Size</h2>
+<p>Default font size is <strong><code>md</code></strong> (omit <strong><code>size</code></strong>). Sizes follow the shared scale (<code>2xs</code> … <code>2xl</code>).</p>
 <pre><code>&lt;div class=&quot;grid grid-cols-4 gap-3&quot;&gt;
       &lt;sonic-table size=&quot;2xs&quot; bordered&gt;
         &lt;sonic-tr&gt;&lt;sonic-td class=&quot;w-[5rem]&quot;&gt;2xs&lt;/sonic-td&gt;&lt;/sonic-tr&gt;
@@ -88,6 +92,7 @@
     &lt;/div&gt;
 </code></pre>
 <h2 id="bordered">Bordered</h2>
+<p>Set <strong><code>bordered</code></strong> on <strong><code>sonic-table</code></strong> for an outer frame and horizontal rules between rows.</p>
 <pre><code>&lt;sonic-table bordered&gt;
       &lt;sonic-thead&gt;
         &lt;sonic-tr&gt;
@@ -115,17 +120,18 @@
       &lt;/sonic-tbody&gt;
     &lt;/sonic-table&gt;
 </code></pre>
-<h2 id="maxheight">MaxHeight</h2>
+<h2 id="max-height">Max height</h2>
+<p><strong><code>maxHeight</code></strong> applies to the scroll container (for example <code>8rem</code>), so the body scrolls vertically while the table can still scroll horizontally.</p>
 <pre><code>&lt;sonic-table maxHeight=&quot;8rem&quot;&gt;
       &lt;sonic-thead&gt;
         &lt;sonic-tr&gt;
           &lt;sonic-th&gt;Id&lt;/sonic-th&gt;
           &lt;sonic-th&gt;Name&lt;/sonic-th&gt;
           &lt;sonic-th&gt;Email&lt;/sonic-th&gt;
-        &lt;/sonic-tr&gt; 
+        &lt;/sonic-tr&gt;
       &lt;/sonic-thead&gt;
       &lt;sonic-tbody&gt;
-        &lt;sonic-list  fetch serviceURL=&quot;/docs-mock-api&quot; dataProvider=&quot;api/users&quot; key=&quot;data&quot; displayContents&gt;
+        &lt;sonic-list fetch serviceURL=&quot;/docs-mock-api&quot; dataProvider=&quot;api/users&quot; key=&quot;data&quot; displayContents&gt;
           &lt;template&gt;
             &lt;sonic-tr&gt;
               &lt;sonic-td data-bind ::inner-html=&quot;$id&quot;&gt;&lt;/sonic-td&gt;
@@ -134,34 +140,34 @@
             &lt;/sonic-tr&gt;
 </code></pre>
 <h2 id="type">Type</h2>
-<p>Values available : primary, info, success, warning, danger</p>
+<p>Set <strong><code>type</code></strong> on <strong><code>sonic-th</code></strong> / <strong><code>sonic-td</code></strong> / <strong><code>sonic-tr</code></strong> for semantic text color (<code>primary</code> · <code>info</code> · <code>success</code> · <code>warning</code> · <code>danger</code> · <code>neutral</code> · <code>default</code>).</p>
 <pre><code>&lt;sonic-table bordered&gt;
-        &lt;sonic-tr&gt;
-          &lt;sonic-th type=&quot;info&quot;&gt;Attribute type set on&lt;/sonic-th&gt;
-          &lt;sonic-th type=&quot;info&quot;&gt;sonic-th&lt;/sonic-th&gt;
-        &lt;/sonic-tr&gt;
-        &lt;sonic-tr&gt;
-          &lt;sonic-td type=&quot;danger&quot;&gt;Attribute type set on&lt;/sonic-td&gt;
-          &lt;sonic-td type=&quot;danger&quot;&gt;sonic-td&lt;/sonic-td&gt;
-        &lt;/sonic-tr&gt;
-        &lt;sonic-tr type=&quot;success&quot;&gt;
-          &lt;sonic-td&gt;Attribute type set on&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;sonic-tr&lt;/sonic-td&gt;
-        &lt;/sonic-tr&gt;
-      &lt;/sonic-tbody&gt;
+      &lt;sonic-tr&gt;
+        &lt;sonic-th type=&quot;info&quot;&gt;Attribute type set on&lt;/sonic-th&gt;
+        &lt;sonic-th type=&quot;info&quot;&gt;sonic-th&lt;/sonic-th&gt;
+      &lt;/sonic-tr&gt;
+      &lt;sonic-tr&gt;
+        &lt;sonic-td type=&quot;danger&quot;&gt;Attribute type set on&lt;/sonic-td&gt;
+        &lt;sonic-td type=&quot;danger&quot;&gt;sonic-td&lt;/sonic-td&gt;
+      &lt;/sonic-tr&gt;
+      &lt;sonic-tr type=&quot;success&quot;&gt;
+        &lt;sonic-td&gt;Attribute type set on&lt;/sonic-td&gt;
+        &lt;sonic-td&gt;sonic-tr&lt;/sonic-td&gt;
+      &lt;/sonic-tr&gt;
     &lt;/sonic-table&gt;
 </code></pre>
-<h2 id="colspan--rowspan">Colspan / rowspan</h2>
-<pre><code>&lt;sonic-table &gt;
+<h2 id="colspan-and-rowspan">Colspan and rowspan</h2>
+<p>Use <strong><code>colSpan</code></strong> and <strong><code>rowSpan</code></strong> on <strong><code>sonic-th</code></strong> or <strong><code>sonic-td</code></strong> (maps to <code>colspan</code> / <code>rowspan</code> on the cell).</p>
+<pre><code>&lt;sonic-table&gt;
       &lt;sonic-tbody&gt;
         &lt;sonic-tr&gt;
-          &lt;sonic-td colspan=&quot;2&quot; class=&quot;bg-info text-neutral-0&quot;&gt;colspan : 2&lt;/sonic-td&gt;
+          &lt;sonic-td colspan=&quot;2&quot; class=&quot;bg-info text-neutral-0&quot;&gt;colspan: 2&lt;/sonic-td&gt;
           &lt;sonic-td&gt;cell&lt;/sonic-td&gt;
         &lt;/sonic-tr&gt;
         &lt;sonic-tr&gt;
           &lt;sonic-td&gt;cell&lt;/sonic-td&gt;
           &lt;sonic-td&gt;cell&lt;/sonic-td&gt;
-          &lt;sonic-td rowspan=&quot;2&quot; class=&quot;bg-success text-neutral-0&quot;&gt;rowspan : 2&lt;/sonic-td&gt;
+          &lt;sonic-td rowspan=&quot;2&quot; class=&quot;bg-success text-neutral-0&quot;&gt;rowspan: 2&lt;/sonic-td&gt;
         &lt;/sonic-tr&gt;
         &lt;sonic-tr&gt;
           &lt;sonic-td&gt;cell&lt;/sonic-td&gt;
@@ -170,14 +176,8 @@
       &lt;/sonic-tbody&gt;
     &lt;/sonic-table&gt;
 </code></pre>
-<h2 id="cell-style-attributes">Cell style attributes</h2>
-<p>The following attributes will be used to set the style of the component :  </p>
-<ul>
-<li>align</li>
-<li>minWidth</li>
-<li>maxWidth</li>
-<li>width</li>
-</ul>
+<h2 id="cell-alignment-and-width">Cell alignment and width</h2>
+<p><strong><code>align</code></strong> sets horizontal alignment (<code>left</code> · <code>center</code> · <code>right</code>). <strong><code>minWidth</code></strong> / <strong><code>maxWidth</code></strong> / <strong><code>width</code></strong> set inline dimensions on the cell. <strong><code>vAlign</code></strong> is available on <strong><code>sonic-td</code></strong> only.</p>
 <pre><code>&lt;sonic-table bordered&gt;
       &lt;sonic-thead&gt;
         &lt;sonic-tr&gt;
@@ -203,13 +203,14 @@
         &lt;sonic-tr&gt;
           &lt;sonic-td align=&quot;right&quot;&gt;right&lt;/sonic-td&gt;
           &lt;sonic-td&gt;20rem&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;5rem - Lorem ipsum dolor&lt;/sonic-td&gt;
-          &lt;sonic-td width=&quot;60rem&quot;&gt;15rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sollicitudin mollis. Curabitur sit amet nibh diam. Vivamus a pharetra mauris.&lt;/sonic-td&gt;
+          &lt;sonic-td maxWidth=&quot;5rem&quot;&gt;5rem — Lorem ipsum dolor&lt;/sonic-td&gt;
+          &lt;sonic-td width=&quot;60rem&quot;&gt;15rem — Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/sonic-td&gt;
         &lt;/sonic-tr&gt;
+      &lt;/sonic-tbody&gt;
     &lt;/sonic-table&gt;
 </code></pre>
-<h2 id="responsive">Responsive</h2>
-<p>Every table is responsive by default</p>
+<h2 id="responsive-layout">Responsive layout</h2>
+<p>Tables scroll horizontally by default when columns exceed the viewport. Use <strong><code>minWidth</code></strong> on wide columns to preserve readable line length.</p>
 <pre><code>&lt;sonic-table bordered&gt;
       &lt;sonic-thead&gt;
         &lt;sonic-tr&gt;
@@ -217,7 +218,7 @@
           &lt;sonic-th&gt;Name&lt;/sonic-th&gt;
           &lt;sonic-th&gt;Email&lt;/sonic-th&gt;
           &lt;sonic-th&gt;Comment&lt;/sonic-th&gt;
-        &lt;/sonic-tr&gt; 
+        &lt;/sonic-tr&gt;
       &lt;/sonic-thead&gt;
       &lt;sonic-tbody&gt;
         &lt;sonic-list fetch serviceURL=&quot;/docs-mock-api&quot; dataProvider=&quot;api/users&quot; key=&quot;data&quot; displayContents&gt;
@@ -227,11 +228,12 @@
               &lt;sonic-td minWidth=&quot;10rem&quot; data-bind ::inner-html=&quot;$first_name &lt;b&gt;$last_name&lt;/b&gt;&quot;&gt;&lt;/sonic-td&gt;
               &lt;sonic-td data-bind ::inner-html=&quot;$email&quot;&gt;&lt;/sonic-td&gt;
               &lt;sonic-td minWidth=&quot;40rem&quot;&gt;
-                hasellus suscipit vulputate lacus, in tempor turpis aliquam vel. Nunc eleifend, velit id ultrices elementum, ipsum felis porttitor dui, id laoreet diam nulla sed urna. 
+                Phasellus suscipit vulputate lacus, in tempor turpis aliquam vel. Nunc eleifend, velit id ultrices elementum, ipsum felis porttitor dui, id laoreet diam nulla sed urna.
               &lt;/sonic-td&gt;
             &lt;/sonic-tr&gt;
 </code></pre>
-<h2 id="sticky-header">Sticky header</h2>
+<h2 id="sticky-header-and-caption">Sticky header and caption</h2>
+<p><strong><code>sonic-th</code></strong> uses <code>position: sticky</code> with <code>top: 0</code> inside the table. For page-level sticky headers, set <strong><code>noCustomScroll</code></strong> on <strong><code>sonic-table</code></strong> and position <strong><code>sonic-thead</code></strong> (for example <code>class=&quot;sticky top-16&quot;</code>). Add <strong><code>sonic-caption</code></strong> for a table title below the grid.</p>
 <pre><code>&lt;sonic-table bordered noCustomScroll&gt;
       &lt;sonic-thead class=&quot;sticky top-16&quot;&gt;
         &lt;sonic-tr&gt;
@@ -250,53 +252,21 @@
           &lt;sonic-td&gt;Germany&lt;/sonic-td&gt;
           &lt;sonic-td align=&quot;center&quot;&gt;2&lt;/sonic-td&gt;
           &lt;sonic-td align=&quot;right&quot;&gt;40€&lt;/sonic-td&gt;
-          &lt;sonic-td td align=&quot;right&quot;
-            &gt;&lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
+          &lt;sonic-td align=&quot;right&quot;&gt;
+            &lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
+              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+            &lt;/sonic-button&gt;
           &lt;/sonic-td&gt;
         &lt;/sonic-tr&gt;
         &lt;sonic-tr&gt;
           &lt;sonic-td&gt;Centro comercial Moctezuma&lt;/sonic-td&gt;
-          &lt;sonic-td
-            colspan=&quot;2&quot;
-            align=&quot;center&quot;
-            class=&quot;
-              text-center
-              text-neutral-400
-            &quot;
-            &gt;no information yet&lt;/sonic-td
-          &gt;
+          &lt;sonic-td colspan=&quot;2&quot; align=&quot;center&quot; class=&quot;text-center text-neutral-400&quot;&gt;no information yet&lt;/sonic-td&gt;
           &lt;sonic-td align=&quot;center&quot;&gt;3&lt;/sonic-td&gt;
           &lt;sonic-td align=&quot;right&quot;&gt;40€&lt;/sonic-td&gt;
-          &lt;sonic-td td align=&quot;right&quot;
-            &gt;&lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
-          &lt;/sonic-td&gt;
-        &lt;/sonic-tr&gt;
-        &lt;sonic-tr&gt;
-          &lt;sonic-td&gt;Ernst Handel&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;Roland Mendel&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;Austria&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;center&quot;&gt;4&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;right&quot;&gt;40€&lt;/sonic-td&gt;
-          &lt;sonic-td td align=&quot;right&quot;
-            &gt;&lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
-          &lt;/sonic-td&gt;
-        &lt;/sonic-tr&gt;
-        &lt;sonic-tr&gt;
-          &lt;sonic-td&gt;Island Trading&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;Helen Bennett&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;UK&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;center&quot;&gt;1&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;right&quot;&gt;40€&lt;/sonic-td&gt;
-          &lt;sonic-td td align=&quot;right&quot;
-            &gt;&lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
+          &lt;sonic-td align=&quot;right&quot;&gt;
+            &lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
+              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+            &lt;/sonic-button&gt;
           &lt;/sonic-td&gt;
         &lt;/sonic-tr&gt;
         &lt;sonic-tr type=&quot;warning&quot;&gt;
@@ -305,10 +275,10 @@
           &lt;sonic-td&gt;Canada&lt;/sonic-td&gt;
           &lt;sonic-td align=&quot;center&quot;&gt;0&lt;/sonic-td&gt;
           &lt;sonic-td align=&quot;right&quot;&gt;40€&lt;/sonic-td&gt;
-          &lt;sonic-td td align=&quot;right&quot;
-            &gt;&lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
+          &lt;sonic-td align=&quot;right&quot;&gt;
+            &lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
+              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+            &lt;/sonic-button&gt;
           &lt;/sonic-td&gt;
         &lt;/sonic-tr&gt;
         &lt;sonic-tr&gt;
@@ -317,95 +287,257 @@
           &lt;sonic-td type=&quot;danger&quot;&gt;Italy&lt;/sonic-td&gt;
           &lt;sonic-td align=&quot;center&quot;&gt;20&lt;/sonic-td&gt;
           &lt;sonic-td align=&quot;right&quot;&gt;40€&lt;/sonic-td&gt;
-          &lt;sonic-td td align=&quot;right&quot;
-            &gt;&lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
-          &lt;/sonic-td&gt;
-        &lt;/sonic-tr&gt;
-        &lt;sonic-tr&gt;
-          &lt;sonic-td&gt;Alfreds Futterkiste&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;Maria Anders&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;Germany&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;center&quot;&gt;2&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;right&quot;&gt;40€&lt;/sonic-td&gt;
-          &lt;sonic-td td align=&quot;right&quot;
-            &gt;&lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
-          &lt;/sonic-td&gt;
-        &lt;/sonic-tr&gt;
-        &lt;sonic-tr&gt;
-          &lt;sonic-td&gt;Centro comercial Moctezuma&lt;/sonic-td&gt;
-          &lt;sonic-td
-            colspan=&quot;2&quot;
-            align=&quot;center&quot;
-            class=&quot;
-              text-center
-              text-neutral-400
-            &quot;
-            &gt;no information yet&lt;/sonic-td
-          &gt;
-          &lt;sonic-td align=&quot;center&quot;&gt;3&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;right&quot;&gt;40€&lt;/sonic-td&gt;
-          &lt;sonic-td td align=&quot;right&quot;
-            &gt;&lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
-          &lt;/sonic-td&gt;
-        &lt;/sonic-tr&gt;
-        &lt;sonic-tr&gt;
-          &lt;sonic-td&gt;Ernst Handel&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;Roland Mendel&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;Austria&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;center&quot;&gt;4&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;right&quot;&gt;40€&lt;/sonic-td&gt;
-          &lt;sonic-td td align=&quot;right&quot;
-            &gt;&lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
-          &lt;/sonic-td&gt;
-        &lt;/sonic-tr&gt;
-        &lt;sonic-tr&gt;
-          &lt;sonic-td&gt;Island Trading&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;Helen Bennett&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;UK&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;center&quot;&gt;1&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;right&quot;&gt;40€&lt;/sonic-td&gt;
-          &lt;sonic-td td align=&quot;right&quot;
-            &gt;&lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
-          &lt;/sonic-td&gt;
-        &lt;/sonic-tr&gt;
-        &lt;sonic-tr type=&quot;warning&quot;&gt;
-          &lt;sonic-td&gt;Laughing Bacchus Winecellars&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;Yoshi Tannamuri&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;Canada&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;center&quot;&gt;0&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;right&quot;&gt;40€&lt;/sonic-td&gt;
-          &lt;sonic-td td align=&quot;right&quot;
-            &gt;&lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
-          &lt;/sonic-td&gt;
-        &lt;/sonic-tr&gt;
-        &lt;sonic-tr&gt;
-          &lt;sonic-td&gt;Magazzini Alimentari Riuniti&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;Giovanni Rovelli&lt;/sonic-td&gt;
-          &lt;sonic-td&gt;Italy&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;center&quot;&gt;20&lt;/sonic-td&gt;
-          &lt;sonic-td align=&quot;right&quot;&gt;40€&lt;/sonic-td&gt;
-          &lt;sonic-td td align=&quot;right&quot;
-            &gt;&lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
-              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon
-            &gt;&lt;/sonic-button&gt;
+          &lt;sonic-td align=&quot;right&quot;&gt;
+            &lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot;&gt;
+              &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;edit-pencil&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+            &lt;/sonic-button&gt;
           &lt;/sonic-td&gt;
         &lt;/sonic-tr&gt;
       &lt;/sonic-tbody&gt;
-      &lt;sonic-caption&gt;table caption&lt;/sonic-caption&gt;
+      &lt;sonic-caption&gt;Table caption&lt;/sonic-caption&gt;
     &lt;/sonic-table&gt;
 </code></pre>
+<h2 id="api-reference">API reference</h2>
+<h3 id="sonic-table"><code>sonic-table</code></h3>
+<table>
+<thead>
+<tr>
+<th>Attribute</th>
+<th>Values</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><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> (default <code>md</code>)</td>
+<td>Scales table font size via shared size tokens</td>
+</tr>
+<tr>
+<td><code>bordered</code></td>
+<td>boolean</td>
+<td>Outer border and row dividers</td>
+</tr>
+<tr>
+<td><code>noCustomScroll</code></td>
+<td>boolean</td>
+<td>Disables custom scrollbar styling on the horizontal scroll container</td>
+</tr>
+<tr>
+<td><code>rounded</code></td>
+<td>boolean</td>
+<td>Reflected on the host; no default table styles</td>
+</tr>
+<tr>
+<td><code>maxHeight</code></td>
+<td>CSS length</td>
+<td>Max height on the scroll container; enables vertical scrolling</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Table sections and rows (<code>sonic-thead</code>, <code>sonic-tbody</code>, <code>sonic-tr</code>, …)</td>
+</tr>
+</tbody></table>
+<h3 id="sonic-thead--sonic-tbody--sonic-tfoot"><code>sonic-thead</code> · <code>sonic-tbody</code> · <code>sonic-tfoot</code></h3>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Row elements (<code>sonic-tr</code>)</td>
+</tr>
+</tbody></table>
+<p><code>sonic-tbody</code> wraps slotted rows in a native <code>&lt;tbody&gt;</code> and applies zebra / hover backgrounds to <strong><code>sonic-tr</code></strong> children.</p>
+<h3 id="sonic-caption"><code>sonic-caption</code></h3>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Caption text rendered as <code>table-caption</code></td>
+</tr>
+</tbody></table>
+<h3 id="sonic-tr"><code>sonic-tr</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>default</code> · <code>primary</code> · <code>info</code> · <code>success</code> · <code>warning</code> · <code>danger</code> · <code>neutral</code></td>
+<td>Semantic text color for the row</td>
+</tr>
+<tr>
+<td><code>even</code></td>
+<td>boolean</td>
+<td>Striping background; usually set by <strong><code>sonic-list</code></strong> metadata</td>
+</tr>
+<tr>
+<td><code>odd</code></td>
+<td>boolean</td>
+<td>Alternate striping background; usually set by <strong><code>sonic-list</code></strong></td>
+</tr>
+<tr>
+<td><code>last</code></td>
+<td>boolean</td>
+<td>Removes bottom cell border on the last row when <strong><code>bordered</code></strong></td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Header or data cells (<code>sonic-th</code> / <code>sonic-td</code>)</td>
+</tr>
+</tbody></table>
+<h3 id="sonic-th"><code>sonic-th</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>default</code> · <code>primary</code> · <code>info</code> · <code>success</code> · <code>warning</code> · <code>danger</code> · <code>neutral</code></td>
+<td>Semantic text color</td>
+</tr>
+<tr>
+<td><code>align</code></td>
+<td><code>left</code> · <code>center</code> · <code>right</code></td>
+<td>Horizontal text alignment</td>
+</tr>
+<tr>
+<td><code>colSpan</code></td>
+<td>number</td>
+<td>Column span</td>
+</tr>
+<tr>
+<td><code>rowSpan</code></td>
+<td>number</td>
+<td>Row span</td>
+</tr>
+<tr>
+<td><code>minWidth</code></td>
+<td>CSS length</td>
+<td>Minimum cell width</td>
+</tr>
+<tr>
+<td><code>maxWidth</code></td>
+<td>CSS length</td>
+<td>Maximum cell width</td>
+</tr>
+<tr>
+<td><code>width</code></td>
+<td>CSS length</td>
+<td>Cell width</td>
+</tr>
+<tr>
+<td><code>noBorder</code></td>
+<td>boolean</td>
+<td>Removes the bottom border under the header cell</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Header label content</td>
+</tr>
+</tbody></table>
+<h3 id="sonic-td"><code>sonic-td</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>default</code> · <code>primary</code> · <code>info</code> · <code>success</code> · <code>warning</code> · <code>danger</code> · <code>neutral</code></td>
+<td>Semantic text color</td>
+</tr>
+<tr>
+<td><code>align</code></td>
+<td><code>left</code> · <code>center</code> · <code>right</code></td>
+<td>Horizontal text alignment</td>
+</tr>
+<tr>
+<td><code>vAlign</code></td>
+<td>CSS <code>vertical-align</code> value</td>
+<td>Vertical alignment</td>
+</tr>
+<tr>
+<td><code>colSpan</code></td>
+<td>number</td>
+<td>Column span</td>
+</tr>
+<tr>
+<td><code>rowSpan</code></td>
+<td>number</td>
+<td>Row span</td>
+</tr>
+<tr>
+<td><code>minWidth</code></td>
+<td>CSS length</td>
+<td>Minimum cell width</td>
+</tr>
+<tr>
+<td><code>maxWidth</code></td>
+<td>CSS length</td>
+<td>Maximum cell width</td>
+</tr>
+<tr>
+<td><code>width</code></td>
+<td>CSS length</td>
+<td>Cell width</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Cell content</td>
+</tr>
+</tbody></table>
 
     </article>
   </main>