godown 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "godown",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Non Composite Web Components Library",
   "type": "module",
   "main": "index.js",
@@ -33,8 +33,8 @@
     "lit": "^3.0.0",
     "tslib": "^2.7.0",
     "@godown/colors": "^1.0.0",
-    "@godown/element": "^1.0.0",
-    "@godown/f7-icon": "^1.0.0"
+    "@godown/f7-icon": "^1.0.0",
+    "@godown/element": "^1.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -55,8 +55,8 @@
     "clean": "tsc --build tsconfig.prod.json --clean",
     "build": "tsc && tsx build.ts",
     "build:ts": "tsc",
-    "fmt": "dprint fmt",
-    "lint": "eslint . --fix",
+    "fmt": "prettier src --write",
+    "lint": "biome lint",
     "manifest": "tsx manifest.ts"
   }
 }

package/src/components/alert.ts

@@ -5,12 +5,12 @@ import iconInfoCircle from "@godown/f7-icon/icons/info-circle.js";
 import iconLightbulb from "@godown/f7-icon/icons/lightbulb.js";
 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, type TemplateResult } from "lit";
+import iconXmark from "@godown/f7-icon/icons/xmark.js";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
 
 const protoName = "alert";
 const cssScope = scopePrefix(protoName);
@@ -110,74 +110,72 @@ const calls = {
  * @category feedback
  */
 @godown(protoName)
-@styles(
-  css`
-    :host,
-    :where(:host([contents]) [part=root]) {
-      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%;
-    }
+@styles(css`
+  :host,
+  :where(:host([contents]) [part="root"]) {
+    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: 0.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);
-    }
+  [part="root"] {
+    --color: var(${cssScope}--color);
+    color: var(--color);
+    width: 100%;
+    transition: 0.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: transparent;
-    }
+  [variant="blockquote"] {
+    border-radius: 0;
+    border-left: var(${cssScope}--blockquote-width) solid var(--color);
+    border-bottom: none;
+    border-right: none;
+    border-top: none;
+    background: transparent;
+  }
 
-    [part=content] {
-      color: var(--color);
-    }
+  [part="content"] {
+    color: var(--color);
+  }
 
-    [part=root] {
-      display: grid;
-      align-items: center;
-      grid-template-columns: auto 1fr auto;
-      grid-template-rows: auto 1fr;
-    }
+  [part="root"] {
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto 1fr;
+  }
 
-    [part=title] {
-      line-height: 2em;
-    }
+  [part="title"] {
+    line-height: 2em;
+  }
 
-    [part=icon] {
-      display: inline-grid;
-      align-items: center;
-      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="icon"] svg {
+    margin-right: 0.5em;
+    width: 1.25em;
+    height: 1.25em;
+  }
 
-    [part=content] {
-      grid-row: span 2 / span 2;
-      line-height: 1.5em;
-    }
-    `,
-)
+  [part="content"] {
+    grid-row: span 2 / span 2;
+    line-height: 1.5em;
+  }
+`)
 class Alert extends GlobalStyle {
   /**
    * If it is a legal value, the icon and preset color will be rendered.
@@ -241,19 +239,30 @@ class Alert extends GlobalStyle {
   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" ${attr(this.observedRecord)}>
-      <div part="icon">${icon}</div>
-      <div part="content">
-        <strong part="title">${this.title || htmlSlot("title")}</strong>
-        ${this.content || htmlSlot()}
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        <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>
+            `}
+        ${htmlStyle(this.variant === "dark" ? darkStyles[color] : lightStyles[color])}
       </div>
-      ${
-      !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(): void {

package/src/components/avatar.ts

@@ -1,5 +1,5 @@
 import { attr, godown, htmlSlot, omit, styles } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -17,47 +17,45 @@ const cssScope = scopePrefix(protoName);
  * @category display
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      ${cssScope}--size: 2em;
-      width: var(${cssScope}--size);
-      height: var(${cssScope}--size);
-      vertical-align: bottom;
-    }
+@styles(css`
+  :host {
+    ${cssScope}--size: 2em;
+    width: var(${cssScope}--size);
+    height: var(${cssScope}--size);
+    vertical-align: bottom;
+  }
 
-    :host,
-    [part=root] {
-      display: inline-flex;
-    }
+  :host,
+  [part="root"] {
+    display: inline-flex;
+  }
 
-    :host([contents]) [part=root] {
-      display: inline-flex;
-      width: inherit;
-      height: inherit;
-    }
+  :host([contents]) [part="root"] {
+    display: inline-flex;
+    width: inherit;
+    height: inherit;
+  }
 
-    :host([round]) {
-      border-radius:50%;
-    }
+  :host([round]) {
+    border-radius: 50%;
+  }
 
-    [part=image] {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
+  [part="image"] {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 
-    [part=root] {
-      overflow: hidden;
-      position: relative;
-      border-radius: inherit;
-      width: 100%;
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-    }
-  `,
-)
+  [part="root"] {
+    overflow: hidden;
+    position: relative;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+`)
 class Avatar extends GlobalStyle {
   /**
    * Image src.
@@ -78,15 +76,31 @@ 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}"
+          alt="${this.name}"
+          @error=${this._handleError}
+        />
+      `;
     }
     if (this.name) {
-      return html`<span part="name">${this.format()}</span>`;
+      return html`
+        <span part="name">${this.format()}</span>
+      `;
     }
     return htmlSlot();
   }

package/src/components/badge.ts

@@ -1,8 +1,8 @@
 import { attr, godown, htmlSlot, styles } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
 
 type Position = "top-right" | "top-left" | "bottom-right" | "bottom-left";
 
@@ -16,61 +16,59 @@ const cssScope = scopePrefix(protoName);
  * @category display
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      ${cssScope}--background: var(${cssGlobalVars.active});
-      ${cssScope}--offset: 0%;
-      ${cssScope}--offset-x: var(${cssScope}--offset);
-      ${cssScope}--offset-y: var(${cssScope}--offset);
-    }
-
-    :host,
-    :host([contents]) [part=root] {
-      display: inline-block;
-    }
-
-    [part=root] {
-      position: relative;
-    }
-
-    [part=badge] {
-      position: absolute;
-      font-size: 75%;
-      padding: 0 0.5em;
-      user-select: none;
-      border-radius: calc(infinity * 1px);
-      transform: translate(-50%, -50%);
-      left: var(--left);
-      top: var(--top);
-      background: var(${cssScope}--background);
-    }
-
-    [part=badge]:empty {
-      width: 0.5em;
-      height: 0.5em;
-      font-size: 100%;
-      padding: 0;
-      border-radius: 50%;
-    }
-
-    [position^=top] {
-      --top: calc(0% + var(${cssScope}--offset-y));
-    }
-
-    [position$=right] {
-      --left: calc(100% - var(${cssScope}--offset-x));
-    }
-
-    [position^=bottom] {
-      --top: calc(100% - var(${cssScope}--offset-y));
-    }
-
-    [position$=left] {
-      --left: calc(0% + var(${cssScope}--offset-x));
-    }
-  `,
-)
+@styles(css`
+  :host {
+    ${cssScope}--background: var(${cssGlobalVars.active});
+    ${cssScope}--offset: 0%;
+    ${cssScope}--offset-x: var(${cssScope}--offset);
+    ${cssScope}--offset-y: var(${cssScope}--offset);
+  }
+
+  :host,
+  :host([contents]) [part="root"] {
+    display: inline-block;
+  }
+
+  [part="root"] {
+    position: relative;
+  }
+
+  [part="badge"] {
+    position: absolute;
+    font-size: 75%;
+    padding: 0 0.5em;
+    user-select: none;
+    border-radius: calc(infinity * 1px);
+    transform: translate(-50%, -50%);
+    left: var(--left);
+    top: var(--top);
+    background: var(${cssScope}--background);
+  }
+
+  [part="badge"]:empty {
+    width: 0.5em;
+    height: 0.5em;
+    font-size: 100%;
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  [position^="top"] {
+    --top: calc(0% + var(${cssScope}--offset-y));
+  }
+
+  [position$="right"] {
+    --left: calc(100% - var(${cssScope}--offset-x));
+  }
+
+  [position^="bottom"] {
+    --top: calc(100% - var(${cssScope}--offset-y));
+  }
+
+  [position$="left"] {
+    --left: calc(0% + var(${cssScope}--offset-x));
+  }
+`)
 class Badge extends GlobalStyle {
   @property()
   position: Position = "top-right";
@@ -92,14 +90,19 @@ class Badge extends GlobalStyle {
   }
 
   render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)}>
-      ${htmlSlot()}
-      ${
-      this.value || this.dot
-        ? html`<div part="badge">${this.dot ? "" : this.formatValue(this.value)}</div>`
-        : ""
-    }
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${htmlSlot()}
+        ${this.value || this.dot
+          ? html`
+              <div part="badge">${this.dot ? "" : this.formatValue(this.value)}</div>
+            `
+          : ""}
+      </div>
+    `;
   }
 }
 

package/src/components/breath.ts

@@ -1,8 +1,8 @@
 import { attr, godown, htmlStyle, styles } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
 
 const defineName = "breath";
 const cssScope = scopePrefix(defineName);
@@ -48,11 +48,11 @@ const cssScope = scopePrefix(defineName);
     }
 
     :host,
-    :host([contents]) [part=root] {
+    :host([contents]) [part="root"] {
       display: flex;
     }
 
-    [part=root] {
+    [part="root"] {
       display: contents;
     }
 
@@ -108,16 +108,23 @@ 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))]}
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${[texts.map(this.renderText), htmlStyle(this._computeStyle(texts.length))]}
+      </div>
+    `;
   }
 
   protected renderText(text: string): TemplateResult<1> {
-    return html`<span class="rel">
-      <span class="nocolor">${text}</span>
-      <span class="colorful">${text}</span>
-    </span>`;
+    return html`
+      <span class="rel">
+        <span class="nocolor">${text}</span>
+        <span class="colorful">${text}</span>
+      </span>
+    `;
   }
 
   protected getTexts(): string[] {
@@ -129,16 +136,13 @@ class Breath extends GlobalStyle {
     const duration = this.parseDuration() || len * 2 + 2;
     let style1 = "";
     for (let number = 1; number <= len; number++) {
-      const delay = -duration / len * (len - number + 1);
+      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}));}`;
+      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;}}${style1}`
-    );
+    return `.colorful{animation-duration:${duration}s;}@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${
+      gap * 2
+    }%{opacity:1;}}${style1}`;
   }
 
   protected parseDuration(): number | undefined {

package/src/components/button.ts

@@ -1,8 +1,8 @@
 import { attr, constructCSSObject, godown, htmlSlot, htmlStyle, part, styles, toVar } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
 
 const protoName = "button";
 const cssScope = scopePrefix(protoName);
@@ -106,7 +106,7 @@ const colors: Record<Colors, string> = constructCSSObject(
 
     :host([ghost]) {
       ${cssScope}--modal-background: var(${cssScope}--ghost-color);
-      box-shadow:inset 0px 0px 0px var(${cssScope}--ghost-width) var(${cssScope}--ghost-color);
+      box-shadow: inset 0px 0px 0px var(${cssScope}--ghost-width) var(${cssScope}--ghost-color);
       color: var(${cssScope}--ghost-color);
       background: transparent;
     }
@@ -137,11 +137,11 @@ const colors: Record<Colors, string> = constructCSSObject(
       cursor: pointer;
     }
 
-    :host([contents]) [part=root] {
+    :host([contents]) [part="root"] {
       width: fit-content;
     }
 
-    [part=root] {
+    [part="root"] {
       width: 100%;
       height: 100%;
       overflow: hidden;
@@ -152,7 +152,7 @@ const colors: Record<Colors, string> = constructCSSObject(
       transition-duration: inherit;
     }
 
-    [part=content] {
+    [part="content"] {
       padding: var(${cssScope}--padding);
     }
 
@@ -228,12 +228,15 @@ class Button extends GlobalStyle {
 
   protected render(): TemplateResult<1> {
     const color = this.nextColor();
-    return html`<div part="root" ${attr(this.observedRecord)}>
-      <span part="modal-root"></span>
-      <div part="content">
-        ${[this.content || htmlSlot(), htmlStyle(colors[color])]}
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        <span part="modal-root"></span>
+        <div part="content">${[this.content || htmlSlot(), htmlStyle(colors[color])]}</div>
       </div>
-    </div>`;
+    `;
   }
 
   focus(): void {