godown 3.0.0-canary.16 → 3.0.0-canary.17

package/src/components/badge.ts

@@ -0,0 +1,104 @@
+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.
+ *
+ * @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;
+      border-radius: calc(infinity * 1px);
+      background: var(${cssScope}--background);
+      font-size: 75%;
+      padding: 0 0.5em;
+      transform: translate(-50%, -50%);
+    }
+
+    [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));
+    }
+
+    [part=badge] {
+      left: var(--left);
+      top: var(--top);
+    }
+  `,
+)
+class Badge extends GlobalStyle {
+  @property({ type: String })
+  position: Position = "top-right";
+
+  @property({ type: Number })
+  value = 0;
+
+  @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> {
+    if (this.value === 0 && !this.dot) {
+      return htmlSlot();
+    }
+    return html`<div part="root" ${attr(this.observedRecord)}>
+      ${htmlSlot()}
+      <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";

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

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,89 @@
+import { attr, godown, htmlSlot, styles } from "@godown/element";
+import { css, html, 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 - The content of the heading.
+ * @category layout
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      display: block;
+      text-align: start;
+    }
+
+    [part=root] {
+      position: relative;
+    }
+
+    a {
+      color: inherit;
+      position: absolute;
+      inset: 0;
+    }
+
+    [part=anchor] {
+      position: absolute;
+      text-align: center;
+      min-width: 1.25em;
+      right: 100%;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: revert;
+    }
+  `,
+)
+class Heading extends GlobalStyle {
+  @property({ type: String })
+  as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" = "h1";
+
+  @property({ type: String })
+  anchor = "#";
+
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+      ${
+      this.wrapHeading(
+        this.id ? html`<a href="#${this.id}"><i part="anchor">${this.anchor}</i></a>` : "",
+        html`<p>${htmlSlot()}</p>`,
+      )
+    }
+    </div> `;
+  }
+
+  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";

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

package/src/components/typewriter.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 { 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 { attr, classList, godown, htmlSlot, random, styles } from "@godown/element";
 import { css, html, type PropertyValueMap, type TemplateResult } from "lit";
 import { property, query, state } from "lit/decorators.js";
 

package/src/core/global-style.ts

@@ -1,8 +1,6 @@
 import { type Gradients, presetsRGB } from "@godown/colors/presets-rgb.js";
 import { travel } from "@godown/colors/travel.js";
-import GodownElement from "@godown/element";
-import { joinProperties } from "@godown/element/tools/css.js";
-import { trim } from "@godown/element/tools/lib.js";
+import { GodownElement, joinProperties, trim } from "@godown/element";
 import { css, type CSSResult, unsafeCSS } from "lit";
 
 export class GlobalStyle extends GodownElement {

package/src/core/super-anchor.ts

@@ -1,9 +1,6 @@
-import { styles } from "@godown/element/decorators/index.js";
-import { attr } from "@godown/element/directives/attr.js";
-import { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { css, html, type TemplateResult } 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";
 
@@ -44,7 +41,7 @@ class SuperAnchor extends GlobalStyle {
     return html`<a
       part="root"
       ${attr(this.observedRecord)}
-      href="${ifDefined(this.href)}"
+      href="${this.href || nothing}"
       target="${this.target}"
       @click=${this._handleClick}
     >

package/src/core/super-input.ts

@@ -1,7 +1,4 @@
-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, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";

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