godown 2.7.5 → 2.7.7

package/web-components/skeleton/skeleton.js

@@ -1,14 +1,21 @@
 import { __decorate } from "tslib";
-import { css, html, property, state } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot, svgImage } from "../../lib/templates.js";
-import { createScope, cssvarValues, GodownElement } from "../../supers/root.js";
-const defineName = "skeleton";
-const cssvarScope = createScope(defineName);
+import { css, html, property, state } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { ifValue } from "../../lib/directives.js";
+import { htmlSlot } from "../../lib/directives.js";
+import { svgImage } from "../../lib/icons.js";
+import { GodownElement } from "../../proto/godown-element.js";
+import { createScope, cssGlobalVars } from "../../styles/global.js";
+const protoName = "skeleton";
+const cssScope = createScope(protoName);
 /**
  * {@linkcode Skeleton} renders a skeleton screen.
  *
  * Inspired by Ant-design.
+ *
+ * @slot loading - The content if loading is true.
+ * @slot - The content if loading is false.
  */
 let Skeleton = class Skeleton extends GodownElement {
     constructor() {
@@ -27,100 +34,14 @@ let Skeleton = class Skeleton extends GodownElement {
         this.loading = true;
     }
     render() {
-        if (this.loading) {
-            return html `<p class="${this.animation}">${this.renderIcon()}</p>`;
-        }
-        return htmlSlot();
-    }
-    renderIcon() {
-        switch (this.type) {
-            case "text":
-                return htmlSlot("icon");
-            case "image":
-                return svgImage();
+        if (!this.loading) {
+            return htmlSlot();
         }
+        return html `<div part="root" class="${this.animation}">
+      ${ifValue(this.type === "image", svgImage(), htmlSlot("loading"))}
+    </div>`;
     }
 };
-Skeleton.styles = [
-    GodownElement.styles,
-    css `
-      :host {
-        display: block;
-        min-height: 1.5em;
-        width: 100%;
-        overflow: hidden;
-        ${cssvarScope}--from: rgb(var(${cssvarValues.textRGB}) / 7.5%);
-        ${cssvarScope}--to: rgb(var(${cssvarValues.textRGB}) / 20%);
-        ${cssvarScope}--deg: 94deg;
-        ${cssvarScope}--color: rgb(var(${cssvarValues.textRGB}) / 50%);
-        ${cssvarScope}--background: var(${cssvarValues.main});
-        ${cssvarScope}--duration: 1.5s;
-        ${cssvarScope}--icon-width: 5em;
-        ${cssvarScope}--icon-height: 5em;
-        ${cssvarScope}--icon-margin: .75em;
-        color: var(${cssvarScope}--color);
-        background: var(${cssvarScope}--background);
-      }
-
-      p {
-        height: 100%;
-        min-height: inherit;
-        animation: var(${cssvarScope}--duration) ease-in-out 0s infinite none running;
-      }
-
-      p.position {
-        background-image: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--from) 36%, var(${cssvarScope}--to) 50%, var(${cssvarScope}--from) 64%);
-        background-color: transparent;
-        background-size: 200% 100%;
-        animation-name: po;
-      }
-
-      @keyframes po {
-        from {
-          background-position: 150% center;
-        }
-        to {
-          background-position: -50% center;
-        }
-      }
-
-      p.opacity {
-        background: var(${cssvarScope}--from);
-        animation-name: op;
-        animation-direction: alternate;
-      }
-
-      @keyframes op {
-        50% {
-          opacity: 0.2;
-        }
-        to {
-          opacity: 1;
-        }
-      }
-
-      path {
-        fill: var(${cssvarScope}--color);
-      }
-
-      svg,
-      slot {
-        width: var(${cssvarScope}--icon-width);
-        height: var(${cssvarScope}--icon-height);
-      }
-
-      svg {
-        margin: var(${cssvarScope}--icon-margin);
-      }
-
-      p,
-      svg {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    `,
-];
 __decorate([
     property()
 ], Skeleton.prototype, "type", void 0);
@@ -131,7 +52,78 @@ __decorate([
     state()
 ], Skeleton.prototype, "loading", void 0);
 Skeleton = __decorate([
-    define(defineName)
+    godown(protoName),
+    styles([
+        css `
+    :host {
+      --${cssScope}--from: rgb(var(--${cssGlobalVars.foregroundRGB}) / 7.5%);
+      --${cssScope}--to: rgb(var(--${cssGlobalVars.foregroundRGB}) / 22%);
+      --${cssScope}--deg: 94deg;
+      --${cssScope}--color: rgb(var(--${cssGlobalVars.foregroundRGB}) / 50%);
+      --${cssScope}--background: var(--${cssGlobalVars.background});
+      --${cssScope}--duration: 1.5s;
+      --${cssScope}--icon-width: 5em;
+      --${cssScope}--icon-height: 5em;
+      --${cssScope}--icon-margin: .75em;
+      color: var(--${cssScope}--color);
+      background: var(--${cssScope}--background);
+      min-height: 1.5em;
+      width: 100%;
+      flex-shrink: 0;
+      display: block;
+      overflow: hidden;
+    }
+
+    [part="root"] {
+      height: 100%;
+      min-height: inherit;
+      text-align: center;
+      animation: var(--${cssScope}--duration) ease-in-out 0s infinite none running;
+    }
+
+    svg {
+      width: var(--${cssScope}--icon-width);
+      height: var(--${cssScope}--icon-height);
+      margin: var(--${cssScope}--icon-margin);
+    }
+
+    .position {
+      background-image: linear-gradient(
+        var(--${cssScope}--deg),
+        var(--${cssScope}--from) 36%,
+        var(--${cssScope}--to) 50%,
+        var(--${cssScope}--from) 64%
+      );
+      background-color: transparent;
+      background-size: 200% 100%;
+      animation-name: po;
+    }
+
+    @keyframes po {
+      from {
+        background-position: 150% center;
+      }
+      to {
+        background-position: -50% center;
+      }
+    }
+
+    .opacity {
+      background: var(--${cssScope}--from);
+      animation-name: op;
+      animation-direction: alternate;
+    }
+
+    @keyframes op {
+      50% {
+        opacity: 0.2;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  `,
+    ])
 ], Skeleton);
 export { Skeleton };
 export default Skeleton;

package/web-components/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/skeleton/skeleton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAqB,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEhF,MAAM,UAAU,GAAG,UAAU,CAAC;AAC9B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;;;GAIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,aAAa;IAApC;;QACL;;WAEG;QACS,SAAI,GAAqB,MAAM,CAAC;QAC5C;;WAEG;QACS,cAAS,GAA2B,UAAU,CAAC;QAC3D;;WAEG;QACM,YAAO,GAAG,IAAI,CAAC;IAkG1B,CAAC;IAfW,MAAM;QACd,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,IAAI,CAAA,aAAa,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC;QACrE,CAAC;QACD,OAAO,QAAQ,EAAE,CAAC;IACpB,CAAC;IAEO,UAAU;QAChB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,MAAM;gBACT,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;YAC1B,KAAK,OAAO;gBACV,OAAO,QAAQ,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;;AA/FM,eAAM,GAAG;IACd,aAAa,CAAC,MAAM;IACpB,GAAG,CAAA;;;;;;UAMG,WAAW,mBAAmB,YAAY,CAAC,OAAO;UAClD,WAAW,iBAAiB,YAAY,CAAC,OAAO;UAChD,WAAW;UACX,WAAW,oBAAoB,YAAY,CAAC,OAAO;UACnD,WAAW,qBAAqB,YAAY,CAAC,IAAI;UACjD,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;qBACA,WAAW;0BACN,WAAW;;;;;;yBAMZ,WAAW;;;;gDAIY,WAAW,eAAe,WAAW,oBAAoB,WAAW,kBAAkB,WAAW;;;;;;;;;;;;;;;;0BAgBvH,WAAW;;;;;;;;;;;;;;;oBAejB,WAAW;;;;;qBAKV,WAAW;sBACV,WAAW;;;;sBAIX,WAAW;;;;;;;;;KAS5B;CACgB,AA/EN,CA+EO;AAzFR;IAAX,QAAQ,EAAE;sCAAiC;AAIhC;IAAX,QAAQ,EAAE;2CAAgD;AAIlD;IAAR,KAAK,EAAE;yCAAgB;AAZb,QAAQ;IADpB,MAAM,CAAC,UAAU,CAAC;GACN,QAAQ,CA8GpB;;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property, state } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate, svgImage } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"skeleton\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * {@linkcode Skeleton} renders a skeleton screen.\n *\n * Inspired by Ant-design.\n */\n@define(defineName)\nexport class Skeleton extends GodownElement {\n  /**\n   * Skeleton type.\n   */\n  @property() type: \"text\" | \"image\" = \"text\";\n  /**\n   * Animation type.\n   */\n  @property() animation: \"position\" | \"opacity\" = \"position\";\n  /**\n   * If false, hidden.\n   */\n  @state() loading = true;\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host {\n        display: block;\n        min-height: 1.5em;\n        width: 100%;\n        overflow: hidden;\n        ${cssvarScope}--from: rgb(var(${cssvarValues.textRGB}) / 7.5%);\n        ${cssvarScope}--to: rgb(var(${cssvarValues.textRGB}) / 20%);\n        ${cssvarScope}--deg: 94deg;\n        ${cssvarScope}--color: rgb(var(${cssvarValues.textRGB}) / 50%);\n        ${cssvarScope}--background: var(${cssvarValues.main});\n        ${cssvarScope}--duration: 1.5s;\n        ${cssvarScope}--icon-width: 5em;\n        ${cssvarScope}--icon-height: 5em;\n        ${cssvarScope}--icon-margin: .75em;\n        color: var(${cssvarScope}--color);\n        background: var(${cssvarScope}--background);\n      }\n\n      p {\n        height: 100%;\n        min-height: inherit;\n        animation: var(${cssvarScope}--duration) ease-in-out 0s infinite none running;\n      }\n\n      p.position {\n        background-image: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--from) 36%, var(${cssvarScope}--to) 50%, var(${cssvarScope}--from) 64%);\n        background-color: transparent;\n        background-size: 200% 100%;\n        animation-name: po;\n      }\n\n      @keyframes po {\n        from {\n          background-position: 150% center;\n        }\n        to {\n          background-position: -50% center;\n        }\n      }\n\n      p.opacity {\n        background: var(${cssvarScope}--from);\n        animation-name: op;\n        animation-direction: alternate;\n      }\n\n      @keyframes op {\n        50% {\n          opacity: 0.2;\n        }\n        to {\n          opacity: 1;\n        }\n      }\n\n      path {\n        fill: var(${cssvarScope}--color);\n      }\n\n      svg,\n      slot {\n        width: var(${cssvarScope}--icon-width);\n        height: var(${cssvarScope}--icon-height);\n      }\n\n      svg {\n        margin: var(${cssvarScope}--icon-margin);\n      }\n\n      p,\n      svg {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    if (this.loading) {\n      return html`<p class=\"${this.animation}\">${this.renderIcon()}</p>`;\n    }\n    return htmlSlot();\n  }\n\n  private renderIcon(): HTMLTemplate {\n    switch (this.type) {\n      case \"text\":\n        return htmlSlot(\"icon\");\n      case \"image\":\n        return svgImage();\n    }\n  }\n}\n\nexport default Skeleton;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"skeleton-screen\": Skeleton;\n    \"g-skeleton\": Skeleton;\n  }\n}\n"]}
+{"version":3,"file":"skeleton.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/skeleton/skeleton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,SAAS,GAAG,UAAU,CAAC;AAC7B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;;;;GAOG;AAyEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,aAAa;IAApC;;QACL;;WAEG;QACS,SAAI,GAAqB,MAAM,CAAC;QAC5C;;WAEG;QACS,cAAS,GAA2B,UAAU,CAAC;QAC3D;;WAEG;QACM,YAAO,GAAG,IAAI,CAAC;IAU1B,CAAC;IARW,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,QAAQ,EAAE,CAAC;QACpB,CAAC;QACD,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,SAAS;QAChD,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,QAAQ,EAAE,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;WAC5D,CAAC;IACV,CAAC;CACF,CAAA;AAlBa;IAAX,QAAQ,EAAE;sCAAiC;AAIhC;IAAX,QAAQ,EAAE;2CAAgD;AAIlD;IAAR,KAAK,EAAE;yCAAgB;AAZb,QAAQ;IAxEpB,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC;QACN,GAAG,CAAA;;UAEK,QAAQ,qBAAqB,aAAa,CAAC,aAAa;UACxD,QAAQ,mBAAmB,aAAa,CAAC,aAAa;UACtD,QAAQ;UACR,QAAQ,sBAAsB,aAAa,CAAC,aAAa;UACzD,QAAQ,uBAAuB,aAAa,CAAC,UAAU;UACvD,QAAQ;UACR,QAAQ;UACR,QAAQ;UACR,QAAQ;qBACG,QAAQ;0BACH,QAAQ;;;;;;;;;;;;yBAYT,QAAQ;;;;qBAIZ,QAAQ;sBACP,QAAQ;sBACR,QAAQ;;;;;gBAKd,QAAQ;gBACR,QAAQ;gBACR,QAAQ;gBACR,QAAQ;;;;;;;;;;;;;;;;;0BAiBE,QAAQ;;;;;;;;;;;;;GAa/B;KACF,CAAC;GACW,QAAQ,CAsBpB;;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import { css, html, property, state } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { ifValue } from \"../../lib/directives.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport { svgImage } from \"../../lib/icons.js\";\nimport { GodownElement } from \"../../proto/godown-element.js\";\nimport { createScope, cssGlobalVars } from \"../../styles/global.js\";\n\nconst protoName = \"skeleton\";\nconst cssScope = createScope(protoName);\n\n/**\n * {@linkcode Skeleton} renders a skeleton screen.\n *\n * Inspired by Ant-design.\n *\n * @slot loading - The content if loading is true.\n * @slot - The content if loading is false.\n */\n@godown(protoName)\n@styles([\n  css`\n    :host {\n      --${cssScope}--from: rgb(var(--${cssGlobalVars.foregroundRGB}) / 7.5%);\n      --${cssScope}--to: rgb(var(--${cssGlobalVars.foregroundRGB}) / 22%);\n      --${cssScope}--deg: 94deg;\n      --${cssScope}--color: rgb(var(--${cssGlobalVars.foregroundRGB}) / 50%);\n      --${cssScope}--background: var(--${cssGlobalVars.background});\n      --${cssScope}--duration: 1.5s;\n      --${cssScope}--icon-width: 5em;\n      --${cssScope}--icon-height: 5em;\n      --${cssScope}--icon-margin: .75em;\n      color: var(--${cssScope}--color);\n      background: var(--${cssScope}--background);\n      min-height: 1.5em;\n      width: 100%;\n      flex-shrink: 0;\n      display: block;\n      overflow: hidden;\n    }\n\n    [part=\"root\"] {\n      height: 100%;\n      min-height: inherit;\n      text-align: center;\n      animation: var(--${cssScope}--duration) ease-in-out 0s infinite none running;\n    }\n\n    svg {\n      width: var(--${cssScope}--icon-width);\n      height: var(--${cssScope}--icon-height);\n      margin: var(--${cssScope}--icon-margin);\n    }\n\n    .position {\n      background-image: linear-gradient(\n        var(--${cssScope}--deg),\n        var(--${cssScope}--from) 36%,\n        var(--${cssScope}--to) 50%,\n        var(--${cssScope}--from) 64%\n      );\n      background-color: transparent;\n      background-size: 200% 100%;\n      animation-name: po;\n    }\n\n    @keyframes po {\n      from {\n        background-position: 150% center;\n      }\n      to {\n        background-position: -50% center;\n      }\n    }\n\n    .opacity {\n      background: var(--${cssScope}--from);\n      animation-name: op;\n      animation-direction: alternate;\n    }\n\n    @keyframes op {\n      50% {\n        opacity: 0.2;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n  `,\n])\nexport class Skeleton extends GodownElement {\n  /**\n   * Skeleton type.\n   */\n  @property() type: \"text\" | \"image\" = \"text\";\n  /**\n   * Animation type.\n   */\n  @property() animation: \"position\" | \"opacity\" = \"position\";\n  /**\n   * If false, hidden.\n   */\n  @state() loading = true;\n\n  protected render() {\n    if (!this.loading) {\n      return htmlSlot();\n    }\n    return html`<div part=\"root\" class=\"${this.animation}\">\n      ${ifValue(this.type === \"image\", svgImage(), htmlSlot(\"loading\"))}\n    </div>`;\n  }\n}\n\nexport default Skeleton;\n"]}

package/web-components/text/overbreath.d.ts

@@ -1,27 +1,22 @@
-import { type CSSResultGroup } from "../../.deps.js";
-import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../supers/root.js";
+import { GodownElement } from "../../proto/godown-element.js";
 /**
- * {@linkcode Overbreath} renders three animated pieces of text.
+ * {@linkcode Overbreath} 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 `--${CSSprefix}--${number}`, the initial value will be repeated.
+ *
+ * Inspired by Vercel home page (2023).
  *
- * Inspired by Vercel homepage (2022? - 2023).
  */
 export declare class Overbreath extends GodownElement {
-    /**
-     * One of the texts.
-     */
-    t1: string;
-    t2: string;
-    t3: string;
-    static styles: CSSResultGroup;
-    protected render(): HTMLTemplate[];
-    protected renderText(text: string): HTMLTemplate;
+    text: string | string[];
+    duration: string;
+    speedup: string;
+    protected render(): import("lit").TemplateResult<1>;
+    protected renderText(text: string): import("lit").TemplateResult<1>;
+    protected getTexts(): string[];
+    protected parseDuration(): number;
 }
 export default Overbreath;
-declare global {
-    interface HTMLElementTagNameMap {
-        "overbreath-text": Overbreath;
-        "g-overbreath": Overbreath;
-    }
-}
 //# sourceMappingURL=overbreath.d.ts.map

package/web-components/text/overbreath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overbreath.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/overbreath.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAkB,MAAM,gBAAgB,CAAC;AAE1E,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAuB,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAK1E;;;;GAIG;AACH,qBACa,UAAW,SAAQ,aAAa;IAC3C;;OAEG;IACS,EAAE,SAAM;IAER,EAAE,SAAM;IAER,EAAE,SAAM;IAEpB,MAAM,CAAC,MAAM,iBAiLO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY,EAAE;IAIlC,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY;CAMjD;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,UAAU,CAAC;QAC9B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}
+{"version":3,"file":"overbreath.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/overbreath.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAM9D;;;;;;;;;GASG;AACH,qBA2Da,UAAW,SAAQ,aAAa;IAC/B,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAE5B,SAAS,CAAC,MAAM;IAsBhB,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM;IAMjC,SAAS,CAAC,QAAQ,IAAI,MAAM,EAAE;IAI9B,SAAS,CAAC,aAAa;CAUxB;AAED,eAAe,UAAU,CAAC"}

package/web-components/text/overbreath.js

@@ -1,225 +1,131 @@
 import { __decorate } from "tslib";
-import { css, html, property } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { createScope, cssvar, GodownElement } from "../../supers/root.js";
+import { css, html, property } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { htmlStyle } from "../../lib/directives.js";
+import { GodownElement } from "../../proto/godown-element.js";
+import { colorValues, createScope, cssGlobalVars } from "../../styles/global.js";
 const defineName = "overbreath";
-const cssvarScope = createScope(defineName);
+const cssScope = createScope(defineName);
 /**
- * {@linkcode Overbreath} renders three animated pieces of text.
+ * {@linkcode Overbreath} 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 `--${CSSprefix}--${number}`, the initial value will be repeated.
+ *
+ * Inspired by Vercel home page (2023).
  *
- * Inspired by Vercel homepage (2022? - 2023).
  */
 let Overbreath = class Overbreath extends GodownElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * One of the texts.
-         */
-        this.t1 = "";
-        // As t1.
-        this.t2 = "";
-        // As t2.
-        this.t3 = "";
-    }
     render() {
-        return [this.t1, this.t2, this.t3].map(this.renderText);
+        const texts = this.getTexts();
+        const len = texts.length;
+        const gap = 100 / 2 / len;
+        const duration = this.parseDuration() || len * 2 + 2;
+        const t = duration / len;
+        return html `${texts.map(this.renderText)}
+    ${htmlStyle(`.colorful{animation-duration:${duration}s;}` +
+            `@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${gap * 2}%{opacity: 1;}}` +
+            texts
+                .map((_, index) => {
+                const number = index + 1;
+                const delay = -1 * t * (len - (number - 2));
+                const defaultNumber = ((number - 1) % 3) + 1;
+                return `.rel:nth-child(${number}) .colorful{animation-delay:${delay}s;background:var(--${cssScope}--${number},var(--${cssScope}--${defaultNumber}));}`;
+            })
+                .join(""))}`;
     }
     renderText(text) {
         return html `<span class="rel">
-      <span class="bg">${text}</span>
-      <span class="fg">${text}</span>
+      <span class="nocolor">${text}</span>
+      <span class="colorful">${text}</span>
     </span>`;
     }
-};
-Overbreath.styles = [
-    GodownElement.styles,
-    css `
-      :host {
-        ${cssvarScope}--1-1: #ae0ca5;
-        ${cssvarScope}--1-2: #ffd802;
-        ${cssvarScope}--2-1: #1fe173;
-        ${cssvarScope}--2-2: #582bca;
-        ${cssvarScope}--3-1: #00b4f0;
-        ${cssvarScope}--3-2: #e614e6;
-        ${cssvarScope}--deg: 60deg;
-        ${cssvarScope}--1: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--1-1), var(${cssvarScope}--1-2));
-        ${cssvarScope}--2: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--2-1), var(${cssvarScope}--2-2));
-        ${cssvarScope}--3: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--3-1), var(${cssvarScope}--3-2));
-      }
-    `,
-    css `
-      :host {
-        display: flex;
-        margin: auto;
-        width: fit-content;
-        font-size: clamp(3.5rem, 10vw, 5.5rem);
-        align-items: center;
-      }
-
-      @media (max-width: 1280px) {
-        :host {
-          flex-direction: column;
-        }
-      }
-
-      *::selection {
-        background: none;
-      }
-
-      .fg,
-      .bg {
-        padding: 0 0.05em;
-        box-sizing: border-box;
-      }
-
-      .bg {
-        position: absolute;
-        top: 0;
-      }
-
-      span {
-        display: block;
-      }
-
-      .rel {
-        position: relative;
-        font-weight: 800;
-        font-size: inherit;
-        letter-spacing: -0.05em;
-      }
-
-      .rel:nth-child(1) .fg {
-        animation: lg1 8s infinite;
-        background-image: var(${cssvarScope}--1);
-      }
-
-      .rel:nth-child(2) .fg {
-        animation: 8s infinite lg2;
-        background-image: var(${cssvarScope}--2);
-      }
-
-      .rel:nth-child(3) .fg {
-        animation: 8s infinite lg3;
-        background-image: var(${cssvarScope}--3);
-      }
-
-      .rel:nth-child(1) .bg {
-        animation: text1 8s infinite;
-      }
-
-      .rel:nth-child(2) .bg {
-        animation: text2 8s infinite;
-      }
-
-      .rel:nth-child(3) .bg {
-        animation: text3 8s infinite;
-      }
-    `,
-    css `
-      @keyframes lg1 {
-        0%,
-        16.667%,
-        to {
-          opacity: 1;
-        }
-        33.333%,
-        83.333% {
-          opacity: 0;
-        }
-      }
-
-      @keyframes lg2 {
-        0%,
-        to {
-          opacity: 0;
-        }
-        33.333%,
-        50% {
-          opacity: 1;
-        }
-        16.667%,
-        66.667% {
-          opacity: 0;
-        }
-      }
-
-      @keyframes lg3 {
-        0%,
-        50%,
-        to {
-          opacity: 0;
-        }
-        66.667%,
-        83.333% {
-          opacity: 1;
-        }
-      }
-
-      @keyframes text1 {
-        0%,
-        16.667%,
-        to {
-          opacity: 0;
-        }
-        25%,
-        91.667% {
-          opacity: 1;
-        }
-      }
-
-      @keyframes text2 {
-        0%,
-        to {
-          opacity: 1;
-        }
-        33.333%,
-        50% {
-          opacity: 0;
-        }
-        25%,
-        58.333% {
-          opacity: 1;
-        }
-      }
-
-      @keyframes text3 {
-        0%,
-        58.333%,
-        91.667%,
-        to {
-          opacity: 1;
-        }
-        66.667%,
-        83.333% {
-          opacity: 0;
+    getTexts() {
+        return Array.isArray(this.text) ? this.text : (this.text || this.textContent).split(/\s+/).filter((x) => x);
+    }
+    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;
+            }
         }
-      }
-    `,
-    css `
-      span.bg {
-        ${cssvarScope}--clip-background: var(${cssvar}--clip-background);
-        background: var(${cssvarScope}--clip-background);
-      }
-      span {
-        color: transparent;
-        -webkit-text-fill-color: transparent;
-        background-clip: text !important;
-        -webkit-background-clip: text !important;
-        display: inline-flex;
-      }
-    `,
-];
+    }
+};
 __decorate([
     property()
-], Overbreath.prototype, "t1", void 0);
+], Overbreath.prototype, "text", void 0);
 __decorate([
     property()
-], Overbreath.prototype, "t2", void 0);
+], Overbreath.prototype, "duration", void 0);
 __decorate([
     property()
-], Overbreath.prototype, "t3", void 0);
+], Overbreath.prototype, "speedup", void 0);
 Overbreath = __decorate([
-    define(defineName)
+    godown(defineName),
+    styles([
+        css `
+    :host {
+      --${cssScope}--deg: 60deg;
+      --${cssScope}--1-1: ${colorValues.red[5]};
+      --${cssScope}--1-2: ${colorValues.yellow[5]};
+      --${cssScope}--2-1: ${colorValues.green[5]};
+      --${cssScope}--2-2: ${colorValues.purple[5]};
+      --${cssScope}--3-1: ${colorValues.blue[5]};
+      --${cssScope}--3-2: ${colorValues.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});
+    }
+  `,
+    ])
 ], Overbreath);
 export { Overbreath };
 export default Overbreath;