@supersoniks/concorde 5.0.3 → 5.0.5

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="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,9 +15,9 @@
   </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>. 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>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>
+<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>
 <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;
@@ -136,7 +136,7 @@
           img.ratio = &#39;1/1&#39;;
           img.rounded = &#39;md&#39;;
           img.loading = &#39;eager&#39;;
-          img.style.width = &#39;5rem&#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;
@@ -153,7 +153,7 @@
           img.ratio = &#39;1/1&#39;;
           img.rounded = &#39;md&#39;;
           img.loading = &#39;eager&#39;;
-          img.style.width = &#39;5rem&#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;
@@ -179,6 +179,118 @@
       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>

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

@@ -4,8 +4,8 @@
   <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="keywords" content="Concorde, supersoniks, core/components/ui/link/link, link, Link, UI component, sonic-link, web component">
+  <meta name="description" content="Links navigate with inherited typography: internal routes, anchors, or external URLs. The default slot is the anchor label. For in-app routing, pair href with pushstate; use autoActive to reflect the ">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/link/link, link, Link, UI component, sonic-link, web component, href, pushstate, autoActive, active, target=&quot;_blank&quot;, rel=&quot;noopener noreferrer&quot;, partial">
   <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">
 </head>
@@ -15,26 +15,84 @@
   </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>. Links navigate with inherited typography: internal routes, anchors, or external URLs. The default slot is the anchor label. For in-app routing, pair href with pushstate; use autoActive to reflect the  <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, href, pushstate, autoActive, active, target=&quot;_blank&quot;, rel=&quot;noopener noreferrer&quot;, partial. 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>
+<p>Links <strong>navigate</strong> with inherited typography: internal routes, anchors, or external URLs. The default slot is the anchor label. For in-app routing, pair <strong><code>href</code></strong> with <strong><code>pushstate</code></strong>; use <strong><code>autoActive</code></strong> to reflect the current URL on the host (<code>active</code>).</p>
+<h2 id="basic-example">Basic example</h2>
 <pre><code>&lt;sonic-link href=&quot;/&quot;&gt;Basic link with href attribute&lt;/sonic-link&gt;
 </code></pre>
 <h2 id="target">Target</h2>
+<p><strong><code>target=&quot;_blank&quot;</code></strong> opens a new browsing context and sets <strong><code>rel=&quot;noopener noreferrer&quot;</code></strong>.</p>
 <pre><code>&lt;sonic-link href=&quot;/&quot; target=&quot;_blank&quot;&gt;Link with target attribute&lt;/sonic-link&gt;
 </code></pre>
+<h2 id="pushstate">Pushstate</h2>
+<p>Set <strong><code>pushstate</code></strong> on same-origin <strong><code>href</code></strong> values to intercept clicks and navigate through Concorde’s client router without a full reload.</p>
+<pre><code>&lt;sonic-link href=&quot;/#core/components&quot; pushstate&gt;Client navigation (pushstate)&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;
+<p>Default <strong><code>autoActive</code></strong> is <strong><code>partial</code></strong>: the host gets <strong><code>active</code></strong> when the current URL starts with <strong><code>href</code></strong>. Style with <strong><code>[&amp;[active]]:</code></strong> utilities or host selectors.</p>
+<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;
 </code></pre>
-<h3 id="autoactive-strict-vs-partial">AutoActive Strict vs partial</h3>
+<h3 id="autoactive-strict-vs-partial">AutoActive strict vs partial</h3>
+<p><strong><code>strict</code></strong> requires pathname, search, and hash to match. <strong><code>strict-path-only</code></strong> matches pathname and hash but ignores search.</p>
 <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
       &lt;sonic-link href=&quot;/#core&quot; autoActive=&quot;strict&quot; class=&quot;[&amp;[active]]:text-success&quot;&gt;autoActive strict&lt;/sonic-link&gt;
-      &lt;sonic-link href=&quot;/./link.html#link&quot; autoActive=&quot;strict&quot; class=&quot;[&amp;[active]]:text-success&quot;&gt;autoActive strict&lt;/sonic-link&gt;
+      &lt;sonic-link href=&quot;/./link.html#link&quot; autoActive=&quot;strict&quot; class=&quot;[&amp;[active]]:text-success&quot;&gt;autoActive strict (long href)&lt;/sonic-link&gt;
+      &lt;sonic-link href=&quot;/#core/components&quot; autoActive=&quot;strict-path-only&quot; class=&quot;[&amp;[active]]:text-success&quot;&gt;autoActive strict-path-only&lt;/sonic-link&gt;
     &lt;/div&gt;
 </code></pre>
 <h3 id="autoactive-disabled">AutoActive disabled</h3>
 <pre><code>&lt;sonic-link href=&quot;/./link.html#link&quot; autoActive=&quot;disabled&quot; class=&quot;[&amp;[active]]:text-success&quot;&gt;autoActive disabled&lt;/sonic-link&gt;
 </code></pre>
+<h2 id="accessibility">Accessibility</h2>
+<p>The inner <strong><code>&lt;a&gt;</code></strong> uses <strong><code>focus-visible</code></strong> outline styling. Set <strong><code>data-aria-label</code></strong> when the slot text is not sufficient on its own.</p>
+<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>href</code></td>
+<td>URL</td>
+<td>Link target; without <strong><code>href</code></strong>, only the slot is rendered (no <strong><code>&lt;a&gt;</code></strong>)</td>
+</tr>
+<tr>
+<td><code>target</code></td>
+<td>e.g. <code>_blank</code></td>
+<td>Navigation target; <strong><code>_blank</code></strong> adds <strong><code>rel=&quot;noopener noreferrer&quot;</code></strong></td>
+</tr>
+<tr>
+<td><code>pushstate</code></td>
+<td>boolean</td>
+<td>Intercepts click for Concorde client navigation without reload</td>
+</tr>
+<tr>
+<td><code>autoActive</code></td>
+<td><code>partial</code> (default) · <code>strict</code> · <code>strict-path-only</code> · <code>disabled</code></td>
+<td>When the host gets the <strong><code>active</code></strong> attribute (same-origin <strong><code>href</code></strong> only)</td>
+</tr>
+<tr>
+<td><code>data-aria-label</code></td>
+<td>string</td>
+<td>Accessible <strong><code>aria-label</code></strong> when the slot text is not enough</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Link content (text, icons)</td>
+</tr>
+</tbody></table>
 
     </article>
   </main>

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

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Loader — Concorde</title>
-  <meta name="description" content="import {Loader} from &quot;@supersoniks/concorde/core/components/ui/loader/loader&quot;;">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/loader/loader, loader, Loader, UI component, sonic-loader, web component">
+  <meta name="description" content="sonic-loader shows a loading animation in the page or as a viewport overlay. Default mode is fixed (centered overlay). Use inline inside lists and fetch placeholders. Pair noDelay when the spinner sho">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/loader/loader, loader, Loader, UI component, sonic-loader, web component, mode, fixed, inline, noDelay, sonic-fetch, sonic-list, currentColor">
   <meta name="concorde-doc-id" content="core/components/ui/loader/loader">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.html">
 </head>
@@ -15,34 +15,108 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Loader</strong>. import {Loader} from &quot;@supersoniks/concorde/core/components/ui/loader/loader&quot;; <span>Doc ID: <code>core/components/ui/loader/loader</code>. Keywords: Concorde, supersoniks, core/components/ui/loader/loader, loader, Loader, UI component, sonic-loader, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.html">https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Loader</strong>. sonic-loader shows a loading animation in the page or as a viewport overlay. Default mode is fixed (centered overlay). Use inline inside lists and fetch placeholders. Pair noDelay when the spinner sho <span>Doc ID: <code>core/components/ui/loader/loader</code>. Keywords: Concorde, supersoniks, core/components/ui/loader/loader, loader, Loader, UI component, sonic-loader, web component, mode, fixed, inline, noDelay, sonic-fetch, sonic-list, currentColor. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.html">https://concorde.supersoniks.org/crawl/core/components/ui/loader/loader.html</a>.</span></p>
       <h1 id="loader">Loader</h1>
-<h2 id="inline-mode">Inline mode</h2>
+<p><strong><code>sonic-loader</code></strong> shows a loading animation in the page or as a viewport overlay. Default <strong><code>mode</code></strong> is <strong><code>fixed</code></strong> (centered overlay). Use <strong><code>inline</code></strong> inside lists and fetch placeholders. Pair <strong><code>noDelay</code></strong> when the spinner should appear without the default fade-in wait. For <strong><code>sonic-fetch</code></strong> / <strong><code>sonic-list</code></strong>, set the parent <strong><code>loader</code></strong> attribute instead of embedding a tag manually.</p>
+<h2 id="basic-example">Basic example</h2>
+<p>Inline loaders fit content areas; they use the theme primary color unless <strong><code>currentColor</code></strong> is set.</p>
 <pre><code>&lt;sonic-loader mode=&quot;inline&quot;&gt;&lt;/sonic-loader&gt;
 </code></pre>
-<h2 id="currentcolor">CurrentColor</h2>
-<pre><code>&lt;sonic-loader mode=&quot;inline&quot; currentColor style=&quot;color:purple;&quot;&gt;&lt;/sonic-loader&gt;
-</code></pre>
-<h2 id="align">Align</h2>
-<pre><code>&lt;sonic-loader mode=&quot;inline&quot; align=&quot;left&quot;&gt;&lt;/sonic-loader&gt;
-    &lt;sonic-loader mode=&quot;inline&quot; align=&quot;center&quot;&gt;&lt;/sonic-loader&gt;
-    &lt;sonic-loader mode=&quot;inline&quot; align=&quot;right&quot;&gt;&lt;/sonic-loader&gt;
+<h2 id="mode">Mode</h2>
+<p><strong><code>inline</code></strong> — ellipsis animation in the document flow. <strong><code>fixed</code></strong> — centered overlay (<code>position: fixed</code>); default when the tag is omitted.</p>
+<pre><code>&lt;sonic-loader mode=&quot;inline&quot;&gt;&lt;/sonic-loader&gt;
 </code></pre>
-<h2 id="fixed-mode">Fixed mode</h2>
+<p>Use the checkbox below to toggle a <strong><code>fixed</code></strong> loader over the page (default <strong><code>mode</code></strong> on <strong><code>sonic-loader</code></strong>).</p>
 <p><docs-lit-demo for="docs-toggle-loader-demo"></docs-lit-demo></p>
-<h2 id="loading-button">Loading button</h2>
-<pre><code>&lt;sonic-button loading&gt;A loading button&lt;/sonic-button&gt;
+<h2 id="inline-alignment-and-color">Inline alignment and color</h2>
+<p><strong><code>align</code></strong> only affects <strong><code>mode=&quot;inline&quot;</code></strong>: <strong><code>left</code></strong> · <strong><code>center</code></strong> (default) · <strong><code>right</code></strong>. Set <strong><code>currentColor</code></strong> so dots follow the host <code>color</code> (for example on a purple parent).</p>
+<pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
+      &lt;sonic-loader mode=&quot;inline&quot; currentColor style=&quot;color: purple;&quot;&gt;&lt;/sonic-loader&gt;
+      &lt;div class=&quot;flex flex-col gap-2&quot;&gt;
+        &lt;sonic-loader mode=&quot;inline&quot; align=&quot;left&quot;&gt;&lt;/sonic-loader&gt;
+        &lt;sonic-loader mode=&quot;inline&quot; align=&quot;center&quot;&gt;&lt;/sonic-loader&gt;
+        &lt;sonic-loader mode=&quot;inline&quot; align=&quot;right&quot;&gt;&lt;/sonic-loader&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="nodelay"><code>noDelay</code></h2>
+<p>By default <strong><code>mode=&quot;fixed&quot;</code></strong> waits briefly before fading in. <strong><code>mode=&quot;inline&quot;</code></strong> already skips that wait. Set <strong><code>noDelay</code></strong> on <strong><code>fixed</code></strong> (or pass <strong><code>noDelay: true</code></strong> to <strong><code>Loader.show()</code></strong>) to appear immediately.</p>
+<pre><code>&lt;sonic-loader mode=&quot;inline&quot; noDelay&gt;&lt;/sonic-loader&gt;
+</code></pre>
+<h2 id="accessibility-announce">Accessibility (<code>announce</code>)</h2>
+<p>The animation is <strong><code>aria-hidden</code></strong> by default so screen readers are not spammed on every fetch. Set <strong><code>announce</code></strong> when the loader is injected <strong>after</strong> user action (for example a global overlay): the host gets <strong><code>role=&quot;status&quot;</code></strong>, <strong><code>aria-live=&quot;polite&quot;</code></strong>, and a localized <strong><code>aria-label</code></strong> (“Loading” / “Chargement en cours”, …). For in-button loading, prefer <strong><code>sonic-button</code></strong> <strong><code>loading</code></strong> and <strong><code>aria-busy</code></strong> on the control—not on the loader.</p>
+<pre><code>&lt;sonic-loader mode=&quot;inline&quot; announce&gt;&lt;/sonic-loader&gt;
+</code></pre>
+<h2 id="show-and-hide-programmatically">Show and hide programmatically</h2>
+<p>Import <strong><code>Loader</code></strong> and call <strong><code>Loader.show()</code></strong> / <strong><code>Loader.hide()</code></strong>. <strong><code>hide()</code></strong> is reference-counted: call it once per <strong><code>show()</code></strong>. With no <strong><code>container</code></strong>, the loader is appended to the theme pop container and <strong><code>mode</code></strong> is always <strong><code>fixed</code></strong>. Pass <strong><code>container</code></strong> and <strong><code>mode: &quot;inline&quot;</code></strong> to mount an inline instance in a specific element.</p>
+<pre><code class="language-javascript">import { Loader } from &quot;@supersoniks/concorde/core/components/ui/loader/loader&quot;;
+
+Loader.show({
+  mode: &quot;fixed&quot;,
+  noDelay: false,
+  announce: true,
+  container: document.querySelector(&quot;#foo&quot;),
+});
+
+Loader.hide();
 </code></pre>
-<h2 id="hide--show-programmatically">Hide / show programmatically</h2>
-<pre><code class="language-javascript">import {Loader} from &quot;@supersoniks/concorde/core/components/ui/loader/loader&quot;;
-  // Show 
-  Loader.show({
-    mode:&quot;fixed&quot; // optional : fixed | inline
-    container : document.querySelector(&#39;#foo&#39;) // optional, default : parent sonic-theme || document.body
-  });
-  // Hide 
-  Loader.hide();
+<h2 id="composition">Composition</h2>
+<p><strong><code>sonic-button</code></strong> <strong><code>loading</code></strong> shows an icon spinner and sets <strong><code>aria-busy</code></strong> on the button. <strong><code>sonic-fetch</code></strong> and <strong><code>sonic-list</code></strong> render <strong><code>sonic-loader</code></strong> when their <strong><code>loader</code></strong> attribute is set: <strong><code>true</code></strong> or an empty string maps to <strong><code>fixed</code></strong>; otherwise use <strong><code>inline</code></strong> or <strong><code>fixed</code></strong>.</p>
+<pre><code>&lt;sonic-button loading&gt;Save changes&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>mode</code></td>
+<td><code>inline</code> · <code>fixed</code> (default <code>fixed</code>)</td>
+<td>Layout: in-flow ellipsis vs viewport-centered overlay</td>
+</tr>
+<tr>
+<td><code>noDelay</code></td>
+<td>boolean</td>
+<td>Skips the initial fade-in delay before the animation appears</td>
+</tr>
+<tr>
+<td><code>announce</code></td>
+<td>boolean</td>
+<td><strong><code>role=&quot;status&quot;</code></strong> and <strong><code>aria-live=&quot;polite&quot;</code></strong> with localized loading label when the loader should be announced</td>
+</tr>
+<tr>
+<td><code>align</code></td>
+<td><code>left</code> · <code>center</code> · <code>right</code></td>
+<td>Horizontal alignment for <strong><code>mode=&quot;inline&quot;</code></strong> only (attribute selector; default centered)</td>
+</tr>
+<tr>
+<td><code>currentColor</code></td>
+<td>boolean</td>
+<td>Uses <code>currentColor</code> for dot fill instead of <strong><code>--sc-primary</code></strong></td>
+</tr>
+</tbody></table>
+<p>This component has <strong>no slots</strong>. The animation markup is internal.</p>
+<h3 id="static-methods">Static methods</h3>
+<table>
+<thead>
+<tr>
+<th>Method</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><code>Loader.show(conf?)</code></td>
+<td>Mounts the shared loader instance. <strong><code>conf.mode</code></strong>, <strong><code>conf.noDelay</code></strong>, <strong><code>conf.announce</code></strong>, optional <strong><code>conf.container</code></strong>. Without <strong><code>container</code></strong>, uses the theme pop container and forces <strong><code>fixed</code></strong>.</td>
+</tr>
+<tr>
+<td><code>Loader.hide()</code></td>
+<td>Decrements the show counter and removes the instance from the DOM when it reaches zero.</td>
+</tr>
+</tbody></table>
 
     </article>
   </main>