@supersoniks/concorde 3.1.41 → 3.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.1.41",
+  "version": "3.1.43",
   "license": "MIT",
   "type": "module",
   "main": "",
@@ -60,6 +60,8 @@
     "./functional/submit": "./src/core/components/functional/submit/submit.ts",
     "./subscriber": "./src/core/components/functional/subscriber/subscriber.ts",
     "./functional/subscriber": "./src/core/components/functional/subscriber/subscriber.ts",
+    "./translation": "./src/core/components/functional/translation/translation.ts",
+    "./functional/translation": "./src/core/components/functional/translation/translation.ts",
     "./value": "./src/core/components/functional/value/value.ts",
     "./functional/value": "./src/core/components/functional/value/value.ts",
     "./scroll": "./src/core/components/ui/_css/scroll.ts",

package/src/core/components/functional/functional.ts

@@ -13,3 +13,4 @@ import "./example/example";
 import "./sdui/sdui";
 import "./mix/mix";
 import "./value/value";
+import "./translation/translation";

package/src/core/components/functional/translation/translation.ts

@@ -0,0 +1,12 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { t } from "@supersoniks/concorde/core/directives/Wording";
+const tagName = "sonic-t";
+@customElement(tagName)
+export class SonicT extends LitElement {
+  @property({ type: String }) key?: string;
+  render() {
+    if (!this.key) return nothing;
+    return html`${t(this.key)}`;
+  }
+}

package/src/core/components/ui/_css/scroll.ts

@@ -17,7 +17,7 @@ export const customScroll = css`
 
     .custom-scroll::-webkit-scrollbar-thumb {
       box-shadow: inset 0 0 2rem 2rem
-        var(--sc-scrollbar-bg, var(--sc-base-400, #222));
+        var(--sc-scrollbar-bg, var(--sc-base-400, var(--sc-base-content, #000)));
       border-radius: var(--sc-rounded);
       border: solid 0.15rem transparent;
     }

package/src/core/components/ui/_css/size.ts

@@ -5,34 +5,34 @@ export type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 export const fontSize = css`
   /*SIZES*/
   :host {
-    --sc-fs: 1rem;
-    --sc-lh: 1.15;
-    font-size: var(--sc-fs);
-    line-height: var(--sc-lh);
+    --sc-_fs: 1rem;
+    --sc-_lh: 1.15;
+    font-size: var(--sc-_fs);
+    line-height: var(--sc-_lh);
   }
 
   :host([size="2xs"]) {
-    --sc-fs: 0.625rem;
+    --sc-_fs: 0.625rem;
   }
   :host([size="xs"]) {
-    --sc-fs: 0.75rem;
+    --sc-_fs: 0.75rem;
   }
   :host([size="sm"]) {
-    --sc-fs: 0.875rem;
+    --sc-_fs: 0.875rem;
   }
   :host([size="md"]) {
-    --sc-fs: 1rem;
+    --sc-_fs: 1rem;
   }
   :host([size="lg"]) {
-    --sc-fs: 1.125rem;
+    --sc-_fs: 1.125rem;
   }
   :host([size="xl"]) {
-    --sc-fs: 1.25rem;
+    --sc-_fs: 1.25rem;
   }
   :host([size="2xl"]) {
-    --sc-fs: 1.5rem;
+    --sc-_fs: 1.5rem;
   }
   :host([size="inherit"]) {
-    --sc-fs: 1em;
+    --sc-_fs: 1em;
   }
 `;

package/src/core/components/ui/_css/type.ts

@@ -1,59 +1,90 @@
-import {css} from "lit";
+import { css } from "lit";
 
 export const typeColor = css`
   :host {
-    --sc-color: inherit;
-    color: var(--sc-color);
+    --sc-_color: inherit;
+    color: var(--sc-_color);
   }
 
   :host([type="primary"]) {
-    --sc-color: var(--sc-primary);
+    --sc-_color: var(--sc-primary, var(--sc-base-content, #000));
   }
   :host([type="warning"]) {
-    --sc-color: var(--sc-warning);
+    --sc-_color: var(--sc-warning, var(--sc-base-content, #000));
   }
   :host([type="danger"]) {
-    --sc-color: var(--sc-danger);
+    --sc-_color: var(--sc-danger, var(--sc-base-content, #000));
   }
   :host([type="info"]) {
-    --sc-color: var(--sc-info);
+    --sc-_color: var(--sc-info, var(--sc-base-content, #000));
   }
   :host([type="success"]) {
-    --sc-color: var(--sc-success);
+    --sc-_color: var(--sc-success, var(--sc-base-content, #000));
   }
 
   .inherit-color {
-    color: var(--sc-color);
+    color: var(--sc-_color);
   }
 `;
 
 export const typesBg = css`
   :host {
-    --sc-color: inherit;
-    --sc-bg: inherit;
-    color: var(--sc-color);
-    background: var(--sc-bg);
+    --sc-_color: inherit;
+    --sc-_bg: inherit;
+    color: var(--sc-_color);
+    background: var(--sc-_bg);
   }
 
+  /*TYPES*/
   :host([type="primary"]) {
-    --sc-color: var(--sc-primary-content);
-    --sc-bg: var(--sc-primary);
+    --sc-_bg: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-_color: var(--sc-primary-content, var(--sc-base, #fff));
   }
   :host([type="warning"]) {
-    --sc-color: var(--sc-warning-content);
-    --sc-bg: var(--sc-warning);
+    --sc-_bg: var(--sc-warning, var(--sc-base-content, #000));
+    --sc-_color: var(--sc-warning-content, var(--sc-base, #fff));
   }
   :host([type="danger"]) {
-    --sc-color: var(--sc-danger-content);
-    --sc-bg: var(--sc-danger);
+    --sc-_bg: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-_color: var(--sc-danger-content, var(--sc-base, #fff));
   }
   :host([type="info"]) {
-    --sc-color: var(--sc-info-content);
-    --sc-bg: var(--sc-info);
+    --sc-_bg: var(--sc-info, var(--sc-base-content, #000));
+    --sc-_color: var(--sc-info-content, var(--sc-base, #fff));
   }
   :host([type="success"]) {
-    --sc-color: var(--sc-success-content);
-    --sc-bg: var(--sc-success);
+    --sc-_bg: var(--sc-success, var(--sc-base-content, #000));
+    --sc-_color: var(--sc-success-content, var(--sc-base, #fff));
+  }
+
+  /* dans un contexte de couleur - divider color*/
+  :host([type="primary"]),
+  :host([type="warning"]),
+  :host([type="danger"]),
+  :host([type="info"]),
+  :host([type="success"]) {
+    --sc-border-color: currentColor;
+    --sc-divider-opacity: 0.2;
+  }
+
+  :host([type="base"]) {
+    --sc-_bg: var(--sc-base, #fff);
+    --sc-_color: var(--sc-base-content, #000);
+  }
+  :host([type="default"]),
+  :host([type="light"]) {
+    --sc-_bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));
+    --sc-_color: var(--sc-base-content, #000);
+  }
+
+  :host([type="neutral"]) {
+    --sc-_bg: var(--sc-base-content, #000);
+    --sc-_color: var(--sc-base, #fff);
+  }
+
+  :host([type="invert"]) {
+    --sc-_bg: var(--sc-base-900, var(--sc-base-content, #000));
+    --sc-_color: var(--sc-base, #fff);
   }
 
   .inherit-bg {

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

@@ -1,7 +1,10 @@
-import {html, LitElement, css, nothing} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {fontSize} from "@supersoniks/concorde/core/components/ui/_css/size";
-import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import { html, LitElement, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import {
+  fontSize,
+  Size,
+} from "@supersoniks/concorde/core/components/ui/_css/size";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 const icon = {
   warning: "warning-circled-outline",
   success: "check-circled-outline",
@@ -23,52 +26,48 @@ export class Alert extends LitElement {
     fontSize,
     css`
       :host {
-        --sc-alert-color: var(--sc-base-content);
-        --sc-alert-rounded: var(--sc-rounded);
-        --sc-alert-fw: var(--sc-font-weight-base);
-        --sc-alert-fst: var(--sc-font-style-base);
-        --sc-alert-label-fw: bold;
-        display: block;
-        font-weight: var(--sc-alert-fw);
-        font-style: var(--sc-alert-fst);
-      }
-
-      .alert {
-        color: var(--sc-alert-color);
+        --sc_color: var(--sc-base-content, #000);
+        --sc_rounded: var(--sc-rounded);
+        --sc_fw: var(--sc-font-weight-base, 400);
+        --sc_fst: var(--sc-font-style-base, normal);
+        --sc_label-fw: bold;
+
+        font-weight: var(--sc_fw);
+        font-style: var(--sc_fst);
+        color: var(--sc_color);
         position: relative;
         display: flex;
         gap: 0.4em;
-        border-radius: var(--sc-alert-rounded);
-        overflow: hidden;
+        border-radius: var(--sc_rounded);
       }
 
       .label {
-        font-weight: var(--sc-alert-label-fw);
+        font-weight: var(--sc_label-fw);
         margin-bottom: 0.15em;
         display: block;
       }
 
       :host([status="warning"]) {
-        --sc-alert-color: var(--sc-warning);
+        --sc_color: var(--sc-warning, var(--sc-base-content, #000));
       }
       :host([status="error"]) {
-        --sc-alert-color: var(--sc-danger);
+        --sc_color: var(--sc-danger, var(--sc-base-content, #000));
       }
       :host([status="info"]) {
-        --sc-alert-color: var(--sc-info);
+        --sc_color: var(--sc-info, var(--sc-base-content, #000));
       }
       :host([status="success"]) {
-        --sc-alert-color: var(--sc-success);
+        --sc_color: var(--sc-success, var(--sc-base-content, #000));
       }
 
       /*background*/
-      :host([dismissible]) .alert,
-      :host([background]) .alert {
-        background: var(--sc-base);
+      :host([dismissible]),
+      :host([background]) {
+        background: var(--sc-base, #fff);
         padding: 0.8em 1.15em;
       }
-      :host([dismissible]) .alert:before,
-      :host([background]) .alert:before {
+      :host([dismissible]):before,
+      :host([background]):before {
         background-color: currentColor;
         content: "";
         display: block;
@@ -78,11 +77,11 @@ export class Alert extends LitElement {
         right: 0;
         bottom: 0;
         opacity: 0.08;
-        border-radius: var(--sc-alert-rounded);
+        border-radius: var(--sc_rounded);
         pointer-events: none;
       }
-      :host([dismissible]) > div,
-      :host([background]) > div {
+
+      .content {
         z-index: 2;
         position: relative;
       }
@@ -96,48 +95,46 @@ export class Alert extends LitElement {
       }
 
       /*Rounded*/
-      :host([size="xs"]) .alert {
-        --sc-alert-rounded: var(--sc-rounded-sm);
-      }
-      :host([size="sm"]) .alert {
-        --sc-alert-rounded: var(--sc-rounded-sm);
+      :host([size="2xs"]),
+      :host([size="xs"]),
+      :host([size="sm"]) {
+        --sc_rounded: var(--sc-rounded-sm);
       }
 
       /*Dismissible*/
-      :host([dismissible]) .alert {
+      :host([dismissible]) {
         padding-right: 3rem;
       }
       :host([dismissible]) .close-btn {
-        padding: 0.5em;
         position: absolute;
-        top: 0.25rem;
-        right: 0.25rem;
+        top: 0.4rem;
+        right: 0.3rem;
       }
     `,
   ];
   /**
    * Titre du message d'erreur
    */
-  @property({type: String}) label = "";
+  @property({ type: String }) label = "";
 
-  @property({type: Boolean, reflect: true}) noIcon = false;
+  @property({ type: Boolean, reflect: true }) noIcon = false;
 
   /**
    * Peut être renseigné dans le slot pour créer des messages plus complexes
    */
-  @property({type: String}) text = "";
+  @property({ type: String }) text = "";
 
-  @property({type: String}) id = new Date().getTime().toString();
+  @property({ type: String }) id = new Date().getTime().toString();
 
-  @property({type: String, reflect: true}) size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  @property({ type: String, reflect: true }) size?: Size;
 
-  @property({type: Boolean, reflect: true}) dismissible = false;
+  @property({ type: Boolean, reflect: true }) dismissible = false;
 
-  @property({type: Boolean, reflect: true}) background = false;
+  @property({ type: Boolean, reflect: true }) background = false;
 
-  @property({type: String, reflect: true}) status: AlertStatus = "default";
+  @property({ type: String, reflect: true }) status: AlertStatus = "default";
 
-  @property({type: Boolean, reflect: true}) dismissForever = false;
+  @property({ type: Boolean, reflect: true }) dismissForever = false;
 
   render() {
     // if dismiss forever, check if already dismissed
@@ -148,20 +145,33 @@ export class Alert extends LitElement {
         return nothing;
       }
     }
-    return html`<div part="alert" class="alert">
-      <slot name="icon" class="${this.noIcon ? "hidden" : nothing}"
-        >${!this.noIcon ? html`<div>${this.status && html`<sonic-icon name=${icon[this.status]}></sonic-icon>`}</div>` : nothing}</slot
+    return html`
+      <slot name="icon" class="${this.noIcon ? "hidden" : ""}"
+        >${!this.noIcon
+          ? html`<div>
+              ${this.status &&
+              html`<sonic-icon name=${icon[this.status]}></sonic-icon>`}
+            </div>`
+          : nothing}</slot
       >
-      <div>
-        ${this.label ? html`<span class="label">${unsafeHTML(this.label)}</span>` : nothing}
+      <div class="content">
+        ${this.label
+          ? html`<span class="label">${unsafeHTML(this.label)}</span>`
+          : nothing}
         <div>${this.text}<slot></slot></div>
       </div>
       ${this.dismissible
-        ? html`<sonic-button @click=${this.close} class="close-btn" variant="unstyled" shape="circle">
-            <sonic-icon name="cancel" size="lg"></sonic-icon>
+        ? html`<sonic-button
+            @click=${this.close}
+            class="close-btn"
+            variant="unstyled"
+            shape="circle"
+            icon
+          >
+            <sonic-icon name="cancel"></sonic-icon>
           </sonic-button>`
         : nothing}
-    </div>`;
+    `;
   }
 
   close() {
@@ -171,7 +181,10 @@ export class Alert extends LitElement {
       const dismissed = localStorage.getItem("sonic-alert-dismissed") || "{}";
       const dismissedObj = JSON.parse(dismissed);
       dismissedObj[this.id] = true;
-      localStorage.setItem("sonic-alert-dismissed", JSON.stringify(dismissedObj));
+      localStorage.setItem(
+        "sonic-alert-dismissed",
+        JSON.stringify(dismissedObj)
+      );
     }
   }
 }

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

@@ -20,10 +20,9 @@ export class Badge extends LitElement {
         --sc-badge-gap: 0.3em;
         --sc-badge-py: 0.35em;
         --sc-badge-px: 0.67em;
-        --sc-fs: 1rem;
 
-        --sc-badge-color: var(--sc-base-content, #1f2937);
-        --sc-badge-bg: var(--sc-base-100, #e5e7eb);
+        --sc-badge-color: var(--sc-base-content, #000);
+        --sc-badge-bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));
 
         /*--sc-badge-border-width: var(--sc-form-border-width, 0.1rem);*/
         --sc-badge-border-width: 1px;
@@ -32,18 +31,17 @@ export class Badge extends LitElement {
           var(--sc-badge-border-color);
 
         --sc-badge-rounded: 0.85em;
-        --sc-badge-fw: var(--sc-font-weight-base);
+        --sc-badge-fw: var(--sc-font-weight-base, 400);
 
         display: inline-flex;
         align-items: center;
         box-sizing: border-box;
-        line-height: var(--sc-lh);
+        line-height: var(--sc-_lh);
         border-radius: var(--sc-badge-rounded);
 
         background: var(--sc-badge-bg);
         color: var(--sc-badge-color);
-
-        font-family: var(--sc-badge-ff, var(--sc-font-family-base, inherit));
+        font-family: var(--sc-badge-ff, var(--sc-font-family-base, sans-serif));
         font-weight: var(--sc-badge-fw);
         line-height: 1;
 
@@ -51,46 +49,47 @@ export class Badge extends LitElement {
         padding-bottom: var(--sc-badge-py);
         padding-left: var(--sc-badge-px);
         padding-right: var(--sc-badge-px);
-        min-height: calc(var(--sc-badge-px) * 2);
+        /**Round pour lissage px */
+        min-height: round(calc(var(--sc-badge-px) * 2), 1px);
+        min-width: round(calc(var(--sc-badge-px) * 2), 1px);
         border: var(--sc-badge-border);
         -webkit-print-color-adjust: exact;
       }
 
       /*TYPES*/
       :host([type="primary"]) {
-        --sc-badge-color: var(--sc-primary-content);
-        --sc-badge-bg: var(--sc-primary);
+        --sc-badge-color: var(--sc-primary-content, var(--sc-base, #fff));
+        --sc-badge-bg: var(--sc-primary, var(--sc-base-content, #000));
       }
       :host([type="warning"]) {
-        --sc-badge-color: var(--sc-warning-content);
-        --sc-badge-bg: var(--sc-warning);
+        --sc-badge-color: var(--sc-warning-content, var(--sc-base, #fff));
+        --sc-badge-bg: var(--sc-warning, var(--sc-base-content, #000));
       }
       :host([type="danger"]) {
-        --sc-badge-color: var(--sc-danger-content);
-        --sc-badge-bg: var(--sc-danger);
+        --sc-badge-color: var(--sc-danger-content, var(--sc-base, #fff));
+        --sc-badge-bg: var(--sc-danger, var(--sc-base-content, #000));
       }
       :host([type="info"]) {
-        --sc-badge-color: var(--sc-info-content);
-        --sc-badge-bg: var(--sc-info);
+        --sc-badge-color: var(--sc-info-content, var(--sc-base, #fff));
+        --sc-badge-bg: var(--sc-info, var(--sc-base-content, #000));
       }
       :host([type="success"]) {
-        --sc-badge-color: var(--sc-success-content);
-        --sc-badge-bg: var(--sc-success);
+        --sc-badge-color: var(--sc-success-content, var(--sc-base, #fff));
+        --sc-badge-bg: var(--sc-success, var(--sc-base-content, #000));
       }
       :host([type="neutral"]) {
-        --sc-badge-color: var(--sc-base);
-        --sc-badge-bg: var(--sc-base-content);
+        --sc-badge-color: var(--sc-base, #fff);
+        --sc-badge-bg: var(--sc-base-content, #000);
       }
 
       :host([contrast]),
       :host([type="contrast"]) {
-        --sc-badge-color: var(--sc-contrast-content);
-        --sc-badge-bg: var(--sc-contrast);
+        --sc-badge-color: var(--sc-contrast-content, #fff);
+        --sc-badge-bg: var(--sc-contrast, #000);
       }
 
       /*SIZE*/
       :host {
-        font-size: var(--sc-fs);
         gap: var(--sc-badge-gap);
       }
 
@@ -102,7 +101,7 @@ export class Badge extends LitElement {
 
       :host([size="lg"]),
       :host([size="xl"]) {
-        --sc-lh: 1.2;
+        --sc-_lh: 1.2;
         --sc-badge-gap: 0.5em;
       }
 
@@ -115,8 +114,8 @@ export class Badge extends LitElement {
       }
 
       :host([variant="outline"][type="default"]) {
-        border-color: var(--sc-base-400);
-        color: var(--sc-base-500);
+        border-color: var(--sc-base-content, #000);
+        color: var(--sc-base-content, #000);
         background: transparent;
       }
 

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

@@ -53,7 +53,7 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
         --sc-btn-gap: 0.35em;
         --sc-btn-py: 0.25em;
         --sc-btn-px: 1.1em;
-        --sc-btn-fs: var(--sc-fs, 1rem);
+        --sc-btn-fs: var(--sc-_fs, 1rem);
         --sc-btn-ff: var(--sc-btn-font-family, sans-serif);
         --sc-btn-fw: var(--sc-btn-font-weight, 500);
 
@@ -76,6 +76,7 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
         --sc-btn-active-filter: brightness(0.97);
         --sc-btn-active-bg: var(--sc-base-content, #000);
 
+        /* min permet une sécurité si btn-rounded 999px par exemple */
         --sc-item-rounded-tr: min(
           calc(var(--sc-form-height, 2.5em) / 2),
           var(--sc-btn-rounded)

package/src/core/components/ui/card/card-footer.ts

@@ -1,17 +1,16 @@
-import {html, LitElement} from "lit";
-import {customElement} from "lit/decorators.js";
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
 const tagName = "sonic-card-footer";
 
 @customElement(tagName)
 export class CardFooter extends LitElement {
-  // static styles = [
-  //   css`
-  //     :host {
-
-  //     }
-
-  //   `
-  // ];
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `,
+  ];
 
   render() {
     return html` <slot></slot> `;

package/src/core/components/ui/card/card-header-descripton.ts

@@ -9,13 +9,13 @@ export class CardHeaderDescription extends LitElement {
         display: block;
         font-size: 0.7em;
         line-height: 1.1;
-        font-family: var(--sc-font-family-base);
-        font-weight: var(--sc-font-style-base);
+        font-family: var(--sc-font-family-base, sans-serif);
+        font-weight: var(--sc-font-style-base, normal);
       }
     `,
   ];
 
   render() {
-    return html` <slot></slot> `;
+    return html`<slot></slot>`;
   }
 }