godown 2.7.4 → 2.7.6

package/web-components/text/overbreath.js.map

@@ -1 +1 @@
-{"version":3,"file":"overbreath.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/overbreath.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1E,MAAM,UAAU,GAAG,YAAY,CAAC;AAChC,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;;;GAIG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,aAAa;IAAtC;;QACL;;WAEG;QACS,OAAE,GAAG,EAAE,CAAC;QACpB,SAAS;QACG,OAAE,GAAG,EAAE,CAAC;QACpB,SAAS;QACG,OAAE,GAAG,EAAE,CAAC;IA+LtB,CAAC;IAVW,MAAM;QACd,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1D,CAAC;IAES,UAAU,CAAC,IAAY;QAC/B,OAAO,IAAI,CAAA;yBACU,IAAI;yBACJ,IAAI;YACjB,CAAC;IACX,CAAC;;AA5LM,iBAAM,GAAG;IACd,aAAa,CAAC,MAAM;IACpB,GAAG,CAAA;;UAEG,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW;UACX,WAAW,4BAA4B,WAAW,eAAe,WAAW,eAAe,WAAW;UACtG,WAAW,4BAA4B,WAAW,eAAe,WAAW,eAAe,WAAW;UACtG,WAAW,4BAA4B,WAAW,eAAe,WAAW,eAAe,WAAW;;KAE3G;IACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2CyB,WAAW;;;;;gCAKX,WAAW;;;;;gCAKX,WAAW;;;;;;;;;;;;;;KActC;IACD,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+EF;IACD,GAAG,CAAA;;UAEG,WAAW,0BAA0B,MAAM;0BAC3B,WAAW;;;;;;;;;KAShC;CACgB,AAjLN,CAiLO;AAvLR;IAAX,QAAQ,EAAE;sCAAS;AAER;IAAX,QAAQ,EAAE;sCAAS;AAER;IAAX,QAAQ,EAAE;sCAAS;AART,UAAU;IADtB,MAAM,CAAC,UAAU,CAAC;GACN,UAAU,CAuMtB;;AAED,eAAe,UAAU,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { type HTMLTemplate } from \"../../lib/templates.js\";\nimport { createScope, cssvar, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"overbreath\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * {@linkcode Overbreath} renders three animated pieces of text.\n *\n * Inspired by Vercel homepage (2022? - 2023).\n */\n@define(defineName)\nexport class Overbreath extends GodownElement {\n  /**\n   * One of the texts.\n   */\n  @property() t1 = \"\";\n  // As t1.\n  @property() t2 = \"\";\n  // As t2.\n  @property() t3 = \"\";\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host {\n        ${cssvarScope}--1-1: #ae0ca5;\n        ${cssvarScope}--1-2: #ffd802;\n        ${cssvarScope}--2-1: #1fe173;\n        ${cssvarScope}--2-2: #582bca;\n        ${cssvarScope}--3-1: #00b4f0;\n        ${cssvarScope}--3-2: #e614e6;\n        ${cssvarScope}--deg: 60deg;\n        ${cssvarScope}--1: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--1-1), var(${cssvarScope}--1-2));\n        ${cssvarScope}--2: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--2-1), var(${cssvarScope}--2-2));\n        ${cssvarScope}--3: linear-gradient(var(${cssvarScope}--deg), var(${cssvarScope}--3-1), var(${cssvarScope}--3-2));\n      }\n    `,\n    css`\n      :host {\n        display: flex;\n        margin: auto;\n        width: fit-content;\n        font-size: clamp(3.5rem, 10vw, 5.5rem);\n        align-items: center;\n      }\n\n      @media (max-width: 1280px) {\n        :host {\n          flex-direction: column;\n        }\n      }\n\n      *::selection {\n        background: none;\n      }\n\n      .fg,\n      .bg {\n        padding: 0 0.05em;\n        box-sizing: border-box;\n      }\n\n      .bg {\n        position: absolute;\n        top: 0;\n      }\n\n      span {\n        display: block;\n      }\n\n      .rel {\n        position: relative;\n        font-weight: 800;\n        font-size: inherit;\n        letter-spacing: -0.05em;\n      }\n\n      .rel:nth-child(1) .fg {\n        animation: lg1 8s infinite;\n        background-image: var(${cssvarScope}--1);\n      }\n\n      .rel:nth-child(2) .fg {\n        animation: 8s infinite lg2;\n        background-image: var(${cssvarScope}--2);\n      }\n\n      .rel:nth-child(3) .fg {\n        animation: 8s infinite lg3;\n        background-image: var(${cssvarScope}--3);\n      }\n\n      .rel:nth-child(1) .bg {\n        animation: text1 8s infinite;\n      }\n\n      .rel:nth-child(2) .bg {\n        animation: text2 8s infinite;\n      }\n\n      .rel:nth-child(3) .bg {\n        animation: text3 8s infinite;\n      }\n    `,\n    css`\n      @keyframes lg1 {\n        0%,\n        16.667%,\n        to {\n          opacity: 1;\n        }\n        33.333%,\n        83.333% {\n          opacity: 0;\n        }\n      }\n\n      @keyframes lg2 {\n        0%,\n        to {\n          opacity: 0;\n        }\n        33.333%,\n        50% {\n          opacity: 1;\n        }\n        16.667%,\n        66.667% {\n          opacity: 0;\n        }\n      }\n\n      @keyframes lg3 {\n        0%,\n        50%,\n        to {\n          opacity: 0;\n        }\n        66.667%,\n        83.333% {\n          opacity: 1;\n        }\n      }\n\n      @keyframes text1 {\n        0%,\n        16.667%,\n        to {\n          opacity: 0;\n        }\n        25%,\n        91.667% {\n          opacity: 1;\n        }\n      }\n\n      @keyframes text2 {\n        0%,\n        to {\n          opacity: 1;\n        }\n        33.333%,\n        50% {\n          opacity: 0;\n        }\n        25%,\n        58.333% {\n          opacity: 1;\n        }\n      }\n\n      @keyframes text3 {\n        0%,\n        58.333%,\n        91.667%,\n        to {\n          opacity: 1;\n        }\n        66.667%,\n        83.333% {\n          opacity: 0;\n        }\n      }\n    `,\n    css`\n      span.bg {\n        ${cssvarScope}--clip-background: var(${cssvar}--clip-background);\n        background: var(${cssvarScope}--clip-background);\n      }\n      span {\n        color: transparent;\n        -webkit-text-fill-color: transparent;\n        background-clip: text !important;\n        -webkit-background-clip: text !important;\n        display: inline-flex;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate[] {\n    return [this.t1, this.t2, this.t3].map(this.renderText);\n  }\n\n  protected renderText(text: string): HTMLTemplate {\n    return html`<span class=\"rel\">\n      <span class=\"bg\">${text}</span>\n      <span class=\"fg\">${text}</span>\n    </span>`;\n  }\n}\n\nexport default Overbreath;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"overbreath-text\": Overbreath;\n    \"g-overbreath\": Overbreath;\n  }\n}\n"]}
+{"version":3,"file":"overbreath.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/overbreath.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { htmlStyle } from \"../../lib/directives.js\";\nimport { GodownElement } from \"../../proto/godown-element.js\";\nimport { colorValues, createScope, cssGlobalVars } from \"../../styles/global.js\";\n\nconst defineName = \"overbreath\";\nconst cssScope = createScope(defineName);\n\n/**\n * {@linkcode Overbreath} render the text with a breathing effect.\n *\n * Dynamically generate a breathing effect based on the length of the split text.\n *\n * If there is not enough CSS variable `--${CSSprefix}--${number}`, the initial value will be repeated.\n *\n * Inspired by Vercel home page (2023).\n *\n */\n@godown(defineName)\n@styles([\n  css`\n    :host {\n      --${cssScope}--deg: 60deg;\n      --${cssScope}--1-1: ${colorValues.red[5]};\n      --${cssScope}--1-2: ${colorValues.yellow[5]};\n      --${cssScope}--2-1: ${colorValues.green[5]};\n      --${cssScope}--2-2: ${colorValues.purple[5]};\n      --${cssScope}--3-1: ${colorValues.blue[5]};\n      --${cssScope}--3-2: ${colorValues.pink[5]};\n      --${cssScope}--1: linear-gradient(var(--${cssScope}--deg), var(--${cssScope}--1-1), var(--${cssScope}--1-2));\n      --${cssScope}--2: linear-gradient(var(--${cssScope}--deg), var(--${cssScope}--2-1), var(--${cssScope}--2-2));\n      --${cssScope}--3: linear-gradient(var(--${cssScope}--deg), var(--${cssScope}--3-1), var(--${cssScope}--3-2));\n    }\n  `,\n  css`\n    :host {\n      display: flex;\n      margin: auto;\n      width: -moz-fit-content;\n      width: fit-content;\n      font-size: 2em;\n      align-items: center;\n    }\n\n    ::selection {\n      background: none;\n    }\n\n    .rel {\n      position: relative;\n      font-weight: 800;\n      font-size: inherit;\n      letter-spacing: -0.05em;\n    }\n  `,\n  css`\n    .nocolor,\n    .colorful {\n      padding: 0 0.05em;\n      box-sizing: border-box;\n      display: inline-block;\n      animation-iteration-count: infinite;\n      -webkit-text-fill-color: transparent;\n      -webkit-background-clip: text !important;\n      background-clip: text !important;\n    }\n    .colorful {\n      opacity: 0;\n      animation-name: colorfulN;\n    }\n    .nocolor {\n      position: absolute;\n      top: 0;\n      background: var(--${cssGlobalVars.clipBackground});\n    }\n  `,\n])\nexport class Overbreath extends GodownElement {\n  @property() text: string | string[];\n  @property() duration: string;\n  @property() speedup: string;\n\n  protected render() {\n    const texts = this.getTexts();\n    const len = texts.length;\n    const gap = 100 / 2 / len;\n    const duration = this.parseDuration() || len * 2 + 2;\n    const t = duration / len;\n\n    return html`${texts.map(this.renderText)}\n    ${htmlStyle(\n      `.colorful{animation-duration:${duration}s;}` +\n        `@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${gap * 2}%{opacity: 1;}}` +\n        texts\n          .map((_, index) => {\n            const number = index + 1;\n            const delay = -1 * t * (len - (number - 2));\n            const defaultNumber = ((number - 1) % 3) + 1;\n            return `.rel:nth-child(${number}) .colorful{animation-delay:${delay}s;background:var(--${cssScope}--${number},var(--${cssScope}--${defaultNumber}));}`;\n          })\n          .join(\"\"),\n    )}`;\n  }\n\n  protected renderText(text: string) {\n    return html`<span class=\"rel\">\n      <span class=\"nocolor\">${text}</span>\n      <span class=\"colorful\">${text}</span>\n    </span>`;\n  }\n  protected getTexts(): string[] {\n    return Array.isArray(this.text) ? this.text : (this.text || this.textContent).split(/\\s+/).filter((x) => x);\n  }\n\n  protected parseDuration() {\n    const { duration } = this;\n    if (duration) {\n      if (duration.endsWith(\"s\")) {\n        return parseFloat(duration.slice(0, -1));\n      } else if (duration.endsWith(\"ms\")) {\n        return parseFloat(duration.slice(0, -2)) / 1000;\n      }\n    }\n  }\n}\n\nexport default Overbreath;\n"]}

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

@@ -1,6 +1,4 @@
-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 Text } renders nowrap text.
  */
@@ -8,23 +6,12 @@ export declare class Text extends GodownElement {
     /**
      * Underline behavior.
      */
-    underline: "none" | "hover" | "active" | "always" | "";
+    underline: "none" | "hover" | "active" | "always";
     /**
-     * Text format.
+     * Set background-clip to text.
      */
-    case: "upper" | "lower" | "dash" | "camel" | "raw" | "";
-    /**
-     * Text.
-     */
-    text: string;
-    static styles: CSSResultGroup;
-    protected render(): HTMLTemplate;
-    private t;
+    clip: boolean;
+    protected render(): import("lit").TemplateResult<1>;
 }
 export default Text;
-declare global {
-    interface HTMLElementTagNameMap {
-        "g-text": Text;
-    }
-}
 //# sourceMappingURL=text.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAkB,MAAM,gBAAgB,CAAC;AAG1E,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,EAAe,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAMlE;;GAEG;AACH,qBACa,IAAK,SAAQ,aAAa;IACrC;;OAEG;IACS,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,EAAE,CAAU;IAC5E;;OAEG;IACS,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,EAAE,CAAM;IACzE;;OAEG;IACS,IAAI,SAAM;IAEtB,MAAM,CAAC,MAAM,EAAE,cAAc,CAuC3B;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAIhC,OAAO,CAAC,CAAC;CAiBV;AAED,eAAe,IAAI,CAAC;AAEpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,IAAI,CAAC;KAChB;CACF"}
+{"version":3,"file":"text.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/text.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAO9D;;GAEG;AACH,qBAmDa,IAAK,SAAQ,aAAa;IACrC;;OAEG;IACS,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAU;IAEvE;;OAEG;IAC0B,IAAI,EAAE,OAAO,CAAC;IAE3C,SAAS,CAAC,MAAM;CAWjB;AAED,eAAe,IAAI,CAAC"}

package/web-components/text/text.js

@@ -1,12 +1,12 @@
 import { __decorate } from "tslib";
-import { css, html, property } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { ifValue } from "../../lib/directives.js";
-import { htmlSlot } from "../../lib/templates.js";
-import { camelToDash, dashToCamel } from "../../lib/utils.js";
-import { createScope, GodownElement } from "../../supers/root.js";
-const defineName = "text";
-const cssvarScope = createScope(defineName);
+import { css, html, property } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { combine, htmlSlot } from "../../lib/directives.js";
+import { GodownElement } from "../../proto/godown-element.js";
+import { createScope, cssGlobalVars } from "../../styles/global.js";
+const protoName = "text";
+const cssScope = createScope(protoName);
 /**
  * {@linkcode Text } renders nowrap text.
  */
@@ -17,87 +17,77 @@ let Text = class Text extends GodownElement {
          * Underline behavior.
          */
         this.underline = "none";
-        /**
-         * Text format.
-         */
-        this.case = "";
-        /**
-         * Text.
-         */
-        this.text = "";
     }
     render() {
-        return html `<span class="${this.underline || "always"}">${ifValue(this.text, this.t(), htmlSlot())}</span>`;
-    }
-    t() {
-        const text = this.text;
-        switch (this.case) {
-            case "upper":
-                return text.toUpperCase();
-            case "raw":
-                return text;
-            case "lower":
-                return text.toLowerCase();
-            case "camel":
-                return dashToCamel(text);
-            case "dash":
-                return camelToDash(text);
-            default:
-                return text[0].toUpperCase() + text.slice(1);
-        }
+        return html `<span
+      part="root"
+      class="${combine({
+            [this.underline || "always"]: true,
+            clip: this.clip,
+        })}"
+    >
+      ${htmlSlot()}
+    </span>`;
     }
 };
-Text.styles = [
-    GodownElement.styles,
-    css `
-      :host {
-        ${cssvarScope}--color: currentColor;
-        ${cssvarScope}--color-hover: currentColor;
-        ${cssvarScope}--color-active: currentColor;
-        display: inline-block;
-        text-overflow: ellipsis;
-        overflow-wrap: break-word;
-      }
-
-      span {
-        white-space: nowrap;
-        display: block;
-        text-overflow: inherit;
-        overflow-wrap: inherit;
-        overflow: hidden;
-        color: var(${cssvarScope}--color, inherit);
-      }
-
-      span:hover {
-        color: var(${cssvarScope}--color-hover, inherit);
-      }
-
-      span:active {
-        color: var(${cssvarScope}--color-active, inherit);
-      }
-
-      .hover:hover,
-      .active:active,
-      .always {
-        text-decoration: underline;
-      }
-
-      .none {
-        text-decoration: none;
-      }
-    `,
-];
 __decorate([
     property()
 ], Text.prototype, "underline", void 0);
 __decorate([
-    property()
-], Text.prototype, "case", void 0);
-__decorate([
-    property()
-], Text.prototype, "text", void 0);
+    property({ type: Boolean })
+], Text.prototype, "clip", void 0);
 Text = __decorate([
-    define(defineName)
+    godown(protoName),
+    styles([
+        css `
+    :host {
+      --${cssScope}--color: currentColor;
+      --${cssScope}--color-hover: currentColor;
+      --${cssScope}--color-active: currentColor;
+      display: inline-block;
+      text-overflow: ellipsis;
+      overflow-wrap: break-word;
+    }
+
+    span {
+      white-space: nowrap;
+      width: 100%;
+      vertical-align: bottom;
+      display: inline-block;
+      text-overflow: inherit;
+      overflow-wrap: inherit;
+      overflow: hidden;
+      color: var(--${cssScope}--color, inherit);
+    }
+
+    span:hover {
+      color: var(--${cssScope}--color-hover, inherit);
+    }
+
+    span:active {
+      color: var(--${cssScope}--color-active, inherit);
+    }
+
+    .hover:hover,
+    .active:active,
+    .always {
+      text-decoration: underline;
+    }
+
+    .none {
+      text-decoration: none;
+    }
+
+    .clip{
+      background: var(--${cssGlobalVars.clipBackground});
+      display: inline-block;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      -webkit-background-clip: text;
+    }
+  `,
+    ])
 ], Text);
 export { Text };
 export default Text;

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/text.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAqB,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAElE,MAAM,UAAU,GAAG,MAAM,CAAC;AAE1B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAE5C;;GAEG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,aAAa;IAAhC;;QACL;;WAEG;QACS,cAAS,GAAgD,MAAM,CAAC;QAC5E;;WAEG;QACS,SAAI,GAAsD,EAAE,CAAC;QACzE;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;IAgExB,CAAC;IArBW,MAAM;QACd,OAAO,IAAI,CAAA,gBAAgB,IAAI,CAAC,SAAS,IAAI,QAAQ,KAAK,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,SAAS,CAAC;IAC9G,CAAC;IAEO,CAAC;QACP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACvB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;YAC5B,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC;YACd,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;YAC5B,KAAK,OAAO;gBACV,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC;YAC3B,KAAK,MAAM;gBACT,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC;YAC3B;gBACE,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;;AA7DM,WAAM,GAAmB;IAC9B,aAAa,CAAC,MAAM;IACpB,GAAG,CAAA;;UAEG,WAAW;UACX,WAAW;UACX,WAAW;;;;;;;;;;;;qBAYA,WAAW;;;;qBAIX,WAAW;;;;qBAIX,WAAW;;;;;;;;;;;;KAY3B;CACF,AAvCY,CAuCX;AAjDU;IAAX,QAAQ,EAAE;uCAAiE;AAIhE;IAAX,QAAQ,EAAE;kCAA8D;AAI7D;IAAX,QAAQ,EAAE;kCAAW;AAZX,IAAI;IADhB,MAAM,CAAC,UAAU,CAAC;GACN,IAAI,CA4EhB;;AAED,eAAe,IAAI,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { ifValue } from \"../../lib/directives.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { camelToDash, dashToCamel } from \"../../lib/utils.js\";\nimport { createScope, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"text\";\n\nconst cssvarScope = createScope(defineName);\n\n/**\n * {@linkcode Text } renders nowrap text.\n */\n@define(defineName)\nexport class Text extends GodownElement {\n  /**\n   * Underline behavior.\n   */\n  @property() underline: \"none\" | \"hover\" | \"active\" | \"always\" | \"\" = \"none\";\n  /**\n   * Text format.\n   */\n  @property() case: \"upper\" | \"lower\" | \"dash\" | \"camel\" | \"raw\" | \"\" = \"\";\n  /**\n   * Text.\n   */\n  @property() text = \"\";\n\n  static styles: CSSResultGroup = [\n    GodownElement.styles,\n    css`\n      :host {\n        ${cssvarScope}--color: currentColor;\n        ${cssvarScope}--color-hover: currentColor;\n        ${cssvarScope}--color-active: currentColor;\n        display: inline-block;\n        text-overflow: ellipsis;\n        overflow-wrap: break-word;\n      }\n\n      span {\n        white-space: nowrap;\n        display: block;\n        text-overflow: inherit;\n        overflow-wrap: inherit;\n        overflow: hidden;\n        color: var(${cssvarScope}--color, inherit);\n      }\n\n      span:hover {\n        color: var(${cssvarScope}--color-hover, inherit);\n      }\n\n      span:active {\n        color: var(${cssvarScope}--color-active, inherit);\n      }\n\n      .hover:hover,\n      .active:active,\n      .always {\n        text-decoration: underline;\n      }\n\n      .none {\n        text-decoration: none;\n      }\n    `,\n  ];\n\n  protected render(): HTMLTemplate {\n    return html`<span class=\"${this.underline || \"always\"}\">${ifValue(this.text, this.t(), htmlSlot())}</span>`;\n  }\n\n  private t() {\n    const text = this.text;\n    switch (this.case) {\n      case \"upper\":\n        return text.toUpperCase();\n      case \"raw\":\n        return text;\n      case \"lower\":\n        return text.toLowerCase();\n      case \"camel\":\n        return dashToCamel(text);\n      case \"dash\":\n        return camelToDash(text);\n      default:\n        return text[0].toUpperCase() + text.slice(1);\n    }\n  }\n}\n\nexport default Text;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"g-text\": Text;\n  }\n}\n"]}
+{"version":3,"file":"text.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/text.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,SAAS,GAAG,MAAM,CAAC;AAEzB,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;GAEG;AAoDI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,aAAa;IAAhC;;QACL;;WAEG;QACS,cAAS,GAA2C,MAAM,CAAC;IAkBzE,CAAC;IAXW,MAAM;QACd,OAAO,IAAI,CAAA;;eAEA,OAAO,CAAC;YACf,CAAC,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,IAAI;YAClC,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;;QAEA,QAAQ,EAAE;YACN,CAAC;IACX,CAAC;CACF,CAAA;AAlBa;IAAX,QAAQ,EAAE;uCAA4D;AAK1C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCAAe;AAThC,IAAI;IAnDhB,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC;QACN,GAAG,CAAA;;UAEK,QAAQ;UACR,QAAQ;UACR,QAAQ;;;;;;;;;;;;;;qBAcG,QAAQ;;;;qBAIR,QAAQ;;;;qBAIR,QAAQ;;;;;;;;;;;;;;0BAcH,aAAa,CAAC,cAAc;;;;;;;GAOnD;KACF,CAAC;GACW,IAAI,CAsBhB;;AAED,eAAe,IAAI,CAAC","sourcesContent":["import { css, html, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { combine, htmlSlot } from \"../../lib/directives.js\";\nimport { GodownElement } from \"../../proto/godown-element.js\";\nimport { createScope, cssGlobalVars } from \"../../styles/global.js\";\n\nconst protoName = \"text\";\n\nconst cssScope = createScope(protoName);\n\n/**\n * {@linkcode Text } renders nowrap text.\n */\n@godown(protoName)\n@styles([\n  css`\n    :host {\n      --${cssScope}--color: currentColor;\n      --${cssScope}--color-hover: currentColor;\n      --${cssScope}--color-active: currentColor;\n      display: inline-block;\n      text-overflow: ellipsis;\n      overflow-wrap: break-word;\n    }\n\n    span {\n      white-space: nowrap;\n      width: 100%;\n      vertical-align: bottom;\n      display: inline-block;\n      text-overflow: inherit;\n      overflow-wrap: inherit;\n      overflow: hidden;\n      color: var(--${cssScope}--color, inherit);\n    }\n\n    span:hover {\n      color: var(--${cssScope}--color-hover, inherit);\n    }\n\n    span:active {\n      color: var(--${cssScope}--color-active, inherit);\n    }\n\n    .hover:hover,\n    .active:active,\n    .always {\n      text-decoration: underline;\n    }\n\n    .none {\n      text-decoration: none;\n    }\n\n    .clip{\n      background: var(--${cssGlobalVars.clipBackground});\n      display: inline-block;\n      color: transparent;\n      -webkit-text-fill-color: transparent;\n      background-clip: text;\n      -webkit-background-clip: text;\n    }\n  `,\n])\nexport class Text extends GodownElement {\n  /**\n   * Underline behavior.\n   */\n  @property() underline: \"none\" | \"hover\" | \"active\" | \"always\" = \"none\";\n\n  /**\n   * Set background-clip to text.\n   */\n  @property({ type: Boolean }) clip: boolean;\n\n  protected render() {\n    return html`<span\n      part=\"root\"\n      class=\"${combine({\n        [this.underline || \"always\"]: true,\n        clip: this.clip,\n      })}\"\n    >\n      ${htmlSlot()}\n    </span>`;\n  }\n}\n\nexport default Text;\n"]}

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

@@ -1,5 +1,5 @@
-import { type CSSResultGroup } from "../../.deps.js";
-import { GodownElement } from "../../supers/root.js";
+import { type PropertyValues } from "lit";
+import { GodownElement } from "../../proto/godown-element.js";
 /**
  * {@linkcode Time} renders a formatting time.
  */
@@ -13,10 +13,6 @@ export declare class Time extends GodownElement {
      * {@linkcode Time.fmt}
      */
     format: string;
-    /**
-     * Display content.
-     */
-    value: string;
     /**
      * Time.
      */
@@ -29,11 +25,12 @@ export declare class Time extends GodownElement {
      * The number of milliseconds that change with each update.
      */
     gap: number;
-    intervalID: number;
-    static styles: CSSResultGroup;
+    timeoutId: number;
     protected render(): string;
     protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
+    startTimeout(): number;
     /**
      * Y for year\
      * M for month\
@@ -51,10 +48,4 @@ export declare class Time extends GodownElement {
     static fmt(fm: string, tm: Date, em: string): string;
 }
 export default Time;
-declare global {
-    interface HTMLElementTagNameMap {
-        "time-bar": Time;
-        "g-time": Time;
-    }
-}
 //# sourceMappingURL=time.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"time.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/time.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAY,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIrD;;GAEG;AACH,qBACa,IAAK,SAAQ,aAAa;IACrC;;OAEG;IACS,MAAM,SAAO;IACzB;;;OAGG;IACS,MAAM,SAA8B;IAChD;;OAEG;IACS,KAAK,SAAM;IACvB;;OAEG;IACyB,IAAI,OAAc;IAC9C;;OAEG;IACyB,OAAO,SAAK;IACxC;;OAEG;IACyB,GAAG,SAAK;IAEpC,UAAU,EAAE,MAAM,CAAC;IAEnB,MAAM,CAAC,MAAM,EAAE,cAAc,CAM3B;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAI1B,SAAS,CAAC,YAAY;IAQtB,oBAAoB;IAIpB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM;CA6CrD;AAED,eAAe,IAAI,CAAC;AAEpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;QACjB,QAAQ,EAAE,IAAI,CAAC;KAChB;CACF"}
+{"version":3,"file":"time.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/time.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9D;;GAEG;AACH,qBAQa,IAAK,SAAQ,aAAa;IACrC;;OAEG;IACS,MAAM,SAAO;IACzB;;;OAGG;IACS,MAAM,SAA8B;IAChD;;OAEG;IACyB,IAAI,OAAc;IAC9C;;OAEG;IACyB,OAAO,SAAK;IACxC;;OAEG;IACyB,GAAG,SAAK;IAEpC,SAAS,EAAE,MAAM,CAAC;IAElB,SAAS,CAAC,MAAM,IAAI,MAAM;IAI1B,SAAS,CAAC,YAAY;IAMtB,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAS1D,oBAAoB;IAIpB,YAAY;IAMZ;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM;CA0CrD;AAED,eAAe,IAAI,CAAC"}

package/web-components/text/time.js

@@ -1,9 +1,10 @@
 var Time_1;
 import { __decorate } from "tslib";
-import { css, property } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { GodownElement } from "../../supers/root.js";
-const defineName = "time";
+import { css, property } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import styles from "../../decorators/styles.js";
+import { GodownElement } from "../../proto/godown-element.js";
+const protoName = "time";
 /**
  * {@linkcode Time} renders a formatting time.
  */
@@ -19,10 +20,6 @@ let Time = Time_1 = class Time extends GodownElement {
          * {@linkcode Time.fmt}
          */
         this.format = "YYYY-MM-DD hh:mm:ss UTFZ";
-        /**
-         * Display content.
-         */
-        this.value = "";
         /**
          * Time.
          */
@@ -37,17 +34,28 @@ let Time = Time_1 = class Time extends GodownElement {
         this.gap = 0;
     }
     render() {
-        return this.value || Time_1.fmt(this.format, this.time, this.escape);
+        return Time_1.fmt(this.format, this.time, this.escape);
     }
     firstUpdated() {
         if (this.timeout) {
-            this.intervalID = setInterval(() => {
-                this.time = new Date(this.time.getTime() + (this.gap || this.timeout));
-            }, Math.abs(this.timeout));
+            this.timeoutId = this.startTimeout();
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("timeout")) {
+            clearInterval(this.timeoutId);
+            if (this.timeout) {
+                this.timeoutId = this.startTimeout();
+            }
         }
     }
     disconnectedCallback() {
-        clearInterval(this.intervalID);
+        clearInterval(this.timeoutId);
+    }
+    startTimeout() {
+        return setInterval(() => {
+            this.time = new Date(this.time.getTime() + (this.gap || this.timeout));
+        }, Math.abs(this.timeout));
     }
     /**
      * Y for year\
@@ -67,8 +75,9 @@ let Time = Time_1 = class Time extends GodownElement {
         if (!fm) {
             return fm;
         }
+        tm = typeof tm === "string" ? new Date(tm) : tm;
         if (isNaN(tm.getTime())) {
-            return undefined;
+            return fm;
         }
         const rest = [];
         const replaced = `${em}${em}`;
@@ -93,12 +102,7 @@ let Time = Time_1 = class Time extends GodownElement {
         const result = [];
         for (const f of fm.split("").reverse()) {
             const s = switcher[f]?.pop();
-            if (s) {
-                result.push(s);
-            }
-            else {
-                result.push(f);
-            }
+            result.push(s ? s : f);
         }
         return result
             .reverse()
@@ -108,22 +112,12 @@ let Time = Time_1 = class Time extends GodownElement {
         });
     }
 };
-Time.styles = [
-    css `
-      :host {
-        text-align: center;
-      }
-    `,
-];
 __decorate([
     property()
 ], Time.prototype, "escape", void 0);
 __decorate([
     property()
 ], Time.prototype, "format", void 0);
-__decorate([
-    property()
-], Time.prototype, "value", void 0);
 __decorate([
     property({ type: Object })
 ], Time.prototype, "time", void 0);
@@ -134,7 +128,14 @@ __decorate([
     property({ type: Number })
 ], Time.prototype, "gap", void 0);
 Time = Time_1 = __decorate([
-    define(defineName)
+    godown(protoName),
+    styles([
+        css `
+    :host {
+      text-align: center;
+    }
+  `,
+    ])
 ], Time);
 export { Time };
 export default Time;

package/web-components/text/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/time.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, property } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"time\";\n\n/**\n * {@linkcode Time} renders a formatting time.\n */\n@define(defineName)\nexport class Time extends GodownElement {\n  /**\n   * Cancels the next character formatting.\n   */\n  @property() escape = \"%\";\n  /**\n   * Format strings.\n   * {@linkcode Time.fmt}\n   */\n  @property() format = \"YYYY-MM-DD hh:mm:ss UTFZ\";\n  /**\n   * Display content.\n   */\n  @property() value = \"\";\n  /**\n   * Time.\n   */\n  @property({ type: Object }) time = new Date();\n  /**\n   * If there is a value, update every gap or timeout.\n   */\n  @property({ type: Number }) timeout = 0;\n  /**\n   * The number of milliseconds that change with each update.\n   */\n  @property({ type: Number }) gap = 0;\n\n  intervalID: number;\n\n  static styles: CSSResultGroup = [\n    css`\n      :host {\n        text-align: center;\n      }\n    `,\n  ];\n\n  protected render(): string {\n    return this.value || Time.fmt(this.format, this.time, this.escape);\n  }\n\n  protected firstUpdated() {\n    if (this.timeout) {\n      this.intervalID = setInterval(() => {\n        this.time = new Date(this.time.getTime() + (this.gap || this.timeout));\n      }, Math.abs(this.timeout));\n    }\n  }\n\n  disconnectedCallback() {\n    clearInterval(this.intervalID);\n  }\n\n  /**\n   * Y for year\\\n   * M for month\\\n   * D for day\\\n   * h for hour\\\n   * m for minute\\\n   * s for second\\\n   * S for milli Second\\\n   * Z for time zone.\n   *\n   * @param fm Format string.\n   * @param tm Time.\n   * @returns Format result\n   */\n  static fmt(fm: string, tm: Date, em: string): string {\n    if (!fm) {\n      return fm;\n    }\n    if (isNaN(tm.getTime())) {\n      return undefined;\n    }\n    const rest = [];\n    const replaced = `${em}${em}`;\n    fm = fm.replace(new RegExp(`${em}([ZYMDhmsS${em}])`, \"g\"), (_, p1) => {\n      rest.push(p1);\n      return replaced;\n    });\n\n    function formatNumber(n: number, max = 2) {\n      return n.toString().padStart(max, \"0\").split(\"\");\n    }\n\n    const z = tm.getTimezoneOffset() / -60;\n    const switcher: Record<string, string[]> = {\n      Z: [z >= 0 ? \"+\" + z.toString() : z.toString()],\n      Y: tm.getFullYear().toString().split(\"\"),\n      M: formatNumber(tm.getMonth() + 1),\n      D: formatNumber(tm.getDate()),\n      h: formatNumber(tm.getHours()),\n      m: formatNumber(tm.getMinutes()),\n      s: formatNumber(tm.getSeconds()),\n      S: formatNumber(tm.getMilliseconds(), 3),\n    };\n    const result: string[] = [];\n    for (const f of fm.split(\"\").reverse()) {\n      const s = switcher[f]?.pop();\n      if (s) {\n        result.push(s);\n      } else {\n        result.push(f);\n      }\n    }\n    return result\n      .reverse()\n      .join(\"\")\n      .replace(new RegExp(replaced, \"g\"), () => {\n        return rest.shift();\n      });\n  }\n}\n\nexport default Time;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"time-bar\": Time;\n    \"g-time\": Time;\n  }\n}\n"]}
+{"version":3,"file":"time.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/time.ts"],"names":[],"mappings":"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","sourcesContent":["import { type PropertyValues } from \"lit\";\n\nimport { css, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport styles from \"../../decorators/styles.js\";\nimport { GodownElement } from \"../../proto/godown-element.js\";\n\nconst protoName = \"time\";\n\n/**\n * {@linkcode Time} renders a formatting time.\n */\n@godown(protoName)\n@styles([\n  css`\n    :host {\n      text-align: center;\n    }\n  `,\n])\nexport class Time extends GodownElement {\n  /**\n   * Cancels the next character formatting.\n   */\n  @property() escape = \"%\";\n  /**\n   * Format strings.\n   * {@linkcode Time.fmt}\n   */\n  @property() format = \"YYYY-MM-DD hh:mm:ss UTFZ\";\n  /**\n   * Time.\n   */\n  @property({ type: Object }) time = new Date();\n  /**\n   * If there is a value, update every gap or timeout.\n   */\n  @property({ type: Number }) timeout = 0;\n  /**\n   * The number of milliseconds that change with each update.\n   */\n  @property({ type: Number }) gap = 0;\n\n  timeoutId: number;\n\n  protected render(): string {\n    return Time.fmt(this.format, this.time, this.escape);\n  }\n\n  protected firstUpdated() {\n    if (this.timeout) {\n      this.timeoutId = this.startTimeout();\n    }\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has(\"timeout\")) {\n      clearInterval(this.timeoutId);\n      if (this.timeout) {\n        this.timeoutId = this.startTimeout();\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    clearInterval(this.timeoutId);\n  }\n\n  startTimeout() {\n    return setInterval(() => {\n      this.time = new Date(this.time.getTime() + (this.gap || this.timeout));\n    }, Math.abs(this.timeout));\n  }\n\n  /**\n   * Y for year\\\n   * M for month\\\n   * D for day\\\n   * h for hour\\\n   * m for minute\\\n   * s for second\\\n   * S for milli Second\\\n   * Z for time zone.\n   *\n   * @param fm Format string.\n   * @param tm Time.\n   * @returns Format result\n   */\n  static fmt(fm: string, tm: Date, em: string): string {\n    if (!fm) {\n      return fm;\n    }\n    tm = typeof tm === \"string\" ? new Date(tm) : tm;\n    if (isNaN(tm.getTime())) {\n      return fm;\n    }\n    const rest = [];\n    const replaced = `${em}${em}`;\n    fm = fm.replace(new RegExp(`${em}([ZYMDhmsS${em}])`, \"g\"), (_, p1) => {\n      rest.push(p1);\n      return replaced;\n    });\n\n    function formatNumber(n: number, max = 2) {\n      return n.toString().padStart(max, \"0\").split(\"\");\n    }\n\n    const z = tm.getTimezoneOffset() / -60;\n    const switcher: Record<string, string[]> = {\n      Z: [z >= 0 ? \"+\" + z.toString() : z.toString()],\n      Y: tm.getFullYear().toString().split(\"\"),\n      M: formatNumber(tm.getMonth() + 1),\n      D: formatNumber(tm.getDate()),\n      h: formatNumber(tm.getHours()),\n      m: formatNumber(tm.getMinutes()),\n      s: formatNumber(tm.getSeconds()),\n      S: formatNumber(tm.getMilliseconds(), 3),\n    };\n    const result: string[] = [];\n    for (const f of fm.split(\"\").reverse()) {\n      const s = switcher[f]?.pop();\n      result.push(s ? s : f);\n    }\n    return result\n      .reverse()\n      .join(\"\")\n      .replace(new RegExp(replaced, \"g\"), () => {\n        return rest.shift();\n      });\n  }\n}\n\nexport default Time;\n"]}

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

@@ -1,6 +1,5 @@
-import { type PropertyValueMap } from "../../.deps.js";
-import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../supers/root.js";
+import { type PropertyValueMap } from "../../_deps.js";
+import { GodownElement } from "../../proto/godown-element.js";
 /**
  * {@linkcode Typewriter} renders a typewriter effect to text.
  */
@@ -43,8 +42,7 @@ export declare class Typewriter extends GodownElement {
      * {@linkcode Typewriter.text} length.
      */
     get len(): number;
-    static styles: import("lit").CSSResult[];
-    protected render(): HTMLTemplate;
+    protected render(): import("lit").TemplateResult<1>;
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValueMap<this>): void;
     write(at?: number): void;
@@ -52,10 +50,4 @@ export declare class Typewriter extends GodownElement {
     end(): void;
 }
 export default Typewriter;
-declare global {
-    interface HTMLElementTagNameMap {
-        "typewriter-text": Typewriter;
-        "g-typewriter": Typewriter;
-    }
-}
 //# sourceMappingURL=typewriter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"typewriter.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/typewriter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,gBAAgB,EAAgB,MAAM,gBAAgB,CAAC;AAE1F,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,EAAe,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAKlE;;GAEG;AACH,qBACa,UAAW,SAAQ,aAAa;IAC3C;;OAEG;IACS,IAAI,SAAM;IACtB;;OAEG;IAC0B,OAAO,UAAS;IAC7C;;OAEG;IAC0B,KAAK,UAAS;IAC3C;;OAEG;IACyB,GAAG,SAAO;IACtC;;OAEG;IACyB,GAAG,SAAM;IACrC;;OAEG;IACyB,KAAK,SAAK;IACtC;;OAEG;IACyB,KAAK,SAAK;IACtC;;OAEG;IACM,OAAO,SAAM;IAEtB,SAAS,EAAE,MAAM,CAAC;IACN,EAAE,EAAE,WAAW,CAAC;IAE5B;;OAEG;IACH,IAAI,GAAG,WAEN;IAED,MAAM,CAAC,MAAM,4BA+BX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAIhC,SAAS,CAAC,YAAY;IAStB,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAM3D,KAAK,CAAC,EAAE,SAAa;IAYrB,IAAI;IAIJ,GAAG;CAGJ;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":"typewriter.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/text/typewriter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,gBAAgB,EAAgB,MAAM,gBAAgB,CAAC;AAK1F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAM9D;;GAEG;AACH,qBAiCa,UAAW,SAAQ,aAAa;IAC3C;;OAEG;IACS,IAAI,SAAM;IACtB;;OAEG;IAC0B,OAAO,UAAS;IAC7C;;OAEG;IAC0B,KAAK,UAAS;IAC3C;;OAEG;IACyB,GAAG,SAAO;IACtC;;OAEG;IACyB,GAAG,SAAM;IACrC;;OAEG;IACyB,KAAK,SAAK;IACtC;;OAEG;IACyB,KAAK,SAAK;IACtC;;OAEG;IACM,OAAO,SAAM;IAEtB,SAAS,EAAE,MAAM,CAAC;IACN,EAAE,EAAE,WAAW,CAAC;IAE5B;;OAEG;IACH,IAAI,GAAG,WAEN;IAED,SAAS,CAAC,MAAM;IAIhB,SAAS,CAAC,YAAY;IAStB,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAM3D,KAAK,CAAC,EAAE,SAAa;IAYrB,IAAI;IAIJ,GAAG;CAGJ;AAED,eAAe,UAAU,CAAC"}

package/web-components/text/typewriter.js

@@ -1,11 +1,13 @@
 import { __decorate } from "tslib";
-import { css, html, property, query, state } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot } from "../../lib/templates.js";
+import { css, html, property, query, state } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { htmlSlot } from "../../lib/directives.js";
 import { random } from "../../lib/utils.js";
-import { createScope, GodownElement } from "../../supers/root.js";
-const defineName = "typewriter";
-const cssvarScope = createScope(defineName);
+import { GodownElement } from "../../proto/godown-element.js";
+import { createScope } from "../../styles/global.js";
+const protoName = "typewriter";
+const cssScope = createScope(protoName);
 /**
  * {@linkcode Typewriter} renders a typewriter effect to text.
  */
@@ -52,7 +54,7 @@ let Typewriter = class Typewriter extends GodownElement {
         return this.text.length;
     }
     render() {
-        return html `${htmlSlot()}${this.content}<i class="${(this.ended && "hidden") || ""}"></i>`;
+        return html `${htmlSlot()}${this.content}<i part="cursor" class="${(this.ended && "hidden") || ""}"></i>`;
     }
     firstUpdated() {
         if (!this.text) {
@@ -85,38 +87,6 @@ let Typewriter = class Typewriter extends GodownElement {
         this.ended = true;
     }
 };
-Typewriter.styles = [
-    css `
-      :host {
-        ${cssvarScope}--cursor-width: .05em;
-        font-family: monospace;
-        white-space: nowrap;
-      }
-
-      i {
-        border-right: var(${cssvarScope}--cursor-width) solid;
-        margin-left: 0.02em;
-        animation: s 1.5s steps(1) infinite;
-      }
-
-      @keyframes s {
-        0% {
-          border-color: currentColor;
-        }
-        50% {
-          border-color: transparent;
-        }
-      }
-
-      slot {
-        display: none;
-      }
-
-      .hidden {
-        visibility: hidden;
-      }
-    `,
-];
 __decorate([
     property()
 ], Typewriter.prototype, "text", void 0);
@@ -145,7 +115,39 @@ __decorate([
     query("i")
 ], Typewriter.prototype, "_i", void 0);
 Typewriter = __decorate([
-    define(defineName)
+    godown(protoName),
+    styles([
+        css `
+    :host {
+      --${cssScope}--cursor-width: .05em;
+      font-family: monospace;
+      white-space: nowrap;
+    }
+
+    i {
+      border-right: var(--${cssScope}--cursor-width) solid;
+      margin-left: 0.02em;
+      animation: s 1.5s steps(1) infinite;
+    }
+
+    @keyframes s {
+      0% {
+        border-color: currentColor;
+      }
+      50% {
+        border-color: transparent;
+      }
+    }
+
+    slot {
+      display: none;
+    }
+
+    .hidden {
+      visibility: hidden;
+    }
+  `,
+    ])
 ], Typewriter);
 export { Typewriter };
 export default Typewriter;