godown 3.0.0-canary.9 → 3.0.1

package/src/core/super-input.ts

@@ -1,12 +1,9 @@
-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, htmlSlot, part, styles } from "@godown/element";
 import iconEyeSlashFill from "@godown/f7-icon/icons/eye-slash-fill.js";
-import { css, html } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { cssGlobalVars, GlobalStyle } from "./global-style.js";
+import { GlobalStyle, cssGlobalVars } from "./global-style.js";
 
 const fieldStyle = css`
   .input-field {
@@ -22,6 +19,7 @@ const fieldStyle = css`
     height: 100%;
     width: 100%;
     color: inherit;
+    padding: 0 var(${cssGlobalVars.input}-space);
   }
 
   .input-field:focus-within,
@@ -41,47 +39,51 @@ const fieldStyle = css`
     display: flex;
   }
 
-  .input-field [part="space"]{
-    width: 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);
   }
 `;
 
 const inputStyle = css`
-:host {
-  ${cssGlobalVars.input}-width: 10em;
-  ${cssGlobalVars.input}-height: 1.6em;
-  ${cssGlobalVars.input}-space: 0.2em;
-  ${cssGlobalVars.input}-background: var(${cssGlobalVars.background});
-  ${cssGlobalVars.input}-control: var(${cssGlobalVars.foreground});
-  ${cssGlobalVars.input}-control-edge: var(${cssGlobalVars.active});
-  ${cssGlobalVars.input}-radius: 0.2em;
-  ${cssGlobalVars.input}-box-shadow: 0px 0px 0px .1em var(${cssGlobalVars.active});
-  border-radius: var(${cssGlobalVars.input}-radius);
-}
+  :host {
+    ${cssGlobalVars.input}-width: 10em;
+    ${cssGlobalVars.input}-height: 1.6em;
+    ${cssGlobalVars.input}-space: 0.2em;
+    ${cssGlobalVars.input}-background: var(${cssGlobalVars.background});
+    ${cssGlobalVars.input}-control: var(${cssGlobalVars.foreground});
+    ${cssGlobalVars.input}-control-edge: var(${cssGlobalVars.active});
+    ${cssGlobalVars.input}-radius: 0.2em;
+    ${cssGlobalVars.input}-box-shadow: 0px 0px 0px .1em var(${cssGlobalVars.active});
+    border-radius: var(${cssGlobalVars.input}-radius);
+  }
 
-:host([disabled]) {
-  cursor: not-allowed;
-  filter: brightness(0.85);
-}
+  :host([disabled]) {
+    cursor: not-allowed;
+    filter: brightness(0.85);
+  }
 
-input:disabled {
-  cursor: inherit;
-}
+  input:disabled {
+    cursor: inherit;
+  }
 
-input::-ms-reveal,
-input::-ms-clear {
-  display: none;
-}
+  input::-ms-reveal,
+  input::-ms-clear {
+    display: none;
+  }
 `;
 
 @styles(fieldStyle, inputStyle)
 class SuperInput extends GlobalStyle {
-  autofocus: boolean;
+  autofocus = false;
   @property()
   autocomplete: string | boolean;
 
   @property({ type: Boolean, reflect: true })
-  disabled: boolean;
+  disabled = false;
 
   @property({ reflect: true })
   type: InputType;
@@ -107,7 +109,7 @@ class SuperInput extends GlobalStyle {
   /**
    * Returns true when the input is compositing.
    */
-  compositing: boolean;
+  compositing = false;
 
   set defaultValue(value: typeof this.default) {
     this.default = value;
@@ -117,20 +119,20 @@ class SuperInput extends GlobalStyle {
     return this.default;
   }
 
-  protected makeId = Math.random().toString(36).slice(1);
+  protected makeId: string = Math.random().toString(36).slice(1);
 
   namevalue(): [string, any] {
     return [this.name, this.value];
   }
 
-  nameValue = this.namevalue;
+  nameValue: () => [string, any] = this.namevalue;
 
-  reset() {
+  reset(): void {
     this.value = this.default;
     this._input.value = this.default;
   }
 
-  protected _handleInput(e: HandlerEvent<HTMLInputElement>) {
+  protected _handleInput(e: HandlerEvent<HTMLInputElement>): void {
     e.stopPropagation();
     if (this.compositing) {
       return;
@@ -143,22 +145,23 @@ 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 }));
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     super.connectedCallback();
     this._connectedInit();
   }
 
-  protected _connectedInit() {
+  protected _connectedInit(): void {
     this.default ??= this.value || "";
     this.value ??= this.default;
   }
 
-  protected _compositionInit() {
+  protected _compositionInit(): void {
     if (this._input) {
-      this.events.add(this._input, "compositionstart", () => this.compositing = true);
+      this.events.add(this._input, "compositionstart", () => (this.compositing = true));
       this.events.add(this._input, "compositionend", (e: HandlerEvent<HTMLInputElement>) => {
         this.compositing = false;
         this._handleInput(e);
@@ -166,42 +169,52 @@ class SuperInput extends GlobalStyle {
     }
   }
 
-  protected _changeInputType(t: typeof this.type) {
+  protected _changeInputType(t: typeof this.type): void {
     if (this._input) {
       this._input.type = t;
     }
   }
 
-  focus(options?: FocusOptions) {
+  focus(options?: FocusOptions): void {
     this._input?.focus(options);
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(): void {
     this._compositionInit();
   }
 
-  protected _renderPrefix() {
-    return html`<label for=${this.makeId} part="prefix">
-    <i part="space"></i>
-    ${htmlSlot("prefix")}</label>`;
+  protected _renderPrefix(): TemplateResult<1> {
+    return html`
+      <label
+        for=${this.makeId}
+        part="prefix"
+      >
+        ${htmlSlot("prefix")}
+      </label>
+    `;
   }
 
-  protected _renderSuffix() {
+  protected _renderSuffix(): TemplateResult<1> {
     const PASSWORD = "password";
-    return html`<label for=${this.makeId} part="suffix">${
-      this.type === "password"
-        ? html`
-        <i part="space"></i>
-        <i
-          part="icon"
-          @mousedown="${() => this._changeInputType("text")}"
-          @mouseup="${() => this._changeInputType(PASSWORD)}"
-          @mouseleave="${() => this._changeInputType(PASSWORD)}"
-        >${iconEyeSlashFill()}</i>`
-        : htmlSlot("suffix")
-    }
-    <i part="space"></i>
-  </label>`;
+    return html`
+      <label
+        for=${this.makeId}
+        part="suffix"
+      >
+        ${this.type === "password"
+          ? html`
+              <i
+                part="icon"
+                @mousedown="${() => this._changeInputType("text")}"
+                @mouseup="${() => this._changeInputType(PASSWORD)}"
+                @mouseleave="${() => this._changeInputType(PASSWORD)}"
+              >
+                ${iconEyeSlashFill()}
+              </i>
+            `
+          : htmlSlot("suffix")}
+      </label>
+    `;
   }
 }
 

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";
@@ -10,27 +10,26 @@ class SuperOpenable extends GlobalStyle {
   @property({ type: Boolean, reflect: true })
   open = false;
 
-  toggle(to = !this.open) {
+  toggle(to: boolean = !this.open satisfies boolean): void {
     this.open = to;
   }
 
-  close() {
+  close(): void {
     this.open = false;
   }
 
-  show() {
+  show(): void {
     this.open = true;
   }
 
-  protected updated(changedProperties: PropertyValueMap<this>) {
+  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 }));
     }
   }
 
-  // eslint-disable-next-line
-  protected _handelClick(_: MouseEvent) {
+  protected _handelClick(_: MouseEvent): void {
     this.toggle();
   }
 }
@@ -41,11 +40,6 @@ export type Direction4 = "left" | "right" | "top" | "bottom";
 
 export type Direction5 = Direction4 | "center";
 
-export type Direction8 =
-  | Direction4
-  | "top-left"
-  | "top-right"
-  | "bottom-left"
-  | "bottom-right";
+export type Direction8 = Direction4 | "top-left" | "top-right" | "bottom-left" | "bottom-right";
 
 export type Direction9 = Direction8 | Direction5;

package/src/details.ts

@@ -4,6 +4,8 @@ Details.define();
 
 export default Details;
 
+export * from "./components/details.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-details": Details;

package/src/dialog.ts

@@ -4,6 +4,8 @@ Dialog.define();
 
 export default Dialog;
 
+export * from "./components/dialog.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-dialog": Dialog;

package/src/divider.ts

@@ -4,6 +4,8 @@ Divider.define();
 
 export default Divider;
 
+export * from "./components/divider.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-divider": Divider;

package/src/dragbox.ts

@@ -4,6 +4,8 @@ Dragbox.define();
 
 export default Dragbox;
 
+export * from "./components/dragbox.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-dragbox": Dragbox;

package/src/flex.ts

@@ -4,6 +4,8 @@ Flex.define();
 
 export default Flex;
 
+export * from "./components/flex.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-flex": Flex;

package/src/form.ts

@@ -4,6 +4,8 @@ Form.define();
 
 export default Form;
 
+export * from "./components/form.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-form": Form;

package/src/grid.ts

@@ -4,6 +4,8 @@ Grid.define();
 
 export default Grid;
 
+export * from "./components/grid.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-grid": Grid;

package/src/heading.ts

@@ -0,0 +1,13 @@
+import Heading from "./components/heading.js";
+
+Heading.define();
+
+export default Heading;
+
+export * from "./components/heading.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-heading": Heading;
+  }
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 export { default as Alert } from "./alert.js";
 export { default as Avatar } from "./avatar.js";
+export { default as Badge } from "./badge.js";
 export { default as Breath } from "./breath.js";
 export { default as Button } from "./button.js";
 export { default as Card } from "./card.js";
@@ -11,6 +12,7 @@ export { default as Dragbox } from "./dragbox.js";
 export { default as Flex } from "./flex.js";
 export { default as Form } from "./form.js";
 export { default as Grid } from "./grid.js";
+export { default as Heading } from "./heading.js";
 export { default as Input } from "./input.js";
 export { default as Layout } from "./layout.js";
 export { default as Link } from "./link.js";

package/src/layout.ts

@@ -5,6 +5,7 @@ Layout.define();
 export default Layout;
 
 export * from "./components/layout.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-layout": Layout;

package/src/progress.ts

@@ -5,6 +5,7 @@ Progress.define();
 export default Progress;
 
 export * from "./components/progress.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-progress": Progress;

package/src/router.ts

@@ -5,6 +5,7 @@ Router.define();
 export default Router;
 
 export * from "./components/router.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-router": Router;

package/src/split.ts

@@ -8,6 +8,6 @@ export * from "./components/split.js";
 
 declare global {
   interface HTMLElementTagNameMap {
-    "godown-split-input": Split;
+    "godown-split": Split;
   }
 }

package/src/typewriter.ts

@@ -4,6 +4,8 @@ Typewriter.define();
 
 export default Typewriter;
 
+export * from "./components/typewriter.js";
+
 declare global {
   interface HTMLElementTagNameMap {
     "godown-typewriter": Typewriter;

package/switch.js

@@ -1,6 +1,2 @@
-import Switch from './components/switch.js';
-
-Switch.define();
-
-export { Switch 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":[],"mappings":";;AAEA,MAAM,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"switch.js","sources":["src/switch.ts"],"sourcesContent":null,"names":["Switch","define"],"mappings":"iFAEAA,EAAOC"}

package/text.js

@@ -1,6 +1,2 @@
-import Text from './components/text.js';
-
-Text.define();
-
-export { Text 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":[],"mappings":";;AAEA,IAAI,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"text.js","sources":["src/text.ts"],"sourcesContent":null,"names":["Text","define"],"mappings":"2EAEAA,EAAKC"}

package/time.js

@@ -1,6 +1,2 @@
-import Time from './components/time.js';
-
-Time.define();
-
-export { Time 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":[],"mappings":";;AAEA,IAAI,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"time.js","sources":["src/time.ts"],"sourcesContent":null,"names":["Time","define"],"mappings":"2EAEAA,EAAKC"}

package/tooltip.js

@@ -1,6 +1,2 @@
-import Tooltip from './components/tooltip.js';
-
-Tooltip.define();
-
-export { Tooltip 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":[],"mappings":";;AAEA,OAAO,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"tooltip.js","sources":["src/tooltip.ts"],"sourcesContent":null,"names":["Tooltip","define"],"mappings":"oFAEAA,EAAQC"}

package/typewriter.d.ts

@@ -1,5 +1,6 @@
 import Typewriter from "./components/typewriter.js";
 export default Typewriter;
+export * from "./components/typewriter.js";
 declare global {
     interface HTMLElementTagNameMap {
         "godown-typewriter": Typewriter;

package/typewriter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typewriter.d.ts","sourceRoot":"","sources":["src/typewriter.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAIpD,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,UAAU,CAAC;KACjC;CACF"}
+{"version":3,"file":"typewriter.d.ts","sourceRoot":"","sources":["src/typewriter.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAIpD,eAAe,UAAU,CAAC;AAE1B,cAAc,4BAA4B,CAAC;AAE3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,UAAU,CAAC;KACjC;CACF"}

package/typewriter.js

@@ -1,6 +1,2 @@
-import Typewriter from './components/typewriter.js';
-
-Typewriter.define();
-
-export { Typewriter 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":[],"mappings":";;AAEA,UAAU,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"typewriter.js","sources":["src/typewriter.ts"],"sourcesContent":null,"names":["Typewriter","define"],"mappings":"6FAEAA,EAAWC"}