@supersoniks/concorde 5.0.4 → 5.0.5

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 attibute">
-  <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 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>
+      <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>
-<pre><code>&lt;sonic-link href=&quot;/&quot;&gt;Basic link with href attibute&lt;/sonic-link&gt;
+<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>
-<pre><code>&lt;sonic-link href=&quot;/&quot; target=&quot;_blank&quot;&gt;Link with target attibute&lt;/sonic-link&gt;
+<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>