@supersoniks/concorde 1.1.23 → 1.1.25

package/core/components/ui/progress/progress.js

@@ -7,6 +7,7 @@ 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";
+const tagName = "sonic-progress";
 let Progress = class Progress extends LitElement {
     constructor() {
         super(...arguments);
@@ -17,13 +18,15 @@ let Progress = class Progress extends LitElement {
     render() {
         return html `
       <progress value=${ifDefined(this.value)} max=${this.max}></progress>
+      <div class="slot-container">
       <slot></slot>
+      <slot name="remaining"></slot>
+      </div>
     `;
     }
 };
 Progress.styles = [
     css `
-
       :host {
         --sc-progress-bg: var(--sc-input-bg, var(--sc-base-100, #f5f5f5));
         --sc-progress-color: var(--sc-base-content, #1f2937);
@@ -31,10 +34,9 @@ Progress.styles = [
         --sc-progress-fs: 1rem;
         --sc-progress-fw: 500;
         --sc-progress-rounded: var(--sc-rounded-lg);
-        font-weight:var(--sc-progress-fw);
-        display: flex;
-        flex-wrap: wrap;
+        display: block;
         line-height: 1.2;
+        font-weight:var(--sc-progress-fw);
         font-size:var(--sc-progress-fs);
         color:var(--sc-progress-color);
       }
@@ -45,17 +47,21 @@ Progress.styles = [
         -webkit-appearance: none;
         appearance: none;
         overflow: hidden;
+        border:none;
         height: var(--sc-progress-height);
         border-radius: var(--sc-progress-rounded);
         background-color: var(--sc-progress-bg);
         color: var(--sc-progress-color);
-        border:none;
       }
       progress::-moz-progress-bar {
         background-color: var(--sc-progress-color);
         border-radius: var(--sc-progress-rounded);
       }
 
+      progress:not([value])::-moz-progress-bar  {
+        background-color: var(--sc-progress-bg);
+      }
+
       progress::-webkit-progress-bar {
         background-color: var(--sc-progress-bg);
       }
@@ -64,6 +70,7 @@ Progress.styles = [
         border-radius: var(--sc-progress-rounded);
       }
 
+      /* Indeterminate */
       progress:indeterminate:after {
           background-color: var(--sc-progress-color);
           content: "";
@@ -117,7 +124,18 @@ Progress.styles = [
         --sc-progress-fs: 1.5rem;
       }
 
-
+      slot[name="remaining"] {
+        font-weight:var(--sc-font-weight-base);
+        color:var(--sc-base-400);
+        font-size:.85em;
+        margin-top:.5em;
+      }
+      
+      .slot-container {
+        display:flex;
+        justify-content: space-between;
+        gap:.5em;
+      }
     `
 ];
 __decorate([
@@ -133,6 +151,10 @@ __decorate([
     property({ type: String, reflect: true })
 ], Progress.prototype, "size", void 0);
 Progress = __decorate([
-    customElement("sonic-progress")
+    customElement(tagName)
 ], Progress);
 export { Progress };
+try {
+    customElements.define(tagName, Progress);
+}
+catch (e) { }

package/core/components/ui/table/table-caption.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-caption";
 let TableCaption = class TableCaption extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -14,11 +15,28 @@ let TableCaption = class TableCaption extends LitElement {
 TableCaption.styles = [
     css `
       :host {
-        display: table-caption;
+        display:table-caption;
+        font-size:.75rem;
+        color:var(--sc-base-400);
+        text-align:center;
+      }
+
+      :host:before{
+        content:"—";
+        margin-right:.25em;
+      }
+      :host:after{
+        content:"—";
+        margin-left:.25em;
       }
     `
 ];
 TableCaption = __decorate([
-    customElement("sonic-caption")
+    customElement(tagName)
 ], TableCaption);
 export { TableCaption };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define(tagName, TableCaption);
+}
+catch (e) { }

package/core/components/ui/table/table-tbody.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-tbody";
 let TableTbody = class TableTbody extends LitElement {
     render() {
         return html `<tbody><slot></slot></tbody>`;
@@ -14,7 +15,7 @@ let TableTbody = class TableTbody extends LitElement {
 TableTbody.styles = [
     css `
       :host {
-        display: contents;
+        display: table-row-group;
       }
 
       ::slotted(sonic-tr:nth-child(odd)){
@@ -32,6 +33,11 @@ TableTbody.styles = [
     `
 ];
 TableTbody = __decorate([
-    customElement("sonic-tbody")
+    customElement(tagName)
 ], TableTbody);
 export { TableTbody };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define(tagName, TableTbody);
+}
+catch (e) { }

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

@@ -1,7 +1,8 @@
 import { LitElement } from "lit";
 export declare class TableTd extends LitElement {
     static styles: import("lit").CSSResult[];
-    colSpan: number | null;
-    rowSpan: number | null;
+    colSpan?: number;
+    rowSpan?: number;
+    align?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -7,17 +7,18 @@ 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";
+const tagName = "sonic-td";
 let TableTd = class TableTd extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.colSpan = null;
-        this.rowSpan = null;
-    }
     render() {
+        const styles = {
+            textAlign: this.align,
+        };
         return html `<td
+      part="td"
+      style=${styleMap(styles)}
       colspan=${ifDefined(this.colSpan)}
       rowspan=${ifDefined(this.rowSpan)}
-      part="td"
       ><slot></slot></td>`;
     }
 };
@@ -26,11 +27,10 @@ TableTd.styles = [
       :host {
         display: contents;
       }
-
       td {
-        text-transform:var(--sc-th-tt);
-        text-align:inherit;
-        padding:.3em .5em;
+        all:inherit;
+        display:table-cell;
+        padding: var(--sc-table-td-py) var(--sc-table-td-px);
       }`
 ];
 __decorate([
@@ -39,7 +39,15 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], TableTd.prototype, "rowSpan", void 0);
+__decorate([
+    property({ type: String })
+], TableTd.prototype, "align", void 0);
 TableTd = __decorate([
-    customElement("sonic-td")
+    customElement(tagName)
 ], TableTd);
 export { TableTd };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define(tagName, TableTd);
+}
+catch (e) { }

package/core/components/ui/table/table-tfoot.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-tfoot";
 let TableTfoot = class TableTfoot extends LitElement {
     render() {
         return html `<tfoot><slot></slot></tfoot>`;
@@ -18,6 +19,11 @@ TableTfoot.styles = [
       }`
 ];
 TableTfoot = __decorate([
-    customElement("sonic-tfoot")
+    customElement(tagName)
 ], TableTfoot);
 export { TableTfoot };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define(tagName, TableTfoot);
+}
+catch (e) { }

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

@@ -1,6 +1,8 @@
 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;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -6,38 +6,52 @@ 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";
+const tagName = "sonic-th";
 let TableTh = class TableTh extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.align = "left";
-    }
     render() {
         const styles = {
             textAlign: this.align,
         };
-        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 = [
     css `
       :host {
         display: contents;
-        --sc-th-tt:uppercase;
       }
 
       th {
-        text-transform:var(--sc-th-tt);
-        text-align:inherit;
-        padding:.3em .5em;
+        all:inherit;
+        display:table-cell;
+        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);
 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,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-tr";
 let TableTr = class TableTr extends LitElement {
     render() {
         return html `<slot></slot>`;
@@ -19,6 +20,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.js

@@ -13,6 +13,7 @@ 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);
@@ -37,7 +38,14 @@ Table.styles = [
         --sc-table-fw: var(--sc-font-weight-base);
         --sc-table-fst: var(--sc-font-style-base);
         --sc-table-fs: 1rem;
+        --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: var(--sc-table-td-py);
+        --sc-table-td-px: .5rem;
+        --sc-table-td-py: .3rem;
+        display:block;
       }
 
       .table-container {
@@ -51,7 +59,7 @@ Table.styles = [
         display: table;
       }
 
-      /*SIZE*/
+      /*SIZES*/
       :host([size="2xs"]) {
         --sc-table-fs: 0.6rem;
       }
@@ -83,6 +91,11 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], Table.prototype, "hover", 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,7 +64,7 @@ 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>
@@ -72,7 +72,6 @@ let Tabs = class Tabs extends LitElement {
     }
 };
 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,7 +38,11 @@ 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.1rem);
+    --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;

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;