godown 3.0.0 → 3.0.2

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;
     }
@@ -114,7 +114,7 @@ const colors: Record<Colors, string> = constructCSSObject(
   css`
     :host {
       ${cssScope}--padding-x: .5em;
-      ${cssScope}--padding-y: min(calc(var(${cssScope}--padding-x) / 2), .25em);
+      ${cssScope}--padding-y: min(calc(var(${cssScope}--padding-x) / 2), .125em);
       ${cssScope}--padding: var(${cssScope}--padding-y) var(${cssScope}--padding-x);
       ${cssScope}--modal-animation-duration: 1s;
       ${cssScope}--ghost-width: .08em;
@@ -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;
@@ -150,9 +150,6 @@ const colors: Record<Colors, string> = constructCSSObject(
       user-select: none;
       border-radius: inherit;
       transition-duration: inherit;
-    }
-
-    [part=content] {
       padding: var(${cssScope}--padding);
     }
 
@@ -228,12 +225,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 {

package/src/components/card.ts

@@ -1,9 +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";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
 import type Layout from "../layout.js";
 
 const protoName = "card";
@@ -21,44 +20,42 @@ const cssScope = scopePrefix(protoName);
  * @category display
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      ${cssScope}--background: var(${cssGlobalVars.background});
-      ${cssScope}--border-width: .0375em;
-      ${cssScope}--border-color: transparent;
-      ${cssScope}--border-background: var(${cssGlobalVars.passive});
-      ${cssScope}--padding: .75em;
-      color: var(${cssGlobalVars.foreground});
-      background: var(${cssScope}--background);
-      border-width: var(${cssScope}--border-width);
-      display: block;
-      flex-shrink: 0;
-      position: relative;
-      overflow: hidden;
-      box-sizing: border-box;
-    }
+@styles(css`
+  :host {
+    ${cssScope}--background: var(${cssGlobalVars.background});
+    ${cssScope}--border-width: .0375em;
+    ${cssScope}--border-color: transparent;
+    ${cssScope}--border-background: var(${cssGlobalVars.passive});
+    ${cssScope}--padding: .75em;
+    color: var(${cssGlobalVars.foreground});
+    background: var(${cssScope}--background);
+    border-width: var(${cssScope}--border-width);
+    display: block;
+    flex-shrink: 0;
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
 
-    slot {
-      display: block;
-      padding: var(${cssScope}--padding);
-    }
+  slot {
+    display: block;
+    padding: var(${cssScope}--padding);
+  }
 
-    :host,
-    slot {
-      border-color: var(${cssScope}--border-background);
-      border-style: solid;
-    }
+  :host,
+  slot {
+    border-color: var(${cssScope}--border-background);
+    border-style: solid;
+  }
 
-    [name=footer] {
-      border-top-width: var(${cssScope}--border-width);
-    }
+  [name="footer"] {
+    border-top-width: var(${cssScope}--border-width);
+  }
 
-    [name=header] {
-      border-bottom-width: var(${cssScope}--border-width);
-    }
-  `,
-)
+  [name="header"] {
+    border-bottom-width: var(${cssScope}--border-width);
+  }
+`)
 class Card extends GlobalStyle {
   @property({ type: Boolean })
   footer = false;
@@ -67,9 +64,14 @@ class Card extends GlobalStyle {
   header = false;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)}>
-      ${[this.header ? htmlSlot("header") : "", htmlSlot(), this.footer ? htmlSlot("footer") : ""]}
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${[this.header ? htmlSlot("header") : "", htmlSlot(), this.footer ? htmlSlot("footer") : ""]}
+      </div>
+    `;
   }
 }
 

package/src/components/carousel.ts

@@ -1,7 +1,7 @@
 import { attr, godown, htmlSlot, htmlStyle, part, styles } from "@godown/element";
 import iconChevronLeft from "@godown/f7-icon/icons/chevron-left.js";
 import iconChevronRight from "@godown/f7-icon/icons/chevron-right.js";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -23,52 +23,50 @@ const protoName = "carousel";
  * @category display
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      display: block;
-      transition: .3s;
-    }
+@styles(css`
+  :host {
+    display: block;
+    transition: 0.3s;
+  }
 
-    [part=root] {
-      direction: ltr;
-      overflow: hidden;
-    }
+  [part="root"] {
+    direction: ltr;
+    overflow: hidden;
+  }
 
-    [part=root],
-    [part=move-root] {
-      height: 100%;
-      width: 100%;
-      display: flex;
-      position: relative;
-      transition: inherit;
-    }
+  [part="root"],
+  [part="move-root"] {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    position: relative;
+    transition: inherit;
+  }
 
-    [part=prev],
-    [part=next] {
-      height: 100%;
-      width: 1.5em;
-      z-index: 1;
-      position: absolute;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      user-select: none;
-    }
+  [part="prev"],
+  [part="next"] {
+    height: 100%;
+    width: 1.5em;
+    z-index: 1;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+  }
 
-    [part=prev] {
-      left: 0;
-    }
+  [part="prev"] {
+    left: 0;
+  }
 
-    [part=next] {
-      right: 0;
-    }
+  [part="next"] {
+    right: 0;
+  }
 
-    slot::slotted(*) {
-      flex-shrink: 0 !important;
-    }
-  `,
-)
+  slot::slotted(*) {
+    flex-shrink: 0 !important;
+  }
+`)
 class Carousel extends GlobalStyle {
   /**
    * The index of the element is displayed for the first time.
@@ -98,12 +96,32 @@ class Carousel extends GlobalStyle {
   private _cloneLast: HTMLElement | undefined;
 
   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>
-      ${htmlStyle(`:host,:host([contents]) [part=root]{width:${this.width};}`)}
-    </div>`;
+    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>
+        ${htmlStyle(`:host,:host([contents]) [part=root]{width:${this.width};}`)}
+      </div>
+    `;
   }
 
   protected async firstUpdated(): Promise<void> {