@supersoniks/concorde 1.1.42 → 1.1.43

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

@@ -1,4 +1,4 @@
-import { LitElement, CSSResultGroup } from "lit";
+import { LitElement, CSSResultGroup, PropertyValues } from "lit";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 declare const Checkbox_base: {
     new (...args: any[]): {
@@ -7,22 +7,32 @@ declare const Checkbox_base: {
         forceAutoFill: boolean;
         unique: true | null;
         radio: true | null;
-        _checked: true | null;
-        checked: true | null;
+        unCheckOnDisconnect: boolean;
+        _checked: true | "indeterminate" | null;
+        checked: true | "indeterminate" | null;
         validateFormElement(): void;
-        setCheckedValue(checked: true | null): void;
+        checksAll(): boolean;
+        setCheckedValue(checked: true | "indeterminate" | null): void;
         handleChange(): void;
         getValueForFormPublisher(): any;
-        setFormValueFromPublisher(value: any): void;
-        initPublisher(): void;
+        setFormValueFromPublisher(value: string | (string | null)[] | null): void;
+        getCheckAllPublisher(): any;
+        updateAllChecked: () => void;
+        onChecksAllRequest: (value: string) => void;
+        disconnectedCallback(): void;
+        connectedCallback(): void;
         getFormPublisher(): any;
         updateDataValue(): void;
-        handleBlur(e?: any): void;
+        handleBlur(e?: Event | undefined): void;
+        focus?: (() => void) | undefined;
+        shadowRoot?: ShadowRoot | undefined;
         error: boolean;
         autofocus: boolean;
         required: boolean;
         disabled: true | null;
         formDataProvider: string;
+        ariaLabelledby?: string | undefined;
+        ariaLabel?: string | undefined;
         _name: string;
         name: string;
         props: any;
@@ -42,12 +52,11 @@ declare const Checkbox_base: {
         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[]): {
@@ -63,16 +72,20 @@ declare const Checkbox_base: {
         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;
+        handleChange(e?: Event | undefined): void;
+        handleBlur(e?: Event | undefined): void;
         getValueForFormPublisher(): any;
+        focus?: (() => void) | undefined;
+        shadowRoot?: ShadowRoot | undefined;
         error: boolean;
         autofocus: boolean;
         required: boolean;
         disabled: true | null;
         formDataProvider: string;
-        _value: any;
-        value: any;
+        ariaLabelledby?: string | undefined;
+        ariaLabel?: string | undefined;
+        _value: string | null;
+        value: string | null;
         _name: string;
         name: string;
         props: any;
@@ -100,15 +113,39 @@ declare const Checkbox_base: {
         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;
+} & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<any>) & 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[];
     touched: boolean;
     iconName: string;
-    slotDescriptionNodes: Array<Node>;
+    indeterminateIconName: string;
     hasDescription: boolean;
-    updated(): void;
+    hasLabel: boolean;
+    slotLabelNodes: Array<Node>;
+    slotDescriptionNodes: Array<Node>;
     connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    hasSlotOrProps(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

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

@@ -14,6 +14,7 @@ import FormCheckable from "@supersoniks/concorde/core/mixins/FormCheckable";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
+const tagName = "sonic-checkbox";
 /**
  * ### Le composent sonic-checkbox étend les mixins FormCheckable, FormInput, FormElement et Subscriber
  * **FormElement :**
@@ -34,30 +35,38 @@ import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
  * * 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);
         this.touched = false;
         this.iconName = "check";
+        this.indeterminateIconName = "minus-small";
         this.hasDescription = false;
-    }
-    updated() {
-        var _a;
-        this.hasDescription = this.description || ((_a = this.slotDescriptionNodes) === null || _a === void 0 ? void 0 : _a.length) ? true : false;
+        this.hasLabel = false;
     }
     connectedCallback() {
         this.type = "checkbox";
+        this.hasSlotOrProps();
         super.connectedCallback();
     }
+    willUpdate(changedProperties) {
+        this.hasSlotOrProps();
+        super.willUpdate(changedProperties);
+    }
+    hasSlotOrProps() {
+        var _a, _b;
+        this.hasLabel = this.label || ((_a = this.slotLabelNodes) === null || _a === void 0 ? void 0 : _a.length) ? true : false;
+        this.hasDescription = this.description || ((_b = this.slotDescriptionNodes) === null || _b === void 0 ? void 0 : _b.length) ? true : false;
+    }
     render() {
         //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
         return html `
       <label class="checkbox-container ${this.disabled ? "disabled" : ""}">
+
         <span class="icon-container">
           <input
             type="${this.type}"
-            @change=${this.handleChange}
+            @click=${this.handleChange}
             @blur=${this.handleBlur}
             ?required=${this.required}
             .disabled=${ifDefined(this.disabled)}
@@ -65,16 +74,20 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
             .name=${this.name}
             .value=${this.value}
             ?autofocus=${this.autofocus}
+            aria-label=${ifDefined(this.ariaLabel)}
+            aria-labelledby=${ifDefined(this.ariaLabelledby)}
           />
-          <sonic-icon name="${this.iconName}" class="sc-input-icon"></sonic-icon>
+          <sonic-icon name="${this.checked == "indeterminate" ? this.indeterminateIconName : this.iconName}" class="sc-input-icon"></sonic-icon>
         </span>
-        <div class="checkbox-text">
-          ${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}
-          <slot></slot>
-          <slot name="description" class="${this.hasDescription ? "description" : "hidden"} ">
-            ${this.description ? html `${unsafeHTML(this.description)}` : ""}
-          </slot>
-        </div>
+
+        <div class="checkbox-text ${!this.hasDescription && !this.hasLabel ? "hidden" : "checkbox-text"}">
+            ${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}
+            <slot @slotchange=${this.hasSlotOrProps}></slot>
+            <slot @slotchange=${this.hasSlotOrProps} name="description" class="${this.hasDescription ? "description" : "hidden"} ">
+              ${this.description ? html `${unsafeHTML(this.description)}` : ""}
+            </slot>
+          </div>
+        </label>
       </label>
     `;
     }
@@ -84,7 +97,9 @@ Checkbox.styles = [
     css `
       :host {
         --sc-checkbox-border-width: var(--sc-form-border-width);
-        --sc-checkbox-border-color: transparent;
+        --sc-checkbox-border-color: var(--sc-input-border-color);
+        --sc-checkbox-bg: var(--sc-input-bg);
+        --sc-checkbox-color: transparent;
       }
 
       * {
@@ -118,7 +133,7 @@ Checkbox.styles = [
         transition: 0.2s;
         outline: none;
         margin: 0;
-        background-color: var(--sc-base-200);
+        background-color: var(--sc-checkbox-bg);
         border: var(--sc-checkbox-border-width) solid var(--sc-checkbox-border-color);
       }
 
@@ -138,7 +153,7 @@ Checkbox.styles = [
         left: 50%;
         transform: translateX(-50%) translateY(-50%) scale(0);
         transition: transform 0.2s ease-in-out;
-        color: var(--sc-primary-content);
+        color: var(--sc-checkbox-color);
       }
 
       /* .checkbox-text {
@@ -154,12 +169,13 @@ Checkbox.styles = [
 
       /*Active */
       input:checked,
-      input[checked="true"] {
-        background: var(--sc-primary);
+      input[checked] {
+        --sc-checkbox-border-color: var(--sc-primary);
+        --sc-checkbox-bg: var(--sc-primary);
       }
-
       input:checked + sonic-icon,
-      input[checked="true"] + sonic-icon {
+      input[checked] + sonic-icon {
+        --sc-checkbox-color: var(--sc-primary-content);
         transform: translateX(-50%) translateY(-50%) scale(1);
       }
       /*DISABLED */
@@ -174,6 +190,11 @@ Checkbox.styles = [
         opacity: 0.6;
       }
 
+      /*INPUT HOVER*/
+      :host(:not([disabled])) label:hover input {
+        filter: brightness(0.97);
+      }
+
       ::slotted(a) {
         color: inherit;
         text-decoration: underline !important;
@@ -205,17 +226,21 @@ __decorate([
     property({ type: String })
 ], Checkbox.prototype, "iconName", void 0);
 __decorate([
-    queryAssignedNodes({ slot: "description" })
-], Checkbox.prototype, "slotDescriptionNodes", void 0);
+    property({ type: String })
+], Checkbox.prototype, "indeterminateIconName", void 0);
 __decorate([
     property({ type: Boolean })
 ], Checkbox.prototype, "hasDescription", void 0);
+__decorate([
+    property({ type: Boolean })
+], Checkbox.prototype, "hasLabel", void 0);
+__decorate([
+    queryAssignedNodes()
+], Checkbox.prototype, "slotLabelNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: "description" })
+], Checkbox.prototype, "slotDescriptionNodes", void 0);
 Checkbox = __decorate([
     customElement(tagName)
 ], Checkbox);
 export { Checkbox };
-//Ajout pour Storybook
-try {
-    customElements.define(tagName, Checkbox);
-}
-catch (e) { }

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

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

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

@@ -1,35 +1,51 @@
 import { css } from "lit";
+export const label = css `
+  :host {
+    --sc-label-fs: var(--sc-fs, 1rem);
+    --sc-label-fw: var(--sc-label-font-weight);
+  }
+  label {
+    font-size: var(--sc-label-fs);
+    font-weight: var(--sc-label-fw);
+    line-height: 1.2;
+  }
+  .form-label {
+    margin-bottom: 0.22em;
+    display: block;
+  }
+`;
+export const description = css `
+  .form-description {
+    color: var(--sc-base-400);
+    font-size: 0.85em;
+    margin-top: 0.2em;
+    display: block;
+  }
+`;
 export const formControl = css `
-
   * {
     box-sizing: border-box;
   }
 
   :host {
     --sc-input-height: var(--sc-form-height);
-    --sc-input-border-width: var(--sc-form-border-width);
-    --sc-input-color: var(--sc-base-content);
+    --sc-input-c: var(--sc-input-color, var(--sc-base-content));
+    --sc-input-b-width: var(--sc-form-border-width);
+    --sc-input-b-color: var(--sc-input-border-color);
 
     --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.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-input-py: 0.55em;
+    --sc-input-px: clamp(0.3em, 8%, 1.1em);
 
-    --sc-label-fs: var(--sc-fs, 1rem);
-    --sc-label-fw: var(--sc-label-font-weight);
+    --sc-input-background: var(--sc-input-bg);
+    --sc-input-addon-c: var(--sc-input-addon-color, var(--sc-base));
+    --sc-input-addon-bg: var(--sc-input-c);
   }
 
   .form-element {
@@ -38,13 +54,13 @@ export const formControl = css `
     width: 100%;
 
     line-height: 1.1;
-    color: var(--sc-input-color);
+    color: var(--sc-input-c);
     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) solid var(--sc-input-border-color, var(--sc-base-300, #aaa));
+    background-color: var(--sc-input-background);
+    border: var(--sc-input-b-width) solid var(--sc-input-b-color, var(--sc-base-300, #aaa));
     width: 100%;
     font-size: var(--sc-input-fs);
 
@@ -56,12 +72,6 @@ export const formControl = css `
     min-height: var(--sc-input-height);
   }
 
-  label {
-    font-size: var(--sc-label-fs);
-    font-weight: var(--sc-label-fw);
-    line-height: 1.2;
-  }
-
   .form-control {
     display: flex;
     width: 100%;
@@ -77,24 +87,24 @@ export const formControl = css `
     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));
+    padding-left: clamp(0.25em, 3%, calc(0.33 * var(--sc-input-px)));
+    padding-right: clamp(0.25em, 3%, calc(0.33 * 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-width) solid var(--sc-input-prefix-border-color);
-    margin-right: calc(-1 * var(--sc-input-border-width));
+    background-color: var(--sc-input-addon-bg);
+    color: var(--sc-input-addon-c);
+    /*margin-right: calc(-1 * var(--sc-input-b-width));
+    border: none;*/
   }
 
   :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-width) solid var(--sc-input-suffix-border-color);
-    margin-left: calc(-1 * var(--sc-input-border-width));
+    background-color: var(--sc-input-addon-bg);
+    color: var(--sc-input-addon-c);
+    /*margin-left: calc(-1 * var(--sc-input-b-width));
+    border: none;*/
   }
 
   :host(:not([inlineContent])) .has-prefix .form-element {
@@ -107,20 +117,62 @@ export const formControl = css `
     border-bottom-right-radius: 0;
   }
 
+  slot[name="suffix"]::slotted(sonic-icon),
+  slot[name="prefix"]::slotted(sonic-icon) {
+    font-size: 1.2em;
+  }
+
   /*InlineCONTENT */
-  :host([inlineContent]) {
-    --sc-input-py: 0;
+
+  .form-element > slot,
+  .form-element .form-element {
+    all: unset;
   }
+
   :host([inlineContent]) .form-element {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
     gap: 0.35em;
     min-height: var(--sc-form-height);
   }
 
+  :host([inlineContent]) .form-element .form-element {
+    appearance: none;
+    background: transparent;
+    border: none;
+    padding: 0;
+    display: block;
+    width: 50%;
+    min-width: 0;
+    flex: 1 1 auto;
+    height: auto;
+    min-height: auto;
+    border-radius: 0;
+  }
+  :host([inlineContent]) slot[name="prefix"]::slotted(*),
+  :host([inlineContent]) slot[name="suffix"]::slotted(*) {
+    display: block;
+    flex: 0 0 auto;
+    max-width: 100%;
+    max-width: 100%;
+  }
+
+  :host([inlineContent]) .has-suffix slot[name="suffix"] {
+    margin-right: calc(-0.5 * var(--sc-input-px));
+  }
+  :host([inlineContent]) .has-prefix slot[name="prefix"] {
+    margin-left: calc(-0.5 * var(--sc-input-px));
+  }
+
+  :host([inlineContent]) slot[name="suffix"]::slotted(*) {
+    margin-left: auto;
+  }
+
+  /* :host([inlineContent]) .input {
+
+  }*/
   /*Disabled */
-  :host([disabled]) .form-element-container {
+  :host([disabled]) .form-control {
     cursor: not-allowed;
   }
 
@@ -131,9 +183,12 @@ export const formControl = css `
   /*Disbaled*/
   :host([disabled]) .form-element {
     pointer-events: none;
-    background-color: var(--sc-base-100);
-    border-color: transparent;
-    color: var(--sc-base-400);
+    opacity: 0.5;
+    /* border-color: transparent;*/
+  }
+  :host([disabled]) .select-chevron {
+    display: none;
+    /* border-color: transparent;*/
   }
 
   /*PLACEHOLDER*/
@@ -142,8 +197,12 @@ export const formControl = css `
     opacity: 0.45;
   }
 
+  :host([placehoderAsLabel]) ::placeholder {
+    opacity: 1;
+  }
+
   :focus::placeholder {
-    opacity: 0;
+    opacity: 0 !important;
   }
 
   /*HOVER*/
@@ -166,11 +225,6 @@ export const formControl = css `
     display: block;
   }
 
-  .form-element > slot,
-  .form-element .form-element {
-    all: unset !important;
-  }
-
   /*Utilitaires*/
   .hidden {
     display: none;
@@ -179,33 +233,32 @@ export const formControl = css `
     display: contents;
   }
 
-
   /*ERROR*/
   :host([error]) {
-    --sc-input-border-color: var(--sc-danger);
+    --sc-input-b-color: var(--sc-danger);
   }
 
-  :host input:visited{
-    display:none;
+  :host input:visited {
+    display: none;
   }
 
   :host([touched][required]) :not(:focus):invalid {
-    --sc-input-border-color: var(--sc-danger);
-    --sc-input-color: var(--sc-danger);
+    --sc-input-b-color: var(--sc-danger);
+    --sc-input-c: var(--sc-danger);
   }
 
-  :host([touched][required]) :not(:focus):invalid + .select-chevron{
-    --sc-input-color: var(--sc-danger);
+  :host([touched][required]) :not(:focus):invalid + .select-chevron {
+    --sc-input-c: var(--sc-danger);
   }
 
   /*VALID*/
   :host([touched][required]) :not([value=""]):not(:focus):valid {
-    --sc-input-border-color: var(--sc-success);
-    --sc-input-color: var(--sc-success);
+    --sc-input-b-color: var(--sc-success);
+    --sc-input-c: var(--sc-success);
   }
 
-  :host([touched][required]) :not(:focus):valid + .select-chevron{
-    --sc-input-color: var(--sc-success);
+  :host([touched][required]) :not(:focus):valid + .select-chevron {
+    --sc-input-c: var(--sc-success);
   }
 
   /*Input COLOR*/
@@ -220,13 +273,13 @@ export const formControl = css `
   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);
+      var(--sc-item-rounded-bl);
   }
 
   /*Input Image*/
   :host([type="image"]) .form-element {
     padding: 0;
-    border:none;
+    border: none;
   }
 
   /*Input reset & image*/
@@ -236,14 +289,39 @@ export const formControl = css `
   }
 
   /*Input search*/
+  :host([type="search"]) {
+    appearance: none !important;
+  }
+
   input[type="search"]::-webkit-search-cancel-button {
-    appearance:none;
-    cursor:pointer;
-    height: .65em;
-    width: .65em;
+    appearance: none;
+    cursor: pointer;
+    height: 0.65em;
+    width: 0.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;
-   }
+  }
 
+  /* Text align */
+  :host([align="center"]) .form-element {
+    text-align: center;
+  }
+  :host([align="left"]) .form-element {
+    text-align: left;
+  }
+  :host([align="right"]) .form-element {
+    text-align: right;
+  }
+
+  /* No arrows ion input Number */
+  :host([noAppearance]) input[type="number"]::-webkit-outer-spin-button,
+  :host([noAppearance]) input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  :host([noAppearance]) input[type="number"] {
+    -moz-appearance: textfield !important;
+  }
 `;

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

@@ -1,5 +1,6 @@
 import { LitElement } from "lit";
-declare const Fieldset_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
+import "./legend";
+declare const Fieldset_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<any>) & typeof LitElement;
 export declare class Fieldset extends Fieldset_base {
     static styles: import("lit").CSSResult[];
     /**
@@ -10,6 +11,12 @@ export declare class Fieldset extends Fieldset_base {
      * Lier à un formulaire qui ne serait pas parent du fieldset
      */
     form?: string;
+    label?: string;
+    description?: string;
+    iconName?: string;
+    iconLibrary?: string;
+    iconPrefix?: string;
+    variant: "default" | "ghost" | "shadow";
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};