@supersoniks/concorde 5.0.3 → 5.0.4

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

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Card — Concorde</title>
-  <meta name="description" content="A surface for grouped content: padding, radius, shadow, and semantic type colors via shared theme tokens. Compose sonic-card-header, sonic-card-main, and sonic-card-footer inside the card, or put any ">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component, type, sonic-card-header, sonic-card-main, sonic-card-footer, base, light, invert, neutral, primary">
+  <meta name="description" content="Suffix">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component">
   <meta name="concorde-doc-id" content="core/components/ui/card/card">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html">
 </head>
@@ -15,126 +15,82 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Card</strong>. A surface for grouped content: padding, radius, shadow, and semantic type colors via shared theme tokens. Compose sonic-card-header, sonic-card-main, and sonic-card-footer inside the card, or put any  <span>Doc ID: <code>core/components/ui/card/card</code>. Keywords: Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component, type, sonic-card-header, sonic-card-main, sonic-card-footer, base, light, invert, neutral, primary. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html">https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Card</strong>. Suffix <span>Doc ID: <code>core/components/ui/card/card</code>. Keywords: Concorde, supersoniks, core/components/ui/card/card, card, Card, UI component, sonic-card, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html">https://concorde.supersoniks.org/crawl/core/components/ui/card/card.html</a>.</span></p>
       <h1 id="card">Card</h1>
-<p>A <strong>surface</strong> for grouped content: padding, radius, shadow, and semantic <strong><code>type</code></strong> colors via shared theme tokens. Compose <strong><code>sonic-card-header</code></strong>, <strong><code>sonic-card-main</code></strong>, and <strong><code>sonic-card-footer</code></strong> inside the card, or put any markup in the default slot.</p>
-<p>Default <strong><code>type</code></strong> is <code>base</code> (page background). Use <code>light</code> for a subtle gray panel, <code>invert</code> / <code>neutral</code> for high-contrast blocks, and <code>primary</code>, <code>info</code>, <code>success</code>, <code>warning</code>, or <code>danger</code> for tinted surfaces (divider tokens apply on colored types).</p>
 <h2 id="type">Type</h2>
-<pre><code>&lt;div class=&quot;flex flex-wrap gap-3&quot;&gt;
-      &lt;sonic-card type=&quot;base&quot; class=&quot;min-w-[8rem]&quot;&gt;Base&lt;/sonic-card&gt;
-      &lt;sonic-card type=&quot;light&quot; class=&quot;min-w-[8rem]&quot;&gt;Light&lt;/sonic-card&gt;
-      &lt;sonic-card type=&quot;primary&quot; class=&quot;min-w-[8rem]&quot;&gt;Primary&lt;/sonic-card&gt;
-      &lt;sonic-card type=&quot;info&quot; class=&quot;min-w-[8rem]&quot;&gt;Info&lt;/sonic-card&gt;
-      &lt;sonic-card type=&quot;success&quot; class=&quot;min-w-[8rem]&quot;&gt;Success&lt;/sonic-card&gt;
-      &lt;sonic-card type=&quot;warning&quot; class=&quot;min-w-[8rem]&quot;&gt;Warning&lt;/sonic-card&gt;
-      &lt;sonic-card type=&quot;danger&quot; class=&quot;min-w-[8rem]&quot;&gt;Danger&lt;/sonic-card&gt;
-      &lt;sonic-card type=&quot;neutral&quot; class=&quot;min-w-[8rem]&quot;&gt;Neutral&lt;/sonic-card&gt;
-      &lt;sonic-card type=&quot;invert&quot; class=&quot;min-w-[8rem]&quot;&gt;Invert&lt;/sonic-card&gt;
-    &lt;/div&gt;
+<pre><code>&lt;div class=&quot;grid grid-cols-3 gap-3&quot;&gt;
+    &lt;sonic-card type=&quot;base&quot;&gt;Base&lt;/sonic-card&gt;
+    &lt;sonic-card type=&quot;light&quot;&gt;Light&lt;/sonic-card&gt;
+    &lt;sonic-card type=&quot;primary&quot;&gt;Primary&lt;/sonic-card&gt;
+    &lt;sonic-card type=&quot;warning&quot;&gt;Warning&lt;/sonic-card&gt;
+    &lt;sonic-card type=&quot;danger&quot;&gt;Danger&lt;/sonic-card&gt;
+    &lt;sonic-card type=&quot;success&quot;&gt;Success&lt;/sonic-card&gt;
+    &lt;sonic-card type=&quot;info&quot;&gt;Info&lt;/sonic-card&gt;
+    &lt;sonic-card type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-card&gt;
+    &lt;sonic-card type=&quot;invert&quot;&gt;Invert&lt;/sonic-card&gt;
+  &lt;/div&gt;
 </code></pre>
 <h2 id="header">Header</h2>
-<p>Quick titles with <strong><code>label</code></strong> and <strong><code>description</code></strong> attributes, or full control through the default slot. <strong><code>slot=&quot;suffix&quot;</code></strong> aligns badges or actions on the right; suffix content does not shrink when the title wraps.</p>
-<pre><code>&lt;div class=&quot;grid gap-4 max-w-xl&quot;&gt;
-      &lt;sonic-card&gt;
-        &lt;sonic-card-header
-          label=&quot;Account settings&quot;
-          description=&quot;Manage your profile and preferences.&quot;
-        &gt;&lt;/sonic-card-header&gt;
-        &lt;p class=&quot;m-0 text-sm opacity-80&quot;&gt;Body content goes in the card slot or in &lt;code&gt;sonic-card-main&lt;/code&gt;.&lt;/p&gt;
-      &lt;/sonic-card&gt;
-
-      &lt;sonic-card type=&quot;neutral&quot;&gt;
-        &lt;sonic-card-header label=&quot;Notifications&quot;&gt;
-          &lt;sonic-card-header-description&gt;
-            Choose what we email you about.
-          &lt;/sonic-card-header-description&gt;
-          &lt;sonic-badge slot=&quot;suffix&quot;  type=&quot;warning&quot; size=&quot;xs&quot;&gt;3 new&lt;/sonic-badge&gt;
-        &lt;/sonic-card-header&gt;
-      &lt;/sonic-card&gt;
-
-      &lt;sonic-card&gt;
-        &lt;sonic-card-header label=&quot;Team workspace&quot; description=&quot;Shared with 12 members&quot;&gt;
-          &lt;sonic-button
-            slot=&quot;suffix&quot;
-            shape=&quot;circle&quot;
-            variant=&quot;outline&quot;
-            size=&quot;sm&quot;
-            type=&quot;default&quot;
-            icon
-            data-aria-label=&quot;Workspace settings&quot;
-          &gt;
-            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot;&gt;&lt;/sonic-icon&gt;
-          &lt;/sonic-button&gt;
-        &lt;/sonic-card-header&gt;
-      &lt;/sonic-card&gt;
-
-      &lt;sonic-card type=&quot;primary&quot;&gt;
-        &lt;sonic-card-header&gt;
-          &lt;div&gt;Custom header&lt;/div&gt;
-          &lt;sonic-card-header-description&gt;
-            Use the header slot when attributes are not enough.
-          &lt;/sonic-card-header-description&gt;
-          &lt;sonic-button slot=&quot;suffix&quot; shape=&quot;circle&quot; variant=&quot;ghost&quot; size=&quot;sm&quot; type=&quot;primary&quot; icon&gt;
-            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;nav-arrow-right&quot;&gt;&lt;/sonic-icon&gt;
-          &lt;/sonic-button&gt;
-        &lt;/sonic-card-header&gt;
-      &lt;/sonic-card&gt;
-    &lt;/div&gt;
+<pre><code>&lt;div class=&quot;grid grid-cols-1 gap-3&quot;&gt;
+    &lt;sonic-card &gt;
+      &lt;sonic-card-header label=&quot;Header simple, titre géré via l&#39;attribut : label&quot; description=&quot;Description via l&#39;attribut : description&quot;&gt;
+      &lt;/sonic-card-header&gt;
+    &lt;/sonic-card&gt;
+    &lt;sonic-card type=&quot;neutral&quot;&gt;
+      &lt;sonic-card-header label=&quot;Header composé&quot;&gt;
+        &lt;sonic-card-header-description&gt;Description rendu via le composant : &quot;sonic-card-header-description&quot;&lt;/sonic-card-header-description&gt;
+        &lt;div  slot=&quot;suffix&quot; class=&quot;flex&quot;&gt;
+          Suffix
+        &lt;/div&gt;
+      &lt;/sonic-card-header&gt;
+    &lt;/sonic-card&gt;
+    &lt;sonic-card type=&quot;invert&quot;&gt;
+      &lt;sonic-card-header&gt;
+        &lt;div&gt;Header custom&lt;/div&gt;
+        &lt;div class=&quot;text-lg text-danger&quot;&gt;Tout le contenu excepté l&#39;icône ✈ passe par le slot du header&lt;/div&gt;
+        &lt;span slot=&quot;suffix&quot; &gt;✈&lt;/span&gt;
+      &lt;/sonic-card-header&gt;
+    &lt;/sonic-card&gt;
+  &lt;/div&gt;
 </code></pre>
-<p><code>label</code> and <code>description</code> accept HTML (rendered as markup). Prefer plain text when possible; use the slot for structured content.</p>
 <h2 id="main">Main</h2>
-<p>Optional wrapper for the primary content area (typography, media, forms).</p>
-<pre><code>&lt;sonic-card class=&quot;max-w-xl&quot;&gt;
-      &lt;sonic-card-header label=&quot;Release notes&quot; description=&quot;Version 2.4&quot;&gt;&lt;/sonic-card-header&gt;
-      &lt;sonic-card-main&gt;
-        &lt;p class=&quot;mt-0&quot;&gt;
-          Improved performance on large lists and fixed an issue with keyboard navigation in menus.
-        &lt;/p&gt;
-        &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
-        &lt;p class=&quot;mb-0 text-sm opacity-80&quot;&gt;See the changelog for details.&lt;/p&gt;
-      &lt;/sonic-card-main&gt;
-    &lt;/sonic-card&gt;
+<pre><code>&lt;sonic-card &gt;
+    &lt;sonic-card-main &gt;
+      &lt;h3&gt;Main area&lt;/h3&gt;
+      &lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.&lt;/p&gt;
+      &lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/aqz-KE-bpKQ&quot; title=&quot;Big Buck Bunny (Blender Foundation)&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;
+    &lt;/sonic-card-main&gt;
+  &lt;/sonic-card&gt;
 </code></pre>
 <h2 id="footer">Footer</h2>
-<p>Optional footer for actions, metadata, or secondary text.</p>
-<pre><code>&lt;sonic-card class=&quot;max-w-xl&quot;&gt;
-      &lt;sonic-card-header label=&quot;Confirm deletion&quot;&gt;&lt;/sonic-card-header&gt;
-      &lt;sonic-card-main&gt;
-        &lt;p class=&quot;m-0&quot;&gt;This project and all of its data will be removed permanently.&lt;/p&gt;
-      &lt;/sonic-card-main&gt;
-      &lt;sonic-card-footer&gt;
-      &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
-        &lt;div class=&quot;flex flex-wrap gap-2 justify-end&quot;&gt;
-          &lt;sonic-button variant=&quot;ghost&quot; size=&quot;sm&quot;&gt;Cancel&lt;/sonic-button&gt;
-          &lt;sonic-button type=&quot;danger&quot; size=&quot;sm&quot;&gt;Delete&lt;/sonic-button&gt;
+<pre><code>&lt;sonic-card &gt;
+    &lt;sonic-card-footer &gt;
+      &lt;div &gt;
+        &lt;h4 class=&quot;mb-0&quot;&gt;Footer area&lt;/h4&gt;
+        &lt;small&gt;Debitis deleniti eligendi natus dolorem aufdh.&lt;/small&gt;
+        &lt;div&gt;
+          🛫 ✈ ✈ ✈ ✈ ✈ 🛬
         &lt;/div&gt;
-      &lt;/sonic-card-footer&gt;
-    &lt;/sonic-card&gt;
+      &lt;/div&gt;
+    &lt;/sonic-card-footer&gt;
+  &lt;/sonic-card&gt;
 </code></pre>
-<h2 id="full-example">Full example</h2>
-<p>Header, media, body, and footer together.</p>
-<pre><code>&lt;sonic-card class=&quot;max-w-md&quot;&gt;
-      &lt;sonic-card-header label=&quot;Featured route&quot; description=&quot;San Francisco → New York&quot;&gt;
-        &lt;sonic-icon slot=&quot;suffix&quot; library=&quot;iconoir&quot; name=&quot;airplane&quot;&gt;&lt;/sonic-icon&gt;
-      &lt;/sonic-card-header&gt;
-      &lt;sonic-card-main&gt;
-        &lt;sonic-image
-          rounded
-          ratio=&quot;16/9&quot;
-          src=&quot;https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=800&amp;q=80&quot;
-          alt=&quot;&quot;
-        &gt;&lt;/sonic-image&gt;
-        &lt;p class=&quot;mb-0&quot;&gt;
-          Nonstop flight with flexible dates. Prices shown include taxes and fees.
-        &lt;/p&gt;
-      &lt;/sonic-card-main&gt;
-      &lt;sonic-card-footer&gt;
-        &lt;div class=&quot;flex items-center justify-between gap-3 flex-wrap&quot;&gt;
-          &lt;span class=&quot;text-sm font-semibold&quot;&gt;From $249&lt;/span&gt;
-          &lt;sonic-button type=&quot;primary&quot; size=&quot;sm&quot;&gt;Book&lt;/sonic-button&gt;
-        &lt;/div&gt;
-      &lt;/sonic-card-footer&gt;
-    &lt;/sonic-card&gt;
+<h2 id="example-of-use">Example of use</h2>
+<pre><code>&lt;sonic-card &gt;
+    &lt;sonic-card-header label=&quot;Header&quot; description=&quot;Header description&quot;&gt;
+      &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;nav-arrow-right&quot; slot=&quot;suffix&quot; &gt;&lt;/sonic-icon&gt;
+    &lt;/sonic-card-header&gt;
+    &lt;sonic-card-main &gt;
+      &lt;sonic-image rounded ratio=&quot;11/4&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&gt;&lt;b&gt;Main&lt;/b&gt; - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.&lt;/p&gt;
+    &lt;/sonic-card-main&gt;
+    &lt;sonic-card-footer&gt;
+      &lt;div&gt;
+        &lt;i&gt;Footer&lt;/i&gt; - Amet consectetur adipisicing
+      &lt;/div&gt;
+    &lt;/sonic-card-footer&gt;
+  &lt;/sonic-card&gt;
 </code></pre>
 
     </article>

package/docs/crawl/core/components/ui/form/input/input.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Input — Concorde</title>
-  <meta name="description" content="Native attributes list">
+  <meta name="description" content="Native attibutes list">
   <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component">
   <meta name="concorde-doc-id" content="core/components/ui/form/input/input">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html">
@@ -15,11 +15,11 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Input</strong>. Native attributes list <span>Doc ID: <code>core/components/ui/form/input/input</code>. Keywords: Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Input</strong>. Native attibutes list <span>Doc ID: <code>core/components/ui/form/input/input</code>. Keywords: Concorde, supersoniks, core/components/ui/form/input/input, input, Input, UI component, form, sonic-input, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/input/input.html</a>.</span></p>
       <h1 id="input">Input</h1>
 <sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_input.asp#midcontentadcontainer">
   <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
-  Native attributes list
+  Native attibutes list
 </sonic-button>
 
 <h2 id="label">Label</h2>

package/docs/crawl/core/components/ui/form/textarea/textarea.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Textarea — Concorde</title>
-  <meta name="description" content="Native attributes list">
+  <meta name="description" content="Native attibutes list">
   <meta name="keywords" content="Concorde, supersoniks, core/components/ui/form/textarea/textarea, textarea, Textarea, UI component, form, sonic-textarea, web component">
   <meta name="concorde-doc-id" content="core/components/ui/form/textarea/textarea">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html">
@@ -15,11 +15,11 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Textarea</strong>. Native attributes list <span>Doc ID: <code>core/components/ui/form/textarea/textarea</code>. Keywords: Concorde, supersoniks, core/components/ui/form/textarea/textarea, textarea, Textarea, UI component, form, sonic-textarea, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Textarea</strong>. Native attibutes list <span>Doc ID: <code>core/components/ui/form/textarea/textarea</code>. Keywords: Concorde, supersoniks, core/components/ui/form/textarea/textarea, textarea, Textarea, UI component, form, sonic-textarea, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html">https://concorde.supersoniks.org/crawl/core/components/ui/form/textarea/textarea.html</a>.</span></p>
       <h1 id="textarea">Textarea</h1>
 <sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_textarea.asp#midcontentadcontainer">
   <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
-  Native attributes list
+  Native attibutes list
 </sonic-button>
 
 

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="Responsive &lt;img&gt; wrapper: aspect ratio, object-fit: cover, rounded corners, and optional fade-in on load. The host uses a light placeholder background (--sc-placeholder-bg) until the file is ready. De">
-  <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, sm">
+  <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="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,169 +15,93 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Image</strong>. Responsive &lt;img&gt; wrapper: aspect ratio, object-fit: cover, rounded corners, and optional fade-in on load. The host uses a light placeholder background (--sc-placeholder-bg) until the file is ready. De <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, sm. 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>. 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>
       <h1 id="image">Image</h1>
-<p>Responsive <strong><code>&lt;img&gt;</code></strong> wrapper: aspect ratio, <code>object-fit: cover</code>, rounded corners, and optional fade-in on load. The host uses a light placeholder background (<code>--sc-placeholder-bg</code>) until the file is ready. Default <strong><code>loading</code></strong> is <code>lazy</code>; set <strong><code>loading=&quot;eager&quot;</code></strong> for above-the-fold heroes.</p>
 <h2 id="rounded">Rounded</h2>
-<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;
+<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;
     &lt;/div&gt;
 </code></pre>
-<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>
+<h2 id="ratio">Ratio</h2>
 <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
-        ratio=&quot;11/4&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;
+        ratio=&quot;11/4&quot;
+      &gt;
+      &lt;/sonic-image&gt;
       &lt;sonic-image
         objectPosition=&quot;center top&quot;
-        ratio=&quot;11/4&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;
+        ratio=&quot;11/4&quot;
+      &gt;
+      &lt;/sonic-image&gt;
     &lt;/div&gt;
 </code></pre>
 <h2 id="cover">Cover</h2>
-<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;
+<pre><code>&lt;div class=&quot;h-96 relative&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;5rem&#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;5rem&#39;;
-          img.src = &#39;https://picsum.photos/seed/&#39; + Date.now() + &#39;/120/120&#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;/sonic-image&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>
 
     </article>

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

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Link — Concorde</title>
-  <meta name="description" content="Link: Basic link with href attribute">
+  <meta name="description" content="Link: Basic link with href attibute">
   <meta name="keywords" content="Concorde, supersoniks, core/components/ui/link/link, link, Link, UI component, sonic-link, web component">
   <meta name="concorde-doc-id" content="core/components/ui/link/link">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/link/link.html">
@@ -15,13 +15,13 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Link</strong>. Link: Basic link with href attribute <span>Doc ID: <code>core/components/ui/link/link</code>. Keywords: Concorde, supersoniks, core/components/ui/link/link, link, Link, UI component, sonic-link, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/link/link.html">https://concorde.supersoniks.org/crawl/core/components/ui/link/link.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Link</strong>. Link: Basic link with href attibute <span>Doc ID: <code>core/components/ui/link/link</code>. Keywords: Concorde, supersoniks, core/components/ui/link/link, link, Link, UI component, sonic-link, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/link/link.html">https://concorde.supersoniks.org/crawl/core/components/ui/link/link.html</a>.</span></p>
       <h1 id="link">Link</h1>
 <h2 id="href">Href</h2>
-<pre><code>&lt;sonic-link href=&quot;/&quot;&gt;Basic link with href attribute&lt;/sonic-link&gt;
+<pre><code>&lt;sonic-link href=&quot;/&quot;&gt;Basic link with href attibute&lt;/sonic-link&gt;
 </code></pre>
 <h2 id="target">Target</h2>
-<pre><code>&lt;sonic-link href=&quot;/&quot; target=&quot;_blank&quot;&gt;Link with target attribute&lt;/sonic-link&gt;
+<pre><code>&lt;sonic-link href=&quot;/&quot; target=&quot;_blank&quot;&gt;Link with target attibute&lt;/sonic-link&gt;
 </code></pre>
 <h2 id="autoactive">AutoActive</h2>
 <pre><code>&lt;sonic-link href=&quot;/#core/components&quot;  class=&quot;[&amp;[active]]:text-success&quot;&gt;autoActive partial (default)&lt;/sonic-link&gt;