godown 3.0.0-canary.9 → 3.0.0

package/src/components/divider.ts

@@ -1,5 +1,5 @@
-import { godown, styles } from "@godown/element/decorators/index.js";
-import { css } from "lit";
+import { attr, godown, styles } from "@godown/element";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -9,24 +9,35 @@ const protoName = "divider";
 /**
  * {@linkcode Divider} similar to `<hr>`.
  *
- * This component does not render content.
- *
  * @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 {
+      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;
+    }
   `,
 )
 class Divider extends GlobalStyle {
@@ -36,9 +47,10 @@ class Divider extends GlobalStyle {
   @property({ type: Boolean, reflect: true })
   vertical = false;
 
-  connectedCallback() {
-    this.createRenderRoot();
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}></div>`;
   }
 }
 
 export default Divider;
+export { Divider };

package/src/components/dragbox.ts

@@ -1,8 +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 { EventListenerFunc } from "@godown/element/tools/events.js";
-import { css, html } from "lit";
+import { attr, type EventListenerFunc, godown, htmlSlot, styles } from "@godown/element";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -43,7 +40,7 @@ class Dragbox extends GlobalStyle {
     return this.offsetParent?.clientHeight ?? document.body.offsetHeight;
   }
 
-  private drag: boolean;
+  private drag = false;
   private t: number;
   private l: number;
   private cx: number;
@@ -61,15 +58,22 @@ class Dragbox extends GlobalStyle {
   @property()
   y = "auto";
 
-  protected render() {
-    return html`<div @mousedown="${this._handleDragStart}" @mouseup="${this._handleDragEnd}">${htmlSlot()}</div>`;
+  protected render(): TemplateResult<1> {
+    return html`<div
+      part="root"
+      ${attr(this.observedRecord)}
+      @mousedown="${this._handleDragStart}"
+      @mouseup="${this._handleDragEnd}"
+    >
+      ${htmlSlot()}
+    </div>`;
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(): void {
     this.reset();
   }
 
-  protected _handleDragStart(e: MouseEvent) {
+  protected _handleDragStart(e: MouseEvent): void {
     this.cx = e.clientX;
     this.cy = e.clientY;
     this.t = this.offsetTop;
@@ -82,13 +86,13 @@ class Dragbox extends GlobalStyle {
   protected _handleMouseMove: EventListenerFunc;
   protected _handleMouseLeave: EventListenerFunc;
 
-  protected _handleDragEnd() {
+  protected _handleDragEnd(): void {
     this.drag = false;
     this.events.remove(document, "mousemove", this._handleMouseMove);
     this.events.remove(document, "mouseleave", this._handleMouseLeave);
   }
 
-  protected _handleDrag(e: MouseEvent) {
+  protected _handleDrag(e: MouseEvent): void {
     if (!this.drag) {
       return;
     }
@@ -111,7 +115,7 @@ class Dragbox extends GlobalStyle {
     }
   }
 
-  reset() {
+  reset(): void {
     const { x, y, style, offsetsWidth, offsetsHeight, offsetWidth, offsetHeight, offsetLeft, offsetTop } = this;
     style.left = x || "0";
     style.top = y || "0";
@@ -125,3 +129,4 @@ class Dragbox extends GlobalStyle {
 }
 
 export default Dragbox;
+export { Dragbox };

package/src/components/flex.ts

@@ -1,9 +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 { css } from "lit";
+import { attr, godown, htmlSlot, htmlStyle, joinRules, styles } from "@godown/element";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -17,7 +13,18 @@ const protoName = "flex";
  * @category layout
  */
 @godown(protoName)
-@styles(css`:host {display:flex;}`)
+@styles(
+  css`
+    :host,
+    :host([contents]) [part=root] {
+      display: flex;
+    }
+
+    [part=root] {
+      display: contents;
+    }
+  `,
+)
 class Flex extends GlobalStyle {
   /**
    * CSS property `flex-flow` (`flex-direction flex-wrap`).
@@ -49,8 +56,9 @@ class Flex extends GlobalStyle {
   @property({ type: Boolean })
   vertical = false;
 
-  protected render() {
-    return [
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+    ${[
       htmlSlot(),
       htmlStyle(
         joinRules({
@@ -63,8 +71,10 @@ class Flex extends GlobalStyle {
           },
         }),
       ),
-    ];
+    ]}
+    </div>`;
   }
 }
 
 export default Flex;
+export { Flex };

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 { css, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -30,13 +28,13 @@ 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() {
+  reset(): void {
     this.deepQuerySelectorAll<HTMLElement & { reset?: () => void; }>("*").forEach((el) => {
       if (el.tagName === this.tagName) {
         return;
@@ -80,3 +78,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 { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -18,7 +13,18 @@ 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,8 +60,9 @@ class Grid extends GlobalStyle {
   @property()
   items: string;
 
-  protected render() {
-    return [
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+      ${[
       htmlSlot(),
       htmlStyle(
         joinRules({
@@ -68,8 +75,10 @@ class Grid extends GlobalStyle {
           },
         }),
       ),
-    ];
+    ]}
+    </div>`;
   }
 }
 
 export default Grid;
+export { Grid };

package/src/components/heading.ts

@@ -0,0 +1,105 @@
+import { attr, godown, htmlSlot, styles } from "@godown/element";
+import { css, html, nothing, type TemplateResult } 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 { css, html, nothing, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars } from "../core/global-style.js";
@@ -13,6 +10,8 @@ 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)
@@ -42,31 +41,32 @@ class Input extends SuperInput {
   @part("input")
   protected _input: HTMLInputElement;
 
-  protected render() {
-    return html`<div part="root" class="${classList("input-field", this.variant)}">
-    ${[
+  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}"
-      >`,
+          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>`;
   }
 
-  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 { css, html, type TemplateResult } 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.
@@ -20,19 +17,24 @@ const protoName = "layout";
 @godown(protoName)
 @styles(
   css`
-    :host {
+    :host,
+    :host([contents]) [part=root] {
       min-height: 100%;
       display: flex;
       flex-direction: column;
     }
 
-    .sticky {
+    [part=root] {
+      display: contents;
+    }
+
+    [sticky] header {
       position: sticky;
       top: 0;
       z-index: 1;
     }
 
-    [part="main"] {
+    [part=main] {
       position: relative;
       flex: 1;
       width: 100%;
@@ -45,7 +47,7 @@ const protoName = "layout";
     }
   `,
 )
-class NavLayout extends GlobalStyle {
+class Layout extends GlobalStyle {
   /**
    * If true, remove the header slot.
    */
@@ -64,19 +66,14 @@ 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();
+      if (!this.suppress) {
+        Router.updateAll();
+      }
     }
   }
 }
 
 export default Link;
+export { Link };