@supersoniks/concorde 3.1.41 → 3.1.42

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

@@ -13,15 +13,11 @@ export class CardHeader extends LitElement {
         --sc-card-header-font-size: 1.875rem;
         --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);
+        --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);
-      }
-      @media print {
-        :host {
-          --sc-card-header-font-size: 1.45rem;
-        }
-      }
-      .header {
         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;
@@ -52,18 +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
-              >`
-            : nothing}
-          <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

@@ -3,86 +3,42 @@ 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);
       }
     `,
   ];
@@ -92,7 +48,6 @@ export class Card extends LitElement {
    */
   @property({ type: String, reflect: true })
   type:
-    | "default"
     | "light"
     | "primary"
     | "warning"
@@ -100,13 +55,10 @@ export class Card extends LitElement {
     | "success"
     | "info"
     | "neutral"
-    | "invert" = "default";
+    | "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.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,
   ];
 

package/src/core/components/ui/form/css/form-control.ts

@@ -15,7 +15,7 @@ export const passwordToggle = css`
 
 export const label = css`
   :host {
-    --sc-label-fs: var(--sc-fs, 1rem);
+    --sc-label-fs: var(--sc-_fs, 1rem);
     --sc-label-fw: var(--sc-label-font-weight, 500);
   }
   label {
@@ -31,7 +31,7 @@ export const label = css`
 
 export const description = css`
   .form-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;
@@ -44,23 +44,26 @@ export const formControl = css`
   }
 
   :host {
-    --sc-input-height: var(--sc-form-height);
-    --sc-input-c: var(--sc-input-color, var(--sc-base-content));
+    --sc-input-height: var(--sc-form-height, 2.5em);
+    --sc-input-c: var(--sc-input-color, var(--sc-base-content, #000));
     --sc-input-b-width: var(--sc-form-border-width);
-    --sc-input-b-color: var(--sc-input-border-color);
+    --sc-input-b-color: var(
+      --sc-input-border-color,
+      var(--sc-base-content, #000)
+    );
 
     --sc-item-rounded-tr: var(--sc-input-rounded);
     --sc-item-rounded-tl: var(--sc-input-rounded);
     --sc-item-rounded-bl: var(--sc-input-rounded);
     --sc-item-rounded-br: var(--sc-input-rounded);
 
-    --sc-input-fs: var(--sc-fs, 1rem);
+    --sc-input-fs: var(--sc-_fs, 1rem);
     --sc-input-ff: inherit;
     --sc-input-py: 0.55em;
     --sc-input-px: clamp(0.3em, 8%, 1.1em);
 
     --sc-input-background: var(--sc-input-bg);
-    --sc-input-addon-c: var(--sc-input-addon-color, var(--sc-base));
+    --sc-input-addon-c: var(--sc-input-addon-color, var(--sc-base, #fff));
     --sc-input-addon-bg: var(--sc-input-c);
   }
 
@@ -158,7 +161,7 @@ export const formControl = css`
     display: flex;
     align-items: center;
     gap: 0.35em;
-    min-height: var(--sc-form-height);
+    min-height: var(--sc-form-height, 2.5em);
   }
 
   :host([inlineContent]) .form-element .form-element {
@@ -225,7 +228,7 @@ export const formControl = css`
   /*PLACEHOLDER*/
   ::placeholder {
     color: inherit;
-    opacity: 0.45;
+    opacity: 0.6;
   }
 
   :host([placehoderAsLabel]) ::placeholder {
@@ -259,7 +262,7 @@ export const formControl = css`
 
   /*ERROR*/
   :host([error]) {
-    --sc-input-b-color: var(--sc-danger);
+    --sc-input-b-color: var(--sc-danger, var(--sc-base-content, #000));
   }
 
   :host input:visited {
@@ -267,22 +270,22 @@ export const formControl = css`
   }
 
   :host([touched][required]) :not(:focus):invalid {
-    --sc-input-b-color: var(--sc-danger);
-    --sc-input-c: var(--sc-danger);
+    --sc-input-b-color: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-danger, var(--sc-base-content, #000));
   }
 
   :host([touched][required]) :not(:focus):invalid + .select-chevron {
-    --sc-input-c: var(--sc-danger);
+    --sc-input-c: var(--sc-danger, var(--sc-base-content, #000));
   }
 
   /*VALID*/
   :host([touched][required]) :not([value=""]):not(:focus):valid {
-    --sc-input-b-color: var(--sc-success);
-    --sc-input-c: var(--sc-success);
+    --sc-input-b-color: var(--sc-success, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-success, var(--sc-base-content, #000));
   }
 
   :host([touched][required]) :not(:focus):valid + .select-chevron {
-    --sc-input-c: var(--sc-success);
+    --sc-input-c: var(--sc-success, var(--sc-base-content, #000));
   }
 
   /*Input COLOR*/
@@ -351,33 +354,33 @@ export const formControl = css`
 
   /*type color "default" | "success" | "error" | "warning"  | "info" */
   :host([status="success"]) {
-    --sc-input-b-color: var(--sc-success);
-    --sc-input-c: var(--sc-success);
-    --sc-input-addon-bg: var(--sc-success);
-    --sc-input-addon-color: var(--sc-success-content);
+    --sc-input-b-color: var(--sc-success, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-success, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-success, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-success-content, var(--sc-base, #fff));
   }
   :host([status="error"]) {
-    --sc-input-b-color: var(--sc-danger);
-    --sc-input-c: var(--sc-danger);
-    --sc-input-addon-bg: var(--sc-danger);
-    --sc-input-addon-color: var(--sc-danger-content);
+    --sc-input-b-color: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-danger, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-danger-content, var(--sc-base, #fff));
   }
   :host([status="warning"]) {
     --sc-input-b-color: var(--sc-warning);
-    --sc-input-c: var(--sc-warning);
-    --sc-input-addon-bg: var(--sc-warning);
-    --sc-input-addon-color: var(--sc-warning-content);
+    --sc-input-c: var(--sc-warning, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-warning, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-warning-content, var(--sc-base, #fff));
   }
   :host([status="info"]) {
-    --sc-input-b-color: var(--sc-info);
-    --sc-input-c: var(--sc-info);
-    --sc-input-addon-bg: var(--sc-info);
-    --sc-input-addon-color: var(--sc-info-content);
+    --sc-input-b-color: var(--sc-info, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-info, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-info, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-info-content, var(--sc-base, #fff));
   }
   :host([status="primary"]) {
-    --sc-input-b-color: var(--sc-primary);
-    --sc-input-c: var(--sc-primary);
-    --sc-input-addon-bg: var(--sc-primary);
-    --sc-input-addon-color: var(--sc-primary-content);
+    --sc-input-b-color: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-input-c: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-input-addon-bg: var(--sc-primary, var(--sc-base-content, #000));
+    --sc-input-addon-color: var(--sc-primary-content, var(--sc-base, #fff));
   }
 `;

package/src/core/components/ui/form/fieldset/legend-description.ts

@@ -1,5 +1,5 @@
-import {html, LitElement, css} from "lit";
-import {customElement} from "lit/decorators.js";
+import { html, LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
 
 @customElement("sonic-legend-description")
 export class LegendDescription extends LitElement {
@@ -9,9 +9,9 @@ export class LegendDescription extends LitElement {
         font-size: 1.15rem;
         line-height: 1.2;
         display: block;
-        color: var(--sc-base-500);
-        font-weight: var(--sc-font-weight-base);
-        font-style: var(--sc-font-style-base);
+        color: var(--sc-base-500, var(--sc-base-content, #000));
+        font-weight: var(--sc-font-weight-base, 400);
+        font-style: var(--sc-font-style-base, normal);
         margin-top: 0.2em;
       }
     `,

package/src/core/components/ui/form/fieldset/legend.ts

@@ -12,11 +12,14 @@ export class Legend extends LitElement {
     css`
       :host {
         --sc-legend-font-size: 1.5rem;
-        --sc-legend-font-weight: var(--sc-font-weight-base);
+        --sc-legend-font-weight: var(--sc-font-weight-base, 400);
         --sc-legend-font-style: var(--sc-headings-font-style, normal);
-        --sc-legend-family: var(--sc-headings-font-family);
+        --sc-legend-family: var(
+          --sc-headings-font-family,
+          var(--sc-font-family-base, sans-serif)
+        );
         --sc-legend-line-height: var(--sc-headings-line-height, 1.1);
-        --sc-legend-color: var(--sc-base-content);
+        --sc-legend-color: var(--sc-base-content, #000);
         display: flex;
         width: 100%;
       }

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

@@ -108,7 +108,7 @@
 
 <sonic-code>
   <template>
-  <div class="grid grid-cols-4 gap-3">
+  <div class="grid grid-cols-2 gap-3">
     <sonic-input inlineContent type="search" label="Search icon in input" placeholder="Search plane">
       <sonic-icon library="iconoir" name="search" slot="prefix"></sonic-icon>
     </sonic-input>
@@ -131,6 +131,7 @@
     formDataProvider="input-filter"
     name="contains"
     value="chien"
+    class="mb-4"
   ></sonic-input>
   <sonic-subscriber dataProvider="input-filter" class="text-xl my-4 block font-bold">
     Blagues trouvées pour "<span data-bind ::inner-html="$contains"></span>" :