@supersoniks/concorde 3.1.40 → 3.1.42

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.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";
 /**
@@ -17,29 +20,28 @@ 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-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);
+        --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;
 
@@ -47,80 +49,73 @@ 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, #fff);
+        --sc-badge-bg: var(--sc-contrast, #000);
       }
 
       /*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-_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;
       }
 
       :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;
       }
 
@@ -130,6 +125,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 +142,7 @@ export class Badge extends LitElement {
         white-space: nowrap;
         max-width: 100%;
       }
+
       :host([ellipsis]) slot {
         overflow: hidden;
         display: block;
@@ -164,20 +161,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`

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

@@ -53,14 +53,13 @@ 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-fw: var(--sc-btn-font-weight);
-        --sc-btn-ff: var(--sc-btn-font-family);
-        --sc-btn-fw: var(--sc-btn-font-weight);
+        --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);
 
-        --sc-btn-height: var(--sc-form-height);
-        --btn-color: var(--sc-btn-color, var(--sc-base-content));
-        --btn-bg: var(--sc-btn-bg, var(--sc-base-100));
+        --sc-btn-height: var(--sc-form-height, 2.5em);
+        --btn-color: var(--sc-btn-color, var(--sc-base-content, #000));
+        --btn-bg: var(--sc-btn-bg, var(--sc-base-100, rgba(0, 0, 0, 0.07)));
 
         --sc-btn-border-style: solid;
         --sc-btn-border-width: var(--sc-form-border-width);
@@ -68,15 +67,16 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
 
         --btn-outline-bg-hover: var(
           --sc-btn-outline-bg-hover,
-          var(--sc-base-100)
+          var(--sc-base-100, rgba(0, 0, 0, 0.07))
         );
-        --sc-btn-ghost-bg-hover: var(--sc-base-100);
+        --sc-btn-ghost-bg-hover: var(--sc-base-100, rgba(0, 0, 0, 0.07));
 
-        --sc-btn-active-color: var(--sc-base);
+        --sc-btn-active-color: var(--sc-base, #fff);
         --sc-btn-hover-filter: brightness(0.98);
         --sc-btn-active-filter: brightness(0.97);
-        --sc-btn-active-bg: var(--sc-base-content);
+        --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)
@@ -150,33 +150,33 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
 
       /*TYPES*/
       :host([type="default"]) button {
-        --btn-color: var(--sc-base-content);
-        --btn-bg: var(--sc-base-100);
+        --btn-color: var(--sc-base-content, #000);
+        --btn-bg: var(--sc-base-100, rgba(0, 0, 0, 0.07));
       }
 
       :host([type="primary"]) button {
-        --btn-color: var(--sc-primary-content);
-        --btn-bg: var(--sc-primary);
+        --btn-color: var(--sc-primary-content, var(--sc-base, #fff));
+        --btn-bg: var(--sc-primary, var(--sc-base-content, #000));
       }
       :host([type="warning"]) button {
-        --btn-color: var(--sc-warning-content);
-        --btn-bg: var(--sc-warning);
+        --btn-color: var(--sc-warning-content, var(--sc-base, #fff));
+        --btn-bg: var(--sc-warning, var(--sc-base-content, #000));
       }
       :host([type="danger"]) button {
-        --btn-color: var(--sc-danger-content);
-        --btn-bg: var(--sc-danger);
+        --btn-color: var(--sc-danger-content, var(--sc-base, #fff));
+        --btn-bg: var(--sc-danger, var(--sc-base-content, #000));
       }
       :host([type="info"]) button {
-        --btn-color: var(--sc-info-content);
-        --btn-bg: var(--sc-info);
+        --btn-color: var(--sc-info-content, var(--sc-base, #fff));
+        --btn-bg: var(--sc-info, var(--sc-base-content, #000));
       }
       :host([type="success"]) button {
-        --btn-color: var(--sc-success-content);
-        --btn-bg: var(--sc-success);
+        --btn-color: var(--sc-success-content, var(--sc-base, #fff));
+        --btn-bg: var(--sc-success, var(--sc-base-content, #000));
       }
       :host([type="neutral"]) button {
-        --btn-color: var(--sc-base);
-        --btn-bg: var(--sc-base-content);
+        --btn-color: var(--sc-base, #fff);
+        --btn-bg: var(--sc-base-content, #000);
       }
       :host([type="custom"]) button {
         --btn-color: var(--sc-btn-custom-color);
@@ -185,21 +185,22 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
 
       /*UNSTYLED*/
       :host([variant="unstyled"]) {
-        display: inline-block;
+        display: inline-flex;
       }
 
       :host([variant="unstyled"]) button {
         all: unset;
-        display: contents;
         cursor: pointer;
+        width: 100%;
+        flex: 1;
+        box-sizing: border-box;
         --sc-btn-height: auto;
-        --sc-btn-width: auto;
       }
 
       /*GESTION DU FOCUS*/
       :host(:not([disabled])) button:focus {
-        box-shadow: 0 0 0 0.18rem var(--sc-base-300);
-        border-color: var(--sc-base-300) !important;
+        box-shadow: 0 0 0 0.18rem var(--sc-base-300, rgba(0, 0, 0, 0.18));
+        border-color: var(--sc-base-300, rgba(0, 0, 0, 0.18)) !important;
         outline: none;
       }
 
@@ -237,8 +238,8 @@ export class Button extends FormCheckable(FormElement(Subscriber(LitElement))) {
       }
 
       :host([variant="outline"][type="default"]) button {
-        border-color: var(--sc-base-content);
-        color: var(--sc-base-content);
+        border-color: var(--sc-base-content, #000);
+        color: var(--sc-base-content, #000);
         background: transparent;
       }
 

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> `;