godown 3.0.0 → 3.0.1

package/src/components/dragbox.ts

@@ -1,5 +1,5 @@
-import { attr, type EventListenerFunc, godown, htmlSlot, styles } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+import { type EventListenerFunc, attr, godown, htmlSlot, styles } from "@godown/element";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -12,19 +12,17 @@ const protoName = "dragbox";
  * @category wrapper
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      position: absolute;
-      display: block;
-    }
+@styles(css`
+  :host {
+    position: absolute;
+    display: block;
+  }
 
-    :host(:active) {
-      -webkit-user-select: none;
-      user-select: none;
-    }
-  `,
-)
+  :host(:active) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+`)
 class Dragbox extends GlobalStyle {
   /**
    * Width of (`this.offsetParent` or `document.body`).
@@ -59,14 +57,16 @@ class Dragbox extends GlobalStyle {
   y = "auto";
 
   protected render(): TemplateResult<1> {
-    return html`<div
-      part="root"
-      ${attr(this.observedRecord)}
-      @mousedown="${this._handleDragStart}"
-      @mouseup="${this._handleDragEnd}"
-    >
-      ${htmlSlot()}
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+        @mousedown="${this._handleDragStart}"
+        @mouseup="${this._handleDragEnd}"
+      >
+        ${htmlSlot()}
+      </div>
+    `;
   }
 
   protected firstUpdated(): void {

package/src/components/flex.ts

@@ -1,5 +1,5 @@
 import { attr, godown, htmlSlot, htmlStyle, 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 = "flex";
  * @category layout
  */
 @godown(protoName)
-@styles(
-  css`
-    :host,
-    :host([contents]) [part=root] {
-      display: flex;
-    }
+@styles(css`
+  :host,
+  :host([contents]) [part="root"] {
+    display: flex;
+  }
 
-    [part=root] {
-      display: contents;
-    }
-  `,
-)
+  [part="root"] {
+    display: contents;
+  }
+`)
 class Flex extends GlobalStyle {
   /**
    * CSS property `flex-flow` (`flex-direction flex-wrap`).
@@ -57,22 +55,27 @@ class Flex extends GlobalStyle {
   vertical = false;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)}>
-    ${[
-      htmlSlot(),
-      htmlStyle(
-        joinRules({
-          ":host": {
-            gap: this.gap,
-            "flex-flow": this.flexFlow,
-            "flex-direction": this.vertical && "column",
-            "align-items": this.items,
-            "justify-content": this.content,
-          },
-        }),
-      ),
-    ]}
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${[
+          htmlSlot(),
+          htmlStyle(
+            joinRules({
+              ":host": {
+                gap: this.gap,
+                "flex-flow": this.flexFlow,
+                "flex-direction": this.vertical && "column",
+                "align-items": this.items,
+                "justify-content": this.content,
+              },
+            }),
+          ),
+        ]}
+      </div>
+    `;
   }
 }
 

package/src/components/form.ts

@@ -1,5 +1,5 @@
 import { godown, htmlSlot, styles } from "@godown/element";
-import { css, type TemplateResult } from "lit";
+import { type TemplateResult, css } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -13,13 +13,11 @@ const protoName = "form";
  * @category form
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      display: block;
-    }
-  `,
-)
+@styles(css`
+  :host {
+    display: block;
+  }
+`)
 class Form<T = object> extends GlobalStyle {
   @property()
   name = "";
@@ -35,7 +33,7 @@ class Form<T = object> extends GlobalStyle {
   }
 
   reset(): void {
-    this.deepQuerySelectorAll<HTMLElement & { reset?: () => void; }>("*").forEach((el) => {
+    this.deepQuerySelectorAll<HTMLElement & { reset?: () => void }>("*").forEach((el) => {
       if (el.tagName === this.tagName) {
         return;
       }

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();
       }