@supersoniks/concorde 1.1.42 → 1.1.43

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

@@ -20,19 +20,15 @@ const tagName = "sonic-table";
 let Table = class Table extends LitElement {
     constructor() {
         super(...arguments);
-        this.striped = false;
-        this.sticky = false;
         this.bordered = false;
-        this.hover = false;
     }
     render() {
         const containerStyles = {
             maxHeight: this.maxHeight,
         };
         return html `
-      
-      <div class="table-container custom-scroll" style=${styleMap(containerStyles)} >
-        <div class="table" ?striped=${this.striped} ?hover=${this.hover} ?sticky=${this.sticky}>
+      <div class="table-container custom-scroll" style=${styleMap(containerStyles)}>
+        <div class="table">
           <slot></slot>
         </div>
       </div>
@@ -47,51 +43,43 @@ Table.styles = [
         --sc-table-fw: var(--sc-font-weight-base);
         --sc-table-fst: var(--sc-font-style-base);
         --sc-table-fs: 1rem;
-        --sc-table-border-color: var(--sc-base-200);
-        --sc-table-caption-color: var(--sc-base-400);
+        --sc-table-border-color: var(--sc-border-color);
+        --sc-table-caption-color: var(--sc-base-500);
         --sc-table-bg: var(--sc-base);
-        --sc-table-th-fs: .85em;
+        --sc-table-accent-bg: var(--sc-base-50);
+        --sc-table-hover-bg: var(--sc-base-100);
+        --sc-table-th-fs: 0.85em;
         --sc-table-th-fw: bold;
         --sc-table-th-tt: uppercase;
         --sc-table-th-px: var(--sc-table-td-px);
-        --sc-table-th-py: calc(1.8 * var(--sc-table-td-py) );
-        --sc-table-td-px: .5em;
-        --sc-table-td-py: .5em;
-        display:block;
+        --sc-table-th-py: calc(1.8 * var(--sc-table-td-py));
+        --sc-table-td-px: 0.5em;
+        --sc-table-td-py: 0.5em;
+        display: block;
       }
 
       :host([maxHeight]) .table-container {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
       }
-      
+
       .table {
         width: 100%;
         display: table;
-        box-sizing:border-box;
+        box-sizing: border-box;
       }
 
       :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) !important;
       }
-
     `,
 ];
 __decorate([
     property({ type: String, reflect: true })
 ], Table.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Table.prototype, "striped", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Table.prototype, "sticky", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Table.prototype, "bordered", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Table.prototype, "hover", void 0);
 __decorate([
     property({ type: String })
 ], Table.prototype, "maxHeight", void 0);
@@ -99,8 +87,3 @@ Table = __decorate([
     customElement(tagName)
 ], Table);
 export { Table };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, Table);
-}
-catch (e) { }

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

@@ -1,6 +1,8 @@
 import { LitElement, nothing } from "lit";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 import "@supersoniks/concorde/core/components/ui/badge/badge";
+import { IconConf } from "../icon/icons";
+declare type TaxonomyConf = Record<string, boolean | string>;
 /**
  * Le composant taxonomy crée un badge (*sonic-badge*) contenant une liste de termes préfixés par une icone (*sonic-icon*) optionelle séparées par une chaine html séparatrice (*separator*)
  */
@@ -9,12 +11,12 @@ export declare class Taxonomy extends LitElement {
     /**
      * Identifiant d'icone passé en interne au composant *sonic-icon*
      */
-    icon: any;
+    icon: IconConf;
     /**
      * Tableau d'objets de la forme :{*key*_name:*"Une taxonomie"*} ou *key* correspond à la valeur fournie à la propriété *key*.
      * Dans ce cas *"une taxonomie"* sera un des termes affiches dans le composant.
      */
-    taxonomy: never[];
+    taxonomy: TaxonomyConf[];
     /**
      * Chaque terme sera séparé par la valeur contenue dans cette propriété
      */
@@ -32,10 +34,11 @@ export declare class Taxonomy extends LitElement {
      * * gost : composant super léger visuellement
      * * outline : composant légé avec une bordure
      */
-    variant: "default" | "outline";
+    variant: "default" | "outline" | "ghost";
     /**
      * Taille du composant, implique notamment des modifications de typo et de marge interne
      */
     size: "md" | "xs" | "sm" | "lg";
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
+export {};

package/core/components/ui/taxonomy/taxonomy.js

@@ -21,7 +21,7 @@ let Taxonomy = class Taxonomy extends LitElement {
         /**
          * Identifiant d'icone passé en interne au composant *sonic-icon*
          */
-        this.icon = {};
+        this.icon = { name: "" };
         /**
          * Tableau d'objets de la forme :{*key*_name:*"Une taxonomie"*} ou *key* correspond à la valeur fournie à la propriété *key*.
          * Dans ce cas *"une taxonomie"* sera un des termes affiches dans le composant.
@@ -51,7 +51,7 @@ let Taxonomy = class Taxonomy extends LitElement {
         this.size = "md";
     }
     render() {
-        if (!this.taxonomy)
+        if (!Array.isArray(this.taxonomy))
             return nothing;
         let key = this.key + "_display";
         let taxo = this.taxonomy.filter((elt) => elt != null && (elt[key] === true || elt[key] == "1" || !elt.hasOwnProperty(key)));
@@ -62,10 +62,15 @@ let Taxonomy = class Taxonomy extends LitElement {
         this.style.removeProperty("display");
         return html `
       <sonic-badge type=${this.type} variant=${this.variant} size=${this.size}>
-        <sonic-icon slot="prefix" library=${ifDefined(this.icon.library)} prefix=${ifDefined(this.icon.prefix)} name=${ifDefined(this.icon.name)} ></sonic-icon>
+        <sonic-icon
+          slot="prefix"
+          library=${ifDefined(this.icon.library)}
+          prefix=${ifDefined(this.icon.prefix)}
+          name=${ifDefined(this.icon.name)}
+        ></sonic-icon>
         <span class="taxonomy-list">
           ${repeat(taxo, (item) => item[this.key + "_id"], (item) => {
-            return html `<span> ${item[this.key + "_name"]}</span
+            return html `<span> ${item[this.key + "_name"] || item["name"]}</span
                 ><span class="sonic-taxonomy-separator">${unsafeHTML(this.separator)}</span>`;
         })}
         </span>
@@ -108,8 +113,3 @@ Taxonomy = __decorate([
     customElement(tagName)
 ], Taxonomy);
 export { Taxonomy };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define("sonic-taxonomy", Taxonomy);
-}
-catch (e) { }

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

@@ -2,7 +2,7 @@ import { css } from "lit";
 export const coreVariables = css `
   :host {
     /* polices*/
-    --sc-font-family-base: "Inter var", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
+    --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;
@@ -22,14 +22,14 @@ export const coreVariables = css `
     --sc-rounded-sm: calc(var(--sc-rounded) * 0.5);
     --sc-rounded: 0.375rem;
     --sc-rounded-md: calc(var(--sc-rounded) * 1.8);
-    --sc-rounded-lg: calc(var(--sc-rounded) * 3.5);
+    --sc-rounded-lg: calc(var(--sc-rounded) * 3);
     --sc-rounded-xl: calc(var(--sc-rounded) * 7);
-    --sc-rounded-size-intensity: calc((1em - 1rem) * .4);
+    --sc-rounded-size-intensity: calc((1em - 1rem) * 0.4);
 
     /* 4 for rounded full*/
-    --sc-btn-rounded-intensity : 1.4;
+    --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);
@@ -37,18 +37,21 @@ export const coreVariables = css `
     /* 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 -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px 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-form-height : 2.5em;
+    --sc-border-color: var(--sc-base-200);
+    --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-intensity: 1.4;
+    --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 */
@@ -56,10 +59,9 @@ export const coreVariables = css `
     --sc-contrast: #11151f;
 
     /*Scrollbar*/
-    --sc-scrollbar-bg : var(--sc-base-400);
+    --sc-scrollbar-bg: var(--sc-base-400);
 
     /*Body*/
     --sc-body-bg: var(--sc-base);
-
   }
 `;

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

@@ -14,7 +14,7 @@ const darkCss = css `
 
   --sc-base: var(--sc-dark-base, #1d2634);
   --sc-base-50: var(--sc-dark-base-50, #1f2937);
-  --sc-base-100: var(--sc-dark-base-100, #252C36);
+  --sc-base-100: var(--sc-dark-base-100, #252c36);
   --sc-base-200: var(--sc-dark-base-200, #2c3543);
   --sc-base-300: var(--sc-dark-base-300, #38414e);
   --sc-base-400: var(--sc-dark-base-400, #515964);

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

@@ -1,18 +1,13 @@
 import { LitElement } from "lit";
-export declare const tailwind: import("lit").CSSResult;
 export declare class Theme extends LitElement {
     static styles: import("lit").CSSResult[];
     theme: string;
     background: boolean;
     color: boolean;
     font: boolean;
-    contrastDarkMode: boolean;
     connectedCallback(): void;
-    updated(): void;
     postCSSVars(): void;
-    receiveMessage(event: any): void;
+    receiveMessage(event: MessageEvent): void;
     getCssVariables(): Record<string, string>;
-    contrast(color: string, percent: number): string;
-    contrastBg(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -5,15 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var Theme_1;
-import { html, LitElement, css, unsafeCSS } from "lit";
+import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { coreVariables } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/core-variables";
 import { light } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/light";
 import { dark } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/dark";
-import tailwindImport from "./css/tailwind.css?inline";
-export const tailwind = css `
-  ${unsafeCSS(tailwindImport)}
-`;
 const tagName = "sonic-theme";
 let Theme = Theme_1 = class Theme extends LitElement {
     constructor() {
@@ -22,16 +18,12 @@ let Theme = Theme_1 = class Theme extends LitElement {
         this.background = false;
         this.color = false;
         this.font = false;
-        this.contrastDarkMode = false;
     }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener("message", (e) => this.receiveMessage(e), false);
         this.postCSSVars();
     }
-    updated() {
-        this.contrastBg();
-    }
     postCSSVars() {
         const stylesheets = document.styleSheets;
         const ssLength = stylesheets.length;
@@ -61,11 +53,14 @@ let Theme = Theme_1 = class Theme extends LitElement {
         let stylesheets = [...Theme_1.styles.map((s) => s.styleSheet), ...Array.from(document.styleSheets)];
         for (let stylesheet of stylesheets) {
             try {
-                let rules = stylesheet === null || stylesheet === void 0 ? void 0 : stylesheet.cssRules;
+                if (!stylesheet)
+                    continue;
+                let rules = stylesheet.cssRules;
                 for (let rule of rules) {
-                    if (!rule.style)
+                    if (!("style" in rule))
                         continue;
-                    for (let name of rule.style) {
+                    let style = rule.style;
+                    for (let name of style) {
                         if (names.includes(name) || name.indexOf("--sc") !== 0)
                             continue;
                         names.push(name);
@@ -79,24 +74,6 @@ let Theme = Theme_1 = class Theme extends LitElement {
         names.forEach((name) => (result[name] = style.getPropertyValue(name)));
         return result;
     }
-    // function to darken a color based on an hexa value
-    contrast(color, percent) {
-        let num = parseInt(color.replace("#", ""), 16), amt = Math.round(2.55 * percent), R = (num >> 16) + amt, B = ((num >> 8) & 0x00ff) + amt, G = (num & 0x0000ff) + amt;
-        return ("#" +
-            (0x1000000 +
-                (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
-                (B < 255 ? (B < 1 ? 0 : B) : 255) * 0x100 +
-                (G < 255 ? (G < 1 ? 0 : G) : 255))
-                .toString(16)
-                .slice(1));
-    }
-    // get de computed value of --sc-base and darken it
-    contrastBg() {
-        if (this.theme === "dark" && this.contrastDarkMode && this.background) {
-            let baseColor = window.getComputedStyle(this).getPropertyValue("--sc-base");
-            this.style.setProperty("--sc-body-bg", this.contrast(baseColor, -2.5));
-        }
-    }
     render() {
         return html `<slot></slot>`;
     }
@@ -111,9 +88,6 @@ Theme.styles = [
         background: var(--sc-body-bg) !important;
         min-height: 100vh;
       }
-      :host([contrastDarkMode]) {
-        transition: background-color 2.5s ease;
-      }
 
       :host([color]) {
         color: var(--sc-base-content);
@@ -138,9 +112,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Theme.prototype, "font", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Theme.prototype, "contrastDarkMode", void 0);
 Theme = Theme_1 = __decorate([
     customElement(tagName)
 ], Theme);

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

@@ -1,17 +1,23 @@
 import { LitElement } from "lit";
-declare const MessageSubscriber_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+import { ToastStatus } from "@supersoniks/concorde/core/components/ui/toast/types";
+declare type Message = {
+    type: string;
+    content: string;
+    status: ToastStatus;
+};
+declare const MessageSubscriber_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
 export declare class MessageSubscriber extends MessageSubscriber_base {
-    _messages: Array<any>;
+    _messages: Array<Message>;
     success: boolean | null;
     status: boolean | null;
-    get messages(): Array<any>;
-    set messages(value: Array<any>);
+    get messages(): Message[];
+    set messages(value: Message[]);
     _message: string;
     get message(): string;
     set message(value: string);
-    _data: Record<string, any>[] | string;
-    get data(): string | Record<string, any>[];
-    set data(value: string | Record<string, any>[]);
+    _data: Object | string;
+    get data(): string | Object;
+    set data(value: string | Object);
     render(): symbol;
 }
 export {};

package/core/components/ui/toast/toast-item.js

@@ -107,7 +107,7 @@ SonicToastItem.styles = [
         position: fixed;
         bottom: 1.25rem;
         right: 1.25rem;
-        z-index: 999;
+        z-index: 10000;
         display: flex;
         flex-direction: column-reverse;
       }

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

@@ -16,5 +16,6 @@ export declare class SonicToast extends LitElement {
         ghost: boolean | undefined;
         dismissForever: boolean | undefined;
     } | null;
-    removeItem(item: Toast): void;
+    static removeItem(toastToRemove?: Toast): void;
+    removeItem(toastToRemove?: Toast): void;
 }

package/core/components/ui/toast/toast.js

@@ -29,22 +29,23 @@ let SonicToast = class SonicToast extends LitElement {
             pointerEvents: "none",
             gap: "1rem",
             display: "flex",
-            margin: "1rem"
+            margin: "1rem",
         };
         if (!isIframe) {
-            styles = Object.assign(Object.assign({}, styles), { margin: "0", width: "calc(100% - 2.5rem)", position: "fixed", bottom: "1.25rem", right: "1.25rem", zIndex: "999", maxWidth: "64ch", flexDirection: "column-reverse" });
+            styles = Object.assign(Object.assign({}, styles), { margin: "0", width: "calc(100% - 2.5rem)", position: "fixed", bottom: "1.25rem", right: "1.25rem", zIndex: "10000", maxWidth: "64ch", flexDirection: "column-reverse" });
         }
         // ${window.parent == window ? "fixed-area" : ""}
         if (!this.toasts)
             return nothing;
         return html `<div aria-live="polite" style=${styleMap(styles)}>
       ${repeat(this.toasts, (item) => item.id, (item) => html `
-          <sonic-toast-item maxHeight=${isIframe ? 'none' : '10rem'}
+          <sonic-toast-item
+            maxHeight=${isIframe ? "none" : "10rem"}
             status=${ifDefined(item.status)}
             title=${ifDefined(item.title)}
             ?ghost=${item.ghost}
             ?dismissForever=${item.dismissForever}
-            ?preserve=${item.preserve} 
+            ?preserve=${item.preserve}
             id=${ifDefined(item.id)}
             @hide=${() => this.removeItem(item)}
             ${animate({
@@ -88,7 +89,7 @@ let SonicToast = class SonicToast extends LitElement {
         // Ajoute le toast à la liste
         let toastComponent = document.querySelector("sonic-toast");
         const nextId = (_a = conf.id) !== null && _a !== void 0 ? _a : new Date().valueOf();
-        const interactiveRegExp = new RegExp("</a>|</button>");
+        const interactiveRegExp = new RegExp("</a>|</.*?button>|</.*?input>|</.*?textarea>|</.*?select>");
         const hasInteractive = interactiveRegExp.test(conf.text);
         const currentToast = {
             id: nextId,
@@ -101,7 +102,7 @@ let SonicToast = class SonicToast extends LitElement {
         };
         // check if the toast is dismissed
         if (conf.dismissForever && conf.id) {
-            const dismissed = localStorage.getItem('sonic-toast-dismissed') || '{}';
+            const dismissed = localStorage.getItem("sonic-toast-dismissed") || "{}";
             const dismissedObj = JSON.parse(dismissed);
             if (dismissedObj[conf.id]) {
                 return null;
@@ -109,18 +110,33 @@ let SonicToast = class SonicToast extends LitElement {
         }
         if (toastComponent.toasts.length > 0) {
             let toastA = Object.assign({}, currentToast);
-            let toastB = Object.assign({}, toastComponent.toasts[toastComponent.toasts.length - 1]);
-            toastA.id = toastB.id = 0;
-            if (!currentToast.preserve && Objects.shallowEqual(toastA, toastB)) {
-                return null;
+            for (const toast of toastComponent.toasts) {
+                let toastB = Object.assign({}, toast);
+                toastA.id = toastB.id = 0;
+                if ( /*!currentToast.preserve && */Objects.shallowEqual(toastA, toastB)) {
+                    return null;
+                }
             }
         }
         toastComponent.toasts = [...toastComponent.toasts, currentToast];
         return currentToast;
     }
+    static removeItem(toastToRemove) {
+        let toastComponent = document.querySelector("sonic-toast");
+        if (!toastComponent)
+            return;
+        console.log(toastToRemove);
+        toastComponent.removeItem(toastToRemove);
+    }
     // Remove Toast
-    removeItem(item) {
-        this.toasts = this.toasts.filter((i) => i != item);
+    removeItem(toastToRemove) {
+        if (!toastToRemove)
+            return;
+        this.toasts = this.toasts.filter((toast) => {
+            toast = Object.assign({}, toast);
+            delete toast.id;
+            return !Objects.shallowEqual(toast, toastToRemove, false);
+        });
     }
 };
 __decorate([
@@ -131,6 +147,5 @@ SonicToast = __decorate([
 ], SonicToast);
 export { SonicToast };
 if (typeof window !== "undefined") {
-    let win = window;
-    win.SonicToast = SonicToast;
+    window.SonicToast = SonicToast;
 }

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

@@ -2,6 +2,7 @@ import { LitElement } from "lit";
 export declare class Tooltip extends LitElement {
     static styles: import("lit").CSSResult[];
     label: string;
+    placement?: "top" | "bottom";
     disabled: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/tooltip/tooltip.js

@@ -15,22 +15,21 @@ let Tooltip = class Tooltip extends LitElement {
     }
     render() {
         let disabledClass = this.disabled || this.label == "" ? "disabled" : "";
-        return html `<div
-      data-tooltip-text="${this.label.trim().replace("&nbsp;", " ")}"
-      class="tooltip ${disabledClass}"
-    >
+        return html `<div data-tooltip-text="${this.label.trim().replace("&nbsp;", " ")}" class="tooltip ${disabledClass}">
       <slot></slot>
     </div>`;
     }
 };
 Tooltip.styles = [
     css `
-      .tooltip {
+      :host {
         position: relative;
-        display: flex;
+        display: inline-flex;
         align-items: center;
         text-align: center;
+        --sc-tooltip-fw: var(--sc-font-weight-base);
       }
+
       .tooltip:before {
         position: absolute;
         content: attr(data-tooltip-text);
@@ -38,9 +37,6 @@ Tooltip.styles = [
         display: block;
         opacity: 0;
         pointer-events: none;
-        bottom: calc(100% + 0.25rem);
-        left: 50%;
-        transform: translateX(-50%);
         background: var(--sc-base-content, #111827);
         padding: 0.25rem;
         border-radius: 0.25rem;
@@ -50,16 +46,46 @@ Tooltip.styles = [
         line-height: 1.1;
         width: max-content;
         max-width: 20rem;
+        white-space: pre-line;
+        font-weight: var(--sc-tooltip-fw);
       }
       .tooltip:not(.disabled):hover:before {
         opacity: 1;
         display: block;
       }
+
+      :host(:not([placement])) .tooltip:before,
+      :host([placement="top"]) .tooltip:before {
+        bottom: calc(100% + 0.25rem);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      :host([placement="bottom"]) .tooltip:before {
+        top: calc(100% + 0.25rem);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      :host([placement="left"]) .tooltip:before {
+        top: 50%;
+        right: calc(100% + 0.25rem);
+        transform: translateY(-50%);
+      }
+
+      :host([placement="right"]) .tooltip:before {
+        top: 50%;
+        transform: translateY(-50%);
+        left: calc(100% + 0.25rem);
+      }
     `,
 ];
 __decorate([
     property({ type: String })
 ], Tooltip.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Tooltip.prototype, "placement", void 0);
 __decorate([
     property({ type: Boolean })
 ], Tooltip.prototype, "disabled", void 0);
@@ -67,8 +93,3 @@ Tooltip = __decorate([
     customElement(tagName)
 ], Tooltip);
 export { Tooltip };
-//Ajout pour la creation du cem notamment pour Storybook
-try {
-    customElements.define(tagName, Tooltip);
-}
-catch (e) { }

package/core/components/ui/ui.js

@@ -26,9 +26,6 @@ import "./loader/loader";
 import "./taxonomy/taxonomy";
 //Menu
 import "./menu/menu";
-//Tabs
-// import "./tabs/tabs";
-// import "./tabs/tab";
 // Misc
 import "./modal/modal";
 import "./alert/alert";

package/core/core.js

@@ -1,10 +1,9 @@
 import "./components/functional/functional";
 import "./components/ui/ui";
 import "./mixins/mixins";
-import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import DataBindObserver from "./utils/DataBindObserver";
-let win = window;
-if (!win.SonicPublisherManager)
-    win.SonicPublisherManager = PublisherManager;
-if (!win.SonicDataBindObserver)
-    win.SonicDataBindObserver = DataBindObserver;
+if (!window.SonicPublisherManager)
+    window.SonicPublisherManager = PublisherManager;
+if (!window.SonicDataBindObserver)
+    window.SonicDataBindObserver = DataBindObserver;