godown 3.0.0-canary.9 → 3.0.0

package/src/core/super-anchor.ts

@@ -1,32 +1,30 @@
-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 { css, html, nothing, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
-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;
+    }
 
-  a {
-    width: 100%;
-    display: flex;
-    color: inherit;
-    text-decoration: inherit;
-    justify-content: space-between;
-    align-items: center;
-  }
-`)
+    [part=root] {
+      width: 100%;
+      color: inherit;
+      display: inline-block;
+      text-decoration: inherit;
+    }
+  `,
+)
 class SuperAnchor extends GlobalStyle {
   /**
    * A element href.
@@ -39,14 +37,20 @@ 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="${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;

package/src/core/super-input.ts

@@ -1,49 +1,51 @@
-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 { css, html, type TemplateResult } from "lit";
 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;
-  }
+.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="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`
@@ -76,12 +78,12 @@ input::-ms-clear {
 
 @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,20 +145,21 @@ 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, "compositionend", (e: HandlerEvent<HTMLInputElement>) => {
@@ -166,32 +169,30 @@ 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() {
+  protected _renderPrefix(): TemplateResult<1> {
     return html`<label for=${this.makeId} part="prefix">
-    <i part="space"></i>
     ${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")}"
@@ -200,7 +201,6 @@ class SuperInput extends GlobalStyle {
         >${iconEyeSlashFill()}</i>`
         : htmlSlot("suffix")
     }
-    <i part="space"></i>
   </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,27 @@ 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();
   }
 }

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"}