@supersoniks/concorde 3.1.40 → 3.1.42

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

@@ -1,24 +1,21 @@
-import {html, LitElement, css} from "lit";
-import {customElement} from "lit/decorators.js";
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
 const tagName = "sonic-card-header-description";
 @customElement(tagName)
 export class CardHeaderDescription extends LitElement {
   static styles = [
     css`
-      div {
-        margin-top: 0.1em;
-        font-family: var(--sc-font-family-base);
+      :host() {
+        display: block;
         font-size: 0.7em;
-        font-weight: var(--sc-font-style-base);
+        line-height: 1.1;
+        font-family: var(--sc-font-family-base, sans-serif);
+        font-weight: var(--sc-font-style-base, normal);
       }
     `,
   ];
 
   render() {
-    return html`
-      <div>
-        <slot></slot>
-      </div>
-    `;
+    return html`<slot></slot>`;
   }
 }

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

@@ -1,7 +1,7 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
+import { html, LitElement, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/card/card-header-descripton";
-import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 const tagName = "sonic-card-header";
 
 @customElement(tagName)
@@ -11,17 +11,13 @@ export class CardHeader extends LitElement {
       :host {
         --sc-card-header-mb: 1.35rem;
         --sc-card-header-font-size: 1.875rem;
-        --sc-card-header-font-weight: var(--sc-headings-font-weight);
-        --sc-card-header-font-style: var(--sc-headings-font-style);
-        --sc-card-header-family: var(--sc-headings-font-family);
-        --sc-card-header-line-height: var(--sc-headings-line-height);
-      }
-      @media print {
-        :host {
-          --sc-card-header-font-size: 1.45rem;
-        }
-      }
-      .header {
+        --sc-card-header-font-weight: var(--sc-headings-font-weight, 700);
+        --sc-card-header-font-style: var(--sc-headings-font-style, normal);
+        --sc-card-header-family: var(
+          --sc-headings-font-family,
+          var(--sc-font-family-base, sans-serif)
+        );
+        --sc-card-header-line-height: var(--sc-headings-line-height, 1.1);
         display: flex;
         align-items: flex-start;
         gap: 0.5em 1em;
@@ -32,6 +28,11 @@ export class CardHeader extends LitElement {
         font-style: var(--sc-card-header-font-style);
         font-weight: var(--sc-card-header-font-weight);
       }
+      @media print {
+        :host {
+          --sc-card-header-font-size: 1.45rem;
+        }
+      }
 
       .header-content {
         flex-grow: 1;
@@ -40,6 +41,10 @@ export class CardHeader extends LitElement {
       slot[name="suffix"] {
         flex-shrink: 0;
       }
+
+      ::slotted(sonic-card-header-description) {
+        margin-top: 0.1em;
+      }
     `,
   ];
 
@@ -48,16 +53,16 @@ export class CardHeader extends LitElement {
 
   render() {
     return html`
-      <div class="header">
-        <div class="header-content">
-          ${unsafeHTML(this.label)}
-          ${this.description
-            ? html`<sonic-card-header-description>${unsafeHTML(this.description)}</sonic-card-header-description>`
-            : ""}
-          <slot></slot>
-        </div>
-        <slot name="suffix"></slot>
+      <div class="header-content">
+        ${unsafeHTML(this.label)}
+        ${this.description
+          ? html`<sonic-card-header-description
+              >${unsafeHTML(this.description)}</sonic-card-header-description
+            >`
+          : nothing}
+        <slot></slot>
       </div>
+      <slot name="suffix"></slot>
     `;
   }
 }

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

@@ -1,24 +1,19 @@
-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-main";
 
 @customElement(tagName)
 export class CardMain extends LitElement {
-  // static styles = [
-  //   css`
-  //     :host {
-
-  //     }
-
-  //   `
-  // ];
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `,
+  ];
 
   render() {
-    return html`
-      <div>
-        <slot></slot>
-      </div>
-    `;
+    return html`<slot></slot>`;
   }
 }

package/src/core/components/ui/card/card.md

@@ -4,7 +4,8 @@
 <sonic-code>
   <template>
   <div class="grid grid-cols-3 gap-3">
-    <sonic-card type="default">Default</sonic-card>
+    <sonic-card type="base">Base</sonic-card>
+    <sonic-card type="light">Light</sonic-card>
     <sonic-card type="primary">Primary</sonic-card>
     <sonic-card type="warning">Warning</sonic-card>
     <sonic-card type="danger">Danger</sonic-card>

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

@@ -1,88 +1,44 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/card/card-header";
 import "@supersoniks/concorde/core/components/ui/card/card-main";
 import "@supersoniks/concorde/core/components/ui/card/card-footer";
+import { typesBg } from "../_css/type";
 
 const tagName = "sonic-card";
 @customElement(tagName)
 export class Card extends LitElement {
   static styles = [
+    typesBg,
     css`
       * {
         box-sizing: border-box;
       }
       :host {
-        --sc-card-padding: 1.5rem;
-        --sc-card-color: var(--sc-base-content);
-        --sc-card-bg: var(--sc-base);
-        --sc-card-rounded: var(--sc-rounded-lg);
-        --sc-card-shadow: var(--sc-shadow-lg);
+        --sc-_padding: 1.5rem;
+        --sc-_color: var(--sc-base-content, #000);
+        --sc-_bg: var(--sc-base, #fff);
+        --sc-_rounded: var(--sc-rounded-lg);
+        --sc-_shadow: var(--sc-shadow-lg);
         -webkit-print-color-adjust: exact;
       }
 
       @media print {
-        .card {
+        :host {
           page-break-inside: avoid;
           break-inside: avoid;
           box-shadow: none !important;
-          border: 1px solid var(--sc-base-200);
+          border: 1px solid var(--sc-base-200, rgba(0, 0, 0, 0.12));
         }
       }
 
-      .card {
-        padding: var(--sc-card-padding);
-        background-color: var(--sc-card-bg);
-        border-radius: var(--sc-card-rounded);
-        box-shadow: var(--sc-card-shadow);
-        color: var(--sc-card-color);
-      }
-
-      /*TYPES*/
-      :host([type="primary"]) {
-        --sc-card-bg: var(--sc-primary);
-        --sc-card-color: var(--sc-primary-content);
-        --sc-border-color: var(--sc-primary-content);
-        --sc-divider-opacity: 0.2;
-      }
-      :host([type="warning"]) {
-        --sc-card-bg: var(--sc-warning);
-        --sc-card-color: var(--sc-warning-content);
-        --sc-border-color: var(--sc-primary-content);
-        --sc-divider-opacity: 0.2;
-      }
-      :host([type="danger"]) {
-        --sc-card-bg: var(--sc-danger);
-        --sc-card-color: var(--sc-danger-content);
-        --sc-border-color: var(--sc-primary-content);
-        --sc-divider-opacity: 0.2;
-      }
-      :host([type="info"]) {
-        --sc-card-bg: var(--sc-info);
-        --sc-card-color: var(--sc-info-content);
-        --sc-border-color: var(--sc-primary-content);
-        --sc-divider-opacity: 0.2;
-      }
-      :host([type="success"]) {
-        --sc-card-bg: var(--sc-success);
-        --sc-card-color: var(--sc-success-content);
-        --sc-border-color: var(--sc-primary-content);
-        --sc-divider-opacity: 0.2;
-      }
-
-      :host([type="light"]) {
-        --sc-card-bg: var(--sc-base-100);
-        --sc-card-color: var(--sc-base-content);
-      }
-
-      :host([type="neutral"]) {
-        --sc-card-bg: var(--sc-base-content);
-        --sc-card-color: var(--sc-base);
-      }
-
-      :host([type="invert"]) {
-        --sc-card-color: var(--sc-base);
-        --sc-card-bg: var(--sc-base-900);
+      :host {
+        display: block;
+        padding: var(--sc-_padding);
+        background-color: var(--sc-_bg);
+        border-radius: var(--sc-_rounded);
+        box-shadow: var(--sc-_shadow);
+        color: var(--sc-_color);
       }
     `,
   ];
@@ -90,14 +46,19 @@ export class Card extends LitElement {
   /**
    * Le type change surtout la couleur composant
    */
-  @property({type: String, reflect: true})
-  type: "default" | "light" | "primary" | "warning" | "danger" | "success" | "info" | "neutral" | "invert" = "default";
+  @property({ type: String, reflect: true })
+  type:
+    | "light"
+    | "primary"
+    | "warning"
+    | "danger"
+    | "success"
+    | "info"
+    | "neutral"
+    | "invert"
+    | "base" = "base";
 
   render() {
-    return html`
-      <div part="card" class="card">
-        <slot></slot>
-      </div>
-    `;
+    return html`<slot></slot> `;
   }
 }

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

@@ -1,6 +1,11 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property, queryAssignedNodes, query} from "lit/decorators.js";
-import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import { html, LitElement, css } from "lit";
+import {
+  customElement,
+  property,
+  queryAssignedNodes,
+  query,
+} from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 const tagName = "sonic-divider";
 @customElement(tagName)
 export class Divider extends LitElement {
@@ -9,14 +14,17 @@ export class Divider extends LitElement {
       :host {
         --sc-divider-my: 0.5rem;
         --sc-divider-mx: 0;
-        --sc-divider-border-width: max(1px, var(--sc-border-width));
+        --sc-divider-border-width: max(
+          1px,
+          var(--sc-border-width, max(1px, 0.12rem))
+        );
         --sc-divider-border-color: var(--sc-border-color);
         --sc-divider-border-style: solid;
         --sc-divider-color: currentColor;
-        --sc-divider-ff: var(--sc-font-family-base);
+        --sc-divider-ff: var(--sc-font-family-base, sans-serif);
         --sc-divider-fs: 1rem;
-        --sc-divider-fw: var(--sc-font-weight-base);
-        --sc-divider-fst: var(--sc-font-style-base);
+        --sc-divider-fw: var(--sc-font-weight-base, 400);
+        --sc-divider-fst: var(--sc-font-style-base, normal);
 
         margin: var(--sc-divider-my) var(--sc-divider-mx);
         font-size: var(--sc-divider-fs);
@@ -69,7 +77,8 @@ export class Divider extends LitElement {
       div::after {
         content: "";
         flex-grow: 1;
-        border-top: var(--sc-divider-border-width) var(--sc-divider-border-style) var(--sc-divider-border-color);
+        border-top: var(--sc-divider-border-width)
+          var(--sc-divider-border-style) var(--sc-divider-border-color);
         width: 100%;
         opacity: var(--sc-divider-opacity, 1);
       }
@@ -90,7 +99,7 @@ export class Divider extends LitElement {
       :host([vertical]) div {
         flex-direction: column;
         height: 100%;
-        min-height: var(--sc-form-height);
+        min-height: var(--sc-form-height, 2.5em);
       }
 
       :host([vertical]) .has-text {
@@ -100,7 +109,8 @@ export class Divider extends LitElement {
       :host([vertical]) div::before,
       :host([vertical]) div::after {
         border-top: none;
-        border-left: var(--sc-divider-border-width) var(--sc-divider-border-style) var(--sc-divider-border-color);
+        border-left: var(--sc-divider-border-width)
+          var(--sc-divider-border-style) var(--sc-divider-border-color);
         width: auto;
         height: 100%;
         opacity: var(--sc-divider-opacity, 1);
@@ -133,19 +143,29 @@ export class Divider extends LitElement {
       }
     `,
   ];
-  @queryAssignedNodes({flatten: true})
+  @queryAssignedNodes({ flatten: true })
   slotNodes!: Array<Node>;
 
   @query("div")
   divider!: HTMLDivElement;
 
-  @property({type: String}) label = "";
-  @property({type: String, reflect: true}) size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-  @property({type: String, reflect: true}) align: "left" | "right" | "center" = "center";
-  @property({type: Boolean, reflect: true}) vertical = false;
-  @property({type: Boolean, reflect: true}) noMargin = false;
-  @property({type: Boolean, reflect: true}) dashed = false;
-  @property({type: Boolean, reflect: true}) dotted = false;
+  @property({ type: String }) label = "";
+  @property({ type: String, reflect: true }) size?:
+    | "2xs"
+    | "xs"
+    | "sm"
+    | "md"
+    | "lg"
+    | "xl"
+    | "2xl";
+  @property({ type: String, reflect: true }) align:
+    | "left"
+    | "right"
+    | "center" = "center";
+  @property({ type: Boolean, reflect: true }) vertical = false;
+  @property({ type: Boolean, reflect: true }) noMargin = false;
+  @property({ type: Boolean, reflect: true }) dashed = false;
+  @property({ type: Boolean, reflect: true }) dotted = false;
 
   firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {
     super.firstUpdated(changedProperties);
@@ -156,7 +176,9 @@ export class Divider extends LitElement {
 
   render() {
     return html`<div part="divider">
-      <span class="text">${unsafeHTML(this.label ? this.label : "")}<slot></slot></span>
+      <span class="text"
+        >${unsafeHTML(this.label ? this.label : "")}<slot></slot
+      ></span>
     </div>`;
   }
 }

package/src/core/components/ui/form/checkbox/checkbox.md

@@ -63,34 +63,32 @@
 ## Example of use
 <sonic-code>
   <template>
-    <sonic-theme color background theme=${theme} class="p-8">
-      <sonic-subscriber dataProvider="jokeFilter" class="text-xl my-4 block font-bold">
-        Remove following jokes :
-        <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
-      </sonic-subscriber>
-      <div formDataProvider="jokeFilter" class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
-        <sonic-checkbox name="blacklistFlags"  value="nsfw">nsfw</sonic-checkbox>
-        <sonic-checkbox name="blacklistFlags"  value="religious">religious</sonic-checkbox>
-        <sonic-checkbox name="blacklistFlags"  value="political">political</sonic-checkbox>
-        <sonic-checkbox name="blacklistFlags"  value="racist" checked disabled>racist</sonic-checkbox>
-        <sonic-checkbox name="blacklistFlags"  value="sexist" checked disabled>sexist</sonic-checkbox>
-        <sonic-checkbox name="blacklistFlags"   value="explicit">explicit</sonic-checkbox>
-      </div>
-      <sonic-queue
-        lazyload
-        dataProviderExpression="joke/Any?amount=10&lang=en"
-        dataFilterProvider="jokeFilter"
-        serviceURL="https://v2.jokeapi.dev"
-        key="jokes"
-      >
-        <template>
-          <div class="border-0 border-b-[1px] border-b-neutral-300  py-3 leading-tight">
-            <sonic-value key="joke"></sonic-value>
-            <sonic-value key="setup" class="font-bold"></sonic-value><br>
-            <sonic-value key="delivery"></sonic-value>
-          </div>
-        </template>
-      </sonic-queue>
-    </sonic-theme>
+    <sonic-subscriber dataProvider="jokeFilter" class="text-xl my-4 block font-bold">
+      Remove following jokes :
+      <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
+    </sonic-subscriber>
+    <div formDataProvider="jokeFilter" class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
+      <sonic-checkbox name="blacklistFlags"  value="nsfw">nsfw</sonic-checkbox>
+      <sonic-checkbox name="blacklistFlags"  value="religious">religious</sonic-checkbox>
+      <sonic-checkbox name="blacklistFlags"  value="political">political</sonic-checkbox>
+      <sonic-checkbox name="blacklistFlags"  value="racist" checked disabled>racist</sonic-checkbox>
+      <sonic-checkbox name="blacklistFlags"  value="sexist" checked disabled>sexist</sonic-checkbox>
+      <sonic-checkbox name="blacklistFlags"  value="explicit">explicit</sonic-checkbox>
+    </div>
+    <sonic-queue
+      lazyload
+      dataProviderExpression="joke/Any?amount=10&lang=en"
+      dataFilterProvider="jokeFilter"
+      serviceURL="https://v2.jokeapi.dev"
+      key="jokes"
+    >
+      <template>
+        <div class="border-0 border-b-[1px] border-b-neutral-300  py-3 leading-tight">
+          <sonic-value key="joke"></sonic-value>
+          <sonic-value key="setup" class="font-bold"></sonic-value><br>
+          <sonic-value key="delivery"></sonic-value>
+        </div>
+      </template>
+    </sonic-queue>
   </template>
 </sonic-code>

package/src/core/components/ui/form/checkbox/checkbox.ts

@@ -40,7 +40,10 @@ export class Checkbox extends FormCheckable(
     css`
       :host {
         --sc-checkbox-border-width: var(--sc-form-border-width);
-        --sc-checkbox-border-color: var(--sc-input-border-color);
+        --sc-checkbox-border-color: var(
+          --sc-input-border-color,
+          var(--sc-base-content, #000)
+        );
         --sc-checkbox-bg: var(--sc-input-bg);
         --sc-checkbox-color: transparent;
       }
@@ -55,7 +58,7 @@ export class Checkbox extends FormCheckable(
         gap: 0.5em;
         line-height: 1.2;
         align-items: flex-start;
-        font-size: var(--sc-fs);
+        font-size: var(--sc-_fs);
       }
 
       .icon-container {
@@ -68,8 +71,8 @@ export class Checkbox extends FormCheckable(
         box-sizing: border-box;
         appearance: none;
         flex-shrink: 0;
-        height: calc(var(--sc-fs) * 1.25);
-        width: calc(var(--sc-fs) * 1.25);
+        height: calc(var(--sc-_fs) * 1.25);
+        width: calc(var(--sc-_fs) * 1.25);
         display: block;
         cursor: pointer;
         border-radius: 0.25em;
@@ -83,7 +86,7 @@ export class Checkbox extends FormCheckable(
 
       input:focus,
       :host(:not([disabled])) input:active {
-        box-shadow: 0 0 0 2px var(--sc-primary);
+        box-shadow: 0 0 0 2px var(--sc-primary, var(--sc-base-content, #000));
       }
 
       :host(:not([disabled])) label {
@@ -105,7 +108,7 @@ export class Checkbox extends FormCheckable(
       } */
 
       .description {
-        color: var(--sc-base-400);
+        color: var(--sc-base-400, var(--sc-base-content, #000));
         font-size: 0.85em;
         margin-top: 0.2em;
         display: block;
@@ -115,13 +118,16 @@ export class Checkbox extends FormCheckable(
       input:checked,
       input[data-indeterminate],
       input[checked] {
-        --sc-checkbox-border-color: var(--sc-primary);
-        --sc-checkbox-bg: var(--sc-primary);
+        --sc-checkbox-border-color: var(
+          --sc-primary,
+          var(--sc-base-content, #000)
+        );
+        --sc-checkbox-bg: var(--sc-primary, var(--sc-base-content, #000));
       }
       input:checked + sonic-icon,
       input[data-indeterminate] + sonic-icon,
       input[checked] + sonic-icon {
-        --sc-checkbox-color: var(--sc-primary-content);
+        --sc-checkbox-color: var(--sc-primary-content, var(--sc-base, #fff));
         transform: translateX(-50%) translateY(-50%) scale(1);
       }
       /*DISABLED */
@@ -153,16 +159,6 @@ export class Checkbox extends FormCheckable(
       .hidden {
         display: none;
       }
-
-      /*ERROR*/
-      /*
-      :host([touched]) .checkbox-container:has(input:not(:focus):invalid) {
-        --sc-checkbox-border-color:var(--sc-danger);
-      }
-      :host([touched]) .checkbox-container:has(input:not(:focus):invalid) .checkbox-text{
-        color:var(--sc-danger);
-      }
-      */
     ` as CSSResultGroup,
   ];