@supersoniks/concorde 1.1.23 → 1.1.25

package/core/components/ui/button/button.js

@@ -12,6 +12,7 @@ import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormCheckable from "@supersoniks/concorde/core/mixins/FormCheckable";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { ifDefined } from "lit/directives/if-defined.js";
+const tagName = 'sonic-button';
 /**
  * Un bouton simple avec deux slots, un nommé préfix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
  * * L'objet et ses slot sont en display flex avec direction / alignement et justifications configurables
@@ -46,7 +47,7 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
         /**
          * Propriété align-items de *flex* appliquée à l'élément contenant les *slots*
          */
-        this.align = "center";
+        this.alignItems = "center";
         /**
          * Propriété justify-content de *flex* appliquée à l'élément contenant les *slots*
          */
@@ -54,7 +55,7 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
         /**
          * Propriété text-align du bouton
          */
-        this.textAlign = "center";
+        this.align = "center";
         /**
          * Propriété min-width du bouton
          */
@@ -142,9 +143,9 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
     render() {
         const btnStyles = {
             flexDirection: this.direction,
-            alignItems: this.align,
+            alignItems: this.alignItems,
             justifyContent: this.justify,
-            textAlign: this.textAlign,
+            textAlign: this.align,
             minWidth: this.minWidth,
         };
         const btn = html `
@@ -152,7 +153,7 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
         <slot @slotchange=${this.onSlotChange} part="prefix" name="prefix"></slot>
         <slot part="main" class="main-slot"></slot>
         <slot @slotchange=${this.onSlotChange} part="suffix" name="suffix"></slot>
-        ${this.loading == true ? html `<sonic-icon prefix="feather" name="loader" class="loader"></sonic-icon>` : ""}
+        ${this.loading == true ? html `<sonic-icon name="loader" class="loader"></sonic-icon>` : ""}
       </button>
     `;
         return this.href
@@ -363,6 +364,8 @@ Button.styles = [
       /*OUTLINE*/
       :host([variant="link"]) {
         vertical-align: baseline;
+        margin-left:.25em;
+        margin-right:.25em;
       }
 
       :host([variant="link"]) button {
@@ -436,6 +439,10 @@ Button.styles = [
         justify-content: center;*/
       }
 
+      :host([minWidth]) .main-slot {
+        flex-grow:0;
+      }
+
       slot[name="suffix"],
       slot[name="prefix"] {
         flex-shrink: 0;
@@ -517,13 +524,13 @@ __decorate([
 ], Button.prototype, "direction", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], Button.prototype, "align", void 0);
+], Button.prototype, "alignItems", void 0);
 __decorate([
     property({ type: String })
 ], Button.prototype, "justify", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], Button.prototype, "textAlign", void 0);
+], Button.prototype, "align", void 0);
 __decorate([
     property({ type: String })
 ], Button.prototype, "minWidth", void 0);
@@ -561,12 +568,12 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], Button.prototype, "active", void 0);
 Button = __decorate([
-    customElement("sonic-button")
+    customElement(tagName)
 ], Button);
 export { Button };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-button", Button);
+    customElements.define(tagName, Button);
 }
 catch (e) { }
 export const SonicButton = Button;

package/core/components/ui/card/card-footer.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
+const tagName = "sonic-card-footer";
 let CardFooter = class CardFooter extends LitElement {
     render() {
         return html `
@@ -22,6 +23,11 @@ CardFooter.styles = [
     `
 ];
 CardFooter = __decorate([
-    customElement("sonic-card-footer")
+    customElement(tagName)
 ], CardFooter);
 export { CardFooter };
+//Ajout pour Storybook
+try {
+    customElements.define(tagName, CardFooter);
+}
+catch (e) { }

package/core/components/ui/card/card-header-descripton.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
+const tagName = "sonic-card-header-description";
 let CardHeaderDescription = class CardHeaderDescription extends LitElement {
     render() {
         return html `
@@ -28,6 +29,10 @@ CardHeaderDescription.styles = [
     `
 ];
 CardHeaderDescription = __decorate([
-    customElement("sonic-card-header-description")
+    customElement(tagName)
 ], CardHeaderDescription);
 export { CardHeaderDescription };
+try {
+    customElements.define(tagName, CardHeaderDescription);
+}
+catch (e) { }

package/core/components/ui/card/card-header.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import '@supersoniks/concorde/core/components/ui/card/card-header-descripton';
+const tagName = "sonic-card-header";
 let CardHeader = class CardHeader extends LitElement {
     render() {
         return html `
@@ -62,6 +63,11 @@ __decorate([
     property()
 ], CardHeader.prototype, "description", void 0);
 CardHeader = __decorate([
-    customElement("sonic-card-header")
+    customElement(tagName)
 ], CardHeader);
 export { CardHeader };
+//Ajout pour Storybook
+try {
+    customElements.define(tagName, CardHeader);
+}
+catch (e) { }

package/core/components/ui/card/card-main.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
+const tagName = "sonic-card-main";
 let CardMain = class CardMain extends LitElement {
     render() {
         return html `
@@ -24,6 +25,11 @@ CardMain.styles = [
     `
 ];
 CardMain = __decorate([
-    customElement("sonic-card-main")
+    customElement(tagName)
 ], CardMain);
 export { CardMain };
+//Ajout pour Storybook
+try {
+    customElements.define(tagName, CardMain);
+}
+catch (e) { }

package/core/components/ui/card/card.js

@@ -9,6 +9,7 @@ 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";
+const tagName = "sonic-card";
 let Card = class Card extends LitElement {
     constructor() {
         super(...arguments);
@@ -85,6 +86,11 @@ __decorate([
     property({ type: String, reflect: true })
 ], Card.prototype, "type", void 0);
 Card = __decorate([
-    customElement("sonic-card")
+    customElement(tagName)
 ], Card);
 export { Card };
+//Ajout pour Storybook
+try {
+    customElements.define(tagName, Card);
+}
+catch (e) { }

package/core/components/ui/divider/divider.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property, queryAssignedNodes, query } from "lit/decorators.js";
+const tagName = "sonic-divider";
 let Divider = class Divider extends LitElement {
     constructor() {
         super(...arguments);
@@ -139,6 +140,6 @@ Divider = __decorate([
 ], Divider);
 export { Divider };
 try {
-    customElements.define("sonic-divider", Divider);
+    customElements.define(tagName, Divider);
 }
 catch (e) { }

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

@@ -10,6 +10,7 @@ declare const Checkbox_base: {
         radio: true | null;
         _checked: true | null;
         checked: true | null;
+        validateFormElement(): void;
         setCheckedValue(checked: true | null): void;
         handleChange(): void;
         getValueForFormPublisher(): any;
@@ -87,26 +88,6 @@ declare const Checkbox_base: {
         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;

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

@@ -32,6 +32,7 @@ import "@supersoniks/concorde/core/components/ui/icon/icon";
  * * 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.
  */
+const tagName = "sonic-checkbox";
 let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscriber(LitElement)))) {
     constructor() {
         super(...arguments);
@@ -63,7 +64,7 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
               autofocus=${ifDefined(this.autofocus)}
               
            />
-            <sonic-icon prefix="iconoir"
+            <sonic-icon 
             name="${this.iconName}" class="sc-input-icon"></sonic-icon>
           </span>
           <div class="checkbox-text">
@@ -192,11 +193,11 @@ __decorate([
     property({ type: Boolean })
 ], Checkbox.prototype, "hasDescription", void 0);
 Checkbox = __decorate([
-    customElement("sonic-checkbox")
+    customElement(tagName)
 ], Checkbox);
 export { Checkbox };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-checkbox", Checkbox);
+    customElements.define(tagName, Checkbox);
 }
 catch (e) { }

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

@@ -8,6 +8,7 @@ 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";
+const tagName = "sonic-fieldset";
 let Fieldset = class Fieldset extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
@@ -31,7 +32,7 @@ Fieldset.styles = [
     css `
       :host {
         --sc-fieldset-mt: 0;
-        --sc-fieldset-mb: 2rem;
+        --sc-fieldset-mb: 1rem;
         --sc-fieldset-border-color: var(--sc-base-200);
         --sc-fieldset-border-width: var(--sc-form-border-width);
 
@@ -47,6 +48,7 @@ Fieldset.styles = [
         all: unset;
         display: contents;
       }
+      
       ::slotted(sonic-legend) {
         margin-bottom: 1.5rem;
         display: block;
@@ -60,11 +62,11 @@ __decorate([
     property({ type: String })
 ], Fieldset.prototype, "form", void 0);
 Fieldset = __decorate([
-    customElement("sonic-fieldset")
+    customElement(tagName)
 ], Fieldset);
 export { Fieldset };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-fieldset", Fieldset);
+    customElements.define(tagName, Fieldset);
 }
 catch (e) { }

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

@@ -4,7 +4,8 @@ export declare class Legend extends LitElement {
     static styles: import("lit").CSSResult[];
     description: string;
     label: string;
-    iconName: string;
-    iconPrefix: string;
+    iconName?: string;
+    iconPrefix?: string;
+    iconLibray?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -7,33 +7,39 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/form/fieldset/legend-description";
+import { ifDefined } from "lit/directives/if-defined.js";
+const tagName = "sonic-legend";
 let Legend = class Legend extends LitElement {
     constructor() {
         super(...arguments);
         this.description = "";
         this.label = "";
-        this.iconName = "";
-        this.iconPrefix = "";
     }
     render() {
         return html `<legend part="legend">
-    
-                  ${this.iconName ? html `<div class="icon"><sonic-icon name=${this.iconName} prefix=${this.iconPrefix}></sonic-icon></div>` : ""}
+      ${this.iconName
+            ? html `<div class="icon">
+            <sonic-icon 
+            name=${this.iconName} 
+            prefix=${ifDefined(this.iconPrefix)}
+            library=${ifDefined(this.iconLibray)}></sonic-icon>
+          </div>`
+            : ""}
 
-                  <div class="legend-content">
-                    ${this.label}
-                    ${this.description ? html `<sonic-legend-description>${this.description}</sonic-legend-description>` : ""}
-                    <slot></slot>
-                  </div>
-                  <slot name="suffix"></slot>
-                </legend>`;
+      <div class="legend-content">
+        ${this.label}
+        ${this.description ? html `<sonic-legend-description>${this.description}</sonic-legend-description>` : ""}
+        <slot></slot>
+      </div>
+      <slot name="suffix"></slot>
+    </legend>`;
     }
 };
 Legend.styles = [
     css `
       :host {
-        --sc-legend-font-size: 1.875rem;
-        --sc-legend-font-weight: var(--sc-headings-font-weight);
+        --sc-legend-font-size: 1.75rem;
+        --sc-legend-font-weight: var(--sc-font-weight-base);
         --sc-legend-font-style: var(--sc-headings-font-style);
         --sc-legend-family: var(--sc-headings-font-family);
         --sc-legend-line-height: var(--sc-headings-line-height);
@@ -77,12 +83,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Legend.prototype, "iconPrefix", void 0);
+__decorate([
+    property({ type: String })
+], Legend.prototype, "iconLibray", void 0);
 Legend = __decorate([
-    customElement("sonic-legend")
+    customElement(tagName)
 ], Legend);
 export { Legend };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-legend", Legend);
+    customElements.define(tagName, Legend);
 }
 catch (e) { }

package/core/components/ui/form/form-actions/form-actions.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from "lit";
+export declare class FormActions extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/core/components/ui/form/{form-layout → form-actions}/form-actions.js

@@ -4,20 +4,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 } from "lit";
+import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
-let FormActions = class FormActions extends Subscriber(LitElement) {
+const tagName = "sonic-form-actions";
+let FormActions = class FormActions extends LitElement {
     render() {
         return html `<slot></slot>`;
     }
 };
+FormActions.styles = [
+    css `
+      :host{
+        display:flex;
+        gap:.3rem;
+      }
+    `
+];
 FormActions = __decorate([
-    customElement("sonic-form-actions")
+    customElement(tagName)
 ], FormActions);
 export { FormActions };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-form-actions", FormActions);
+    customElements.define(tagName, FormActions);
 }
 catch (e) { }

package/core/components/ui/form/form-layout/form-layout.js

@@ -8,6 +8,7 @@ import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ResizeController } from "@lit-labs/observers/resize_controller.js";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+const tagName = "sonic-form-layout";
 let FormLayout = class FormLayout extends Subscriber(LitElement) {
     constructor() {
         super(...arguments);
@@ -48,11 +49,11 @@ FormLayout.styles = [
     `,
 ];
 FormLayout = __decorate([
-    customElement("sonic-form-layout")
+    customElement(tagName)
 ], FormLayout);
 export { FormLayout };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-form-layout", FormLayout);
+    customElements.define(tagName, FormLayout);
 }
 catch (e) { }

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

@@ -35,6 +35,9 @@ declare const Input_base: {
         removeAttribute(name: string): void;
         initPublisher(): void;
         getApiConfiguration(): import("../../../../utils/api").APIConfiguration;
+        /**
+         * Taille du composant, implique notamment des modifications de typo et de marge interne
+         */
         connectedCallback(): void;
         requestUpdate(): void;
         getAttribute(name: string): string;
@@ -42,16 +45,6 @@ declare const Input_base: {
         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-input étend les mixins 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 l'on édite 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.
- */
 export declare class Input extends Input_base {
     static styles: import("lit").CSSResult[];
     /**

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

@@ -22,6 +22,7 @@ import { classMap } from "lit/directives/class-map.js";
  * **FormInput :**
  * Uniquement des propriétés classiques d'un input HTML.
  */
+const tagName = "sonic-input";
 let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     constructor() {
         super(...arguments);
@@ -170,11 +171,11 @@ __decorate([
     state()
 ], Input.prototype, "hasPrefix", void 0);
 Input = __decorate([
-    customElement("sonic-input")
+    customElement(tagName)
 ], Input);
 export { Input };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-input", Input);
+    customElements.define(tagName, Input);
 }
 catch (e) { }

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

@@ -1,10 +1,4 @@
 import { Checkbox } from "../checkbox/checkbox";
-/**
- * ### Le composant sonic-radio étend sonic-checkbox en assignant sa propriété radio à true.
- *
- * * Le type d'input html utilisé passe également de checkbox à radio.
- * * Le comportement est donc similaire à un bouton radio classique mais avec les fonctionnalités de sonic-checkbox (ie : Subscriber / FormElement / FormCheckable).
- */
 export declare class Radio extends Checkbox {
     static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
     constructor();

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

@@ -13,6 +13,7 @@ import { Checkbox } from "../checkbox/checkbox";
  * * Le type d'input html utilisé passe également de checkbox à radio.
  * * Le comportement est donc similaire à un bouton radio classique mais avec les fonctionnalités de sonic-checkbox (ie : Subscriber / FormElement / FormCheckable).
  */
+const tagName = "sonic-radio";
 let Radio = class Radio extends Checkbox {
     constructor() {
         super();
@@ -45,11 +46,11 @@ Radio.styles = [
     `,
 ];
 Radio = __decorate([
-    customElement("sonic-radio")
+    customElement(tagName)
 ], Radio);
 export { Radio };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-radio", Radio);
+    customElements.define(tagName, Radio);
 }
 catch (e) { }

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

@@ -1,13 +1,6 @@
 import { LitElement } from "lit";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 declare const Select_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
-/**
- * #### 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 l'on édite 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.
- */
 export declare class Select extends Select_base {
     static styles: import("lit").CSSResult[];
     valueKey: string;

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

@@ -21,6 +21,7 @@ import "@supersoniks/concorde/core/components/ui/icon/icon";
  * * 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.
  */
+const tagName = "sonic-select";
 let Select = class Select extends FormElement(Subscriber(LitElement)) {
     constructor() {
         super(...arguments);
@@ -131,7 +132,7 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         })}
             <slot></slot>
           </select>
-          <sonic-icon prefix="iconoir" name="nav-arrow-down" size="${this.size}"></sonic-icon>
+          <sonic-icon  name="nav-arrow-down" size="${this.size}"></sonic-icon>
         </div>
         <slot name="suffix" @slotchange=${this.onSlotChange}></slot>
       </div>
@@ -222,11 +223,11 @@ __decorate([
     state()
 ], Select.prototype, "hasPrefix", void 0);
 Select = __decorate([
-    customElement("sonic-select")
+    customElement(tagName)
 ], Select);
 export { Select };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-select", Select);
+    customElements.define(tagName, Select);
 }
 catch (e) { }

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

@@ -11,6 +11,7 @@ import { formControl } from "../css/form-control";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import FormElement from "@supersoniks/concorde/core/mixins/FormElement";
 import FormInput from "@supersoniks/concorde/core/mixins/FormInput";
+const tagName = "sonic-textarea";
 let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElement))) {
     constructor() {
         super(...arguments);
@@ -155,6 +156,11 @@ __decorate([
     property()
 ], Textarea.prototype, "slotClasses", void 0);
 Textarea = __decorate([
-    customElement("sonic-textarea")
+    customElement(tagName)
 ], Textarea);
 export { Textarea };
+//Ajout pour Storybook
+try {
+    customElements.define(tagName, Textarea);
+}
+catch (e) { }

package/core/components/ui/group/group.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
+const tagName = "sonic-group";
 let Group = class Group extends LitElement {
     updated() {
         const children = this.querySelectorAll("sonic-input, sonic-button");
@@ -48,10 +49,10 @@ Group.styles = [
     `,
 ];
 Group = __decorate([
-    customElement("sonic-group")
+    customElement(tagName)
 ], Group);
 export { Group };
 try {
-    customElements.define("sonic-group", Group);
+    customElements.define(tagName, Group);
 }
 catch (e) { }

package/core/components/ui/icon/icon.d.ts

@@ -1,8 +1,4 @@
 import { LitElement } from "lit";
-/**
- * Afficher l'icone choisie parmis une liste prédéfinie dans icons.json
- * les tailles suivantes sont disponible via l'attribut *size* : 2xs,xs,sm,"",lg,xl,2xl
- */
 export declare class Icon extends LitElement {
     static styles: import("lit").CSSResult;
     updateIcon(): Promise<void>;