godown 3.0.0-canary.8 → 3.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "godown",
-  "version": "3.0.0-canary.8",
-  "description": "Simple, stylized, semantic web components",
+  "version": "3.0.0",
+  "description": "Non Composite Web Components Library",
   "type": "module",
   "main": "index.js",
   "exports": {
@@ -13,6 +13,8 @@
       "development": "./dev/*",
       "default": "./*"
     },
+    "./build/*": "./build/*",
+    "./src/*": "./src/*",
     "./*.json": "./*.json"
   },
   "repository": {
@@ -20,16 +22,19 @@
     "url": "https://github.com/startracex/godown.git",
     "directory": "packages/godown"
   },
-  "keywords": [],
+  "keywords": [
+    "web-components",
+    "custom-elements"
+  ],
   "author": "startracex",
   "license": "MIT",
   "dependencies": {
     "fmtime": "^0.0.3",
     "lit": "^3.0.0",
     "tslib": "^2.7.0",
-    "@godown/colors": "^0.0.1",
-    "@godown/element": "^0.0.3",
-    "@godown/f7-icon": "^0.0.3"
+    "@godown/colors": "^1.0.0",
+    "@godown/element": "^1.0.0",
+    "@godown/f7-icon": "^1.0.0"
   },
   "publishConfig": {
     "access": "public"

package/progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["src/progress.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAIhD,eAAe,QAAQ,CAAC;AAExB,cAAc,0BAA0B,CAAC;AACzC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,QAAQ,CAAC;KAC7B;CACF"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["src/progress.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAIhD,eAAe,QAAQ,CAAC;AAExB,cAAc,0BAA0B,CAAC;AAEzC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,QAAQ,CAAC;KAC7B;CACF"}

package/progress.js

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

package/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","sources":["src/progress.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,QAAQ,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"progress.js","sources":["src/progress.ts"],"sourcesContent":null,"names":["Progress","define"],"mappings":"uFAEAA,EAASC"}

package/range.js

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

package/range.js.map

@@ -1 +1 @@
-{"version":3,"file":"range.js","sources":["src/range.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,KAAK,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"range.js","sources":["src/range.ts"],"sourcesContent":null,"names":["Range","define"],"mappings":"8EAEAA,EAAMC"}

package/rotate.js

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

package/rotate.js.map

@@ -1 +1 @@
-{"version":3,"file":"rotate.js","sources":["src/rotate.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,MAAM,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"rotate.js","sources":["src/rotate.ts"],"sourcesContent":null,"names":["Rotate","define"],"mappings":"iFAEAA,EAAOC"}

package/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["src/router.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,cAAc,wBAAwB,CAAC;AACvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["src/router.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAI5C,eAAe,MAAM,CAAC;AAEtB,cAAc,wBAAwB,CAAC;AAEvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,MAAM,CAAC;KACzB;CACF"}

package/router.js

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

package/router.js.map

@@ -1 +1 @@
-{"version":3,"file":"router.js","sources":["src/router.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,MAAM,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"router.js","sources":["src/router.ts"],"sourcesContent":null,"names":["Router","define"],"mappings":"iFAEAA,EAAOC"}

package/select.js

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

package/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["src/select.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,MAAM,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"select.js","sources":["src/select.ts"],"sourcesContent":null,"names":["Select","define"],"mappings":"iFAEAA,EAAOC"}

package/skeleton.js

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

package/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["src/skeleton.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,QAAQ,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"skeleton.js","sources":["src/skeleton.ts"],"sourcesContent":null,"names":["Skeleton","define"],"mappings":"uFAEAA,EAASC"}

package/split.d.ts

@@ -3,7 +3,7 @@ export default Split;
 export * from "./components/split.js";
 declare global {
     interface HTMLElementTagNameMap {
-        "godown-split-input": Split;
+        "godown-split": Split;
     }
 }
 //# sourceMappingURL=split.d.ts.map

package/split.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["src/split.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAI1C,eAAe,KAAK,CAAC;AAErB,cAAc,uBAAuB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,KAAK,CAAC;KAC7B;CACF"}
+{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["src/split.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAI1C,eAAe,KAAK,CAAC;AAErB,cAAc,uBAAuB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,KAAK,CAAC;KACvB;CACF"}

package/split.js

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

package/split.js.map

@@ -1 +1 @@
-{"version":3,"file":"split.js","sources":["src/split.ts"],"sourcesContent":null,"names":[],"mappings":";;AAEA,KAAK,CAAC,MAAM,EAAE;;;;"}
+{"version":3,"file":"split.js","sources":["src/split.ts"],"sourcesContent":null,"names":["Split","define"],"mappings":"8EAEAA,EAAMC"}

package/src/alert.ts

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

package/src/avatar.ts

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

package/src/badge.ts

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

package/src/button.ts

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

package/src/card.ts

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

package/src/carousel.ts

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

package/src/components/alert.ts

@@ -1,8 +1,4 @@
-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 { htmlStyle } from "@godown/element/directives/html-style.js";
-import { constructCSSObject, toVar } from "@godown/element/tools/css.js";
+import { attr, constructCSSObject, godown, htmlSlot, htmlStyle, styles, toVar } from "@godown/element";
 import iconCheckAltCircle from "@godown/f7-icon/icons/checkmark-alt-circle.js";
 import iconExclamationCircle from "@godown/f7-icon/icons/exclamationmark-circle.js";
 import iconInfoCircle from "@godown/f7-icon/icons/info-circle.js";
@@ -11,7 +7,7 @@ import iconQuestionCircle from "@godown/f7-icon/icons/question-circle.js";
 import iconSlashCircle from "@godown/f7-icon/icons/slash-circle.js";
 import iconXmark from "@godown/f7-icon/icons/xmark.js";
 import iconXmarkCircle from "@godown/f7-icon/icons/xmark-circle.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -40,7 +36,7 @@ const darkStyles = constructCSSObject(
     white: [cssGlobalVars._colors.lightgray[2], cssGlobalVars._colors.darkgray[7]],
     black: [cssGlobalVars._colors.darkgray[8], cssGlobalVars._colors.lightgray[5]],
   },
-  () => `:host`,
+  () => ":host",
   (prop) => toVar(prop),
 );
 
@@ -63,7 +59,7 @@ const lightStyles = constructCSSObject(
     white: [cssGlobalVars._colors.lightgray[0], cssGlobalVars._colors.darkgray[0]],
     black: [cssGlobalVars._colors.darkgray[7], cssGlobalVars._colors.lightgray[3]],
   },
-  () => `:host`,
+  () => ":host",
   (prop) => toVar(prop),
 );
 
@@ -110,12 +106,14 @@ const calls = {
  * @slot - Alert content.
  * @slot title - Alert title.
  * @slot icon - Alert icon.
+ * @fires close - Fires when the alert is closed.
  * @category feedback
  */
 @godown(protoName)
 @styles(
   css`
-    :host {
+    :host,
+    :where(:host([contents]) [part=root]) {
       border-radius: var(${cssScope}--border-radius);
       ${cssScope}--border-radius: .25em;
       ${cssScope}--border-width: .075em;
@@ -125,7 +123,7 @@ const calls = {
       width: 100%;
     }
 
-    [part="root"] {
+    [part=root] {
       --color: var(${cssScope}--color);
       color: var(--color);
       width: 100%;
@@ -138,7 +136,7 @@ const calls = {
       background: var(${cssScope}--background);
     }
 
-    [variant="blockquote"] {
+    [variant=blockquote] {
       border-radius: 0;
       border-left: var(${cssScope}--blockquote-width) solid var(--color);
       border-bottom: none;
@@ -147,34 +145,34 @@ const calls = {
       background: transparent;
     }
 
-    [part="content"]{
+    [part=content] {
       color: var(--color);
     }
 
-    [part="root"] {
+    [part=root] {
       display: grid;
       align-items: center;
       grid-template-columns: auto 1fr auto;
       grid-template-rows: auto 1fr;
     }
 
-    [part="title"] {
+    [part=title] {
       line-height: 2em;
     }
 
-    [part="icon"] {
+    [part=icon] {
       display: inline-grid;
       align-items: center;
       height: 2em;
     }
 
-    [part="icon"] svg {
+    [part=icon] svg {
       margin-right: .5em;
       width: 1.25em;
       height: 1.25em;
     }
 
-    [part="content"] {
+    [part=content] {
       grid-row: span 2 / span 2;
       line-height: 1.5em;
     }
@@ -240,32 +238,30 @@ class Alert extends GlobalStyle {
   @property()
   variant: "blockquote" | "dark" | "light" = "dark";
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     const color = calls[this.call]?.color || this.color;
     const icon = this.call ? calls[this.call].icon() : htmlSlot("icon");
-    return [
-      html`<div part="root" variant="${this.variant}">
+    return html`<div part="root" ${attr(this.observedRecord)}>
       <div part="icon">${icon}</div>
       <div part="content">
         <strong part="title">${this.title || htmlSlot("title")}</strong>
         ${this.content || htmlSlot()}
       </div>
       ${
-        !this.hideClose && this.variant !== "blockquote"
-          ? html`<div part="close" tabindex=0 @click="${this.close}">${iconXmark()}</div>`
-          : ""
-      }
-    </div>`,
-      htmlStyle(this.variant === "light" ? lightStyles[color] : darkStyles[color]),
-    ];
+      !this.hideClose && this.variant !== "blockquote"
+        ? html`<div part="close" tabindex="0" @click="${this.close}">${iconXmark()}</div>`
+        : ""
+    }
+      ${htmlStyle(this.variant === "light" ? lightStyles[color] : darkStyles[color])}
+    </div>`;
   }
 
-  close() {
+  close(): void {
     this.remove();
     this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(): void {
     if (this.autoclose) {
       setTimeout(() => this.close(), this.autoclose);
     }
@@ -280,3 +276,4 @@ class Alert extends GlobalStyle {
 }
 
 export default Alert;
+export { Alert };

package/src/components/avatar.ts

@@ -1,6 +1,5 @@
-import { godown, styles } from "@godown/element/decorators/index.js";
-import { htmlSlot } from "@godown/element/directives/index.js";
-import { css, html } from "lit";
+import { attr, godown, htmlSlot, omit, styles } from "@godown/element";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -14,6 +13,7 @@ const cssScope = scopePrefix(protoName);
  * Renders as an image if it has a src property,
  * otherwise falls back to name or nameless slot.
  *
+ * @slot - Display content if no `src` or `name` provided.
  * @category display
  */
 @godown(protoName)
@@ -23,30 +23,36 @@ const cssScope = scopePrefix(protoName);
       ${cssScope}--size: 2em;
       width: var(${cssScope}--size);
       height: var(${cssScope}--size);
-      display: inline-block;
       vertical-align: bottom;
     }
 
-    :host([round]){
+    :host,
+    [part=root] {
+      display: inline-flex;
+    }
+
+    :host([contents]) [part=root] {
+      display: inline-flex;
+      width: inherit;
+      height: inherit;
+    }
+
+    :host([round]) {
       border-radius:50%;
     }
 
-    [part="image"] {
+    [part=image] {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
 
-    [part="root"] {
+    [part=root] {
       overflow: hidden;
       position: relative;
       border-radius: inherit;
       width: 100%;
       height: 100%;
-    }
-
-    [part="root"] {
-      display: flex;
       align-items: center;
       justify-content: center;
     }
@@ -58,22 +64,26 @@ class Avatar extends GlobalStyle {
    */
   @property()
   src: string | undefined | null;
+
   /**
-   * If the image is not available, the {@linkcode Avatar.format} will be displayed.
+   * If the image is not available, display name (call {@linkcode Avatar.format}).
    */
   @property()
   name = "";
 
+  /**
+   * Display rounded.
+   */
   @property({ type: Boolean })
   round = false;
 
-  protected render() {
-    return html`<div part="root">${this._renderAvatar()}</div>`;
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(omit(this.observedRecord, "src"))}>${this._renderAvatar()}</div>`;
   }
 
   private _renderAvatar() {
     if (this.src) {
-      return html`<img part="image" src="${this.src}" @error=${this._handleError} alt="${this.name}">`;
+      return html`<img part="image" src="${this.src}" @error=${this._handleError} alt="${this.name}" />`;
     }
     if (this.name) {
       return html`<span part="name">${this.format()}</span>`;
@@ -81,13 +91,14 @@ class Avatar extends GlobalStyle {
     return htmlSlot();
   }
 
-  format() {
+  format(): string {
     return this.name;
   }
 
-  _handleError() {
+  _handleError(): void {
     this.src = undefined;
   }
 }
 
 export default Avatar;
+export { Avatar };

package/src/components/badge.ts

@@ -0,0 +1,107 @@
+import { attr, godown, htmlSlot, styles } from "@godown/element";
+import { css, html, type TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+
+type Position = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+
+const protoName = "badge";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Badge} renders a badge.
+ *
+ * @slot - Badge content.
+ * @category display
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      ${cssScope}--background: var(${cssGlobalVars.active});
+      ${cssScope}--offset: 0%;
+      ${cssScope}--offset-x: var(${cssScope}--offset);
+      ${cssScope}--offset-y: var(${cssScope}--offset);
+    }
+
+    :host,
+    :host([contents]) [part=root] {
+      display: inline-block;
+    }
+
+    [part=root] {
+      position: relative;
+    }
+
+    [part=badge] {
+      position: absolute;
+      font-size: 75%;
+      padding: 0 0.5em;
+      user-select: none;
+      border-radius: calc(infinity * 1px);
+      transform: translate(-50%, -50%);
+      left: var(--left);
+      top: var(--top);
+      background: var(${cssScope}--background);
+    }
+
+    [part=badge]:empty {
+      width: 0.5em;
+      height: 0.5em;
+      font-size: 100%;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    [position^=top] {
+      --top: calc(0% + var(${cssScope}--offset-y));
+    }
+
+    [position$=right] {
+      --left: calc(100% - var(${cssScope}--offset-x));
+    }
+
+    [position^=bottom] {
+      --top: calc(100% - var(${cssScope}--offset-y));
+    }
+
+    [position$=left] {
+      --left: calc(0% + var(${cssScope}--offset-x));
+    }
+  `,
+)
+class Badge extends GlobalStyle {
+  @property()
+  position: Position = "top-right";
+
+  @property({ type: Number })
+  value = 0;
+
+  /**
+   * If `true`, render a dot badge.
+   */
+  @property({ type: Boolean })
+  dot = false;
+
+  @property({ type: Number })
+  max = 99;
+
+  private formatValue(value: number): string {
+    return value > this.max ? this.max + "+" : value + "";
+  }
+
+  render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+      ${htmlSlot()}
+      ${
+      this.value || this.dot
+        ? html`<div part="badge">${this.dot ? "" : this.formatValue(this.value)}</div>`
+        : ""
+    }
+    </div>`;
+  }
+}
+
+export default Badge;
+export { Badge };