@supersoniks/concorde 5.1.2 → 5.1.3-immutable.1

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

@@ -1,214 +0,0 @@
-# Icon
-
-**`sonic-icon`** renders inline SVG icons from the **bundled core set** or from **CDN libraries**. Set **`name`** (and **`library`** / **`prefix`** when needed); scale with **`size`**. Icons inherit **`currentColor`** and are **`aria-hidden`** by default—keep visible text nearby or label the control that contains them.
-
-## Core library
-
-Omit **`library`** to use the bundled set in `icons.json`. Available **`name`** values: `cancel` · `check` · `check-circled-outline` · `emoji-puzzled` · `info-empty` · `loader` · `minus-small` · `more-horiz` · `more-vert` · `nav-arrow-down` · `warning-circled-outline`.
-
-<sonic-code>
-  <template>
-    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
-      <div class="text-center">
-        <sonic-icon name="cancel" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">cancel</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="check" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">check</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="check-circled-outline" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">check-circled-outline</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="emoji-puzzled" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">emoji-puzzled</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="info-empty" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">info-empty</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="loader" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">loader</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="minus-small" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">minus-small</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="more-horiz" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">more-horiz</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="more-vert" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">more-vert</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="nav-arrow-down" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">nav-arrow-down</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon name="warning-circled-outline" size="lg"></sonic-icon>
-        <div class="text-xs mt-1">warning-circled-outline</div>
-      </div>
-    </div>
-  </template>
-</sonic-code>
-
-## External libraries
-
-Set **`library`** to load SVGs from a built-in CDN template. **`prefix`** falls back to each library’s default when omitted (`outline` for **`heroicons`**, **`regular`** for **`fontAwesome`** and **`material`**, and so on).
-
-<sonic-code>
-  <template>
-    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
-      <sonic-link href="https://heroicons.com/" target="_blank" class="text-center underline">
-        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">heroicons</div>
-      </sonic-link>
-      <sonic-link href="https://iconoir.com/" target="_blank" class="text-center underline">
-        <sonic-icon library="iconoir" name="2x2-cell" size="lg"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">iconoir</div>
-      </sonic-link>
-      <sonic-link href="https://materialdesignicons.com/" target="_blank" class="text-center underline">
-        <sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">material design</div>
-      </sonic-link>
-      <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=regular" target="_blank" class="text-center underline">
-        <sonic-icon library="fontAwesome" prefix="regular" name="user" size="lg"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">fontAwesome regular</div>
-      </sonic-link>
-      <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank" class="text-center underline">
-        <sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">fontAwesome solid</div>
-      </sonic-link>
-      <sonic-link href="https://feathericons.com/" target="_blank" class="text-center underline">
-        <sonic-icon library="feathers" name="activity" size="lg"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">feathers</div>
-      </sonic-link>
-      <sonic-link href="https://lucide.dev/" target="_blank" class="text-center underline">
-        <sonic-icon library="lucide" name="album" size="lg"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">lucide</div>
-      </sonic-link>
-    </div>
-  </template>
-</sonic-code>
-
-## Custom library
-
-Use **`library="custom"`** with SVG files on your origin. On an ancestor (for example **`sonic-scope`** or **`sonic-code`**), set **`customIconLibraryPath`** to a URL template with **`$prefix`** and **`$name`** placeholders, and optionally **`customIconDefaultPrefix`** when **`prefix`** is omitted.
-
-<sonic-code
-  customIconLibraryPath="/svg/$prefix/$name.svg"
-  customIconDefaultPrefix="regular"
->
-  <template>
-    <sonic-scope
-      customIconLibraryPath="/svg/$prefix/$name.svg"
-      customIconDefaultPrefix="regular"
-    >
-      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
-        <div class="text-center">
-          <sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
-          <br />
-          <div class="text-xs mt-1">regular</div>
-        </div>
-        <div class="text-center">
-          <sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
-          <br />
-          <div class="text-xs mt-1">solid</div>
-        </div>
-        <div class="text-center">
-          <sonic-icon library="custom" name="plane"></sonic-icon>
-          <br />
-          <div class="text-xs mt-1">default prefix</div>
-        </div>
-      </div>
-    </sonic-scope>
-  </template>
-</sonic-code>
-
-## Size
-
-Omit **`size`** for the default scale (`1em` height, inherited from the font size). Steps go from `2xs` to `3xl`.
-
-<sonic-code>
-  <template>
-    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
-      <div class="text-center">
-        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">2xs</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xs"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">xs</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="sm"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">sm</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon library="heroicons" prefix="outline" name="academic-cap"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">default</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">lg</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xl"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">xl</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xl"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">2xl</div>
-      </div>
-      <div class="text-center">
-        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="3xl"></sonic-icon>
-        <br />
-        <div class="text-xs mt-1">3xl</div>
-      </div>
-    </div>
-  </template>
-</sonic-code>
-
-## Accessibility
-
-On connect, the host sets **`aria-hidden="true"`**. Treat icons as decorative unless the surrounding control already has an accessible name. Do not rely on **`sonic-icon`** alone for meaning—use visible text or **`aria-label`** on the parent button / link.
-
-<sonic-code>
-  <template>
-    <sonic-button type="neutral" variant="outline" shape="circle" aria-label="Flight details">
-      <sonic-icon library="iconoir" name="airplane"></sonic-icon>
-    </sonic-button>
-  </template>
-</sonic-code>
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `name` | string | Icon id in the core bundle or in the remote library |
-| `library` | `heroicons` · `iconoir` · `feathers` · `lucide` · `material` · `fontAwesome` · `custom` | CDN or custom template; omit for bundled core icons |
-| `prefix` | string | Library-specific variant; defaults per library when empty |
-| `size` | `2xs` · `xs` · `sm` · `lg` · `xl` · `2xl` · `3xl` (default `1em`, no attribute) | `em`-based SVG scale on the host |
-
-Ancestor attributes (for **`library="custom"`** only): **`customIconLibraryPath`** (URL template with **`$prefix`** and **`$name`**) and **`customIconDefaultPrefix`**. May be set on **`sonic-scope`**, theme roots, or globally in the document.
-
-No slots — the component inlines fetched or bundled SVG markup.

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

@@ -1,194 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-doc-url="https://concorde.supersoniks.org/core/components/ui/image" data-doc-id="core/components/ui/image/image">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Image — Concorde by Supersoniks</title>
-  <meta name="description" content="sonic-image wraps a responsive &lt;img&gt; with aspect ratio, object-fit: cover, optional rounded corners and a load transition. The host shows a placeholder background (--sc-placeholder-bg) until the file ">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/image/image, image, Image, UI component, sonic-image, web component, , object-fit: cover, --sc-placeholder-bg, loading, lazy, loading=&quot;eager&quot;, rounded, --sc-rounded">
-  <meta name="concorde-doc-id" content="core/components/ui/image/image">
-  <link rel="canonical" href="https://concorde.supersoniks.org/core/components/ui/image">
-  <link rel="alternate" type="text/markdown" href="https://concorde.supersoniks.org/core/components/ui/image.md">
-</head>
-<body>
-  <header>
-    <p><a href="/docs/index.html">Concorde documentation</a> · <a href="https://concorde.supersoniks.org/core/components/ui/image">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 — Image</strong>. sonic-image wraps a responsive &lt;img&gt; with aspect ratio, object-fit: cover, optional rounded corners and a load transition. The host shows a placeholder background (--sc-placeholder-bg) until the file  <span>Doc ID: <code>core/components/ui/image/image</code>. Keywords: Concorde, supersoniks, core/components/ui/image/image, image, Image, UI component, sonic-image, web component, , object-fit: cover, --sc-placeholder-bg, loading, lazy, loading=&quot;eager&quot;, rounded, --sc-rounded. URL: <a href="https://concorde.supersoniks.org/core/components/ui/image">https://concorde.supersoniks.org/core/components/ui/image</a>.</span></p>
-      <h1 id="image">Image</h1>
-<p><strong><code>sonic-image</code></strong> wraps a responsive <code>&lt;img&gt;</code> with aspect ratio, <code>object-fit: cover</code>, optional rounded corners and a load transition. The host shows a placeholder background (<code>--sc-placeholder-bg</code>) until the file loads. With no <code>loading</code>, the image is <code>lazy</code>; set <code>loading=&quot;eager&quot;</code> for above-the-fold images.</p>
-<h2 id="rounded">Rounded</h2>
-<p>With no <code>rounded</code>, corners are square. Boolean <code>rounded</code> uses the theme token <code>--sc-rounded</code>; <code>full</code> draws a circle when paired with <code>ratio=&quot;1/1&quot;</code>.</p>
-<pre><code>&lt;div class=&quot;grid gap-6 grid-cols-3 lg:grid-cols-4 items-end text-center text-xs&quot;&gt;
-      &lt;div&gt;
-        &lt;sonic-image ratio=&quot;1/1&quot; src=&quot;img/concorde/plane_04.jpg&quot; alt=&quot;Concorde on the apron&quot;&gt;&lt;/sonic-image&gt;
-        &lt;p class=&quot;mt-2&quot;&gt;default&lt;/p&gt;
-      &lt;/div&gt;
-      &lt;div&gt;
-        &lt;sonic-image rounded=&quot;sm&quot; ratio=&quot;1/1&quot; src=&quot;img/concorde/plane_04.jpg&quot; alt=&quot;Concorde on the apron&quot;&gt;&lt;/sonic-image&gt;
-        &lt;p class=&quot;mt-2&quot;&gt;sm&lt;/p&gt;
-      &lt;/div&gt;
-      &lt;div&gt;
-        &lt;sonic-image rounded ratio=&quot;1/1&quot; src=&quot;img/concorde/plane_04.jpg&quot; alt=&quot;Concorde on the apron&quot;&gt;&lt;/sonic-image&gt;
-        &lt;p class=&quot;mt-2&quot;&gt;rounded&lt;/p&gt;
-      &lt;/div&gt;
-      &lt;div&gt;
-        &lt;sonic-image rounded=&quot;md&quot; ratio=&quot;1/1&quot; src=&quot;img/concorde/plane_04.jpg&quot; alt=&quot;Concorde on the apron&quot;&gt;&lt;/sonic-image&gt;
-        &lt;p class=&quot;mt-2&quot;&gt;md&lt;/p&gt;
-      &lt;/div&gt;
-      &lt;div&gt;
-        &lt;sonic-image rounded=&quot;lg&quot; ratio=&quot;1/1&quot; src=&quot;img/concorde/plane_04.jpg&quot; alt=&quot;Concorde on the apron&quot;&gt;&lt;/sonic-image&gt;
-        &lt;p class=&quot;mt-2&quot;&gt;lg&lt;/p&gt;
-      &lt;/div&gt;
-      &lt;div&gt;
-        &lt;sonic-image rounded=&quot;xl&quot; ratio=&quot;1/1&quot; src=&quot;img/concorde/plane_04.jpg&quot; alt=&quot;Concorde on the apron&quot;&gt;&lt;/sonic-image&gt;
-        &lt;p class=&quot;mt-2&quot;&gt;xl&lt;/p&gt;
-      &lt;/div&gt;
-      &lt;div&gt;
-        &lt;sonic-image rounded=&quot;full&quot; ratio=&quot;1/1&quot; src=&quot;img/concorde/plane_04.jpg&quot; alt=&quot;Concorde on the apron&quot;&gt;&lt;/sonic-image&gt;
-        &lt;p class=&quot;mt-2&quot;&gt;full&lt;/p&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-</code></pre>
-<h2 id="aspect-ratio">Aspect ratio</h2>
-<p><code>ratio</code> sets CSS <code>aspect-ratio</code> on the image (default <code>auto</code>). The image always fills the host width.</p>
-<pre><code>&lt;div class=&quot;grid gap-8 grid-cols-2 items-center&quot;&gt;
-      &lt;sonic-image src=&quot;img/concorde/plane_12.jpg&quot; alt=&quot;Concorde at the gate&quot;&gt;&lt;/sonic-image&gt;
-      &lt;sonic-image ratio=&quot;16/9&quot; src=&quot;img/concorde/plane_12.jpg&quot; alt=&quot;Concorde at the gate&quot;&gt;&lt;/sonic-image&gt;
-      &lt;sonic-image ratio=&quot;1/1&quot; src=&quot;img/concorde/plane_12.jpg&quot; alt=&quot;Concorde at the gate&quot;&gt;&lt;/sonic-image&gt;
-      &lt;sonic-image ratio=&quot;2/3&quot; src=&quot;img/concorde/plane_12.jpg&quot; alt=&quot;Concorde at the gate&quot;&gt;&lt;/sonic-image&gt;
-    &lt;/div&gt;
-</code></pre>
-<h2 id="object-position">Object position</h2>
-<p><code>objectPosition</code> maps to CSS <code>object-position</code> (default <code>center center</code>). Use it on wide crops when the subject sits off-center.</p>
-<pre><code>&lt;div class=&quot;grid gap-8 grid-cols-2 items-center&quot;&gt;
-      &lt;sonic-image ratio=&quot;11/4&quot; src=&quot;img/concorde/plane_11.jpg&quot; alt=&quot;Concorde flying over a field&quot;&gt;&lt;/sonic-image&gt;
-      &lt;sonic-image objectPosition=&quot;center top&quot; ratio=&quot;11/4&quot; src=&quot;img/concorde/plane_11.jpg&quot; alt=&quot;Concorde flying over a field&quot;&gt;&lt;/sonic-image&gt;
-    &lt;/div&gt;
-</code></pre>
-<h2 id="cover">Cover</h2>
-<p><code>cover</code> stretches the image over a <strong>positioned</strong> parent (<code>position: relative</code> with a height). <code>ratio</code> is ignored while <code>cover</code> is set.</p>
-<pre><code>&lt;div class=&quot;h-96 relative rounded-lg overflow-hidden&quot;&gt;
-      &lt;sonic-image cover src=&quot;img/concorde/plane_10.jpg&quot; alt=&quot;Concorde fleet parked in a star&quot;&gt;&lt;/sonic-image&gt;
-    &lt;/div&gt;
-</code></pre>
-<h2 id="load-transition">Load transition</h2>
-<p>Set <code>transition</code> to <code>fade</code> or <code>fade-scale-out</code>. The image stays transparent until the browser fires <code>load</code>, then animates in. <strong>Changing <code>src</code> on an existing element does not replay the effect</strong>: mount a new <code>sonic-image</code> instead (galleries, infinite scroll).</p>
-<pre><code>&lt;div class=&quot;flex flex-wrap gap-2 mb-4&quot;&gt;
-      &lt;sonic-button
-        size=&quot;sm&quot;
-        onclick=&quot;(function () {
-          var host = document.getElementById(&#39;sonic-image-transition-host&#39;);
-          var img = document.createElement(&#39;sonic-image&#39;);
-          img.transition = &#39;fade&#39;;
-          img.ratio = &#39;1/1&#39;;
-          img.rounded = &#39;md&#39;;
-          img.loading = &#39;eager&#39;;
-          img.style.width = &#39;8rem&#39;;
-          var pics = [&#39;01&#39;, &#39;03&#39;, &#39;04&#39;, &#39;05&#39;, &#39;06&#39;, &#39;07&#39;, &#39;08&#39;, &#39;09&#39;, &#39;10&#39;, &#39;11&#39;, &#39;12&#39;, &#39;13&#39;];
-          img.src = &#39;img/concorde/plane_&#39; + pics[host.childElementCount % pics.length] + &#39;.jpg&#39;;
-          host.appendChild(img);
-        })()&quot;
-      &gt;
-        Add image (fade)
-      &lt;/sonic-button&gt;
-      &lt;sonic-button
-        size=&quot;sm&quot;
-        variant=&quot;outline&quot;
-        onclick=&quot;(function () {
-          var host = document.getElementById(&#39;sonic-image-transition-host&#39;);
-          var img = document.createElement(&#39;sonic-image&#39;);
-          img.transition = &#39;fade-scale-out&#39;;
-          img.ratio = &#39;1/1&#39;;
-          img.rounded = &#39;md&#39;;
-          img.loading = &#39;eager&#39;;
-          img.style.width = &#39;8rem&#39;;
-          var pics = [&#39;01&#39;, &#39;03&#39;, &#39;04&#39;, &#39;05&#39;, &#39;06&#39;, &#39;07&#39;, &#39;08&#39;, &#39;09&#39;, &#39;10&#39;, &#39;11&#39;, &#39;12&#39;, &#39;13&#39;];
-          img.src = &#39;img/concorde/plane_&#39; + pics[host.childElementCount % pics.length] + &#39;.jpg&#39;;
-          host.appendChild(img);
-        })()&quot;
-      &gt;
-        Add image (fade-scale-out)
-      &lt;/sonic-button&gt;
-      &lt;sonic-button
-        size=&quot;sm&quot;
-        variant=&quot;ghost&quot;
-        onclick=&quot;document.getElementById(&#39;sonic-image-transition-host&#39;).replaceChildren()&quot;
-      &gt;
-        Clear
-      &lt;/sonic-button&gt;
-    &lt;/div&gt;
-    &lt;div id=&quot;sonic-image-transition-host&quot; class=&quot;flex flex-wrap gap-2 min-h-[5rem]&quot;&gt;&lt;/div&gt;
-</code></pre>
-<h2 id="accessibility">Accessibility</h2>
-<p>Always set a meaningful <code>alt</code>. Use <code>alt=&quot;&quot;</code> only for decorative images.</p>
-<pre><code>&lt;sonic-image
-      rounded=&quot;md&quot;
-      ratio=&quot;16/9&quot;
-      alt=&quot;Crowd gathered around Concorde at night&quot;
-      src=&quot;img/concorde/plane_07.jpg&quot;
-    &gt;&lt;/sonic-image&gt;
-</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>src</code></td>
-<td>URL</td>
-<td>Image URL passed to <code>&lt;img src&gt;</code></td>
-</tr>
-<tr>
-<td><code>alt</code></td>
-<td>string</td>
-<td>Accessible description; <code>&quot;&quot;</code> only for decorative images</td>
-</tr>
-<tr>
-<td><code>loading</code></td>
-<td><code>lazy</code> (default) · <code>eager</code></td>
-<td>Native lazy loading</td>
-</tr>
-<tr>
-<td><code>ratio</code></td>
-<td>CSS ratio (default <code>auto</code>)</td>
-<td><code>aspect-ratio</code> of the image; ignored when <code>cover</code> is set</td>
-</tr>
-<tr>
-<td><code>rounded</code></td>
-<td><code>none</code> (default) · boolean · <code>base</code> · <code>sm</code> · <code>md</code> · <code>lg</code> · <code>xl</code> · <code>full</code></td>
-<td>Corner radius from theme tokens</td>
-</tr>
-<tr>
-<td><code>objectPosition</code></td>
-<td>CSS position (default <code>center center</code>)</td>
-<td>Maps to <code>object-position</code></td>
-</tr>
-<tr>
-<td><code>imageRendering</code></td>
-<td>CSS value (default <code>auto</code>)</td>
-<td>Maps to <code>image-rendering</code></td>
-</tr>
-<tr>
-<td><code>cover</code></td>
-<td>boolean</td>
-<td>Absolutely fills a positioned parent</td>
-</tr>
-<tr>
-<td><code>transition</code></td>
-<td><code>fade</code> · <code>fade-scale-out</code></td>
-<td>Entrance animation after <code>load</code>; not replayed on <code>src</code> change</td>
-</tr>
-</tbody></table>
-<p>No slots.</p>
-
-    </article>
-  </main>
-</body>
-</html>

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

@@ -1,167 +0,0 @@
-# Image
-
-**`sonic-image`** wraps a responsive `<img>` with aspect ratio, `object-fit: cover`, optional rounded corners and a load transition. The host shows a placeholder background (`--sc-placeholder-bg`) until the file loads. With no `loading`, the image is `lazy`; set `loading="eager"` for above-the-fold images.
-
-## Rounded
-
-With no `rounded`, corners are square. Boolean `rounded` uses the theme token `--sc-rounded`; `full` draws a circle when paired with `ratio="1/1"`.
-
-<sonic-code>
-  <template>
-    <div class="grid gap-6 grid-cols-3 lg:grid-cols-4 items-end text-center text-xs">
-      <div>
-        <sonic-image ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
-        <p class="mt-2">default</p>
-      </div>
-      <div>
-        <sonic-image rounded="sm" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
-        <p class="mt-2">sm</p>
-      </div>
-      <div>
-        <sonic-image rounded ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
-        <p class="mt-2">rounded</p>
-      </div>
-      <div>
-        <sonic-image rounded="md" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
-        <p class="mt-2">md</p>
-      </div>
-      <div>
-        <sonic-image rounded="lg" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
-        <p class="mt-2">lg</p>
-      </div>
-      <div>
-        <sonic-image rounded="xl" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
-        <p class="mt-2">xl</p>
-      </div>
-      <div>
-        <sonic-image rounded="full" ratio="1/1" src="img/concorde/plane_04.jpg" alt="Concorde on the apron"></sonic-image>
-        <p class="mt-2">full</p>
-      </div>
-    </div>
-  </template>
-</sonic-code>
-
-## Aspect ratio
-
-`ratio` sets CSS `aspect-ratio` on the image (default `auto`). The image always fills the host width.
-
-<sonic-code>
-  <template>
-    <div class="grid gap-8 grid-cols-2 items-center">
-      <sonic-image src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
-      <sonic-image ratio="16/9" src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
-      <sonic-image ratio="1/1" src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
-      <sonic-image ratio="2/3" src="img/concorde/plane_12.jpg" alt="Concorde at the gate"></sonic-image>
-    </div>
-  </template>
-</sonic-code>
-
-## Object position
-
-`objectPosition` maps to CSS `object-position` (default `center center`). Use it on wide crops when the subject sits off-center.
-
-<sonic-code>
-  <template>
-    <div class="grid gap-8 grid-cols-2 items-center">
-      <sonic-image ratio="11/4" src="img/concorde/plane_11.jpg" alt="Concorde flying over a field"></sonic-image>
-      <sonic-image objectPosition="center top" ratio="11/4" src="img/concorde/plane_11.jpg" alt="Concorde flying over a field"></sonic-image>
-    </div>
-  </template>
-</sonic-code>
-
-## Cover
-
-`cover` stretches the image over a **positioned** parent (`position: relative` with a height). `ratio` is ignored while `cover` is set.
-
-<sonic-code>
-  <template>
-    <div class="h-96 relative rounded-lg overflow-hidden">
-      <sonic-image cover src="img/concorde/plane_10.jpg" alt="Concorde fleet parked in a star"></sonic-image>
-    </div>
-  </template>
-</sonic-code>
-
-## Load transition
-
-Set `transition` to `fade` or `fade-scale-out`. The image stays transparent until the browser fires `load`, then animates in. **Changing `src` on an existing element does not replay the effect**: mount a new `sonic-image` instead (galleries, infinite scroll).
-
-<sonic-code>
-  <template>
-    <div class="flex flex-wrap gap-2 mb-4">
-      <sonic-button
-        size="sm"
-        onclick="(function () {
-          var host = document.getElementById('sonic-image-transition-host');
-          var img = document.createElement('sonic-image');
-          img.transition = 'fade';
-          img.ratio = '1/1';
-          img.rounded = 'md';
-          img.loading = 'eager';
-          img.style.width = '8rem';
-          var pics = ['01', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13'];
-          img.src = 'img/concorde/plane_' + pics[host.childElementCount % pics.length] + '.jpg';
-          host.appendChild(img);
-        })()"
-      >
-        Add image (fade)
-      </sonic-button>
-      <sonic-button
-        size="sm"
-        variant="outline"
-        onclick="(function () {
-          var host = document.getElementById('sonic-image-transition-host');
-          var img = document.createElement('sonic-image');
-          img.transition = 'fade-scale-out';
-          img.ratio = '1/1';
-          img.rounded = 'md';
-          img.loading = 'eager';
-          img.style.width = '8rem';
-          var pics = ['01', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13'];
-          img.src = 'img/concorde/plane_' + pics[host.childElementCount % pics.length] + '.jpg';
-          host.appendChild(img);
-        })()"
-      >
-        Add image (fade-scale-out)
-      </sonic-button>
-      <sonic-button
-        size="sm"
-        variant="ghost"
-        onclick="document.getElementById('sonic-image-transition-host').replaceChildren()"
-      >
-        Clear
-      </sonic-button>
-    </div>
-    <div id="sonic-image-transition-host" class="flex flex-wrap gap-2 min-h-[5rem]"></div>
-  </template>
-</sonic-code>
-
-## Accessibility
-
-Always set a meaningful `alt`. Use `alt=""` only for decorative images.
-
-<sonic-code>
-  <template>
-    <sonic-image
-      rounded="md"
-      ratio="16/9"
-      alt="Crowd gathered around Concorde at night"
-      src="img/concorde/plane_07.jpg"
-    ></sonic-image>
-  </template>
-</sonic-code>
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `src` | URL | Image URL passed to `<img src>` |
-| `alt` | string | Accessible description; `""` only for decorative images |
-| `loading` | `lazy` (default) · `eager` | Native lazy loading |
-| `ratio` | CSS ratio (default `auto`) | `aspect-ratio` of the image; ignored when `cover` is set |
-| `rounded` | `none` (default) · boolean · `base` · `sm` · `md` · `lg` · `xl` · `full` | Corner radius from theme tokens |
-| `objectPosition` | CSS position (default `center center`) | Maps to `object-position` |
-| `imageRendering` | CSS value (default `auto`) | Maps to `image-rendering` |
-| `cover` | boolean | Absolutely fills a positioned parent |
-| `transition` | `fade` · `fade-scale-out` | Entrance animation after `load`; not replayed on `src` change |
-
-No slots.

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

@@ -1,81 +0,0 @@
-# Link
-
-Links **navigate** with inherited typography: internal routes, anchors, or external URLs. The default slot is the anchor label. For in-app routing, pair **`href`** with **`pushstate`**; use **`autoActive`** to reflect the current URL on the host (`active`).
-
-## Basic example
-
-<sonic-code>
-  <template>
-    <sonic-link href="/">Basic link with href attribute</sonic-link>
-  </template>
-</sonic-code>
-
-## Target
-
-**`target="_blank"`** opens a new browsing context and sets **`rel="noopener noreferrer"`**.
-
-<sonic-code>
-  <template>
-    <sonic-link href="/" target="_blank">Link with target attribute</sonic-link>
-  </template>
-</sonic-code>
-
-## Pushstate
-
-Set **`pushstate`** on same-origin **`href`** values to intercept clicks and navigate through Concorde’s client router without a full reload.
-
-<sonic-code>
-  <template>
-    <sonic-link href="/core/components/ui/link" pushstate>Client navigation (pushstate)</sonic-link>
-  </template>
-</sonic-code>
-
-## AutoActive
-
-Default **`autoActive`** is **`partial`**: the host gets **`active`** when the current URL starts with **`href`**. Style with **`[&[active]]:`** utilities or host selectors.
-
-<sonic-code>
-  <template>
-    <sonic-link href="/core/components" class="[&[active]]:text-success">autoActive partial (default)</sonic-link>
-  </template>
-</sonic-code>
-
-### AutoActive strict vs partial
-
-**`strict`** requires pathname, search, and hash to match. **`strict-path-only`** matches pathname and hash but ignores search.
-
-<sonic-code>
-  <template>
-    <div class="grid gap-3">
-      <sonic-link href="/core/components/ui/link" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
-      <sonic-link href="/core/components/ui/button" autoActive="strict" class="[&[active]]:text-success">autoActive strict (other page)</sonic-link>
-      <sonic-link href="/core/components" autoActive="strict-path-only" class="[&[active]]:text-success">autoActive strict-path-only</sonic-link>
-    </div>
-  </template>
-</sonic-code>
-
-### AutoActive disabled
-
-<sonic-code>
-  <template>
-    <sonic-link href="/core/components/ui/link" autoActive="disabled" class="[&[active]]:text-success">autoActive disabled</sonic-link>
-  </template>
-</sonic-code>
-
-## Accessibility
-
-The inner **`<a>`** uses **`focus-visible`** outline styling. Set **`data-aria-label`** when the slot text is not sufficient on its own.
-
-## API reference
-
-| Attribute | Values | Description |
-|----------|---------|-------------|
-| `href` | URL | Link target; without **`href`**, only the slot is rendered (no **`<a>`**) |
-| `target` | e.g. `_blank` | Navigation target; **`_blank`** adds **`rel="noopener noreferrer"`** |
-| `pushstate` | boolean | Intercepts click for Concorde client navigation without reload |
-| `autoActive` | `partial` (default) · `strict` · `strict-path-only` · `disabled` | When the host gets the **`active`** attribute (same-origin **`href`** only) |
-| `data-aria-label` | string | Accessible **`aria-label`** when the slot text is not enough |
-
-| Slot | Description |
-|------|-------------|
-| *(default)* | Link content (text, icons) |