godown 2.7.4 → 2.7.6

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

@@ -1,34 +1,9 @@
-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 Card} renders a card.
  */
 export declare class Card extends GodownElement {
-    /**
-     * Enable rotate.
-     */
-    rotate: boolean;
-    protected _main: HTMLElement;
-    protected _aside: HTMLElement;
-    static styles: CSSResultGroup;
-    protected render(): HTMLTemplate;
-    protected firstUpdated(): void;
-    /**
-     * Cancel the aside offset.
-     */
-    reset(): void;
-    /**
-     * Offset aside.
-     * @param e Mouse move event.
-     */
-    protected _drawRotate(e: MouseEvent): void;
+    protected render(): import("lit").TemplateResult<1>;
 }
 export default Card;
-declare global {
-    interface HTMLElementTagNameMap {
-        "card-item": Card;
-        "g-card": Card;
-    }
-}
 //# sourceMappingURL=card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,gBAAgB,CAAC;AAGjF,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAA6B,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAKhF;;GAEG;AACH,qBACa,IAAK,SAAQ,aAAa;IACrC;;OAEG;IAC0B,MAAM,UAAS;IAE7B,SAAS,CAAC,KAAK,EAAG,WAAW,CAAC;IAC7B,SAAS,CAAC,MAAM,EAAG,WAAW,CAAC;IAE/C,MAAM,CAAC,MAAM,iBAoEO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAyBhC,SAAS,CAAC,YAAY;IAOtB;;OAEG;IACH,KAAK;IAKL;;;OAGG;IACH,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,UAAU;CAWpC;AAED,eAAe,IAAI,CAAC;AAEpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,IAAI,CAAC;QAClB,QAAQ,EAAE,IAAI,CAAC;KAChB;CACF"}
+{"version":3,"file":"card.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/card/card.ts"],"names":[],"mappings":"AAKA,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAM1D;;GAEG;AACH,qBAwCa,IAAK,SAAQ,aAAa;IACrC,SAAS,CAAC,MAAM;CAqBjB;AAED,eAAe,IAAI,CAAC"}

package/web-components/card/card.js

@@ -1,149 +1,74 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
+import { css, html } 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/templates.js";
-import { createScope, cssvarValues, GodownElement } from "../../supers/root.js";
-const defineName = "card";
-const cssvarScope = createScope(defineName);
+import { htmlSlot } from "../../lib/directives.js";
+import GodownElement from "../../proto/godown-element.js";
+import { createScope, cssGlobalVars } from "../../styles/global.js";
+const protoName = "card";
+const cssScope = createScope(protoName);
 /**
  * {@linkcode Card} renders a card.
  */
 let Card = class Card extends GodownElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Enable rotate.
-         */
-        this.rotate = false;
-    }
     render() {
         const HEADER = "header";
         const FOOTER = "footer";
-        return html `<div>
-      <aside></aside>
-      <main>
-        ${ifValue(this.querySlot(HEADER), html `
-            ${htmlSlot(HEADER)}
-            <hr />
-          `)}
-        ${htmlSlot()}
-        ${ifValue(this.querySlot(FOOTER), html `
-            <hr />
-            ${htmlSlot(FOOTER)}
-          `)}
-      </main>
-    </div>`;
-    }
-    firstUpdated() {
-        if (this.rotate) {
-            this.addEvent(this._main, "mousemove", this._drawRotate.bind(this));
-            this.addEvent(this._aside, "mouseleave", this.reset.bind(this));
-        }
-    }
-    /**
-     * Cancel the aside offset.
-     */
-    reset() {
-        this._main.style.transition = ".5s";
-        this._main.style.transform = "none";
-    }
-    /**
-     * Offset aside.
-     * @param e Mouse move event.
-     */
-    _drawRotate(e) {
-        const { left, top, width, height } = this._main.getBoundingClientRect();
-        const { clientX, clientY } = e;
-        const offsetX = clientX - left;
-        const offsetY = clientY - top;
-        const rotate = 30;
-        const rotateX = -(rotate * (offsetY - height / 2)) / height / 1.5;
-        const rotateY = (rotate * (offsetX - width / 2)) / width / 1.5;
-        this._main.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
-        this._main.style.transition = "none";
+        return html `
+      ${ifValue(this.querySlot(HEADER), html `
+          ${htmlSlot(HEADER)}
+          <hr />
+        `)}
+      ${htmlSlot()}
+      ${ifValue(this.querySlot(FOOTER), html `
+          <hr />
+          ${htmlSlot(FOOTER)}
+        `)}
+    `;
     }
 };
-Card.styles = [
-    GodownElement.styles,
-    css `
-      :host {
-        ${cssvarScope}--offset: .25em;
-        ${cssvarScope}--background: var(${cssvarValues.main});
-        ${cssvarScope}--wapper-background: none;
-        ${cssvarScope}--outline: 0;
-        ${cssvarScope}--box-shadow: 0 .05em 1.2em 0 rgb(var(${cssvarValues.textRGB}) / 12%);
-        ${cssvarScope}--hr-width: 100%;
-        ${cssvarScope}--hr-height: .05em;
-        ${cssvarScope}--hr-background: #80808080;
-        ${cssvarScope}--padding: .75em;
-        margin: auto;
-        display: block;
-        width: fit-content;
-        color: var(${cssvarValues.text});
-        border-radius: 0.2em;
-      }
-
-      * {
-        border-radius: inherit;
-        min-height: inherit;
-        min-width: inherit;
-      }
-
-      main {
-        outline: var(${cssvarScope}--outline);
-        box-shadow: var(${cssvarScope}--box-shadow);
-        background: var(${cssvarScope}--background);
-        z-index: 2;
-        position: relative;
-      }
-
-      aside {
-        box-sizing: content-box;
-        z-index: 0;
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        background: var(${cssvarScope}--wapper-background);
-        filter: blur(1em);
-        padding: var(${cssvarScope}--offset);
-        margin: calc(-1 * var(${cssvarScope}--offset));
-      }
-
-      div {
-        width: fit-content;
-        position: relative;
-      }
+Card = __decorate([
+    godown(protoName),
+    styles([
+        css `
+    :host {
+      --${cssScope}--border-width: 1px;
+      --${cssScope}--border-color: transparent;
+      --${cssScope}--background: var(--${cssGlobalVars.background});
+      --${cssScope}--divider-width: 100%;
+      --${cssScope}--divider-height: var(--${cssScope}--border-width);
+      --${cssScope}--divider-background: rgb(54 54 54);
+      --${cssScope}--padding: .75em;
+      color: var(--${cssGlobalVars.foreground});
+      background: var(--${cssScope}--background);
+      border: solid var(--${cssScope}--border-width) var(--${cssScope}--border-color);
+      display: block;
+      flex-shrink: 0;
+      position: relative;
+      overflow: hidden;
+      box-sizing: border-box;
+      border-radius: 0.25em;
+      transition: 0.3s ease-in-out;
+    }
 
-      i {
-        position: absolute;
-      }
+    :host(:hover) {
+      --${cssScope}--border-color:var(--${cssScope}--divider-background);
+    }
 
-      hr {
-        width: var(${cssvarScope}--hr-width);
-        height: var(${cssvarScope}--hr-height);
-        margin: auto;
-        display: block;
-        background: var(${cssvarScope}--hr-background);
-      }
+    hr {
+      margin: auto;
+      width: var(--${cssScope}--divider-width);
+      height: var(--${cssScope}--divider-height);
+      background: var(--${cssScope}--divider-background);
+    }
 
-      slot {
-        display: block;
-        padding: var(${cssvarScope}--padding);
-      }
-    `,
-];
-__decorate([
-    property({ type: Boolean })
-], Card.prototype, "rotate", void 0);
-__decorate([
-    query("main")
-], Card.prototype, "_main", void 0);
-__decorate([
-    query("aside")
-], Card.prototype, "_aside", void 0);
-Card = __decorate([
-    define(defineName)
+    slot {
+      display: block;
+      padding: var(--${cssScope}--padding);
+    }
+  `,
+    ])
 ], Card);
 export { Card };
 export default Card;

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/card/card.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { ifValue } from \"../../lib/directives.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"card\";\nconst cssvarScope = createScope(defineName);\n\n/**\n * {@linkcode Card} renders a card.\n */\n@define(defineName)\nexport class Card extends GodownElement {\n  /**\n   * Enable rotate.\n   */\n  @property({ type: Boolean }) rotate = false;\n\n  @query(\"main\") protected _main!: HTMLElement;\n  @query(\"aside\") protected _aside!: HTMLElement;\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host {\n        ${cssvarScope}--offset: .25em;\n        ${cssvarScope}--background: var(${cssvarValues.main});\n        ${cssvarScope}--wapper-background: none;\n        ${cssvarScope}--outline: 0;\n        ${cssvarScope}--box-shadow: 0 .05em 1.2em 0 rgb(var(${cssvarValues.textRGB}) / 12%);\n        ${cssvarScope}--hr-width: 100%;\n        ${cssvarScope}--hr-height: .05em;\n        ${cssvarScope}--hr-background: #80808080;\n        ${cssvarScope}--padding: .75em;\n        margin: auto;\n        display: block;\n        width: fit-content;\n        color: var(${cssvarValues.text});\n        border-radius: 0.2em;\n      }\n\n      * {\n        border-radius: inherit;\n        min-height: inherit;\n        min-width: inherit;\n      }\n\n      main {\n        outline: var(${cssvarScope}--outline);\n        box-shadow: var(${cssvarScope}--box-shadow);\n        background: var(${cssvarScope}--background);\n        z-index: 2;\n        position: relative;\n      }\n\n      aside {\n        box-sizing: content-box;\n        z-index: 0;\n        height: 100%;\n        width: 100%;\n        position: absolute;\n        background: var(${cssvarScope}--wapper-background);\n        filter: blur(1em);\n        padding: var(${cssvarScope}--offset);\n        margin: calc(-1 * var(${cssvarScope}--offset));\n      }\n\n      div {\n        width: fit-content;\n        position: relative;\n      }\n\n      i {\n        position: absolute;\n      }\n\n      hr {\n        width: var(${cssvarScope}--hr-width);\n        height: var(${cssvarScope}--hr-height);\n        margin: auto;\n        display: block;\n        background: var(${cssvarScope}--hr-background);\n      }\n\n      slot {\n        display: block;\n        padding: var(${cssvarScope}--padding);\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    const HEADER = \"header\";\n    const FOOTER = \"footer\";\n    return html`<div>\n      <aside></aside>\n      <main>\n        ${ifValue(\n          this.querySlot(HEADER),\n          html`\n            ${htmlSlot(HEADER)}\n            <hr />\n          `,\n        )}\n        ${htmlSlot()}\n        ${ifValue(\n          this.querySlot(FOOTER),\n          html`\n            <hr />\n            ${htmlSlot(FOOTER)}\n          `,\n        )}\n      </main>\n    </div>`;\n  }\n\n  protected firstUpdated() {\n    if (this.rotate) {\n      this.addEvent(this._main, \"mousemove\", this._drawRotate.bind(this));\n      this.addEvent(this._aside, \"mouseleave\", this.reset.bind(this));\n    }\n  }\n\n  /**\n   * Cancel the aside offset.\n   */\n  reset() {\n    this._main.style.transition = \".5s\";\n    this._main.style.transform = \"none\";\n  }\n\n  /**\n   * Offset aside.\n   * @param e Mouse move event.\n   */\n  protected _drawRotate(e: MouseEvent) {\n    const { left, top, width, height } = this._main.getBoundingClientRect();\n    const { clientX, clientY } = e;\n    const offsetX = clientX - left;\n    const offsetY = clientY - top;\n    const rotate = 30;\n    const rotateX = -(rotate * (offsetY - height / 2)) / height / 1.5;\n    const rotateY = (rotate * (offsetX - width / 2)) / width / 1.5;\n    this._main.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;\n    this._main.style.transition = \"none\";\n  }\n}\n\nexport default Card;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"card-item\": Card;\n    \"g-card\": Card;\n  }\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/card/card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC3C,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,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEpE,MAAM,SAAS,GAAG,MAAM,CAAC;AACzB,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;GAEG;AAyCI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,aAAa;IAC3B,MAAM;QACd,MAAM,MAAM,GAAG,QAAQ,CAAC;QACxB,MAAM,MAAM,GAAG,QAAQ,CAAC;QACxB,OAAO,IAAI,CAAA;QACP,OAAO,CACP,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EACtB,IAAI,CAAA;YACA,QAAQ,CAAC,MAAM,CAAC;;SAEnB,CACF;QACC,QAAQ,EAAE;QACV,OAAO,CACP,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EACtB,IAAI,CAAA;;YAEA,QAAQ,CAAC,MAAM,CAAC;SACnB,CACF;KACF,CAAC;IACJ,CAAC;CACF,CAAA;AAtBY,IAAI;IAxChB,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC;QACN,GAAG,CAAA;;UAEK,QAAQ;UACR,QAAQ;UACR,QAAQ,uBAAuB,aAAa,CAAC,UAAU;UACvD,QAAQ;UACR,QAAQ,2BAA2B,QAAQ;UAC3C,QAAQ;UACR,QAAQ;qBACG,aAAa,CAAC,UAAU;0BACnB,QAAQ;4BACN,QAAQ,yBAAyB,QAAQ;;;;;;;;;;;UAW3D,QAAQ,wBAAwB,QAAQ;;;;;qBAK7B,QAAQ;sBACP,QAAQ;0BACJ,QAAQ;;;;;uBAKX,QAAQ;;GAE5B;KACF,CAAC;GACW,IAAI,CAsBhB;;AAED,eAAe,IAAI,CAAC","sourcesContent":["import { css, html } 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 GodownElement from \"../../proto/godown-element.js\";\nimport { createScope, cssGlobalVars } from \"../../styles/global.js\";\n\nconst protoName = \"card\";\nconst cssScope = createScope(protoName);\n\n/**\n * {@linkcode Card} renders a card.\n */\n@godown(protoName)\n@styles([\n  css`\n    :host {\n      --${cssScope}--border-width: 1px;\n      --${cssScope}--border-color: transparent;\n      --${cssScope}--background: var(--${cssGlobalVars.background});\n      --${cssScope}--divider-width: 100%;\n      --${cssScope}--divider-height: var(--${cssScope}--border-width);\n      --${cssScope}--divider-background: rgb(54 54 54);\n      --${cssScope}--padding: .75em;\n      color: var(--${cssGlobalVars.foreground});\n      background: var(--${cssScope}--background);\n      border: solid var(--${cssScope}--border-width) var(--${cssScope}--border-color);\n      display: block;\n      flex-shrink: 0;\n      position: relative;\n      overflow: hidden;\n      box-sizing: border-box;\n      border-radius: 0.25em;\n      transition: 0.3s ease-in-out;\n    }\n\n    :host(:hover) {\n      --${cssScope}--border-color:var(--${cssScope}--divider-background);\n    }\n\n    hr {\n      margin: auto;\n      width: var(--${cssScope}--divider-width);\n      height: var(--${cssScope}--divider-height);\n      background: var(--${cssScope}--divider-background);\n    }\n\n    slot {\n      display: block;\n      padding: var(--${cssScope}--padding);\n    }\n  `,\n])\nexport class Card extends GodownElement {\n  protected render() {\n    const HEADER = \"header\";\n    const FOOTER = \"footer\";\n    return html`\n      ${ifValue(\n        this.querySlot(HEADER),\n        html`\n          ${htmlSlot(HEADER)}\n          <hr />\n        `,\n      )}\n      ${htmlSlot()}\n      ${ifValue(\n        this.querySlot(FOOTER),\n        html`\n          <hr />\n          ${htmlSlot(FOOTER)}\n        `,\n      )}\n    `;\n  }\n}\n\nexport default Card;\n"]}

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

@@ -1,5 +1,4 @@
-import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownElement } from "../../supers/root.js";
+import { GodownElement } from "../../proto/godown-element.js";
 /**
  * {@linkcode Carousel} rotates child elements.
  */
@@ -9,20 +8,17 @@ export declare class Carousel extends GodownElement {
      */
     index: number;
     /**
-     * If autochangee > 0, the rotation will be automated.
+     * If autoChange > 0, the rotation will be automated.
      */
-    autochange: number;
+    autoChange: number;
     /**
      * Width.
      */
     width: string;
-    _section: HTMLElement;
+    _moveRoot: HTMLElement;
     intervalID: number;
     _clone: HTMLElement[];
-    static styles: import("lit").CSSResult[];
-    protected render(): HTMLTemplate;
-    private renderA;
-    remount(index?: number): void;
+    protected render(): import("lit").TemplateResult<1>;
     protected firstUpdated(): void;
     disconnectedCallback(): void;
     show(i: number): void;
@@ -30,11 +26,4 @@ export declare class Carousel extends GodownElement {
     prev(): void;
 }
 export default Carousel;
-declare global {
-    interface HTMLElementTagNameMap {
-        "carousel-slider": Carousel;
-        "rotation-pool": Carousel;
-        "g-carousel": Carousel;
-    }
-}
 //# sourceMappingURL=carousel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"carousel.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/carousel/carousel.ts"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,YAAY,EAAY,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIrD;;GAEG;AACH,qBACa,QAAS,SAAQ,aAAa;IACzC;;OAEG;IACyB,KAAK,SAAK;IACtC;;OAEG;IACyB,UAAU,SAAK;IAC3C;;OAEG;IACS,KAAK,SAAM;IAEL,QAAQ,EAAE,WAAW,CAAC;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,WAAW,EAAE,CAAM;IAE3B,MAAM,CAAC,MAAM,4BAqEX;IAEF,SAAS,CAAC,MAAM,IAAI,YAAY;IAUhC,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,KAAK,CAAC,EAAE,MAAM;IAOtB,SAAS,CAAC,YAAY;IAwBtB,oBAAoB;IAIpB,IAAI,CAAC,CAAC,EAAE,MAAM;IAMd,IAAI;IAWJ,IAAI;CAUL;AAED,eAAe,QAAQ,CAAC;AAExB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,QAAQ,CAAC;QAC5B,eAAe,EAAE,QAAQ,CAAC;QAC1B,YAAY,EAAE,QAAQ,CAAC;KACxB;CACF"}
+{"version":3,"file":"carousel.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/carousel/carousel.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9D;;GAEG;AACH,qBAuEa,QAAS,SAAQ,aAAa;IACzC;;OAEG;IACyB,KAAK,SAAK;IACtC;;OAEG;IACyB,UAAU,SAAK;IAC3C;;OAEG;IACS,KAAK,SAAM;IAEJ,SAAS,EAAE,WAAW,CAAC;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,WAAW,EAAE,CAAM;IAE3B,SAAS,CAAC,MAAM;IAchB,SAAS,CAAC,YAAY;IAwBtB,oBAAoB;IAIpB,IAAI,CAAC,CAAC,EAAE,MAAM;IAMd,IAAI;IAWJ,IAAI;CAUL;AAED,eAAe,QAAQ,CAAC"}

package/web-components/carousel/carousel.js

@@ -1,9 +1,13 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot, htmlStyle, svgArrow } from "../../lib/templates.js";
-import { GodownElement } from "../../supers/root.js";
-const defineName = "carousel";
+import { css, html, property } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { part } from "../../decorators/part.js";
+import { styles } from "../../decorators/styles.js";
+import { htmlSlot } from "../../lib/directives.js";
+import { htmlStyle } from "../../lib/directives.js";
+import { svgArrow } from "../../lib/icons.js";
+import { GodownElement } from "../../proto/godown-element.js";
+const protoName = "carousel";
 /**
  * {@linkcode Carousel} rotates child elements.
  */
@@ -15,9 +19,9 @@ let Carousel = class Carousel extends GodownElement {
          */
         this.index = 0;
         /**
-         * If autochangee > 0, the rotation will be automated.
+         * If autoChange > 0, the rotation will be automated.
          */
-        this.autochange = 0;
+        this.autoChange = 0;
         /**
          * Width.
          */
@@ -26,25 +30,17 @@ let Carousel = class Carousel extends GodownElement {
     }
     render() {
         const style = this.width && `:host{width:${this.width.split(";")[0]};}`;
-        return html `<div>
-      <a class="prev" @click="${this.prev}">${this.renderA("pre")}</a>
-      <section>${htmlSlot()}</section>
+        return html `<div part="root">
+      <a part="prev" class="prev" @click="${this.prev}">
+        <i>${svgArrow()}</i>
+      </a>
+      <div part="move-root">${htmlSlot()}</div>
+      <a part="next" class="next" @click="${this.next}">
+        <i>${svgArrow()}</i>
+      </a>
       ${htmlStyle(style)}
-      <a class="next" @click="${this.next}">${this.renderA("suf")}</a>
     </div>`;
     }
-    renderA(slot) {
-        if (this.querySelector(`[slot=${slot}]`)) {
-            return htmlSlot(slot);
-        }
-        return html `<i>${svgArrow()}</i>`;
-    }
-    remount(index) {
-        super.remount(undefined);
-        if (index !== undefined) {
-            this.show(index);
-        }
-    }
     firstUpdated() {
         if (this.assigned.length) {
             if (!this.width) {
@@ -62,10 +58,10 @@ let Carousel = class Carousel extends GodownElement {
             this.insertBefore(first, this.firstElementChild);
             this.show(this.index);
         }
-        if (this.autochange) {
+        if (this.autoChange) {
             this.intervalID = setInterval(() => {
                 this.next();
-            }, this.autochange);
+            }, this.autoChange);
         }
     }
     disconnectedCallback() {
@@ -73,14 +69,14 @@ let Carousel = class Carousel extends GodownElement {
     }
     show(i) {
         this.index = i;
-        this._section.style.transform = `translateX(-${i}00%)`;
-        this._section.style.transition = "inherit";
+        this._moveRoot.style.transform = `translateX(-${i}00%)`;
+        this._moveRoot.style.transition = "inherit";
     }
     next() {
         if (this.index === this.assigned.length - 3) {
-            this._section.style.transform = `translateX(100%)`;
-            this._section.style.transition = "none";
-            this._section.getBoundingClientRect();
+            this._moveRoot.style.transform = `translateX(100%)`;
+            this._moveRoot.style.transition = "none";
+            this._moveRoot.getBoundingClientRect();
             this.show(0);
         }
         else {
@@ -89,9 +85,9 @@ let Carousel = class Carousel extends GodownElement {
     }
     prev() {
         if (this.index === 0) {
-            this._section.style.transform = `translateX(-${this.assigned.length - 2}00%)`;
-            this._section.style.transition = `none`;
-            this._section.getBoundingClientRect();
+            this._moveRoot.style.transform = `translateX(-${this.assigned.length - 2}00%)`;
+            this._moveRoot.style.transition = `none`;
+            this._moveRoot.getBoundingClientRect();
             this.show(this.assigned.length - 3);
         }
         else {
@@ -99,90 +95,90 @@ let Carousel = class Carousel extends GodownElement {
         }
     }
 };
-Carousel.styles = [
-    css `
-      :host {
-        display: block;
-        transition: all 0.2s;
-      }
+__decorate([
+    property({ type: Number })
+], Carousel.prototype, "index", void 0);
+__decorate([
+    property({ type: Number })
+], Carousel.prototype, "autoChange", void 0);
+__decorate([
+    property()
+], Carousel.prototype, "width", void 0);
+__decorate([
+    part("move-root")
+], Carousel.prototype, "_moveRoot", void 0);
+Carousel = __decorate([
+    godown(protoName),
+    styles([
+        css `
+    :host {
+      display: block;
+      transition: all 0.2s;
+    }
 
-      div {
-        overflow: hidden;
-      }
+    [part="root"] {
+      overflow: hidden;
+    }
 
-      div,
-      section {
-        width: 100%;
-        display: flex;
-        position: relative;
-        transition: inherit;
-      }
+    div {
+      width: 100%;
+      display: flex;
+      position: relative;
+      transition: inherit;
+    }
 
-      a {
-        position: absolute;
-        height: 100%;
-        width: fit-content;
-        z-index: 1;
-        display: flex;
-        align-items: center;
-      }
+    a {
+      position: absolute;
+      height: 100%;
+      width: -moz-fit-content;
+      width: fit-content;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+    }
 
-      .prev {
-        left: 0;
-      }
+    [part="prev"] {
+      left: 0;
+    }
 
-      .prev svg {
-        transform: rotate(180deg);
-      }
+    [part="prev"] svg {
+      transform: rotate(180deg);
+    }
 
-      .next {
-        right: 0;
-      }
+    [part="next"] {
+      right: 0;
+    }
 
-      i {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: 0.3s;
-        width: 2em;
-        height: 100%;
-      }
+    i {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: 0.3s;
+      width: 2em;
+      height: 100%;
+    }
 
-      svg {
-        flex: 1;
-        max-height: 100%;
-        max-width: 100%;
-      }
+    svg {
+      flex: 1;
+      max-height: 100%;
+      max-width: 100%;
+    }
 
-      a:hover i {
-        background-color: #0000001a;
-        width: 2.2em;
-      }
+    a:hover i {
+      background-color: #0000001a;
+      width: 2.2em;
+    }
 
-      i svg path {
-        stroke-width: 4;
-      }
+    i svg path {
+      stroke-width: 4;
+    }
 
-      slot::slotted(*) {
-        flex-shrink: 0 !important;
-      }
-    `,
-];
-__decorate([
-    property({ type: Number })
-], Carousel.prototype, "index", void 0);
-__decorate([
-    property({ type: Number })
-], Carousel.prototype, "autochange", void 0);
-__decorate([
-    property()
-], Carousel.prototype, "width", void 0);
-__decorate([
-    query("section")
-], Carousel.prototype, "_section", void 0);
-Carousel = __decorate([
-    define(defineName)
+    slot::slotted(*) {
+      flex-shrink: 0 !important;
+    }
+  `,
+    ])
 ], Carousel);
 export { Carousel };
 export default Carousel;