@supersoniks/concorde 5.1.1 → 5.1.3

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

@@ -1,12 +1,12 @@
 # Pop
 
-**`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.
+**`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.
 
 ## Basic example
 
 <sonic-code>
   <template>
-    <sonic-pop class="inline-block">
+    <sonic-pop>
       <sonic-button>Notifications</sonic-button>
       <sonic-menu slot="content">
         <sonic-menu-item>
@@ -24,91 +24,42 @@
 
 ## Placement
 
-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`**.
+**`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.
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-pop class="inline-block" placement="left">
-        <sonic-button>Left</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="right">
-        <sonic-button>Right</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="top">
+      <sonic-pop 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-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
       </sonic-pop>
-      <sonic-pop class="inline-block" placement="bottom">
+      <sonic-pop 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-menu slot="content"><sonic-menu-item>Item</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>
-            <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
-            Notifications
-          </sonic-menu-item>
-        </sonic-menu>
+      <sonic-pop placement="left">
+        <sonic-button>Left</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop placement="right">
+        <sonic-button>Right</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
       </sonic-pop>
-      <sonic-pop class="inline-block" placement="top-center">
+      <sonic-pop 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-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
       </sonic-pop>
-      <sonic-pop class="inline-block" placement="left-center">
+      <sonic-pop placement="bottom-center">
+        <sonic-button>Bottom center</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
+      </sonic-pop>
+      <sonic-pop placement="left-center">
         <sonic-button>Left 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-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
       </sonic-pop>
-      <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 placement="bottom-end">
+        <sonic-button>Bottom end</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
       </sonic-pop>
     </div>
   </template>
@@ -116,46 +67,26 @@ Use **`top`** · **`bottom`** · **`left`** · **`right`** for the main axis. Ad
 
 ## Shadow
 
-Default **`shadow`** is **`lg`**. The shadow applies to the floating **`content`** panel.
+The panel shadow defaults to `lg`.
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-pop class="inline-block" shadow="none" placement="top">
+      <sonic-pop shadow="none">
         <sonic-button>None</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-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
       </sonic-pop>
-      <sonic-pop class="inline-block" shadow="sm" placement="top">
+      <sonic-pop shadow="sm">
         <sonic-button>Small</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-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
       </sonic-pop>
-      <sonic-pop class="inline-block" shadow="md" placement="top">
+      <sonic-pop shadow="md">
         <sonic-button>Medium</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-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
       </sonic-pop>
-      <sonic-pop class="inline-block" shadow="lg" placement="top">
+      <sonic-pop shadow="lg">
         <sonic-button>Large</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-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
       </sonic-pop>
     </div>
   </template>
@@ -163,48 +94,38 @@ Default **`shadow`** is **`lg`**. The shadow applies to the floating **`content`
 
 ## Inline
 
-By default the host is middle-aligned with siblings. Set **`inline`** to baseline-align the trigger inside running text.
+The host is middle-aligned by default. Set **`inline`** to baseline-align a trigger inside running text.
 
 <sonic-code>
   <template>
     <p>
-      The Concorde flew from Paris to
+      You are signed in as
       <sonic-pop inline>
-        <sonic-button variant="link">New York</sonic-button>
+        <sonic-button variant="link">ada.lindqvist@example.com</sonic-button>
         <sonic-menu slot="content">
-          <sonic-menu-item>See flights</sonic-menu-item>
-          <sonic-menu-item>Book a seat</sonic-menu-item>
+          <sonic-menu-item>Profile</sonic-menu-item>
+          <sonic-menu-item>Sign out</sonic-menu-item>
         </sonic-menu>
       </sonic-pop>
-      in about 3.5 hours.
+      on this device.
     </p>
   </template>
 </sonic-code>
 
 ## No toggle
 
-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.
+With **`noToggle`**, clicking the trigger opens the pop but does not close it. Close it with an outside click, Escape or **`hide()`**.
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <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 noToggle>
+        <sonic-button>No toggle</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
       </sonic-pop>
-      <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>
+        <sonic-button>Default toggle</sonic-button>
+        <sonic-menu slot="content"><sonic-menu-item>Item</sonic-menu-item></sonic-menu>
       </sonic-pop>
     </div>
   </template>
@@ -212,58 +133,55 @@ With **`noToggle`**, a click on the trigger still opens the pop but does not clo
 
 ## Manual control
 
-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.
+**`manual`** disables the built-in click and keyboard handling on the trigger. Call **`show()`** and **`hide()`** instead.
 
 <sonic-code>
   <template>
-    <sonic-pop class="inline-block" manual id="manualPop">
-      <sonic-button onclick="alert('Custom action without opening the pop')">Manual trigger</sonic-button>
+    <sonic-pop manual id="manualPop">
+      <sonic-button onclick="alert('Custom action, the pop stays closed')">Manual trigger</sonic-button>
       <sonic-menu slot="content">
-        <sonic-menu-item>It worked!</sonic-menu-item>
+        <sonic-menu-item>Opened from script</sonic-menu-item>
       </sonic-menu>
     </sonic-pop>
     <sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5" variant="outline">
-      <sonic-icon name="sparkles" library="custom"></sonic-icon>
-      Click to open pop
+      Open the pop
     </sonic-button>
   </template>
 </sonic-code>
 
 ## Keep open on select
 
-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.
+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.
 
 <sonic-code>
   <template>
     <div class="flex flex-wrap gap-2">
-      <sonic-pop class="inline-block">
+      <sonic-pop>
         <sonic-button>Closes on select</sonic-button>
         <div slot="content" class="grid gap-2 p-3">
-          <sonic-checkbox>Option A</sonic-checkbox>
-          <sonic-checkbox>Option B</sonic-checkbox>
+          <sonic-checkbox>Window seat</sonic-checkbox>
+          <sonic-checkbox>Extra baggage</sonic-checkbox>
         </div>
       </sonic-pop>
-      <sonic-pop class="inline-block">
+      <sonic-pop>
         <sonic-button>Stays open on select</sonic-button>
         <div slot="content" class="grid gap-2 p-3" data-on-select="keep">
-          <sonic-checkbox>Option A</sonic-checkbox>
-          <sonic-checkbox>Option B</sonic-checkbox>
+          <sonic-checkbox>Window seat</sonic-checkbox>
+          <sonic-checkbox>Extra baggage</sonic-checkbox>
         </div>
       </sonic-pop>
     </div>
   </template>
 </sonic-code>
 
-## Keyboard and dismissal
+## Keyboard
 
-**`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.
+**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.
 
 <sonic-code>
   <template>
-    <sonic-pop class="inline-block">
-      <sonic-button>Focus me — ArrowDown opens, Escape closes</sonic-button>
+    <sonic-pop>
+      <sonic-button>Focus me, then press ArrowDown</sonic-button>
       <sonic-menu slot="content">
         <sonic-menu-item>First item</sonic-menu-item>
         <sonic-menu-item>Second item</sonic-menu-item>
@@ -276,19 +194,23 @@ By default, a click inside **`content`** closes the pop (same as an outside clic
 
 | Attribute | Values | Description |
 |----------|---------|-------------|
-| `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()`** |
+| `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 |
 
 | Slot | Description |
 |------|-------------|
-| *(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.
+| *(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 |

package/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">50%</sonic-progress>
+    <sonic-progress value="50">Boarding 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% Used <span slot="remaining">20% left</span>
+      80% fuel used <span slot="remaining">20% left</span>
     </sonic-progress>
   </template>
 </sonic-code>