godown 3.0.0 → 3.0.2

package/src/components/grid.ts

@@ -1,5 +1,5 @@
 import { attr, godown, htmlSlot, htmlStyle, isNumerical, joinRules, 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";
@@ -13,18 +13,16 @@ const protoName = "grid";
  * @category layout
  */
 @godown(protoName)
-@styles(
-  css`
-    :host,
-    :host([contents]) [part=root] {
-      display: grid;
-    }
+@styles(css`
+  :host,
+  :host([contents]) [part="root"] {
+    display: grid;
+  }
 
-    [part=root] {
-      display: contents;
-    }
-  `,
-)
+  [part="root"] {
+    display: contents;
+  }
+`)
 class Grid extends GlobalStyle {
   /**
    * CSS property `gap`.
@@ -61,22 +59,27 @@ class Grid extends GlobalStyle {
   items: string;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)}>
-      ${[
-      htmlSlot(),
-      htmlStyle(
-        joinRules({
-          ":host": {
-            gap: this.gap,
-            "grid-template-columns": isNumerical(this.columns) ? `repeat(${this.columns},1fr)` : this.columns,
-            "grid-template-rows": isNumerical(this.rows) ? `repeat(${this.rows},1fr)` : this.rows,
-            "place-content": this.content,
-            "place-items": this.items,
-          },
-        }),
-      ),
-    ]}
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${[
+          htmlSlot(),
+          htmlStyle(
+            joinRules({
+              ":host": {
+                gap: this.gap,
+                "grid-template-columns": isNumerical(this.columns) ? `repeat(${this.columns},1fr)` : this.columns,
+                "grid-template-rows": isNumerical(this.rows) ? `repeat(${this.rows},1fr)` : this.rows,
+                "place-content": this.content,
+                "place-items": this.items,
+              },
+            }),
+          ),
+        ]}
+      </div>
+    `;
   }
 }
 

package/src/components/heading.ts

@@ -1,5 +1,5 @@
 import { attr, godown, htmlSlot, styles } from "@godown/element";
-import { css, html, nothing, type TemplateResult } from "lit";
+import { type TemplateResult, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -15,44 +15,42 @@ const protoName = "heading";
  * @category layout
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      display: block;
-      text-align: start;
-    }
+@styles(css`
+  :host {
+    display: block;
+    text-align: start;
+  }
 
-    [part=anchor] {
-      position: absolute;
-      text-align: center;
-      min-width: 1.25em;
-      right: 100%;
-    }
+  [part="anchor"] {
+    position: absolute;
+    text-align: center;
+    min-width: 1.25em;
+    right: 100%;
+  }
 
-    [side=left] [part=anchor] {
-      right: 100%;
-    }
-    [side=right] [part=anchor] {
-      left: 100%;
-    }
+  [side="left"] [part="anchor"] {
+    right: 100%;
+  }
+  [side="right"] [part="anchor"] {
+    left: 100%;
+  }
 
-    a {
-      color: inherit;
-    }
+  a {
+    color: inherit;
+  }
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      direction: ltr;
-      font-size: revert;
-      position: relative;
-      width: fit-content;
-    }
-  `,
-)
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    direction: ltr;
+    font-size: revert;
+    position: relative;
+    width: fit-content;
+  }
+`)
 class Heading extends GlobalStyle {
   /**
    * The heading level.
@@ -73,30 +71,50 @@ class Heading extends GlobalStyle {
   side: "left" | "right" = "left";
 
   protected render(): TemplateResult<1> {
-    return html`<a part="root" href="${this.id ? "#" + this.id : nothing}" ${attr(this.observedRecord)}>
-      ${
-      this.wrapHeading(
-        htmlSlot(),
-        this.id ? html`<i part="anchor">${this.anchor}</i>` : "",
-      )
-    }
-    </a> `;
+    return html`
+      <a
+        part="root"
+        href="${this.id ? "#" + this.id : nothing}"
+        ${attr(this.observedRecord)}
+      >
+        ${this.wrapHeading(
+          htmlSlot(),
+          this.id
+            ? html`
+                <i part="anchor">${this.anchor}</i>
+              `
+            : "",
+        )}
+      </a>
+    `;
   }
 
   protected wrapHeading(...children: any[]): TemplateResult<1> {
     switch (this.as) {
       case "h2":
-        return html`<h2>${children}</h2>`;
+        return html`
+          <h2>${children}</h2>
+        `;
       case "h3":
-        return html`<h3>${children}</h3>`;
+        return html`
+          <h3>${children}</h3>
+        `;
       case "h4":
-        return html`<h4>${children}</h4>`;
+        return html`
+          <h4>${children}</h4>
+        `;
       case "h5":
-        return html`<h5>${children}</h5>`;
+        return html`
+          <h5>${children}</h5>
+        `;
       case "h6":
-        return html`<h6>${children}</h6>`;
+        return html`
+          <h6>${children}</h6>
+        `;
       default:
-        return html`<h1>${children}</h1>`;
+        return html`
+          <h1>${children}</h1>
+        `;
     }
   }
 }

package/src/components/input.ts

@@ -1,5 +1,5 @@
 import { attr, classList, godown, part, styles } from "@godown/element";
-import { css, html, nothing, type TemplateResult } from "lit";
+import { type TemplateResult, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars } from "../core/global-style.js";
@@ -15,18 +15,16 @@ const protoName = "input";
  * @category input
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      width: var(${cssGlobalVars.input}-width);
-      height: var(${cssGlobalVars.input}-height);
-      color: var(${cssGlobalVars.foreground});
-      background: var(${cssGlobalVars.input}-background);
-      border-radius: var(${cssGlobalVars.input}-radius);
-      display: block;
-    }
-  `,
-)
+@styles(css`
+  :host {
+    width: var(${cssGlobalVars.input}-width);
+    height: var(${cssGlobalVars.input}-height);
+    color: var(${cssGlobalVars.foreground});
+    background: var(${cssGlobalVars.input}-background);
+    border-radius: var(${cssGlobalVars.input}-radius);
+    display: block;
+  }
+`)
 class Input extends SuperInput {
   type: "text" | "search" | "tel" | "url" | "email" | "password" = "text";
 
@@ -42,24 +40,32 @@ class Input extends SuperInput {
   protected _input: HTMLInputElement;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)} class="${classList("input-field", this.variant)}">
-      ${[
-      this._renderPrefix(),
-      html`<input
-          part="input"
-          type="${this.type}"
-          id="${this.makeId}"
-          .value="${this.value}"
-          placeholder="${this.placeholder || nothing}"
-          ?autofocus="${this.autofocus}"
-          autocapitalize="${this.autocapitalize || nothing}"
-          autocomplete="${this.autocomplete || nothing}"
-          ?disabled="${this.disabled}"
-          @input="${this._handleInput}"
-        >`,
-      this._renderSuffix(),
-    ]}
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+        class="${classList("input-field", this.variant)}"
+      >
+        ${[
+          this._renderPrefix(),
+          html`
+            <input
+              part="input"
+              type="${this.type}"
+              .value="${this.value}"
+              ?autofocus="${this.autofocus}"
+              ?disabled="${this.disabled}"
+              autocapitalize="${this.autocapitalize || nothing}"
+              autocomplete="${this.autocomplete || nothing}"
+              placeholder="${this.placeholder || nothing}"
+              id="${this.makeId}"
+              @input="${this._handleInput}"
+            />
+          `,
+          this._renderSuffix(),
+        ]}
+      </div>
+    `;
   }
 
   reset(): void {

package/src/components/layout.ts

@@ -1,5 +1,5 @@
 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 { GlobalStyle } from "../core/global-style.js";
@@ -15,38 +15,36 @@ const protoName = "layout";
  * @category layout
  */
 @godown(protoName)
-@styles(
-  css`
-    :host,
-    :host([contents]) [part=root] {
-      min-height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
+@styles(css`
+  :host,
+  :host([contents]) [part="root"] {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
 
-    [part=root] {
-      display: contents;
-    }
+  [part="root"] {
+    display: contents;
+  }
 
-    [sticky] header {
-      position: sticky;
-      top: 0;
-      z-index: 1;
-    }
+  [sticky] header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
 
-    [part=main] {
-      position: relative;
-      flex: 1;
-      width: 100%;
-    }
+  [part="main"] {
+    position: relative;
+    flex: 1;
+    width: 100%;
+  }
 
-    header,
-    main,
-    footer {
-      width: 100%;
-    }
-  `,
-)
+  header,
+  main,
+  footer {
+    width: 100%;
+  }
+`)
 class Layout extends GlobalStyle {
   /**
    * If true, remove the header slot.
@@ -67,11 +65,24 @@ class Layout extends GlobalStyle {
   sticky = false;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)}>
-      ${!this.noHeader ? html`<header part="header">${htmlSlot("header")}</header>` : ""}
-      <main part="main">${htmlSlot()}</main>
-      ${!this.noFooter ? html`<footer part="footer">${htmlSlot("footer")}</footer>` : ""}
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${!this.noHeader
+          ? html`
+              <header part="header">${htmlSlot("header")}</header>
+            `
+          : ""}
+        <main part="main">${htmlSlot()}</main>
+        ${!this.noFooter
+          ? html`
+              <footer part="footer">${htmlSlot("footer")}</footer>
+            `
+          : ""}
+      </div>
+    `;
   }
 }
 

package/src/components/link.ts

@@ -35,7 +35,7 @@ class Link extends SuperAnchor {
   protected _handleClick(e: MouseEvent): void {
     if (this.type === "push" || this.type === "replace") {
       e.preventDefault();
-      (history[`${this.type}State`])(null, "", this.href);
+      history[`${this.type}State`](null, "", this.href);
       if (!this.suppress) {
         Router.updateAll();
       }

package/src/components/progress.ts

@@ -1,8 +1,8 @@
 import { attr, godown, isNil, 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 } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars } from "../core/global-style.js";
 
 const protoName = "progress";
 
@@ -12,54 +12,52 @@ const protoName = "progress";
  * @category feedback
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      width: 100%;
-      height: 0.5em;
-      border-radius: 0.25em;
-      background: var(${cssGlobalVars.passive});
-      color: var(${cssGlobalVars.active});
-    }
+@styles(css`
+  :host {
+    width: 100%;
+    height: 0.5em;
+    border-radius: 0.25em;
+    background: var(${cssGlobalVars.passive});
+    color: var(${cssGlobalVars.active});
+  }
 
-    :host,
-    [part=root] {
-      display: block;
-    }
+  :host,
+  [part="root"] {
+    display: block;
+  }
 
-    [part=root] {
-      height: inherit;
-      z-index: 1;
-      position: relative;
-      border-radius: inherit;
-    }
+  [part="root"] {
+    height: inherit;
+    z-index: 1;
+    position: relative;
+    border-radius: inherit;
+  }
 
-    [part=value] {
-      position: absolute;
-      z-index: 2;
-      top: 0;
+  [part="value"] {
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: inherit;
+    transition: all 0.3s;
+    animation: progress 1.8s ease-in-out infinite alternate;
+    background: currentColor;
+  }
+
+  @keyframes progress {
+    from {
       left: 0;
-      height: 100%;
-      border-radius: inherit;
-      transition: all 0.3s;
-      animation: progress 1.8s ease-in-out infinite alternate;
-      background: currentColor;
     }
-
-    @keyframes progress {
-      from {
-        left: 0;
-      }
-      to {
-        left: 80%;
-      }
+    to {
+      left: 80%;
     }
+  }
 
-    .static [part=value] {
-      animation: none;
-    }
-  `,
-)
+  .static [part="value"] {
+    animation: none;
+  }
+`)
 class Progress extends GlobalStyle {
   @property({ type: Number })
   max = 1;
@@ -77,9 +75,18 @@ class Progress extends GlobalStyle {
       width = this.parsePercent(this.value);
       className = "static";
     }
-    return html`<div part="root" ${attr(this.observedRecord)} class="${className}">
-      <i part="value" style="width:${width}%;"></i>
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+        class="${className}"
+      >
+        <i
+          part="value"
+          style="width:${width}%;"
+        ></i>
+      </div>
+    `;
   }
 
   /**