@supersoniks/concorde 5.0.4 → 5.0.5

package/docs/crawl/core/components/ui/icon/icon.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Icon — Concorde</title>
-  <meta name="description" content="customIconDefaultPrefix=&quot;regular&quot;&gt;">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component">
+  <meta name="description" content="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 def">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component, name, library, prefix, size, currentColor, aria-hidden, icons.json">
   <meta name="concorde-doc-id" content="core/components/ui/icon/icon">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html">
 </head>
@@ -15,117 +15,206 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Icon</strong>. customIconDefaultPrefix=&quot;regular&quot;&gt; <span>Doc ID: <code>core/components/ui/icon/icon</code>. Keywords: Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html">https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Icon</strong>. 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 def <span>Doc ID: <code>core/components/ui/icon/icon</code>. Keywords: Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component, name, library, prefix, size, currentColor, aria-hidden, icons.json. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html">https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html</a>.</span></p>
       <h1 id="icon">Icon</h1>
-<h2 id="custom">Custom</h2>
-<p >Icons located in the following folder : <span class="text-info">/svg/$prefix/$name.svg<span></p>
-
-
-
-<pre><code>&lt;sonic-scope  customIconLibraryPath=&quot;/svg/$prefix/$name.svg&quot;
-      customIconDefaultPrefix=&quot;regular&quot;&gt;
-      &lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8&quot;&gt;
-        &lt;div class=&quot;text-center&quot;&gt;
-          &lt;sonic-icon library=&quot;custom&quot; prefix=&quot;regular&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
-          &lt;br&gt;
-          &lt;div class=&quot;text-xs mt-1&quot;&gt;regular&lt;/div&gt;
-        &lt;/div&gt;
-        &lt;div class=&quot;text-center&quot;&gt;
-          &lt;sonic-icon library=&quot;custom&quot; prefix=&quot;solid&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
-          &lt;br&gt;
-          &lt;div class=&quot;text-xs mt-1&quot;&gt;solid&lt;/div&gt;
-        &lt;/div&gt;
-        &lt;div class=&quot;text-center&quot;&gt;
-          &lt;sonic-icon library=&quot;custom&quot;  name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
-          &lt;br&gt;
-          &lt;div class=&quot;text-xs mt-1&quot;&gt;default prefix&lt;/div&gt;
-        &lt;/div&gt;
+<p><strong><code>sonic-icon</code></strong> renders inline SVG icons from the <strong>bundled core set</strong> or from <strong>CDN libraries</strong>. Set <strong><code>name</code></strong> (and <strong><code>library</code></strong> / <strong><code>prefix</code></strong> when needed); scale with <strong><code>size</code></strong>. Icons inherit <strong><code>currentColor</code></strong> and are <strong><code>aria-hidden</code></strong> by default—keep visible text nearby or label the control that contains them.</p>
+<h2 id="core-library">Core library</h2>
+<p>Omit <strong><code>library</code></strong> to use the bundled set in <code>icons.json</code>. Available <strong><code>name</code></strong> values: <code>cancel</code> · <code>check</code> · <code>check-circled-outline</code> · <code>emoji-puzzled</code> · <code>info-empty</code> · <code>loader</code> · <code>minus-small</code> · <code>more-horiz</code> · <code>more-vert</code> · <code>nav-arrow-down</code> · <code>warning-circled-outline</code>.</p>
+<pre><code>&lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8&quot;&gt;
+      &lt;div class=&quot;text-center&quot;&gt;
+        &lt;sonic-icon name=&quot;cancel&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;div class=&quot;text-xs mt-1&quot;&gt;cancel&lt;/div&gt;
       &lt;/div&gt;
-    &lt;/sonic-scope&gt;
+      &lt;div class=&quot;text-center&quot;&gt;
+        &lt;sonic-icon name=&quot;check&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;div class=&quot;text-xs mt-1&quot;&gt;check&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;text-center&quot;&gt;
+        &lt;sonic-icon name=&quot;check-circled-outline&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;div class=&quot;text-xs mt-1&quot;&gt;check-circled-outline&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;text-center&quot;&gt;
+        &lt;sonic-icon name=&quot;emoji-puzzled&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;div class=&quot;text-xs mt-1&quot;&gt;emoji-puzzled&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;text-center&quot;&gt;
+        &lt;sonic-icon name=&quot;info-empty&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;div class=&quot;text-xs mt-1&quot;&gt;info-empty&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;text-center&quot;&gt;
+        &lt;sonic-icon name=&quot;loader&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;div class=&quot;text-xs mt-1&quot;&gt;loader&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;text-center&quot;&gt;
+        &lt;sonic-icon name=&quot;minus-small&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;div class=&quot;text-xs mt-1&quot;&gt;minus-small&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;text-center&quot;&gt;
+        &lt;sonic-icon name=&quot;more-horiz&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;div class=&quot;text-xs mt-1&quot;&gt;more-horiz&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;text-center&quot;&gt;
+        &lt;sonic-icon name=&quot;more-vert&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;div class=&quot;text-xs mt-1&quot;&gt;more-vert&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;text-center&quot;&gt;
+        &lt;sonic-icon name=&quot;nav-arrow-down&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;div class=&quot;text-xs mt-1&quot;&gt;nav-arrow-down&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;text-center&quot;&gt;
+        &lt;sonic-icon name=&quot;warning-circled-outline&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;div class=&quot;text-xs mt-1&quot;&gt;warning-circled-outline&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
 </code></pre>
-<h2 id="external">External</h2>
+<h2 id="external-libraries">External libraries</h2>
+<p>Set <strong><code>library</code></strong> to load SVGs from a built-in CDN template. <strong><code>prefix</code></strong> falls back to each library’s default when omitted (<code>outline</code> for <strong><code>heroicons</code></strong>, <strong><code>regular</code></strong> for <strong><code>fontAwesome</code></strong> and <strong><code>material</code></strong>, and so on).</p>
 <pre><code>&lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8&quot;&gt;
       &lt;sonic-link href=&quot;https://heroicons.com/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;heroicons&lt;/div&gt;
       &lt;/sonic-link&gt;
       &lt;sonic-link href=&quot;https://iconoir.com/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
-        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;2x2-cell&quot;  size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;2x2-cell&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;iconoir&lt;/div&gt;
       &lt;/sonic-link&gt;
       &lt;sonic-link href=&quot;https://materialdesignicons.com/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
         &lt;sonic-icon library=&quot;material&quot; prefix=&quot;outline&quot; name=&quot;email&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;material design&lt;/div&gt;
       &lt;/sonic-link&gt;
       &lt;sonic-link href=&quot;https://fontawesome.com/search?o=r&amp;m=free&amp;s=regular&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
         &lt;sonic-icon library=&quot;fontAwesome&quot; prefix=&quot;regular&quot; name=&quot;user&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;fontAwesome regular&lt;/div&gt;
       &lt;/sonic-link&gt;
       &lt;sonic-link href=&quot;https://fontawesome.com/search?o=r&amp;m=free&amp;s=solid&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
         &lt;sonic-icon library=&quot;fontAwesome&quot; prefix=&quot;solid&quot; name=&quot;book&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;fontAwesome solid&lt;/div&gt;
       &lt;/sonic-link&gt;
       &lt;sonic-link href=&quot;https://feathericons.com/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
-        &lt;sonic-icon library=&quot;feathers&quot; name=&quot;activity&quot;  size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;sonic-icon library=&quot;feathers&quot; name=&quot;activity&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;feathers&lt;/div&gt;
       &lt;/sonic-link&gt;
       &lt;sonic-link href=&quot;https://lucide.dev/&quot; target=&quot;_blank&quot; class=&quot;text-center underline&quot;&gt;
-        &lt;sonic-icon library=&quot;lucide&quot; name=&quot;album&quot;  size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;sonic-icon library=&quot;lucide&quot; name=&quot;album&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;lucide&lt;/div&gt;
       &lt;/sonic-link&gt;
     &lt;/div&gt;
 </code></pre>
+<h2 id="custom-library">Custom library</h2>
+<p>Use <strong><code>library=&quot;custom&quot;</code></strong> with SVG files on your origin. On an ancestor (for example <strong><code>sonic-scope</code></strong> or <strong><code>sonic-code</code></strong>), set <strong><code>customIconLibraryPath</code></strong> to a URL template with <strong><code>$prefix</code></strong> and <strong><code>$name</code></strong> placeholders, and optionally <strong><code>customIconDefaultPrefix</code></strong> when <strong><code>prefix</code></strong> is omitted.</p>
+<pre><code>&lt;sonic-scope
+      customIconLibraryPath=&quot;/svg/$prefix/$name.svg&quot;
+      customIconDefaultPrefix=&quot;regular&quot;
+    &gt;
+      &lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8&quot;&gt;
+        &lt;div class=&quot;text-center&quot;&gt;
+          &lt;sonic-icon library=&quot;custom&quot; prefix=&quot;regular&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
+          &lt;br /&gt;
+          &lt;div class=&quot;text-xs mt-1&quot;&gt;regular&lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;text-center&quot;&gt;
+          &lt;sonic-icon library=&quot;custom&quot; prefix=&quot;solid&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
+          &lt;br /&gt;
+          &lt;div class=&quot;text-xs mt-1&quot;&gt;solid&lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class=&quot;text-center&quot;&gt;
+          &lt;sonic-icon library=&quot;custom&quot; name=&quot;plane&quot;&gt;&lt;/sonic-icon&gt;
+          &lt;br /&gt;
+          &lt;div class=&quot;text-xs mt-1&quot;&gt;default prefix&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/sonic-scope&gt;
+</code></pre>
 <h2 id="size">Size</h2>
-<pre><code>&lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8&quot;&gt;
+<p>Omit <strong><code>size</code></strong> for the default scale (<code>1em</code> height). Larger steps use <strong><code>3xl</code></strong>.</p>
+<pre><code>&lt;div class=&quot;grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8&quot;&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;2xs&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;2xs&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;xs&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;xs&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;sm&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;sm&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;default&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;lg&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;lg&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;xl&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;xl&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;2xl&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;2xl&lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;text-center&quot;&gt;
         &lt;sonic-icon library=&quot;heroicons&quot; prefix=&quot;outline&quot; name=&quot;academic-cap&quot; size=&quot;3xl&quot;&gt;&lt;/sonic-icon&gt;
-        &lt;br&gt;
+        &lt;br /&gt;
         &lt;div class=&quot;text-xs mt-1&quot;&gt;3xl&lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
 </code></pre>
+<h2 id="accessibility">Accessibility</h2>
+<p>On connect, the host sets <strong><code>aria-hidden=&quot;true&quot;</code></strong>. Treat icons as decorative unless the surrounding control already has an accessible name. Do not rely on <strong><code>sonic-icon</code></strong> alone for meaning—use visible text or <strong><code>aria-label</code></strong> on the parent button / link.</p>
+<pre><code>&lt;sonic-button type=&quot;neutral&quot; variant=&quot;outline&quot; shape=&quot;circle&quot; aria-label=&quot;User profile&quot;&gt;
+      &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
+    &lt;/sonic-button&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>name</code></td>
+<td>string</td>
+<td>Icon id in the core bundle or in the remote library</td>
+</tr>
+<tr>
+<td><code>library</code></td>
+<td><code>heroicons</code> · <code>iconoir</code> · <code>feathers</code> · <code>lucide</code> · <code>material</code> · <code>fontAwesome</code> · <code>custom</code></td>
+<td>CDN or custom template; omit for bundled core icons</td>
+</tr>
+<tr>
+<td><code>prefix</code></td>
+<td>string</td>
+<td>Library-specific variant; defaults per library when empty</td>
+</tr>
+<tr>
+<td><code>size</code></td>
+<td><code>2xs</code> · <code>xs</code> · <code>sm</code> · <code>lg</code> · <code>xl</code> · <code>2xl</code> · <code>3xl</code> (default <code>md</code>)</td>
+<td><code>em</code>-based SVG scale on the host</td>
+</tr>
+</tbody></table>
+<p>Ancestor attributes (for <strong><code>library=&quot;custom&quot;</code></strong> only): <strong><code>customIconLibraryPath</code></strong> (URL template with <strong><code>$prefix</code></strong> and <strong><code>$name</code></strong>) and <strong><code>customIconDefaultPrefix</code></strong>. May be set on <strong><code>sonic-scope</code></strong>, theme roots, or globally in the document.</p>
+<p>No slots — the component inlines fetched or bundled SVG markup.</p>
 
     </article>
   </main>

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

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Image — Concorde</title>
-  <meta name="description" content="src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/image/image, image, Image, UI component, sonic-image, web component">
+  <meta name="description" content="sonic-image wraps a responsive &lt;img&gt; with aspect ratio, object-fit: cover, optional rounded corners, and load transitions. The host shows a placeholder background (--sc-placeholder-bg) until the asset">
+  <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/crawl/core/components/ui/image/image.html">
 </head>
@@ -15,94 +15,282 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Image</strong>. src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot; <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. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/image/image.html">https://concorde.supersoniks.org/crawl/core/components/ui/image/image.html</a>.</span></p>
+      <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 load transitions. The host shows a placeholder background (--sc-placeholder-bg) until the asset <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/crawl/core/components/ui/image/image.html">https://concorde.supersoniks.org/crawl/core/components/ui/image/image.html</a>.</span></p>
       <h1 id="image">Image</h1>
+<p><strong><code>sonic-image</code></strong> wraps a responsive <strong><code>&lt;img&gt;</code></strong> with aspect ratio, <code>object-fit: cover</code>, optional rounded corners, and load transitions. The host shows a placeholder background (<code>--sc-placeholder-bg</code>) until the asset loads. Default <strong><code>loading</code></strong> is <code>lazy</code>; use <strong><code>loading=&quot;eager&quot;</code></strong> for above-the-fold heroes.</p>
 <h2 id="rounded">Rounded</h2>
-<pre><code>&lt;div class=&quot;grid gap-8 grid-cols-3 items-center&quot;&gt;
-      &lt;sonic-image
-        src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
-        ratio=&quot;1/1&quot;
-      &gt;
-      &lt;/sonic-image&gt;
-      &lt;sonic-image
-        rounded=&quot;sm&quot;
-        ratio=&quot;1/1&quot;
-        src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
-      &gt;
-      &lt;/sonic-image&gt;
-      &lt;sonic-image
-        rounded
-        ratio=&quot;1/1&quot;
-        src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
-      &gt;
-      &lt;/sonic-image&gt;
-      &lt;sonic-image
-        rounded=&quot;md&quot;
-        ratio=&quot;1/1&quot;
-        src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
-      &gt;
-      &lt;/sonic-image&gt;
-      &lt;sonic-image
-        rounded=&quot;lg&quot;
-        ratio=&quot;1/1&quot;
-        src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
-      &gt;
-      &lt;/sonic-image&gt;
-      &lt;sonic-image
-        rounded=&quot;full&quot;
-        ratio=&quot;1/1&quot;
-        src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
-      &gt;
-      &lt;/sonic-image&gt;
+<p>Omit <code>rounded</code> for square corners. Boolean <strong><code>rounded</code></strong> uses the theme token <code>--sc-rounded</code>. Sizes: <strong><code>sm</code></strong>, <strong><code>md</code></strong>, <strong><code>lg</code></strong>, <strong><code>xl</code></strong>, <strong><code>full</code></strong> (circle — pair with <code>ratio=&quot;1/1&quot;</code>), <strong><code>none</code></strong> (explicit reset).</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;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&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;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&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;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&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;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&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;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&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;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&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;div &gt;
+          &lt;sonic-image
+            rounded=&quot;full&quot;
+            ratio=&quot;1/1&quot;
+            src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
+          &gt;&lt;/sonic-image&gt;
+          &lt;p class=&quot;mt-2&quot;&gt;full&lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
     &lt;/div&gt;
 </code></pre>
-<h2 id="ratio">Ratio</h2>
+<h2 id="aspect-ratio">Aspect ratio</h2>
+<p><strong><code>ratio</code></strong> sets CSS <code>aspect-ratio</code> on the image (default <strong><code>auto</code></strong>). The image still fills the host width (<code>width: 100%</code>).</p>
 <pre><code>&lt;div class=&quot;grid gap-8 grid-cols-2 items-center&quot;&gt;
       &lt;sonic-image
         src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
-      &gt;
-      &lt;/sonic-image&gt;
+      &gt;&lt;/sonic-image&gt;
       &lt;sonic-image
         ratio=&quot;16/9&quot;
         src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
-      &gt;
-      &lt;/sonic-image&gt;
+      &gt;&lt;/sonic-image&gt;
       &lt;sonic-image
         ratio=&quot;1/1&quot;
         src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
-      &gt;
-      &lt;/sonic-image&gt;
+      &gt;&lt;/sonic-image&gt;
       &lt;sonic-image
         ratio=&quot;2/3&quot;
         src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
-      &gt;
-      &lt;/sonic-image&gt;
+      &gt;&lt;/sonic-image&gt;
     &lt;/div&gt;
 </code></pre>
 <h2 id="object-position">Object position</h2>
+<p><strong><code>objectPosition</code></strong> maps to CSS <code>object-position</code> (default <strong><code>center center</code></strong>). Useful 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
-        src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
         ratio=&quot;11/4&quot;
-      &gt;
-      &lt;/sonic-image&gt;
+        src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
+      &gt;&lt;/sonic-image&gt;
       &lt;sonic-image
         objectPosition=&quot;center top&quot;
-        src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
         ratio=&quot;11/4&quot;
-      &gt;
-      &lt;/sonic-image&gt;
+        src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
+      &gt;&lt;/sonic-image&gt;
     &lt;/div&gt;
 </code></pre>
 <h2 id="cover">Cover</h2>
-<pre><code>&lt;div class=&quot;h-96 relative&quot;&gt;
+<p><strong><code>cover</code></strong> stretches the image to fill a <strong>positioned</strong> parent (<code>position: relative</code> + fixed height or inset). Aspect ratio on the host 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;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg&quot;
+      &gt;&lt;/sonic-image&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="load-transition">Load transition</h2>
+<p>Set <strong><code>transition</code></strong> to <strong><code>fade</code></strong> (default when the attribute is present) or <strong><code>fade-scale-out</code></strong>. The image stays at <code>opacity: 0</code> until the browser fires <strong><code>load</code></strong>, then the <strong><code>loaded</code></strong> class runs the animation. Changing <code>src</code> on an existing element does not replay the effect — mount a new <code>sonic-image</code> when you need another entrance (galleries, infinite scroll).</p>
+<p>Click <strong>Add image</strong> to append small thumbnails and replay the transition. <strong>Clear</strong> resets the row.</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;;
+          img.src = &#39;https://picsum.photos/seed/&#39; + Date.now() + &#39;/120/120&#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;;
+          img.src = &#39;https://picsum.photos/seed/&#39; + Date.now() + &#39;/120/120&#39;;
+          host.appendChild(img);
+        })()&quot;
       &gt;
-      &lt;/sonic-image&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-and-parts">Accessibility and parts</h2>
+<p>Always set meaningful <strong><code>alt</code></strong> text (empty string only for decorative images). </p>
+<pre><code>&lt;sonic-image
+      rounded=&quot;md&quot;
+      ratio=&quot;16/9&quot;
+      alt=&quot;Concorde aircraft in flight&quot;
+      src=&quot;https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.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; use <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, <code>auto</code> (default)</td>
+<td>Host <code>aspect-ratio</code> on 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; <code>full</code> is a circle (often with <code>ratio=&quot;1/1&quot;</code>)</td>
+</tr>
+<tr>
+<td><code>objectPosition</code></td>
+<td>CSS position</td>
+<td>Maps to <code>object-position</code> (default <code>center center</code>)</td>
+</tr>
+<tr>
+<td><code>imageRendering</code></td>
+<td>CSS value</td>
+<td>Maps to <code>image-rendering</code> (default <code>auto</code>)</td>
+</tr>
+<tr>
+<td><code>cover</code></td>
+<td>boolean</td>
+<td>Absolutely fills a positioned parent; host aspect ratio is ignored</td>
+</tr>
+<tr>
+<td><code>transition</code></td>
+<td><code>fade</code>, <code>fade-scale-out</code></td>
+<td>Opacity (and scale) animation after <code>load</code>; remount to replay on <code>src</code> change</td>
+</tr>
+</tbody></table>
+<p>No slots — content is driven entirely by attributes on the inner <code>&lt;img&gt;</code>.</p>
+<h2 id="api-reference-1">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; use <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, <code>auto</code> (default)</td>
+<td>Host <code>aspect-ratio</code> on 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; <code>full</code> is a circle (often with <code>ratio=&quot;1/1&quot;</code>)</td>
+</tr>
+<tr>
+<td><code>objectPosition</code></td>
+<td>CSS position</td>
+<td>Maps to <code>object-position</code> (default <code>center center</code>)</td>
+</tr>
+<tr>
+<td><code>imageRendering</code></td>
+<td>CSS value</td>
+<td>Maps to <code>image-rendering</code> (default <code>auto</code>)</td>
+</tr>
+<tr>
+<td><code>cover</code></td>
+<td>boolean</td>
+<td>Absolutely fills a positioned parent; host aspect ratio is ignored</td>
+</tr>
+<tr>
+<td><code>transition</code></td>
+<td><code>fade</code>, <code>fade-scale-out</code></td>
+<td>Opacity (and scale) animation after <code>load</code>; remount to replay on <code>src</code> change</td>
+</tr>
+</tbody></table>
+<p>No slots — content is driven entirely by attributes on the inner <code>&lt;img&gt;</code>.</p>
 
     </article>
   </main>