@supersoniks/concorde 5.1.1 → 5.1.2

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

@@ -0,0 +1,216 @@
+# Pop
+
+**`sonic-pop`** anchors a floating panel to a trigger: put the control in the default slot and the panel (menu, form, any markup) in **`slot="content"`**. A click on the trigger toggles the panel unless **`manual`** is set. The panel follows the trigger while open and flips to stay inside the viewport.
+
+## Basic example
+
+<sonic-code>
+  <template>
+    <sonic-pop>
+      <sonic-button>Notifications</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item>
+          <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+          Notifications
+        </sonic-menu-item>
+        <sonic-menu-item>
+          <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
+          Settings
+        </sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+  </template>
+</sonic-code>
+
+## Placement
+
+**`placement`** is a side (`top` · `bottom` · `left` · `right`) with an optional alignment suffix (`-start` · `-center` · `-end`). Default is `bottom`; without a suffix, the panel aligns to `start`. The space syntax (`bottom center`) is deprecated.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-pop placement="top">
+        <sonic-button>Top</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop placement="bottom">
+        <sonic-button>Bottom</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop placement="left">
+        <sonic-button>Left</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop placement="right">
+        <sonic-button>Right</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop placement="top-center">
+        <sonic-button>Top center</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop placement="bottom-center">
+        <sonic-button>Bottom center</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop placement="left-center">
+        <sonic-button>Left center</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop placement="bottom-end">
+        <sonic-button>Bottom end</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+    </div>
+  </template>
+</sonic-code>
+
+## Shadow
+
+The panel shadow defaults to `lg`.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-pop shadow="none">
+        <sonic-button>None</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop shadow="sm">
+        <sonic-button>Small</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop shadow="md">
+        <sonic-button>Medium</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop shadow="lg">
+        <sonic-button>Large</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+    </div>
+  </template>
+</sonic-code>
+
+## Inline
+
+The host is middle-aligned by default. Set **`inline`** to baseline-align a trigger inside running text.
+
+<sonic-code>
+  <template>
+    <p>
+      You are signed in as
+      <sonic-pop inline>
+        <sonic-button variant="link">ada.lindqvist@example.com</sonic-button>
+        <sonic-menu slot="content">
+          <sonic-menu-item>Profile</sonic-menu-item>
+          <sonic-menu-item>Sign out</sonic-menu-item>
+        </sonic-menu>
+      </sonic-pop>
+      on this device.
+    </p>
+  </template>
+</sonic-code>
+
+## No toggle
+
+With **`noToggle`**, clicking the trigger opens the pop but does not close it. Close it with an outside click, Escape or **`hide()`**.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-pop noToggle>
+        <sonic-button>No toggle</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop>
+        <sonic-button>Default toggle</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+    </div>
+  </template>
+</sonic-code>
+
+## Manual control
+
+**`manual`** disables the built-in click and keyboard handling on the trigger. Call **`show()`** and **`hide()`** instead.
+
+<sonic-code>
+  <template>
+    <sonic-pop manual id="manualPop">
+      <sonic-button onclick="alert('Custom action, the pop stays closed')">Manual trigger</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item>Opened from script</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+    <sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5" variant="outline">
+      Open the pop
+    </sonic-button>
+  </template>
+</sonic-code>
+
+## Keep open on select
+
+A click inside the panel closes the pop by default. Set **`data-on-select="keep"`** on the panel or a descendant to keep it open, for example while ticking checkboxes.
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-pop>
+        <sonic-button>Closes on select</sonic-button>
+        <div slot="content" class="grid gap-2 p-3">
+          <sonic-checkbox>Window seat</sonic-checkbox>
+          <sonic-checkbox>Extra baggage</sonic-checkbox>
+        </div>
+      </sonic-pop>
+      <sonic-pop>
+        <sonic-button>Stays open on select</sonic-button>
+        <div slot="content" class="grid gap-2 p-3" data-on-select="keep">
+          <sonic-checkbox>Window seat</sonic-checkbox>
+          <sonic-checkbox>Extra baggage</sonic-checkbox>
+        </div>
+      </sonic-pop>
+    </div>
+  </template>
+</sonic-code>
+
+## Keyboard
+
+**ArrowDown** on the trigger opens the pop. **Escape** closes the most recently opened pop, before an enclosing `sonic-modal`, and returns focus to its trigger.
+
+<sonic-code>
+  <template>
+    <sonic-pop>
+      <sonic-button>Focus me, then press ArrowDown</sonic-button>
+      <sonic-menu slot="content">
+        <sonic-menu-item>First item</sonic-menu-item>
+        <sonic-menu-item>Second item</sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+  </template>
+</sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `placement` | `top` · `bottom` (default) · `left` · `right`, each with optional `-start` · `-center` · `-end` | Side and alignment relative to the trigger |
+| `shadow` | `none` · `sm` · `md` · `lg` (default `lg`) | Panel shadow |
+| `inline` | boolean | Baseline-align the host in text |
+| `noToggle` | boolean | A trigger click does not close an open pop |
+| `manual` | boolean | Disable trigger click and keyboard handling |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Trigger |
+| `content` | Floating panel; `data-on-select="keep"` inside it prevents close on click |
+
+| Method | Description |
+|--------|-------------|
+| `show()` | Open the panel |
+| `hide()` | Close the panel |
+
+| Event | Description |
+|-------|-------------|
+| `show` | Panel opened |
+| `hide` | Panel closed |

package/docs/src/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/src/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 |