godown 3.0.0-canary.0 → 3.0.0-canary.10

package/dev/components/breath.js

@@ -0,0 +1,135 @@
+import { __decorate } from "tslib";
+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 { property } from "lit/decorators.js";
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+const defineName = "breath";
+const cssScope = scopePrefix(defineName);
+/**
+ * {@linkcode Breath} render the text with a breathing effect.
+ *
+ * Dynamically generate a breathing effect based on the length of the split text.
+ *
+ * If there is not enough CSS variable, overrun elements will use the.
+ *
+ * godown was a css library in its earliest days,
+ * and this is the component version of its first effect.
+ *
+ * Inspired by Vercel home page (2023).
+ *
+ * @slot - Breathing parts.
+ * @category effect
+ */
+let Breath = class Breath extends GlobalStyle {
+    render() {
+        const texts = this.getTexts();
+        return [
+            texts.map(this.renderText),
+            htmlStyle(this.computeStyle(texts.length)),
+        ];
+    }
+    renderText(text) {
+        return html `<span class="rel">
+      <span class="nocolor">${text}</span>
+      <span class="colorful">${text}</span>
+    </span>`;
+    }
+    getTexts() {
+        return Array.isArray(this.text) ? this.text : (this.text || this.textContent).split(/\s+/).filter((x) => x);
+    }
+    computeStyle(len) {
+        const gap = 100 / 2 / len;
+        const duration = this.parseDuration() || len * 2 + 2;
+        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;
+            })());
+    }
+    parseDuration() {
+        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;
+            }
+        }
+    }
+};
+__decorate([
+    property()
+], Breath.prototype, "text", void 0);
+__decorate([
+    property()
+], Breath.prototype, "duration", void 0);
+Breath = __decorate([
+    godown(defineName),
+    styles(css `
+    :host {
+      ${cssScope}--deg: 60deg;
+      ${cssScope}--1-1: var(${cssGlobalVars._colors.red[5]});
+      ${cssScope}--1-2: var(${cssGlobalVars._colors.yellow[5]});
+      ${cssScope}--2-1: var(${cssGlobalVars._colors.green[5]});
+      ${cssScope}--2-2: var(${cssGlobalVars._colors.purple[5]});
+      ${cssScope}--3-1: var(${cssGlobalVars._colors.blue[5]});
+      ${cssScope}--3-2: var(${cssGlobalVars._colors.pink[5]});
+      ${cssScope}--1: linear-gradient(var(${cssScope}--deg), var(${cssScope}--1-1), var(${cssScope}--1-2));
+      ${cssScope}--2: linear-gradient(var(${cssScope}--deg), var(${cssScope}--2-1), var(${cssScope}--2-2));
+      ${cssScope}--3: linear-gradient(var(${cssScope}--deg), var(${cssScope}--3-1), var(${cssScope}--3-2));
+    }
+  `, css `
+    :host {
+      display: flex;
+      margin: auto;
+      width: -moz-fit-content;
+      width: fit-content;
+      font-size: 2em;
+      align-items: center;
+      direction: ltr;
+    }
+
+    ::selection {
+      background: none;
+    }
+
+    .rel {
+      position: relative;
+      font-weight: 800;
+      font-size: inherit;
+      letter-spacing: -0.05em;
+    }
+  `, css `
+    .nocolor,
+    .colorful {
+      padding: 0 0.05em;
+      box-sizing: border-box;
+      display: inline-block;
+      animation-iteration-count: infinite;
+      -webkit-text-fill-color: transparent;
+      -webkit-background-clip: text !important;
+      background-clip: text !important;
+    }
+    .colorful {
+      opacity: 0;
+      animation-name: colorfulN;
+    }
+    .nocolor {
+      position: absolute;
+      top: 0;
+      background: var(${cssGlobalVars.clipBackground});
+    }
+  `)
+], Breath);
+export default Breath;
+//# sourceMappingURL=breath.js.map

package/dev/components/breath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breath.js","sourceRoot":"","sources":["../../src/components/breath.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAElF,MAAM,UAAU,GAAG,QAAQ,CAAC;AAC5B,MAAM,QAAQ,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAEzC;;;;;;;;;;;;;;GAcG;AA6DH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,WAAW;IAepB,MAAM;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,OAAO;YACL,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;YAC1B,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAC3C,CAAC;IACJ,CAAC;IAES,UAAU,CAAC,IAAY;QAC/B,OAAO,IAAI,CAAA;8BACe,IAAI;+BACH,IAAI;YACvB,CAAC;IACX,CAAC;IAES,QAAQ;QAChB,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9G,CAAC;IAES,YAAY,CAAC,GAAW;QAChC,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;QAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;QAErD,OAAO,CACL,gCAAgC,QAAQ,KAAK;cAC3C,2BAA2B,GAAG,GAAG,CAAC,gBAAgB,GAAG,KAAK,GAAG,GAAG,CAAC,gBAAgB;cACjF,CAAC,GAAG,EAAE;gBACN,IAAI,MAAM,GAAG,EAAE,CAAC;gBAChB,KAAK,IAAI,MAAM,GAAG,CAAC,EAAE,MAAM,IAAI,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC;oBAC7C,MAAM,KAAK,GAAG,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;oBACnD,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;oBAC7C,MAAM;wBACJ,kBAAkB,MAAM,+BAA+B,KAAK,oBAAoB,QAAQ,KAAK,MAAM,QAAQ,QAAQ,KAAK,aAAa,MAAM,CAAC;gBAChJ,CAAC;gBACD,OAAO,MAAM,CAAC;YAChB,CAAC,CAAC,EAAE,CACL,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC3B,OAAO,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3C,CAAC;iBAAM,IAAI,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBACnC,OAAO,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;YAClD,CAAC;QACH,CAAC;IACH,CAAC;CACF,CAAA;AAzDC;IADC,QAAQ,EAAE;oCACa;AAMxB;IADC,QAAQ,EAAE;wCACM;AAbb,MAAM;IA5DX,MAAM,CAAC,UAAU,CAAC;IAClB,MAAM,CACL,GAAG,CAAA;;QAEG,QAAQ;QACR,QAAQ,cAAc,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;QAClD,QAAQ,cAAc,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,QAAQ,cAAc,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;QACpD,QAAQ,cAAc,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;QACrD,QAAQ,cAAc,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACnD,QAAQ,cAAc,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACnD,QAAQ,4BAA4B,QAAQ,eAAe,QAAQ,eAAe,QAAQ;QAC1F,QAAQ,4BAA4B,QAAQ,eAAe,QAAQ,eAAe,QAAQ;QAC1F,QAAQ,4BAA4B,QAAQ,eAAe,QAAQ,eAAe,QAAQ;;GAE/F,EACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBF,EACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;wBAkBmB,aAAa,CAAC,cAAc;;GAEjD,CACF;GACK,MAAM,CAgEX;AAED,eAAe,MAAM,CAAC"}

package/dev/components/button.d.ts

@@ -0,0 +1,52 @@
+import { GlobalStyle } from "../core/global-style.js";
+declare const colors: Record<"teal" | "blue" | "green" | "red" | "purple" | "orange" | "yellow" | "pink" | "gray" | "white" | "black", string>;
+/**
+ * {@linkcode Button} renders a button.
+ *
+ * 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
+ */
+declare class Button extends GlobalStyle {
+    /**
+     * Whether to disable this element.
+     */
+    disabled: boolean;
+    /**
+     * Display ghost.
+     */
+    ghost: boolean;
+    /**
+     * Whether this element is active or not.
+     */
+    active: boolean;
+    /**
+     * Display rounded.
+     */
+    round: boolean;
+    /**
+     * The primary color.
+     */
+    color: "none" | keyof typeof colors;
+    /**
+     * Content text.
+     */
+    content: string;
+    protected _modalRoot: HTMLElement;
+    protected _root: HTMLElement;
+    protected render(): import("lit").TemplateResult<1>;
+    focus(): void;
+    blur(): void;
+    firstUpdated(): void;
+    protected _handelClick(e: MouseEvent): void;
+    protected _handleModal(e: MouseEvent): void;
+    nextColor(): "teal" | "blue" | "green" | "red" | "purple" | "orange" | "yellow" | "pink" | "gray" | "white" | "black" | "none";
+}
+export default Button;
+//# sourceMappingURL=button.d.ts.map

package/dev/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AASA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAQlF,QAAA,MAAM,MAAM,0HA6DX,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,cA8FM,MAAO,SAAQ,WAAW;IAC9B;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,KAAK,EAAE,OAAO,CAAC;IAEf;;OAEG;IAEH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IAEH,KAAK,EAAE,OAAO,CAAC;IAEf;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,MAAM,OAAO,MAAM,CAAW;IAE9C;;OAEG;IAEH,OAAO,EAAE,MAAM,CAAC;IAGhB,SAAS,CAAC,UAAU,EAAE,WAAW,CAAC;IAElC,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC;IAE7B,SAAS,CAAC,MAAM;IAUhB,KAAK;IAQL,IAAI;IAKJ,YAAY;IAIZ,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IASpC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IAepC,SAAS;CAGV;AAED,eAAe,MAAM,CAAC"}

package/dev/components/button.js

@@ -0,0 +1,260 @@
+import { __decorate } from "tslib";
+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 { property } from "lit/decorators.js";
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+const protoName = "button";
+const cssScope = scopePrefix(protoName);
+const whiteFont = cssGlobalVars.white;
+const blackFont = cssGlobalVars.black;
+const colors = constructCSSObject(["color", "background", "gradients"].map((k) => `${cssScope}--${k}`), {
+    black: [
+        whiteFont, // color
+        cssGlobalVars._colors.darkgray[7], // background
+        cssGlobalVars._colors.darkgray[5], // gradients
+    ],
+    gray: [
+        whiteFont, // color
+        cssGlobalVars._colors.darkgray[1], // background
+        cssGlobalVars._colors.lightgray[8], // gradients
+    ],
+    white: [
+        blackFont, // color
+        cssGlobalVars._colors.lightgray[3], // background
+        cssGlobalVars._colors.lightgray[0], // gradients
+    ],
+    blue: [
+        whiteFont, // color
+        cssGlobalVars._colors.blue[6], // background
+        cssGlobalVars._colors.blue[4], // gradients
+    ],
+    green: [
+        whiteFont, // color
+        cssGlobalVars._colors.green[6], // background
+        cssGlobalVars._colors.green[4], // gradients
+    ],
+    red: [
+        whiteFont, // color
+        cssGlobalVars._colors.red[6], // background
+        cssGlobalVars._colors.red[4], // gradients
+    ],
+    orange: [
+        whiteFont, // color
+        cssGlobalVars._colors.orange[6], // background
+        cssGlobalVars._colors.orange[4], // gradients
+    ],
+    pink: [
+        whiteFont, // color
+        cssGlobalVars._colors.pink[6], // background
+        cssGlobalVars._colors.pink[4], // gradients
+    ],
+    purple: [
+        whiteFont, // color
+        cssGlobalVars._colors.purple[6], // background
+        cssGlobalVars._colors.purple[4], // gradients
+    ],
+    yellow: [
+        blackFont, // color
+        cssGlobalVars._colors.yellow[6], // background
+        cssGlobalVars._colors.yellow[4], // gradients
+    ],
+    teal: [
+        whiteFont, // color
+        cssGlobalVars._colors.teal[6], // background
+        cssGlobalVars._colors.teal[4], // gradients
+    ],
+}, () => `:host`, (prop) => toVar(prop));
+/**
+ * {@linkcode Button} renders a button.
+ *
+ * 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
+ */
+let Button = class Button extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        /**
+         * The primary color.
+         */
+        this.color = "black";
+    }
+    render() {
+        const color = this.nextColor();
+        return html `<div part="root">
+      <span part="modal-root"></span>
+      <div part="content">
+        ${[this.content || htmlSlot(), htmlStyle(colors[color])]}
+      </div>
+    </div>`;
+    }
+    focus() {
+        if (this.disabled) {
+            return;
+        }
+        this.active = true;
+        super.focus();
+    }
+    blur() {
+        this.active = false;
+        super.blur();
+    }
+    firstUpdated() {
+        this.events.add(this, "click", this._handelClick, true);
+    }
+    _handelClick(e) {
+        if (this.disabled) {
+            e.stopPropagation();
+            e.preventDefault();
+            return;
+        }
+        this._handleModal(e);
+    }
+    _handleModal(e) {
+        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`;
+        modal.style.height = size;
+        modal.style.width = size;
+        modal.style.left = `${e.clientX - rect.left}px`;
+        modal.style.top = `${e.clientY - rect.y}px`;
+        modal.style.animationName = "kf";
+        this._modalRoot.appendChild(modal);
+        modal.addEventListener("animationend", () => modal.remove(), { once: true });
+    }
+    nextColor() {
+        return this.color;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "ghost", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "round", void 0);
+__decorate([
+    property({ reflect: true })
+], Button.prototype, "color", void 0);
+__decorate([
+    property()
+], Button.prototype, "content", void 0);
+__decorate([
+    part("modal-root")
+], Button.prototype, "_modalRoot", void 0);
+__decorate([
+    part("root")
+], Button.prototype, "_root", void 0);
+Button = __decorate([
+    godown(protoName),
+    styles(css `
+    :host(:not([disabled]):active) {
+      transform: scale(var(${cssScope}--focus-scale));
+    }
+
+    :host([round]) {
+      ${cssScope}--padding-x: .75em;
+      border-radius: calc(infinity * 1px);
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+      filter: brightness(0.85);
+    }
+
+    :host([ghost]) {
+      ${cssScope}--modal-background: var(${cssScope}--ghost-color);
+      box-shadow:inset 0px 0px 0px var(${cssScope}--ghost-width) var(${cssScope}--ghost-color);
+      color: var(${cssScope}--ghost-color);
+      background: transparent;
+    }
+  `, css `
+    :host {
+      ${cssScope}--padding-x: .5em;
+      ${cssScope}--padding-y: .15em;
+      ${cssScope}--padding: var(${cssScope}--padding-y) var(${cssScope}--padding-x);
+      ${cssScope}--modal-animation-duration: 1s;
+      ${cssScope}--ghost-width: .08em;
+      ${cssScope}--focus-scale: .97;
+      ${cssScope}--deg: 45deg;
+      ${cssScope}--ghost-color:var(${cssScope}--background);
+      color: var(${cssScope}--color, inherit);
+      background: linear-gradient(
+        var(${cssScope}--deg),
+        var(${cssScope}--background),
+        var(${cssScope}--gradients, var(${cssScope}--background))
+      );
+      border-radius: 0.3em;
+      width: -moz-fit-content;
+      width: fit-content;
+      transition: 0.1s;
+      display: block;
+      overflow: hidden;
+      text-align: center;
+      padding: 0 !important;
+      cursor: pointer;
+    }
+
+    [part=root] {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      position: relative;
+      transition: none;
+      user-select: none;
+      border-radius: inherit;
+      transition-duration: inherit;
+    }
+
+    [part=content] {
+      padding: var(${cssScope}--padding);
+    }
+
+    i {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      visibility: visible;
+      pointer-events: none;
+      transform-origin: 0 0;
+      background: var(${cssScope}--modal-background, currentColor);
+      animation-duration: var(${cssScope}--modal-animation-duration);
+    }
+
+    @keyframes kf {
+      0% {
+        transform: scale(0) translate(-50%, -50%);
+        opacity: var(${cssScope}--modal-opacity, 0.1);
+      }
+      80% {
+        transform: scale(1) translate(-50%, -50%);
+      }
+      to {
+        opacity: 0;
+      }
+    }
+  `)
+], Button);
+export default Button;
+//# sourceMappingURL=button.js.map

package/dev/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"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"}

package/dev/components/card.d.ts

@@ -0,0 +1,19 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Card} renders a card.
+ *
+ * This may be similar to {@linkcode Layout},
+ * but it needs to be specified to enable header and footer.
+ *
+ * @slot - The main content of the card.
+ * @slot header - The header of the card.
+ * @slot footer - The footer of the card.
+ * @category display
+ */
+declare class Card extends GlobalStyle {
+    footer: boolean;
+    header: boolean;
+    protected render(): (string | import("lit").TemplateResult<1>)[];
+}
+export default Card;
+//# sourceMappingURL=card.d.ts.map

package/dev/components/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.ts"],"names":[],"mappings":"AAMA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAOlF;;;;;;;;;;GAUG;AACH,cAuCM,IAAK,SAAQ,WAAW;IAE5B,MAAM,UAAS;IAGf,MAAM,UAAS;IAEf,SAAS,CAAC,MAAM;CAOjB;AAED,eAAe,IAAI,CAAC"}

package/dev/components/card.js

@@ -0,0 +1,81 @@
+import { __decorate } from "tslib";
+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 } from "lit";
+import { property } from "lit/decorators.js";
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+const protoName = "card";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Card} renders a card.
+ *
+ * This may be similar to {@linkcode Layout},
+ * but it needs to be specified to enable header and footer.
+ *
+ * @slot - The main content of the card.
+ * @slot header - The header of the card.
+ * @slot footer - The footer of the card.
+ * @category display
+ */
+let Card = class Card extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        this.footer = false;
+        this.header = false;
+    }
+    render() {
+        return [
+            this.header ? htmlSlot("header") : "",
+            htmlSlot(),
+            this.footer ? htmlSlot("footer") : "",
+        ];
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], Card.prototype, "footer", void 0);
+__decorate([
+    property({ type: Boolean })
+], Card.prototype, "header", void 0);
+Card = __decorate([
+    godown(protoName),
+    styles(css `
+    :host {
+      ${cssScope}--background: var(${cssGlobalVars.background});
+      ${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;
+    }
+
+    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);
+    }
+  `)
+], Card);
+export default Card;
+//# sourceMappingURL=card.js.map

package/dev/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAIlF,MAAM,SAAS,GAAG,MAAM,CAAC;AACzB,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;;;;;;;GAUG;AAwCH,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,WAAW;IAA9B;;QAEE,WAAM,GAAG,KAAK,CAAC;QAGf,WAAM,GAAG,KAAK,CAAC;IASjB,CAAC;IAPW,MAAM;QACd,OAAO;YACL,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;YACrC,QAAQ,EAAE;YACV,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;SACtC,CAAC;IACJ,CAAC;CACF,CAAA;AAZC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCACb;AALX,IAAI;IAvCT,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CACL,GAAG,CAAA;;QAEG,QAAQ,qBAAqB,aAAa,CAAC,UAAU;QACrD,QAAQ;QACR,QAAQ;QACR,QAAQ,4BAA4B,aAAa,CAAC,OAAO;QACzD,QAAQ;mBACG,aAAa,CAAC,UAAU;wBACnB,QAAQ;0BACN,QAAQ;;;;;;;;;;qBAUb,QAAQ;;;;;0BAKH,QAAQ;;;;;8BAKJ,QAAQ;;;;iCAIL,QAAQ;;GAEtC,CACF;GACK,IAAI,CAcT;AAED,eAAe,IAAI,CAAC"}

package/dev/components/carousel.d.ts

@@ -0,0 +1,41 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Carousel} make the content display as a carousel.
+ *
+ * When this component is `firstUpdated`,
+ * clone the first and last element and make the matching element visible when switching index.
+ *
+ * Child elements should maintain the same size.
+ *
+ * If no width, it will be the width of the first element.
+ *
+ * @slot - Carousel items, should maintain the same size.
+ * @category display
+ */
+declare class Carousel extends GlobalStyle {
+    /**
+     * The index of the element is displayed for the first time.
+     */
+    index: number;
+    /**
+     * If autoChange > 0, the rotation will be automated.
+     */
+    autoChange: number;
+    /**
+     * Element width.
+     */
+    width: string;
+    protected _moveRoot: HTMLElement;
+    protected intervalID: number;
+    private _cloneFirst;
+    private _cloneLast;
+    protected render(): (symbol | import("lit").TemplateResult<1>)[];
+    protected firstUpdated(): Promise<void>;
+    disconnectedCallback(): void;
+    show(i: number): void;
+    next(): void;
+    prev(): void;
+    protected _doTranslateX(xValue: string, noTransition?: boolean): void;
+}
+export default Carousel;
+//# sourceMappingURL=carousel.d.ts.map

package/dev/components/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAItD;;;;;;;;;;;;GAYG;AACH,cA8CM,QAAS,SAAQ,WAAW;IAChC;;OAEG;IAEH,KAAK,SAAK;IAEV;;OAEG;IAEH,UAAU,SAAK;IAEf;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAGd,SAAS,CAAC,SAAS,EAAE,WAAW,CAAC;IAEjC,SAAS,CAAC,UAAU,EAAE,MAAM,CAAC;IAE7B,OAAO,CAAC,WAAW,CAA0B;IAE7C,OAAO,CAAC,UAAU,CAA0B;IAE5C,SAAS,CAAC,MAAM;cAWA,YAAY;IAqB5B,oBAAoB;IAIpB,IAAI,CAAC,CAAC,EAAE,MAAM;IAId,IAAI;IASJ,IAAI;IASJ,SAAS,CAAC,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO;CAO/D;AAED,eAAe,QAAQ,CAAC"}