godown 2.7.7 → 3.0.0-canary.1

package/dev/carousel.js

@@ -0,0 +1,4 @@
+import Carousel from "./components/carousel.js";
+Carousel.define();
+export default Carousel;
+//# sourceMappingURL=carousel.js.map

package/dev/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../src/carousel.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAEhD,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,CAAC"}

package/dev/components/alert.d.ts

@@ -0,0 +1,50 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Alert} renders a alert.
+ *
+ * @slot - Alert content.
+ * @slot title - Alert title.
+ * @slot icon - Alert icon.
+ * @category feedback
+ */
+declare class Alert extends GlobalStyle {
+    /**
+     * If it is a legal value, the icon and preset color will be rendered.
+     */
+    call: "tip" | "success" | "info" | "warning" | "danger" | "error" | "help" | "deprecated";
+    /**
+     * The tone of the component.
+     * Overrides the color of the call.
+     */
+    color: "white" | "black" | "gray" | "green" | "teal" | "blue" | "red" | "purple" | "orange" | "yellow" | "pink";
+    /**
+     * Close delay, if 0, it will not be closed automatically.
+     */
+    autoclose: number;
+    /**
+     * The title is bold and the icon height is the same as it.
+     */
+    title: string;
+    /**
+     * Content, if zero value, will be rendered as an unnamed slot.
+     */
+    content: string;
+    /**
+     * Set true to hide the close button.
+     *
+     * The behavior may change due to the {@linkcode variant} property
+     */
+    hideClose: boolean;
+    /**
+     * Alert variant, if set to `blockquote`, the alert will be rendered as a blockquote.
+     *
+     * If variant is `"blockquote"`, hide the close button.
+     */
+    variant: "blockquote" | "dark" | "light";
+    protected render(): import("lit").TemplateResult<1>;
+    close(): void;
+    protected firstUpdated(): void;
+    static alert(root: HTMLElement, option: Partial<Alert>): Alert;
+}
+export default Alert;
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/components/alert.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAwFlF;;;;;;;GAOG;AACH,cAqEM,KAAM,SAAQ,WAAW;IAC7B;;OAEG;IAEH,IAAI,EAAE,KAAK,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAAC;IAE1F;;;OAGG;IAEH,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEhH;;OAEG;IAEH,SAAS,SAAK;IAEd;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IAIH,SAAS,UAAS;IAElB;;;;OAIG;IAEH,OAAO,EAAE,YAAY,GAAG,MAAM,GAAG,OAAO,CAAU;IAElD,SAAS,CAAC,MAAM;IAkBhB,KAAK;IAKL,SAAS,CAAC,YAAY;IAMtB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK;CAM/D;AAED,eAAe,KAAK,CAAC"}

package/dev/components/alert.js

@@ -0,0 +1,234 @@
+import { __decorate } from "tslib";
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { conditionIf } from "@godown/element/directives/condition-if.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { constructCSS } from "@godown/element/tools/css.js";
+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";
+import iconLightbulb from "@godown/f7-icon/icons/lightbulb.js";
+import iconQuestionCircle from "@godown/f7-icon/icons/question-circle.js";
+import iconSlashCircle from "@godown/f7-icon/icons/slash-circle.js";
+import iconXmark from "@godown/f7-icon/icons/xmark.js";
+import iconXmarkCircle from "@godown/f7-icon/icons/xmark-circle.js";
+import { css, html, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+const protoName = "alert";
+const cssScope = scopePrefix(protoName);
+const vars = ["color", "background"].map((v) => `${cssScope}--${v}`);
+const genDark = (key) => {
+    return [cssGlobalVars._colors[key][5], cssGlobalVars._colors[key][9]];
+};
+const darkStyles = constructCSS(vars, {
+    green: genDark("green"),
+    blue: genDark("blue"),
+    orange: genDark("orange"),
+    red: genDark("red"),
+    yellow: genDark("yellow"),
+    purple: genDark("purple"),
+    teal: genDark("teal"),
+    pink: genDark("pink"),
+    gray: [cssGlobalVars._colors.lightgray[5], cssGlobalVars._colors.darkgray[5]],
+    white: [cssGlobalVars._colors.lightgray[2], cssGlobalVars._colors.darkgray[7]],
+    black: [cssGlobalVars._colors.darkgray[8], cssGlobalVars._colors.lightgray[5]],
+}, (color) => `[color=${color}]`, (prop) => `var(${prop})`);
+const genLight = (key) => {
+    return [cssGlobalVars._colors[key][6], cssGlobalVars._colors[key][0]];
+};
+const lightStyles = constructCSS(vars, {
+    green: genLight("green"),
+    blue: genLight("blue"),
+    orange: genLight("orange"),
+    red: genLight("red"),
+    yellow: genLight("yellow"),
+    purple: genLight("purple"),
+    teal: genLight("teal"),
+    pink: genLight("pink"),
+    gray: [cssGlobalVars._colors.darkgray[5], cssGlobalVars._colors.lightgray[7]],
+    white: [cssGlobalVars._colors.lightgray[0], cssGlobalVars._colors.darkgray[0]],
+    black: [cssGlobalVars._colors.darkgray[7], cssGlobalVars._colors.lightgray[3]],
+}, (color) => `[variant="light"][color=${color}]`, (prop) => `var(${prop})`);
+const calls = {
+    tip: {
+        color: "teal",
+        icon: iconLightbulb,
+    },
+    success: {
+        color: "green",
+        icon: iconCheckAltCircle,
+    },
+    info: {
+        color: "blue",
+        icon: iconInfoCircle,
+    },
+    warning: {
+        color: "orange",
+        icon: iconExclamationCircle,
+    },
+    danger: {
+        color: "red",
+        icon: iconXmarkCircle,
+    },
+    error: {
+        color: "red",
+        icon: iconXmarkCircle,
+    },
+    help: {
+        color: "purple",
+        icon: iconQuestionCircle,
+    },
+    deprecated: {
+        color: "gray",
+        icon: iconSlashCircle,
+    },
+};
+/**
+ * {@linkcode Alert} renders a alert.
+ *
+ * @slot - Alert content.
+ * @slot title - Alert title.
+ * @slot icon - Alert icon.
+ * @category feedback
+ */
+let Alert = class Alert extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        /**
+         * Close delay, if 0, it will not be closed automatically.
+         */
+        this.autoclose = 0;
+        /**
+         * Set true to hide the close button.
+         *
+         * The behavior may change due to the {@linkcode variant} property
+         */
+        this.hideClose = false;
+        /**
+         * Alert variant, if set to `blockquote`, the alert will be rendered as a blockquote.
+         *
+         * If variant is `"blockquote"`, hide the close button.
+         */
+        this.variant = "dark";
+    }
+    render() {
+        const color = this.call ? this.color || calls[this.call].color : this.color;
+        const icon = this.call ? calls[this.call].icon() : htmlSlot("icon");
+        return html `<div part="root" variant="${this.variant}" color="${color}">
+      <div part="icon">${icon}</div>
+      <div part="content">
+        <strong part="title">${this.title || htmlSlot("title")}</strong>
+        ${this.content || htmlSlot()}
+      </div>
+    ${conditionIf(!this.hideClose && this.variant !== "blockquote", html `<div part="close" @click="${this.close}">${iconXmark()}</div>`)}
+    </div>`;
+    }
+    close() {
+        this.remove();
+        this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
+    }
+    firstUpdated() {
+        if (this.autoclose) {
+            setTimeout(() => this.close(), this.autoclose);
+        }
+    }
+    static alert(root, option) {
+        const ai = new this();
+        Object.assign(ai, option);
+        root.appendChild(ai);
+        return ai;
+    }
+};
+__decorate([
+    property()
+], Alert.prototype, "call", void 0);
+__decorate([
+    property()
+], Alert.prototype, "color", void 0);
+__decorate([
+    property({ type: Number })
+], Alert.prototype, "autoclose", void 0);
+__decorate([
+    property()
+], Alert.prototype, "title", void 0);
+__decorate([
+    property()
+], Alert.prototype, "content", void 0);
+__decorate([
+    property({
+        type: Boolean,
+    })
+], Alert.prototype, "hideClose", void 0);
+__decorate([
+    property()
+], Alert.prototype, "variant", void 0);
+Alert = __decorate([
+    godown(protoName),
+    styles(unsafeCSS(darkStyles), unsafeCSS(lightStyles), css `
+    :host {
+      border-radius: var(${cssScope}--border-radius);
+      ${cssScope}--border-radius: .25em;
+      ${cssScope}--border-width: .075em;
+      ${cssScope}--blockquote-width: .2em;
+      ${cssScope}--padding: .5em;
+      display: block;
+      width: 100%;
+    }
+
+    [part="root"] {
+      --color: var(${cssScope}--color);
+      color: var(--color);
+      transition: 0.25s;
+      display: flex;
+      justify-content: space-between;
+      padding: var(${cssScope}--padding);
+      border-radius: inherit;
+      border: var(${cssScope}--border-width) solid var(--color);
+      background: var(${cssScope}--background);
+    }
+
+    [variant="blockquote"] {
+      border-radius: 0;
+      border-left: var(${cssScope}--blockquote-width) solid var(--color);
+      border-bottom: none;
+      border-right: none;
+      border-top: none;
+      background: transparent;
+    }
+
+    [part="content"]{
+      color: var(--color);
+    }
+
+    [part="root"] {
+      display: grid;
+      align-items: center;
+      grid-template-columns: auto 1fr auto;
+      grid-template-rows: auto 1fr;
+    }
+
+    [part="title"] {
+      line-height: 2em;
+    }
+
+    [part="icon"] {
+      display: inline-grid;
+      align-items: center;
+      height: 2em;
+    }
+
+    [part="icon"] svg {
+      margin-right: .5em;
+      width: 1.25em;
+      height: 1.25em;
+    }
+
+    [part="content"] {
+      grid-row: span 2 / span 2;
+      line-height: 1.5em;
+    }
+    `)
+], Alert);
+export default Alert;
+//# sourceMappingURL=alert.js.map

package/dev/components/alert.js.map

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

package/dev/components/avatar.d.ts

@@ -0,0 +1,26 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@linkcode Avatar} renders a avatar.
+ *
+ * Renders as an image if it has a src property,
+ * otherwise falls back to name or nameless slot.
+ *
+ * @category display
+ */
+declare class Avatar extends GlobalStyle {
+    /**
+     * Image src.
+     */
+    src: string | undefined | null;
+    /**
+     * If the image is not available, the {@linkcode Avatar.format} will be displayed.
+     */
+    name: string;
+    round: boolean;
+    protected render(): import("lit").TemplateResult<1>;
+    private _renderAvatar;
+    format(): string;
+    _handleError(): void;
+}
+export default Avatar;
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKnE;;;;;;;GAOG;AACH,cAoCM,MAAO,SAAQ,WAAW;IAC9B;;OAEG;IAEH,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B;;OAEG;IAEH,IAAI,SAAM;IAGV,KAAK,UAAS;IAEd,SAAS,CAAC,MAAM;IAIhB,OAAO,CAAC,aAAa;IAUrB,MAAM;IAIN,YAAY;CAGb;AAED,eAAe,MAAM,CAAC"}

package/dev/components/avatar.js

@@ -0,0 +1,91 @@
+import { __decorate } from "tslib";
+import { godown, styles } from "@godown/element/decorators/index.js";
+import { htmlSlot } from "@godown/element/directives/index.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { GlobalStyle, scopePrefix } from "../core/global-style.js";
+const protoName = "avatar";
+const cssScope = scopePrefix(protoName);
+/**
+ * {@linkcode Avatar} renders a avatar.
+ *
+ * Renders as an image if it has a src property,
+ * otherwise falls back to name or nameless slot.
+ *
+ * @category display
+ */
+let Avatar = class Avatar extends GlobalStyle {
+    constructor() {
+        super(...arguments);
+        /**
+         * If the image is not available, the {@linkcode Avatar.format} will be displayed.
+         */
+        this.name = "";
+        this.round = false;
+    }
+    render() {
+        return html `<div part="root">${this._renderAvatar()}</div>`;
+    }
+    _renderAvatar() {
+        if (this.src) {
+            return html `<img part="image" src="${this.src}" @error=${this._handleError} alt="${this.name}">`;
+        }
+        if (this.name) {
+            return html `<span part="name">${this.format()}</span>`;
+        }
+        return htmlSlot();
+    }
+    format() {
+        return this.name;
+    }
+    _handleError() {
+        this.src = undefined;
+    }
+};
+__decorate([
+    property()
+], Avatar.prototype, "src", void 0);
+__decorate([
+    property()
+], Avatar.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], Avatar.prototype, "round", void 0);
+Avatar = __decorate([
+    godown(protoName),
+    styles(css `
+    :host {
+      ${cssScope}--size: 2em;
+      width: var(${cssScope}--size);
+      height: var(${cssScope}--size);
+      display: inline-block;
+      vertical-align: bottom;
+    }
+
+    :host([round]){
+      border-radius:50%;
+    }
+
+    [part="image"] {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    [part="root"] {
+      overflow: hidden;
+      position: relative;
+      border-radius: inherit;
+      width: 100%;
+      height: 100%;
+    }
+
+    [part="root"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `)
+], Avatar);
+export default Avatar;
+//# sourceMappingURL=avatar.js.map

package/dev/components/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/components/avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,SAAS,GAAG,QAAQ,CAAC;AAC3B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;;;;GAOG;AAqCH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,WAAW;IAAhC;;QAME;;WAEG;QAEH,SAAI,GAAG,EAAE,CAAC;QAGV,UAAK,GAAG,KAAK,CAAC;IAuBhB,CAAC;IArBW,MAAM;QACd,OAAO,IAAI,CAAA,oBAAoB,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;IAC9D,CAAC;IAEO,aAAa;QACnB,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACb,OAAO,IAAI,CAAA,0BAA0B,IAAI,CAAC,GAAG,YAAY,IAAI,CAAC,YAAY,SAAS,IAAI,CAAC,IAAI,IAAI,CAAC;QACnG,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAA,qBAAqB,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;QACzD,CAAC;QACD,OAAO,QAAQ,EAAE,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,YAAY;QACV,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC;IACvB,CAAC;CACF,CAAA;AA/BC;IADC,QAAQ,EAAE;mCACoB;AAK/B;IADC,QAAQ,EAAE;oCACD;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACd;AAbV,MAAM;IApCX,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CACL,GAAG,CAAA;;QAEG,QAAQ;mBACG,QAAQ;oBACP,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BzB,CACF;GACK,MAAM,CAoCX;AAED,eAAe,MAAM,CAAC"}

package/dev/components/breath.d.ts

@@ -0,0 +1,34 @@
+import { GlobalStyle } from "../core/global-style.js";
+/**
+ * {@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).
+ *
+ * @category effect
+ */
+declare class Breath extends GlobalStyle {
+    /**
+     * Strings or array of strings,
+     * if array, divided each element into chunks,
+     * otherwise split strings by whitespace.
+     */
+    text: string | string[];
+    /**
+     * Effect duration, ending in s or ms.
+     */
+    duration: string;
+    protected render(): (import("lit").TemplateResult<1> | import("lit").TemplateResult<1>[])[];
+    protected renderText(text: string): import("lit").TemplateResult<1>;
+    protected getTexts(): string[];
+    protected computeStyle(len: number): string;
+    protected parseDuration(): number;
+}
+export default Breath;
+//# sourceMappingURL=breath.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breath.d.ts","sourceRoot":"","sources":["../../src/components/breath.ts"],"names":[],"mappings":"AAMA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKlF;;;;;;;;;;;;;GAaG;AACH,cA2DM,MAAO,SAAQ,WAAW;IAC9B;;;;OAIG;IAEH,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB;;OAEG;IAEH,QAAQ,EAAE,MAAM,CAAC;IAEjB,SAAS,CAAC,MAAM;IAQhB,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM;IAOjC,SAAS,CAAC,QAAQ,IAAI,MAAM,EAAE;IAI9B,SAAS,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM;IAoBlC,SAAS,CAAC,aAAa;CAUxB;AAED,eAAe,MAAM,CAAC"}

package/dev/components/breath.js

@@ -0,0 +1,133 @@
+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).
+ *
+ * @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 = -1 * duration / len * (len - (number - 2));
+                    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;
+    }
+
+    ::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":"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"}

package/dev/components/button.d.ts

@@ -0,0 +1,45 @@
+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}.
+ *
+ * @category input
+ */
+declare class Button extends GlobalStyle {
+    /**
+     * Whether to disable this element.
+     */
+    disabled: boolean;
+    /**
+     * Invert font and background color.
+     */
+    ghost: boolean;
+    /**
+     * Whether this element is active or not.
+     */
+    active: boolean;
+    /**
+     * Enables rounded corners to appear capsule shaped.
+     */
+    round: boolean;
+    /**
+     * The primary color.
+     */
+    color: "none" | keyof typeof colors;
+    /**
+     * Text inside.
+     */
+    text: string;
+    _modalRoot: HTMLElement;
+    _root: HTMLElement;
+    static colors: Record<"teal" | "blue" | "green" | "red" | "purple" | "orange" | "yellow" | "pink" | "gray" | "white" | "black", string>;
+    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;AAYlF,QAAA,MAAM,MAAM,0HA6DX,CAAC;AAEF;;;;GAIG;AACH,cA8FM,MAAO,SAAQ,WAAW;IAC9B;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IAEH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IAEH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IAEH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,MAAM,OAAO,MAAM,CAAW;IAC9C;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IAGb,UAAU,EAAE,WAAW,CAAC;IAExB,KAAK,EAAE,WAAW,CAAC;IAEnB,MAAM,CAAC,MAAM,2HAAU;IAEvB,SAAS,CAAC,MAAM;IAWhB,KAAK;IAOL,IAAI;IAIJ,YAAY;IAIZ,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IASpC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IAepC,SAAS;CAGV;AAED,eAAe,MAAM,CAAC"}