@supersoniks/concorde 5.0.5 → 5.1.0

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

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Toast — Concorde</title>
-  <meta name="description" content="Toasts surface short-lived feedback in a fixed stack (bottom-right in the main window). Queue messages with SonicToast.add() on the global SonicToast class—the host sonic-toast is created automaticall">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, SonicToast.add(), SonicToast, label, preserve, text, status">
+  <meta name="description" content="Afficher un toast">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, success, error, warning, info, preserve: true, dismissForever: true, id, ghost: true">
   <meta name="concorde-doc-id" content="core/components/ui/toast/toast">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html">
 </head>
@@ -15,217 +15,106 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Toast</strong>. Toasts surface short-lived feedback in a fixed stack (bottom-right in the main window). Queue messages with SonicToast.add() on the global SonicToast class—the host sonic-toast is created automaticall <span>Doc ID: <code>core/components/ui/toast/toast</code>. Keywords: Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, SonicToast.add(), SonicToast, label, preserve, text, status. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html">https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Toast</strong>. Afficher un toast <span>Doc ID: <code>core/components/ui/toast/toast</code>. Keywords: Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, success, error, warning, info, preserve: true, dismissForever: true, id, ghost: true. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html">https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html</a>.</span></p>
       <h1 id="toast">Toast</h1>
-<p>Toasts surface <strong>short-lived feedback</strong> in a fixed stack (bottom-right in the main window). Queue messages with <strong><code>SonicToast.add()</code></strong> on the global <strong><code>SonicToast</code></strong> class—the host <strong><code>sonic-toast</code></strong> is created automatically. Prefer <strong><code>label</code></strong> for a heading; use <strong><code>preserve</code></strong> or interactive <strong><code>text</code></strong> when the user must read or act before dismiss.</p>
-<h2 id="basic-example">Basic example</h2>
-<p>Click the button to show a toast.</p>
-<pre><code>&lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Simple notification&#39; })&quot;&gt;
-      Show toast
+<h2 id="utilisation-de-base">Utilisation de base</h2>
+<pre><code>&lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Message de notification simple&#39; })&quot;&gt;
+      Afficher un toast
     &lt;/sonic-button&gt;
 </code></pre>
-<h2 id="status">Status</h2>
-<p><strong><code>status</code></strong> drives color, icon, and live-region behavior. Omit <strong><code>status</code></strong> or pass an empty string for a neutral toast.</p>
+<h2 id="statut">Statut</h2>
+<p>Les statuts disponibles sont : <code>success</code>, <code>error</code>, <code>warning</code>, <code>info</code> ou vide (par défaut).</p>
 <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Default message&#39;, status: &#39;&#39; })&quot;&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Message par défaut&#39;, status: &#39;&#39; })&quot;&gt;
         Default
       &lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Operation succeeded&#39;, status: &#39;success&#39; })&quot;&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Opération réussie !&#39;, status: &#39;success&#39; })&quot;&gt;
         Success
       &lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Something went wrong&#39;, status: &#39;error&#39; })&quot;&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Une erreur est survenue&#39;, status: &#39;error&#39; })&quot;&gt;
         Error
       &lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Check this detail&#39;, status: &#39;warning&#39; })&quot;&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Attention à ce point&#39;, status: &#39;warning&#39; })&quot;&gt;
         Warning
       &lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Helpful context&#39;, status: &#39;info&#39; })&quot;&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Information importante&#39;, status: &#39;info&#39; })&quot;&gt;
         Info
       &lt;/sonic-button&gt;
     &lt;/div&gt;
 </code></pre>
-<h2 id="label">Label</h2>
-<p>Set <strong><code>label</code></strong> for a bold title above <strong><code>text</code></strong>. <strong><code>title</code></strong> still works but is deprecated—use <strong><code>label</code></strong> in new code.</p>
+<h2 id="avec-titre">Avec titre</h2>
 <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
-      &lt;sonic-button
-        onclick=&quot;SonicToast.add({ label: &#39;Success&#39;, text: &#39;Your request was processed.&#39;, status: &#39;success&#39; })&quot;
-      &gt;
-        Toast with label
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ title: &#39;Succès&#39;, text: &#39;Votre demande a été traitée avec succès.&#39;, status: &#39;success&#39; })&quot;&gt;
+        Toast avec titre
       &lt;/sonic-button&gt;
-      &lt;sonic-button
-        onclick=&quot;SonicToast.add({ label: &#39;Error&#39;, text: &#39;Processing failed. Try again.&#39;, status: &#39;error&#39; })&quot;
-      &gt;
-        Error with label
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ title: &#39;Test&#39;, text: &#39;Une erreur est survenue lors du traitement.&#39;, status: &#39;error&#39; })&quot;&gt;
+        Toast d&#39;erreur avec titre
       &lt;/sonic-button&gt;
     &lt;/div&gt;
 </code></pre>
-<h2 id="html-in-text">HTML in text</h2>
-<p><strong><code>text</code></strong> (and <strong><code>label</code></strong>) can include HTML strings. Links and controls in <strong><code>text</code></strong> automatically enable <strong><code>preserve</code></strong> so the toast does not auto-hide while the user interacts.</p>
-<pre><code>&lt;sonic-button
-      onclick=&quot;SonicToast.add({ text: &#39;Message with &lt;strong&gt;HTML&lt;/strong&gt; and an &lt;a href=&amp;quot;#&amp;quot;&gt;action link&lt;/a&gt;&#39;, status: &#39;info&#39; })&quot;
-    &gt;
-      Toast with HTML
+<h2 id="avec-contenu-html">Avec contenu HTML</h2>
+<p>Le contenu du toast peut contenir du HTML.</p>
+<pre><code>&lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Message avec &lt;strong&gt;HTML&lt;/strong&gt; et un &lt;a href=&amp;quot;#&amp;quot;&gt;lien cliquable&lt;/a&gt;&#39;, status: &#39;info&#39; })&quot;&gt;
+      Toast avec HTML
     &lt;/sonic-button&gt;
 </code></pre>
-<h2 id="preserve">Preserve</h2>
-<p>Without <strong><code>preserve</code></strong>, toasts auto-hide after about six seconds (timer pauses on hover or focus). Set <strong><code>preserve</code></strong> to keep the toast until the user closes it.</p>
-<pre><code>&lt;sonic-button
-      onclick=&quot;SonicToast.add({ text: &#39;This toast stays until you dismiss it&#39;, status: &#39;info&#39;, preserve: true })&quot;
-    &gt;
-      Persistent toast
+<h2 id="persistance">Persistance</h2>
+<p>Par défaut, les toasts disparaissent automatiquement. Avec <code>preserve: true</code>, le toast reste affiché jusqu&#39;à ce qu&#39;il soit fermé manuellement.</p>
+<pre><code>&lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Ce toast ne disparaîtra pas automatiquement&#39;, status: &#39;info&#39;, preserve: true })&quot;&gt;
+      Toast persistant
     &lt;/sonic-button&gt;
 </code></pre>
-<h2 id="dismiss-forever">Dismiss forever</h2>
-<p>With <strong><code>dismissForever</code></strong> and a stable <strong><code>id</code></strong>, closing the toast stores dismissal in <strong><code>localStorage</code></strong>—<strong><code>SonicToast.add</code></strong> skips it on later visits. Duplicate payloads (same fields, ignoring <strong><code>id</code></strong>) are not queued twice.</p>
-<pre><code>&lt;sonic-button
-      onclick=&quot;SonicToast.add({ id: &#39;unique-toast-id&#39;, text: &#39;Dismiss forever hides this across reloads&#39;, status: &#39;info&#39;, dismissForever: true })&quot;
-    &gt;
-      Dismiss forever
+<h2 id="masquer-définitivement">Masquer définitivement</h2>
+<p>Avec <code>dismissForever: true</code> et un <code>id</code>, le toast peut être masqué définitivement. Une fois fermé, il ne réapparaîtra plus même après rechargement de la page.</p>
+<pre><code>&lt;sonic-button onclick=&quot;window.SonicToast.add({ id: &#39;unique-toast-id&#39;, text: &#39;Ce toast peut être masqué définitivement&#39;, status: &#39;info&#39;, dismissForever: true })&quot;&gt;
+      Toast avec dismiss forever
     &lt;/sonic-button&gt;
 </code></pre>
-<h2 id="ghost">Ghost</h2>
-<p><strong><code>ghost</code></strong> renders a semi-transparent, non-interactive toast—useful for loading or background states. <strong><code>SonicToast.removeAll</code></strong> leaves ghost toasts in place.</p>
-<pre><code>&lt;sonic-button
-      onclick=&quot;SonicToast.add({ text: &#39;Ghost toast (non-interactive)&#39;, status: &#39;info&#39;, ghost: true })&quot;
-    &gt;
-      Ghost toast
+<h2 id="fantôme">Fantôme</h2>
+<p>Avec <code>ghost: true</code>, le toast devient semi-transparent et non-interactif.</p>
+<pre><code>&lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast fantôme (semi-transparent)&#39;, status: &#39;info&#39;, ghost: true })&quot;&gt;
+      Toast ghost
     &lt;/sonic-button&gt;
 </code></pre>
-<h2 id="dismissal">Dismissal</h2>
-<p>Use static helpers to clear the stack from app logic (for example after navigation).</p>
-<h3 id="remove-all">Remove all</h3>
-<p>Removes every toast except <strong><code>ghost</code></strong> items.</p>
+<h2 id="méthodes-de-suppression">Méthodes de suppression</h2>
+<h3 id="tout-supprimer">Tout supprimer</h3>
+<p>Supprime tous les toasts sauf ceux marqués comme <code>ghost</code>.</p>
 <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Toast 1&#39;, status: &#39;info&#39; })&quot;&gt;Add toast 1&lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Toast 2&#39;, status: &#39;success&#39; })&quot;&gt;Add toast 2&lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Toast 3&#39;, status: &#39;warning&#39; })&quot;&gt;Add toast 3&lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.removeAll()&quot;&gt;Remove all&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast 1&#39;, status: &#39;info&#39; })&quot;&gt;Ajouter toast 1&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast 2&#39;, status: &#39;success&#39; })&quot;&gt;Ajouter toast 2&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast 3&#39;, status: &#39;warning&#39; })&quot;&gt;Ajouter toast 3&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.removeAll()&quot;&gt;Supprimer tous&lt;/sonic-button&gt;
     &lt;/div&gt;
 </code></pre>
-<h3 id="remove-by-status">Remove by status</h3>
+<h3 id="supprimer-par-statut">Supprimer par statut</h3>
+<p>Supprime tous les toasts d&#39;un statut spécifique.</p>
 <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Success toast&#39;, status: &#39;success&#39; })&quot;&gt;Success&lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Error toast&#39;, status: &#39;error&#39; })&quot;&gt;Error&lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Warning toast&#39;, status: &#39;warning&#39; })&quot;&gt;Warning&lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.removeItemsByStatus(&#39;success&#39;)&quot;&gt;Remove success&lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.removeItemsByStatus(&#39;error&#39;)&quot;&gt;Remove error&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast success&#39;, status: &#39;success&#39; })&quot;&gt;Success&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast error&#39;, status: &#39;error&#39; })&quot;&gt;Error&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast warning&#39;, status: &#39;warning&#39; })&quot;&gt;Warning&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.removeItemsByStatus(&#39;success&#39;)&quot;&gt;Supprimer success&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.removeItemsByStatus(&#39;error&#39;)&quot;&gt;Supprimer error&lt;/sonic-button&gt;
     &lt;/div&gt;
 </code></pre>
-<h3 id="remove-temporary-items">Remove temporary items</h3>
-<p>Removes toasts that are not <strong><code>preserve</code></strong>.</p>
+<h3 id="supprimer-les-éléments-temporaires">Supprimer les éléments temporaires</h3>
+<p>Supprime tous les toasts qui ne sont pas marqués comme <code>preserve</code>.</p>
 <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Temporary toast&#39;, status: &#39;info&#39; })&quot;&gt;Temporary&lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.add({ text: &#39;Persistent toast&#39;, status: &#39;success&#39;, preserve: true })&quot;&gt;
-        Persistent
-      &lt;/sonic-button&gt;
-      &lt;sonic-button onclick=&quot;SonicToast.removeTemporaryItems()&quot;&gt;Remove temporary&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast temporaire&#39;, status: &#39;info&#39; })&quot;&gt;Temporaire&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.add({ text: &#39;Toast persistant&#39;, status: &#39;success&#39;, preserve: true })&quot;&gt;Persistant&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;window.SonicToast.removeTemporaryItems()&quot;&gt;Supprimer temporaires&lt;/sonic-button&gt;
     &lt;/div&gt;
 </code></pre>
-<h2 id="combined-options">Combined options</h2>
-<pre><code>&lt;sonic-button
-      onclick=&quot;SonicToast.add({
+<h2 id="exemple-complet">Exemple complet</h2>
+<pre><code>&lt;sonic-button onclick=&quot;window.SonicToast.add({ 
       id: &#39;welcome-toast&#39;,
-      label: &#39;Welcome&#39;,
-      text: &#39;Welcome to the platform. Explore the docs to get started.&#39;,
+      title: &#39;Bienvenue&#39;,
+      text: &#39;Bienvenue sur notre plateforme ! Vous pouvez commencer à explorer les fonctionnalités.&#39;,
       status: &#39;success&#39;,
       dismissForever: true
-    })&quot;
-    &gt;
-      Full example
+    })&quot;&gt;
+      Toast complet
     &lt;/sonic-button&gt;
 </code></pre>
-<h2 id="accessibility">Accessibility</h2>
-<p>Each toast uses <strong><code>role=&quot;alert&quot;</code></strong> for <strong><code>error</code></strong> and <strong><code>role=&quot;status&quot;</code></strong> otherwise (with <strong><code>aria-live=&quot;polite&quot;</code></strong> when applicable). Status icons are decorative (<strong><code>aria-hidden</code></strong>). The close control has an i18n <strong><code>aria-label</code></strong>. When there is no <strong><code>label</code></strong>, a truncated string <strong><code>aria-label</code></strong> may be derived from plain <strong><code>text</code></strong>.</p>
-<h2 id="api-reference">API reference</h2>
-<p>Options passed to <strong><code>SonicToast.add(conf)</code></strong>:</p>
-<table>
-<thead>
-<tr>
-<th>Option</th>
-<th>Values</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody><tr>
-<td><code>text</code></td>
-<td>string · Lit template</td>
-<td>Main body; HTML strings are supported</td>
-</tr>
-<tr>
-<td><code>label</code></td>
-<td>string · Lit template</td>
-<td>Optional heading above <strong><code>text</code></strong></td>
-</tr>
-<tr>
-<td><code>title</code></td>
-<td>string · Lit template</td>
-<td>Deprecated alias for <strong><code>label</code></strong></td>
-</tr>
-<tr>
-<td><code>status</code></td>
-<td><code>success</code> · <code>error</code> · <code>warning</code> · <code>info</code> · `` (empty)</td>
-<td>Semantic styling and live region behavior</td>
-</tr>
-<tr>
-<td><code>id</code></td>
-<td>string · number</td>
-<td>Stable id for deduplication and <strong><code>dismissForever</code></strong> (defaults to timestamp)</td>
-</tr>
-<tr>
-<td><code>preserve</code></td>
-<td>boolean</td>
-<td>Skip auto-hide; forced when <strong><code>text</code></strong> contains interactive markup</td>
-</tr>
-<tr>
-<td><code>ghost</code></td>
-<td>boolean</td>
-<td>Semi-transparent and non-interactive; kept by <strong><code>removeAll</code></strong></td>
-</tr>
-<tr>
-<td><code>dismissForever</code></td>
-<td>boolean</td>
-<td>Persist dismissal in <strong><code>localStorage</code></strong> when closed (requires stable <strong><code>id</code></strong>)</td>
-</tr>
-<tr>
-<td><code>styleSheet</code></td>
-<td>modal style input</td>
-<td>Extra adopted styles on the toast item shadow root</td>
-</tr>
-<tr>
-<td><code>useSlot</code></td>
-<td>boolean</td>
-<td>Legacy: project <strong><code>text</code></strong> into the light DOM slot</td>
-</tr>
-</tbody></table>
-<table>
-<thead>
-<tr>
-<th>Method</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody><tr>
-<td><code>SonicToast.add(conf)</code></td>
-<td>Append a toast; returns the config or <strong><code>null</code></strong> if skipped (dismissed forever or duplicate)</td>
-</tr>
-<tr>
-<td><code>SonicToast.removeAll()</code></td>
-<td>Remove all non-<strong><code>ghost</code></strong> toasts</td>
-</tr>
-<tr>
-<td><code>SonicToast.removeItemsByStatus(status)</code></td>
-<td>Remove toasts matching <strong><code>status</code></strong></td>
-</tr>
-<tr>
-<td><code>SonicToast.removeItemById(id)</code></td>
-<td>Remove a single toast by <strong><code>id</code></strong></td>
-</tr>
-<tr>
-<td><code>SonicToast.removeTemporaryItems()</code></td>
-<td>Remove toasts without <strong><code>preserve</code></strong></td>
-</tr>
-</tbody></table>
-<p><strong><code>sonic-toast</code></strong> is mounted automatically; <strong><code>sonic-toast-item</code></strong> is internal. In iframes, toasts can delegate to the parent window via <strong><code>postMessage</code></strong>.</p>
 
     </article>
   </main>

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

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tooltip — Concorde</title>
-  <meta name="description" content="Tooltip shows a short label on hover (and on focus when the trigger can receive focus). Wrap the trigger in the default slot—buttons, icons, or plain text. Default placement is top (center-aligned). A">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/tooltip/tooltip, tooltip, Tooltip, UI component, sonic-tooltip, web component, label, placement, top, disabled, bottom, left, right, -start">
+  <meta name="description" content="By default, tooltip is centered next to its content">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/tooltip/tooltip, tooltip, Tooltip, UI component, sonic-tooltip, web component">
   <meta name="concorde-doc-id" content="core/components/ui/tooltip/tooltip">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/tooltip/tooltip.html">
 </head>
@@ -15,124 +15,63 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Tooltip</strong>. Tooltip shows a short label on hover (and on focus when the trigger can receive focus). Wrap the trigger in the default slot—buttons, icons, or plain text. Default placement is top (center-aligned). A <span>Doc ID: <code>core/components/ui/tooltip/tooltip</code>. Keywords: Concorde, supersoniks, core/components/ui/tooltip/tooltip, tooltip, Tooltip, UI component, sonic-tooltip, web component, label, placement, top, disabled, bottom, left, right, -start. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/tooltip/tooltip.html">https://concorde.supersoniks.org/crawl/core/components/ui/tooltip/tooltip.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Tooltip</strong>. By default, tooltip is centered next to its content <span>Doc ID: <code>core/components/ui/tooltip/tooltip</code>. Keywords: Concorde, supersoniks, core/components/ui/tooltip/tooltip, tooltip, Tooltip, UI component, sonic-tooltip, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/tooltip/tooltip.html">https://concorde.supersoniks.org/crawl/core/components/ui/tooltip/tooltip.html</a>.</span></p>
       <h1 id="tooltip">Tooltip</h1>
-<p>Tooltip shows a short <strong><code>label</code></strong> on hover (and on focus when the trigger can receive focus). Wrap the trigger in the default slot—buttons, icons, or plain text. Default <strong><code>placement</code></strong> is <strong><code>top</code></strong> (center-aligned). An empty <strong><code>label</code></strong> hides the bubble the same way as <strong><code>disabled</code></strong>.</p>
-<h2 id="basic-example">Basic example</h2>
-<pre><code>&lt;sonic-tooltip label=&quot;Additional context on hover&quot;&gt;
-      &lt;sonic-button variant=&quot;outline&quot;&gt;Hover me&lt;/sonic-button&gt;
-    &lt;/sonic-tooltip&gt;
+<pre><code>&lt;sonic-tooltip label=&quot;Tada : Text appears&quot;&gt;hover me&lt;/sonic-tooltip&gt;
 </code></pre>
 <h2 id="placement">Placement</h2>
-<p>Use <strong><code>top</code></strong> · <strong><code>bottom</code></strong> · <strong><code>left</code></strong> · <strong><code>right</code></strong> for the main axis. Add <strong><code>-start</code></strong> or <strong><code>-end</code></strong> to align the bubble along the anchor edge.</p>
-<pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
-      &lt;sonic-tooltip placement=&quot;top&quot; label=&quot;Top&quot;&gt;
-        &lt;sonic-button&gt;Top&lt;/sonic-button&gt;
-      &lt;/sonic-tooltip&gt;
-      &lt;sonic-tooltip placement=&quot;bottom&quot; label=&quot;Bottom&quot;&gt;
-        &lt;sonic-button&gt;Bottom&lt;/sonic-button&gt;
-      &lt;/sonic-tooltip&gt;
-      &lt;sonic-tooltip placement=&quot;right&quot; label=&quot;Right&quot;&gt;
-        &lt;sonic-button&gt;Right&lt;/sonic-button&gt;
-      &lt;/sonic-tooltip&gt;
-      &lt;sonic-tooltip placement=&quot;left&quot; label=&quot;Left&quot;&gt;
-        &lt;sonic-button&gt;Left&lt;/sonic-button&gt;
-      &lt;/sonic-tooltip&gt;
-    &lt;/div&gt;
+<p>By default, tooltip is centered next to its content</p>
+<pre><code>&lt;sonic-tooltip placement=&quot;top&quot; label=&quot;Top text&quot;&gt;
+      &lt;sonic-button&gt;Top&lt;/sonic-button&gt;
+    &lt;/sonic-tooltip&gt;
+    &lt;sonic-tooltip placement=&quot;bottom&quot; label=&quot;Bottom text&quot;&gt;
+      &lt;sonic-button&gt;Bottom&lt;/sonic-button&gt;
+    &lt;/sonic-tooltip&gt;
+     &lt;sonic-tooltip placement=&quot;right&quot; label=&quot;Right text&quot;&gt;
+      &lt;sonic-button&gt;Right&lt;/sonic-button&gt;
+    &lt;/sonic-tooltip&gt;
+    &lt;sonic-tooltip placement=&quot;left&quot; label=&quot;Left text&quot;&gt;
+      &lt;sonic-button&gt;Left&lt;/sonic-button&gt;
+    &lt;/sonic-tooltip&gt;
 </code></pre>
-<h3 id="aligned-placements">Aligned placements</h3>
+<h2 id="more-placement">More placement</h2>
 <pre><code>&lt;div class=&quot;flex gap-3 flex-wrap&quot;&gt;
-      &lt;sonic-tooltip placement=&quot;top-start&quot; label=&quot;Top start&quot;&gt;
+      &lt;sonic-tooltip placement=&quot;top-start&quot; label=&quot;My tooltip&quot;&gt;
         &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Top start&lt;/sonic-button&gt;
       &lt;/sonic-tooltip&gt;
-      &lt;sonic-tooltip placement=&quot;top-end&quot; label=&quot;Top end&quot;&gt;
+      &lt;sonic-tooltip placement=&quot;top-end&quot; label=&quot;My tooltip&quot;&gt;
         &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Top end&lt;/sonic-button&gt;
       &lt;/sonic-tooltip&gt;
-      &lt;sonic-tooltip placement=&quot;bottom-start&quot; label=&quot;Bottom start&quot;&gt;
+      &lt;sonic-tooltip placement=&quot;bottom-start&quot; label=&quot;My tooltip&quot;&gt;
         &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Bottom start&lt;/sonic-button&gt;
       &lt;/sonic-tooltip&gt;
-      &lt;sonic-tooltip placement=&quot;bottom-end&quot; label=&quot;Bottom end&quot;&gt;
+      &lt;sonic-tooltip placement=&quot;bottom-end&quot; label=&quot;My tooltip&quot;&gt;
         &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Bottom end&lt;/sonic-button&gt;
       &lt;/sonic-tooltip&gt;
-      &lt;sonic-tooltip placement=&quot;right-start&quot; label=&quot;Right start&quot;&gt;
+      &lt;sonic-tooltip placement=&quot;right-start&quot; label=&quot;My tooltip&quot;&gt;
         &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Right start&lt;/sonic-button&gt;
       &lt;/sonic-tooltip&gt;
-      &lt;sonic-tooltip placement=&quot;right-end&quot; label=&quot;Right end&quot;&gt;
+      &lt;sonic-tooltip placement=&quot;right-end&quot; label=&quot;My tooltip&quot;&gt;
         &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Right end&lt;/sonic-button&gt;
       &lt;/sonic-tooltip&gt;
-      &lt;sonic-tooltip placement=&quot;left-start&quot; label=&quot;Left start&quot;&gt;
+      &lt;sonic-tooltip placement=&quot;left-start&quot; label=&quot;My tooltip&quot;&gt;
         &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Left start&lt;/sonic-button&gt;
       &lt;/sonic-tooltip&gt;
-      &lt;sonic-tooltip placement=&quot;left-end&quot; label=&quot;Left end&quot;&gt;
+      &lt;sonic-tooltip placement=&quot;left-end&quot; label=&quot;My tooltip&quot;&gt;
         &lt;sonic-button class=&quot;size-40 bg-neutral-200 rounded-lg&quot;&gt;Left end&lt;/sonic-button&gt;
       &lt;/sonic-tooltip&gt;
     &lt;/div&gt;
 </code></pre>
-<h2 id="label-formatting">Label formatting</h2>
-<p><strong><code>label</code></strong> supports line breaks (<code>\n</code> in markup or multiline text). Lines are trimmed; <strong><code>&amp;nbsp;</code></strong> is normalized to spaces. <strong><code>white-space: pre-line</code></strong> preserves breaks in the bubble (max width <strong>18rem</strong>).</p>
-<pre><code>&lt;sonic-tooltip label=&quot;First line&amp;#10;Second line&quot;&gt;
-      &lt;sonic-button variant=&quot;outline&quot;&gt;Multiline label&lt;/sonic-button&gt;
-    &lt;/sonic-tooltip&gt;
-</code></pre>
 <h2 id="focusable">Focusable</h2>
-<p>On non-interactive triggers, set <strong><code>focusable</code></strong> so the host gets <strong><code>tabindex=&quot;0&quot;</code></strong> and the tooltip opens on keyboard focus as well as hover.</p>
-<pre><code>&lt;sonic-tooltip
-      focusable
-      label=&quot;The Concorde made its first transatlantic crossing on September 26, 1973&quot;
-    &gt;
-      &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble-question&quot;&gt;&lt;/sonic-icon&gt;
-      Focus or hover this text
+<pre><code>&lt;sonic-tooltip focusable label=&quot;The Concorde made its first transatlantic crossing on September 26, 1973&quot;&gt;
+      &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble-question&quot;&gt;&lt;/sonic-icon&gt; Focus or hover non interactive element 
     &lt;/sonic-tooltip&gt;
 </code></pre>
 <h2 id="disabled">Disabled</h2>
-<pre><code>&lt;sonic-tooltip disabled label=&quot;Not shown&quot;&gt;
+<pre><code>&lt;sonic-tooltip disabled label=&quot;Disabled text&quot;&gt;
       &lt;sonic-button&gt;Tooltip disabled&lt;/sonic-button&gt;
     &lt;/sonic-tooltip&gt;
 </code></pre>
-<h2 id="accessibility">Accessibility</h2>
-<p>The bubble uses <strong><code>popover=&quot;hint&quot;</code></strong> (non-modal, no pointer capture). Prefer <strong><code>focusable</code></strong> when the slotted content is not already focusable. When the Popover API is unavailable, the host falls back to the native <strong><code>title</code></strong> attribute with a single-line label. Opacity transitions respect <strong><code>prefers-reduced-motion</code></strong>.</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>label</code></td>
-<td>string</td>
-<td>Tooltip copy; whitespace-only values suppress the bubble</td>
-</tr>
-<tr>
-<td><code>placement</code></td>
-<td><code>top</code> (default) · <code>bottom</code> · <code>left</code> · <code>right</code> · <code>top-start</code> · <code>top-end</code> · <code>bottom-start</code> · <code>bottom-end</code> · <code>left-start</code> · <code>left-end</code> · <code>right-start</code> · <code>right-end</code></td>
-<td>Position relative to the trigger; repositions while open</td>
-</tr>
-<tr>
-<td><code>disabled</code></td>
-<td>boolean</td>
-<td>Suppress show/hide; sets <strong><code>tabindex=&quot;-1&quot;</code></strong> on the host</td>
-</tr>
-<tr>
-<td><code>focusable</code></td>
-<td>boolean</td>
-<td>Add <strong><code>tabindex=&quot;0&quot;</code></strong> on the host for keyboard access</td>
-</tr>
-</tbody></table>
-<table>
-<thead>
-<tr>
-<th>Slot</th>
-<th>Description</th>
-</tr>
-</thead>
-<tbody><tr>
-<td><em>(default)</em></td>
-<td>Trigger content (hover target)</td>
-</tr>
-</tbody></table>
 
     </article>
   </main>

package/docs/crawl/docs/_decorators/ancestor-attribute.html

@@ -66,11 +66,10 @@ export class DemoAncestorAttribute extends LitElement {
 <li>By default (<code>dynamic: false</code>), the value is read once at connect time and is not updated afterward</li>
 <li>With <code>{ dynamic: true }</code>, the property stays in sync when:<ul>
 <li>an ancestor <strong>changes</strong> the attribute value</li>
-<li>a <strong>closer</strong> ancestor <strong>gains</strong> / <strong>loses</strong> the attribute (fallback / <code>null</code>)</li>
-<li>the component is <strong>reparented</strong> (no extra opt-in) — parent <code>childList</code> only reacts if <em>this</em> node moves</li>
+<li>a <strong>closer</strong> ancestor <strong>gains</strong> the attribute (that value wins)</li>
+<li>the <strong>nearest</strong> ancestor <strong>loses</strong> the attribute (falls back to the next one up, or <code>null</code>)</li>
 </ul>
 </li>
-<li>Observers are <strong>shared</strong> (one per ancestor attribute / one per parent) so large lists of <code>sonic-icon</code> stay cheap on Firefox.</li>
 <li>When <code>dynamic</code> is enabled, updates also propagate to <code>@subscribe</code> / <code>@bind</code> paths that depend on the decorated property (e.g. <code>${dataProvider}</code>)</li>
 </ul>
 <h3 id="dynamic-mode">Dynamic mode</h3>

package/docs/crawl/docs/_getting-started/concorde-outside.html

@@ -17,9 +17,9 @@
     <article>
       <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Installation</strong>. The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started. <span>Doc ID: <code>docs/_getting-started/concorde-outside</code>. Keywords: Concorde, supersoniks, docs/_getting-started/concorde-outside, concorde-outside, Installation, guide, yarn ai:sync. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/concorde-outside.html</a>.</span></p>
       <h1 id="installation">Installation</h1>
-<sonic-alert status="info" label="Recommended — use the starter" background>
-<p>For almost all new projects, use <a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a></p>
-<p>You get Vite + TypeScript + Lit + Tailwind, an example component, <code>npx concorde enable-short-paths</code> ready to run, and <code>yarn ai:sync</code> for <a href="./ai-agents.html#ai-agents">AI agent skills</a> (<code>AGENTS.md</code>, Cursor / JetBrains rules) without extra setup.</p>
+<sonic-alert status="success" label="Recommended — use the starter" size="xl" background>
+  <p><strong>For almost all new projects, use <a href="https://www.npmjs.com/package/@supersoniks/create-concorde-ts-starter">create-concorde-ts-starter</a>.</strong></p>
+  <p>You get Vite + TypeScript + Lit + Tailwind, an example component, <code>npx concorde enable-short-paths</code> ready to run, and <code>yarn ai:sync</code> for <a href="./ai-agents.html#ai-agents">AI agent skills</a> (<code>AGENTS.md</code>, Cursor / JetBrains rules) without extra setup.</p>
 </sonic-alert>
 
 <h2 id="starter">Starter</h2>

package/docs/crawl/docs/_getting-started/start.html

@@ -18,7 +18,7 @@
       <p class="doc-lead" id="doc-summary"><strong>Concorde guide — Introduction</strong>. Based on lit.dev, Concorde is a collection of web components for shared apps and websites. <span>Doc ID: <code>docs/_getting-started/start</code>. Keywords: Concorde, supersoniks, docs/_getting-started/start, start, Introduction, guide, get, set, formDataProvider, @ancestorAttribute, @bind, serviceURL, yarn ai:sync, AGENTS.md. URL: <a href="https://concorde.supersoniks.org/crawl/docs/_getting-started/start.html">https://concorde.supersoniks.org/crawl/docs/_getting-started/start.html</a>.</span></p>
       <h1 id="introduction">Introduction</h1>
 <h2 id="what-is-concorde">What is Concorde?</h2>
-<p>Based on <strong><a href="https://lit.dev">lit.dev</a></strong>, Concorde is a collection of web components for shared apps and websites.<br>Build UIs without tying components to a specific host stack, while keeping visual consistency through the smallest set of CSS variables needed to define a theme.</p>
+<p>Based on <strong><a href="https://lit.dev">lit.dev</a></strong>, Concorde is a collection of web components for shared apps and websites.<br>Build UIs without tying components to a specific host stack, while keeping visual consistency through a small set of CSS variables.</p>
 <h2 id="why-and-use-case">Why and use case</h2>
 <p>In 2022, Supersoniks needed a new ticketing stack for nearly 100 sites — mobile apps, modern sites, and legacy PHP without bundlers.<br>One composable web-component library replaced many one-off apps. Lit was chosen for broad runtime compatibility.</p>
 <h3 id="stack">Stack</h3>