godown 3.0.0-canary.9 → 3.0.1

package/src/components/text.ts

@@ -1,11 +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 { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { css, html } from "lit";
+import { attr, classList, godown, htmlSlot, styles } from "@godown/element";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
 
 const protoName = "text";
 
@@ -18,52 +15,52 @@ const cssScope = scopePrefix(protoName);
  */
 @godown(protoName)
 @styles(css`
-    :host {
-      ${cssScope}--color: currentColor;
-      ${cssScope}--color-hover: currentColor;
-      ${cssScope}--color-active: currentColor;
-      display: inline-block;
-      text-overflow: ellipsis;
-      overflow-wrap: break-word;
-    }
+  :host {
+    ${cssScope}--color: currentColor;
+    ${cssScope}--color-hover: currentColor;
+    ${cssScope}--color-active: currentColor;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+  }
 
-    [part="root"] {
-      white-space: nowrap;
-      width: 100%;
-      vertical-align: bottom;
-      display: inline-block;
-      text-overflow: inherit;
-      overflow-wrap: inherit;
-      overflow: hidden;
-      color: var(${cssScope}--color);
-    }
+  [part="root"] {
+    white-space: nowrap;
+    width: 100%;
+    vertical-align: bottom;
+    display: inline-block;
+    text-overflow: inherit;
+    overflow-wrap: inherit;
+    overflow: hidden;
+    color: var(${cssScope}--color);
+  }
 
-    [part="root"]:hover {
-      color: var(${cssScope}--color-hover, var(${cssScope}--color));
-    }
+  [part="root"]:hover {
+    color: var(${cssScope}--color-hover, var(${cssScope}--color));
+  }
 
-    [part="root"]:active {
-      color: var(${cssScope}--color-active, var(${cssScope}--color));
-    }
+  [part="root"]:active {
+    color: var(${cssScope}--color-active, var(${cssScope}--color));
+  }
 
-    .hover:hover,
-    .active:active,
-    .always {
-      text-decoration: underline;
-    }
+  .hover:hover,
+  .active:active,
+  .always {
+    text-decoration: underline;
+  }
 
-    .none {
-      text-decoration: none;
-    }
+  .none {
+    text-decoration: none;
+  }
 
-    .clip{
-      background: var(${cssGlobalVars.clipBackground});
-      display: inline-block;
-      color: transparent;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      -webkit-background-clip: text;
-    }
+  [clip] {
+    background: var(${cssGlobalVars.clipBackground});
+    display: inline-block;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    -webkit-background-clip: text;
+  }
 `)
 class Text extends GlobalStyle {
   /**
@@ -76,20 +73,20 @@ class Text extends GlobalStyle {
    * Set background-clip to text.
    */
   @property({ type: Boolean })
-  clip: boolean;
+  clip = false;
 
-  protected render() {
-    return html`<span
-      part="root"
-      class="${
-      classList(this.underline, {
-        clip: this.clip,
-      })
-    }"
-    >
-      ${htmlSlot()}
-    </span>`;
+  protected render(): TemplateResult<1> {
+    return html`
+      <span
+        part="root"
+        ${attr(this.observedRecord)}
+        class="${classList(this.underline)}"
+      >
+        ${htmlSlot()}
+      </span>
+    `;
   }
 }
 
 export default Text;
+export { Text };

package/src/components/time.ts

@@ -1,7 +1,6 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.js";
+import { attr, godown, styles } from "@godown/element";
 import fmtime from "fmtime";
-import { css, type PropertyValues } from "lit";
+import { type PropertyValues, type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -11,10 +10,15 @@ const protoName = "time";
 /**
  * {@linkcode Time} renders a formatting time.
  *
+ * @fires time - Fires when the time changes.
  * @category display
  */
 @godown(protoName)
-@styles(css`:host{text-align: center;}`)
+@styles(css`
+  :host {
+    text-align: center;
+  }
+`)
 class Time extends GlobalStyle {
   /**
    * Escape symbol.
@@ -32,27 +36,34 @@ 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,15 +78,17 @@ class Time extends GlobalStyle {
     }
   }
 
-  disconnectedCallback() {
+  disconnectedCallback(): void {
     clearInterval(this.timeoutId);
   }
 
-  startTimeout() {
-    return window.setInterval(() => {
+  startTimeout(): number {
+    return setInterval(() => {
+      this.dispatchEvent(new CustomEvent("time", { detail: this.time, composed: true }));
       this.time = new Date(this.time.getTime() + (this.gap || this.timeout));
     }, Math.abs(this.timeout));
   }
 }
 
 export default Time;
+export { Time };

package/src/components/tooltip.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, html } from "lit";
+import { attr, godown, htmlSlot, styles } from "@godown/element";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { scopePrefix } from "../core/global-style.js";
@@ -15,7 +13,7 @@ const cssScope = scopePrefix(protoName);
  *
  * If it has the tip property, ignore the slot tip.
  *
- * @slot tip - Tip element if no `tim` provided.
+ * @slot tip - Tip element if no `tip` provided.
  * @slot - Content.
  * @category feedback
  */
@@ -24,12 +22,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;
@@ -48,22 +49,28 @@ const cssScope = scopePrefix(protoName);
       visibility: visible;
     }
 
-    .passive{
+    .passive {
       background: var(${cssScope}--tip-background);
-      padding: 0 .5em;
+    }
+
+    [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%;
     }
   `,
@@ -91,7 +98,7 @@ class Tooltip extends SuperOpenable {
    * If true, allow penetration of the tip.
    */
   @property({ type: Boolean })
-  propagation: boolean;
+  propagation = false;
 
   /**
    * How can tips be triggered.
@@ -113,27 +120,32 @@ 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"
-      tabindex="${isFocusable ? 0 : -1}"
-      @focus="${isFocusable ? () => this.open = true : null}"
-      @blur="${isFocusable ? () => this.open = false : null}"
-      @mouseenter="${isFocusable ? null : () => this.open = true}"
-      @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"}">
-    ${
-      this.tip
-        ? html`<span class="passive">${this.tip}</span>`
-        : htmlSlot("tip")
-    }</div>
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+        tabindex="${isFocusable ? 0 : -1}"
+        @focus="${isFocusable ? () => (this.open = true) : null}"
+        @blur="${isFocusable ? () => (this.open = false) : null}"
+        @mouseenter="${isFocusable ? null : () => (this.open = true)}"
+        @mouseleave="${isFocusable ? null : () => (this.open = false)}"
+        style="justify-content:${align};align-items:${align}"
+      >
+        ${htmlSlot()}
+        <div part="tip">
+          ${this.tip
+            ? html`
+                <span class="passive">${this.tip}</span>
+              `
+            : htmlSlot("tip")}
+        </div>
+      </div>
+    `;
   }
 }
 
 export default Tooltip;
+export { Tooltip };

package/src/components/typewriter.ts

@@ -1,9 +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 { random } from "@godown/element/tools/lib.js";
-import { css, html, type PropertyValueMap } from "lit";
+import { attr, godown, htmlSlot, random, styles } from "@godown/element";
+import { type PropertyValueMap, type TemplateResult, css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 
 import { GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -18,46 +14,40 @@ const cssScope = scopePrefix(protoName);
  */
 @godown(protoName)
 @styles(css`
-    :host {
-      ${cssScope}--cursor-width: .05em;
-      white-space: nowrap;
-    }
+  :host {
+    ${cssScope}--cursor-width: .05em;
+  }
 
-    i {
-      border-right: var(${cssScope}--cursor-width) solid;
-      margin-left: 0.02em;
-      animation: s 1.5s steps(1) infinite;
-    }
+  :host,
+  :host([contents]) [part="root"] {
+    display: inline-block;
+  }
 
-    @keyframes s {
-      0% {
-        border-color: currentColor;
-      }
-      50% {
-        border-color: transparent;
-      }
-    }
+  i {
+    border-right: var(${cssScope}--cursor-width) solid;
+    margin-left: 0.02em;
+    animation: s 1.5s steps(1) infinite;
+  }
 
-    slot {
-      display: none;
+  @keyframes s {
+    0% {
+      border-color: currentColor;
     }
-
-    .hidden {
-      visibility: hidden;
+    50% {
+      border-color: transparent;
     }
-  `)
+  }
+
+  slot {
+    display: none;
+  }
+`)
 class Typewriter extends GlobalStyle {
   /**
    * Raw text.
    */
   @property()
-  text = "";
-
-  /**
-   * Start immediately after {@linkcode Typewriter.firstUpdated}.
-   */
-  @property({ type: Boolean })
-  stopped = false;
+  content = "";
 
   /**
    * If true, hide the cursor
@@ -89,11 +79,8 @@ class Typewriter extends GlobalStyle {
   @property({ type: Number })
   index = 0;
 
-  /**
-   * Internal text.
-   */
   @state()
-  content = "";
+  contentInternal = "";
 
   protected timeoutID: number;
 
@@ -101,39 +88,44 @@ class Typewriter extends GlobalStyle {
   protected _i: HTMLElement;
 
   /**
-   * {@linkcode Typewriter.text} length.
+   * {@linkcode Typewriter.content} length.
    */
-  get len() {
-    return this.text.length;
+  get len(): number {
+    return this.content.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.contentInternal}
+        <i
+          part="cursor"
+          ?hidden="${this.ended}"
+        ></i>
+      </div>
+    `;
   }
 
-  protected firstUpdated() {
-    if (!this.text) {
-      this.text = this._slot?.assignedNodes()[0]?.textContent.trim() || "";
-    }
-    if (!this.stopped && this.len) {
+  protected firstUpdated(): void {
+    this.content ||= this._slot?.assignedNodes()[0]?.textContent.trim() || "";
+    if (!this.ended && this.len) {
       this.write();
     }
   }
 
-  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 }));
+      this.dispatchEvent(new CustomEvent(this.index === this.len ? "done" : "write", { detail: this.contentInternal }));
     }
   }
 
-  write(at = this.index) {
-    this.content = this.text.slice(0, at + 1);
+  write(at: number = this.index): void {
+    this.contentInternal = this.content.slice(0, at + 1);
     const timeout = this.delay || random(this.max, this.min);
-    this.timeoutID = window.setTimeout(() => {
+    this.timeoutID = setTimeout(() => {
       const nx = at + 1;
       if (nx <= this.len) {
         this.index = nx;
@@ -142,13 +134,14 @@ class Typewriter extends GlobalStyle {
     }, timeout);
   }
 
-  stop() {
+  stop(): void {
     clearTimeout(this.timeoutID);
   }
 
-  end() {
+  end(): void {
     this.ended = true;
   }
 }
 
 export default Typewriter;
+export { Typewriter };

package/src/core/global-style.ts

@@ -1,27 +1,31 @@
 import { type Gradients, presetsRGB } from "@godown/colors/presets-rgb.js";
 import { travel } from "@godown/colors/travel.js";
-import GodownElement from "@godown/element";
-import GodownConfig from "@godown/element/config.js";
-import { joinProperties } from "@godown/element/tools/css.js";
-import { trim } from "@godown/element/tools/lib.js";
-import { css, CSSResult, unsafeCSS } from "lit";
+import { GodownElement, joinProperties, trim } from "@godown/element";
+import { type CSSResult, css, unsafeCSS } from "lit";
 
-GodownElement.godownConfig ||= new GodownConfig();
-
-export class GlobalStyle extends GodownElement {
-}
+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) {
-  return unsafeCSS("--" + variable);
+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),
@@ -36,25 +40,25 @@ export const cssGlobalVars = {
 type PresetsGradientsCSSResult = Record<keyof typeof presetsRGB, Gradients<CSSResult>>;
 GlobalStyle.styles = [
   unsafeCSS(
-    ":host{"
-      + `${cssGlobalVars.black}:rgb(0 0 0);`
-      + `${cssGlobalVars.white}:rgb(255 255 255);`
-      + travel((key, gradient, rgb) => {
+    ":host{" +
+      `${cssGlobalVars.black}:rgb(0 0 0);` +
+      `${cssGlobalVars.white}:rgb(255 255 255);` +
+      travel((key, gradient, rgb) => {
         cssGlobalVars._colors[key] ||= [] as any;
         cssGlobalVars._colors[key].push(unsafeCSS(scopePrefix("color", 2) + "-" + key + "-" + gradient));
         const endKey = `-${key}-${gradient}`;
         const colorKey = scopePrefix("color", 2) + endKey;
         return `${colorKey}:rgb(${rgb});`;
-      }, presetsRGB).join("")
-      + joinProperties({
+      }, presetsRGB).join("") +
+      joinProperties({
         [cssGlobalVars.background + ""]: `var(${cssGlobalVars._colors.darkgray[9]})`,
         [cssGlobalVars.foreground + ""]: `var(${cssGlobalVars._colors.lightgray[0]})`,
         [cssGlobalVars.active + ""]: `var(${cssGlobalVars._colors.blue[6]})`,
         [cssGlobalVars.passive + ""]: `var(${cssGlobalVars._colors.darkgray[6]})`,
         [cssGlobalVars.clipBackground + ""]:
           `linear-gradient(to bottom, var(${cssGlobalVars.foreground}), var(${cssGlobalVars.passive}))`,
-      })
-      + "}",
+      }) +
+      "}",
   ),
   css`
     * {
@@ -82,5 +86,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,8 +1,6 @@
-import { styles } from "@godown/element/decorators/index.js";
-import { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { css, html } from "lit";
+import { attr, htmlSlot, styles } from "@godown/element";
+import { type TemplateResult, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 import { GlobalStyle } from "./global-style.js";
 
@@ -18,13 +16,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 +35,21 @@ 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}>
-      ${htmlSlot()}
-    </a>`;
+  protected render(): TemplateResult<1> {
+    return html`
+      <a
+        part="root"
+        ${attr(this.observedRecord)}
+        href="${this.href || nothing}"
+        target="${this.target}"
+        @click=${this._handleClick}
+      >
+        ${htmlSlot()}
+      </a>
+    `;
   }
 
-  // eslint-disable-next-line
-  protected _handleClick(_: MouseEvent) {}
+  protected _handleClick(_: MouseEvent): void {}
 }
 
 export default SuperAnchor;