godown 3.0.0-canary.10 → 3.0.0-canary.12

package/src/components/card.ts

@@ -1,7 +1,8 @@
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { css } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -52,11 +53,11 @@ const cssScope = scopePrefix(protoName);
       border-style: solid;
     }
 
-    [name=footer]{
+    [name=footer] {
       border-top-width: var(${cssScope}--border-width);
     }
 
-    [name=header]{
+    [name=header] {
       border-bottom-width: var(${cssScope}--border-width);
     }
   `,
@@ -68,12 +69,14 @@ class Card extends GlobalStyle {
   @property({ type: Boolean })
   header = false;
 
-  protected render() {
-    return [
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+    ${[
       this.header ? htmlSlot("header") : "",
       htmlSlot(),
       this.footer ? htmlSlot("footer") : "",
-    ];
+    ]}
+    </div>`;
   }
 }
 

package/src/components/carousel.ts

@@ -1,11 +1,12 @@
 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 { attr } from "@godown/element/directives/attr.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
 import { htmlStyle } from "@godown/element/directives/html-style.js";
 import iconChevronLeft from "@godown/f7-icon/icons/chevron-left.js";
 import iconChevronRight from "@godown/f7-icon/icons/chevron-right.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -34,6 +35,7 @@ const protoName = "carousel";
     }
 
     [part=root] {
+      direction: ltr;
       overflow: hidden;
     }
 
@@ -99,18 +101,22 @@ class Carousel extends GlobalStyle {
 
   private _cloneLast: HTMLElement | undefined;
 
-  protected render() {
-    return [
-      html`<div part="root">
-        <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>
-    </div>`,
-      htmlStyle(`:host{width:${this.width};}`),
-    ];
+  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>`;
   }
 
-  protected async firstUpdated() {
+  protected async firstUpdated(): Promise<void> {
     await this.updateComplete;
 
     if (this.children.length) {
@@ -124,46 +130,55 @@ class Carousel extends GlobalStyle {
       this.insertBefore(this._cloneFirst, this.firstElementChild);
       this.show(this.index);
     }
-    if (this.autoChange) {
-      this.intervalID = window.setInterval(() => {
-        this.next();
-      }, this.autoChange);
-    }
+    this.checkInterval();
   }
 
-  disconnectedCallback() {
+  disconnectedCallback(): void {
     clearInterval(this.intervalID);
   }
 
-  show(i: number) {
+  show(i: number): void {
     this.index = i;
   }
 
-  next() {
+  next(): void {
     if (this.index === this.childElementCount - 3) {
       this._doTranslateX("0", true);
       this.show(0);
     } else {
       this.show(this.index + 1);
     }
+    this.checkInterval();
   }
 
-  prev() {
+  prev(): void {
     if (this.index === 0) {
       this._doTranslateX(`-${this.childElementCount - 1}00%`, true);
       this.show(this.children.length - 3);
     } else {
       this.show(this.index - 1);
     }
+    this.checkInterval();
   }
 
-  protected _doTranslateX(xValue: string, noTransition?: boolean) {
+  protected _doTranslateX(xValue: string, noTransition?: boolean): void {
     this._moveRoot.style.transform = `translateX(${xValue})`;
     if (noTransition) {
       this._moveRoot.style.transition = `none`;
     }
     this._moveRoot.getBoundingClientRect();
   }
+
+  checkInterval(): void {
+    if (this.autoChange) {
+      if (this.intervalID) {
+        clearInterval(this.intervalID);
+      }
+      this.intervalID = window.setInterval(() => {
+        this.next();
+      }, this.autoChange);
+    }
+  }
 }
 
 export default Carousel;

package/src/components/details.ts

@@ -1,8 +1,9 @@
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
 import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property, query } from "lit/decorators.js";
 
 import { scopePrefix } from "../core/global-style.js";
@@ -100,11 +101,15 @@ class Details extends SuperOpenable {
   @query("dd")
   protected _dd: HTMLDataListElement;
 
-  protected render() {
-    return html`<dl part="root">
+  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>
+        <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>

package/src/components/dialog.ts

@@ -1,8 +1,9 @@
 import { type HandlerEvent } from "@godown/element";
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { css, html, type PropertyValues } from "lit";
+import { css, html, type PropertyValues, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -32,7 +33,7 @@ const cssScope = scopePrefix(protoName);
       visibility: hidden;
       position: fixed;
       z-index: 1;
-      inset:0;
+      inset: 0;
     }
 
     :host([open]) {
@@ -64,25 +65,25 @@ const cssScope = scopePrefix(protoName);
       justify-content: center;
     }
 
-    [direction] {
+    [part=container] {
       pointer-events: all;
       position: absolute;
     }
 
-    [direction^=top] {
+    [direction^=top] [part=container] {
       top: 0;
     }
 
-    [direction^=bottom] {
+    [direction^=bottom] [part=container] {
       bottom: 0;
     }
 
-    [direction$=right] {
-      right: 0%;
+    [direction$=right] [part=container] {
+      right: 0;
     }
 
-    [direction$=left] {
-      left: 0%;
+    [direction$=left] [part=container] {
+      left: 0;
     }
   `,
 )
@@ -105,16 +106,16 @@ class Dialog extends SuperOpenable {
   @property()
   key = "Escape";
 
-  private _modalInvoke: boolean;
+  private _modalInvoke = false;
 
-  protected render() {
-    return html`<div part="root">
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
       <div part="modal"></div>
-      <div part="container" direction="${this.direction}">${htmlSlot()}</div>
+      <div part="container">${htmlSlot()}</div>
     </div>`;
   }
 
-  showModal() {
+  showModal(): void {
     if (!this.modal) {
       this.modal = true;
       this._modalInvoke = true;
@@ -125,7 +126,7 @@ class Dialog extends SuperOpenable {
   private _submitEvent: EventListenerOrEventListenerObject;
   private _keydownEvent: EventListenerOrEventListenerObject;
 
-  protected updated(changedProperties: PropertyValues) {
+  protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("open")) {
       if (this.open) {
         this._submitEvent = this.events.add(this, "submit", this._handelSubmit);
@@ -139,7 +140,7 @@ class Dialog extends SuperOpenable {
     }
   }
 
-  protected _handleKeydown(e: KeyboardEvent) {
+  protected _handleKeydown(e: KeyboardEvent): void {
     e.preventDefault();
     const keys = this.key.split(/[\s,]/);
     if (keys.includes(e.key) || keys.includes(e.code)) {
@@ -147,13 +148,13 @@ class Dialog extends SuperOpenable {
     }
   }
 
-  protected _handelSubmit(e: HandlerEvent<HTMLFormElement>) {
+  protected _handelSubmit(e: HandlerEvent<HTMLFormElement>): void {
     if (e.target.method === "dialog") {
       this.close();
     }
   }
 
-  close() {
+  close(): void {
     if (this._modalInvoke) {
       this.modal = false;
       this._modalInvoke = false;

package/src/components/divider.ts

@@ -1,5 +1,6 @@
 import { godown, styles } from "@godown/element/decorators/index.js";
-import { css } from "lit";
+import { attr } from "@godown/element/directives/attr.js";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -9,25 +10,36 @@ const protoName = "divider";
 /**
  * {@linkcode Divider} similar to `<hr>`.
  *
- * This component does not render content.
- *
  * @category layout
  */
 @godown(protoName)
 @styles(
   css`
-  :host{
+  :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,8 +48,8 @@ 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>`;
   }
 }
 

package/src/components/dragbox.ts

@@ -1,8 +1,9 @@
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
 import { EventListenerFunc } from "@godown/element/tools/events.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -43,7 +44,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 +62,21 @@ 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 +89,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 +118,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";

package/src/components/flex.ts

@@ -1,9 +1,10 @@
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.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 { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -17,7 +18,16 @@ 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 +59,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,7 +74,8 @@ class Flex extends GlobalStyle {
           },
         }),
       ),
-    ];
+    ]}
+    </div>`;
   }
 }
 

package/src/components/form.ts

@@ -1,7 +1,7 @@
 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 { css, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -30,13 +30,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;

package/src/components/grid.ts

@@ -1,10 +1,11 @@
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.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 { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -18,7 +19,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,8 +64,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,7 +79,8 @@ class Grid extends GlobalStyle {
           },
         }),
       ),
-    ];
+    ]}
+    </div>`;
   }
 }
 

package/src/components/input.ts

@@ -1,8 +1,9 @@
 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 { attr } from "@godown/element/directives/attr.js";
 import { classList } from "@godown/element/directives/class-list.js";
-import { css, html, nothing } from "lit";
+import { css, html, nothing, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars } from "../core/global-style.js";
@@ -42,8 +43,8 @@ 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
@@ -63,7 +64,7 @@ class Input extends SuperInput {
     </div>`;
   }
 
-  reset() {
+  reset(): void {
     this._input.value = this.default;
     this.value = this.default;
   }

package/src/components/layout.ts

@@ -1,8 +1,8 @@
 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 { attr } from "@godown/element/directives/attr.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -20,13 +20,18 @@ 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;
@@ -64,10 +69,11 @@ class NavLayout extends GlobalStyle {
   @property({ type: Boolean })
   sticky = false;
 
-  protected render() {
-    return html`${
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+    ${
       !this.noHeader
-        ? html`<header part="header" class="${classList({ sticky: this.sticky })}">${htmlSlot("header")}</header>`
+        ? html`<header part="header">${htmlSlot("header")}</header>`
         : ""
     }
     <main part="main">${htmlSlot()}</main>
@@ -75,7 +81,8 @@ class NavLayout extends GlobalStyle {
       !this.noFooter
         ? html`<footer part="footer">${htmlSlot("footer")}</footer>`
         : ""
-    }`;
+    }
+    </div>`;
   }
 }
 

package/src/components/link.ts

@@ -26,11 +26,19 @@ 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();
+      }
     }
   }
 }