@supersoniks/concorde 1.1.28 → 1.1.30

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

@@ -7,6 +7,7 @@ export declare class Pop extends LitElement {
     popBtn: HTMLElement;
     popContent: HTMLElement;
     toggle: "true" | "false";
+    inline: boolean;
     /**
      * Ombre
      */

package/core/components/ui/pop/pop.js

@@ -14,6 +14,7 @@ let Pop = Pop_1 = class Pop extends LitElement {
         super(...arguments);
         this.open = false;
         this.toggle = "true";
+        this.inline = false;
         /**
          * Ombre
          */
@@ -196,6 +197,10 @@ Pop.styles = [
       :host([shadow="lg"]) slot[name="content"] {
         box-shadow: var(--sc-shadow-lg);
       }
+
+      :host([inline]) {
+        vertical-align: baseline;
+      }
     `,
 ];
 __decorate([
@@ -210,6 +215,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Pop.prototype, "toggle", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Pop.prototype, "inline", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Pop.prototype, "shadow", void 0);

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

@@ -3,6 +3,7 @@ export declare class Progress extends LitElement {
     static styles: import("lit").CSSResult[];
     value?: number;
     max: number;
+    invert: boolean;
     type: "default" | "primary" | "warning" | "danger" | "success" | "info";
     size: "xs" | "sm" | "md" | "lg" | "xl";
     render(): import("lit-html").TemplateResult<1>;

package/core/components/ui/progress/progress.js

@@ -7,11 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = "sonic-progress";
 let Progress = class Progress extends LitElement {
     constructor() {
         super(...arguments);
         this.max = 100;
+        this.invert = false;
         this.type = "default";
         this.size = "md";
     }
@@ -26,12 +28,13 @@ let Progress = class Progress extends LitElement {
     }
 };
 Progress.styles = [
+    fontSize,
     css `
       :host {
         --sc-progress-bg: var(--sc-input-bg, var(--sc-base-100, #f5f5f5));
         --sc-progress-color: var(--sc-base-content, #1f2937);
-        --sc-progress-height: .6rem;
-        --sc-progress-fs: 1rem;
+        --sc-progress-height: .6em;
+        --sc-progress-fs: var(--sc-fs, 1rem);
         --sc-progress-fw: 500;
         --sc-progress-rounded: var(--sc-rounded-lg);
         display: block;
@@ -103,25 +106,11 @@ Progress.styles = [
         --sc-progress-color: var(--sc-success);
       }
 
-      /* SIZES */
-      :host([size="xs"]) {
-        --sc-progress-height:.25rem;
-        --sc-progress-fs: 0.68rem;
+      :host([invert]) {
+        --sc-progress-bg: var(--sc-base-700);
       }
-
-      :host([size="sm"]) {
-        --sc-progress-height:.4rem;
-        --sc-progress-fs: 0.85rem;
-      }
-
-      :host([size="lg"]) {
-        --sc-progress-height:1rem;
-        --sc-progress-fs: 1.25rem;
-      }
-
-      :host([size="xl"]) {
-        --sc-progress-height:1.5rem;
-        --sc-progress-fs: 1.5rem;
+      :host([type="default"][invert]) {
+        --sc-progress-color: var(--sc-base);
       }
 
       slot[name="remaining"] {
@@ -135,6 +124,7 @@ Progress.styles = [
         display:flex;
         justify-content: space-between;
         gap:.5em;
+        margin-top:.15em;
       }
     `
 ];
@@ -144,6 +134,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Progress.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean })
+], Progress.prototype, "invert", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Progress.prototype, "type", void 0);

package/core/components/ui/table/table-td.d.ts

@@ -4,6 +4,7 @@ export declare class TableTd extends LitElement {
     colSpan?: number;
     rowSpan?: number;
     align?: string;
+    vAlign?: string;
     minWidth?: string;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/table/table-td.js

@@ -9,11 +9,12 @@ import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 const tagName = "sonic-td";
-import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
 let TableTd = class TableTd extends LitElement {
     render() {
         const styles = {
             textAlign: this.align,
+            verticalAlign: this.vAlign,
             minWidth: this.minWidth,
         };
         return html `<td
@@ -27,7 +28,7 @@ let TableTd = class TableTd extends LitElement {
     }
 };
 TableTd.styles = [
-    typesColor,
+    typeColor,
     css `
       :host {
         display: contents;
@@ -48,6 +49,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], TableTd.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], TableTd.prototype, "vAlign", void 0);
 __decorate([
     property({ type: String })
 ], TableTd.prototype, "minWidth", void 0);

package/core/components/ui/table/table-th.js

@@ -8,7 +8,7 @@ import { html, LitElement, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
-import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
 const tagName = "sonic-th";
 let TableTh = class TableTh extends LitElement {
     render() {
@@ -27,7 +27,7 @@ let TableTh = class TableTh extends LitElement {
     }
 };
 TableTh.styles = [
-    typesColor,
+    typeColor,
     css `
       :host {
         display: contents;

package/core/components/ui/table/table-tr.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import { typesColor } from "@supersoniks/concorde/core/components/ui/_css/types";
+import { typeColor } from "@supersoniks/concorde/core/components/ui/_css/type";
 const tagName = "sonic-tr";
 let TableTr = class TableTr extends LitElement {
     render() {
@@ -14,11 +14,12 @@ let TableTr = class TableTr extends LitElement {
     }
 };
 TableTr.styles = [
-    typesColor,
+    typeColor,
     css `
       :host {
         display: table-row;
       }
+
     `
 ];
 TableTr = __decorate([

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

@@ -8,7 +8,7 @@ import "@supersoniks/concorde/core/components/ui/table/table-tfoot";
 import "@supersoniks/concorde/core/components/ui/table/table-caption";
 export declare class Table extends LitElement {
     static styles: import("lit").CSSResult[];
-    size: "xs" | "sm" | "md" | "lg" | "xl";
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
     striped: boolean;
     sticky: boolean;
     bordered: boolean;

package/core/components/ui/table/table.js

@@ -15,11 +15,11 @@ import "@supersoniks/concorde/core/components/ui/table/table-thead";
 import "@supersoniks/concorde/core/components/ui/table/table-tbody";
 import "@supersoniks/concorde/core/components/ui/table/table-tfoot";
 import "@supersoniks/concorde/core/components/ui/table/table-caption";
+import { fontSize } from "@supersoniks/concorde/core/components/ui/_css/size";
 const tagName = "sonic-table";
 let Table = class Table extends LitElement {
     constructor() {
         super(...arguments);
-        this.size = "md";
         this.striped = false;
         this.sticky = false;
         this.bordered = false;
@@ -41,6 +41,7 @@ let Table = class Table extends LitElement {
 };
 Table.styles = [
     customScroll,
+    fontSize,
     css `
       :host {
         --sc-table-fw: var(--sc-font-weight-base);
@@ -56,38 +57,20 @@ Table.styles = [
         --sc-table-th-py: calc(1.8 * var(--sc-table-td-py) );
         --sc-table-td-px: .5em;
         --sc-table-td-py: .5em;
-
         display:block;
       }
 
-      .table-container {
+      :host([maxHeight]) .table-container {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
       }
       
       .table {
         width: 100%;
-        font-size: var(--sc-table-fs);
         display: table;
         box-sizing:border-box;
       }
 
-      /*SIZES*/
-      :host([size="2xs"]) {
-        --sc-table-fs: 0.6rem;
-      }
-      :host([size="xs"]) {
-        --sc-table-fs: 0.75rem;
-      }
-      :host([size="sm"]) {
-        --sc-table-fs: 0.85rem;
-      }
-      :host([size="lg"]) {
-        --sc-table-fs: 1.2rem;
-      }
-      :host([size="xl"]) {
-        --sc-table-fs: 1.5rem;
-      }
       :host([bordered]) .table-container {
         border:var(--sc-border-width) solid var(--sc-table-border-color) !important;
       }

package/core/components/ui/theme/theme-collection/core-variables.js

@@ -20,35 +20,46 @@ export const coreVariables = css `
 
     /* ROUNDED*/
     --sc-rounded-sm: calc(var(--sc-rounded) * 0.5);
-    --sc-rounded: 0.35rem;
+    --sc-rounded: 0.375rem;
     --sc-rounded-md: calc(var(--sc-rounded) * 1.8);
     --sc-rounded-lg: calc(var(--sc-rounded) * 3.5);
     --sc-rounded-xl: calc(var(--sc-rounded) * 7);
+    --sc-rounded-size-intensity: calc((1em - 1rem) * .4);
 
-    --sc-btn-rounded: calc(var(--sc-rounded) * 1.2);
+    /* 4 for rounded full*/
+    --sc-btn-rounded-intensity : 1.4;
+    --sc-btn-font-weight: 500;
+    --sc-btn-rounded: calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-btn-rounded-intensity) );
 
     /* Placeholder */
     --sc-placeholder-bg: rgba(17, 24, 39, 0.05);
 
-    /* Images*/
+    /* OMBRES */
     --sc-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     --sc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --sc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     --sc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
     --sc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
-    /* formulaires*/
-    --sc-border-width: max(1px, 0.085rem);
+    /* Forms */
+    --sc-border-width: max(1px, 0.12rem);
+    --sc-form-height : 2.5em;
     --sc-form-border-width: var(--sc-border-width);
     --sc-input-bg: var(--sc-base-100);
     --sc-input-border-color: var(--sc-input-bg);
-    --sc-input-rounded: calc(var(--sc-rounded) * 1.2);
+    --sc-input-rounded-intensity : 1.4;
+    --sc-input-rounded: calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-input-rounded-intensity) );
+    --sc-label-font-weight: 500;
 
-    /*Couleurs -- textes sur images*/
+    /* Contrast -- ex : Text on images */
     --sc-contrast-content: #fff;
-    --sc-contrast: #0f172a;
+    --sc-contrast: #11151f;
 
     /*Scrollbar*/
     --sc-scrollbar-bg : var(--sc-base-400);
+
+    /*Body*/
+    --sc-body-bg: var(--sc-base);
+
   }
 `;

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

@@ -1,10 +1,17 @@
 import { LitElement } from "lit";
 export declare class Theme extends LitElement {
     static styles: import("lit").CSSResult[];
+    theme: string;
+    background: boolean;
+    color: boolean;
+    font: boolean;
+    contrastDarkMode: boolean;
     connectedCallback(): void;
+    updated(): void;
     postCSSVars(): void;
     receiveMessage(event: any): void;
-    theme: string;
     getCssVariables(): Record<string, string>;
+    contrast(color: string, percent: number): string;
+    contrastBg(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/core/components/ui/theme/theme.js

@@ -15,12 +15,19 @@ let Theme = Theme_1 = class Theme extends LitElement {
     constructor() {
         super(...arguments);
         this.theme = "light";
+        this.background = false;
+        this.color = false;
+        this.font = false;
+        this.contrastDarkMode = false;
     }
     connectedCallback() {
         super.connectedCallback();
         window.addEventListener("message", (e) => this.receiveMessage(e), false);
         this.postCSSVars();
     }
+    updated() {
+        this.contrastBg();
+    }
     postCSSVars() {
         const stylesheets = document.styleSheets;
         const ssLength = stylesheets.length;
@@ -68,6 +75,24 @@ let Theme = Theme_1 = class Theme extends LitElement {
         names.forEach((name) => (result[name] = style.getPropertyValue(name)));
         return result;
     }
+    // function to darken a color based on an hexa value
+    contrast(color, percent) {
+        let num = parseInt(color.replace("#", ""), 16), amt = Math.round(2.55 * percent), R = (num >> 16) + amt, B = ((num >> 8) & 0x00ff) + amt, G = (num & 0x0000ff) + amt;
+        return ("#" +
+            (0x1000000 +
+                (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+                (B < 255 ? (B < 1 ? 0 : B) : 255) * 0x100 +
+                (G < 255 ? (G < 1 ? 0 : G) : 255))
+                .toString(16)
+                .slice(1));
+    }
+    // get de computed value of --sc-base and darken it
+    contrastBg() {
+        if (this.theme === "dark" && this.contrastDarkMode && this.background) {
+            let baseColor = window.getComputedStyle(this).getPropertyValue("--sc-base");
+            this.style.setProperty("--sc-body-bg", this.contrast(baseColor, -2.5));
+        }
+    }
     render() {
         return html `<slot></slot>`;
     }
@@ -79,7 +104,11 @@ Theme.styles = [
     css `
       :host([background]) {
         display: block !important;
-        background: var(--sc-base) !important;
+        background: var(--sc-body-bg) !important;
+        min-height: 100vh;
+      }
+      :host([contrastDarkMode]) {
+        transition: background-color 2.5s ease;
       }
 
       :host([color]) {
@@ -96,6 +125,18 @@ Theme.styles = [
 __decorate([
     property({ type: String, reflect: true })
 ], Theme.prototype, "theme", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "background", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "font", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Theme.prototype, "contrastDarkMode", void 0);
 Theme = Theme_1 = __decorate([
     customElement(tagName)
 ], Theme);

package/core/components/ui/toast/toast-item.js

@@ -124,7 +124,7 @@ SonicToastItem.styles = [
       }
 
       .sonic-toast-content {
-        padding: 1em 2rem 1em 1em;
+        padding: 1em 2.5rem 1em 1em;
         display: flex;
         gap: 0.5rem;
         overflow: auto;

package/core/mixins/FormCheckable.d.ts

@@ -42,10 +42,11 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
         initPublisher(): void;
         getFormPublisher(): any;
         updateDataValue(): void;
-        error: true | null;
+        handleBlur(e?: any): void;
+        error: boolean;
         autofocus: boolean;
+        required: boolean;
         disabled: true | null;
-        required: true | null;
         formDataProvider: string;
         props: any;
         isConnected: boolean;

package/core/mixins/FormCheckable.js

@@ -97,10 +97,13 @@ const Form = (superClass) => {
          */
         getValueForFormPublisher() {
             let publisher = this.getFormPublisher();
-            if (this.unique || this.radio) {
+            let currentValue = publisher[this.name].get();
+            if (this.radio) {
+                return this.checked && this.value != null ? this.value : currentValue;
+            }
+            if (this.unique) {
                 return this.checked && this.value != null ? this.value : null;
             }
-            let currentValue = publisher[this.name].get();
             if (!Array.isArray(currentValue)) {
                 currentValue = [];
             }

package/core/mixins/FormElement.d.ts

@@ -4,11 +4,12 @@ export interface FormElementInterface extends SubscriberInterface {
     getFormPublisher(): any;
     updateDataValue(): void;
     handleChange(e?: any): void;
+    handleBlur(e?: any): void;
     getValueForFormPublisher(): any;
-    error: true | null;
+    error: boolean;
     autofocus: boolean;
+    required: boolean;
     disabled: true | null;
-    required: true | null;
     formDataProvider: string;
     _value: any;
     get value(): any;

package/core/mixins/FormElement.js

@@ -21,10 +21,10 @@ const Form = (superClass) => {
         constructor(...args) {
             super();
             this.touched = false;
-            this.error = null;
+            this.error = false;
             this.autofocus = false;
+            this.required = false;
             this.disabled = null;
-            this.required = null;
             this.onValueAssign = null;
             this.onFormValueAssign = null;
             this.onFormDataInValidate = null;
@@ -133,6 +133,10 @@ const Form = (superClass) => {
                 formPublisher.onInvalidate((this.onFormDataInValidate));
             }
         }
+        handleBlur() {
+            this.touched = true;
+            // this.validateFormElement();
+        }
         handleChange(e) {
             this.value = e.target.value;
             const event = new Event("change");
@@ -230,10 +234,10 @@ const Form = (superClass) => {
     ], FormElement.prototype, "autofocus", void 0);
     __decorate([
         property({ type: Boolean })
-    ], FormElement.prototype, "disabled", void 0);
+    ], FormElement.prototype, "required", void 0);
     __decorate([
         property({ type: Boolean })
-    ], FormElement.prototype, "required", void 0);
+    ], FormElement.prototype, "disabled", void 0);
     __decorate([
         property()
     ], FormElement.prototype, "name", null);

package/core/mixins/FormInput.d.ts

@@ -8,22 +8,23 @@ declare const Form: <T extends Constructor<FormElementInterface>>(superClass: T)
          * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
          */
         type: "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
-        tabindex: string | null;
-        autocomplete: "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "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" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | null;
+        tabindex?: number | undefined;
+        autocomplete?: "url" | "name" | "language" | "on" | "tel" | "email" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: any): void;
+        handleBlur(e?: any): void;
         getValueForFormPublisher(): any;
-        error: true | null;
+        error: boolean;
         autofocus: boolean;
+        required: boolean;
         disabled: true | null;
-        required: true | null;
         formDataProvider: string;
-        _value: any;
         /**
          * Le type De l'input, comme en html cependant tous les types ne sont pas actuellements compatibles en raison du style en vigueur
          * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
          */
+        _value: any;
         value: any;
         _name: string;
         name: string;

package/core/mixins/FormInput.js

@@ -14,8 +14,6 @@ const Form = (superClass) => {
              * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
              */
             this.type = "text";
-            this.tabindex = null;
-            this.autocomplete = null;
             args;
         }
         validateFormElement() {
@@ -32,7 +30,7 @@ const Form = (superClass) => {
         property({ type: String })
     ], FormInput.prototype, "type", void 0);
     __decorate([
-        property({ type: String })
+        property({ type: Number })
     ], FormInput.prototype, "tabindex", void 0);
     __decorate([
         property({ type: String })

package/mixins.d.ts

@@ -55,10 +55,11 @@ export declare const FormCheckable: <T extends new (...args: any[]) => myFormEle
         initPublisher(): void;
         getFormPublisher(): any;
         updateDataValue(): void;
-        error: true | null;
+        handleBlur(e?: any): void;
+        error: boolean;
         autofocus: boolean;
+        required: boolean;
         disabled: true | null;
-        required: true | null;
         formDataProvider: string;
         props: any;
         isConnected: boolean;
@@ -89,16 +90,17 @@ export declare const FormInput: <T extends new (...args: any[]) => myFormElement
     new (...args: any[]): {
         validateFormElement(): void;
         type: "number" | "search" | "file" | "button" | "password" | "url" | "color" | "hidden" | "time" | "image" | "text" | "reset" | "submit" | "month" | "week" | "checkbox" | "radio" | "range" | "tel" | "email" | "date" | "datetime-local";
-        tabindex: string | null;
-        autocomplete: "url" | "name" | "language" | "on" | "tel" | "email" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | null;
+        tabindex?: number | undefined;
+        autocomplete?: "url" | "name" | "language" | "on" | "tel" | "email" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | undefined;
         getFormPublisher(): any;
         updateDataValue(): void;
         handleChange(e?: any): void;
+        handleBlur(e?: any): void;
         getValueForFormPublisher(): any;
-        error: true | null;
+        error: boolean;
         autofocus: boolean;
+        required: boolean;
         disabled: true | null;
-        required: true | null;
         formDataProvider: string;
         _value: any;
         value: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "1.1.28",
+  "version": "1.1.30",
   "customElements": "custom-elements.json",
   "license": "MIT",
   "publishConfig": {
@@ -56,8 +56,10 @@
     "./functional/subscriber": "./core/components/functional/subscriber/subscriber.js",
     "./core/components/ui/_css/scroll": "./core/components/ui/_css/scroll.js",
     "./ui/_css/scroll": "./core/components/ui/_css/scroll.js",
-    "./core/components/ui/_css/types": "./core/components/ui/_css/types.js",
-    "./ui/_css/types": "./core/components/ui/_css/types.js",
+    "./core/components/ui/_css/size": "./core/components/ui/_css/size.js",
+    "./ui/_css/size": "./core/components/ui/_css/size.js",
+    "./core/components/ui/_css/type": "./core/components/ui/_css/type.js",
+    "./ui/_css/type": "./core/components/ui/_css/type.js",
     "./core/components/ui/alert/alert": "./core/components/ui/alert/alert.js",
     "./ui/alert": "./core/components/ui/alert/alert.js",
     "./core/components/ui/badge/badge": "./core/components/ui/badge/badge.js",

package/core/components/ui/_css/types.d.ts

@@ -1,2 +0,0 @@
-export declare const typesColor: import("lit").CSSResult;
-export declare const typesBg: import("lit").CSSResult;