@supersoniks/concorde 2.0.2 → 2.0.3

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, css } from "lit";
-import { customElement, property, queryAssignedElements, query } from "lit/decorators.js";
+import { customElement, property, queryAssignedNodes, query } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 const tagName = "sonic-divider";
 let Divider = class Divider extends LitElement {
@@ -15,6 +15,8 @@ let Divider = class Divider extends LitElement {
         this.align = "center";
         this.vertical = false;
         this.noMargin = false;
+        this.dashed = false;
+        this.dotted = false;
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
@@ -148,10 +150,17 @@ Divider.styles = [
       .has-text {
         gap: 0.5rem;
       }
+
+      :host([dotted]) {
+        --sc-divider-border-style: dotted;
+      }
+      :host([dashed]) {
+        --sc-divider-border-style: dashed;
+      }
     `,
 ];
 __decorate([
-    queryAssignedElements({ flatten: true })
+    queryAssignedNodes({ flatten: true })
 ], Divider.prototype, "slotNodes", void 0);
 __decorate([
     query("div")
@@ -171,6 +180,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Divider.prototype, "noMargin", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Divider.prototype, "dashed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Divider.prototype, "dotted", void 0);
 Divider = __decorate([
     customElement(tagName)
 ], Divider);

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

@@ -24,6 +24,7 @@ declare const Checkbox_base: {
         getFormPublisher(): any;
         updateDataValue(): void;
         handleBlur(e?: Event | undefined): void;
+        setValueFromPublisher(value: string | object | string[] | null | undefined): void;
         focus?: (() => void) | undefined;
         shadowRoot?: ShadowRoot | undefined;
         error: boolean;
@@ -60,10 +61,6 @@ declare const Checkbox_base: {
         getAttribute(name: string): string;
         hasAttribute(attributeName: string): boolean;
         getBoundingClientRect(): DOMRect;
-        onConnected(callback: (component: any) => void): void;
-        offConnected(callback: (component: any) => void): void;
-        onDisconnected(callback: (component: any) => void): void;
-        offDisconnected(callback: (component: any) => void): void;
     };
 } & {
     new (...args: any[]): {
@@ -75,13 +72,35 @@ declare const Checkbox_base: {
         description: string | undefined;
         _label?: string | undefined;
         label: string | undefined;
+        status: "error" | "default" | "success" | "warning" | "info";
         tabindex?: number | undefined;
-        autocomplete?: "url" | "name" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
+        autocomplete?: "url" | "name" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: Event | undefined): void;
         handleBlur(e?: Event | undefined): void;
+        /**
+         * ### 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.
+         */
         getValueForFormPublisher(): string | object | string[] | null | undefined;
+        setValueFromPublisher(value: string | object | string[] | null | undefined): void;
         focus?: (() => void) | undefined;
         shadowRoot?: ShadowRoot | undefined;
         error: boolean;
@@ -122,10 +141,6 @@ declare const Checkbox_base: {
         hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
         getBoundingClientRect(): DOMRect;
-        onConnected(callback: (component: any) => void): void;
-        offConnected(callback: (component: any) => void): void;
-        onDisconnected(callback: (component: any) => void): void;
-        offDisconnected(callback: (component: any) => void): void;
     };
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 /**

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, css } from "lit";
-import { customElement, property, queryAssignedElements } from "lit/decorators.js";
+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";
@@ -84,9 +84,7 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
         <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>
+            <slot @slotchange=${this.hasSlotOrProps} name="description" class="${this.hasDescription ? "description" : "hidden"} ">${this.description ? html `${unsafeHTML(this.description)}` : ""}</slot>
           </div>
         </label>
       </label>
@@ -241,10 +239,10 @@ __decorate([
     property({ type: Boolean })
 ], Checkbox.prototype, "hasLabel", void 0);
 __decorate([
-    queryAssignedElements({ flatten: true })
+    queryAssignedNodes({ flatten: true })
 ], Checkbox.prototype, "slotLabelNodes", void 0);
 __decorate([
-    queryAssignedElements({ slot: "description", flatten: true })
+    queryAssignedNodes({ slot: "description", flatten: true })
 ], Checkbox.prototype, "slotDescriptionNodes", void 0);
 Checkbox = __decorate([
     customElement(tagName)

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

@@ -67,13 +67,11 @@ export const formControl = css `
 
     line-height: 1.1;
     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);
+    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-background);
-    border: var(--sc-input-b-width) solid
-      var(--sc-input-b-color, var(--sc-base-300, #aaa));
+    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);
 
@@ -82,6 +80,10 @@ export const formControl = css `
     padding-left: var(--sc-input-px);
     padding-right: var(--sc-input-px);
 
+    transition:
+      border-color 0.15s ease-in-out,
+      color 0.15s ease-in-out,
+      box-shadow 0.15s ease-in-out;
     min-height: var(--sc-input-height);
   }
 
@@ -100,6 +102,7 @@ export const formControl = css `
     justify-content: center;
     line-height: 1.1;
     flex-shrink: 0;
+    border: var(--sc-input-b-width) solid transparent;
     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)));
   }
@@ -120,6 +123,11 @@ export const formControl = css `
     border: none;*/
   }
 
+  :host(:not([inlineContent])[disabled]) .has-suffix slot[name="suffix"],
+  :host(:not([inlineContent])[disabled]) .has-prefix slot[name="prefix"] {
+    opacity: 0.43;
+  }
+
   :host(:not([inlineContent])) .has-prefix .form-element {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -202,7 +210,7 @@ export const formControl = css `
   /*Disbaled*/
   :host([disabled]) .form-element {
     pointer-events: none;
-    opacity: 0.5;
+    opacity: 0.43;
     /* border-color: transparent;*/
   }
   :host([disabled]) .select-chevron {
@@ -291,8 +299,7 @@ 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);
+    border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br) var(--sc-item-rounded-bl);
   }
 
   /*Input Image*/
@@ -343,4 +350,30 @@ export const formControl = css `
   :host([noAppearance]) input[type="number"] {
     -moz-appearance: textfield !important;
   }
+
+  /*type color "default" | "success" | "error" | "warning"  | "info" */
+  :host([status="success"]) {
+    --sc-input-b-color: var(--sc-success);
+    --sc-input-c: var(--sc-success);
+    --sc-input-addon-bg: var(--sc-success);
+    --sc-input-addon-color: var(--sc-success-content);
+  }
+  :host([status="error"]) {
+    --sc-input-b-color: var(--sc-danger);
+    --sc-input-c: var(--sc-danger);
+    --sc-input-addon-bg: var(--sc-danger);
+    --sc-input-addon-color: var(--sc-danger-content);
+  }
+  :host([status="warning"]) {
+    --sc-input-b-color: var(--sc-warning);
+    --sc-input-c: var(--sc-warning);
+    --sc-input-addon-bg: var(--sc-warning);
+    --sc-input-addon-color: var(--sc-warning-content);
+  }
+  :host([status="info"]) {
+    --sc-input-b-color: var(--sc-info);
+    --sc-input-c: var(--sc-info);
+    --sc-input-addon-bg: var(--sc-info);
+    --sc-input-addon-color: var(--sc-info-content);
+  }
 `;

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

@@ -16,6 +16,7 @@ export declare class Fieldset extends Fieldset_base {
     iconName?: string;
     iconLibrary?: string;
     iconPrefix?: string;
+    tight?: boolean;
     variant: "default" | "ghost" | "shadow";
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -42,12 +42,14 @@ Fieldset.styles = [
         --sc-fieldset-mb: 1rem;
         --sc-fieldset-border-color: var(--sc-border-color);
         --sc-fieldset-border-width: var(--sc-form-border-width);
+        --sc-fieldset-px: 1.25rem;
+        --sc-fieldset-py: 1.8rem;
 
         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.8rem 1.25rem;
+        padding: var(--sc-fieldset-py) var(--sc-fieldset-px);
         border-radius: var(--sc-rounded-lg);
       }
 
@@ -55,6 +57,7 @@ Fieldset.styles = [
         all: unset;
         display: contents;
       }
+
       :host([variant="shadow"]),
       :host([variant="ghost"]) {
         --sc-fieldset-border-color: transparent;
@@ -64,6 +67,13 @@ Fieldset.styles = [
         box-shadow: var(--sc-shadow-lg);
       }
 
+      :host([tight]) {
+        --sc-fieldset-px: 0;
+        border-left: none !important;
+        border-right: none !important;
+        border-radius: 0;
+      }
+
       sonic-legend,
       ::slotted(sonic-legend) {
         margin-bottom: 1.5rem;
@@ -96,6 +106,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Fieldset.prototype, "iconPrefix", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Fieldset.prototype, "tight", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Fieldset.prototype, "variant", void 0);

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

@@ -14,13 +14,13 @@ let LegendDescription = class LegendDescription extends LitElement {
 LegendDescription.styles = [
     css `
       :host {
-        color: var(--sc-neutral-500);
-        font-size: 1.25rem;
+        font-size: 1.15rem;
         line-height: 1.2;
         display: block;
+        color: var(--sc-base-500);
         font-weight: var(--sc-font-weight-base);
         font-style: var(--sc-font-style-base);
-        margin-top: 0.25em;
+        margin-top: 0.2em;
       }
     `,
 ];

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

@@ -37,19 +37,13 @@ let Legend = class Legend extends LitElement {
         return html `<legend part="legend">
       ${this.iconName
             ? html `<div class="icon">
-            <sonic-icon
-              name=${this.iconName}
-              prefix=${ifDefined(this.iconPrefix)}
-              library=${ifDefined(this.iconLibrary)}
-            ></sonic-icon>
+            <sonic-icon name=${this.iconName} prefix=${ifDefined(this.iconPrefix)} library=${ifDefined(this.iconLibrary)}></sonic-icon>
           </div>`
             : ""}
 
       <div class="legend-content">
         ${unsafeHTML(this.label ? this.label : "")}
-        ${this.description
-            ? html `<sonic-legend-description>${unsafeHTML(this.description)}</sonic-legend-description>`
-            : ""}
+        ${this.description ? html `<sonic-legend-description>${unsafeHTML(this.description)}</sonic-legend-description>` : ""}
         <slot></slot>
       </div>
       <slot name="suffix"></slot>

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

@@ -9,13 +9,15 @@ declare const Input_base: {
         description: string | undefined;
         _label?: string | undefined;
         label: string | undefined;
+        status: "error" | "default" | "success" | "warning" | "info";
         tabindex?: number | undefined;
-        autocomplete?: "url" | "name" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
+        autocomplete?: "url" | "name" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: Event | undefined): void;
         handleBlur(e?: Event | undefined): void;
         getValueForFormPublisher(): string | object | string[] | null | undefined;
+        setValueFromPublisher(value: string | object | string[] | null | undefined): void;
         focus?: (() => void) | undefined;
         shadowRoot?: ShadowRoot | undefined;
         error: boolean;
@@ -56,10 +58,6 @@ declare const Input_base: {
         hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
         getBoundingClientRect(): DOMRect;
-        onConnected(callback: (component: any) => void): void;
-        offConnected(callback: (component: any) => void): void;
-        onDisconnected(callback: (component: any) => void): void;
-        offDisconnected(callback: (component: any) => void): void;
     };
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 export declare class Input extends Input_base {
@@ -95,6 +93,7 @@ export declare class Input extends Input_base {
     sameValueAsName?: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    escapeRegExp(string: string): string;
     willUpdate(changedProperties: PropertyValues): void;
     setSelectionRange(start: number, end: number): void;
     hasSlotOrProps(): void;

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

@@ -4,8 +4,8 @@ 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, css } from "lit";
-import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import { html, LitElement, css, nothing } 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, label, description, passwordToggle } from "@supersoniks/concorde/core/components/ui/form/css/form-control";
@@ -44,7 +44,7 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         this.hasSlotOrProps();
         if (this.hasAttribute("sameValueAs")) {
             this.sameValueAsName = this.getAttribute("sameValueAs");
-            this.sameValueAsHandle = (v) => (this.pattern = v);
+            this.sameValueAsHandle = (v) => (this.pattern = this.escapeRegExp(v));
             const formPublisher = this.getFormPublisher();
             if (!formPublisher)
                 return;
@@ -65,6 +65,9 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
             formPublisher[this.sameValueAsName].offAssign(this.sameValueAsHandle);
         }
     }
+    escapeRegExp(string) {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+    }
     willUpdate(changedProperties) {
         this.hasSlotOrProps();
         super.willUpdate(changedProperties);
@@ -107,7 +110,7 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
         };
         //let labelStarSuffix = this.label && this.required && this.label.indexOf("*") == -1 ? " *" : "";
         return html `
-      <label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}"
+      <label for="${this.id || "form-element"}" class="${this.hasLabel ? "form-label" : "hidden"}"
         >${this.label ? unsafeHTML(this.label /*+ labelStarSuffix*/) : ""}<slot
           name="label"
           @slotchange=${this.hasSlotOrProps}
@@ -115,10 +118,11 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
       ></label>
 
       <div @click=${this.inlineContentFocus} class="form-control ${classMap(slotClasses)}">
-        <div class="${this.inlineContent ? "form-element form-element-wrapper" : "contents"}">
+        <div part="content" class="${this.inlineContent ? "form-element form-element-wrapper" : "contents"}">
             <slot name="prefix" @slotchange=${this.hasSlotOrProps}></slot>
             <input
-              id="form-element"
+              part="input"
+              id=${ifDefined(this.id || "form-element")}
               part="input"
               class="form-element input"
               @input=${this.handleChange}
@@ -158,13 +162,13 @@ let Input = class Input extends FormInput(FormElement(Subscriber(LitElement))) {
             <slot name="suffix" @slotchange=${this.hasSlotOrProps}></slot>
           </div>
         </div>
+
+        <!-- le slot ne doit pas avoir d'espace-->
         <slot
           name="description"
           @slotchange=${this.hasSlotOrProps}
           class="${this.hasDescription ? "form-description" : "hidden"}"
-        >
-          ${this.description ? html `${unsafeHTML(this.description)}` : ""}
-        </slot>
+        >${this.description ? html `${unsafeHTML(this.description)}` : nothing}</slot>
         <slot name="list"></slot>
       </div>
     `;
@@ -229,16 +233,16 @@ __decorate([
     property({ type: Boolean })
 ], Input.prototype, "showPasswordToggle", void 0);
 __decorate([
-    queryAssignedElements({ slot: "label", flatten: true })
+    queryAssignedNodes({ slot: "label", flatten: true })
 ], Input.prototype, "slotLabelNodes", void 0);
 __decorate([
-    queryAssignedElements({ slot: "description", flatten: true })
+    queryAssignedNodes({ slot: "description", flatten: true })
 ], Input.prototype, "slotDescriptionNodes", void 0);
 __decorate([
-    queryAssignedElements({ slot: "suffix", flatten: true })
+    queryAssignedNodes({ slot: "suffix", flatten: true })
 ], Input.prototype, "slotSuffixNodes", void 0);
 __decorate([
-    queryAssignedElements({ slot: "prefix", flatten: true })
+    queryAssignedNodes({ slot: "prefix", flatten: true })
 ], Input.prototype, "slotPrefixNodes", void 0);
 __decorate([
     query("input")

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

@@ -16,13 +16,15 @@ declare const InputAutocomplete_base: (new (...args: any[]) => import("../../../
         description: string | undefined;
         _label?: string | undefined;
         label: string | undefined;
+        status: "error" | "default" | "success" | "warning" | "info";
         tabindex?: number | undefined;
-        autocomplete?: "url" | "name" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
+        autocomplete?: "url" | "name" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "language" | "nickname" | "organization-title" | "cc-additional-name" | "bday" | "sex" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: Event | undefined): void;
         handleBlur(e?: Event | undefined): void;
         getValueForFormPublisher(): string | object | string[] | null | undefined;
+        setValueFromPublisher(value: string | object | string[] | null | undefined): void;
         focus?: (() => void) | undefined;
         shadowRoot?: ShadowRoot | undefined;
         error: boolean;
@@ -63,10 +65,6 @@ declare const InputAutocomplete_base: (new (...args: any[]) => import("../../../
         hasAttribute(attributeName: string): boolean;
         disconnectedCallback(): void;
         getBoundingClientRect(): DOMRect;
-        onConnected(callback: (component: any) => void): void;
-        offConnected(callback: (component: any) => void): void;
-        onDisconnected(callback: (component: any) => void): void;
-        offDisconnected(callback: (component: any) => void): void;
     };
 } & (new (...args: any[]) => import("../../../../mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("../../../../mixins/Subscriber").SubscriberInterface<import("../../../../_types/types").CoreJSType>) & typeof LitElement;
 /**

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, css, nothing } from "lit";
-import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import { customElement, property, queryAssignedNodes, state } from "lit/decorators.js";
 import { FormInput, FormElement, Subscriber, TemplatesContainer } from "@supersoniks/concorde/mixins";
 import "@supersoniks/concorde/core/components/ui/form/input/input";
 import "@supersoniks/concorde/core/components/ui/pop/pop";
@@ -56,7 +56,7 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormI
                 this.lastValidSearch = "";
                 return;
             }
-            let found = this.queryQueueListItem(this.queueDataProvider, this.findSelection, this.setSearchFromSelection);
+            const found = this.queryQueueListItem(this.queueDataProvider, this.findSelection, this.setSearchFromSelection);
             // Si la liste de this.queueDataProvider est bien initialisée, mais qu'aucun item ne correspond à la recherche
             // On affiche quand même la valeur dans le champ de recherche, car il provient directement du formDataProvider
             if (found === false) {
@@ -68,20 +68,19 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormI
             this.queryQueueListItem(this.initQueueDataProvider, this.findSelection, this.setSearchFromSelection);
         };
         this.selectListItem = (listItem) => {
-            let value = this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.name];
+            const value = this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.name];
             this.formValuePublisher?.set(value);
         };
         this.findSearchedItem = (listItem) => {
-            let value = this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.searchParameter || this.name];
+            const value = this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.searchParameter || this.name];
             return value == this.searchPublisher?.get();
         };
         this.findSelection = (listItem) => {
-            let value = this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.name];
+            const value = this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.name];
             return value == this.value;
         };
         this.setSearchFromSelection = (listItem) => {
-            this.lastValidSearch =
-                this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.searchParameter || this.name];
+            this.lastValidSearch = this.propertyName === "_self" ? listItem : listItem[this.propertyName || this.searchParameter || this.name];
             this.searchPublisher?.set(this.lastValidSearch);
         };
         this.updateActiveSelection = () => {
@@ -229,6 +228,7 @@ let InputAutocomplete = class InputAutocomplete extends TemplatesContainer(FormI
           </sonic-queue>
           <sonic-queue
             noLazyload
+            noLoader
             dataProvider="${this.initQueueDataProvider}"
             filteredFields=${this.filteredFields}
             dataProviderExpression="${this.dataProviderExpression}"
@@ -251,7 +251,7 @@ InputAutocomplete.styles = [
 
       sonic-menu {
         display: block;
-        max-height: clamp(20rem, 55vh, 35rem);
+        max-height: clamp(12rem, 20vh, 20rem);
         min-width: 14rem;
         width: 100%;
       }
@@ -285,7 +285,7 @@ __decorate([
     property({ type: String })
 ], InputAutocomplete.prototype, "propertyName", void 0);
 __decorate([
-    queryAssignedElements({ slot: "prefix", flatten: true })
+    queryAssignedNodes({ slot: "prefix", flatten: true })
 ], InputAutocomplete.prototype, "slotInputPrefixNodes", void 0);
 __decorate([
     state()

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

@@ -1,9 +1,10 @@
 import { LitElement, PropertyValues } from "lit";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
 import { Size } from "@supersoniks/concorde/core/components/ui/_css/size";
+import { DirectiveResult } from "lit/async-directive";
 export type SelectOption = {
     value?: string;
-    wording?: string;
+    wording?: string | DirectiveResult;
     selected?: boolean;
     hasAttribute?: (value: string) => boolean;
 } & Record<string, string>;
@@ -22,6 +23,7 @@ export declare class Select extends Select_base {
     multiple: boolean;
     size?: Size;
     selectSize?: number;
+    status: "default" | "success" | "error" | "warning" | "info";
     private _options;
     set options(options: Array<SelectOption>);
     get options(): Array<SelectOption>;
@@ -32,6 +34,7 @@ export declare class Select extends Select_base {
     get value(): string;
     updateFormPublisherValue(): void;
     connectedCallback(): void;
+    updateOptions: () => void;
     forceAutoFill: boolean;
     _description?: string;
     get description(): string | undefined;