@supersoniks/concorde 1.1.9 → 1.1.12

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

@@ -59,6 +59,13 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
          * Propriété min-width du bouton
          */
         this.minWidth = "0";
+        /**
+         * mode d'activation du bouton :
+         * - strict : l'url courante match exactement avec le href du bouton
+         * - partial : l'url courante match à gauche avec le href du bouton
+         * - disabled : aucune activation / désactivation
+        */
+        this.autoActive = "partial";
         /**
          * Laisse apparaitre un loader en remplacement du contenu du bouton.
          * Désactive également le clic sur le bouton
@@ -74,6 +81,7 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
          * L'url
          */
         this._href = "";
+        this.goBack = null;
         /**
          * Si présent on passe en mode pushstate
          */
@@ -94,13 +102,13 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
     get href() {
         return this._href;
     }
-    handlePushState(e) {
+    handleNavigation(e) {
         e.preventDefault();
         LocationHandler.changeFromComponent(this);
     }
     handleChange(e) {
         super.handleChange(e);
-        if (this.pushState) {
+        if (this.pushState || this.goBack !== null) {
             e.preventDefault();
             e.stopPropagation();
             LocationHandler.changeFromComponent(this);
@@ -109,18 +117,6 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
     connectedCallback() {
         super.connectedCallback();
     }
-    // _checked: true | null = null;
-    // @property() get checked(): true | null {
-    //   return this._checked;
-    // }
-    // set checked(checked: true | null) {
-    //   if (this.name) {
-    //     if (checked == this._checked) return;
-    //     super.setCheckedValue(checked);
-    //     if (this._checked) this.setAttribute("active", "true");
-    //     else this.removeAttribute("active");
-    //   }
-    // }
     setCheckedValue(checked) {
         if (this.name) {
             if (checked == this._checked)
@@ -160,7 +156,7 @@ let Button = class Button extends FormCheckable(FormElement(Subscriber(LitElemen
       </button>
     `;
         return this.href
-            ? html `<a href="${this.href}" target=${ifDefined(this.target)} @click=${this.pushState ? this.handlePushState : null}>${btn}</a>`
+            ? html `<a href="${this.href}" target=${ifDefined(this.target)} @click=${this.pushState || this.goBack !== null ? this.handleNavigation : null}>${btn}</a>`
             : html `${btn}`;
     }
     onSlotChange() {
@@ -210,13 +206,13 @@ Button.styles = [
 
       :host a {
         display: contents;
+        color:unset;
       }
 
       :host button {
         display: flex;
         flex: 1;
         box-sizing: border-box;
-        flex-wrap: wrap;
         align-items: center;
         justify-content: center;
 
@@ -226,7 +222,7 @@ Button.styles = [
 
         cursor: pointer;
         text-align: center;
-        line-height: 1.2;
+        line-height: 1.1;
         border-radius: var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br)
         var(--sc-item-rounded-bl);
 
@@ -404,6 +400,7 @@ Button.styles = [
         padding: 0;
         align-items: center;
         justify-content: 0;
+        text-align:center !important;
       }
 
       :host([shape="block"]),
@@ -530,6 +527,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Button.prototype, "minWidth", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "autoActive", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Button.prototype, "loading", void 0);
@@ -551,6 +551,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Button.prototype, "href", null);
+__decorate([
+    property({ type: String })
+], Button.prototype, "goBack", void 0);
 __decorate([
     property({ type: Boolean })
 ], Button.prototype, "pushState", void 0);

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,27 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from "lit/decorators.js";
+let CardFooter = class CardFooter extends LitElement {
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+};
+CardFooter.styles = [
+    css `
+      :host {
+     
+      }
+   
+    `
+];
+CardFooter = __decorate([
+    customElement("sonic-card-footer")
+], CardFooter);
+export { CardFooter };

package/core/components/ui/card/card-header-descripton.d.ts

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

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

@@ -0,0 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from "lit/decorators.js";
+let CardHeaderDescription = class CardHeaderDescription extends LitElement {
+    render() {
+        return html `
+      <div>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+CardHeaderDescription.styles = [
+    css `
+
+      div {
+        margin-top: .1em;
+        font-family: var(--sc-font-family-base);
+        font-size: .7em;
+        font-weight: var(--sc-font-style-base);
+      }
+   
+    `
+];
+CardHeaderDescription = __decorate([
+    customElement("sonic-card-header-description")
+], CardHeaderDescription);
+export { CardHeaderDescription };

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

@@ -0,0 +1,8 @@
+import { LitElement } from "lit";
+import './card-header-descripton.ts';
+export declare class CardHeader extends LitElement {
+    static styles: import("lit").CSSResult[];
+    label: string;
+    description: string;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,67 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from "lit/decorators.js";
+import './card-header-descripton.ts';
+let CardHeader = class CardHeader extends LitElement {
+    render() {
+        return html `
+      <div class="header">
+        <div class="header-content">
+          ${this.label}
+          ${this.description ? html `<sonic-card-header-description>${this.description}</sonic-card-header-description>` : ""} 
+          <slot></slot>
+        </div>
+        <slot name="suffix"></slot>   
+      </div>
+    `;
+    }
+};
+CardHeader.styles = [
+    css `
+
+      :host {
+        --sc-card-header-mb: 1rem;
+        --sc-card-header-font-size: 1.875rem;
+        --sc-card-header-font-weight: var(--sc-headings-font-weight);
+        --sc-card-header-font-style: var(--sc-headings-font-style);
+        --sc-card-header-family: var(--sc-headings-font-family);
+        --sc-card-header-line-height: var(--sc-headings-line-height);
+      }
+      
+      .header {
+        display: flex;
+        align-items: flex-start;
+        gap: .5em 1em;
+        margin-bottom: var(--sc-card-header-mb);
+        line-height: var(--sc-card-header-line-height);
+        font-family: var(--sc-card-header-font-family);
+        font-size: var(--sc-card-header-font-size);
+        font-style: var(--sc-card-header-font-style);
+        font-weight: var(--sc-card-header-font-weight);
+      }
+      
+      .header-content {
+        flex-grow: 1;
+      }
+
+      slot[name="suffix"] {
+        flex-shrink: 0;
+      }
+
+    `
+];
+__decorate([
+    property()
+], CardHeader.prototype, "label", void 0);
+__decorate([
+    property()
+], CardHeader.prototype, "description", void 0);
+CardHeader = __decorate([
+    customElement("sonic-card-header")
+], CardHeader);
+export { CardHeader };

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from "lit/decorators.js";
+let CardMain = class CardMain extends LitElement {
+    render() {
+        return html `
+      <div>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+CardMain.styles = [
+    css `
+      :host {
+     
+      }
+   
+    `
+];
+CardMain = __decorate([
+    customElement("sonic-card-main")
+], CardMain);
+export { CardMain };

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

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+import "./card-header.ts";
+import "./card-main.ts";
+import "./card-footer.ts";
+export declare class Card extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Le type change surtout la couleur composant
+     */
+    type: "default" | "primary" | "warning" | "danger" | "success" | "info" | "neutral" | "invert";
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,90 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from "lit/decorators.js";
+import "./card-header.ts";
+import "./card-main.ts";
+import "./card-footer.ts";
+let Card = class Card extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Le type change surtout la couleur composant
+         */
+        this.type = "default";
+    }
+    render() {
+        return html `
+      <div part="card" class="card">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+Card.styles = [
+    css `
+      :host {
+        --sc-card-padding: 1.5rem;
+        --sc-card-color: var(--sc-base-content);
+        --sc-card-bg: var(--sc-base);
+        --sc-card-rounded: var(--sc-rounded-lg);
+        --sc-card-shadow: var(--sc-shadow-lg);
+      }
+
+      .card {
+        padding: var(--sc-card-padding);
+        background-color: var(--sc-card-bg);
+        border-radius: var(--sc-card-rounded);
+        box-shadow: var(--sc-card-shadow);
+        color: var(--sc-card-color);
+      }
+
+      /*TYPES*/
+      :host([type="primary"]) {
+        --sc-card-color: var(--sc-primary-content);
+        --sc-badge-bg: var(--sc-primary);
+      }
+      :host([type="warning"]) {
+        --sc-card-color: var(--sc-warning-content);
+        --sc-card-bg: var(--sc-warning);
+      }
+      :host([type="danger"]) {
+        --sc-card-color: var(--sc-danger-content);
+        --sc-card-bg: var(--sc-danger);
+      }
+      :host([type="info"]) {
+        --sc-card-color: var(--sc-info-content);
+        --sc-card-bg: var(--sc-info);
+      }
+      :host([type="success"]) {
+        --sc-card-color: var(--sc-success-content);
+        --sc-card-bg: var(--sc-success);
+      }
+
+      :host([type="light"]) {
+        --sc-card-color: var(--sc-base-content);
+        --sc-card-bg: var(--sc-base-100);
+      }
+
+      :host([type="neutral"]) {
+        --sc-card-color: var(--sc-base);
+        --sc-card-bg: var(--sc-base-content);
+      }
+
+      :host([type="invert"]) {
+        --sc-card-color: var(--sc-base);
+        --sc-card-bg: var(--sc-base-900);
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], Card.prototype, "type", void 0);
+Card = __decorate([
+    customElement("sonic-card")
+], Card);
+export { Card };

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

@@ -23,15 +23,15 @@ declare const Checkbox_base: {
         required: true | null;
         formDataProvider: string;
         props: any;
+        isConnected: boolean;
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
         publisher: any;
-        dataProvider: String;
+        dataProvider: string | null;
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
-        makeShadow(props: Record<string, any>, value: any): any;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
@@ -63,15 +63,15 @@ declare const Checkbox_base: {
         _name: string;
         name: string;
         props: any;
+        isConnected: boolean;
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
         publisher: any;
-        dataProvider: String;
+        dataProvider: string | null;
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
-        makeShadow(props: Record<string, any>, value: any): any;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;

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

@@ -55,9 +55,9 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
             <input 
               type="${this.type}"
               @change=${this.handleChange}
-              disabled="${ifDefined(this.disabled)}"
-              .checked="${ifDefined(this.checked)}"
-              required=${ifDefined(this.required)}
+              .disabled=${ifDefined(this.disabled)}
+              .required=${ifDefined(this.required)}
+              .checked=${ifDefined(this.checked)}
               .name=${this.name}
               .value=${this.value}
               autofocus=${ifDefined(this.autofocus)}
@@ -74,7 +74,6 @@ let Checkbox = class Checkbox extends FormCheckable(FormInput(FormElement(Subscr
                 <slot>
               </div>
           </label>
-
     `;
     }
 };

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

@@ -27,6 +27,7 @@ export const formControl = css `
     --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;
   }
 
   .form-element {
@@ -55,6 +56,7 @@ export const formControl = css `
 
   label {
     font-size: var(--sc-label-fs);
+    font-weight: var(--sc-label-fw);
     line-height: 1.2;
   }
 

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

@@ -39,7 +39,7 @@ Fieldset.styles = [
         margin-bottom: var(--sc-fieldset-mb);
         display: block;
         border: var(--sc-fieldset-border-width) solid var(--sc-fieldset-border-color) !important;
-        padding: 1.25rem;
+        padding: 1.8rem 1.25rem;
         border-radius: var(--sc-rounded-lg);
       }
 

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

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

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

@@ -0,0 +1,35 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from "lit/decorators.js";
+let LegendDescription = class LegendDescription extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+LegendDescription.styles = [
+    css `
+      :host {
+        color: var(--sc-neutral-500);
+        font-size: 1.25rem;
+        line-height: 1.2;
+        display: block;
+        font-weight: var(--sc-font-weight-base);
+        font-style: var(--sc-font-style-base);
+        margin-top: 0.25em;
+      }
+    `,
+];
+LegendDescription = __decorate([
+    customElement("sonic-legend-description")
+], LegendDescription);
+export { LegendDescription };
+//Ajout pour la creation du cem notamment pour Storybook
+try {
+    customElements.define("sonic-legend-description", LegendDescription);
+}
+catch (e) { }

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

@@ -1,11 +1,10 @@
 import { LitElement } from "lit";
-declare const Legend_base: (new (...args: any[]) => import("@supersoniks/concorde/core/mixins/Subscriber").SubscriberInterface) & typeof LitElement;
-export declare class Legend extends Legend_base {
+import './legend-description.ts';
+export declare class Legend extends LitElement {
     static styles: import("lit").CSSResult[];
-    iconName: string;
-    iconPrefix: string;
     description: string;
     label: string;
+    iconName: string;
+    iconPrefix: string;
     render(): import("lit-html").TemplateResult<1>;
 }
-export {};

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

@@ -6,23 +6,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
-let Legend = class Legend extends Subscriber(LitElement) {
+import './legend-description.ts';
+let Legend = class Legend extends LitElement {
     constructor() {
         super(...arguments);
-        this.iconName = "check";
-        this.iconPrefix = "";
         this.description = "";
         this.label = "";
+        this.iconName = "";
+        this.iconPrefix = "";
     }
     render() {
         return html `<legend part="legend">
-      <div class="legend-content">
-        ${this.label}<slot></slot>
-        <slot name="description" class="description"> ${this.description ? html `${this.description}` : ""}</slot>
-      </div>
-      <slot name="suffix"></slot>
-    </legend>`;
+    
+                  ${this.iconName ? html `<div class="icon"><sonic-icon name=${this.iconName} prefix=${this.iconPrefix}></sonic-icon></div>` : ""}
+
+                  <div class="legend-content">
+                    ${this.label}
+                    ${this.description ? html `<sonic-legend-description>${this.description}</sonic-legend-description>` : ""}
+                    <slot></slot>
+                  </div>
+                  <slot name="suffix"></slot>
+                </legend>`;
     }
 };
 Legend.styles = [
@@ -46,24 +50,16 @@ Legend.styles = [
         padding: 0;
         display: flex;
         width: 100%;
-        align-items: center;
+        align-items: flex-start;
+        gap: 0.5em;
       }
 
-      slot[name="suffix"]:not(:empty) {
+      slot[name="suffix"] {
         display: block;
         margin-left: auto;
         flex-shrink: 0;
       }
 
-      .description {
-        color: var(--sc-neutral-500);
-        font-size: 1.25rem;
-        line-height: 1.2;
-        display: block;
-        font-weight: normal;
-        font-style: normal;
-        margin-top: 0.25eem;
-      }
       .legend-content {
         flex-grow: 1;
       }
@@ -71,16 +67,16 @@ Legend.styles = [
 ];
 __decorate([
     property({ type: String })
-], Legend.prototype, "iconName", void 0);
+], Legend.prototype, "description", void 0);
 __decorate([
     property({ type: String })
-], Legend.prototype, "iconPrefix", void 0);
+], Legend.prototype, "label", void 0);
 __decorate([
     property({ type: String })
-], Legend.prototype, "description", void 0);
+], Legend.prototype, "iconName", void 0);
 __decorate([
     property({ type: String })
-], Legend.prototype, "label", void 0);
+], Legend.prototype, "iconPrefix", void 0);
 Legend = __decorate([
     customElement("sonic-legend")
 ], Legend);

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

@@ -18,15 +18,15 @@ declare const Input_base: {
         _name: string;
         name: string;
         props: any;
+        isConnected: boolean;
         getAncestorAttributeValue(attributeName: string): string;
         hasAncestorAttribute(attributeName: string): boolean;
         querySelectorAll(selector: string): NodeListOf<Element>;
         publisher: any;
-        dataProvider: String;
+        dataProvider: string | null;
         noShadowDom: string | null;
         debug: HTMLElement | null;
         defferedDebug: boolean | null;
-        makeShadow(props: Record<string, any>, value: any): any;
         dispatchEvent(event: Event): void;
         setAttribute(name: string, value: string): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
@@ -59,7 +59,7 @@ export declare class Input extends Input_base {
     size: "" | "xs" | "sm" | "lg";
     list: "" | null;
     placeholder: string;
-    readonly: boolean | null;
+    readonly: boolean;
     pattern: string | null;
     min: string | null;
     max: string | null;