godown 3.0.0-canary.0 → 3.0.0-canary.10

package/README.md

@@ -8,7 +8,21 @@ Simple, stylized, semantic web components.
 npm i godown
 ```
 
-## Usages
+## Import
+
+Import all components.
+
+```js
+import Alert from "godown/alert.js";
+```
+
+Import one component.
+
+```js
+import { Alert } from "godown";
+```
+
+## Usage
 
 ### HTML
 
@@ -19,12 +33,8 @@ npm i godown
 ### JS
 
 ```js
-// import all
 import { Alert } from "godown";
 
-// import one
-import Alert from "godown/alert.js";
-
 const alert = new Alert();
 alert.title = "Alert";
 
@@ -33,11 +43,12 @@ document.body.appendChild(alert);
 
 ### React
 
-react is now in the standalone package (@godown/react)
+React components is now in the standalone package (@godown/react).
+
+This package only provides empty conversion.
 
 ```jsx
-import { Alert } from "@godown/react"; // import all
-// import { Alert } from "@godown/react/alert.js";  // import one
+import { Alert } from "@godown/react";
 
 export default function () {
   return <Alert title="Alert" />;
@@ -110,3 +121,21 @@ Element-scoped css variables will start with `--${tagName}--`.
 ```html
 <godown-button style="--godown-button--focus-scale: .95;"></godown-button>
 ```
+
+### Undefined
+
+Undefined elements in the `./components` sub path.
+
+```ts
+import Button "godown/components/button.js";
+
+customElements.define("my-button", Button);
+```
+
+```html
+<my-button>Click me</my-button>
+```
+
+### Conditional import
+
+Under "development" condition, the template will not be compressed.

package/components/alert.d.ts

@@ -2,6 +2,8 @@ import { GlobalStyle } from "../core/global-style.js";
 /**
  * {@linkcode Alert} renders a alert.
  *
+ * Color defaults to blue.
+ *
  * @slot - Alert content.
  * @slot title - Alert title.
  * @slot icon - Alert icon.
@@ -16,7 +18,7 @@ declare class Alert extends GlobalStyle {
      * The tone of the component.
      * Overrides the color of the call.
      */
-    color: "white" | "black" | "gray" | "green" | "teal" | "blue" | "red" | "purple" | "orange" | "yellow" | "pink";
+    color: "white" | "black" | "gray" | "green" | "teal" | "blue" | "red" | "purple" | "orange" | "yellow" | "pink" | "none";
     /**
      * Close delay, if 0, it will not be closed automatically.
      */
@@ -32,7 +34,7 @@ declare class Alert extends GlobalStyle {
     /**
      * Set true to hide the close button.
      *
-     * The behavior may change due to the {@linkcode variant} property
+     * The behavior may change due to the {@linkcode variant} property.
      */
     hideClose: boolean;
     /**
@@ -41,7 +43,7 @@ declare class Alert extends GlobalStyle {
      * If variant is `"blockquote"`, hide the close button.
      */
     variant: "blockquote" | "dark" | "light";
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): (symbol | import("lit").TemplateResult<1>)[];
     close(): void;
     protected firstUpdated(): void;
     static alert(root: HTMLElement, option: Partial<Alert>): Alert;

package/components/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../src/components/alert.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAwFlF;;;;;;;GAOG;AACH,cAMM,KAAM,SAAQ,WAAW;IAC7B;;OAEG;IAEH,IAAI,EAAE,KAAK,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAAC;IAE1F;;;OAGG;IAEH,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEhH;;OAEG;IAEH,SAAS,SAAK;IAEd;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IAIH,SAAS,UAAS;IAElB;;;;OAIG;IAEH,OAAO,EAAE,YAAY,GAAG,MAAM,GAAG,OAAO,CAAU;IAElD,SAAS,CAAC,MAAM;IAWhB,KAAK;IAKL,SAAS,CAAC,YAAY;IAMtB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK;CAM/D;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../src/components/alert.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAwFlF;;;;;;;;;GASG;AACH,cAIM,KAAM,SAAQ,WAAW;IAC7B;;OAEG;IAEH,IAAI,EAAE,KAAK,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAAC;IAE1F;;;OAGG;IAEH,KAAK,EACD,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,MAAM,CAAU;IAEpB;;OAEG;IAEH,SAAS,SAAK;IAEd;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IAEH,SAAS,UAAS;IAElB;;;;OAIG;IAEH,OAAO,EAAE,YAAY,GAAG,MAAM,GAAG,OAAO,CAAU;IAElD,SAAS,CAAC,MAAM;IAahB,KAAK;IAKL,SAAS,CAAC,YAAY;IAMtB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK;CAM/D;AAED,eAAe,KAAK,CAAC"}

package/components/alert.js

@@ -1,9 +1,9 @@
 import { __decorate } from 'tslib';
 import { godown } from '@godown/element/decorators/godown.js';
 import { styles } from '@godown/element/decorators/styles.js';
-import { conditionIf } from '@godown/element/directives/condition-if.js';
 import { htmlSlot } from '@godown/element/directives/html-slot.js';
-import { constructCSS } from '@godown/element/tools/css.js';
+import { htmlStyle } from '@godown/element/directives/html-style.js';
+import { constructCSSObject, toVar } from '@godown/element/tools/css.js';
 import iconCheckAltCircle from '@godown/f7-icon/icons/checkmark-alt-circle.js';
 import iconExclamationCircle from '@godown/f7-icon/icons/exclamationmark-circle.js';
 import iconInfoCircle from '@godown/f7-icon/icons/info-circle.js';
@@ -12,7 +12,7 @@ import iconQuestionCircle from '@godown/f7-icon/icons/question-circle.js';
 import iconSlashCircle from '@godown/f7-icon/icons/slash-circle.js';
 import iconXmark from '@godown/f7-icon/icons/xmark.js';
 import iconXmarkCircle from '@godown/f7-icon/icons/xmark-circle.js';
-import { unsafeCSS, css, html } from 'lit';
+import { html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { scopePrefix, cssGlobalVars, GlobalStyle } from '../core/global-style.js';
 
@@ -22,7 +22,7 @@ const vars = ["color", "background"].map((v) => `${cssScope}--${v}`);
 const genDark = (key) => {
     return [cssGlobalVars._colors[key][5], cssGlobalVars._colors[key][9]];
 };
-const darkStyles = constructCSS(vars, {
+const darkStyles = constructCSSObject(vars, {
     green: genDark("green"),
     blue: genDark("blue"),
     orange: genDark("orange"),
@@ -34,11 +34,11 @@ const darkStyles = constructCSS(vars, {
     gray: [cssGlobalVars._colors.lightgray[5], cssGlobalVars._colors.darkgray[5]],
     white: [cssGlobalVars._colors.lightgray[2], cssGlobalVars._colors.darkgray[7]],
     black: [cssGlobalVars._colors.darkgray[8], cssGlobalVars._colors.lightgray[5]],
-}, (color) => `[color=${color}]`, (prop) => `var(${prop})`);
+}, () => `:host`, (prop) => toVar(prop));
 const genLight = (key) => {
     return [cssGlobalVars._colors[key][6], cssGlobalVars._colors[key][0]];
 };
-const lightStyles = constructCSS(vars, {
+const lightStyles = constructCSSObject(vars, {
     green: genLight("green"),
     blue: genLight("blue"),
     orange: genLight("orange"),
@@ -50,7 +50,7 @@ const lightStyles = constructCSS(vars, {
     gray: [cssGlobalVars._colors.darkgray[5], cssGlobalVars._colors.lightgray[7]],
     white: [cssGlobalVars._colors.lightgray[0], cssGlobalVars._colors.darkgray[0]],
     black: [cssGlobalVars._colors.darkgray[7], cssGlobalVars._colors.lightgray[3]],
-}, (color) => `[variant="light"][color=${color}]`, (prop) => `var(${prop})`);
+}, () => `:host`, (prop) => toVar(prop));
 const calls = {
     tip: {
         color: "teal",
@@ -88,6 +88,8 @@ const calls = {
 /**
  * {@linkcode Alert} renders a alert.
  *
+ * Color defaults to blue.
+ *
  * @slot - Alert content.
  * @slot title - Alert title.
  * @slot icon - Alert icon.
@@ -96,6 +98,11 @@ const calls = {
 let Alert = class Alert extends GlobalStyle {
     constructor() {
         super(...arguments);
+        /**
+         * The tone of the component.
+         * Overrides the color of the call.
+         */
+        this.color = "blue";
         /**
          * Close delay, if 0, it will not be closed automatically.
          */
@@ -103,7 +110,7 @@ let Alert = class Alert extends GlobalStyle {
         /**
          * Set true to hide the close button.
          *
-         * The behavior may change due to the {@linkcode variant} property
+         * The behavior may change due to the {@linkcode variant} property.
          */
         this.hideClose = false;
         /**
@@ -114,9 +121,14 @@ let Alert = class Alert extends GlobalStyle {
         this.variant = "dark";
     }
     render() {
-        const color = this.call ? this.color || calls[this.call].color : this.color;
+        const color = calls[this.call]?.color || this.color;
         const icon = this.call ? calls[this.call].icon() : htmlSlot("icon");
-        return html `<div part="root" variant="${this.variant}" color="${color}"><div part="icon">${icon}</div><div part="content"><strong part="title">${this.title || htmlSlot("title")}</strong> ${this.content || htmlSlot()}</div>${conditionIf(!this.hideClose && this.variant !== "blockquote", html `<div part="close" @click="${this.close}">${iconXmark()}</div>`)}</div>`;
+        return [
+            html `<div part="root" variant="${this.variant}"><div part="icon">${icon}</div><div part="content"><strong part="title">${this.title || htmlSlot("title")}</strong> ${this.content || htmlSlot()}</div>${!this.hideClose && this.variant !== "blockquote"
+                ? html `<div part="close" tabindex="0" @click="${this.close}">${iconXmark()}</div>`
+                : ""}</div>`,
+            htmlStyle(this.variant === "light" ? lightStyles[color] : darkStyles[color]),
+        ];
     }
     close() {
         this.remove();
@@ -150,16 +162,14 @@ __decorate([
     property()
 ], Alert.prototype, "content", void 0);
 __decorate([
-    property({
-        type: Boolean,
-    })
+    property({ type: Boolean })
 ], Alert.prototype, "hideClose", void 0);
 __decorate([
     property()
 ], Alert.prototype, "variant", void 0);
 Alert = __decorate([
     godown(protoName),
-    styles(unsafeCSS(darkStyles), unsafeCSS(lightStyles), css `:host{border-radius:var(${cssScope}--border-radius);${cssScope}--border-radius:.25em;${cssScope}--border-width:.075em;${cssScope}--blockquote-width:.2em;${cssScope}--padding:.5em;display:block;width:100%}[part=root]{--color:var(${cssScope}--color);color:var(--color);transition:.25s;display:flex;justify-content:space-between;padding:var(${cssScope}--padding);border-radius:inherit;border:var(${cssScope}--border-width) solid var(--color);background:var(${cssScope}--background)}[variant=blockquote]{border-radius:0;border-left:var(${cssScope}--blockquote-width) solid var(--color);border-bottom:none;border-right:none;border-top:none;background:0 0}[part=content]{color:var(--color)}[part=root]{display:grid;align-items:center;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}[part=title]{line-height:2em}[part=icon]{display:inline-grid;align-items:center;height:2em}[part=icon] svg{margin-right:.5em;width:1.25em;height:1.25em}[part=content]{grid-row:span 2/span 2;line-height:1.5em}`)
+    styles(css `:host{border-radius:var(${cssScope}--border-radius);${cssScope}--border-radius:.25em;${cssScope}--border-width:.075em;${cssScope}--blockquote-width:.2em;${cssScope}--padding:.5em;display:block;width:100%}[part=root]{--color:var(${cssScope}--color);color:var(--color);width:100%;transition:.25s;display:flex;justify-content:space-between;padding:var(${cssScope}--padding);border-radius:inherit;border:var(${cssScope}--border-width) solid var(--color);background:var(${cssScope}--background)}[variant=blockquote]{border-radius:0;border-left:var(${cssScope}--blockquote-width) solid var(--color);border-bottom:none;border-right:none;border-top:none;background:0 0}[part=content]{color:var(--color)}[part=root]{display:grid;align-items:center;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr}[part=title]{line-height:2em}[part=icon]{display:inline-grid;align-items:center;height:2em}[part=icon] svg{margin-right:.5em;width:1.25em;height:1.25em}[part=content]{grid-row:span 2/span 2;line-height:1.5em}`)
 ], Alert);
 var Alert$1 = Alert;
 

package/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../src/components/alert.ts"],"sourcesContent":null,"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,SAAS,GAAG,OAAO,CAAC;AAC1B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC,MAAM,IAAI,GAAG,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAA,EAAG,QAAQ,CAAK,EAAA,EAAA,CAAC,CAAE,CAAA,CAAC,CAAC;AAErE,MAAM,OAAO,GAAG,CAAC,GAAW,KAAI;IAC9B,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACxE,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,YAAY,CAC7B,IAAI,EACJ;AACE,IAAA,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC;AACvB,IAAA,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC;AACrB,IAAA,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC;AACzB,IAAA,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC;AACnB,IAAA,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC;AACzB,IAAA,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC;AACzB,IAAA,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC;AACrB,IAAA,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC;AACrB,IAAA,IAAI,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAC7E,IAAA,KAAK,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAC9E,IAAA,KAAK,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAC/E,CAAA,EACD,CAAC,KAAK,KAAK,CAAA,OAAA,EAAU,KAAK,CAAG,CAAA,CAAA,EAC7B,CAAC,IAAI,KAAK,OAAO,IAAI,CAAA,CAAA,CAAG,CACzB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,GAAW,KAAI;IAC/B,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACxE,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,YAAY,CAC9B,IAAI,EACJ;AACE,IAAA,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC;AACxB,IAAA,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;AACtB,IAAA,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC;AAC1B,IAAA,GAAG,EAAE,QAAQ,CAAC,KAAK,CAAC;AACpB,IAAA,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC;AAC1B,IAAA,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC;AAC1B,IAAA,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;AACtB,IAAA,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC;AACtB,IAAA,IAAI,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAC7E,IAAA,KAAK,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAC9E,IAAA,KAAK,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAC/E,CAAA,EACD,CAAC,KAAK,KAAK,CAAA,wBAAA,EAA2B,KAAK,CAAG,CAAA,CAAA,EAC9C,CAAC,IAAI,KAAK,OAAO,IAAI,CAAA,CAAA,CAAG,CACzB,CAAC;AAEF,MAAM,KAAK,GAAG;AACZ,IAAA,GAAG,EAAE;AACH,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,IAAI,EAAE,aAAa;AACpB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,IAAI,EAAE,kBAAkB;AACzB,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,IAAI,EAAE,cAAc;AACrB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,QAAQ;AACf,QAAA,IAAI,EAAE,qBAAqB;AAC5B,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,KAAK,EAAE,KAAK;AACZ,QAAA,IAAI,EAAE,eAAe;AACtB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE,KAAK;AACZ,QAAA,IAAI,EAAE,eAAe;AACtB,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,QAAQ;AACf,QAAA,IAAI,EAAE,kBAAkB;AACzB,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,IAAI,EAAE,eAAe;AACtB,KAAA;CACF,CAAC;AAEF;;;;;;;AAOG;AAOH,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,WAAW,CAAA;AAA/B,IAAA,WAAA,GAAA;;AAcE;;AAEG;QAEH,IAAS,CAAA,SAAA,GAAG,CAAC,CAAC;AAcd;;;;AAIG;QAIH,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AAElB;;;;AAIG;QAEH,IAAO,CAAA,OAAA,GAAoC,MAAM,CAAC;KAqCnD;IAnCW,MAAM,GAAA;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5E,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;QACpE,OAAO,IAAI,CAAA,CAAA,0BAAA,EAA6B,IAAI,CAAC,OAAO,CAAY,SAAA,EAAA,KAAK,CAChD,mBAAA,EAAA,IAAI,CAEE,+CAAA,EAAA,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,OAAO,CAAC,aACpD,IAAI,CAAC,OAAO,IAAI,QAAQ,EAAE,SAG9B,WAAW,CACT,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,EAChD,IAAI,CAAA,CAAA,0BAAA,EAA6B,IAAI,CAAC,KAAK,CAAA,EAAA,EAAK,SAAS,EAAE,CAAA,MAAA,CAAQ,CAEvE,CAAA,MAAA,CACO,CAAC;KACT;IAED,KAAK,GAAA;QACH,IAAI,CAAC,MAAM,EAAE,CAAC;AACd,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;KACjF;IAES,YAAY,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SAChD;KACF;AAED,IAAA,OAAO,KAAK,CAAC,IAAiB,EAAE,MAAsB,EAAA;AACpD,QAAA,MAAM,EAAE,GAAG,IAAI,IAAI,EAAE,CAAC;AACtB,QAAA,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;AAC1B,QAAA,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;AACrB,QAAA,OAAO,EAAE,CAAC;KACX;CACF,CAAA;AAhFC,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AAC+E,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAO1F,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACqG,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMhH,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACb,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMd,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACG,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMd,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACK,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAUhB,UAAA,CAAA;AAHC,IAAA,QAAQ,CAAC;AACR,QAAA,IAAI,EAAE,OAAO;KACd,CAAC;AACgB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQlB,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACuC,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAhD9C,KAAK,GAAA,UAAA,CAAA;IANV,MAAM,CAAC,SAAS,CAAC;AACjB,IAAA,MAAM,CACL,SAAS,CAAC,UAAU,CAAC,EACrB,SAAS,CAAC,WAAW,CAAC,EACtB,GAAG,CAAA,CAAA,wBAAA,EAA2B,QAAQ,CAAoB,iBAAA,EAAA,QAAQ,CAAyB,sBAAA,EAAA,QAAQ,CAAyB,sBAAA,EAAA,QAAQ,CAA2B,wBAAA,EAAA,QAAQ,mEAAqE,QAAQ,CAAA,mGAAA,EAAuG,QAAQ,CAAA,4CAAA,EAA+C,QAAQ,CAAqD,kDAAA,EAAA,QAAQ,CAAwE,mEAAA,EAAA,QAAQ,2cAA+d,CACvgC;AACK,CAAA,EAAA,KAAK,CAqFV,CAAA;AAED,cAAe,KAAK;;;;"}
+{"version":3,"file":"alert.js","sources":["../src/components/alert.ts"],"sourcesContent":null,"names":[],"mappings":"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"}

package/components/avatar.d.ts

@@ -5,6 +5,7 @@ import { GlobalStyle } from "../core/global-style.js";
  * Renders as an image if it has a src property,
  * otherwise falls back to name or nameless slot.
  *
+ * @slot - Display content if no `src` or `name` provided.
  * @category display
  */
 declare class Avatar extends GlobalStyle {
@@ -13,9 +14,12 @@ declare class Avatar extends GlobalStyle {
      */
     src: string | undefined | null;
     /**
-     * If the image is not available, the {@linkcode Avatar.format} will be displayed.
+     * If the image is not available, display name (call {@linkcode Avatar.format}).
      */
     name: string;
+    /**
+     * Display rounded.
+     */
     round: boolean;
     protected render(): import("lit").TemplateResult<1>;
     private _renderAvatar;

package/components/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../src/components/avatar.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKnE;;;;;;;GAOG;AACH,cAIM,MAAO,SAAQ,WAAW;IAC9B;;OAEG;IAEH,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B;;OAEG;IAEH,IAAI,SAAM;IAGV,KAAK,UAAS;IAEd,SAAS,CAAC,MAAM;IAIhB,OAAO,CAAC,aAAa;IAUrB,MAAM;IAIN,YAAY;CAGb;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../src/components/avatar.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKnE;;;;;;;;GAQG;AACH,cAIM,MAAO,SAAQ,WAAW;IAC9B;;OAEG;IAEH,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAE/B;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,UAAS;IAEd,SAAS,CAAC,MAAM;IAIhB,OAAO,CAAC,aAAa;IAUrB,MAAM;IAIN,YAAY;CAGb;AAED,eAAe,MAAM,CAAC"}

package/components/avatar.js

@@ -1,7 +1,7 @@
 import { __decorate } from 'tslib';
 import { godown, styles } from '@godown/element/decorators/index.js';
 import { htmlSlot } from '@godown/element/directives/index.js';
-import { css, html } from 'lit';
+import { html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { scopePrefix, GlobalStyle } from '../core/global-style.js';
 
@@ -13,15 +13,19 @@ const cssScope = scopePrefix(protoName);
  * Renders as an image if it has a src property,
  * otherwise falls back to name or nameless slot.
  *
+ * @slot - Display content if no `src` or `name` provided.
  * @category display
  */
 let Avatar = class Avatar extends GlobalStyle {
     constructor() {
         super(...arguments);
         /**
-         * If the image is not available, the {@linkcode Avatar.format} will be displayed.
+         * If the image is not available, display name (call {@linkcode Avatar.format}).
          */
         this.name = "";
+        /**
+         * Display rounded.
+         */
         this.round = false;
     }
     render() {
@@ -54,7 +58,7 @@ __decorate([
 ], Avatar.prototype, "round", void 0);
 Avatar = __decorate([
     godown(protoName),
-    styles(css `:host{${cssScope}--size:2em;width:var(${cssScope}--size);height:var(${cssScope}--size);display:inline-block;vertical-align:bottom}:host([round]){border-radius:50%}[part=image]{width:100%;height:100%;object-fit:cover}[part=root]{overflow:hidden;position:relative;border-radius:inherit;width:100%;height:100%}[part=root]{display:flex;align-items:center;justify-content:center}`)
+    styles(css `:host{${cssScope}--size:2em;width:var(${cssScope}--size);height:var(${cssScope}--size);display:inline-block;vertical-align:bottom}:host([round]){border-radius:50%}[part=image]{width:100%;height:100%;object-fit:cover}[part=root]{overflow:hidden;position:relative;border-radius:inherit;width:100%;height:100%;display:flex;align-items:center;justify-content:center}`)
 ], Avatar);
 var Avatar$1 = Avatar;
 

package/components/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../src/components/avatar.ts"],"sourcesContent":null,"names":[],"mappings":";;;;;;;AAOA,MAAM,SAAS,GAAG,QAAQ,CAAC;AAC3B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;;;;AAOG;AAKH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,WAAW,CAAA;AAAhC,IAAA,WAAA,GAAA;;AAME;;AAEG;QAEH,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;QAGV,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;KAuBf;IArBW,MAAM,GAAA;QACd,OAAO,IAAI,CAAA,CAAoB,iBAAA,EAAA,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;KAC7D;IAEO,aAAa,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;AACZ,YAAA,OAAO,IAAI,CAAA,CAA0B,uBAAA,EAAA,IAAI,CAAC,GAAG,CAAA,UAAA,EAAY,IAAI,CAAC,YAAY,CAAS,OAAA,EAAA,IAAI,CAAC,IAAI,IAAI,CAAC;SAClG;AACD,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,IAAI,CAAA,CAAqB,kBAAA,EAAA,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;SACxD;QACD,OAAO,QAAQ,EAAE,CAAC;KACnB;IAED,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAED,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC;KACtB;CACF,CAAA;AA/BC,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACoB,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAK/B,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACD,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGV,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACd,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAbV,MAAM,GAAA,UAAA,CAAA;IAJX,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CACL,GAAG,CAAA,CAAS,MAAA,EAAA,QAAQ,wBAAwB,QAAQ,CAAA,mBAAA,EAAsB,QAAQ,CAAA,uSAAA,CAA+S,CAClY;AACK,CAAA,EAAA,MAAM,CAoCX,CAAA;AAED,eAAe,MAAM;;;;"}
+{"version":3,"file":"avatar.js","sources":["../src/components/avatar.ts"],"sourcesContent":null,"names":[],"mappings":";;;;;;;AAOA,MAAM,SAAS,GAAG,QAAQ;AAC1B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC;AAEvC;;;;;;;;AAQE;AAKF,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,WAAW,CAAA;AAAhC,IAAA,WAAA,GAAA;;AAOE;;AAEE;QAEF,IAAI,CAAA,IAAA,GAAG,EAAE;AAET;;AAEE;QAEF,IAAK,CAAA,KAAA,GAAG,KAAK;;IAEH,MAAM,GAAA;QACd,OAAO,IAAI,CAAA,CAAoB,iBAAA,EAAA,IAAI,CAAC,aAAa,EAAE,QAAQ;;IAGrD,aAAa,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;AACZ,YAAA,OAAO,IAAI,CAAA,CAA0B,uBAAA,EAAA,IAAI,CAAC,GAAG,CAAA,UAAA,EAAY,IAAI,CAAC,YAAY,CAAS,OAAA,EAAA,IAAI,CAAC,IAAI,IAAI;;AAElG,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,IAAI,CAAA,CAAqB,kBAAA,EAAA,IAAI,CAAC,MAAM,EAAE,SAAS;;QAExD,OAAO,QAAQ,EAAE;;IAGnB,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI;;IAGlB,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,GAAG,GAAG,SAAS;;CAExB;AAnCE,UAAA,CAAA;AADC,IAAA,QAAQ;AACqB,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA;AAM9B,UAAA,CAAA;AADC,IAAA,QAAQ;AACA,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;AAMT,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE;AACd,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;AAjBT,MAAM,GAAA,UAAA,CAAA;IAJX,MAAM,CAAC,SAAS,CAAA;IAChB,MAAM,CACL,GAAG,CAAA,CAAS,MAAA,EAAA,QAAQ,wBAAwB,QAAQ,CAAA,mBAAA,EAAsB,QAAQ,CAAA,2RAAA,CAA6R;AAE3W,CAAA,EAAA,MAAM,CAwCZ;AAEA,eAAe,MAAM;;;;"}

package/components/breath.d.ts

@@ -11,6 +11,7 @@ import { GlobalStyle } from "../core/global-style.js";
  *
  * Inspired by Vercel home page (2023).
  *
+ * @slot - Breathing parts.
  * @category effect
  */
 declare class Breath extends GlobalStyle {
@@ -24,7 +25,7 @@ declare class Breath extends GlobalStyle {
      * Effect duration, ending in s or ms.
      */
     duration: string;
-    protected render(): (import("lit").TemplateResult<1> | import("lit").TemplateResult<1>[])[];
+    protected render(): (symbol | import("lit").TemplateResult<1> | import("lit").TemplateResult<1>[])[];
     protected renderText(text: string): import("lit").TemplateResult<1>;
     protected getTexts(): string[];
     protected computeStyle(len: number): string;

package/components/breath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breath.d.ts","sourceRoot":"","sources":["../src/components/breath.ts"],"names":[],"mappings":"AAMA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKlF;;;;;;;;;;;;;GAaG;AACH,cAMM,MAAO,SAAQ,WAAW;IAC9B;;;;OAIG;IAEH,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB;;OAEG;IAEH,QAAQ,EAAE,MAAM,CAAC;IAEjB,SAAS,CAAC,MAAM;IAQhB,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM;IAIjC,SAAS,CAAC,QAAQ,IAAI,MAAM,EAAE;IAI9B,SAAS,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM;IAoBlC,SAAS,CAAC,aAAa;CAUxB;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"breath.d.ts","sourceRoot":"","sources":["../src/components/breath.ts"],"names":[],"mappings":"AAMA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKlF;;;;;;;;;;;;;;GAcG;AACH,cAMM,MAAO,SAAQ,WAAW;IAC9B;;;;OAIG;IAEH,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAExB;;OAEG;IAEH,QAAQ,EAAE,MAAM,CAAC;IAEjB,SAAS,CAAC,MAAM;IAQhB,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM;IAIjC,SAAS,CAAC,QAAQ,IAAI,MAAM,EAAE;IAI9B,SAAS,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM;IAoBlC,SAAS,CAAC,aAAa;CAUxB;AAED,eAAe,MAAM,CAAC"}

package/components/breath.js

@@ -2,9 +2,9 @@ import { __decorate } from 'tslib';
 import { godown } from '@godown/element/decorators/godown.js';
 import { styles } from '@godown/element/decorators/styles.js';
 import { htmlStyle } from '@godown/element/directives/html-style.js';
-import { css, html } from 'lit';
+import { html, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { scopePrefix, cssGlobalVars, GlobalStyle } from '../core/global-style.js';
+import { scopePrefix, GlobalStyle, cssGlobalVars } from '../core/global-style.js';
 
 const defineName = "breath";
 const cssScope = scopePrefix(defineName);
@@ -20,6 +20,7 @@ const cssScope = scopePrefix(defineName);
  *
  * Inspired by Vercel home page (2023).
  *
+ * @slot - Breathing parts.
  * @category effect
  */
 let Breath = class Breath extends GlobalStyle {
@@ -44,7 +45,7 @@ let Breath = class Breath extends GlobalStyle {
             + (() => {
                 let style1 = "";
                 for (let number = 1; number <= len; number++) {
-                    const delay = -1 * duration / len * (len - (number - 2));
+                    const delay = -duration / len * (len - number + 1);
                     const defaultNumber = ((number - 1) % 3) + 1;
                     style1 +=
                         `.rel:nth-child(${number}) .colorful{animation-delay:${delay}s;background:var(${cssScope}--${number},var(${cssScope}--${defaultNumber}));}`;
@@ -72,7 +73,7 @@ __decorate([
 ], Breath.prototype, "duration", void 0);
 Breath = __decorate([
     godown(defineName),
-    styles(css `:host{${cssScope}--deg:60deg;${cssScope}--1-1:var(${cssGlobalVars._colors.red[5]});${cssScope}--1-2:var(${cssGlobalVars._colors.yellow[5]});${cssScope}--2-1:var(${cssGlobalVars._colors.green[5]});${cssScope}--2-2:var(${cssGlobalVars._colors.purple[5]});${cssScope}--3-1:var(${cssGlobalVars._colors.blue[5]});${cssScope}--3-2:var(${cssGlobalVars._colors.pink[5]});${cssScope}--1:linear-gradient(var(${cssScope}--deg),var(${cssScope}--1-1),var(${cssScope}--1-2));${cssScope}--2:linear-gradient(var(${cssScope}--deg),var(${cssScope}--2-1),var(${cssScope}--2-2));${cssScope}--3:linear-gradient(var(${cssScope}--deg),var(${cssScope}--3-1),var(${cssScope}--3-2))}`, css `:host{display:flex;margin:auto;width:-moz-fit-content;width:fit-content;font-size:2em;align-items:center}::selection{background:0 0}.rel{position:relative;font-weight:800;font-size:inherit;letter-spacing:-.05em}`, css `.colorful,.nocolor{padding:0 .05em;box-sizing:border-box;display:inline-block;animation-iteration-count:infinite;-webkit-text-fill-color:transparent;-webkit-background-clip:text!important;background-clip:text!important}.colorful{opacity:0;animation-name:colorfulN}.nocolor{position:absolute;top:0;background:var(${cssGlobalVars.clipBackground})}`)
+    styles(css `:host{${cssScope}--deg:60deg;${cssScope}--1-1:var(${cssGlobalVars._colors.red[5]});${cssScope}--1-2:var(${cssGlobalVars._colors.yellow[5]});${cssScope}--2-1:var(${cssGlobalVars._colors.green[5]});${cssScope}--2-2:var(${cssGlobalVars._colors.purple[5]});${cssScope}--3-1:var(${cssGlobalVars._colors.blue[5]});${cssScope}--3-2:var(${cssGlobalVars._colors.pink[5]});${cssScope}--1:linear-gradient(var(${cssScope}--deg),var(${cssScope}--1-1),var(${cssScope}--1-2));${cssScope}--2:linear-gradient(var(${cssScope}--deg),var(${cssScope}--2-1),var(${cssScope}--2-2));${cssScope}--3:linear-gradient(var(${cssScope}--deg),var(${cssScope}--3-1),var(${cssScope}--3-2))}`, css `:host{display:flex;margin:auto;width:-moz-fit-content;width:fit-content;font-size:2em;align-items:center;direction:ltr}::selection{background:0 0}.rel{position:relative;font-weight:800;font-size:inherit;letter-spacing:-.05em}`, css `.colorful,.nocolor{padding:0 .05em;box-sizing:border-box;display:inline-block;animation-iteration-count:infinite;-webkit-text-fill-color:transparent;-webkit-background-clip:text!important;background-clip:text!important}.colorful{opacity:0;animation-name:colorfulN}.nocolor{position:absolute;top:0;background:var(${cssGlobalVars.clipBackground})}`)
 ], Breath);
 var Breath$1 = Breath;
 

package/components/breath.js.map

@@ -1 +1 @@
-{"version":3,"file":"breath.js","sources":["../src/components/breath.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
+{"version":3,"file":"breath.js","sources":["../src/components/breath.ts"],"sourcesContent":null,"names":[],"mappings":"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"}

package/components/button.d.ts

@@ -1,7 +1,15 @@
 import { GlobalStyle } from "../core/global-style.js";
 declare const colors: Record<"teal" | "blue" | "green" | "red" | "purple" | "orange" | "yellow" | "pink" | "black" | "gray" | "white", string>;
 /**
- * {@linkcode Button}.
+ * {@linkcode Button} renders a button.
+ *
+ * Create modal animation upon clicking.
+ *
+ * Available colors (background): none, black, gray, white, blue, green, red, orange, pink, purple, yellow, teal.
+ *
+ * Default color is `black`.
+ *
+ * Set the color to `none` to prevent applying styles.
  *
  * @category input
  */
@@ -11,7 +19,7 @@ declare class Button extends GlobalStyle {
      */
     disabled: boolean;
     /**
-     * Invert font and background color.
+     * Display ghost.
      */
     ghost: boolean;
     /**
@@ -19,7 +27,7 @@ declare class Button extends GlobalStyle {
      */
     active: boolean;
     /**
-     * Enables rounded corners to appear capsule shaped.
+     * Display rounded.
      */
     round: boolean;
     /**
@@ -27,13 +35,12 @@ declare class Button extends GlobalStyle {
      */
     color: "none" | keyof typeof colors;
     /**
-     * Text inside.
+     * Content text.
      */
-    text: string;
-    _modalRoot: HTMLElement;
-    _root: HTMLElement;
-    static colors: Record<"teal" | "blue" | "green" | "red" | "purple" | "orange" | "yellow" | "pink" | "black" | "gray" | "white", string>;
-    protected render(): import("lit").TemplateResult<1>[];
+    content: string;
+    protected _modalRoot: HTMLElement;
+    protected _root: HTMLElement;
+    protected render(): import("lit").TemplateResult<1>;
     focus(): void;
     blur(): void;
     firstUpdated(): void;

package/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/components/button.ts"],"names":[],"mappings":"AASA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAYlF,QAAA,MAAM,MAAM,0HA6DX,CAAC;AAEF;;;;GAIG;AACH,cAKM,MAAO,SAAQ,WAAW;IAC9B;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IAEH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IAEH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IAEH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,MAAM,OAAO,MAAM,CAAW;IAC9C;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IAGb,UAAU,EAAE,WAAW,CAAC;IAExB,KAAK,EAAE,WAAW,CAAC;IAEnB,MAAM,CAAC,MAAM,2HAAU;IAEvB,SAAS,CAAC,MAAM;IAQhB,KAAK;IAOL,IAAI;IAIJ,YAAY;IAIZ,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IASpC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IAepC,SAAS;CAGV;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/components/button.ts"],"names":[],"mappings":"AASA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAQlF,QAAA,MAAM,MAAM,0HA6DX,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,cAKM,MAAO,SAAQ,WAAW;IAC9B;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,KAAK,EAAE,OAAO,CAAC;IAEf;;OAEG;IAEH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IAEH,KAAK,EAAE,OAAO,CAAC;IAEf;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,MAAM,OAAO,MAAM,CAAW;IAE9C;;OAEG;IAEH,OAAO,EAAE,MAAM,CAAC;IAGhB,SAAS,CAAC,UAAU,EAAE,WAAW,CAAC;IAElC,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC;IAE7B,SAAS,CAAC,MAAM;IAKhB,KAAK;IAQL,IAAI;IAKJ,YAAY;IAIZ,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IASpC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IAepC,SAAS;CAGV;AAED,eAAe,MAAM,CAAC"}

package/components/button.js

@@ -4,24 +4,20 @@ import { part } from '@godown/element/decorators/part.js';
 import { styles } from '@godown/element/decorators/styles.js';
 import { htmlSlot } from '@godown/element/directives/html-slot.js';
 import { htmlStyle } from '@godown/element/directives/html-style.js';
-import { constructCSSObject } from '@godown/element/tools/css.js';
-import { css, unsafeCSS, html } from 'lit';
+import { constructCSSObject, toVar } from '@godown/element/tools/css.js';
+import { html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { scopePrefix, cssGlobalVars, GlobalStyle } from '../core/global-style.js';
 
-var Button_1;
 const protoName = "button";
 const cssScope = scopePrefix(protoName);
-const whiteFont = cssGlobalVars._colors.lightgray[0];
-const blackFont = cssGlobalVars._colors.darkgray[6];
-const toVar = (s) => {
-    return unsafeCSS(`var(${s})`);
-};
+const whiteFont = cssGlobalVars.white;
+const blackFont = cssGlobalVars.black;
 const colors = constructCSSObject(["color", "background", "gradients"].map((k) => `${cssScope}--${k}`), {
     black: [
         whiteFont, // color
         cssGlobalVars._colors.darkgray[7], // background
-        cssGlobalVars._colors.darkgray[4], // gradients
+        cssGlobalVars._colors.darkgray[5], // gradients
     ],
     gray: [
         whiteFont, // color
@@ -73,13 +69,21 @@ const colors = constructCSSObject(["color", "background", "gradients"].map((k) =
         cssGlobalVars._colors.teal[6], // background
         cssGlobalVars._colors.teal[4], // gradients
     ],
-}, () => `:host`, toVar);
+}, () => `:host`, (prop) => toVar(prop));
 /**
- * {@linkcode Button}.
+ * {@linkcode Button} renders a button.
+ *
+ * Create modal animation upon clicking.
+ *
+ * Available colors (background): none, black, gray, white, blue, green, red, orange, pink, purple, yellow, teal.
+ *
+ * Default color is `black`.
+ *
+ * Set the color to `none` to prevent applying styles.
  *
  * @category input
  */
-let Button = Button_1 = class Button extends GlobalStyle {
+let Button = class Button extends GlobalStyle {
     constructor() {
         super(...arguments);
         /**
@@ -89,19 +93,18 @@ let Button = Button_1 = class Button extends GlobalStyle {
     }
     render() {
         const color = this.nextColor();
-        return [
-            html `<div part="root"><span part="modal-root"></span><div part="slot">${this.text || htmlSlot()}</div></div>`,
-            htmlStyle(Button_1.colors[color]),
-        ];
+        return html `<div part="root"><span part="modal-root"></span><div part="content">${[this.content || htmlSlot(), htmlStyle(colors[color])]}</div></div>`;
     }
     focus() {
         if (this.disabled) {
             return;
         }
         this.active = true;
+        super.focus();
     }
     blur() {
         this.active = false;
+        super.blur();
     }
     firstUpdated() {
         this.events.add(this, "click", this._handelClick, true);
@@ -132,7 +135,6 @@ let Button = Button_1 = class Button extends GlobalStyle {
         return this.color;
     }
 };
-Button.colors = colors;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Button.prototype, "disabled", void 0);
@@ -150,16 +152,16 @@ __decorate([
 ], Button.prototype, "color", void 0);
 __decorate([
     property()
-], Button.prototype, "text", void 0);
+], Button.prototype, "content", void 0);
 __decorate([
     part("modal-root")
 ], Button.prototype, "_modalRoot", void 0);
 __decorate([
     part("root")
 ], Button.prototype, "_root", void 0);
-Button = Button_1 = __decorate([
+Button = __decorate([
     godown(protoName),
-    styles(css `:host(:not([disabled]):active){transform:scale(var(${cssScope}--focus-scale))}:host([round]){${cssScope}--padding-x:.75em;border-radius:calc(infinity * 1px)}:host([disabled]){cursor:not-allowed;filter:brightness(.85)}:host([ghost]){${cssScope}--modal-background:var(${cssScope}--ghost-color);box-shadow:inset 0 0 0 var(${cssScope}--ghost-width) var(${cssScope}--ghost-color);color:var(${cssScope}--ghost-color);background:0 0}`, css `:host{${cssScope}--padding-x:.5em;${cssScope}--padding-y:.15em;${cssScope}--padding:var(${cssScope}--padding-y) var(${cssScope}--padding-x);${cssScope}--modal-animation-duration:1s;${cssScope}--ghost-width:.08em;${cssScope}--focus-scale:.97;${cssScope}--deg:45deg;${cssScope}--ghost-color:var(${cssScope}--background);color:var(${cssScope}--color,inherit);background:linear-gradient(var(${cssScope}--deg),var(${cssScope}--background),var(${cssScope}--gradients,var(${cssScope}--background)));border-radius:.3em;width:-moz-fit-content;width:fit-content;transition:.1s;display:block;overflow:hidden;text-align:center;padding:0!important;cursor:pointer}[part=root]{width:100%;height:100%;overflow:hidden;position:relative;transition:none;-webkit-user-select:none;user-select:none;border-radius:inherit;transition-duration:inherit}[part=slot]{padding:var(${cssScope}--padding)}i{position:absolute;inset:0;opacity:0;width:100%;height:100%;border-radius:50%;visibility:visible;pointer-events:none;transform-origin:0 0;background:var(${cssScope}--modal-background,currentColor);animation-duration:var(${cssScope}--modal-animation-duration)}@keyframes kf{0%{transform:scale(0) translate(-50%,-50%);opacity:var(${cssScope}--modal-opacity,.18)}80%{transform:scale(1) translate(-50%,-50%)}to{opacity:0}}`)
+    styles(css `:host(:not([disabled]):active){transform:scale(var(${cssScope}--focus-scale))}:host([round]){${cssScope}--padding-x:.75em;border-radius:calc(infinity * 1px)}:host([disabled]){cursor:not-allowed;filter:brightness(.85)}:host([ghost]){${cssScope}--modal-background:var(${cssScope}--ghost-color);box-shadow:inset 0 0 0 var(${cssScope}--ghost-width) var(${cssScope}--ghost-color);color:var(${cssScope}--ghost-color);background:0 0}`, css `:host{${cssScope}--padding-x:.5em;${cssScope}--padding-y:.15em;${cssScope}--padding:var(${cssScope}--padding-y) var(${cssScope}--padding-x);${cssScope}--modal-animation-duration:1s;${cssScope}--ghost-width:.08em;${cssScope}--focus-scale:.97;${cssScope}--deg:45deg;${cssScope}--ghost-color:var(${cssScope}--background);color:var(${cssScope}--color,inherit);background:linear-gradient(var(${cssScope}--deg),var(${cssScope}--background),var(${cssScope}--gradients,var(${cssScope}--background)));border-radius:.3em;width:-moz-fit-content;width:fit-content;transition:.1s;display:block;overflow:hidden;text-align:center;padding:0!important;cursor:pointer}[part=root]{width:100%;height:100%;overflow:hidden;position:relative;transition:none;-webkit-user-select:none;user-select:none;border-radius:inherit;transition-duration:inherit}[part=content]{padding:var(${cssScope}--padding)}i{position:absolute;inset:0;opacity:0;width:100%;height:100%;border-radius:50%;visibility:visible;pointer-events:none;transform-origin:0 0;background:var(${cssScope}--modal-background,currentColor);animation-duration:var(${cssScope}--modal-animation-duration)}@keyframes kf{0%{transform:scale(0) translate(-50%,-50%);opacity:var(${cssScope}--modal-opacity,.1)}80%{transform:scale(1) translate(-50%,-50%)}to{opacity:0}}`)
 ], Button);
 var Button$1 = Button;