godown 1.1.6 → 1.2.0

package/input-form/select-input.js

@@ -4,7 +4,7 @@ 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, css, property, query, state, define, conf, cssvar } from "../deps.js";
+import { html, css, property, query, define, conf, cssvar, DisableWarning, LitElement } from "../deps.js";
 import STD from "./std.js";
 let SelectInput = class SelectInput extends STD {
     constructor() {
@@ -49,12 +49,10 @@ let SelectInput = class SelectInput extends STD {
               @click=${() => {
                     this.select(this.value[i]);
                 }}
-              t="1678769821062"
               viewBox="0 0 1024 1024"
               version="1.1"
-              p-id="2770"
             >
-              <path d="M960 512c0-249.6-198.4-448-448-448S64 262.4 64 512s198.4 448 448 448 448-198.4 448-448zM691.2 736L512 556.8 332.8 736c-12.8 12.8-32 12.8-44.8 0-12.8-12.8-12.8-32 0-44.8L467.2 512 288 332.8c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0L512 467.2 691.2 288c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L556.8 512 736 691.2c12.8 12.8 12.8 32 0 44.8-12.8 12.8-32 12.8-44.8 0z" fill="currentColor" p-id="2771"></path>
+              <path d="M960 512c0-249.6-198.4-448-448-448S64 262.4 64 512s198.4 448 448 448 448-198.4 448-448zM691.2 736L512 556.8 332.8 736c-12.8 12.8-32 12.8-44.8 0-12.8-12.8-12.8-32 0-44.8L467.2 512 288 332.8c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0L512 467.2 691.2 288c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L556.8 512 736 691.2c12.8 12.8 12.8 32 0 44.8-12.8 12.8-32 12.8-44.8 0z" fill="currentColor"></path>
             </svg>
           </i>`);
             }
@@ -72,23 +70,41 @@ let SelectInput = class SelectInput extends STD {
         (_a = this._input) === null || _a === void 0 ? void 0 : _a.focus(options);
         this.open = true;
     }
+    connectedCallback() {
+        LitElement.prototype.connectedCallback.call(this);
+    }
+    getIndexFunc(option) {
+        return this.getIndexFunc(option);
+    }
     firstUpdated() {
+        if (this.def) {
+            if (this.only) {
+                this.select(this.def);
+            }
+            else {
+                for (const i of this.def.split(";")) {
+                    if (i.trim()) {
+                        this.select(i);
+                    }
+                }
+            }
+        }
         this._focusCheck();
         this.assigned.forEach((option) => {
-            if (option.value) {
+            if (this.getIndexFunc(option)) {
                 option.addEventListener("click", () => {
-                    this.select(option.value, option.innerText);
+                    this.select(this.getIndexFunc(option), option.innerText);
                 });
             }
             else if (option.children) {
                 [...option.children].forEach((option) => {
                     option.addEventListener("click", () => {
-                        this.select(option.value, option.innerText);
+                        this.select(this.getIndexFunc(option), option.innerText);
                     });
                 });
             }
         });
-        this.addEventListener("change", (e) => {
+        this.addEventListener("change", () => {
             this.open = !this.only;
         });
         document.addEventListener("click", (e) => {
@@ -97,17 +113,31 @@ let SelectInput = class SelectInput extends STD {
             }
         });
     }
+    disconnectedCallback() {
+        this.assigned.forEach((option) => {
+            if (this.getIndexFunc(option)) {
+                option.removeEventListener("click", () => { });
+            }
+            else if (option.children) {
+                [...option.children].forEach((option) => {
+                    option.removeEventListener("click", () => {
+                        this.select(this.getIndexFunc(option), option.innerText);
+                    });
+                });
+            }
+        });
+    }
     select(value, text) {
         if (text === undefined || text === null) {
             this.assigned.forEach((option) => {
-                if (option.value) {
-                    if (option.value == value) {
+                if (this.getIndexFunc(option)) {
+                    if (this.getIndexFunc(option) == value) {
                         text = option.innerText;
                     }
                 }
                 else if (option.children) {
                     [...option.children].forEach((option) => {
-                        if (option.value == value) {
+                        if (this.getIndexFunc(option) == value) {
                             text = option.innerText;
                         }
                     });
@@ -135,8 +165,8 @@ let SelectInput = class SelectInput extends STD {
             }
         }
         this.assigned.forEach((option) => {
-            if (option.value) {
-                if (this.value.includes(option.value)) {
+            if (this.getIndexFunc(option)) {
+                if (this.value.includes(this.getIndexFunc(option))) {
                     option.classList.add(this.selcls);
                 }
                 else {
@@ -145,7 +175,7 @@ let SelectInput = class SelectInput extends STD {
             }
             else if (option.children) {
                 [...option.children].forEach((option) => {
-                    if (this.value.includes(option.value)) {
+                    if (this.value.includes(this.getIndexFunc(option))) {
                         option.classList.add(this.selcls);
                     }
                     else {
@@ -164,7 +194,7 @@ let SelectInput = class SelectInput extends STD {
             value = value.split(";").pop().trim();
         }
         this.assigned.forEach((option) => {
-            if (option.value) {
+            if (this.getIndexFunc(option)) {
                 option.style.display = "block";
             }
             if (option.children) {
@@ -176,8 +206,8 @@ let SelectInput = class SelectInput extends STD {
         });
         if (value) {
             this.assigned.forEach((option) => {
-                if (option.value) {
-                    if (option.value.toLowerCase().includes(value.toLowerCase()) || option.innerText.toLowerCase().includes(value.toLowerCase())) {
+                if (this.getIndexFunc(option)) {
+                    if (this.getIndexFunc(option).toLowerCase().includes(value.toLowerCase()) || option.innerText.toLowerCase().includes(value.toLowerCase())) {
                         option.style.display = "block";
                     }
                     else {
@@ -186,7 +216,7 @@ let SelectInput = class SelectInput extends STD {
                 }
                 else if (option.children) {
                     [...option.children].forEach((option) => {
-                        if (option.value.toLowerCase().includes(value.toLowerCase()) || option.innerText.toLowerCase().includes(value.toLowerCase())) {
+                        if (this.getIndexFunc(option).toLowerCase().includes(value.toLowerCase()) || option.innerText.toLowerCase().includes(value.toLowerCase())) {
                             option.style.display = "block";
                         }
                         else {
@@ -212,7 +242,7 @@ let SelectInput = class SelectInput extends STD {
         this.text = [];
         this._input.value = "";
         this.assigned.forEach((option) => {
-            if (option.value) {
+            if (this.getIndexFunc(option)) {
                 option.classList.remove(this.selcls);
             }
             else if (option.children) {
@@ -324,7 +354,7 @@ __decorate([
     property()
 ], SelectInput.prototype, "pla", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], SelectInput.prototype, "only", void 0);
 __decorate([
     property()
@@ -333,10 +363,10 @@ __decorate([
     property({ type: Array })
 ], SelectInput.prototype, "value", void 0);
 __decorate([
-    property()
+    property({ reflect: true })
 ], SelectInput.prototype, "name", void 0);
 __decorate([
-    state()
+    property({ type: Array })
 ], SelectInput.prototype, "text", void 0);
 __decorate([
     property({ type: Boolean })
@@ -351,4 +381,5 @@ SelectInput = __decorate([
     define("select-input")
 ], SelectInput);
 export { SelectInput };
+DisableWarning(SelectInput);
 export default SelectInput;

package/input-form/sign-form.d.ts

@@ -1,11 +1,12 @@
+import { CSSResultGroup } from "../deps.js";
 import STD from "./std.js";
 import "./label-input.js";
 export declare class SignForm extends STD {
     name: string;
     set: 0 | 1 | 2;
-    static styles: (import("lit").CSSResult | import("@lit/reactive-element/css-tag.js").CSSResultGroup[])[];
+    static styles: CSSResultGroup[];
     _form: HTMLFormElement;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     opt(): any[];
     reset(): void;
     namevalue(): [string, {

package/input-form/sign-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sign-form.d.ts","sourceRoot":"","sources":["../../src/input-form/sign-form.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,kBAAkB,CAAC;AAC1B,qBACa,QAAS,SAAQ,GAAG;IACnB,IAAI,SAAM;IACM,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IAC/C,MAAM,CAAC,MAAM,4FAiBX;IACa,KAAK,EAAE,eAAe,CAAC;IACtC,MAAM;IAON,GAAG;IAOH,KAAK;IAuBL,SAAS,IAAI,CAAC,MAAM,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IA8B7C,QAAQ,IAAI,QAAQ;CA6BrB;AAUD,qBACa,QAAS,SAAQ,QAAQ;;CAKrC;AACD,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;QACtB,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"sign-form.d.ts","sourceRoot":"","sources":["../../src/input-form/sign-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,cAAc,EAAE,MAAM,YAAY,CAAC;AAChF,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,kBAAkB,CAAC;AAC1B,qBACa,QAAS,SAAQ,GAAG;IACnB,IAAI,SAAM;IACM,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IAC/C,MAAM,CAAC,MAAM,mBAiBS;IACP,KAAK,EAAE,eAAe,CAAC;IACtC,MAAM;IAON,GAAG;IAOH,KAAK;IAuBL,SAAS,IAAI,CAAC,MAAM,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IA8B7C,QAAQ,IAAI,QAAQ;CA6BrB;AAUD,qBACa,QAAS,SAAQ,QAAQ;;CAKrC;AACD,eAAe,QAAQ,CAAC;AACxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;QACtB,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/input-form/split-input.d.ts

@@ -1,6 +1,7 @@
+import { CSSResultGroup } from "../deps.js";
 import STD from "./std.js";
 export declare class SplitInput extends STD {
-    static styles: (import("lit").CSSResult | import("@lit/reactive-element/css-tag.js").CSSResultGroup[])[];
+    static styles: CSSResultGroup[];
     name: string;
     value: string;
     max: number;
@@ -10,7 +11,7 @@ export declare class SplitInput extends STD {
     _spans: NodeListOf<HTMLSpanElement>;
     current: number;
     currentValue: Array<string | null>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     firstUpdated(): void;
     _handleInput(e: InputEvent): void;
     focus(): void;

package/input-form/split-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-input.d.ts","sourceRoot":"","sources":["../../src/input-form/split-input.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,qBACa,UAAW,SAAQ,GAAG;IACjC,MAAM,CAAC,MAAM,4FAoDX;IACU,IAAI,SAAM;IACV,KAAK,SAAM;IACK,GAAG,SAAK;IACR,KAAK,SAAM;IACV,SAAS,UAAS;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACtD,OAAO,EAAE,MAAM,CAAK;IACpB,YAAY,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAM;IACxC,MAAM;IAUN,YAAY;IAiBZ,YAAY,CAAC,CAAC,EAAE,UAAU;IA2B1B,KAAK;IAGL,OAAO,CAAC,CAAC,SAAe;IAOxB,IAAI,CAAC,CAAC,SAAe;IAIrB,KAAK;CASN;AACD,eAAe,UAAU,CAAC;AAC1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"split-input.d.ts","sourceRoot":"","sources":["../../src/input-form/split-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwD,cAAc,EAAE,MAAM,YAAY,CAAC;AAClG,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,qBACa,UAAW,SAAQ,GAAG;IACjC,MAAM,CAAC,MAAM,mBAoDS;IACV,IAAI,SAAM;IACV,KAAK,SAAM;IACK,GAAG,SAAK;IACR,KAAK,SAAM;IACV,SAAS,UAAS;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACtD,OAAO,EAAE,MAAM,CAAK;IACpB,YAAY,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAM;IACxC,MAAM;IAUN,YAAY;IAiBZ,YAAY,CAAC,CAAC,EAAE,UAAU;IA2B1B,KAAK;IAGL,OAAO,CAAC,CAAC,SAAe;IAOxB,IAAI,CAAC,CAAC,SAAe;IAIrB,KAAK;CASN;AACD,eAAe,UAAU,CAAC;AAC1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/input-form/std.d.ts

@@ -1,4 +1,5 @@
-import { GLOBSTD } from "../deps.js";
+import { CSSResultGroup, GLOBSTD } from "../deps.js";
+export type InputType = "hidden" | "text" | "search" | "tel" | "url" | "email" | "password" | "datetime" | "date" | "month" | "week" | "time" | "datetime-local" | "number" | "range" | "color" | "checkbox" | "radio" | "file" | "image";
 export default class InputFormSTD extends GLOBSTD {
     name: string;
     value: any;
@@ -6,7 +7,7 @@ export default class InputFormSTD extends GLOBSTD {
     _input: HTMLInputElement;
     compositing: boolean;
     autofocus: boolean;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResultGroup[];
+    static styles: CSSResultGroup[];
     namevalue(): [string, any];
     reset(): void;
     _handleInput(e: any): void;

package/input-form/std.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"std.d.ts","sourceRoot":"","sources":["../../src/input-form/std.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAClD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,OAAO;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,gBAAgB,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,MAAM,8DAmBX;IACF,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;IAG1B,KAAK;IAIL,YAAY,CAAC,CAAC,EAAE,GAAG;IAOnB,aAAa;IAGb,iBAAiB;IAKjB,iBAAiB;IASjB,WAAW;IAKX,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAG5B,YAAY;CAIb"}
+{"version":3,"file":"std.d.ts","sourceRoot":"","sources":["../../src/input-form/std.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAElE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1O,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,OAAO;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,gBAAgB,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,MAAM,mBAmBS;IACtB,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;IAG1B,KAAK;IAIL,YAAY,CAAC,CAAC,EAAE,GAAG;IAOnB,aAAa;IAGb,iBAAiB;IAKjB,iBAAiB;IASjB,WAAW;IAKX,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAG5B,YAAY;CAIb"}

package/input-form/switch-input.d.ts

@@ -1,6 +1,7 @@
+import { CSSResultGroup } from "../deps.js";
 import STD from "./std.js";
 export declare class SwitchInput extends STD {
-    static styles: (import("lit").CSSResult | import("@lit/reactive-element/css-tag.js").CSSResultGroup[])[];
+    static styles: CSSResultGroup[];
     checked: boolean;
     disabled: boolean;
     base: "fat" | "rect";
@@ -8,7 +9,7 @@ export declare class SwitchInput extends STD {
     name: string;
     value: string;
     _input: HTMLInputElement;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     reset(): void;
     connectedCallback(): void;
     _handleChange(): void;

package/input-form/switch-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch-input.d.ts","sourceRoot":"","sources":["../../src/input-form/switch-input.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,qBACa,WAAY,SAAQ,GAAG;IAClC,MAAM,CAAC,MAAM,4FAwGX;IAC2B,OAAO,UAAS;IAChB,QAAQ,UAAS;IAClC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAU;IAC9B,GAAG,SAAW;IACd,IAAI,SAAc;IAClB,KAAK,SAAQ;IACT,MAAM,EAAE,gBAAgB,CAAC;IACzC,MAAM;IAUN,KAAK;IAIL,iBAAiB;IAQjB,aAAa;IAKb,SAAS,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;CAG/B;AACD,eAAe,WAAW,CAAC;AAC3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"switch-input.d.ts","sourceRoot":"","sources":["../../src/input-form/switch-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8C,cAAc,EAAE,MAAM,YAAY,CAAC;AACxF,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,qBACa,WAAY,SAAQ,GAAG;IAClC,MAAM,CAAC,MAAM,mBAwGS;IACO,OAAO,UAAS;IAChB,QAAQ,UAAS;IAClC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAU;IAC9B,GAAG,SAAW;IACd,IAAI,SAAc;IAClB,KAAK,SAAQ;IACT,MAAM,EAAE,gBAAgB,CAAC;IACzC,MAAM;IAUN,KAAK;IAIL,iBAAiB;IAQjB,aAAa;IAKb,SAAS,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;CAG/B;AACD,eAAe,WAAW,CAAC;AAC3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/items/alert-item.d.ts

@@ -5,7 +5,7 @@ export declare class AlertItem extends STD {
     autoclose: number;
     title: string;
     content: string;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     close(): void;
 }
 export default AlertItem;

package/items/alert-item.js

@@ -4,7 +4,7 @@ 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, css, property, define } from "../deps.js";
+import { html, css, property, define, cssvar } from "../deps.js";
 import STD from "./std.js";
 let AlertItem = class AlertItem extends STD {
     constructor() {
@@ -48,28 +48,28 @@ AlertItem.styles = css `
       transform: translateY(-50%);
     }
     .success {
-      --color: #3c763d;
-      --super: #2b542c;
-      --background: #dff0d8;
-      --border: #d6e9c6;
+      ${cssvar}--color: #3c763d;
+      ${cssvar}--super: #2b542c;
+      ${cssvar}--background: #dff0d8;
+      ${cssvar}--border: #d6e9c6;
     }
     .info {
-      --color: #31708f;
-      --background: #d9edf7;
-      --border: #bce8f1;
-      --super: #245269;
+      ${cssvar}--color: #31708f;
+      ${cssvar}--background: #d9edf7;
+      ${cssvar}--border: #bce8f1;
+      ${cssvar}--super: #245269;
     }
     .warning {
-      --color: #8a6d3b;
-      --background: #fcf8e3;
-      --border: #faebcc;
-      --super: #66512c;
+      ${cssvar}--color: #8a6d3b;
+      ${cssvar}--background: #fcf8e3;
+      ${cssvar}--border: #faebcc;
+      ${cssvar}--super: #66512c;
     }
     .danger {
-      --color: #a94442;
-      --background: #f2dede;
-      --border: #ebccd1;
-      --super: #843534;
+      ${cssvar}--color: #a94442;
+      ${cssvar}--background: #f2dede;
+      ${cssvar}--border: #ebccd1;
+      ${cssvar}--super: #843534;
     }
     .alert {
       display: flex;
@@ -78,9 +78,9 @@ AlertItem.styles = css `
       border: 1px solid transparent;
       border-radius: 4px;
       transition: all 0.25s;
-      color: var(--color);
-      background-color: var(--background);
-      border-color: var(--border);
+      color: var(${cssvar}--color);
+      background-color: var(${cssvar}--background);
+      border-color: var(${cssvar}--border);
       animation: alert 0.25s ease-in-out;
     }
     @keyframes alert {
@@ -113,15 +113,15 @@ AlertItem.styles = css `
       width: 1.6em;
     }
     aside.close:hover path {
-      stroke: var(--super);
+      stroke: var(${cssvar}--super);
     }
     path {
-      stroke: var(--color);
+      stroke: var(${cssvar}--color);
       transition: all 0.3s;
     }
     .alert ::slotted(a) {
       font-weight: bold;
-      color: var(--super);
+      color: var(${cssvar}--super);
     }
   `;
 __decorate([

package/items/avatar-anchor.d.ts

@@ -8,8 +8,8 @@ export declare class AvatarAnchor extends STD {
     gap: boolean;
     static styles: import("lit").CSSResult;
     constructor();
-    render(): import("lit-html").TemplateResult<1>;
-    ava(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    ava(): import("lit").TemplateResult<1>;
 }
 export default AvatarAnchor;
 declare global {

package/items/avatar-anchor.js

@@ -4,7 +4,7 @@ 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, css, property, classMap, ifDefined, define } from "../deps.js";
+import { html, css, property, classMap, ifDefined, define, cssvar } from "../deps.js";
 import STD from "./std.js";
 let AvatarAnchor = class AvatarAnchor extends STD {
     constructor() {
@@ -78,14 +78,14 @@ AvatarAnchor.styles = css `
       height: 100%;
     }
     div {
-      --ava: 2.5em;
+      ${cssvar}--ava: 2.5em;
     }
     a {
       color: inherit;
-      height: var(--ava);
-      width: var(--ava);
-      min-height: var(--ava);
-      min-width: var(--ava);
+      height: var(${cssvar}--ava);
+      width: var(${cssvar}--ava);
+      min-height: var(${cssvar}--ava);
+      min-width: var(${cssvar}--ava);
       display: flex;
       position: relative;
     }
@@ -98,13 +98,13 @@ AvatarAnchor.styles = css `
       justify-content: center;
     }
     .left.gap {
-      margin-right: var(--ava);
+      margin-right: var(${cssvar}--ava);
     }
     .right.gap {
-      margin-left: var(--ava);
+      margin-left: var(${cssvar}--ava);
     }
     slot[name="bar"]::slotted(*) {
-      height: var(--ava);
+      height: var(${cssvar}--ava);
     }
     slot[name="state"] {
       position: absolute;
@@ -116,7 +116,7 @@ AvatarAnchor.styles = css `
     }
     .left section,
     .right section {
-      min-height: var(--ava);
+      min-height: var(${cssvar}--ava);
       display: flex;
       flex-direction: column;
       flex: 1;

package/items/base-button.d.ts

@@ -6,7 +6,7 @@ export declare class BaseButton extends STD {
     href: string;
     target: string;
     color: "black" | "white" | "yellow" | "gary" | "red" | "blue" | "green";
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 export default BaseButton;
 declare global {

package/items/base-button.js

@@ -4,7 +4,7 @@ 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, css, property, classMap, ifDefined, define } from "../deps.js";
+import { html, css, property, classMap, ifDefined, define, cssvar } from "../deps.js";
 import STD from "./std.js";
 const originstyle = css `
   :host {
@@ -14,13 +14,13 @@ const originstyle = css `
   }
   .ghost,
   .ghost:hover {
-    color: var(--background);
-    border-color: var(--background);
+    color: var(${cssvar}--background);
+    border-color: var(${cssvar}--background);
     background-color: transparent;
   }
   .ghost:active {
-    color: var(--active);
-    background-color: var(--background-active);
+    color: var(${cssvar}--active);
+    background-color: var(${cssvar}--background-active);
   }
   a {
     display: flex;
@@ -38,100 +38,100 @@ const originstyle = css `
     cursor: inherit;
     text-decoration: inherit;
     transition: all 0.2s ease-in;
-    color: var(--color);
-    border-color: var(--border);
-    background-color: var(--background);
+    color: var(${cssvar}--color);
+    border-color: var(${cssvar}--border);
+    background-color: var(${cssvar}--background);
   }
   a:hover {
-    color: var(--hover);
-    border-color: var(--border-hover);
-    background-color: var(--background-hover);
+    color: var(${cssvar}--hover);
+    border-color: var(${cssvar}--border-hover);
+    background-color: var(${cssvar}--background-hover);
   }
   a:active {
     transition: 0s;
-    color: var(--active);
-    border-color: var(--border-active);
-    background-color: var(--background-active);
+    color: var(${cssvar}--active);
+    border-color: var(${cssvar}--border-active);
+    background-color: var(${cssvar}--background-active);
   }
   a[disabled],
   a[disabled]:hover,
   a[disabled]:active {
-    color: var(--color-disabled);
-    border-color: var(--border-disabled);
-    background-color: var(--background-disabled);
+    color: var(${cssvar}--color-disabled);
+    border-color: var(${cssvar}--border-disabled);
+    background-color: var(${cssvar}--background-disabled);
   }
 `;
 const colorful = css `
   .black {
-    --color: #f0f0f0;
-    --border: #444444;
-    --background: #2c2c2c;
-    --hover: #fafafa;
-    --border-hover: #707070;
-    --background-hover: #303030;
-    --active: #fafafa;
-    --border-active: #5a5a5a;
-    --background-active: #3a3a3a;
+    ${cssvar}--color: #f0f0f0;
+    ${cssvar}--border: #444444;
+    ${cssvar}--background: #2c2c2c;
+    ${cssvar}--hover: #fafafa;
+    ${cssvar}--border-hover: #707070;
+    ${cssvar}--background-hover: #303030;
+    ${cssvar}--active: #fafafa;
+    ${cssvar}--border-active: #5a5a5a;
+    ${cssvar}--background-active: #3a3a3a;
   }
   .white {
-    --color: #2c2c2c;
-    --border: #44444450;
-    --background: #f8f8f8;
-    --hover: #707070;
-    --border-hover: #44444450;
-    --background-hover: #f4f4f4;
-    --border-active: #aaaaaa;
-    --background-active: #aaaaaa;
+    ${cssvar}--color: #2c2c2c;
+    ${cssvar}--border: #44444450;
+    ${cssvar}--background: #f8f8f8;
+    ${cssvar}--hover: #707070;
+    ${cssvar}--border-hover: #44444450;
+    ${cssvar}--background-hover: #f4f4f4;
+    ${cssvar}--border-active: #aaaaaa;
+    ${cssvar}--background-active: #aaaaaa;
   }
   .yellow {
-    --color: #fafafa;
-    --border: #44444450;
-    --background: #ebb10d;
-    --hover: #ececec;
-    --border-hover: #44444450;
-    --background-hover: #f9bd10;
-    --background-active: #d7a422;
-    --border-active: #44444420;
+    ${cssvar}--color: #fafafa;
+    ${cssvar}--border: #44444450;
+    ${cssvar}--background: #ebb10d;
+    ${cssvar}--hover: #ececec;
+    ${cssvar}--border-hover: #44444450;
+    ${cssvar}--background-hover: #f9bd10;
+    ${cssvar}--background-active: #d7a422;
+    ${cssvar}--border-active: #44444420;
   }
   .gary {
-    --color: #fafafa;
-    --border: #44444450;
-    --background: #51535e;
-    --hover: #ececec;
-    --border-hover: #44444450;
-    --background-hover: #5e616d;
-    --background-active: #3f3d47;
-    --border-active: #44444420;
+    ${cssvar}--color: #fafafa;
+    ${cssvar}--border: #44444450;
+    ${cssvar}--background: #51535e;
+    ${cssvar}--hover: #ececec;
+    ${cssvar}--border-hover: #44444450;
+    ${cssvar}--background-hover: #5e616d;
+    ${cssvar}--background-active: #3f3d47;
+    ${cssvar}--border-active: #44444420;
   }
   .red {
-    --color: #fafafa;
-    --border: #44444450;
-    --background: #d11a2d;
-    --hover: #ececec;
-    --border-hover: #44444450;
-    --background-hover: #c62828;
-    --background-active: #a61b29;
-    --border-active: #44444420;
+    ${cssvar}--color: #fafafa;
+    ${cssvar}--border: #44444450;
+    ${cssvar}--background: #d11a2d;
+    ${cssvar}--hover: #ececec;
+    ${cssvar}--border-hover: #44444450;
+    ${cssvar}--background-hover: #c62828;
+    ${cssvar}--background-active: #a61b29;
+    ${cssvar}--border-active: #44444420;
   }
   .blue {
-    --color: #fafafa;
-    --border: #44444450;
-    --background: #1177b0;
-    --hover: #ececec;
-    --border-hover: #44444450;
-    --background-hover: #11659a;
-    --background-active: #144a74;
-    --border-active: #44444420;
+    ${cssvar}--color: #fafafa;
+    ${cssvar}--border: #44444450;
+    ${cssvar}--background: #1177b0;
+    ${cssvar}--hover: #ececec;
+    ${cssvar}--border-hover: #44444450;
+    ${cssvar}--background-hover: #11659a;
+    ${cssvar}--background-active: #144a74;
+    ${cssvar}--border-active: #44444420;
   }
   .green {
-    --color: #fafafa;
-    --border: #44444450;
-    --background: #12aa8c;
-    --hover: #ececec;
-    --border-hover: #44444450;
-    --background-hover: #1db68f;
-    --background-active: #248067;
-    --border-active: #44444420;
+    ${cssvar}--color: #fafafa;
+    ${cssvar}--border: #44444450;
+    ${cssvar}--background: #12aa8c;
+    ${cssvar}--hover: #ececec;
+    ${cssvar}--border-hover: #44444450;
+    ${cssvar}--background-hover: #1db68f;
+    ${cssvar}--background-active: #248067;
+    ${cssvar}--border-active: #44444420;
   }
 `;
 let BaseButton = class BaseButton extends STD {

package/items/dialog-item.d.ts

@@ -7,7 +7,7 @@ export declare class DialogItem extends STD {
     modal: boolean;
     call: "left" | "center" | "right" | "top" | "bottom";
     get _div(): HTMLDivElement;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     firstUpdated(): void;
     show(): void;
     showModal(): void;