godown 3.0.0 → 3.0.1

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> {

package/src/components/details.ts

@@ -1,6 +1,6 @@
 import { attr, godown, htmlSlot, styles } from "@godown/element";
 import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { scopePrefix } from "../core/global-style.js";
@@ -19,66 +19,64 @@ const cssScope = scopePrefix(protoName);
  * @category display
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      ${cssScope}--icon-deg-open: 0deg;
-      ${cssScope}--icon-deg-close: 90deg;
-      ${cssScope}--icon-space: 0.3em;
-      ${cssScope}--summary-direction: row;
-      ${cssScope}--transition: .3s;
-      height: fit-content;
-      display: block;
-      transition: var(${cssScope}--transition);
-    }
+@styles(css`
+  :host {
+    ${cssScope}--icon-deg-open: 0deg;
+    ${cssScope}--icon-deg-close: 90deg;
+    ${cssScope}--icon-space: 0.3em;
+    ${cssScope}--summary-direction: row;
+    ${cssScope}--transition: .3s;
+    height: fit-content;
+    display: block;
+    transition: var(${cssScope}--transition);
+  }
 
-    [part=root] {
-      height: 100%;
-      position: relative;
-      overflow: hidden;
-    }
+  [part="root"] {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
 
-    [part=title] {
-      direction: ltr;
-      height: 100%;
-      display: flex;
-      flex-wrap: nowrap;
-      justify-content: space-between;
-      background: inherit;
-      align-items: center;
-      flex-direction: var(${cssScope}--summary-direction);
-    }
+  [part="title"] {
+    direction: ltr;
+    height: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    background: inherit;
+    align-items: center;
+    flex-direction: var(${cssScope}--summary-direction);
+  }
 
-    [part=details] {
-      display: grid;
-      overflow: hidden;
-      grid-template-rows: 0fr;
-      transition: var(${cssScope}--transition);
-      transition-property: grid-template-rows;
-    }
+  [part="details"] {
+    display: grid;
+    overflow: hidden;
+    grid-template-rows: 0fr;
+    transition: var(${cssScope}--transition);
+    transition-property: grid-template-rows;
+  }
 
-    :host([open]) [part=details] {
-      grid-template-rows: 1fr;
-    }
+  :host([open]) [part="details"] {
+    grid-template-rows: 1fr;
+  }
 
-    :host([float]) [part=details] {
-      top: 100%;
-      position: absolute;
-    }
+  :host([float]) [part="details"] {
+    top: 100%;
+    position: absolute;
+  }
 
-    [part=icon] {
-      display: flex;
-      backface-visibility: hidden;
-      padding: var(${cssScope}--icon-space);
-      transition: var(${cssScope}--transition);
-      transform: rotate(var(${cssScope}--icon-deg-close));
-    }
+  [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]) [part=icon] {
-      transform: rotate(var(${cssScope}--icon-deg-open));
-    }
-  `,
-)
+  :host([open]) [part="icon"] {
+    transform: rotate(var(${cssScope}--icon-deg-open));
+  }
+`)
 class Details extends SuperOpenable {
   /**
    * If it is true, the summary event scope will fill the element.
@@ -93,17 +91,28 @@ class Details extends SuperOpenable {
   summary = "";
 
   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>
-          <i part="icon">${svgCaretDown()}</i>
-        </span>
-      </dt>
-      <dd part="details" @click=${this.fill ? () => this.toggle() : null}>
-        <div style="min-height: 0;">${htmlSlot()}</div>
-      </dd>
-    </dl>`;
+    return html`
+      <dl
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        <dt
+          part="title"
+          @click="${this._handelClick}"
+        >
+          <span part="summary">${this.summary || htmlSlot("summary")}</span>
+          <span>
+            <i part="icon">${svgCaretDown()}</i>
+          </span>
+        </dt>
+        <dd
+          part="details"
+          @click=${this.fill ? () => this.toggle() : null}
+        >
+          <div style="min-height: 0;">${htmlSlot()}</div>
+        </dd>
+      </dl>
+    `;
   }
 }
 

package/src/components/dialog.ts

@@ -1,5 +1,5 @@
-import { attr, godown, type HandlerEvent, htmlSlot, styles } from "@godown/element";
-import { css, html, type PropertyValues, type TemplateResult } from "lit";
+import { type HandlerEvent, attr, godown, htmlSlot, styles } from "@godown/element";
+import { type PropertyValues, type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -19,71 +19,68 @@ const cssScope = scopePrefix(protoName);
  * @category feedback
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      ${cssScope}--background: none;
-      ${cssScope}--background-modal: var(${cssGlobalVars.background});
-      ${cssScope}--opacity-modal: 0.2;
-      background: var(${cssScope}--background);
-      pointer-events: none;
-      visibility: hidden;
-      position: fixed;
-      z-index: 1;
-      inset: 0;
-    }
-
-    :host([open]) {
-      visibility: visible;
-    }
+@styles(css`
+  :host {
+    ${cssScope}--background: none;
+    ${cssScope}--background-modal: var(${cssGlobalVars.background});
+    ${cssScope}--opacity-modal: 0.2;
+    background: var(${cssScope}--background);
+    pointer-events: none;
+    visibility: hidden;
+    position: fixed;
+    z-index: 1;
+    inset: 0;
+  }
 
-    :host([open][modal]) [part=modal] {
-      pointer-events: all;
-      visibility: visible;
-      opacity: var(${cssScope}--opacity-modal);
+  :host([open]) {
+    visibility: visible;
+  }
 
-    }
+  :host([open][modal]) [part="modal"] {
+    pointer-events: all;
+    visibility: visible;
+    opacity: var(${cssScope}--opacity-modal);
+  }
 
-    [part=modal] {
-      visibility: hidden;
-      opacity: 0;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      background: var(${cssScope}--background-modal);
-    }
+  [part="modal"] {
+    visibility: hidden;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: var(${cssScope}--background-modal);
+  }
 
-    [part=root] {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      position: relative;
-      align-items: center;
-      justify-content: center;
-    }
+  [part="root"] {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+  }
 
-    [part=container] {
-      pointer-events: all;
-      position: absolute;
-    }
+  [part="container"] {
+    pointer-events: all;
+    position: absolute;
+  }
 
-    [direction^=top] [part=container] {
-      top: 0;
-    }
+  [direction^="top"] [part="container"] {
+    top: 0;
+  }
 
-    [direction^=bottom] [part=container] {
-      bottom: 0;
-    }
+  [direction^="bottom"] [part="container"] {
+    bottom: 0;
+  }
 
-    [direction$=right] [part=container] {
-      right: 0;
-    }
+  [direction$="right"] [part="container"] {
+    right: 0;
+  }
 
-    [direction$=left] [part=container] {
-      left: 0;
-    }
-  `,
-)
+  [direction$="left"] [part="container"] {
+    left: 0;
+  }
+`)
 class Dialog extends SuperOpenable {
   /**
    * Direction of the opening animation.
@@ -106,10 +103,15 @@ class Dialog extends SuperOpenable {
   private _modalInvoke = false;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)}>
-      <div part="modal"></div>
-      <div part="container">${htmlSlot()}</div>
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        <div part="modal"></div>
+        <div part="container">${htmlSlot()}</div>
+      </div>
+    `;
   }
 
   showModal(): void {

package/src/components/divider.ts

@@ -1,5 +1,5 @@
 import { attr, godown, 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 } from "../core/global-style.js";
@@ -12,34 +12,32 @@ const protoName = "divider";
  * @category layout
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      width: 100%;
-      height: .05em;
-      margin: auto;
-      display: block;
-      background: currentColor;
-    }
-
-    :host([vertical]) {
-      width: .05em;
-      height: max(1em, 100%);
-    }
-
-    :host([contents]) [part=root] {
-      width: 100%;
-      height: .05em;
-      margin: auto;
-      display: block;
-      background: currentColor;
-    }
-
-    [part=root] { 
-      display: contents;
-    }
-  `,
-)
+@styles(css`
+  :host {
+    width: 100%;
+    height: 0.05em;
+    margin: auto;
+    display: block;
+    background: currentColor;
+  }
+
+  :host([vertical]) {
+    width: 0.05em;
+    height: max(1em, 100%);
+  }
+
+  :host([contents]) [part="root"] {
+    width: 100%;
+    height: 0.05em;
+    margin: auto;
+    display: block;
+    background: currentColor;
+  }
+
+  [part="root"] {
+    display: contents;
+  }
+`)
 class Divider extends GlobalStyle {
   /**
    * Vertical display.
@@ -48,7 +46,12 @@ class Divider extends GlobalStyle {
   vertical = false;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)}></div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      ></div>
+    `;
   }
 }