@supersoniks/concorde 5.1.1 → 5.1.2

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

@@ -0,0 +1,267 @@
+# Table
+
+**`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 **`minWidth`** on wide cells to keep them readable. Render fetched rows with **`sonic-list`**.
+
+## Basic example
+
+**`bordered`** adds an outer frame and row dividers. **`sonic-tbody`** stripes and highlights its rows on hover.
+
+<sonic-code>
+  <template>
+    <sonic-table bordered>
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th>Flight</sonic-th>
+          <sonic-th>Destination</sonic-th>
+          <sonic-th>Status</sonic-th>
+        </sonic-tr>
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-tr>
+          <sonic-td>CN 001</sonic-td>
+          <sonic-td>New York JFK</sonic-td>
+          <sonic-td>Boarding</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>CN 014</sonic-td>
+          <sonic-td>London LHR</sonic-td>
+          <sonic-td>On time</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>CN 102</sonic-td>
+          <sonic-td>Rio de Janeiro GIG</sonic-td>
+          <sonic-td>Delayed</sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## List, fetch and max height
+
+Put a **`sonic-list`** with `displayContents` inside **`sonic-tbody`** and render one **`sonic-tr`** per item; the list sets `even` · `odd` · `last` on each row. **`maxHeight`** caps the scroll container so the body scrolls vertically.
+
+<sonic-code>
+  <template>
+    <sonic-table maxHeight="10rem">
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th>Time</sonic-th>
+          <sonic-th>Flight</sonic-th>
+          <sonic-th>Destination</sonic-th>
+          <sonic-th>Gate</sonic-th>
+        </sonic-tr>
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-list fetch serviceURL="/docs-mock-api" dataProvider="flights" key="flights" displayContents>
+          <template>
+            <sonic-tr>
+              <sonic-td data-bind ::inner-html="$time"></sonic-td>
+              <sonic-td data-bind ::inner-html="$code"></sonic-td>
+              <sonic-td minWidth="10rem" data-bind ::inner-html="$city <b>$airport</b>"></sonic-td>
+              <sonic-td data-bind ::inner-html="$gate"></sonic-td>
+            </sonic-tr>
+          </template>
+        </sonic-list>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## Size
+
+With no **`size`**, the table uses `md`.
+
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-4 gap-3">
+      <sonic-table size="2xs" bordered><sonic-tr><sonic-td>2xs</sonic-td></sonic-tr></sonic-table>
+      <sonic-table size="xs" bordered><sonic-tr><sonic-td>xs</sonic-td></sonic-tr></sonic-table>
+      <sonic-table size="sm" bordered><sonic-tr><sonic-td>sm</sonic-td></sonic-tr></sonic-table>
+      <sonic-table size="md" bordered><sonic-tr><sonic-td>md</sonic-td></sonic-tr></sonic-table>
+      <sonic-table size="lg" bordered><sonic-tr><sonic-td>lg</sonic-td></sonic-tr></sonic-table>
+      <sonic-table size="xl" bordered><sonic-tr><sonic-td>xl</sonic-td></sonic-tr></sonic-table>
+      <sonic-table size="2xl" bordered><sonic-tr><sonic-td>2xl</sonic-td></sonic-tr></sonic-table>
+    </div>
+  </template>
+</sonic-code>
+
+## Type
+
+**`type`** on **`sonic-tr`** · **`sonic-th`** · **`sonic-td`** sets a semantic text color.
+
+<sonic-code>
+  <template>
+    <sonic-table bordered>
+      <sonic-tr>
+        <sonic-th type="info">Set on</sonic-th>
+        <sonic-th type="info">sonic-th</sonic-th>
+      </sonic-tr>
+      <sonic-tr>
+        <sonic-td type="danger">Set on</sonic-td>
+        <sonic-td type="danger">sonic-td</sonic-td>
+      </sonic-tr>
+      <sonic-tr type="success">
+        <sonic-td>Set on</sonic-td>
+        <sonic-td>sonic-tr</sonic-td>
+      </sonic-tr>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## Colspan and rowspan
+
+<sonic-code>
+  <template>
+    <sonic-table bordered>
+      <sonic-tbody>
+        <sonic-tr>
+          <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-tr>
+        <sonic-tr>
+          <sonic-td>cell</sonic-td>
+          <sonic-td>cell</sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## Alignment and width
+
+**`align`** sets horizontal alignment. **`width`** · **`minWidth`** · **`maxWidth`** set the cell dimensions. **`vAlign`** exists on **`sonic-td`** only.
+
+<sonic-code>
+  <template>
+    <sonic-table bordered>
+      <sonic-thead>
+        <sonic-tr>
+          <sonic-th width="8rem">align</sonic-th>
+          <sonic-th maxWidth="8rem">maxWidth 8rem</sonic-th>
+          <sonic-th>vAlign</sonic-th>
+        </sonic-tr>
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-tr>
+          <sonic-td align="left">left</sonic-td>
+          <sonic-td maxWidth="8rem">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sonic-td>
+          <sonic-td vAlign="top">top</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td align="center">center</sonic-td>
+          <sonic-td maxWidth="8rem">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sonic-td>
+          <sonic-td vAlign="middle">middle</sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td align="right">right</sonic-td>
+          <sonic-td maxWidth="8rem">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sonic-td>
+          <sonic-td vAlign="bottom">bottom</sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## Sticky header and caption
+
+**`sonic-th`** cells stick to the top of the scroll container. To stick the header to the page instead, set **`noCustomScroll`** (which removes the scroll container) and position **`sonic-thead`** yourself. **`sonic-caption`** adds a caption.
+
+<sonic-code>
+  <template>
+    <sonic-table bordered noCustomScroll>
+      <sonic-thead class="sticky top-16">
+        <sonic-tr>
+          <sonic-th minWidth="12rem">Product</sonic-th>
+          <sonic-th align="center">Quantity</sonic-th>
+          <sonic-th align="right">Price</sonic-th>
+          <sonic-th></sonic-th>
+        </sonic-tr>
+      </sonic-thead>
+      <sonic-tbody>
+        <sonic-tr>
+          <sonic-td>Desk lamp</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" aria-label="Edit">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon>
+            </sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr type="warning">
+          <sonic-td>Notebook</sonic-td>
+          <sonic-td align="center">0</sonic-td>
+          <sonic-td align="right">8 €</sonic-td>
+          <sonic-td align="right">
+            <sonic-button shape="circle" variant="outline" size="sm" aria-label="Edit">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon>
+            </sonic-button>
+          </sonic-td>
+        </sonic-tr>
+        <sonic-tr>
+          <sonic-td>Headphones</sonic-td>
+          <sonic-td align="center">1</sonic-td>
+          <sonic-td align="right" type="danger">120 €</sonic-td>
+          <sonic-td align="right">
+            <sonic-button shape="circle" variant="outline" size="sm" aria-label="Edit">
+              <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon>
+            </sonic-button>
+          </sonic-td>
+        </sonic-tr>
+      </sonic-tbody>
+      <sonic-caption>Cart contents</sonic-caption>
+    </sonic-table>
+  </template>
+</sonic-code>
+
+## API reference
+
+### `sonic-table`
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `size` | `2xs` … `2xl` · `inherit` (default `md`) | Font size |
+| `bordered` | boolean | Outer border and row dividers |
+| `maxHeight` | CSS length | Max height of the scroll container |
+| `noCustomScroll` | boolean | Remove the scroll container and its custom scrollbar |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Sections, rows and caption |
+
+### `sonic-thead` · `sonic-tbody` · `sonic-tfoot` · `sonic-caption`
+
+No attributes. Default slot only. `sonic-tbody` stripes and highlights its rows.
+
+### `sonic-tr`
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `type` | `default` · `primary` · `info` · `success` · `warning` · `danger` · `neutral` | Text color |
+| `even` · `odd` | boolean | Striping background; set by `sonic-list` |
+| `last` | boolean | No bottom border; set by `sonic-list` |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | `sonic-th` or `sonic-td` cells |
+
+### `sonic-th` · `sonic-td`
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `type` | same as `sonic-tr` | Text color |
+| `align` | `left` · `center` · `right` | Horizontal alignment |
+| `vAlign` | CSS `vertical-align` | Vertical alignment (`sonic-td` only) |
+| `colSpan` · `rowSpan` | number | Column and row span |
+| `width` · `minWidth` · `maxWidth` | CSS length | Cell dimensions |
+| `noBorder` | boolean | No bottom border (`sonic-th` only) |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Cell content |

package/docs/core/components/ui/theme/theme.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/theme" data-doc-id="core/components/ui/theme/theme">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Theme — Concorde by Supersoniks</title>
+  <meta name="description" content="sonic-theme is the root element of a Concorde UI: it holds the --sc-* design tokens, optionally applies a built-in palette, and is where popovers, modals and toasts are mounted. Import @supersoniks/co">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/theme/theme, theme, Theme, UI component, sonic-theme, web component, --sc-*, @supersoniks/concorde/theme, theme=&quot;custom&quot;, light, dark, auto, prefers-color-scheme">
+  <meta name="concorde-doc-id" content="core/components/ui/theme/theme">
+  <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/theme">
+  <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/theme.md">
+</head>
+<body>
+  <header>
+    <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/theme">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 — Theme</strong>. sonic-theme is the root element of a Concorde UI: it holds the --sc-* design tokens, optionally applies a built-in palette, and is where popovers, modals and toasts are mounted. Import @supersoniks/co <span>Doc ID: <code>core/components/ui/theme/theme</code>. Keywords: Concorde, supersoniks, core/components/ui/theme/theme, theme, Theme, UI component, sonic-theme, web component, --sc-*, @supersoniks/concorde/theme, theme=&quot;custom&quot;, light, dark, auto, prefers-color-scheme. URL: <a href="https://concorde.supersoniks.org/core/components/ui/theme">https://concorde.supersoniks.org/core/components/ui/theme</a>.</span></p>
+      <h1 id="theme">Theme</h1>
+<p><strong><code>sonic-theme</code></strong> is the root element of a Concorde UI: it holds the <code>--sc-*</code> design tokens, optionally applies a built-in palette, and is where popovers, modals and toasts are mounted. Import <code>@supersoniks/concorde/theme</code> once at the app entry and wrap your app in it. Token names and brand overrides are covered in <a href="/docs/getting-started/theming">Theming</a>.</p>
+<h2 id="basic-example">Basic example</h2>
+<pre><code>&lt;sonic-theme color font class=&quot;block bg-base p-6 rounded-lg&quot;&gt;
+      &lt;sonic-button type=&quot;primary&quot;&gt;Save changes&lt;/sonic-button&gt;
+    &lt;/sonic-theme&gt;
+</code></pre>
+<h2 id="theme-mode">Theme mode</h2>
+<p>With no <code>theme</code> (or <code>theme=&quot;custom&quot;</code>), only the core tokens and your own <code>--sc-*</code> overrides apply. <code>light</code> and <code>dark</code> apply the built-in palettes; <code>auto</code> switches between them with <code>prefers-color-scheme</code>.</p>
+<pre><code>&lt;div class=&quot;grid gap-4 md:grid-cols-2&quot;&gt;
+      &lt;sonic-theme theme=&quot;light&quot; color font class=&quot;block bg-base p-4 rounded-md border border-neutral-200&quot;&gt;
+        &lt;p class=&quot;text-sm mb-3 opacity-80&quot;&gt;theme=&quot;light&quot;&lt;/p&gt;
+        &lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
+          &lt;sonic-badge type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
+          &lt;sonic-badge type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
+          &lt;sonic-badge type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
+        &lt;/div&gt;
+      &lt;/sonic-theme&gt;
+      &lt;sonic-theme theme=&quot;dark&quot; color font class=&quot;block bg-base p-4 rounded-md&quot;&gt;
+        &lt;p class=&quot;text-sm mb-3 opacity-80&quot;&gt;theme=&quot;dark&quot;&lt;/p&gt;
+        &lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
+          &lt;sonic-badge type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
+          &lt;sonic-badge type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
+          &lt;sonic-badge type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
+        &lt;/div&gt;
+      &lt;/sonic-theme&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="text-color-and-font">Text color and font</h2>
+<p><code>color</code> sets the host text color to <code>--sc-base-content</code>. <code>font</code> applies the base font family, weight and style tokens. Both are off by default. To paint the background, add the Tailwind classes <code>block</code> and <code>bg-base</code> on the host.</p>
+<pre><code>&lt;sonic-theme theme=&quot;light&quot; color font class=&quot;block bg-base p-6 rounded-lg&quot;&gt;
+      &lt;p&gt;Body copy inherits the base content color and font from the theme.&lt;/p&gt;
+    &lt;/sonic-theme&gt;
+</code></pre>
+<h2 id="pop-container">Pop container</h2>
+<p>Overlays such as <code>sonic-modal</code> are appended to the last connected <code>sonic-theme</code>, or to <code>document.body</code> when there is none. <code>Theme.getPopContainer()</code> returns that element.</p>
+<pre><code>&lt;sonic-theme theme=&quot;light&quot; color font class=&quot;block bg-base p-4 rounded-lg&quot;&gt;
+      &lt;sonic-button onclick=&quot;document.getElementById(&#39;themePopModal&#39;).show()&quot;&gt;
+        Open modal
+      &lt;/sonic-button&gt;
+      &lt;sonic-modal id=&quot;themePopModal&quot;&gt;
+        &lt;sonic-modal-title&gt;Mounted on theme&lt;/sonic-modal-title&gt;
+        &lt;sonic-modal-content&gt;
+          This dialog is appended under the nearest sonic-theme pop container.
+        &lt;/sonic-modal-content&gt;
+        &lt;sonic-modal-actions&gt;
+          &lt;sonic-button hideModal&gt;Close&lt;/sonic-button&gt;
+        &lt;/sonic-modal-actions&gt;
+      &lt;/sonic-modal&gt;
+    &lt;/sonic-theme&gt;
+</code></pre>
+<h2 id="embedded-iframes">Embedded iframes</h2>
+<p>On connect, the theme posts its resolved <code>--sc-*</code> values and linked Google Fonts / Adobe Fonts stylesheets to every iframe on the page (message type <code>SonicTheme</code>). An iframe can ask for them again:</p>
+<pre><code class="language-javascript">window.parent.postMessage({ type: &quot;GetSonicTheme&quot; }, &quot;*&quot;);
+</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>theme</code></td>
+<td><code>custom</code> (default) · <code>light</code> · <code>dark</code> · <code>auto</code></td>
+<td>Built-in palette; <code>custom</code> applies core tokens and your overrides only</td>
+</tr>
+<tr>
+<td><code>color</code></td>
+<td>boolean</td>
+<td>Host text color uses <code>--sc-base-content</code></td>
+</tr>
+<tr>
+<td><code>font</code></td>
+<td>boolean</td>
+<td>Host uses the base font family, weight and style tokens</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Application content</td>
+</tr>
+</tbody></table>
+
+    </article>
+  </main>
+</body>
+</html>

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

@@ -0,0 +1,97 @@
+# Theme
+
+**`sonic-theme`** is the root element of a Concorde UI: it holds the `--sc-*` design tokens, optionally applies a built-in palette, and is where popovers, modals and toasts are mounted. Import `@supersoniks/concorde/theme` once at the app entry and wrap your app in it. Token names and brand overrides are covered in [Theming](/docs/getting-started/theming).
+
+## Basic example
+
+<sonic-code>
+  <template>
+    <sonic-theme color font class="block bg-base p-6 rounded-lg">
+      <sonic-button type="primary">Save changes</sonic-button>
+    </sonic-theme>
+  </template>
+</sonic-code>
+
+## Theme mode
+
+With no `theme` (or `theme="custom"`), only the core tokens and your own `--sc-*` overrides apply. `light` and `dark` apply the built-in palettes; `auto` switches between them with `prefers-color-scheme`.
+
+<sonic-code>
+  <template>
+    <div class="grid gap-4 md:grid-cols-2">
+      <sonic-theme theme="light" color font class="block bg-base p-4 rounded-md border border-neutral-200">
+        <p class="text-sm mb-3 opacity-80">theme="light"</p>
+        <div class="flex flex-wrap gap-2">
+          <sonic-badge type="primary">Primary</sonic-badge>
+          <sonic-badge type="success">Success</sonic-badge>
+          <sonic-badge type="danger">Danger</sonic-badge>
+        </div>
+      </sonic-theme>
+      <sonic-theme theme="dark" color font class="block bg-base p-4 rounded-md">
+        <p class="text-sm mb-3 opacity-80">theme="dark"</p>
+        <div class="flex flex-wrap gap-2">
+          <sonic-badge type="primary">Primary</sonic-badge>
+          <sonic-badge type="success">Success</sonic-badge>
+          <sonic-badge type="danger">Danger</sonic-badge>
+        </div>
+      </sonic-theme>
+    </div>
+  </template>
+</sonic-code>
+
+## Text color and font
+
+`color` sets the host text color to `--sc-base-content`. `font` applies the base font family, weight and style tokens. Both are off by default. To paint the background, add the Tailwind classes `block` and `bg-base` on the host.
+
+<sonic-code>
+  <template>
+    <sonic-theme theme="light" color font class="block bg-base p-6 rounded-lg">
+      <p>Body copy inherits the base content color and font from the theme.</p>
+    </sonic-theme>
+  </template>
+</sonic-code>
+
+## Pop container
+
+Overlays such as `sonic-modal` are appended to the last connected `sonic-theme`, or to `document.body` when there is none. `Theme.getPopContainer()` returns that element.
+
+<sonic-code>
+  <template>
+    <sonic-theme theme="light" color font class="block bg-base p-4 rounded-lg">
+      <sonic-button onclick="document.getElementById('themePopModal').show()">
+        Open modal
+      </sonic-button>
+      <sonic-modal id="themePopModal">
+        <sonic-modal-title>Mounted on theme</sonic-modal-title>
+        <sonic-modal-content>
+          This dialog is appended under the nearest sonic-theme pop container.
+        </sonic-modal-content>
+        <sonic-modal-actions>
+          <sonic-button hideModal>Close</sonic-button>
+        </sonic-modal-actions>
+      </sonic-modal>
+    </sonic-theme>
+  </template>
+</sonic-code>
+
+## Embedded iframes
+
+On connect, the theme posts its resolved `--sc-*` values and linked Google Fonts / Adobe Fonts stylesheets to every iframe on the page (message type `SonicTheme`). An iframe can ask for them again:
+
+<sonic-code language="javascript">
+  <template>
+window.parent.postMessage({ type: "GetSonicTheme" }, "*");
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `theme` | `custom` (default) · `light` · `dark` · `auto` | Built-in palette; `custom` applies core tokens and your overrides only |
+| `color` | boolean | Host text color uses `--sc-base-content` |
+| `font` | boolean | Host uses the base font family, weight and style tokens |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Application content |