godown 3.0.0-canary.8 → 3.0.0

package/src/components/details.ts

@@ -1,9 +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 { attr, godown, htmlSlot, styles } from "@godown/element";
 import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
-import { css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { css, html, type TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
 
 import { scopePrefix } from "../core/global-style.js";
 import SuperOpenable from "../core/super-openable.js";
@@ -15,6 +13,9 @@ const cssScope = scopePrefix(protoName);
 /**
  * {@linkcode Details} similar to `<details>`.
  *
+ * @slot summary - Details summary if no `summary` is provided.
+ * @slot - Details content.
+ * @fires change - Fired when the open changes.
  * @category display
  */
 @godown(protoName)
@@ -23,7 +24,6 @@ const cssScope = scopePrefix(protoName);
     :host {
       ${cssScope}--icon-deg-open: 0deg;
       ${cssScope}--icon-deg-close: 90deg;
-      ${cssScope}--icon-deg: 0deg;
       ${cssScope}--icon-space: 0.3em;
       ${cssScope}--summary-direction: row;
       ${cssScope}--transition: .3s;
@@ -32,13 +32,14 @@ const cssScope = scopePrefix(protoName);
       transition: var(${cssScope}--transition);
     }
 
-    dl {
+    [part=root] {
       height: 100%;
       position: relative;
       overflow: hidden;
     }
 
-    dt {
+    [part=title] {
+      direction: ltr;
       height: 100%;
       display: flex;
       flex-wrap: nowrap;
@@ -48,7 +49,7 @@ const cssScope = scopePrefix(protoName);
       flex-direction: var(${cssScope}--summary-direction);
     }
 
-    dd {
+    [part=details] {
       display: grid;
       overflow: hidden;
       grid-template-rows: 0fr;
@@ -56,27 +57,24 @@ const cssScope = scopePrefix(protoName);
       transition-property: grid-template-rows;
     }
 
-    i {
-      display: flex;
-      backface-visibility: hidden;
-      padding: var(${cssScope}--icon-space);
-      transition: var(${cssScope}--transition);
-      transform: rotate(var(${cssScope}--icon-deg));
-    }
-
-    :host([open]) dd {
+    :host([open]) [part=details] {
       grid-template-rows: 1fr;
     }
 
-    :host([float]) dd {
+    :host([float]) [part=details] {
       top: 100%;
       position: absolute;
     }
 
-    i {
+    [part=icon] {
+      display: flex;
+      backface-visibility: hidden;
+      padding: var(${cssScope}--icon-space);
+      transition: var(${cssScope}--transition);
       transform: rotate(var(${cssScope}--icon-deg-close));
     }
-    :host([open]) i {
+
+    :host([open]) [part=icon] {
       transform: rotate(var(${cssScope}--icon-deg-open));
     }
   `,
@@ -87,20 +85,20 @@ class Details extends SuperOpenable {
    */
   @property({ type: Boolean })
   fill = false;
+
   /**
    * Summary text.
    */
   @property()
   summary = "";
 
-  @query("dd")
-  _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>
@@ -110,3 +108,4 @@ class Details extends SuperOpenable {
 }
 
 export default Details;
+export { Details };

package/src/components/dialog.ts

@@ -1,8 +1,5 @@
-import { type HandlerEvent } from "@godown/element";
-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, html, type PropertyValues } from "lit";
+import { attr, godown, type HandlerEvent, htmlSlot, styles } from "@godown/element";
+import { css, html, type PropertyValues, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -16,8 +13,9 @@ const cssScope = scopePrefix(protoName);
  *
  * Like dialog, it listens for submit events and closes itself when the target method is "dialog".
  *
- * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed
+ * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed.
  *
+ * @fires change - Fires when the open changes.
  * @category feedback
  */
 @godown(protoName)
@@ -32,21 +30,21 @@ const cssScope = scopePrefix(protoName);
       visibility: hidden;
       position: fixed;
       z-index: 1;
-      inset:0;
+      inset: 0;
     }
 
     :host([open]) {
       visibility: visible;
     }
 
-    :host([open][modal]) [part="modal"] {
+    :host([open][modal]) [part=modal] {
       pointer-events: all;
       visibility: visible;
       opacity: var(${cssScope}--opacity-modal);
 
     }
 
-    [part="modal"] {
+    [part=modal] {
       visibility: hidden;
       opacity: 0;
       width: 100%;
@@ -55,7 +53,7 @@ const cssScope = scopePrefix(protoName);
       background: var(${cssScope}--background-modal);
     }
 
-    [part="root"] {
+    [part=root] {
       width: 100%;
       height: 100%;
       display: flex;
@@ -64,52 +62,57 @@ 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;
     }
   `,
 )
 class Dialog extends SuperOpenable {
+  /**
+   * Direction of the opening animation.
+   */
   @property()
   direction: Direction9 = "center";
+
   /**
    * Enable modal, blocking event penetration.
    */
   @property({ type: Boolean, reflect: true })
   modal = false;
+
   /**
    * Close key.
    */
   @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;
@@ -120,7 +123,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);
@@ -134,7 +137,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)) {
@@ -142,13 +145,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;
@@ -158,3 +161,4 @@ class Dialog extends SuperOpenable {
 }
 
 export default Dialog;
+export { Dialog };

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,32 +40,40 @@ class Dragbox extends GlobalStyle {
     return this.offsetParent?.clientHeight ?? document.body.offsetHeight;
   }
 
-  drag: boolean;
-  t: number;
-  l: number;
-  cx: number;
-  cy: number;
+  private drag = false;
+  private t: number;
+  private l: number;
+  private cx: number;
+  private cy: number;
 
   /**
    * Position x.
    */
   @property()
   x = "auto";
+
   /**
    * Position y.
    */
   @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;
@@ -78,16 +83,16 @@ class Dragbox extends GlobalStyle {
     this._handleMouseLeave = this.events.add(document, "mouseleave", this._handleDragEnd.bind(this));
   }
 
-  _handleMouseMove: EventListenerFunc;
-  _handleMouseLeave: EventListenerFunc;
+  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;
     }
@@ -110,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";
@@ -124,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";
@@ -13,39 +9,56 @@ const protoName = "flex";
 /**
  * {@linkcode Flex} provides flex layout.
  *
+ * @slot - Flex items.
  * @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`).
    */
   @property({ attribute: "flex-flow" })
   flexFlow: string;
+
   /**
    * CSS property `gap`.
    */
   @property()
   gap: string;
+
   /**
    * CSS property `justify-content`.
    */
   @property()
   content: string;
+
   /**
    * CSS property `align-items`.
    */
   @property()
   items: string;
+
   /**
    * If true, set flex-direction to "column".
    */
   @property({ type: Boolean })
-  vertical: boolean;
+  vertical = false;
 
-  protected render() {
-    return [
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+    ${[
       htmlSlot(),
       htmlStyle(
         joinRules({
@@ -58,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";
@@ -12,8 +10,6 @@ const protoName = "form";
  * {@linkcode Form} Gets child element key-value object,
  * which will be nested if the child element is the same as this element.
  *
- * @slot - Child elements.
- *
  * @category form
  */
 @godown(protoName)
@@ -27,17 +23,18 @@ const protoName = "form";
 class Form<T = object> extends GlobalStyle {
   @property()
   name = "";
+
   get value(): T {
     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;
@@ -81,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";
@@ -14,39 +9,60 @@ const protoName = "grid";
 /**
  * {@linkcode Grid} provides gird layout.
  *
+ * @slot - Grid items.
  * @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`.
    */
   @property()
   gap: string;
+
   /**
-   * CSS property `grid-template-columns`, if {@linkcode isNumerical} divide equally.
+   * CSS property `grid-template-columns`.
+   *
+   * If columns is numerical, divide columns equally.
    */
   @property()
   columns: string | number;
+
   /**
-   * CSS property `grid-template-rows`, if {@linkcode isNumerical} divide equally.
+   * CSS property `grid-template-rows`.
+   *
+   * If rows is numerical, divide rows equally.
    */
   @property()
   rows: string | number;
+
   /**
    * CSS property `place-content` (`align-content justify-content`).
    */
   @property()
   content: string;
+
   /**
    * CSS property `place-items` (`align-items justify-items`).
    */
   @property()
   items: string;
 
-  protected render() {
-    return [
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+      ${[
       htmlSlot(),
       htmlStyle(
         joinRules({
@@ -59,8 +75,10 @@ class Grid extends GlobalStyle {
           },
         }),
       ),
-    ];
+    ]}
+    </div>`;
   }
 }
 
 export default Grid;
+export { Grid };