@supersoniks/concorde 5.1.1 → 5.1.3-immutable.1

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

@@ -0,0 +1,294 @@
+# 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.
+
+## Basic example
+
+<sonic-code>
+  <template>
+    <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="settings" slot="prefix"></sonic-icon>
+          Settings
+        </sonic-menu-item>
+      </sonic-menu>
+    </sonic-pop>
+  </template>
+</sonic-code>
+
+## 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`**.
+
+<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-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`**. The shadow applies to the floating **`content`** panel.
+
+<sonic-code>
+  <template>
+    <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 the host is middle-aligned with siblings. Set **`inline`** to baseline-align the trigger inside running text.
+
+<sonic-code>
+  <template>
+    <p>
+      The Concorde flew from Paris to
+      <sonic-pop inline>
+        <sonic-button variant="link">New York</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>
+      </sonic-pop>
+      in about 3.5 hours.
+    </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.
+
+<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>
+      <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.
+
+<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-menu slot="content">
+        <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-icon name="sparkles" library="custom"></sonic-icon>
+      Click to open 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.
+
+<sonic-code>
+  <template>
+    <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 and dismissal
+
+**`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>
+
+## API reference
+
+| 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()`** |
+
+| 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.

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

@@ -0,0 +1,109 @@
+# Progress
+
+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`**.
+
+## Basic example
+
+Set **`value`** from `0` to **`max`** (default `100`). Label text uses the type color.
+
+<sonic-code>
+  <template>
+    <sonic-progress value="50">50%</sonic-progress>
+  </template>
+</sonic-code>
+
+## Indeterminate
+
+With no **`value`**, the bar animates until progress is known.
+
+<sonic-code>
+  <template>
+    <sonic-progress></sonic-progress>
+  </template>
+</sonic-code>
+
+## Type
+
+Semantic color follows **`type`**. With no **`type`**, behavior is `default`.
+
+<sonic-code>
+  <template>
+    <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>
+
+## 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 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="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) |