godown 3.0.0 → 3.0.1

package/src/components/switch.ts

@@ -1,5 +1,5 @@
 import { attr, godown, styles } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -18,87 +18,85 @@ const cssScope = scopePrefix(protoName);
  * @category input
  */
 @godown(protoName)
-@styles(
-  css`
-    :host,
-    :host([contents]) [part=root] {
-      width: var(${cssScope}-width);
-      height: var(${cssScope}-height);
-      display: inline-block;
-    }
+@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);
-      ${cssScope}-handle-size: 1.25em;
-      ${cssScope}-handle-space: .125em;
-      ${cssScope}-transition: .2s ease-in-out;
-      background: var(${cssGlobalVars.input}-background);
-      vertical-align: bottom;
-      border-radius: 0;
-    }
+  :host {
+    ${cssScope}-width: 3em;
+    ${cssScope}-height: calc(var(${cssScope}-width) / 2);
+    ${cssScope}-handle-size: 1.25em;
+    ${cssScope}-handle-space: .125em;
+    ${cssScope}-transition: .2s ease-in-out;
+    background: var(${cssGlobalVars.input}-background);
+    vertical-align: bottom;
+    border-radius: 0;
+  }
 
-    [part=root],
-    [part=handle] {
-      transition: var(${cssScope}-transition);
-    }
+  [part="root"],
+  [part="handle"] {
+    transition: var(${cssScope}-transition);
+  }
 
-    [part=root] {
-      border-radius: inherit;
-      position: relative;
-      height: inherit;
-    }
-    
-    [part=input] {
-      opacity: 0;
-      width: 100%;
-      height: 100%;
-      appearance: none;
-    }
+  [part="root"] {
+    border-radius: inherit;
+    position: relative;
+    height: inherit;
+  }
 
-    [part=handle] {
-      height: 100%;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      left: 0;
-      width: 50%;
-      pointer-events: none;
-      border-radius: inherit;
-    }
+  [part="input"] {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    appearance: none;
+  }
 
-    :host([round]) {
-      border-radius: calc(var(${cssScope}-height) / 2);
-      background: var(${cssGlobalVars.passive});
-    }
+  [part="handle"] {
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    width: 50%;
+    pointer-events: none;
+    border-radius: inherit;
+  }
 
-    :host([checked]) [part=handle] {
-      left: 50%;
-    }
+  :host([round]) {
+    border-radius: calc(var(${cssScope}-height) / 2);
+    background: var(${cssGlobalVars.passive});
+  }
 
-    .rect .true {
-      background: var(${cssGlobalVars.active});
-    }
+  :host([checked]) [part="handle"] {
+    left: 50%;
+  }
 
-    .rect .false {
-      background: var(${cssGlobalVars.passive});
-    }
+  .rect .true {
+    background: var(${cssGlobalVars.active});
+  }
 
-    .round [part=handle] {
-      --size: var(${cssScope}-handle-size);
-      border-radius: 100%;
-      background: var(--godown--input-control);
-      width: var(--size);
-      height: var(--size);
-      margin: var(${cssScope}-handle-space);
-    }
+  .rect .false {
+    background: var(${cssGlobalVars.passive});
+  }
 
-    :host([checked]) .round {
-      background: var(${cssGlobalVars.active});
-    }
-  `,
-)
+  .round [part="handle"] {
+    --size: var(${cssScope}-handle-size);
+    border-radius: 100%;
+    background: var(--godown--input-control);
+    width: var(--size);
+    height: var(--size);
+    margin: var(${cssScope}-handle-space);
+  }
+
+  :host([checked]) .round {
+    background: var(${cssGlobalVars.active});
+  }
+`)
 class Switch extends SuperInput {
   /**
    * Display rounded.
@@ -134,18 +132,27 @@ class Switch extends SuperInput {
   protected _input: HTMLInputElement;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)} class="${this.round ? "round" : "rect"}">
-      <input
-        part="input"
-        @change="${this._handleChange}"
-        ?disabled="${this.disabled}"
-        ?checked="${this.checked}"
-        name="${this.name}"
-        id="${this.makeId}"
-        type="checkbox"
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+        class="${this.round ? "round" : "rect"}"
       >
-      <span part="handle" class="${this.checked}"></span>
-    </div>`;
+        <input
+          part="input"
+          type="checkbox"
+          ?disabled="${this.disabled}"
+          ?checked="${this.checked}"
+          name="${this.name}"
+          id="${this.makeId}"
+          @change="${this._handleChange}"
+        />
+        <span
+          part="handle"
+          class="${this.checked}"
+        ></span>
+      </div>
+    `;
   }
 
   reset(): void {

package/src/components/text.ts

@@ -1,8 +1,8 @@
 import { attr, classList, godown, htmlSlot, styles } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+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";
 
@@ -14,56 +14,54 @@ const cssScope = scopePrefix(protoName);
  * @category display
  */
 @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;
-    }
+@styles(css`
+  :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 {
   /**
    * Underline behavior.
@@ -78,9 +76,15 @@ class Text extends GlobalStyle {
   clip = false;
 
   protected render(): TemplateResult<1> {
-    return html`<span part="root" ${attr(this.observedRecord)} class="${classList(this.underline)}">
-      ${htmlSlot()}
-    </span>`;
+    return html`
+      <span
+        part="root"
+        ${attr(this.observedRecord)}
+        class="${classList(this.underline)}"
+      >
+        ${htmlSlot()}
+      </span>
+    `;
   }
 }
 

package/src/components/time.ts

@@ -1,6 +1,6 @@
 import { attr, godown, styles } from "@godown/element";
 import fmtime from "fmtime";
-import { css, html, type PropertyValues, type TemplateResult } from "lit";
+import { type PropertyValues, type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -14,7 +14,11 @@ const protoName = "time";
  * @category display
  */
 @godown(protoName)
-@styles(css`:host{text-align: center;}`)
+@styles(css`
+  :host {
+    text-align: center;
+  }
+`)
 class Time extends GlobalStyle {
   /**
    * Escape symbol.
@@ -49,7 +53,14 @@ class Time extends GlobalStyle {
   protected timeoutId: number;
 
   protected render(): TemplateResult<1> {
-    return html`<span part="root" ${attr(this.observedRecord)}>${fmtime(this.format, this.time, this.escape)}</span>`;
+    return html`
+      <span
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${fmtime(this.format, this.time, this.escape)}
+      </span>
+    `;
   }
 
   protected firstUpdated(): void {

package/src/components/tooltip.ts

@@ -1,5 +1,5 @@
 import { attr, godown, htmlSlot, styles } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { scopePrefix } from "../core/global-style.js";
@@ -24,19 +24,19 @@ const cssScope = scopePrefix(protoName);
       ${cssScope}--tip-background: inherit;
       width: fit-content;
     }
-    
+
     :host,
-    [part=root] {
+    [part="root"] {
       display: inline-flex;
     }
 
-    [part=root] {
+    [part="root"] {
       position: relative;
       transition: inherit;
       border-radius: inherit;
     }
 
-    [part=tip] {
+    [part="tip"] {
       width: fit-content;
       height: fit-content;
       position: absolute;
@@ -45,7 +45,7 @@ const cssScope = scopePrefix(protoName);
       user-select: none;
     }
 
-    :host([open]) [part=tip] {
+    :host([open]) [part="tip"] {
       visibility: visible;
     }
 
@@ -53,24 +53,24 @@ const cssScope = scopePrefix(protoName);
       background: var(${cssScope}--tip-background);
     }
 
-    [propagation] [part=tip] {
+    [propagation] [part="tip"] {
       pointer-events: none;
     }
   `,
   css`
-    [direction^=top] [part=tip] {
+    [direction^="top"] [part="tip"] {
       bottom: 100%;
     }
 
-    [direction^=bottom] [part=tip] {
+    [direction^="bottom"] [part="tip"] {
       top: 100%;
     }
 
-    [direction$=right] [part=tip] {
+    [direction$="right"] [part="tip"] {
       left: 100%;
     }
 
-    [direction$=left] [part=tip] {
+    [direction$="left"] [part="tip"] {
       right: 100%;
     }
   `,
@@ -123,19 +123,27 @@ class Tooltip extends SuperOpenable {
   protected render(): TemplateResult<1> {
     const align = Tooltip.aligns[this.align] || "inherit";
     const isFocusable = this.type === "focus";
-    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>`;
+    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>
+    `;
   }
 }
 

package/src/components/typewriter.ts

@@ -1,5 +1,5 @@
 import { attr, godown, htmlSlot, random, styles } from "@godown/element";
-import { css, html, type PropertyValueMap, type TemplateResult } from "lit";
+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";
@@ -13,37 +13,35 @@ const cssScope = scopePrefix(protoName);
  * @category effect
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      ${cssScope}--cursor-width: .05em;
-    }
+@styles(css`
+  :host {
+    ${cssScope}--cursor-width: .05em;
+  }
 
-    :host,
-    :host([contents]) [part="root"] {
-      display: inline-block;
-    }
+  :host,
+  :host([contents]) [part="root"] {
+    display: inline-block;
+  }
 
-    i {
-      border-right: var(${cssScope}--cursor-width) solid;
-      margin-left: 0.02em;
-      animation: s 1.5s steps(1) infinite;
-    }
+  i {
+    border-right: var(${cssScope}--cursor-width) solid;
+    margin-left: 0.02em;
+    animation: s 1.5s steps(1) infinite;
+  }
 
-    @keyframes s {
-      0% {
-        border-color: currentColor;
-      }
-      50% {
-        border-color: transparent;
-      }
+  @keyframes s {
+    0% {
+      border-color: currentColor;
     }
-
-    slot {
-      display: none;
+    50% {
+      border-color: transparent;
     }
-  `,
-)
+  }
+
+  slot {
+    display: none;
+  }
+`)
 class Typewriter extends GlobalStyle {
   /**
    * Raw text.
@@ -97,10 +95,18 @@ class Typewriter extends GlobalStyle {
   }
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)}>
-      ${htmlSlot()} ${this.contentInternal}
-      <i part="cursor" ?hidden="${this.ended}"></i>
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${htmlSlot()} ${this.contentInternal}
+        <i
+          part="cursor"
+          ?hidden="${this.ended}"
+        ></i>
+      </div>
+    `;
   }
 
   protected firstUpdated(): void {

package/src/core/global-style.ts

@@ -1,10 +1,9 @@
 import { type Gradients, presetsRGB } from "@godown/colors/presets-rgb.js";
 import { travel } from "@godown/colors/travel.js";
 import { GodownElement, joinProperties, trim } from "@godown/element";
-import { css, type CSSResult, unsafeCSS } from "lit";
+import { type CSSResult, css, unsafeCSS } from "lit";
 
-export class GlobalStyle extends GodownElement {
-}
+export class GlobalStyle extends GodownElement {}
 
 const cssvar = trim(GlobalStyle.godownConfig.prefix, "-");
 
@@ -41,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`
     * {
@@ -92,7 +91,7 @@ GlobalStyle.styles = [
       display: contents;
     }
 
-    :where(:host([contents]) [part=root]) {
+    :where(:host([contents]) [part="root"]) {
       all: inherit;
       display: revert;
     }