@supersoniks/concorde 1.1.27 → 1.1.30

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

@@ -1,19 +1,21 @@
 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-width: var(--sc-form-border-width, 0.1rem);
-    --sc-input-color: var(--sc-base-content, #1f2937);
+    --sc-input-height: var(--sc-form-height);
+    --sc-input-border-width: var(--sc-form-border-width);
+    --sc-input-color: var(--sc-base-content);
 
-    --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-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-ff: inherit;
     --sc-input-py: 0.6em;
     --sc-input-px: 1.15em;
@@ -25,8 +27,9 @@ export const formControl = css `
     --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);
-    --sc-label-fw: normal;
+
+    --sc-label-fs: var(--sc-fs, 1rem);
+    --sc-label-fw: var(--sc-label-font-weight);
   }
 
   .form-element {
@@ -112,7 +115,8 @@ export const formControl = css `
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0.2em;
+    gap: 0.35em;
+    min-height: var(--sc-form-height);
   }
 
   /*Disabled */
@@ -120,27 +124,10 @@ export const formControl = css `
     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;
   }
 
- 
-
   /*Disbaled*/
   :host([disabled]) .form-element {
     pointer-events: none;
@@ -202,23 +189,61 @@ export const formControl = css `
     display:none;
   }
 
-  :host([touched]) :not(:focus):invalid {
+  :host([touched][required]) :not(:focus):invalid {
     --sc-input-border-color: var(--sc-danger);
     --sc-input-color: var(--sc-danger);
   }
 
-  :host([touched]) :not(:focus):invalid + .select-chevron{
+  :host([touched][required]) :not(:focus):invalid + .select-chevron{
     --sc-input-color: var(--sc-danger);
   }
 
   /*VALID*/
-  :host([touched]) :not([value=""]):not(:focus):valid {
+  :host([touched][required]) :not([value=""]):not(:focus):valid {
     --sc-input-border-color: var(--sc-success);
     --sc-input-color: var(--sc-success);
   }
 
-  :host([touched]) :not(:focus):valid + .select-chevron{
+  :host([touched][required]) :not(:focus):valid + .select-chevron{
     --sc-input-color: var(--sc-success);
   }
 
+  /*Input COLOR*/
+  :host([type="color"]) .form-element {
+    padding: 0;
+    border: 0;
+    min-width: var(--sc-input-height);
+  }
+  input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  input[type="color"]::-webkit-color-swatch {
+    border: none;
+    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
+    var(--sc-item-rounded-bl);
+  }
+
+  /*Input Image*/
+  :host([type="image"]) .form-element {
+    padding: 0;
+    border:none;
+  }
+
+  /*Input reset & image*/
+  input[type="reset"],
+  input[type="submit"] {
+    cursor: pointer;
+  }
+
+  /*Input search*/
+  input[type="search"]::-webkit-search-cancel-button {
+    appearance:none;
+    cursor:pointer;
+    height: .65em;
+    width: .65em;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);
+    background-size: contain;
+    background-repeat: no-repeat;
+   }
+
 `;

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

@@ -3,16 +3,17 @@ declare const Input_base: {
     new (...args: any[]): {
         validateFormElement(): void;
         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;
+        tabindex?: number | undefined;
+        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" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: any): void;
+        handleBlur(e?: any): void;
         getValueForFormPublisher(): any;
-        error: true | null;
-        autofocus: true | null;
+        error: boolean;
+        autofocus: boolean;
+        required: boolean;
         disabled: true | null;
-        required: true | null;
         formDataProvider: string;
         _value: any;
         value: any;
@@ -47,29 +48,32 @@ export declare class Input extends Input_base {
     /**
      * Taille du composant, implique notamment des modifications de typo et de marge interne
      */
-    size: "" | "xs" | "sm" | "lg";
-    list: "" | null;
-    placeholder: string;
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    list?: string;
+    placeholder?: string;
+    pattern?: string;
+    min?: string;
+    max?: string;
     readonly: boolean;
-    pattern: string | null;
-    min: string | null;
-    max: string | null;
-    step: string | null;
-    minlength: string | null;
-    maxlength: string | null;
-    label: string;
-    description: string;
+    step?: number;
+    minlength?: number;
+    maxlength?: number;
+    src?: string;
+    label?: string;
+    description?: string;
     inlineContent: boolean;
     slotLabelNodes: Array<Node>;
     slotDescriptionNodes: Array<Node>;
     slotSuffixNodes: Array<Node>;
     slotPrefixNodes: Array<Node>;
-    hasDescription: true | false;
-    hasLabel: true | false;
-    hasSuffix: true | false;
-    hasPrefix: true | false;
+    input: HTMLInputElement;
+    hasDescription: boolean;
+    hasLabel: boolean;
+    hasSuffix: boolean;
+    hasPrefix: boolean;
     updated(): void;
     onSlotChange(): void;
+    inlineContentFocus(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -6,12 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from "lit";
 import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
+import { query } from 'lit/decorators/query.js';
 import { ifDefined } from "lit/directives/if-defined.js";
 import { formControl } from "@supersoniks/concorde/core/components/ui/form/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";
 import { classMap } from "lit/directives/class-map.js";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 /**
  * ### Le composent sonic-input étend les mixins FormInput, FormElement et Subscriber
  * **FormElement :**
@@ -26,25 +28,7 @@ const tagName = "sonic-input";
 let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     constructor() {
         super(...arguments);
-        /**
-         * Taille du composant, implique notamment des modifications de typo et de marge interne
-         */
-        this.size = "";
-        this.list = null;
-        this.placeholder = "";
         this.readonly = false;
-        this.pattern = null;
-        this.min = null;
-        this.max = null;
-        this.step = null;
-        this.minlength = null;
-        this.maxlength = null;
-        /*
-         * TODO
-         * Mutualiser avec le composant select
-         */
-        this.label = "";
-        this.description = "";
         this.inlineContent = false;
         this.hasDescription = false;
         this.hasLabel = false;
@@ -61,6 +45,13 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     onSlotChange() {
         this.requestUpdate();
     }
+    inlineContentFocus() {
+        var _a;
+        if (!this.inlineContent)
+            return;
+        console.log('oypouaze');
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
         const slotClasses = {
             "has-prefix": this.hasPrefix,
@@ -71,31 +62,33 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         >${this.label ? this.label : ""}<slot name="label" @slotchange=${this.onSlotChange}></slot
       ></label>
 
-      <div class="form-control ${classMap(slotClasses)}">
+      <div @click=${this.inlineContentFocus} class="form-control ${classMap(slotClasses)}">
         <div class=" ${this.inlineContent ? "form-element form-element-wrapper" : "contents"}">
           <slot name="prefix" @slotchange=${this.onSlotChange}></slot>
           <input
             id="form-element"
             part="input"
             class="form-element input"
-            type=${this.type}
             @input=${this.handleChange}
-            ?disabled=${this.disabled}
+            @blur=${this.handleBlur}
+            type=${this.type}
+            disabled=${ifDefined(this.disabled)}
             ?readonly=${this.readonly}
+            ?autofocus=${this.autofocus}
             list=${ifDefined(this.list)}
-            autofocus=${ifDefined(this.autofocus)}
-            required=${ifDefined(this.required)}
             tabindex=${ifDefined(this.tabindex)}
             pattern=${ifDefined(this.pattern)}
             min=${ifDefined(this.min)}
             max=${ifDefined(this.max)}
             step=${ifDefined(this.step)}
+            src=${ifDefined(this.src)}
             minlength=${ifDefined(this.minlength)}
             maxlength=${ifDefined(this.maxlength)}
-            placeholder="${this.placeholder}"
+            placeholder=${ifDefined(this.placeholder)}
+            required=${ifDefined(this.required)}
+            autocomplete=${ifDefined(this.autocomplete)}
             .name=${this.name}
             .value=${this.value}
-            autocomplete=${ifDefined(this.autocomplete)}
           />
           <slot name="suffix" @slotchange=${this.onSlotChange}></slot>
         </div>
@@ -106,9 +99,12 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
     `;
     }
 };
-Input.styles = [formControl];
+Input.styles = [
+    fontSize,
+    formControl
+];
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], Input.prototype, "size", void 0);
 __decorate([
     property({ type: String })
@@ -116,9 +112,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Input.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean })
-], Input.prototype, "readonly", void 0);
 __decorate([
     property({ type: String })
 ], Input.prototype, "pattern", void 0);
@@ -129,14 +122,20 @@ __decorate([
     property({ type: String })
 ], Input.prototype, "max", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Boolean })
+], Input.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Number })
 ], Input.prototype, "step", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], Input.prototype, "minlength", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], Input.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: String })
+], Input.prototype, "src", void 0);
 __decorate([
     property({ type: String })
 ], Input.prototype, "label", void 0);
@@ -158,6 +157,9 @@ __decorate([
 __decorate([
     queryAssignedNodes({ slot: "prefix" })
 ], Input.prototype, "slotPrefixNodes", void 0);
+__decorate([
+    query('input')
+], Input.prototype, "input", void 0);
 __decorate([
     state()
 ], Input.prototype, "hasDescription", void 0);

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

@@ -17,9 +17,9 @@ const tagName = "sonic-radio";
 let Radio = class Radio extends Checkbox {
     constructor() {
         super();
+        this.radio = true;
     }
     connectedCallback() {
-        this.radio = true;
         // this.iconName = "circle-small";
         // this.iconPrefix = "solid";
         super.connectedCallback();
@@ -32,7 +32,6 @@ Radio.styles = [
       :host input {
         border-radius: 50%;
       }
-
       :host sonic-icon {
         border-radius: 50%;
         overflow: hidden;

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

@@ -5,9 +5,9 @@ export declare class Select extends Select_base {
     static styles: import("lit").CSSResult[];
     valueKey: string;
     wordingKey: string;
-    multiple: null;
-    size: "" | "xs" | "sm" | "lg";
-    selectSize: string | null;
+    multiple: boolean;
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    selectSize?: number;
     private _options;
     set options(value: Array<any>);
     get options(): Array<any>;
@@ -15,16 +15,16 @@ export declare class Select extends Select_base {
     get value(): string;
     set value(value: string);
     connectedCallback(): void;
-    label: string;
-    description: string;
+    label?: string;
+    description?: string;
     slotLabelNodes: Array<Node>;
     slotDescriptionNodes: Array<Node>;
     slotSuffixNodes: Array<Node>;
     slotPrefixNodes: Array<Node>;
-    hasDescription: true | false;
-    hasLabel: true | false;
-    hasSuffix: true | false;
-    hasPrefix: true | false;
+    hasDescription: boolean;
+    hasLabel: boolean;
+    hasSuffix: boolean;
+    hasPrefix: boolean;
     updated(): void;
     onSlotChange(): void;
     validateFormElement(): void;

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

@@ -27,17 +27,9 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         super(...arguments);
         this.valueKey = "value";
         this.wordingKey = "wording";
-        this.multiple = null;
-        this.size = "";
-        this.selectSize = null;
+        this.multiple = false;
         this._options = [];
         this._value = "";
-        /*
-         * TODO
-         * Mutualiser avec le composant select
-         */
-        this.label = "";
-        this.description = "";
         this.hasDescription = false;
         this.hasLabel = false;
         this.hasSuffix = false;
@@ -117,10 +109,12 @@ let Select = class Select extends FormElement(Subscriber(LitElement)) {
         <div class="form-select-wrapper">
           <select
             @change=${this.handleChange}
-            disabled=${ifDefined(this.multiple)}
+            @blur=${this.handleBlur}
+            disabled=${ifDefined(this.disabled)}
+            ?required=${this.required}
+            ?multiple=${this.multiple}
             size=${ifDefined(this.selectSize)}
-            autofocus=${ifDefined(this.autofocus)}
-            required=${ifDefined(this.required)}
+            ?autofocus=${this.autofocus}
             .value="${this.value}"
             class="form-element"
           >
@@ -182,10 +176,10 @@ __decorate([
     property({ type: Boolean })
 ], Select.prototype, "multiple", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], Select.prototype, "size", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], Select.prototype, "selectSize", void 0);
 __decorate([
     property({ type: Array })

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

@@ -3,16 +3,17 @@ declare const Textarea_base: {
     new (...args: any[]): {
         validateFormElement(): void;
         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;
+        tabindex?: number | undefined;
+        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" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: any): void;
+        handleBlur(e?: any): void;
         getValueForFormPublisher(): any;
-        error: true | null;
-        autofocus: true | null;
+        error: boolean;
+        autofocus: boolean;
+        required: boolean;
         disabled: true | null;
-        required: true | null;
         formDataProvider: string;
         _value: any;
         value: any;
@@ -45,23 +46,23 @@ declare const Textarea_base: {
 export declare class Textarea extends Textarea_base {
     static styles: import("lit").CSSResult[];
     size: "" | "xs" | "sm" | "lg";
-    rows: string;
-    cols: string;
-    maxlength: string;
-    minlength: string;
-    wrap: "hard" | "soft" | null;
-    readonly: boolean | null;
-    placeholder: string;
-    label: string;
-    description: string;
+    rows?: number;
+    cols?: number;
+    maxlength?: number;
+    minlength?: number;
+    wrap?: "hard" | "soft";
+    readonly: boolean;
+    placeholder?: string;
+    label?: string;
+    description?: string;
     slotLabelNodes: Array<Node>;
     slotDescriptionNodes: Array<Node>;
     slotSuffixNodes: Array<Node>;
     slotPrefixNodes: Array<Node>;
-    hasDescription: true | false;
-    hasLabel: true | false;
-    hasSuffix: true | false;
-    hasPrefix: true | false;
+    hasDescription: boolean;
+    hasLabel: boolean;
+    hasSuffix: boolean;
+    hasPrefix: boolean;
     slotClasses: {};
     updated(): void;
     onSlotChange(): void;

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

@@ -20,19 +20,7 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
         // type: "" | "primary" | "warning" | "danger" | "success" | "info" = "";
         // @property({ type: String }) variant: "" | "ghost" | "outline" = "";
         this.size = "";
-        this.rows = "";
-        this.cols = "";
-        this.maxlength = "";
-        this.minlength = "";
-        this.wrap = null;
-        this.readonly = null;
-        this.placeholder = "";
-        /*
-         * TODO
-         * Mutualiser avec le composant select
-         */
-        this.label = "";
-        this.description = "";
+        this.readonly = false;
         this.hasDescription = false;
         this.hasLabel = false;
         this.hasSuffix = false;
@@ -67,21 +55,22 @@ let Textarea = class Textarea extends FormInput(FormElement(Subscriber(LitElemen
       <div class="form-control">
         <textarea
           @input=${this.handleChange}
-          ?disabled=${this.disabled}
+          @blur=${this.handleBlur}
+          disabled=${ifDefined(this.disabled)}
           ?required=${this.required}
-          autocomplete=${ifDefined(this.autocomplete)}
-          autofocus=${ifDefined(this.autofocus)}
+          ?autofocus=${this.autofocus}
           rows=${ifDefined(this.rows)}
           cols=${ifDefined(this.cols)}
           maxlength=${ifDefined(this.maxlength)}
           minlength=${ifDefined(this.minlength)}
           ?readonly=${this.readonly}
           spellcheck=${ifDefined(this.spellcheck)}
+          autocomplete=${ifDefined(this.autocomplete)}
+          tabindex=${ifDefined(this.tabindex)}
           wrap=${ifDefined(this.wrap)}
-          class="form-element textarea custom-scroll"
           placeholder="${this.placeholder}"
-        >
-${this.value}</textarea
+          class="form-element textarea custom-scroll"
+        >${this.value}</textarea
         >
       </div>
 
@@ -104,16 +93,16 @@ __decorate([
     property({ type: String })
 ], Textarea.prototype, "size", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], Textarea.prototype, "rows", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], Textarea.prototype, "cols", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], Textarea.prototype, "maxlength", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: Number })
 ], Textarea.prototype, "minlength", void 0);
 __decorate([
     property({ type: String })

package/core/components/ui/icon/icon.js

@@ -119,6 +119,10 @@ Icon.styles = css `
     :host([size="2xl"]) svg {
       --sc-icon-size: 2em;
     }
+
+    :host([size="3xl"]) svg {
+      --sc-icon-size: 2.8em;
+    
   `;
 __decorate([
     property({ type: String })

package/core/components/ui/icon/icons.js

@@ -95,6 +95,10 @@ Icons.fontAwesomeNext = {
             if (!loadingGetPromises.has(url)) {
                 let promise = new Promise((resolve) => __awaiter(void 0, void 0, void 0, function* () {
                     let result = yield fetch(url);
+                    if (!result.ok) {
+                        resolve(`<b title="Erreur ${result.status}">😶</b>`);
+                        return;
+                    }
                     try {
                         let text = yield result.text();
                         resolve(text);

package/core/components/ui/icon/icons.json

@@ -1 +1 @@
-{}
+{ "core": { "cancel": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "check-circled-outline": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 12.5L10 15.5L17 8.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "check": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 13L9 17L19 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "emoji-puzzled": "<?xml version=\"1.0\" encoding=\"UTF-8\"?><svg width=\"24px\" height=\"24px\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" color=\"#000000\"><path d=\"M2 12c0 5.523 4.477 10 10 10s10-4.477 10-10S17.523 2 12 2\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M11.5 15.5s1.5-2 4.5-2 4.5 2 4.5 2M3 4c0-2.754 4-2.754 4 0 0 1.967-2 1.64-2 4M5 11.01l.01-.011\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M17.5 9a.5.5 0 110-1 .5.5 0 010 1zM10.5 9a.5.5 0 110-1 .5.5 0 010 1z\" fill=\"#000\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>", "info-empty": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 11.5V16.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 7.51L12.01 7.49889\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "loader": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-loader\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>", "more-horiz": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M18 12.5C18.2761 12.5 18.5 12.2761 18.5 12C18.5 11.7239 18.2761 11.5 18 11.5C17.7239 11.5 17.5 11.7239 17.5 12C17.5 12.2761 17.7239 12.5 18 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M6 12.5C6.27614 12.5 6.5 12.2761 6.5 12C6.5 11.7239 6.27614 11.5 6 11.5C5.72386 11.5 5.5 11.7239 5.5 12C5.5 12.2761 5.72386 12.5 6 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "more-vert": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 18.5C12.2761 18.5 12.5 18.2761 12.5 18C12.5 17.7239 12.2761 17.5 12 17.5C11.7239 17.5 11.5 17.7239 11.5 18C11.5 18.2761 11.7239 18.5 12 18.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6.5C12.2761 6.5 12.5 6.27614 12.5 6C12.5 5.72386 12.2761 5.5 12 5.5C11.7239 5.5 11.5 5.72386 11.5 6C11.5 6.27614 11.7239 6.5 12 6.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "nav-arrow-down": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n", "warning-circled-outline": "<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 7L12 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.01L12.01 16.9989\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n" } }

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

@@ -8,7 +8,6 @@ export declare class Image extends LitElement {
     ratio: string;
     objectPosition: string;
     imageRendering: string;
-    shadow: "" | "none" | "sm" | "md";
     cover: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }