godown 3.0.0-canary.16 → 3.0.0-canary.18

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/index.js

@@ -1,2 +1,2 @@
-import"./alert.js";import"./avatar.js";import"./breath.js";import"./button.js";import"./card.js";import"./carousel.js";import"./details.js";import"./dialog.js";import"./divider.js";import"./dragbox.js";import"./flex.js";import"./form.js";import"./grid.js";import"./input.js";import"./layout.js";import"./link.js";import"./progress.js";import"./range.js";import"./rotate.js";import"./router.js";import"./select.js";import"./skeleton.js";import"./split.js";import"./switch.js";import"./text.js";import"./time.js";import"./tooltip.js";import"./typewriter.js";export{default as Alert}from"./components/alert.js";export{default as Avatar}from"./components/avatar.js";export{default as Breath}from"./components/breath.js";export{default as Button}from"./components/button.js";export{default as Card}from"./components/card.js";export{default as Carousel}from"./components/carousel.js";export{default as Details}from"./components/details.js";export{default as Dialog}from"./components/dialog.js";export{default as Divider}from"./components/divider.js";export{default as Dragbox}from"./components/dragbox.js";export{default as Flex}from"./components/flex.js";export{default as Form}from"./components/form.js";export{default as Grid}from"./components/grid.js";export{default as Input}from"./components/input.js";export{default as Layout}from"./components/layout.js";export{default as Link}from"./components/link.js";export{default as Progress}from"./components/progress.js";export{default as Range}from"./components/range.js";export{default as Rotate}from"./components/rotate.js";export{default as Router}from"./components/router.js";export{default as Select}from"./components/select.js";export{default as Skeleton}from"./components/skeleton.js";export{default as Split}from"./components/split.js";export{default as Switch}from"./components/switch.js";export{default as Text}from"./components/text.js";export{default as Time}from"./components/time.js";export{default as Tooltip}from"./components/tooltip.js";export{default as Typewriter}from"./components/typewriter.js";
+import"./alert.js";import"./avatar.js";import"./badge.js";import"./breath.js";import"./button.js";import"./card.js";import"./carousel.js";import"./details.js";import"./dialog.js";import"./divider.js";import"./dragbox.js";import"./flex.js";import"./form.js";import"./grid.js";import"./heading.js";import"./input.js";import"./layout.js";import"./link.js";import"./progress.js";import"./range.js";import"./rotate.js";import"./router.js";import"./select.js";import"./skeleton.js";import"./split.js";import"./switch.js";import"./text.js";import"./time.js";import"./tooltip.js";import"./typewriter.js";export{default as Alert}from"./components/alert.js";export{default as Avatar}from"./components/avatar.js";export{default as Badge}from"./components/badge.js";export{default as Breath}from"./components/breath.js";export{default as Button}from"./components/button.js";export{default as Card}from"./components/card.js";export{default as Carousel}from"./components/carousel.js";export{default as Details}from"./components/details.js";export{default as Dialog}from"./components/dialog.js";export{default as Divider}from"./components/divider.js";export{default as Dragbox}from"./components/dragbox.js";export{default as Flex}from"./components/flex.js";export{default as Form}from"./components/form.js";export{default as Grid}from"./components/grid.js";export{default as Heading}from"./components/heading.js";export{default as Input}from"./components/input.js";export{default as Layout}from"./components/layout.js";export{default as Link}from"./components/link.js";export{default as Progress}from"./components/progress.js";export{default as Range}from"./components/range.js";export{default as Rotate}from"./components/rotate.js";export{default as Router}from"./components/router.js";export{default as Select}from"./components/select.js";export{default as Skeleton}from"./components/skeleton.js";export{default as Split}from"./components/split.js";export{default as Switch}from"./components/switch.js";export{default as Text}from"./components/text.js";export{default as Time}from"./components/time.js";export{default as Tooltip}from"./components/tooltip.js";export{default as Typewriter}from"./components/typewriter.js";
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "godown",
-  "version": "3.0.0-canary.16",
+  "version": "3.0.0-canary.18",
   "description": "Non Composite Web Components Library",
   "type": "module",
   "main": "index.js",
@@ -13,6 +13,7 @@
       "development": "./dev/*",
       "default": "./*"
     },
+    "./build/*": "./build/*",
     "./src/*": "./src/*",
     "./*.json": "./*.json"
   },
@@ -33,7 +34,7 @@
     "tslib": "^2.7.0",
     "@godown/colors": "^0.0.2",
     "@godown/f7-icon": "^0.0.4",
-    "@godown/element": "^0.3.0"
+    "@godown/element": "^0.4.0"
   },
   "publishConfig": {
     "access": "public"

package/split.js

@@ -1,2 +1,2 @@
-import e from"./components/split.js";e.define();export{e 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":["Split","define"],"mappings":"qCAEAA,EAAMC"}
+{"version":3,"file":"split.js","sources":["src/split.ts"],"sourcesContent":null,"names":["Split","define"],"mappings":"8EAEAA,EAAMC"}

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/components/alert.ts

@@ -1,9 +1,4 @@
-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 { 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";

package/src/components/avatar.ts

@@ -1,8 +1,4 @@
-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 { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { omit } from "@godown/element/tools/lib.js";
+import { attr, godown, htmlSlot, omit, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

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

package/src/components/breath.ts

@@ -1,7 +1,4 @@
-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 { htmlStyle } from "@godown/element/directives/html-style.js";
+import { attr, godown, htmlStyle, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

package/src/components/button.ts

@@ -1,10 +1,4 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { part } from "@godown/element/decorators/part.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { attr } from "@godown/element/directives/attr.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, part, styles, toVar } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -134,7 +128,6 @@ const colors: Record<Colors, string> = constructCSSObject(
         var(${cssScope}--gradients, var(${cssScope}--background))
       );
       border-radius: 0.3em;
-      width: -moz-fit-content;
       width: fit-content;
       transition: 0.1s;
       display: block;
@@ -271,10 +264,9 @@ class Button extends GlobalStyle {
 
   protected _handleModal(e: MouseEvent): void {
     const modal = document.createElement("i");
-    const rect = this.getBoundingClientRect();
-    const h = rect.height;
-    const w = rect.width;
-    const size = `${Math.sqrt(h * h + w * w) * 2}px`;
+    const rect = this._root.getBoundingClientRect();
+    const { height, width } = rect;
+    const size = `${Math.sqrt(height * height + width * width) * 2}px`;
     modal.style.height = size;
     modal.style.width = size;
     modal.style.left = `${e.clientX - rect.left}px`;

package/src/components/card.ts

@@ -1,7 +1,4 @@
-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 { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { attr, godown, htmlSlot, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

package/src/components/carousel.ts

@@ -1,9 +1,4 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { part } from "@godown/element/decorators/part.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { attr } from "@godown/element/directives/attr.js";
-import { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { htmlStyle } from "@godown/element/directives/html-style.js";
+import { attr, godown, htmlSlot, htmlStyle, part, styles } from "@godown/element";
 import iconChevronLeft from "@godown/f7-icon/icons/chevron-left.js";
 import iconChevronRight from "@godown/f7-icon/icons/chevron-right.js";
 import { css, html, type TemplateResult } from "lit";
@@ -170,7 +165,7 @@ class Carousel extends GlobalStyle {
       if (this.intervalID) {
         clearInterval(this.intervalID);
       }
-      this.intervalID = window.setInterval(() => {
+      this.intervalID = setInterval(() => {
         this.next();
       }, this.autoChange);
     }

package/src/components/details.ts

@@ -1,7 +1,4 @@
-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 { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { attr, godown, htmlSlot, styles } from "@godown/element";
 import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
@@ -42,6 +39,7 @@ const cssScope = scopePrefix(protoName);
     }
 
     [part=title] {
+      direction: ltr;
       height: 100%;
       display: flex;
       flex-wrap: nowrap;

package/src/components/dialog.ts

@@ -1,8 +1,4 @@
-import type { HandlerEvent } from "@godown/element";
-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 { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { attr, godown, type HandlerEvent, htmlSlot, styles } from "@godown/element";
 import { css, html, type PropertyValues, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

package/src/components/divider.ts

@@ -1,5 +1,4 @@
-import { godown, styles } from "@godown/element/decorators/index.js";
-import { attr } from "@godown/element/directives/attr.js";
+import { attr, godown, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

package/src/components/dragbox.ts

@@ -1,8 +1,4 @@
-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 { htmlSlot } from "@godown/element/directives/html-slot.js";
-import type { EventListenerFunc } from "@godown/element/tools/events.js";
+import { attr, type EventListenerFunc, godown, htmlSlot, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

package/src/components/flex.ts

@@ -1,9 +1,4 @@
-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 { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { htmlStyle } from "@godown/element/directives/html-style.js";
-import { joinRules } from "@godown/element/tools/css.js";
+import { attr, godown, htmlSlot, htmlStyle, joinRules, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

package/src/components/form.ts

@@ -1,6 +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 { godown, htmlSlot, styles } from "@godown/element";
 import { css, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

package/src/components/grid.ts

@@ -1,10 +1,4 @@
-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 { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { htmlStyle } from "@godown/element/directives/html-style.js";
-import { joinRules } from "@godown/element/tools/css.js";
-import { isNumerical } from "@godown/element/tools/lib.js";
+import { attr, godown, htmlSlot, htmlStyle, isNumerical, joinRules, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

package/src/components/heading.ts

@@ -0,0 +1,105 @@
+import { attr, godown, htmlSlot, styles } from "@godown/element";
+import { css, html, nothing, type TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "heading";
+
+/**
+ * {@linkcode Heading} renders a heading.
+ *
+ * If the id is provided, the anchor will be displayed.
+ *
+ * @slot - Heading content.
+ * @category layout
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      display: block;
+      text-align: start;
+    }
+
+    [part=anchor] {
+      position: absolute;
+      text-align: center;
+      min-width: 1.25em;
+      right: 100%;
+    }
+
+    [side=left] [part=anchor] {
+      right: 100%;
+    }
+    [side=right] [part=anchor] {
+      left: 100%;
+    }
+
+    a {
+      color: inherit;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      direction: ltr;
+      font-size: revert;
+      position: relative;
+      width: fit-content;
+    }
+  `,
+)
+class Heading extends GlobalStyle {
+  /**
+   * The heading level.
+   */
+  @property()
+  as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" = "h1";
+
+  /**
+   * The anchor prefix.
+   */
+  @property()
+  anchor = "#";
+
+  /**
+   * The anchor side.
+   */
+  @property()
+  side: "left" | "right" = "left";
+
+  protected render(): TemplateResult<1> {
+    return html`<a part="root" href="${this.id ? "#" + this.id : nothing}" ${attr(this.observedRecord)}>
+      ${
+      this.wrapHeading(
+        htmlSlot(),
+        this.id ? html`<i part="anchor">${this.anchor}</i>` : "",
+      )
+    }
+    </a> `;
+  }
+
+  protected wrapHeading(...children: any[]): TemplateResult<1> {
+    switch (this.as) {
+      case "h2":
+        return html`<h2>${children}</h2>`;
+      case "h3":
+        return html`<h3>${children}</h3>`;
+      case "h4":
+        return html`<h4>${children}</h4>`;
+      case "h5":
+        return html`<h5>${children}</h5>`;
+      case "h6":
+        return html`<h6>${children}</h6>`;
+      default:
+        return html`<h1>${children}</h1>`;
+    }
+  }
+}
+
+export default Heading;
+export { Heading };

package/src/components/input.ts

@@ -1,8 +1,4 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { part } from "@godown/element/decorators/part.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 { attr, classList, godown, part, styles } from "@godown/element";
 import { css, html, nothing, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

package/src/components/layout.ts

@@ -1,7 +1,4 @@
-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 { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { attr, godown, htmlSlot, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

package/src/components/link.ts

@@ -1,4 +1,4 @@
-import { godown } from "@godown/element/decorators/godown.js";
+import { godown } from "@godown/element";
 import { property } from "lit/decorators.js";
 
 import SuperAnchor from "../core/super-anchor.js";

package/src/components/progress.ts

@@ -1,7 +1,4 @@
-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 { isNil } from "@godown/element/tools/lib.js";
+import { attr, godown, isNil, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

package/src/components/range.ts

@@ -1,10 +1,4 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { part } from "@godown/element/decorators/part.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 { joinProperties } from "@godown/element/tools/css.js";
-import { isNil } from "@godown/element/tools/lib.js";
+import { attr, classList, godown, isNil, joinProperties, part, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property, queryAll, state } from "lit/decorators.js";
 

package/src/components/rotate.ts

@@ -1,7 +1,4 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { part } from "@godown/element/decorators/part.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { godown, htmlSlot, part, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 
 import { GlobalStyle, scopePrefix } from "../core/global-style.js";

package/src/components/router.ts

@@ -1,7 +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 { RouteTree } from "@godown/element/tools/route-tree.js";
+import { godown, htmlSlot, RouteTree, styles } from "@godown/element";
 import { css, type PropertyValueMap, type TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
 

package/src/components/select.ts

@@ -1,13 +1,7 @@
-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";
-import { attr } from "@godown/element/directives/attr.js";
-import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { attr, godown, type HandlerEvent, htmlSlot, part, styles } from "@godown/element";
 import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
 import { css, html, nothing, type TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 import Input from "./input.js";
 
@@ -122,7 +116,7 @@ class Select extends Input {
       this._renderPrefix(),
       html`<input
           part="input"
-          dir="${ifDefined(this.dir)}"
+          dir="${this.dir || nothing}"
           id="${this.makeId}"
           .value="${this.text}"
           type="${this.type}"

package/src/components/skeleton.ts

@@ -1,7 +1,4 @@
-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 { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { attr, godown, htmlSlot, styles } from "@godown/element";
 import iconPhoto from "@godown/f7-icon/icons/photo.js";
 import { css, html, type TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";

package/src/components/split.ts

@@ -1,8 +1,4 @@
-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 { attr, classList, godown, type HandlerEvent, styles } from "@godown/element";
 import { css, html, nothing, type TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
 
@@ -232,3 +228,4 @@ class Split extends SuperInput {
 }
 
 export default Split;
+export { Split };

package/src/components/switch.ts

@@ -1,6 +1,4 @@
-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 { attr, godown, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property, query } from "lit/decorators.js";
 

package/src/components/text.ts

@@ -1,8 +1,4 @@
-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 { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { attr, classList, godown, htmlSlot, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 

package/src/components/time.ts

@@ -1,6 +1,4 @@
-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 { attr, godown, styles } from "@godown/element";
 import fmtime from "fmtime";
 import { css, html, type PropertyValues, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
@@ -74,7 +72,7 @@ class Time extends GlobalStyle {
   }
 
   startTimeout(): number {
-    return window.setInterval(() => {
+    return 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));

package/src/components/tooltip.ts

@@ -1,7 +1,4 @@
-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 { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { attr, godown, htmlSlot, styles } from "@godown/element";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";