@supersoniks/concorde 3.1.40 → 3.1.42

package/index.html

@@ -71,23 +71,23 @@
             />
           </div>
         </template>
-
-        <template data-route=".md">
-          <div class="grid grid-cols-[minmax(10rem,15rem)_minmax(0,1fr)] gap-8">
-            <div>
-              <docs-navigation
-                class="sticky top-[4.2rem] max-h-[calc(100vh_-_4.2rem)] block overflow-auto py-4 custom-scroll"
-              ></docs-navigation>
-            </div>
-            <div class="min-h-[100vh] pt-3">
-              <docs-page
-                noShadowDom
-                class="prose lg:prose-lg max-w-prose block py-8 prose-li:my-[.2em] leading-[1.5] lg:leading-[1.5] prose-h1:font-normal prose-h1:text-[4.2em]"
-              ></docs-page>
-            </div>
-          </div>
-        </template>
       </sonic-router>
+
+      <div
+        class="[[data-home]_&]:hidden grid grid-cols-[minmax(10rem,15rem)_minmax(0,1fr)] gap-8"
+      >
+        <div>
+          <docs-navigation
+            class="sticky top-[4.2rem] max-h-[calc(100vh_-_4.2rem)] block overflow-auto py-4 custom-scroll"
+          ></docs-navigation>
+        </div>
+        <div class="min-h-[100vh] pt-3">
+          <docs-page
+            noShadowDom
+            class="prose lg:prose-lg max-w-prose block py-8 prose-li:my-[.2em] leading-[1.5] lg:leading-[1.5] prose-h1:font-normal prose-h1:text-[4.2em]"
+          ></docs-page>
+        </div>
+      </div>
     </sonic-theme>
   </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.1.40",
+  "version": "3.1.42",
   "license": "MIT",
   "type": "module",
   "main": "",
@@ -60,11 +60,16 @@
     "./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",
     "./ui/scroll": "./src/core/components/ui/_css/scroll.ts",
     "./ui/_css/scroll": "./src/core/components/ui/_css/scroll.ts",
+    "./shadow": "./src/core/components/ui/_css/shadow.ts",
+    "./ui/shadow": "./src/core/components/ui/_css/shadow.ts",
+    "./ui/_css/shadow": "./src/core/components/ui/_css/shadow.ts",
     "./size": "./src/core/components/ui/_css/size.ts",
     "./ui/size": "./src/core/components/ui/_css/size.ts",
     "./ui/_css/size": "./src/core/components/ui/_css/size.ts",
@@ -269,6 +274,7 @@
     "./docs": "./src/docs/docs.ts",
     "./example/users": "./src/docs/example/users.ts",
     "./header/header": "./src/docs/header/header.ts",
+    "./layout": "./src/docs/layout.ts",
     "./navigation/navigation": "./src/docs/navigation/navigation.ts",
     "./prism/index": "./src/docs/prism/index.ts",
     "./search/markdown-renderer": "./src/docs/search/markdown-renderer.ts",

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

@@ -1,8 +1,10 @@
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
 import Format from "@supersoniks/concorde/core/utils/Format";
-import HTML, { detecHTMLLanguageChange } from "@supersoniks/concorde/core/utils/HTML";
-import { LitElement, nothing } from "lit";
+import HTML, {
+  detecHTMLLanguageChange,
+} from "@supersoniks/concorde/core/utils/HTML";
+import { LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
@@ -22,13 +24,15 @@ type DateTimeFormatExtened = Intl.DateTimeFormat & {
   ) => DateTimeFormatPartExtended[];
 };
 
-detecHTMLLanguageChange(()=>SonicDate.updateComponentsLanguage());
+detecHTMLLanguageChange(() => SonicDate.updateComponentsLanguage());
 
 @customElement(tagName)
 export class SonicDate extends Subscriber(TemplatesContainer(LitElement)) {
-  static dateCompnents:Set<SonicDate> = new Set();
-  static updateComponentsLanguage(){
-    SonicDate.dateCompnents.forEach((component)=>component.pageLanguage = HTML.getLanguage());
+  static dateCompnents: Set<SonicDate> = new Set();
+  static updateComponentsLanguage() {
+    SonicDate.dateCompnents.forEach(
+      (component) => (component.pageLanguage = HTML.getLanguage())
+    );
   }
 
   pageLanguage = "fr";
@@ -156,8 +160,7 @@ export class SonicDate extends Subscriber(TemplatesContainer(LitElement)) {
     return new Date(dateString).getTime() / 1000;
   }
 
-  render() {
-    if (!this.renderIf) return nothing;
+  protected willUpdate(_changedProperties: PropertyValues): void {
     /* *
      * Normalisation en fonction des valeurs de dates passées        *
      * */
@@ -169,13 +172,19 @@ export class SonicDate extends Subscriber(TemplatesContainer(LitElement)) {
     if (this.end_date_string)
       this.end_date = this.dateStringToSeconds(this.end_date_string);
 
-    if (!this.start_date && !this.now && !this.end_date) return nothing;
+    if (!this.start_date && !this.now && !this.end_date) return;
     if (!this.start_date) this.start_date = Date.now() / 1000;
     if (this.end_date > 0 && this.end_date < this.start_date) {
       const copy = this.start_date;
       this.start_date = this.end_date;
       this.end_date = copy;
     }
+  }
+
+  render() {
+    if (!this.renderIf) return nothing;
+    if (!this.start_date && !this.now && !this.end_date) return nothing;
+
     /* *
      * gestion des options d'affichage des dates
      * */
@@ -186,9 +195,9 @@ export class SonicDate extends Subscriber(TemplatesContainer(LitElement)) {
       hour12: this.hour12 || false,
     };
 
-    if (this.weekday !== "hidden") options.weekday = this.weekday || "short"; ;
-    if (this.hour !== "hidden") options.hour = this.hour || "2-digit"; ;
-    if (this.minute !== "hidden") options.minute = this.minute || "2-digit"; ;
+    if (this.weekday !== "hidden") options.weekday = this.weekday || "short";
+    if (this.hour !== "hidden") options.hour = this.hour || "2-digit";
+    if (this.minute !== "hidden") options.minute = this.minute || "2-digit";
     if (this.era) options.era = this.era;
     if (this.time_zone) options.timeZone = this.time_zone;
 

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/router/router.md

@@ -43,22 +43,20 @@ You can make creative usage on this feature to generate dynamic content based on
 
 <sonic-code>
   <template>
-    <sonic-theme theme="light" serviceURL="https://reqres.in">
-      <sonic-list fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
-        <template>
-          <sonic-button radio size="xs" data-bind ::href="#core/components/functional/router/router.md/router#couleur_$id">
-            <span data-bind ::inner-html="ucFirst|$name"></span>
-          </sonic-button>
-        </template>
-      </sonic-list>
-      <sonic-router>
-        <template data-route="#couleur_(\d+)" dataProviderExpression="api/unknown/$1">
-          <sonic-fetch>
-            <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
-          </sonic-fetch>
-        </template>
-      </sonic-router>
-    </sonic-theme>
+    <sonic-list fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
+      <template>
+        <sonic-button radio size="xs" data-bind ::href="#core/components/functional/router/router.md/router#couleur_$id">
+          <span data-bind ::inner-html="ucFirst|$name"></span>
+        </sonic-button>
+      </template>
+    </sonic-list>
+    <sonic-router>
+      <template data-route="#couleur_(\d+)" dataProviderExpression="api/unknown/$1">
+        <sonic-fetch>
+          <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
+        </sonic-fetch>
+      </template>
+    </sonic-router>
   </template>
 </sonic-code>
 
@@ -69,22 +67,20 @@ Same as RegExp but using <a href="https://www.npmjs.com/package/url-pattern" tar
 
 <sonic-code>
   <template>
-    <sonic-theme theme="light" serviceURL="https://reqres.in">
-      <sonic-list fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
-        <template>
-          <sonic-button radio size="xs" data-bind ::href="#core/components/functional/router/router.md/router#couleur_$id">
-            <span data-bind ::inner-html="ucFirst|$name"></span>
-          </sonic-button>
-        </template>
-      </sonic-list>
-      <sonic-router>
-        <template data-route="/*#couleur_:id" dataProviderExpression="api/unknown/:id">
-          <sonic-fetch>
-            <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
-          </sonic-fetch>
-        </template>
-      </sonic-router>
-    </sonic-theme>
+    <sonic-list fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
+      <template>
+        <sonic-button radio size="xs" data-bind ::href="#core/components/functional/router/router.md/router#couleur_$id">
+          <span data-bind ::inner-html="ucFirst|$name"></span>
+        </sonic-button>
+      </template>
+    </sonic-list>
+    <sonic-router>
+      <template data-route="/*#couleur_:id" dataProviderExpression="api/unknown/:id">
+        <sonic-fetch>
+          <input type="color" disabled data-bind ::value="$data.color" class=" w-full h-10 my-3" />
+        </sonic-fetch>
+      </template>
+    </sonic-router>
   </template>
 </sonic-code>
 

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

@@ -1,4 +1,4 @@
-import { html, LitElement, PropertyValues } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { templateContent } from "lit/directives/template-content.js";
 import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
@@ -52,10 +52,6 @@ export class SonicRouter extends TemplatesContainer(LitElement) {
     return this._location;
   }
 
-  protected willUpdate(_changedProperties: PropertyValues): void {
-    super.willUpdate(_changedProperties);
-  }
-
   render() {
     const templates = [];
     for (const t of this.templatePartsList) {

package/src/core/components/functional/sonic-scope/sonic-scope.ts

@@ -1,5 +1,5 @@
-import {html, LitElement} from "lit";
-import {customElement} from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
 const tagName = "sonic-scope";
 
 @customElement(tagName)

package/src/core/components/functional/states/states.md

@@ -41,7 +41,7 @@ When using **capturing groups ()** the stored values are accessible via the **da
 
 <sonic-code>
   <template>
-    <sonic-theme theme="light" serviceURL="https://reqres.in">
+    <div  serviceURL="https://reqres.in">
       <sonic-list formDataProvider="states-regexp-example" fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
         <template>
           <sonic-button radio size="xs" name="selection" data-bind ::value="#couleur_$id">
@@ -56,7 +56,7 @@ When using **capturing groups ()** the stored values are accessible via the **da
           </sonic-fetch>
         </template>
       </sonic-states>
-    </sonic-theme>
+    </div>
   </template>
 </sonic-code>
 
@@ -67,7 +67,7 @@ Same as RegExp but using <a href="https://www.npmjs.com/package/url-pattern" tar
 
 <sonic-code>
   <template>
-    <sonic-theme theme="light" serviceURL="https://reqres.in">
+    <div serviceURL="https://reqres.in">
       <sonic-list formDataProvider="states-regexp-example" fetch dataProvider="api/unknown" key="data" class="flex gap-2 items-center" >
         <template>
           <sonic-button radio size="xs" name="selection" data-bind ::value="#couleur_$id">
@@ -82,6 +82,6 @@ Same as RegExp but using <a href="https://www.npmjs.com/package/url-pattern" tar
           </sonic-fetch>
         </template>
       </sonic-states>
-    </sonic-theme>
+    </div>
   </template>
 </sonic-code>

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/shadow.ts

@@ -0,0 +1,24 @@
+import { css } from "lit";
+
+export type Shadow = "" | "none" | "sm" | "md" | "lg" | null;
+
+export const shadowable = css`
+  /*OMBRE*/
+  :host([shadow]) .shadowable,
+  :host([shadow="md"]) .shadowable,
+  :host([shadow="true"]) .shadowable {
+    box-shadow: var(--sc-shadow);
+  }
+
+  :host([shadow="sm"]) .shadowable {
+    box-shadow: var(--sc-shadow-sm);
+  }
+
+  :host([shadow="lg"]) .shadowable {
+    box-shadow: var(--sc-shadow-lg);
+  }
+
+  :host([shadow="none"]) .shadowable {
+    box-shadow: none;
+  }
+`;

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.md

@@ -6,6 +6,20 @@
   </template>
 </sonic-code>
 
+## Status
+
+<sonic-code>
+  <template>
+  <div class="grid gap-4">
+  <sonic-alert label="Default"> This address is already in use. </sonic-alert>
+  <sonic-alert status="success" label="Success"> This address is already in use. </sonic-alert>
+  <sonic-alert status="error" label="Error"> This address is already in use. </sonic-alert>
+  <sonic-alert status="warning" label="Warning"> This address is already in use. </sonic-alert>
+  <sonic-alert status="info" label="Info"> This address is already in use. </sonic-alert>
+  </div>
+  </template>
+</sonic-code>
+
 ## Sizes
 
 <sonic-code>
@@ -50,20 +64,6 @@
   </template>
 </sonic-code>
 
-## Status
-
-<sonic-code>
-  <template>
-  <div class="grid gap-4">
-  <sonic-alert label="Default"> This address is already in use. </sonic-alert>
-  <sonic-alert status="success" label="Success"> This address is already in use. </sonic-alert>
-  <sonic-alert status="error" label="Error"> This address is already in use. </sonic-alert>
-  <sonic-alert status="warning" label="Warning"> This address is already in use. </sonic-alert>
-  <sonic-alert status="info" label="Info"> This address is already in use. </sonic-alert>
-  </div>
-  </template>
-</sonic-code>
-
 ## Background
 
 <sonic-code>
@@ -114,7 +114,7 @@
 
 <sonic-code>
   <template>
-  <sonic-alert class="mb-3" dismissible dismissForever label="Lorem ipsum dolor" id="address-already-in-use">
+  <sonic-alert class="mb-3" dismissible dismissForever label="Lorem ipsum dolor" id="addressUniqueId">
     This address is already in use.
   </sonic-alert>
   </template>