@supersoniks/concorde 5.0.3 → 5.0.5

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

@@ -1,104 +1,169 @@
 # Pop
 
-## Placement
+**`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 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-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 class="inline-block" placement="bottom">
-      <sonic-button>Bottom</sonic-button>
+    <sonic-pop class="inline-block">
+      <sonic-button>Notifications</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-item>
+          <sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
+          Notifications
+        </sonic-menu-item>
+        <sonic-menu-item>
+          <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
+          Settings
+        </sonic-menu-item>
       </sonic-menu>
     </sonic-pop>
   </template>
 </sonic-code>
 
-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 the trigger. If there is not enough room, content flips to the opposite side and stays inside the viewport.
+## Placement
 
-The former space syntax (`placement="bottom center"`) still works but 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>
-    <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>
-    <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><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-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 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-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 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>
+            <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-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>
+            <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-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>
 </sonic-code>
 
 ## Shadow
 
-Default shadow is `lg`.
+Default **`shadow`** is **`lg`**. The shadow applies to the floating **`content`** panel.
 
 <sonic-code>
   <template>
-    <sonic-pop class="inline-block" shadow="none" placement='top' >
-      <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-pop>
-    <sonic-pop class="inline-block" shadow="sm"  placement='top'>
-      <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-pop>
-    <sonic-pop class="inline-block" shadow="md"  placement='top'>
-      <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-pop>
-    <sonic-pop class="inline-block" shadow="lg"  placement='top'>
-      <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-pop>
+    <div class="flex flex-wrap gap-2">
+      <sonic-pop class="inline-block" shadow="none" placement="top">
+        <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-pop>
+      <sonic-pop class="inline-block" shadow="sm" placement="top">
+        <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-pop>
+      <sonic-pop class="inline-block" shadow="md" placement="top">
+        <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-pop>
+      <sonic-pop class="inline-block" shadow="lg" placement="top">
+        <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-pop>
+    </div>
   </template>
 </sonic-code>
 
 ## Inline
 
-By default, pop is vertically aligned to the middle. Use `inline` to align it on the text baseline, e.g. inside a sentence.
+By default the host is middle-aligned with siblings. Set **`inline`** to baseline-align the trigger inside running text.
 
 <sonic-code>
   <template>
@@ -116,35 +181,50 @@ By default, pop is vertically aligned to the middle. Use `inline` to align it on
   </template>
 </sonic-code>
 
-## noToggle
+## 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.
+
 <sonic-code>
   <template>
-    <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 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 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>
+      <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>
 </sonic-code>
 
+## 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
 <sonic-code>
   <template>
     <sonic-pop class="inline-block" manual id="manualPop">
-      <sonic-button onclick="alert('customAction without opening Pop content')">Manual doesn't open on click</sonic-button>
+      <sonic-button onclick="alert('Custom action without opening the pop')">Manual trigger</sonic-button>
       <sonic-menu slot="content">
-        <sonic-menu-item>Hourra !</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">
+    <sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5" variant="outline">
       <sonic-icon name="sparkles" library="custom"></sonic-icon>
       Click to open pop
     </sonic-button>
@@ -153,48 +233,62 @@ By default, pop is vertically aligned to the middle. Use `inline` to align it on
 
 ## Keep open on select
 
-By default, a click inside the content closes the pop, as well as a click outside. Add `data-on-select="keep"` on the content, or on any of its elements, to keep the pop open when interacting with it.
+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>
-    <sonic-pop class="inline-block">
-      <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>
-      </div>
-    </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>Option A</sonic-checkbox>
-        <sonic-checkbox>Option B</sonic-checkbox>
-      </div>
-    </sonic-pop>
+    <div class="flex flex-wrap gap-2">
+      <sonic-pop class="inline-block">
+        <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>
+        </div>
+      </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>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 last opened pop and gives focus back 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 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>
+      </sonic-menu>
+    </sonic-pop>
+  </template>
+</sonic-code>
 
-## Methods and events
+## API reference
 
-`show()` and `hide()` open and close the pop programmatically (see `manual` above). The pop dispatches a `show` event when it opens and a `hide` event when it closes.
+| 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()`** |
 
-```js
-const pop = document.querySelector("sonic-pop");
-pop.addEventListener("hide", () => console.log("pop closed"));
-pop.show();
-```
+| Slot | Description |
+|------|-------------|
+| *(default)* | Trigger; listens for **`click`** and **`keydown`** (`ArrowDown` opens when closed) unless **`manual`** |
+| `content` | Floating panel; receives focus **`tabindex="0"`** while open |
 
-## Styling
+**Methods:** **`show()`** · **`hide()`** on the host element.
 
-The content can be styled from outside with `::part(content)`.
+**Events:** **`show`** · **`hide`** (non-bubbling **`CustomEvent`**).
 
-```css
-sonic-pop::part(content) {
-  border-radius: 0;
-}
-```
+**Content attribute:** **`data-on-select="keep"`** on **`content`** or descendants prevents close-on-click inside the panel.

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

@@ -354,7 +354,6 @@ export class Pop extends LitElement {
         name="content"
         popover=${ifDefined(Pop.supportsPopover ? "manual" : undefined)}
         tabindex="-1"
-        part="content"
         style="display: none;"
         class="shadowable
         ${this.open ? "is-open" : ""}"

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

@@ -1,63 +1,109 @@
-# Progress bar
+# Progress
 
-Displays an indicator showing the completion progress of a task.
+Shows **task completion** on a **`value`** / **`max`** scale via a native `<progress>` bar. Omit **`value`** for an **indeterminate** loading animation. Put primary copy in the default slot and optional secondary text in **`remaining`**; set **`invert`** when the bar sits on a colored surface such as **`sonic-card`**.
 
-## Indeterminate
+## Basic example
+
+Set **`value`** from `0` to **`max`** (default `100`). Label text uses the type color.
 
 <sonic-code>
   <template>
-  <sonic-progress></sonic-progress>
+    <sonic-progress value="50">50%</sonic-progress>
   </template>
 </sonic-code>
 
+## Indeterminate
 
-## Remaining
+With no **`value`**, the bar animates until progress is known.
 
 <sonic-code>
   <template>
-  <sonic-progress  type="danger" value="80">
-    80% Used <span slot="remaining">20% left</span>
-  </sonic-progress>
+    <sonic-progress></sonic-progress>
   </template>
 </sonic-code>
 
-## Sizes
+## Type
+
+Semantic color follows **`type`**. With no **`type`**, behavior is `default`.
 
 <sonic-code>
   <template>
-<div class="grid gap-3">
-  <sonic-progress  size="2xs" value="25">25%</sonic-progress>
-  <sonic-progress  size="xs" value="25">25%</sonic-progress>
-  <sonic-progress  size="sm" value="25">25%</sonic-progress>
-  <sonic-progress  size="md" value="25">25%</sonic-progress>
-  <sonic-progress  size="lg" value="25">25%</sonic-progress>
-  <sonic-progress  size="xl" value="25">25%</sonic-progress>
-  <sonic-progress  size="2xl" value="25">25%</sonic-progress>
-</div>
+    <div class="grid gap-3">
+      <sonic-progress value="50">50%</sonic-progress>
+      <sonic-progress type="primary" value="50">50%</sonic-progress>
+      <sonic-progress type="neutral" value="50">50%</sonic-progress>
+      <sonic-progress type="info" value="50">50%</sonic-progress>
+      <sonic-progress type="warning" value="50">50%</sonic-progress>
+      <sonic-progress type="success" value="50">50%</sonic-progress>
+      <sonic-progress type="danger" value="50">50%</sonic-progress>
+    </div>
   </template>
 </sonic-code>
 
-## Type
+## Size
+
+Bar height scales with typography via **`size`**. With no **`size`**, font size matches **`md`** (`1rem`).
 
 <sonic-code>
   <template>
-<div class="grid gap-3">
-  <sonic-progress  value="50">50%</sonic-progress>
-  <sonic-progress  type="info" value="50">50%</sonic-progress>
-  <sonic-progress  type="warning" value="50">50%</sonic-progress>
-  <sonic-progress  type="success" value="50">50%</sonic-progress>
-  <sonic-progress  type="danger" value="50">50%</sonic-progress>
-</div>
-   </template>
+    <div class="grid gap-3">
+      <sonic-progress size="2xs" value="25">25%</sonic-progress>
+      <sonic-progress size="xs" value="25">25%</sonic-progress>
+      <sonic-progress size="sm" value="25">25%</sonic-progress>
+      <sonic-progress size="md" value="25">25%</sonic-progress>
+      <sonic-progress size="lg" value="25">25%</sonic-progress>
+      <sonic-progress size="xl" value="25">25%</sonic-progress>
+      <sonic-progress size="2xl" value="25">25%</sonic-progress>
+    </div>
+  </template>
 </sonic-code>
 
+## Default and remaining slots
+
+The default slot is the main label (left). **`remaining`** is right-aligned with lighter weight—use it for “left to complete” copy.
+
+<sonic-code>
+  <template>
+    <sonic-progress type="danger" value="80">
+      80% Used <span slot="remaining">20% left</span>
+    </sonic-progress>
+  </template>
+</sonic-code>
 
 ## Invert
 
+On tinted backgrounds, **`invert`** adjusts track and fill tokens so the bar stays readable (pair with matching **`type`** on **`sonic-card`** or similar).
+
 <sonic-code>
   <template>
-<div class="bg-neutral-900 p-4 rounded-md">
-  <sonic-progress  type="invert" value="50">50%</sonic-progress>
-</div>
+    <div class="grid gap-3">
+      <sonic-card type="info">
+        <sonic-progress invert type="info" value="50">50%</sonic-progress>
+      </sonic-card>
+      <sonic-card type="warning">
+        <sonic-progress invert type="warning" value="50">50%</sonic-progress>
+      </sonic-card>
+      <sonic-card type="success">
+        <sonic-progress invert type="success" value="50">50%</sonic-progress>
+      </sonic-card>
+      <sonic-card type="danger">
+        <sonic-progress invert type="danger" value="50">50%</sonic-progress>
+      </sonic-card>
+    </div>
   </template>
 </sonic-code>
+
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `value` | number | Completion amount; omit for indeterminate state |
+| `max` | number (default `100`) | Upper bound for **`value`** |
+| `type` | `default` (default) · `primary` · `neutral` · `warning` · `info` · `success` · `danger` | Semantic bar and label color |
+| `size` | `2xs` · `xs` · `sm` · `md` · `lg` · `xl` · `2xl` · `inherit` | Typography scale (bar height follows `em`) |
+| `invert` | boolean | High-contrast tokens on colored backgrounds |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Primary label below the bar (left) |
+| `remaining` | Secondary label below the bar (right) |