@supersoniks/concorde 5.0.4 → 5.0.5

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

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Pop — Concorde</title>
-  <meta name="description" content="Click to open pop">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/pop/pop, pop, Pop, UI component, sonic-pop, web component">
+  <meta name="description" content="sonic-pop anchors floating panels to a trigger: put the control in the default slot and the panel in slot=&quot;content&quot; (menus, forms, custom markup). Click toggles open/closed unless manual is set; defau">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/pop/pop, pop, Pop, UI component, sonic-pop, web component, slot=&quot;content&quot;, manual, placement, bottom, top, left, right, -start">
   <meta name="concorde-doc-id" content="core/components/ui/pop/pop">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html">
 </head>
@@ -15,86 +15,280 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Pop</strong>. Click to open pop <span>Doc ID: <code>core/components/ui/pop/pop</code>. Keywords: Concorde, supersoniks, core/components/ui/pop/pop, pop, Pop, UI component, sonic-pop, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html">https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html</a>.</span></p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Pop</strong>. sonic-pop anchors floating panels to a trigger: put the control in the default slot and the panel in slot=&quot;content&quot; (menus, forms, custom markup). Click toggles open/closed unless manual is set; defau <span>Doc ID: <code>core/components/ui/pop/pop</code>. Keywords: Concorde, supersoniks, core/components/ui/pop/pop, pop, Pop, UI component, sonic-pop, web component, slot=&quot;content&quot;, manual, placement, bottom, top, left, right, -start. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html">https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html</a>.</span></p>
       <h1 id="pop">Pop</h1>
-<h2 id="placement">Placement</h2>
-<pre><code>&lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;left&quot;&gt;
-      &lt;sonic-button&gt;Left&lt;/sonic-button&gt;
-      &lt;sonic-menu slot=&quot;content&quot;&gt;
-        &lt;sonic-menu-item&gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;Notifications&lt;/sonic-menu-item&gt;
-      &lt;/sonic-menu&gt;
-    &lt;/sonic-pop&gt;
-    &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;right&quot;&gt;
-      &lt;sonic-button&gt;Right&lt;/sonic-button&gt;
-      &lt;sonic-menu slot=&quot;content&quot;&gt;
-        &lt;sonic-menu-item&gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;Notifications&lt;/sonic-menu-item&gt;
-      &lt;/sonic-menu&gt;
-    &lt;/sonic-pop&gt;
-    &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;top&quot;&gt;
-      &lt;sonic-button&gt;Top&lt;/sonic-button&gt;
-      &lt;sonic-menu slot=&quot;content&quot;&gt;
-        &lt;sonic-menu-item&gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;Notifications&lt;/sonic-menu-item&gt;
-      &lt;/sonic-menu&gt;
-    &lt;/sonic-pop&gt;
-    &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;bottom&quot;&gt;
-      &lt;sonic-button&gt;Bottom&lt;/sonic-button&gt;
+<p><strong><code>sonic-pop</code></strong> anchors floating panels to a trigger: put the control in the <strong>default slot</strong> and the panel in <strong><code>slot=&quot;content&quot;</code></strong> (menus, forms, custom markup). Click toggles open/closed unless <strong><code>manual</code></strong> is set; default <strong><code>placement</code></strong> is <strong><code>bottom</code></strong> (start-aligned). Position updates while open and flips inside the viewport when space is tight.</p>
+<h2 id="basic-example">Basic example</h2>
+<pre><code>&lt;sonic-pop class=&quot;inline-block&quot;&gt;
+      &lt;sonic-button&gt;Notifications&lt;/sonic-button&gt;
       &lt;sonic-menu slot=&quot;content&quot;&gt;
-        &lt;sonic-menu-item&gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;Notifications&lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item&gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Notifications
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item&gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;settings&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Settings
+        &lt;/sonic-menu-item&gt;
       &lt;/sonic-menu&gt;
     &lt;/sonic-pop&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> · <strong><code>-center</code></strong> · <strong><code>-end</code></strong> to align along the trigger edge. With no align suffix, content aligns to <strong><code>start</code></strong>. Legacy space syntax (<code>placement=&quot;bottom center&quot;</code>) still works but is deprecated—prefer <strong><code>bottom-center</code></strong>.</p>
+<pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;left&quot;&gt;
+        &lt;sonic-button&gt;Left&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;right&quot;&gt;
+        &lt;sonic-button&gt;Right&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;top&quot;&gt;
+        &lt;sonic-button&gt;Top&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;bottom&quot;&gt;
+        &lt;sonic-button&gt;Bottom&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+    &lt;/div&gt;
+</code></pre>
+<h3 id="center-aligned-sides">Center-aligned sides</h3>
+<pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;bottom-center&quot;&gt;
+        &lt;sonic-button&gt;Bottom center&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;top-center&quot;&gt;
+        &lt;sonic-button&gt;Top center&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;left-center&quot;&gt;
+        &lt;sonic-button&gt;Left center&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; placement=&quot;right-center&quot;&gt;
+        &lt;sonic-button&gt;Right center&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+    &lt;/div&gt;
+</code></pre>
 <h2 id="shadow">Shadow</h2>
-<pre><code>&lt;sonic-pop class=&quot;inline-block&quot; shadow=&quot;none&quot; placement=&#39;top&#39; &gt;
-      &lt;sonic-button&gt;None&lt;/sonic-button&gt;
-      &lt;sonic-menu slot=&quot;content&quot;&gt;
-        &lt;sonic-menu-item&gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;Notifications&lt;/sonic-menu-item&gt;
-      &lt;/sonic-menu&gt;
-    &lt;/sonic-pop&gt;
-    &lt;sonic-pop class=&quot;inline-block&quot; shadow=&quot;sm&quot;  placement=&#39;top&#39;&gt;
-      &lt;sonic-button&gt;Small&lt;/sonic-button&gt;
-      &lt;sonic-menu slot=&quot;content&quot;&gt;
-        &lt;sonic-menu-item&gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;Notifications&lt;/sonic-menu-item&gt;
-      &lt;/sonic-menu&gt;
-    &lt;/sonic-pop&gt;
-    &lt;sonic-pop class=&quot;inline-block&quot; shadow=&quot;md&quot;  placement=&#39;top&#39;&gt;
-      &lt;sonic-button&gt;Medium&lt;/sonic-button&gt;
-      &lt;sonic-menu slot=&quot;content&quot;&gt;
-        &lt;sonic-menu-item&gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;Notifications&lt;/sonic-menu-item&gt;
-      &lt;/sonic-menu&gt;
-    &lt;/sonic-pop&gt;
-    &lt;sonic-pop class=&quot;inline-block&quot; shadow=&quot;lg&quot;  placement=&#39;top&#39;&gt;
-      &lt;sonic-button&gt;Large&lt;/sonic-button&gt;
-      &lt;sonic-menu slot=&quot;content&quot;&gt;
-        &lt;sonic-menu-item&gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;Notifications&lt;/sonic-menu-item&gt;
-      &lt;/sonic-menu&gt;
-    &lt;/sonic-pop&gt;
+<p>Default <strong><code>shadow</code></strong> is <strong><code>lg</code></strong>. The shadow applies to the floating <strong><code>content</code></strong> panel.</p>
+<pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; shadow=&quot;none&quot; placement=&quot;top&quot;&gt;
+        &lt;sonic-button&gt;None&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; shadow=&quot;sm&quot; placement=&quot;top&quot;&gt;
+        &lt;sonic-button&gt;Small&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; shadow=&quot;md&quot; placement=&quot;top&quot;&gt;
+        &lt;sonic-button&gt;Medium&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; shadow=&quot;lg&quot; placement=&quot;top&quot;&gt;
+        &lt;sonic-button&gt;Large&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+    &lt;/div&gt;
 </code></pre>
-<h2 id="notoggle">noToggle</h2>
-<pre><code>&lt;sonic-pop class=&quot;inline-block&quot;  noToggle&gt;
-      &lt;sonic-button&gt;No toggle on click&lt;/sonic-button&gt;
-      &lt;sonic-menu slot=&quot;content&quot;&gt;
-        &lt;sonic-menu-item&gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;Notifications&lt;/sonic-menu-item&gt;
-      &lt;/sonic-menu&gt;
-    &lt;/sonic-pop&gt;
-    &lt;sonic-pop class=&quot;inline-block&quot; &gt;
-      &lt;sonic-button&gt;Default toggle on click&lt;/sonic-button&gt;
-      &lt;sonic-menu slot=&quot;content&quot;&gt;
-        &lt;sonic-menu-item&gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;Notifications&lt;/sonic-menu-item&gt;
-      &lt;/sonic-menu&gt;
-    &lt;/sonic-pop&gt;
+<h2 id="inline">Inline</h2>
+<p>By default the host is middle-aligned with siblings. Set <strong><code>inline</code></strong> to baseline-align the trigger inside running text.</p>
+<pre><code>&lt;p&gt;
+      The Concorde flew from Paris to
+      &lt;sonic-pop inline&gt;
+        &lt;sonic-button variant=&quot;link&quot;&gt;New York&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;See flights&lt;/sonic-menu-item&gt;
+          &lt;sonic-menu-item&gt;Book a seat&lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+      in about 3.5 hours.
+    &lt;/p&gt;
 </code></pre>
-<h2 id="manual">manual</h2>
+<h2 id="no-toggle">No toggle</h2>
+<p>With <strong><code>noToggle</code></strong>, a click on the trigger still opens the pop but does not close it when it is already open. Use <strong><code>hide()</code></strong> or an outside click to dismiss.</p>
+<pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot; noToggle&gt;
+        &lt;sonic-button&gt;No toggle on click&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot;&gt;
+        &lt;sonic-button&gt;Default toggle on click&lt;/sonic-button&gt;
+        &lt;sonic-menu slot=&quot;content&quot;&gt;
+          &lt;sonic-menu-item&gt;
+            &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bell-notification&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+            Notifications
+          &lt;/sonic-menu-item&gt;
+        &lt;/sonic-menu&gt;
+      &lt;/sonic-pop&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="manual-control">Manual control</h2>
+<p>Set <strong><code>manual</code></strong> to disable built-in click and keyboard toggle on the trigger. Call <strong><code>show()</code></strong> and <strong><code>hide()</code></strong> on the element instead. The pop dispatches <strong><code>show</code></strong> when it opens and <strong><code>hide</code></strong> when it closes.</p>
+<p>Click <strong>Click to open pop</strong> to open the panel programmatically.</p>
 <pre><code>&lt;sonic-pop class=&quot;inline-block&quot; manual id=&quot;manualPop&quot;&gt;
-      &lt;sonic-button onclick=&quot;alert(&#39;customAction without opening Pop content&#39;)&quot;&gt;Manual doesn&#39;t open on click&lt;/sonic-button&gt;
+      &lt;sonic-button onclick=&quot;alert(&#39;Custom action without opening the pop&#39;)&quot;&gt;Manual trigger&lt;/sonic-button&gt;
       &lt;sonic-menu slot=&quot;content&quot;&gt;
-        &lt;sonic-menu-item&gt;Hourra !&lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item&gt;It worked!&lt;/sonic-menu-item&gt;
       &lt;/sonic-menu&gt;
     &lt;/sonic-pop&gt;
-    &lt;sonic-button onclick=&quot;document.getElementById(&#39;manualPop&#39;).show()&quot; class=&quot;ml-5&quot;  variant=&quot;outline&quot;&gt;
+    &lt;sonic-button onclick=&quot;document.getElementById(&#39;manualPop&#39;).show()&quot; class=&quot;ml-5&quot; variant=&quot;outline&quot;&gt;
       &lt;sonic-icon name=&quot;sparkles&quot; library=&quot;custom&quot;&gt;&lt;/sonic-icon&gt;
       Click to open pop
     &lt;/sonic-button&gt;
 </code></pre>
+<h2 id="keep-open-on-select">Keep open on select</h2>
+<p>By default, a click inside <strong><code>content</code></strong> closes the pop (same as an outside click). Set <strong><code>data-on-select=&quot;keep&quot;</code></strong> on the panel or a descendant to keep it open while selecting checkboxes, toggles, or menu items.</p>
+<pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot;&gt;
+        &lt;sonic-button&gt;Closes on select&lt;/sonic-button&gt;
+        &lt;div slot=&quot;content&quot; class=&quot;grid gap-2 p-3&quot;&gt;
+          &lt;sonic-checkbox&gt;Option A&lt;/sonic-checkbox&gt;
+          &lt;sonic-checkbox&gt;Option B&lt;/sonic-checkbox&gt;
+        &lt;/div&gt;
+      &lt;/sonic-pop&gt;
+      &lt;sonic-pop class=&quot;inline-block&quot;&gt;
+        &lt;sonic-button&gt;Stays open on select&lt;/sonic-button&gt;
+        &lt;div slot=&quot;content&quot; class=&quot;grid gap-2 p-3&quot; data-on-select=&quot;keep&quot;&gt;
+          &lt;sonic-checkbox&gt;Option A&lt;/sonic-checkbox&gt;
+          &lt;sonic-checkbox&gt;Option B&lt;/sonic-checkbox&gt;
+        &lt;/div&gt;
+      &lt;/sonic-pop&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="keyboard-and-dismissal">Keyboard and dismissal</h2>
+<p><strong><code>ArrowDown</code></strong> on the trigger opens the pop when it is closed. <strong><code>Escape</code></strong> closes the most recently opened pop (capture phase, before ancestors such as <strong><code>sonic-modal</code></strong>) and returns focus to that trigger. Multiple pops on the page stack in open order for Escape.</p>
+<pre><code>&lt;sonic-pop class=&quot;inline-block&quot;&gt;
+      &lt;sonic-button&gt;Focus me — ArrowDown opens, Escape closes&lt;/sonic-button&gt;
+      &lt;sonic-menu slot=&quot;content&quot;&gt;
+        &lt;sonic-menu-item&gt;First item&lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item&gt;Second item&lt;/sonic-menu-item&gt;
+      &lt;/sonic-menu&gt;
+    &lt;/sonic-pop&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>placement</code></td>
+<td><code>bottom</code> (default) · <code>top</code> · <code>left</code> · <code>right</code> · <code>top-start</code> · <code>top-center</code> · <code>top-end</code> · <code>bottom-start</code> · <code>bottom-center</code> · <code>bottom-end</code> · <code>left-start</code> · <code>left-center</code> · <code>left-end</code> · <code>right-start</code> · <code>right-center</code> · <code>right-end</code></td>
+<td>Side and alignment relative to the trigger; repositions while open and flips within the viewport</td>
+</tr>
+<tr>
+<td><code>shadow</code></td>
+<td><code>none</code> · <code>sm</code> · <code>md</code> · <code>lg</code> (default <code>lg</code>)</td>
+<td>Box shadow on the <strong><code>content</code></strong> panel</td>
+</tr>
+<tr>
+<td><code>inline</code></td>
+<td>boolean</td>
+<td>Baseline-align the host for inline triggers</td>
+</tr>
+<tr>
+<td><code>noToggle</code></td>
+<td>boolean</td>
+<td>When open, trigger click does not close the pop</td>
+</tr>
+<tr>
+<td><code>manual</code></td>
+<td>boolean</td>
+<td>Disable default trigger toggle; use <strong><code>show()</code></strong> / <strong><code>hide()</code></strong></td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Trigger; listens for <strong><code>click</code></strong> and <strong><code>keydown</code></strong> (<code>ArrowDown</code> opens when closed) unless <strong><code>manual</code></strong></td>
+</tr>
+<tr>
+<td><code>content</code></td>
+<td>Floating panel; receives focus <strong><code>tabindex=&quot;0&quot;</code></strong> while open</td>
+</tr>
+</tbody></table>
+<p><strong>Methods:</strong> <strong><code>show()</code></strong> · <strong><code>hide()</code></strong> on the host element.</p>
+<p><strong>Events:</strong> <strong><code>show</code></strong> · <strong><code>hide</code></strong> (non-bubbling <strong><code>CustomEvent</code></strong>).</p>
+<p><strong>Content attribute:</strong> <strong><code>data-on-select=&quot;keep&quot;</code></strong> on <strong><code>content</code></strong> or descendants prevents close-on-click inside the panel.</p>
 
     </article>
   </main>

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

@@ -3,9 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Progress bar — Concorde</title>
-  <meta name="description" content="Displays an indicator showing the completion progress of a task.">
-  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/progress/progress, progress, Progress bar, UI component, sonic-progress, web component">
+  <title>Progress — Concorde</title>
+  <meta name="description" content="Shows task completion on a value / max scale via a native &lt;progress&gt; bar. Omit value for an indeterminate loading animation. Put primary copy in the default slot and optional secondary text in remaini">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/progress/progress, progress, Progress, UI component, sonic-progress, web component, value, max, , remaining, invert, sonic-card,  to **, ** (default ">
   <meta name="concorde-doc-id" content="core/components/ui/progress/progress">
   <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/progress/progress.html">
 </head>
@@ -15,42 +15,115 @@
   </header>
   <main>
     <article>
-      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Progress bar</strong>. Displays an indicator showing the completion progress of a task. <span>Doc ID: <code>core/components/ui/progress/progress</code>. Keywords: Concorde, supersoniks, core/components/ui/progress/progress, progress, Progress bar, UI component, sonic-progress, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/progress/progress.html">https://concorde.supersoniks.org/crawl/core/components/ui/progress/progress.html</a>.</span></p>
-      <h1 id="progress-bar">Progress bar</h1>
-<p>Displays an indicator showing the completion progress of a task.</p>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Progress</strong>. Shows task completion on a value / max scale via a native &lt;progress&gt; bar. Omit value for an indeterminate loading animation. Put primary copy in the default slot and optional secondary text in remaini <span>Doc ID: <code>core/components/ui/progress/progress</code>. Keywords: Concorde, supersoniks, core/components/ui/progress/progress, progress, Progress, UI component, sonic-progress, web component, value, max, , remaining, invert, sonic-card,  to **, ** (default . URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/progress/progress.html">https://concorde.supersoniks.org/crawl/core/components/ui/progress/progress.html</a>.</span></p>
+      <h1 id="progress">Progress</h1>
+<p>Shows <strong>task completion</strong> on a <strong><code>value</code></strong> / <strong><code>max</code></strong> scale via a native <code>&lt;progress&gt;</code> bar. Omit <strong><code>value</code></strong> for an <strong>indeterminate</strong> loading animation. Put primary copy in the default slot and optional secondary text in <strong><code>remaining</code></strong>; set <strong><code>invert</code></strong> when the bar sits on a colored surface such as <strong><code>sonic-card</code></strong>.</p>
+<h2 id="basic-example">Basic example</h2>
+<p>Set <strong><code>value</code></strong> from <code>0</code> to <strong><code>max</code></strong> (default <code>100</code>). Label text uses the type color.</p>
+<pre><code>&lt;sonic-progress value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
+</code></pre>
 <h2 id="indeterminate">Indeterminate</h2>
+<p>With no <strong><code>value</code></strong>, the bar animates until progress is known.</p>
 <pre><code>&lt;sonic-progress&gt;&lt;/sonic-progress&gt;
 </code></pre>
-<h2 id="remaining">Remaining</h2>
-<pre><code>&lt;sonic-progress  type=&quot;danger&quot; value=&quot;80&quot;&gt;
-    80% Used &lt;span slot=&quot;remaining&quot;&gt;20% left&lt;/span&gt;
-  &lt;/sonic-progress&gt;
-</code></pre>
-<h2 id="sizes">Sizes</h2>
+<h2 id="type">Type</h2>
+<p>Semantic color follows <strong><code>type</code></strong>. With no <strong><code>type</code></strong>, behavior is <code>default</code>.</p>
 <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
-  &lt;sonic-progress  size=&quot;2xs&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
-  &lt;sonic-progress  size=&quot;xs&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
-  &lt;sonic-progress  size=&quot;sm&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
-  &lt;sonic-progress  size=&quot;md&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
-  &lt;sonic-progress  size=&quot;lg&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
-  &lt;sonic-progress  size=&quot;xl&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
-  &lt;sonic-progress  size=&quot;2xl&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
-&lt;/div&gt;
+      &lt;sonic-progress value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
+      &lt;sonic-progress type=&quot;primary&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
+      &lt;sonic-progress type=&quot;neutral&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
+      &lt;sonic-progress type=&quot;info&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
+      &lt;sonic-progress type=&quot;warning&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
+      &lt;sonic-progress type=&quot;success&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
+      &lt;sonic-progress type=&quot;danger&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
+    &lt;/div&gt;
 </code></pre>
-<h2 id="type">Type</h2>
+<h2 id="size">Size</h2>
+<p>Bar height scales with typography via <strong><code>size</code></strong>. With no <strong><code>size</code></strong>, font size matches <strong><code>md</code></strong> (<code>1rem</code>).</p>
 <pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
-  &lt;sonic-progress  value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
-  &lt;sonic-progress  type=&quot;info&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
-  &lt;sonic-progress  type=&quot;warning&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
-  &lt;sonic-progress  type=&quot;success&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
-  &lt;sonic-progress  type=&quot;danger&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
-&lt;/div&gt;
+      &lt;sonic-progress size=&quot;2xs&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
+      &lt;sonic-progress size=&quot;xs&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
+      &lt;sonic-progress size=&quot;sm&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
+      &lt;sonic-progress size=&quot;md&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
+      &lt;sonic-progress size=&quot;lg&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
+      &lt;sonic-progress size=&quot;xl&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
+      &lt;sonic-progress size=&quot;2xl&quot; value=&quot;25&quot;&gt;25%&lt;/sonic-progress&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="default-and-remaining-slots">Default and remaining slots</h2>
+<p>The default slot is the main label (left). <strong><code>remaining</code></strong> is right-aligned with lighter weight—use it for “left to complete” copy.</p>
+<pre><code>&lt;sonic-progress type=&quot;danger&quot; value=&quot;80&quot;&gt;
+      80% Used &lt;span slot=&quot;remaining&quot;&gt;20% left&lt;/span&gt;
+    &lt;/sonic-progress&gt;
 </code></pre>
 <h2 id="invert">Invert</h2>
-<pre><code>&lt;div class=&quot;bg-neutral-900 p-4 rounded-md&quot;&gt;
-  &lt;sonic-progress  type=&quot;invert&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
-&lt;/div&gt;
+<p>On tinted backgrounds, <strong><code>invert</code></strong> adjusts track and fill tokens so the bar stays readable (pair with matching <strong><code>type</code></strong> on <strong><code>sonic-card</code></strong> or similar).</p>
+<pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
+      &lt;sonic-card type=&quot;info&quot;&gt;
+        &lt;sonic-progress invert type=&quot;info&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
+      &lt;/sonic-card&gt;
+      &lt;sonic-card type=&quot;warning&quot;&gt;
+        &lt;sonic-progress invert type=&quot;warning&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
+      &lt;/sonic-card&gt;
+      &lt;sonic-card type=&quot;success&quot;&gt;
+        &lt;sonic-progress invert type=&quot;success&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
+      &lt;/sonic-card&gt;
+      &lt;sonic-card type=&quot;danger&quot;&gt;
+        &lt;sonic-progress invert type=&quot;danger&quot; value=&quot;50&quot;&gt;50%&lt;/sonic-progress&gt;
+      &lt;/sonic-card&gt;
+    &lt;/div&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>value</code></td>
+<td>number</td>
+<td>Completion amount; omit for indeterminate state</td>
+</tr>
+<tr>
+<td><code>max</code></td>
+<td>number (default <code>100</code>)</td>
+<td>Upper bound for <strong><code>value</code></strong></td>
+</tr>
+<tr>
+<td><code>type</code></td>
+<td><code>default</code> (default) · <code>primary</code> · <code>neutral</code> · <code>warning</code> · <code>info</code> · <code>success</code> · <code>danger</code></td>
+<td>Semantic bar and label color</td>
+</tr>
+<tr>
+<td><code>size</code></td>
+<td><code>2xs</code> · <code>xs</code> · <code>sm</code> · <code>md</code> · <code>lg</code> · <code>xl</code> · <code>2xl</code> · <code>inherit</code></td>
+<td>Typography scale (bar height follows <code>em</code>)</td>
+</tr>
+<tr>
+<td><code>invert</code></td>
+<td>boolean</td>
+<td>High-contrast tokens on colored backgrounds</td>
+</tr>
+</tbody></table>
+<table>
+<thead>
+<tr>
+<th>Slot</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody><tr>
+<td><em>(default)</em></td>
+<td>Primary label below the bar (left)</td>
+</tr>
+<tr>
+<td><code>remaining</code></td>
+<td>Secondary label below the bar (right)</td>
+</tr>
+</tbody></table>
 
     </article>
   </main>