@supersoniks/concorde 1.1.24 → 1.1.26

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

@@ -1,6 +1,9 @@
 import { LitElement } from "lit";
 export declare class TableTh extends LitElement {
     static styles: import("lit").CSSResult[];
-    align: "left" | "right" | "left" | "center";
+    colSpan?: number;
+    rowSpan?: number;
+    align?: string;
+    minWidth?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -6,38 +6,66 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
+import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
+const tagName = "sonic-th";
 let TableTh = class TableTh extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.align = "left";
-    }
     render() {
         const styles = {
             textAlign: this.align,
+            minWidth: this.minWidth,
         };
-        return html `<th part="th" style=${styleMap(styles)} ><slot></slot></th>
-    `;
+        return html `<th
+      part="th"
+      style=${styleMap(styles)}
+      colspan=${ifDefined(this.colSpan)}
+      rowspan=${ifDefined(this.rowSpan)}
+    >
+      <slot></slot>
+    </th> `;
     }
 };
 TableTh.styles = [
+    typesColor,
     css `
       :host {
         display: contents;
-        --sc-th-tt:uppercase;
+        background:var(--sc-table-bg);
+        position:sticky;
+        top:0;
+        z-index:20;
       }
 
       th {
-        text-transform:var(--sc-th-tt);
-        text-align:inherit;
-        padding:.3em .5em;
+        all: inherit;
+        display: table-cell;
+        border-bottom: calc(var(--sc-border-width) * 1.5) solid var(--sc-table-border-color);
+        text-transform: var(--sc-table-th-tt);
+        font-weight: var(--sc-table-th-fw);
+        font-size: var(--sc-table-th-fs);
+        padding: var(--sc-table-th-py) var(--sc-table-th-px);
       }
-    `
+    `,
 ];
 __decorate([
-    property({ type: String, reflect: true })
+    property({ type: Number })
+], TableTh.prototype, "colSpan", void 0);
+__decorate([
+    property({ type: Number })
+], TableTh.prototype, "rowSpan", void 0);
+__decorate([
+    property({ type: String })
 ], TableTh.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], TableTh.prototype, "minWidth", void 0);
 TableTh = __decorate([
-    customElement("sonic-th")
+    customElement(tagName)
 ], TableTh);
 export { TableTh };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define(tagName, TableTh);
+}
+catch (e) { }

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
+const tagName = "sonic-thead";
 let TableThead = class TableThead extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -14,11 +15,16 @@ let TableThead = class TableThead extends LitElement {
 TableThead.styles = [
     css `
       :host {
-        display: table-row-group;
+        display: table-header-group;
       }
     `
 ];
 TableThead = __decorate([
-    customElement("sonic-thead")
+    customElement(tagName)
 ], TableThead);
 export { TableThead };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define(tagName, TableThead);
+}
+catch (e) { }

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

@@ -6,12 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
+import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
+const tagName = "sonic-tr";
 let TableTr = class TableTr extends LitElement {
     render() {
         return html `<slot></slot>`;
     }
 };
 TableTr.styles = [
+    typesColor,
     css `
       :host {
         display: table-row;
@@ -19,6 +22,11 @@ TableTr.styles = [
     `
 ];
 TableTr = __decorate([
-    customElement("sonic-tr")
+    customElement(tagName)
 ], TableTr);
 export { TableTr };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define(tagName, TableTr);
+}
+catch (e) { }

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

@@ -11,6 +11,8 @@ export declare class Table extends LitElement {
     size: "xs" | "sm" | "md" | "lg" | "xl";
     striped: boolean;
     sticky: boolean;
+    bordered: boolean;
     hover: boolean;
+    maxHeight?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -6,6 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 import "./table-tr";
 import "./table-th";
 import "./table-td";
@@ -13,17 +15,23 @@ import "./table-thead";
 import "./table-tbody";
 import "./table-tfoot";
 import "./table-caption";
+const tagName = "sonic-table";
 let Table = class Table extends LitElement {
     constructor() {
         super(...arguments);
         this.size = "md";
         this.striped = false;
         this.sticky = false;
+        this.bordered = false;
         this.hover = false;
     }
     render() {
+        const containerStyles = {
+            maxHeight: this.maxHeight,
+        };
         return html `
-      <div class="table-container">
+      
+      <div class="table-container custom-scroll" style=${styleMap(containerStyles)} >
         <div class="table" ?striped=${this.striped} ?hover=${this.hover} ?sticky=${this.sticky}>
           <slot></slot>
         </div>
@@ -32,12 +40,24 @@ let Table = class Table extends LitElement {
     }
 };
 Table.styles = [
+    customScroll,
     css `
       :host {
         --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-bg: var(--sc-base);
+        --sc-table-th-fs: .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;
       }
 
       .table-container {
@@ -49,9 +69,10 @@ Table.styles = [
         width: 100%;
         font-size: var(--sc-table-fs);
         display: table;
+        box-sizing:border-box;
       }
 
-      /*SIZE*/
+      /*SIZES*/
       :host([size="2xs"]) {
         --sc-table-fs: 0.6rem;
       }
@@ -67,6 +88,9 @@ Table.styles = [
       :host([size="xl"]) {
         --sc-table-fs: 1.5rem;
       }
+      :host([bordered]) .table-container {
+        border:var(--sc-border-width) solid var(--sc-table-border-color) !important;
+      }
 
     `,
 ];
@@ -79,10 +103,21 @@ __decorate([
 __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);
 Table = __decorate([
-    customElement("sonic-table")
+    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/tabs/tabs.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import { ResizeController } from "@lit-labs/observers/resize_controller.js";
-import { tailwind } from "../theme/theme";
+// import { tailwind } from "../theme/theme";
 let Tabs = class Tabs extends LitElement {
     constructor() {
         super(...arguments);
@@ -64,15 +64,14 @@ let Tabs = class Tabs extends LitElement {
       ><slot></slot>
       <sonic-pop class="flex"  >
         <sonic-menu-item  shape="square">
-          <sonic-icon prefix="iconoir" class="my-auto" size="xl" name="more-vert"></sonic-icon>
+          <sonic-icon class="my-auto" size="xl" name="more-vert"></sonic-icon>
         </sonic-menu-item>
         <sonic-menu slot="content"></sonic-menu>
-      <sonic-pop>
+  </sonic-pop>
     </menu>`;
     }
 };
 Tabs.styles = [
-    tailwind,
     css `
       :host {
         display: block;

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

@@ -10,6 +10,7 @@ import { repeat } from "lit/directives/repeat.js";
 import "../icon/icon";
 import "../badge/badge";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+const tagName = "sonic-taxonomy";
 /**
  * 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*)
  */
@@ -103,7 +104,7 @@ __decorate([
     property({ type: String, reflect: true })
 ], Taxonomy.prototype, "size", void 0);
 Taxonomy = __decorate([
-    customElement("sonic-taxonomy")
+    customElement(tagName)
 ], Taxonomy);
 export { Taxonomy };
 //Ajout pour la creation du cem notamment pour Storybook

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

@@ -1,8 +1,6 @@
 import { css } from "lit";
 export const coreVariables = css `
   :host {
-    /* --sc-rfs: 16px; */
-
     /* polices*/
     --sc-font-family-base: "Inter var", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
       "Helvetica Neue", Arial, sans-serif;
@@ -10,7 +8,7 @@ export const coreVariables = css `
     --sc-font-style-base: normal;
 
     --sc-headings-font-family: var(--sc-font-family-base);
-    --sc-headings-font-style: var(--sc-font-family-base);
+    --sc-headings-font-style: var(--sc-font-style-base);
     --sc-headings-line-height: 1.1;
     --sc-headings-font-weight: 700;
     --sc-headings-text-transform: none;
@@ -18,18 +16,17 @@ export const coreVariables = css `
     /* Button*/
     --sc-btn-font-weight: var(--sc-font-weight-base);
     --sc-btn-font-family: var(--sc-font-family-base);
-    --sc-btn-font-style: var(--sc-font-weight-base);
+    --sc-btn-font-style: var(--sc-font-style-base);
 
     /* ROUNDED*/
-    --sc-btn-rounded: 0.38em;
-    --sc-input-rounded: 0.38em;
-
     --sc-rounded-sm: calc(var(--sc-rounded) * 0.5);
     --sc-rounded: 0.35rem;
     --sc-rounded-md: calc(var(--sc-rounded) * 1.8);
     --sc-rounded-lg: calc(var(--sc-rounded) * 3.5);
     --sc-rounded-xl: calc(var(--sc-rounded) * 7);
 
+    --sc-btn-rounded: calc(var(--sc-rounded) * 1.2);
+
     /* Placeholder */
     --sc-placeholder-bg: rgba(17, 24, 39, 0.05);
 
@@ -41,10 +38,17 @@ export const coreVariables = css `
     --sc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
     /* formulaires*/
-    --sc-form-border-width: 0.1rem;
+    --sc-border-width: max(1px, 0.085rem);
+    --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: calc(var(--sc-rounded) * 1.2);
 
     /*Couleurs -- textes sur images*/
     --sc-contrast-content: #fff;
     --sc-contrast: #0f172a;
+
+    /*Scrollbar*/
+    --sc-scrollbar-bg : var(--sc-base-400);
   }
 `;

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

@@ -24,10 +24,6 @@ const darkCss = css `
   --sc-base-800: var(--sc-dark-base-800, #d9dce0);
   --sc-base-900: var(--sc-dark-base-900, #e5e7eb);
   --sc-base-content: var(--sc-dark-base-content, #e5e7eb);
-
-  --sc-input-border-color: var(--sc-dark-input-border-color, var(--sc-base-100));
-  --sc-input-bg: var(--sc-dark-input-bg, var(--sc-base-100));
-  --sc-input-color: var(--sc-dark-input-color, var(--sc-base-content));
 `;
 export const dark = css `
   :host([theme="dark"]) {

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

@@ -29,7 +29,6 @@ export const light = css `
     --sc-base-content: var(--sc-base-700);
 
     /*formulaires*/
-    --sc-input-border-color: var(--sc-base-100);
     --sc-input-bg: var(--sc-base-100);
     --sc-input-color: var(--sc-base-content);
   }

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

@@ -1,5 +1,4 @@
 import { LitElement } from "lit";
-export declare const tailwind: import("lit").CSSResult;
 export declare class Theme extends LitElement {
     static styles: import("lit").CSSResult[];
     connectedCallback(): void;

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

@@ -5,15 +5,12 @@ 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 "./theme-collection/core-variables";
 import { light } from "./theme-collection/light";
 import { dark } from "./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() {
         super(...arguments);
@@ -100,6 +97,6 @@ __decorate([
     property({ type: String, reflect: true })
 ], Theme.prototype, "theme", void 0);
 Theme = Theme_1 = __decorate([
-    customElement("sonic-theme")
+    customElement(tagName)
 ], Theme);
 export { Theme };

package/core/components/ui/toast/message-subscriber.js

@@ -8,6 +8,7 @@ import { LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { SonicToast } from "./toast";
+const tagName = "sonic-toast-message-subscriber";
 //Superbe mix de multples versions d'api.
 let MessageSubscriber = class MessageSubscriber extends Subscriber(LitElement) {
     constructor() {
@@ -80,6 +81,6 @@ __decorate([
     property()
 ], MessageSubscriber.prototype, "data", null);
 MessageSubscriber = __decorate([
-    customElement("sonic-toast-message-subscriber")
+    customElement(tagName)
 ], MessageSubscriber);
 export { MessageSubscriber };

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

@@ -8,6 +8,7 @@ export declare class SonicToastItem extends LitElement {
     status: ToastStatus;
     ghost: boolean;
     preserve: boolean;
+    maxHeight: string;
     visible: boolean;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
     hide(): void;

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

@@ -8,12 +8,14 @@ import { html, LitElement, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import "./types";
+import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 const icon = {
     warning: "warning-circled-outline",
     success: "check-circled-outline",
     error: "warning-circled-outline",
     info: "info-empty",
 };
+const tagName = "sonic-toast-item";
 let SonicToastItem = class SonicToastItem extends LitElement {
     constructor() {
         super(...arguments);
@@ -22,6 +24,7 @@ let SonicToastItem = class SonicToastItem extends LitElement {
         this.status = "";
         this.ghost = false;
         this.preserve = false;
+        this.maxHeight = '10rem';
         this.visible = true;
     }
     render() {
@@ -30,22 +33,25 @@ let SonicToastItem = class SonicToastItem extends LitElement {
         }
         return html `<div
       class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}"
-      
     >
-      ${this.status &&
-            html `<sonic-icon prefix="iconoir" name=${icon[this.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
-      
-      <button aria-label="Close" class="sonic-toast-close" @click=${() => this.hide()}>
-        <sonic-icon prefix="iconoir" name="cancel" size="lg"></sonic-icon>
-      </button>
+    
+    <button aria-label="Close" class="sonic-toast-close" @click=${() => this.hide()}>
+    <sonic-icon  name="cancel" size="lg"></sonic-icon>
+    </button>
+    <div class="sonic-toast-content custom-scroll"  style="max-height: ${this.maxHeight} ;">
       
-      <div class="sonic-toast-text">
-        ${this.title ? html `<div class="sonic-toast-title">${this.title}</div>` : ""}
-        ${this.text ? unsafeHTML(this.text) : ""}
-        <slot></slot>
-      </div>
-
-      ${!this.preserve ? this.autoHide() : ""}
+        ${this.status &&
+            html `<sonic-icon  name=${icon[this.status]} class="sonic-toast-icon" size="2xl"></sonic-icon>`}
+        
+          
+          <div class="sonic-toast-text">
+          ${this.title ? html `<div class="sonic-toast-title">${this.title}</div>` : ""}
+          ${this.text ? unsafeHTML(this.text) : ""}
+          <slot></slot>
+          </div>
+          
+          ${!this.preserve ? this.autoHide() : ""}
+        </div>
     </div>`;
     }
     hide() {
@@ -64,6 +70,7 @@ let SonicToastItem = class SonicToastItem extends LitElement {
     }
 };
 SonicToastItem.styles = [
+    customScroll,
     css `
       * {
         box-sizing: border-box;
@@ -71,6 +78,7 @@ SonicToastItem.styles = [
       :host {
         display: block;
         pointer-events: auto;
+        position: relative;
         --sc-toast-status-color: transparent;
         --sc-toast-color: var(--sc-base-content);
         --sc-toast-bg: var(--sc-base);
@@ -78,13 +86,6 @@ SonicToastItem.styles = [
         --sc-toast-shadow: var(--sc-shadow-lg);
       }
 
-      .sonic-toast-area {
-        pointer-events: none;
-        width: calc(100% - 2.5rem);
-        max-width: 64ch;
-        gap: 1rem;
-      }
-
       .fixed-area {
         position: fixed;
         bottom: 1.25rem;
@@ -97,22 +98,27 @@ SonicToastItem.styles = [
       .sonic-toast {
         position: relative;
         pointer-events: auto;
-        background: var(--sc-toast-bg);
+        overflow:hidden;
+        line-height: 1.25;
         color: var(--sc-toast-color);
         box-shadow: var(--sc-toast-shadow);
         border-radius: var(--sc-toast-rounded);
-        padding: 1em 2.5rem 1em 1em;
-        line-height: 1.25;
+        background: var(--sc-toast-bg);
+      }
+
+      .sonic-toast-content {
+        padding: 1em 2rem 1em 1em;
         display: flex;
         gap: 0.5rem;
-        max-height: 10rem;
         overflow: auto;
-      }
+        position:relative;
+      } 
 
       .sonic-toast-text {
         align-self: center;
         margin-top: auto;
         margin-bottom: auto;
+        max-width:70ch;
       }
 
       ::slotted(a),
@@ -126,6 +132,7 @@ SonicToastItem.styles = [
       .sonic-toast-close {
         all: unset;
         position: absolute;
+        z-index:4;
         pointer-events: initial;
         right: 0.5em;
         top: 0.5em;
@@ -186,11 +193,10 @@ SonicToastItem.styles = [
       .error,
       .info,
       .warning {
-        border-top: 3px solid var(--sc-toast-status-color, curentColor);
+        border-top: 3px solid var(--sc-toast-status-color, currentColor);
       }
 
       .sonic-toast:before {
-        background-color: var(--sc-toast-status-color);
         content: "";
         display: block;
         position: absolute;
@@ -201,22 +207,33 @@ SonicToastItem.styles = [
         opacity: 0.05;
         pointer-events: none;
         transition: 0.2s;
-        border-radius: var(--sc-toast-status-color);
+        border-radius: var(--sc-toast-rounded);
+        background-color: var(--sc-toast-status-color);
       }
+      
       .sonic-toast:hover:before {
         opacity: 0.025;
       }
+
       .info .sonic-toast-icon,
       .error .sonic-toast-icon,
       .success .sonic-toast-icon,
       .warning .sonic-toast-icon {
-        color: var(--sc-toast-status-color, curentColor);
+        color: var(--sc-toast-status-color, currentColor);
+      }
+
+      .sonic-toast-icon {
+        position:sticky;
+        top:0;
       }
 
       .ghost {
         opacity: 0.85;
         pointer-events: none;
       }
+
+    
+
     `,
 ];
 __decorate([
@@ -234,10 +251,13 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], SonicToastItem.prototype, "preserve", void 0);
+__decorate([
+    property({ type: String })
+], SonicToastItem.prototype, "maxHeight", void 0);
 __decorate([
     state()
 ], SonicToastItem.prototype, "visible", void 0);
 SonicToastItem = __decorate([
-    customElement("sonic-toast-item")
+    customElement(tagName)
 ], SonicToastItem);
 export { SonicToastItem };