godown 3.0.0-canary.15 → 3.0.0-canary.17

package/layout.js

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

package/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sources":["src/layout.ts"],"sourcesContent":null,"names":["Layout","define"],"mappings":"sCAEAA,EAAOC"}
+{"version":3,"file":"layout.js","sources":["src/layout.ts"],"sourcesContent":null,"names":["Layout","define"],"mappings":"iFAEAA,EAAOC"}

package/link.js

@@ -1,2 +1,2 @@
-import e from"./components/link.js";e.define();export{e as default};
+import o from"./components/link.js";export{Link}from"./components/link.js";o.define();export{o as default};
 //# sourceMappingURL=link.js.map

package/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["src/link.ts"],"sourcesContent":null,"names":["Link","define"],"mappings":"oCAEAA,EAAKC"}
+{"version":3,"file":"link.js","sources":["src/link.ts"],"sourcesContent":null,"names":["Link","define"],"mappings":"2EAEAA,EAAKC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "godown",
-  "version": "3.0.0-canary.15",
+  "version": "3.0.0-canary.17",
   "description": "Non Composite Web Components Library",
   "type": "module",
   "main": "index.js",
@@ -32,7 +32,7 @@
     "lit": "^3.0.0",
     "tslib": "^2.7.0",
     "@godown/colors": "^0.0.2",
-    "@godown/element": "^0.2.2",
+    "@godown/element": "^0.4.0",
     "@godown/f7-icon": "^0.0.4"
   },
   "publishConfig": {

package/progress.js

@@ -1,2 +1,2 @@
-import e from"./components/progress.js";e.define();export{e 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":["Progress","define"],"mappings":"wCAEAA,EAASC"}
+{"version":3,"file":"progress.js","sources":["src/progress.ts"],"sourcesContent":null,"names":["Progress","define"],"mappings":"uFAEAA,EAASC"}

package/range.js

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

package/rotate.js

@@ -1,2 +1,2 @@
-import e from"./components/rotate.js";e.define();export{e 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":["Rotate","define"],"mappings":"sCAEAA,EAAOC"}
+{"version":3,"file":"rotate.js","sources":["src/rotate.ts"],"sourcesContent":null,"names":["Rotate","define"],"mappings":"iFAEAA,EAAOC"}

package/router.js

@@ -1,2 +1,2 @@
-import e from"./components/router.js";e.define();export{e 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":["Router","define"],"mappings":"sCAEAA,EAAOC"}
+{"version":3,"file":"router.js","sources":["src/router.ts"],"sourcesContent":null,"names":["Router","define"],"mappings":"iFAEAA,EAAOC"}

package/select.js

@@ -1,2 +1,2 @@
-import e from"./components/select.js";e.define();export{e 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":["Select","define"],"mappings":"sCAEAA,EAAOC"}
+{"version":3,"file":"select.js","sources":["src/select.ts"],"sourcesContent":null,"names":["Select","define"],"mappings":"iFAEAA,EAAOC"}

package/skeleton.js

@@ -1,2 +1,2 @@
-import e from"./components/skeleton.js";e.define();export{e 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":["Skeleton","define"],"mappings":"wCAEAA,EAASC"}
+{"version":3,"file":"skeleton.js","sources":["src/skeleton.ts"],"sourcesContent":null,"names":["Skeleton","define"],"mappings":"uFAEAA,EAASC"}

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";
@@ -111,6 +106,7 @@ 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)
@@ -280,3 +276,4 @@ class Alert extends GlobalStyle {
 }
 
 export default Alert;
+export { Alert };

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";
 
@@ -105,3 +101,4 @@ class Avatar extends GlobalStyle {
 }
 
 export default Avatar;
+export { Avatar };

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";
 
@@ -158,3 +155,4 @@ class Breath extends GlobalStyle {
 }
 
 export default Breath;
+export { Breath };

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`;
@@ -290,3 +282,4 @@ class Button extends GlobalStyle {
 }
 
 export default Button;
+export { Button };

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";
 
@@ -77,3 +74,4 @@ class Card extends GlobalStyle {
 }
 
 export default Card;
+export { Card };

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";
@@ -24,6 +19,7 @@ const protoName = "carousel";
  * If no width, it will be the width of the first element.
  *
  * @slot - Carousel items, should maintain the same size.
+ * @fires change - Fired when the index changes.
  * @category display
  */
 @godown(protoName)
@@ -133,6 +129,7 @@ class Carousel extends GlobalStyle {
 
   show(i: number): void {
     this.index = i;
+    this.dispatchEvent(new CustomEvent("change", { detail: i, composed: true }));
   }
 
   next(): void {
@@ -176,3 +173,4 @@ class Carousel extends GlobalStyle {
 }
 
 export default Carousel;
+export { Carousel };

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";
@@ -18,7 +15,7 @@ const cssScope = scopePrefix(protoName);
  *
  * @slot summary - Details summary if no `summary` is provided.
  * @slot - Details content.
- * @fires change - Fired when the details is toggled.
+ * @fires change - Fired when the open changes.
  * @category display
  */
 @godown(protoName)
@@ -110,3 +107,4 @@ class Details extends SuperOpenable {
 }
 
 export default Details;
+export { Details };

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";
 
@@ -19,6 +15,7 @@ const cssScope = scopePrefix(protoName);
  *
  * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed.
  *
+ * @fires change - Fires when the open changes.
  * @category feedback
  */
 @godown(protoName)
@@ -164,3 +161,4 @@ class Dialog extends SuperOpenable {
 }
 
 export default Dialog;
+export { Dialog };

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";
 
@@ -54,3 +53,4 @@ class Divider extends GlobalStyle {
 }
 
 export default Divider;
+export { Divider };

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";
 
@@ -133,3 +129,4 @@ class Dragbox extends GlobalStyle {
 }
 
 export default Dragbox;
+export { Dragbox };

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";
 
@@ -82,3 +77,4 @@ class Flex extends GlobalStyle {
 }
 
 export default Flex;
+export { Flex };

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";
 
@@ -80,3 +78,4 @@ class Form<T = object> extends GlobalStyle {
 }
 
 export default Form;
+export { Form };

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";
 
@@ -87,3 +81,4 @@ class Grid extends GlobalStyle {
 }
 
 export default Grid;
+export { Grid };

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";
 
@@ -14,6 +10,8 @@ const protoName = "input";
 /**
  * {@linkcode Input} renders a text input.
  *
+ * @fires input - Fires when the input value changes.
+ * @fires change - Fires when the input value changes.
  * @category input
  */
 @godown(protoName)
@@ -71,3 +69,4 @@ class Input extends SuperInput {
 }
 
 export default Input;
+export { Input };

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";
 
@@ -10,7 +7,7 @@ import { GlobalStyle } from "../core/global-style.js";
 const protoName = "layout";
 
 /**
- * {@linkcode NavLayout} renders slot and optional top header, bottom footer.
+ * {@linkcode Layout} renders slot and optional top header, bottom footer.
  *
  * @slot - The main content of the layout.
  * @slot header - The header of the layout.
@@ -50,7 +47,7 @@ const protoName = "layout";
     }
   `,
 )
-class NavLayout extends GlobalStyle {
+class Layout extends GlobalStyle {
   /**
    * If true, remove the header slot.
    */
@@ -78,4 +75,5 @@ class NavLayout extends GlobalStyle {
   }
 }
 
-export default NavLayout;
+export default Layout;
+export { Layout };

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";
@@ -44,3 +44,4 @@ class Link extends SuperAnchor {
 }
 
 export default Link;
+export { Link };