godown 3.0.0-canary.14 → 3.0.0-canary.16

package/src/components/select.ts

@@ -1,4 +1,4 @@
-import { HandlerEvent } from "@godown/element";
+import type { HandlerEvent } from "@godown/element";
 import { godown } from "@godown/element/decorators/godown.js";
 import { part } from "@godown/element/decorators/part.js";
 import { styles } from "@godown/element/decorators/styles.js";
@@ -45,6 +45,9 @@ const protoName = "select";
  *
  * Input will filter the element.
  *
+ * @fires input - Fires when the input value changes.
+ * @fires change - Fires when the input value changes.
+ * @fires select - Fires when select an option.
  * @slot - Options.
  * @category input
  */
@@ -105,34 +108,36 @@ class Select extends Input {
   private _store: { value: string; text: string; }[] = [];
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${
+    return html`<div
+      part="root"
+      ${
       attr({
         ...this.observedRecord,
         direction: this.direction || this.autoDirection,
       })
-    } class="input-field"> 
-    ${[
+    }
+      class="input-field"
+    >
+      ${[
       this._renderPrefix(),
       html`<input
-        part="input"
-        dir="${ifDefined(this.dir)}"
-        id="${this.makeId}"
-        .value="${this.text}"
-        type="${this.type}"
-        placeholder="${this.placeholder || nothing}"
-        ?autofocus="${this.autofocus}"
-        autocapitalize="${this.autocapitalize || nothing}"
-        autocomplete="${this.autocomplete || nothing}"
-        ?disabled="${this.disabled}"
-        @focus="${this._handleFocus}"
-        @input="${this._handleInput}"
-      >`,
+          part="input"
+          dir="${ifDefined(this.dir)}"
+          id="${this.makeId}"
+          .value="${this.text}"
+          type="${this.type}"
+          placeholder="${this.placeholder || nothing}"
+          ?autofocus="${this.autofocus}"
+          autocapitalize="${this.autocapitalize || nothing}"
+          autocomplete="${this.autocomplete || nothing}"
+          ?disabled="${this.disabled}"
+          @focus="${this._handleFocus}"
+          @input="${this._handleInput}"
+        >`,
       html`<label for="${this.makeId}" part="suffix">
-        <i part="icon">${svgCaretDown()}</i>
-      </label>`,
-      html`<label for="${this.makeId}" part="content">
-        ${htmlSlot()}
-      </label>`,
+          <i part="icon">${svgCaretDown()}</i>
+        </label>`,
+      html`<label for="${this.makeId}" part="content"> ${htmlSlot()} </label>`,
     ]}
     </div>`;
   }
@@ -227,7 +232,7 @@ class Select extends Input {
         operation = 1;
       }
     }
-    this.dispatchEvent(new CustomEvent("change", { detail: this.namevalue() }));
+    this.dispatchEvent(new CustomEvent("select", { detail: this.value, composed: true }));
     this.filter();
     return operation;
   }
@@ -257,7 +262,8 @@ class Select extends Input {
     }
     const s = this._input.value;
     this.filter(this.multiple ? betweenAt(this._input.selectionStart, s, ",") : s);
-    this.dispatchEvent(new CustomEvent("input", { detail: this.namevalue() }));
+    this.dispatchEvent(new CustomEvent("input", { detail: this.value, composed: true, bubbles: true }));
+    this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
   }
 
   focus(options?: FocusOptions): void {
@@ -277,3 +283,4 @@ class Select extends Input {
 }
 
 export default Select;
+export { Select };

package/src/components/skeleton.ts

@@ -111,9 +111,11 @@ class Skeleton extends GlobalStyle {
       return htmlSlot();
     }
     return html`<div part="root" ${attr(this.observedRecord)}>
-    ${this.type === "image" ? iconPhoto() : ""}
-    ${htmlSlot("loading")}</div>`;
+      ${this.type === "image" ? iconPhoto() : ""}
+      ${htmlSlot("loading")}
+    </div>`;
   }
 }
 
 export default Skeleton;
+export { Skeleton };

package/src/components/split.ts

@@ -2,7 +2,7 @@ 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 type { HandlerEvent } from "@godown/element/element.js";
 import { css, html, nothing, type TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
 
@@ -27,6 +27,10 @@ const loop = <T>(len: number, fn: (index?: number) => T) => {
  *
  * Delete: will move the focus box forward until the first and no inputs for each.
  *
+ * @fires input - Fires when the input value changes.
+ * @fires change - Fires when the input value changes.
+ * @fires focus - Fires when the input is focused.
+ * @fires blur - Fires when the input is blurred.
  * @category input
  */
 @godown(protoName)
@@ -99,12 +103,17 @@ class Split extends SuperInput {
 
   protected render(): TemplateResult<1> {
     return html`<div part="root" ${attr(this.observedRecord)}>
-    ${
-      loop(this.len, (index: number) =>
-        html`<span part="input-box"
-          @click="${this.disabled ? null : () => this.focusAt(index)}"
-          class="${classList({ focus: this.current === index }) || nothing}"
-        >${this.currentValue[index]}</span>`)
+      ${
+      loop(
+        this.len,
+        (index: number) =>
+          html`<span
+            part="input-box"
+            @click="${this.disabled ? null : () => this.focusAt(index)}"
+            class="${classList({ focus: this.current === index }) || nothing}"
+            >${this.currentValue[index]}</span
+          >`,
+      )
     }
       <input
         part="input"
@@ -115,8 +124,7 @@ class Split extends SuperInput {
       /* Ensure that input always has a value of length this.len */
       this.value.padStart(this.len, " ")}"
       >
-    </div>
-    `;
+    </div> `;
   }
 
   connectedCallback(): void {
@@ -133,8 +141,7 @@ class Split extends SuperInput {
     this.fillInput(e.data);
     this.value = this.currentValue.join("");
 
-    this.dispatchEvent(new CustomEvent("input", { detail: this.value, bubbles: true, composed: true }));
-    this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
+    this.dispatchEvent(new CustomEvent("input", { detail: this.value, composed: true, bubbles: true }));
   }
 
   /**
@@ -204,12 +211,14 @@ class Split extends SuperInput {
   focusAt(i: number): void {
     this.current = i;
     this._input.focus();
+    this.dispatchEvent(new CustomEvent("focus", { detail: i, bubbles: true, composed: true }));
   }
 
   blur(): void {
     this._input.blur();
     this.current = -1;
     super.blur();
+    this.dispatchEvent(new CustomEvent("blur", { bubbles: true, composed: true }));
   }
 
   reset(): void {

package/src/components/switch.ts

@@ -16,6 +16,7 @@ const cssScope = scopePrefix(protoName);
  * The switch is rectangular by default,
  * set the round property to rounded switch.
  *
+ * @fires change - Fires when the switch is switched.
  * @category input
  */
 @godown(protoName)
@@ -40,7 +41,7 @@ const cssScope = scopePrefix(protoName);
     }
 
     [part=root],
-    span {
+    [part=handle] {
       transition: var(${cssScope}-transition);
     }
 
@@ -50,14 +51,14 @@ const cssScope = scopePrefix(protoName);
       height: inherit;
     }
     
-    input {
+    [part=input] {
       opacity: 0;
       width: 100%;
       height: 100%;
       appearance: none;
     }
 
-    span {
+    [part=handle] {
       height: 100%;
       display: inline-flex;
       align-items: center;
@@ -74,7 +75,7 @@ const cssScope = scopePrefix(protoName);
       background: var(${cssGlobalVars.passive});
     }
 
-    :host([checked]) span {
+    :host([checked]) [part=handle] {
       left: 50%;
     }
 
@@ -86,7 +87,7 @@ const cssScope = scopePrefix(protoName);
       background: var(${cssGlobalVars.passive});
     }
 
-    .round span{
+    .round [part=handle] {
       --size: var(${cssScope}-handle-size);
       border-radius: 100%;
       background: var(--godown--input-control);
@@ -135,10 +136,7 @@ class Switch extends SuperInput {
   protected _input: HTMLInputElement;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root"
-      ${attr(this.observedRecord)}
-      class="${this.round ? "round" : "rect"}"
-    >
+    return html`<div part="root" ${attr(this.observedRecord)} class="${this.round ? "round" : "rect"}">
       <input
         part="input"
         @change="${this._handleChange}"
@@ -169,7 +167,6 @@ class Switch extends SuperInput {
 
   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 }));
   }
 
@@ -179,3 +176,4 @@ class Switch extends SuperInput {
 }
 
 export default Switch;
+export { Switch };

package/src/components/text.ts

@@ -18,7 +18,8 @@ const cssScope = scopePrefix(protoName);
  * @category display
  */
 @godown(protoName)
-@styles(css`
+@styles(
+  css`
     :host {
       ${cssScope}--color: currentColor;
       ${cssScope}--color-hover: currentColor;
@@ -65,7 +66,8 @@ const cssScope = scopePrefix(protoName);
       background-clip: text;
       -webkit-background-clip: text;
     }
-`)
+  `,
+)
 class Text extends GlobalStyle {
   /**
    * Underline behavior.
@@ -80,14 +82,11 @@ class Text extends GlobalStyle {
   clip = false;
 
   protected render(): TemplateResult<1> {
-    return html`<span
-      part="root"
-      ${attr(this.observedRecord)}
-      class="${classList(this.underline)}"
-    >
+    return html`<span part="root" ${attr(this.observedRecord)} class="${classList(this.underline)}">
       ${htmlSlot()}
     </span>`;
   }
 }
 
 export default Text;
+export { Text };

package/src/components/time.ts

@@ -2,7 +2,7 @@ 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, html, type PropertyValues, TemplateResult } from "lit";
+import { css, html, type PropertyValues, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -12,6 +12,7 @@ const protoName = "time";
 /**
  * {@linkcode Time} renders a formatting time.
  *
+ * @fires time - Fires when the time changes.
  * @category display
  */
 @godown(protoName)
@@ -50,9 +51,7 @@ 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 {
@@ -76,9 +75,11 @@ class Time extends GlobalStyle {
 
   startTimeout(): number {
     return window.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

@@ -126,25 +126,21 @@ class Tooltip extends SuperOpenable {
   protected render(): TemplateResult<1> {
     const align = Tooltip.aligns[this.align] || "inherit";
     const isFocusable = this.type === "focus";
-    return html`<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}">
+      @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 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

@@ -4,7 +4,7 @@ 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, TemplateResult } from "lit";
+import { css, html, type PropertyValueMap, type TemplateResult } from "lit";
 import { property, query, state } from "lit/decorators.js";
 
 import { GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -18,7 +18,8 @@ const cssScope = scopePrefix(protoName);
  * @category effect
  */
 @godown(protoName)
-@styles(css`
+@styles(
+  css`
     :host {
       ${cssScope}--cursor-width: .05em;
     }
@@ -50,7 +51,8 @@ const cssScope = scopePrefix(protoName);
     .hidden {
       visibility: hidden;
     }
-  `)
+  `,
+)
 class Typewriter extends GlobalStyle {
   /**
    * Raw text.
@@ -157,3 +159,4 @@ class Typewriter extends GlobalStyle {
 }
 
 export default Typewriter;
+export { Typewriter };

package/src/core/global-style.ts

@@ -1,12 +1,9 @@
 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";
-
-GodownElement.godownConfig ||= new GodownConfig();
+import { css, type CSSResult, unsafeCSS } from "lit";
 
 export class GlobalStyle extends GodownElement {
 }
@@ -18,7 +15,7 @@ export function scopePrefix(scope: string, len = 1): CSSResult {
 }
 
 export function variablePrefix(variable: string): CSSResult {
-  return unsafeCSS("--" + variable);
+  return unsafeCSS(`--${variable}`);
 }
 
 export const cssGlobalVars: {
@@ -101,5 +98,5 @@ GlobalStyle.styles = [
       all: inherit;
       display: revert;
     }
-`,
+  `,
 ];

package/src/core/super-anchor.ts

@@ -7,25 +7,27 @@ import { ifDefined } from "lit/directives/if-defined.js";
 
 import { GlobalStyle } from "./global-style.js";
 
-@styles(css`
-  :host {
-    display: inline-block;
-    color: currentColor;
-    text-decoration: none;
-    cursor: default;
-  }
+@styles(
+  css`
+    :host {
+      display: inline-block;
+      color: currentColor;
+      text-decoration: none;
+      cursor: default;
+    }
 
-  :host([href]) {
-    cursor: pointer;
-  }
+    :host([href]) {
+      cursor: pointer;
+    }
 
-  [part=root] {
-    width: 100%;
-    color: inherit;
-    display: inline-block;
-    text-decoration: inherit;
-  }
-`)
+    [part=root] {
+      width: 100%;
+      color: inherit;
+      display: inline-block;
+      text-decoration: inherit;
+    }
+  `,
+)
 class SuperAnchor extends GlobalStyle {
   /**
    * A element href.
@@ -39,11 +41,13 @@ class SuperAnchor extends GlobalStyle {
   target: "_blank" | "_self" | "_parent" | "_top" = "_self";
 
   protected render(): TemplateResult<1> {
-    return html`<a part="root"
+    return html`<a
+      part="root"
       ${attr(this.observedRecord)}
       href="${ifDefined(this.href)}"
       target="${this.target}"
-      @click=${this._handleClick}>
+      @click=${this._handleClick}
+    >
       ${htmlSlot()}
     </a>`;
   }

package/src/core/super-input.ts

@@ -1,7 +1,7 @@
 import { part } from "@godown/element/decorators/part.js";
 import { styles } from "@godown/element/decorators/styles.js";
 import { htmlSlot } from "@godown/element/directives/index.js";
-import { type HandlerEvent } from "@godown/element/element.js";
+import type { HandlerEvent } from "@godown/element/element.js";
 import iconEyeSlashFill from "@godown/f7-icon/icons/eye-slash-fill.js";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
@@ -9,46 +9,46 @@ import { property } from "lit/decorators.js";
 import { cssGlobalVars, GlobalStyle } from "./global-style.js";
 
 const fieldStyle = css`
-  .input-field {
-    display: flex;
-    position: relative;
-    align-items: center;
-    border-radius: inherit;
-    height: inherit;
-  }
+.input-field {
+  display: flex;
+  position: relative;
+  align-items: center;
+  border-radius: inherit;
+  height: inherit;
+}
 
-  .input-field [part=input] {
-    background: transparent;
-    height: 100%;
-    width: 100%;
-    color: inherit;
-    padding: 0 var(${cssGlobalVars.input}-space);
-  }
+.input-field [part=input] {
+  background: transparent;
+  height: 100%;
+  width: 100%;
+  color: inherit;
+  padding: 0 var(${cssGlobalVars.input}-space);
+}
 
-  .input-field:focus-within,
-  .input-field.outline {
-    box-shadow: var(${cssGlobalVars.input}-box-shadow);
-  }
+.input-field:focus-within,
+.input-field.outline {
+  box-shadow: var(${cssGlobalVars.input}-box-shadow);
+}
 
-  .input-field [part=icon] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+.input-field [part=icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  .input-field [part=prefix],
-  .input-field [part=suffix] {
-    height: 100%;
-    display: flex;
-  }
+.input-field [part=prefix],
+.input-field [part=suffix] {
+  height: 100%;
+  display: flex;
+}
 
-  .input-field [part=suffix] [part=icon] {
-    padding-inline-end: var(${cssGlobalVars.input}-space);
-  }
+.input-field [part=suffix] [part=icon] {
+  padding-inline-end: var(${cssGlobalVars.input}-space);
+}
 
-  .input-field [part=prefix] [part=icon] {
-    padding-inline-start: var(${cssGlobalVars.input}-space);
-  }
+.input-field [part=prefix] [part=icon] {
+  padding-inline-start: var(${cssGlobalVars.input}-space);
+}
 `;
 
 const inputStyle = css`
@@ -148,6 +148,7 @@ class SuperInput extends GlobalStyle {
         composed: true,
       }),
     );
+    this.dispatchEvent(new CustomEvent("input", { detail: this.value, composed: true, bubbles: true }));
     this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
   }
 

package/src/core/super-openable.ts

@@ -1,4 +1,4 @@
-import { type PropertyValueMap } from "lit";
+import type { PropertyValueMap } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "./global-style.js";
@@ -25,7 +25,7 @@ class SuperOpenable extends GlobalStyle {
   protected updated(changedProperties: PropertyValueMap<this>): void {
     const open = changedProperties.get("open");
     if (open !== undefined) {
-      this.dispatchEvent(new CustomEvent("change", { detail: this.open }));
+      this.dispatchEvent(new CustomEvent("change", { detail: this.open, composed: true }));
     }
   }
 

package/switch.js

@@ -1,2 +1,2 @@
-import e from"./components/switch.js";e.define();export{e as default};
+import o from"./components/switch.js";export{Switch}from"./components/switch.js";o.define();export{o as default};
 //# sourceMappingURL=switch.js.map

package/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["src/switch.ts"],"sourcesContent":null,"names":["Switch","define"],"mappings":"sCAEAA,EAAOC"}
+{"version":3,"file":"switch.js","sources":["src/switch.ts"],"sourcesContent":null,"names":["Switch","define"],"mappings":"iFAEAA,EAAOC"}

package/text.js

@@ -1,2 +1,2 @@
-import e from"./components/text.js";e.define();export{e as default};
+import t from"./components/text.js";export{Text}from"./components/text.js";t.define();export{t as default};
 //# sourceMappingURL=text.js.map

package/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["src/text.ts"],"sourcesContent":null,"names":["Text","define"],"mappings":"oCAEAA,EAAKC"}
+{"version":3,"file":"text.js","sources":["src/text.ts"],"sourcesContent":null,"names":["Text","define"],"mappings":"2EAEAA,EAAKC"}

package/time.js

@@ -1,2 +1,2 @@
-import e from"./components/time.js";e.define();export{e as default};
+import e from"./components/time.js";export{Time}from"./components/time.js";e.define();export{e as default};
 //# sourceMappingURL=time.js.map

package/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","sources":["src/time.ts"],"sourcesContent":null,"names":["Time","define"],"mappings":"oCAEAA,EAAKC"}
+{"version":3,"file":"time.js","sources":["src/time.ts"],"sourcesContent":null,"names":["Time","define"],"mappings":"2EAEAA,EAAKC"}

package/tooltip.js

@@ -1,2 +1,2 @@
-import o from"./components/tooltip.js";o.define();export{o as default};
+import o from"./components/tooltip.js";export{Tooltip}from"./components/tooltip.js";o.define();export{o as default};
 //# sourceMappingURL=tooltip.js.map

package/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["src/tooltip.ts"],"sourcesContent":null,"names":["Tooltip","define"],"mappings":"uCAEAA,EAAQC"}
+{"version":3,"file":"tooltip.js","sources":["src/tooltip.ts"],"sourcesContent":null,"names":["Tooltip","define"],"mappings":"oFAEAA,EAAQC"}

package/typewriter.js

@@ -1,2 +1,2 @@
-import e from"./components/typewriter.js";e.define();export{e as default};
+import e from"./components/typewriter.js";export{Typewriter}from"./components/typewriter.js";e.define();export{e as default};
 //# sourceMappingURL=typewriter.js.map

package/typewriter.js.map

@@ -1 +1 @@
-{"version":3,"file":"typewriter.js","sources":["src/typewriter.ts"],"sourcesContent":null,"names":["Typewriter","define"],"mappings":"0CAEAA,EAAWC"}
+{"version":3,"file":"typewriter.js","sources":["src/typewriter.ts"],"sourcesContent":null,"names":["Typewriter","define"],"mappings":"6FAEAA,EAAWC"}