@supersoniks/concorde 3.1.39 → 3.1.41

package/docs/svg/regular/plane.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M576 256C576 305 502.1 336 464.2 336H382.2L282.4 496C276.4 506 266.4 512 254.4 512H189.5C179.5 512 169.5 508 163.5 500C157.6 492 155.6 480.1 158.6 471L201.5 336H152.5L113.6 388C107.6 396 98.61 400 88.62 400H31.7C22.72 400 12.73 396 6.74 388C.7485 380-1.248 370 1.747 360L31.7 256L.7488 152C-1.248 143 .7488 133 6.74 125C12.73 117 22.72 112 31.7 112H88.62C98.61 112 107.6 117 113.6 125L152.5 176H201.5L158.6 41C155.6 32 157.6 21 163.5 13C169.5 5 179.5 0 189.5 0H254.4C265.4 0 277.4 7 281.4 16L381.2 176H463.2C502.1 176 576 208 576 256H576zM527.1 256C525.1 246 489.1 224 463.2 224H355.3L245.4 48H211.5L266.4 224H128.6L80.63 160H53.67L81.63 256L53.67 352H80.63L128.6 288H266.4L211.5 464H245.4L355.3 288H463.2C490.1 288 526.1 267 527.1 256V256z"/></svg>

package/docs/svg/solid/plane.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z"/></svg>

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.39",
+  "version": "3.1.41",
   "license": "MIT",
   "type": "module",
   "main": "",
@@ -65,6 +65,9 @@
     "./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 +272,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/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/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/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>

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

@@ -10,15 +10,40 @@
   <sonic-badge type="info">Info</sonic-badge>
   <sonic-badge type="success">Success</sonic-badge>
   <sonic-badge type="danger">Danger</sonic-badge>
+  <sonic-badge type="contrast">Contrast</sonic-badge>
   </template>
 </sonic-code>
 
 
-## Variant
+## Outline
 <sonic-code>
   <template>
-  <sonic-badge variant="outline">Outline</sonic-badge>
-  <sonic-badge variant="ghost">Ghost</sonic-badge>
+  <div class="flex items-center flex-wrap gap-3">
+    <sonic-badge variant="outline">Default</sonic-badge>
+    <sonic-badge variant="outline" type="primary">Primary</sonic-badge>
+    <sonic-badge variant="outline" type="neutral">Neutral</sonic-badge>
+    <sonic-badge variant="outline" type="warning">Warning</sonic-badge>
+    <sonic-badge variant="outline" type="info">Info</sonic-badge>
+    <sonic-badge variant="outline" type="success">Success</sonic-badge>
+    <sonic-badge variant="outline" type="danger">Danger</sonic-badge>
+    <sonic-badge variant="outline" type="contrast">Contrast</sonic-badge>
+  </div>
+  </template>
+</sonic-code>
+
+## Ghost
+<sonic-code>
+  <template>
+    <div class="flex items-center flex-wrap gap-3">
+    <sonic-badge variant="ghost">Default</sonic-badge>
+    <sonic-badge variant="ghost" type="primary">Primary</sonic-badge>
+    <sonic-badge variant="ghost" type="neutral">Neutral</sonic-badge>
+    <sonic-badge variant="ghost" type="warning">Warning</sonic-badge>
+    <sonic-badge variant="ghost" type="info">Info</sonic-badge>
+    <sonic-badge variant="ghost" type="success">Success</sonic-badge>
+    <sonic-badge variant="ghost" type="danger">Danger</sonic-badge>
+    <sonic-badge variant="ghost" type="contrast">Contrast</sonic-badge>
+  </div>
   </template>
 </sonic-code>
 
@@ -39,7 +64,7 @@
 ## Empty badges
 <sonic-code>
   <template>
-  <div class="flex items-center gap-3">
+  <div class="flex items-center flex-wrap gap-3">
     <sonic-badge type="danger" size="2xs"></sonic-badge>
     <sonic-badge type="danger" size="xs"></sonic-badge>
     <sonic-badge type="danger" size="sm"></sonic-badge>
@@ -47,7 +72,7 @@
     <sonic-badge type="danger" size="lg"></sonic-badge>
     <sonic-badge type="danger" size="xl"></sonic-badge>
     <sonic-badge type="danger" size="2xl"></sonic-badge>
-  <div>
+  </div>
   </template>
 </sonic-code>
 

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

@@ -1,6 +1,9 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {fontSize, Size} from "@supersoniks/concorde/core/components/ui/_css/size";
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import {
+  fontSize,
+  Size,
+} from "@supersoniks/concorde/core/components/ui/_css/size";
 
 const tagName = "sonic-badge";
 /**
@@ -22,10 +25,11 @@ export class Badge extends LitElement {
         --sc-badge-color: var(--sc-base-content, #1f2937);
         --sc-badge-bg: var(--sc-base-100, #e5e7eb);
 
-        /*--sc-badge-border-with: var(--sc-form-border-width, 0.1rem);*/
-        --sc-badge-border-with: 1px;
+        /*--sc-badge-border-width: var(--sc-form-border-width, 0.1rem);*/
+        --sc-badge-border-width: 1px;
         --sc-badge-border-color: transparent;
-        --sc-badge-border: var(--sc-badge-border-with) solid var(--sc-badge-border-color);
+        --sc-badge-border: var(--sc-badge-border-width) solid
+          var(--sc-badge-border-color);
 
         --sc-badge-rounded: 0.85em;
         --sc-badge-fw: var(--sc-font-weight-base);
@@ -78,41 +82,33 @@ export class Badge extends LitElement {
         --sc-badge-bg: var(--sc-base-content);
       }
 
+      :host([contrast]),
+      :host([type="contrast"]) {
+        --sc-badge-color: var(--sc-contrast-content);
+        --sc-badge-bg: var(--sc-contrast);
+      }
+
       /*SIZE*/
       :host {
         font-size: var(--sc-fs);
         gap: var(--sc-badge-gap);
       }
 
-      :host([size="2xs"]) {
-        --sc-badge-gap: 0.35em;
-      }
-      :host([size="xs"]) {
-        --sc-badge-gap: 0.35em;
-      }
-
+      :host([size="2xs"]),
+      :host([size="xs"]),
       :host([size="sm"]) {
         --sc-badge-gap: 0.35em;
       }
 
-      :host([size="lg"]) {
-        --sc-lh: 1.2;
-        --sc-badge-gap: 0.5em;
-      }
-
+      :host([size="lg"]),
       :host([size="xl"]) {
         --sc-lh: 1.2;
         --sc-badge-gap: 0.5em;
       }
 
-      :host([contrast]) {
-        --sc-badge-color: var(--sc-contrast-content);
-        --sc-badge-bg: var(--sc-contrast);
-      }
-
       /*OUTLINE*/
       :host([variant="outline"][type]) {
-        border-width: var(--sc-badge-border-with) !important;
+        border-width: var(--sc-badge-border-width) !important;
         border-color: var(--sc-badge-bg);
         color: var(--sc-badge-bg);
         background: transparent;
@@ -130,6 +126,7 @@ export class Badge extends LitElement {
         background: transparent;
         padding: 0;
       }
+
       @media (forced-colors: active) {
         :host([variant="ghost"][type]) {
           padding: var(--sc-badge-py) var(--sc-badge-px);
@@ -146,6 +143,7 @@ export class Badge extends LitElement {
         white-space: nowrap;
         max-width: 100%;
       }
+
       :host([ellipsis]) slot {
         overflow: hidden;
         display: block;
@@ -164,20 +162,31 @@ export class Badge extends LitElement {
   /**
    * Le type change surtout la couleur composant
    */
-  @property({type: String, reflect: true})
-  type: "default" | "primary" | "warning" | "danger" | "success" | "info" | "neutral" = "default";
+  @property({ type: String, reflect: true })
+  type:
+    | "default"
+    | "primary"
+    | "warning"
+    | "danger"
+    | "success"
+    | "info"
+    | "contrast"
+    | "neutral" = "default";
   /**
    * Le composant par defaut sans se paramètre à forte afordance
-   * * gost : composant super léger visuellement
+   * * ghost : composant super léger visuellement
    * * outline : composant légé avec une bordure
    */
-  @property({type: String, reflect: true}) variant: "default" | "outline" | "ghost" = "default";
+  @property({ type: String, reflect: true }) variant:
+    | "default"
+    | "outline"
+    | "ghost" = "default";
 
   /**
    * Taille du composant, implique notamment des modifications de typo et de marge interne
    */
-  @property({type: String, reflect: true}) size?: Size;
-  @property({type: Boolean, reflect: true}) ellipsis = false;
+  @property({ type: String, reflect: true }) size?: Size;
+  @property({ type: Boolean, reflect: true }) ellipsis = false;
 
   render() {
     return html`