godown 3.0.0-canary.10 → 3.0.0-canary.11

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";
@@ -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,7 +26,7 @@ class Link extends SuperAnchor {
   @property()
   type: "push" | "replace" | "normal" = "normal";
 
-  protected _handleClick(e: MouseEvent) {
+  protected _handleClick(e: MouseEvent): void {
     if (this.type === "push" || this.type === "replace") {
       e.preventDefault();
       (history[`${this.type}State`])(null, "", this.href);

package/src/components/progress.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 { isNil } from "@godown/element/tools/lib.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle } from "../core/global-style.js";
@@ -18,12 +19,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,14 +71,14 @@ 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}">
+    return html`<div part="root" ${attr(this.observedRecord)} class="${className}">
       <i part="value" style="width:${width}%;"></i>
     </div>`;
   }

package/src/components/range.ts

@@ -1,10 +1,11 @@
 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 { joinProperties } from "@godown/element/tools/css.js";
 import { isNil } from "@godown/element/tools/lib.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property, queryAll, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -30,7 +31,7 @@ const cssScope = scopePrefix(protoName);
       ${cssScope}-track-width: .5em;
       background: var(${cssGlobalVars.input}-background);
       width: var(${cssGlobalVars.input}-width);
-      display: inline-block;
+      display: block;
       margin: 0.25em 0;
     }
 
@@ -46,7 +47,7 @@ const cssScope = scopePrefix(protoName);
     }
 
     [part=root] {
-      min-height:inherit;
+      min-height: inherit;
       position: relative;
       border-radius: inherit;
       width: 100%;
@@ -85,16 +86,16 @@ const cssScope = scopePrefix(protoName);
     }
   `,
   css`
-    .vertical {
-      height: 100%;
+    [vertical] {
+      height: inherit;
       width: var(${cssScope}-track-width);
     }
 
-    .vertical i {
+    [vertical] i {
       transform: translate(-25%, -50%);
     }
 
-    .vertical [part=track] {
+    [vertical] [part=track] {
       width: 100%;
       height: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));
       top: min(var(--from), var(--to));
@@ -107,7 +108,7 @@ const cssScope = scopePrefix(protoName);
       top: 0;
     }
 
-    .vertical [part=handle] {
+    [vertical] [part=handle] {
       top: var(--handle);
       left: 0;
     }
@@ -164,7 +165,7 @@ class Range extends SuperInput {
   /**
    * Returns true when the second number is greater than the first number.
    */
-  get reverse() {
+  get reverse(): boolean {
     return this.range ? this.value[0] > this.value[1] : false;
   }
 
@@ -196,7 +197,7 @@ class Range extends SuperInput {
     return rangeValue;
   }
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     const rangeValue = this.padValue(2);
     const from = Math.min(...rangeValue);
     const to = Math.max(...rangeValue);
@@ -204,13 +205,7 @@ class Range extends SuperInput {
 
     return html`<div
       part="root"
-      class="${
-      classList({
-        vertical: this.vertical,
-        range: this.range,
-        reverse: this.reverse,
-      })
-    }"
+      ${attr(this.observedRecord)}
       @mousedown="${this.disabled ? null : this._handleMousedownRoot}"
       style="${
       joinProperties({
@@ -234,7 +229,7 @@ class Range extends SuperInput {
     </div>`;
   }
 
-  protected renderHandle(index: number) {
+  protected renderHandle(index: number): TemplateResult<1> {
     const { range } = this;
     const end = !range || index === (this.value as number[]).length - 1;
     return html`<i
@@ -253,7 +248,7 @@ class Range extends SuperInput {
 
   private _keydownEvent: EventListenerOrEventListenerObject;
 
-  focusHandle(index: number) {
+  focusHandle(index: number): void {
     this.lastFocus = index;
     const handleItem = this._handles.item(index);
     handleItem?.focus();
@@ -262,7 +257,7 @@ class Range extends SuperInput {
     }
   }
 
-  blurHandle() {
+  blurHandle(): void {
     this.lastFocus = undefined;
     this._keydownEvent = this.events.remove(document, "keydown", this._keydownEvent);
   }
@@ -271,7 +266,7 @@ class Range extends SuperInput {
     if (!this.range) {
       index = 0;
     }
-    return (e: KeyboardEvent) => {
+    return (e: KeyboardEvent): void => {
       if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
         e.preventDefault();
         this.createSetValue(index)(old => old - this.step);
@@ -283,20 +278,20 @@ class Range extends SuperInput {
   }
 
   createMouseDown(index: number) {
-    return (e: MouseEvent) => {
+    return (e: MouseEvent): void => {
       this.focusHandle(index);
       this.createMousedownListener(this.createSetValue(index))(e);
     };
   }
 
-  protected _handleMousedownEnd(e: MouseEvent) {
+  protected _handleMousedownEnd(e: MouseEvent): void {
     this.lastFocus = 0;
     this.createMousedownListener(this.setEnd)(e);
     this.focusHandle(0);
   }
 
   createSetValue(index: number) {
-    return (numberOrModifier: number | ((value: number) => number)) => {
+    return (numberOrModifier: number | ((value: number) => number)): void => {
       const number = typeof numberOrModifier === "number"
         ? this.normalizeValue(numberOrModifier)
         : numberOrModifier(this.rangeValue[index]);
@@ -309,14 +304,14 @@ class Range extends SuperInput {
     };
   }
 
-  setEnd(value: number) {
+  setEnd(value: number): void {
     this.createSetValue((this.value as any)?.length - 1 || 0)(value);
   }
 
   /**
    * Compute value from event.
    */
-  protected _computeValue(e: MouseEvent) {
+  protected _computeValue(e: MouseEvent): number {
     const rect = this._root.getBoundingClientRect();
     const div = this.vertical ? (e.clientY - rect.top) / rect.height : (e.clientX - rect.left) / rect.width;
     const value = Math.round((div * (this.max - this.min)) / this.step) * this.step;
@@ -326,13 +321,13 @@ class Range extends SuperInput {
   /**
    * Ensure that the values do not exceed the range of max and min.
    */
-  protected normalizeValue(value: number) {
+  protected normalizeValue(value: number): number {
     if (value > this.max) { value -= this.step; }
     else if (value < this.min) { value += this.step; }
     return value;
   }
 
-  protected _handleMousedownRoot(e: MouseEvent) {
+  protected _handleMousedownRoot(e: MouseEvent): void {
     const value = this._computeValue(e);
     const index = this.range
       ? this.rangeValue.reduce((acc, item, index) => {
@@ -349,7 +344,7 @@ class Range extends SuperInput {
   }
 
   protected createMousedownListener(mouseMoveCallback: (arg0: number) => void) {
-    return (e: MouseEvent) => {
+    return (e: MouseEvent): void => {
       e.preventDefault();
       e.stopPropagation();
       const move = this.createMousemoveListener(mouseMoveCallback);
@@ -363,7 +358,7 @@ class Range extends SuperInput {
   }
 
   protected createMousemoveListener(callback: (arg0: number) => void) {
-    return (e: MouseEvent) => {
+    return (e: MouseEvent): void => {
       const value = this._computeValue(e);
       if (value > this.max || value < this.min) {
         return;
@@ -372,7 +367,7 @@ class Range extends SuperInput {
     };
   }
 
-  protected _connectedInit() {
+  protected _connectedInit(): void {
     const gap = this.max - this.min;
     this.step ||= gap / 100;
     if (isNil(this.value)) {
@@ -385,15 +380,15 @@ class Range extends SuperInput {
     this.default ??= this.value;
   }
 
-  reset() {
+  reset(): void {
     this.value = this.default;
   }
 
-  sort() {
+  sort(): number | number[] {
     return this.value = this.toSorted();
   }
 
-  toSorted() {
+  toSorted(): number | number[] {
     if (this.range) {
       return [...this.value as number[]].sort((a, b) => a - b);
     }

package/src/components/rotate.ts

@@ -2,7 +2,7 @@ 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 { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 
 import { GlobalStyle, scopePrefix } from "../core/global-style.js";
 
@@ -42,7 +42,7 @@ const cssScope = scopePrefix(protoName);
     margin: calc(-1 * var(${cssScope}--offset));
   }
 
-  [part=slot]{
+  [part=slot] {
     z-index: 2;
   }
 `,
@@ -51,19 +51,19 @@ class Rotate extends GlobalStyle {
   @part("root")
   protected _root: HTMLElement;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     return html`<div part="root">
       <div part="slot" @mousemove="${this._handleRotate}">${htmlSlot()}</div>
       <i @mouseleave="${this.reset}"></i>
     </div>`;
   }
 
-  reset() {
+  reset(): void {
     this._root.style.removeProperty("transform");
     this._root.style.removeProperty("transition");
   }
 
-  protected _handleRotate(e: MouseEvent) {
+  protected _handleRotate(e: MouseEvent): void {
     const { rotateX, rotateY } = this._computeOffset(e);
     this._root.style.setProperty("transform", `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`);
     this._root.style.setProperty("transition", "0s");
@@ -77,7 +77,10 @@ class Rotate extends GlobalStyle {
    * @param e Mouse move event.
    * @returns rotateX, rotateY
    */
-  _computeOffset(e: MouseEvent) {
+  _computeOffset(e: MouseEvent): {
+    rotateX: number;
+    rotateY: number;
+  } {
     const { left, top, width, height } = this._root.getBoundingClientRect();
     const { clientX, clientY } = e;
     const offsetX = clientX - left;