@supersoniks/concorde 5.0.4 → 5.1.0

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

@@ -12,6 +12,7 @@ import {
 import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 import { Size } from "../_css/size";
 import { Shadow, shadowable } from "../_css/shadow";
+import { Align } from "../_css/align";
 
 const queryAssignedElements = (
   options?: QueryAssignedElementsOptions,
@@ -26,7 +27,7 @@ export class MenuItems extends LitElement {
     css`
       :host {
         display: block;
-        --sc-menu-gap: 0.15rem;
+        --sc-_gap: 0.15rem;
       }
 
       :host > menu {
@@ -39,9 +40,14 @@ export class MenuItems extends LitElement {
         display: none !important;
       }
 
+      :host([shadow]) .shadowable {
+        border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
+      }
+
       /* SCROLLABLE*/
       #menu-content {
         display: flex;
+        gap: var(--sc-_gap);
         padding: 0.35em;
         margin: 0;
       }
@@ -115,7 +121,7 @@ export class MenuItems extends LitElement {
           to bottom,
           rgba(0, 0, 0, 0),
           rgba(0, 0, 0, 1) 10%
-        );queryAssignedElements
+        );
         mask-image: linear-gradient(
           to bottom,
           rgba(0, 0, 0, 0),
@@ -160,21 +166,11 @@ export class MenuItems extends LitElement {
    * tels que les dividers / boutons,... qui n'auraient pas d'attribut size précisés.
    */
   @property({ type: String, reflect: true }) size?: Size;
-  /**
-   * Direction
-   */
   @property({ type: String, reflect: true }) direction: "row" | "column" =
     "column";
-  @property({ type: String }) gap = "var(--sc-menu-gap)";
 
-  @property({ type: String, reflect: true }) align:
-    | "center"
-    | "left"
-    | "right" = "left";
+  @property({ type: String, reflect: true }) align: Align = "left";
 
-  /**
-   * Ombre
-   */
   @property({ type: String, reflect: true }) shadow: Shadow = null;
 
   @property({ type: String }) moreShape: "square" | "circle" = "circle";
@@ -182,17 +178,18 @@ export class MenuItems extends LitElement {
 
   observer: ResizeObserver | null = null;
   attributeObserver: MutationObserver | null = null;
+  private scrollDragBound = false;
 
-  /**
-   * Propriété min-width du bouton
-   */
   @property({ type: String }) minWidth = "0";
 
   @query("menu") menu!: HTMLElement;
   @query("#menu-content") menuContent!: HTMLElement;
 
-  @queryAssignedElements({ selector: "*" })
-  menuChildren!: Array<HTMLElement>;
+  @queryAssignedElements({ selector: "sonic-divider" })
+  dividerChildren!: Array<HTMLElement>;
+
+  @queryAssignedElements({ selector: "sonic-menu-item" })
+  menuItemChildren!: Array<HTMLElement>;
 
   @queryAssignedElements({ slot: "more", selector: "*" })
   moreElements!: Array<HTMLElement>;
@@ -224,8 +221,8 @@ export class MenuItems extends LitElement {
   }
 
   mainSlotChange() {
-    this.setChildrenSize(this.menuChildren);
-    this.setDividersSize(this.menuChildren);
+    this.setChildrenSize(this.menuItemChildren);
+    this.setDividersSize(this.dividerChildren);
     this.updateIsScollable();
     this.updateScrollPosition();
     this.observeMenuItemsAttributes();
@@ -241,7 +238,7 @@ export class MenuItems extends LitElement {
     });
 
     // Observer chaque menu-item
-    this.menuChildren.forEach((item) => {
+    this.menuItemChildren.forEach((item) => {
       this.attributeObserver!.observe(item, {
         attributes: true,
         attributeFilter: ["active"],
@@ -252,7 +249,7 @@ export class MenuItems extends LitElement {
   updateScrollPosition() {
     // Si on est en mode scrollable et qu'il y a exactement un seul menu-item actif
     if (this.scrollable) {
-      const activeItems = this.menuChildren.filter(
+      const activeItems = this.menuItemChildren.filter(
         (item) =>
           item.hasAttribute("active") &&
           item.getAttribute("active") !== "false",
@@ -303,41 +300,44 @@ export class MenuItems extends LitElement {
   };
 
   initScrollable(): void {
+    if (!this.scrollable || this.scrollDragBound) {
+      return;
+    }
+    this.scrollDragBound = true;
+
     let isDown = false;
     let startX: number;
     let scrollLeft: number;
 
-    if (this.scrollable) {
-      this.addEventListener("mousedown", (e) => {
-        isDown = true;
-        this.classList.add("active");
+    this.addEventListener("mousedown", (e) => {
+      isDown = true;
+      this.classList.add("active");
 
-        startX = e.pageX - this.menuContent.offsetLeft;
-        scrollLeft = this.menuContent.scrollLeft;
-      });
-      this.addEventListener("mouseleave", () => {
-        isDown = false;
-        this.classList.remove("active");
-      });
-      this.addEventListener("mouseup", () => {
-        isDown = false;
-        this.classList.remove("active");
-      });
-      this.addEventListener("mousemove", (e) => {
-        if (!isDown) return;
-        e.preventDefault();
-        const x = e.pageX - this.menuContent.offsetLeft;
-        const walk = (x - startX) * 1.5; //scroll-fast
-        this.menuContent.scrollLeft = scrollLeft - walk;
-        this.setScrollShadow(this.menuContent, this.direction);
-      });
-      this.addEventListener("scroll", (e) => {
-        e.preventDefault();
-        // const delta = Math.sign(e.deltaY);
-        // this.scrollLeft += delta * 50;
-        this.setScrollShadow(this.menuContent, this.direction);
-      });
-    }
+      startX = e.pageX - this.menuContent.offsetLeft;
+      scrollLeft = this.menuContent.scrollLeft;
+    });
+    this.addEventListener("mouseleave", () => {
+      isDown = false;
+      this.classList.remove("active");
+    });
+    this.addEventListener("mouseup", () => {
+      isDown = false;
+      this.classList.remove("active");
+    });
+    this.addEventListener("mousemove", (e) => {
+      if (!isDown) return;
+      e.preventDefault();
+      const x = e.pageX - this.menuContent.offsetLeft;
+      const walk = (x - startX) * 1.5; //scroll-fast
+      this.menuContent.scrollLeft = scrollLeft - walk;
+      this.setScrollShadow(this.menuContent, this.direction);
+    });
+    this.addEventListener("scroll", (e) => {
+      e.preventDefault();
+      // const delta = Math.sign(e.deltaY);
+      // this.scrollLeft += delta * 50;
+      this.setScrollShadow(this.menuContent, this.direction);
+    });
   }
 
   setScrollShadow(target: HTMLElement, direction: string): void {
@@ -397,7 +397,6 @@ export class MenuItems extends LitElement {
     const isMenuRow = this.direction == "row";
 
     const menuContentStyles = {
-      gap: this.gap,
       flexDirection: this.direction,
     };
 
@@ -411,11 +410,7 @@ export class MenuItems extends LitElement {
       marginLeft: isMenuRow ? "" : ".55em",
     };
 
-    return html`<menu
-      part="menu"
-      class="shadowable"
-      style=${styleMap(menuStyles)}
-    >
+    return html`<menu class="shadowable" style=${styleMap(menuStyles)}>
       <slot
         @slotchange=${this.mainSlotChange}
         id="menu-content"

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

@@ -1,68 +1,62 @@
-## Modal
+# Modal
+
+**`sonic-modal`** presents focused content in a `<dialog>` overlay with backdrop, enter/exit animation, and a built-in close control. Compose **`sonic-modal-title`** / **`sonic-modal-subtitle`** / **`sonic-modal-content`** / **`sonic-modal-actions`**, or use the default slot. Call **`show()`** on the element to open; use **`hideModal`** on action buttons or **`hide()`** from script. Set **`forceAction`** when dismissal must go through explicit actions only. Imperative dialogs: **`Modal.create()`** (also **`window.SonicModal`**).
+
+## Basic example
+
+Click the trigger to open. **`sonic-modal-actions`** lays out footer buttons; **`hideModal`** closes the modal on click. Scope form state with **`formDataProvider`** on **`sonic-modal-actions`** so child **`sonic-button`** elements share one publisher.
 
 <sonic-code>
   <template>
     <sonic-button onclick="document.getElementById('modalExample').show()">
-      Simple modal
+      Open modal
     </sonic-button>
     <sonic-modal id="modalExample">
-      <sonic-modal-title
-        >Lorem ipsum dolor sit amet <sonic-badge type="danger" size="sm">+33</sonic-badge></sonic-modal-title
-      >
-      <sonic-modal-subtitle>Donec sed vestibulum augue.</sonic-modal-subtitle>
+      <sonic-modal-title>
+        Export ready
+        <sonic-badge type="success" size="sm">New</sonic-badge>
+      </sonic-modal-title>
+      <sonic-modal-subtitle>Your report finished processing.</sonic-modal-subtitle>
       <sonic-modal-content>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
+        Download the CSV now or review the summary in your dashboard before sharing.
       </sonic-modal-content>
       <sonic-modal-actions formDataProvider="ModalMiniForm">
-        <sonic-button FormCheckable  minWidth="8rem" value="true" name="click">
-          Click don't close
+        <sonic-button minWidth="8rem" value="true" name="click">
+          Save draft
         </sonic-button>
-        <sonic-button minWidth="8rem" type="success" hideModal>Confirm</sonic-button>
+        <sonic-button minWidth="8rem" type="success" hideModal>Download</sonic-button>
       </sonic-modal-actions>
     </sonic-modal>
   </template>
 </sonic-code>
 
+## Scrollable content
 
-## Long text
+Long copy scrolls inside the dialog. Default **`maxHeight`** is `90vh`. Default **`align`** is `left`.
 
 <sonic-code>
   <template>
-    <sonic-button onclick="document.getElementById('modalText').show()"> Long text </sonic-button>
+    <sonic-button onclick="document.getElementById('modalText').show()">Venue details</sonic-button>
     <sonic-modal align="left" id="modalText">
-      <sonic-modal-title>Infos et tarifs </sonic-modal-title>
+      <sonic-modal-title>Hours and tickets</sonic-modal-title>
       <sonic-modal-content>
         <div class="prose">
           <p>
-            <strong>Horaires d’ouverture </strong><br />
-            Du mercredi au samedi de 13h30 à 19h et le dimanche de 13h30 à 18h<br />
-            + horaires spécifiques pour événements ou festivals&nbsp;
+            <strong>Opening hours</strong><br />
+            Wednesday–Saturday, 1:30 p.m.–7:00 p.m.; Sunday, 1:30 p.m.–6:00 p.m.
           </p>
           <p>
-            <strong> Billetterie&nbsp;<br /></strong>
-            La participation à certains événements et activités est soumise à un système de billetterie avec achats ou
-            réservations disponibles en ligne ou au guichet.&nbsp;&nbsp;<strong><br /></strong>
+            <strong>Ticketing</strong><br />
+            Some events require online or box-office reservations. Prices vary by event; booking ahead is recommended when capacity is limited.
           </p>
           <p>
-            Les tarifs (Tarif plein / Tarif Réduit / Tarif Spécifique) sont indiqués pour chaque événement et peuvent
-            varier selon la nature de l’événement. Les tarifs sont identiques en ligne et au guichet. Il est néanmoins
-            conseillé de réserver les billets en avance pour s’assurer une place.
+            <strong>Contact</strong><br />
+            tickets@example.com · +33 3 28 33 48 33
           </p>
           <p>
-            L’accès au Skatepark, Fablab et Halle C sont soumis à adhésions. Les adhésions sont gratuites et
-            nominatives. Elle donnent accès aux espaces dans la limite des places disponibles.
-          </p>
-          <p>
-            <strong>+ d’infos <br /></strong>billetterie@laconditionpublique.com <br />+33 (0)328334833&nbsp;
-          </p>
-          <br />
-          <p>
-            <strong>Accès <br /></strong>14, place Faidherbe <br />59100 Roubaix <br />Métro / Tram : Arrêt
-            Eurotéléport, Ligne 2 <br />Bus / V’Lille : Arrêt Condition Publique&nbsp;
-          </p>
-          <p>
-            Accès handicapés : nous contacter avant votre venue au 03 28 33 48 33 ou par mail
-            billetterie@laconditionpublique.com
+            <strong>Access</strong><br />
+            14 Place Faidherbe, 59100 Roubaix<br />
+            Metro line 2, Eurotéléport stop
           </p>
         </div>
       </sonic-modal-content>
@@ -72,33 +66,44 @@
 
 ## Force action
 
+With **`forceAction`**, backdrop click, Escape, and the default close button are disabled. Provide **`sonic-modal-actions`** (or **`sonic-modal-close`**) so users can finish the flow.
+
 <sonic-code>
   <template>
-    <sonic-button onclick="document.getElementById('force').show()"> Force action to close</sonic-button>
+    <sonic-button onclick="document.getElementById('force').show()">Cookie consent</sonic-button>
     <sonic-modal forceAction id="force">
-      <sonic-modal-title>Do you want some cookies ? </sonic-modal-title>
+      <sonic-modal-title>Allow analytics cookies?</sonic-modal-title>
       <sonic-modal-content>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam eu mi luctus faucibus.
+        We use cookies to measure traffic and improve the product. You can change this later in settings.
       </sonic-modal-content>
-      <sonic-modal-actions >
-        <sonic-button hideModal minWidth="8rem"> Nope </sonic-button>
-        <sonic-button hideModal minWidth="8rem" type="success">Hell yes !</sonic-button>
+      <sonic-modal-actions>
+        <sonic-button hideModal minWidth="8rem">Decline</sonic-button>
+        <sonic-button hideModal minWidth="8rem" type="success">Accept</sonic-button>
       </sonic-modal-actions>
     </sonic-modal>
-    </sonic-modal>
   </template>
 </sonic-code>
 
 ## Custom dimensions
 
+Set **`width`** / **`height`** / **`maxWidth`** / **`maxHeight`** (CSS lengths). On narrow viewports the panel becomes a bottom sheet. Use **`rounded="none"`** for edge-to-edge media.
+
 <sonic-code>
   <template>
-    <sonic-button onclick="document.getElementById('CustomWidth').show()"> Custom width </sonic-button>
-    <sonic-modal maxHeight="50vh" maxWidth="90vw" width="100%" height="100%" id="CustomWidth">
+    <sonic-button onclick="document.getElementById('CustomWidth').show()">Image preview</sonic-button>
+    <sonic-modal
+      rounded="none"
+      maxHeight="50vh"
+      maxWidth="90vw"
+      width="100%"
+      height="100%"
+      id="CustomWidth"
+    >
       <sonic-image
         cover
         objectPosition="center 20%"
         src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        alt="View from an airplane window"
       ></sonic-image>
     </sonic-modal>
   </template>
@@ -106,14 +111,125 @@
 
 ## Fullscreen
 
+**`fullscreen`** fills the viewport and hides the backdrop.
+
 <sonic-code>
   <template>
-    <sonic-button onclick="document.getElementById('Fullscreen').show()"> Fullscreen </sonic-button>
+    <sonic-button onclick="document.getElementById('Fullscreen').show()">Fullscreen</sonic-button>
     <sonic-modal fullscreen id="Fullscreen">
       <sonic-image
         cover
         src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
+        alt="View from an airplane window"
       ></sonic-image>
     </sonic-modal>
   </template>
-</sonic-code>
+</sonic-code>
+
+## Programmatic creation
+
+Use **`Modal.create(options)`** when there is no modal in the template—for confirmations, toasts that need a follow-up, or one-off flows from script. The modal is appended to the nearest **`sonic-theme`** pop container (same as declarative modals), opened automatically, and returns the **`sonic-modal`** instance. Set **`removeOnHide: true`** to detach it from the DOM after close. In the browser, **`window.SonicModal`** is the same class after the module loads.
+
+Pass **`title`** / **`subtitle`** / **`content`** / **`actions`** as HTML strings (or Lit template results from application code). Put **`hideModal`** on action buttons in the **`actions`** string so clicks close the dialog.
+
+<sonic-code>
+  <template>
+    <sonic-button
+      onclick="window.SonicModal.create({
+        title: 'Send invite?',
+        subtitle: 'The recipient can join immediately.',
+        content: 'We will email an invitation to alex@example.com.',
+        actions: '&lt;sonic-button hideModal minWidth=\'8rem\'&gt;Cancel&lt;/sonic-button&gt;&lt;sonic-button hideModal minWidth=\'8rem\' type=\'success\'&gt;Send&lt;/sonic-button&gt;',
+        removeOnHide: true
+      })"
+    >
+      Open programmatic modal
+    </sonic-button>
+  </template>
+</sonic-code>
+
+<sonic-code language="javascript">
+  <template>
+import { Modal } from "@supersoniks/concorde/core/components/ui/modal/modal";
+
+const modal = Modal.create({
+  title: "Delete project?",
+  subtitle: "This cannot be undone.",
+  content: "<p>All files in <strong>Acme HQ</strong> will be removed.</p>",
+  actions: `
+    <sonic-button hideModal minWidth="8rem">Cancel</sonic-button>
+    <sonic-button hideModal minWidth="8rem" type="danger">Delete</sonic-button>
+  `,
+  removeOnHide: true,
+  forceAction: false,
+  maxWidth: "min(100vw, 28rem)",
+});
+
+modal.addEventListener("hidden", () => {
+  console.log("Modal removed from the DOM");
+});
+
+// Or close from script: await modal.hide(); await modal.dispose();
+  </template>
+</sonic-code>
+
+## API reference
+
+### `sonic-modal`
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `align` | `left` (default) · `center` · `right` | Align title and slotted content |
+| `maxWidth` | CSS length (default `min(100vw, 40rem)`) | Dialog max width |
+| `maxHeight` | CSS length (default `90vh`) | Scrollable body max height |
+| `width` | CSS length (default `100%`) | Dialog width |
+| `height` | CSS length (default `fit-content`) | Dialog height |
+| `paddingX` · `paddingY` | CSS length | Override content padding (`--sc-modal-px` / `--sc-modal-py`) |
+| `zIndex` | CSS number | Stacking order (default `990`) |
+| `effect` | `slide` (default) · `fade` · `none` | Open/close animation |
+| `fullscreen` | boolean | Full viewport; no backdrop |
+| `forceAction` | boolean | Disable overlay, Escape, and default close button |
+| `noCloseButton` | boolean | Hide built-in close when not **`forceAction`** |
+| `closeButtonType` | **`sonic-button`** `type` | Style of built-in close |
+| `visible` | boolean | When toggled, opens or closes the dialog |
+| `removeOnHide` | boolean | Remove element from DOM after close |
+| `removeHashOnHide` | boolean | Clear URL hash on close |
+| `closeOnLocationChange` | boolean | Close when app location changes |
+| `resetDataProviderOnHide` | string | Reset named **`formDataProvider`** on close |
+| `rounded` | `none` | Square dialog corners (useful for full-bleed media) |
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Additional markup alongside structured children |
+
+| Event | Description |
+|-------|-------------|
+| `show` | Fired when open animation completes |
+| `hide` | Fired when close starts |
+| `hidden` | Fired when close finishes |
+
+Methods: **`show()`** · **`hide()`** · **`dispose()`** (hide and remove). Static **`Modal.create(options)`** appends a modal to the theme pop container and opens it. **`options`** / **`styleSheet`** are JavaScript-only.
+
+### `sonic-modal-title` · `sonic-modal-subtitle` · `sonic-modal-content`
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Title, subtitle, or main body content |
+
+### `sonic-modal-actions`
+
+| Slot | Description |
+|------|-------------|
+| *(default)* | Footer actions (typically **`sonic-button`**) |
+
+Put **`hideModal`** on a **`sonic-button`** to close the parent modal on click. Ancestor **`formDataProvider`** on this element is inherited by child form controls.
+
+### `sonic-modal-close`
+
+Rendered automatically unless **`forceAction`** or **`noCloseButton`** is set. Calls **`hide()`** on the parent modal.
+
+| Attribute | Values | Description |
+|----------|---------|-------------|
+| `type` | **`sonic-button`** `type` | Close button color |
+| `reset` | string | Passed to inner **`sonic-button`** **`reset`** |
+| `translation` | UI label object | Overrides default close **`aria-label`** |

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

@@ -20,6 +20,7 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { ButtonType } from "../button/button";
 import { ModalStyleSheetInput, normalizeStyleSheets } from "./modal-utils";
+import { Align } from "../_css/align";
 
 declare const window: ConcordeWindow;
 declare type ModalCreateOptions = {
@@ -211,10 +212,7 @@ export class Modal extends Subscriber(LitElement) {
   @property({ type: Boolean }) noCloseButton = false;
   @property({ type: Boolean }) removeOnHide = false;
   @property({ type: Boolean }) removeHashOnHide = false;
-  @property({ type: String, reflect: true }) align:
-    | "center"
-    | "right"
-    | "left" = "left";
+  @property({ type: String, reflect: true }) align: Align = "left";
 
   // Settings de base
   @property({ type: String }) paddingX?: string;