@supersoniks/concorde 2.0.2 → 2.0.3

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

@@ -4,8 +4,12 @@ import "@supersoniks/concorde/core/components/ui/modal/modal-close";
 import "@supersoniks/concorde/core/components/ui/modal/modal-content";
 import "@supersoniks/concorde/core/components/ui/modal/modal-subtitle";
 import "@supersoniks/concorde/core/components/ui/modal/modal-title";
+import { DirectiveResult } from "lit/directive.js";
 declare type ModalCreateOptions = {
-    content?: string;
+    title?: string | DirectiveResult;
+    subtitle?: string | DirectiveResult;
+    content?: string | DirectiveResult;
+    actions?: string | DirectiveResult;
     zIndex?: string;
     paddingX?: string;
     paddingY?: string;
@@ -14,12 +18,16 @@ declare type ModalCreateOptions = {
     height?: string;
     maxHeight?: string;
     removeOnHide?: boolean;
+    forceAction?: boolean;
+    removeHashOnHide?: boolean;
 };
 declare const Modal_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("@supersoniks/concorde/core/_types/types").CoreJSType>) & typeof LitElement;
 export declare class Modal extends Modal_base {
     static styles: import("lit").CSSResult[];
+    static modals: Array<Modal>;
     forceAction: boolean;
     removeOnHide: boolean;
+    removeHashOnHide: boolean;
     align: "center" | "right" | "left";
     padding: string;
     maxWidth: string;
@@ -27,6 +35,7 @@ export declare class Modal extends Modal_base {
     width: string;
     height: string;
     zIndex: string;
+    options?: ModalCreateOptions;
     fullScreen: boolean;
     visible: boolean;
     modalWrapper: HTMLDivElement;
@@ -34,12 +43,15 @@ export declare class Modal extends Modal_base {
     closeBtn: Array<HTMLElement>;
     static create(options: ModalCreateOptions): Modal;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     updated(): void;
     willUpdate(_changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    modalFragment(optionKey: keyof ModalCreateOptions): import("lit-html").TemplateResult<1> | typeof nothing;
     show(): void;
     hide(): void;
     dispose(): void;
+    static disposeAll(): void;
     handleEscape(e: KeyboardEvent): void;
     handleFullsceen(): void;
 }

package/core/components/ui/modal/modal.js

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var Modal_1;
 import { animate, fadeIn, fadeOut } from "@lit-labs/motion";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
@@ -16,12 +17,15 @@ import "@supersoniks/concorde/core/components/ui/modal/modal-content";
 import "@supersoniks/concorde/core/components/ui/modal/modal-subtitle";
 import "@supersoniks/concorde/core/components/ui/modal/modal-title";
 import { PublisherManager } from "@supersoniks/concorde/utils";
+import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 const tagName = "sonic-modal";
-let Modal = class Modal extends Subscriber(LitElement) {
+let Modal = Modal_1 = class Modal extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
         this.forceAction = false;
         this.removeOnHide = false;
+        this.removeHashOnHide = false;
         this.align = "left";
         this.padding = "var(--sc-modal-py) var(--sc-modal-px)";
         this.maxWidth = "var(--sc-modal-max-w) ";
@@ -35,6 +39,9 @@ let Modal = class Modal extends Subscriber(LitElement) {
     static create(options) {
         const modal = document.createElement(tagName);
         // modal styles
+        modal.options = options;
+        if (options.removeHashOnHide === true)
+            modal.setAttribute("removeHashOnHide", "true");
         if (options.removeOnHide === true)
             modal.setAttribute("removeOnHide", "true");
         if (options.maxWidth)
@@ -45,23 +52,28 @@ let Modal = class Modal extends Subscriber(LitElement) {
             modal.maxHeight = options?.maxHeight;
         if (options.height)
             modal.height = options?.height;
+        if (options.forceAction)
+            modal.forceAction = true;
         if (options.paddingX)
             modal.style.setProperty("--sc-modal-px", options?.paddingX);
         if (options.paddingY)
             modal.style.setProperty("--sc-modal-py", options?.paddingY);
         if (options.zIndex)
             modal.style.setProperty("--sc-modal-z-index", options?.zIndex);
-        // inner content
-        modal.innerHTML = `<sonic-modal-close></sonic-modal-close><sonic-modal-content>${options.content}</sonic-modal-content>` || "";
-        const container = document.querySelector("sonic-theme") || document.body;
+        const container = Theme.getPopContainer();
         container.appendChild(modal);
         modal.show();
         return modal;
     }
     connectedCallback() {
+        Modal_1.modals.push(this);
         super.connectedCallback();
         this.handleFullsceen();
     }
+    disconnectedCallback() {
+        Modal_1.modals.splice(Modal_1.modals.indexOf(this), 1);
+        super.disconnectedCallback();
+    }
     updated() {
         const currentModal = this;
         document.addEventListener("keydown", this.handleEscape);
@@ -117,12 +129,14 @@ let Modal = class Modal extends Subscriber(LitElement) {
             out: [{ transform: "translateY(20%) scale(1)", boxShadow: "0 0 0 rgba(0,0,0,0)", opacity: 0 }],
         })}
         >
-          <div class="modal-content ">
+          <div class="modal-content">
+            ${!this.options?.forceAction ? html `<sonic-modal-close></sonic-modal-close>` : nothing} ${this.modalFragment("title")}
+            ${this.modalFragment("subtitle")} ${this.modalFragment("content")} ${this.modalFragment("actions")}
+
             <slot></slot>
           </div>
         </div>
       </div>
-
       <div
         class="overlay"
         @click="${!this.forceAction ? this.hide : null}"
@@ -135,6 +149,32 @@ let Modal = class Modal extends Subscriber(LitElement) {
         })}
       ></div>`;
     }
+    modalFragment(optionKey) {
+        const optionValue = this.options?.[optionKey];
+        if (!optionValue)
+            return nothing;
+        let output;
+        // si object c'est une template Result
+        //@todo, faire mieux...
+        if (optionValue instanceof Object) {
+            output = optionValue;
+        }
+        else {
+            output = unsafeHTML(optionValue);
+        }
+        switch (optionKey) {
+            case "title":
+                return html `<sonic-modal-title>${output}</sonic-modal-title>`;
+            case "subtitle":
+                return html `<sonic-modal-subtitle>${output}</sonic-modal-subtitle>`;
+            case "content":
+                return html `<sonic-modal-content>${output}</sonic-modal-content>`;
+            case "actions":
+                return html `<sonic-modal-actions>${output}</sonic-modal-actions>`;
+            default:
+                return nothing;
+        }
+    }
     show() {
         this.visible = true;
         this.modalElement?.setAttribute("tabindex", "0");
@@ -151,15 +191,25 @@ let Modal = class Modal extends Subscriber(LitElement) {
         if (this.removeOnHide) {
             this.remove();
         }
+        setTimeout(() => {
+            this.dispatchEvent(new CustomEvent("hidden"));
+            if (this.removeHashOnHide) {
+                window.history.replaceState({}, "", window.location.pathname);
+            }
+        }, 480);
     }
     dispose() {
         this.hide();
         this.remove();
     }
+    static disposeAll() {
+        Modal_1.modals.forEach((modal) => {
+            modal.dispose();
+        });
+    }
     handleEscape(e) {
         if (e.key === "Escape") {
-            const modals = [...document.querySelectorAll(tagName)];
-            modals.forEach((modal) => {
+            Modal_1.modals.forEach((modal) => {
                 if (!modal.forceAction) {
                     modal.hide();
                 }
@@ -182,7 +232,7 @@ Modal.styles = [
       :host {
         --sc-modal-py: 2.5rem;
         --sc-modal-px: 1.5rem;
-        --sc-modal-max-w: min(100vw, 64ch);
+        --sc-modal-max-w: min(100vw, 40rem);
         --sc-modal-max-h: 85vh;
         --sc-modal-rounded: var(--sc-rounded-lg);
         --sc-modal-z-index: 990;
@@ -237,6 +287,9 @@ Modal.styles = [
       ::slotted(sonic-modal-title) {
         margin-bottom: 1.25rem;
       }
+      :host([align="left"]) ::slotted(sonic-modal-title) {
+        padding-right: 1em;
+      }
 
       ::slotted(sonic-modal-subtitle) {
         margin-top: -0.9rem;
@@ -290,12 +343,16 @@ Modal.styles = [
       }
     `,
 ];
+Modal.modals = [];
 __decorate([
     property({ type: Boolean })
 ], Modal.prototype, "forceAction", void 0);
 __decorate([
     property({ type: Boolean })
 ], Modal.prototype, "removeOnHide", void 0);
+__decorate([
+    property({ type: Boolean })
+], Modal.prototype, "removeHashOnHide", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Modal.prototype, "align", void 0);
@@ -317,6 +374,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Modal.prototype, "zIndex", void 0);
+__decorate([
+    property({ type: Object })
+], Modal.prototype, "options", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Modal.prototype, "fullScreen", void 0);
@@ -332,7 +392,7 @@ __decorate([
 __decorate([
     queryAssignedElements({ selector: "sonic-modal-close" })
 ], Modal.prototype, "closeBtn", void 0);
-Modal = __decorate([
+Modal = Modal_1 = __decorate([
     customElement(tagName)
 ], Modal);
 export { Modal };

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

@@ -18,9 +18,15 @@ export declare class Pop extends LitElement {
     lastContentY: number;
     resizeObserver: ResizeObserver;
     runPositioningLoop(): void;
-    _toggle(e: Event): void;
-    _show(): void;
-    _hide(): void;
+    toggle(e: Event): void;
+    show(): void;
+    hide(): void;
+    /**
+     * 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é
+     */
+    ancestorsHavingZIndex: Set<HTMLElement>;
+    setMaxZindex(): void;
+    resetZindexes(): void;
     _handleClosePop(e: Event): void;
     connectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;

package/core/components/ui/pop/pop.js

@@ -24,6 +24,10 @@ let Pop = Pop_1 = class Pop extends LitElement {
         this.lastContentX = 0;
         this.lastContentY = 0;
         this.resizeObserver = new ResizeObserver(() => this.computePosition(this.placement));
+        /**
+         * 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é
+         */
+        this.ancestorsHavingZIndex = new Set();
     }
     runPositioningLoop() {
         if (!this.positioningRuns)
@@ -32,16 +36,17 @@ let Pop = Pop_1 = class Pop extends LitElement {
         this.computePosition(this.placement);
         window.requestAnimationFrame(() => this.runPositioningLoop());
     }
-    _toggle(e) {
+    toggle(e) {
         if (this.open && this.noToggle)
             return;
         const keyboardEvent = e;
         if (e.type == "keydown" && (keyboardEvent.key != "ArrowDown" || this.open))
             return;
         this.open = !this.open;
-        this.open ? this._show() : this._hide();
+        this.open ? this.show() : this.hide();
     }
-    _show() {
+    show() {
+        this.setMaxZindex();
         this.popContent.style.removeProperty("display");
         this.open = true;
         this.popContent.setAttribute("tabindex", "0");
@@ -53,12 +58,39 @@ let Pop = Pop_1 = class Pop extends LitElement {
         }
         this.dispatchEvent(new CustomEvent("show"));
     }
-    _hide() {
+    hide() {
+        this.resetZindexes();
         this.open = false;
         this.popContent.setAttribute("tabindex", "-1");
         this.positioningRuns = false;
         this.dispatchEvent(new CustomEvent("hide"));
     }
+    setMaxZindex() {
+        HTML.everyAncestors(this, (parent) => {
+            const htmlElement = parent;
+            if (!htmlElement.className)
+                return true;
+            if ([...htmlElement.classList].includes("@container")) {
+                const style = htmlElement.style;
+                style.zIndex = "999999999";
+                //n'appliquer l'ajout du style "position:relative" que si il n'est pas déjà présent dans le style calculé
+                const computedStyle = getComputedStyle(htmlElement);
+                if (computedStyle.position !== "relative" && computedStyle.position !== "absolute") {
+                    style.position = "relative";
+                }
+                this.ancestorsHavingZIndex.add(parent);
+                return false;
+            }
+            return true;
+        });
+    }
+    resetZindexes() {
+        this.ancestorsHavingZIndex.forEach((elt) => {
+            elt.style.removeProperty("position");
+            elt.style.removeProperty("z-index");
+        });
+        this.ancestorsHavingZIndex.clear();
+    }
     _handleClosePop(e) {
         const path = e.composedPath();
         const target = path[0];
@@ -68,10 +100,9 @@ let Pop = Pop_1 = class Pop extends LitElement {
             const isCloseManual = HTML.getAncestorAttributeValue(target, "data-on-select") === "keep";
             if (e.type == "pointerdown" && popContainsTarget)
                 return;
-            if (e.type == "click" &&
-                ((popContainsTarget && isCloseManual) || !popContentContainsTarget))
+            if (e.type == "click" && ((popContainsTarget && isCloseManual) || !popContentContainsTarget))
                 return;
-            pop._hide();
+            pop.hide();
         });
     }
     connectedCallback() {
@@ -145,11 +176,9 @@ let Pop = Pop_1 = class Pop extends LitElement {
             x = xRight;
         if (contentRect.y < shiftPadding && placement == "top")
             y = yBottom;
-        if (contentRect.x + contentRect.width > window.innerWidth - shiftPadding &&
-            placement == "right")
+        if (contentRect.x + contentRect.width > window.innerWidth - shiftPadding && placement == "right")
             x = xLeft;
-        if (contentRect.y + contentRect.height > window.innerHeight - shiftPadding &&
-            placement == "bottom")
+        if (contentRect.y + contentRect.height > window.innerHeight - shiftPadding && placement == "bottom")
             y = yTop;
         this.lastContentX += x - contentRect.x;
         this.lastContentY += y - contentRect.y;
@@ -165,12 +194,10 @@ let Pop = Pop_1 = class Pop extends LitElement {
             this.lastContentY += -contentRect.y;
         }
         if (contentRect.x + contentRect.width > window.innerWidth) {
-            this.lastContentX +=
-                window.innerWidth - (contentRect.x + contentRect.width);
+            this.lastContentX += window.innerWidth - (contentRect.x + contentRect.width);
         }
         if (contentRect.y + contentRect.height > window.innerHeight) {
-            this.lastContentY +=
-                window.innerHeight - (contentRect.y + contentRect.height);
+            this.lastContentY += window.innerHeight - (contentRect.y + contentRect.height);
         }
         Object.assign(this.popContent.style, {
             left: `${this.lastContentX}px`,
@@ -179,18 +206,14 @@ let Pop = Pop_1 = class Pop extends LitElement {
     }
     render() {
         return html `
-      <slot
-        @click=${this._toggle}
-        @keydown=${this._toggle}
-        class="contents"
-      ></slot>
+      <slot @click=${this.toggle} @keydown=${this.toggle} class="contents"></slot>
       <slot
         name="content"
         tabindex="-1"
         part="content"
         style="display: none;"
         class="  
-          ${this.open ? "is-open" : ""}"
+        ${this.open ? "is-open" : ""}"
       ></slot>
     `;
     }
@@ -205,8 +228,8 @@ Pop.styles = [
       slot[name="content"] {
         max-width: 80vw;
         background-color: var(--sc-base);
-        position: absolute;
-        z-index: 50;
+        position: fixed;
+        z-index: 99999;
         display: block;
         transform: translateY(1rem) scale(0.95);
         opacity: 0;

package/core/components/ui/table/table-tr.d.ts

@@ -1,5 +1,13 @@
-import { LitElement } from "lit";
-export declare class TableTr extends LitElement {
+import { LitElement, PropertyValues } from "lit";
+import { ListItemMetadata } from "@supersoniks/concorde/core/components/functional/list/list";
+declare const TableTr_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../_types/types").CoreJSType>) & typeof LitElement;
+export declare class TableTr extends TableTr_base {
     static styles: import("lit").CSSResult[];
+    _metadata_: ListItemMetadata;
+    even?: boolean;
+    odd?: boolean;
+    last?: boolean;
+    willUpdate(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }
+export {};

package/core/components/ui/table/table-tr.js

@@ -5,10 +5,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, css } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 const tagName = "sonic-tr";
-let TableTr = class TableTr extends LitElement {
+let TableTr = class TableTr extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._metadata_ = {};
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has("_metadata_")) {
+            this.even = !!this._metadata_.even;
+            this.odd = !!this._metadata_.odd;
+            this.last = !!this._metadata_.lastChild;
+        }
+        super.willUpdate(changedProperties);
+    }
     render() {
         return html `<slot></slot>`;
     }
@@ -27,11 +40,26 @@ TableTr.styles = [
         background: var(--sc-table-bg) !important;
       }
 
+      :host([last]) {
+        --sc-table-td-border-b: none;
+      }
       :host(:hover) {
         background: var(--sc-table-hover-bg) !important;
       }
     `,
 ];
+__decorate([
+    property({ type: Object })
+], TableTr.prototype, "_metadata_", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TableTr.prototype, "even", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TableTr.prototype, "odd", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TableTr.prototype, "last", void 0);
 TableTr = __decorate([
     customElement(tagName)
 ], TableTr);

package/core/components/ui/table/table.d.ts

@@ -10,6 +10,7 @@ export declare class Table extends LitElement {
     static styles: import("lit").CSSResult[];
     size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
     bordered: boolean;
+    rounded: boolean;
     noCustomScroll: boolean;
     maxHeight?: string;
     render(): import("lit-html").TemplateResult<1>;

package/core/components/ui/table/table.js

@@ -21,6 +21,7 @@ let Table = class Table extends LitElement {
     constructor() {
         super(...arguments);
         this.bordered = false;
+        this.rounded = false;
         this.noCustomScroll = false;
     }
     render() {
@@ -75,7 +76,9 @@ Table.styles = [
       }
 
       :host([bordered]) .table-container {
-        border: var(--sc-border-width) solid var(--sc-table-border-color) !important;
+        border: var(--sc-border-width) solid var(--sc-table-border-color);
+        border-radius: var(--sc-rounded);
+        --sc-table-td-border-b: var(--sc-border-width) solid var(--sc-table-border-color);
       }
     `,
 ];
@@ -85,6 +88,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Table.prototype, "bordered", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Table.prototype, "rounded", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Table.prototype, "noCustomScroll", void 0);

package/core/components/ui/theme/theme-collection/core-variables.js

@@ -2,8 +2,7 @@ import { css } from "lit";
 export const coreVariables = css `
   :host {
     /* polices*/
-    --sc-font-family-base: "Inter var", "Inter", -apple-system, system-ui,
-      BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    --sc-font-family-base: "Inter var", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
       sans-serif;
     --sc-font-weight-base: 400;
     --sc-font-style-base: normal;
@@ -30,37 +29,27 @@ export const coreVariables = css `
     /* 4 for rounded full*/
     --sc-btn-rounded-intensity: 1.4;
     --sc-btn-font-weight: 500;
-    --sc-btn-rounded: calc(
-      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) *
-        var(--sc-btn-rounded-intensity)
-    );
+    --sc-btn-rounded: calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-btn-rounded-intensity));
 
     /* Placeholder */
     --sc-placeholder-bg: rgba(17, 24, 39, 0.05);
 
     /* OMBRES */
-    --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1),
-      0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
-      0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --sc-shadow-lg: 0 10px 15px 0px rgb(0 0 0 / 0.1),
-      0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
-      0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --sc-shadow-lg: 0 10px 15px 0px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
     --sc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
     /* Forms */
     --sc-border-width: max(1px, 0.12rem);
-    --sc-border-color: var(--sc-base-200);
+    --sc-border-color: var(--sc-base-100);
     --sc-form-height: 2.5em;
     --sc-form-border-width: var(--sc-border-width);
     --sc-input-bg: var(--sc-base-100);
     --sc-input-border-color: var(--sc-input-bg);
     --sc-input-rounded-intensity: 1.4;
-    --sc-input-rounded: calc(
-      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) *
-        var(--sc-input-rounded-intensity)
-    );
+    --sc-input-rounded: calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-input-rounded-intensity));
     --sc-label-font-weight: 500;
 
     /* Contrast -- ex : Text on images */

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

@@ -1,6 +1,12 @@
 import { LitElement } from "lit";
 export declare class Theme extends LitElement {
     static styles: import("lit").CSSResult[];
+    static instance: Theme | undefined;
+    constructor();
+    /**
+     * retourne le conteneur de tout ce qui pop : popups / modale / tooltip? / dropdown / ...
+     */
+    static getPopContainer(): HTMLElement;
     theme: string;
     background: boolean;
     color: boolean;

package/core/components/ui/theme/theme.js

@@ -14,15 +14,23 @@ import { PublisherManager } from "@supersoniks/concorde/utils";
 const tagName = "sonic-theme";
 let Theme = Theme_1 = class Theme extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.theme = "light";
         this.background = false;
         this.color = false;
         this.font = false;
+        Theme_1.instance = this;
+    }
+    /**
+     * retourne le conteneur de tout ce qui pop : popups / modale / tooltip? / dropdown / ...
+     */
+    static getPopContainer() {
+        return Theme_1.instance || document.body;
     }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener("message", (e) => this.receiveMessage(e), false);
+        window.dispatchEvent(new CustomEvent("SonicThemeReady"));
         this.postCSSVars();
     }
     postCSSVars() {
@@ -31,8 +39,7 @@ let Theme = Theme_1 = class Theme extends LitElement {
         const fontUrls = [];
         for (let i = 0; i < ssLength; i++) {
             const ss = stylesheets[i];
-            if (ss.href &&
-                (ss.href.includes("googleapis") || ss.href.includes("typekit.net")))
+            if (ss.href && (ss.href.includes("googleapis") || ss.href.includes("typekit.net")))
                 fontUrls.push(ss.href);
         }
         const theme = {
@@ -53,10 +60,7 @@ let Theme = Theme_1 = class Theme extends LitElement {
     }
     getCssVariables() {
         const names = [];
-        const stylesheets = [
-            ...Theme_1.styles.map((s) => s.styleSheet),
-            ...Array.from(document.styleSheets),
-        ];
+        const stylesheets = [...Theme_1.styles.map((s) => s.styleSheet), ...Array.from(document.styleSheets)];
         for (const stylesheet of stylesheets) {
             try {
                 if (!stylesheet)
@@ -91,12 +95,6 @@ Theme.styles = [
     dark,
     coreVariables,
     css `
-      :host([background]) {
-        display: block !important;
-        background: var(--sc-body-bg) !important;
-        min-height: 100vh;
-      }
-
       :host([color]) {
         color: var(--sc-base-content);
       }

package/core/components/ui/toast/message-subscriber.d.ts

@@ -11,16 +11,8 @@ type APIResult = {
 declare const MessageSubscriber_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<APIResult>) & typeof LitElement;
 export declare class MessageSubscriber extends MessageSubscriber_base {
     _messages: Array<Message>;
-    success: boolean | null;
-    status: boolean | null;
     get messages(): Message[];
     set messages(value: Message[]);
-    _message: string;
-    get message(): string;
-    set message(value: string);
-    _data: object | string;
-    get data(): string | object;
-    set data(value: string | object);
     render(): symbol;
 }
 export {};