@supersoniks/concorde 5.0.2 → 5.0.3

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

@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html" data-doc-id="core/components/ui/menu/menu">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Menu — Concorde</title>
+  <meta name="description" content="Row">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/menu/menu, menu, Menu, UI component, sonic-menu, web component">
+  <meta name="concorde-doc-id" content="core/components/ui/menu/menu">
+  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html">
+</head>
+<body>
+  <header>
+    <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/menu/menu.md/menu" rel="nofollow">interactive version</a></p>
+  </header>
+  <main>
+    <article>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Menu</strong>. Row <span>Doc ID: <code>core/components/ui/menu/menu</code>. Keywords: Concorde, supersoniks, core/components/ui/menu/menu, menu, Menu, UI component, sonic-menu, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html">https://concorde.supersoniks.org/crawl/core/components/ui/menu/menu.html</a>.</span></p>
+      <h1 id="menu">Menu</h1>
+<h2 id="direction">Direction</h2>
+<pre><code>&lt;sonic-menu direction=&quot;row&quot; &gt;
+      &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;arrow-right&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Row
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Profile
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        History
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Orders
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item type=&quot;danger&quot;&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Log out
+      &lt;/sonic-menu-item&gt;
+    &lt;/sonic-menu&gt;
+    &lt;sonic-menu direction =&quot;column&quot; &gt;
+      &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;arrow-down&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Column
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Profile
+      &lt;/sonic-menu-item&gt;
+    &lt;sonic-menu-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        History
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Orders
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item type=&quot;danger&quot;&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Log out
+      &lt;/sonic-menu-item&gt;
+    &lt;/sonic-menu&gt;
+</code></pre>
+<h2 id="size">Size</h2>
+<pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
+      &lt;sonic-menu size=&quot;xs&quot; direction=&quot;row&quot;&gt;
+        &lt;sonic-menu-item&gt;
+          XS
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item&gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Profile
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item &gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          History
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item &gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Orders
+        &lt;/sonic-menu-item&gt;
+      &lt;/sonic-menu&gt;
+      &lt;sonic-menu size=&quot;sm&quot; direction=&quot;row&quot;&gt;
+        &lt;sonic-menu-item&gt;
+          Small
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item&gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Profile
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item &gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          History
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item &gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Orders
+        &lt;/sonic-menu-item&gt;
+      &lt;/sonic-menu&gt;
+      &lt;sonic-menu direction=&quot;row&quot;&gt;
+        &lt;sonic-menu-item&gt;
+          Medium
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item&gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Profile
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item &gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          History
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item &gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Orders
+        &lt;/sonic-menu-item&gt;
+      &lt;/sonic-menu&gt;
+      &lt;sonic-menu size=&quot;lg&quot; direction=&quot;row&quot;&gt;
+        &lt;sonic-menu-item&gt;
+          Large
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item&gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Profile
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item &gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          History
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item &gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Orders
+        &lt;/sonic-menu-item&gt;
+      &lt;/sonic-menu&gt;
+      &lt;sonic-menu size=&quot;xl&quot; direction=&quot;row&quot;&gt;
+        &lt;sonic-menu-item&gt;
+          XL
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item&gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Profile
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item &gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          History
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-menu-item &gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Orders
+        &lt;/sonic-menu-item&gt;
+      &lt;/sonic-menu&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="shadow">Shadow</h2>
+<pre><code>&lt;div class=&quot;grid gap-3&quot;&gt;
+      &lt;sonic-menu direction=&quot;row&quot;&gt;
+        &lt;sonic-menu-item&gt;
+          None
+        &lt;/sonic-menu-item&gt;
+      &lt;/sonic-menu&gt;
+      &lt;sonic-menu shadow=&quot;sm&quot; direction=&quot;row&quot;&gt;
+        &lt;sonic-menu-item&gt;
+          Small
+        &lt;/sonic-menu-item&gt;
+      &lt;/sonic-menu&gt;
+      &lt;sonic-menu shadow=&quot;md&quot; direction=&quot;row&quot;&gt;
+        &lt;sonic-menu-item&gt;
+          Medium
+        &lt;/sonic-menu-item&gt;
+      &lt;/sonic-menu&gt;
+      &lt;sonic-menu shadow=&quot;lg&quot; direction=&quot;row&quot;&gt;
+        &lt;sonic-menu-item&gt;
+          Large
+        &lt;/sonic-menu-item&gt;
+      &lt;/sonic-menu&gt;
+    &lt;/div&gt;
+</code></pre>
+<h2 id="align">Align</h2>
+<pre><code>&lt;sonic-menu  align=&quot;center&quot;&gt;
+      &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
+        Home
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
+        Profile
+      &lt;/sonic-menu-item&gt;
+    &lt;/sonic-menu&gt;
+    &lt;sonic-menu  align=&quot;left&quot;&gt;
+      &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
+        Home
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
+        Profile
+      &lt;/sonic-menu-item&gt;
+    &lt;/sonic-menu&gt;
+    &lt;sonic-menu  align=&quot;right&quot;&gt;
+      &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
+        Home
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
+        Profile
+      &lt;/sonic-menu-item&gt;
+    &lt;/sonic-menu&gt;
+</code></pre>
+<h2 id="more">More</h2>
+<pre><code>&lt;sonic-menu direction=&quot;row&quot;&gt;
+      &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot;&gt;&lt;/sonic-icon&gt;
+        Home
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
+        Profile
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        History
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Orders
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu slot=&quot;more&quot;&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-item &gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Messages
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
+        &lt;sonic-menu-item type=&quot;danger&quot;&gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Log out
+        &lt;/sonic-menu-item&gt;
+      &lt;/sonic-menu&gt;
+    &lt;/sonic-menu&gt;
+</code></pre>
+<h2 id="scrollable">Scrollable</h2>
+<pre><code>&lt;sonic-menu direction=&quot;row&quot; scrollable&gt;
+      &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Home
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Profile
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        History
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Orders
+      &lt;/sonic-menu-item&gt;   &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Home
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Profile
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        History
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Orders
+      &lt;/sonic-menu-item&gt;   &lt;sonic-menu-item variant=&quot;ghost&quot;&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;home&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Home
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item&gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Profile
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;clock-outline&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        History
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;bag&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Orders
+      &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-item &gt;
+        &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+        Messages
+      &lt;/sonic-menu-item&gt;
+      &lt;sonic-menu slot=&quot;more&quot;&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-item &gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;chat-bubble&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Messages
+        &lt;/sonic-menu-item&gt;
+        &lt;sonic-divider&gt;&lt;/sonic-divider&gt;
+        &lt;sonic-menu-item type=&quot;danger&quot;&gt;
+          &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;log-out&quot; slot=&quot;prefix&quot;&gt;&lt;/sonic-icon&gt;
+          Log out
+        &lt;/sonic-menu-item&gt;
+      &lt;/sonic-menu&gt;
+</code></pre>
+
+    </article>
+  </main>
+</body>
+</html>

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

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html" data-doc-id="core/components/ui/modal/modal">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Concorde — Concorde</title>
+  <meta name="description" content="Concorde: Simple modal Lorem ipsum dolor sit amet +33 Donec sed vestibulum augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus. Click don't close Confir">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/modal/modal, modal, UI component, sonic-modal, web component">
+  <meta name="concorde-doc-id" content="core/components/ui/modal/modal">
+  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html">
+</head>
+<body>
+  <header>
+    <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/modal/modal.md/modal" rel="nofollow">interactive version</a></p>
+  </header>
+  <main>
+    <article>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Concorde</strong>. Concorde: Simple modal Lorem ipsum dolor sit amet +33 Donec sed vestibulum augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus. Click don't close Confir <span>Doc ID: <code>core/components/ui/modal/modal</code>. Keywords: Concorde, supersoniks, core/components/ui/modal/modal, modal, UI component, sonic-modal, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html">https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html</a>.</span></p>
+      <h2 id="modal">Modal</h2>
+<pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;modalExample&#39;).show()&quot;&gt;
+      Simple modal
+    &lt;/sonic-button&gt;
+    &lt;sonic-modal id=&quot;modalExample&quot;&gt;
+      &lt;sonic-modal-title
+        &gt;Lorem ipsum dolor sit amet &lt;sonic-badge type=&quot;danger&quot; size=&quot;sm&quot;&gt;+33&lt;/sonic-badge&gt;&lt;/sonic-modal-title
+      &gt;
+      &lt;sonic-modal-subtitle&gt;Donec sed vestibulum augue.&lt;/sonic-modal-subtitle&gt;
+      &lt;sonic-modal-content&gt;
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
+      &lt;/sonic-modal-content&gt;
+      &lt;sonic-modal-actions formDataProvider=&quot;ModalMiniForm&quot;&gt;
+        &lt;sonic-button FormCheckable  minWidth=&quot;8rem&quot; value=&quot;true&quot; name=&quot;click&quot;&gt;
+          Click don&#39;t close
+        &lt;/sonic-button&gt;
+        &lt;sonic-button minWidth=&quot;8rem&quot; type=&quot;success&quot; hideModal&gt;Confirm&lt;/sonic-button&gt;
+      &lt;/sonic-modal-actions&gt;
+    &lt;/sonic-modal&gt;
+</code></pre>
+<h2 id="long-text">Long text</h2>
+<pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;modalText&#39;).show()&quot;&gt; Long text &lt;/sonic-button&gt;
+    &lt;sonic-modal align=&quot;left&quot; id=&quot;modalText&quot;&gt;
+      &lt;sonic-modal-title&gt;Infos et tarifs &lt;/sonic-modal-title&gt;
+      &lt;sonic-modal-content&gt;
+        &lt;div class=&quot;prose&quot;&gt;
+          &lt;p&gt;
+            &lt;strong&gt;Horaires d’ouverture &lt;/strong&gt;&lt;br /&gt;
+            Du mercredi au samedi de 13h30 à 19h et le dimanche de 13h30 à 18h&lt;br /&gt;
+            + horaires spécifiques pour événements ou festivals&amp;nbsp;
+          &lt;/p&gt;
+          &lt;p&gt;
+            &lt;strong&gt; Billetterie&amp;nbsp;&lt;br /&gt;&lt;/strong&gt;
+            La participation à certains événements et activités est soumise à un système de billetterie avec achats ou
+            réservations disponibles en ligne ou au guichet.&amp;nbsp;&amp;nbsp;&lt;strong&gt;&lt;br /&gt;&lt;/strong&gt;
+          &lt;/p&gt;
+          &lt;p&gt;
+            Les tarifs (Tarif plein / Tarif Réduit / Tarif Spécifique) sont indiqués pour chaque événement et peuvent
+            varier selon la nature de l’événement. Les tarifs sont identiques en ligne et au guichet. Il est néanmoins
+            conseillé de réserver les billets en avance pour s’assurer une place.
+          &lt;/p&gt;
+          &lt;p&gt;
+            L’accès au Skatepark, Fablab et Halle C sont soumis à adhésions. Les adhésions sont gratuites et
+            nominatives. Elle donnent accès aux espaces dans la limite des places disponibles.
+          &lt;/p&gt;
+          &lt;p&gt;
+            &lt;strong&gt;+ d’infos &lt;br /&gt;&lt;/strong&gt;billetterie@laconditionpublique.com &lt;br /&gt;+33 (0)328334833&amp;nbsp;
+          &lt;/p&gt;
+          &lt;br /&gt;
+          &lt;p&gt;
+            &lt;strong&gt;Accès &lt;br /&gt;&lt;/strong&gt;14, place Faidherbe &lt;br /&gt;59100 Roubaix &lt;br /&gt;Métro / Tram : Arrêt
+            Eurotéléport, Ligne 2 &lt;br /&gt;Bus / V’Lille : Arrêt Condition Publique&amp;nbsp;
+          &lt;/p&gt;
+          &lt;p&gt;
+            Accès handicapés : nous contacter avant votre venue au 03 28 33 48 33 ou par mail
+            billetterie@laconditionpublique.com
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/sonic-modal-content&gt;
+    &lt;/sonic-modal&gt;
+</code></pre>
+<h2 id="force-action">Force action</h2>
+<pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;force&#39;).show()&quot;&gt; Force action to close&lt;/sonic-button&gt;
+    &lt;sonic-modal forceAction id=&quot;force&quot;&gt;
+      &lt;sonic-modal-title&gt;Do you want some cookies ? &lt;/sonic-modal-title&gt;
+      &lt;sonic-modal-content&gt;
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
+      &lt;/sonic-modal-content&gt;
+      &lt;sonic-modal-actions &gt;
+        &lt;sonic-button hideModal minWidth=&quot;8rem&quot;&gt; Nope &lt;/sonic-button&gt;
+        &lt;sonic-button hideModal minWidth=&quot;8rem&quot; type=&quot;success&quot;&gt;Hell yes !&lt;/sonic-button&gt;
+      &lt;/sonic-modal-actions&gt;
+    &lt;/sonic-modal&gt;
+    &lt;/sonic-modal&gt;
+</code></pre>
+<h2 id="custom-dimensions">Custom dimensions</h2>
+<pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;CustomWidth&#39;).show()&quot;&gt; Custom width &lt;/sonic-button&gt;
+    &lt;sonic-modal maxHeight=&quot;50vh&quot; maxWidth=&quot;90vw&quot; width=&quot;100%&quot; height=&quot;100%&quot; id=&quot;CustomWidth&quot;&gt;
+      &lt;sonic-image
+        cover
+        objectPosition=&quot;center 20%&quot;
+        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;
+    &lt;/sonic-modal&gt;
+</code></pre>
+<h2 id="fullscreen">Fullscreen</h2>
+<pre><code>&lt;sonic-button onclick=&quot;document.getElementById(&#39;Fullscreen&#39;).show()&quot;&gt; Fullscreen &lt;/sonic-button&gt;
+    &lt;sonic-modal fullscreen id=&quot;Fullscreen&quot;&gt;
+      &lt;sonic-image
+        cover
+        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;
+    &lt;/sonic-modal&gt;
+</code></pre>
+
+    </article>
+  </main>
+</body>
+</html>

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

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html" data-doc-id="core/components/ui/pop/pop">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pop — Concorde</title>
+  <meta name="description" content="Default placement is bottom. Placement is written side-align, like sonic-tooltip: side is top, right, bottom or left, align is start, center or end. Without align, content is aligned on the start of t">
+  <meta name="keywords" content="Concorde, supersoniks, core/components/ui/pop/pop, pop, Pop, UI component, sonic-pop, web component, bottom, side-align, sonic-tooltip, side, top, right, left, align, 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>
+<body>
+  <header>
+    <p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/pop/pop.md/pop" rel="nofollow">interactive version</a></p>
+  </header>
+  <main>
+    <article>
+      <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Pop</strong>. Default placement is bottom. Placement is written side-align, like sonic-tooltip: side is top, right, bottom or left, align is start, center or end. Without align, content is aligned on the start of t <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, bottom, side-align, sonic-tooltip, side, top, right, left, align, 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;
+      &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;
+</code></pre>
+<p>Default placement is <code>bottom</code>. Placement is written <code>side-align</code>, like <code>sonic-tooltip</code>: <code>side</code> is <code>top</code>, <code>right</code>, <code>bottom</code> or <code>left</code>, <code>align</code> is <code>start</code>, <code>center</code> or <code>end</code>. Without <code>align</code>, content is aligned on the start of the trigger. If there is not enough room, content flips to the opposite side and stays inside the viewport.</p>
+<p>The former space syntax (<code>placement=&quot;bottom center&quot;</code>) still works but is deprecated.</p>
+<pre><code>&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;
+</code></pre>
+<h2 id="shadow">Shadow</h2>
+<p>Default shadow is <code>lg</code>.</p>
+<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;
+</code></pre>
+<h2 id="inline">Inline</h2>
+<p>By default, pop is vertically aligned to the middle. Use <code>inline</code> to align it on the text baseline, e.g. inside a sentence.</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="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;
+</code></pre>
+<h2 id="manual">manual</h2>
+<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-menu slot=&quot;content&quot;&gt;
+        &lt;sonic-menu-item&gt;Hourra !&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-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 the content closes the pop, as well as a click outside. Add <code>data-on-select=&quot;keep&quot;</code> on the content, or on any of its elements, to keep the pop open when interacting with it.</p>
+<pre><code>&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;
+</code></pre>
+<h2 id="keyboard">Keyboard</h2>
+<ul>
+<li><code>ArrowDown</code> on the trigger opens the pop.</li>
+<li><code>Escape</code> closes the last opened pop and gives focus back to its trigger.</li>
+</ul>
+<h2 id="methods-and-events">Methods and events</h2>
+<p><code>show()</code> and <code>hide()</code> open and close the pop programmatically (see <code>manual</code> above). The pop dispatches a <code>show</code> event when it opens and a <code>hide</code> event when it closes.</p>
+<pre><code class="language-js">const pop = document.querySelector(&quot;sonic-pop&quot;);
+pop.addEventListener(&quot;hide&quot;, () =&gt; console.log(&quot;pop closed&quot;));
+pop.show();
+</code></pre>
+<h2 id="styling">Styling</h2>
+<p>The content can be styled from outside with <code>::part(content)</code>.</p>
+<pre><code class="language-css">sonic-pop::part(content) {
+  border-radius: 0;
+}
+</code></pre>
+
+    </article>
+  </main>
+</body>
+</html>