@supersoniks/concorde 4.9.98-visual-stack.1 → 5.0.1

package/src/core/components/ui/form/radio/radio.ts

@@ -7,7 +7,7 @@ const tagName = "sonic-radio";
  * ### Le composant sonic-radio étend sonic-checkbox en assignant sa propriété radio à true.
  *
  * * Le type d'input html utilisé passe également de checkbox à radio.
- * * Le comportement est donc similaire à un bouton radio classique mais avec les fonctionnalités de sonic-checkbox (ie : Subscriber / FormElement / FormCheckable).
+ * * Le comportement est donc similaire à un bouton radio classique mais avec les fonctionnalités de sonic-checkbox (FormElement / FormCheckable).
  */
 
 @customElement(tagName)

package/src/core/components/ui/form/select/select.ts

@@ -15,7 +15,6 @@ import {
   description,
 } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
 
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
@@ -35,14 +34,12 @@ export type SelectOption = {
 const tagName = "sonic-select";
 /**
  * #### FormElement :
- * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
- * * Par défault lorsque l'on édite l'input, la valeur est également mise à jour via le même dataprovider
- * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
- * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
+ * Synchronise `value` via `formDataProvider` + `name`.
+ * Peut alimenter un `sonic-queue` via `dataFilterProvider` sur le même store.
  */
 
 @customElement(tagName)
-export class Select extends FormElement(Subscriber(LitElement)) {
+export class Select extends FormElement(LitElement) {
   static styles = [
     fontSize,
     formControl,

package/src/core/components/ui/form/textarea/textarea.ts

@@ -11,7 +11,6 @@ import {
   formControl,
   label,
 } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
@@ -25,7 +24,7 @@ import { styleMap } from "lit/directives/style-map.js";
 const tagName = "sonic-textarea";
 
 @customElement(tagName)
-export class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
+export class Textarea extends FormInput(FormElement(LitElement)) {
   static styles = [
     fontSize,
     formControl,

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

@@ -30,7 +30,41 @@
   </template>
 </sonic-code>
 
+Default placement is `bottom`. Content is aligned on the start of the trigger, add `center` to center it. If there is not enough room, content flips to the opposite side and stays inside the viewport.
+
+<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>
+  </template>
+</sonic-code>
+
 ## Shadow
+
+Default shadow is `lg`.
+
 <sonic-code>
   <template>
     <sonic-pop class="inline-block" shadow="none" placement='top' >
@@ -60,6 +94,26 @@
   </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.
+
+<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>
+
 ## noToggle
 <sonic-code>
   <template>
@@ -93,4 +147,52 @@
       Click to open pop
     </sonic-button>
   </template>
-</sonic-code>
+</sonic-code>
+
+## 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.
+
+<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>
+  </template>
+</sonic-code>
+
+## Keyboard
+
+- `ArrowDown` on the trigger opens the pop.
+- `Escape` closes the last opened pop and gives focus back to its trigger.
+
+## Methods and events
+
+`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.
+
+```js
+const pop = document.querySelector("sonic-pop");
+pop.addEventListener("hide", () => console.log("pop closed"));
+pop.show();
+```
+
+## Styling
+
+The content can be styled from outside with `::part(content)`.
+
+```css
+sonic-pop::part(content) {
+  border-radius: 0;
+}
+```

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

@@ -1,17 +1,22 @@
 import { html, LitElement, css, PropertyValues } from "lit";
 import { customElement, query, state, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 import HTML, {
   SearchableDomElement,
 } from "@supersoniks/concorde/core/utils/HTML";
+import {
+  computeFloatingPosition,
+  FloatingSide,
+  getFloatingBounds,
+  supportsPopover,
+} from "@supersoniks/concorde/core/utils/positioning";
 import { Shadow, shadowable } from "../_css/shadow";
-// Toast
 type PopPlacement =
   | "bottom"
   | "top"
   | "right"
   | "left"
-  | "top"
   | "bottom center"
   | "top center"
   | "right center"
@@ -22,6 +27,7 @@ const tagName = "sonic-pop";
 @customElement(tagName)
 export class Pop extends LitElement {
   static pops = new Set<Pop>();
+  static readonly supportsPopover = supportsPopover;
   static styles = [
     css`
       :host {
@@ -44,7 +50,7 @@ export class Pop extends LitElement {
         border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
       }
 
-      slot[name="content"].is-open:not(.is-empty) {
+      slot[name="content"].is-open {
         transform: translateY(0) scale(1);
         opacity: 1;
         pointer-events: auto;
@@ -52,6 +58,36 @@ export class Pop extends LitElement {
         transition-timing-function: cubic-bezier(0.25, 0.25, 0.42, 1.225);
       }
 
+      slot[name="content"][popover] {
+        inset: auto;
+        width: auto;
+        height: auto;
+        margin: 0;
+        padding: 0;
+        border: none;
+        overflow: visible;
+        color: inherit;
+        /* display / overlay en allow-discrete : reste dans le top layer pendant le fondu de fermeture */
+        transition-property: all, display, overlay;
+        transition-behavior: normal, allow-discrete, allow-discrete;
+      }
+
+      slot[name="content"][popover]:not(:popover-open) {
+        display: none;
+      }
+
+      slot[name="content"][popover].is-open {
+        transition-property: scale, opacity, display, overlay;
+        transition-behavior: normal, normal, allow-discrete, allow-discrete;
+      }
+
+      @starting-style {
+        slot[name="content"][popover].is-open:popover-open {
+          transform: translateY(1rem) scale(0.95);
+          opacity: 0;
+        }
+      }
+
       :host([inline]) {
         vertical-align: baseline;
       }
@@ -83,7 +119,6 @@ export class Pop extends LitElement {
 
   runPositioningLoop() {
     if (!this.positioningRuns) return;
-    this.positioningRuns = true;
     this.computePosition(this.placement);
     window.requestAnimationFrame(() => this.runPositioningLoop());
   }
@@ -104,9 +139,14 @@ export class Pop extends LitElement {
   }
 
   show() {
-    this.setMaxZindex();
+    if (!Pop.supportsPopover) this.setMaxZindex();
     this.popContent?.style?.removeProperty("display");
+    if (Pop.supportsPopover && !this.popContent.matches(":popover-open")) {
+      this.popContent.showPopover();
+    }
     this.open = true;
+    // Pop.pops suit l'ordre d'ouverture : Escape ferme le dernier ouvert.
+    if (Pop.pops.delete(this)) Pop.pops.add(this);
     this.popContent.setAttribute("tabindex", "0");
     if (this.popBtn && this.popContent && !this.positioningRuns) {
       this.positioningRuns = true;
@@ -118,7 +158,10 @@ export class Pop extends LitElement {
   }
 
   hide() {
-    this.resetZindexes();
+    if (!Pop.supportsPopover) this.resetZindexes();
+    if (Pop.supportsPopover && this.popContent?.matches(":popover-open")) {
+      this.popContent.hidePopover();
+    }
     this.open = false;
     this.popContent.setAttribute("tabindex", "-1");
     this.positioningRuns = false;
@@ -133,6 +176,15 @@ export class Pop extends LitElement {
     this.dispatchEvent(new CustomEvent("hide"));
   }
 
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+    // Le template remet style="display:none" à chaque render —
+    // on le retire après coup quand le pop est ouvert.
+    if (this.open) {
+      this.popContent?.style?.removeProperty("display");
+    }
+  }
+
   /**
    * Remonte dans la structure html de parents en parents et si ils on une position relative ou absolute, on met leur z-index élévé
    */
@@ -195,7 +247,7 @@ export class Pop extends LitElement {
     if (Pop.pops.size == 0) {
       document.addEventListener("pointerdown", this._handleClosePop);
       document.addEventListener("click", this._handleClosePop);
-      document.addEventListener("keydown", this._handleKeyDown);
+      document.addEventListener("keydown", Pop._handleKeyDown);
     }
     Pop.pops.add(this);
   }
@@ -217,128 +269,39 @@ export class Pop extends LitElement {
     if (Pop.pops.size == 0) {
       document.removeEventListener("pointerdown", this._handleClosePop);
       document.removeEventListener("click", this._handleClosePop);
-      document.removeEventListener("keydown", this._handleKeyDown);
+      document.removeEventListener("keydown", Pop._handleKeyDown);
     }
   }
 
   computePosition(placement: PopPlacement) {
-    const placementSplit = placement.split(" ");
-    const placementBase = placementSplit[0];
-    let placementSec = placementSplit[1];
-
-    const padding = 5;
-    const thisRect = this.getBoundingClientRect();
-
-    const scrollableAncestor = HTML.getScrollableAncestor(
-      this.popContent,
-    ) as HTMLElement;
-    const scrollableAncestorRect = scrollableAncestor?.getBoundingClientRect();
-    const minX = Math.max(0, scrollableAncestorRect?.left || 0) + padding;
-    const minY = Math.max(0, scrollableAncestorRect?.top || 0) + padding;
-    const maxX =
-      Math.min(
-        window.innerWidth,
-        scrollableAncestorRect?.right || window.innerWidth,
-      ) - padding;
-    const maxY =
-      Math.min(
-        window.innerHeight,
-        scrollableAncestorRect?.bottom || window.innerHeight,
-      ) - padding;
-    const x0 = thisRect.left;
-    const y0 = thisRect.top;
-    let x = x0,
-      y = y0;
-    let contentRect = this.popContent?.getBoundingClientRect();
-    const yTop = y0 - contentRect.height;
-    const xLeft = x0 - contentRect.width;
-    const xRight = x0 + thisRect.width;
-    const yBottom = y0 + thisRect.height;
-    const xCenter = x0 + (thisRect.width - contentRect.width) * 0.5;
-    const yCenter = y0 + (thisRect.height - contentRect.height) * 0.5;
-    switch (placementBase) {
-      case "bottom":
-        y = yBottom;
-        if (placementSec == "center") {
-          x = xCenter;
-        }
-        break;
-      case "top":
-        y = yTop;
-        if (placementSec == "center") {
-          x = xCenter;
-        }
-        break;
-      case "left":
-        x = xLeft;
-        if (placementSec == "center") {
-          y = yCenter;
-        }
-        break;
-      case "right":
-        x = xRight;
-        if (placementSec == "center") {
-          y = yCenter;
-        }
-        break;
-    }
-
-    this.lastContentX += x - contentRect.x;
-    this.lastContentY += y - contentRect.y;
-    Object.assign(this.popContent.style, {
-      left: `${this.lastContentX}px`,
-      top: `${this.lastContentY}px`,
+    const [side, secondary] = placement.split(" ");
+    const contentRect = this.popContent.getBoundingClientRect();
+
+    const { x, y } = computeFloatingPosition({
+      anchor: this.getBoundingClientRect(),
+      floating: contentRect,
+      side: side as FloatingSide,
+      align: secondary == "center" ? "center" : "start",
+      bounds: getFloatingBounds(this.popContent, 5),
     });
 
-    contentRect = this.popContent?.getBoundingClientRect();
-    if (contentRect.x < minX && placementBase == "left") x = xRight;
-    if (contentRect.y < minY && placementBase == "top") y = yBottom;
-    if (contentRect.x + contentRect.width > maxX && placementBase == "right")
-      x = xLeft;
-    if (contentRect.y + contentRect.height > maxY && placementBase == "bottom")
-      y = yTop;
-
+    // Déplacement relatif à la position mesurée : reste juste quand un ancêtre transformé
+    // (ex. modale en translateZ) devient le bloc conteneur du position: fixed.
     this.lastContentX += x - contentRect.x;
     this.lastContentY += y - contentRect.y;
-
-    Object.assign(this.popContent.style, {
-      left: `${this.lastContentX}px`,
-      top: `${this.lastContentY}px`,
-    });
-
-    contentRect = this.popContent?.getBoundingClientRect();
-
-    if (contentRect.x < minX) {
-      this.lastContentX += minX - contentRect.x;
-    }
-    if (contentRect.y < minY) {
-      this.lastContentY += minY - contentRect.y;
-    }
-
-    Object.assign(this.popContent.style, {
-      left: `${this.lastContentX}px`,
-      top: `${this.lastContentY}px`,
-    });
-    contentRect = this.popContent?.getBoundingClientRect();
-    if (contentRect.x + contentRect.width > maxX) {
-      this.lastContentX += maxX - (contentRect.x + contentRect.width);
-    }
-    if (contentRect.y + contentRect.height > maxY) {
-      this.lastContentY += maxY - (contentRect.y + contentRect.height);
-    }
-
     Object.assign(this.popContent.style, {
       left: `${this.lastContentX}px`,
       top: `${this.lastContentY}px`,
     });
   }
 
-  private _handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "Escape" && this.open) {
-      e.stopPropagation();
-      this.hide();
-    }
-  };
+  private static _handleKeyDown(e: KeyboardEvent) {
+    if (e.key !== "Escape") return;
+    const lastOpened = [...Pop.pops].reverse().find((pop) => pop.open);
+    if (!lastOpened) return;
+    e.stopPropagation();
+    lastOpened.hide();
+  }
 
   render() {
     return html`
@@ -349,6 +312,7 @@ export class Pop extends LitElement {
       ></slot>
       <slot
         name="content"
+        popover=${ifDefined(Pop.supportsPopover ? "manual" : undefined)}
         tabindex="-1"
         part="content"
         style="display: none;"

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

@@ -38,7 +38,7 @@ export class Theme extends LitElement {
         border-radius: min(calc(var(--sc-btn-rounded) * 2), 0.4em);
       }
 
-      ::slotted(.sonic-pop-content).is-open:not(.is-empty) {
+      ::slotted(.sonic-pop-content).is-open {
         transform: translateY(0) scale(1);
         opacity: 1;
         pointer-events: auto;

package/src/core/components/ui/toast/render-content.ts

@@ -0,0 +1,13 @@
+import { nothing } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { ToastContent } from "@supersoniks/concorde/core/components/ui/toast/types";
+
+/**
+ * Renders toast title/text content: TemplateResult/DirectiveResult as-is,
+ * HTML strings via unsafeHTML (legacy).
+ */
+export function renderToastContent(content?: ToastContent) {
+  if (!content) return nothing;
+  if (content instanceof Object) return content;
+  return unsafeHTML(content);
+}

package/src/core/components/ui/toast/toast-item.ts

@@ -1,8 +1,13 @@
-import { html, LitElement, css, nothing } from "lit";
+import { html, LitElement, css, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import "@supersoniks/concorde/core/components/ui/toast/types";
-import { ToastStatus } from "@supersoniks/concorde/core/components/ui/toast/types";
+import {
+  ToastContent,
+  ToastStatus,
+  ToastStyleSheetInput,
+} from "@supersoniks/concorde/core/components/ui/toast/types";
+import { renderToastContent } from "@supersoniks/concorde/core/components/ui/toast/render-content";
+import { normalizeStyleSheets } from "@supersoniks/concorde/core/components/ui/modal/modal-utils";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 import { HTML } from "@supersoniks/concorde/utils";
 
@@ -201,16 +206,19 @@ export class SonicToastItem extends LitElement {
     `,
   ];
 
-  @property({ type: String }) title = "";
+  @property() label: ToastContent = "";
   @property({ type: String }) id = "";
-  @property({ type: String }) text = "";
+  @property() text: ToastContent = "";
   @property({ type: String }) status: ToastStatus = "";
   @property({ type: Boolean }) ghost = false;
   @property({ type: Boolean }) preserve = false;
   @property({ type: Boolean }) dismissForever = false;
   @property({ type: String }) maxHeight = "10rem";
+  @property({ type: Boolean }) useSlot = false;
+  @property({ attribute: false }) styleSheet?: ToastStyleSheetInput;
   @state() visible = true;
   @state() private _titleId: string = "";
+  private _adoptedStyleSheets: Array<CSSStyleSheet> = [];
 
   // @queryAssignedElements({flatten: true, slot: main"})
   // textSlot!: HTMLElement[];
@@ -276,17 +284,16 @@ export class SonicToastItem extends LitElement {
       return nothing;
     }
 
-    const titleId = this.title ? this.getTitleId() : undefined;
+    const titleId = this.label ? this.getTitleId() : undefined;
     // Extrait un label pour aria-label si pas de titre, en essayant de couper proprement
     const ariaLabel =
-      !this.title && this.text
+      !this.label && typeof this.text === "string"
         ? this.text.length > 100
           ? this.text.substring(0, 100).replace(/\s+\S*$/, "") + "..."
           : this.text
         : undefined;
 
     const ariaLive = this.getAriaLive();
-
     return html`<div
       class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}"
       role=${this.getAriaRole()}
@@ -314,12 +321,12 @@ export class SonicToastItem extends LitElement {
         ></sonic-icon>`}
 
         <div class="sonic-toast-text">
-          ${this.title
+          ${this.label
             ? html`<div class="sonic-toast-title" id=${titleId}>
-                ${this.title}
+                ${renderToastContent(this.label)}
               </div>`
             : ""}
-          ${this.text ? unsafeHTML(this.text) : ""}
+          ${this.useSlot ? nothing : renderToastContent(this.text)}
           <slot></slot>
         </div>
 
@@ -328,6 +335,27 @@ export class SonicToastItem extends LitElement {
     </div>`;
   }
 
+  protected updated(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has("styleSheet")) {
+      this.syncAdoptedStyleSheets();
+    }
+  }
+
+  syncAdoptedStyleSheets() {
+    if (!(this.renderRoot instanceof ShadowRoot)) return;
+
+    const nextStyleSheets = normalizeStyleSheets(this.styleSheet);
+    const currentStyleSheets = this.renderRoot.adoptedStyleSheets.filter(
+      (sheet) => !this._adoptedStyleSheets.includes(sheet),
+    );
+
+    this.renderRoot.adoptedStyleSheets = [
+      ...currentStyleSheets,
+      ...nextStyleSheets,
+    ];
+    this._adoptedStyleSheets = nextStyleSheets;
+  }
+
   hide() {
     if (!HTML.getClosestElement(this, "sonic-toast")) {
       this.visible = false;
@@ -340,7 +368,7 @@ export class SonicToastItem extends LitElement {
       dismissedObj[this.id] = true;
       localStorage.setItem(
         "sonic-toast-dismissed",
-        JSON.stringify(dismissedObj)
+        JSON.stringify(dismissedObj),
       );
     }
     this.dispatchEvent(new CustomEvent("hide", { bubbles: true }));