@supersoniks/concorde 5.0.2 → 5.0.3

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

@@ -0,0 +1,75 @@
+# Group
+
+## Radio group
+<sonic-code>
+  <template>
+    <sonic-group formDataProvider="subscriptionData">
+      <sonic-button radio name="subscription" value="standard" type="default">😎 Standard</sonic-button>
+      <sonic-button radio checked name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
+      <sonic-button radio name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
+    </sonic-group>
+  </template>
+</sonic-code>
+
+## Button group
+<sonic-code>
+  <template>
+    <sonic-group>
+      <sonic-button type="info" target="_blank" href="https://wwws.airfrance.fr/">🗼Air France</sonic-button>
+      <sonic-button type="success" target="_blank" href="https://www.airtahitinui.com/">🌴 Air Tahiti</sonic-button>
+      <sonic-button type="danger" target="_blank" href="https://www.aircorsica.com/">💣 Air Corsica</sonic-button>
+    </sonic-group>
+  </template>
+</sonic-code>
+
+## Input actions prefix
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-3 gap-3">
+      <sonic-group>
+        <sonic-button type="info" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
+        </sonic-button>
+        <sonic-input placeholder="placeholder" ></sonic-input>
+      </sonic-group>
+      <sonic-group label="Label">
+        <sonic-button type="info" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
+        </sonic-button>
+        <sonic-input  ></sonic-input>
+      </sonic-group>
+      <sonic-group description="Description">
+        <sonic-button type="info" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
+        </sonic-button>
+        <sonic-input ></sonic-input>
+      </sonic-group>
+    </div>
+  </template>
+</sonic-code>
+
+## Input actions suffix
+<sonic-code>
+  <template>
+    <div class="grid grid-cols-3 gap-3">
+      <sonic-group>
+        <sonic-input placeholder="placeholder" ></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+      <sonic-group label="Label">
+        <sonic-input  ></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+      <sonic-group description="Description">
+        <sonic-input ></sonic-input>
+        <sonic-button type="primary" shape="square">
+          <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
+        </sonic-button>
+      </sonic-group>
+    </div>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,125 @@
+# Icon
+
+
+## Custom
+
+<p >Icons located in the following folder : <span class="text-info">/svg/$prefix/$name.svg<span></p>
+
+<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>
+
+
+## External
+<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>
+
+## Size
+<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>
+

package/docs/src/core/components/ui/icon/icons.json

@@ -0,0 +1 @@
+{"core":{"cancel":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 12.5L10 15.5L17 8.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 13L9 17L19 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","emoji-puzzled":"<svg width=\"24px\" height=\"24px\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" ><path d=\"M2 12c0 5.523 4.477 10 10 10s10-4.477 10-10S17.523 2 12 2\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M11.5 15.5s1.5-2 4.5-2 4.5 2 4.5 2M3 4c0-2.754 4-2.754 4 0 0 1.967-2 1.64-2 4M5 11.01l.01-.011\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M17.5 9a.5.5 0 110-1 .5.5 0 010 1zM10.5 9a.5.5 0 110-1 .5.5 0 010 1z\" fill=\"#000\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>","info-empty":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 11.5V16.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 7.51L12.01 7.49889\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","loader":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-loader\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>","minus-small":"<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18 12H6\" />\n</svg>\n","more-horiz":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M18 12.5C18.2761 12.5 18.5 12.2761 18.5 12C18.5 11.7239 18.2761 11.5 18 11.5C17.7239 11.5 17.5 11.7239 17.5 12C17.5 12.2761 17.7239 12.5 18 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M6 12.5C6.27614 12.5 6.5 12.2761 6.5 12C6.5 11.7239 6.27614 11.5 6 11.5C5.72386 11.5 5.5 11.7239 5.5 12C5.5 12.2761 5.72386 12.5 6 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","more-vert":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 18.5C12.2761 18.5 12.5 18.2761 12.5 18C12.5 17.7239 12.2761 17.5 12 17.5C11.7239 17.5 11.5 17.7239 11.5 18C11.5 18.2761 11.7239 18.5 12 18.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6.5C12.2761 6.5 12.5 6.27614 12.5 6C12.5 5.72386 12.2761 5.5 12 5.5C11.7239 5.5 11.5 5.72386 11.5 6C11.5 6.27614 11.7239 6.5 12 6.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","nav-arrow-down":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","warning-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 7L12 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.01L12.01 16.9989\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"}}

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

@@ -0,0 +1,201 @@
+# Image
+
+Responsive **`<img>`** 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. Default **`loading`** is `lazy`; set **`loading="eager"`** for above-the-fold heroes.
+
+## Rounded
+
+Omit `rounded` for square corners. Boolean **`rounded`** uses the theme token `--sc-rounded`. Sizes: **`sm`**, **`md`**, **`lg`**, **`xl`**, **`full`** (circle — pair with `ratio="1/1"`), **`none`** (explicit reset).
+
+<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="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ></sonic-image>
+        <p class="mt-2">default</p>
+      </div>
+      <div>
+        <sonic-image
+          rounded="sm"
+          ratio="1/1"
+          src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ></sonic-image>
+        <p class="mt-2">sm</p>
+      </div>
+      <div>
+        <sonic-image
+          rounded
+          ratio="1/1"
+          src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ></sonic-image>
+        <p class="mt-2">rounded</p>
+      </div>
+      <div>
+        <sonic-image
+          rounded="md"
+          ratio="1/1"
+          src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ></sonic-image>
+        <p class="mt-2">md</p>
+      </div>
+      <div>
+        <sonic-image
+          rounded="lg"
+          ratio="1/1"
+          src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ></sonic-image>
+        <p class="mt-2">lg</p>
+      </div>
+      <div>
+        <sonic-image
+          rounded="xl"
+          ratio="1/1"
+          src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        ></sonic-image>
+        <p class="mt-2">xl</p>
+      </div>
+      <div >
+        <div >
+          <sonic-image
+            rounded="full"
+            ratio="1/1"
+            src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+          ></sonic-image>
+          <p class="mt-2">full</p>
+        </div>
+      </div>
+    </div>
+  </template>
+</sonic-code>
+
+## Aspect ratio
+
+**`ratio`** sets CSS `aspect-ratio` on the image (default **`auto`**). The image still fills the host width (`width: 100%`).
+
+<sonic-code>
+  <template>
+    <div class="grid gap-8 grid-cols-2 items-center">
+      <sonic-image
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+      <sonic-image
+        ratio="16/9"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+      <sonic-image
+        ratio="1/1"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+      <sonic-image
+        ratio="2/3"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+    </div>
+  </template>
+</sonic-code>
+
+## Object position
+
+**`objectPosition`** maps to CSS `object-position` (default **`center center`**). Useful 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="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+      <sonic-image
+        objectPosition="center top"
+        ratio="11/4"
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+    </div>
+  </template>
+</sonic-code>
+
+## Cover
+
+**`cover`** stretches the image to fill a **positioned** parent (`position: relative` + fixed height or inset). Aspect ratio on the host is ignored while `cover` is set.
+
+<sonic-code>
+  <template>
+    <div class="h-96 relative rounded-lg overflow-hidden">
+      <sonic-image
+        cover
+        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+      ></sonic-image>
+    </div>
+  </template>
+</sonic-code>
+
+## Load transition
+
+Set **`transition`** to **`fade`** (default when the attribute is present) or **`fade-scale-out`**. The image stays at `opacity: 0` until the browser fires **`load`**, then the **`loaded`** class runs the animation. Changing `src` on an existing element does not replay the effect — mount a new `sonic-image` when you need another entrance (galleries, infinite scroll).
+
+Click **Add image** to append small thumbnails and replay the transition. **Clear** resets the row.
+
+<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 = '5rem';
+          img.src = 'https://picsum.photos/seed/' + Date.now() + '/120/120';
+          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 = '5rem';
+          img.src = 'https://picsum.photos/seed/' + Date.now() + '/120/120';
+          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 and parts
+
+Always set meaningful **`alt`** text (empty string only for decorative images). 
+
+<sonic-code>
+  <template>
+    <sonic-image
+      rounded="md"
+      ratio="16/9"
+      alt="Concorde aircraft in flight"
+      src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+    ></sonic-image>
+  </template>
+</sonic-code>

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

@@ -0,0 +1,43 @@
+# Link
+
+## Href
+<sonic-code>
+  <template>
+    <sonic-link href="/">Basic link with href attribute</sonic-link>
+  </template>
+</sonic-code>
+
+## Target
+<sonic-code>
+  <template>
+    <sonic-link href="/" target="_blank">Link with target attribute</sonic-link>
+  </template>
+</sonic-code>
+
+## AutoActive
+
+<sonic-code>
+  <template>
+    <sonic-link href="/#core/components"  class="[&[active]]:text-success">autoActive partial (default)</sonic-link>
+  </template>
+</sonic-code>
+
+### AutoActive Strict vs partial
+
+<sonic-code>
+  <template>
+    <div class="grid gap-3">
+      <sonic-link href="/#core" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
+      <sonic-link href="/#core/components/ui/link/link.md/link" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
+    </div>
+  </template>
+</sonic-code>
+
+### AutoActive disabled
+
+<sonic-code>
+  <template>
+      <sonic-link href="/#core/components/ui/link/link.md/link" autoActive="disabled" class="[&[active]]:text-success">autoActive disabled</sonic-link>
+  </template>
+</sonic-code>
+

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

@@ -0,0 +1,55 @@
+# Loader 
+
+## Inline mode
+
+<sonic-code>
+  <template>
+    <sonic-loader mode="inline"></sonic-loader>
+  </template>
+</sonic-code>
+
+## CurrentColor 
+
+<sonic-code>
+  <template>
+    <sonic-loader mode="inline" currentColor style="color:purple;"></sonic-loader>
+  </template>
+</sonic-code>
+
+
+## Align
+
+<sonic-code>
+  <template>
+    <sonic-loader mode="inline" align="left"></sonic-loader>
+    <sonic-loader mode="inline" align="center"></sonic-loader>
+    <sonic-loader mode="inline" align="right"></sonic-loader>
+  </template>
+</sonic-code>
+
+## Fixed mode
+
+<docs-lit-demo for="docs-toggle-loader-demo"></docs-lit-demo>
+
+
+## Loading button
+<sonic-code>
+  <template>
+    <sonic-button loading>A loading button</sonic-button>
+  </template>
+</sonic-code>
+
+## Hide / show programmatically
+
+<sonic-code language="javascript">
+  <template>
+  import {Loader} from "@supersoniks/concorde/core/components/ui/loader/loader";
+  // Show 
+  Loader.show({
+    mode:"fixed" // optional : fixed | inline
+    container : document.querySelector('#foo') // optional, default : parent sonic-theme || document.body
+  });
+  // Hide 
+  Loader.hide();
+  </template>
+</sonic-code>