godown 3.0.0-canary.9 → 3.0.1

package/src/components/form.ts

@@ -1,7 +1,5 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { css } from "lit";
+import { godown, htmlSlot, styles } from "@godown/element";
+import { type TemplateResult, css } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -15,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 = "";
@@ -30,14 +26,14 @@ class Form<T = object> extends GlobalStyle {
     return Form.buildValue(this._slot.assignedElements()) as T;
   }
 
-  nameValue = this.namevalue;
+  nameValue: () => [string, T] = this.namevalue;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     return htmlSlot();
   }
 
-  reset() {
-    this.deepQuerySelectorAll<HTMLElement & { reset?: () => void; }>("*").forEach((el) => {
+  reset(): void {
+    this.deepQuerySelectorAll<HTMLElement & { reset?: () => void }>("*").forEach((el) => {
       if (el.tagName === this.tagName) {
         return;
       }
@@ -80,3 +76,4 @@ class Form<T = object> extends GlobalStyle {
 }
 
 export default Form;
+export { Form };

package/src/components/grid.ts

@@ -1,10 +1,5 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { htmlStyle } from "@godown/element/directives/html-style.js";
-import { joinRules } from "@godown/element/tools/css.js";
-import { isNumerical } from "@godown/element/tools/lib.js";
-import { css } from "lit";
+import { attr, godown, htmlSlot, htmlStyle, isNumerical, joinRules, styles } from "@godown/element";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -18,7 +13,16 @@ const protoName = "grid";
  * @category layout
  */
 @godown(protoName)
-@styles(css`:host{display:grid;}`)
+@styles(css`
+  :host,
+  :host([contents]) [part="root"] {
+    display: grid;
+  }
+
+  [part="root"] {
+    display: contents;
+  }
+`)
 class Grid extends GlobalStyle {
   /**
    * CSS property `gap`.
@@ -54,22 +58,30 @@ class Grid extends GlobalStyle {
   @property()
   items: string;
 
-  protected render() {
-    return [
-      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,
-          },
-        }),
-      ),
-    ];
+  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>
+    `;
   }
 }
 
 export default Grid;
+export { Grid };

package/src/components/heading.ts

@@ -0,0 +1,123 @@
+import { attr, godown, htmlSlot, styles } from "@godown/element";
+import { type TemplateResult, css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "heading";
+
+/**
+ * {@linkcode Heading} renders a heading.
+ *
+ * If the id is provided, the anchor will be displayed.
+ *
+ * @slot - Heading content.
+ * @category layout
+ */
+@godown(protoName)
+@styles(css`
+  :host {
+    display: block;
+    text-align: start;
+  }
+
+  [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%;
+  }
+
+  a {
+    color: inherit;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    direction: ltr;
+    font-size: revert;
+    position: relative;
+    width: fit-content;
+  }
+`)
+class Heading extends GlobalStyle {
+  /**
+   * The heading level.
+   */
+  @property()
+  as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" = "h1";
+
+  /**
+   * The anchor prefix.
+   */
+  @property()
+  anchor = "#";
+
+  /**
+   * The anchor side.
+   */
+  @property()
+  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>
+    `;
+  }
+
+  protected wrapHeading(...children: any[]): TemplateResult<1> {
+    switch (this.as) {
+      case "h2":
+        return html`
+          <h2>${children}</h2>
+        `;
+      case "h3":
+        return html`
+          <h3>${children}</h3>
+        `;
+      case "h4":
+        return html`
+          <h4>${children}</h4>
+        `;
+      case "h5":
+        return html`
+          <h5>${children}</h5>
+        `;
+      case "h6":
+        return html`
+          <h6>${children}</h6>
+        `;
+      default:
+        return html`
+          <h1>${children}</h1>
+        `;
+    }
+  }
+}
+
+export default Heading;
+export { Heading };

package/src/components/input.ts

@@ -1,8 +1,5 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { part } from "@godown/element/decorators/part.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { classList } from "@godown/element/directives/class-list.js";
-import { css, html, nothing } from "lit";
+import { attr, classList, godown, part, styles } from "@godown/element";
+import { type TemplateResult, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars } from "../core/global-style.js";
@@ -13,21 +10,21 @@ const protoName = "input";
 /**
  * {@linkcode Input} renders a text input.
  *
+ * @fires input - Fires when the input value changes.
+ * @fires change - Fires when the input value changes.
  * @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,31 +39,40 @@ class Input extends SuperInput {
   @part("input")
   protected _input: HTMLInputElement;
 
-  protected render() {
-    return html`<div part="root" 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>`;
+  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}"
+              .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() {
+  reset(): void {
     this._input.value = this.default;
     this.value = this.default;
   }
 }
 
 export default Input;
+export { Input };

package/src/components/layout.ts

@@ -1,8 +1,5 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { classList } from "@godown/element/directives/class-list.js";
-import { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { css, html } from "lit";
+import { 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";
@@ -10,7 +7,7 @@ import { GlobalStyle } from "../core/global-style.js";
 const protoName = "layout";
 
 /**
- * {@linkcode NavLayout} renders slot and optional top header, bottom footer.
+ * {@linkcode Layout} renders slot and optional top header, bottom footer.
  *
  * @slot - The main content of the layout.
  * @slot header - The header of the layout.
@@ -18,34 +15,37 @@ const protoName = "layout";
  * @category layout
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      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;
+  }
 
-    .sticky {
-      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%;
-    }
-  `,
-)
-class NavLayout extends GlobalStyle {
+  header,
+  main,
+  footer {
+    width: 100%;
+  }
+`)
+class Layout extends GlobalStyle {
   /**
    * If true, remove the header slot.
    */
@@ -64,19 +64,27 @@ class NavLayout extends GlobalStyle {
   @property({ type: Boolean })
   sticky = false;
 
-  protected render() {
-    return html`${
-      !this.noHeader
-        ? html`<header part="header" class="${classList({ sticky: this.sticky })}">${htmlSlot("header")}</header>`
-        : ""
-    }
-    <main part="main">${htmlSlot()}</main>
-    ${
-      !this.noFooter
-        ? html`<footer part="footer">${htmlSlot("footer")}</footer>`
-        : ""
-    }`;
+  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>
+    `;
   }
 }
 
-export default NavLayout;
+export default Layout;
+export { Layout };

package/src/components/link.ts

@@ -1,4 +1,4 @@
-import { godown } from "@godown/element/decorators/godown.js";
+import { godown } from "@godown/element";
 import { property } from "lit/decorators.js";
 
 import SuperAnchor from "../core/super-anchor.js";
@@ -26,13 +26,22 @@ class Link extends SuperAnchor {
   @property()
   type: "push" | "replace" | "normal" = "normal";
 
-  protected _handleClick(e: MouseEvent) {
+  /**
+   * Suppress the update of the {@linkcode Router}.
+   */
+  @property({ type: Boolean })
+  suppress = false;
+
+  protected _handleClick(e: MouseEvent): void {
     if (this.type === "push" || this.type === "replace") {
       e.preventDefault();
-      (history[`${this.type}State`])(null, "", this.href);
-      Router.updateAll();
+      history[`${this.type}State`](null, "", this.href);
+      if (!this.suppress) {
+        Router.updateAll();
+      }
     }
   }
 }
 
 export default Link;
+export { Link };

package/src/components/progress.ts

@@ -1,10 +1,8 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { isNil } from "@godown/element/tools/lib.js";
-import { css, html } from "lit";
+import { attr, godown, isNil, styles } from "@godown/element";
+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";
 
@@ -18,12 +16,16 @@ const protoName = "progress";
   :host {
     width: 100%;
     height: 0.5em;
-    display: inline-block;
     border-radius: 0.25em;
     background: var(${cssGlobalVars.passive});
     color: var(${cssGlobalVars.active});
   }
 
+  :host,
+  [part="root"] {
+    display: block;
+  }
+
   [part="root"] {
     height: inherit;
     z-index: 1;
@@ -66,16 +68,25 @@ class Progress extends GlobalStyle {
   @property({ type: Number })
   value: number;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     let width = 20;
     let className: string;
     if (!isNil(this.value)) {
       width = this.parsePercent(this.value);
       className = "static";
     }
-    return html`<div part="root" 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>
+    `;
   }
 
   /**
@@ -93,3 +104,4 @@ class Progress extends GlobalStyle {
 }
 
 export default Progress;
+export { Progress };