@supersoniks/concorde 1.1.24 → 1.1.26

package/core/components/ui/alert/alert.js

@@ -13,6 +13,7 @@ const icon = {
     info: "info-empty",
     default: "info-empty",
 };
+const tagName = 'sonic-alert';
 /**
  * Affiche un message en ligne.
  * Soit par ses simples attributs "label" et "text", soit par son slot pour des messages plus complexes.
@@ -35,11 +36,11 @@ let Alert = class Alert extends LitElement {
     render() {
         return html `<div part="alert" class="alert">
                   <div>
-                    ${this.status && html `<sonic-icon prefix="iconoir" name=${icon[this.status]}></sonic-icon>`}
+                    ${this.status && html `<sonic-icon name=${icon[this.status]}></sonic-icon>`}
                   </div>
                   <div >
-                    ${this.label ? html `<span class="alert-title">${this.label} :</span>` : nothing}
-                    ${this.text} <slot><slot>
+                    ${this.label ? html `<span class="label">${this.label} :</span>` : nothing}
+                    ${this.text} <slot></slot>
                   </div>
                 </div>`;
     }
@@ -52,7 +53,7 @@ Alert.styles = [
         --sc-alert-fw: var(--sc-font-weight-base);
         --sc-alert-fst: var(--sc-font-style-base);
         --sc-alert-fs: 1rem;
-        --sc-alert-title-fw: bold;
+        --sc-alert-label-fw: bold;
 
         display: block;
         font-size: var(--sc-alert-fs);
@@ -69,8 +70,8 @@ Alert.styles = [
         border-radius: var(--sc-alert-rounded);
       }
 
-      .alert-title {
-        font-weight: var(--sc-alert-title-fw);
+      .label {
+        font-weight: var(--sc-alert-label-fw);
       }
 
       :host([status="warning"]) {
@@ -102,14 +103,13 @@ Alert.styles = [
         bottom: 0;
         opacity: 0.08;
         border-radius: var(--sc-alert-rounded);
-        pointer-events:none;
+        pointer-events: none;
       }
       :host([background]) > div {
-        z-index:2;
-        position:relative;
+        z-index: 2;
+        position: relative;
       }
 
-
       /*SIZE*/
       :host([size="xs"]) {
         --sc-alert-fs: 0.75rem;
@@ -146,10 +146,10 @@ __decorate([
     property({ type: String, reflect: true })
 ], Alert.prototype, "status", void 0);
 Alert = __decorate([
-    customElement("sonic-alert")
+    customElement(tagName)
 ], Alert);
 export { Alert };
 try {
-    customElements.define("sonic-alert", Alert);
+    customElements.define(tagName, Alert);
 }
 catch (e) { }

package/core/components/ui/badge/badge.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+const tagName = 'sonic-badge';
 /**
  * Un badge simple avec deux slots, un nommé prefix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
  * * Le badge est comparable au bouton car il possèdent tous les deux les propriétés *type* (primary...), *variant*(outline, ghost), size(xs...)...
@@ -166,11 +167,11 @@ __decorate([
     property({ type: String, reflect: true })
 ], Badge.prototype, "size", void 0);
 Badge = __decorate([
-    customElement("sonic-badge")
+    customElement(tagName)
 ], Badge);
 export { Badge };
 //Ajout pour la creation du cem notamment pour Storybook
 try {
-    customElements.define("sonic-badge", Badge);
+    customElements.define(tagName, Badge);
 }
 catch (e) { }

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

@@ -19,12 +19,7 @@ declare const Button_base: {
         updateDataValue(): void;
         error: true | null;
         autofocus: true | null;
-        disabled: true | null; /**
-         * Un bouton simple avec deux slots, un nommé préfix et un nomé suffix de manière à pouvoir mettre (par exemple) une icone avant ou après le contenu.
-         * * L'objet et ses slot sont en display flex avec direction / alignement et justifications configurables
-         * * Le bouton est comparable au badge car il possèdent tous les deux les propriétés *type* (primary...), *variant*(outline, ghost), size(xs...)...
-         * * Le bouton possède cependant et notamment une propriété href contrairement à un badge
-         */
+        disabled: true | null;
         required: true | null;
         formDataProvider: string;
         props: any;
@@ -83,7 +78,7 @@ export declare class Button extends Button_base {
     /**
      * Propriété align-items de *flex* appliquée à l'élément contenant les *slots*
      */
-    align: string;
+    alignItems: string;
     /**
      * Propriété justify-content de *flex* appliquée à l'élément contenant les *slots*
      */
@@ -91,7 +86,7 @@ export declare class Button extends Button_base {
     /**
      * Propriété text-align du bouton
      */
-    textAlign: "" | "right" | "left" | "center";
+    align: "" | "right" | "left" | "center";
     /**
      * Propriété min-width du bouton
      */
@@ -115,7 +110,7 @@ export declare class Button extends Button_base {
     /**
      * target
      */
-    target: "_self" | "_blank" | null;
+    target?: "_self" | "_blank" | "_parent" | "_top";
     /**
      * L'url
      */

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

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

package/core/components/ui/card/card-footer.d.ts

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

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

@@ -4,24 +4,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, css } from "lit";
+import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
+const tagName = "sonic-card-footer";
 let CardFooter = class CardFooter extends LitElement {
+    // static styles = [
+    //   css`
+    //     :host {
+    //     }
+    //   `
+    // ];
     render() {
         return html `
       <slot></slot>
     `;
     }
 };
-CardFooter.styles = [
-    css `
-      :host {
-     
-      }
-   
-    `
-];
 CardFooter = __decorate([
-    customElement("sonic-card-footer")
+    customElement(tagName)
 ], CardFooter);
 export { CardFooter };
+//Ajout pour Storybook
+try {
+    customElements.define(tagName, CardFooter);
+}
+catch (e) { }

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

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

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

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

package/core/components/ui/card/card-main.d.ts

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

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

@@ -4,9 +4,16 @@ 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 { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
+const tagName = "sonic-card-main";
 let CardMain = class CardMain extends LitElement {
+    // static styles = [
+    //   css`
+    //     :host {
+    //     }
+    //   `
+    // ];
     render() {
         return html `
       <div>
@@ -15,15 +22,12 @@ let CardMain = class CardMain extends LitElement {
     `;
     }
 };
-CardMain.styles = [
-    css `
-      :host {
-     
-      }
-   
-    `
-];
 CardMain = __decorate([
-    customElement("sonic-card-main")
+    customElement(tagName)
 ], CardMain);
 export { CardMain };
+//Ajout pour Storybook
+try {
+    customElements.define(tagName, CardMain);
+}
+catch (e) { }

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

@@ -9,6 +9,7 @@ import { customElement, property } from "lit/decorators.js";
 import "@supersoniks/concorde/core/components/ui/card/card-header";
 import "@supersoniks/concorde/core/components/ui/card/card-main";
 import "@supersoniks/concorde/core/components/ui/card/card-footer";
+const tagName = "sonic-card";
 let Card = class Card extends LitElement {
     constructor() {
         super(...arguments);
@@ -85,6 +86,11 @@ __decorate([
     property({ type: String, reflect: true })
 ], Card.prototype, "type", void 0);
 Card = __decorate([
-    customElement("sonic-card")
+    customElement(tagName)
 ], Card);
 export { Card };
+//Ajout pour Storybook
+try {
+    customElements.define(tagName, Card);
+}
+catch (e) { }

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

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

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

@@ -88,28 +88,9 @@ declare const Checkbox_base: {
         disconnectedCallback(): void;
     };
 } & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/FormElement").FormElementInterface) & (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
-/**
- * ### Le composent sonic-checkbox étend les mixins FormCheckable, FormInput, FormElement et Subscriber
- * **FormElement :**
- * * La propriété value est remplie automatiquement a l'aide de l'attribut name renseigné, ceci en prenant la valeur de la propriété du même nom dans les données du dataprovider associé.
- * * Par défault lorsque modifie l'input, la valeur est également mise à jour via le même dataprovider
- * * On peut cependant décider de mettre à jour la donnée à une autre adresse en renseigne l'attribut *formDataProvider*.
- * * Par conséquent on peut par exemple le lier à un composant *queue* (via sa propriété *dataFilterProvider*) de manière à appeller en auto une api avec des filtres.
- * * **FormInput **
- * Uniquement des propriétés classiques d'un input HTML. La prise en compte est ici partielle, par exemple les propriétés *placeholder*, *readonly*, *pattern*, *min* et *max* n'ont pas de sens pour un checkbox.
- * **FormCheckable :**
- * * La propriété checked mise à true si la valeur de la propriété du même nom dans les données du dataprovider associé contient un propriété checked.
- * **Comportements :**
- * * multiple (par défaut):
- * - on peut cocher plusieurs checkbox ayant le même *name*.
- * - la valeur enregistrée dans la propriété nommé du même nom dans formDataProvider est un tableau avec les *value* des cases cochées ayant le même *name*.
- * * unique (Ajouter l'attribute unique au composant a l'intégration):
- * - on ne peut cocher qu'une seule checkbox ayant le même *name*.
- * * radio (Ajouter l'attribute radio au composant a l'intégration):
- * Comme unique, mais on ne peut pas décocher la case sauf en en cochant une autre, comme un bouton radio.
- */
 export declare class Checkbox extends Checkbox_base {
     static styles: CSSResultGroup[];
+    touched: boolean;
     iconName: string;
     description: string;
     label: string;

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

@@ -32,9 +32,11 @@ import "@supersoniks/concorde/core/components/ui/icon/icon";
  * * radio (Ajouter l'attribute radio au composant a l'intégration):
  * Comme unique, mais on ne peut pas décocher la case sauf en en cochant une autre, comme un bouton radio.
  */
+const tagName = "sonic-checkbox";
 let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscriber(LitElement)))) {
     constructor() {
         super(...arguments);
+        this.touched = false;
         this.iconName = "check";
         this.description = "";
         this.label = "";
@@ -63,7 +65,7 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
               autofocus=${ifDefined(this.autofocus)}
               
            />
-            <sonic-icon prefix="iconoir"
+            <sonic-icon 
             name="${this.iconName}" class="sc-input-icon"></sonic-icon>
           </span>
           <div class="checkbox-text">
@@ -79,6 +81,11 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
 };
 Checkbox.styles = [
     css `
+
+      :host{
+        --sc-checkbox-border-width: var(--sc-form-border-width);
+        --sc-checkbox-border-color:  transparent;
+      }
       * {
         box-sizing: border-box;
       }
@@ -108,6 +115,7 @@ Checkbox.styles = [
         outline: none;
         margin: 0;
         background-color: var(--sc-base-200);
+        border:var(--sc-checkbox-border-width) solid var(--sc-checkbox-border-color);
       }
 
       input:focus,
@@ -174,8 +182,20 @@ Checkbox.styles = [
       .hidden {
         display: none;
       }
+
+      /*ERROR*/
+      :host([touched]) .checkbox-container:has(input:not(:focus):invalid) {
+        --sc-checkbox-border-color:var(--sc-danger);
+      }
+      :host([touched]) .checkbox-container:has(input:not(:focus):invalid) .checkbox-text{
+        color:var(--sc-danger);
+      }
+
     `,
 ];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Checkbox.prototype, "touched", void 0);
 __decorate([
     property({ type: String })
 ], Checkbox.prototype, "iconName", void 0);
@@ -192,11 +212,11 @@ __decorate([
     property({ type: Boolean })
 ], Checkbox.prototype, "hasDescription", void 0);
 Checkbox = __decorate([
-    customElement("sonic-checkbox")
+    customElement(tagName)
 ], Checkbox);
 export { Checkbox };
 //Ajout pour Storybook
 try {
-    customElements.define("sonic-checkbox", Checkbox);
+    customElements.define(tagName, Checkbox);
 }
 catch (e) { }

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

@@ -6,8 +6,7 @@ export const formControl = css `
 
   :host {
     --sc-input-height: var(--sc-form-height, 2.5em);
-    --sc-input-border-with: var(--sc-form-border-width, 0.1rem);
-    --sc-input-border: var(--sc-input-border-with) solid var(--sc-input-border-color, var(--sc-base-300, #aaa));
+    --sc-input-border-width: var(--sc-form-border-width, 0.1rem);
     --sc-input-color: var(--sc-base-content, #1f2937);
 
     --sc-item-rounded-tr: var(--sc-input-rounded, var(--sc-rounded));
@@ -42,7 +41,7 @@ export const formControl = css `
 
     font-family: var(--sc-input-ff);
     background-color: var(--sc-input-bg, var(--sc-base, #fff));
-    border: var(--sc-input-border);
+    border: var(--sc-input-border-width) solid var(--sc-input-border-color, var(--sc-base-300, #aaa));
     width: 100%;
     font-size: var(--sc-input-fs);
 
@@ -83,16 +82,16 @@ export const formControl = css `
     border-radius: var(--sc-item-rounded-tl) 0 0 var(--sc-item-rounded-bl);
     background-color: var(--sc-input-prefix-bg);
     color: var(--sc-input-prefix-color);
-    border: var(--sc-input-border-with) solid var(--sc-input-prefix-border-color);
-    margin-right: calc(-1 * var(--sc-input-border-with));
+    border: var(--sc-input-border-width) solid var(--sc-input-prefix-border-color);
+    margin-right: calc(-1 * var(--sc-input-border-width));
   }
 
   :host(:not([inlineContent])) slot[name="suffix"] {
     border-radius: 0 var(--sc-item-rounded-tr) var(--sc-item-rounded-br) 0;
     background-color: var(--sc-input-suffix-bg);
     color: var(--sc-input-suffix-color);
-    border: var(--sc-input-border-with) solid var(--sc-input-suffix-border-color);
-    margin-left: calc(-1 * var(--sc-input-border-with));
+    border: var(--sc-input-border-width) solid var(--sc-input-suffix-border-color);
+    margin-left: calc(-1 * var(--sc-input-border-width));
   }
 
   :host(:not([inlineContent])) .has-prefix .form-element {
@@ -140,14 +139,7 @@ export const formControl = css `
     --sc-input-bg: transparent;
   }
 
-  /*ERROR*/
-  :host([error]) {
-    --sc-input-border-color: var(--sc-danger);
-  }
-
-  :host :not(select):not(textarea):not([value=""]):not(:focus):invalid {
-    --sc-input-color: var(--sc-danger);
-  }
+ 
 
   /*Disbaled*/
   :host([disabled]) .form-element {
@@ -192,30 +184,41 @@ export const formControl = css `
     all: unset !important;
   }
 
-  /*Textarea scrollbar*/
-  textarea::-webkit-scrollbar {
-    width: 0.4rem;
+  /*Utilitaires*/
+  .hidden {
+    display: none;
   }
-  textarea::-webkit-scrollbar-track {
-    width: 0.4rem;
+  .contents {
+    display: contents;
   }
-  textarea::-webkit-scrollbar-thumb {
-    background-color: var(--sc-base-500);
-    width: 0.4rem;
-    border-radius: var(--sc-rounded);
+
+
+  /*ERROR*/
+  :host([error]) {
+    --sc-input-border-color: var(--sc-danger);
   }
-  textarea::-webkit-scrollbar {
-    width: 0.4rem;
+
+  :host input:visited{
+    display:none;
   }
-  textarea::-webkit-scrollbar-track {
-    width: 0.4rem;
+
+  :host([touched]) :not(:focus):invalid {
+    --sc-input-border-color: var(--sc-danger);
+    --sc-input-color: var(--sc-danger);
   }
 
-  /*Utilitaires*/
-  .hidden {
-    display: none;
+  :host([touched]) :not(:focus):invalid + .select-chevron{
+    --sc-input-color: var(--sc-danger);
   }
-  .contents {
-    display: contents;
+
+  /*VALID*/
+  :host([touched]) :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{
+    --sc-input-color: var(--sc-success);
+  }
+
 `;

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

@@ -9,7 +9,7 @@ export declare class Fieldset extends Fieldset_base {
     /**
      * Lier à un formulaire qui ne serait pas parent du fieldset
      */
-    form: string;
+    form?: string;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};