godown 3.0.0-canary.10 → 3.0.0-canary.12

package/dev/split.d.ts

@@ -3,7 +3,7 @@ export default Split;
 export * from "./components/split.js";
 declare global {
     interface HTMLElementTagNameMap {
-        "godown-split-input": Split;
+        "godown-split": Split;
     }
 }
 //# sourceMappingURL=split.d.ts.map

package/dev/split.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["../src/split.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAI1C,eAAe,KAAK,CAAC;AAErB,cAAc,uBAAuB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,KAAK,CAAC;KAC7B;CACF"}
+{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["../src/split.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAI1C,eAAe,KAAK,CAAC;AAErB,cAAc,uBAAuB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,KAAK,CAAC;KACvB;CACF"}

package/dev/typewriter.d.ts

@@ -1,5 +1,6 @@
 import Typewriter from "./components/typewriter.js";
 export default Typewriter;
+export * from "./components/typewriter.js";
 declare global {
     interface HTMLElementTagNameMap {
         "godown-typewriter": Typewriter;

package/dev/typewriter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typewriter.d.ts","sourceRoot":"","sources":["../src/typewriter.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAIpD,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,UAAU,CAAC;KACjC;CACF"}
+{"version":3,"file":"typewriter.d.ts","sourceRoot":"","sources":["../src/typewriter.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAIpD,eAAe,UAAU,CAAC;AAE1B,cAAc,4BAA4B,CAAC;AAE3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,UAAU,CAAC;KACjC;CACF"}

package/dev/typewriter.js

@@ -1,4 +1,5 @@
 import Typewriter from "./components/typewriter.js";
 Typewriter.define();
 export default Typewriter;
+export * from "./components/typewriter.js";
 //# sourceMappingURL=typewriter.js.map

package/dev/typewriter.js.map

@@ -1 +1 @@
-{"version":3,"file":"typewriter.js","sourceRoot":"","sources":["../src/typewriter.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAEpD,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC"}
+{"version":3,"file":"typewriter.js","sourceRoot":"","sources":["../src/typewriter.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAEpD,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC;AAE1B,cAAc,4BAA4B,CAAC"}

package/dialog.d.ts

@@ -1,5 +1,6 @@
 import Dialog from "./components/dialog.js";
 export default Dialog;
+export * from "./components/dialog.js";
 declare global {
     interface HTMLElementTagNameMap {
         "godown-dialog": Dialog;

package/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["src/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["src/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,cAAc,wBAAwB,CAAC;AAEvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}

package/divider.d.ts

@@ -1,5 +1,6 @@
 import Divider from "./components/divider.js";
 export default Divider;
+export * from "./components/divider.js";
 declare global {
     interface HTMLElementTagNameMap {
         "godown-divider": Divider;

package/divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["src/divider.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAI9C,eAAe,OAAO,CAAC;AAEvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,OAAO,CAAC;KAC3B;CACF"}
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["src/divider.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAI9C,eAAe,OAAO,CAAC;AAEvB,cAAc,yBAAyB,CAAC;AAExC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,OAAO,CAAC;KAC3B;CACF"}

package/dragbox.d.ts

@@ -1,5 +1,6 @@
 import Dragbox from "./components/dragbox.js";
 export default Dragbox;
+export * from "./components/dragbox.js";
 declare global {
     interface HTMLElementTagNameMap {
         "godown-dragbox": Dragbox;

package/dragbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dragbox.d.ts","sourceRoot":"","sources":["src/dragbox.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAI9C,eAAe,OAAO,CAAC;AAEvB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,OAAO,CAAC;KAC3B;CACF"}
+{"version":3,"file":"dragbox.d.ts","sourceRoot":"","sources":["src/dragbox.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAI9C,eAAe,OAAO,CAAC;AAEvB,cAAc,yBAAyB,CAAC;AAExC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,OAAO,CAAC;KAC3B;CACF"}

package/flex.d.ts

@@ -1,5 +1,6 @@
 import Flex from "./components/flex.js";
 export default Flex;
+export * from "./components/flex.js";
 declare global {
     interface HTMLElementTagNameMap {
         "godown-flex": Flex;

package/flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["src/flex.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAIxC,eAAe,IAAI,CAAC;AAEpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,IAAI,CAAC;KACrB;CACF"}
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["src/flex.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAIxC,eAAe,IAAI,CAAC;AAEpB,cAAc,sBAAsB,CAAC;AAErC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,IAAI,CAAC;KACrB;CACF"}

package/form.d.ts

@@ -1,5 +1,6 @@
 import Form from "./components/form.js";
 export default Form;
+export * from "./components/form.js";
 declare global {
     interface HTMLElementTagNameMap {
         "godown-form": Form;

package/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["src/form.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAIxC,eAAe,IAAI,CAAC;AAEpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,IAAI,CAAC;KACrB;CACF"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["src/form.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAIxC,eAAe,IAAI,CAAC;AAEpB,cAAc,sBAAsB,CAAC;AAErC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,IAAI,CAAC;KACrB;CACF"}

package/grid.d.ts

@@ -1,5 +1,6 @@
 import Grid from "./components/grid.js";
 export default Grid;
+export * from "./components/grid.js";
 declare global {
     interface HTMLElementTagNameMap {
         "godown-grid": Grid;

package/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["src/grid.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAIxC,eAAe,IAAI,CAAC;AAEpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,IAAI,CAAC;KACrB;CACF"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["src/grid.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAIxC,eAAe,IAAI,CAAC;AAEpB,cAAc,sBAAsB,CAAC;AAErC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,IAAI,CAAC;KACrB;CACF"}

package/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["src/layout.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,cAAc,wBAAwB,CAAC;AACvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["src/layout.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,cAAc,wBAAwB,CAAC;AAEvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "godown",
-  "version": "3.0.0-canary.10",
-  "description": "Simple, stylized, semantic web components",
+  "version": "3.0.0-canary.12",
+  "description": "Non Composite Web Components Library",
   "type": "module",
   "main": "index.js",
   "exports": {
@@ -13,6 +13,7 @@
       "development": "./dev/*",
       "default": "./*"
     },
+    "./src/*": "./src/*",
     "./*.json": "./*.json"
   },
   "repository": {
@@ -20,7 +21,10 @@
     "url": "https://github.com/startracex/godown.git",
     "directory": "packages/godown"
   },
-  "keywords": [],
+  "keywords": [
+    "web-components",
+    "custom-elements"
+  ],
   "author": "startracex",
   "license": "MIT",
   "dependencies": {
@@ -28,8 +32,8 @@
     "lit": "^3.0.0",
     "tslib": "^2.7.0",
     "@godown/colors": "^0.0.1",
-    "@godown/element": "^0.0.3",
-    "@godown/f7-icon": "^0.0.3"
+    "@godown/element": "^0.2.0",
+    "@godown/f7-icon": "^0.0.4"
   },
   "publishConfig": {
     "access": "public"

package/progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["src/progress.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAIhD,eAAe,QAAQ,CAAC;AAExB,cAAc,0BAA0B,CAAC;AACzC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,QAAQ,CAAC;KAC7B;CACF"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["src/progress.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAIhD,eAAe,QAAQ,CAAC;AAExB,cAAc,0BAA0B,CAAC;AAEzC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,QAAQ,CAAC;KAC7B;CACF"}

package/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["src/router.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,cAAc,wBAAwB,CAAC;AACvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["src/router.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,cAAc,wBAAwB,CAAC;AAEvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}

package/split.d.ts

@@ -3,7 +3,7 @@ export default Split;
 export * from "./components/split.js";
 declare global {
     interface HTMLElementTagNameMap {
-        "godown-split-input": Split;
+        "godown-split": Split;
     }
 }
 //# sourceMappingURL=split.d.ts.map

package/split.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["src/split.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAI1C,eAAe,KAAK,CAAC;AAErB,cAAc,uBAAuB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,KAAK,CAAC;KAC7B;CACF"}
+{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["src/split.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAI1C,eAAe,KAAK,CAAC;AAErB,cAAc,uBAAuB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,KAAK,CAAC;KACvB;CACF"}

package/src/alert.ts

@@ -4,6 +4,8 @@ Alert.define();
 
 export default Alert;
 
+export * from "./components/alert.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-alert": Alert;

package/src/avatar.ts

@@ -4,6 +4,8 @@ Avatar.define();
 
 export default Avatar;
 
+export * from "./components/avatar.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-avatar": Avatar;

package/src/button.ts

@@ -4,6 +4,8 @@ Button.define();
 
 export default Button;
 
+export * from "./components/button.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-button": Button;

package/src/card.ts

@@ -4,6 +4,8 @@ Card.define();
 
 export default Card;
 
+export * from "./components/card.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-card": Card;

package/src/carousel.ts

@@ -4,6 +4,8 @@ Carousel.define();
 
 export default Carousel;
 
+export * from "./components/carousel.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-carousel": Carousel;

package/src/components/alert.ts

@@ -1,5 +1,6 @@
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
 import { htmlStyle } from "@godown/element/directives/html-style.js";
 import { constructCSSObject, toVar } from "@godown/element/tools/css.js";
@@ -11,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 { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -115,7 +116,8 @@ const calls = {
 @godown(protoName)
 @styles(
   css`
-    :host {
+    :host,
+    :where(:host([contents]) [part=root]) {
       border-radius: var(${cssScope}--border-radius);
       ${cssScope}--border-radius: .25em;
       ${cssScope}--border-width: .075em;
@@ -147,7 +149,7 @@ const calls = {
       background: transparent;
     }
 
-    [part=content]{
+    [part=content] {
       color: var(--color);
     }
 
@@ -240,32 +242,32 @@ class Alert extends GlobalStyle {
   @property()
   variant: "blockquote" | "dark" | "light" = "dark";
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     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}">
+    return html`<div part="root" ${attr(this.observedRecord)}>
       <div part="icon">${icon}</div>
       <div part="content">
-        <strong part="title">${this.title || htmlSlot("title")}</strong>
+        <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]),
-    ];
+      !this.hideClose && this.variant !== "blockquote"
+        ? html`<div part="close" tabindex=0 @click="${this.close}">${iconXmark()}</div>`
+        : ""
+    }
+    ${htmlStyle(this.variant === "light" ? lightStyles[color] : darkStyles[color])}
+    </div>`;
   }
 
-  close() {
+  close(): void {
     this.remove();
     this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(): void {
     if (this.autoclose) {
       setTimeout(() => this.close(), this.autoclose);
     }

package/src/components/avatar.ts

@@ -1,6 +1,9 @@
-import { godown, styles } from "@godown/element/decorators/index.js";
-import { htmlSlot } from "@godown/element/directives/index.js";
-import { css, html } from "lit";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { omit } from "@godown/element/tools/lib.js";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -20,15 +23,25 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(
   css`
-    :host {
+    :host{
       ${cssScope}--size: 2em;
       width: var(${cssScope}--size);
       height: var(${cssScope}--size);
-      display: inline-block;
       vertical-align: bottom;
     }
 
-    :host([round]){
+    :host,
+    [part=root] {
+      display: inline-flex;
+    }
+
+    :host([contents]) [part=root] {
+      display: inline-flex;
+      width: inherit;
+      height: inherit;
+    }
+
+    :host([round]) {
       border-radius:50%;
     }
 
@@ -44,7 +57,6 @@ const cssScope = scopePrefix(protoName);
       border-radius: inherit;
       width: 100%;
       height: 100%;
-      display: flex;
       align-items: center;
       justify-content: center;
     }
@@ -69,8 +81,10 @@ class Avatar extends GlobalStyle {
   @property({ type: Boolean })
   round = false;
 
-  protected render() {
-    return html`<div part="root">${this._renderAvatar()}</div>`;
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(omit(this.observedRecord, "src"))}>
+      ${this._renderAvatar()}
+    </div>`;
   }
 
   private _renderAvatar() {
@@ -83,11 +97,11 @@ class Avatar extends GlobalStyle {
     return htmlSlot();
   }
 
-  format() {
+  format(): string {
     return this.name;
   }
 
-  _handleError() {
+  _handleError(): void {
     this.src = undefined;
   }
 }

package/src/components/breath.ts

@@ -1,7 +1,8 @@
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.js";
 import { htmlStyle } from "@godown/element/directives/html-style.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -42,15 +43,22 @@ const cssScope = scopePrefix(defineName);
   `,
   css`
     :host {
-      display: flex;
       margin: auto;
-      width: -moz-fit-content;
       width: fit-content;
       font-size: 2em;
       align-items: center;
       direction: ltr;
     }
 
+    :host,
+    :host([contents]) [part=root] {
+      display: flex;
+    }
+
+    [part=root] {
+      display: contents;
+    }
+
     ::selection {
       background: none;
     }
@@ -69,14 +77,16 @@ const cssScope = scopePrefix(defineName);
       box-sizing: border-box;
       display: inline-block;
       animation-iteration-count: infinite;
-      -webkit-text-fill-color: transparent;
+      color: transparent;
       -webkit-background-clip: text !important;
       background-clip: text !important;
     }
+
     .colorful {
       opacity: 0;
       animation-name: colorfulN;
     }
+
     .nocolor {
       position: absolute;
       top: 0;
@@ -99,15 +109,17 @@ class Breath extends GlobalStyle {
   @property()
   duration: string;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     const texts = this.getTexts();
-    return [
+    return html`<div part="root" ${attr(this.observedRecord)}>
+    ${[
       texts.map(this.renderText),
       htmlStyle(this.computeStyle(texts.length)),
-    ];
+    ]}
+    </div>`;
   }
 
-  protected renderText(text: string) {
+  protected renderText(text: string): TemplateResult<1> {
     return html`<span class="rel">
       <span class="nocolor">${text}</span>
       <span class="colorful">${text}</span>
@@ -118,7 +130,7 @@ class Breath extends GlobalStyle {
     return Array.isArray(this.text) ? this.text : (this.text || this.textContent).split(/\s+/).filter((x) => x);
   }
 
-  protected computeStyle(len: number) {
+  protected computeStyle(len: number): string {
     const gap = 100 / 2 / len;
     const duration = this.parseDuration() || len * 2 + 2;
 
@@ -138,7 +150,7 @@ class Breath extends GlobalStyle {
     );
   }
 
-  protected parseDuration() {
+  protected parseDuration(): number {
     const { duration } = this;
     if (duration) {
       if (duration.endsWith("s")) {

package/src/components/button.ts

@@ -1,10 +1,11 @@
 import { godown } from "@godown/element/decorators/godown.js";
 import { part } from "@godown/element/decorators/part.js";
 import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
 import { htmlStyle } from "@godown/element/directives/html-style.js";
 import { constructCSSObject, toVar } from "@godown/element/tools/css.js";
-import { css, html } from "lit";
+import { css, html, TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -15,7 +16,8 @@ const cssScope = scopePrefix(protoName);
 const whiteFont = cssGlobalVars.white;
 const blackFont = cssGlobalVars.black;
 
-const colors = constructCSSObject(
+type Colors = "teal" | "blue" | "green" | "red" | "purple" | "orange" | "yellow" | "pink" | "gray" | "white" | "black";
+const colors: Record<Colors, string> = constructCSSObject(
   ["color", "background", "gradients"].map((k) => `${cssScope}--${k}`),
   {
     black: [
@@ -118,7 +120,7 @@ const colors = constructCSSObject(
   css`
     :host {
       ${cssScope}--padding-x: .5em;
-      ${cssScope}--padding-y: .15em;
+      ${cssScope}--padding-y: min(calc(var(${cssScope}--padding-x) / 2), .25em);
       ${cssScope}--padding: var(${cssScope}--padding-y) var(${cssScope}--padding-x);
       ${cssScope}--modal-animation-duration: 1s;
       ${cssScope}--ghost-width: .08em;
@@ -142,6 +144,10 @@ const colors = constructCSSObject(
       cursor: pointer;
     }
 
+    :host([contents]) [part=root] {
+      width: fit-content;
+    }
+
     [part=root] {
       width: 100%;
       height: 100%;
@@ -190,25 +196,25 @@ class Button extends GlobalStyle {
    * Whether to disable this element.
    */
   @property({ type: Boolean, reflect: true })
-  disabled: boolean;
+  disabled = false;
 
   /**
    * Display ghost.
    */
   @property({ type: Boolean, reflect: true })
-  ghost: boolean;
+  ghost = false;
 
   /**
    * Whether this element is active or not.
    */
   @property({ type: Boolean, reflect: true })
-  active: boolean;
+  active = false;
 
   /**
    * Display rounded.
    */
   @property({ type: Boolean, reflect: true })
-  round: boolean;
+  round = false;
 
   /**
    * The primary color.
@@ -227,9 +233,9 @@ class Button extends GlobalStyle {
   @part("root")
   protected _root: HTMLElement;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     const color = this.nextColor();
-    return html`<div part="root">
+    return html`<div part="root" ${attr(this.observedRecord)}>
       <span part="modal-root"></span>
       <div part="content">
         ${[this.content || htmlSlot(), htmlStyle(colors[color])]}
@@ -237,7 +243,7 @@ class Button extends GlobalStyle {
     </div>`;
   }
 
-  focus() {
+  focus(): void {
     if (this.disabled) {
       return;
     }
@@ -245,16 +251,16 @@ class Button extends GlobalStyle {
     super.focus();
   }
 
-  blur() {
+  blur(): void {
     this.active = false;
     super.blur();
   }
 
-  firstUpdated() {
+  firstUpdated(): void {
     this.events.add(this, "click", this._handelClick, true);
   }
 
-  protected _handelClick(e: MouseEvent) {
+  protected _handelClick(e: MouseEvent): void {
     if (this.disabled) {
       e.stopPropagation();
       e.preventDefault();
@@ -263,7 +269,7 @@ class Button extends GlobalStyle {
     this._handleModal(e);
   }
 
-  protected _handleModal(e: MouseEvent) {
+  protected _handleModal(e: MouseEvent): void {
     const modal = document.createElement("i");
     const rect = this.getBoundingClientRect();
     const h = rect.height;
@@ -278,7 +284,7 @@ class Button extends GlobalStyle {
     modal.addEventListener("animationend", () => modal.remove(), { once: true });
   }
 
-  nextColor() {
+  nextColor(): Colors | "none" {
     return this.color;
   }
 }