@supersoniks/concorde 5.1.1 → 5.1.2

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

@@ -0,0 +1,109 @@
+# Progress
+
+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">Boarding 50%</sonic-progress>
+  </template>
+</sonic-code>
+
+## Indeterminate
+
+With no **`value`**, the bar animates until progress is known.
+
+<sonic-code>
+  <template>
+    <sonic-progress></sonic-progress>
+  </template>
+</sonic-code>
+
+## Type
+
+Semantic color follows **`type`**. With no **`type`**, behavior is `default`.
+
+<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>
+  </template>
+</sonic-code>
+
+## Size
+
+Bar height scales with typography via **`size`**. With no **`size`**, font size matches **`md`** (`1rem`).
+
+<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>
+  </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.
+
+<sonic-code>
+  <template>
+    <sonic-progress type="danger" value="80">
+      80% fuel used <span slot="remaining">20% left</span>
+    </sonic-progress>
+  </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).
+
+<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>
+  </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/core/components/ui/table/table.html

@@ -0,0 +1,333 @@
+<!DOCTYPE html>
+<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/table" data-doc-id="core/components/ui/table/table">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Table — Concorde by Supersoniks</title>
+  <meta name="description" content="sonic-table lays out tabular data with sonic-tr · sonic-th · sonic-td children, optionally grouped in sonic-thead · sonic-tbody · sonic-tfoot. It scrolls horizontally when columns overflow; set minWid">
+  <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, sonic-thead, sonic-tbody, sonic-tfoot, minWidth, sonic-list, bordered">
+  <meta name="concorde-doc-id" content="core/components/ui/table/table">
+  <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/table">
+  <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/table.md">
+</head>
+<body>
+  <header>
+    <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/table">same URL (interactive)</a> · <a href="/llms.txt">llms.txt</a></p>
+  </header>
+  <main>
+    <article>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Table</strong>. sonic-table lays out tabular data with sonic-tr · sonic-th · sonic-td children, optionally grouped in sonic-thead · sonic-tbody · sonic-tfoot. It scrolls horizontally when columns overflow; set minWid <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, sonic-thead, sonic-tbody, sonic-tfoot, minWidth, sonic-list, bordered. URL: <a href="https://concorde.supersoniks.org/core/components/ui/table">https://concorde.supersoniks.org/core/components/ui/table</a>.</span></p>
+      <h1 id="table">Table</h1>
+<p><strong><code>sonic-table</code></strong> lays out tabular data with <strong><code>sonic-tr</code></strong> · <strong><code>sonic-th</code></strong> · <strong><code>sonic-td</code></strong> children, optionally grouped in <strong><code>sonic-thead</code></strong> · <strong><code>sonic-tbody</code></strong> · <strong><code>sonic-tfoot</code></strong>. It scrolls horizontally when columns overflow; set <strong><code>minWidth</code></strong> on wide cells to keep them readable. Render fetched rows with <strong><code>sonic-list</code></strong>.</p>
+<h2 id="basic-example">Basic example</h2>
+<p><strong><code>bordered</code></strong> adds an outer frame and row dividers. <strong><code>sonic-tbody</code></strong> stripes and highlights its rows on hover.</p>
+<pre><code>&lt;sonic-table bordered&gt;
+      &lt;sonic-thead&gt;
+        &lt;sonic-tr&gt;
+          &lt;sonic-th&gt;Flight&lt;/sonic-th&gt;
+          &lt;sonic-th&gt;Destination&lt;/sonic-th&gt;
+          &lt;sonic-th&gt;Status&lt;/sonic-th&gt;
+        &lt;/sonic-tr&gt;
+      &lt;/sonic-thead&gt;
+      &lt;sonic-tbody&gt;
+        &lt;sonic-tr&gt;
+          &lt;sonic-td&gt;CN 001&lt;/sonic-td&gt;
+          &lt;sonic-td&gt;New York JFK&lt;/sonic-td&gt;
+          &lt;sonic-td&gt;Boarding&lt;/sonic-td&gt;
+        &lt;/sonic-tr&gt;
+        &lt;sonic-tr&gt;
+          &lt;sonic-td&gt;CN 014&lt;/sonic-td&gt;
+          &lt;sonic-td&gt;London LHR&lt;/sonic-td&gt;
+          &lt;sonic-td&gt;On time&lt;/sonic-td&gt;
+        &lt;/sonic-tr&gt;
+        &lt;sonic-tr&gt;
+          &lt;sonic-td&gt;CN 102&lt;/sonic-td&gt;
+          &lt;sonic-td&gt;Rio de Janeiro GIG&lt;/sonic-td&gt;
+          &lt;sonic-td&gt;Delayed&lt;/sonic-td&gt;
+        &lt;/sonic-tr&gt;
+      &lt;/sonic-tbody&gt;
+    &lt;/sonic-table&gt;
+</code></pre>
+<h2 id="list-fetch-and-max-height">List, fetch and max height</h2>
+<p>Put a <strong><code>sonic-list</code></strong> with <code>displayContents</code> inside <strong><code>sonic-tbody</code></strong> and render one <strong><code>sonic-tr</code></strong> per item; the list sets <code>even</code> · <code>odd</code> · <code>last</code> on each row. <strong><code>maxHeight</code></strong> caps the scroll container so the body scrolls vertically.</p>
+<pre><code>&lt;sonic-table maxHeight=&quot;10rem&quot;&gt;
+      &lt;sonic-thead&gt;
+        &lt;sonic-tr&gt;
+          &lt;sonic-th&gt;Time&lt;/sonic-th&gt;
+          &lt;sonic-th&gt;Flight&lt;/sonic-th&gt;
+          &lt;sonic-th&gt;Destination&lt;/sonic-th&gt;
+          &lt;sonic-th&gt;Gate&lt;/sonic-th&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;flights&quot; key=&quot;flights&quot; displayContents&gt;
+          &lt;template&gt;
+            &lt;sonic-tr&gt;
+              &lt;sonic-td data-bind ::inner-html=&quot;$time&quot;&gt;&lt;/sonic-td&gt;
+              &lt;sonic-td data-bind ::inner-html=&quot;$code&quot;&gt;&lt;/sonic-td&gt;
+              &lt;sonic-td minWidth=&quot;10rem&quot; data-bind ::inner-html=&quot;$city &lt;b&gt;$airport&lt;/b&gt;&quot;&gt;&lt;/sonic-td&gt;
+              &lt;sonic-td data-bind ::inner-html=&quot;$gate&quot;&gt;&lt;/sonic-td&gt;
+            &lt;/sonic-tr&gt;
+</code></pre>
+<h2 id="size">Size</h2>
+<p>With no <strong><code>size</code></strong>, the table uses <code>md</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&gt;2xs&lt;/sonic-td&gt;&lt;/sonic-tr&gt;&lt;/sonic-table&gt;
+      &lt;sonic-table size=&quot;xs&quot; bordered&gt;&lt;sonic-tr&gt;&lt;sonic-td&gt;xs&lt;/sonic-td&gt;&lt;/sonic-tr&gt;&lt;/sonic-table&gt;
+      &lt;sonic-table size=&quot;sm&quot; bordered&gt;&lt;sonic-tr&gt;&lt;sonic-td&gt;sm&lt;/sonic-td&gt;&lt;/sonic-tr&gt;&lt;/sonic-table&gt;
+      &lt;sonic-table size=&quot;md&quot; bordered&gt;&lt;sonic-tr&gt;&lt;sonic-td&gt;md&lt;/sonic-td&gt;&lt;/sonic-tr&gt;&lt;/sonic-table&gt;
+      &lt;sonic-table size=&quot;lg&quot; bordered&gt;&lt;sonic-tr&gt;&lt;sonic-td&gt;lg&lt;/sonic-td&gt;&lt;/sonic-tr&gt;&lt;/sonic-table&gt;
+      &lt;sonic-table size=&quot;xl&quot; bordered&gt;&lt;sonic-tr&gt;&lt;sonic-td&gt;xl&lt;/sonic-td&gt;&lt;/sonic-tr&gt;&lt;/sonic-table&gt;
+      &lt;sonic-table size=&quot;2xl&quot; bordered&gt;&lt;sonic-tr&gt;&lt;sonic-td&gt;2xl&lt;/sonic-td&gt;&lt;/sonic-tr&gt;&lt;/sonic-table&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="type">Type</h2>
+<p><strong><code>type</code></strong> on <strong><code>sonic-tr</code></strong> · <strong><code>sonic-th</code></strong> · <strong><code>sonic-td</code></strong> sets a semantic text color.</p>
+<pre><code>&lt;sonic-table bordered&gt;
+      &lt;sonic-tr&gt;
+        &lt;sonic-th type=&quot;info&quot;&gt;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;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;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-and-rowspan">Colspan and rowspan</h2>
+<pre><code>&lt;sonic-table bordered&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&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-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-tr&gt;
+      &lt;/sonic-tbody&gt;
+    &lt;/sonic-table&gt;
+</code></pre>
+<h2 id="alignment-and-width">Alignment and width</h2>
+<p><strong><code>align</code></strong> sets horizontal alignment. <strong><code>width</code></strong> · <strong><code>minWidth</code></strong> · <strong><code>maxWidth</code></strong> set the cell dimensions. <strong><code>vAlign</code></strong> exists on <strong><code>sonic-td</code></strong> only.</p>
+<pre><code>&lt;sonic-table bordered&gt;
+      &lt;sonic-thead&gt;
+        &lt;sonic-tr&gt;
+          &lt;sonic-th width=&quot;8rem&quot;&gt;align&lt;/sonic-th&gt;
+          &lt;sonic-th maxWidth=&quot;8rem&quot;&gt;maxWidth 8rem&lt;/sonic-th&gt;
+          &lt;sonic-th&gt;vAlign&lt;/sonic-th&gt;
+        &lt;/sonic-tr&gt;
+      &lt;/sonic-thead&gt;
+      &lt;sonic-tbody&gt;
+        &lt;sonic-tr&gt;
+          &lt;sonic-td align=&quot;left&quot;&gt;left&lt;/sonic-td&gt;
+          &lt;sonic-td maxWidth=&quot;8rem&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/sonic-td&gt;
+          &lt;sonic-td vAlign=&quot;top&quot;&gt;top&lt;/sonic-td&gt;
+        &lt;/sonic-tr&gt;
+        &lt;sonic-tr&gt;
+          &lt;sonic-td align=&quot;center&quot;&gt;center&lt;/sonic-td&gt;
+          &lt;sonic-td maxWidth=&quot;8rem&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/sonic-td&gt;
+          &lt;sonic-td vAlign=&quot;middle&quot;&gt;middle&lt;/sonic-td&gt;
+        &lt;/sonic-tr&gt;
+        &lt;sonic-tr&gt;
+          &lt;sonic-td align=&quot;right&quot;&gt;right&lt;/sonic-td&gt;
+          &lt;sonic-td maxWidth=&quot;8rem&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/sonic-td&gt;
+          &lt;sonic-td vAlign=&quot;bottom&quot;&gt;bottom&lt;/sonic-td&gt;
+        &lt;/sonic-tr&gt;
+      &lt;/sonic-tbody&gt;
+    &lt;/sonic-table&gt;
+</code></pre>
+<h2 id="sticky-header-and-caption">Sticky header and caption</h2>
+<p><strong><code>sonic-th</code></strong> cells stick to the top of the scroll container. To stick the header to the page instead, set <strong><code>noCustomScroll</code></strong> (which removes the scroll container) and position <strong><code>sonic-thead</code></strong> yourself. <strong><code>sonic-caption</code></strong> adds a caption.</p>
+<pre><code>&lt;sonic-table bordered noCustomScroll&gt;
+      &lt;sonic-thead class=&quot;sticky top-16&quot;&gt;
+        &lt;sonic-tr&gt;
+          &lt;sonic-th minWidth=&quot;12rem&quot;&gt;Product&lt;/sonic-th&gt;
+          &lt;sonic-th align=&quot;center&quot;&gt;Quantity&lt;/sonic-th&gt;
+          &lt;sonic-th align=&quot;right&quot;&gt;Price&lt;/sonic-th&gt;
+          &lt;sonic-th&gt;&lt;/sonic-th&gt;
+        &lt;/sonic-tr&gt;
+      &lt;/sonic-thead&gt;
+      &lt;sonic-tbody&gt;
+        &lt;sonic-tr&gt;
+          &lt;sonic-td&gt;Desk lamp&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 align=&quot;right&quot;&gt;
+            &lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot; aria-label=&quot;Edit&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;Notebook&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;8 €&lt;/sonic-td&gt;
+          &lt;sonic-td align=&quot;right&quot;&gt;
+            &lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot; aria-label=&quot;Edit&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;Headphones&lt;/sonic-td&gt;
+          &lt;sonic-td align=&quot;center&quot;&gt;1&lt;/sonic-td&gt;
+          &lt;sonic-td align=&quot;right&quot; type=&quot;danger&quot;&gt;120 €&lt;/sonic-td&gt;
+          &lt;sonic-td align=&quot;right&quot;&gt;
+            &lt;sonic-button shape=&quot;circle&quot; variant=&quot;outline&quot; size=&quot;sm&quot; aria-label=&quot;Edit&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;Cart contents&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>2xl</code> · <code>inherit</code> (default <code>md</code>)</td>
+<td>Font size</td>
+</tr>
+<tr>
+<td><code>bordered</code></td>
+<td>boolean</td>
+<td>Outer border and row dividers</td>
+</tr>
+<tr>
+<td><code>maxHeight</code></td>
+<td>CSS length</td>
+<td>Max height of the scroll container</td>
+</tr>
+<tr>
+<td><code>noCustomScroll</code></td>
+<td>boolean</td>
+<td>Remove the scroll container and its custom scrollbar</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Sections, rows and caption</td>
+</tr>
+</tbody></table>
+<h3 id="sonic-thead--sonic-tbody--sonic-tfoot--sonic-caption"><code>sonic-thead</code> · <code>sonic-tbody</code> · <code>sonic-tfoot</code> · <code>sonic-caption</code></h3>
+<p>No attributes. Default slot only. <code>sonic-tbody</code> stripes and highlights its rows.</p>
+<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>Text color</td>
+</tr>
+<tr>
+<td><code>even</code> · <code>odd</code></td>
+<td>boolean</td>
+<td>Striping background; set by <code>sonic-list</code></td>
+</tr>
+<tr>
+<td><code>last</code></td>
+<td>boolean</td>
+<td>No bottom border; set by <code>sonic-list</code></td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td><code>sonic-th</code> or <code>sonic-td</code> cells</td>
+</tr>
+</tbody></table>
+<h3 id="sonic-th--sonic-td"><code>sonic-th</code> · <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>same as <code>sonic-tr</code></td>
+<td>Text color</td>
+</tr>
+<tr>
+<td><code>align</code></td>
+<td><code>left</code> · <code>center</code> · <code>right</code></td>
+<td>Horizontal alignment</td>
+</tr>
+<tr>
+<td><code>vAlign</code></td>
+<td>CSS <code>vertical-align</code></td>
+<td>Vertical alignment (<code>sonic-td</code> only)</td>
+</tr>
+<tr>
+<td><code>colSpan</code> · <code>rowSpan</code></td>
+<td>number</td>
+<td>Column and row span</td>
+</tr>
+<tr>
+<td><code>width</code> · <code>minWidth</code> · <code>maxWidth</code></td>
+<td>CSS length</td>
+<td>Cell dimensions</td>
+</tr>
+<tr>
+<td><code>noBorder</code></td>
+<td>boolean</td>
+<td>No bottom border (<code>sonic-th</code> only)</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>
+</body>
+</html>