@supersoniks/concorde 1.0.7 → 1.0.8

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

@@ -0,0 +1,120 @@
+import { LitElement, CSSResultGroup } from "lit";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+declare const Checkbox_base: {
+    new (...args: any[]): {
+        _value: string | null;
+        value: string | null;
+        _name: string;
+        name: string;
+        unique: true | null;
+        radio: true | null;
+        _checked: true | null;
+        checked: true | null;
+        setCheckedValue(checked: true | null): void;
+        handleChange(): void;
+        getValueForFormPublisher(): any;
+        setFormValueFromPublisher(value: any): void;
+        initPublisher(): void;
+        getFormPublisher(): any;
+        updateDataValue(): void;
+        error: true | null;
+        autofocus: true | null;
+        disabled: true | null;
+        required: true | null;
+        formDataProvider: string;
+        props: any;
+        getAncestorAttributeValue(attributeName: string): string;
+        hasAncestorAttribute(attributeName: string): boolean;
+        querySelectorAll(selector: string): NodeListOf<Element>;
+        publisher: any;
+        dataProvider: String;
+        noShadowDom: string | null;
+        debug: HTMLElement | null;
+        defferedDebug: boolean | null;
+        makeShadow(props: Record<string, any>, value: any): any;
+        dispatchEvent(event: Event): void;
+        setAttribute(name: string, value: string): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        removeAttribute(name: string): void;
+        getApiConfiguration(): import("../../../../utils/api").APIConfiguration;
+        connectedCallback(): void;
+        requestUpdate(): void;
+        getAttribute(name: string): string;
+        hasAttribute(attributeName: String): boolean;
+        disconnectedCallback(): void;
+    };
+} & {
+    new (...args: any[]): {
+        type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
+        tabindex: string | null;
+        autocomplete: "url" | "name" | "language" | "on" | "tel" | "email" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | null;
+        getFormPublisher(): any;
+        updateDataValue(): void;
+        handleChange(e?: any): void;
+        getValueForFormPublisher(): any;
+        error: true | null;
+        autofocus: true | null;
+        disabled: true | null;
+        required: true | null;
+        formDataProvider: string;
+        _value: any;
+        value: any;
+        _name: string;
+        name: string;
+        props: any;
+        getAncestorAttributeValue(attributeName: string): string;
+        hasAncestorAttribute(attributeName: string): boolean;
+        querySelectorAll(selector: string): NodeListOf<Element>;
+        publisher: any;
+        dataProvider: String;
+        noShadowDom: string | null;
+        debug: HTMLElement | null;
+        defferedDebug: boolean | null;
+        makeShadow(props: Record<string, any>, value: any): any;
+        dispatchEvent(event: Event): void;
+        setAttribute(name: string, value: string): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        removeAttribute(name: string): void;
+        initPublisher(): void;
+        getApiConfiguration(): import("../../../../utils/api").APIConfiguration;
+        connectedCallback(): void;
+        requestUpdate(): void;
+        getAttribute(name: string): string;
+        hasAttribute(attributeName: String): boolean;
+        disconnectedCallback(): void;
+    };
+} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+/**
+ * ### Le composent sonic-checkbox étend les mixins FormCheckable, FormInput, FormElement et Subscriber
+ * **FormElement :**
+ * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
+ * * Par défault lorsque modifie l'input, la valeur est également mise à jour via le même dataprovider
+ * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
+ * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
+ * * **FormInput **
+ * Uniquement des propriétés classiques d'un input HTML. La prise en compte est ici partielle, par exemple les propriétés *placeholder*, *readonly*, *pattern*, *min* et *max* n'ont pas de sens pour un checkbox.
+ * **FormCheckable :**
+ * * La propriété checked mise à true si la valeur de la propriété du même nom dans les données du dataprovider associé contient un propriété checked.
+ * **Comportements :**
+ * * multiple (par défaut):
+ * - on peut cocher plusieurs checkbox ayant le même *name*.
+ * - la valeur enregistrée dans la propriété nommé du même nom dans formDataProvider est un tableau avec les *value* des cases cochées ayant le même *name*.
+ * * unique (Ajouter l'attribute unique au composant a l'intégration):
+ * - on ne peut cocher qu'une seule checkbox ayant le même *name*.
+ * * radio (Ajouter l'attribute radio au composant a l'intégration):
+ * Comme unique, mais on ne peut pas décocher la case sauf en en cochant une autre, comme un bouton radio.
+ */
+export declare class Checkbox extends Checkbox_base {
+    static styles: CSSResultGroup[];
+    iconName: string;
+    description: string;
+    label: string;
+    slotDescriptionNodes: Array<Node>;
+    hasDescription: true | false;
+    updated(): void;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/core/components/ui/form/checkbox/checkbox.js

@@ -0,0 +1,203 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property, queryAssignedNodes } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
+import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
+import FormCheckable from "@supersoniks/concorde/core/mixins/FormCheckable";
+import "@supersoniks/concorde/core/components/ui/icon/icon";
+/**
+ * ### Le composent sonic-checkbox étend les mixins FormCheckable, FormInput, FormElement et Subscriber
+ * **FormElement :**
+ * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
+ * * Par défault lorsque modifie l'input, la valeur est également mise à jour via le même dataprovider
+ * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
+ * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
+ * * **FormInput **
+ * Uniquement des propriétés classiques d'un input HTML. La prise en compte est ici partielle, par exemple les propriétés *placeholder*, *readonly*, *pattern*, *min* et *max* n'ont pas de sens pour un checkbox.
+ * **FormCheckable :**
+ * * La propriété checked mise à true si la valeur de la propriété du même nom dans les données du dataprovider associé contient un propriété checked.
+ * **Comportements :**
+ * * multiple (par défaut):
+ * - on peut cocher plusieurs checkbox ayant le même *name*.
+ * - la valeur enregistrée dans la propriété nommé du même nom dans formDataProvider est un tableau avec les *value* des cases cochées ayant le même *name*.
+ * * unique (Ajouter l'attribute unique au composant a l'intégration):
+ * - on ne peut cocher qu'une seule checkbox ayant le même *name*.
+ * * radio (Ajouter l'attribute radio au composant a l'intégration):
+ * Comme unique, mais on ne peut pas décocher la case sauf en en cochant une autre, comme un bouton radio.
+ */
+let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscriber(LitElement)))) {
+    constructor() {
+        super(...arguments);
+        this.iconName = "check";
+        this.description = "";
+        this.label = "";
+        this.hasDescription = false;
+    }
+    updated() {
+        var _a;
+        this.hasDescription = this.description || ((_a = this.slotDescriptionNodes) === null || _a === void 0 ? void 0 : _a.length) ? true : false;
+    }
+    connectedCallback() {
+        this.type = "checkbox";
+        super.connectedCallback();
+    }
+    render() {
+        return html `
+          <label class="checkbox-container ${this.disabled ? "disabled" : ""}">
+          <span class="icon-container">
+            <input 
+              type="${this.type}"
+              @change=${this.handleChange}
+              disabled="${ifDefined(this.disabled)}"
+              .checked="${ifDefined(this.checked)}"
+              required=${ifDefined(this.required)}
+              .name=${this.name}
+              .value=${this.value}
+              autofocus=${ifDefined(this.autofocus)}
+              
+           />
+            <sonic-icon prefix="iconoir"
+            name="${this.iconName}" class="sc-input-icon"></sonic-icon>
+          </span>
+          <div class="checkbox-text">
+                ${this.label ? this.label : ""}
+                <slot></slot>
+                <slot name="description" class="${this.hasDescription ? "description" : "hidden"} ">
+                  ${this.description ? html `${this.description}` : ""}
+                <slot>
+              </div>
+          </label>
+
+    `;
+    }
+};
+Checkbox.styles = [
+    css `
+      * {
+        box-sizing: border-box;
+      }
+      .checkbox-container {
+        min-height: 1.4em;
+        display: flex;
+        gap: 0.5em;
+        line-height: 1.2;
+        align-items: flex-start;
+      }
+
+      .icon-container {
+        position: relative;
+        display: flex;
+        flex-shrink: 0;
+      }
+
+      input {
+        appearance: none;
+        flex-shrink: 0;
+        height: 1.5em;
+        width: 1.5em;
+        display: block;
+        cursor: pointer;
+        border-radius: 0.25em;
+        transition: 0.2s;
+        outline: none;
+        margin: 0;
+        background-color: var(--sc-base-200);
+      }
+
+      input:focus,
+      :host(:not([disabled])) input:active {
+        box-shadow: 0 0 0 2px var(--sc-primary);
+      }
+
+      :host(:not([disabled])) label {
+        cursor: pointer;
+      }
+
+      sonic-icon {
+        line-height: 0;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%) scale(0);
+        transition: transform 0.2s ease-in-out;
+        color: var(--sc-primary-content);
+      }
+
+      /* .checkbox-text {
+        align-self: center;
+      } */
+
+      .description {
+        color: var(--sc-base-400);
+        font-size: 0.85em;
+        margin-top: 0.2em;
+        display: block;
+      }
+
+      /*Active */
+      input:checked,
+      input[checked="true"] {
+        background: var(--sc-primary);
+      }
+
+      input:checked + sonic-icon,
+      input[checked="true"] + sonic-icon {
+        transform: translateX(-50%) translateY(-50%) scale(1);
+      }
+      /*DISABLED */
+      .disabled {
+        cursor: not-allowed;
+      }
+      .disabled input {
+        opacity: 0.4;
+      }
+
+      .disabled .checkbox-text {
+        opacity: 0.6;
+      }
+
+      ::slotted(a) {
+        color: inherit;
+        text-decoration: underline !important;
+      }
+
+      ::slotted(a:hover) {
+        text-decoration: none !important;
+      }
+      /*Utils */
+      .hidden {
+        display: none;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], Checkbox.prototype, "iconName", void 0);
+__decorate([
+    property({ type: String })
+], Checkbox.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], Checkbox.prototype, "label", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "description" })
+], Checkbox.prototype, "slotDescriptionNodes", void 0);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "hasDescription", void 0);
+Checkbox = __decorate([
+    customElement("sonic-checkbox")
+], Checkbox);
+export { Checkbox };
+//Ajout pour Storybook
+try {
+    customElements.define("sonic-checkbox", Checkbox);
+}
+catch (e) { }

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

@@ -0,0 +1 @@
+export declare const formControl: import("lit").CSSResult;

package/core/components/ui/form/css/form-control.js

@@ -0,0 +1,219 @@
+import { css } from "lit";
+export const formControl = css `
+  * {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --sc-input-height: var(--sc-form-height, 2.5em);
+    --sc-input-border-with: var(--sc-form-border-width, 0.1rem);
+    --sc-input-border: var(--sc-input-border-with) solid var(--sc-input-border-color, var(--sc-base-300, #aaa));
+    --sc-input-color: var(--sc-base-content, #1f2937);
+
+    --sc-item-rounded-tr: var(--sc-input-rounded, var(--sc-rounded));
+    --sc-item-rounded-tl: var(--sc-input-rounded, var(--sc-rounded));
+    --sc-item-rounded-bl: var(--sc-input-rounded, var(--sc-rounded));
+    --sc-item-rounded-br: var(--sc-input-rounded, var(--sc-rounded));
+
+    --sc-input-ff: inherit;
+    --sc-input-py: 0.6em;
+    --sc-input-px: 1.15em;
+
+    --sc-input-prefix-color: var(--sc-input-color);
+    --sc-input-prefix-bg: var(--sc-input-bg);
+    --sc-input-prefix-border-color: var(--sc-input-border-color);
+
+    --sc-input-suffix-color: var(--sc-input-color);
+    --sc-input-suffix-bg: var(--sc-input-bg);
+    --sc-input-suffix-border-color: var(--sc-input-border-color);
+    --sc-label-fs: var(--sc-input-fs);
+  }
+
+  .form-element {
+    display: block;
+    flex-grow: 1;
+    width: 100%;
+
+    line-height: 1.1;
+    color: var(--sc-input-color);
+    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
+      var(--sc-item-rounded-bl);
+
+    font-family: var(--sc-input-ff);
+    background-color: var(--sc-input-bg, var(--sc-base, #fff));
+    border: var(--sc-input-border);
+    width: 100%;
+    font-size: var(--sc-input-fs);
+
+    padding-top: var(--sc-input-py);
+    padding-bottom: var(--sc-input-py);
+    padding-left: var(--sc-input-px);
+    padding-right: var(--sc-input-px);
+
+    min-height: var(--sc-input-height);
+  }
+
+  label {
+    font-size: var(--sc-label-fs);
+    line-height: 1.2;
+  }
+
+  .form-control {
+    display: flex;
+    width: 100%;
+  }
+
+  /*Suffix*/
+  :host(:not([inlineContent])) .has-suffix slot[name="suffix"],
+  :host(:not([inlineContent])) .has-prefix slot[name="prefix"] {
+    min-width: var(--sc-input-height);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1.1;
+    flex-shrink: 0;
+    padding-left: calc(-1 * var(--sc-input-px));
+    padding-right: calc(-1 * var(--sc-input-px));
+  }
+
+  :host(:not([inlineContent])) slot[name="prefix"] {
+    border-radius: var(--sc-item-rounded-tl) 0 0 var(--sc-item-rounded-bl);
+    background-color: var(--sc-input-prefix-bg);
+    color: var(--sc-input-prefix-color);
+    border: var(--sc-input-border-with) solid var(--sc-input-prefix-border-color);
+    margin-right: calc(-1 * var(--sc-input-border-with));
+  }
+
+  :host(:not([inlineContent])) slot[name="suffix"] {
+    border-radius: 0 var(--sc-item-rounded-tr) var(--sc-item-rounded-br) 0;
+    background-color: var(--sc-input-suffix-bg);
+    color: var(--sc-input-suffix-color);
+    border: var(--sc-input-border-with) solid var(--sc-input-suffix-border-color);
+    margin-left: calc(-1 * var(--sc-input-border-with));
+  }
+
+  :host(:not([inlineContent])) .has-prefix .form-element {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  :host(:not([inlineContent])) .has-suffix .form-element {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  /*InlineCONTENT */
+  :host([inlineContent]) {
+    --sc-input-py: 0;
+  }
+  :host([inlineContent]) .form-element {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.2em;
+  }
+
+  /*Disabled */
+  :host([disabled]) .form-element-container {
+    cursor: not-allowed;
+  }
+
+  /*SIZE*/
+  :host {
+    --sc-input-fs: 1rem;
+  }
+
+  :host([size="xs"]) {
+    --sc-input-fs: 0.75rem;
+  }
+  :host([size="sm"]) {
+    --sc-input-fs: 0.85rem;
+  }
+  :host([size="lg"]) {
+    --sc-input-fs: 1.2rem;
+  }
+
+  :host([variant="ghost"]) .form-element {
+    --sc-input-bg: transparent;
+  }
+
+  /*ERROR*/
+  :host([error]) {
+    --sc-input-border-color: var(--sc-danger);
+  }
+
+  :host :not([value=""]):not(:focus):invalid {
+    --sc-input-color: var(--sc-danger);
+  }
+
+  /*Disbaled*/
+  :host([disabled]) .form-element {
+    pointer-events: none;
+    background-color: var(--sc-base-100);
+    border-color: transparent;
+    color: var(--sc-base-400);
+  }
+
+  /*PLACEHOLDER*/
+  ::placeholder {
+    color: inherit;
+    opacity: 0.45;
+  }
+
+  :focus::placeholder {
+    opacity: 0;
+  }
+
+  /*HOVER*/
+  :host(:not([disabled])) .form-element:hover,
+  .form-element:focus-visible,
+  .form-element:focus {
+    filter: brightness(0.97);
+    outline: none;
+  }
+
+  .form-label {
+    margin-bottom: 0.22em;
+    display: block;
+  }
+
+  .form-description {
+    color: var(--sc-base-400);
+    font-size: 0.85em;
+    margin-top: 0.2em;
+    display: block;
+  }
+
+  .form-element > slot,
+  .form-element .form-element {
+    all: unset !important;
+  }
+
+  /*Textarea scrollbar*/
+  textarea::-webkit-scrollbar {
+    width: 0.4rem;
+  }
+  textarea::-webkit-scrollbar-track {
+    width: 0.4rem;
+  }
+  textarea::-webkit-scrollbar-thumb {
+    background-color: var(--sc-base-500);
+    width: 0.4rem;
+    border-radius: var(--sc-rounded);
+  }
+  textarea::-webkit-scrollbar {
+    width: 0.4rem;
+  }
+  textarea::-webkit-scrollbar-track {
+    width: 0.4rem;
+  }
+
+  /*Utilitaires*/
+  .hidden {
+    display: none;
+  }
+  .contents {
+    display: contents;
+  }
+`;

package/core/components/ui/form/fieldset/fieldset.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from "lit";
+declare const Fieldset_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+export declare class Fieldset extends Fieldset_base {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Désactiver le fieldset
+     */
+    disabled: true | false;
+    /**
+     * Lier à un formulaire qui ne serait pas parent du fieldset
+     */
+    form: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/core/components/ui/form/fieldset/fieldset.js

@@ -0,0 +1,70 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+let Fieldset = class Fieldset extends Subscriber(LitElement) {
+    constructor() {
+        super(...arguments);
+        // @property({ type: String }) label: String = "";
+        /**
+         * Désactiver le fieldset
+         */
+        this.disabled = false;
+        /**
+         * Lier à un formulaire qui ne serait pas parent du fieldset
+         */
+        this.form = "";
+    }
+    render() {
+        return html `<fieldset form="${ifDefined(this.form)}" ?disabled="${this.disabled}">
+      <slot></slot>
+    </fieldset>`;
+    }
+};
+Fieldset.styles = [
+    css `
+      :host {
+        --sc-fieldset-mt: 0;
+        --sc-fieldset-mb: 2rem;
+        --sc-fieldset-border-color: var(--sc-base-200);
+        --sc-fieldset-border-width: var(--sc-form-border-width);
+
+        margin-top: var(--sc-fieldset-mt);
+        margin-bottom: var(--sc-fieldset-mb);
+        display: block;
+        border: var(--sc-fieldset-border-width) solid var(--sc-fieldset-border-color) !important;
+        padding: 1.25rem;
+        border-radius: var(--sc-rounded-lg);
+      }
+
+      fieldset {
+        all: unset;
+        display: contents;
+      }
+      ::slotted(sonic-legend) {
+        margin-bottom: 1.5rem;
+        display: block;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Fieldset.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], Fieldset.prototype, "form", void 0);
+Fieldset = __decorate([
+    customElement("sonic-fieldset")
+], Fieldset);
+export { Fieldset };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-fieldset", Fieldset);
+}
+catch (e) { }

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

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+declare const Legend_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+export declare class Legend extends Legend_base {
+    static styles: import("lit").CSSResult[];
+    iconName: string;
+    iconPrefix: string;
+    description: string;
+    label: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};