@supersoniks/concorde 5.1.2 → 5.1.3-immutable.1

package/docs/src/core/components/ui/pop/pop.md

@@ -1,12 +1,12 @@
 # Pop
 
-**`sonic-pop`** anchors a floating panel to a trigger: put the control in the default slot and the panel (menu, form, any markup) in **`slot="content"`**. A click on the trigger toggles the panel unless **`manual`** is set. The panel follows the trigger while open and flips to stay inside the viewport.
+**`sonic-pop`** anchors floating panels to a trigger: put the control in the **default slot** and the panel in **`slot="content"`** (menus, forms, custom markup). Click toggles open/closed unless **`manual`** is set; default **`placement`** is **`bottom`** (start-aligned). Position updates while open and flips inside the viewport when space is tight.
 
 ## Basic example
 
 <sonic-code>
   <template>
-    <sonic-pop>
+    <sonic-pop class="inline-block">
       <sonic-button>Notifications</sonic-button>
       <sonic-menu slot="content">
         <sonic-menu-item>
@@ -24,42 +24,91 @@
 
 ## Placement
 
-**`placement`** is a side (`top` · `bottom` · `left` · `right`) with an optional alignment suffix (`-start` · `-center` · `-end`). Default is `bottom`; without a suffix, the panel aligns to `start`. The space syntax (`bottom center`) is deprecated.
+Use **`top`** · **`bottom`** · **`left`** · **`right`** for the main axis. Add **`-start`** · **`-center`** · **`-end`** to align along the trigger edge. With no align suffix, content aligns to **`start`**. Legacy space syntax (`placement="bottom center"`) still works but is deprecated—prefer **`bottom-center`**.
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-pop placement="top">
-        <sonic-button>Top</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
-      </sonic-pop>
-      <sonic-pop placement="bottom">
-        <sonic-button>Bottom</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
-      </sonic-pop>
-      <sonic-pop placement="left">
+      <sonic-pop class="inline-block" placement="left">
         <sonic-button>Left</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
       </sonic-pop>
-      <sonic-pop placement="right">
+      <sonic-pop class="inline-block" placement="right">
         <sonic-button>Right</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
       </sonic-pop>
-      <sonic-pop placement="top-center">
-        <sonic-button>Top center</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      <sonic-pop class="inline-block" placement="top">
+        <sonic-button>Top</sonic-button>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
       </sonic-pop>
-      <sonic-pop placement="bottom-center">
+      <sonic-pop class="inline-block" placement="bottom">
+        <sonic-button>Bottom</sonic-button>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
+      </sonic-pop>
+    </div>
+  </template>
+</sonic-code>
+
+### Center-aligned sides
+
+<sonic-code>
+  <template>
+    <div class="flex flex-wrap gap-2">
+      <sonic-pop class="inline-block" placement="bottom-center">
         <sonic-button>Bottom center</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
       </sonic-pop>
-      <sonic-pop placement="left-center">
+      <sonic-pop class="inline-block" placement="top-center">
+        <sonic-button>Top center</sonic-button>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
+      </sonic-pop>
+      <sonic-pop class="inline-block" placement="left-center">
         <sonic-button>Left center</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
       </sonic-pop>
-      <sonic-pop placement="bottom-end">
-        <sonic-button>Bottom end</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      <sonic-pop class="inline-block" placement="right-center">
+        <sonic-button>Right center</sonic-button>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
       </sonic-pop>
     </div>
   </template>
@@ -67,26 +116,46 @@
 
 ## Shadow
 
-The panel shadow defaults to `lg`.
+Default **`shadow`** is **`lg`**. The shadow applies to the floating **`content`** panel.
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-pop shadow="none">
+      <sonic-pop class="inline-block" shadow="none" placement="top">
         <sonic-button>None</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
       </sonic-pop>
-      <sonic-pop shadow="sm">
+      <sonic-pop class="inline-block" shadow="sm" placement="top">
         <sonic-button>Small</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
       </sonic-pop>
-      <sonic-pop shadow="md">
+      <sonic-pop class="inline-block" shadow="md" placement="top">
         <sonic-button>Medium</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
       </sonic-pop>
-      <sonic-pop shadow="lg">
+      <sonic-pop class="inline-block" shadow="lg" placement="top">
         <sonic-button>Large</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
       </sonic-pop>
     </div>
   </template>
@@ -94,38 +163,48 @@ The panel shadow defaults to `lg`.
 
 ## Inline
 
-The host is middle-aligned by default. Set **`inline`** to baseline-align a trigger inside running text.
+By default the host is middle-aligned with siblings. Set **`inline`** to baseline-align the trigger inside running text.
 
 <sonic-code>
   <template>
     <p>
-      You are signed in as
+      The Concorde flew from Paris to
       <sonic-pop inline>
-        <sonic-button variant="link">ada.lindqvist@example.com</sonic-button>
+        <sonic-button variant="link">New York</sonic-button>
         <sonic-menu slot="content">
-          <sonic-menu-item>Profile</sonic-menu-item>
-          <sonic-menu-item>Sign out</sonic-menu-item>
+          <sonic-menu-item>See flights</sonic-menu-item>
+          <sonic-menu-item>Book a seat</sonic-menu-item>
         </sonic-menu>
       </sonic-pop>
-      on this device.
+      in about 3.5 hours.
     </p>
   </template>
 </sonic-code>
 
 ## No toggle
 
-With **`noToggle`**, clicking the trigger opens the pop but does not close it. Close it with an outside click, Escape or **`hide()`**.
+With **`noToggle`**, a click on the trigger still opens the pop but does not close it when it is already open. Use **`hide()`** or an outside click to dismiss.
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-pop noToggle>
-        <sonic-button>No toggle</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      <sonic-pop class="inline-block" noToggle>
+        <sonic-button>No toggle on click</sonic-button>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
       </sonic-pop>
-      <sonic-pop>
-        <sonic-button>Default toggle</sonic-button>
-        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      <sonic-pop class="inline-block">
+        <sonic-button>Default toggle on click</sonic-button>
+        <sonic-menu slot="content">
+          <sonic-menu-item>
+            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+            Notifications
+          </sonic-menu-item>
+        </sonic-menu>
       </sonic-pop>
     </div>
   </template>
@@ -133,55 +212,58 @@ With **`noToggle`**, clicking the trigger opens the pop but does not close it. C
 
 ## Manual control
 
-**`manual`** disables the built-in click and keyboard handling on the trigger. Call **`show()`** and **`hide()`** instead.
+Set **`manual`** to disable built-in click and keyboard toggle on the trigger. Call **`show()`** and **`hide()`** on the element instead. The pop dispatches **`show`** when it opens and **`hide`** when it closes.
+
+Click **Click to open pop** to open the panel programmatically.
 
 <sonic-code>
   <template>
-    <sonic-pop manual id="manualPop">
-      <sonic-button onclick="alert('Custom action, the pop stays closed')">Manual trigger</sonic-button>
+    <sonic-pop class="inline-block" manual id="manualPop">
+      <sonic-button onclick="alert('Custom action without opening the pop')">Manual trigger</sonic-button>
       <sonic-menu slot="content">
-        <sonic-menu-item>Opened from script</sonic-menu-item>
+        <sonic-menu-item>It worked!</sonic-menu-item>
       </sonic-menu>
     </sonic-pop>
     <sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5" variant="outline">
-      Open the pop
+      <sonic-icon name="sparkles" library="custom"></sonic-icon>
+      Click to open pop
     </sonic-button>
   </template>
 </sonic-code>
 
 ## Keep open on select
 
-A click inside the panel closes the pop by default. Set **`data-on-select="keep"`** on the panel or a descendant to keep it open, for example while ticking checkboxes.
+By default, a click inside **`content`** closes the pop (same as an outside click). Set **`data-on-select="keep"`** on the panel or a descendant to keep it open while selecting checkboxes, toggles, or menu items.
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-pop>
+      <sonic-pop class="inline-block">
         <sonic-button>Closes on select</sonic-button>
         <div slot="content" class="grid gap-2 p-3">
-          <sonic-checkbox>Window seat</sonic-checkbox>
-          <sonic-checkbox>Extra baggage</sonic-checkbox>
+          <sonic-checkbox>Option A</sonic-checkbox>
+          <sonic-checkbox>Option B</sonic-checkbox>
         </div>
       </sonic-pop>
-      <sonic-pop>
+      <sonic-pop class="inline-block">
         <sonic-button>Stays open on select</sonic-button>
         <div slot="content" class="grid gap-2 p-3" data-on-select="keep">
-          <sonic-checkbox>Window seat</sonic-checkbox>
-          <sonic-checkbox>Extra baggage</sonic-checkbox>
+          <sonic-checkbox>Option A</sonic-checkbox>
+          <sonic-checkbox>Option B</sonic-checkbox>
         </div>
       </sonic-pop>
     </div>
   </template>
 </sonic-code>
 
-## Keyboard
+## Keyboard and dismissal
 
-**ArrowDown** on the trigger opens the pop. **Escape** closes the most recently opened pop, before an enclosing `sonic-modal`, and returns focus to its trigger.
+**`ArrowDown`** on the trigger opens the pop when it is closed. **`Escape`** closes the most recently opened pop (capture phase, before ancestors such as **`sonic-modal`**) and returns focus to that trigger. Multiple pops on the page stack in open order for Escape.
 
 <sonic-code>
   <template>
-    <sonic-pop>
-      <sonic-button>Focus me, then press ArrowDown</sonic-button>
+    <sonic-pop class="inline-block">
+      <sonic-button>Focus me — ArrowDown opens, Escape closes</sonic-button>
       <sonic-menu slot="content">
         <sonic-menu-item>First item</sonic-menu-item>
         <sonic-menu-item>Second item</sonic-menu-item>
@@ -194,23 +276,19 @@ A click inside the panel closes the pop by default. Set **`data-on-select="keep"
 
 | Attribute | Values | Description |
 |----------|---------|-------------|
-| `placement` | `top` · `bottom` (default) · `left` · `right`, each with optional `-start` · `-center` · `-end` | Side and alignment relative to the trigger |
-| `shadow` | `none` · `sm` · `md` · `lg` (default `lg`) | Panel shadow |
-| `inline` | boolean | Baseline-align the host in text |
-| `noToggle` | boolean | A trigger click does not close an open pop |
-| `manual` | boolean | Disable trigger click and keyboard handling |
+| `placement` | `bottom` (default) · `top` · `left` · `right` · `top-start` · `top-center` · `top-end` · `bottom-start` · `bottom-center` · `bottom-end` · `left-start` · `left-center` · `left-end` · `right-start` · `right-center` · `right-end` | Side and alignment relative to the trigger; repositions while open and flips within the viewport |
+| `shadow` | `none` · `sm` · `md` · `lg` (default `lg`) | Box shadow on the **`content`** panel |
+| `inline` | boolean | Baseline-align the host for inline triggers |
+| `noToggle` | boolean | When open, trigger click does not close the pop |
+| `manual` | boolean | Disable default trigger toggle; use **`show()`** / **`hide()`** |
 
 | Slot | Description |
 |------|-------------|
-| *(default)* | Trigger |
-| `content` | Floating panel; `data-on-select="keep"` inside it prevents close on click |
-
-| Method | Description |
-|--------|-------------|
-| `show()` | Open the panel |
-| `hide()` | Close the panel |
-
-| Event | Description |
-|-------|-------------|
-| `show` | Panel opened |
-| `hide` | Panel closed |
+| *(default)* | Trigger; listens for **`click`** and **`keydown`** (`ArrowDown` opens when closed) unless **`manual`** |
+| `content` | Floating panel; receives focus **`tabindex="0"`** while open |
+
+**Methods:** **`show()`** · **`hide()`** on the host element.
+
+**Events:** **`show`** · **`hide`** (non-bubbling **`CustomEvent`**).
+
+**Content attribute:** **`data-on-select="keep"`** on **`content`** or descendants prevents close-on-click inside the panel.

package/docs/src/core/components/ui/progress/progress.md

@@ -8,7 +8,7 @@ Set **`value`** from `0` to **`max`** (default `100`). Label text uses the type
 
 <sonic-code>
   <template>
-    <sonic-progress value="50">Boarding 50%</sonic-progress>
+    <sonic-progress value="50">50%</sonic-progress>
   </template>
 </sonic-code>
 
@@ -65,7 +65,7 @@ The default slot is the main label (left). **`remaining`** is right-aligned with
 <sonic-code>
   <template>
     <sonic-progress type="danger" value="80">
-      80% fuel used <span slot="remaining">20% left</span>
+      80% Used <span slot="remaining">20% left</span>
     </sonic-progress>
   </template>
 </sonic-code>