@supersoniks/concorde 5.0.5 → 5.1.0

package/docs/src/core/components/ui/progress/progress.md

@@ -1,109 +1,63 @@
-# Progress
+# Progress bar
 
-Shows **task completion** on a **`value`** / **`max`** scale via a native `<progress>` bar. Omit **`value`** for an **indeterminate** loading animation. Put primary copy in the default slot and optional secondary text in **`remaining`**; set **`invert`** when the bar sits on a colored surface such as **`sonic-card`**.
-
-## Basic example
-
-Set **`value`** from `0` to **`max`** (default `100`). Label text uses the type color.
-
-<sonic-code>
-  <template>
-    <sonic-progress value="50">50%</sonic-progress>
-  </template>
-</sonic-code>
+Displays an indicator showing the completion progress of a task.
 
 ## Indeterminate
 
-With no **`value`**, the bar animates until progress is known.
-
 <sonic-code>
   <template>
-    <sonic-progress></sonic-progress>
+  <sonic-progress></sonic-progress>
   </template>
 </sonic-code>
 
-## Type
 
-Semantic color follows **`type`**. With no **`type`**, behavior is `default`.
+## Remaining
 
 <sonic-code>
   <template>
-    <div class="grid gap-3">
-      <sonic-progress value="50">50%</sonic-progress>
-      <sonic-progress type="primary" value="50">50%</sonic-progress>
-      <sonic-progress type="neutral" value="50">50%</sonic-progress>
-      <sonic-progress type="info" value="50">50%</sonic-progress>
-      <sonic-progress type="warning" value="50">50%</sonic-progress>
-      <sonic-progress type="success" value="50">50%</sonic-progress>
-      <sonic-progress type="danger" value="50">50%</sonic-progress>
-    </div>
+  <sonic-progress  type="danger" value="80">
+    80% Used <span slot="remaining">20% left</span>
+  </sonic-progress>
   </template>
 </sonic-code>
 
-## Size
-
-Bar height scales with typography via **`size`**. With no **`size`**, font size matches **`md`** (`1rem`).
+## Sizes
 
 <sonic-code>
   <template>
-    <div class="grid gap-3">
-      <sonic-progress size="2xs" value="25">25%</sonic-progress>
-      <sonic-progress size="xs" value="25">25%</sonic-progress>
-      <sonic-progress size="sm" value="25">25%</sonic-progress>
-      <sonic-progress size="md" value="25">25%</sonic-progress>
-      <sonic-progress size="lg" value="25">25%</sonic-progress>
-      <sonic-progress size="xl" value="25">25%</sonic-progress>
-      <sonic-progress size="2xl" value="25">25%</sonic-progress>
-    </div>
+<div class="grid gap-3">
+  <sonic-progress  size="2xs" value="25">25%</sonic-progress>
+  <sonic-progress  size="xs" value="25">25%</sonic-progress>
+  <sonic-progress  size="sm" value="25">25%</sonic-progress>
+  <sonic-progress  size="md" value="25">25%</sonic-progress>
+  <sonic-progress  size="lg" value="25">25%</sonic-progress>
+  <sonic-progress  size="xl" value="25">25%</sonic-progress>
+  <sonic-progress  size="2xl" value="25">25%</sonic-progress>
+</div>
   </template>
 </sonic-code>
 
-## Default and remaining slots
-
-The default slot is the main label (left). **`remaining`** is right-aligned with lighter weight—use it for “left to complete” copy.
+## Type
 
 <sonic-code>
   <template>
-    <sonic-progress type="danger" value="80">
-      80% Used <span slot="remaining">20% left</span>
-    </sonic-progress>
-  </template>
+<div class="grid gap-3">
+  <sonic-progress  value="50">50%</sonic-progress>
+  <sonic-progress  type="info" value="50">50%</sonic-progress>
+  <sonic-progress  type="warning" value="50">50%</sonic-progress>
+  <sonic-progress  type="success" value="50">50%</sonic-progress>
+  <sonic-progress  type="danger" value="50">50%</sonic-progress>
+</div>
+   </template>
 </sonic-code>
 
-## Invert
 
-On tinted backgrounds, **`invert`** adjusts track and fill tokens so the bar stays readable (pair with matching **`type`** on **`sonic-card`** or similar).
+## Invert
 
 <sonic-code>
   <template>
-    <div class="grid gap-3">
-      <sonic-card type="info">
-        <sonic-progress invert type="info" value="50">50%</sonic-progress>
-      </sonic-card>
-      <sonic-card type="warning">
-        <sonic-progress invert type="warning" value="50">50%</sonic-progress>
-      </sonic-card>
-      <sonic-card type="success">
-        <sonic-progress invert type="success" value="50">50%</sonic-progress>
-      </sonic-card>
-      <sonic-card type="danger">
-        <sonic-progress invert type="danger" value="50">50%</sonic-progress>
-      </sonic-card>
-    </div>
+<div class="bg-neutral-900 p-4 rounded-md">
+  <sonic-progress  type="invert" value="50">50%</sonic-progress>
+</div>
   </template>
 </sonic-code>
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `value` | number | Completion amount; omit for indeterminate state |
-| `max` | number (default `100`) | Upper bound for **`value`** |
-| `type` | `default` (default) · `primary` · `neutral` · `warning` · `info` · `success` · `danger` | Semantic bar and label color |
-| `size` | `2xs` · `xs` · `sm` · `md` · `lg` · `xl` · `2xl` · `inherit` | Typography scale (bar height follows `em`) |
-| `invert` | boolean | High-contrast tokens on colored backgrounds |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Primary label below the bar (left) |
-| `remaining` | Secondary label below the bar (right) |

package/docs/src/core/components/ui/table/table.md

@@ -1,10 +1,6 @@
 # Table
 
-**`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 height with **`maxHeight`**. Pair with **`sonic-thead`** and **`sonic-tbody`** for structure and with **`sonic-list`** to render fetched rows.
-
-## Basic example
-
-A header row plus body rows is enough for static tables; **`sonic-thead`** / **`sonic-tbody`** are optional for simple layouts.
+## Basic usage
 
 <sonic-code>
   <template>
@@ -33,9 +29,7 @@ A header row plus body rows is enough for static tables; **`sonic-thead`** / **`
   </template>
 </sonic-code>
 
-## List and fetch
-
-Place **`sonic-list`** inside **`sonic-tbody`** so each item template renders a **`sonic-tr`**. **`sonic-list`** sets row metadata (`even` / `odd` / `last`) on **`sonic-tr`** for striping and borders.
+## List / fetch
 
 <sonic-code>
   <template>
@@ -45,7 +39,7 @@ Place **`sonic-list`** inside **`sonic-tbody`** so each item template renders a
           <sonic-th>Id</sonic-th>
           <sonic-th>Name</sonic-th>
           <sonic-th>Email</sonic-th>
-        </sonic-tr>
+        </sonic-tr> 
       </sonic-thead>
       <sonic-tbody>
         <sonic-list debug fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
@@ -56,7 +50,7 @@ Place **`sonic-list`** inside **`sonic-tbody`** so each item template renders a
               <sonic-td data-bind ::inner-html="$email"></sonic-td>
             </sonic-tr>
           </template>
-        </sonic-list>
+        <sonic-list>
       </sonic-tbody>
     </sonic-table>
   </template>
@@ -64,8 +58,6 @@ Place **`sonic-list`** inside **`sonic-tbody`** so each item template renders a
 
 ## Size
 
-Default font size is **`md`** (omit **`size`**). Sizes follow the shared scale (`2xs` … `2xl`).
-
 <sonic-code>
   <template>
     <div class="grid grid-cols-4 gap-3">
@@ -99,8 +91,6 @@ Default font size is **`md`** (omit **`size`**). Sizes follow the shared scale (
 
 ## Bordered
 
-Set **`bordered`** on **`sonic-table`** for an outer frame and horizontal rules between rows.
-
 <sonic-code>
   <template>
     <sonic-table bordered>
@@ -132,9 +122,7 @@ Set **`bordered`** on **`sonic-table`** for an outer frame and horizontal rules
   </template>
 </sonic-code>
 
-## Max height
-
-**`maxHeight`** applies to the scroll container (for example `8rem`), so the body scrolls vertically while the table can still scroll horizontally.
+## MaxHeight
 
 <sonic-code>
   <template>
@@ -144,10 +132,10 @@ Set **`bordered`** on **`sonic-table`** for an outer frame and horizontal rules
           <sonic-th>Id</sonic-th>
           <sonic-th>Name</sonic-th>
           <sonic-th>Email</sonic-th>
-        </sonic-tr>
+        </sonic-tr> 
       </sonic-thead>
       <sonic-tbody>
-        <sonic-list fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
+        <sonic-list  fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
           <template>
             <sonic-tr>
               <sonic-td data-bind ::inner-html="$id"></sonic-td>
@@ -155,7 +143,7 @@ Set **`bordered`** on **`sonic-table`** for an outer frame and horizontal rules
               <sonic-td data-bind ::inner-html="$email"></sonic-td>
             </sonic-tr>
           </template>
-        </sonic-list>
+        <sonic-list>
       </sonic-tbody>
     </sonic-table>
   </template>
@@ -163,43 +151,42 @@ Set **`bordered`** on **`sonic-table`** for an outer frame and horizontal rules
 
 ## Type
 
-Set **`type`** on **`sonic-th`** / **`sonic-td`** / **`sonic-tr`** for semantic text color (`primary` · `info` · `success` · `warning` · `danger` · `neutral` · `default`).
+Values available : primary, info, success, warning, danger
 
 <sonic-code>
   <template>
     <sonic-table bordered>
-      <sonic-tr>
-        <sonic-th type="info">Attribute type set on</sonic-th>
-        <sonic-th type="info">sonic-th</sonic-th>
-      </sonic-tr>
-      <sonic-tr>
-        <sonic-td type="danger">Attribute type set on</sonic-td>
-        <sonic-td type="danger">sonic-td</sonic-td>
-      </sonic-tr>
-      <sonic-tr type="success">
-        <sonic-td>Attribute type set on</sonic-td>
-        <sonic-td>sonic-tr</sonic-td>
-      </sonic-tr>
+        <sonic-tr>
+          <sonic-th type="info">Attribute type set on</sonic-th>
+          <sonic-th type="info">sonic-th</sonic-th>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td type="danger">Attribute type set on</sonic-td>
+          <sonic-td type="danger">sonic-td</sonic-td>
+        </sonic-tr>
+        <sonic-tr type="success">
+          <sonic-td>Attribute type set on</sonic-td>
+          <sonic-td>sonic-tr</sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
     </sonic-table>
   </template>
 </sonic-code>
 
-## Colspan and rowspan
-
-Use **`colSpan`** and **`rowSpan`** on **`sonic-th`** or **`sonic-td`** (maps to `colspan` / `rowspan` on the cell).
+## Colspan / rowspan
 
 <sonic-code>
   <template>
-    <sonic-table>
+    <sonic-table >
       <sonic-tbody>
         <sonic-tr>
-          <sonic-td colspan="2" class="bg-info text-neutral-0">colspan: 2</sonic-td>
+          <sonic-td colspan="2" class="bg-info text-neutral-0">colspan : 2</sonic-td>
           <sonic-td>cell</sonic-td>
         </sonic-tr>
         <sonic-tr>
           <sonic-td>cell</sonic-td>
           <sonic-td>cell</sonic-td>
-          <sonic-td rowspan="2" class="bg-success text-neutral-0">rowspan: 2</sonic-td>
+          <sonic-td rowspan="2" class="bg-success text-neutral-0">rowspan : 2</sonic-td>
         </sonic-tr>
         <sonic-tr>
           <sonic-td>cell</sonic-td>
@@ -210,9 +197,13 @@ Use **`colSpan`** and **`rowSpan`** on **`sonic-th`** or **`sonic-td`** (maps to
   </template>
 </sonic-code>
 
-## Cell alignment and width
+## Cell style attributes
 
-**`align`** sets horizontal alignment (`left` · `center` · `right`). **`minWidth`** / **`maxWidth`** / **`width`** set inline dimensions on the cell. **`vAlign`** is available on **`sonic-td`** only.
+The following attributes will be used to set the style of the component :  
+- align
+- minWidth
+- maxWidth
+- width
 
 <sonic-code>
   <template>
@@ -241,17 +232,17 @@ Use **`colSpan`** and **`rowSpan`** on **`sonic-th`** or **`sonic-td`** (maps to
         <sonic-tr>
           <sonic-td align="right">right</sonic-td>
           <sonic-td>20rem</sonic-td>
-          <sonic-td maxWidth="5rem">5rem — Lorem ipsum dolor</sonic-td>
-          <sonic-td width="60rem">15rem — Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sonic-td>
+          <sonic-td>5rem - Lorem ipsum dolor</sonic-td>
+          <sonic-td width="60rem">15rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sollicitudin mollis. Curabitur sit amet nibh diam. Vivamus a pharetra mauris.</sonic-td>
         </sonic-tr>
-      </sonic-tbody>
     </sonic-table>
   </template>
 </sonic-code>
 
-## Responsive layout
 
-Tables scroll horizontally by default when columns exceed the viewport. Use **`minWidth`** on wide columns to preserve readable line length.
+## Responsive
+
+Every table is responsive by default
 
 <sonic-code>
   <template>
@@ -262,7 +253,7 @@ Tables scroll horizontally by default when columns exceed the viewport. Use **`m
           <sonic-th>Name</sonic-th>
           <sonic-th>Email</sonic-th>
           <sonic-th>Comment</sonic-th>
-        </sonic-tr>
+        </sonic-tr> 
       </sonic-thead>
       <sonic-tbody>
         <sonic-list fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
@@ -272,19 +263,18 @@ Tables scroll horizontally by default when columns exceed the viewport. Use **`m
               <sonic-td minWidth="10rem" data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
               <sonic-td data-bind ::inner-html="$email"></sonic-td>
               <sonic-td minWidth="40rem">
-                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.
+                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. 
               </sonic-td>
             </sonic-tr>
           </template>
-        </sonic-list>
+        <sonic-list>
       </sonic-tbody>
     </sonic-table>
   </template>
 </sonic-code>
 
-## Sticky header and caption
 
-**`sonic-th`** uses `position: sticky` with `top: 0` inside the table. For page-level sticky headers, set **`noCustomScroll`** on **`sonic-table`** and position **`sonic-thead`** (for example `class="sticky top-16"`). Add **`sonic-caption`** for a table title below the grid.
+## Sticky header
 
 <sonic-code>
   <template>
@@ -306,21 +296,53 @@ Tables scroll horizontally by default when columns exceed the viewport. Use **`m
           <sonic-td>Germany</sonic-td>
           <sonic-td align="center">2</sonic-td>
           <sonic-td align="right">40€</sonic-td>
-          <sonic-td align="right">
-            <sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon>
-            </sonic-button>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
           </sonic-td>
         </sonic-tr>
         <sonic-tr>
           <sonic-td>Centro comercial Moctezuma</sonic-td>
-          <sonic-td colspan="2" align="center" class="text-center text-neutral-400">no information yet</sonic-td>
+          <sonic-td
+            colspan="2"
+            align="center"
+            class="
+              text-center
+              text-neutral-400
+            "
+            >no information yet</sonic-td
+          >
           <sonic-td align="center">3</sonic-td>
           <sonic-td align="right">40€</sonic-td>
-          <sonic-td align="right">
-            <sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon>
-            </sonic-button>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Ernst Handel</sonic-td>
+          <sonic-td>Roland Mendel</sonic-td>
+          <sonic-td>Austria</sonic-td>
+          <sonic-td align="center">4</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Island Trading</sonic-td>
+          <sonic-td>Helen Bennett</sonic-td>
+          <sonic-td>UK</sonic-td>
+          <sonic-td align="center">1</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
           </sonic-td>
         </sonic-tr>
         <sonic-tr type="warning">
@@ -329,10 +351,10 @@ Tables scroll horizontally by default when columns exceed the viewport. Use **`m
           <sonic-td>Canada</sonic-td>
           <sonic-td align="center">0</sonic-td>
           <sonic-td align="right">40€</sonic-td>
-          <sonic-td align="right">
-            <sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon>
-            </sonic-button>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
           </sonic-td>
         </sonic-tr>
         <sonic-tr>
@@ -341,91 +363,93 @@ Tables scroll horizontally by default when columns exceed the viewport. Use **`m
           <sonic-td type="danger">Italy</sonic-td>
           <sonic-td align="center">20</sonic-td>
           <sonic-td align="right">40€</sonic-td>
-          <sonic-td align="right">
-            <sonic-button shape="circle" variant="outline" size="sm">
-              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon>
-            </sonic-button>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Alfreds Futterkiste</sonic-td>
+          <sonic-td>Maria Anders</sonic-td>
+          <sonic-td>Germany</sonic-td>
+          <sonic-td align="center">2</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Centro comercial Moctezuma</sonic-td>
+          <sonic-td
+            colspan="2"
+            align="center"
+            class="
+              text-center
+              text-neutral-400
+            "
+            >no information yet</sonic-td
+          >
+          <sonic-td align="center">3</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Ernst Handel</sonic-td>
+          <sonic-td>Roland Mendel</sonic-td>
+          <sonic-td>Austria</sonic-td>
+          <sonic-td align="center">4</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Island Trading</sonic-td>
+          <sonic-td>Helen Bennett</sonic-td>
+          <sonic-td>UK</sonic-td>
+          <sonic-td align="center">1</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr type="warning">
+          <sonic-td>Laughing Bacchus Winecellars</sonic-td>
+          <sonic-td>Yoshi Tannamuri</sonic-td>
+          <sonic-td>Canada</sonic-td>
+          <sonic-td align="center">0</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
+          <sonic-td>Giovanni Rovelli</sonic-td>
+          <sonic-td>Italy</sonic-td>
+          <sonic-td align="center">20</sonic-td>
+          <sonic-td align="right">40€</sonic-td>
+          <sonic-td td align="right"
+            ><sonic-button shape="circle" variant="outline" size="sm">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
+            ></sonic-button>
           </sonic-td>
         </sonic-tr>
       </sonic-tbody>
-      <sonic-caption>Table caption</sonic-caption>
+      <sonic-caption>table caption</sonic-caption>
     </sonic-table>
   </template>
-</sonic-code>
-
-## API reference
-
-### `sonic-table`
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `size` | `2xs` · `xs` · `sm` · `md` · `lg` · `xl` · `2xl` · `inherit` (default `md`) | Scales table font size via shared size tokens |
-| `bordered` | boolean | Outer border and row dividers |
-| `noCustomScroll` | boolean | Disables custom scrollbar styling on the horizontal scroll container |
-| `rounded` | boolean | Reflected on the host; no default table styles |
-| `maxHeight` | CSS length | Max height on the scroll container; enables vertical scrolling |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Table sections and rows (`sonic-thead`, `sonic-tbody`, `sonic-tr`, …) |
-
-### `sonic-thead` · `sonic-tbody` · `sonic-tfoot`
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Row elements (`sonic-tr`) |
-
-`sonic-tbody` wraps slotted rows in a native `<tbody>` and applies zebra / hover backgrounds to **`sonic-tr`** children.
-
-### `sonic-caption`
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Caption text rendered as `table-caption` |
-
-### `sonic-tr`
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `type` | `default` · `primary` · `info` · `success` · `warning` · `danger` · `neutral` | Semantic text color for the row |
-| `even` | boolean | Striping background; usually set by **`sonic-list`** metadata |
-| `odd` | boolean | Alternate striping background; usually set by **`sonic-list`** |
-| `last` | boolean | Removes bottom cell border on the last row when **`bordered`** |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Header or data cells (`sonic-th` / `sonic-td`) |
-
-### `sonic-th`
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `type` | `default` · `primary` · `info` · `success` · `warning` · `danger` · `neutral` | Semantic text color |
-| `align` | `left` · `center` · `right` | Horizontal text alignment |
-| `colSpan` | number | Column span |
-| `rowSpan` | number | Row span |
-| `minWidth` | CSS length | Minimum cell width |
-| `maxWidth` | CSS length | Maximum cell width |
-| `width` | CSS length | Cell width |
-| `noBorder` | boolean | Removes the bottom border under the header cell |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Header label content |
-
-### `sonic-td`
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `type` | `default` · `primary` · `info` · `success` · `warning` · `danger` · `neutral` | Semantic text color |
-| `align` | `left` · `center` · `right` | Horizontal text alignment |
-| `vAlign` | CSS `vertical-align` value | Vertical alignment |
-| `colSpan` | number | Column span |
-| `rowSpan` | number | Row span |
-| `minWidth` | CSS length | Minimum cell width |
-| `maxWidth` | CSS length | Maximum cell width |
-| `width` | CSS length | Cell width |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Cell content |
+</sonic-code>