@supersoniks/concorde 5.0.3 → 5.0.5

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

@@ -1,12 +1,27 @@
-import { html, LitElement, css } from "lit";
+import { html, LitElement, css, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 
 import { inline } from "@supersoniks/concorde/core/components/ui/loader/styles/inline";
 import { fixed } from "@supersoniks/concorde/core/components/ui/loader/styles/fixed";
 import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
-export type LoaderMode = "inline" | "fixed" | "noDelay";
-type LoaderConf = { mode?: string; container?: HTMLElement; noDelay?: boolean };
+import {
+  resolveUiLabel,
+  uiAriaLabels,
+} from "@supersoniks/concorde/core/components/ui/_i18n/ui-aria-labels";
+
+export type LoaderMode = "inline" | "fixed";
+
+export type LoaderConf = {
+  mode?: LoaderMode;
+  container?: HTMLElement;
+  noDelay?: boolean;
+  /** Screen reader announcement when the loader is injected (e.g. global overlay). */
+  announce?: boolean;
+};
+
 const tagName = "sonic-loader";
+
 @customElement(tagName)
 export class Loader extends LitElement {
   static styles = [
@@ -42,45 +57,70 @@ export class Loader extends LitElement {
       }
     `,
   ];
-  static loader: Loader;
+
+  static loader: Loader | null = null;
   static callCounter = 0;
-  static show(conf?: LoaderConf) {
-    if (!Loader.loader)
-      Loader.loader = document.createElement("sonic-loader") as Loader;
-    const loader: Loader = Loader.loader;
-    if (!conf) conf = {};
-    if (conf.mode) loader.setAttribute("mode", conf.mode);
-    if (conf.noDelay) loader.setAttribute("noDelay", "");
-
-    if (!conf.container) {
-      conf.container = Theme.getPopContainer();
-      conf.mode = "fixed";
+
+  static show(conf: LoaderConf = {}) {
+    if (!Loader.loader) {
+      Loader.loader = document.createElement(tagName) as Loader;
     }
+    const loader = Loader.loader;
 
-    conf.container.appendChild(loader);
+    const container = conf.container ?? Theme.getPopContainer();
+    const mode: LoaderMode = conf.container ? (conf.mode ?? "fixed") : "fixed";
+    const noDelay = conf.noDelay ?? false;
+
+    loader.mode = mode;
+    loader.noDelay = noDelay;
+    loader.announce = conf.announce ?? false;
+    container.appendChild(loader);
     Loader.callCounter++;
   }
 
   static hide() {
+    if (Loader.callCounter <= 0) return;
     Loader.callCounter--;
     if (Loader.callCounter > 0) return;
-    if (Loader.loader) Loader.loader.remove();
+    Loader.loader?.remove();
   }
 
+  /** Display mode: inline (in content) or fixed (viewport overlay). */
+  @property({ type: String }) mode: LoaderMode = "fixed";
+  /** Skip the initial fade-in delay before the loader appears. */
+  @property({ type: Boolean }) noDelay = false;
   /**
-   * Mode d'affichage du loader
-   * * inline : Loader dans le contenu
-   * * fixed : Loader global par dessus la page
+   * When true, exposes `role="status"` and `aria-live="polite"` on the host (like `sonic-alert`).
+   * Use when the loader appears after user action; default inline loaders stay decorative.
    */
-  @property({ type: String }) mode: LoaderMode = "fixed";
-  @property({ type: Boolean }) noDelay: boolean = false;
+  @property({ type: Boolean, reflect: true }) announce = false;
+
+  willUpdate(changed: PropertyValues<this>) {
+    if (changed.has("announce")) {
+      this._syncAnnounceA11y();
+    }
+  }
+
+  private _syncAnnounceA11y() {
+    if (!this.announce) {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-live");
+      this.removeAttribute("aria-label");
+      return;
+    }
+    this.setAttribute("role", "status");
+    this.setAttribute("aria-live", "polite");
+    this.setAttribute("aria-label", resolveUiLabel(uiAriaLabels.loading));
+  }
 
   render() {
-    return html`<div
-      class="sonic-loader sonic-loader--${this.mode} ${this.noDelay
-        ? "sonic-loader--nodelay"
-        : ""} "
-    >
+    const classes = {
+      "sonic-loader": true,
+      [`sonic-loader--${this.mode}`]: true,
+      "sonic-loader--nodelay": this.noDelay,
+    };
+
+    return html`<div aria-hidden="true" class=${classMap(classes)}>
       <div></div>
       <div></div>
       <div></div>

package/src/core/components/ui/loader/styles/fixed.ts

@@ -22,7 +22,7 @@ export const fixed = css`
     position: fixed;
     top: 50%;
     left: 50%;
-    transform: transateY(-50%) translateX(-50%);
+    transform: translate(-50%, -50%);
     z-index: 999;
   }
 
@@ -37,20 +37,15 @@ export const fixed = css`
     display: none !important;
   }
   .sonic-loader--fixed > div {
-    background-color: var(--sc-_loader-bg);
-    width: 5rem;
-    height: 5rem;
-    border-radius: 100%;
-    margin: 2px;
-    animation-fill-mode: both;
     position: absolute;
-    top: 0px;
-    opacity: 0;
-    margin: 0;
     top: -2.5rem;
     left: -2.5rem;
     width: 5rem;
     height: 5rem;
-    animation: sonic-loader--fixed 1s 0s linear infinite;
+    border-radius: 100%;
+    background-color: var(--sc-_loader-bg);
+    opacity: 0;
+    animation: sonic-loader--fixed 1s linear infinite;
+    animation-fill-mode: both;
   }
 `;

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

@@ -1,9 +1,35 @@
 # Menu
 
+**`sonic-menu`** lays out navigation or actions as a **`direction`** row or column of **`sonic-menu-item`** entries (ghost **`variant`** and block **`shape`** by default), optional **`sonic-divider`** separators, and overflow content in the **`more`** slot (popover “…” trigger). Set **`href`** / **`pushstate`** / **`autoActive`** on each **`sonic-menu-item`**—same API as **`sonic-button`**—not on the menu host.
+
+## Basic example
+
+<sonic-code>
+  <template>
+    <sonic-menu direction="row">
+      <sonic-menu-item variant="ghost">
+        <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
+        Home
+      </sonic-menu-item>
+      <sonic-menu-item>
+        <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
+        Profile
+      </sonic-menu-item>
+      <sonic-menu-item type="danger">
+        <sonic-icon library="iconoir" name="log-out" slot="prefix"></sonic-icon>
+        Log out
+      </sonic-menu-item>
+    </sonic-menu>
+  </template>
+</sonic-code>
+
 ## Direction
+
+Default **`direction`** is **`column`**. Use **`row`** for horizontal toolbars or tabs.
+
 <sonic-code>
   <template>
-    <sonic-menu direction="row" >
+    <sonic-menu direction="row">
       <sonic-menu-item variant="ghost">
         <sonic-icon library="iconoir" name="arrow-right" slot="prefix"></sonic-icon>
         Row
@@ -12,11 +38,11 @@
         <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
         Profile
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
         History
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
         Orders
       </sonic-menu-item>
@@ -25,7 +51,7 @@
         Log out
       </sonic-menu-item>
     </sonic-menu>
-    <sonic-menu direction ="column" >
+    <sonic-menu direction="column">
       <sonic-menu-item variant="ghost">
         <sonic-icon library="iconoir" name="arrow-down" slot="prefix"></sonic-icon>
         Column
@@ -34,11 +60,11 @@
         <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
         Profile
       </sonic-menu-item>
-    <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
         History
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
         Orders
       </sonic-menu-item>
@@ -51,90 +77,83 @@
 </sonic-code>
 
 ## Size
+
+**`size`** on the menu propagates to items and the **`more`** trigger when they omit their own **`size`**.
+
 <sonic-code>
   <template>
     <div class="grid gap-3">
       <sonic-menu size="xs" direction="row">
-        <sonic-menu-item>
-          XS
-        </sonic-menu-item>
+        <sonic-menu-item>XS</sonic-menu-item>
         <sonic-menu-item>
           <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
           Profile
         </sonic-menu-item>
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
           History
         </sonic-menu-item>
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
           Orders
         </sonic-menu-item>
       </sonic-menu>
       <sonic-menu size="sm" direction="row">
-        <sonic-menu-item>
-          Small
-        </sonic-menu-item>
+        <sonic-menu-item>Small</sonic-menu-item>
         <sonic-menu-item>
           <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
           Profile
         </sonic-menu-item>
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
           History
         </sonic-menu-item>
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
           Orders
         </sonic-menu-item>
       </sonic-menu>
       <sonic-menu direction="row">
-        <sonic-menu-item>
-          Medium
-        </sonic-menu-item>
+        <sonic-menu-item>Medium</sonic-menu-item>
         <sonic-menu-item>
           <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
           Profile
         </sonic-menu-item>
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
           History
         </sonic-menu-item>
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
           Orders
         </sonic-menu-item>
       </sonic-menu>
       <sonic-menu size="lg" direction="row">
-        <sonic-menu-item>
-          Large
-        </sonic-menu-item>
+        <sonic-menu-item>Large</sonic-menu-item>
         <sonic-menu-item>
           <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
           Profile
         </sonic-menu-item>
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
           History
         </sonic-menu-item>
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
           Orders
         </sonic-menu-item>
       </sonic-menu>
       <sonic-menu size="xl" direction="row">
-        <sonic-menu-item>
-          XL
-        </sonic-menu-item>
+        <sonic-menu-item>XL</sonic-menu-item>
         <sonic-menu-item>
           <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
           Profile
         </sonic-menu-item>
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
           History
         </sonic-menu-item>
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
           Orders
         </sonic-menu-item>
@@ -144,72 +163,73 @@
 </sonic-code>
 
 ## Shadow
+
+Optional **`shadow`** wraps the menu surface (no shadow when omitted).
+
 <sonic-code>
   <template>
     <div class="grid gap-3">
       <sonic-menu direction="row">
-        <sonic-menu-item>
-          None
-        </sonic-menu-item>
+        <sonic-menu-item>None</sonic-menu-item>
       </sonic-menu>
       <sonic-menu shadow="sm" direction="row">
-        <sonic-menu-item>
-          Small
-        </sonic-menu-item>
+        <sonic-menu-item>Small</sonic-menu-item>
       </sonic-menu>
       <sonic-menu shadow="md" direction="row">
-        <sonic-menu-item>
-          Medium
-        </sonic-menu-item>
+        <sonic-menu-item>Medium</sonic-menu-item>
       </sonic-menu>
       <sonic-menu shadow="lg" direction="row">
-        <sonic-menu-item>
-          Large
-        </sonic-menu-item>
+        <sonic-menu-item>Large</sonic-menu-item>
       </sonic-menu>
     </div>
   </template>
 </sonic-code>
 
 ## Align
+
+**`align`** propagates to items except square / circle **`shape`**.
+
 <sonic-code>
   <template>
-    <sonic-menu  align="center">
-      <sonic-menu-item variant="ghost">
-        <sonic-icon library="iconoir" name="home"></sonic-icon>
-        Home
-      </sonic-menu-item>
-      <sonic-menu-item>
-        <sonic-icon library="iconoir" name="user"></sonic-icon>
-        Profile
-      </sonic-menu-item>
-    </sonic-menu>
-    <sonic-menu  align="left">
-      <sonic-menu-item variant="ghost">
-        <sonic-icon library="iconoir" name="home"></sonic-icon>
-        Home
-      </sonic-menu-item>
-      <sonic-menu-item>
-        <sonic-icon library="iconoir" name="user"></sonic-icon>
-        Profile
-      </sonic-menu-item>
-    </sonic-menu>
-    <sonic-menu  align="right">
-      <sonic-menu-item variant="ghost">
-        <sonic-icon library="iconoir" name="home"></sonic-icon>
-        Home
-      </sonic-menu-item>
-      <sonic-menu-item>
-        <sonic-icon library="iconoir" name="user"></sonic-icon>
-        Profile
-      </sonic-menu-item>
-    </sonic-menu>
+    <div class="grid gap-3">
+      <sonic-menu align="center">
+        <sonic-menu-item variant="ghost">
+          <sonic-icon library="iconoir" name="home"></sonic-icon>
+          Home
+        </sonic-menu-item>
+        <sonic-menu-item>
+          <sonic-icon library="iconoir" name="user"></sonic-icon>
+          Profile
+        </sonic-menu-item>
+      </sonic-menu>
+      <sonic-menu align="left">
+        <sonic-menu-item variant="ghost">
+          <sonic-icon library="iconoir" name="home"></sonic-icon>
+          Home
+        </sonic-menu-item>
+        <sonic-menu-item>
+          <sonic-icon library="iconoir" name="user"></sonic-icon>
+          Profile
+        </sonic-menu-item>
+      </sonic-menu>
+      <sonic-menu align="right">
+        <sonic-menu-item variant="ghost">
+          <sonic-icon library="iconoir" name="home"></sonic-icon>
+          Home
+        </sonic-menu-item>
+        <sonic-menu-item>
+          <sonic-icon library="iconoir" name="user"></sonic-icon>
+          Profile
+        </sonic-menu-item>
+      </sonic-menu>
+    </div>
   </template>
 </sonic-code>
 
+## More
 
+Assign nodes to **`slot="more"`** to show the overflow popover. The trigger appears only when the slot has content. Icon orientation follows **`direction`** (vertical ellipsis in a row menu).
 
-## More
 <sonic-code>
   <template>
     <sonic-menu direction="row">
@@ -221,20 +241,20 @@
         <sonic-icon library="iconoir" name="user"></sonic-icon>
         Profile
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
         History
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
         Orders
       </sonic-menu-item>
       <sonic-menu slot="more">
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
           Settings
         </sonic-menu-item>
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
           Messages
         </sonic-menu-item>
@@ -249,6 +269,9 @@
 </sonic-code>
 
 ## Scrollable
+
+With **`scrollable`**, the main slot scrolls with edge fade masks; drag-to-scroll works on pointer devices. When exactly one item is **`active`**, the menu scrolls it into view.
+
 <sonic-code>
   <template>
     <sonic-menu direction="row" scrollable>
@@ -260,14 +283,15 @@
         <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
         Profile
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
         History
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
         Orders
-      </sonic-menu-item>   <sonic-menu-item variant="ghost">
+      </sonic-menu-item>
+      <sonic-menu-item variant="ghost">
         <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
         Home
       </sonic-menu-item>
@@ -275,14 +299,15 @@
         <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
         Profile
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
         History
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
         Orders
-      </sonic-menu-item>   <sonic-menu-item variant="ghost">
+      </sonic-menu-item>
+      <sonic-menu-item variant="ghost">
         <sonic-icon library="iconoir" name="home" slot="prefix"></sonic-icon>
         Home
       </sonic-menu-item>
@@ -290,28 +315,28 @@
         <sonic-icon library="iconoir" name="user" slot="prefix"></sonic-icon>
         Profile
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="clock-outline" slot="prefix"></sonic-icon>
         History
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="bag" slot="prefix"></sonic-icon>
         Orders
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
         Settings
       </sonic-menu-item>
-      <sonic-menu-item >
+      <sonic-menu-item>
         <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
         Messages
       </sonic-menu-item>
       <sonic-menu slot="more">
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
           Settings
         </sonic-menu-item>
-        <sonic-menu-item >
+        <sonic-menu-item>
           <sonic-icon library="iconoir" name="chat-bubble" slot="prefix"></sonic-icon>
           Messages
         </sonic-menu-item>
@@ -321,9 +346,25 @@
           Log out
         </sonic-menu-item>
       </sonic-menu>
-      
+    </sonic-menu>
   </template>
 </sonic-code>
 
+## API reference
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `direction` | `column` (default) · `row` | Vertical list or horizontal bar |
+| `align` | `left` (default) · `center` · `right` | Alignment propagated to items (except square / circle **`shape`**) |
+| `size` | `xs` · `sm` · `md` · `lg` · `xl` | Propagated to items and the **`more`** trigger when unset on the item |
+| `shadow` | `sm` · `md` · `lg` | Shadow around the menu; omitted for none |
+| `minWidth` | CSS length | Minimum width of the container (default `0`) |
+| `scrollable` | boolean | Scroll with edge fade; auto-scroll when a single item is **`active`** |
+| `moreShape` | `circle` (default) · `square` | Shape of the **`more`** slot trigger button |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Visible items: **`sonic-menu-item`**, **`sonic-divider`**, nested **`sonic-menu`** |
+| `more` | Popover content for the “…” control; shown only when the slot has assigned nodes |
 
-        
+**`sonic-menu-item`** extends **`sonic-button`** (defaults: **`variant="ghost"`**, **`shape="block"`**). Use the button docs for **`type`**, **`variant`**, **`href`**, **`pushstate`**, **`autoActive`**, and item slots.