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

package/src/components/skeleton.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 iconPhoto from "@godown/f7-icon/icons/photo.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -49,7 +50,7 @@ const cssScope = scopePrefix(protoName);
       margin: calc(var(--size) * 0.05);
     }
 
-    .position {
+    [animation=position] {
       background-image: linear-gradient(
         var(${cssScope}--deg),
         var(${cssScope}--from) 36%,
@@ -70,7 +71,7 @@ const cssScope = scopePrefix(protoName);
       }
     }
 
-    .opacity {
+    [animation=opacity] {
       animation-name: op;
       animation-direction: alternate;
     }
@@ -105,11 +106,11 @@ class Skeleton extends GlobalStyle {
   @state()
   loading = true;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     if (!this.loading) {
       return htmlSlot();
     }
-    return html`<div part="root" class="${this.animation}">
+    return html`<div part="root" ${attr(this.observedRecord)}>
     ${this.type === "image" ? iconPhoto() : ""}
     ${htmlSlot("loading")}</div>`;
   }

package/src/components/split.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 { classList } from "@godown/element/directives/class-list.js";
 import { type HandlerEvent } from "@godown/element/element.js";
-import { css, html, nothing } from "lit";
+import { css, html, nothing, type TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -40,12 +41,16 @@ const loop = <T>(len: number, fn: (index?: number) => T) => {
       ${cssScope}--gap: .25em;
     }
 
+    :host([contents]) [part=root] {
+      width: fit-content;
+    }
+
     [part=root] {
       gap: var(${cssScope}--gap);
       width: 100%;
       position: relative;
       vertical-align: top;
-      display: inline-flex;
+      display: flex;
       justify-content: space-between;
       border-radius: inherit;
     }
@@ -92,9 +97,8 @@ class Split extends SuperInput {
   @state()
   currentValue: (string | void)[] = [];
 
-  protected render() {
-    return html`
-      <div part="root">
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
     ${
       loop(this.len, (index: number) =>
         html`<span part="input-box"
@@ -102,16 +106,16 @@ class Split extends SuperInput {
           class="${classList({ focus: this.current === index }) || nothing}"
         >${this.currentValue[index]}</span>`)
     }
-        <input
-          part="input"
-          id="${this.makeId}"
-          @blur=${this.blur}
-          @input="${this._handleInput}"
-          .value="${
+      <input
+        part="input"
+        id="${this.makeId}"
+        @blur=${this.blur}
+        @input="${this._handleInput}"
+        .value="${
       /* Ensure that input always has a value of length this.len */
       this.value.padStart(this.len, " ")}"
-        >
-      </div>
+      >
+    </div>
     `;
   }
 
@@ -120,7 +124,7 @@ class Split extends SuperInput {
     this.reset();
   }
 
-  protected _handleInput(e: HandlerEvent<HTMLInputElement, InputEvent>) {
+  protected _handleInput(e: HandlerEvent<HTMLInputElement, InputEvent>): void {
     e.stopPropagation();
     if (this.compositing) {
       return;
@@ -149,7 +153,7 @@ class Split extends SuperInput {
    *
    * @param data Input event data.
    */
-  protected fillInput(data: string | null) {
+  protected fillInput(data: string | null): void {
     if (data === null) {
       // delete
 
@@ -192,23 +196,23 @@ class Split extends SuperInput {
     }
   }
 
-  focus() {
+  focus(): void {
     this.focusAt(this.current);
     super.focus();
   }
 
-  focusAt(i: number) {
+  focusAt(i: number): void {
     this.current = i;
     this._input.focus();
   }
 
-  blur() {
+  blur(): void {
     this._input.blur();
     this.current = -1;
     super.blur();
   }
 
-  reset() {
+  reset(): void {
     this.current = -1;
     this.value = this.default;
     this.currentValue = this.value.split("").concat(Array(this.len - this.value.length).fill(null));

package/src/components/switch.ts

@@ -1,6 +1,7 @@
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
-import { css, html } from "lit";
+import { attr } from "@godown/element/directives/attr.js";
+import { css, html, type TemplateResult } from "lit";
 import { property, query } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -20,6 +21,13 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(
   css`
+    :host,
+    :host([contents]) [part=root] {
+      width: var(${cssScope}-width);
+      height: var(${cssScope}-height);
+      display: inline-block;
+    }
+
     :host {
       ${cssScope}-width: 3em;
       ${cssScope}-height: calc(var(${cssScope}-width) / 2);
@@ -27,9 +35,6 @@ const cssScope = scopePrefix(protoName);
       ${cssScope}-handle-space: .125em;
       ${cssScope}-transition: .2s ease-in-out;
       background: var(${cssGlobalVars.input}-background);
-      width: var(${cssScope}-width);
-      height: var(${cssScope}-height);
-      display: inline-block;
       vertical-align: bottom;
       border-radius: 0;
     }
@@ -44,14 +49,10 @@ const cssScope = scopePrefix(protoName);
       position: relative;
       height: inherit;
     }
-
-    [part=root],
-    input {
-      width: 100%;
-    }
-
+    
     input {
       opacity: 0;
+      width: 100%;
       height: 100%;
       appearance: none;
     }
@@ -70,6 +71,7 @@ const cssScope = scopePrefix(protoName);
 
     :host([round]) {
       border-radius: calc(var(${cssScope}-height) / 2);
+      background: var(${cssGlobalVars.passive});
     }
 
     :host([checked]) span {
@@ -93,10 +95,6 @@ const cssScope = scopePrefix(protoName);
       margin: var(${cssScope}-handle-space);
     }
 
-    .round {
-      background: var(${cssGlobalVars.passive});
-    }
-
     :host([checked]) .round {
       background: var(${cssGlobalVars.active});
     }
@@ -136,8 +134,11 @@ class Switch extends SuperInput {
   @query("input")
   protected _input: HTMLInputElement;
 
-  protected render() {
-    return html`<div part="root" class="${this.round ? "round" : "rect"}">
+  protected render(): TemplateResult<1> {
+    return html`<div part="root"
+      ${attr(this.observedRecord)}
+      class="${this.round ? "round" : "rect"}"
+    >
       <input
         part="input"
         @change="${this._handleChange}"
@@ -151,12 +152,12 @@ class Switch extends SuperInput {
     </div>`;
   }
 
-  reset() {
+  reset(): void {
     this.checked = this.default === "true";
     this._input.checked = this.checked;
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     super.connectedCallback();
     if (this.checked) {
       this.default = "true";
@@ -166,7 +167,7 @@ class Switch extends SuperInput {
     }
   }
 
-  protected _handleChange() {
+  protected _handleChange(): void {
     this.checked = this._input.checked;
     this.dispatchEvent(new CustomEvent("input", { detail: this.checked, bubbles: true, composed: true }));
     this.dispatchEvent(new CustomEvent("change", { detail: this.checked, composed: true }));

package/src/components/text.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 { classList } from "@godown/element/directives/class-list.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 { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -56,7 +57,7 @@ const cssScope = scopePrefix(protoName);
       text-decoration: none;
     }
 
-    .clip{
+    [clip] {
       background: var(${cssGlobalVars.clipBackground});
       display: inline-block;
       color: transparent;
@@ -76,16 +77,13 @@ class Text extends GlobalStyle {
    * Set background-clip to text.
    */
   @property({ type: Boolean })
-  clip: boolean;
+  clip = false;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     return html`<span
       part="root"
-      class="${
-      classList(this.underline, {
-        clip: this.clip,
-      })
-    }"
+      ${attr(this.observedRecord)}
+      class="${classList(this.underline)}"
     >
       ${htmlSlot()}
     </span>`;

package/src/components/time.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 fmtime from "fmtime";
-import { css, type PropertyValues } from "lit";
+import { css, html, type PropertyValues, TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -32,27 +33,29 @@ class Time extends GlobalStyle {
    * Time.
    */
   @property({ type: Object })
-  time = new Date();
+  time: Date = new Date();
 
   /**
    * If there is a value, update every gap or timeout.
    */
   @property({ type: Number })
-  timeout;
+  timeout: any;
 
   /**
    * The number of milliseconds that change with each update.
    */
   @property({ type: Number })
-  gap;
+  gap: any;
 
   protected timeoutId: number;
 
-  protected render(): string {
-    return fmtime(this.format, this.time, this.escape);
+  protected render(): TemplateResult<1> {
+    return html`<span part="root" ${attr(this.observedRecord)}>
+      ${fmtime(this.format, this.time, this.escape)}
+    </span>`;
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(): void {
     if (this.timeout) {
       this.timeoutId = this.startTimeout();
     }
@@ -67,11 +70,11 @@ class Time extends GlobalStyle {
     }
   }
 
-  disconnectedCallback() {
+  disconnectedCallback(): void {
     clearInterval(this.timeoutId);
   }
 
-  startTimeout() {
+  startTimeout(): number {
     return window.setInterval(() => {
       this.time = new Date(this.time.getTime() + (this.gap || this.timeout));
     }, Math.abs(this.timeout));

package/src/components/tooltip.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, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { scopePrefix } from "../core/global-style.js";
@@ -24,12 +25,15 @@ const cssScope = scopePrefix(protoName);
   css`
     :host {
       ${cssScope}--tip-background: inherit;
-      display: inline-block;
       width: fit-content;
     }
+    
+    :host,
+    [part=root] {
+      display: inline-flex;
+    }
 
     [part=root] {
-      display: flex;
       position: relative;
       transition: inherit;
       border-radius: inherit;
@@ -51,18 +55,25 @@ const cssScope = scopePrefix(protoName);
     .passive {
       background: var(${cssScope}--tip-background);
     }
+
+    [propagation] [part=tip] {
+      pointer-events: none;
+    }
   `,
   css`
-    [direction^=top] {
+    [direction^=top] [part=tip] {
       bottom: 100%;
     }
-    [direction^=bottom] {
+
+    [direction^=bottom] [part=tip] {
       top: 100%;
     }
-    [direction$=right] {
+
+    [direction$=right] [part=tip] {
       left: 100%;
     }
-    [direction$=left] {
+
+    [direction$=left] [part=tip] {
       right: 100%;
     }
   `,
@@ -112,10 +123,12 @@ class Tooltip extends SuperOpenable {
     "flex-end": "flex-end",
   };
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     const align = Tooltip.aligns[this.align] || "inherit";
     const isFocusable = this.type === "focus";
-    return html`<div part="root"
+    return html`<div 
+      part="root"
+      ${attr(this.observedRecord)}
       tabindex="${isFocusable ? 0 : -1}"
       @focus="${isFocusable ? () => this.open = true : null}"
       @blur="${isFocusable ? () => this.open = false : null}"
@@ -123,14 +136,13 @@ class Tooltip extends SuperOpenable {
       @mouseleave="${isFocusable ? null : () => this.open = false}"
       style="justify-content:${align};align-items:${align}">
       ${htmlSlot()}
-      <div part="tip"
-      direction="${this.direction}"
-      style="pointer-events:${this.propagation ? "none" : "all"}">
-    ${
+      <div part="tip">
+      ${
       this.tip
         ? html`<span class="passive">${this.tip}</span>`
         : htmlSlot("tip")
-    }</div>
+    }
+      </div>
     </div>`;
   }
 }

package/src/components/typewriter.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 { classList } from "@godown/element/directives/class-list.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
 import { random } from "@godown/element/tools/lib.js";
-import { css, html, type PropertyValueMap } from "lit";
+import { css, html, type PropertyValueMap, TemplateResult } from "lit";
 import { property, query, state } from "lit/decorators.js";
 
 import { GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -20,7 +21,11 @@ const cssScope = scopePrefix(protoName);
 @styles(css`
     :host {
       ${cssScope}--cursor-width: .05em;
-      white-space: nowrap;
+    }
+
+    :host,
+    :host([contents]) [part=root] {
+      display: inline-block;
     }
 
     i {
@@ -103,19 +108,19 @@ class Typewriter extends GlobalStyle {
   /**
    * {@linkcode Typewriter.text} length.
    */
-  get len() {
+  get len(): number {
     return this.text.length;
   }
 
-  protected render() {
-    return html`${htmlSlot()}${this.content}<i part="cursor" class="${
-      classList({
-        hidden: this.ended,
-      })
-    }"></i>`;
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+      ${htmlSlot()}
+      ${this.content}
+      <i part="cursor" class="${classList({ hidden: this.ended })}"></i>
+    </div>`;
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(): void {
     if (!this.text) {
       this.text = this._slot?.assignedNodes()[0]?.textContent.trim() || "";
     }
@@ -124,13 +129,13 @@ class Typewriter extends GlobalStyle {
     }
   }
 
-  protected updated(changedProperties: PropertyValueMap<this>) {
+  protected updated(changedProperties: PropertyValueMap<this>): void {
     if (changedProperties.has("index")) {
       this.dispatchEvent(new CustomEvent(this.index === this.len ? "done" : "write", { detail: this.content }));
     }
   }
 
-  write(at = this.index) {
+  write(at: number = this.index): void {
     this.content = this.text.slice(0, at + 1);
     const timeout = this.delay || random(this.max, this.min);
     this.timeoutID = window.setTimeout(() => {
@@ -142,11 +147,11 @@ class Typewriter extends GlobalStyle {
     }, timeout);
   }
 
-  stop() {
+  stop(): void {
     clearTimeout(this.timeoutID);
   }
 
-  end() {
+  end(): void {
     this.ended = true;
   }
 }

package/src/core/global-style.ts

@@ -13,15 +13,25 @@ export class GlobalStyle extends GodownElement {
 
 const cssvar = trim(GlobalStyle.godownConfig.prefix, "-");
 
-export function scopePrefix(scope: string, len = 1) {
+export function scopePrefix(scope: string, len = 1): CSSResult {
   return variablePrefix(cssvar + "-".repeat(len) + scope);
 }
 
-export function variablePrefix(variable: string) {
+export function variablePrefix(variable: string): CSSResult {
   return unsafeCSS("--" + variable);
 }
 
-export const cssGlobalVars = {
+export const cssGlobalVars: {
+  foreground: CSSResult;
+  background: CSSResult;
+  clipBackground: CSSResult;
+  active: CSSResult;
+  passive: CSSResult;
+  _colors: PresetsGradientsCSSResult;
+  input: CSSResult;
+  white: CSSResult;
+  black: CSSResult;
+} = {
   foreground: scopePrefix("foreground", 2),
   background: scopePrefix("background", 2),
   clipBackground: scopePrefix("clip-background", 2),
@@ -82,5 +92,14 @@ GlobalStyle.styles = [
     svg {
       user-select: none;
     }
-  `,
+
+    :host([contents]) {
+      display: contents;
+    }
+
+    :where(:host([contents]) [part=root]) {
+      all: inherit;
+      display: revert;
+    }
+`,
 ];

package/src/core/super-anchor.ts

@@ -1,6 +1,7 @@
 import { styles } from "@godown/element/decorators/index.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 { ifDefined } from "lit/directives/if-defined.js";
 
@@ -18,13 +19,11 @@ import { GlobalStyle } from "./global-style.js";
     cursor: pointer;
   }
 
-  a {
+  [part=root] {
     width: 100%;
-    display: flex;
     color: inherit;
+    display: inline-block;
     text-decoration: inherit;
-    justify-content: space-between;
-    align-items: center;
   }
 `)
 class SuperAnchor extends GlobalStyle {
@@ -39,14 +38,18 @@ class SuperAnchor extends GlobalStyle {
   @property()
   target: "_blank" | "_self" | "_parent" | "_top" = "_self";
 
-  protected render() {
-    return html`<a part="root" href="${ifDefined(this.href)}" target="${this.target}" @click=${this._handleClick}>
+  protected render(): TemplateResult<1> {
+    return html`<a part="root"
+      ${attr(this.observedRecord)}
+      href="${ifDefined(this.href)}"
+      target="${this.target}"
+      @click=${this._handleClick}>
       ${htmlSlot()}
     </a>`;
   }
 
   // eslint-disable-next-line
-  protected _handleClick(_: MouseEvent) {}
+  protected _handleClick(_: MouseEvent): void {}
 }
 
 export default SuperAnchor;