godown 3.0.0-canary.8 → 3.0.0

package/src/components/breath.ts

@@ -1,7 +1,5 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { htmlStyle } from "@godown/element/directives/html-style.js";
-import { css, html } from "lit";
+import { attr, godown, htmlStyle, 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";
@@ -21,6 +19,7 @@ const cssScope = scopePrefix(defineName);
  *
  * Inspired by Vercel home page (2023).
  *
+ * @slot - Breathing parts.
  * @category effect
  */
 @godown(defineName)
@@ -41,15 +40,22 @@ const cssScope = scopePrefix(defineName);
   `,
   css`
     :host {
-      display: flex;
       margin: auto;
-      width: -moz-fit-content;
       width: fit-content;
       font-size: 2em;
       align-items: center;
       direction: ltr;
     }
 
+    :host,
+    :host([contents]) [part=root] {
+      display: flex;
+    }
+
+    [part=root] {
+      display: contents;
+    }
+
     ::selection {
       background: none;
     }
@@ -68,14 +74,16 @@ const cssScope = scopePrefix(defineName);
       box-sizing: border-box;
       display: inline-block;
       animation-iteration-count: infinite;
-      -webkit-text-fill-color: transparent;
+      color: transparent;
       -webkit-background-clip: text !important;
       background-clip: text !important;
     }
+
     .colorful {
       opacity: 0;
       animation-name: colorfulN;
     }
+
     .nocolor {
       position: absolute;
       top: 0;
@@ -91,21 +99,21 @@ class Breath extends GlobalStyle {
    */
   @property()
   text: string | string[];
+
   /**
    * Effect duration, ending in s or ms.
    */
   @property()
   duration: string;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     const texts = this.getTexts();
-    return [
-      texts.map(this.renderText),
-      htmlStyle(this.computeStyle(texts.length)),
-    ];
+    return html`<div part="root" ${attr(this.observedRecord)}>
+    ${[texts.map(this.renderText), htmlStyle(this._computeStyle(texts.length))]}
+    </div>`;
   }
 
-  protected renderText(text: string) {
+  protected renderText(text: string): TemplateResult<1> {
     return html`<span class="rel">
       <span class="nocolor">${text}</span>
       <span class="colorful">${text}</span>
@@ -116,36 +124,35 @@ class Breath extends GlobalStyle {
     return Array.isArray(this.text) ? this.text : (this.text || this.textContent).split(/\s+/).filter((x) => x);
   }
 
-  protected computeStyle(len: number) {
+  protected _computeStyle(len: number): string {
     const gap = 100 / 2 / len;
     const duration = this.parseDuration() || len * 2 + 2;
-
+    let style1 = "";
+    for (let number = 1; number <= len; number++) {
+      const delay = -duration / len * (len - number + 1);
+      const defaultNumber = ((number - 1) % 3) + 1;
+      style1 +=
+        `.rel:nth-child(${number}) .colorful{animation-delay:${delay}s;background:var(${cssScope}--${number},var(${cssScope}--${defaultNumber}));}`;
+    }
     return (
-      `.colorful{animation-duration:${duration}s;}`
-      + `@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${gap * 2}%{opacity:1;}}`
-      + (() => {
-        let style1 = "";
-        for (let number = 1; number <= len; number++) {
-          const delay = -duration / len * (len - number + 1);
-          const defaultNumber = ((number - 1) % 3) + 1;
-          style1 +=
-            `.rel:nth-child(${number}) .colorful{animation-delay:${delay}s;background:var(${cssScope}--${number},var(${cssScope}--${defaultNumber}));}`;
-        }
-        return style1;
-      })()
+      `.colorful{animation-duration:${duration}s;}@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${
+        gap * 2
+      }%{opacity:1;}}${style1}`
     );
   }
 
-  protected parseDuration() {
+  protected parseDuration(): number | undefined {
     const { duration } = this;
     if (duration) {
       if (duration.endsWith("s")) {
-        return parseFloat(duration.slice(0, -1));
-      } else if (duration.endsWith("ms")) {
-        return parseFloat(duration.slice(0, -2)) / 1000;
+        return Number.parseFloat(duration.slice(0, -1));
+      }
+      if (duration.endsWith("ms")) {
+        return Number.parseFloat(duration.slice(0, -2)) / 1000;
       }
     }
   }
 }
 
 export default Breath;
+export { Breath };

package/src/components/button.ts

@@ -1,10 +1,5 @@
-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 { htmlStyle } from "@godown/element/directives/html-style.js";
-import { constructCSSObject, toVar } from "@godown/element/tools/css.js";
-import { css, html } from "lit";
+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";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -12,16 +7,17 @@ import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js
 const protoName = "button";
 const cssScope = scopePrefix(protoName);
 
-const whiteFont = cssGlobalVars._colors.lightgray[0];
-const blackFont = cssGlobalVars._colors.darkgray[6];
+const whiteFont = cssGlobalVars.white;
+const blackFont = cssGlobalVars.black;
 
-const colors = constructCSSObject(
+type Colors = "teal" | "blue" | "green" | "red" | "purple" | "orange" | "yellow" | "pink" | "gray" | "white" | "black";
+const colors: Record<Colors, string> = constructCSSObject(
   ["color", "background", "gradients"].map((k) => `${cssScope}--${k}`),
   {
     black: [
       whiteFont, // color
       cssGlobalVars._colors.darkgray[7], // background
-      cssGlobalVars._colors.darkgray[4], // gradients
+      cssGlobalVars._colors.darkgray[5], // gradients
     ],
     gray: [
       whiteFont, // color
@@ -74,14 +70,20 @@ const colors = constructCSSObject(
       cssGlobalVars._colors.teal[4], // gradients
     ],
   },
-  () => `:host`,
+  () => ":host",
   (prop) => toVar(prop),
 );
 
 /**
  * {@linkcode Button} renders a button.
  *
- * Color defaults to black.
+ * Create modal animation upon clicking.
+ *
+ * Available colors (background): none, black, gray, white, blue, green, red, orange, pink, purple, yellow, teal.
+ *
+ * Default color is `black`.
+ *
+ * Set the color to `none` to prevent applying styles.
  *
  * @category input
  */
@@ -112,7 +114,7 @@ const colors = constructCSSObject(
   css`
     :host {
       ${cssScope}--padding-x: .5em;
-      ${cssScope}--padding-y: .15em;
+      ${cssScope}--padding-y: min(calc(var(${cssScope}--padding-x) / 2), .25em);
       ${cssScope}--padding: var(${cssScope}--padding-y) var(${cssScope}--padding-x);
       ${cssScope}--modal-animation-duration: 1s;
       ${cssScope}--ghost-width: .08em;
@@ -126,7 +128,6 @@ const colors = constructCSSObject(
         var(${cssScope}--gradients, var(${cssScope}--background))
       );
       border-radius: 0.3em;
-      width: -moz-fit-content;
       width: fit-content;
       transition: 0.1s;
       display: block;
@@ -136,7 +137,11 @@ const colors = constructCSSObject(
       cursor: pointer;
     }
 
-    [part="root"] {
+    :host([contents]) [part=root] {
+      width: fit-content;
+    }
+
+    [part=root] {
       width: 100%;
       height: 100%;
       overflow: hidden;
@@ -147,7 +152,7 @@ const colors = constructCSSObject(
       transition-duration: inherit;
     }
 
-    [part="slot"] {
+    [part=content] {
       padding: var(${cssScope}--padding);
     }
 
@@ -168,7 +173,7 @@ const colors = constructCSSObject(
     @keyframes kf {
       0% {
         transform: scale(0) translate(-50%, -50%);
-        opacity: var(${cssScope}--modal-opacity, 0.18);
+        opacity: var(${cssScope}--modal-opacity, 0.1);
       }
       80% {
         transform: scale(1) translate(-50%, -50%);
@@ -184,50 +189,54 @@ class Button extends GlobalStyle {
    * Whether to disable this element.
    */
   @property({ type: Boolean, reflect: true })
-  disabled: boolean;
+  disabled = false;
+
   /**
-   * Invert font and background color.
+   * Display ghost.
    */
   @property({ type: Boolean, reflect: true })
-  ghost: boolean;
+  ghost = false;
+
   /**
    * Whether this element is active or not.
    */
   @property({ type: Boolean, reflect: true })
-  active: boolean;
+  active = false;
+
   /**
-   * Enables rounded corners to appear capsule shaped.
+   * Display rounded.
    */
   @property({ type: Boolean, reflect: true })
-  round: boolean;
+  round = false;
+
   /**
    * The primary color.
    */
   @property({ reflect: true })
   color: "none" | keyof typeof colors = "black";
+
   /**
-   * Text inside.
+   * Content text.
    */
   @property()
-  text: string;
+  content: string;
 
   @part("modal-root")
-  _modalRoot: HTMLElement;
+  protected _modalRoot: HTMLElement;
   @part("root")
-  _root: HTMLElement;
+  protected _root: HTMLElement;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     const color = this.nextColor();
-    return [
-      html`<div part="root">
-        <span part="modal-root"></span>
-        <div part="slot">${this.text || htmlSlot()}</div>
-      </div>`,
-      htmlStyle(colors[color]),
-    ];
+    return html`<div part="root" ${attr(this.observedRecord)}>
+      <span part="modal-root"></span>
+      <div part="content">
+        ${[this.content || htmlSlot(), htmlStyle(colors[color])]}
+      </div>
+    </div>`;
   }
 
-  focus() {
+  focus(): void {
     if (this.disabled) {
       return;
     }
@@ -235,16 +244,16 @@ class Button extends GlobalStyle {
     super.focus();
   }
 
-  blur() {
+  blur(): void {
     this.active = false;
     super.blur();
   }
 
-  firstUpdated() {
+  firstUpdated(): void {
     this.events.add(this, "click", this._handelClick, true);
   }
 
-  protected _handelClick(e: MouseEvent) {
+  protected _handelClick(e: MouseEvent): void {
     if (this.disabled) {
       e.stopPropagation();
       e.preventDefault();
@@ -253,12 +262,11 @@ class Button extends GlobalStyle {
     this._handleModal(e);
   }
 
-  protected _handleModal(e: MouseEvent) {
+  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`;
@@ -268,9 +276,10 @@ class Button extends GlobalStyle {
     modal.addEventListener("animationend", () => modal.remove(), { once: true });
   }
 
-  nextColor() {
+  nextColor(): Colors | "none" {
     return this.color;
   }
 }
 
 export default Button;
+export { Button };

package/src/components/card.ts

@@ -1,7 +1,5 @@
-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 { css, html } from "lit";
+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";
@@ -26,60 +24,54 @@ const cssScope = scopePrefix(protoName);
 @styles(
   css`
     :host {
-      ${cssScope}--shadow-width: .0375em;
-      ${cssScope}--shadow-color: transparent;
       ${cssScope}--background: var(${cssGlobalVars.background});
-      ${cssScope}--divider-width: 100%;
-      ${cssScope}--divider-height: var(${cssScope}--shadow-width);
-      ${cssScope}--divider-background: var(${cssGlobalVars.passive});
+      ${cssScope}--border-width: .0375em;
+      ${cssScope}--border-color: transparent;
+      ${cssScope}--border-background: var(${cssGlobalVars.passive});
       ${cssScope}--padding: .75em;
       color: var(${cssGlobalVars.foreground});
       background: var(${cssScope}--background);
+      border-width: var(${cssScope}--border-width);
       display: block;
       flex-shrink: 0;
       position: relative;
       overflow: hidden;
       box-sizing: border-box;
-      border-radius: 0.25em;
-      transition: box-shadow .1s ease-in-out;
-    }
-    
-    :host([shadow="hover"]:hover),
-    :host([shadow="always"]) {
-      ${cssScope}--shadow-color: var(${cssScope}--divider-background);
-      box-shadow: inset 0 0 0px var(${cssScope}--shadow-width) var(${cssScope}--shadow-color);
-    }
-
-   [part="divider"] {
-      margin: auto;
-      width: var(${cssScope}--divider-width);
-      height: var(${cssScope}--divider-height);
-      background: var(${cssScope}--divider-background);
     }
 
     slot {
       display: block;
       padding: var(${cssScope}--padding);
     }
+
+    :host,
+    slot {
+      border-color: var(${cssScope}--border-background);
+      border-style: solid;
+    }
+
+    [name=footer] {
+      border-top-width: var(${cssScope}--border-width);
+    }
+
+    [name=header] {
+      border-bottom-width: var(${cssScope}--border-width);
+    }
   `,
 )
 class Card extends GlobalStyle {
-  @property({ reflect: true })
-  shadow: "none" | "always" | "hover" = "hover";
-
   @property({ type: Boolean })
   footer = false;
+
   @property({ type: Boolean })
   header = false;
 
-  protected render() {
-    const hr = html`<hr part="divider">`;
-    return [
-      this.header ? [htmlSlot("header"), hr] : "",
-      htmlSlot(),
-      this.footer ? [hr, htmlSlot("footer")] : "",
-    ];
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+      ${[this.header ? htmlSlot("header") : "", htmlSlot(), this.footer ? htmlSlot("footer") : ""]}
+    </div>`;
   }
 }
 
 export default Card;
+export { Card };

package/src/components/carousel.ts

@@ -1,11 +1,7 @@
-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 { 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 } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -22,6 +18,8 @@ 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)
@@ -32,12 +30,13 @@ const protoName = "carousel";
       transition: .3s;
     }
 
-    [part="root"] {
+    [part=root] {
+      direction: ltr;
       overflow: hidden;
     }
 
-    [part="root"],
-    [part="move-root"] {
+    [part=root],
+    [part=move-root] {
       height: 100%;
       width: 100%;
       display: flex;
@@ -45,8 +44,8 @@ const protoName = "carousel";
       transition: inherit;
     }
 
-    [part="prev"],
-    [part="next"] {
+    [part=prev],
+    [part=next] {
       height: 100%;
       width: 1.5em;
       z-index: 1;
@@ -57,11 +56,11 @@ const protoName = "carousel";
       user-select: none;
     }
 
-    [part="prev"] {
+    [part=prev] {
       left: 0;
     }
 
-    [part="next"] {
+    [part=next] {
       right: 0;
     }
 
@@ -76,11 +75,13 @@ class Carousel extends GlobalStyle {
    */
   @property({ type: Number })
   index = 0;
+
   /**
    * If autoChange > 0, the rotation will be automated.
    */
   @property({ type: Number })
   autoChange = 0;
+
   /**
    * Element width.
    */
@@ -88,26 +89,24 @@ class Carousel extends GlobalStyle {
   width: string;
 
   @part("move-root")
-  _moveRoot: HTMLElement;
+  protected _moveRoot: HTMLElement;
 
-  intervalID: number;
+  protected intervalID: number;
 
-  _cloneFirst: HTMLElement | undefined;
+  private _cloneFirst: HTMLElement | undefined;
 
-  _cloneLast: HTMLElement | undefined;
+  private _cloneLast: HTMLElement | undefined;
 
-  protected render() {
-    return [
-      html`<div part="root">
-        <i part="prev" @click="${this.prev}">${iconChevronLeft()}</i>
-        <div part="move-root" style="transform:${`translateX(-${this.index + 1}00%)`}">${htmlSlot()}</div>
-        <i part="next" @click="${this.next}">${iconChevronRight()}</i>
-    </div>`,
-      htmlStyle(`:host{width:${this.width};}`),
-    ];
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+      <i part="prev" @click="${this.prev}"> ${iconChevronLeft()} </i>
+      <div part="move-root" style="transform:${`translateX(-${this.index + 1}00%)`}">${htmlSlot()}</div>
+      <i part="next" @click="${this.next}"> ${iconChevronRight()} </i>
+      ${htmlStyle(`:host,:host([contents]) [part=root]{width:${this.width};}`)}
+    </div>`;
   }
 
-  protected async firstUpdated() {
+  protected async firstUpdated(): Promise<void> {
     await this.updateComplete;
 
     if (this.children.length) {
@@ -121,46 +120,57 @@ class Carousel extends GlobalStyle {
       this.insertBefore(this._cloneFirst, this.firstElementChild);
       this.show(this.index);
     }
-    if (this.autoChange) {
-      this.intervalID = window.setInterval(() => {
-        this.next();
-      }, this.autoChange);
-    }
+    this.checkInterval();
   }
 
-  disconnectedCallback() {
+  disconnectedCallback(): void {
     clearInterval(this.intervalID);
   }
 
-  show(i: number) {
+  show(i: number): void {
     this.index = i;
+    this.dispatchEvent(new CustomEvent("change", { detail: i, composed: true }));
   }
 
-  next() {
+  next(): void {
     if (this.index === this.childElementCount - 3) {
       this._doTranslateX("0", true);
       this.show(0);
     } else {
       this.show(this.index + 1);
     }
+    this.checkInterval();
   }
 
-  prev() {
+  prev(): void {
     if (this.index === 0) {
       this._doTranslateX(`-${this.childElementCount - 1}00%`, true);
       this.show(this.children.length - 3);
     } else {
       this.show(this.index - 1);
     }
+    this.checkInterval();
   }
 
-  protected _doTranslateX(xValue: string, noTransition?: boolean) {
+  protected _doTranslateX(xValue: string, noTransition?: boolean): void {
     this._moveRoot.style.transform = `translateX(${xValue})`;
     if (noTransition) {
-      this._moveRoot.style.transition = `none`;
+      this._moveRoot.style.transition = "none";
     }
     this._moveRoot.getBoundingClientRect();
   }
+
+  checkInterval(): void {
+    if (this.autoChange) {
+      if (this.intervalID) {
+        clearInterval(this.intervalID);
+      }
+      this.intervalID = setInterval(() => {
+        this.next();
+      }, this.autoChange);
+    }
+  }
 }
 
 export default Carousel;
+export { Carousel };