godown 3.0.0-canary.13 → 3.0.0-canary.15

package/dev/core/super-openable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"super-openable.d.ts","sourceRoot":"","sources":["../../src/core/super-openable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,cAAM,aAAc,SAAQ,WAAW;IACrC;;OAEG;IAEH,IAAI,UAAS;IAEb,MAAM,CAAC,EAAE,GAAE,OAAwC,GAAG,IAAI;IAI1D,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAQlE,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;CAG5C;AAED,eAAe,aAAa,CAAC;AAE7B,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE/C,MAAM,MAAM,UAAU,GAClB,UAAU,GACV,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC"}
+{"version":3,"file":"super-openable.d.ts","sourceRoot":"","sources":["../../src/core/super-openable.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,cAAM,aAAc,SAAQ,WAAW;IACrC;;OAEG;IAEH,IAAI,UAAS;IAEb,MAAM,CAAC,EAAE,GAAE,OAAwC,GAAG,IAAI;IAI1D,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAQlE,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;CAG5C;AAED,eAAe,aAAa,CAAC;AAE7B,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE7D,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE/C,MAAM,MAAM,UAAU,GAClB,UAAU,GACV,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC"}

package/dialog.js

@@ -1,6 +1,2 @@
-import Dialog from './components/dialog.js';
-
-Dialog.define();
-
-export { Dialog as default };
+import o from"./components/dialog.js";o.define();export{o as default};
 //# sourceMappingURL=dialog.js.map

package/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["src/dialog.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,MAAM,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"dialog.js","sources":["src/dialog.ts"],"sourcesContent":null,"names":["Dialog","define"],"mappings":"sCAEAA,EAAOC"}

package/divider.js

@@ -1,6 +1,2 @@
-import Divider from './components/divider.js';
-
-Divider.define();
-
-export { Divider as default };
+import e from"./components/divider.js";e.define();export{e as default};
 //# sourceMappingURL=divider.js.map

package/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["src/divider.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,OAAO,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"divider.js","sources":["src/divider.ts"],"sourcesContent":null,"names":["Divider","define"],"mappings":"uCAEAA,EAAQC"}

package/dragbox.js

@@ -1,6 +1,2 @@
-import Dragbox from './components/dragbox.js';
-
-Dragbox.define();
-
-export { Dragbox as default };
+import o from"./components/dragbox.js";o.define();export{o as default};
 //# sourceMappingURL=dragbox.js.map

package/dragbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"dragbox.js","sources":["src/dragbox.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,OAAO,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"dragbox.js","sources":["src/dragbox.ts"],"sourcesContent":null,"names":["Dragbox","define"],"mappings":"uCAEAA,EAAQC"}

package/flex.js

@@ -1,6 +1,2 @@
-import Flex from './components/flex.js';
-
-Flex.define();
-
-export { Flex as default };
+import e from"./components/flex.js";e.define();export{e as default};
 //# sourceMappingURL=flex.js.map

package/flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex.js","sources":["src/flex.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,IAAI,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"flex.js","sources":["src/flex.ts"],"sourcesContent":null,"names":["Flex","define"],"mappings":"oCAEAA,EAAKC"}

package/form.js

@@ -1,6 +1,2 @@
-import Form from './components/form.js';
-
-Form.define();
-
-export { Form as default };
+import o from"./components/form.js";o.define();export{o as default};
 //# sourceMappingURL=form.js.map

package/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["src/form.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,IAAI,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"form.js","sources":["src/form.ts"],"sourcesContent":null,"names":["Form","define"],"mappings":"oCAEAA,EAAKC"}

package/grid.js

@@ -1,6 +1,2 @@
-import Grid from './components/grid.js';
-
-Grid.define();
-
-export { Grid as default };
+import e from"./components/grid.js";e.define();export{e as default};
 //# sourceMappingURL=grid.js.map

package/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sources":["src/grid.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,IAAI,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"grid.js","sources":["src/grid.ts"],"sourcesContent":null,"names":["Grid","define"],"mappings":"oCAEAA,EAAKC"}

package/index.js

@@ -1,57 +1,2 @@
-import './alert.js';
-import './avatar.js';
-import './breath.js';
-import './button.js';
-import './card.js';
-import './carousel.js';
-import './details.js';
-import './dialog.js';
-import './divider.js';
-import './dragbox.js';
-import './flex.js';
-import './form.js';
-import './grid.js';
-import './input.js';
-import './layout.js';
-import './link.js';
-import './progress.js';
-import './range.js';
-import './rotate.js';
-import './router.js';
-import './select.js';
-import './skeleton.js';
-import './split.js';
-import './switch.js';
-import './text.js';
-import './time.js';
-import './tooltip.js';
-import './typewriter.js';
-export { default as Alert } from './components/alert.js';
-export { default as Avatar } from './components/avatar.js';
-export { default as Breath } from './components/breath.js';
-export { default as Button } from './components/button.js';
-export { default as Card } from './components/card.js';
-export { default as Carousel } from './components/carousel.js';
-export { default as Details } from './components/details.js';
-export { default as Dialog } from './components/dialog.js';
-export { default as Divider } from './components/divider.js';
-export { default as Dragbox } from './components/dragbox.js';
-export { default as Flex } from './components/flex.js';
-export { default as Form } from './components/form.js';
-export { default as Grid } from './components/grid.js';
-export { default as Input } from './components/input.js';
-export { default as Layout } from './components/layout.js';
-export { default as Link } from './components/link.js';
-export { default as Progress } from './components/progress.js';
-export { default as Range } from './components/range.js';
-export { default as Rotate } from './components/rotate.js';
-export { default as Router } from './components/router.js';
-export { default as Select } from './components/select.js';
-export { default as Skeleton } from './components/skeleton.js';
-export { default as Split } from './components/split.js';
-export { default as Switch } from './components/switch.js';
-export { default as Text } from './components/text.js';
-export { default as Time } from './components/time.js';
-export { default as Tooltip } from './components/tooltip.js';
-export { default as Typewriter } from './components/typewriter.js';
+import"./alert.js";import"./avatar.js";import"./breath.js";import"./button.js";import"./card.js";import"./carousel.js";import"./details.js";import"./dialog.js";import"./divider.js";import"./dragbox.js";import"./flex.js";import"./form.js";import"./grid.js";import"./input.js";import"./layout.js";import"./link.js";import"./progress.js";import"./range.js";import"./rotate.js";import"./router.js";import"./select.js";import"./skeleton.js";import"./split.js";import"./switch.js";import"./text.js";import"./time.js";import"./tooltip.js";import"./typewriter.js";export{default as Alert}from"./components/alert.js";export{default as Avatar}from"./components/avatar.js";export{default as Breath}from"./components/breath.js";export{default as Button}from"./components/button.js";export{default as Card}from"./components/card.js";export{default as Carousel}from"./components/carousel.js";export{default as Details}from"./components/details.js";export{default as Dialog}from"./components/dialog.js";export{default as Divider}from"./components/divider.js";export{default as Dragbox}from"./components/dragbox.js";export{default as Flex}from"./components/flex.js";export{default as Form}from"./components/form.js";export{default as Grid}from"./components/grid.js";export{default as Input}from"./components/input.js";export{default as Layout}from"./components/layout.js";export{default as Link}from"./components/link.js";export{default as Progress}from"./components/progress.js";export{default as Range}from"./components/range.js";export{default as Rotate}from"./components/rotate.js";export{default as Router}from"./components/router.js";export{default as Select}from"./components/select.js";export{default as Skeleton}from"./components/skeleton.js";export{default as Split}from"./components/split.js";export{default as Switch}from"./components/switch.js";export{default as Text}from"./components/text.js";export{default as Time}from"./components/time.js";export{default as Tooltip}from"./components/tooltip.js";export{default as Typewriter}from"./components/typewriter.js";
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":null,"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}

package/input.js

@@ -1,6 +1,2 @@
-import Input from './components/input.js';
-
-Input.define();
-
-export { Input as default };
+import e from"./components/input.js";e.define();export{e as default};
 //# sourceMappingURL=input.js.map

package/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["src/input.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,KAAK,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"input.js","sources":["src/input.ts"],"sourcesContent":null,"names":["Input","define"],"mappings":"qCAEAA,EAAMC"}

package/layout.js

@@ -1,6 +1,2 @@
-import Layout from './components/layout.js';
-
-Layout.define();
-
-export { Layout as default };
+import o from"./components/layout.js";o.define();export{o as default};
 //# sourceMappingURL=layout.js.map

package/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sources":["src/layout.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,MAAM,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"layout.js","sources":["src/layout.ts"],"sourcesContent":null,"names":["Layout","define"],"mappings":"sCAEAA,EAAOC"}

package/link.js

@@ -1,6 +1,2 @@
-import Link from './components/link.js';
-
-Link.define();
-
-export { Link as default };
+import e from"./components/link.js";e.define();export{e as default};
 //# sourceMappingURL=link.js.map

package/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["src/link.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,IAAI,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"link.js","sources":["src/link.ts"],"sourcesContent":null,"names":["Link","define"],"mappings":"oCAEAA,EAAKC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "godown",
-  "version": "3.0.0-canary.13",
+  "version": "3.0.0-canary.15",
   "description": "Non Composite Web Components Library",
   "type": "module",
   "main": "index.js",
@@ -31,8 +31,8 @@
     "fmtime": "^0.0.3",
     "lit": "^3.0.0",
     "tslib": "^2.7.0",
-    "@godown/colors": "^0.0.1",
-    "@godown/element": "^0.2.1",
+    "@godown/colors": "^0.0.2",
+    "@godown/element": "^0.2.2",
     "@godown/f7-icon": "^0.0.4"
   },
   "publishConfig": {

package/progress.js

@@ -1,6 +1,2 @@
-import Progress from './components/progress.js';
-
-Progress.define();
-
-export { Progress as default };
+import e from"./components/progress.js";e.define();export{e as default};
 //# sourceMappingURL=progress.js.map

package/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","sources":["src/progress.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,QAAQ,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"progress.js","sources":["src/progress.ts"],"sourcesContent":null,"names":["Progress","define"],"mappings":"wCAEAA,EAASC"}

package/range.js

@@ -1,6 +1,2 @@
-import Range from './components/range.js';
-
-Range.define();
-
-export { Range as default };
+import e from"./components/range.js";e.define();export{e as default};
 //# sourceMappingURL=range.js.map

package/range.js.map

@@ -1 +1 @@
-{"version":3,"file":"range.js","sources":["src/range.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,KAAK,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"range.js","sources":["src/range.ts"],"sourcesContent":null,"names":["Range","define"],"mappings":"qCAEAA,EAAMC"}

package/rotate.js

@@ -1,6 +1,2 @@
-import Rotate from './components/rotate.js';
-
-Rotate.define();
-
-export { Rotate as default };
+import e from"./components/rotate.js";e.define();export{e as default};
 //# sourceMappingURL=rotate.js.map

package/rotate.js.map

@@ -1 +1 @@
-{"version":3,"file":"rotate.js","sources":["src/rotate.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,MAAM,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"rotate.js","sources":["src/rotate.ts"],"sourcesContent":null,"names":["Rotate","define"],"mappings":"sCAEAA,EAAOC"}

package/router.js

@@ -1,6 +1,2 @@
-import Router from './components/router.js';
-
-Router.define();
-
-export { Router as default };
+import e from"./components/router.js";e.define();export{e as default};
 //# sourceMappingURL=router.js.map

package/router.js.map

@@ -1 +1 @@
-{"version":3,"file":"router.js","sources":["src/router.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,MAAM,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"router.js","sources":["src/router.ts"],"sourcesContent":null,"names":["Router","define"],"mappings":"sCAEAA,EAAOC"}

package/select.js

@@ -1,6 +1,2 @@
-import Select from './components/select.js';
-
-Select.define();
-
-export { Select as default };
+import e from"./components/select.js";e.define();export{e as default};
 //# sourceMappingURL=select.js.map

package/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["src/select.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,MAAM,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"select.js","sources":["src/select.ts"],"sourcesContent":null,"names":["Select","define"],"mappings":"sCAEAA,EAAOC"}

package/skeleton.js

@@ -1,6 +1,2 @@
-import Skeleton from './components/skeleton.js';
-
-Skeleton.define();
-
-export { Skeleton as default };
+import e from"./components/skeleton.js";e.define();export{e as default};
 //# sourceMappingURL=skeleton.js.map

package/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["src/skeleton.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,QAAQ,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"skeleton.js","sources":["src/skeleton.ts"],"sourcesContent":null,"names":["Skeleton","define"],"mappings":"wCAEAA,EAASC"}

package/split.js

@@ -1,6 +1,2 @@
-import Split from './components/split.js';
-
-Split.define();
-
-export { Split as default };
+import e from"./components/split.js";e.define();export{e as default};
 //# sourceMappingURL=split.js.map

package/split.js.map

@@ -1 +1 @@
-{"version":3,"file":"split.js","sources":["src/split.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,KAAK,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"split.js","sources":["src/split.ts"],"sourcesContent":null,"names":["Split","define"],"mappings":"qCAEAA,EAAMC"}

package/src/components/alert.ts

@@ -41,7 +41,7 @@ const darkStyles = constructCSSObject(
     white: [cssGlobalVars._colors.lightgray[2], cssGlobalVars._colors.darkgray[7]],
     black: [cssGlobalVars._colors.darkgray[8], cssGlobalVars._colors.lightgray[5]],
   },
-  () => `:host`,
+  () => ":host",
   (prop) => toVar(prop),
 );
 
@@ -64,7 +64,7 @@ const lightStyles = constructCSSObject(
     white: [cssGlobalVars._colors.lightgray[0], cssGlobalVars._colors.darkgray[0]],
     black: [cssGlobalVars._colors.darkgray[7], cssGlobalVars._colors.lightgray[3]],
   },
-  () => `:host`,
+  () => ":host",
   (prop) => toVar(prop),
 );
 
@@ -248,17 +248,15 @@ class Alert extends GlobalStyle {
     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>`
+        ? html`<div part="close" tabindex="0" @click="${this.close}">${iconXmark()}</div>`
         : ""
     }
-    ${htmlStyle(this.variant === "light" ? lightStyles[color] : darkStyles[color])}
+      ${htmlStyle(this.variant === "light" ? lightStyles[color] : darkStyles[color])}
     </div>`;
   }
 

package/src/components/avatar.ts

@@ -23,7 +23,7 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(
   css`
-    :host{
+    :host {
       ${cssScope}--size: 2em;
       width: var(${cssScope}--size);
       height: var(${cssScope}--size);
@@ -82,14 +82,12 @@ class Avatar extends GlobalStyle {
   round = false;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(omit(this.observedRecord, "src"))}>
-      ${this._renderAvatar()}
-    </div>`;
+    return html`<div part="root" ${attr(omit(this.observedRecord, "src"))}>${this._renderAvatar()}</div>`;
   }
 
   private _renderAvatar() {
     if (this.src) {
-      return html`<img part="image" src="${this.src}" @error=${this._handleError} alt="${this.name}">`;
+      return html`<img part="image" src="${this.src}" @error=${this._handleError} alt="${this.name}" />`;
     }
     if (this.name) {
       return html`<span part="name">${this.format()}</span>`;

package/src/components/breath.ts

@@ -112,10 +112,7 @@ class Breath extends GlobalStyle {
   protected render(): TemplateResult<1> {
     const texts = this.getTexts();
     return html`<div part="root" ${attr(this.observedRecord)}>
-    ${[
-      texts.map(this.renderText),
-      htmlStyle(this.computeStyle(texts.length)),
-    ]}
+    ${[texts.map(this.renderText), htmlStyle(this._computeStyle(texts.length))]}
     </div>`;
   }
 
@@ -130,33 +127,31 @@ class Breath extends GlobalStyle {
     return Array.isArray(this.text) ? this.text : (this.text || this.textContent).split(/\s+/).filter((x) => x);
   }
 
-  protected computeStyle(len: number): string {
+  protected _computeStyle(len: number): string {
     const gap = 100 / 2 / len;
     const duration = this.parseDuration() || len * 2 + 2;
-
+    let style1 = "";
+    for (let number = 1; number <= len; number++) {
+      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}));}`;
+    }
     return (
-      `.colorful{animation-duration:${duration}s;}`
-      + `@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${gap * 2}%{opacity:1;}}`
-      + (() => {
-        let style1 = "";
-        for (let number = 1; number <= len; number++) {
-          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}));}`;
-        }
-        return style1;
-      })()
+      `.colorful{animation-duration:${duration}s;}@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${
+        gap * 2
+      }%{opacity:1;}}${style1}`
     );
   }
 
-  protected parseDuration(): number {
+  protected parseDuration(): number | undefined {
     const { duration } = this;
     if (duration) {
       if (duration.endsWith("s")) {
-        return parseFloat(duration.slice(0, -1));
-      } else if (duration.endsWith("ms")) {
-        return parseFloat(duration.slice(0, -2)) / 1000;
+        return Number.parseFloat(duration.slice(0, -1));
+      }
+      if (duration.endsWith("ms")) {
+        return Number.parseFloat(duration.slice(0, -2)) / 1000;
       }
     }
   }

package/src/components/button.ts

@@ -5,7 +5,7 @@ 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, TemplateResult } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -76,7 +76,7 @@ const colors: Record<Colors, string> = constructCSSObject(
       cssGlobalVars._colors.teal[4], // gradients
     ],
   },
-  () => `:host`,
+  () => ":host",
   (prop) => toVar(prop),
 );
 

package/src/components/card.ts

@@ -71,11 +71,7 @@ class Card extends GlobalStyle {
 
   protected render(): TemplateResult<1> {
     return html`<div part="root" ${attr(this.observedRecord)}>
-    ${[
-      this.header ? htmlSlot("header") : "",
-      htmlSlot(),
-      this.footer ? htmlSlot("footer") : "",
-    ]}
+      ${[this.header ? htmlSlot("header") : "", htmlSlot(), this.footer ? htmlSlot("footer") : ""]}
     </div>`;
   }
 }

package/src/components/carousel.ts

@@ -103,15 +103,9 @@ class Carousel extends GlobalStyle {
 
   protected render(): TemplateResult<1> {
     return html`<div part="root" ${attr(this.observedRecord)}>
-      <i part="prev" @click="${this.prev}">
-        ${iconChevronLeft()}
-      </i>
-      <div part="move-root" style="transform:${`translateX(-${this.index + 1}00%)`}">
-        ${htmlSlot()}
-      </div>
-      <i part="next" @click="${this.next}">
-        ${iconChevronRight()}
-      </i>
+      <i part="prev" @click="${this.prev}"> ${iconChevronLeft()} </i>
+      <div part="move-root" style="transform:${`translateX(-${this.index + 1}00%)`}">${htmlSlot()}</div>
+      <i part="next" @click="${this.next}"> ${iconChevronRight()} </i>
       ${htmlStyle(`:host,:host([contents]) [part=root]{width:${this.width};}`)}
     </div>`;
   }
@@ -164,7 +158,7 @@ class Carousel extends GlobalStyle {
   protected _doTranslateX(xValue: string, noTransition?: boolean): void {
     this._moveRoot.style.transform = `translateX(${xValue})`;
     if (noTransition) {
-      this._moveRoot.style.transition = `none`;
+      this._moveRoot.style.transition = "none";
     }
     this._moveRoot.getBoundingClientRect();
   }

package/src/components/details.ts

@@ -4,7 +4,7 @@ import { attr } from "@godown/element/directives/attr.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
 import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
 import { css, html, type TemplateResult } from "lit";
-import { property, query } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 
 import { scopePrefix } from "../core/global-style.js";
 import SuperOpenable from "../core/super-openable.js";
@@ -27,7 +27,6 @@ const cssScope = scopePrefix(protoName);
     :host {
       ${cssScope}--icon-deg-open: 0deg;
       ${cssScope}--icon-deg-close: 90deg;
-      ${cssScope}--icon-deg: 0deg;
       ${cssScope}--icon-space: 0.3em;
       ${cssScope}--summary-direction: row;
       ${cssScope}--transition: .3s;
@@ -36,13 +35,13 @@ const cssScope = scopePrefix(protoName);
       transition: var(${cssScope}--transition);
     }
 
-    dl {
+    [part=root] {
       height: 100%;
       position: relative;
       overflow: hidden;
     }
 
-    dt {
+    [part=title] {
       height: 100%;
       display: flex;
       flex-wrap: nowrap;
@@ -52,7 +51,7 @@ const cssScope = scopePrefix(protoName);
       flex-direction: var(${cssScope}--summary-direction);
     }
 
-    dd {
+    [part=details] {
       display: grid;
       overflow: hidden;
       grid-template-rows: 0fr;
@@ -60,27 +59,24 @@ const cssScope = scopePrefix(protoName);
       transition-property: grid-template-rows;
     }
 
-    i {
-      display: flex;
-      backface-visibility: hidden;
-      padding: var(${cssScope}--icon-space);
-      transition: var(${cssScope}--transition);
-      transform: rotate(var(${cssScope}--icon-deg));
-    }
-
-    :host([open]) dd {
+    :host([open]) [part=details] {
       grid-template-rows: 1fr;
     }
 
-    :host([float]) dd {
+    :host([float]) [part=details] {
       top: 100%;
       position: absolute;
     }
 
-    i {
+    [part=icon] {
+      display: flex;
+      backface-visibility: hidden;
+      padding: var(${cssScope}--icon-space);
+      transition: var(${cssScope}--transition);
       transform: rotate(var(${cssScope}--icon-deg-close));
     }
-    :host([open]) i {
+
+    :host([open]) [part=icon] {
       transform: rotate(var(${cssScope}--icon-deg-open));
     }
   `,
@@ -98,15 +94,10 @@ class Details extends SuperOpenable {
   @property()
   summary = "";
 
-  @query("dd")
-  protected _dd: HTMLDataListElement;
-
   protected render(): TemplateResult<1> {
     return html`<dl part="root" ${attr(this.observedRecord)}>
       <dt part="title" @click="${this._handelClick}">
-        <span part="summary">
-          ${this.summary || htmlSlot("summary")}
-        </span>
+        <span part="summary">${this.summary || htmlSlot("summary")}</span>
         <span>
           <i part="icon">${svgCaretDown()}</i>
         </span>

package/src/components/dialog.ts

@@ -1,4 +1,4 @@
-import { type HandlerEvent } from "@godown/element";
+import type { HandlerEvent } from "@godown/element";
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
 import { attr } from "@godown/element/directives/attr.js";